Construcción de una página
Web.
En primer lugar, debemos notar que el Lenguaje
HTML consiste en una serie de etiquetas (tags),
encerradas entre los símbolos < y >. Cada etiqueta
realiza una tarea de formato diferente. Por ejemplo,
si queremos que un texto aparezca centrado,
escribiremos la etiqueta <CENTER> seguida por el
texto que deseamos centrar, y cerrando la instrucción
con la etiqueta </CENTER>
Ejemplo:
<CENTER> Mi primera línea en html </CENTER>
Estructura básica de un
documento HTML.
Las etiquetas (tags) más comunes en una página
Web son las siguientes:
Estructura básica de un
documento HTML.
Es importante observar el orden en el cual se
encuentran escritas las etiquetas. La etiqueta
<HTML> marca el comienzo del documento, y como
es lógico se requiere otra etiqueta para marcar el
final del documento. La etiqueta que finaliza el
documento es </HTML>.
Una etiqueta da inicio a un conjunto de tareas, las
cuales terminan cuando encuentran una etiqueta con
el mismo nombre, pero precedida por el símbolo /.
Estructura básica de un
documento HTML.
Las etiquetas se pueden escribir indistintamente con
mayúsculas o minúsculas.
Pasos para construir una página
Web
Paso 1
El primer paso consiste en abrir un editor de texto.
Una opción sencilla es utilizar el bloc de notas de
windows. Siga las secuencia:
Haga click en Inicio| Programas| Accesorios | bloc
de notas
Abra un nuevo documento (Archivo|Nuevo) e
introduzca el siguiente código.
Pasos para construir una página
Web
<HEAD>
<TITLE>
Claudio Gutiérrez-Soto
</TITLE>
</HEAD>
<BODY BGCOLOR=WHITE>
<CENTER>
<FONT SIZE=5> Claudio Gutiérrez Soto
</FONT>
</CENTER>
<P>
<I> (cursiva) Soy docente del departamento de Ing. computación </I>
<BR>
<B> (Negrita) de la Universidad de Magallanes </B>
</BR>
<CENTER><IMG SRC="foto.JPG"></CENTER>
<BR>
<A HREF="http://www.umag.cl"> UMAG </A>
<BR>
<A HREF=“mailto:[email protected]"> Mi correo </A>
</BR>
</BODY>
</HTML>
Pasos para construir una página
Web
Paso 2.
Pulse sobre la opción de menú Archivo y a
continuación en Guardar como...
. Elija un
directorio, asigne el nombre de archivo Prueba.html
y pulse el botón Guardar
Paso 3.
En este paso desplegamos el contenido de la página
HTML en un explorador, como por ejemplo Internet
Explorer. O podemos acceder simplemente haciendo
doble click sobre el archivo Prueba.html
Comentarios al documento HTML
Nota 1
Entre las etiquetas <TITLE> Y </TITLE>
introducimos el título del documento. Este título
aparecerá en la barra superior de la ventana cuando
visualicemos la página usando un navegador.
Nota 2
Por defecto, si no indicamos un color de fondo,
aparecerá el blanco. Para cambiarlo, basta con
indicarlo en la etiqueta inicial <BODY> de la
siguiente forma:
<BODY BGCOLOR=WHITE>
Comentarios al documento HTML

Si queremos hacer un punto y aparte utilizamos la
etiqueta <P>.
 La etiqueta <BR> se emplea para avanzar a la
siguiente línea.
 Utilizamos la etiqueta <I> para resaltar un texto
usando letra cursiva
 Si queremos texto en negrita, utilizamos la etiqueta
<B>.
Por defecto, los textos aparecen alineados a la
izquierda. Para centrarlos utilizaremos la etiqueta
<CENTER>...</CENTER>
Comentarios al documento HTML
Nota 4
Los formatos gráficos (imágenes) más utilizados en
la Web son GIF y JPG. Es necesario, por lo tanto,
que las imágenes insertadas en el documento HTML
estén en cualquiera de estos dos formatos
Una imagen se inserta en el documento HTML
utilizando la etiqueta <IMG SRC=“...”>. Los puntos de
la imagen seguida por su extensión. Es conveniente
que tanto el documento HTML como sus imágenes
estén almacenadas en el mismo directorio.
Comentarios al documento HTML
Nota 5
Para establecer enlace con otra página, utilice la siguiente
etiqueta:
<A HREF=“http://www.umag.cl”> Universidad de Magallanes
</A>
También se puede utilizar los hipervínculos para transmitir un
correo electrónico. Por ejemplo:
<A HREF=“mailto:[email protected]> [email protected]
</A>
Ejercicio
Modifique el código de manera que le
quede la siguiente página
Ejercicio
Descargar

Estructura, etiquetas, página básica