Tema 3

Estructura de un documento HTML
Es cierto que hoy no hacen falta demasiados conocimientos de HTML para crear una
pgina Web, ya que existen varios editores visuales como Dreamweaver o FrontPage
que lo permiten. Pero tambin es cierto, que para conseguir un buen funcionamiento con
un diseo ms que aceptable, es necesario tener unos conocimentos mnimos de HTML.

Para trabajar con HTML necesitaremos un editor de lnea como el Bloc de notas de
Windows y un visualizador de pginas como Internet Explorer, por ejemplo.

Estructura bsica

Acentos y caracteres especiales

Comentarios

Aprender de otras pginas

Primer ejemplo

Prctica: Plantilla

Estructura bsica

Nos disponemos a estudiar un lenguaje muy sencillo basado en pares de tags o etiquetas. Una
etiqueta es un determinado cdigo encerrado entre los caracteres < y > si es de apertura, o
entre los caracteres </ y > si es de cierre.

El convenio de las etiquetas es similar al de los parntesis que se utilizan en frmulas
matemticas, existen tantos parntesis de apertura como de cierre y las aperturas ms internas
son las que primero se deben cerrar.

En toda pgina HTML debe aparecer un mnimo de cuatro etiquetas, con independencia de su
contenido.

1. La etiqueta <HTML> informa al navegador del tipo de documento que va a tratar. Su
complementaria </HTML>, indica que el documento ha terminado, por lo que es la ltima
etiqueta del documento.

Consta de dos partes: cabecera y cuerpo.

<HTML>...</HTML>
2. La etiqueta <HEAD> sirve para definir la cabecera del documento, dentro de la cual
podemos aadir informacin complementaria acerca de la pgina que no se ve en
pantalla.

<HEAD>...</HEAD>
3. Dentro de la etiqueta <HEAD> debemos incorporar la etiqueta <TITLE>, que sirve para
aadir el ttulo de la propia pgina que aparecer en la Barra de ttulo de la ventana.

Este ttulo es el que usan los buscadores para incorporar nuestra pgina a sus ndices.
Algunos muestran los resultados en orden alfabtico, por lo que sera conveniente dedicar
cierto tiempo a definir el ttulo de nuestra pgina de presentacin, de modo que se site en
las primeras posiciones.

<TITLE>...</TITLE>

4. La ltima etiqueta obligatoria es <BODY> y su misin consiste en delimitar el cuerpo o
parte central del documento. En su mbito se pueden emplear: etiquetas de resaltado de
texto, listas, formularios,...

<BODY>...</BODY>

Nota: La estructura bsica de un documento HTML quedara como la siguiente:

<HTML>

Indica el inicio del documento.

<HEAD>

Inicio de la cabecera.

<TITLE> Inicio del ttulo del documento.

</TITLE> Final del ttulo del documento.

</HEAD>

Final de la cabecera del documento.

Estructura de un
documento HTML

<BODY>

Inicio del cuerpo del documento.

</BODY>

Final del cuerpo del documento.
</HTML>

Final del documento.

A continuacin, mostramos un ejemplo de lo que podra ser una pgina Web sencilla. Las
lneas en blanco, as como los tabuladores no son necesarios, de hecho, podra estar todo en
una sola lnea, lo importante es el orden correcto de las etiquetas.

<HTML>

<HEAD>

<TITLE> Mi pgina del Web - 1 </TITLE>

</HEAD>

<BODY>

Esta es mi primera pgina, la ms sencilla de todas las
que vamos a hacer.

</BODY>

</HTML>

A continuacin, vemos cmo se mostrara en el navegador.

Acentos y caracteres especiales

El lenguaje HTML est pensado para expresarse en ingls, idioma que carece de acentos,
ees y otros caracteres especiales.

En nuestro caso, para los que nos expresamos en castellano, nos vemos obligados a usar
caracteres especiales.

La mayora de nosotros conocemos cmo tratan los PCs a la informacin. Para los que no la
conocen, diremos que manejan la informacin en formato binario, es decir, en unos y ceros.
stos, a su vez, forman nmeros, que se traducen en letras a travs de unas tablas. Podemos
asignar el valor 64 a la letra a, el 65 a la b, etc.

El problema est en que cada PC puede adoptar una tabla diferente al resto. Para evitarlo
existen diversos estndares y el ms extendido es el ASCII. De hecho, actualmente todos los
PCs tienen la misma tabla ASCII para los primeros 127 caracteres. Pero esa tabla no contiene
vocales con acento, ni ees, ni smbolos de interrogacin o exclamacin...

La manera de incluir los caracteres extendidos (cuyo nmero est ms all del 127) consiste en
encerrar el cdigo entre los caracteres & y ;.

Vamos a ver los ms tiles a la hora de escribir en espaol:

á, Á, é, É,... , , , , , , , , y
ñ y &Ntilde y
¿
¡
º
ª
Espacio en blanco

Adems, tenemos cuatro caracteres de control, que se usan para formar etiquetas, establecer
parmetros, etc. Para poder emplearlos sin riesgo deberemos escribir los siguiente cdigos:

< <
> >
& &
"

Tanto los caracteres especiales como los de control, son laboriosos a la hora de escribir e
incmodos de recordar, y adems, puede parecer intil su utilizacin, ya que, probablemente,
si escribimos los signos directamente los visualizamos de forma correctamente en el
navegador, pero no estaremos seguros de lo que puede ocurrir cuando accedan a nuestra
pgina con otros navegadores distintos.

Estructura de un
documento HTML

Comentarios

Se suelen emplear para dejar indicaciones que faciliten el mantenimiento y la modificacin de
un documento HTML. Son ignorados por el navegador.

Tanto en la cabecera como en el cuerpo de la pgina, podemos hacer uso de comentarios que
faciliten la compresin de lo que estamos haciendo.

La etiqueta de inicio de comentario es .

<HTML>

<HEAD>

<TITLE> Título del documento </TITLE>

</HEAD>

<BODY>





</BODY>

</HTML>

Estructura de un
documento HTML

Aprender de otras pginas

Los visualizadores permiten mostrar el cdigo fuente del documento, lo que nos ayuda a
aprender de las pginas que realizan otras personas, aunque, puede que nos encontremos con
cdigos desconocidos para nosotros, esto es porque no estn escritas en su totalidad en
HTML, sino en JavaScript, ASP, DHTML, etc.
Para mostrar el cdigo fuente de una pgina Web:
1. Elegimos la opcin Cdigo fuente del men Ver si utilizamos el visualizador Internet
Explorer.
2. Si usamos Netscape Navigator, deberemos elegir la opcin Origen de la pgina del
men Ver.

Vemos que el resultado es una ventana con el cdigo HTML.

Estructura de un
documento HTML

Primer ejemplo

Con todos los conocimentos que hemos adquirido durante este tema, ya podemos realizar
nuestra primera pgina.

Le daremos la estructura que hemos estudiado e incluiremos un pequeo texto dentro de la
etiqueta <BODY>.

Lo primero que haremos ser escribir la estructura bsica de un documento HTML al que
llamaremos "plantilla.html" en el Bloc de notas de Windows.

1. Abrimos el editor de texto a travs de la siguiente ruta: Inicio/Programas/ Accesorios/Bloc de
notas.

2. En la estructura bsica tambin podemos indicar cualquier informacin que queramos que aparezca
en todas las pginas. Escribimos la siguiente estructura:
<HTML>



<HEAD>

<TITLE> </TITLE>

</HEAD>

<BODY>

</BODY>
</HTML>

3. Hacemos clic en el men Archivo y elegimos la opcin Guardar como. Almacenaremos el
documento en nuestra carpeta de trabajo con el nombre "plantilla.html".

Estructura de un
documento HTML

4. La primera parte que tenemos que ampliar es la cabecera. Introduciremos el ttulo entre las etiquetas
<TITLE> y </TITLE>. Escribimos Primer ejemplo.
5. Entre las etiquetas <BODY> y </BODY> escribimos lo que queremos mostrar, por ejemplo,
Esto tiene buena pinta.

6. Para ver el resultado de nuestro primer trabajo, pulsamos en el icono del navegador
Internet Explorer de la Barra de tareas.

7. Elegimos la opcin Abrir del men Archivo y, a travs del botn Examinar, buscamos la ruta
del archivo "plantilla.html".

8. Para agilizar el trabajo, ser conveniente tener abierto al mismo tiempo el navegador y el
editor de texto y cambiar de programa con las teclas ALT+TAB del teclado.

9. El botn Actualizar, actualiza los cambios que hayamos hecho en el documento ".HTML".

Nota: Dara igual guardar el archivo con la extensin .html que con .htm.

Prctica: Plantilla

Prctica: Plantilla

Nuestro primer ejercicio consiste en disear una plantilla de documento HTML para
iniciar rpidamente nuestras pginas. No nos olvidemos de debe tener los lementos
mnimos de una pgina HTML y si lo creemos conveniente, comentaremos algn
apartado.

Guarde el ejercicio con el nombre plantilla.html.

Abrir ejercicio usando
Adobe Acrobat Reader

Archivo necesario para
realizar la prctica

3.7 Cuestionario: Estructura de un documento HTML

1.- Las etiquetas bsicas de HTML son:

<TITLE>, <HEAD> y <BODY>.

</>, <HTML>, <HEAD> y <BODY>.

<HTML>, <TITLE>, <HEAD> y <BODY>.

2.- El Bloc de notas:

Es la agenda de windows.

Es el editor de textos de Windows.

La libreta ms adecuada para apuntar nuestros avances de HTML.

3.- La causa de que debamos utilizar caracteres especiales para los
acentos es:

Para tener la seguridad de que todos los cibernautas visualicen
texto.

Que no se pens que los hispanos fueran a programar en HTML.

Porque los 127 caracteres de la tabla ASCII no contienen acentos.

Que el lenguaje HTML est creado por americanos.

4.- El cdigo fuente es:

Cdigo JavaScript.

Una opcin del men Herramientas.

El ncleo de cada pgina, al cul tenemos la posibilidad de acceder
para aprender de otras pginas.

La fuente del lenguaje.

5.- Pgina es:

Para nosotros, no significa nada.

Estructura de un
documento HTML

Lo mismo que pgina pero para HTML.

La palabra que debemos escribir siempre que programemos.

6.- Cuando escribamos una pgina en HTML, debemos alternar
con el navegador utilizando las siguientes teclas:

ALT+TAB.

ALT+T.

INTRO o ESC.

CTRL+ALT+SUPR.

Tema 3

Загружено:

Сведения о документе

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Tema 3

Загружено:

Авторское право:

Доступные форматы

Estructura de un documento HTML

Вам также может понравиться