UNIVERSIDAD DE GUAYAQUIL

FACULTAD DE INGENIERIA INDUSTRIAL

SISTEMAS DE LA INFORMACIÓN

Titulo
Elementos HTML

ELABORADO POR:
Anthony pluas Mero
CURSO:
4-6
MATERIA:
Aplicaciones web
DOCENTE:
ING. Mariuxi Tejada

2022 – 2023
 1. Elementos HTML

1.1 Listas
Las listas HTML permiten a los desarrolladores web agrupar un conjunto de elementos
relacionados en listas.

Una lista HTML desordenada:

 Artículo
 Artículo
 Artículo
 Artículo

Una lista HTML ordenada:

1. Primer elemento
2. segundo artículo
3. tercer artículo
4. Cuarto artículo

1.1.1 Lista desordenada

Una lista desordenada comienza con la <ul>etiqueta. Cada elemento de la lista comienza con
la <li>etiqueta.

Los elementos de la lista se marcarán con viñetas (pequeños círculos negros) de forma
predeterminada:

Gráfico 1
Ejemplo de lista desordenada en código HTML

1.1.2 Lista ordenada

Una lista ordenada comienza con la <ol>etiqueta. Cada elemento de la lista comienza con
la <li>etiqueta.

Los elementos de la lista se marcarán con números de forma predeterminada:

Gráfico 2

Ejemplo de lista ordenada en código HTML

1.1.3 Etiquetas
 < ul > Define una lista desordenada
 < ol > Define una lista ordenada
 < li > Define un elemento de lista
 < dl > Define una lista de descripción
 < dt > Define un término en una lista de descripción
 < dd > Describe el término en una lista de descripción

1.2 Tablas
Las tablas HTML permiten a los desarrolladores web organizar los datos en filas y columnas.
Grafico 3
Ejemplo de tabla

1.2.1 Definir una tabla

Una tabla en HTML consta de celdas de tabla dentro de filas y columnas.
Gráfico 4
 Ejemplo de tabla simple con HTML

1.2.2 Celdas de tabla

Cada celda de la tabla está definida por una <td >y una </td>etiqueta.td significa datos de tabla.
Todo lo que está entre <td>y </td>es el contenido de la celda de la tabla.

1.2.3 Filas de tabla

Cada fila de la tabla comienza con una <tr>y termina con una </tr>etiqueta.
tr significa fila de mesa.
Puede tener tantas filas como desee en una tabla; solo asegúrese de que la cantidad de celdas sea
la misma en cada fila.

1.2.4 Encabezados de tabla

A veces desea que sus celdas sean celdas de encabezado de tabla. En esos casos, use
la <th>etiqueta en lugar de la <td>etiqueta:
th significa encabezado de tabla.

1.2.5 Etiquetas de tabla

 <tabla> Define una tabla
 <th> Define una celda de encabezado en una tabla
 <tr> Define una fila en una tabla
 <td> Define una celda en una tabla
 <título> Define un título de tabla
 <colgroup> Especifica un grupo de una o más columnas en una tabla para formatear
 <col> Especifica las propiedades de columna para cada columna dentro de un elemento
<colgroup>
  <thead> Agrupa el contenido del encabezado en una tabla
 <tbody> Agrupa el contenido del cuerpo en una tabla
 <tfoot> Agrupa el contenido del pie de página en una tabla

1.2.6 Como agregar un borde

Cuando agrega un borde a una tabla, también agrega bordes alrededor de cada celda de la tabla:

Para agregar un borde, use la borde propiedad CSS en los elementos table, thy td:

1.2.7 Bordes contraídos

Para evitar tener bordes dobles como en el ejemplo anterior, establezca la border-
collapse propiedad CSS en collapse.

Esto hará que los bordes colapsen en un solo borde

1.2.8 Bordes de la tabla estilo

Si establece un color de fondo para cada celda y le da al borde un color blanco (el mismo que el
fondo del documento), obtendrá la impresión de un borde invisible:

1.3 Imágenes

Las imágenes pueden mejorar el diseño y la apariencia de una página web.

Gráfico 5
Ejemplo de imagen
 1.3.1 Sintaxis de imágenes

La <img>etiqueta HTML se utiliza para incrustar una imagen en una página web.

Técnicamente, las imágenes no se insertan en una página web; las imágenes están vinculadas a
páginas web. La <img>etiqueta crea un espacio de espera para la imagen de referencia.

La <img>etiqueta está vacía, solo contiene atributos y no tiene una etiqueta de cierre.

La <img>etiqueta tiene dos atributos obligatorios:

 src: especifica la ruta a la imagen

 alt: especifica un texto alternativo para la imagen

1.3.2 Atributo SRC

El src atributo requerido especifica la ruta (URL) a la imagen.

1.3.3 Atributo alt

El alt atributo requerido proporciona un texto alternativo para una imagen, si el usuario por
algún motivo no puede verla (debido a una conexión lenta, un error en el atributo src o si el
usuario usa un lector de pantalla).

1.3.4 Tamaño de la imagen ancho y alto

Puede utilizar el style atributo para especificar el ancho y el alto de una imagen.
Alternativamente, puede usar los atributos width y height

1.3.5 Etiquetas de imágenes

 <img> Define una imagen
 <mapa> Define un mapa de imagen
 <área> Define un área en la que se puede hacer clic dentro de un mapa de imagen
 <imagen> Define un contenedor para múltiples recursos de imagen

1.4 Enlaces de hipertexto

Es el componente más básico de la Web. Define el significado y la estructura del contenido

web. Además de HTML, generalmente se utilizan otras tecnologías para describir la
apariencia/presentación de una página web (CSS) o la funcionalidad/comportamiento
(JavaScript).
Grafico 6
Ejemplo de enlaces de hipertexto HTML
Etiqueta de enlaces de hipertexto

En el código fuente HTML los enlaces se identifican mediante la etiqueta <a> y su atributo href,
que contiene el URI del destino al que conduce el enlace. Los URI del destino pueden ser
absolutos (http://www....) o relativos (con respecto al directorio actual).

1.5 Colores de fondo

Todos los navegadores modernos admiten los siguientes 140 nombres de colores (haga clic en
un nombre de color, o un valor hexadecimal, para ver el color como color de fondo junto con
diferentes colores de texto):
Grafico 7
Colores compatibles con todos los navegadores

1.5.1 Colores estilos sombras

 fillStyle Establece o devuelve el color, degradado o patrón utilizado para rellenar el

dibujo
 strokeStyle Establece o devuelve el color, el degradado o el patrón utilizado para los
trazos
 shadowColor Establece o devuelve el color a usar para las sombras
 shadowBlur Establece o devuelve el nivel de desenfoque de las sombras
 shadowOffsetX Establece o devuelve la distancia horizontal de la sombra desde la
forma
 shadowOffsetY Establece o devuelve la distancia vertical de la sombra desde la forma
 1.6 Imágenes de fondo
Para agregar una imagen de fondo en un elemento HTML, use el style atributo HTML y
la background-imagepropiedad CSS:
Grafico 8
Ejemplo de imagen de fondo HTML

También puede especificar la imagen de fondo en el <style> elemento, en la <head> sección:

1.6.1 Imagen de fondo en una pagina

Si desea que toda la página tenga una imagen de fondo, debe especificar la imagen de fondo
en el <body>elemento:

Grafico 9
Ejemplo de imagen de fondo en una página HTML
 1.7 Imágenes de enlace
Si estamos trabajando en una web o blog, debemos subir la imagen a nuestro servidor. De caso
contrario, puedes utilizar servicios como Imgur, Pasteboard, etc. Ahora, deberemos tener claro
la URL de nuestra imagen, que es el lugar donde está almacenada.
El código HTML para enlaces es el siguiente:

<a href="URL DESTINO">Enlace</a>

En este caso, se mostrará la palabra “Enlace” y al dar click nos llevará a la “URL DESTINO”.
Lo que nosotros queremos lograr es que se muestre la imagen y esta nos lleve a una dirección.
Esto lo lograremos sabiendo el código HTML para mostrar una imagen:

<img src="URL DE LA IMAGEN">

1.7.1 Código para enlazar una imagen a un enlace en HTML
Ahora debemos juntar estos códigos para lograr lo que deseamos. Esto sería así:

2. <a href="URL DESTINO"><img src="URL DE LA IMAGEN"></a>

De esta manera, se mostrará una imagen que al dar click nos llevará a la “URL DESTINO”.
Gráfico 10

Ejemplo de imagen de enlace HTML

1.8 Sonido multimedia

Multimedia en la web es sonido, música, videos, películas y animaciones.

1.8.1 Multimedia
Multimedia viene en muchos formatos diferentes. Puede ser casi cualquier cosa que pueda
escuchar o ver, como imágenes, música, sonido, videos, discos, películas, animaciones y más.
Las páginas web suelen contener elementos multimedia de diferentes tipos y formatos.

1.8.2 Compatibilidad con navegador

Los primeros navegadores web tenían soporte solo para texto, limitado a una sola fuente en un
solo color.
Más tarde llegaron los navegadores con soporte para colores, fuentes, imágenes y multimedia.

1.8.3 Formatos multimedia

Los elementos multimedia (como audio o video) se almacenan en archivos multimedia.
La forma más común de descubrir el tipo de archivo es mirar la extensión del archivo.
Los archivos multimedia tienen formatos y diferentes extensiones como: .wav, .mp3, .mp4,
.mpg, .wmv y .avi.
1.8.4 Formatos de video comunes
Hay muchos formatos de video por ahí.

Los formatos MP4, WebM y Ogg son compatibles con HTML.

YouTube recomienda el formato MP4.

FORMATO FILE DESCRIPCION

MPEG .mpg. mpegMPEG. Desarrollado por el Grupo de Expertos en Imágenes en

Movimiento. El primer formato de video popular en la web. Ya no se admite en HTML.
AVI avi AVI (Audio Video Intercalado). Desarrollado por Microsoft. Comúnmente
utilizado en cámaras de video y hardware de TV. Funciona bien en computadoras con Windows,
pero no en navegadores web.
WMV .wmv WMV (Windows Media Vídeo). Desarrollado por Microsoft. Comúnmente
utilizado en cámaras de video y hardware de TV. Funciona bien en computadoras con Windows,
pero no en navegadores web.
QuickTime .mov QuickTime. Desarrollado por Apple. Comúnmente utilizado en cámaras de
video y hardware de TV. Funciona bien en computadoras Apple, pero no en navegadores web.
RealVideo .rm .ram Video real. Desarrollado por Real Media para permitir la transmisión de
video con anchos de banda bajos. No se reproduce en navegadores web.
Flash .swf Flash .flv. Desarrollado por Macromedia. A menudo requiere un componente
adicional (complemento) para jugar en los navegadores web.
Ogg .ogg Teora Ogg. Desarrollado por la Fundación Xiph.Org. Compatible con HTML.
WebM .webm WebM. Desarrollado por Mozilla, Opera, Adobe y Google. Compatible con
HTML.
MPEG-4 o MP4 .mp4 MP4. Desarrollado por el Grupo de Expertos en Imágenes en
Movimiento. Comúnmente utilizado en cámaras de video y hardware de TV. Compatible con
todos los navegadores y recomendado por YouTube.
1.8.5 Formatos de audio comunes
MP3 es el mejor formato para música grabada comprimida. El término MP3 se ha convertido en
sinónimo de música digital.
Si su sitio web es sobre música grabada, MP3 es la opción.

1.8.6 Videos
El <video>elemento HTML se utiliza para mostrar un video en una página web.