2

HTML

HTML

1. HTML: Anatomía de una página Web
HTML (HyperText Markup Language) es un lenguaje de marcado de texto.
Anatomía de una página Web:

anatomiaPaginaWeb.JPG
  • Container.- Contenedor principal
  • Header.- Cabecera de la página
  • Main content.- Estructura principal, por ejemplo el post de un red social.
  • Sidebar.- Contenido secundario de una página.
  • Footer.- Pie de página.

Hay etiquetas en HTML que nos ayuda a diferenciar en donde estamos.


2. INDEX Y SU ESTRUCTURA BÁSICA: HEAD
Index.html es la página que el servidor buscará primero.

<!--Todo lo que viene es HTML, en DOCTYPE la etiqueta se cierra automáticamente--><!DOCTYPE html><!-- lang es el tipo de lenguaje en la que está la página --><htmllang="es"><!--En head va todo lo que necesita el navegador para ejecutar la página--><head><!--Las etiquetas meta le dan información al navegador, se cierran solas--><!-- charset ayudará al navegador a entender caracteres especiales --><metacharset="UTF-8"><!-- name ayuda al CEO, content  --><metaname="description"content="Esta página te mostrará fotos de gatos"><!-- Autorizar a los robots en buscadores para encontrar esta página --><metaname="robots"content="index, follow"><!-- title, titulo de la pestaña --><title>Es mi página</title><!-- Dimensiones de la página --><metaname="viewport"content="width=device-width, initial-scale=1.0"><!-- Carga las hojas de estilo --><linkrel="stylesheet"href="./css/style.css"></head><!--En body va todo lo que el usuario verá - texto, imágenes, etc--><body></body></html>


3. INDEX Y SU ESTRUCTURA BÁSICA: BODY
Existen 2 tipos de etiquetas:
- De contenido.- Son las etiquetas que llevan el texto, las imágenes y todo que se pueda renderizar en el proyecto.
- Contenedoras.- Llevan más etiquetas adentro y nos ayudan a llevar la estructura del proyecto.

Tenemos que utilizar un HTML semántico.

<!--Todo lo que viene es HTML, en DOCTYPE la etiqueta se cierra automáticamente--><!DOCTYPE html><!-- lang es el tipo de lenguaje en la que está la página --><htmllang="es"><!--En head va todo lo que necesita el navegador para ejecutar la página--><head><!--Las etiquetas meta le dan información al navegador, se cierran solas--><!-- charset ayudará al navegador a entender caracteres especiales --><metacharset="UTF-8"><!-- name ayuda al CEO, content  --><metaname="description"content="Esta página te mostrará fotos de gatos"><!-- Autorizar a los robots en buscadores para encontrar esta página --><metaname="robots"content="index, follow"><!-- title, título de la pestaña --><title>Es mi página</title><!-- Dimensiones de la página --><metaname="viewport"content="width=device-width, initial-scale=1.0"><!-- Carga las hojas de estilo --><linkrel="stylesheet"href="./css/style.css"></head><!--En body va todo lo que el usuario verá - texto, imágenes, etc--><body><!-- Header: etiqueta para el encabezado de la página--><header><!-- Nav se usa para la barra de navegación--><nav></nav></header><!-- main contenido principal--><main><section><article></article></section><!-- ul Listas ordenadas--><ul><li>Soy una manzana</li></ul><!-- ol Listas desordenadas--><ol><li>Soy una manzana</li></ol></main><!-- Pie de página --><footer></footer><p>
            Soy un texto
        </p><h1>Soy un título</h1><h2>Soy otro título</h2><h3>Soy otro título más</h3><!--Agregar hipervínculos--><ahref="">Soy un link</a></body></html>


4. ANATOMÍA DE UNA ETIQUETA DE HTML

anatomiaEtiquetaHTML.JPG
Escribe tu comentario
+ 2