Tarea

<ul>

La etiqueta <ul> se utiliza para crear una lista desordenada.

Las listas desordenadas se representan con los siguientes símbolos:

disc(círculo relleno)

circle(círculo vacío)

square(cuadrado vacío)

Los diferentes objetos de las listas se representan con la etiqueta <li>

<ul>

   <li>HTML</li>

   <li>CSS</li>

   <li>JavaScript</li>

</ul>

<li>

Definición

La etiqueta <li> nos define los objetos de la lista.

Esta etiqueta se utiliza tanto para las listas ordenadas <ol>, como para las listas desordenadas <ul>.

Lista ordenada

<ol>

   <li>HTML</li>

   <li>CSS</li>

   <li>JavaScript</li>

</ol>

Lista desordenada <ul>

   <li>HTML</li>

   <li>CSS</li>

   <li>JavaScript</li>

</ul>

<samp>

Definición

La etiqueta <samp> muestra un mensaje de un programa o script.

<samp>Error nro. 404</samp>

<div>

Definición

La etiqueta <div> se utiliza para definir una sección dentro del documento.

Esta etiqueta se usa comunmente para agrupar un bloque de elementos, para luego añadirle un estilo determinado.

<div style=“color:red”>

  <h3>Grupo 1</h3>

  <p>Este bloque tiene definido el texto de color rojo.</p>

</div>

<div style=“color:green”>

  <h3>Grupo 2</h3>

  <p>Este bloque tiene definido el texto de color verde.</p>

</div>

<textarea>

.DefiniciónLa etiqueta <textarea> crea un control de entrada de texto multilínea

<textarea rows=“5” cols=“40”>En este ejemplo podemos observar que se puede establecer un texto inicial en el área de ingreso de texto.</textarea>

<select>

La etiqueta <select> crea un menú desplegable.

Cada opción ofrecida por dicho menú se representa por un elemento option.

<select>

  <option value=“html”>HTML</option>

  <option value=“css”>CSS</option>

  <option value=“js”>JavaScript</option>

  <option value=“php”>PHP</option>

</select>

<input>

La etiqueta <input> se utiliza para el ingreso de datos por parte del usuario.

El campo del input dependerá del tipo de control que le asignemos al atributo type.

text - entrada de texto de una línea

password - entrada de texto de una línea con carateres ocultos

checkbox - casilla de verificació

radio - radiobotón

submit - botón de envio

image - botón de envio gráfico o mapa de imágenes

reset - botón de reinicialización

button - botón pulsador

hidden - control oculto

file - selección de archivo

<form action=“ejemplo.php” method=“get”>

  Nombre: <input type=“text” name=“nombre” /><br />

  Contraseña: <input type=“password” name=“contra” /><br />

  <input type=“reset” value=“Borrar” />

</form>

<Map>

Definición

La etiqueta <map> especifica un mapa de imagenes.

Un mapa de imagenes es una imagen que permite clickear diferentes areas de la misma.

Esta etiqueta requiere del atributo name, con el mismo nombre usado en el atributousemap de la etiqueta <img>. De esta forma se establece la relación imagen-mapa.

<img src=“/formas.gif” border=“0” width=“225” height=“251” usemap=“#map1”>

<map name=“map1”>

<area href=“/cuadrado.html” shape=rect coords=“0,75,100,175”>

<area href=“/circulo.html” shape=circle coords=“175,50,50”>

<area href=“/triangulo.html” shape=poly coords=“125,250, 225,250, 175,165”>

</map>

La etiqueta <area> se utiliza para definir regiones o areas dentro de un mapa de imágenes y los enlaces asociados a esas regiones.

Un mapa de imagenes es una imagen que permite clickear diferentes areas de la misma.

La etiqueta <area> siempre debe estar ubicada dentro de la etiqueta <map>

<img src=“/formas.gif” border=“0” width=“225” height=“251” usemap=“#map1”>

<map name=“map1”>

<area href=“/cuadrado.html” shape=rect coords=“0,75,100,175”>

<area href=“/circulo.html” shape=circle coords=“175,50,50”>

<area href=“/triangulo.html” shape=poly coords=“125,250, 225,250, 175,165”>

</map>

Tipo de letra (fuente)

Los tipos de letras pueden ser tan diferentes que no existe un método universal de clasificación y denominación de los tipos de letra. En las hojas de estilo esta situación se resuelve mediante propiedades que permiten describir el aspecto general del tipo de letra y es el navegador el que escoge, de entre los tipos de letra instalados en el ordenador, el que mejor se adapta a esa descripción.

En esta página se comentan las propiedades que permiten describir el tipo de letra (la fuente) en una página web:

La propiedad compuesta font

Tipo de letra: font-family

Tamaño del tipo de letra: font-size y font-size-adjust

Subfamilías tipográficas

Interlineado: line-height

Tamaño: font-size

Ajuste de tamaño: font-size-adjust

Anchura: font-stretch

Inclinación (itálica): font-style

Versalitas: font-variant

Grosor del trazo (negrita): font-weight

La propiedad compuesta font

La propiedad compuesta font permite definir simultáneamente las propiedades relacionadas con el tipo de letra: font-style, font-variant, font-weight, font-size , line-height y font-family (explicadas más adelante en esta misma página).

Al escribir la propiedad compuesta, el orden en que deben aparecer los valores es el orden en que aparecen las propiedades simples en el párrafo anterior. Las únicas propiedades que deben aparecer obligatoriamente son font-size y font-family. Si se escribe la propiedad line-height debe aparecer separada de font-size por una barra (/).

Estilo z-index

Mediante el estilo “z-index” de CSS podemos ordenar los elementos de nuestra página web a nuestro gusto. z-index crea una capa nueva que tiene un nivel o una altura diferente al resto de las capas. Observa el siguiente código:

<div style=“position:absolute; top:40px; left:40px; width:300px; height:300px; visibility:visible z-index:1”></div>

Lo primero que observamos es que la capa posee una posición. Y es que estas capas sólo funcionan si se le específica la posición. En este caso es absoluta, pero también podríamos haberla hecha relativa.

También vemos que la capa z-index tiene un valor, que en este caso es 1. Las capas son apiladas dependiendo del valor que tengan, siempre de mayor a menor. Por ejemplo, una capa con z-indez:2 se apilaría por encima de la capa que vimos anteriormente, que era z-indez:1.