11 Clase/ 27 de octubre 2015/ Martes Exposición del grupo número 1
En esta clase estuvimos trabajando en grupos para exponer diferentes temas, relacionado con HTML y etiquetas.
¿CUÁLES SON LAS VERSIONES DE HTML? Los estándares oficiales HTML son el HTML 2.0, el HTML 3.2, el HTML 4.0 y el HTML 4.01, aunque actualmente se trabaja en el HTML 5. El HTLM 5 ya está empezando a ser usado aunque todavía no es una especificación oficial. El XHTML, una forma más avanzada del HTML que se suponía iba a sustituir a éste, pero va a quedar integrado dentro del HTML 5.
Versiones HTML
ESTRUCTURA GLOBAL Estructura global HTML5 Los documentos html siguen una estricta organización. Cada parte del documento está diferenciada, declarada y englobada con etiquetas específicas.
Doctype <!DOCTYPE HTML> Esta línea deberá ser la primera línea del documento, sin espacios ni líneas previas. Esto es una manera de activar el modo estándar y forzar a los navegadores a interpretar el HTML5 siempre que sea posible, o a ignorarlo cuando no lo sea. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//"EN
<HTML> Empezamos a construir la estructura de nuestro HTML la cual es de tipo árbol, la raíz de este árbol comienza en la etiqueta <html> la cual envolverá el resto de las etiquetas. Nuestro código va de la siguiente manera: <!DOCTYPE> <html lang=“es”> </html> El atributo lang en la etiqueta de apertura <html> es el único atributo que necesitamos definir en HTML5, el cual define el idioma humano del contenido del documento HTML, en este caso es = español.
<head> El código HTML incluido en las etiquetas <html> tiene que estar dividido en dos secciones principales. Como ya ocurría en versiones anteriores de HTML, la primera sección es el "head" y la segunda el "body". El elemento <head> va en primer lugar, y como el resto de los elementos estructurales, tiene un tag de apertura y otro de cierre. <!DOCTYPE html> <html lang="es"> <head> </head> </html> El "tag" no ha cambiado con respecto a otras versiones y su función es la misma. Dentro de los "tags" <head>, definiremos el título de nuestra página, declararemos la codificación de caracteres, incluiremos cualquier información general que queramos sobre el documento, e incorporaremos archivos externos con los estilos, scripts o incluso imágenes necesarias para mostrar la página.
<body> La siguiente sección que forma parte de la organización principal del documento HTML es el "body". Este "cuerpo" es la parte visible del documento y viene especificado con la etiqueta <body>. Esta etiqueta no ha cambiado con respecto a las versiones anteriores de HTML: <!DOCTYPE html> <html lang="es"> <head> </head> <body> </body> </html>
<meta> La etiqueta meta especifica como se debe presentar el texto dentro de la pantalla. <!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"> </head> <body> </body> </html> La etiqueta meta en este ejemplo esta indicando que la máquina entienda el lenguaje humano(tildes, la letra “Ñ” y otros caracteres), siendo un formato de codificación de caracteres.
<title> La etiqueta <title>, como siempre, especifica el título del documento. <!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"> <meta name="description" content="Esto es un ejemplo de HTML5"> <meta name="keywords" content="HTML5"> <title>Exposición</title> </head> <body> </body> </html> Este texto es mostrado por los navegadores en la parte superior de la ventana.
<link> Este elemento se utiliza para incorporar estilos, scripts, imágenes o iconos de archivos externos. Uno de los usos más comunes de <link>, es el de insertar un archivo CSS externo: <!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"> <meta name="description" content="Esto es un ejemplo de HTML5"> <meta name="keywords" content="HTML5"> <title>Exposición</title> <link rel="stylesheet" href="edu4javastyles.css"> </head> <body> </body> </html>
Estructura del cuerpo Organización: Cabecera: es el lugar donde solemos tener el logo, nombre, y pequeñas descripciones de nuestra página web. Barra de Navegación: ofrece un menú o lista de links para poder navegar por el sitio web. Los usuarios son llevados desde esta barra a diferentes páginas, fuera o en mismo sitio web. Información Principal: podría tener una lista de artículos, descripciones de productos, entradas de blog y cualquier otra información importante de la pagina. Barra Lateral: tendría una lista de links apuntando a cada uno de estos ítems. Institucional: se llama así porque es el área de la página donde tenemos información general del sitio web, el autor o la compañía, además de links con referencia a términos y condiciones, mapas e información adicional que el desarrollador cree importante compartir. La barra institucional es el complemento a la Cabecera, y es considerada como una parte esencial de la estructura de la página.
<header> No debe ser confundido con la etiqueta <head>, que hemos utilizado para definir el título de nuestra página. Aporta información como títulos, subtítulos, logos, pero en otro ámbito. La diferencia entre los dos es que la etiqueta <head> tiene la función de suministrar información sobre todo el documento, la etiqueta <header> aporta información del cuerpo del documento o de alguna sección dentro del cuerpo. Ejemplo: <!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"> <meta name="description" content="Ejemplo de HTML5"> <meta name="keywords" content="HTML5"> <title>edu4java Home</title> <link rel="stylesheet" href="edu4javastyles.css"> </head> <body> <header> <h1>edu4java</h1> </header> </body> </html> En el código, vemos que definimos el título de la página web, utilizando la etiqueta <header>. La introducción del elemento <header> representa el principio del cuerpo y de la parte visible del documento.
<nav> HTML5 es muy versátil y nos suministra los parámetros y elementos básicos con los que podemos trabajar. Un ejemplo de esta versatilidad es la etiqueta <nav>, que podemos insertar o bien dentro del elemento <header> o bien dentro de cualquier otra sección del cuerpo. Se encuentra en la Barra de Navegación. Ejemplo: <!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"> <meta name="description" content="Ejemplo de HTML5"> <meta name="keywords" content="HTML5"> <title>edu4java Home</title> <link rel="stylesheet" href="edu4javastyles.css"> </head> <body> <header> <h1>edu4java</h1> </header> <nav> <ul> <li>Tutoriales Web-Html</li> <li>Tutoriales Juegos Android</li> <li>Tutoriales Java para principiantes</li> <li>Tutoriales Sql</li> <li>Contacto</li> </ul> </nav> </body> </html> El elemento <nav> se encuentra dentro de las etiquetas <body>, pero después de las etiquetas de cierre de header (</header), no entre las etiquetas <header Porque el <nav> no forma parte del header, si no que es una nueva sección. Entre las etiquetas <nav>, existen dos elementos que se utilizan para crear una lista. <ul>, para definir la lista. <li>, se utilizan para definir cada ítem de la lista.
GRACIAS
Bibliografía: Gutenberg-Área Tecnología Gráfica-septiembre 23, 2014-Diferentes versiones de HTML- /2014/09/23 -https://tecnologiagrafica1.wordpress.com/diferentes-versiones-de-html-2 Elisabet Rodríguez-Maestros de Web-08/ 31 /2006-El HTML, una idea en evolución-27/10/2015- http://www.maestrosdelweb.com/htmlhis/