Vous êtes sur la page 1sur 6

PRCTICA

TECNOLOGAS DE LA INFORMACIN
CREACIN DE UNA PGINA WEB
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
Objetivos
El alumno conocer los elementos indispensables para crear una pgina web.
Al final de esta prctica el alumno podr:
1. Crear una pgina web bsica utilizando html.
Introduccin
El lenguaje que se emplea para crear pginas web se denomina HTML (Lenguaje de
Marcado de Hipertexto). Las pginas web las puede ver el usuario mediante un tipo de
aplicacin llamada navegador. Puede decirse que HTML es el lenguaje que los navegadores
utilizan para mostrar las pginas web al usuario. Este lenguaje permite agrupar textos,
sonidos e imgenes lo cual representa una ventaja con respecto a libros o revistas impresos,
tambin permite la introduccin de referencias a otras pginas 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 mayora 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
smbolo < y terminan con el smbolo >. Las etiquetas de cierre tienen el mismo nombre que
las de apertura, pero van precedidas del smbolo /. 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
caractersticas 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 (tambin conocido como browser o explorador). Cuando un usuario
solicita la pgina HTML a un servidor web, ste enva la pgina tal cual (incluidas las
etiquetas y los atributos). En el momento en que el explorador recibe la pgina, 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 pginas web, algunos son: Mozilla firefox, mozilla, opera, k-meleon,
netscape, amaya, internet explorer,browseX, off by one.
PRCTICA
TECNOLOGAS DE LA INFORMACIN
CREACIN DE UNA PGINA WEB
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
2
Adems del navegador es necesario utilizar una herramienta que permita crear la pgina, ya
que un archivo HTML no es ms que un texto, es por esto que para programar en HTML se
usa un editor de textos.
Es recomendable usar cualquier editor de textos sencillo, sin embargo, debe tenerse cuidado
con algunos editores ms complejos por ejemplo wordpad o word, pues colocan un cdigo
especial propio al guardar las pginas y HTML es nicamente texto plano
Es importante saber que una pgina es un archivo donde se encuentra contenido el cdigo
HTML en forma de texto y estos archivos tienen extensin .html o .htm (es indiferente cul
utilizar). Cuando se programe en HTML haciendo uso de un editor de textos debe
guardarse el trabajo con extensin .html, por ejemplo, conclusiones.html
Algunas etiquetas empleadas en la construccin de pginas web se observan en la tabla 1,
stas pueden escribirse en maysculas o minsculas.
Tabla 1. Etiquetas
Etiqueta Descripcin
<!-- ... --> Comentario (el navegador no lo muestra)
<!DOCTYPE ... > Tipo de documento
<A> ... </A> Enlace
<ADDRESS> ... </ADDRESS> Formato para informacin de contacto o direccin
<APPLET> ... </APPLET> Programa interpretado por el cliente
<AREA> Mapa sensible
<B> ... </B> Texto en negrita
<BASE> Directorio base de bsqueda de URL
<BASEFONT> Tamao de letra
<BIG> ... </BIG> Letra grande
<BLOCKQUOTE> ... </BLOCKQUOTE> Formato para citas largas
<BODY> ... </BODY> Cuerpo de la pgina
<BR> Nueva lnea
<CAPTION> ... </CAPTION> Ttulo de tabla
<CENTER> ... </CENTER> Centra un elemento
<CITE> ... </CITE> Formato para referencias
<CODE> ... </CODE> Formato para cdigo
<COL> Columna de una tabla
<DD> ... </DD> Descripcin de un trmino de una lista de definiciones
<DFN> ... </DFN> Formato para un trmino
<DIR> ... </DIR> Lista de un directorio
<DIV> ... </DIV> Estructura de un prrafo de texto
<DL> ... </DL> Crea una lista de definiciones
<DT> ... </DT> Trmino de una lista de definiciones
<EM> ... </EM> Texto enfatizado
<FONT> ... </FONT> Fuente de texto
PRCTICA
TECNOLOGAS DE LA INFORMACIN
CREACIN DE UNA PGINA WEB
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
3
<FORM> ... </FORM> Crea un formulario
<FRAME> ... </FPAME> Define un marco
<FRAMESET>...</FRAMESET> Define la ubicacin de un conjunto
<HI> ... </HI> Cabecera de mayor tamao
<H2> ... </H2> Cabecera de tamao menor siguiente
<H3> ... </H3> Cabecera de tamao menor siguiente
<H4> ... </H4> Cabecera de tamao menor siguiente
<H5> ... </H5> Cabecera de tamao menor siguiente
<H6> ... </H6> Cabecera de menor tamao
<HEAD> ... </HEAD> Cabecera de la pgina
<HR> Lnea horizontal
<HTML> ... </HTML> Marca de comienzo y fin de la pgina
<I> ... </I> Texto en itlica
<IMG> Aade una imagen
<INPUT> Elemento de un formulario
<ISINDEX> Formulario para solicitar informacin al usuario
<KBD> ... </KBD> Formato para datos de entrada
<LABEL> ... </LABEL> Etiqueta para un elemento de un formulario
<LI> ... </LI> Elemento de una lista
<LINK> Barra de herramientas
<MAP> ... </MAP> Definicin de mapa sensible
<MENU> ... </MENU> Lista de un men
<META> Informacin de documento para el navegador
<OBJECT> ... </OBJECT> Aade un objeto
<OL> ... </OL> Lista ordenada
<P> Nuevo prrafo
<PARAM> Parmetros de un objeto
<PRE> ... </PRE> Texto con preformato
<Q> ... </Q> Formato para cita
<S> </S> Marca texto borrado
<SAMP> ... </SAMP> Formato para pregunta
<SCRIPT> ... </SCRIPT> Secuencia de comandos que son ejecutados por el navegador
<SELECT> ... </SELECT> Crea un men desplegable
<SMALL> ... </SMALL> Texto pequeo
<SPAN> ... </SPAN> Estructura de un texto (lnea)
<STRIKE> ... </STRIKE> Marca texto borrado
<STRONG> ... <ISTRONG> Texto con marca intensa
<STYLE> ... </STYLE> Permite determinar el estilo de la pgina
<SUB> ... </SUB> Subndice
<SUP>...</SUP> Superndice
<TABLE> ... </TABLE> Tabla
<TBODY> ... </TBODY> Cuerpo de una tabla
<TD> ... </TD> Celda de datos de una tabla
<TEXTAREA> ... </TEXTAREA> Crea un rea de texto
<TFOOT> ... </TFOOT> Pie de una tabla
PRCTICA
TECNOLOGAS DE LA INFORMACIN
CREACIN DE UNA PGINA WEB
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
4
<TH> ... </TH> Celda cabecera de una tabla
<THEAD> ... </THEAD> Cabecera de una tabla
<TITLE> ... </TITLE> Nombre de la pgina. El navegador lo muestra en la barra de
ttulo
<TR> ... </TR> Nueva fila de una tabla
<TT> ... </TT> Texto tipo teletipo
<U> ... </U> Texto subrayado
<UL> ... </UL> Lista sin orden
<VAR> ... </VAR> Formato para variables
Ejemplo
A continuacin se elabora una pgina web sumamente sencilla utilizando HTML.
1. Para realizar el siguiente ejemplo se utilizar como editor de textos el bloc de notas.
2. Abrir el bloc de notas, copiar y pegar el siguiente texto en un nuevo documento.
<html>
<head>
<title> Pgina html </title>
</head>
<body>
Esta es la pgina principal o ndice
</body>
</html>
2. Guardar ese archivo con extensin .html o .htm en el disco duro. Para ello acceder al
men Archivo y seleccionar la opcin Guardar como. En la ventana elegir el directorio
donde se desee guardar y colocar su nombre, indice.html
3. Ejecutar el navegador y abrir el archivo indice.html
4. Sustituir la etiqueta <body> por la etiqueta <body bgcolor=#nnnnnn>, donde
nnnnnn se debe sustituir por FFFFFF (blanco), 000000 (negro), FF0000 (rojo), 0000FF
(azul), FFFF00 (amarillo), 00FF00 (verde) o las combinaciones de F y ceros; para
obtener un color de fondo.
5. Para aumentar el tamao del texto, sustituir la lnea Esta es la pgina principal o ndice
por <h3>Esta es la pgina principal o ndice</h3>, guardar el archivo.
6. Crear una liga al laboratorio de computadoras, para esto debe incluirse la lnea
<a href=http://lcp02.fi-b.unam.mx> Laboratorio de computadoras </a> antes de la
etiqueta </body>, guardar el archivo
7. 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 (slo pueden incluirse
imgenes con extensin .jpg o .gif). Suponer que se tiene una imagen llamada title.jpg
PRCTICA
TECNOLOGAS DE LA INFORMACIN
CREACIN DE UNA PGINA WEB
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
5
,escribir la siguiente lnea despus de lo escrito en el punto anterior:
<img src="title.jpg">, guardar el archivo.
8. Para escribir una lnea saltando un rengln es necesario anteponerle <br>, el archivo
debe verse as:
<html>
<head>
<title> Pgina html </title>
</head>
<body bgcolor="#f00000">
<h3>Esta es la pgina principal o ndice</h3>
<a href=http://lcp02.fi-b.unam.mx> Laboratorio de computadoras </a>
<img src="title.jpg">
<br> Para ver una nueva pgina selecciona aqu
</body>
</html>
9. Es necesario cambiar de pgina, para eso tiene que crearse un nuevo archivo con el bloc
de notas al que se le llamar pag2.html.
10. En el archivo indice.html es conveniente sustituir la lnea <br> Para ver una nueva
pgina selecciona aqu por <br> Para ver una nueva pgina selecciona
<a href=pag2.html>aqu</a> Guardar el archivo.
11. En el archivo pag2.html escribir las siguientes lneas:
<html>
<head>
<title> Pgina 2 html </title>
</head>
<body>
</body>
</html>
12. Ahora se utilizar una imagen como fondo, para ello sustituir la lnea <body> por
<body background=nubes.gif>, donde nubes.gif es el nombre de la imagen que debe
encontrarse en la misma ruta que el archivo pag2.html. Guardar el archivo
13. En esta pgina se incluir el texto TABLA, el cual debe aparecer centrado, para esto,
basta incluir la lnea <center>TABLA </center> antes de la etiqueta </body>
14. Crear una tabla incluye la utilizacin de las etiquetas <table border> y </table>, <tr> y
</tr> para insertar renglones, <td> y >/td> para crear columnas. En la pgina se crear una
tabla con dos renglones y tres columnas. El cdigo html queda de la siguiente manera:
<html>
<head>
<title> Pgina 2 html </title>
</head>
<body background=nubes.gif>
<center>TABLA</center>
<table border>
PRCTICA
TECNOLOGAS DE LA INFORMACIN
CREACIN DE UNA PGINA WEB
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
6
<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. Finalmente y tras guardar el archivo, se incluye la lnea para enviar un correo
electrnico <a href="mailto:prueba@yahoo.com">Enviar comentario </a>
Recomendaciones
1. Seleccionar colores de texto que no se pierdan con el color del fondo
2. No utilizar imgenes como fondo que puedan dificultar la lectura.
3. No saturar la pgina con demasiadas imgenes, pues tardan para desplegarse.
Ejercicios propuestos
1. Realizar un tutorial del tema La computacin en el profesional de la ingeniera de la
materia Computacin para ingenieros.
2. Realizar un tutorial del tema II Introduccin a las tecnologas de la informacin
3. Realizar una pgina de un tema especfico, utilizar, vietas y tablas.
4. Realizar una pgina que incluya bibliografa sobre la asignatura Computacin para
ingenieros
5. Realizar una pgina desde donde se puedan descargar archivos referentes a la
asignatura.
6. Realizar una pgina que contenga ligas hacia diferentes sitios, catalogar el tipo de stos.