HTML & CSS

Competencia #3
 Parte #1 Parte #2
TEMAS DE LA Structure content Semantic tags
COMPETENCIA List tags Figure
#3 Description tags Figurecaption
Table tags
 Parte #3 Parte #4
Image links Form attributes
Links Action
1. Target Method
TEMAS DE LA 2. Bookmark
Accessibility
3. Relative vs absolute
COMPETENCIA links Input types and
#3 4. Navigating simple
folder hierarchies
restrictions
Select
Textarea, button,
output
Option, datalist,
fieldset
OBJETIVO DE LA CLASE

• Construir y analizar el contenido de una

página web con estructura y
organizador de datos.
Structure content
CONTENIDO ESTRUCTURADO
El contenido estructurado está compuesto por encabezados y
párrafos, simplificando la experiencia en la lectura.

Cada párrafo esta delimitado por <p>:

<p>Soy un párrafo, ¡desde luego que lo soy!</p>

CONTENIDO ESTRUCTURADO
Cada sección tiene que estar delimitada por un elemento de
encabezado:

<h1>Soy un título</h1>
<h2>Soy un subtítulo 2</h2>
<h3>Soy un subtítulo 3</h3>
<h4>Soy un subtítulo 4</h4>
<h5>Soy un subtítulo 5</h5>
<h6>Soy un subtítulo 6</h6>
CONTENIDO ESTRUCTURADO
Por otra parte, tenemos el elemento <span>, esta se utiliza para
delimitar contenido cuando se le quiere aplicar CSS (o tratarlo con
JavaScript) sin proporcionarle ningún significado extra

<p>Este es un pequeño ejemplo de texto: <span style="color:

#FF0000;">Lorem ipsum dolor sit amet.</span> solamente este pequeño
texto tendrá un cambio</p>
CONTENIDO ESTRUCTURADO
El elemento HTML line break <br> produce un salto de línea en el
texto.
Es útil para escribir un poema o una dirección, donde la división de
las líneas es significante.

Centro ¡Supérate! <br>

Fundación Alberto Motta <br>
La Chorrera <br>
Panamá Oeste
CONTENIDO ESTRUCTURADO
La <div>etiqueta define una división o una sección en un
documento HTML, se utiliza como contenedor de elementos HTML,
que luego se diseñan con CSS o se manipulan con JavaScript.
La <div>etiqueta se diseña fácilmente usando el atributo class o id.

<div style="background-color: aquamarine;">

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
<p>Lorem ipsum dolor sit amet.</p>
</div>
<div style="background-color:aqua;">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
<p>Lorem ipsum dolor sit amet.</p>
</div>
CONTENIDO ESTRUCTURADO
CONTENIDO ESTRUCTURADO
El elemento HTML <hr> representa una línea horizontal. Aún puede
ser representada como una línea horizontal en los navegadores
visuales.

<div style="background-color: aquamarine;">

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
<p>Lorem ipsum dolor sit amet.</p>
</div>
<hr>
<div style="background-color:aqua;">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
<p>Lorem ipsum dolor sit amet.</p>
</div>
CONTENIDO ESTRUCTURADO
List
LISTAS
Las listas están en todos lados en la web, por lo que existen tres
formas distintas de listas:

Listas no ordenadas:

Las listas no ordenadas se usan para marcar listas de artículos

cuyo orden no es importante. Esta comienza con <ul>
(unordered list), ejemplo:
LISTAS
<p>LISTA DE COMPRAS</p>
<ul>
<li>Leche</li>
<li>Huevos</li>
<li>Pan</li>
</ul>
LISTAS
Listas ordenadas:
Las listas ordenadas son aquellas en las que el orden de los
elementos sí importa. Este comienza con <ol> (ordered list)
Tomemos como ejemplo una lista de instrucciones:

<ol>
<li>Enciende la estufa</li>
<li>Coloque el sartén</li>
<li>Parte 2 huevos en un bol</li>
<li>Agregue sal y pimienta al gusto</li>
<li>Bate</li>
<li>Vierte la mezcla en el sartén</li>
</ol>
LISTAS
 LISTAS
Listas anidadas:
Es perfectamente correcto anidar una lista dentro de otra,
ejemplo:
<ol>
<li>Pela el ajo y picarlo en trozos gruesos.</li>
<li>Retira las semillas y el tallo del pimiento, y cortarlo en trozos gruesos.</li>
<li>Mete todos los alimentos en un procesador de alimentos.</li>
<li>Procesa todos los ingredientes hasta conseguir una pasta.
<ul>
<li>Si deseas un hummus "grueso", procésalo corto tiempo.</li>
<li>Pica durante más tiempo si se desea obtener un hummus "suave".</li>
</ul>
</li>
</ol>
LISTAS
LISTAS
Teniendo en cuenta lo anterior explicado, procederemos a
realizar la siguiente actividad:
1. Realice una lista anidada, en donde mencione los pasos para
preparar una ensalada (puede ser la ensalada que usted
desee).
Description List
Listas con descripción
Una lista de descripción es una lista de elementos con una
descripción o definición de cada elemento.

La lista de descripción se crea utilizando <dl>.

El elemento <dl> se utiliza junto con el elemento <dt> que

especifica un término y el elemento <dd> que especifica la
definición del término.
Listas con descripción
<dl>
<dt>Pan</dt>
<dd>Un alimento horneado hecho de harina.</dd>
<dt>Café</dt>
<dd>Una bebida hecha de granos de café tostados.</dd>
</dl>
Listas con descripción
¡Vamos a la práctica!:

1. Realizaremos una lista con descripción sobre las palabras

que se les ha dificultado en las pruebas que han realizado,
sobre las competencias #1 y #2.

2. La lista debe contener como mínimo 5 palabras con su

definición, está puede ser en inglés o español.