Creación de páginas

web con HTML

CECYTEM Plantel Valle de Chalco Solidaridad I

Marco Antonio Ávila Reyes

Belén Cabadilla Del Rosal
Ángel Daniel Leyva Torres
Amairani Fernanda López Huerta
Eder Reyes Velasco

Asesor: Profesor Emilio Vázquez Villegas

INDICE
1 Creación de páginas web con HTML
Introducción a Creación de páginas web con HTML………………………4
- Leguaje de Marcado Hipertextual HTML
- Historia
- Editores de Páginas web
- Navegadores de Internet

Capítulo 1: Estructura general y principal de una página………………7

- Ejemplo de la creación de una página web
- Ejemplo 2: Usando párrafos
- Ejemplo 3: Usando colores de fondo y de texto o imágenes de fondo
- Etiqueta <pre>
- Margen del texto de la página
- Ejemplo 1
- Ejemplo 2: Diseño de un índice

Capítulo 2: El texto…………………………………………………………….20
- Barras de título o separadores
- Ejemplo 1
- Encabezados
- Etiqueta <font>
- Etiqueta <marquee>

Capítulo 3: Hiperenlace……………………………………………………….34
- Destino de enlace

Capítulo 4: Las imágenes……………………………………………………..37

Capítulo 5: Las tablas………………………………………………………….39

- Alineación y estilo para la tabla

Capítulo 6: Música de fondo y en reproductor……………………………43

- Música de fondo
- Música con reproductor
- Etiqueta <frame>

Espacio de Prácticas………………………………………………….………..47
- Práctica 1
2 Creación de páginas web con HTML
 - Práctica 2
- Práctica 3
- Práctica 4
- Práctica 5

Conclusiones…………………………………………………………………….60

Bibliografía………………………………………………………………………..61

INTRODUCCION A CREACIÓN DE PAGINAS WEB

LENJUAGE DE MARCADO HIPERTEXTUAL HTML

3 Creación de páginas web con HTML
El HTML (HyperText Markup Language), o (lenguaje de marcado hipertextual),
hace referencia al lenguaje de marcado predominante para la elaboración de
páginas web que se utiliza para describir y traducir la estructura y la información
en forma de texto, así como para complementar el texto con objetos tales como
imágenes. El HTML se escribe en forma de etiquetas, rodeadas por signos de
mayor y menor que (<,>). HTML también puede describir, hasta un cierto punto, la
apariencia de un documento, y puede incluir o hacer referencia a un tipo de
programa llamado script, el cual puede afectar el comportamiento de navegadores
web y otros procesadores de HTML.
HTML también sirve para referirse al contenido del tipo de MIME text/html o
todavía más ampliamente como un término genérico para el HTML, ya sea en
forma descendida del XML (como XHTML 1.0 y posteriores) o en forma
descendida directamente de SGML (como HTML 4.01 y anteriores).

HISTORIA

La primera descripción de HTML disponible públicamente fue un documento

llamado Etiquetas HTML, publicado por primera vez en Internet por Tim Berners-
Lee en 1991. Describe 22 elementos que incluyen el diseño inicial y relativamente
simple de HTML, de los cuales, trece de estos elementos todavía existen en HTML
4.
En Noviembre de 1995 se aprobó el estándar HTML 2.0 que estaba orientado a
situaciones académicas (doctores, ingenieros, licenciados, maestros, etc.) El
comité encargado de conocer estándares de internet comenzó a trabajar en un
borrador y una nueva versión de HTML 3.0.

Por estos tiempos, para mantener la seguridad y las formas de crear HTML, nace
una organización encargada de revisar las paginas HTML que entran al sitio web y
además aprueban las versiones nuevas de HTML. Esta organización se llama
W3C.

En Enero de 1997 se aprobó el estándar HTML 3.2, este nuevo estándar incluía
las mejoras y proporcionadas por los navegadores Internet Explore Netscape
Navegator, los cuales ya habían superado el HTML 2.0.

El primer navegador fue Netscape, en Diciembre de 1997 se aprobó el estándar

HTML 4.0 creado para estandarizar los marcos. Para Septiembre de 2001 se
aprueba el estándar HTML 4.0

EDITORES DE PAGINAS WEB

4 Creación de páginas web con HTML

Un editor de página es un programa que nos permite redactar documentos,
existen un gran número de editores que permiten crear páginas web sin la
necesidad de escribir una sola línea de código HTML. Estos editores disponen de
un entorno visual y generan automáticamente el código en páginas.

Estos editores visuales pueden generar en ocasiones código basura, es decir,

código que no sirve para nada, en otras ocasiones puede ser más efectivo corregir
directamente el código, por lo que resulta necesario saber HTML para depurar el
código de nuestra página, algunos de los editores son los siguientes:

*Macro Media
*Dream weaver
*Microsoft Front Page
*Adobe Page mill
*Cute Page
*Netscape Composer
*Arachnofilia

De los cuales, Microsoft Front Page y Adobe Page mill nunca se van a encontrar
disponibles para descarga gratuita, mientras que los demás programas aquí
mencionados si se podrán obtener gratuitamente.

NAVEGADORES DE INTERNET

Un navegador web (generalización de Netscape Navigator) es una aplicación que

opera a través de Internet, interpretando la información de archivos y sitios web
para que éstos puedan ser leídos (ya se encuentre esta red mediante enlaces o
hipervínculos)

La funcionalidad básica de un navegador web es permitir la visualización de

documentos de texto, posiblemente con recursos multimedia incrustados. Los
documentos pueden estar ubicados en la computadora en donde está el usuario,
pero también pueden estar en cualquier otro dispositivo que esté conectado en la
computadora del usuario o a través de Internet, y que tenga los recursos
necesarios para la transmisión de los documentos (un software servidor web).

Tales documentos, comúnmente denominados páginas web, poseen hipervínculos

que enlazan una porción de texto o una imagen a otro documento, normalmente
relacionado con el texto o la imagen.

5 Creación de páginas web con HTML

El seguimiento de enlaces de una página a otra, ubicada en cualquier
computadora conectada a Internet, se llama navegación, de donde se origina el
nombre navegador (aplicado tanto para el programa como para la persona que lo
utiliza, a la cual también se le llama cibernauta).

El mejor navegador que muchos prefieren y se acomodan es Mozilla Firefox, ya

que esta permite todo tipo de descargas sin ningún error, además de
compatibilidad con todos los estándares y seguridad contra archivos sospechosos;
cosa que Internet Explorer no realiza y no tiene compatibilidad ni seguridad. Pero
lo más recomendable es tener 2 navegadores en la computadora por si llega a
haber problemas con una de ellas.

CAPITULO 1: ESTRUCTURA GENERAL Y PRINCIPAL DE UNA PÁGINA

En este caso no es difícil crear una página web con HTML, es decir, no se
necesita comandos ni códigos complejos, ni tampoco programas de descarga
que ocupan mucho espacio en la memoria, sino que se puede crear de manera
fácil, rápida y divertida por medio del Bloc de notas que todos ya conocen.

6 Creación de páginas web con HTML

Para crear una página web con HTML en Bloc de notas se necesita una fácil
estructura y simples códigos que hasta se pueden memorizar. A continuación se
muestran toda la estructura y sus características para poder crear una página
web:

<html>: Este código indica o muestra el inicio de la página web. Siempre debe ir
primero antes que los demás códigos.

<head>: Es el código que muestra el encabezado de la página.

<title>: Indica el título de la página del tema de que se trate. Solo indica el inicio
del título.

</title>: Indica el término del título.

</head>: Indica el fin del encabezado.

<body>: Indica el inicio del cuerpo de la página, como el desarrollo del tema.

<p>: Indica el inicio de un párrafo.

</br>: Indica el final de un renglón.

</p>: Indica el final de un párrafo.

</body>: Fin del cuerpo de la página.

</html>: Fin de la página web.

EJEMPLO DE LA CREACION DE UNA PAGINA WEB

1.- Primero abrimos bloc de notas y lo primero que escribimos es el código

<html>, luego, abajo escribimos el código de encabezado <head>.
Posteriormente el código de título, el título de la página y el código de fin de
título, por ejemplo: <title> EJEMPLO 1 </title>. Por ultimo cerramos el
encabezado con el código </head>.
7 Creación de páginas web con HTML
2.- Comience ahora con el código <body> y abajo escriba una oración que usted
guste. Después, abajo escriba </body> y abajo </html>. La imagen de abajo
muestra ya toda la estructura de lo que será la página web.

3.- Guarde la estructura con un nombre seguido por .html sin espacio entre dicho
nombre y punto. Ejemplo: Primera pagina.html. El archivo se guardara con el
icono de su navegador predeterminado.

Al abrir el archivo html, se abrirá con el navegador y quedara de la siguiente

forma:

8 Creación de páginas web con HTML

EJEMPLO 2: USANDO PARRAFOS

1.- Primero usaremos los códigos principales (<html>, <head>, <body>, etc.)

2.- Antes de comenzar el primer párrafo escribiremos el código <p> y abajo del
código el párrafo que desee crear.

3.- Al final de cada renglón escriba el código </br>.

4.- Al final del párrafo en la parte de abajo escriba el codigo </p>. Si desea
escribir otro párrafo siga los mismos pasos anteriores.

Y así quedara la página web:

9 Creación de páginas web con HTML

EJEMPLO 3: USANDO COLORES DE TEXTO Y DE FONDO O IMÁGENES DE
FONDO

Usando la página del ejemplo anterior, usaremos los siguientes códigos

adicionales para ponerle estilo a nuestra página, como color de texto, de fondo e
imágenes de fondo:

Bgcolor: para poner color al fondo de la página.

Text: Especifica que el texto va a tener un color.

Background: Para poner una imagen de fondo. NOTA: La página web solo
soporta imágenes tipo JPG, JPEG, GIF y PNG.

1.- Dentro del código <body>, agregaremos el código adicional bgcolor, seguido
por un signo = y después entre comillas el color en inglés o el codigo
hexadecimal del color que desee; ejemplo:

<body bgcolor = “yellow”> o <body bgcolor = “#00FF00”>

El color de fondo será de toda la página.

2.- Para poner color al texto, dentro del mismo body pondremos el codigo text,
un signo = y después entre comillas el color, ya sea en inglés o en hexadecimal;
ejemplo:

<body bgcolor = “yellow” text = “#0099FF”>

10 Creación de páginas web con HTML

Y la página quedara de la siguiente forma:

Para poner imagen de fondo solo cambiaremos el bgcolor por background y

pondremos la dirección de la imagen que desee. Para buscar la dirección solo
haga clic con el botón derecho del mouse sobre la imagen que desee poner de
fondo, y en el menú contextual haga clic en propiedades. Después en el cuadro
que sale haga clic en la pestaña seguridad y en la parte superior derecha
aparece la dirección, solo copie y pegue. Ejemplo:

<body background = “D:\Imágenes para escritorio\Noche buena.jpg”>

11 Creación de páginas web con HTML

La página quedará de la siguiente forma:

LA ETIQUETA <PRE>

Esta etiqueta sirve para mover un texto 3 veces a la derecha o a la izquierda,

como un índice de títulos y subtítulos. Se usa también códigos para poder mover
los textos y que en la página salgan tal cual tipo índice:

<pre>: Principio de texto tipo índice.

Su modificador es <blockquote>, la cual se puede poner 2 o más veces sobre la

línea del título o subtitulo que cada uno indica cuantas veces va a ser movido el
mismo hacia la derecha.

</pre>: Fin de texto tipo índice

12 Creación de páginas web con HTML
MARGEN DEL TEXTO DE LA PÁGINA

Para poner un margen de texto a la página, ya sea que quede un espacio a la

derecha, izquierda o texto en el centro, necesitamos unos modificadores que van
ir colocados dentro del código body. Estos modificadores son:
Leftmargin: Margen izquierdo
Rightmargin: Margen derecho
Topmargin: Margen superior

Aquí se muestra un ejemplo de cómo deben ir insertados los modificadores:

<body leftmargin = “100” topmargin = “100”> (Puede ser cualquier número).

EJEMPLO 1:

1.- En la parte de abajo del cierre del encabezado </head>, se coloca la etiqueta
<pre>.

2.- Ponemos el margen del texto de la página web dentro de body.

3.- En el párrafo del texto que se va a recorrer, al inicio de cada renglón oprime
la tecla tabulador cuantas veces quieras recorrer el texto.

13 Creación de páginas web con HTML

La página quedará de la siguiente forma:

EJEMPLO 2: DISEÑO DE UN INDICE

En este caso no se utiliza el comando <pre>, solo <blockquote>, ejemplo:

14 Creación de páginas web con HTML

La página quedara de la siguiente forma:

A continuación se presentan los códigos hexadecimales y su respectivo color

para que puedas diseñar tu página web con diversidad de colores en texto y
fondo:

15 Creación de páginas web con HTML

16 Creación de páginas web con HTML
17 Creación de páginas web con HTML
18 Creación de páginas web con HTML
 CAPITULO 2: EL TEXTO

En este capítulo se indicarán los pasos para poner mucho más estilo y formalidad a
nuestra página web, incluyendo la fuente del texto, así como el tamaño y el color.
También podemos poner barras de texto o separadores que sirven para separar los
títulos, subtítulos o subtemas, además de ponerle estilo de movimiento al título.
Cabe decir que también se puede poner texto en negrita, cursiva, subrayada,
tachada, grande o pequeña. Para realizar estos estilos antes mencionados, en esta
sesión hablaremos de los códigos necesarios y como colocarlos.

BARRAS DE TÍTULO O SEPARADORES

Para colocar barras de texto o separadores necesitamos códigos y saber cómo

usarlos, a continuación presentamos el código para realizar un separador:

<hr>

Tiene los modificadores siguientes

Aling -- alinear el texto

Wisdth- Tamaño de la barra (va con porcentaje).

Size- Ancho de la barra

19 Creación de páginas web con HTML
Noshade-Sin sombreado

Shade- Con sombreado

Para especificar el separador con tamaño y posición usaremos el codigo <hr> y

dentro de dicho codigo escribiremos align = “Center, left, up, down o right”.
Después colocaremos width = “x%”. Luego el tamaño (size = ““). También se le
puede poner color a los separadores con el modificador “color=” “, el usuario puede
escribir cualquier color deseado en inglés o en hexadecimal.

Ejemplo:

<hr alingn= "center" width= "50%" size="10" color ="blue">

EJEMPLO 1

La página quedará de la siguiente forma:

20 Creación de páginas web con HTML

ENCABEZADOS

Para encabezados utilizamos un código que nos ayudará a poner un título más
grande o subtitulo más pequeño que el mismo título:

< hx>: Donde X es el número de tamaño del encabezado.

Podemos utilizar los números del 1 al 6 estos varían dependiendo el tamaño que
van de la letra más grande al más pequeño.

Texto de prueba (H1)

Texto de prueba (H2)

Texto de prueba (H3)

Texto de prueba (H4)

Texto de prueba (H5)

Texto de prueba (H6)

Esta etiqueta se coloca arriba del encabezado <h1> y por lo siguiente se coloca
debajo de nuestro texto de encabezado cerrándolo con una / de esta manera </h1>
ya que si no se coloca de esta manera la etiqueta no ara la función deseada del
usuario. Ejemplo:

<h1>

<p align = “center”>

EL TEXTO</br>

</p>

</h1>

21 Creación de páginas web con HTML

Al guardar nuestro bloc de nota podremos observar que <h1> se muestra de la
siguiente manera:

Al guardar nuestro bloc de nota podremos observar que <h2> se muestra de la

siguiente manera:

22 Creación de páginas web con HTML

Al guardar nuestro bloc de nota podremos observar que <h3> se muestra de la
siguiente manera:

ETIQUETA <FONT>

La etiqueta <font> nos permite darle a nuestro texto un tipo de letra, color a
nuestro texto y un valor por defecto a nuestro texto que va acompañado por los
siguientes atributos:

ATRIBUTO SIGNIFICADO

Face Tipo de letra

Color Color de texto

Size Valor

23 Creación de páginas web con HTML

En este caso demostraremos la etiqueta <Font> usando el atributo color que se
escribe de la siguiente manera. Ejemplo:

<font color= "yellow">

<p>

HAN PASADO LAS VACACIONES<br>

Y CON LAS PRIMERAS<br>

NOCHES FRIAS<br>

</p>

<p>

PLANTERO SIENTE NOSTALGIA<br>

EN LA ESCUELA JUEGO FUTBOL<br>

EN EL CAMPO BEISBOL<br>

</p>

</Font>

<font color=" ">: Se coloca arriba del texto que se quiera dar un color en
este caso se dio un color amarillo; pero al colocar el color en la instrucción se
escribe en inglés o hexadecimal, ya que si se requiere al escribir la instrucción.

Guardando nuestra nota en el escritorio se mostrara de la siguiente manera:

24 Creación de páginas web con HTML

 <font color="yellow">

RESALTADO DE TEXTO

ETQUETA SIGNIFICADO

<b> Negrita

<i> Cursiva

<u> Subrayado

<s> Tachado

<tt> Teletipo

<big> Grade

<small> Pequeña

25 Creación de páginas web con HTML

Estas etiquetas son usadas para cambiar el texto como lo que muestra la tabla
estas se colocan al principio del texto y en donde termina colocando un / para
cerrar la etiqueta.

La etiqueta <b>

Permite que el texto sea tipo negrita para diferenciar palabras claves o títulos y
subtítulos, ejemplo:

<u>HAN PASADO LAS VACACIONES</u></br>

<i>Y CON LAS PRIMERAS</i></br>

<s>NOCHES FRIAS</s></br>

<b>PLANTERO SIENTE NOSTALGIA</b></br>

<tt>Y ACARICIA SUAVEMENTE LAS FLORECILLAS</tt></br>

La etiqueta <u>

Nos sirve para subrayar nuestro texto, sobre todo en las palabras claves, ejemplo:

<u>HAN PASADO LAS VACACIONES</u></br>

<i>Y CON LAS PRIMERAS</i></br>

26 Creación de páginas web con HTML

<s>NOCHES FRIAS</s></br>

<b>PLANTERO SIENTE NOSTALGIA</b></br>

<tt>Y ACARICIA SUAVEMENTE LAS FLORECILLAS</tt></br>

La etiqueta <i>

Permite que nuestro texto sea con letra cursiva, ejemplo:

<u>HAN PASADO LAS VACACIONES</u></br>

<i>Y CON LAS PRIMERAS</i></br>

<s>NOCHES FRIAS</s></br>

<b>PLANTERO SIENTE NOSTALGIA</b></br><tt>Y ACARICIA SUAVEMENTE

LAS FLORECILLAS</tt></br>

27 Creación de páginas web con HTML

La etiqueta <s>

Permite que el texto sea tachado, ejemplo:

<u>HAN PASADO LAS VACACIONES</u></br>

<i>Y CON LAS PRIMERAS</i></br>

<s> NOCHES FRIAS</s></br>

<b>PLANTERO SIENTE NOSTALGIA</b></br>

<tt>Y ACARICIA SUAVEMENTE LAS FLORECILLAS</tt></br>

28 Creación de páginas web con HTML

La etiqueta <tt>

El texto cambia a teletipo (tipo máquina de escribir). Ejemplo:

<u>HAN PASADO LAS VACACIONES</u></br>

<i>Y CON LAS PRIMERAS</i></br>

<s>NOCHES FRIAS</s></br>

<b>PLANTERO SIENTE NOSTALGIA</b></br>

<tt>Y ACARICIA SUAVEMENTE LAS FLORECILLAS</tt></br>

ETIQUETA <MARQUEE>

Esta etiqueta nos permite desplazar el texto acompañado con las instrucciones.

 Direction
 Behavior

29 Creación de páginas web con HTML

DIRECTION BEHAVIOR

Left Alternate

Right Scroll

Center Slide

Justify

Direction

o LEFT izquierda (por defecto)

o RIGHT derecha

BEHAVIOR: Determina cómo se mueve el contenido del bloque en la pantalla.

Puede tener tres valores:

Scroll: Hará que el contenido del bloque aparezca por un extremo, desaparezca
por el contrario y vuelva a aparecer por donde comenzó.

Slide (por defecto): Hace que el contenido del bloque se deslice hacia el lado
indicado por direction y se detenga al llegar al lado opuesto. Solamente volverá a
moverse si la página es cargada de nuevo.

Alternate: El contenido del bloque se moverá alternativamente en una dirección y

otra, comenzando por la indicada por direction

30 Creación de páginas web con HTML

Ejemplo:

<marquee behavior="alternate" direction="left">

<p align = “center”>

<h1>

<p>

EL TEXTO </br>

</p>

</h1>

</marquee behavior>

31 Creación de páginas web con HTML

A continuación se muestra una tabla con algunos códigos y caracteres para poder
colocar los signos necesarios y acentos en tu página web para que se vea más
presentable:

32 Creación de páginas web con HTML

 CAPITULO 3: HIPERENLACE

En este capítulo conoceremos los códigos y formas para colocar vínculos en

nuestra página que con un clic nos transporte a otra página web o a una parte
específica de ella.

El hiperenlace es un vínculo que nos manda a otra página y se coloca de esta

manera y al final escribir un / para cerrar nuestro enlace. Ejemplo:

<a>

<a href="http:\\www.google.com">visita al tío google</a>

DESTINO ENLACE

El destino enlace determina en que ventana va hacer abierta la página vinculada,

se especifica a través del atributo:

Aunque se le puede asignar los siguientes valores:

_blank: Abre el documento vinculado en una ventana nueva del navegador.

_parent: abre el documento vinculado en la ventana de un marco que contiene el

título.

_selft: Abre el documento vinculado en el mismo marco o ventana del vínculo.

_alink= “ “: Permite determinar el color del enlace activo.

33 Creación de páginas web con HTML

_vlink= “ “: permite determinar el color de los enlaces visitados.

Ejemplo:

<body _vlink=”#FF0099”alink=”FF9900”>

Para abrir un vínculo que nos lleve a una parte específica de una página lo que
haremos es lo siguiente:

Primero creamos dos páginas de internet, una con un índice y otra con un texto de
tres párrafos. Posteriormente se procede a vincular la palabra.

Primero colocamos en cualquier palabra de algún párrafo el código para vincular

esa palabra o enunciado con la página del índice. Ejemplo del código:

<a name = "mi ancla"> Enunciado o palabra <a href = "Index.html" </a>

A continuación se presenta un ejemplo claro de la estructura de un párrafo con un

hipervínculo en el texto:

<P align = "left">

En enero de <a name = "mi ancla"> 1997 <a href = "Index.html" </a> se aprobó
el estándar HTML 3.2, este nuevo estándar incluía las mejoras y proporcionadas
por los navegadores Internet </br>

Explore Netscape Navegator, los cuales ya habían superado el HTML 2.0. </br>

El primer navegador fue Netscape, en Diciembre de 1997 se aprobó el estándar

HTML 4.0 creado para estandarizar los marcos. </br>

Para Septiembre de 2001 se aprobó el estándar HTML 4.0 </br>

</p>

Después nos dirigimos a la página del índice y en la parte de los códigos

principales anotamos el siguiente código:

<a href = "tema 1.html#mi ancla"> enlace a mi ancla </a>

Ejemplo:

<html>

<head>

<title> Index </title>

34 Creación de páginas web con HTML
</head>

<a href = "tema 1.html#mi ancla"> enlace a mi ancla </a>

<body>

Las páginas web quedarán de la siguiente forma:

Tema 1:

El enunciado subrayado es el vínculo que con un clic te llevará a la página web del
índice.

Índice:

CAPITULO 4: LAS IMAGENES

35 Creación de páginas web con HTML

En este capítulo se muestran los códigos y las formas de colocarlas para poner
una imagen debajo o arriba del texto que muestre de lo que habla el mismo.

El código para insertar una imagen es la siguiente:

<img>

Sus modificadores son:

Src: Siempre debe utilizarse y debe ir dentro de img tenga estilo la imagen o no.

Alt: Se usa para poner un nombre a la imagen para que cuando esté el puntero
del mouse sobre la imagen por segundos se muestre un cuadrito con el nombre
del mismo.

Width: Se usa para dar un tamaño de ancho a la imagen.

Height: Se usa para dar un tamaño de altura o de largo a la imagen.

Border: Se usa para poner un marco alrededor de la imagen.

Align: Para dar una posición a la imagen, ya sea izquierda (left), derecha (right),
Superior (top).

EJEMPLO 1

Al colocar la imagen primero colocamos el código <img>, después dentro de img,

colocamos src, que siempre debe ir.

Luego en el src colocamos entre comillas el nombre de la imagen tal como está en
tu carpeta seguido por la extensión de la misma (las imágenes que quieras
insertar a la página siempre deben estar en la carpeta donde está el archivo de
dicha página).

Después colocamos el alt seguido por un nombre que desee darle entre comillas.
Posteriormente colocamos el tamaño de ancho y largo que desee darle a la
imagen con Width y Height.

Por último colocamos Align para colocar en una parte que desee la imagen.

<img src = “blanca nieves.jpg” alt = “Los enanitos” width = “400” height =
“300” border = “10” align = “right”>

NOTA: Solo soporta imágenes JPG, JPEG, PNG Y GIF.

36 Creación de páginas web con HTML
La página web quedará de la siguiente forma:

Si no colocas la imagen en la misma carpeta que la página, te saldrá algo como

esto:

CAPITULO 5: LAS TABLAS

37 Creación de páginas web con HTML

En este capítulo conoceremos los códigos y las formas de interpretarlos en el bloc
de notas para crear tablas en nuestra página web.

Para crear una tabla en la página web se muestra abajo los códigos necesarios
para ella:

<table>: Crea el inicio de la tabla en la página web

<tr>: Son las filas de la tabla, de arriba abajo.

<td>: Son las celdas de la tabla, lo escrito en cada celda.

ALINEACION Y ESTILO PARA LA TABLA

También podemos colocar un tamaño y color a la tabla, para ello, se usan los
modificadores siguientes:

Widht: Ancho, en porcentaje.

Border: Bordeado

Align: Alineado

Bgcolor: Color de fondo

También hay modificadores que sirven para combinar celdas, estas son:

Rowspan: Combinan celdas de abajo.

Colspan: Combinan celdas de la derecha.

Para colocar el estilo y alineación de la tabla, los modificadores deberán ser

colocados dentro del código <table>, ejemplo:

<table width = “50%” border = “2” align = “center” bgcolor = “#0099CC”>

EJEMPLO 1: CREANDO UNA TABLA

Para crear una tabla se realizan los siguientes pasos:

1.- En Bloc de notas crea los códigos principales y después el código de tabla con
sus respectivos modificadores.

2.- En lugar de colocar el código <p>, coloca el código <tr>. Si alineaste la tabla al
centro, entonces dentro de <tr> coloca align = “center”; ejemplo <tr align =
“center”>.

38 Creación de páginas web con HTML

3.- Después comienza a escribir lo que va a decir cada celda de la tabla.
Comienza a escribir con el código <td>, la frase de celda y por ultimo cierra con
</td>, luego abajo comienza de nuevo este paso para colocar la frase de la
siguiente celda de la derecha y cierra totalmente la fila con </tr>. NOTA: todo el
párrafo de <td> serán colocados en las celdas de izquierda a derecha.

4.- Si vas a combinar una celda con otra debajo de esta, entonces dentro de <td>
coloca el modificador rowspan y el número de celdas entre comillas que deseas
combinar, ejemplo <td rowspan = “2”>.

5.- Si vas a combinar una celda con otra a la derecha de esta, entonces dentro de
<td> coloca el modificador colspan y el número de celdas entre comillas que
deseas combinar, ejemplo <td colspan = “2”>.

La página web quedará de la siguiente forma:

39 Creación de páginas web con HTML

AGREGAR IMAGENES A LA TABLA

Para agregar imágenes a la tabla, lo que haremos es muy sencillo, solo creamos
una celda <td>, después colocamos el código para insertar imágenes como en el
capítulo anterior, después ponemos o no una frase o palabra y cerramos con
</td>. Ejemplo:

<td> <img src = “frijolito.jpg” alt “frijol” width “100” height “120”> Los
frijoles </td>

EJEMPLO 2:

La página quedará de la siguiente forma:

40 Creación de páginas web con HTML

 CAPITULO 6: MUSICA DE FONDO Y EN REPRODUCTOR

En este capítulo daremos a conocer los códigos y modificadores para colocar

una canción de fondo o con un reproductor.

41 Creación de páginas web con HTML

MUSICA DE FONDO

Para poner la música de fondo será necesario el siguiente código que se va a

mostrar:

<bgsound>

Y sus modificadores son:

Src: Siempre debe ir con cualquier canción y debe ir dentro de <bgsound>.

Loop: Son las veces que se va a repetir la canción.

EJEMPLO 1:

Primero colocaremos los códigos principales (<html>, <head>, <body>, etc).

Posteriormente debajo de <body>, se coloca el código de música de fondo con
sus modificadores de la siguiente orden: primero se va a colocar <bgsound,
luego el modificador src, seguido por el nombre de la canción y su extensión
entre comillas. Posteriormente se coloca el loop con el número de veces que va
a repetirse la canción. Si en loop coloca -1, significa infinito y la canción se
repetirá sin parar. Y por último se cierra con >.

<bgsound src = “sleep away.mp3” loop = “-1”>

En Bloc de notas se coloca el código de esta forma:

<html>
<head>
<title> Sleep Away </title>
</head>
<body>
<bgsound src = “sleep away.mp3” loop = “-1”>
</body>
</html>
Al abrir la página web se empezará a reproducir la música automáticamente.

MUSICA CON REPRODUCTOR

42 Creación de páginas web con HTML

Usted también puede reproducir la música, pausarla y recorrer rápidamente la
canción en la página web. Para que esto sea posible, será necesario el siguiente
código que a continuación se muestra:

<embed>

Sus modificadores son iguales al de la música de fondo, solo que con una más:

Autostart: Permite la interpretación del reproductor, es decir, que con esta

podemos reproducir la música manualmente.

En autostart y loop debemos colocar las opciones false o true (falso o

verdadero).

EJEMPLO 2:

Debajo del código body colocaremos el código <embed> de la siguiente orden:

empezamos con el código <embed, luego sus modificadores src seguido del
nombre de la canción y la extensión entre comillas. Posteriormente colocamos el
modificador autostart seguido por la palabra “false” entre comillas y por último el
modificador loop seguido de la palabra “true” entre comillas y cerramos con >.

<embed src = "kalimba.mp3" autostart = "false" loop = "true">

En Bloc de notas se acomodan los códigos de la siguiente forma:

<html>
<head>
<title> Sleep Away </title>
</head>
<body>
<embed src = "kalimba.mp3" autostart = "false" loop = "true">
</body>
</html>

La página web aparecerá de la siguiente forma:

43 Creación de páginas web con HTML

ETIQUETA <FLAME>

Los frames (marcos o cuadros) permiten dividir la ventana en varias más

pequeñas, de modo que en cada una de ellas se carga una página html distinta.
Las versiones más antiguas de los navegadores no tienen implementada esta
característica, por lo que no podrán verlos.

Los frames se declaran con la etiqueta <FRAMESET>, que debe ser colocada
antes de la etiqueta <BODY>. Si no se cumple este requisito, la etiqueta se
ignorará.

Un ejemplo sencillo es el siguiente:

<HTML>
<HEAD><TITLE> Título de la página </TITLE></HEAD>

<FRAMESET ROWS=75,*>

<FRAME SRC="frames1.htm" >

<FRAME SRC="frames2.htm" >

</FRAMESET>

<NOFRAMES>
<BODY>
Lo siento, su navegador no soporta frames.
Pulse <a href="frames1.htm>aquí </A>
para acceder a los contenidos de estas páginas.
</BODY>
</NOFRAMES>

44 Creación de páginas web con HTML

</HTML>

La página web aparecerá de la siguiente forma:

ESPACIO DE PRÁCTICAS
PRACTICA 1:

Crear una página web con las siguientes instrucciones:

45 Creación de páginas web con HTML

1.- Esta página tiene un fondo con imagen de un koala.
2.- El archivo se llama “Practica 1”.
3.- Contiene tres párrafos que usted desee escribir de 4, 3 y 2 líneas cada una.
4.- El texto es de un color que dé contraste con el fondo.

Código Bloc de notas:

Resultado página web:

46 Creación de páginas web con HTML

PRACTICA 2

Elabora una página web con las siguientes características:

- Fondo color claro

47 Creación de páginas web con HTML
 - Letra color verde brillante

- Márgenes superior 80 y 100 de izquierdo

- Con una lista de animales en español y en inglés

Código del Bloc de notas:

Resultado página web:

48 Creación de páginas web con HTML

PRACTICA 3

Con base a las instrucciones de abajo elabora una página web con barras de texto
o separadores

49 Creación de páginas web con HTML

El archivo se llama Practica 3. La página lleva el título de practica 3. Un título del
documento con formato y va a decir "El texto" en h1. Debe rebotar de lado a lado
entre dos barras. Poner un subtítulo o una sangría y dirá Formato de texto h2.
Colocar en sangría dos párrafos de tres líneas mínimo. Subtitulo con dos sangrías
que diga marcado de texto h3. Párrafo de tres líneas en negrita y palabras claves
subrayadas.

Código Bloc de notas:

<html>
<head>
<title> PR&AacuteCTICA 3 </title>
</head>
<h1>
<body bgcolor = "#00AB00">
<a href = "http:\\www.google.com"> visita al tío Google </a>
<pre>
<hr align = "center" width = "50%" size = "20" color = "#E49E56">

<p align = "center">

<font face = "arial" color = "red">
<marquee behavior = "alternate" direction = "left"> EL TEXTO </br>
</marquee>
</p>
</h1>

<hr align = "center" width = "50%" size = "20" color = "#E49E56">

<h2>
<p align = "left">
<font face = "arial" color = "red">
Formato de texto </br>
</font>
</p>
</h2>

<p align = "left">

<font face = "arial" color = "yellow">
El texto son aquellas palabras que sirven para </br>
Entender, saber, informar y hacer </br>

50 Creación de páginas web con HTML

 expresiones y reflexiones buenas </br>
</p>

<p align = "left">

Cabe decir que la comunicaci&oacuten </br>
se realiza entre dos o más personas: </br>
El emisor y el receptor. </br>
</p>

<h3>
<p align = "left">
<font face = "arial" color = "red">
Marcado de texto </br>
</font>
</p>
</h3>

<p align = "left">

<font face = "arial" color = "red">
<b>
El <u> HTML </u> es creado para información marcas de hipertextos. </br>
En Noviembre de 1995 se aprobó el estándar <u> HTML 2.0 </u> </br>
que estaba orientado a situaciones académicas. </br>
</b>
</font>
</p>
</pre>

</body>
</html>

Resultado página web

51 Creación de páginas web con HTML

PRACTICA 4

Crear una página con un índice de nombre Index y 5 páginas de prácticas ya

elaboradas solo modificando para colocarles hipervínculo en cada uno y en el
índice para que con un clic te lleven a la página correspondiente. Además
colócales una imagen a cada una de las páginas a excepción del Index.
52 Creación de páginas web con HTML
Código Bloc de notas:

Index:

Practica 1:

Tema 1:

53 Creación de páginas web con HTML

Resultados páginas web:

Index:

Practica 1:

54 Creación de páginas web con HTML

Tema 1:

PRACTICA 5

Elabora una tabla de la lista de animales de la Practica 2 con una imagen del
animal en cada uno de ellos.

Código Bloc de notas:

55 Creación de páginas web con HTML

<html>
<head>
<title> Practica 5 </title>
</head>
<body bgcolor = "#33CC33">

<p align = "center">

<font color = "Arial" color = "blue">
ANIMALES EN INGLES Y ESPAÑOL </br>
</p>

<table width = "60%" border = "2" align = "center">

<tr align = "center">
<td colspan = "3"> INGLES </td>
</tr>

<tr>
<td> <img src = "Pollito.jpg" alt = "Pollito chicken" width = "100" height = "110">
</td>
<td> Pollito </td>
<td> Chicken </td>
</tr>

<tr>
<td> <img src = "gallina.jpg" alt = "Gallina hen" width = "100" height = "110"> </td>
<td> Gallina </td>
<td> Hen </td>
</tr>

<tr>
<td> <img src = "caballo.jpg" alt = "Caballo horse" width = "100" height = "110">
</td>
<td> Caballo </td>
<td> Horse </td>
</tr>

<tr>
<td> <img src = "perro.jpg" alt = "Perro dog" width = "100" height = "110"> </td>
<td> Perro </td>
<td> Dog </td>
56 Creación de páginas web con HTML
</tr>

<tr>
<td> <img src = "gato.jpg" alt = "Gato cat" width = "100" height = "110"> </td>
<td> Gato </td>
<td> Cat </td>
</tr>

<tr>
<td> <img src = "Tigre.jpg" alt = "Tigre tiger" width = "100" height = "110"> </td>
<td> Tigre </td>
<td> Tiger </td>
</tr>

<tr>
<td> <img src = "leon.jpg" alt = "Leon lion" width = "100" height = "110"> </td>
<td> Leon </td>
<td> Lion </td>
</tr>

<tr>
<td> <img src = "mono.jpg" alt = "Mono monkey" width = "100" height = "110">
</td>
<td> Mono </td>
<td> Monkey </td>
</tr>

<tr>
<td> <img src = "burro.jpg" alt = "Burro donkey" width = "100" height = "110"> </td>
<td> Burro </td>
<td> Donkey </td>
</tr>

<tr>
<td> <img src = "lagartija.jpg" alt = "Lagartija lizard" width = "100" height = "110">
</td>
<td> Lagartija </td>
<td> Lizard </td>
</tr>

57 Creación de páginas web con HTML

<tr>
<td> <img src = "melon.jpg" alt = "melon" width = "100" height = "110"> </td>
<td> Melon </td>
<td> Melon </td>
</tr>

<tr>
<td> <img src = "uva.jpg" alt = "Uva grape" width = "100" height = "110"> </td>
<td> Uva </td>
<td> Grape </td>
</tr>

<tr>
<td> <img src = "sandia.jpg" alt = "Sandia watermelon" width = "100" height =
"110"> </td>
<td> Sandia </td>
<td> Watermelon </td>
</tr>
Resultados página web:

CONCLUSIONES

Mucha gente se ha preguntado de cómo se generan las páginas web que a diario
surgen millones de ella. La respuesta es simple, se generan a través de
programas que facilitan su creación y diseño, y automáticamente generan los
códigos correspondientes. Pero, desafortunadamente, los programas ocupan

58 Creación de páginas web con HTML

espacio en disco duro, tienen infinidad de funciones y muchos de los programas
buenos para creación de páginas web no vienen gratuitos.

Pero también tenemos una ventaja para poder crear páginas web. El Bloc de
notas también puede crear páginas web, con fáciles, divertidos y rápidos códigos y
modificadores dando buen diseño a tu página como si hubiese creado en un
programa de gran extensión, pero en realidad fue creado en el Bloc de notas de su
sistema operativo.

Cabe decir que el Bloc de notas no solo se encierra en códigos, comandos o notas
simples, sino también es capaz de dar diseño, poner estilo y resaltado de texto en
una página web, pero son creados con la extensión .HTML.

En este libro comprobamos que también es posible llegar a grandes cosas con el
simple Bloc de notas de forma divertida y agradable, con códigos nada complejos
como otros programas, pero también con igual diseño que un programa de
creación de páginas web.

BIBLIOGRAFIA:

Libros:

Ibabe Erostarbe, Izaskun, Cómo crear una web docente de calidad, Editorial
Netbiblo, 2005.
59 Creación de páginas web con HTML
Hobbs, Lilian, Diseñar su propia página web, Editorial Marcombo, 1999.

Internet:

HTML: http://es.wikipedia.org/wiki/HTML

Navegador web: http://es.wikipedia.org/wiki/Navegador_web

Listado de colores hexadecimales:

http://www.disfrutalasmatematicas.com/numeros/hexadecimales-colores-
nombres.html

Tabla de caracteres adicionales: http://www.virtualnauta.com/html-caracteres-

especiales

Etiqueta <frame>: http://platea.pntic.mec.es/~abercian/guiahtml/frames.htm

Imagen de ejemplo etiqueta <frame>: mmc.geofisica.unam.mx

60 Creación de páginas web con HTML