ETIQUETAS IMG, FONT, OL, UL, A

Etiquetas

Formato de texto, manejo de
imagen en html, listas, vínculos y
video en html

Etiqueta font -fuente .

Indica el tamaño, color, o fuente del texto que contiene.
Sus etiquetas son: <font> y </font> (ambas obligatorias).

Ejemplo:

​<p> Texto normal y ... <font size="5" color="#0000ff"> Texto distinto. </font> </p>

Multiple Choice

La etiqueta Font indica el tamaño, color, o fuente del texto que contiene.

• VERDADERO

• FALSO

Fill in the Blank

La etiqueta Font, en español es lo mismo que decir:

Multiple Choice

Si deseo colocar un texto tipo Arial Black, ¿Cuál seria el atributo?

• Color

• Size

• Face

Multiple Choice

La etiqueta Font indica el tamaño, color, o fuente del texto que contiene.

• Verdadero

• Falso

Multiple Choice

¿Cuál de estos códigos esta bien escrito?

• <p> Texto normal y ... <font size="5" color="#0000ff"> Texto distinto. </font </p>

• <p> Texto normal y ... <font size="5" color="#0000ff"> Texto distinto. </font> </p>

• <p> Texto normal y ... <font size=5" color="#0000ff"> Texto distinto. </font> </p>

Multiple Select

Si deseo agregar color y tamaño a un texto, ¿Cuáles serian los atributo?

• Color

• Size

• Face

Listas HTML

Las listas en HTML nos permite crear
conjuntos de elementos en forma de
lista dentro de una página, todos los
cuales irán precedidos, generalmente,
por un guión o número.
Los tipos de listas en HTML son los
siguientes:
• Listas ordenadas
• Listas desordenadas
• Listas de definiciones

Las listas ordenadas en HTML se representan
mediante el elemento OL.

<ol> ... </ol>
Cada uno de los elementos de la lista ordenada se
representará mediante el elemento LI.

Ejemplo:

<ol>
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento N</li>
</ol>

<ol>
<li>Julio</li>
<li>Carmen</li>
<li>Ignacio</li>
<li>Elena</li>
</ol>

Multiple Choice

Las listas ordenadas en HTML se representan
mediante el elemento UL.

• VERDADERO

• FALSO

Multiple Choice

Cada uno de los elementos de la lista ordenada se
representará mediante el elemento LI

• VERDADERO

• FALSO

Listas Desordenadas

Las listas desordenadas en HTML nos sirven para mostrar los
elementos sin ningún tipo de orden, simplemente precedidos por
una viñeta que puede ser un punto, un cuadrado,…
Para definir una lista desordenada en HTML utilizamos el elemento
ul.

Ejemplo:
De esa forma podríamos tener el siguiente código HTML:

<ul> <li>Elemento 1</li>
<li>Elemento 2</li> ...
<li>Elemento N</li> </ul>

<ul>
<li>FC. Barcelona</li>
<li>Real Madrid</li>
<li>Real Betis</li>
<li>Atlético de Madrid</li>
</ul>

•FC. Barcelona
•Real Madrid
•Real Betis
•Atlético de
Madrid

Multiple Choice

Las listas desordenadas en HTML nos sirven para mostrar los
elementos de forma ordenada

• VERDADERO

• FALSO

Multiple Choice

Observe el siguiente código y complete la etiqueta que falta:
<li>FC. Barcelona</li>
<li>Real Madrid</li>
<li>Real Betis</li>
<li>Atlético de Madrid</li>
</ul>

• <li>

• <ol>

• <li>

• <ul>

Etiqueta o elmento A

Puede ser utilizado para insertar vínculos dentro del contenido del documento. En
general estos vínculos, en conjunto con las funcionalidades de los navegadores, permiten
a los usuarios trasladarse de un documento a otro de una manera muy directa.

Los navegadores resaltan el contenido de este elemento (por defecto, mostrándolo en
azul y subrayado) y permiten a los usuarios seguir el vínculo con un click.

Multiple Choice

Puede ser utilizado para insertar vínculos dentro del contenido del documento

• VERDADERO

• FALSO

Ejemplo:

1

2

La etiqueta HTML <img>

• Antes de colocar una imagen en una

página web debemos preguntarnos y
tener claro cuál es el objetivo de dicha
imagen en nuestro sitio web. Las
imágenes utilizadas en una página
web pueden ser de dos tipos:

• Imágenes que pretenden mostrarse

como parte del contenido de la web.

• Imágenes que se muestran como

parte de decoración de la web.

Atributos principales

Como hemos mencionado, para
incluir imágenes e el contenido
de una página utilizaremos la
etiqueta <img>. Se trata de una
etiqueta muy sencilla, que
como hemos visto, necesita al
menos incluir obligatoriamente
los atributos src y alt.

Veamos que atributos pueden ser utilizados en esta

etiqueta:

Atributo

Descripción

src
Indica el nombre o la URL de la imagen a mostrar. Atributo
obligatorio.

alt
Establece un texto alternativo que describa la imagen a
mostrar. Atributo obligatorio.

width
Indica el ancho de la imagen en píxels (sin la unidad). Se puede hacer
desde CSS.

height
Indica el alto de la imagen en píxels (sin la unidad). Se puede hacer
desde CSS.

Ejemplo:

<img src="https://lenguajehtml.com/assets/logo.png"
alt="Logo de HTML5" width="400" height="453" />

La etiqueta HTML
<video>

Para mostrarlos en nuestras páginas, usaremos la etiqueta
HTML <video>, la cuál tiene varios atributos que podemos
utilizar:

ATRIBUTO

DESCRIPCIÓN

src
Archivo o URL del video a reproducir. Obligatoria si no
tiene etiquetas dentro.

width

Indica el tamaño de ancho del video.

height

Indica el tamaño de alto del video.

Ejemplo básico para colocar
un video en nuestra página
web podría ser el siguiente:

<video src="video.mp4" width="640“ height="480">
</video>