LENGUAJE HTML
¿QUE ES?
HTML (HyperText Markup Language) es el lenguaje estándar utilizado para la creación y diseño de páginas web. No es un lenguaje de programación, sino un lenguaje de marcado que estructura el contenido de un sitio web mediante etiquetas.
Historia y Evolución de HTML
1991: Tim Berners-Lee crea HTML para compartir documentos en la web.1995: HTML 2.0 introduce formularios y tablas. 1997: HTML 3.2 agrega soporte para scripts y estilos. 1999: HTML 4.01 mejora la accesibilidad y el diseño web. 2014: HTML5 introduce etiquetas semánticas y compatibilidad multimedia.
Estructura Básica de un Documento HTML
<!DOCTYPE html>
<html>
<head>
<title>Mi primera página</title>
</head>
<body>
<h1>¡Hola, mundo!</h1>
<p>Bienvenidos a mi página web.</p>
</body>
</html>
Etiquetas Básicas
<html>: Indica el inicio y fin del documento HTML. <head>: Contiene información sobre la página, como el título y los metadatos. <body>: Contiene el contenido visible de la página..
LENGUAJE HTML
REALIZADO POR: JUAN PABLO ESTEVA ARROYO
Cabeceras, Párrafos, Comentarios
Cabeceras<h1> hasta <h6>: Definen títulos y subtítulos. <h1> es el más importante. Párrafos <p>: Se usa para escribir párrafos de texto. Comentarios <!-- comentario -->: Permite agregar notas en el código sin que sean visibles en la web.
Texto y Formato
Etiquetas de Texto<strong>: Texto en negrita. <em>: Texto en cursiva. <u>: Texto subrayado. <br>: Salto de línea. <hr>: Línea horizontal separadora.
Enlaces y Navegación
<a href="https://www.ejemplo.com">Visitar página</a>href: Dirección del enlace. target="_blank": Abre el enlace en una nueva pestaña. <nav>
<ul>
<li><a href="index.html">Inicio</a></li>
<li><a href="nosotros.html">Nosotros</a></li>
<li><a href="contacto.html">Contacto</a></li>
</ul>
</nav>
Imágenes y Multimedia
<img src="imagen.jpg" alt="Descripción de la imagen" width="300" height="200">src: Ruta de la imagen. alt: Texto alternativo (importante para accesibilidad). width y height: Ajustan el tamaño.
LENGUAJE HTML
REALIZADO POR: JUAN PABLO ESTEVA ARROYO
Insertar Videos y Audio
<video controls width="500"> <source src="video.mp4" type="video/mp4"> Tu navegador no soporta videos. </video> html Copiar Editar <audio controls> <source src="audio.mp3" type="audio/mpeg"> Tu navegador no soporta audio. </audio>
Tablas
<table border="1">
<tr>
<th>Nombre</th>
<th>Edad</th>
</tr>
<tr>
<td>Ana</td>
<td>25</td>
</tr>
</table>
<table>: Define la tabla.
<tr>: Fila.
<th>: Encabezado.
<td>: Celda de datos.
Formularios
<form action="procesar.php" method="post"> <label for="nombre">Nombre:</label> <input type="text" id="nombre" name="nombre"> <input type="submit" value="Enviar"> </form> <form>: Define el formulario. <input>: Campo de entrada. <textarea>: Área de texto. <select>: Menú desplegable. <button>: Botón de acción.
LENGUAJE HTML
REALIZADO POR: JUAN PABLO ESTEVA ARROYO
HTML5 y Etiquetas Semánticas:
<header>: Encabezado de una página. <footer>: Pie de página. <nav>: Barra de navegación. <section>: Sección de contenido. <article>: Artículo dentro de la web. Ejemplo de estructura semántica: html Copiar Editar <header> <h1>Mi Página Web</h1> </header> <nav> <ul> <li><a href="#">Inicio</a></li> </ul> </nav> <section> <article> <h2>Artículo 1</h2> <p>Contenido del artículo.</p> </article> </section> <footer> <p>Derechos Reservados © 2025</p> </footer>
Buenas Prácticas
Validación de HTML: Asegúrate de que el código HTML cumpla con los estándares (usa herramientas como el [W3C Validator] para evitar errores y mejorar la compatibilidad). Accesibilidad web: Diseña tu sitio para que sea accesible a todos, incluidos usuarios con discapacidades (usa etiquetas semánticas, texto alternativo en imágenes y asegúrate de que el sitio sea navegable con el teclado). SEO básico: Optimiza tu sitio para motores de búsqueda usando palabras clave, títulos y descripciones claras, URLs amigables y asegurando tiempos de carga rápidos.
REFERENCIAS
https://niaxus.com/2025/03/02/html-que-es-para-que-sirve-caracteristicas/ https://coloreshtml.es/cuales-son-las-principales-caracteristicas-de-html/ https://sernagrp.com/blog/html/ https://www.bing.com/search?q=LENGUA%20HTML%20CRACTERISTICAS%7D&qs=n&form=QBRE&sp=-1&ghc=1&lq=0&pq=lengua%20html%20cracteristicas&sc=0-26&sk=&cvid=8E56F8C81E9D48AFB9717D532BD8F3B1&ghsh=0&ghacc=0&ghpl=
REALIZADO POR: JUAN PABLO ESTEVA ARROYO
LENGUAJE HTML
ESTEVA ARROYO JUAN PABLO
Created on March 26, 2025
Start designing with a free template
Discover more than 1500 professional designs like these:
View
Movie Infographic
View
Interactive QR Code Generator
View
Advent Calendar
View
Tree of Wishes
View
Witchcraft vertical Infographic
View
Halloween Horizontal Infographic
View
Halloween Infographic
Explore all templates
Transcript
LENGUAJE HTML
¿QUE ES?
HTML (HyperText Markup Language) es el lenguaje estándar utilizado para la creación y diseño de páginas web. No es un lenguaje de programación, sino un lenguaje de marcado que estructura el contenido de un sitio web mediante etiquetas.
Historia y Evolución de HTML
1991: Tim Berners-Lee crea HTML para compartir documentos en la web.1995: HTML 2.0 introduce formularios y tablas. 1997: HTML 3.2 agrega soporte para scripts y estilos. 1999: HTML 4.01 mejora la accesibilidad y el diseño web. 2014: HTML5 introduce etiquetas semánticas y compatibilidad multimedia.
Estructura Básica de un Documento HTML
<!DOCTYPE html> <html> <head> <title>Mi primera página</title> </head> <body> <h1>¡Hola, mundo!</h1> <p>Bienvenidos a mi página web.</p> </body> </html>
Etiquetas Básicas
<html>: Indica el inicio y fin del documento HTML. <head>: Contiene información sobre la página, como el título y los metadatos. <body>: Contiene el contenido visible de la página..
LENGUAJE HTML
REALIZADO POR: JUAN PABLO ESTEVA ARROYO
Cabeceras, Párrafos, Comentarios
Cabeceras<h1> hasta <h6>: Definen títulos y subtítulos. <h1> es el más importante. Párrafos <p>: Se usa para escribir párrafos de texto. Comentarios <!-- comentario -->: Permite agregar notas en el código sin que sean visibles en la web.
Texto y Formato
Etiquetas de Texto<strong>: Texto en negrita. <em>: Texto en cursiva. <u>: Texto subrayado. <br>: Salto de línea. <hr>: Línea horizontal separadora.
Enlaces y Navegación
<a href="https://www.ejemplo.com">Visitar página</a>href: Dirección del enlace. target="_blank": Abre el enlace en una nueva pestaña. <nav> <ul> <li><a href="index.html">Inicio</a></li> <li><a href="nosotros.html">Nosotros</a></li> <li><a href="contacto.html">Contacto</a></li> </ul> </nav>
Imágenes y Multimedia
<img src="imagen.jpg" alt="Descripción de la imagen" width="300" height="200">src: Ruta de la imagen. alt: Texto alternativo (importante para accesibilidad). width y height: Ajustan el tamaño.
LENGUAJE HTML
REALIZADO POR: JUAN PABLO ESTEVA ARROYO
Insertar Videos y Audio
<video controls width="500"> <source src="video.mp4" type="video/mp4"> Tu navegador no soporta videos. </video> html Copiar Editar <audio controls> <source src="audio.mp3" type="audio/mpeg"> Tu navegador no soporta audio. </audio>
Tablas
<table border="1"> <tr> <th>Nombre</th> <th>Edad</th> </tr> <tr> <td>Ana</td> <td>25</td> </tr> </table> <table>: Define la tabla. <tr>: Fila. <th>: Encabezado. <td>: Celda de datos.
Formularios
<form action="procesar.php" method="post"> <label for="nombre">Nombre:</label> <input type="text" id="nombre" name="nombre"> <input type="submit" value="Enviar"> </form> <form>: Define el formulario. <input>: Campo de entrada. <textarea>: Área de texto. <select>: Menú desplegable. <button>: Botón de acción.
LENGUAJE HTML
REALIZADO POR: JUAN PABLO ESTEVA ARROYO
HTML5 y Etiquetas Semánticas:
<header>: Encabezado de una página. <footer>: Pie de página. <nav>: Barra de navegación. <section>: Sección de contenido. <article>: Artículo dentro de la web. Ejemplo de estructura semántica: html Copiar Editar <header> <h1>Mi Página Web</h1> </header> <nav> <ul> <li><a href="#">Inicio</a></li> </ul> </nav> <section> <article> <h2>Artículo 1</h2> <p>Contenido del artículo.</p> </article> </section> <footer> <p>Derechos Reservados © 2025</p> </footer>
Buenas Prácticas
Validación de HTML: Asegúrate de que el código HTML cumpla con los estándares (usa herramientas como el [W3C Validator] para evitar errores y mejorar la compatibilidad). Accesibilidad web: Diseña tu sitio para que sea accesible a todos, incluidos usuarios con discapacidades (usa etiquetas semánticas, texto alternativo en imágenes y asegúrate de que el sitio sea navegable con el teclado). SEO básico: Optimiza tu sitio para motores de búsqueda usando palabras clave, títulos y descripciones claras, URLs amigables y asegurando tiempos de carga rápidos.
REFERENCIAS
https://niaxus.com/2025/03/02/html-que-es-para-que-sirve-caracteristicas/ https://coloreshtml.es/cuales-son-las-principales-caracteristicas-de-html/ https://sernagrp.com/blog/html/ https://www.bing.com/search?q=LENGUA%20HTML%20CRACTERISTICAS%7D&qs=n&form=QBRE&sp=-1&ghc=1&lq=0&pq=lengua%20html%20cracteristicas&sc=0-26&sk=&cvid=8E56F8C81E9D48AFB9717D532BD8F3B1&ghsh=0&ghacc=0&ghpl=
REALIZADO POR: JUAN PABLO ESTEVA ARROYO