PRÁCTICA

TECNOLOGÍAS DE LA INFORMACIÓN
CREACIÓN DE UNA PÁGINA WEB

Objetivos
El alumno conocerá los elementos indispensables para crear una página web.
Al final de esta práctica el alumno podrá:
1. Crear una página web básica utilizando html.
Introducción
El lenguaje que se emplea para crear páginas web se denomina HTML (Lenguaje de
Marcado de Hipertexto). Las páginas web las puede ver el usuario mediante un tipo de
aplicación llamada navegador. Puede decirse que HTML es el lenguaje que los navegadores
utilizan para mostrar las páginas web al usuario. Este lenguaje permite agrupar textos,
sonidos e imágenes lo cual representa una ventaja con respecto a libros o revistas impresos,
también permite la introducción de referencias a otras páginas por medio de los enlaces
hipertexto.
HTML consta de un conjunto de elementos denominados etiquetas o marcas las cuales se
utilizan para incluir textos, dibujos, tablas, cabeceras. La mayoría de las etiquetas se
componen de dos partes, el comienzo y el fin, entre ambas se encuentra el elemento al que
caracterizan. Todas las etiquetas (tanto las de apertura como las de cierre) comienzan con el
símbolo < y terminan con el símbolo >. Las etiquetas de cierre tienen el mismo nombre que
las de apertura, pero van precedidas del símbolo /. De esta forma, si la etiqueta de apertura
se llama <etiqueta>, la de cierre es </etiqueta>.
Casi todas las etiquetas del lenguaje HTML disponen de atributos que permiten definir
características del elemento al que califican. Los atributos se incluyen dentro de la etiqueta
de apertura de la siguiente forma: <etiqueta atributo1= “valor1” atributo2= “valor2”.....>.
Las marcas que se introducen en un documento HTML no son visibles cuando se muestran
en un navegador (también conocido como browser o explorador). Cuando un usuario
solicita la página HTML a un servidor web, éste envía la página tal cual (incluidas las
etiquetas y los atributos). En el momento en que el explorador recibe la página, interpreta
las etiquetas que ésta contiene junto con los atributos de las mismas, mostrando al usuario
el resultado final (sin etiquetas).
Es indispensable mencionar que existen varios exploradores en los cuales se pueden
visualizar esas páginas web, algunos son: Mozilla firefox, mozilla, opera, k-meleon,
netscape, amaya, internet explorer,browseX, off by one.

Elaborada por:
M.C. Cintia Quezada Reyes cintia@fi-b.unam.mx
Ing. Alejandra Vargas E. de los M. alejandrav@correo.unam.mx
M.C. Vicente Fuentes Gea vfg@servidor.unam.mx

1

.mx 2 . por ejemplo. </FONT> Descripción Comentario (el navegador no lo muestra) Tipo de documento Enlace Formato para información de contacto o dirección Programa interpretado por el cliente Mapa sensible Texto en negrita Directorio base de búsqueda de URL Tamaño de letra Letra grande Formato para citas largas Cuerpo de la página Nueva línea Título de tabla Centra un elemento Formato para referencias Formato para código Columna de una tabla Descripción de un término de una lista de definiciones Formato para un término Lista de un directorio Estructura de un párrafo de texto Crea una lista de definiciones Término de una lista de definiciones Texto enfatizado Fuente de texto Elaborada por: M.. </DIV> <DL> .....C.. pues colocan un código especial propio al guardar las páginas y HTML es únicamente texto plano Es importante saber que una página es un archivo donde se encuentra contenido el código HTML en forma de texto y estos archivos tienen extensión . éstas pueden escribirse en mayúsculas o minúsculas...mx M... > <A> .C... sin embargo.. </DD> <DFN> ..html o .. debe tenerse cuidado con algunos editores más complejos por ejemplo wordpad o word.. de los M.. </A> <ADDRESS> . </B> <BASE> <BASEFONT> <BIG> .. es por esto que para programar en HTML se usa un editor de textos.htm (es indiferente cuál utilizar).unam.. </CODE> <COL> <DD> .. </BIG> <BLOCKQUOTE> ... Vicente Fuentes Gea vfg@servidor. </DIR> <DIV> ... alejandrav@correo. Tabla 1. Es recomendable usar cualquier editor de textos sencillo... </DL> <DT> ...unam...PRÁCTICA TECNOLOGÍAS DE LA INFORMACIÓN CREACIÓN DE UNA PÁGINA WEB Además del navegador es necesario utilizar una herramienta que permita crear la página.. </ADDRESS> <APPLET> .. --> <!DOCTYPE .. </CAPTION> <CENTER> . Etiquetas Etiqueta <!-. </DT> <EM> . </BLOCKQUOTE> <BODY> ..html.. Alejandra Vargas E.mx Ing. </BODY> <BR> <CAPTION> . ya que un archivo HTML no es más que un texto.. </DFN> <DIR> . </CITE> <CODE> . Cuando se programe en HTML haciendo uso de un editor de textos debe guardarse el trabajo con extensión . </APPLET> <AREA> <B> . conclusiones.unam.. </EM> <FONT> .html Algunas etiquetas empleadas en la construcción de páginas web se observan en la tabla 1.. </CENTER> <CITE> . Cintia Quezada Reyes cintia@fi-b.....

. </STRIKE> <STRONG> . </STYLE> <SUB> ...... </Q> <S> </S> <SAMP> ... Cintia Quezada Reyes cintia@fi-b.. </OBJECT> <OL> ... </SUB> <SUP>. </SELECT> <SMALL> .. </KBD> <LABEL> .... </H5> <H6> . </H4> <H5> .</SUP> <TABLE> ..unam.unam.. </MENU> <META> <OBJECT> .mx M. de los M. </TFOOT> Parámetros de un objeto Texto con preformato Formato para cita Marca texto borrado Formato para pregunta Secuencia de comandos que son ejecutados por el navegador Crea un menú desplegable Texto pequeño Estructura de un texto (línea) Marca texto borrado Texto con marca intensa Permite determinar el estilo de la página Subíndice Superíndice Tabla Cuerpo de una tabla Celda de datos de una tabla Crea un área de texto Pie de una tabla Elaborada por: M.unam. <ISTRONG> <STYLE> .. alejandrav@correo...... </SMALL> <SPAN> . </TABLE> <TBODY> .. </FORM> <FRAME> ........mx 3 .... </HEAD> <HR> <HTML> . </H3> <H4> .. Alejandra Vargas E. Vicente Fuentes Gea vfg@servidor...mx Ing. </TEXTAREA> <TFOOT> . </LI> <LINK> <MAP> .</FRAMESET> <HI> .... </SCRIPT> <SELECT> .C..... </OL> Crea un formulario Define un marco Define la ubicación de un conjunto Cabecera de mayor tamaño Cabecera de tamaño menor siguiente Cabecera de tamaño menor siguiente Cabecera de tamaño menor siguiente Cabecera de tamaño menor siguiente Cabecera de menor tamaño Cabecera de la página Línea horizontal Marca de comienzo y fin de la página Texto en itálica Añade una imagen Elemento de un formulario Formulario para solicitar información al usuario Formato para datos de entrada Etiqueta para un elemento de un formulario Elemento de una lista Barra de herramientas Definición de mapa sensible Lista de un menú Información de¡ documento para el navegador Añade un objeto Lista ordenada <P> Nuevo párrafo <PARAM> <PRE> ... </FPAME> <FRAMESET>. </HTML> <I> .... </SPAN> <STRIKE> .....C.. </I> <IMG> <INPUT> <ISINDEX> <KBD> . </TBODY> <TD> ... </PRE> <Q> .... </LABEL> <LI> . </HI> <H2> . </H6> <HEAD> . </TD> <TEXTAREA> ... </MAP> <MENU> . </H2> <H3> .... </SAMP> <SCRIPT> .PRÁCTICA TECNOLOGÍAS DE LA INFORMACIÓN CREACIÓN DE UNA PÁGINA WEB <FORM> .........

jpg o . FF0000 (rojo). 000000 (negro)..mx 4 . donde nnnnnn se debe sustituir por FFFFFF (blanco)..html 3. Para ello acceder al menú Archivo y seleccionar la opción Guardar como.. En la ventana elegir el directorio donde se desee guardar y colocar su nombre..jpg Elaborada por: M. Cintia Quezada Reyes cintia@fi-b. </TH> <THEAD> .unam.unam. Suponer que se tiene una imagen llamada title. copiar y pegar el siguiente texto en un nuevo documento..C... alejandrav@correo. FFFF00 (amarillo).unam. </TITLE> <TR> . Ejecutar el navegador y abrir el archivo indice. Alejandra Vargas E.mx M.html o .htm en el disco duro.html 4.unam. </TT> <U> .PRÁCTICA TECNOLOGÍAS DE LA INFORMACIÓN CREACIÓN DE UNA PÁGINA WEB <TH> . 5. 2. Crear una liga al laboratorio de computadoras.. </VAR> Celda cabecera de una tabla Cabecera de una tabla Nombre de la página.. </UL> <VAR> . de los M. </THEAD> <TITLE> . 00FF00 (verde) o las combinaciones de F y ceros.C...fi-b. </U> <UL> . Sustituir la etiqueta <body> por la etiqueta <body bgcolor=”#nnnnnn”>. Para aumentar el tamaño del texto. 6.. El navegador lo muestra en la barra de título Nueva fila de una tabla Texto tipo teletipo Texto subrayado Lista sin orden Formato para variables Ejemplo A continuación se elabora una página web sumamente sencilla utilizando HTML. Vicente Fuentes Gea vfg@servidor. guardar el archivo. <html> <head> <title> Página html </title> </head> <body> Esta es la página principal o índice </body> </html> 2. para esto debe incluirse la línea <a href=http://lcp02.gif). sustituir la línea Esta es la página principal o índice por <h3>Esta es la página principal o índice</h3>. Abrir el bloc de notas. indice. guardar el archivo 7. 0000FF (azul). </TR> <TT> . 1.. Guardar ese archivo con extensión .. Para insertar una imagen debe contar con ella primero y ésta debe encontrarse en la misma ruta donde se grabó el archivo html que la referencia (sólo pueden incluirse imágenes con extensión . para obtener un color de fondo.. Para realizar el siguiente ejemplo se utilizará como editor de textos el bloc de notas.mx> Laboratorio de computadoras </a> antes de la etiqueta </body>.mx Ing..

guardar el archivo. alejandrav@correo.unam.gif es el nombre de la imagen que debe encontrarse en la misma ruta que el archivo pag2. En el archivo pag2. para esto.fi-b. Alejandra Vargas E.unam.C. 10.escribir la siguiente línea después de lo escrito en el punto anterior: <img src="title. Es necesario cambiar de página.gif”> <center>TABLA</center> <table border> Elaborada por: 5 M.PRÁCTICA TECNOLOGÍAS DE LA INFORMACIÓN CREACIÓN DE UNA PÁGINA WEB . Crear una tabla incluye la utilización de las etiquetas <table border> y </table>.mx> Laboratorio de computadoras </a> <img src="title. el archivo debe verse así: <html> <head> <title> Página html </title> </head> <body bgcolor="#f00000"> <h3>Esta es la página principal o índice</h3> <a href=http://lcp02. de los M.html es conveniente sustituir la línea <br> Para ver una nueva página selecciona aquí por <br> Para ver una nueva página selecciona <a href=”pag2. donde nubes.gif”>.jpg"> <br> Para ver una nueva página selecciona aquí </body> </html> 9.html. 8. para ello sustituir la línea <body> por <body background=”nubes.unam. el cual debe aparecer centrado.html”. Vicente Fuentes Gea vfg@servidor. para eso tiene que crearse un nuevo archivo con el bloc de notas al que se le llamará “pag2. basta incluir la línea <center>TABLA </center> antes de la etiqueta </body> 14.mx . En esta página se incluirá el texto TABLA.mx M.unam. Cintia Quezada Reyes cintia@fi-b. 11. En la página se creará una tabla con dos renglones y tres columnas. Guardar el archivo 13. Para escribir una línea saltando un renglón es necesario anteponerle <br>.html”>aquí</a> Guardar el archivo.jpg">. El código html queda de la siguiente manera: <html> <head> <title> Página 2 html </title> </head> <body background=”nubes. En el archivo indice. <tr> y </tr> para insertar renglones. Ahora se utilizará una imagen como fondo. <td> y >/td> para crear columnas.html escribir las siguientes líneas: <html> <head> <title> Página 2 html </title> </head> <body> </body> </html> 12.mx Ing.C.

Seleccionar colores de texto que no se pierdan con el color del fondo 2. Realizar una página que incluya bibliografía sobre la asignatura Computación para ingenieros 5. Finalmente y tras guardar el archivo. se incluye la línea para enviar un correo electrónico <a href="mailto:prueba@yahoo. Cintia Quezada Reyes cintia@fi-b. 4.com">Enviar comentario </a> Recomendaciones 1. catalogar el tipo de éstos. 2. Realizar un tutorial del tema II “Introducción a las tecnologías de la información” 3. alejandrav@correo. de los M. pues tardan para desplegarse. utilizar.unam. 6.C. 3. Vicente Fuentes Gea vfg@servidor.C.unam. Realizar un tutorial del tema “La computación en el profesional de la ingeniería” de la materia Computación para ingenieros.PRÁCTICA TECNOLOGÍAS DE LA INFORMACIÓN CREACIÓN DE UNA PÁGINA WEB <tr> <td> Columna 1</td> <td> Columna 2</td> <td> Columna 3</td> </tr> <tr> <td> A</td> <td> B</td> <td> C</td> </tr> </table> </body> </html> 15. Alejandra Vargas E. viñetas y tablas. Realizar una página desde donde se puedan descargar archivos referentes a la asignatura. Ejercicios propuestos 1. No saturar la página con demasiadas imágenes.unam.mx 6 . Realizar una página que contenga ligas hacia diferentes sitios.mx Ing. Realizar una página de un tema específico. No utilizar imágenes como fondo que puedan dificultar la lectura.mx M. (OSURIHVRUSRGUiGLVHxDUVXVSURSLRVHMHUFLFLRVVLHPSUH\FXDQGRFXEUDSRUFRPSOHWRHOREMHWLYRGH ODSUiFWLFD Elaborada por: M.