Want to create interactive content? It’s easy in Genially!

Get started free

Presentación HTML

albvazgor

Created on November 7, 2023

Start designing with a free template

Discover more than 1500 professional designs like these:

Psychedelic Presentation

Chalkboard Presentation

Witchcraft Presentation

Sketchbook Presentation

Genial Storytale Presentation

Vaporwave presentation

Animated Sketch Presentation

Explore all templates

Transcript

HTML

  • estructura básica
  • 10 etiquetas HTML
  • atributos globales
  • elementos HTML
  • categorías
  • principales características
  • lista en HTML/ y tipos
  • encabezados
  • tablas
  • imágenes y enlaces en HTML

orígenes y evolución del HTML

HTML, que significa "Lenguaje de Marcado de Hipertexto", se originó en la década de 1980 como un sistema para compartir documentos en la incipiente World Wide Web. Su evolución a lo largo de las versiones, desde HTML 1.0 hasta HTML5, ha añadido características de estilo, multimedia y funcionalidad interactiva, convirtiéndolo en el lenguaje fundamental para crear páginas web modernas.

estructura básica tiene una página HTML

La estructura básica de una página HTML consta de cuatro elementos esenciales:

  • <!DOCTYPE html>: Declaración del tipo de documento.
  • <html>: Elemento raíz que engloba todo el contenido de la página.
  • <head>: Sección que contiene metadatos y enlaces a recursos externos.
  • <body>: Cuerpo de la página que muestra el contenido visible.

como se representan las etiquetas html

Las etiquetas HTML se representan en pares con una estructura básica de cuatro líneas:

  • Etiqueta de apertura: <nombre_de_etiqueta>
  • Contenido: Texto o elementos que van dentro de la etiqueta.
  • Etiqueta de cierre: </nombre_de_etiqueta>
  • Ejemplo completo: <nombre_de_etiqueta>Contenido</nombre_de_etiqueta>
Las etiquetas de apertura y cierre encierran el contenido y definen cómo se mostrará en el navegador. El contenido es lo que los visitantes verán en la página web.

diez etiquetas básicas más importantes

1. `<html>`: Define el inicio y el final de un documento HTML. 2. `<head>`: Contiene metadatos, enlaces a recursos y scripts que afectan a la página pero no son visibles en el navegador. 3. `<title>`: Define el título de la página que se muestra en la pestaña del navegador. 4. `<body>`: Contiene el contenido visible de la página web, como texto, imágenes y enlaces. 5. `<h1>`, `<h2>`, `<h3>`, `<h4>`, `<h5>`, `<h6>`: Encabezados que indican niveles de importancia, siendo `<h1>` el más importante y `<h6>` el menos. 6. `<p>`: Define un párrafo de texto. 7. `<a>`: Crea enlaces a otras páginas web o recursos dentro de la misma página. 8. `<img>`: Inserta imágenes en la página. 9. `<ul>` y `<li>`: Se utilizan para crear listas desordenadas (viñetas) con elementos de lista. 10. `<ol>` y `<li>`: Se utilizan para crear listas ordenadas (números o letras) con elementos de lista.

atributos globales de etiqueta HTML

Los atributos globales son aquellos que se pueden aplicar a prácticamente cualquier etiqueta HTML. Estos atributos proporcionan información adicional sobre la etiqueta y su comportamiento. Algunos atributos globales comunes incluyen: 1. `id`: Identifica única y globalmente un elemento. 2. `class`: Asigna una o más clases al elemento para aplicar estilos o comportamientos específicos. 3. `style`: Define estilos en línea para el elemento. 4. `title`: Proporciona información adicional sobre el elemento que se muestra cuando se pasa el ratón sobre él. Estos atributos se representan dentro de la etiqueta con el formato nombre_atributo="valor"

Elementos HTML

Los elementos HTML son bloques fundamentales de construcción de una página web. Se dividen en dos categorías principales: elementos de bloque y elementos en línea. 1. **Elementos de Bloque:** - Se utilizan para estructurar la página en bloques o secciones. - Comienzan en una nueva línea y ocupan todo el ancho disponible. - Ejemplos: `<div>`, `<p>`, `<h1>` a `<h6>`, `<ul>`, `<ol>`, `<li>`. 2. **Elementos en Línea:** - Se utilizan dentro de bloques para dar formato o modificar partes del texto. - No inician en una nueva línea y ocupan solo el ancho necesario. - Ejemplos: `<span>`, `<a>`, `<strong>`, `<em>`, `<img>`.

lista en HTML

En HTML, una lista es un conjunto de elementos organizados de manera secuencial. Hay tres tipos principales de listas: 1. **Lista Desordenada (`<ul>`):** - Representa una lista de elementos sin un orden específico y cada elemento se marca con viñetas. 2. **Lista Ordenada (`<ol>`):** - Representa una lista de elementos con un orden numérico o alfabético y cada elemento se numerará automáticamente. 3. **Lista de Definición (`<dl>`):** - Utilizada para definir términos y sus correspondientes descripciones y se compone de pares de términos (`<dt>`) y descripciones (`<dd>`) Estas listas son herramientas valiosas para organizar información de manera clara y estructurada en una página web.

EJEMPLOS DE LAS LISTAS

En HTML, una lista es un conjunto de elementos organizados de manera secuencial. Hay tres tipos principales de listas: 1. **Lista Desordenada (`<ul>`):** <ul> <li>Elemento 1</li> <li>Elemento 2</li> <li>Elemento 3</li> </ul> 3. **Lista de Definición (`<dl>`):** <dl> <dt>Término 1</dt> <dd>Descripción 1</dd> <dt>Término 2</dt> <dd>Descripción 2</dd> </dl> Estas listas son herramientas valiosas para organizar información de manera clara y estructurada en una página web.

2. **Lista Ordenada (`<ol>`):** <ol> <li>Primer elemento</li> <li>Segundo elemento</li> <li>Tercer elemento</li> </ol>

ENCABEZADOS html

Los encabezados en HTML son elementos que indican la importancia y jerarquía del texto. Se definen con las etiquetas `<h1>` a `<h6>`, donde `<h1>` es el encabezado más importante y `<h6>` es el menos importante. Resumido: - **Definición:** Los encabezados son etiquetas HTML (`<h1>` a `<h6>`) utilizadas para indicar la jerarquía y relevancia del texto. <h1>Encabezado 1</h1> <h2>Encabezado 2</h2> <h3>Encabezado 3</h3> <!-- ... hasta <h6> --> Estos elementos ayudan a estructurar el contenido de la página y proporcionan pistas visuales sobre la organización y la importancia del texto para los usuarios y motores de búsqueda.

TABLAS en HTML

Las tablas en HTML son elementos que permiten organizar datos en filas y columnas. Para unir celdas, se utiliza el atributo `colspan` para combinar horizontalmente y `rowspan` para combinar verticalmente. Resumido: - **Tablas en HTML:** Elementos para organizar datos en filas y columnas. - **Unir Celdas:** - `colspan`: Combina celdas horizontalmente. - `rowspan`: Combina celdas verticalmente.

imágenes y enlaces en HTML

Para introducir imágenes en HTML, se utiliza la etiqueta <img> con el atributo src que especifica la ruta de la imagen. Para enlaces, se utiliza la etiqueta <a> con el atributo href que indica la URL de destino.

FIN