Pasar al contenido principal

🔥 Hoy comenzamos la especialidad en programación backend con PHP con Yesi Days ¡La primera clase es en vivo y gratis! 😍 Reserva tu lugar. Comienza en:

Alexys Lozada
José Luján
Manuel Rodriguez
José Luján
Luis Avilés
Álvaro Felipe
José Luján
Beto Quiroga
Jonathan MirCha
Jonathan MirCha
Álvaro Felipe
Alexys Lozada, Álvaro Felipe, Jonathan MirCha
Beto Quiroga
Alexys Lozada
Alexys Lozada
José Luján
Álvaro Felipe
Álvaro Felipe
Jonathan MirCha
Jonathan MirCha
Alexys Lozada, José Luján
Alexys Lozada, José Luján
Alexys Lozada, José Luján
Camilo Adobe
Álvaro Felipe
José Luján
Jonathan MirCha
Álvaro Felipe
Álvaro Felipe
Beto Quiroga, Alexys Lozada
Álvaro Felipe
Juan Villalvazo
Luis Avilés
Jonathan MirCha
Jonathan MirCha
Jonathan MirCha

Introducción a HTML

HTML5

Hola gente de EDteam...

...soy su amigo y docente digital Jonathan MirCha, y en esta ocasión quiero darles una introducción a HTML.

HTML Hyper Text Markup Language.

Lenguaje de Marcado de Hiper Texto basado en etiquetas y atributos, nos define estructura y contenido.

Etiquetas HTML.

Tabla periódica de las etiquetas HTML.

Tabla periódica de las etiquetas HTML

Estructura y Contenido.

  • El contenido es el rey.
  • Planear bien nuestra estructura HTML (uso de etiquetas).
  • Trabajar la semántica (significado de nuestro contenido).
  • La semántica de nuestras etiquetas la define el contenido y su distribución.
  • Los motores de búsqueda son ciegos, si tu contenido esta bien estructurado, tu contenido será bien posicionado.

HTML5.

  • Sitio Oficial HTML5.
  • No es un software, no se instala, no se descarga, no se necesita licencia, no cuesta, vive y existe en los navegadores web.
  • Es el paradigma actual de diseño y desarrollo web.
  • Define los actuales estándares de diseño y desarrollo web, tanto para equipos de escritorio, como para dispositivos móviles.
  • Es la sinergia de 3 tecnologías que se complementan en el Front end:
    1. HTML (estructura y contenido).
    2. CSS (diseño y presentación).
    3. JS (interactividad y funcionalidad).
  • Se subdivide en 8 implementaciones:
    1. Semántica (HTML).
    2. CSS3 (CSS).
    3. Multimedia (HTML y JS).
    4. Desconexión y Almacenamiento Local (JS).
    5. Acceso al Dispositivo (JS).
    6. 3D, Gráficos y Efectos (HTML, CSS y JS).
    7. Conectividad (JS).
    8. Rendimiento e Integración (JS).

Semántica.

Con las etiquetas semánticas mejoramos la definición de nuestro contenido, es más entendible tanto para humanos como para máquinas(algoritmos de buscadores).

Recuerda que las etiquetas semánticas no tienen una posición fija en el layout, quien determina la estructura es el contenido.

Etiquetas semánticas y estructurales:

  • <section>: Contenido genérico estructurado.
  • <article>: Contenido estructural distribuible de manera independiente.
  • <aside>: Contenido secundario relacionado o que acompaña o complementa a otro.
  • <header>: Contenido introductorio suele tener elementos de navegación y encabezados (h1...h6).
  • <footer>: Sección que contiene información acerca del documento o página.
  • <nav>: Sección relativa a enlaces dentro del documento o página.
  • <main>: Contenido principal.
  • <figure>: Sección de contenido visual, múltiples medios.
  • <figcaption>: Leyenda o pié relativo al contenido visual de figure.

Ejemplo de semántica HTML5:

semántica HTML5

Buenas Prácticas de Código HTML.

Especificar:

  • Tipo de documento HTML5
  • Atributo de idioma
  • Juego de caractéres
  • Area de Visualización

Definir:

  • Título único máx 65 caractéres
  • Descripción única máx 156 caractéres
  • Estilos antes de </head>
  • Scripts antes de </body>
  • NO Cerrar etiquetas únicas así <img src=" "> en vez de <img src=" "/>
  • Definir atributos booleanos así <input type="button" disabled> en vez de <input type="button" disabled="disabled">

Estructura Básica HTML5:

<!DOCTYPE html>
<html lang="es">
<head>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta charset="UTF-8">
	<title>Título de mi documento, este deberá ser único max 65 caracteres</title>
	<meta name="description" content="Breve descripción de lo que los usuarios
	encontrarán en este documento, deberá ser única max 156 caracteres">
	<link rel="stylesheet" href="estilos.css">
</head>
<body>
	<h1>Estructura de Documento HTML5</h1>
	<!--
		AQUÍ EL CONTENIDO HTML
		Esto es un comentaerio HTML
	-->
	<script src="codigos.js"></script>
</body>
</html>

Más Información sobre HTML:

Recuerda que en EDteam, tenemos un Curso de HTML desde cero donde te enseñamos las bases del lenguaje de marcado en que se basa Internet.

Se despide su amigo y docente digital Jonathan MirCha, sean felices, hasta siempre, nos leemos la próxima semana... 

...bye ;)

Suscríbete al blog de EDteam

Ingresa tu correo electrónico para recibir nuestro boletín semanal