La estructura de un documento HTML, CSS y los elementos P, H1-H6, PRE y BR.
Antes de meternos en materia, vamos a repasar brevemente los conceptos más básicos y a establecer los principios por los que me regiré a la hora de redactar el resto de tutoriales.
Lo primero es aclarar que estos tutoriales no van solo de HTML. También trabajaremos con hojas de estilo, las CSS, que serán las encargadas de definir, como su nombre indica, los estilos de las etiquetas de HTML. Por poner un ejemplo, en HTML utilizaremos la etiqueta o tag < p > para escribir dentro un texto que va a ocupar un párrafo en nuestro navegador, y en la hoja de estilo definiremos por ejemplo el color y tamaño de la letra del texto de ese párrafo.
Como a través de los tutoriales definiré elementos tanto de HTML cómo de CSS, para que no haya dudas, todas las definiciones de elementos de HTML irán sobre fondo azul oscuro, y las de CSS sobre fondo negro.
Muchas de las definiciones son extraídas tal cual o simplificadas de la Recomendación de W3C sobre las Hojas de Estilo en Cascada, Nivel 2 Revisión 1 (CSS2.1), y de la Recomendación del W3C «HTML 4.01 Specification» que están en la Sección HTML/CSS de esta web.
NOTA: Todas las etiquetas o tags que se representan entre los signos de <> han de escribirse sin ningún espacio en su interior, aunque en la representación aparezcan para que se lean con mayor claridad.
Todo documento HTML tiene una estructura que lo identifica claramente. Son unas cuantas etiquetas de apertura y cierre que lo identifican y lo dividen en partes con funcionalidades diferentes.
< HTML > < / HTML >
Son las etiquetas primera y última de nuestro código html. Antes de < HTML > no puede ir nada que deseemos que el navegador interprete como código HTML, y después de < / HTML > tampoco.
< HEAD > < / HEAD >
Define el principio y fin de la sección de cabecera, donde aparecen informaciones sobre el documento, entre ellas el título, autor…
< BODY > < / BODY >
Define el principio y el fin del cuerpo del documento. Todo el código de nuestra web irá entre estas dos etiquetas.
Así, un brevísimo ejemplo de tu primera web podría ser el fichero ejemplo1.html:
Donde la línea < p >Hola< /p > especifica que aparezca en pantalla un párrafo con la palabra hola y la linea < title > especifica documentalmente el titulo de nuestra pagina (en la parte superior izquierda de la ventana del navegador aparecerá este título).
NOTA: Tanto el documento HTML como la hoja de estilo, hay que escribirlos sobre un fichero de texto sin formato. Un editor que podria valer es el notepad, por ejemplo. El nombre del documento HTML debe tener extensión .htm o .html y el de la hoja de estilo, .css.
Vamos a aprender algunas formas de escribir contenidos en nuestra página, pero antes de meternos de lleno en elementos de HTML voy a definir una distinción importante entre ellos:
HTML contiene dos tipos de elementos, los elementos «en bloque» o «de bloque» y los elementos «en línea» o «a nivel de texto».
Elementos «en línea»:
Solo pueden contener datos y otros elementos en línea. Se representan de izquierda a derecha, es decir, un elemento en línea se posiciona a la derecha del último elemento en línea mostrado, y así sucesivamente.
Elementos «en bloque»:
Pueden contener otros elementos en bloque y elementos en línea. Se representan de arriba a abajo, es decir, un elemento en bloque se posiciona debajo del último elemento posicionado en la página. Esto es así porque provocan un salto de línea al principio y al final de su representación.
NOTA: Tan solo por las dos definiciones, se entiende que el concepto de elemento de bloque implica mayor tamaño que el de elemento en línea. De hecho, utilizaremos los elementos de bloque para que sean contenedores, tanto de otros elementos de bloque como de elementos en línea.
Puede que ahora sea un poco lioso, pero a medida que avancemos todo se verá más fácil. Como ejemplo rápido, diremos que el elemento HTML < p > es un elemento en línea que sirve para mostrar un párrafo de texto y que, de contener otros elementos, serán elemento en línea, mientras que < div > es un elemento de bloque que sirve para especificar un contenedor a modo de caja donde introducir otros elementos.
Ahora si que definimos algunos elementos para escribir textos en HTML
< P > < / P >:
Es el elemento que sirve para escribir un párrafo de texto. Es un elemento en línea.
< H1 >< / H1 >,< H2 >< / H2 >,< H3 >< / H3 >,< H4 >< / H4 >,< H5 >< / H5 >,< H6 >< / H6 >:
Son los llamados encabezados. Son elementos en línea. Suelen utilizarse para describir las secciones que introducen. Por ejemplo, podríamos escribir el titular de una noticia con un encabezado, y el texto de la noticia con párrafos.
Hay 6 niveles de encabezados, siendo el H1 el más importante y el H6 el menos importante. Visualmente, los navegadores le asignan fuentes mayores a los encabezados más importantes, y menores a los menos importantes.
< BR >:
Fuerza un salto de línea. Es importante resaltar que no tiene etiqueta de cierre.
< PRE >< / PRE >:
Este elemento nos dice que todo el texto contenido en él está pre formateado, es decir, aparecerá en el navegador tal cual se escribe.
NOTA: En elemento distintos de < PRE >, la acumulación de espacios en blanco se representan como uno sólo, y un espacio en blanco justo después de una etiqueta de apertura, o justo antes de una de cierre, pueden no ser mostrados.
NOTA: El aspecto visual puede cambiar dependiendo del tamaño de la ventana. Observe el efecto de los distintos tamaños de los encabezados, el resultado de aplicar la etiqueta < BR > entre párrafos (un espacio interlineal mucho más grande) y la desaparición de los múltiples espacios entre palabras excepto en el texto formateado con el tag < PRE >.
Ya sabemos como escribir un texto y algunos encabezados en nuestra web, pero aun no hemos utilizado para nada las hojas de estilos.
Se pueden definir estilos de dos maneras principalmente. Se puede hacer directamente en el mismo documento html o también se puede hacer en un documento aparte. Para definir los estilos en el mismo documento, hay que declarar las etiquetas < STYLE > y < / STYLE > dentro de la cabecera del documento (entre el < HEAD > y el < / HEAD >). De momento utilizaremos esta forma. En el siguiente tutorial se explica como hacerlo en un archivo distinto.
Para empezar a usar los estilos, voy a definir una única propiedad de CSS para que nos sirva de ejemplo, aunque en un tutorial de CSS mas completo volveré a incidir sobre ella.
COLOR
Propiedad que determina el color de la fuente de texto. Puede ser una palabra clave o un valor numérico RGB (Red, Green, Blue). Las palabras clave se corresponden con los valores numéricos que se representan, pero se puede seleccionar el código numérico que se desee (Lo normal es utilizar cualquier software de edición de gráficos para elegir visualmente el color que nos guste y luego ver el código numérico que le corresponde).
La lista de las palabras claves con sus valores son:
maroon #800000, red #ff0000, orange #ffA500, yellow #ffff00, olive #808000, purple #800080, fuchsia #ff00ff, white #ffffff, lime #00ff00, green #008000, navy #000080, blue #0000ff, aqua #00ffff, teal #008080, black #000000, silver #c0c0c0, gray #808080.
La sintaxis de las CSS consiste en un Selector seguido por un bloque de declaraciones.
Un bloque de declaraciones comienza con una llave izquierda ({) y termina con la llave derecha (}) correspondiente. En medio de ellas debe haber una lista de cero o más declaraciones separadas por punto y coma (;).
Podemos usar un atributo, como por ejemplo COLOR, directamente sobre un nombre de elemento HTML. Esto provocará que todos los elementos de este tipo que utilicemos en nuestro documento, se veran afectados por loa atributos que hayamos designado en la hoja de estilos para esa etiqueta.
Por ejemplo, si hacemos un
P {color:blue;}
Estaremos asignando el color azul a cualquier texto que pongamos en nuestra pagina bajo la etiqueta < p >.
También podríamos hacer
.letraazul {color:blue;}
Esto lo que hace es definir la clase letra azul. Esta clase lo que hace es colorear la letra en color azul. Pero ¿qué letra colorea? Pues la que queramos. Tan solo tenemos que llamar a esta clase en cualquier elemento del documento HTML y se coloreará su texto de azul.
Para llamar a esta clase haremos, en el documento HTML:
< H5 class=»letraazul»>texto escrito< / H5 >
Observe que contrariamente al primer ejemplo, ahora puedo escoger colorear la letra de otro encabezado H5 de distinto color, tan solo definiendo otra clase y llamándola desde donde quiera.
El código resultante del documento HTML utilizando el estilo del color de la fuente es:
Pulsa en este link ‘ EJEMPLO ‘ para verlo.
NOTA: El aspecto visual puede cambiar dependiendo del tamaño de la ventana. Observe como en las etiquetas H5 no hay que hacer referencia a ninguna clase porque se ha asignado el color azul para todos los elementos H5 de la página. No sucede lo mismo en los otros casos.
Con esto termino este tutorial básico. Cualquier duda, podéis preguntar por email en privado o exponerla en el libro de visitas, para que todos aprendamos juntos.