
ETIQUETAS IMG, FONT, OL, UL, A
Presentation
•
Computers
•
4th Grade
•
Practice Problem
•
Easy
Domingo Ogando
Used 2+ times
FREE Resource
13 Slides • 11 Questions
1
Etiquetas
Formato de texto, manejo de
imagen en html, listas, vínculos y
video en html
2
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>
3
Multiple Choice
La etiqueta Font indica el tamaño, color, o fuente del texto que contiene.
VERDADERO
FALSO
4
Fill in the Blanks
5
Multiple Choice
Si deseo colocar un texto tipo Arial Black, ¿Cuál seria el atributo?
Color
Size
Face
6
Multiple Choice
La etiqueta Font indica el tamaño, color, o fuente del texto que contiene.
Verdadero
Falso
7
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>
8
Multiple Select
Si deseo agregar color y tamaño a un texto, ¿Cuáles serian los atributo?
Color
Size
Face
9
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
10
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>
11
Multiple Choice
Las listas ordenadas en HTML se representan
mediante el elemento UL.
VERDADERO
FALSO
12
Multiple Choice
Cada uno de los elementos de la lista ordenada se
representará mediante el elemento LI
VERDADERO
FALSO
13
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
14
Multiple Choice
Las listas desordenadas en HTML nos sirven para mostrar los
elementos de forma ordenada
VERDADERO
FALSO
15
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>
16
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.
17
Multiple Choice
Puede ser utilizado para insertar vínculos dentro del contenido del documento
VERDADERO
FALSO
18
Ejemplo:
1
2
19
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.
20
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.
21
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.
22
Ejemplo:
<img src="https://lenguajehtml.com/assets/logo.png"
alt="Logo de HTML5" width="400" height="453" />
23
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.
24
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>
Etiquetas
Formato de texto, manejo de
imagen en html, listas, vínculos y
video en html
Show answer
Auto Play
Slide 1 / 24
SLIDE
Similar Resources on Wayground
17 questions
مقارنة كسور
Presentation
•
4th - 5th Grade
20 questions
Proceso tecnológico
Presentation
•
5th Grade
19 questions
Para Que
Presentation
•
KG
20 questions
TAREA N°2 CLASIFICACIÓN DE LOS ALIMENTOS Y PIRÁMIDE ALIMENTICIA
Presentation
•
4th Grade
18 questions
TINKER EL DISEÑADOR
Presentation
•
4th Grade
17 questions
Medidas de Longitud
Presentation
•
4th Grade
16 questions
Place Value Relationships and Comparing Numbers
Presentation
•
4th Grade
19 questions
Countries
Presentation
•
4th Grade
Popular Resources on Wayground
24 questions
PBIS-HGMS Day 10
Quiz
•
6th - 8th Grade
10 questions
HCS SCI 03 Summer School Review 3
Quiz
•
3rd Grade
11 questions
Home Scope
Quiz
•
7th - 8th Grade
15 questions
HCS SCI 05 Summer School Assessment 3 Review
Quiz
•
5th Grade
35 questions
Lufkin Road Middle School Student Handbook & Policies Assessment
Quiz
•
7th Grade
18 questions
Geo 11.3 Area of Circles and Sectors
Quiz
•
9th - 11th Grade