Programación Web
02 HTML
“El código es el lenguaje con el que le
damos vida a nuestras ideas en el mundo
digital.
Información del Docente
• Nombre: Prof. Marco Antonio Cabrera Rufino.
• Correo Electrónico: epad_instructor19@[Link].
• Horario de Clases: Lunes, Miércoles y Viernes de 8:00 a 10:00 am.
• Horario de Consulta: (El docente lo agregará).
Introducción a HTML
<!DOCTYPE html>
<html>
• ¿Qué es HTML? Lenguaje de <head>
<title>Page Title</title>
marcado para estructurar </head>
contenido web. <body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
• Relación con CSS y JavaScript:
HTML como el esqueleto de la </body>
web. </html>
Introducción a HTML
<!DOCTYPE html> <!DOCTYPE html> → Indica que se usa HTML5.
<html> <html> → Comienza el documento HTML.
<head> <head> → Metadatos (no visibles).
<title>Page Title</title> <title> → Título de la página.
</head> </head>
<body> <body> → Contenido visible en el navegador.
<h1>My First Heading</h1> <h1> → Encabezado principal.
<p>My first paragraph.</p> <p> → Párrafo de texto.
</body> </body>
</html> </html>
Comentarios en HTML
Puede añadir comentarios a la fuente HTML utilizando la siguiente sintaxis:
<!-– Escribe tus comentarios aquí -->
Atributos en HTML
Son propiedades o características adicionales que se añaden a las etiquetas HTML
para definir su comportamiento o modificar su apariencia.
Se colocan siempre dentro de la etiqueta de apertura y constan de:
• Un nombre (atributo).
• Un valor (lo que define el atributo).
Formato General:
<etiqueta atributo="valor">Contenido</etiqueta>
Ejemplo
<a href="[Link] a ejemplo</a>
Ejemplos de atributos en HTML
• <img src="img_girl.jpg">
• <img src="img_girl.jpg" width="500" height="600">
• <img src="img_girl.jpg" alt="Girl with a jacket">
• <p style="color:red;">This is a red paragraph.</p>
• <html lang="en">
Encabezados (Headings) en HTML
Los encabezados son etiquetas HTML que definen títulos o secciones en
una página web.
Van del nivel <h1> al <h6>, donde:
• <h1> es el más importante y grande.
• <h6> es el menos importante y más pequeño.
Ejercicio
Crea una página con:
Un <h1> para el título principal.
Un <h2> para el subtítulo.
Dos <h3> para subsecciones relacionadas.
Atributo style en HTML
¿Qué es el atributo style?
Permite aplicar estilos CSS directamente a una etiqueta HTML.
Se utiliza para personalizar elementos visualmente sin usar un archivo CSS
externo.
Formato básico
<etiqueta style="propiedad: valor;">Contenido</etiqueta>
Propiedades Comunes del Atributo style
Propiedad Descripción Ejemplo
color Cambia el color del texto. <p style="color: red;">Texto rojo</p>
font-size Define el tamaño de la <p style="font-size: 20px;">Texto grande</p>
fuente.
font-family Cambia el tipo de letra <p style="font-family: Arial;">Texto Arial</p>
(fuente).
text-align Alinea el texto (izquierda, <h1 style="text-align: center;">Centrado</h1>
derecha, centro, justificar).
background- Cambia el color de fondo <div style="background-color: yellow;">Fondo
color del elemento. amarillo</div>
border Añade un borde al <div style="border: 1px solid black;">Con borde</div>
elemento.
padding Añade espacio interno <div style="padding: 10px;">Espaciado interno</div>
entre el borde y el
contenido.
margin Añade espacio externo <div style="margin: 20px;">Espaciado externo</div>
alrededor del elemento.
Ventajas y Desventajas del Atributo style
Ventajas:
• Fácil de usar para estilos rápidos.
• Ideal para pruebas o personalización puntual.
Desventajas:
• No es reutilizable.
• Dificulta mantener el código limpio en proyectos grandes.
• Preferible usar hojas de estilo CSS externas o internas para
diseños complejos.
Ejemplo Combinado
<h1 style="color: blue; text-align: center;">Bienvenidos</h1>
<p style="font-size: 18px; font-family: Verdana; color: gray;">
Este es un ejemplo de cómo usar el atributo style.
</p>
Actividad Práctica
Crea un documento HTML con:
Un <h1> que tenga:
• Color de texto verde.
• Alineación al centro.
Un <p> con:
• Texto en rojo.
• Tamaño de fuente de 20px.
• Fondo amarillo.
Introducción al Formato de Texto
• El formato es el uso de etiquetas HTML para dar énfasis o aplicar estilos
básicos al texto.
• Ayuda a estructurar contenido y resaltar información clave.
Ejemplo básico:
<strong>Texto importante</strong>
<em>Texto enfatizado</em>
Etiquetas Comunes de Formateo
Etiqueta Descripción Ejemplo
<b> Hace el texto negrita. <b>Texto en negrita</b>
<strong> Resalta texto como importante (semántico). <strong>Texto importante</strong>
<i> Hace el texto cursiva. <i>Texto en cursiva</i>
<em> Da énfasis al texto (semántico). <em>Texto enfatizado</em>
<mark> Resalta texto con un fondo amarillo. <mark>Texto resaltado</mark>
<small> Hace el texto más pequeño. <small>Texto pequeño</small>
<u> Subraya el texto. <u>Texto subrayado</u>
<del> Muestra texto tachado (contenido <del>Texto tachado</del>
eliminado).
<ins> Muestra texto subrayado insertado. <ins>Texto insertado</ins>
<sub> Crea texto en subíndice. H<sub>2</sub>O
<sup> Crea texto en superíndice. x<sup>2</sup>
Ejemplo Combinado
<p>Este es un <b>texto en negrita</b> y <i>este está en cursiva</i>.</p>
<p>Podemos <mark>resaltar información importante</mark> o <del>mostrar
contenido eliminado</del>.</p>
<p>La fórmula química es H<sub>2</sub>O y el área es x<sup>2</sup>.</p>
Actividad Práctica
Crea un documento HTML que incluya:
Un título (<h1>) y un subtítulo (<h2>).
Un párrafo con:
•Texto en negrita y cursiva.
•Texto resaltado con <mark>.
•Una fórmula con subíndices y superíndices.
Texto tachado y subrayado para demostrar <del> y <u>.
Listas en HTML
Las listas son elementos HTML que agrupan contenido relacionado en un formato
estructurado.
Se dividen en:
1. Listas ordenadas (<ol>): Los elementos tienen un orden numérico o alfabético.
2. Listas no ordenadas (<ul>): Los elementos se presentan con viñetas.
3. Listas de definición (<dl>): Usadas para pares término-descripción.
Listas Ordenadas
Descripción:
(<ol>)
Utilizan números, letras o romanos para los elementos.
Ejemplo Básico:
<ol>
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
</ol>
Listas No Ordenadas (<ol>)
Muestran los elementos con viñetas en lugar de números.
Ejemplo Básico:
<ul>
<li>Primer elemento</li>
<li>Segundo elemento</li>
<li>Tercer elemento</li>
</ul>
Listas de Definición (<dl>)
Utilizan términos (<dt>) y descripciones (<dd>).
Ejemplo Básico:
<dl>
<dt>HTML</dt>
<dd>Lenguaje de marcado para páginas web.</dd>
<dt>CSS</dt>
<dd>Lenguaje para estilizar páginas web.</dd>
</dl>
Listas Anidadas
Puedes incluir listas dentro de otras listas..
Ejemplo Básico:
<ul>
<li>Elemento principal
<ul>
<li>Subelemento 1</li>
<li>Subelemento 2</li>
</ul>
</li>
<li>Otro elemento principal</li>
</ul>
Imágenes en HTML
¿Qué son las imágenes en HTML?
• Son elementos visuales que se incorporan en las páginas web mediante la etiqueta
<img>.
• Las imágenes hacen que las páginas sean más atractivas e interactivas.
Ejemplo
<img src="ruta" alt="Descripción">
Atributos comunes
Atributo Descripción Ejemplo
Especifica la ruta o URL de la
src <img src="[Link]">
imagen.
Texto alternativo que describe la
alt <img alt="Una montaña nevada">
imagen en caso de no cargar.
Define el ancho de la imagen en
width <img src="[Link]" width="300">
píxeles o porcentajes.
Define la altura de la imagen en
height <img src="[Link]" height="200">
píxeles o porcentajes.
Texto emergente al pasar el
title <img src="[Link]" title="Montaña">
cursor sobre la imagen.
Tipos de Rutas para Imágenes
Ruta Absoluta: Indica una URL completa (ubicación externa).
Ejemplo:
<img src="[Link] alt="Ejemplo externo">
Tipos de Rutas para Imágenes
Ruta Relativa: Indica la ubicación de la imagen en relación con
el archivo HTML.
Ejemplo:
<img src="carpeta/[Link]" alt="Ejemplo local">
Ejemplo Completo
<!DOCTYPE html>
<html>
<head>
<title>Imágenes en HTML</title>
</head>
<body>
<h1>Ejemplo de Imágenes</h1>
<img src="[Link]" alt="Una montaña nevada" width="300" height="200" title="Montaña">
<p>La imagen muestra una montaña nevada al atardecer.</p>
</body>
</html>
Cómo Acceder a Otros Archivos HTML
desde un Archivo Principal
• Facilita la navegación entre páginas en un sitio web.
• Permite estructurar proyectos en diferentes secciones (ejemplo: Inicio, Acerca
de, Contacto).
<a href="[Link]">Ir a otra página</a>
<!--Se utiliza principalmente la etiqueta <a> (hipervínculo).-->>
<!--href: Especifica el archivo HTML al que se desea acceder.-->
Uso de Navegación
Puedes crear un menú de navegación en un archivo principal:
<nav>
<a href="[Link]">Inicio</a>
<a href="paginas/[Link]">Acerca</a>
<a href="paginas/[Link]">Contacto</a>
</nav>
Buenas practicas
Actividad practica
Elemento HTML Div
El elemento <div> es por defecto un elemento de bloque, lo que
significa que ocupa todo el ancho disponible, y viene con saltos
de línea antes y después.
Lorem Ipsum <div>I am a div</div> dolor sit amet.
<div> como contenedor
El elemento <div> es por defecto un elemento de bloque, lo que
significa que ocupa todo el ancho disponible, y viene con saltos
de línea antes y después.
<div>
<h2>London</h2>
<p>London is the capital city of England.</p>
<p>London has over 9 million inhabitants.</p>
</div>
Atributo HTML id
• El atributo id de HTML se utiliza para especificar un id único para un elemento
HTML.
• No puede haber más de un elemento con el mismo id en un documento
HTML.
Reglas de uso del atributo ID
• El atributo id especifica un id único para un elemento HTML. El valor del atributo id
debe ser único dentro del documento HTML.
• El atributo id se utiliza para apuntar a una declaración de estilo específica en una hoja
de estilo. También es utilizado por JavaScript para acceder y manipular el elemento con
el id específico.
• La sintaxis para id es: escriba un carácter hash (#), seguido de un nombre id. A
continuación, se degine las propiedades CSS entre llaves {}.
Reglas de uso del atributo ID
• El atributo id especifica un id único para un elemento HTML. El valor del atributo id
debe ser único dentro del documento HTML.
• El atributo id se utiliza para apuntar a una declaración de estilo específica en una hoja
de estilo. También es utilizado por JavaScript para acceder y manipular el elemento con
el id específico.
• La sintaxis para id es: escriba un carácter hash (#), seguido de un nombre id. A
continuación, se degine las propiedades CSS entre llaves {}.
Ejemplo del uso del atributo ID
En el siguiente ejemplo tenemos un elemento <h1> que apunta al nombre de id
«myHeader». Este elemento <h1> será estilizado de acuerdo con la definición de estilo
#myHeader en la sección head:
<!DOCTYPE html>
<html>
<head>
<style>
#myHeader {
background-color: lightblue;
color: black;
padding: 40px;
text-align: center;
}
</style>
</head>
<body>
<h2>The id Attribute</h2>
<p>Use CSS to style an element with the id "myHeader":</p>
<h1 id="myHeader">My Header</h1>
</body>
</html>
Introducción a las Clases en HTML
- Una clase es un atributo utilizado en HTML para asignar uno o
varios identificadores a un elemento o grupo de elementos.
- Se utiliza principalmente para agrupar elementos con
características similares y aplicarles estilos en CSS o
manipularlos con JavaScript.
Estructura básica:
<etiqueta class="nombreClase">Contenido</etiqueta>
Características de las Clases
• El atributo class puede contener varios nombres de clases separados por
espacios.
• Una clase puede ser utilizada en múltiples elementos.
• No es exclusiva de una etiqueta, puedes asignarla a cualquier elemento
HTML.
Ejemplo básico
<div class="contenedor">Este es un contenedor</div>
<p class="texto">Este es un párrafo con clase
"texto"</p>
Características de las Clases
¿Por qué usar clases?
• Para agrupar elementos con estilos similares.
• Para facilitar la manipulación de elementos desde CSS o JavaScript.
• Para organizar el diseño de una página web de forma estructurada.
Múltiples Clases en un Elemento
Se pueden asignar varias clases separándolas con espacios.
<div class="clase1 clase2 clase3">Ejemplo de múltiples clases</div>
¿Cómo funcionan las múltiples clases?
• Cada clase asignada puede tener un estilo diferente en CSS.
• Las propiedades de las clases se combinan, pero si hay conflictos, las últimas
definiciones tienen prioridad.
CSS para múltiples clases: .clase1 {
color: blue;
}
.clase2 {
font-size: 20px;
}
Donde colocar el código css
En un Bloque <style> (CSS Interno)
• Coloca el CSS dentro de la etiqueta <style> en la sección <head> del archivo
HTML.
• Ideal para proyectos pequeños o ejemplos rápidos.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejemplo de Múltiples Clases</title>
<style>
.clase1 {
color: blue;
}
.clase2 {
font-size: 20px;
}
.clase3 {
background-color: yellow;
}
</style>
</head>
<body>
<div class="clase1 clase2 clase3">Ejemplo de múltiples clases</div>
</body>
</html>
Donde colocar el código css
Si prefieres usar un archivo CSS externo (recomendado para mantener mejor
organizados los estilos), debes crear un archivo separado, por ejemplo,
[Link], y luego vincularlo a tu archivo HTML usando la etiqueta <link>.
.clase1 {
color: blue;
}
.clase2 {
font-size: 20px;
}
.clase3 {
background-color: yellow;
}
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejemplo de Múltiples Clases</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<div class="clase1 clase2 clase3">Ejemplo de múltiples clases</div>
</body>
</html>
¿Por qué usar un archivo externo?
• Reutilización: Puedes usar el mismo archivo CSS en múltiples
páginas web.
• Organización: Mantiene los estilos separados del contenido
HTML, facilitando el mantenimiento.
• Escalabilidad: Ideal para proyectos grandes.
Actividad: Página con Clases y Estilos
Instrucciones:
1. Crea una página web básica con los siguientes elementos:
• Un encabezado que contenga un título principal.
• Una lista ordenada con tres elementos de texto.
• Un párrafo con texto descriptivo.
• Una imagen con un texto alternativo.
2. Define clases en un archivo css para aplicar los siguientes estilos:
• Cambiar el color de fondo del encabezado.
• Ajustar el tamaño y color del texto del párrafo.
• Colocar un borde alrededor de la imagen.
• Cambiar el color del texto de los elementos de la lista..
[Link] tu página web en un navegador.
Tarea de Investigación
Instrucciones para los Estudiantes
[Link] los siguientes temas en HTML:
1. Tablas:
1. Subtemas:
1. Table Borders
2. Table Sizes
3. Table Headers
4. Padding & Spacing
5. Colspan & Rowspan
6. Table Styling
7. Table Colgroup
2. Symbols
3. File Paths
[Link] cada tema:
1. Realiza una breve descripción de su propósito y uso.
2. Incluye ejemplos de código en HTML con comentarios explicativos.
3. Prepárate para discutirlos en la próxima clase.
[Link]:
1. La información sobre cómo y cuándo entregarla será proporcionada en clase.
Fin del tema
Gracias