.comment-link {margin-left:.6em;}

BETA (Bytes sobre Educación y Tecnología en Argentina)

lunes, junio 05, 2006

Tutorial de HTML - 2

En el primer post dedicado al tema aprendimos a comenzar un archivo de HTML escribiendo el código en un editor de textos. Ya conocemos los códigos necesarios para indicarle al navegador que el contenido del archivo está en lenguaje HTML, también para indicar un título de la ventana y el contenido de la página (el Cuerpo -en inglés Body-) que contiene párrafos cuyo comienzo y final se indican con los tags P y /P.
Hoy podemos agregarle dos cosas a nuestra página web: títulos y subtítulos, y una lista.
Comenzaremos con la misma fórmula, presentando la versión del lenguaje y luego indicando un título en la sección HEAD y algunos párrafos en la sección BODY:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Mi segundo experimento</title>
</head>
<body>
<h1>Este es el título principal</h1>
<h2>Este es el subtítulo</h2>
<h3>Este es el subtítulo</h3>
<h4>Este es el subtítulo</h4>
<p>Este texto se va a ver en el contenido de la ventana. <br>Es un párrafo.</p>
<ol>
<li>Primera cosa de la lista</li>
<li>Segunda cosa de la lista</li>
<li>Tercera cosa de la lista</li>
</ol>
<ul >
<li>Una cosa de la lista</li>
<li>Otra cosa de la lista</li>
<li>Otra más</li>
</ul>
</body>
</html>

Aquí agregamos una serie de títulos y subtítulos jerarquizados, que se logran con la etiqueta H1, H2, H3, etc. La letra H viene de Heading (encabezado).
También agregamos dos listas: una numerada y otra sin numerar. Ambas se diferencian porque se abren con OL (Ordered list) o UL (Unordered list). En ambos casos los ítems se identifican con la etiqueta LI (List Item).
Podemos observar, además de los nuevos tags, que existen algunas etiquetas que sólo se colocan una vez:
<br>

Y muchas otras que se deben abrir y cerrar, utilizando una barra para indicar que se trata del cierre:
<p>Este es mi párrafo</p>

Aquí incorporamos la apertura de una lista: <ol>
La inclusión de elementos de la lista: <li>
Y el cierre de ambos tags: Fin de la lista (</ol>) y fin del item (</li>)

Ejercicios para seguir practicando
:
1) Reemplazar la etiqueta ol por <ol type=A> Y luego intentarlo también con <ol type=I>¿Qué diferencias se observan en la lista?
2) Anteponer a la lista el siguiente código: <ol start="44"> ¿Qué ocurre con la lista numerada?
3) E n la lista no numerada intentar abrir con <ul type=square> o type=circle, type=disc


El presente pertenece a una serie de posts con la intención de brindar un tutorial para crear sitios web accesibles, comenzando desde el principio: el lenguaje HTML