Calificación:
  • 1 voto(s) - 5 Media
  • 1
  • 2
  • 3
  • 4
  • 5
Manual de lenguaje HTML (Parte IV)
#1
[img]http://i.i.imgur.com/nAp1q.gif[/img]


Si te as perdido la primera parte de este tutorial, ver la Parte I AQUÍ
Si te as perdido la segunda parte de este tutorial, ver la Parte II AQUÍ
Si te as perdido la tercera parte de este tutorial, ver la Parte III AQUÍ




5.- La cabecera.

¿Cómo van las cosas? Espero que, hasta aquí al menos, todo esté yendo bien.

Por simplificar un poco no habíamos comentado nada de una parte importante que tienen las páginas web: Es la cabecera. Como has podido comprobar, no es imprescindible pero sí muy importante. La cabecera se coloca entre las etiquetas <head> y </head> . Va justo después de la primera etiqueta <html> y antes del <body>. Constituye la parte no visible del documento:

<html>
<head>
</head>
<body>
Sólo se ve este texto
</body>
</html>



De momento, lo que más nos interesa poner dentro de la cabecera del documento es el título de la página.

Observa que en la barra de título, la barra superior aparece:

[img]http://roble.pntic.mec.es/apuente/html/ima/a5.gif[/img]


Para arreglar esto, para poner el título al documento, hay que introducir dos nuevas etiquetas dentro de la cabecera. Son las etiquetas <title> de apertura y </title> de cierre. Y, entre ellas ponemos la frase que defina nuestro documento:

<html>
<head>
<title>
Ejercicio 1
</title>
</head>
<body>
Sólo se ve este texto
</body>
</html>


Comprueba que, en la barra superior del navegador, barra de título, aparece el título que acabamos de poner al documento:

[img]http://roble.pntic.mec.es/apuente/html/ima/a3.gif[/img]

En la cabecera pueden ir muchas más cosas pero, de momento, es lo único que necesitamos.


6.- Listas.

A menudo hay que hacer listas de objetos, de conceptos, de definiciones...

Las listas pueden ser no numeradas (el orden no importa) y numeradas:


6.1.- Listas no numeradas.

Comienza el listado con la etiqueta <ul> (unordered list) y su final con la etiqueta de cierre </ul>. Cada objeto que forma la lista va precedido de la etiqueta <li> (list item) sin etiqueta de cierre.

<html>
<head>
<title>
Listas no numeradas
</title>
</head>
<body>
Mis aficiones:
<ul>
<li> El cine.
<li> La montaña.
<li> La música.
</ul>
</body>
</html>

resultado



6.2.- Listas numeradas.

Comienza el listado con la etiqueta <ol> (ordered list) y su final con la etiqueta </ol>. Cada objeto que forma la lista va precedido, igual que en las anteriores de la etiqueta <li> sin cierre.

<html>
<head>
<title>
Listas numeradas
</title>
</head>
<body>
Mis preferencias:
<ol>
<li> Viajar.
<li> Salir con mis amigos.
<li> Dormir.
</ol>
</body>
</html>

resultado



6.3.- Listas anidadas.

Se pueden combinar unas listas dentro de otras: No numeradas y/o numeradas. Hay que tener, simplemente, cuidado en la colocación de las etiquetas de apertura y cierre.

<html>
<head>
<title>
Listas anidadas
</title>
</head>
<body>
<h3>Animales:<h3>
<ul>
<li> VERTEBRADOS.
<ul>
<li>Anfibios
<li>Peces
<li>Reptiles
<li>Aves
<li>Mamíferos
</ul>
<li> INVERTEBRADOS.
<ul>
<li>Insectos
<li>Arácnidos
<li>Crustáceos
<li>Miriápodos
</ul>
</ul>
</body>
</html>

resultado



Hemos incorporado la etiqueta de encabezado de tercer orden <h3> para resaltar el concepto que se va a clasificar. (Recuerda que los encabezados van del <h1> el mayor al <h6> el menor).

6.4.- Listas de definiciones.

Son apropiadas, como su nombre indica, para establecer listados de términos con sus definiciones. Las etiquetas de apertura y cierre son <dl> y </dl> (definition list). Los conceptos a definir van con la etiqueta <dt> (definition term) y las definiciones con la etiqueta <dd> (definition definition).

<html>
<head>
<title> Listas de definiciones
</title>
</head>
<body>
<dl>
<dt>Concepto 1
<dd>Definición del Concepto 1
<dt>Concepto 2
<dd>Definición del concepto 2
</dl>
</body>
</html>

resultado




7.- Sangrados.

Se realizan con la etiqueta <blockquote> de apertura y su correspondiente de cierre. Aumentan, también, el interlineado, por eso se emplean para hacer una cita textual.

<html>
<head>
<title>
Sangrados
</title>
</head>
<body>
Este texto está justificado a la izquierda.
<blockquote>
Éste está sangrado respecto del anterior
</blockquote>
Éste vuelve a estar justificado a la izquierda.
</body>
</html>

resultado



Se puede utilizar más de una etiqueta si deseamos un sangrado mayor:

<html>
<head>
<title>
Sangrados múltiples
</title>
</head>
<body>
Este texto está justificado a la izquierda.
<blockquote>
<blockquote>
<blockquote>
Éste está más sangrado
</blockquote>
</blockquote>
</blockquote>
Éste vuelve a estar justificado a la izquierda.
</body>
</html>

resultado



Si te as perdido la primera parte de este tutorial, ver la Parte I AQUÍ
Si te as perdido la segunda parte de este tutorial, ver la Parte II AQUÍ
Si te as perdido la tercera parte de este tutorial, ver la Parte III AQUÍ

Creado por: DiosOne


FUENTE: Tutorial INDEXhn
España 
Twitter Web 
[Imagen: osxwaKU.gif]
WWW


Posibles temas similares...
Tema Autor Respuestas Vistas Último mensaje
  lenguaje de programacion. easy english 3 84 05-03-2018, 09:47 AM
Último mensaje: efbsfcd
Sonrisa Login->html+js+ajax+php wpadilla 2 225 05-11-2017, 12:39 PM
Último mensaje: piensaengrande
  PRIMER PAGINA WEB HTML DEL MUNDO Smithcanal 27 848 21-10-2017, 01:47 AM
Último mensaje: ReyNexo23
  [Duda] Qué lenguaje me recomiendan para empezar Backend? Kamasado 5 294 03-07-2017, 05:42 AM
Último mensaje: ArtuGar
  Plantillas HTML Responsive Free Profesionales gassip 16 668 13-06-2017, 03:45 AM
Último mensaje: gassip
  lenguaje de programacion. easy english 5 302 11-06-2017, 03:05 AM
Último mensaje: mispracticas2009
Música [Aporte] Reproductor de audio html djsmokingcr 11 625 02-05-2017, 03:04 AM
Último mensaje: gassip
  [Tutorial] Métodos para redireccionar URLs (HTML, PHP y Javascript wiston3 1 293 01-12-2016, 11:12 PM
Último mensaje: zeuz
  Expandir etiquetas HTML en documento .php con EMMET gassip 2 391 18-11-2016, 07:28 PM
Último mensaje: DaveNPlay
  [Aporte] PcTag: Información HTML KesiaMuller 0 305 28-10-2016, 05:42 AM
Último mensaje: KesiaMuller



Usuarios navegando en este tema: 1 invitado(s)