ESTRUCTURA DEL CÓDIGO HTML5 1. DocType Es la etiqueta que se escribe en la primera línea del código. Permite declarar el tipo de documento. Es decir, el doctype indica que el documento está escrito siguiendo la estructura HTML. Debe escribirse en mayúscula sostenida. <!DOCTYPE html> 2. Etiqueta <meta> Se utiliza para agregar información sobre la página. Esta información puede ser utilizada por los buscadores, ya que éstos consultan la información de la etiqueta<meta> de las páginas, buscando coincidencias con lo que el usuario pretende encontrar. La etiqueta<meta> se debe insertar entre las etiquetas <head> y </head>. A través de esta etiqueta pueden especificarse los atributos como: name, que indica el tipo de información y content que muestra el valor de dicha información. Para indicar el tipo de información se utilizar cualquier palabra que se desee, como puede ser Autor, Palabras clave, Descripción, entre otros. Pero debido a 1
que la mayoría de buscadores están en inglés, es preferible que el tipo de información se especifique en inglés. Alguna de la información que se puede insertar en la etiqueta meta es: La etiqueta<meta> no necesita etiqueta de cierre. Para cada etiqueta <meta> solo es posible indicar un tipo de información y su valor, pero es posible insertar varias etiquetas <meta> en un mismo documento. Por ejemplo, el siguiente código indica que el autor de la página es ribea web, que la página trata sobre un curso de HTML5, y se indican algunas palabras clave cuando sean consultadas por los buscadores, el código sería: La etiqueta<meta> también se utiliza para indicarle al navegador alguna información o alguna acción que debe realizar. Por ejemplo se puede utilizar el parámetro http-equiv, en lugar del parámetro name, para permitir que la página se actualice automáticamente cada 20 segundos. En ese caso, se debe utilizar la acción Refresh (actualizar). El código sería: 2
Si por algún motivo se ha cambiado la dirección en la que se encuentra publicado el sitio web, y si algún usuario visite la página en la dirección antigua, a los 5 segundos el navegador lo direccionara automáticamente a la dirección nueva. En ese caso se utilizara el siguiente código en la página que se encuentra en la dirección antigua: De este modo, el navegador realizaría la función de actualizar la página, pero cargando la que se encontrará en la nueva dirección (URL=http://www.ribeaweb.com/index.htm). 3. Etiqueta <title> Se utiliza para colocar un título a la página web. Este título aparece en la pestaña de la ventana del navegador que se esté utilizando. La etiqueta <title> se debe insertar entre las etiquetas<head> y </head>, y debe 3
4. Etiqueta Body Es la etiqueta que abre y cierra el cuerpo de la página. Esta etiqueta tiene una serie de atributos los cuales permiten mejorar la apariencia del sitio. Entre ellas tenemos: El color de fondo puede establecerse a través del atributo bgcolor de la etiqueta body, al que es posible asignarle un color representado en hexadecimal o por un nombre predefinido. Así <body bgcolor="#0000ff"> El código hexadecimal se puede cambiar por el nombre del color <body bgcolor="blue"> La imagen de fondo puede establecerse a través del atributo background, indicando la ruta en la que se encuentra guardada la imagen, que puede ser la carpeta imágenes o img En el caso de que la imagen no se encuentre en el mismo directorio que la página, y se encuentre dentro de la carpeta imágenes, que sí se encuentra en la misma carpeta que la página, se debe ralizar: <body background="img/fondo.gif"> A través de la etiqueta<body> es posible establecer el color del texto de la página utilizando el atributo text. Por ejemplo, para hacer que el color del texto de una página sea de color rojo, se debe realizar lo siguiente: <body text= "#FF0000"> o <body text= red> Entre el borde de la ventana y el contenido de la página existe un margen, cuyo tamaño en píxeles puede modificarse mediante los atributos leftmargin (margen izquierdo) y topmargin (margen superior). Estos atributos suelen utilizarse para eliminar el margen, para lo cual deben valer cero. Por ejemplo, para hacer que una página no tenga margen superior, y tenga un margen izquierdo de 20 píxeles, se debe realizar: <body leftmargin="20" topmargin="0"> 5. Etiqueta <p> Es un elemento de versiones anteriores de HTML, y es uno de los utilizados más comúnmente. Representa un párrafo, el cual consiste en un bloque de 4
texto que está separado por líneas en blanco. Esta etiqueta tiene cierre, y se coloca al finalizar el párrafo. <p> HTML5 (HyperText Markup Language, versión 5) es la quinta revisión importante del lenguaje básico de la World Wide Web, HTML. HTML5 especifica dos variantes de sintaxis para HTML. </p> 6. Etiquetas de encabezado Son una serie de etiquetas que sirven para colocar una frase como un título resaltado, así: <h1>encabezaco <h2>encabezaco <h3>encabezaco <h4>encabezaco <h5>encabezaco H1</h1> H2</h2> H3</h3> H4</h4> H5</h5> El resultado final se observaría de la siguiente manera: 7. Etiqueta br Se utiliza para crear saltos de línea. Esta etiqueta no tiene etiqueta de cierre. 5
8. Etiqueta hr El resultado sería: A e s t a s lín e a s s e le s p u e d e a p lic a r a t r ib u t o s d e c o lo r y d e a n c h o, p a r a e llo s e utilizaría el siguiente código: <hr color="red" width="500"> El resultado sería: 9. Etiqueta Div La etiqueta <div> se utiliza para definir una sección dentro del documento. Comúnmente esta etiqueta se utiliza para agrupar un bloque de elementos, para luego añadirle un estilo determinado. Tiene etiqueta de cierre. Y se utiliza con el atributo align, el cual permite alinear el objeto, para esto se utilizarían los valores: 6
Left - Izquierda Center - Centrado Right - Derecho Justify - Justificado Por ejemplo, si se desea centrar el título principal se realizaría el siguiente código: El resultado sería: 10. Etiqueta Span Con<span> y su correspondiente cierre se utilizan para realizar una agrupación dentro de un bloque de texto. Con esta agrupación Esta agrupación permite aplicarle estilos CSS al bloque específico, en especial para aplicar formatos de fuente a los textos. Para ello acompañamos las etiqueta span con el atributo style. Para ello se utilizan los siguientes valores: 7
Fuentes font-family: arial; (aplicare tipo de letra ) font-style: italic;( Aplicar cursiva) font-weight: bold; (Aplicar negrita) font-size: 30px; (Aplicar tamaño al texto ) color: rgb(0, 153, 0); (Aplicar color a la fuente, se utilizan los colores rgb) Alineación del texto [text-align] text-align: right; (Aplicar alineación al texto) Por ejemplo si se desea aplicar formatos de fuente al título las etiquetas a utilizar serán: <div align="center"> <h1><span style="color: rgb(0, 153, 0);font-size: 30px;fontfamily:verdana; ">DEFINICIÓN HTML5</h1></span> </div> En este caso se aplica color verde, tamaño de letra 30 px y tipo de letra verdana al título identificado por el <H1> El resultado será: Al párrafo también se le puede aplicar la etiqueta Span, ya sea a todo el párrafo o a un texto específico, por ejemplo se desea aplicar formatos de fuente al texto, para resaltarlo: HTML5 (HyperText Markup Language, versión 5), se realiza lo siguiente: <p> <span style="color: rgb(255, 0, 0);font-size: 16px;fontfamily:verdana;font-weight: bold;">html5 (HyperText Markup Language, versión 5)</span>es la quinta revisión importante del lenguaje básico- <br>de la World Wide Web, HTML. </p> 8
En este caso se aplica color rojo, tamaño de letra 16 px y tipo de letra verdana y estilo negrita al texto definido entre <span> y </span> El resultado sería: _ 9