Estructura de una página web HTML (Hyper Text Markup Language)
Container (Que lo que contiene las partes)
Header (Donde tendremos un logo y navigation) <header></header>
Main Content (Donde pondremos el contenido y secciones) <main></main>
Sidebar (Barra lateral)
Footer (El pie de página) <footer></footer>
______________________________________________________________________________
_____
Codificando HTML
Estructura
Establecer que todo lo que vendrá es HTML 5 con la instrucción: <!DOCTYPE html>
Establecer contenedor padre que tendrá todo contenido y etiquetas: <html></html>
· tendrá el atributo lang="" : Que le dice al navegador en que idioma está el contenido.
· Resultado etiqueta más atributo: <html lang="es">
Contenedor <head></head> : Cargamos todo lo importante que necesita el navegador
para cargar el proyecto, pero que no es visual para el usuario final. Ej: Llamamos
Librerias externas, nuestro css, etc.
Contenedor <body></body>: Aquí va todo lo que el usuario verá (texto, videos,
imágenes, etc).
Cuidar la tabulación respecto a la etiqueta padre e hijo ejemplo:
<html lang="es">
<head></head>
<body></body>
</html>
Hay etiquetas que se abren y se cierran y otras que se auto cierran solas como <!DOCTYPE html>
En <head></head> Etiquetas meta que cargaremos, ejemplo de algunas importantes:
<meta charset="UTF-8">
· Atributo charset: Para caracteres especiales
· UTF-8: Para que el navegador pueda entender caracteres especiales.
· También existe el "UTF-16" y "UTF-32".
<meta name="description" content="Esta página te mostrará fotos de gatos">
· Sirve para SEO, donde describiremos de que trata la página con la ayuda del
atributo content.
<meta name="robots" content="index,follow">
· Meta para robots de posicionamiento en buscadores. Si no queremos que nos
indexen, ponemos unfollow.
<title>Es mi página</title>
· El título que aparecerá en la pestaña del navegador.
<meta name="viewport" content="width=device-width, inictial-scale=1.0">
· Todos los sitios deben ser responsive, este meta sirve para que se vea el sitio en todos
los dispositivos, compu, celular, que el tamaño se ajuste bien.
<link rel="stylesheet" href="[Link]">
· Para cargar CSS.
· Atributo relativo, rel=stylecheet" para cargar una hoja de estilos y la referencia (en
donde se encuentra ese documento) href="[Link]" que es la ruta (la ruta se encuentra
anotando ./ y sae la carpeta donde seleccionaremos el archivo, auto anotará la ruta).
En BODY hay Etiquetas contenedoras (La estructura de etiquetas) y Etiquetas de Contenido (texto,
videos, imagenes, todo lo renderizable)
Contenedora <header></header>
· Barra de navegación <nav></nav>
Contenedora del Main Área <main></main>
· Pueden ir secciones adentro <section></section>
· Y artículos que pueden ir adentro de cada sección <article></article>
· Podemos crear también etiquetas para listas:
· <ul></ul> (es una lista desordenada - Unorder list)
· <li>Soy una Manzana</li> (Aparece en un punto, porque no está ordenada)
· <ol></ol> (es una lista ordenada - Order list)
· <li>Soy una Manzana</li> (Aparece numerado, porque es lista ordenada)
Contenedora del pie de página <footer></footer>
Otras etiquetas
Tenemos otra etiquetas como la de párrafo <p>Soy un texto</p>
Etiquetas de encabezado como <h1>Soy un título</h1>
Etiqueta de ancla, que nos ayuda a crear hipervínculos <a href="#">Soy un link</a>
Toda la estructura del etiquetado lo llamamos HTML semántico, hacerlo bien como se enseña (para
decirle al navegador donde estamos y que tipo de contenido vamos a utilizar), no utilizar malas
prácticas con el <div></div> para maquetar la estructura HTML.
Recursos
[Link] Etiquetas y descripción
ANATOMIA DE UNA ETIQUETA HTML
Elemento: Contenido de toda una etiqueta: <a href="[Link] mi página</a>
Abertura de Etiqueta: La apertura de una etiqueta ejemplo: <a href="[Link]
Atributo: a href="[Link]
Nombre de atributo: a href
Valor de atributo: "[Link]
