HTML
Desarrollo Web Full Stack
Mg. Ing. CIP Walter Daniel Remicio Minami
1
Universidad Nacional de Cañete – UNDC 2024. Todos los derechos reservados
Qué es HTML
El lenguaje de marcado de hipertexto, Hypertext
Markup Language o HTML es un lenguaje de
programación que forma parte de la mayoría de las
páginas web y aplicaciones en línea.
Un hipertexto es un texto que se utiliza para enlazar
con otros textos, mientras que un lenguaje de
marcado es una serie de marcas que indican a los
servidores web la estructura y el estilo de un
documento.
2
Universidad Nacional de Cañete – UNDC 2024. Todos los derechos reservados
Historia del HTML
Antes de la aparición de HTML, existían dos sistemas de
vinculación de documentos electrónicos: los hipervínculos o
enlaces y el SGML, un lenguaje de etiquetas.
En 1989, un investigador del CERN (la Organización Europea
para la Investigación Nuclear), Tim Berners-Lee, asegura que
está trabajando en un sistema nuevo de hipertexto para
compartir documentos.
Cuando su proyecto estuvo listo, lo presentó a una convocatoria
para el desarrollo de un sistema de hipertexto para internet.
Después, se alió con Robert Cailliau, un ingeniero de sistemas,
y juntos presentaron la WorldWideWeb (W3). Esta fue la
propuesta ganadora de la convocatoria.
3
Universidad Nacional de Cañete – UNDC 2024. Todos los derechos reservados
Versiones HTML
Versión Resumen
1.0 HTML 1.0 fue la primera versión del lenguaje HTML lanzado en 1993. Esta versión contenía un conjunto
básico de etiquetas que permitían a los desarrolladores crear documentos estructurados con enlaces y
formatos de texto simples.
2.0 HTML 2.0 se lanzó en 1995 y añadió nuevas características como soporte para formularios y scripts.
3.2 HTML 3.2 fue lanzado en 1997 y agregó soporte para tablas, frames y hojas de estilo en línea.
4.0 HTML 4.0 fue lanzado en 1997 y agregó soporte para hojas de estilo externas, capas y marcos en línea.
La versión 4.01 se lanzó en 1999 y corrigió errores en la versión anterior.
XHTML XHTML (Extensible Hypertext Markup Language) se lanzó en 2000 y se basó en la sintaxis de XML.
XHTML fue una importante evolución de HTML y proporcionó una mayor modularidad y estructura al
lenguaje.
5 HTML5 es la última versión del lenguaje HTML, lanzada en 2014. HTML5 introduce muchas nuevas
características, como etiquetas semánticas, soporte multimedia, formularios mejorados, API de arrastrar
y soltar, almacenamiento local y mucho más.
4
Universidad Nacional de Cañete – UNDC 2024. Todos los derechos reservados
Estructura básica del HTML
Define que este documento es un documento
HTML5
Es el elemento raíz de una página HTML
Contiene metainformación sobre la página
HTML
Especifica un título para la página HTML
Define el cuerpo del documento y es un
contenedor para todos los contenidos visibles
Define un encabezado grande
5
Universidad Nacional de Cañete – UNDC 2024. Todos los derechos reservados
Estructura básica del HTML
Etiqueta meta o meta tag que se encarga de
indicar el idioma en el que está escrita una
página
Indica al navegador qué codificación de
caracteres debe usar para renderizar la
página correctamente
6
Universidad Nacional de Cañete – UNDC 2024. Todos los derechos reservados
Qué es un elemento HTML
Un elemento HTML se define mediante una etiqueta de inicio, su contenido y una etiqueta de
finalización.
<etiqueta> contenido <fin de etiqueta>
Ejemplo: <h1>Hola mundo</h1>
Algunos elementos HTML no tienen contenido (elementos vacíos), y no tienen etiqueta final.
Ejemplo: <br>
7
Universidad Nacional de Cañete – UNDC 2024. Todos los derechos reservados
El archivo HTML y su visualización
El archivo HTML resulta ser un archivo de texto cuya extensión es .html
Este debe ser abierto desde un navegador de internet, el cual interpretará el código HTML en su
interior y lo procesará para luego mostrarlo inmediatamente tal cual ha sido codificado.
8
Universidad Nacional de Cañete – UNDC 2024. Todos los derechos reservados
Encabezados (headings)
Utilizan las etiquetas del <h1> al <h6> donde h1 es un encabezado mas importante y el h6 el menos
importante.
<h1>Encabezado h1</h1>
<h2>Encabezado h2</h2>
<h3>Encabezado h3</h3>
<h4>Encabezado h4</h4>
<h5>Encabezado h5</h5>
<h6>Encabezado h6</h6>
9
Universidad Nacional de Cañete – UNDC 2024. Todos los derechos reservados
Párrafo
Utiliza la etiqueta <p>
Un párrafo usualmente se utiliza como un bloque de texto. Inicia siempre en una nueva línea.
Este es <p>el primer párrafo</p>
<p>Este es el segundo párrafo</p>
10
Universidad Nacional de Cañete – UNDC 2024. Todos los derechos reservados
Párrafos pre formateados
Utiliza la etiqueta <pre>
A diferencia de los párrafos con <p>, esta etiqueta respeta los espacios y saltos de línea.
<p>La tierra estaba seca.
No había ríos ni fuentes.
Y brotó de tus ojos
el agua, toda el agua.</p>
<pre>La tierra estaba seca.
No había ríos ni fuentes.
Y brotó de tus ojos
el agua, toda el agua.</pre>
11
Universidad Nacional de Cañete – UNDC 2024. Todos los derechos reservados
Imágenes
Utiliza la etiqueta <img>
La imagen puede estar localmente en la misma
carpeta o subcarpeta donde se encuentra la
página html
<img src=“[Link]">
<img src=“imagenes/[Link]">
o a una imagen externa mediante su dirección url
<img src="[Link]
12
Universidad Nacional de Cañete – UNDC 2024. Todos los derechos reservados
Imágenes
Atributos útiles en <img>
alt (permite colocar un texto alternativo que se muestra
cuando la imagen no se encuentra disponible)
width (establece el ancho en pixeles de la imagen)
height (establece la altura en pixeles de la imagen)
<img src="[Link]" alt="bandera peruana"
width="200" height="100">
*el ancho y la altura pueden modificarse desde el atributo style
13
Universidad Nacional de Cañete – UNDC 2024. Todos los derechos reservados
Imágenes animadas
Tambien podemos colocar una imagen animada
.gif la cual será mostrada también animada.
<img src="[Link]“>
*También puede estar en una ubicación externa
Otras extensiones soportadas son: apng, ico, cur, jpeg, jfif, pjpeg, pjp, png, svg
14
Universidad Nacional de Cañete – UNDC 2024. Todos los derechos reservados
Hipervínculos (links)
Utiliza la etiqueta <a>
En el atributo href se especifica cual será el destino
del hipervínculo.
El destino puede ser una página web externa
<a href="[Link] a [Link]</a>
o una página web interna
<a href=“[Link]">Ir a [Link]</a>
15
Universidad Nacional de Cañete – UNDC 2024. Todos los derechos reservados
Hipervínculos (links)
La página web se abre por defecto en el mismo navegador/pestaña.
Se puede controlar este comportamiento utilizando el atributo target
<a href="[Link] target="_blank">En otra pestaña</a>
_self (Abre el documento vinculado en el mismo marco en el que se hizo clic) Este es el por defecto.
_blank (Abre el documento vinculado en una nueva ventana o pestaña)
_parent (Abre el documento vinculado en el marco principal)
_top (Abre el documento vinculado en el cuerpo completo de la ventana)
framename (Abre el documento vinculado en el iframe nombrado)
16
Universidad Nacional de Cañete – UNDC 2024. Todos los derechos reservados
Otras etiquetas útiles
<br> Para dar salto de línea. Puede utilizarse dentro de otras etiquetas, por ejemplo <p>
<hr> Para separar con una línea horizontal
17
Universidad Nacional de Cañete – UNDC 2024. Todos los derechos reservados
El atributo style
Este atributo se utiliza en la mayoría de etiquetas html y permite añadirle un estilo o diseño, como
por ejemplo colores, tamaños de letras y otros.
Se acompaña de una propiedad, la cual especifica qué se va a modificar.
Ejemplo:
<h1 style="color:red">HTML</h1>
<p style="font-size:50px">Etiquetas basicas</p>
18
Universidad Nacional de Cañete – UNDC 2024. Todos los derechos reservados
Propiedades del atributo style,
Aquí se listan algunas de las tantas propiedades que se pueden utilizar en el atributo style. El uso de
cada uno dependerá de la etiqueta donde se use.
background-color (cambia el color del fondo del elemento html)
color (cambia el color de la letra)
font-family (cambia la fuente de la letra)
font-size (cambia el tamaño de la letra)
text-align (alinea el texto de manera horizontal respecto al elemento html)
* El comportamiento de este atributo se ampliará en el tema de hojas de estilo en cascada o CSS
19
Universidad Nacional de Cañete – UNDC 2024. Todos los derechos reservados
Elementos para dar formato a textos
Los siguientes elementos permiten añadir ciertos formatos a los textos dentro del documento HTML.
<b> Texto en negrita
<strong> Pone en negrita un texto con importancia
<i> Texto en cursiva
<em> Pone en cursiva un texto que se quiere enfatizar
<mark> Resalta un texto
<small> Reduce el tamaño de un texto
<del> Marca con una línea sobre el texto dando la interpretación que el texto ha sido eliminado
<ins> Subraya un texto para indicar que es un texto insertado (suele ir despues de usar <del>)
<sub> Texto escrito como un subíndice
<sup> Texto escrito como un superíndice
20
Universidad Nacional de Cañete – UNDC 2024. Todos los derechos reservados
Comentarios
No se muestran en el navegador pero sí en el codigo fuente del documento HTML. De esta forma
pueden ser útiles al momento de documentar el código.
<h1>Hola</h1>
<!– escribe tus comentarios aquí -->
<p>Bienvenido al curso de…</p>
21
Universidad Nacional de Cañete – UNDC 2024. Todos los derechos reservados
Bookmarks (marcadores)
Trabajan junto al elemento <a> y permite poder movernos directamente a la ubicación de otro
elemento dentro del documento.
Es necesario que el elemento destino tenga definido el atributo id, el cual permite definir un nombre
identificador único para los elementos dentro del documento.
<a href="#titulo">Ir a titulo</a>
...
...
...
<h1 id="titulo">Bienvenidos</h1>
También puede usarse para ir a marcas de otras páginas.
<a href="[Link]#capitulo">Ir al capítulo</a>
22
Universidad Nacional de Cañete – UNDC 2024. Todos los derechos reservados
Image map
Sirve para crear áreas clickeables sobre una imagen.
El atributo shape puede tener los siguientes valores: rect, circle, poly, default
Según el valor en shape, las coordenadas colocadas en el atributo coords cambian:
rect -> x superior izquierda, y superior izquierda, x inferior derecha, y inferior derecha
circle -> x, y, radio en pixeles
poly -> cada vértice necesario x1,y1,x2,y2,x3,y3,x4,y4,…
default -> toda la imagen
<img src=“[Link]" alt=“imagen" usemap="#mapaImagen">
<map name="mapaImagen">
<area shape="rect" coords="34,44,270,350" alt="computadora" href="">
<area shape="circle" coords="337,300,44" alt="cafe" href="">
<area shape=“poly" coords="140,121,181,116,204,160,204,222,191,270,140,329,85,355,58,352" alt=“pan" href="">
</map>
23
Universidad Nacional de Cañete – UNDC 2024. Todos los derechos reservados
Favicon
Es una pequeña imagen que acompaña al titulo de la pagina
<head>
<link rel="icon" type="image/x-icon" href="[Link]">
</head>
Las extensiones soportadas para ser favicon son:
ICO, PNG, GIF, JPEG, SVG
24
Universidad Nacional de Cañete – UNDC 2024. Todos los derechos reservados
Tabla (table)
Permite elaborar una tabla conteniendo filas y columnas
<table>
<tr>
<th>Codigo</th>
<th>Nombre</th>
<th>Apellido</th>
</tr>
<tr>
<td>202411234</td>
<td>Sandra</td>
<td>Paredes</td>
</tr>
</table>
* En CSS veremos cómo cambiar el diseño/estilo
25
Universidad Nacional de Cañete – UNDC 2024. Todos los derechos reservados
Listas (list)
Permite elaborar una lista con ítems, puede ser ordenada o no.
<ul> <ol>
<li>Chocolates</li> <li>Chocolates</li>
<li>Galletas</li> <li>Galletas</li>
<li>Gaseosas</li> <li>Gaseosas</li>
</ul> </ol>
*En CSS veremos cómo personalizar las viñetas
26
Universidad Nacional de Cañete – UNDC 2024. Todos los derechos reservados
Listas (list)
Tambien hay otro tipo de lista que incluye una descripción del ítem
<dl>
<dt>HTML</dt>
<dd>- Estructura de ls pagina web</dd>
<dt>CSS</dt>
<dd>- Estilo de la pagina web</dd>
<dt>JS</dt>
<dd>- Dinamismo a la pagina web</dd>
</dl>
27
Universidad Nacional de Cañete – UNDC 2024. Todos los derechos reservados
Div
Este elemento es utilizado como un contenedor
<div>
<h1>Hola mundo</h1>
<p>Estos son ejemplos de los elementos HTML más utilizados</p>
<pre>Todo lo mostrado se encuentra en un div</pre>
</div>
28
Universidad Nacional de Cañete – UNDC 2024. Todos los derechos reservados
Span
Este elemento es utilizado para dar color o formato a textos dentro de otra etiqueta
<div>
<h1>Hola mundo</h1>
<p>Estos son ejemplos de los elementos <span style="color:blue;font-weight:bold">HTML</span> más utilizados</p>
</div>
29
Universidad Nacional de Cañete – UNDC 2024. Todos los derechos reservados