Cuando visitamos una página WEB vemos textos, imágenes, colores de fondo, en algunos casos elementos que se desplazan por la pantalla, en fin, todo el conjunto de elementos que hacen de dicha página un espacio multimedia e interactivo.
Aunque podríamos pensar que todos esos elementos están incluidos en la página no es así. Realmente el único de todos ellos que pertenece a la propia página es el texto. Y, entonces, ¿cómo se ve lo que aparece en la página?. La respuesta es que una página WEB no es más que un documento de texto acompañado de una colección de etiquetas que sirven para que el navegador interprete de qué forma tiene que presentar el texto, las imágenes o los sonidos en la pantalla. Podríamos decir que es el guión de la película
Al tratarse de documentos de texto podemos afirmar que nos bastaría con el bloc de notas de Windows para crear nuestras páginas HTML. Aunque este procedimiento resultaría bastante incómodo para su uso habitual, ya que nos obligaría a conocer todas las etiquetas del HTML, puede ser interesante para que comprendamos la estructura de una página WEB y será el primero que utilicemos.
El formato de las etiquetas HTML
Las etiquetas HTML se escriben encerradas entre ángulos. Normalmente se utilizan dos etiquetas: una de inicio y otra de fin para indicar que ha terminado el efecto que queríamos presentar. La única diferencia entre ambas es que la de cierre lleva una barra inclinada "/" antes del código.
<etiqueta>texto que presentará el efecto</etiqueta>
Por ejemplo:<b>Esto va en negrita</b> lo veremos así: Esto va
en negrita
Es probable que una de las primeras preguntas que te
hagas sea si es obligatorio escribir las etiquetas en minúsculas o en
mayúsculas.
Hoy por hoy es indiferente escribirlas de una u otra manera: salvo raras excepciones
los navegadores las interpretan correctamente en ambos casos.
Sin embargo, las últimas especificaciones emitidas por el W3C indican
la necesidad de que vayan escritas siempre en minúsculas para
considerar que el documento está correctamente creado. Así pues
ya que es algo que no nos cuesta trabajo acataremos la norma emitida por el
W3C.
Para que un navegador reconozca que lo que está viendo es una página WEB se utiliza la siguiente estructura:
<html> (Etiqueta que indica
que lo que viene a continuación es un documento HTML)
<head>(Etiqueta de apertura de la cabecera)
Aquí va la información sobre el título de la página,
el autor, palabras clave, etc. que no se presentarán en la ventana del
navegador, salvo el título que aparecera en la barra de título
de la parte superior
</head>(Etiqueta de cierre de la cabecera)
<body>(Etiqueta de apertura del cuerpo)
Aquí va el contenido de la página que será lo que se presente
en pantalla.
</body>(Etiqueta de cierre del cuerpo)
</html>(Etiqueta de cierre del documento)
Antes de comenzar los ejercicios prácticos crea una carpeta con el nombre "CursoHTML" para poder almacenar en ella el resultado de tu trabajo.
Si
al guardar el archivo mantenemos la opción Documentos de texto, el bloc
de notas le añadirá al nombre que hemos puesto los caracteres
.txt para identificarlo como documento de texto y no podremos abrirlo con el
navegador.
¡Vaya desastre!
Supongo que coincidiremos en que lo que hemos visto al comprobar cómo había quedado nuestra primera creación no ha sido muy alentador.
La explicación del desaguisado es sencilla: en HTML hacen falta unas etiquetas especiales para indicar los saltos de línea y párrafo y no las habíamos escrito. ¡Las cosas no son tan sencillas como en un procesador de texto!
<br> es la etiqueta que sirve
para indicarle al navegador que debe hacer un salto de línea.
<p> indica un salto de párrafo e introducirá
un doble salto de línea.
Puede que te haya llamado la atención que los
nombres de los archivos no lleven la tilde, a pesar de que parece claro que
su sentido es el que corresponde al sustantivo práctica y no a la forma
verbal practica.
La explicación de esta situación tiene que ver con la forma en
que los servidores van a tratar posteriormente los nombres de los archivos que
almacenan y las peticiones que les realicen los navegadores: los caracteres
no anglosajones (entre los que se cuentan nuestras vocales con tilde y la "eñe")
así como los espacios en los nombres van a provocar errores y el servidor
va a contestar que no encuentra la página.
La recomendación es que no utilices estos caracteres en los nombres de
las páginas o en sus archivos asociados. Si quieres utilizar nombres
largos y que las palabras queden separadas hazlo sustituyendo el espacio por
un guión bajo "_"
¡Cuidado! Cuando veas
las páginas en tu ordenador no notarás ningún problema.
Ten en cuenta que te las está sirviendo tu propio ordenador, que tiene
configurado el teclado en castellano y con un sistema operativo que admite los
espacios.
Por el momento los próximos serán los últimos trabajos que realizaremos utilizando el bloc de Notas. A partir de aquí empezaremos a utilizar editores gráficos que, básicamente, se encargan de escribir por nosotros las etiquetas necesarias, pero es de suponer que gracias a esta introducción hayamos podido comprender cómo se escribe una página HTML.
La importancia de asimilar la estructura básica reside en que una de las mejores formas de aprender a crear páginas HTML es viendo páginas creadas por otros autores. Si tenemos claro el sistema utilizado podremos reconocer los elementos que nos parezcan interesantes e irlos incorporando a nuestras páginas.
Las cabeceras
Uno de los elementos de formato que nos resultará imprescindible será la diferenciación de tamaños de letra para poder introducir títulos de epígrafes y organizar visualmente la información.
Disponemos para esta tarea de seis formatos predeterminados de cabeceras. Para utilizarlos deberemos poner la etiqueta de apertura delante de la primera letra cuya apariencia deseemos modificar y cerrar tras la última para volver al texto normal. (Además las etiquetas de cabecera introducen un salto de párrafo sin necesidad de indicarlo)
|
El otro elemento del que disponemos para resaltar un fragmento de texto es la utilización de las tipografías en negrita, itálica y subrayada. Su utilización se ajusta al convenio general de etiqueta de apertura y etiqueta de cierre limitando el texto al que se aplica el efecto.
|
Justificación
La justificación del texto por defecto se hace a la izquierda. Cuando empieces a trabajar con los editores gráficos comprobarás que no te ofrecen la posibilidad de justificar el texto de forma completa. Eso se debe a que cuando se crearon no se habían dictado aún las últimas especificaciones del lenguaje HTML.
Por el momento, mientras utilicemos los editores gráficos no tendremos posibilidad de hacer una justificación completa, por lo que el texto nos quedará siempre "en bandera", esto es sin alinear en los finales de renglón.
Además de la justificación por defecto podemos también justificar el texto a partir del centro o a partir de la derecha. Las etiquetas que encontraremos serán del siguiente tipo:.
<div align="center">
y su correspondiente cierre </div> marcan la
justificación centrada.
<div align="right">
y </div> delimitan un párrafo justificado
a partir del margen derecho.
<div align="justify">
y </div> delimitan un párrafo justificado
completamente en ambos márgenes.
La justificación completa no tiene efecto en los de navegadores de versiones
antiguas y se convierte automáticamente en alineación a la izquierda.
También podemos encontrar escrita la alineación aplicando el atributo a la etiqueta
que define el párrafo <p align="alineación"></p>
en el que podrán aparecer las palabras "left", "right",
"center" o "justify" como alineaciones.
Existe otra forma de dar formato al texto utilizando lo que se denomina texto preformateado. En este caso, el navegador sí que interpretará los saltos de línea que introduzcamos, pero esto tiene el peligro de que nuestro texto puede quedar corto o largo en función de la resolución de pantalla de la persona que visite la página.
