Clase-I HTML

For internal use only
Curso de HTML
Autores: Diego Roldán
Fernando Calabuig
Buenos Aires, Junio 2014
Reglas para el buen desarrollo del curso
 Ser puntuales en el comienzo y finalización del curso
 Respetar la duración de descansos
 Mantener los celulares apagados
 No utilizar notebooks fuera de lo requerido por el curso
 Interrumpir
| Rightshore Delivery Center

Presentación del instructor
Fernando Calabuig
ISBAN Web
fernando.calabuig@capgemini.com

Presentación de los alumnos

Insert "Title, Author, Date"
© 2010 Capgemini - Internal use only. All rights reserved. 4
Agenda del Curso
 HTML
CSS (Estilos)
Javascript
JQuery

Agenda Clase I
 HTML:
 Introducción al HTML
 Características básicas
 Texto en páginas
 Enlaces
 Listas
 Imágenes
 Tablas
 Formularios

Características generales de HTML

HyperText Markup Language
 ¿Qué es HTML?
• "HTML es lo que se utiliza para crear todas las páginas web de Internet. Mas
concretamente, es el lenguaje con el que se ‘escriben’ la mayoría de las
páginas web".
• Nació en los 80’ como sistema para compartir documentos y eran simples
enlaces digitales para compartir documentos.
• Tim Berners-Lee propuso mejorar este sistema, creando HTML. Nace el

estándar WorldWideWeb (w3).

Conceptos Básicos
 HTML es un lenguaje de etiquetas (también llamado lenguaje de

marcado)
 Las etiquetas van de a pares:

• Etiqueta de apertura: carácter <, seguido del nombre de la etiqueta (sin
espacios en blanco) y terminado con el carácter >
• Etiqueta de cierre: carácter <, seguido del carácter /, seguido del nombre de la
etiqueta (sin espacios en blanco) y terminado con el carácter >
<nombre_etiqueta> ... </nombre_etiqueta>

Documento HTML
 Un documento HTML consta de dos partes:
• Cabecera (head): con información de la página (título, idioma)
• Cuerpo (body): contenido de la página (párrafos, texto, imágenes)

Ejemplo Sencillo
<html>
<head>
<title>El primer documento HTML</title>
</head>
<body>
<p>El lenguaje HTML es <strong>tan sencillo</strong> que
prácticamente se entiende sin estudiar el significado
de sus etiquetas principales.</p>
</body>
</html>

Principales etiquetas de un documento HTML


Ejercicio
 Abrir un editor de texto

 Escribir el codigo HTML mostrado como ejemplo
 Guardar el archivo con extensión HTML
 Hacer doble click sobre el archivo.
 Click derecho sobre tu primer página
-> Ver código fuente.
 Atención: todo lo que se coloque fuera de la etiqueta <html> se

ignora.

Texto

Texto

Texto
 Estructurar texto:
• <p> (parrafo): Delimita el contenido de un párrafo de texto
• <h1> … <h6> (sección): Define los títulos de las secciones de mayor
importancia de la página
• <br>: salto de línea
 Marcado de texto
• <em>: Realza la importancia del texto que encierra(Cursiva o italica).
• <strong>: Realza con la máxima importancia el texto que encierra(Bold o
negrita).
• <ins>: Se emplea para marcar una modificación en los contenidos originales
consistente en la inserción de un nuevo contenido (Subraya).
• <del>: Se emplea para marcar una modificación en los contenidos originales
consistente en el borrado de cierto contenido (Tacha).

Ejercicio
 Estructurar y marcar el siguiente texto para que el navegador lo
muestre con el aspecto de la siguiente imagen:

Enlaces

Enlaces
El lenguaje de marcado HTML se definió teniendo en cuenta

algunas de las características que existían en los 80’ para la
publicación digital de contenidos. Entre los conceptos
utilizados en su creación, se encuentra el mecanismo de
"hipertexto".
El elemento principal del hipertexto es el "hiperenlace", también

llamado "enlace web" o simplemente "enlace".

Enlaces
 Enlaces absolutos: incluyen todas las partes de la URL.

• http://www.ejemplo.com/ruta1/ruta2/ruta3/ruta4/ruta5/ruta6/pagina2.html
 Enlaces relativos: prescinden de algunas partes de la URL completa

• ruta4/ruta5/ruta6/pagina2.html

Enlaces Básicos
 <a>: (su nombre viene del inglés "anchor“, literalmente traducido

como "ancla“) Se emplea para enlazar todo tipo de recursos.
• <a href="http://www.google.com">Página principal de Google</a>
• <a href=“C:\imagenes\imagen1.jpg”>Muestra una foto</a>
• <a href="/">Volver al inicio</a>
 ▪ name = "texto" - Permite nombrar al enlace para que se pueda

acceder desde otros enlaces
 ▪ href = "url" - Indica la URL del recurso que se quiere enlazar

CURSO HTML, Diego Roldán, Nov 2012
Enlaces dentro de una misma pagina
<a name="primera_seccion"></a>
<p>……..</p>
...
<a name="segunda_seccion"></a>
<p>…….</p>
El atributo name permite crear enlaces que hacen referencia a secciones dentro de una
misma página
<a href="http://www.ejemplo.com/pagina1.html#segunda_seccion">Enlace a la sección 2 de

la página 1</a>


Ejercicio
 Realizar 2 secciones de la paginas y enlazarlas una con otra.
 Crear un enlace que redirija a https://www.google.com.ar
 Crear un enlace a una imagen.
 Crear una segunda pagina y enlazarlas ambas paginas.

Listas

Listas
 Agrupan determinadas palabras o frases en un conjunto de

elementos que tienen más significado de forma conjunta
• Listas no ordenadas: son las mas usadas. Es un conjunto de elementos

relacionados entre si, pero no se les indica ningun orden o secuencia.
• Listas ordenadas: son similares a las listas no ordenadas, pero los elementos
siguen un orden determinado.
• Listas de defincion: son poco usadas, y son similares a un diccionario donde

cada elemento esta formado por terminos de definiciones

Listas
 <li>: encierra un elemento de una lista
 <ul>: encierra los elementos de las listas no ordenadas
 <ol>: encierra los elementos de las listas ordenadas
 <dl>: encierra los elementos de las listas de definición
 <dt>: término de definición (relacionado a las listas de definición)
 <dd>: descripción de la definición

Listas: Lista no ordenada

Listas: Lista Ordenada

Listas: de definición

Listas
 Tipos de Listas:
 No Ordenada:  Ordenada:
<ul> <ol>
<li>Inicio</li> <li>Enchufar correctamente</li>
<li>Noticias</li> <li>Comprobar conexiones</li>
<li>Artículos</li> <li>Encender el aparato</li>
<li>Contacto</li> </ol>
</ul>

Listas
• Listas de definición:
<dl>
<dt>SGML</dt>
<dd>Metalenguaje para la definición de otros lenguajes de marcado</dd>
<dt>XML</dt>
<dd>Lenguaje basado en SGML y que se emplea para describir datos</dd>
<dt>RSS</dt>
<dt>GML</dt>
<dt>XHTML</dt>
<dt>SVG</dt>
<dt>XUL</dt>
<dd>Lenguajes derivados de XML para determinadas aplicaciones</dd>
</dl>
Imágenes

Imágenes
 <img>: etiqueta para contener imágenes.
 Las Imágenes son el elemento más importante de las página web.
 Existen imágenes:
• de contenido: proporcionan información y completan la información textual. se
incluyen directamente en el código HTML mediante la etiqueta <img>
• de adorno: bordes, iconos, fondos, etc. Deberían emplearse hojas de estilo en
lugar de estar en el código HTML.

Imágenes
 Atributos de la etiqueta <img>
▪ src = "url" - Indica la URL de la imagen que se muestra

▪ alt = "texto" - Descripción corta de la imagen.
▪ longdesc = "url" - Indica una URL en la que puede encontrarse una descripción
más detallada de la imagen
▪ name = "texto" - Nombre del elemento imagen
▪ height = "unidad_de_medida" - Indica la altura con la que se debe mostrar la
imagen (no es obligatorio que coincida con la altura original de la imagen)
▪ width = "unidad_de_medida" - Indica la anchura con la que se debe mostrar la
imagen (no es obligatorio que coincida con la anchura original de la imagen)
<img src="logotipo.gif" alt="Logotipo de Mi Sitio" />
OBS: Esta etiqueta no tiene etiqueta de cierre.

Imágenes
 <img src="/imagenes/foto1.jpg" alt="Fotografía de un paisaje"

width="200" height="350”/>
 <img src="/imagenes/foto2.jpg" width="30%”height=“50%" />
 <img src="/imagenes/foto3.jpg“ width="30%”height=“200" />


Ejercicio
 Ejercicio:
Crear una pagina y agregar los siguientes elementos:
• Una imagen con el tamaño de la imagen.
• Una imagen con tamaños fijos.
• Una imagen con tamaños porcentuales. Probar el comportamiento

agrandando y achicando el navegar no con zoom.
• Una imagen con width fijo y height porcentual.
• Una imagen como link que me lleva a otra pagina.

Tablas

Tablas
 Una tabla es una matriz bidimensional. Cuenta con filas y columnas.
 Las tablas son una herramienta perfecta para organizar datos de manera
ordenada.
 Escondiendo los bordes podremos usarlas también para definir la

estructura de las páginas, aunque esto esta cayendo en desuso.

Tablas
 Las tablas más sencillas de HTML se definen con tres etiquetas:

• <table> Se emplea para definir tablas de datos
• <tr> Se emplea para definir cada fila de las tablas de datos
• <td> Se emplea para definir cada una de las celdas que forman las filas de
una tabla, es decir, las columnas de la tabla

CURSO HTML, Diego Roldán, Nov 2012
Tablas
<table>
<tr>
<td></td> <td></td> <td></td>
</tr>
<tr>
</tr>
<tr>
</tr>
</table>

Tablas
<html>
<head><title>Ejemplo de tabla sencilla</title></head>
<body>
<h1>Listado de cursos</h1>
<table>
<tr>
<td><strong>Curso</strong></td>
<td><strong>Horas</strong></td>
<td><strong>Horario</strong></td>
</tr>
<tr>
<td>CSS</td>
<td>20</td>
<td>16:00 - 20:00</td>
</tr>
<tr>
<td>HTML</td>
<td>20</td>
<td>16:00 - 20:00</td>
</tr>
<tr>
<td>Dreamweaver</td>
<td>60</td>
<td>16:00 - 20:00</td>
</tr>
</table>
</body>
</html>

Tablas

Tablas
Algunas celdas de la tabla se utilizan como cabeceras (head) de las

demás celdas de la fila o columna.
 <th> Se emplea para definir las celdas que son cabecera de una fila
o de una columna de la tabla.
 El atributo mas utilizado es “scope” que indica si es cabecera de

una columna o de una fila (<th scope="row"> y <th scope="col">
respectivamente).
 <caption> Se emplea para definir la leyenda o título de una tabla


Tablas
 Ejercicio:
• Crear un nuevo documento HTML y generar la siguiente tabla:

Tablas
 Ejercicio:
• Determinar los elementos necesarios para poder crear la siguiente tabla:

Tablas
Las tablas complejas suelen disponer una estructura irregular que
junta varias columnas para formar una única columna ancha, o une
varias filas para formar una única fila mas alta que las demás.
 <rowspan> y <colspan> son atributos que se utilizan para poder

fusionar filas y columnas, respectivamente.

Tablas
<table>
<tr>
<td colspan="2">A</td>
</tr>
<tr>
<td>B</td>
<td>C</td>
</tr>
</table>

Tablas
<table>
<tr>
<td>A</td>
<td rowspan="2">B</td>
</tr>
<tr>
<td>C</td>
</tr>
</table>

Tablas
 Ejercicio: Generar el código para fusionar las celdas

Tablas: Fusión Columnas
<html>
<head><title>Ejemplo de columnas fusionadas</title></head>
<body>
<h1>Fusión de columnas</h1>
<table>
<tr>
<td colspan="3">A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
<td colspan="2">D</td>
<td>E</td>
</tr>
<tr>
<td colspan="4">F</td>
</tr>
<tr>
<td>G</td>
<td>H</td>
<td>I</td>
<td>J</td>
</tr>
</table>
</body>
</html>

Tablas: Fusión Filas
<html>
<head><title>Ejemplo de filas fusionadas</title></head>
<body>
<h1>Fusión de filas</h1>
<table>
<tr>
<td>A</td>
<td>B</td>
<td rowspan="3">C</td>
<td>D</td>
</tr>
<tr>
<td rowspan="2">E</td>
<td>F</td>
<td rowspan="3">G</td>
</tr>
<tr>
<td>H</td>
</tr>
<tr>
<td>I</td>
<td>J</td>
<td>K</td>
</tr>
</table>
</body>
</html>

Tablas Avanzadas
 Las partes que componen las tablas complejas se definen mediante las etiquetas
<thead>, <tbody> y <tfoot>.
 La cabecera de la tabla se define con la etiqueta <thead>

 El pie de la tabla se define mediante <tfoot>
 Cada sección de datos se define con una etiqueta <tbody>.

Tablas Avanzadas
Tabla avanzada con cabecera, pie y una sección de datos:

Tablas Avanzadas
 El elemento <tfoot> siempre se escribe antes que cualquier

elemento <tbody> en el código HTML.
 Si la etiqueta <tfoot> aparece después de un elemento <tbody>, la

página no se considera válida.

<html>
<head><title>Ejemplo de tabla avanzada</title></head>
<body>
<h3>Análisis de ventas</h3>
<table summary="Análisis de ventas anuales">
<caption>Análisis de ventas anuales</caption>
<thead>
<tr>
<th rowspan="2" scope="col">AÑO</th>
<th colspan="4" scope="col">Expansión de ventas</th>
</tr>
<tr>
<th scope="col">Producto A</th>
<th scope="col">Producto B</th>
<th scope="col">Producto C</th>
<th scope="col">Producto D</th>
</tr>
</thead>
<tfoot>
<tr>
<th rowspan="2" scope="col">AÑO</th>
<th scope="col">Producto A</th>
<th scope="col">Producto B</th>
<th scope="col">Producto C</th>
<th scope="col">Producto D</th>
</tr>
<tr>
<th colspan="4" scope="col">Expansión de ventas</th>
</tr>
</tfoot>
<tbody>
<tr>
<th scope="row">N-3</th><td>-</td><td>-</td><td>-</td><td>-</td>
</tr>
<tr>
<th scope="row">N-2</th><td>3</td><td>5</td><td>8</td><td>4</td>
</tr>
<tr>
<th scope="row">N-1</th><td>4</td><td>4</td><td>7</td><td>3</td>
</tr>
<tr>
<th scope="row">N</th><td>5</td><td>7</td><td>6</td><td>2</td>
</tr>
</tbody>
</table>

60
© 2010 Capgemini - Internal use only. All rights reserved.
Formularios

Formularios
 El estándar HTML permite crear formularios para que los usuarios

interactúen con las aplicaciones web.
 Los formularios mas sencillos pueden obtenerse con solo dos
etiquetas:
• <form>: encierra todos los contenidos del formulario (botones, cuadros de texto, listas
desplegables)
• <input>: permite definir varios tipos diferentes de elementos (botones y cuadros de texto).

Formularios
 <form>: si bien cuentan con varios atributos, los mas usados son:
• Action: indica la URL de la aplicación del servidor que se encarga de procesar
los datos ingresados.
• Method: establece la forma de en que se envían los datos al servidor. Los dos
valore usado son GET y POST
 POST permite el envío de mucha más información que el método

GET.
 GET no permite el envío de archivos adjuntos con el formulario.

Formularios
 Los elementos de formulario como botones y cuadros de texto

también se denominan "campos de formulario" y "controles de
formulario". La mayoría de controles se crean con la etiqueta
<input>.
 La mayoría de controles se crean con la etiqueta <input>, por lo que

su definición formal y su lista de atributos es muy extensa.

Formularios

Formularios
 Cuadro de texto:
• Nombre <br/> <input type="text" size=“5” name="nombre" value="" />
(si un campo no incluye el atributo name, sus datos no se envían al servidor, maxlength limita la
cantidad de caracteres, size solo el tamaño de la caja de texto)
 Cuadro de contraseña:
• Contraseña <br/><input type="password" size=“5” name=“psw" value="" />
 Checkbox:
Puestos de trabajo buscados <br/>

<input name="puesto_directivo" type="checkbox" value="direccion“ value =“checked”/> Dirección
<input name="puesto_tecnico" type="checkbox" value="tecnico"/> Técnico
<input name="puesto_empleado" type="checkbox" value="empleado"/> Empleado

Formularios
 Radiobutton:
Sexo <br/>
<input type="radio" name="sexo" value="hombre" checked="checked" /> Hombre
<input type="radio" name="sexo" value="mujer" /> Mujer
 Botón de envío de formulario

• <input type="submit" name="buscar" value="Buscar" />
El navegador se encarga de enviar automáticamente los datos cuando el usuario hace click sobre
este tipo de botón.

Formularios
 Botón de reseteo del formulario:
• <input type="reset" name="limpiar" value="Borrar datos del formulario" />
Cuando el usuario pulsa este botón, el navegador borra toda la información introducida y muestra el
formulario en su estado original.
 Ficheros adjuntos:
• Fichero adjunto <input type="file" name="adjunto" />
Si se incluye un control para adjuntar archivos, es obligatorio añadir el atributo enctype en la
etiqueta <form> del formulario.
<form action="..." method="post" enctype="multipart/form-data">

...
</form>

Formularios
 Campos ocultos: No se ven en pantalla. Normalmente se utilizan

para incluir información que necesita el servidor pero que no es
necesario o no es posible que la establezca el usuario.
<input type="hidden" name="url_previa" value="/articulo/primero.html" />
 Boton de imagen: Para customizar los botones.

<input type="image" name="enviar" src="accept.png" />

Formularios
 Botón:
• Algunos formularios complejos necesitan botones más avanzados que los de
enviar datos (type="submit") y resetear el formulario (type="reset"). Por ese
motivo, el estándar HTML define un botón de tipo genérico:
<input type="button" name="guardar" value="Guardar Cambios" />
 Este tipo de botones, si se presionan, no hacen nada: no envía los datos al

servidor y no borra los datos introducidos.
 Solo son útiles si se usan con JAVASCRIPT, programándolos para que realicen
cualquier tarea compleja cuando se les hace click.

Formularios
 Ejercicio:
 1. Elegir el método más adecuado para el

formulario (GET o POST) y cualquier otro
atributo necesario.
 2. El nombre puede tener 30 caracteres
como máximo, los apellidos 80 caracteres y
la
 contraseña 10 caracteres como máximo.
 3. Asignar los atributos adecuados al
campo del DNI.
 4. Por defecto, debe estar marcada la
casilla de suscripción al boletín de
novedades.

Formularios
 Formularios
Avanzados:
• <fieldset>: agrupa campos
de un formulario.
• <legend>: asigna un
nombre a cada grupo.

Formularios
• Habremos notado que los objetos (excepto los botones) no disponen de la

opción de establecer un titulo o texto que se muestre junto al control (en los
ejemplos anteriores el nombre se introdujo de forma de texto normal).
• HTML cuenta con una etiqueta <label> y cuenta con un atributo específico
“FOR”. Este atributo indica de cual elemento en el form será el label
especificado.

Formularios
Usando texto normal:

 Nombre <br/>
<input type="text" name="nombre" value="" />
 Apellidos <br/>
<input type="text" name="apellidos" value="" />
 DNI <br/>
<input type="text" name="dni" value="" size="10" maxlength="9" />
Usando labels:
 <label for="nombre">Nombre</label> <br/>
<input type="text" id="nombre" name="nombre" value="" />
 <label for="apellidos">Apellidos</label> <br/>
<input type="text" id="apellidos" name="apellidos" value="" />
 <label for="dni">DNI</label> <br/>
<input type="text" id="dni" name="dni" value="" size="10" maxlength="9" />

Formularios
 Otros elementos del formulario:
• <select>: (combobox)
• <textarea>: Se emplea para incluir un área de texto en un formulario
– Rows=nro; número de filas de texto que mostrara el textarea.
– Cols =nro; número de columnas de texto que mostrara el textarea.
» Desventaja: no se puede limitar el nro de caracteres a ingresar.

Formularios
El código del ejemplo anterior es el siguiente:
<form action="insertar_producto.php" method="post">

<label for="nombre">Nombre del producto</label> <br/>
<input type="text" id="nombre" name="nombre" value="" />
<label for="descripcion">Descripción del producto</label> <br/>
<textarea id="descripcion" name="descripcion" cols="40" rows="5"></textarea>
</form>

Formularios
Listas desplegables:
<label for="so">Sistema operativo</label> <br/>

<select id="so" name="so">
<option value="" selected="selected">-
selecciona -</option>
<option value="windows">Windows</option>
<option value="mac">Mac</option>
<option value="linux">Linux</option>
<option value="otro">Otro</option>
</select>

Formularios
<label for="so3">Sistema operativo</label> <br/>

<select id="so3" name="so3" size="5"
multiple="multiple">
<option value="windows"
selected="selected">Windows</option>
<option value="mac">Mac</option>
<option value="linux">Linux</option>
<option value="otro">Otro</option>
</select>
<select>: incluye una lista desplegable.
<option>: define cada elemento de la

lista

Formularios
 Las listas desplegables permiten

agrupar sus opciones de forma que
el usuario pueda encontrar
fácilmente las opciones cuando la
lista es muy larga.
 <optgroup>: define una

agrupación lógica de opciones de
una lista desplegable.

Formularios
<form id="formulario" method="post" action="">

<label for="programa">Programa seleccionado</label> <br/>
<select id="programa" name="programa">
<optgroup label="Sistemas Operativos">
<option value="Windows" selected="selected">Windows</option>
<option value="Mac">Mac</option>
<option value="Linux">Linux</option>
<option value="Other">Otro</option>
</optgroup>
<optgroup label="Navegadores">
<option value="Internet Explorer" selected="selected">Internet Explorer</option>
<option value="Firefox">Firefox</option>
<option value="Safari">Safari</option>
<option value="Opera">Opera</option>
<option value="Other">Otro</option>
</optgroup>
</select>
</form>

Formularios
 Ejercicio:

Formularios
 Ejercicio:

www.capgemini.com
The information contained in this presentation is proprietary and confidential. It is for Capgemini internal use only. Copyright ©2010 Capgemini. All rights reserved.

Clase-I HTML

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Clase-I HTML

Cargado por

Copyright:

Formatos disponibles

For internal use only

 Ser puntuales en el comienzo y finalización del curso

 Respetar la duración de descansos

 Mantener los celulares apagados

 No utilizar notebooks fuera de lo requerido por el curso

| Rightshore Delivery Center

| Rightshore Delivery Center

| Rightshore Delivery Center

| Rightshore Delivery Center

| Rightshore Delivery Center

| Rightshore Delivery Center

• Tim Berners-Lee propuso mejorar este sistema, creando HTML. Nace el

| Rightshore Delivery Center

 HTML es un lenguaje de etiquetas (también llamado lenguaje de

 Las etiquetas van de a pares:

<nombre_etiqueta> ... </nombre_etiqueta>

| Rightshore Delivery Center

 Un documento HTML consta de dos partes:

• Cabecera (head): con información de la página (título, idioma)

• Cuerpo (body): contenido de la página (párrafos, texto, imágenes)

| Rightshore Delivery Center

| Rightshore Delivery Center

| Rightshore Delivery Center

© 2010 Capgemini - Internal use only. All rights reserved. 13

 Abrir un editor de texto

 Atención: todo lo que se coloque fuera de la etiqueta <html> se

| Rightshore Delivery Center

| Rightshore Delivery Center

| Rightshore Delivery Center

© 2010 Capgemini - Internal use only. All rights reserved. 18

| Rightshore Delivery Center

| Rightshore Delivery Center

El lenguaje de marcado HTML se definió teniendo en cuenta

El elemento principal del hipertexto es el "hiperenlace", también

| Rightshore Delivery Center

 Enlaces absolutos: incluyen todas las partes de la URL.

 Enlaces relativos: prescinden de algunas partes de la URL completa

| Rightshore Delivery Center

 <a>: (su nombre viene del inglés "anchor“, literalmente traducido

 ▪ name = "texto" - Permite nombrar al enlace para que se pueda

 ▪ href = "url" - Indica la URL del recurso que se quiere enlazar

| Rightshore Delivery Center

<a href="http://www.ejemplo.com/pagina1.html#segunda_seccion">Enlace a la sección 2 de

| Rightshore Delivery Center

© 2010 Capgemini - Internal use only. All rights reserved. 25

| Rightshore Delivery Center

| Rightshore Delivery Center

 Agrupan determinadas palabras o frases en un conjunto de

• Listas no ordenadas: son las mas usadas. Es un conjunto de elementos

• Listas de defincion: son poco usadas, y son similares a un diccionario donde

| Rightshore Delivery Center

 <ul>: encierra los elementos de las listas no ordenadas

 <ol>: encierra los elementos de las listas ordenadas

 <dl>: encierra los elementos de las listas de definición

 <dt>: término de definición (relacionado a las listas de definición)

 <dd>: descripción de la definición

| Rightshore Delivery Center

| Rightshore Delivery Center

| Rightshore Delivery Center

| Rightshore Delivery Center

| Rightshore Delivery Center

| Rightshore Delivery Center

 <img>: etiqueta para contener imágenes.