En primer lugar necesitamos indicar el tipo de documento que estamos creando. Esto en HTML5 es extremadamente sencillo:

Transcripción

1 1 Estructura global Los documentos HTML se encuentran estrictamente organizados. Cada parte del documento está diferenciada, declarada y determinada por etiquetas específicas. En esta parte del capítulo vamos a ver cómo construir la estructura global de un documento HTML y los nuevos elementos semánticos incorporados en HTML5. <!DOCTYPE> En primer lugar necesitamos indicar el tipo de documento que estamos creando. Esto en HTML5 es extremadamente sencillo: <html> IMPORTANTE: Esta línea debe ser la primera línea del archivo, sin espacios o líneas que la precedan. De esta forma, el modo estándar del navegador es activado y las incorporaciones de HTML5 son interpretadas siempre que sea posible, o ignoradas en caso contrario. Luego de declarar el tipo de documento, debemos comenzar a construir la estructura HTML. Como siempre, la estructura tipo árbol de este lenguaje tiene su raíz en el elemento <html>. Este elemento envolverá al resto del código: <html lang= es > El atributo lang en la etiqueta de apertura <html> es el único atributo que necesitamos especificar en HTML5. Este atributo define el idioma humano del contenido del documento que estamos creando, en este caso es por español. El elemento va primero, por supuesto, y al igual que el resto de los elementos estructurales tiene una etiqueta de apertura y una de cierre: Dentro de las etiquetas definiremos el título de nuestra página web, declararemos el set de caracteres correspondiente, proveeremos información general acerca del documento e incorporaremos los archivos externos con estilos, códigos Javascript o incluso imágenes necesarias para generar la página en la pantalla. Excepto por el título y algunos íconos, el resto de la información incorporada en el documento entre estas etiquetas es invisible para el usuario.

2 La siguiente gran sección que es parte principal de la organización de un documento HTML es el cuerpo. El cuerpo representa la parte visible de todo documento y es especificado entre etiquetas. <meta> Es momento de construir la cabecera del documento. Algunos cambios e innovaciones fueron incorporados dentro de la cabecera, y uno de ellos es la etiqueta que define el juego de caracteres a utilizar para mostrar el documento. Ésta es una etiqueta <meta> que especifica cómo el texto será presentado en pantalla: <meta charset= iso > La nueva etiqueta <meta> para la definición del tipo de caracteres es más corta y simple. Por supuesto, podemos cambiar el tipo iso por el necesario para nuestros documentos y agregar otras etiquetas <meta> como description o keywords para definir otros aspectos de la página web, como es mostrado en el siguiente ejemplo: <meta charset="iso " /> <meta name="description" content="ejemplo de HTML5" /> <meta name="keywords" content="html5, CSS3, JavaScript" /> Conceptos básicos: Hay varios tipos de etiqueta <meta> que pueden ser incluidas para declarar información general sobre el documento, pero esta información no es mostrada en la ventana del navegador, es solo importante para motores de búsqueda y dispositivos que necesitan hacer una vista previa del documento u obtener un sumario de la información que contiene. Como comentamos anteriormente, aparte del título y algunos íconos, la mayoría de la información insertada entre las etiquetas no es visible para los usuarios. En el

3 código, el atributo name dentro de la etiqueta <meta> especifica su tipo y content declara su valor, pero ninguno de estos valores es mostrado en pantalla. <title> La etiqueta <title>, simplemente especifica el título del documento <meta charset="iso "> <meta name="description" content="ejemplo de HTML5"> <meta name="keywords" content="html5, CSS3, JavaScript"> <title>este texto es el título del documento</title> Conceptos básicos: El texto entre las etiquetas <title> es el título del documento que estamos creando. Normalmente este texto es mostrado en la barra superior de la ventana del navegador. <link> Otro importante elemento que va dentro de la cabecera del documento es <link>. Este elemento es usado para incorporar estilos, códigos Javascript, imágenes o iconos desde archivos externos. Uno de los usos más comunes para <link> es la incorporación de archivos con estilos CSS: <meta charset="iso "> <meta name="description" content="ejemplo de HTML5"> <meta name="keywords" content="html5, CSS3, JavaScript"> <title>este texto es el título del documento</title> <link rel= stylesheet href= misestilos.css > Solo necesitamos dos atributos para incorporar nuestro archivo de estilos: rel y href. El atributo rel significa relación y es acerca de la relación entre el documento y el archivo que estamos incorporando por medio de href. En este caso, el atributo rel tiene el valor stylesheet que le dice al navegador que el archivo misestilos.css es un archivo CSS con estilos requeridos para presentar la página en pantalla (en el próximo capítulo estudiaremos cómo utilizar estilos CSS).

4 2 Encabezados Cierto texto dentro de un documento XHTML puede ser más importante que algún otro texto. Por ejemplo, el texto en esta sección se considera más importante que una nota al pie de página. El lenguaje XHTML proporciona seis encabezados, llamados elementos de encabezado, para especifi car la importancia relativa de la información. El siguiente ejemplo demuestra estos elementos (h1 a h6). El elemento de encabezado h1 se considera el más significativo y, por lo general, se presenta en un tipo de letra más grande que los otros cinco encabezados. Cada elemento de encabezado sucesivo (en otras palabras, h2, h3, etc.) se presenta en un tipo de letra cada vez más pequeño. 3 Etiquetas Para Formato del Texto Salto de Líneas: Para esto deberá utilizar la etiqueta por si sola Linea Horizontal: para esto deberá utilizar la etiqueta <hr />. Ejemplo de utilización: <hr width="50"> <hr size="3"> <hr align="right" width="50%"> <hr align="left" color="green" width="80%"> <hr width="50%" noshade size="5"> <hr color="red" size="10" width="50%">

5 Párrafo: Las etiquetas y definen un párrafo. Si en nuestro documento HTML escribiéramos: hola, estamos en el párrafo 1 ahora hemos cambiado de párrafo El resultado sería: Hola, estamos en el párrafo 1 Ahora hemos cambiado de párrafo Si deseásemos introducir un texto alineado a la izquierda escribiríamos: texto alineado a la izquierda Para una justificación al centro: texto alineado al centro Para justificar a la derecha: texto alineado a la derecha Para justificar el texto: texto alinecion justificada Negritas: Las etiquetas y o y definen un texto en negrita. Si en nuestro documento HTML escribimos una frase con el siguiente código: esto esta en negrita El resultado Será: Esto esta en negrita Itálica: También en este caso existen dos posibilidades, una corta: e (italic) y otra un poco más larga: y . Un ejemplo de texto en itálica: texto en itálica El resultado Será: Texto en itálica Subrayado: El HTML nos propone también para el subrayado el par de etiquetas: y (underlined). Sin embargo, el uso de subrayados ha de ser aplicado con mucha precaución dado que los enlaces hipertexto van, a no ser que se indique lo contrario. Un ejemplo: texto en Subrayado El resultado Será: Texto en Subrayado Subíndices y superíndices: Este tipo de formato resulta de extremada utilidad para textos científicos. Las etiquetas empleadas son: y para los supraíndices y para los subíndices Un ejemplo es el siguiente: La 13cc3h4clnos es un heterociclo alergeno enriquecido El resultado: La 13 CC 3 H 4 ClNOS es un heterociclo alérgeno enriquecido Color, tamaño y tipo de letra Atributo face: Define el tipo de letra, dentro del atributo suelen seleccionarse varios tipos de letra separados por comas. En este caso el navegador comprobará que dispone del primer tipo enumerado y si no es así, pasará al segundo y así sucesivamente. Ejemplo: Este texto tiene otra tipografía

6 Atributo size Define el tamaño de la letra. Este tamaño puede ser absoluto o relativo. Si hablamos en términos absolutos, existen 7 niveles de tamaño distintos numerados de 1 a 7 por orden creciente. Elegiremos por tanto un valor size="1" para la letra más pequeña o size="7" para la más grande. este texto es más grande Atributo color El color del texto puede ser definido mediante el atributo color. Cada color es a su vez definido por un número hexadecimal que esta compuesto a su vez de tres partes. Cada una de estas partes representa la contribución del rojo, verde y azul al color en cuestión. rojo Ir al siguiente enlace para comprender mejor el tema: Atributos para páginas bgcolor: especificamos un color de fondo para la página. En el capítulo anterior y en el taller de los colores y HTML hemos aprendido a construir cualquier color, con su nombre o su valor RGB. El color de fondo que podemos asignar con bgcolor es un color plano, es decir el mismo para toda la superficie del navegador. Un ejemplo es: <body bgcolor="#000000"> background: sirve para indicar la colocación de una imagen como fondo de la página. La imagen se coloca haciendo un mosaico, es decir, se repite muchas veces hasta ocupar todo el espacio del fondo de la página. En capítulos más adelante veremos como se insertan imágenes con HTML y los tipos de imágenes que se pueden utilizar. Un Ejemplo es: <body background="fondo.jpg"> text: este atributo sirve para asignar el color del texto de la página. Por defecto es el negro. link: el color de los enlaces que no han sido visitados. (por defecto es azul clarito) vlink: el color de los enlaces visitandos. La "v" viene justamente de la palabra visitado. Es el color que tendrán los enlaces que ya hemos visitado. Por defecto su color es morado. alink: es el color de los enlaces activos. Un enlace está activo en el preciso instante que se pulsa. A veces es difícil darse cuenta cuando un enlace está activo porque en el momento en el que se activa es porque lo estamos pulsando y en ese caso el navegador abandonará la página rápidamente y no podremos ver el enlace activo más que por unos instantes mínimos. Ejemplo: Vamos a ver una página donde el color de fondo sea negro, y los colores del texto y los enlaces sean claros. Pondremos el color de texto balnco y los enlaces amarillos, más resaltados los que no estén visitados y menos resaltados lo que ya están visitados. Para ello escribiríamos la etiqueta body así:

7 <body bgcolor="#000000" text="#ffffff" link="#ffff33" alink="#ffffcc" alink="ffff00"> l