P 2

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: 1
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
PRÁCTICA
Además del navegador es necesario utilizar una herramienta que permita crear la página, ya
que un archivo HTML no es más 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 más complejos por ejemplo wordpad o word, 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 .html o .htm (es indiferente cuál
utilizar). Cuando se programe en HTML haciendo uso de un editor de textos debe
guardarse el trabajo con extensión .html, por ejemplo, conclusiones.html
Algunas etiquetas empleadas en la construcción de páginas web se observan en la tabla 1,

éstas pueden escribirse en mayúsculas o minúsculas.
Tabla 1. Etiquetas
Etiqueta Descripción
 Comentario (el navegador no lo muestra)
<!DOCTYPE ... > Tipo de documento
<A> ... </A> Enlace
<ADDRESS> ... </ADDRESS> Formato para información de contacto o dirección
<APPLET> ... </APPLET> Programa interpretado por el cliente
<AREA> Mapa sensible
<B> ... </B> Texto en negrita
<BASE> Directorio base de búsqueda de URL
<BASEFONT> Tamaño de letra
<BIG> ... </BIG> Letra grande
<BLOCKQUOTE> ... </BLOCKQUOTE> Formato para citas largas
<BODY> ... </BODY> Cuerpo de la página
<BR> Nueva línea
<CAPTION> ... </CAPTION> Título de tabla
<CENTER> ... </CENTER> Centra un elemento
<CITE> ... </CITE> Formato para referencias
<CODE> ... </CODE> Formato para código
<COL> Columna de una tabla
<DD> ... </DD> Descripción de un término de una lista de definiciones
<DFN> ... </DFN> Formato para un término
<DIR> ... </DIR> Lista de un directorio
<DIV> ... </DIV> Estructura de un párrafo de texto
<DL> ... </DL> Crea una lista de definiciones
<DT> ... </DT> Término de una lista de definiciones
<EM> ... </EM> Texto enfatizado
<FONT> ... </FONT> Fuente de texto
Elaborada por: 2
PRÁCTICA
<FORM> ... </FORM> Crea un formulario

<FRAME> ... </FPAME> Define un marco
<FRAMESET>...</FRAMESET> Define la ubicación de un conjunto
<HI> ... </HI> Cabecera de mayor tamaño
<H2> ... </H2> Cabecera de tamaño menor siguiente
<H6> ... </H6> Cabecera de menor tamaño
<HEAD> ... </HEAD> Cabecera de la página
<HR> Línea horizontal
<HTML> ... </HTML> Marca de comienzo y fin de la página
<I> ... </I> Texto en itálica
<IMG> Añade una imagen
<INPUT> Elemento de un formulario
<ISINDEX> Formulario para solicitar información 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> Definición de mapa sensible
<MENU> ... </MENU> Lista de un menú
<META> Información de¡ documento para el navegador
<OBJECT> ... </OBJECT> Añade un objeto
<OL> ... </OL> Lista ordenada
<P> Nuevo párrafo
<PARAM> Parámetros 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 pequeño
<SPAN> ... </SPAN> Estructura de un texto (línea)
<STRIKE> ... </STRIKE> Marca texto borrado
<STRONG> ... <ISTRONG> Texto con marca intensa
<STYLE> ... </STYLE> Permite determinar el estilo de la página
<SUB> ... </SUB> Subíndice
<SUP>...</SUP> Superíndice
<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
Elaborada por: 3
PRÁCTICA
<TH> ... </TH> Celda cabecera de una tabla

<THEAD> ... </THEAD> Cabecera de una tabla
<TITLE> ... </TITLE> Nombre de la página. El navegador lo muestra en la barra de
título
<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 continuación se elabora una página 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> Página html </title>
</head>
<body>
Esta es la página principal o índice
</body>
</html>
2. Guardar ese archivo con extensión .html o .htm en el disco duro. 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, 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 tamaño del texto, sustituir la línea Esta es la página principal o índice
por <h3>Esta es la página principal o índice</h3>, guardar el archivo.
6. Crear una liga al laboratorio de computadoras, para esto debe incluirse la línea
<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 (sólo pueden incluirse
imágenes con extensión .jpg o .gif). Suponer que se tiene una imagen llamada title.jpg
Elaborada por: 4
PRÁCTICA
,escribir la siguiente línea después de lo escrito en el punto anterior:

<img src="title.jpg">, guardar el archivo.
8. Para escribir una línea saltando un renglón es necesario anteponerle <br>, 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.fi-b.unam.mx> Laboratorio de computadoras </a>
<img src="title.jpg">
<br> Para ver una nueva página selecciona aquí
</body>
</html>
9. Es necesario cambiar de página, 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 línea <br> Para ver una nueva
página selecciona aquí por <br> Para ver una nueva página selecciona
<a href=”pag2.html”>aquí</a> Guardar el archivo.
11. En el archivo pag2.html escribir las siguientes líneas:
<html>
<head>
<title> Página 2 html </title>
</head>
<body>
</body>
</html>
12. Ahora se utilizará una imagen como fondo, para ello sustituir la línea <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 página se incluirá el texto TABLA, el cual debe aparecer centrado, para esto,
basta incluir la línea <center>TABLA </center> antes de la etiqueta </body>
14. Crear una tabla incluye la utilización de las etiquetas <table border> y </table>, <tr> y
</tr> para insertar renglones, <td> y >/td> para crear columnas. En la página se creará una
tabla con dos renglones y tres columnas. El código html queda de la siguiente manera:
<html>
<head>
<title> Página 2 html </title>
</head>
<body background=”nubes.gif”>
<center>TABLA</center>
<table border>
Elaborada por: 5
PRÁCTICA
<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 línea para enviar un correo
electrónico <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 imágenes como fondo que puedan dificultar la lectura.
3. No saturar la página con demasiadas imágenes, pues tardan para desplegarse.
Ejercicios propuestos
1. Realizar un tutorial del tema “La computación en el profesional de la ingeniería” de la

materia Computación para ingenieros.
2. Realizar un tutorial del tema II “Introducción a las tecnologías de la información”
3. Realizar una página de un tema específico, utilizar, viñetas y tablas.
4. Realizar una página que incluya bibliografía sobre la asignatura Computación para
ingenieros
5. Realizar una página desde donde se puedan descargar archivos referentes a la
asignatura.
6. Realizar una página que contenga ligas hacia diferentes sitios, catalogar el tipo de éstos.
Elaborada por: 6

P 2

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

P 2

Cargado por

Copyright:

Formatos disponibles

PRÁCTICA

Al final de esta práctica el alumno podrá:

1. Crear una página web básica utilizando html.

HTML consta de un conjunto de elementos denominados etiquetas o marcas las cuales se

Es indispensable mencionar que existen varios exploradores en los cuales se pueden

Algunas etiquetas empleadas en la construcción de páginas web se observan en la tabla 1,

<FORM> ... </FORM> Crea un formulario

<TH> ... </TH> Celda cabecera de una tabla

A continuación se elabora una página web sumamente sencilla utilizando HTML.

3. Ejecutar el navegador y abrir el archivo indice.html

,escribir la siguiente línea después de lo escrito en el punto anterior:

1. Realizar un tutorial del tema “La computación en el profesional de la ingeniería” de la

También podría gustarte