Está en la página 1de 13

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:cjoelg@ona.fi.umag.cl"> 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:cjoelg@ona.fi.umag.cl”> cjoelg@ona.fi.umag.cl


</A>
Ejercicio

Modifique el código de manera que le


quede la siguiente página
Ejercicio