Introducción a HTML. Módulo 3



	Localización \| Personal \| Docencia \| Investigación \| Novedades \| Intranet

Home / Docencia / Introducción a HTML

Fases de Diseño de un sitio Web: III. Fase Producción

Índice

Introducción
Documento Básico
Proyecto: Estructura de las páginas HTML
Títulos y Párrafos
Proyecto: Títulos y párrafos

1. Introducción

HTML es un lenguaje de marcado mediante el cual indicamos al navegador el aspecto con el que debe mostrar la información en pantalla. Decimos que es un lenguaje de marcado porque estas instrucciones sobre la forma de presentar información se las damos al navegador en forma de "marcas" o etiquetas es decir con símbolos como estos <marca> y </marca>.

La información encerrada entre esos dos símbolos es la información a representar, el formato con el que aparece en pantalla dependerá del nombre que le demos a la marca. HTML tiene un conjunto de marcas predefinidas que indican al navegador si un texto debe ser representado como un título, en negrita, en itálica, alineado a la izquierda, a la derecha, etc. Parte del objetivo de este tutorial es que conozcas algunas de estas marcas.

Todo documento HTML comienza declarándose a sí mismo. Para ello hay que escribir la etiqueta <html> al principio del documento y la etiqueta </html> al final del documento. Esta es la forma mediante la cual le indicamos al navegador que toda la información que haya entre estas dos marcas esta escrita en el lenguaje HTML.

Ejercicio

Tarea

Crea un documento básico en HTML y visualizalo en un navegador.

Procedimiento

Arranca un editor de texto plano (Notepad, Wordpad). Para ello pulsa el botón Inicio que encontrarás en la esquina inferior izquierda de tu pantalla y selecciona Programas | Accesorios | WordPad
Teclea el siguiente texto en el editor

	<html>
		Esta es mi primera página de HTML
	</html>

Guarda el documento que acabas de escribir seleccionando en el menu Archivo | Guardar como . Aparecerá una nueva ventana llamada "Guardar como". Selecciona el directorio en el que quieras guardar tus documentos (por ejemplo "Mis documentos"), escribe un nombre para tu fichero con la extensión .html (por ejemplo Prueba.html). Y en la opción "Guardar como tipo de archivo " selecciona Documento de Texto tal y como indica la siguiente figura.
Pulsa el botón guardar y recuerda el directorio donde almacenaste tu fichero (por ejemplo c:\Mis documentos\CursoHTML\Prueba.html)
A continuación abre el navegador (Netscape Navigator o Internet Explorer) y abre el fichero que guardaste seleccionando en el menú Archivo | Abrir (si utilizas Internet Explorer) o Archivo | Abrir página (si utilizas Netscape Navigator) para ver el resultado. Verás algo parecido a esto:
Ahora que ya sabes cómo crear una página HTML puedes repetir los pasos 1 a 5 para cada ejercicio o bien utilizar un editor interactivo para ver más rápidamente los resultados. Para probar el editor pincha sobre este enlace
Para utilizar el editor interactivo escribe el código HTML en el lado izquierdo de la ventana y pulsa sobre el botón submit, al hacerlo podrás ver en el lado derecho de la ventana el aspecto que tendría la página en el navegador.

2. Documento Básico

Todo documento o página web comienza con las etiquetas <html> y </html> Dentro del texto delimitado por estas dos etiquetas se distinguen dos zonas claramente diferenciadas que podemos denominar cabecera (header) y cuerpo (body).

La cabecera es la parte del documento comprendida entre las etiquetas <head> y </head>. La cabecera contiene el título del documento que se ve en la parte superior del navegador y otra información que no se muestra en el navegador pero puede ser de interés para el servidor que guarda las páginas o para los buscadores que tratan de encontrarlas en el web.
El cuerpo es la parte del documento comprendida entre las etiquetas <body> y </body> y contiene la información que queremos que el usuario vea en su navegador.

3. Proyecto: Estructura de las páginas HTML

Cuando Telémaco definió la estructura de su sitio web decidió crear 4 ficheros llamados (index.html, DireccionesDeInteres.html, Aficiones.html y Fotos.html). En esta fase convertirá todos estos ficheros de texto vacíos en páginas web vacías añadiendo las etiquetas de cabecerá, cuerpo y título que forman el esqueleto básico de un documento HTML.

Aplicación práctica

Tarea

Crea la estructura (cabecera, cuerpo y título) de tus páginas web.

Procedimiento

Abre con el editor de texto una a una todas las páginas HTML que hayas creado previamente y añádeles las etiquetas de cabecera (<head> ... </head>), cuerpo (<body> ... </body>) y título (<title> ...</title>) tal y como se muestra a continuación:
```
<html>
  <head>	
    <title>Pon aqui el título de cada página</title>
  </head>
  <body>
    No pongas nada aquí, luego añadiremos contenido
  </body>
</html>
```
Recuerda que el título va dentro de la cabecera del documento.
Comprueba que funcionan correctamente abriéndolas una por una en el Navegador.
Si tienes alguna duda coméntala con tus compañeros en el foro HTML.

4. Títulos y Párrafos

Si has utilizado alguna vez un editor de texto como el Word estarás familiarizado con los estilos de un documento. El estilo de un documento hace referencia al formato de los distintos elementos que lo componen: títulos, subtítulos, párrafos, listas, etc. En HTML existen 6 niveles de títulos distintos. La etiqueta <h1> designa el título más importante, <h2> sería el siguiente en importancia y así hasta <h6> que serviría para etiquetar las cabeceras o títulos de menor importancia.

Los distintos párrafos de un documento se identifican poniendo una etiqueta <p> al principio del párrafo y una etiqueta </p> al final.

Ejercicio

Tarea

Practica el uso de las etiquetas <hi>...</hi> (donde i toma valores entre 1 y 6) y <p>...</p>

Procedimiento

Abre el editor de HTML interactivo pinchando aquí para que puedas hacer pruebas más rápidamente.

Teclea el siguiente texto en el lado izquierdo del editor y pulsa submit para ver el resultado en el lado derecho.

<html>
  <body>	
	<H1>Así se ve un título de primer nivel</H1>
	<H2>Así se ve un título de segundo nivel</H2>
	<H3>Así se ve un título de tercer nivel</H3>
	<H4>Así se ve un título de cuarto nivel</H4>
	<H5>Así se ve un título de quinto nivel</H5>
 	<H6>Así se ve un título de sexto nivel</H6>
	<p>Esto es un párrafo</p>
	<p>Esto es otro párrafo</p>
  </body>
</html>

Si quieres conservar el resultado de los ejercicios que realices con el editor interactivo sigue estos pasos:
- Abre un documento en blanco con el wordpad
- Cuando estés satisfecho con el resultado que puedes ver en la parte derecha del editor interactivo selecciona el código que escribiste en el lado izquierdo y copialo en el wordpad.
- Guarda este fichero seleccionando en el menú Archivo | Guardar como
- Abre el fichero que acabas de guardar con el navegador y comprueba que el resultado es el mismo que en el editor.

5. Proyecto: Títulos y párrafos

Telémaco ha decidido comenzar su trabajo de producción por la página principal o página de entrada, que es la primera página que verá el visitante al entrar en su sitio web. Cuando definió los objetivos de su web decidió que en esa página introduciría algunas notas biográficas y su foto para darse a conocer. Cuando definió la estructura de directorios decidió que la primera página se llamaría index.html.

Vamos a comenzar con la información textual y dejaremos la inclusión de imágenes para una etapa posterior. En la fase anterior Telémaco añadió a la página index.html las etiquetas de cabecera y cuerpo. Ahora tiene que editar de nuevo la página con el wordpad para añadir el título y las notas biográficas tal y como se muestra en la siguiente figura:

Aplicación práctica

Tarea

Añade contenido textual a la página principal que servirá de entrada a tu sitio web.

Procedimiento

Observa la página de entrada al web de telémaco.
Abre con el wordpad el fichero.html que corresponda a tu página principal.
Situate en el cuerpo del documento (en el espacio comprendido entre las etiquetas <body>...</body>).
Añade un título a tu página utilizando las etiquetas <hi>...</hi> donde i puede ser un número del 1 al 6 dependiendo de la importancia del título (1 indica el mayor nivel de importancia y por tanto se verá más grande).
Redacta los párrafos que quieras incluir en la página principal y añadelos al fichero rodeándolos con las etiquetas <p>...</p>
Guarda el fichero.html y ábrelo con el navegador (Internet Explorer o Netscape Navigator) para comprobar el resultado.
Si el resultado no es como esperabas revisa de nuevo el contenido de tu página y comprueba si todas las etiquetas se abren y se cierran correctamente.
Si tienes alguna duda coméntala con tus compañeros en el foro titulado "HTML"

inicio | mapa del web | contacta

Last Revision: