Elementos Esenciales HTML: Estructura, Tablas y Multimedia para Desarrolladores Web

Clasificado en Otras materias

Escrito el 7 de Septiembre de 2025 en español con un tamaño de 5,37 KB

1. Estructura Básica de Página Web

1.1 Encabezado

Etiqueta: <header>
Uso: Para definir el encabezado principal de la página.
Código:
html
Copiar código
<header><h1>Encabezado de la Página</h1> </header>

1.2 Título

Etiqueta: <title>
Uso: Define el título que se muestra en la pestaña del navegador.
Código:
html
Copiar código
<head><title>Mi Título de Página</title></head>

1.3 Párrafo

Etiqueta: <p>
Uso: Define un párrafo de texto.
Código:
html
Copiar código
<p>Este es un párrafo de ejemplo en HTML.</p>

2. Tablas

2.1 Definición

Una tabla permite organizar datos en filas y columnas.

2.2 Etiquetas

Etiqueta principal: <table>
Otras etiquetas: <tr> (filas), <th> (encabezado de columna), <td> (celdas)

2.3 Atributos

border: Define el grosor del borde de la tabla.

2.4 Línea de código

html

Copiar código

<table border="1"><tr><th>Encabezado 1</th><th>Encabezado 2</th></tr><tr><td>Dato 1</td><td>Dato 2</td></tr></table>

3. Elementos de Texto

3.1 Cabeceras

Etiqueta: <h1> a <h6>
Uso: Define títulos y subtítulos de diferentes tamaños.
Código:
html
Copiar código
<h1>Título Principal</h1><h2>Subtítulo</h2>

3.2 Secciones

Etiqueta: <section>
Uso: Divide el contenido en secciones lógicas.

3.3 Salto de Línea

Etiqueta: <br>
Código:
html
Copiar código
<p>Línea 1<br>Línea 2</p>

4. Recursos Multimedia

4.1 Enlace

Etiqueta: <a>
Atributo: href (enlace del destino)
Código:
html
Copiar código
<a href="https://www.ejemplo.com">Visita ejemplo.com</a>

4.2 Videos

Etiqueta: <video>
Atributo: controls (muestra controles de reproducción)
Código:
html
Copiar código
<video src="video.mp4" controls></video>

4.3 Imágenes

Etiqueta: <img>
Atributos: src (enlace de la imagen), alt (texto alternativo)
Código:
html
Copiar código
<img src="imagen.jpg" alt="Descripción de la imagen">

5. Estilos y Formato de Texto

5.1 Fuente

Atributo: style (para estilos en línea)
Código:
html
Copiar código
<p style="font-family: Arial;">Texto con fuente Arial.</p>

5.2 Separadores

Etiqueta: <hr>
Código:
html
Copiar código
<hr>

5.3 Animación

Etiqueta: <marquee> (obsoleta, pero usada en ejemplos)
Código:
html
Copiar código
<marquee>Texto animado</marquee>

6. Contenido Incrustado (Frame)

6.1 Definición

Permite mostrar contenido externo en la página.

6.2 Etiquetas

Etiqueta: <iframe>

6.3 Atributos

src: URL del contenido a incrustar.

6.4 Línea de código

html

Copiar código

<iframe src="https://www.ejemplo.com" width="600" height="400"></iframe>

7. Tinkercad

7.1 Definición

Tinkercad es una herramienta de diseño y modelado 3D basada en la web.

7.2 Aplicación

Sirve para crear modelos 3D simples, circuitos electrónicos y simulaciones, útiles para principiantes en el diseño 3D.

Entradas relacionadas:

Etiquetas: