Fundamentos de HTML

¿Qué es HTML?

Hyper Text Markup Language

Lenguaje de etiquetas

Determina el contenido y estructura de un documento web a través de etiquetas.

Etiqueta de apertura

Etiqueta de cierre

¿Para qué sirve el HTML?

@michcodes

Anatomía de un elemento HTML

Retrieved from https://developer.mozilla.org/es/docs/Learn/HTML/Introduccion_a_HTML

@michcodes

Elementos que componen una página web

Retrieved from https://www.linkedin.com/learning/html-esencial

@michcodes

Diferentes tipos de etiquetas

@michcodes

Retrieved from https://www.linkedin.com/learning/html-esencial

Categorías de elementos HTML

@michcodes

Elementos de bloque
Elementos en línea

Por ejemplo <div>

Por ejemplo <img />

Atributos de etiquetas

@michcodes

Retrieved from https://developer.mozilla.org/es/docs/Learn/HTML/Introduccion_a_HTML

Anatomía de un documento HTML

@michcodes

Define el tipo de documento (HTML5)

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Mi página web</title>
  </head>
  <body>
    <p>Hola Mundo</p>
  </body>
</html>

Información de metadatos

Contenido que se muestra en el navegador web

Ejemplos de información META

@michcodes

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Titulo</title>

Mínimo indispensable de información META dentro de la etiqueta head:

Para conocer todo el tipo de etiquetas dentro de la etiqueta head:

https://gethead.info/

Estructura típica de un documento web

@michcodes

Retrieved from http://billpatrianakos.me/blog/2015/01/15/how-do-node-web-apps-work-in-production

Raíz del documento

Carpeta de stylesheets

Carpeta de scripts

Documento por defecto que se carga

Carpeta de imagenes

Organización de contenidos en HTML

@michcodes

Semantic web

Retrieved from https://www.w3schools.com/html/html5_semantic_elements