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 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> <A HREF="http://www.umag.cl"> UMAG </A> <A HREF=“mailto:cjoelg@ona.fi.umag.cl"> Mi correo </A> </BODY> </HTML>
Pasos para construir una página Web 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