HTML Básico - Lección 2

Ortografía

Esta página o sección necesita una revisión de ortografía y gramática.
Puedes ayudar editándolo

Párrafos

Ahora que tienes la estructura básica de un documento HTML, puedes enredarte un poco con el contenido.

Regresa a tu editor de textos y agregar esta línea a tu página:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">

<head>
	<title> Mi primera pagina web </title>
</head>

<body>
	Esta es mi primera pagina web
	Que excitante 
</body>

</html>

Mira el documento en tu navegador.

Puede ser que mientras lo mecanografiaste, hayas esperado que tu documento aparezca en dos líneas, pero por el contrario debes ver algo como esto :

Ésta es mi primera pagina web Que excitante .

Esto es porque los navegadores generalmente no toma en cuenta en que línea está tu código. Tampoco toman en cuenta los espacios.

Si deseas que el texto aparezca en diferentes líneas, necesitas indicarlo explícitamente.

Cambia tus dos líneas de contenido de modo que luzcan como esto:

<p> Esta es mi primera pagina web </p>
<p> Que excitante </p>

La etiqueta p es para párrafos.

Mira el resultado. Las dos líneas ahora aparecen en dos líneas.

Piensa en el contenido HTML como si fuera un libro - con párrafos donde es apropiado.

Énfasis

Puedes acentuar el texto de un párrafo usando em (énfasis) y strong (énfasis fuerte). Éstas son dos formas de hacer lo mismo, aunque tradicionalmente, los navegadores muestran em en itálica y strong en negrilla.

<p>Si, como <em>lo</em> dije. Es <strong>muy</strong> exitante.</p>

Rompe lineas

La etiqueta rompe lineas también puede ser usada para separar estas lineas:

Esta es mi primera pagina web <br />
Que excitante

Sin embargo, este método es usado en exceso y no deberia ser usado si se piensa separar dos bloques de texto (porque si es esto lo que deseas probablemente necesites usar la etiqueta p ).

Observa que como la etiqueta rompe línea no envuelve al contenido, no tiene etiqueta de cierre y se cierra con "/" después del "br".

Referencia

p: Encierran un párrafo.
em: Énfasis en un texto. Normalmente se muestra el texto en cursiva.
strong: Énfasis fuerte en un texto. Normalmente se muestra el texto en negrita.
br: Rompe-líneas. El texto continúa en la siguiente línea.

Títulos

La Etiqueta p es justo el comienzo del formateo del texto.

Si tienes documentos con títulos genuinos, entonces hay etiquetas HTML diseñadas específicamente para ello.

Estas son h1 , h2 , h3 , h4 , h5 y h6 , h1 es el emperador todopoderoso de los títulos y h6 es el plebeyo más bajo.

Cambia tu código por el siguiente:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">

<head>
	<title> Mi primera pagina web </title>
</head>

<body>
	<h1> Mi primera pagina web </h1>

	<h2> ¿Que es esto? </h2>
	<p> Una simple pagina haciendo uso de HTML </p>

	<h2> ¿Para que? </h2>
	<p> Para aprender HTML </p>
</body>

</html>

Observa que la etiqueta h1 es utilizada una sola vez - se supone que es para el título principal de la página y no debe ser usado múltiples veces.

h2 a h6 sin embargo, se pueden utilizar tantas veces como desees, pero deben ser usadas siempre en orden, tal como fue pensado. Por ejemplo, un h4 debe ser un subtítulo de un h3 , y este debe ser un subtítulo de un h2 .

Listas

Hay tres tipos de listas; listas desordenadas, listas ordenadas y listas de definición. Veremos aqui las dos primeras, y las listas de definición en el curso de HTML Intermedio.

Las listas desordenadas y las listas ordenadas trabajan de la misma manera, excepto que la primera se utiliza para listas no secuenciales con los artículos de la lista generalmente precedidos por puntos y la otra es para listas secuenciales, que son representadas normalmente por números incrementales.

La etiqueta ul se utiliza para definir listas desordenadas y la etiqueta ol se utiliza para definir listas ordenadas. Dentro de las listas, la etiqueta li se utiliza para definir cada artículo de la lista.

Cambiar tu código por el siguiente:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">

<head>
	<title> Mi primera pagina web </title>
</head>

<body>
	<h1> Mi primera pagina web </h1>

	<h2> ¿Que es esto? </h2>
	<p> Una simple pagina haciendo uso de HTML </p>

	<h2> ¿Para que? </h2>
	<ul>
		<li> Para aprender HTML </li>
		<li> Para mostrarlo </li>
		<li> Porque siento amor hacia mi computadora y deseo darle ese amor al HTML. </li>
	</ul>

</body>

</html>

Si ves esto en tu navegador, verás una lista con puntos. Simplemente cambia las etiquetas ul por ol y verás que la lista se numera.

Las listas también se pueden incluir entre listas para formar una jerarquía estructurada de artículos.

Reemplaza el codigo de la lista anterior por el siguiente:

<ul>
	<li> Para aprender HTML </li>
	<li>
		Para mostrarle
		<ol>
			<li> A mi jefe </li>
			<li> A mis amigos </li>
			<li> A mi gato </li>
			<li> Al pequeño pato que habla en mi cerebro </li>
		</ol>
	</li>
	<li> Porque siento amor hacia mi computadora y deseo darle ese amor al HTML. </li>
</ul>

Ahí lo tenemos. Una lista dentro de otra lista. Y podrías poner otra lista dentro de esta. Y otras dentro de esta. Y así sucesivamente.

Referencia

ul: Encierran una lista con viñetas.
ol: Encierran una lista numerada.
li: Encierran cada elemento de una lista.

Proyecto: Diseño Web

Anterior: HTML Básico - Lección 1 — HTML Básico - Lección 2 — Siguiente: HTML Básico - Lección 3