Antes de empezar con nuestra primera página web, vamos a algunas de las principales etiquetas que vamos a utilizar en HTML.

ENCABEZADOS
Los encabezados son los títulos, y se definen con las etiquetas

a

.

es el encabezado más grande y

e más pequeño en orden de importancia.

Código:

Encabezado de primer nivel Encabezado de segundo nivel Encabezado de tercer nivel Encabezado de cuarto nivel Encabezado de quinto nivel Encabezado de sexto nivel

ver resultado en el navegador

Después de un encabezado se añade automáticamente un retorno de párrafo de forma que quede una línea en blanco hasta el siguiente elemento.

PÁRRAFOS
Los párrafos se definen utilizando la etiqueta

Código:

Esto es un párrafo Esto es otro párrafo

ver resultado en el navegador

Después de un párrafo se añade automáticamente un retorno de párrafo de forma que quede una línea en blanco hasta el siguiente elemento.

SALTOS DE LÍNEA
Cuando queremos empezar en una nueva línea pero sin que sea un nuevo párrafo, utilizamos la etiqueta
. Siempre que utilicemos la etiqueta
introduciremos un salto de línea.

Código:

En este párrrafo vamos a introducir saltos de línea Primer salto de línea Segundo salgo de línea Y aquí terminamos el párrafo

ver resultado en el navegador

Cómo
consta de una sóla etiqueta, introducimos el cierre dentro de la propia etiqueta de inicio, por eso utilizamos
en lugar de

LÍNEAS DE SEPARACIÓN
Con la etiqueta

---

introducimos una línea que separa bloques de texto. Todos los atributos de presentación de la etiqueta

---

han desaparecido en el estándar xhtml, por lo que la apariencia de hr se controla con CSS. Cómo podemos ver, al igual que
no tiene etiqueta de fin.

Código:

Este es un párrafo muy bonito con la exclusiva finalidad de ver cómo introducimos una línea que separe bloques de texto. Este es un párrafo muy bonito con la exclusiva finalidad de ver cómo introducimos una línea que separe bloques de texto. Este es un párrafo muy bonito con la exclusiva finalidad de ver cómo introducimos una línea que separe bloques de texto. Este es un párrafo muy bonito con la exclusiva finalidad de ver cómo introducimos una línea que separe bloques de texto. Este es un párrafo muy bonito con la exclusiva finalidad de ver cómo introducimos una línea que separe bloques de texto. Este es un párrafo muy bonito con la exclusiva finalidad de ver cómo introducimos una línea que separe bloques de texto.

ver resultado en el navegador

COMENTARIOS
Los comentarios no se ven en el navegador, son notas para nosotros mismos. A medida que las páginas se complican los comentarios nos vienen muy bien para saber qué es cada cosa y como podemos hacer modificaciones.

Para insertar comentarios utilizamos las etiquetas

No hay ejemplo, porque los comentarios no se ven

ANTES DE EMPEZAR
Cuando utilizamos html, es imposible saber como se va a ver el texto en el navegador. Algunas personas tienen pantallas con mucha resolución y otros con menos. Cada vez que el usuario cambie el tamaño de la ventana el texto se volverá a formatear para ajustarse al tamaño de la pantalla. El HTML ignorará los retornos de carro y los espacios que introduzcas, si metes en un texto un espacio grande como este: para el html será un espacio normal, un solo espacio. La mejor forma de ver esto es utilizando una poesía:

Código:

Con diez cañones por banda, viento en popa, a toda vela, no corta el mar, sino vuela un velero bergantín. Bajel pirata que llaman, por su bravura, el Temido, en todo mar conocido del uno al otro confín.

Se vería así en el navegador:
Con diez cañones por banda, viento en popa, a toda vela, no corta el mar, sino vuela un velero bergantín. Bajel pirata que llaman, por su bravura, el Temido, en todo mar conocido del uno al otro confín.

En cambio, este otro código se verá perfectamente:

Código:

Con diez cañones por banda, viento en popa, a toda vela, no corta el mar, sino vuela un velero bergantín. Bajel pirata que llaman, por su bravura, el Temido, en todo mar conocido del uno al otro confín.

ver resultado en el navegador

Es decir no tiene nada que ver cómo escribamos nosotros el texto en el block de notas, la disposición del texto en el navegador depende de las etiquetas que introduzcamos y no del número de espacios o retornos de carro que utilicemos en el editor de textos.

Nota: Esta forma de escribir el código todo seguido no es muy ortodoxa, dificulta mucho la lectura del código, pero lo hemos utilizado, para que nuestro ejemplo quede bien claro, lo correcto sería:

Código:

Con diez cañones por banda, viento en popa, a toda vela, no corta el mar, sino vuela un velero bergantín. Bajel pirata que llaman, por su bravura, el Temido, en todo mar conocido del uno al otro confín.

ver resultado en el navegador

NUESTRA PRIMERA WEB
Con lo que hemos visto en el capítulo anterior y este ya estamos listos para hacer nuestro primero documento html. En los próximos capítulos veremos en detalle cómo se estructura el formato lógico del texto.

Nota: Hasta que no veamos los estilos CSS todas nuestras páginas van a ser bastante feas, puesto que sólo le aplicaremos un formato lógico sin preocuparnos de la apariencia.

Al aventuraros con vuestra primera página web, intentar no copiar y pegar directamente, bueno, la declaración del documento podéis copiarla . Escribidlo a mano, así os iréis acostumbrando a escribir HTML.

Para empezar con un cierto orden, vamos a crearnos una carpeta para los ejemplos del curso. Ir a MiPC en C cread una carpeta nueva que se llame HTML, dentro de esta carpeta cread otra que se llame tema2.

Abrir el block de notas (inicio, programas, accesorios, block de notas) y escribid el código de nuestra primera página web. Guardar el con el nombre miprimeraweb. Html Es importante la extensión, al guardar, aseguraos de que en la opción "guardar como tipo" está seleccionado "todos los archivos(*)"

Código:

PUBLIC "-//W3C//DTD XHTML 1. 0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio nal. Dtd"> Título de la página Primer subtítulo de la página Esto es un párrafo de texto que vamos a incluir en nuestra primera página para que veamos como se diferencia de los títulos y los subtítulos. Utilizando el formato lógico, los navegadores saben que esto es un párrafo, y que h1 y h2 son encabezados por lo que los resaltarán. Esto es un poema mal formateado Con diez cañones por banda, viento en popa, a toda vela, no corta el mar, sino vuela un velero bergantín. Bajel pirata que llaman, por su bravura, el Temido, en todo mar conocido del uno al otro confín. Esto es un poema bien formateado seguidos para hacer una línea extra separando las estrofas, sin hacer un nuevo párrafo. --> Con diez cañones por banda, viento en popa, a toda vela, no corta el mar, sino vuela un velero bergantín. Bajel pirata que llaman, por su bravura, el Temido, en todo mar conocido del uno al otro confín.

ver resultado en el navegador

PREGUNTAS FRECUENTES
¿HTML O HTM?
Al guardar un archivo HTML puedes uilizar indistintamente htm o html. La extensión. Htm viene de cuando sólo se admitían extensiones de 3 caractereres. En general yo prefiero. Html

EDITORES DE HTML

Utilizando editores de tipo gráfico como dreamweaver, frontpage, y otros es muy fácil hacer páginas en un santiamén. Pero si de verdad quieres aprender HTML, y convertirte en un experto desarrollador de páginas web, utiliza el block de notas, todo lo más el editpad o ultraedit (Editores de texto) para hacer las páginas. Después me lo agradecerás.

NO PUEDO VER EL RESULTADO EN EL NAVEGADOR

Si has relalizado el ejercicio y no puedes ver el resultado en el navegador, o no te sale igual que debería, comprueba minuciosamente las etiquetas. Al principio, es bastante corriente olvidarse de cerrar una etiqueta, o nos faltan unas comillas. Si te pasa algo así te encontrarás con una estupenda página en blanco, o si te olvidas de cerrar un encabezamiento, verás una letra enorme, etc. Revisa tu trabajo.

¿SÓLO SE PUEDEN HACER PÁGINAS EN WINDOWS?

Puedes hacer las páginas utilizando el sistema operativo que más te guste, windows, macintosh, o linux. Nosotros utilizamos windows, por lo que algunas explicaciones están adaptadas a este sistema operativo (como por ejemplo la utilización del block de notas. Pero el HTML está pensado precisamente para que sea multiplataforma. Lo que sí es necesario es que trabajes en un entorno gráfico, puesto que si estás utilizando un entorno de sólo texto (como links) no verás muchos de los ejemplos que proponemos.