Programación Web – 2 HTML
Por: Ing. Luis Daniel Lepe Rodríguez
El HTML es utilizado para definir la
estructura del contenido de una
web. Esto quiere decir que el
HTML no se encarga de dar
diseño ni funcionalidad a un
página.
"Hipertexto" se refiere a enlaces
que conectan páginas web entre
sí, ya sea dentro de un solo sitio
HTML web o entre sitios web.
HTML usa "marcado" para anotar
texto, imágenes y otro contenido
para mostrar en un navegador
web. El marcado HTML incluye
Por sus siglas en inglés “HyperText Markup
"elementos" especiales como <p>,
Language” (Lenguaje de marcado de hipertexto) <div>, <span>, <img>, <video>,
es un lenguaje utilizado para desarrollar páginas <ul>, <ol>, <li>, etc.
web.
HTML: HyperText Markup Language - MDN Web Docs
HTML
HTML (HyperText Markup Language)
es el bloque más básico de
construcción de una página Web.
Describe y define el contenido que
se visualiza en los navegadores.
HTML depende de otras tecnologías
para describir su apariencia (CSS) y
su funcionalidad (Javascript).
Estructura de la página web
HTML CSS JavaScript
Estructura Contenido Apariencia Comportamiento
Párrafos Textos Colores Efectos
Tipografías
Encabezados
Imágenes Alineación Validaciones
Listas
Videos Fondos Automatización
Tablas
Tamaños
Etc. Enlaces Etc. Peticiones web
HTML 5
Es la versión estándar más reciente de HTML.
La versión anterior fue HTML 4 que se liberó en
1999.
HTML 5 se diseño para que se puedan servir
páginas web completas sin la necesidad de
plugin adicionales. Haciendo de todo desde
animaciones, música, videos hasta incluso
construir aplicaciones complejas que se
ejecuten en el navegador.
¿Para qué sirve HTML 5?
HTML 5 es un lenguaje más simple.
HTML 5 es un lenguaje más semántico.
HTML 5 es un lenguaje que deja desfasadas a las versiones más antiguas de los
navegadores.
HTML 5 incluye más elementos gráficos y multimedia.
HTML 5 incluye geolocalización.
HTML 5 permite el uso de Webs offline.
HTML 5 permite guardar información de forma local y caché.
¿Por qué HTML 5?
HTML 4.0 no era suficiente para cubrir todas las necesidades web surgidas hasta el
momento.
La web evolucionó rápidamente insertando diferentes contenidos a ofrecer en cada
página.
HTML 4.0 no cubre esas necesidades por lo que se crearon diversas tecnologías que
suplieran este vacío:
Flash Player
Silverlight
Se tiende a un trabajo distribuido por lo que se exigen herramientas tipo "escritorio" en
versión web.
Etiquetas
◦ HTML también es conocido como un
lenguaje de etiquetas. Utiliza las etiquetas
para incluir elementos “especiales” dentro
de nuestra páginas tales como <html>,
<head>, <title>, <body>, <header>,
<footer>, <p>, <div>, <span>, <img>,
<audio>, <canvas>, <embed> y muchos
otros.
◦ Las etiquetas en HTML NO distinguen entre
mayúsculas y minúsculas. Esto es que
pueden ser escritas, en minúsculas,
mayúsculas o una combinación de ambas.
Ej. <title>, <TITLE>, <tITlE> son lo mismo.
<h1> - <h6> Encabezados
<p> Párrafos
<ul> y <ol> Listas desordenadas y ordenadas
<img> Imagen
<div> Divisiones
<table> Tablas
<input> Datos de entrada
Algunas etiquetas más…
Etiquetas o elementos HTML
Al usar etiquetas en nuestro HTML también las solemos llamar como “Elementos HTML”:
Los elementos son los componentes fundamentales del HTML
Cuentan con 2 propiedades básicas:
Atributos
Contenido
En general se conforman con una Etiqueta de Apertura y otra Cierre.
Los atributos se colocan dentro la etiqueta de apertura, y el contenido se coloca entre la
etiqueta de apertura y la de cierre.
Etiquetas o elementos HTML
https://www.aulaclic.es/html/t_1_2.htm
La forma del HTML 5 (HTML Semántico)
HTML 5 incluye muchas etiquetas que te permiten dar orden a tu página para un mejor SEO,
accesibilidad y dar funcionalidades sin la necesidad de CSS o JavaScript.
Introduction to Semantic HTML - Marie Chatfield Rivas
Anatomía (básica) del HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My test page</title>
</head>
<body>
<p>This is my page</p>
</body>
</html>
Herramientas de desarrollo Front-end
¡Realmente puede ser cualquier editor de texto! Pero recomiendo alguno de los siguientes:
Ejercicio en clase
Ejercicio en clase hacer una página web
de presentación personal.
Hacer un resumen de todo lo visto en
clase. (pts extras)
