Teoría HTML (I)

UD2: Utilizacin de lenguajes de marcas en entornos web (HTML)
LMSGI
UD2: UTILIZACIN DE LENGUAJES DE MARCAS EN ENTORNOS WEB HTML. Pginas web estticas (I)
1. El lenguaje HTML
Qu es HTML? HTML fue el lenguaje pionero para la creacin de pginas web estticas. Definindolo de forma sencilla, "HTML es lo que se utiliza para crear todas las pginas web de Internet". Ms concretamente, HTML es el lenguaje con el que se "escriben" la mayora de pginas web. Los diseadores utilizan el lenguaje HTML para crear sus pginas web, los programas que utilizan los diseadores generan pginas escritas en HTML y los navegadores que utilizamos los usuarios muestran las pginas web despus de leer su contenido HTML. Aunque HTML es un lenguaje que utilizan los ordenadores y los programas de diseo, es muy fcil de aprender y escribir por parte de las personas. Una pgina web esttica es una pgina que siempre tiene los mismos contenidos, salvo que se modifique el archivo. Aunque el mundo de la World Wide Web ha evolucionado mucho, incorporando nuevos lenguajes y tecnologas, HTML sigue jugando un papel fundamental en l. HTML es el acrnimo del ingls HyperText Markup Language (Lenguaje de marcas de hipertexto). Hipertexto es un texto estructurado en el que se incluyen hiperenlaces (hyperlink) que conducen a otros documentos, objetos multimedia (grficos, sonidos, ) u otros elementos de informacin relacionados.
CFGS: ADMINISTRACIN DE SISTEMAS INFORMTICOS Y REDES
1 /35
RAQUEL TORRES
LMSGI
La pgina creada con HTML es interpretada por el navegador web o en ingls browser., el cual se encargar de reproducir la pgina web tal y como la puede ver el usuario.
Un navegador web (browser) es una herramienta software que permite la visualizacin de pginas web. Su nombre proviene de la accin de ir de una pgina a otra, lo que se conoce como navegar. Hay muchos navegadores, aunque los ms conocidos son Internet Explorer, Firefox y Opera. Se dice tambin que HTML es un lenguaje de marcas o etiquetas porque las instrucciones que permiten estructurar los contenidos de las pginas y darles estilos y formatos son porciones de texto diferenciadas del resto de elementos, denominadas etiquetas. El lenguaje HTML es un estndar reconocido en todo el mundo y cuyas normas define un organismo sin nimo de lucro llamado World Wide Web Consortium (http://www.w3.org/) , ms conocido como W3C. Como se trata de un estndar reconocido por todas las empresas relacionadas con el mundo de Internet, una misma pgina HTML se visualiza de forma muy similar en cualquier navegador de cualquier sistema operativo. El propio W3C define el lenguaje HTML como "un lenguaje reconocido universalmente y que permite publicar informacin de forma global". Desde su creacin, el lenguaje HTML ha pasado de ser un lenguaje utilizado exclusivamente para crear documentos electrnicos a ser un lenguaje que se utiliza en muchas aplicaciones electrnicas como buscadores, tiendas online y banca electrnica.
Los orgenes de HTML La historia completa de HTML es tan interesante como larga, por lo que a continuacin se muestra su historia resumida a partir de la informacin que se puede encontrar en la Wikipedia. El origen de HTML se remonta a 1980, cuando el fsico Tim Berners-Lee, trabajador del CERN (http://www.cern.ch/) (Organizacin Europea para la
2 /35
RAQUEL TORRES
LMSGI
Investigacin Nuclear) propuso un nuevo sistema de "hipertexto" para compartir documentos.
Los sistemas de "hipertexto" haban sido desarrollados aos antes. En el mbito de la informtica, el "hipertexto" permita que los usuarios accedieran a la informacin relacionada con los documentos electrnicos que estaban visualizando. De cierta manera, los primitivos sistemas de "hipertexto" podran asimilarse a los enlaces de las pginas web actuales. Tras finalizar el desarrollo de su sistema de "hipertexto", Tim Berners-Lee lo present a una convocatoria organizada para desarrollar un sistema de "hipertexto" para Internet. Despus de unir sus fuerzas con el ingeniero de sistemas Robert Cailliau, presentaron la propuesta ganadora llamada WorldWideWeb (W3). El primer documento formal con la descripcin de HTML se public en 1991 bajo el nombre "HTML Tags" (http://www.w3.org/History/19921103-
hypertext/hypertext/WWW/MarkUp/ Tags.html) (Etiquetas HTML) y todava hoy puede ser consultado online a modo de reliquia informtica. La primera propuesta oficial para convertir HTML en un estndar se realiz en 1993 por parte del organismo IETF (http://www.ietf.org/) (Internet Engineering Task Force). Aunque se consiguieron avances significativos (en esta poca se definieron las etiquetas para imgenes, tablas y formularios) ninguna de las dos propuestas de estndar, llamadas HTML y HTML+ consiguieron convertirse en estndar oficial. En 1995, el organismo IETF organiza un grupo de trabajo de HTML y consigue publicar, el 22 de septiembre de ese mismo ao, el estndar HTML 2.0. A pesar de su nombre, HTML 2.0 es el primer estndar oficial de HTML. A partir de 1996, los estndares de HTML los publica otro organismo de estandarizacin llamado W3C (http://www.w3.org/) (World Wide Web Consortium). La versin HTML 3.2 se public el 14 de Enero de 1997 y es la primera recomendacin de HTML publicada por el W3C. Esta revisin incorpora los ltimos avances de las pginas web desarrolladas hasta 1996, como applets de Java y texto que fluye alrededor de las imgenes.
3 /35
RAQUEL TORRES
LMSGI
HTML 4.0 se public el 24 de Abril de 1998 (siendo una versin corregida de la publicacin original del 18 de Diciembre de 1997) y supone un gran salto desde las versiones anteriores. Entre sus novedades ms destacadas se encuentran las hojas de estilos CSS, la posibilidad de incluir pequeos programas o scripts en las pginas web, mejora de la accesibilidad de las pginas diseadas, tablas complejas y mejoras en los formularios. La ltima especificacin oficial de HTML se public el 24 de diciembre de 1999 y se denomina HTML 4.01. Se trata de una revisin y actualizacin de la versin HTML 4.0, por lo que no incluye novedades significativas. Desde la publicacin de HTML 4.01, la actividad de estandarizacin de HTML se detuvo y el W3C se centr en el desarrollo del estndar XHTML. Por este motivo, en el ao 2004, las empresas Apple, Mozilla y Opera mostraron su preocupacin por la falta de inters del W3C en HTML y decidieron organizarse en una nueva asociacin llamada WHATWG (http://www.whatwg.org/) (Web Hypertext Application Technology Working Group). La actividad actual del WHATWG se centra en el futuro estndar HTML 5, cuyo primer borrador oficial (http://www.w3.org/TR/html5/) se public el 22 de enero de 2008. Debido a la fuerza de las empresas que forman el grupo WHATWG y a la publicacin de los borradores de HTML 5.0, en marzo de 2007 el W3C decidi retomar la actividad estandarizadora de HTML (http://www.w3.org/2007/03/htmlpressrelease) . De forma paralela a su actividad con HTML, W3C ha continuado con la estandarizacin de XHTML, una versin avanzada de HTML y basada en XML. La primera versin de XHTML se denomina XHTML 1.0 y se public el 26 de Enero de 2000 (y posteriormente se revis el 1 de Agosto de 2002). XHTML 1.0 es una adaptacin de HTML 4.01 al lenguaje XML, por lo que mantiene casi todas sus etiquetas y caractersticas, pero aade algunas
4 /35
RAQUEL TORRES
LMSGI
restricciones y elementos propios de XML. La versin XHTML 1.1 ya ha sido publicada en forma de borrador y pretende modularizar XHTML. Tambin ha sido publicado el borrador de XHTML 2.0, que supondr un cambio muy importante respecto de las anteriores versiones de XHTML. Validacin de W3C Que una pgina no se vea bien en un navegador, no quiere decir que su cdigo HTML est redactado de forma incorrecta. Para evitar cualquier duda al respecto, merece la pena validar el cdigo HTML a travs de W3C (World Wide Web Consortium). Dicha organizacin pone a disposicin de los desarrolladores un servicio de validacin ( http://validator.w3.org ) que permite comprobar si una pgina cumple con el estndar de HTML, asegurando as una mayor compatibilidad con los navegadores web (los cuales suelen atenerse a dicho cdigo) El organismo W3C (http://www.w3.org/) (World Wide Web Consortium) elabora las normas que deben seguir los diseadores de pginas web para crear las pginas HTML. Las normas oficiales estn escritas en ingls y se pueden consultar de forma gratuita en las siguientes direcciones: Especificacin oficial de HTML 4.01 (http://www.w3.org/TR/html401/) Especificacin oficial de XHTML 1.0 (http://www.w3.org/TR/xhtml1/) El estndar XHTML 1.0 incluye el 95% del estndar HTML 4.01, ya que slo aade pequeas mejoras y modificaciones menores. Afortunadamente, no es necesario leer las especificaciones y recomendaciones oficiales de HTML para aprender a disear pginas con HTML o XHTML. Las normas oficiales estn escritas con un lenguaje bastante formal y algunas secciones son difciles de comprender. Por ello, en los prximos apartados se explica de forma sencilla y con decenas de ejemplos la especificacin oficial de HTML.
5 /35
RAQUEL TORRES
LMSGI
2. Las etiquetas HTML

Formato Uno de los retos iniciales a los que se tuvo que enfrentar la informtica fue el de cmo almacenar la informacin en los archivos digitales. Como los primeros archivos slo contenan texto sin formato, la solucin utilizada era muy sencilla: Se codificaban las letras del alfabeto y se transformaban en nmeros. De esta forma, para almacenar un contenido de texto en un archivo electrnico, se utiliza una tabla de conversin que transforma cada carcter en un nmero. Una vez almacenada la secuencia de nmeros, el contenido del archivo se puede recuperar realizando el proceso inverso.
El proceso de transformacin de caracteres en secuencias de nmeros se denomina codificacin de caracteres y cada una de las tablas que se han definido para realizar la transformacin se conoce con el nombre de pginas de cdigo. Una de las codificaciones ms conocidas (y una de las primeras que se publicaron) es la codificacin ASCII. La importancia de las codificaciones en HTML se ver ms adelante. Una vez resuelto el problema de almacenar el texto simple, se presenta el reto de almacenar los contenidos de texto con formato. En otras palabras, cmo se almacena un texto en negrita? y un texto de color rojo? y otro texto azul, en negrita y subrayado?
6 /35
RAQUEL TORRES
LMSGI
Utilizar una tabla de conversin similar a las que se utilizan para textos sin formato no es posible, ya que existen infinitos posibles estilos para aplicar al texto. Una solucin tcnicamente viable consiste en almacenar la informacin sobre el formato del texto en una zona especial reservada dentro del propio archivo. En esta zona se podra indicar dnde comienza y dnde termina cada formato. No obstante, la solucin que realmente se emplea para guardar la informacin con formato es mucho ms sencilla: el archivo electrnico almacena tanto los contenidos como la informacin sobre el formato de esos contenidos. Si por ejemplo se quiere dividir el texto en prrafos y se desea dar especial importancia a algunas palabras, se podra indicar de la siguiente manera:
<parrafo>Contenido de texto con <importante>algunas palabras</importante> resaltadas de forma especial.</parrafo>
El principio de un prrafo se indica mediante la palabra <parrafo> y el final de un prrafo se indica mediante la palabra </parrafo>. De la misma manera, para asignar ms importancia a ciertas palabras del texto, se encierran entre <importante> y </importante>. El proceso de indicar las diferentes partes que componen la informacin se denomina marcar (markup en ingls). Cada una de las palabras que se emplean para marcar el inicio y el final de una seccin se denominan etiquetas. Aunque existen algunas excepciones, en general las etiquetas se indican por pares y se forman de la siguiente manera: Etiqueta de apertura: carcter <, seguido del nombre de la etiqueta (sin espacios en blanco) y terminado con el carcter > Etiqueta de cierre: carcter <, seguido del carcter /, seguido del nombre de la etiqueta (sin espacios en blanco) y terminado con el carcter >
As, la estructura tpica de las etiquetas HTML es:
<nombre_etiqueta> ... </nombre_etiqueta>
7 /35
RAQUEL TORRES
LMSGI
Por lo tanto, gracias a la palabra o palabras reservadas que se encierran entre estos smbolos, ser posible conocer las caractersticas o formatos que se le darn al elemento afectado. Lo ideal es que todo elemento de una pgina web est suscrito a una etiqueta, evitando as que el navegador malinterprete el cdigo. Como ya se coment, existen dos tipos bsicos de etiquetas : Las de inicio o apertura y las de fin o cierre. Las primeras declaran las caractersticas o formatos del elemento (por ejemplo, que el siguiente prrafo ir en cursiva). La etiqueta de cierre es la que indica al navegador que el formato que afectaba al elemento desde la etiqueta de inicio, se acaba. Es decir, si se inserta la marca de texto en cursiva (<i>), el navegador web formatear en cursiva todas las palabras que vengan a continuacin; el efecto dejar de aplicarse cuando el navegador encuentre la etiqueta de cierre (</i>). No todas las etiquetas de HTML tienen su correspondiente etiqueta de fin. Hay que diferenciar tres tipos :
a)
Etiquetas de apertura y cierre : Son las que se han explicado hasta
ahora. La instruccin slo se aplica al elemento que encierran. (ejemplo : texto en cursiva <i> . . . </i> ) b) Etiquetas slo de apertura : El efecto se producir en un punto
determinado del documento sin afectar a otros elementos. (ejemplo : salto de lnea <br>) c) Etiquetas de cierre opcional : Pueden adoptar uno de los dos formatos
vistos anteriormente aunque se aconseja cerrarlas para estructurar mejor el documento y dotarlo de mayor claridad.
8 /35
RAQUEL TORRES
LMSGI
Las etiquetas con apertura y cierre deben estar balanceadas. Si se abren en un orden determinado, se deben cerrar en el orden inverso para que las primeras engloben a las siguientes <etiqueta1> <etiqueta2> <etiqueta3> </etiqueta3> </etiqueta2> </etiqueta1> Por otra parte, en HTML no se diferencia entre maysculas y minsculas a la hora de escribir e interpretar las etiquetas. Con el fin de lograr una mayor uniformidad en el cdigo, lo normal es que siempre se escriban de la misma forma. Las recomendaciones de W3C es ponerlas en minsculas
Atributos En muchas ocasiones, habr una serie de parmetros que harn que los efectos que producen las etiquetas varen, ya sea en colores, alineacin, estilos, etc Estos parmetros son modificadores de la etiqueta genrica de inicio o apertura y se denominan atributos. Con ellos se pueden definir diferentes posibilidades de la instruccin HTML y , generalmente, estn formados por el nombre del atributo, que es una palabra reservada del lenguaje, el signo igual (=) y el valor que toma.
Una etiqueta genrica con atributos sera : <etiqueta atributo1=valor1 atributo2=valor2> . . . . . </etiqueta>
9 /35
RAQUEL TORRES
LMSGI
Aqu atributo1 y atributo2 son dos atributos distintos que toman los valores valor1 y valor2 respectivamente. El orden en el que se incluyan los atributos es indiferente aunque hay que tener en cuenta dos puntos importantes : Si el valor del atributo contiene dos o ms palabras separadas por
espacios, debe ir entre comillas para evitar que el navegador malinterprete el cdigo. Cada atributo slo puede tener un valor en cada etiqueta. En caso de que
en una misma etiqueta, se pusiese el mismo atributo con distintos valores, el resultado sera imprevisible y dependera de la interpretacin que diese a dicho cdigo el navegador. El siguiente esquema muestra un elemento HTML, formado por una etiqueta <p>, atributos y contenidos de texto:
La estructura mostrada en el esquema anterior es un elemento HTML ya que comienza con una etiqueta de apertura (<p>), contiene cero o ms atributos (class="normal"), dispone de un contenido de texto (Esto es un prrafo) y finaliza con una etiqueta de cierre (</p>).
10 /35
RAQUEL TORRES
LMSGI
3. Estructura de un documento HTML

Las pginas HTML se dividen en dos partes: la cabecera y el cuerpo. La cabecera incluye informacin sobre la propia pgina, como por ejemplo su ttulo y su idioma. El cuerpo de la pgina incluye todos sus contenidos, como prrafos de texto e imgenes.
El cuerpo (llamado body en ingls) contiene todo lo que el usuario ve en su pantalla y la cabecera (llamada head en ingls) contiene todo lo que no se ve (con la nica excepcin del ttulo de la pgina, que los navegadores muestran como ttulo de sus ventanas). A continuacin se muestra el cdigo HTML de una pgina web muy sencilla:
<html> <head> <title>El primer documento HTML</title> </head> <body><p>El lenguaje HTML es <strong>tan sencillo</strong> que prcticamente se entiende sin estudiar el significado de sus etiquetas principales.</p></body> </html>
Si quieres probar este primer ejemplo, debes hacer lo siguiente: 1 Abre un editor de archivos de texto (por ejemplo el bloc de notas) y crea un archivo nuevo 2 Copia el cdigo HTML mostrado anteriormente y pgalo tal cual en el archivo que has creado 3 Guarda el archivo con el nombre que quieras, pero con la extensin .html o .htm
11 /35
RAQUEL TORRES
LMSGI
Para que el ejemplo anterior funcione correctamente, es imprescindible que utilices un editor de texto sin formato. Si tu sistema operativo es Windows, puedes utilizar el Bloc de notas, Wordpad, EmEditor, UltraEdit, Notepad++, etc. pero no puedes utilizar un procesador de textos como Word u OpenOffice. Si utilizas sistemas operativos tipo Linux, puedes utilizar editores como Gedit, Kedit, Kate e incluso Vi, pero no utilices KOffice ni Open Office. Despus de crear el archivo con el contenido HTML, ya se puede abrir con cualquier navegador para que se muestre con el siguiente aspecto:
Si ya ests viendo tu primera pgina HTML en el navegador, prueba a pulsar sobre el men Ver > Cdigo fuente y podrs ver el cdigo HTML de la pgina que est cargada en el navegador. De hecho, puedes ver el cdigo HTML de cualquier pgina de Internet mediante la opcin Ver > Cdigo fuente. Prueba a ver el cdigo HTML de tu pgina preferida y vers cuantas etiquetas puede llegar a tener una pgina compleja.
12 /35
RAQUEL TORRES
LMSGI
Volviendo al cdigo HTML del primer ejemplo, es importante conocer las tres etiquetas principales de un documento HTML (<html>, <head>, <body>): <html> : indica el comienzo y el final de un documento HTML. Ninguna etiqueta o contenido puede colocarse antes o despus de la etiqueta <html>. En el interior de la etiqueta <html> se definen la cabecera y el cuerpo del documento HTML y todo lo que se coloque fuera de la etiqueta <html> se ignora.
<head> : delimita la parte de la cabecera del documento. La cabecera contiene informacin sobre el propio documento HTML, como por ejemplo su ttulo. Los contenidos indicados en la cabecera no son visibles para el usuario, con la excepcin de la etiqueta <title>, que se utiliza para indicar el ttulo del documento y que los navegadores lo visualizan en la parte superior izquierda de la ventana del navegador (si no te has fijado anteriormente, vuelve a abrir el primer ejemplo en cualquier navegador y observa dnde se muestra el ttulo de la pgina).
<body> : delimita el cuerpo del documento HTML. El cuerpo encierra todos los contenidos que se muestran al usuario (prrafos de texto, imgenes, tablas). En general, el <body> de un documento contiene cientos de etiquetas HTML, mientras que el <head> no contiene ms que unas pocas.
13 /35
RAQUEL TORRES
LMSGI
La etiqueta <body>, a diferencia de <head>, admite una serie de atributos que son de carcter global para todo el documento.
Etiqueta Atributo bgcolor background body text link vlink Valor Color URL Color Color Color Significado Define el color de fondo del documento. Indica la direccin web de la imagen de fondo del documento. Si dicha imagen se encuentra en el propio servidor, se utilizar la direccin relativa (ruta del directorio). Establece en el que aparecer el texto del documento. Establece el color en el que aparecer el texto de los enlaces del documento. Determina el color en el que aparecer el texto de los enlaces visitados del documento.
Cuatro de estos atributos (bgcolor, text, link y vlink) modifican el color de algunos elementos bsicos de documento como son el fondo de la pgina o el texto. Simplemente habr que prestar atencin al necesario contraste entre el fondo y los textos para garantizar la legibilidad del documento. Por otra parte, el cambio de color de los enlaces no siempre tiene el comportamiento deseado en todos los navegadores por lo que es conveniente realizar una comprobacin. Ms atencin hay que prestar al atributo background, con el que se declara la imagen de fondo de la pgina. Su valor debe ser el nombre de una imagen y su extensin, si dicha imagen est en la misma carpeta que el documento HTML, o el de la URL donde se halla dicha imagen. Esta imagen se mostrar por debajo del texto y los elementos que compongan el documento. Si el navegador no pudiera encontrar la imagen definida, mostrara simplemente el color de fondo establecido. Hay que tener mucho cuidado que la imagen tenga el tamao adecuado, ya que si es menor que la ventana del navegador del usuario, la imagen ser reproducida como un mosaico por toda la ventana hasta rellenarla por completo. Si este no es el efecto deseado, lo mejor es utilizar una imagen que sea del tamao concreto para el que se realice la pgina, indicando en sta que se ha optimizado para una resolucin determinada. Si el usuario utilizara una resolucin de pantalla distinta, sabe que se arriesga a visualizar mal la pgina.
14 /35
RAQUEL TORRES
LMSGI
Los colores en HTML En HTML, el color se debe expresar bien por su nombre en ingls, bien por su anotacin hexadecimal. Esta ltima resulta de calcular la proporcin de rojo, verde y azul (los tres colores bsicos en los sistemas RGB que utilizan los monitores) que componen el color final. El valor de cada proporcin estar entre 0 y 255. Este valor hay que convertirlo a hexadecimal lo que resulta dos cifras en nmeros con base 16 que van del 0 al 9 y de la A a la F. Una vez calculado el valor en hexadecimal de cada una de las componentes se expreser como #RGB , siendo R la componente del color rojo, G la componente del color verde y B la componente del color azul. Un color que tuviera componente rojo=255, verde=0, azul=0, se expresara como #FF0000 Con la utilidad Paint se puede obtener la componente roja, verde y azul de cualquier color. Para convertirlo a hexadecimal se puede utilizar la calculadora de Windows. Normalmente suele ser suficiente con los colores especificados con su nombre en ingls. Estos son:
Nombres de colores y valores #RGB Black = "#000000" (Negro) Silver = "#C0C0C0" (Plateado) Gray = "#808080" (Gris) White = "#FFFFFF" (Blanco) Maroon = "#800000" (Marrn) Red = "#FF0000" (Rojo) Purple = "#800080" (Prpura) Fuchsia = "#FF00FF" (Fucsia) Green = "#008000" (Verde) Lime = "#00FF00" (Verde lima) Olive = "#808000" (Verde oliva) Yellow = "#FFFF00" (Amarillo) Navy = "#000080" (Azul marino) Blue = "#0000FF" (Azul) Teal = "#008080" (Azul verdoso) Aqua = "#00FFFF" (Celeste)
15 /35
RAQUEL TORRES
LMSGI
La mayora de los editores HTML llevan incorporado una paleta de colores que permite a los usuarios una eleccin de los mismos meramente visual y su fcil conversin a sistema hexadecimal (como veremos en la UD 3), por lo que de momento slo utilizaremos los nombres en ingls para especificar el color.
Ejemplo 1.- Etiquetas <head> y <body> Realizar una pgina web que contenga la imagen ranas.gif (la cual puedes encontrar en el archivo adjunto al documento de teora bajo la carpeta ejemplo1) como fondo. (la solucin tambin la tienes dentro de esa carpeta en el archivo adjunto; para ver el cdigo HTML abre el fichero con la solucin con el Bloc de notas, para ver como queda abrirlo con un navegador)
16 /35
RAQUEL TORRES
LMSGI
4. Texto en HTML
La mayor parte del contenido de las pginas HTML habituales est formado por texto, llegando a ser ms del 90% del cdigo de la pgina. Por este motivo, es muy importante conocer los elementos y etiquetas que define HTML para el manejo del texto. El lenguaje HTML incorpora al tratamiento del texto muchas de las ideas y normas establecidas en otros entornos de publicacin de contenidos. De esta forma, HTML define etiquetas para estructurar el contenido en secciones y prrafos y define otras etiquetas para marcar elementos importantes dentro del texto. La tarea inicial del editor de contenidos HTML consiste en estructurar el texto original definiendo sus prrafos, titulares y ttulos de seccin, como se muestra en la siguiente imagen:
El proceso de estructurar un texto simple consiste en indicar las diferentes zonas o secciones que componen el texto. De esta forma, los textos estructurados utilizan etiquetas para delimitar cada prrafo y ttulos de seccin para delimitar cada una de las secciones que forman el texto.
17 /35
RAQUEL TORRES
LMSGI
Una vez definida la estructura bsica de los contenidos de la pgina, el siguiente paso consiste en marcar los diferentes elementos dentro del propio texto: definiciones, abreviaturas, textos importantes, textos modificados, citas a otras referencias, etc.
El anterior ejemplo muestra la transformacin de un prrafo con un texto simple en un prrafo cuyo texto contiene elementos marcados de forma especial. As, algunas palabras del texto se muestran en negrita porque se consideran importantes; otras palabras aparecen en cursiva, ya que se han marcado como destacadas e incluso una frase aparece tabulada y entre comillas, indicando que es una cita textual de otro contenido. En las secciones siguientes se muestran las etiquetas que define HTML para estructurar y marcar el texto. Adems, se hace una mencin especial al tratamiento que hace HTML de los espacios en blanco y las nuevas lneas.
18 /35
RAQUEL TORRES
LMSGI
Prrafos
Una de las etiquetas ms utilizadas de HTML es la etiqueta <p>, que permite definir los prrafos que forman el texto de una pgina. Para delimitar el texto de un prrafo, se encierra ese texto con la etiqueta <p>, como muestra el siguiente ejemplo:
<html> <head> <title>Ejemplo de texto estructurado con prrafos</title> </head> <body><p>Este es el texto que forma el primer prrafo de la pgina.Los prrafos pueden ocupar varias lneas y el navegador se encargade ajustar su longitud al tamao de la ventana.</p> <p>El segundo prrafo de la pgina tambin se define encerrando su texto con la etiqueta p. El navegador tambin se encarga de separar automticamente cada prrafo.</p> </body> </html>
El ejemplo anterior se visualiza de la siguiente manera en cualquier navegador:
19 /35
RAQUEL TORRES
LMSGI
Los prrafos creados con HTML son elementos de bloque, por lo que siempre ocupan toda la anchura de la ventana del navegador. Adems, no tienen atributos especficos. La etiqueta <p> permite el uso del atributo align. Dicho atributo permite los siguientes valores: left, center, right y justify. Este atributo alinea el prrafo segn el valor dado left (izquierda), right (derecha), center (centrado), justify (justificado)
<p align=right>Prrafo alineado a la derecha</p>
Ttulos de seccin Las pginas HTML habituales suelen tener una estructura ms compleja que la que se puede crear solamente mediante prrafos. De hecho, es habitual que las pginas se dividan en diferentes secciones jerrquicas. Los ttulos de seccin se utilizan para delimitar el comienzo de cada seccin de la pgina. HTML permite crear secciones de hasta seis niveles de importancia. De esta forma, aunque una pgina puede definir cualquier nmero de secciones, slo puede incluir seis niveles jerrquicos. Las etiquetas que definen los ttulos de seccin son <h1>, <h2>, <h3>, <h4>, <h5> y <h6>. La etiqueta <h1> es la de mayor importancia y por tanto se utiliza para definir los titulares de la pgina. La importancia del resto de etiquetas es descendiente, de forma que la etiqueta <h6> es la que se utiliza para delimitar las secciones menos importantes de la pgina. Al igual que la etiqueta <p>, las etiquetas de ttulo de seccin son elementos de bloque y no tienen atributos especficos. Las etiquetas <h1>, ..., <h6> definen ttulos de seccin, no secciones completas. Por este motivo, no es necesario encerrar los contenidos de una seccin con su etiqueta correspondiente. Solamente se debe encerrar con las etiquetas <h1>, ..., <h6> los ttulos de cada seccin.
20 /35
RAQUEL TORRES
LMSGI
El siguiente ejemplo muestra el uso de las etiquetas de ttulo de seccin:

<html> <head> <title>Ejemplo de texto estructurado con secciones</title> </head> <body> <h1>Titular de la pgina</h1><p>Prrafo de introduccin...</p><h2>La primera subseccin</h2><p>Prrafo de contenido...</p><h2>Otra subseccin</h2><p>Ms prrafos de contenido...</p> </body> </html>
Los navegadores muestran el ejemplo anterior de la siguiente manera:
Los navegadores asignan de forma automticamente el tamao del ttulo de cada seccin en funcin de su importancia. As, los ttulos de seccin <h1> se muestran con el tamao de letra ms grande, ya que son el nivel jerrquico superior, mientras que los ttulos de seccin <h6> se visualizan con un tamao de letra muy pequeo, adecuado para el nivel jerrquico de menor importancia.
21 /35
RAQUEL TORRES
LMSGI
Evidentemente, el aspecto que los navegadores aplican por defecto a los ttulos de seccin se puede modificar utilizando las hojas de estilos de CSS. La siguiente imagen muestra el tamao por defecto con el que los navegadores muestran cada titular:
Formato de las fuentes Una vez estructurado el texto en prrafos y secciones, el siguiente paso es el marcado de los elementos que componen el texto. Los textos habituales estn formados por elementos como palabras en negrita o cursiva, , etc. HTML proporciona varias etiquetas para marcar cada uno de los diferentes tipos de texto. Entre las etiquetas ms utilizadas para marcar texto se encuentran <em> y <strong>.
22 /35
RAQUEL TORRES
LMSGI
La etiqueta <em> marca un texto indicando que su importancia es mayor que la del resto del texto. La etiqueta <strong> indica que un determinado texto es de la mayor importancia dentro de la pgina.
<html> <head> <title>Ejemplo de etiqueta em y strong</title> </head> <body><p>El lenguaje HTML permite marcar algunos segmentos de texto como <em>muy importantes</em> y otros segmentos como <strong>los ms importantes</strong>.</p></body> </html>
Por defecto, los navegadores muestran los elementos <em> en cursiva para hacer evidente su importancia y muestran los elementos <strong> en negrita, para indicar que son los ms importantes:
El texto tambin se puede formatear cambiando la fuente, el tamao, su color o resaltando ciertas palabras mediante el uso de negritas o cursivas.
23 /35
RAQUEL TORRES
LMSGI
Aunque desde HTML 4.0 se prefiere que el formato se aplique a travs del lenguaje CSS, esto tambin es posible con las siguientes etiquetas. Una de las etiquetas de formato ms importantes es la etiqueta <font></font>,
Etiqueta Atributo face color Valor Tipo de letra Color Significado Determina el tipo de fuente con el que se representar un texto. Se pueden consignar varios valores a la vez separndolos con una coma y un espacio en blanco. Determina el color del texto. Indica el tamao de la fuente en una escala del 1 (menor) al 7 (mayor). Acepta valores absolutos (4) o relativos (+2). En este ltimo caso, tomar como referencia el valor por defecto (3) o el ltimo indicado.
font
size
Nmero
Mediante la etiqueta <font></font> es posible modificar la fuente por defecto (Times New Roman) y definir el tipo de fuente base. Para evitar problemas si el usuario no tiene dicha fuente instalada en su ordenador, se puede dar un listado de fuentes para que el navegador elija la primera que encuentre instalada:
<font face=Arial, Tahoma>Texto</font>
Por otra parte, el atributo size permite definir el tamao de la fuente.. En HTML, el tamao de esta se define en referencia a una escala del 1 al 7, siendo 3 el valor por defecto. Es posible definir el tamao de la fuente de manera absoluta (2) o de manera relativa (+2, -4, etc). En este ltimo caso, tomar como referencia el valor por defecto (3) o el ltimo indicado. Adems de la fuente de un bloque de texto, tambin se pueden resaltar palabras o un conjunto de ellas mediante el uso de negritas, cursivas o subrayado.
Etiqueta <b></b> <i></i> <u></u>
Efecto Negrita (bold) Cursiva (Italia) Subrayada (underline)
24 /35
RAQUEL TORRES
LMSGI
Hay que tener en cuenta que este tipo de etiquetas puede usarse por separado o de forma conjunta. Si es necesario que un texto aparezca subrayado y en negrita, tan slo habr que usar las dos etiquetas de manera balanceada:
<u><b>Texto</b></u>
Etiqueta <span> El estndar HTML incluye una etiqueta llamada <span> que se emplea para marcar cualquier elemento que no se puede marcar con las otras etiquetas definidas. La etiqueta <span> se visualiza por defecto con el mismo aspecto que el texto normal. Por tanto es habitual utilizar esta etiqueta junto con los atributos id y class para modificar posteriormente su aspecto con CSS (las hojas de estilo CSS las veremos en la UD 2) La etiqueta <span> slo se puede utilizar para encerrar contenidos y etiquetas en lnea.
Espacios en blanco y nuevas lneas El aspecto ms sorprendente del lenguaje HTML cuando se desarrollan los primeros documentos es el tratamiento especial de los "espacios en blanco" del texto. HTML considera espacio en blanco a los espacios en blanco, los tabuladores, los retornos de carro y el carcter de nueva lnea (ENTER o Intro). El siguiente ejemplo ilustra este comportamiento:
<html> <head> <title>Ejemplo de etiqueta p</title> </head> <body> <p>Este primer prrafo no contiene saltos de lnea ni otro tipo de espaciado.</p> <p>Este segundo prrafo s que contiene saltos de lnea y otro tipo de espaciado.</p> </body> </html>
25 /35
RAQUEL TORRES
LMSGI
El anterior cdigo HTML se visualiza en cualquier navegador de la siguiente manera:
Los dos prrafos de la imagen anterior se ven idnticos, aunque el segundo prrafo incluye varios espacios en blanco y est escrito en varias lneas diferentes. La razn de este comportamiento es que HTML ignora todos los espacios en blanco sobrantes, es decir, todos los espacios en blanco que no son el espacio en blanco que separa las palabras. No obstante, HTML proporciona varias alternativas para poder incluir tantos espacios en blanco y tantas nuevas lneas como sean necesarias dentro del contenido textual de las pginas. Nuevas lneas Para incluir una nueva lnea en un punto y forzar a que el texto que sigue se muestre en la lnea inferior, se utiliza la etiqueta <br>. En cierta manera, insertar la etiqueta <br> en un determinado punto del texto equivale a presionar la tecla
26 /35
RAQUEL TORRES
LMSGI
ENTER(o Intro) en ese mismo punto. La etiqueta <br> es una de las pocas etiquetas especiales de HTML. La particularidad de <br> es que es una etiqueta vaca, es decir, no encierra ningn texto. Utilizando la etiqueta <br> se puede rehacer el ejemplo anterior para que respete las lneas que forman el segundo prrafo:
<html> <head> <title>Ejemplo de etiqueta br</title> </head> <body> <p>Este primer prrafo no contiene saltos de lnea ni otro tipo de espaciado.</p> <p>Este segundo prrafo s que contiene saltos <br> de <br> lnea <br>y otro tipo de espaciado.</p> </body> </html>
El navegador ahora s que muestra correctamente las nuevas lneas que se queran insertar:
27 /35
RAQUEL TORRES
LMSGI
Espacios en blanco La solucin al problema de los espacios en blanco no es tan sencilla como el de las nuevas lneas. Para incluir espacios en blanco adicionales, se debe sustituir cada nuevo espacio en blanco por el texto (es importante incluir el smbolo & al principio y el smbolo ;al final). As, el cdigo HTML del ejemplo anterior se debe rehacer para incluir los espacios en blanco adicionales:
<html> <head> <title>Ejemplo de entidad </title> </head> <body> <p>Este primer prrafo no contiene saltos de lnea ni otro tipo de espaciado.</p> <p>Este segundo prrafo s que contiene saltos <br>de <br>lnea <br>y otro tipo de espaciado.</p></body> </html>
Ahora el navegador s que muestra correctamente los espacios en blanco (y las nuevas lneas) del segundo prrafo:
28 /35
RAQUEL TORRES
LMSGI
Cada texto solamente equivale a un espacio en blanco, por lo que se deben escribir tantos seguidos como espacios en blanco seguidos existan en el texto. Ms adelante se profundiza en el origen de y se comprender por qu es necesario incluir esa sucesin tan extraa de caracteres cada vez que se quiere incluir un espacio en blanco adicional.
Texto preformateado En ocasiones, es necesario mostrar los espacios en blanco de un texto que no se puede modificar. Se trata de un caso habitual cuando una pgina web debe mostrar directamente el texto generado por alguna aplicacin. En estos casos, se puede utiliza la etiqueta <pre>, que muestra el texto tal y como se ha escrito, respetando todos los espacios en blanco y todas las nuevas lneas El siguiente ejemplo muestra el uso de la etiqueta <pre>:
29 /35
RAQUEL TORRES
LMSGI
<html> <head><title>Ejemplo de etiqueta pre</title></head> <body> <pre> La etiqueta pre respeta los espacios en blanco y muestra el texto tal y como est escrito </pre> <p> La etiqueta pre respeta los espacios en blanco y muestra el texto tal y como est escrito </p> </body> </html>
El ejemplo anterior incluye el mismo texto (con espacios en blanco y varias lneas) dentro de una etiqueta <pre> y dentro de una etiqueta <p>. Las diferencias visuales en un navegador son muy evidentes:
30 /35
RAQUEL TORRES
LMSGI
El primer texto se ve en pantalla tal y como se ha escrito, respetando todos los espacios en blanco y todas las nuevas lneas. El segundo texto se ve como un prrafo normal, ya que HTML ha eliminado todos los espacios en blanco sobrantes. Los elementos <pre> son especiales, ya que los navegadores les aplican las siguientes reglas: Mantienen todos los espacios en blanco (tabuladores, espacios y nuevas lneas) Muestra el texto con un tipo de letra especial, denominado "de ancho fijo", ya que todas sus letras son de la misma anchura No se ajusta la longitud de las lneas (las lneas largas producen un scroll horizontal en la ventana del navegador)
Esta ltima caracterstica diferencia por completo a los prrafos de los elementos <pre>. Como se ha visto, los navegadores ajustan la anchura de los prrafos de texto para que ocupen todo el tamao de la ventana. Sin embargo, los
31 /35
RAQUEL TORRES
LMSGI
elementos <pre> se muestran tal y como son originalmente, por lo que una lnea muy larga dentro de un elemento <pre> provoca que la anchura de la pgina sea superior a la anchura de la ventana del navegador. Si en el ejemplo anterior se aade ms texto al final de la segunda lnea (para producir una lnea larga), el navegador muestra un scroll horizontal ya que el texto completo no cabe en el tamao de la ventana y las lneas de los elementos <pre>nunca se ajustan.
Codificacin de caracteres Una consideracin importante directamente relacionada con el texto de las pginas HTML es la codificacin de los caracteres y la insercin de caracteres especiales. Algunos de los caracteres que se utilizan habitualmente en los textos no se pueden incluir directamente en las pginas web: Los caracteres que utiliza HTML para definir sus etiquetas (<, >y ") no se pueden utilizar libremente. Los caracteres propios de los idiomas que no son el ingls (, , , ,
32 /35
RAQUEL TORRES
LMSGI
, etc.) pueden ser problemticos dependiendo de la codificacin de caracteres utilizada. La solucin a la primera limitacin consiste en sustituir los caracteres reservados de HTML por unas expresiones llamadas entidades HTML y que representan a cada carcter:
De esta forma, si se considera el siguiente texto: Los caracteres <, >, " y & pueden dar problemas con los textos en HTML. Para mostrar correctamente el texto anterior en una pgina HTML, se debe sustituir cada carcter especial por su entidad HTML:
<p>Los caracteres <, >, " y & pueden dar problemas con los textos en HTML</p>
Por otra parte, los caracteres propios de los idiomas diferentes al ingls tambin pueden ser problemticos. La solucin ms sencilla para asegurar que todos estos caracteres potencialmente problemticos se van a visualizar correctamente en el navegador del usuario consiste en sustituir cada carcter problemtico por su entidad HTML:
33 /35
RAQUEL TORRES
LMSGI
As, la palabra prrafo se podra escribir de la siguiente manera:

<p>Este párrafo contiene caracteres acentuados y se almacena en formato UTF-8</p>
Si se utilizan las entidades HTML en vez de los caracteres problemticos, es indiferente pasar de una codificacin de caracteres a otra diferente. En la Wikipedia se puede consultar la lista completa de las 252 entidades HTML definidas
(http://en.wikipedia.org/wiki/ List_of_XML_and_HTML_character_entity_references) .
Comentarios Al igual que la mayora de lenguajes de marcado, HTML permite incluir comentarios dentro de su cdigo para aadir informacin que no se debe mostrar por pantalla. Normalmente, los diseadores y programadores incluyen comentarios para marcar el comienzo y el final de las secciones de las pginas, para incluir avisos y notas para otros diseadores o para incluir explicaciones sobre la forma en la que se ha creado el cdigo HTML.
34 /35
RAQUEL TORRES
LMSGI
Aunque los comentarios no se muestran por pantalla y por tanto son invisibles para los usuarios, s que se descargan con el cdigo HTML de la pgina. Por este motivo, nunca debe incluirse informacin sensible o confidencial en los comentarios. La sintaxis de los comentarios es la siguiente: Apertura del comentario: <!-Contenido del comentario: (cualquier texto) Cierre del comentario: -->
El siguiente ejemplo muestra el uso de los comentarios HTML para indicar el comienzo y final de cada seccin. Recuerda que los comentarios no se muestran por pantalla y que no influyen en la forma en la que se ven las pginas:
 <div id="menu"> <ul><li>...</li><li>...</li><li>...</li><li>...</li> </ul>   <div id="publicidad"> ... </div> 
Los comentarios de HTML pueden ocupar tantas lneas como sea necesario. Sin embargo, los comentarios no se pueden anidar, es decir, no se puede incluir un comentario dentro de otro comentario.
Ejemplo 2.- Estructura y formatos de textos Crear una pgina web que contenga el texto ejemplo2.doc (el cual puedes encontrar en el archivo adjunto al documento de teora bajo la carpeta ejemplo2) formateado de forma similar a como se presenta en Word. (la solucin tambin la tienes dentro de esa carpeta en el archivo adjunto; para ver el cdigo HTML abre el fichero con la solucin con el Bloc de notas, para ver como queda abrirlo con un navegador)
35 /35
RAQUEL TORRES

Teoría HTML (I)

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Teoría HTML (I)

Uploaded by

Copyright:

Available Formats

UD2: Utilizacin de lenguajes de marcas en entornos web (HTML)

CFGS: ADMINISTRACIN DE SISTEMAS INFORMTICOS Y REDES

UD2: Utilizacin de lenguajes de marcas en entornos web (HTML)

CFGS: ADMINISTRACIN DE SISTEMAS INFORMTICOS Y REDES

UD2: Utilizacin de lenguajes de marcas en entornos web (HTML)

Investigacin Nuclear) propuso un nuevo sistema de "hipertexto" para compartir documentos.

CFGS: ADMINISTRACIN DE SISTEMAS INFORMTICOS Y REDES

UD2: Utilizacin de lenguajes de marcas en entornos web (HTML)

CFGS: ADMINISTRACIN DE SISTEMAS INFORMTICOS Y REDES

UD2: Utilizacin de lenguajes de marcas en entornos web (HTML)

CFGS: ADMINISTRACIN DE SISTEMAS INFORMTICOS Y REDES

UD2: Utilizacin de lenguajes de marcas en entornos web (HTML)

2. Las etiquetas HTML

CFGS: ADMINISTRACIN DE SISTEMAS INFORMTICOS Y REDES

UD2: Utilizacin de lenguajes de marcas en entornos web (HTML)

<parrafo>Contenido de texto con <importante>algunas palabras</importante> resaltadas de forma especial.</parrafo>

As, la estructura tpica de las etiquetas HTML es:

<nombre_etiqueta> ... </nombre_etiqueta>

CFGS: ADMINISTRACIN DE SISTEMAS INFORMTICOS Y REDES

UD2: Utilizacin de lenguajes de marcas en entornos web (HTML)

Etiquetas de apertura y cierre : Son las que se han explicado hasta

CFGS: ADMINISTRACIN DE SISTEMAS INFORMTICOS Y REDES

UD2: Utilizacin de lenguajes de marcas en entornos web (HTML)

CFGS: ADMINISTRACIN DE SISTEMAS INFORMTICOS Y REDES

UD2: Utilizacin de lenguajes de marcas en entornos web (HTML)

CFGS: ADMINISTRACIN DE SISTEMAS INFORMTICOS Y REDES

UD2: Utilizacin de lenguajes de marcas en entornos web (HTML)

3. Estructura de un documento HTML

CFGS: ADMINISTRACIN DE SISTEMAS INFORMTICOS Y REDES

UD2: Utilizacin de lenguajes de marcas en entornos web (HTML)

CFGS: ADMINISTRACIN DE SISTEMAS INFORMTICOS Y REDES

UD2: Utilizacin de lenguajes de marcas en entornos web (HTML)

CFGS: ADMINISTRACIN DE SISTEMAS INFORMTICOS Y REDES

UD2: Utilizacin de lenguajes de marcas en entornos web (HTML)

CFGS: ADMINISTRACIN DE SISTEMAS INFORMTICOS Y REDES

UD2: Utilizacin de lenguajes de marcas en entornos web (HTML)

CFGS: ADMINISTRACIN DE SISTEMAS INFORMTICOS Y REDES

UD2: Utilizacin de lenguajes de marcas en entornos web (HTML)

CFGS: ADMINISTRACIN DE SISTEMAS INFORMTICOS Y REDES

UD2: Utilizacin de lenguajes de marcas en entornos web (HTML)

CFGS: ADMINISTRACIN DE SISTEMAS INFORMTICOS Y REDES

UD2: Utilizacin de lenguajes de marcas en entornos web (HTML)

CFGS: ADMINISTRACIN DE SISTEMAS INFORMTICOS Y REDES

UD2: Utilizacin de lenguajes de marcas en entornos web (HTML)

El ejemplo anterior se visualiza de la siguiente manera en cualquier navegador:

CFGS: ADMINISTRACIN DE SISTEMAS INFORMTICOS Y REDES

UD2: Utilizacin de lenguajes de marcas en entornos web (HTML)

CFGS: ADMINISTRACIN DE SISTEMAS INFORMTICOS Y REDES

UD2: Utilizacin de lenguajes de marcas en entornos web (HTML)

El siguiente ejemplo muestra el uso de las etiquetas de ttulo de seccin:

Los navegadores muestran el ejemplo anterior de la siguiente manera:

CFGS: ADMINISTRACIN DE SISTEMAS INFORMTICOS Y REDES

UD2: Utilizacin de lenguajes de marcas en entornos web (HTML)

CFGS: ADMINISTRACIN DE SISTEMAS INFORMTICOS Y REDES

UD2: Utilizacin de lenguajes de marcas en entornos web (HTML)

CFGS: ADMINISTRACIN DE SISTEMAS INFORMTICOS Y REDES

UD2: Utilizacin de lenguajes de marcas en entornos web (HTML)

Etiqueta <b></b> <i></i> <u></u>

Efecto Negrita (bold) Cursiva (Italia) Subrayada (underline)

CFGS: ADMINISTRACIN DE SISTEMAS INFORMTICOS Y REDES

UD2: Utilizacin de lenguajes de marcas en entornos web (HTML)

CFGS: ADMINISTRACIN DE SISTEMAS INFORMTICOS Y REDES

UD2: Utilizacin de lenguajes de marcas en entornos web (HTML)

El anterior cdigo HTML se visualiza en cualquier navegador de la siguiente manera: