Sesión 11: Códigos / Html / Semántica

html5 es un consenso de la https://www.w3.org/ que se encarga de generar un estándar para toda la web, accesibilidad, seguridad, sus tecnologías y los navegadores tienen la función de interpretarlos. Los documentos html deben tener cierta lógica en su estructura. Un sitio es como un libro que tiene muchas paginas y cada una tiene un orden y jerarquía. En los navegadores sucede los mismo, hay elementos de orden que forman una estructura, por ejemplo sabemos que hay un título principal y que se encuentra arriba, cada página tiene un encabezado, un pie de pagina, si hay elementos fuera de lugar nos encontraríamos con un error semántico.

La semántica identifica y le da sentido a cada TAG

en Html se debe lograr una estructura semántica básica, NO es simplemente colocar tags, se necesita una estructura que sea coherente y que los navegadores puedan leer para interpretarla. A continuación presentamos una estructura básica que fue llamada desde el programa sublimetex escribiendo solo la palabra HTML

html se divide en 2 elementos

<head>

provee información general (metadatos) acerca del documento, incluyendo su título y enlaces a scripts y hojas de estilos. Lo que se escriba entre estas etiquetas no aparece en el sitio porque son la cabeza del documento y se mantienen ocultos.

<head>

<title>titulo del documento</title>

<meta charset=»UTF-8″>
<meta name=»description» content=»Free Web tutorials»>
<meta name=»keywords» content=»HTML, CSS, JavaScript»>
<meta name=»author» content=»Miguel Estay»>
<meta name=»viewport» content=»width=device-width, initial-scale=1.0″> es adaptable

</head>

 

<body>

Cuerpo, todo lo que este entre estas etiquetas será lo que aparezca en el sitio. El elemento <body> de HTML representa el contenido de un documento HTML. Solo puede haber 1 elemento <body> en un documento.  Este es el lugar donde los autores arrojan todos los elementos y contenidos que sus visitantes alcanzarán a ver.

Dentro de la etiqueta <body> se pueden agregar atributos para indicar un color y/o imagen de fondo de la página, color del texto, color de los links, pero en HTML5 se ha desaprobado el uso de estos atributos y esto se tiene que indicar con CSS, este hecho no significa que no funcionen, de hecho se pueden usar y funciona pero siempre es recomendable ajustarse a los estándares, por cuestiones de compatibilidad y cosas por el estilo. Aquí les dejo la lista de los atributos que pueden ir dentro de la etiqueta <body> y que anteriormente eran muy usados, pero mi recomendación es aprender CSS y seguir los nuevos estándares de la W3C.

<body background=»image/LAYOUT-1.jpg»> Sería para CSS

Lo correcto es colocar información del sitio que será visible:

<body>

<h1>esto es el encabezado y tienen niveles de tamaño </h1>

<h1>Heading level 1</h1>

<h2>Heading level 2</h2>

<h3>Heading level 3</h3>

<h4>Heading level 4</h4>

<h5>Heading level 5</h5>

<h6>Heading level 6</h6>

Los elementos de encabezado implementan seis niveles de encabezado del documento, <h1> es el más importante, y <h6>, el menos importante. Un elemento de encabezado describe brevemente el tema de la sección que presenta. La información de encabezado puede ser usada por los agentes usuarios, por ejemplo, para construir una tabla de contenidos para un documento automáticamente.

El elemento p (párrafo)

Es el apropiado para distribuir el texto en párrafos. Sus etiquetas son: <p> y </p>

Crea una caja: en bloque.

Está definido como: Elemento de frase.

Puede contener: cero o más elementos en linea.

Editar sus características debe hacerse en CSS.

<p>Esta mañana me desperté sientiéndome diferente…</p>

</body>

 

Etiquetas semánticas de html5

Son etiquetas que identifican áreas de la pagina, juntas simulan la grilla básica del sitio, esta diagramación es la que debe usarse. Todos estos tags deben estar en el una pagina html5, los navegadores lo entienden y lo pueden leer.

En HTML hay algunos elementos semánticos que se pueden usar para definir diferentes partes de una página web:
  • <article>
  • <aside> Columna lateral
  • <details>
  • <figcaption>
  • <figure>
  • <header> Representa un grupo de ayudas introductorias o de navegación (es una cabecera de mi sitio)
  • <footer>Representa un pie de página para una sección y puede contener información sobre el autor, información de derechos de autor
  • <main>
  • <mark>
  • <nav> Navegación. Representa una sección del documento destinada a la navegación, viene a ser el menu de mi sitio web
  • <section>
  • <summary>
  • <time>

La Etiqueta Div que aun se usa y venia antes de html5, envolvía elementos, funcionaba como un divisor donde se separaban las áreas. <div> </div>

https://www.tutorialspoint.com/html5/html5_new_tags.htm

https://www.javatpoint.com/html-5-tags

https://www.w3schools.com/html/html5_semantic_elements.asp

 

Estructura básica html5

https://www.html6.es/t1_estructura.html

46.21 revisar el video

Tareas

  • que otros meta tags puedo agregar?
  • como agrego el favicon?
  • Conocer las etiquetas de html5
  • Identificar las secciones de mi pagina personal header, footer etc.

Colocar en el html

– Meta Tags
– Favicon
– Estructura HTML5 de su imagen