Comentarios en HTML
Una práctica muy importante en cualquier lenguaje de programación es el de comentar nuestro código, ya que al transcurrir el tiempo, ni nosotros mismos sabemos lo que hicimos (creame, pasa muy seguido).
Los comentarios no son tomados en cuenta con por los navegadores: unicamente sirven para los programadores. Sin embargo, los comentarios en HTML si los puede ver dentro del código. Para hacer comentarios necesitamos las llaves <!-- y -->
Las listas de definición
El uso de las listas de difinición están cayendo en desuso. El funcionamiento de las listas de definición es similar al de un diccionario, por un lado el término y por el otro la definición de ese término o palabra. La
etiqueta
<dl> crea la lista de definición y las etiquetas
<dt> y
<dd> definen respectivamente el término y la descripción de cada elemento de la lista.
<dl>
<dt>Byte</dt>
<dd>Conjunto de 8 bits con significado</dd>
</dl>
La etiqueta p de párrafo
La etiqueta <p> se utiliza para representar un párrafo. La etiqueta p es soportada por todos los navegadores (gracias a Dios).
Los hipervínculos
Dentro de una página web, los hipervínculos son las palabras, párrafos o imágenes que al darles click, te llevarán a otro lugar, ya sea a otra página, o a una sección en específico dentro de la misma página; desempeñan una función muy útil, por ello saber cómo aprender a programar hipervínculos a la hora de crear un sitio web es muy importante.
Otra de las características que tienen los hipervínculos es que al pasar el cursor sobre ellos, el ícono del cursor cambia y se convierte en una mano.
Las etiquetas de encabezado
La etiqueta de encabezado H1 y sus hermanas menores son una de las
herramientas más potentes con las que contamos a nivel de SEO para
decirle a los buscadores de qué va el contenido de nuestra página web.
Sin embargo, y aunque su concepto es en origen sencillo, darles un uso
adecuado no es algo conocido por todos.
Las etiquetas de
encabezados han tenido una importancia vital en el posicionamiento en
buscadores desde sus orígenes, y con pequeñas variaciones en el peso de
su influencia se han ido manteniendo en el tiempo como algo que
definitivamente hay que cuidar, desde la fase de maquetación del diseño
web hasta la creación de contenidos para un portal en funcionamiento.
Estas nociones básicas deben ser pues conocidas por diseñadores,
programadores y personas encargadas de la redacción de texto para web.
La etiqueta <strong>
Esta etiqueta se usa para reforzar el texto en html.
El caso es que prácticamente todos los navegadores la interpretan de la misma forma poniendo el texto que las engloba en negrita, ¿entonces cual uso?.
Hay muchos webmaster que se inclinan por la etiqueta <strong> porque afirman que es mejor para el posicionamiento ya que google las interpreta como palabras clave, otros nos comentan que además aportan semántica al contenido a través de CSS y por tanto mejor accesibilidad.
Anclas: navegar dentro del documento
Sirve para definir posiciones dentro de un documento y se puede usar como destino de hiperenlaces. Para crear un ancla (anchor) se procede de la siguiente manera:
<A NAME="nombre_etiqueta">Texto del elemento ancla</A>
Visualmente est elemento no tiene niun efecto, pero si lo tiene en forma interactiva con el usuario. Para hacer referencia al ancla o posición se hace el siguiente tipo de hiperenlace:
<A HREF="#nombre_etiqueta">Texto del hiperenlace</A>
De esta manera accederemos a la posición donde hayamos puesto el ancla Por ejemplo al final de este documento hemos puesto la siguiente ancla:
<a name="final">Este es el final del documento!!</a>
Y para acceder a esa posición usamos el siguiente hipernlace:
<A HREF="#final">Vamos al final del documento</A>
La etiqueta img
La etiqueta <IMG> te servirá para situar imágenes en una página. Es una etiqueta "verdadera", pues no tiene etiqueta de cierre:
La etiqueta <IMG> requiere un origen de datos obligatorio dado por el atributo SRC=. Indica la imagen en cuestión:
<IMG SRC="imagen.gif">
Tan sólo el código anterior es necesario para añadir una imagen a tu página, mostrando la imagen situada en el mismo directorio del documento HTML.
Tablas
Las tablas son un poderosa herramienta a la hora de mostrar y
relacionar cierto tipo de información. Aún cuando muchos sitios son
construidos (por su naturaleza) sin usar una simple tabla, existen
algunas ocasiones en que el valor de las tablas se vuelve escencial.
En las próximas líneas intentaremos cubrir todas las características
de las tablas para estar listos para utilizarlas cuando se necesite.
Otras etiquetas
Dentro de HTML tendremos otras etiquetas, por ejemplo:
<br> Para un salto de linea
<hr> Dibuja una línea
<adress> una dirección física
Etcétera
La etiqueta div
La etiqueta <div> se emplea para definir un bloque de contenido o
sección de la página, para poder aplicarle diferentes estilos e
incluso para realizar operaciones sobre ese bloque específico.
El uso de la etiqueta
div es sencillo. Observemos este ejemplo:
<div>
<h1>Índice</h1>
Página principal<br />
Material multimedia<br />
Autores<br />
</div>
Hemos empleado la etiqueta para crear un bloque, que hará las
veces de índice de contenidos. Visualmente la etiqueta no provoca
ningún cambio, pero en la estructura interna del documento hemos
aplicado una división muy importante. La figura muestra el texto del
ejemplo; no hay ninguna diferencia visible.
Estilos en cascada
Las hojas de estilo en cascada (Cascading Style Sheets, o sus siglas CSS) hacen referencia a un lenguaje de hojas de estilos usado para describir la presentación semántica (el aspecto y formato) de un documento escrito en lenguaje de marcas. Su aplicación más común es dar estilo a páginas webs escritas en lenguaje HTML y XHTML, pero también puede ser aplicado a cualquier tipo de documentos XML, incluyendo SVG y XUL.
La información de estilo puede ser adjuntada como un documento separado o en el mismo documento HTML. En este último caso podrían definirse estilos generales en la cabecera del documento o en cada etiqueta particular mediante el atributo "<style>".
Colores en estilos en cascada
CSS funciona a base de reglas, es decir, declaraciones sobre el
estilo de uno o más elementos. Las hojas de estilo están compuestas por
una o más de esas reglas aplicadas a un documento HTML o XML. La regla
tiene dos partes: un selector y la declaración. A su vez la declaración
está compuesta por una propiedad y el valor que se le asigne.
h1 {color: red;}
h1 es el selector
{color: red;} es la declaración
El selector funciona como enlace entre el documento y el estilo,
especificando los elementos que se van a ver afectados por esa
declaración. La declaración es la parte de la regla que establece cuál
será el efecto. En el ejemplo anterior, el selector
h1 indica que todos los elementos
h1 se verán afectados por la declaración donde se establece que la propiedad
color va a tener el valor
red (rojo) para todos los elementos
h1 del documento o documentos que estén vinculados a esa hoja de estilos.
Manejo de fuentes con CSS
Los css nos da la flexibilidad de poder darle color, tamaño, grueso y otras propiedades que trataremos de explicarla las más importantes. Antes de la versión 5 de HTML, no se podía manejar más que las fuentes que el usuario tuviera instaladas en su computadora. Era por esto que utilizábamos al menos tres tipos de fuente por si una fallaba, el navegador buscaba la segunda, y asi, hasta encontrar una de las fuentes más básicas. Algunos de los conjuntos de fuente más comunes son:
Arial, Helvetica, sans-serif
“Times New Roman”, Times, serif
“Courier New”, Courier, monospace
Georgia, “Times New Roman”, Times, serif
Verdana, Arial, Helvetica, sans-serif
Geneva, Arial, Helvetica, sans-serif
Si el nombre de la fuente contenia espacios, es necesario utilizar las comillas, por ejemplo "Times New Roman"
Modificar los hipervínculos con estilos en cascada
Cambiar el formato de los hipervínculos o "links" por medio de los estilos en cascada es fundamental en el desarrollo y diseño de páginas we. Podemos modificar los colores, el background o cambiar el clásico color azul, sin embargo, siempre es necesario que el usuario sepa cuál frase, palabra o imagen contiene un hipervínculo.
Lugar donde se pueden escribir los estilos en cascada
La ubicación de nuestras reglas de estilo es muy importante, porque
depende del órden las reglas se irán ejecutando. Podemos localizar
nuestro código en ohas externas, propiamente conocidas como stylesheets,
podemos escribir el código dentro de la etiqueta <style>, dentro
de la página html o incluso dentro de la etiqueta, como un atributo de
la misma, aunque esta última ubicación no se recomienda, porque se
pierde toda la versatilidad que nos ofrecen los estilos en cascada.
La prioridad dependerá de la cercania de la regla al elemento HTML. De ahí su nombre de estilos en cascada.
Selectores, unidades en CSS
El manejo de selectores es una de las habilidades más importantes cuando se intenta utilizar los estilos en cascada en forma profesional. hasta este punto hemos utilizado las reglas de cascada que inician con un selector. Este puede ser el nombre de una etiqueta, por ejemplo, h1, de una clase, por ejemplo .rojo o de una división #encabezado.
Cuando utilizamos por selector un nombre de etiqueta, todas las etiquetas de esa clase srán modificadas. En cambio, los identificadores sólo podemos tener uno en todo el documennto. Las clases pueden aplicarse varias veces, pero hay que aplicarlas en forma manual.
Podemos aplicar a varios selectores las mismas reglas de estilo por medio de las comas, por ejemplo:
h1, h2, h3, h4{ color:white; }
Selectores compuestos
Muchas veces los selectores simples, como la etiqueta, la clase y los
identificadores no son suficientes para realizar el diseño de nuestra
página web, por lo que nos será importante hacer "excepciones". En un
buen diseño web, las excepciones no deberán de ser la regla. Para ello
necesitamos escribir los selectores principales a la izquierda y los
particulares a la derecha, por ejemplo:
#menu a { color:red; }
Por
lo general leeremos estos selectores de derecha a izquierda, es decir:
"todas las etiquetas 'a' que se encuentren dentro de la división 'menu'
su texto será de color rojo.
Valores y unidades en CSS
El manejo de unidades es fundamental dentro del diseño y desarrollo
de nuestra página web. En HTML en general y en CSS en particular,
tendremos dos tipos de unidades: las flexibles y las fijas. Siempre será
mejor utilizar las primeras, por ejemplo el pixel (px) la em (que es la
medida de la letra 'm' de la fuente base).
La
medida em no tiene nada que ver con la etiqueta de HTML <em> que
modifica los textos a itálicas. Por lo general esta medida es la
adecuada para manejar los tamaños de los textos y sus atributos como el
padding y el margen.
Validar nuestros CSS
Una parte importante, antes de lanzar nuestra página web al mundo, es
validrla, es decir, verificar que todas sus etiquetas y estilos en
cascada sean compatibles con los navegadores en uso. Para ello contamos
con magníficos validadores. El más popular es el de la W3C. No se
preocupe si encuentra errores o mensajes de advertencia, pues es muy
dificil que una página que no sea tribial pueda pasar esta validación
sin algún mensaje.
El modelo de caja
Los márgenes
El modelo de caja es uno de los conceptos más importantes al momento
de formatear nuestra página, y puede resultar un verdadero dolor de
cabeza si no poseemos los conocimientos adecuados para ello. Asi que
resulta fundamental conocer bien los términos de margen, padding, border
y área de contenido, para no pasar noches en vela porque nuestro modelo
se "mueve", y culpar de ellos al HTML y a los CSS.
Otro
problema es que algunos navegadores no "hablan" muy bien CSS y hacen
las cosas algo diferentes, y en el caso de Internet Explorer, puede
hacer las cosas muy diferentes, si de CSS se trata.
Los bordes
Entre el margen y el padding se extiende el borde o
border.
Este amigo puede ser neutral, si es que su ancho es igual a cero, o
puede cambiar dependiend de su ubucación, También para él utilizaremos
el nemónico
TRBL (top, right, bottom y left), que nos
recuerda cómo se toman los valores dentro de la sentencia
correspondiente. Como veremos, es posible definir un ancho, un color y
un estilo al borde de nuestra caja, es decir, tendremos doce posibles
comando tomando los cuatro bordes con tres características (ancho, color
y estilo).
La propiedad margin:auto
La propiedad auto nos permitirá centrar divisiones dentro de sus
contenedores. Desaformtunadamente no contamos con una instrucción que
centre enforma automática o que flote una división al centro. Con auto
en el margen a izquierda y derecha, podemos hacer que una división flote
dentro de su contenedor, pero necesitamos definir un ancho (width) para
ello, ya sea en pixeles o porcentaje.
El color de fondo: background
Una propiedad fundamental para modificar el color de nuestra página
web, asi como su diseño, será la propiedad background, la cual la tendrá
cualquier etiqueta que posea el modelo de caja. Podremos cambiar el
color o colocar una imagen que se repita o se adapte a su contenido.
El
color de fondo del área se extiende hasta debajo de la línea del borde.
Asi, si la línea del borde muestra espacios, por ejemplo, dashed,
dotted o double el color de fondo del elemento se muestra a través de
ellos.
Una pieza importantísima para el desarrollo de una composición o
maquetado de una página web es comprender cómo se acomodan las cajas, es
decir, su flujo natural, y cómo podemos cambiar éste. En este video
iniciaremos por comprender cómo es el flujo "natural" de las cajas para
después poder modificarlos.
Para realizar layouts más interesantes, necesitaremos que las divisiones
comiencen a flotar. Para ello utilizaremos la propiedad float con la
mayoría de sus parámetros.
En CSS casi siempre hay varias maneras de resolver un mismo problema y
esto se aplica al diseño de las páginas o maquetación. Todas las
posibles soluciones tienen ventajas y desventajas. Asi que mientras no
exista una varita mágica que solucione todos nuestros problemas,
revisaremos las diferentes formas de hacer un buen layout de una página
web.
