HTML 4.0

INTRODUCCIÓN A HTML 4.
prof. carlos montiel rentería

Mayo 2021
Desarrolló: Prof. Carlos Montiel Rentería Correo: prof_montiel@hotmail.com 1

Contenido
Sesión #1 - Introducción a HTML ...............................................................................................................4
Qué es el HTML ......................................................................................................................................................... 6
Los navegadores. Compatibilidad ..................................................................................................................... 7
Editores ........................................................................................................................................................................ 7
Etiquetas ................................................................................................................................................................... 10
Sesión 2 - Introducción a HTML................................................................................................................15
Estructura de una página ................................................................................................................................... 15
Identificador del tipo de documento <HTML> .............................................................................................. 15
Cabecera de la página <HEAD> ..................................................................................................................... 15
Título de la página <TITLE>................................................................................................................................... 16
Cuerpo del documento <BODY> ..................................................................................................................... 16
Sesión #3 - Introducción a HTML .............................................................................................................18
Caracteres especiales y espacios en blanco ............................................................................................... 18
Comentarios ............................................................................................................................................................ 19
Saltos de línea <BR> .............................................................................................................................................. 19
Separadores <HR> ................................................................................................................................................. 20
Formato de texto ................................................................................................................................................... 21
Resaltado del texto <B> ....................................................................................................................................... 22
Párrafos <P> ............................................................................................................................................................. 23
Encabezados <H1> ............................................................................................................................................... 23
Marquesinas <MARQUEE> ................................................................................................................................... 24
Listas Ordenadas y no ordenadas (OL, UL) .................................................................................................... 25
Hiperenlaces (1) ..................................................................................................................................................... 28
Tipos de referencias .............................................................................................................................................. 28
Hiperenlaces (2) - Destino del enlace ............................................................................................................. 30
Vínculos de correo electrónico ......................................................................................................................... 31
Vínculos a Archivos para descargar ................................................................................................................ 31
Imágenes (1) ........................................................................................................................................................... 33
Texto alternativo..................................................................................................................................................... 33
Borde de una imagen .......................................................................................................................................... 34
Imágenes (2) - Imágenes con hipervínculo ................................................................................................... 35
Tamaño de una imagen...................................................................................................................................... 35
Alineación de una imagen ................................................................................................................................. 36
Sesión 10 - Introducción a HTML..............................................................................................................37
Tablas (1) .................................................................................................................................................................. 37
Fila <TR> .................................................................................................................................................................... 37
Columna o celda <TD> ........................................................................................................................................ 38
Tablas (2) - Formato de la tabla ........................................................................................................................ 39
Formato de las celdas .......................................................................................................................................... 40
Tablas (3) – Atributos especiales ....................................................................................................................... 42
Frames (Marcos, -en español-) .......................................................................................................................... 47
Creando nuestro primer Frame ......................................................................................................................... 48
Frame con división horizontal ............................................................................................................................. 49
Frame con división vertical ................................................................................................................................. 50
Frame combinado ................................................................................................................................................ 50
Música de fondo .................................................................................................................................................... 56
Música ....................................................................................................................................................................... 56
Vídeo ......................................................................................................................................................................... 56

Sesión #1 - Introducción a HTML
A lo largo de estas prácticas vas a conocer los conceptos básicos sobre HTML versión 4.0 (fecha
de liberación 18 de diciembre de 1997), y cómo se utiliza para crear páginas web. Por cuestiones
del programa de estudios vigente, te enseñaremos una versión obsoleta, ya que la versión de
HTML vigente es la 5 (se liberó el 28 de octubre de 2014).
Antes de iniciar existe una acción que deseo que todos ustedes realicen (obligatorio): ACTIVAR LAS
TRES OPCIONES del grupo Mostrar u Ocultar de la Ficha Vista del explorador de Windows, deberán
mostrarse como se muestra enseguida:
Esta acción te permitirá observar las extensiones de los archivos que se muestran en el Explorador
de Windows, aspecto muy importante para identificar correctamente a los archivos, así como
también podrás “observar” los archivos ocultos (color tenue).
Se presento en clase (sesión Zoom), que algunos alumnos nunca hallaron la Ficha Vista, y esto se
debió a que poseen un Windows muy viejo, así que lo que deben de hacer estos jóvenes es
localizar en su Explorador de Windows (viejito) el menú “Herramientas” el cuál mostrará varias
opciones, de las cuales deben de elegir “Opciones de carpeta”, tal como se muestra enseguida:
Debiendo de aparecer la siguiente ventana:

De esta ventana debes de localizar a la cejilla “Ver”, y dar clic sobre ella, mostrándose enseguida
las opciones que tendrás que modificar, la cual se las repetiré para que aseguren habilitar las
mismas opciones:

Al indagar esta información, recordé que en su momento les dije a los alumnos, que era inaudito
que el mismo Windows me ocultara los archivos de MI COMPUTADORA, así que todo lo que diga
Mostrar se debe de habilitar, excepto la opción “Mostrar siempre iconos, nunca vistas en
miniatura”, y obvio deshabilitar las opciones Ocultar, y listo, al final sólo deberán de oprimir los
botones: “Aplicar” y después “Aceptar”
Qué es el HTML
El HTML (Hyper Text Markup Language) es el lenguaje con el que se escriben las páginas web. Es
un lenguaje de hipertexto, es decir, un lenguaje que permite escribir texto de forma estructurada,
y que está compuesto por etiquetas, que marcan el inicio y el fin de cada elemento del
documento.
Un documento hipertexto no sólo se compone de texto, puede contener imágenes, sonido,
vídeos, etc., por lo que el resultado puede considerarse como un documento multimedia.
Los documentos HTML deben tener la extensión HTML o htm, para que puedan ser visualizados en
los navegadores (programas que permiten visualizar las páginas web).
Los navegadores se encargan de interpretar el código HTML de los documentos, y de mostrar a
los usuarios las páginas web resultantes del código interpretado.

Los navegadores. Compatibilidad
Los navegadores de hoy en día han dejado de ser compatibles con HTML versión 4.0. El
navegador fiel al 100% de HTML 4.0 es Internet Explorer versión 11(o 20H2), software que sigue
permaneciendo en la última versión de Windows 10.
En caso de que tu Windows carezca de Internet Explorer 11 (o 20H2), accede a la siguiente liga:
https://www.microsoft.com/es-es/download/confirmation.aspx?id=41628
descarga de acuerdo con el Windows que posea tu computadora.
El resto de los navegadores se han ido actualizando y son super confiables para el manejo de HTML
versión 5 que es la actual, así que durante el curso emplearemos dos navegadores principalmente:
Internet Explorer y Google Chrome. Tenemos amplia confianza que en la próxima revisión de
programas de estudios que se lleve a cabo en el I.P.N., podamos enseñar: Programación, Excel
con programación (VBA) y HTML versión 5, en los dos semestres de la Asignatura de Computación,
ya sucedió en el año 2016, y fue todo un éxito, los resultados obtenidos avalan lo que digo, la
programación permite que el estudiante PIENSE, REFLEXIONE y ACTÚE a partir de las conjeturas que
construye para dar solución a “equis” problemática, en fin seré paciente.
Editores
Un editor es un programa que te permite redactar documentos. Es aconsejable comenzar
utilizando una herramienta lo más sencilla posible, para tener que insertar nosotros mismos el
código HTML. Esto permite familiarizarse con el lenguaje, para poder utilizar algún editor visual
posteriormente, y depurar el código cuando fuera necesario.
Para crear páginas web escribiendo directamente el código HTML deberás de utilizar la
herramienta del Bloc de notas que proporciona Windows.

Deberás crear una carpeta, que tenga como nombre ‘HTML’. Dentro de esta, irás guardando
todas las páginas web que vayamos realizando durante nuestras sesiones.
Acceder al Bloc de Notas y crear un acceso directo en la barra de tareas
Colócate en la caja de búsqueda de Windows 10 (parte inferior izquierda del escritorio de

Windows 10), y teclea:
Ahora da clic derecho sobre el texto “Bloc de notas” del panel de la izquierda, tal como se observa
enseguida:
Y elige la opción “Anclar a la barra de tareas”, y se colocará un ícono de acceso directo al

programa “Bloc de Notas” sobre la barra de tareas (parte inferior del escritorio de Windows).
Usuarios MAC
Por desgracia, a estas alturas del partido seguramente ya te disté cuenta que predomina el uso
de Windows en nuestra asignatura, sin embargo, si no tienes de otra y posees una computadora
MAC, accede la siguiente liga para que aprendas como diablos crear una página Web:
https://tecnonautas.net/aprende-a-editar-HTML-usando-textedit-en-tu-mac/
y el vídeo en YouTube: https://youtu.be/QpdLnN9OMQw

Sé de antemano, que en la MAC existen convertidores de información creada en las Mac’s a
Windows, sin embargo, aparentemente no es muy confiable este proceso, pero se pueden hacer
pruebas, envíenme sus archivos de páginas Web lo antes posible y ya veremos, si dichos
convertidores funcionan.
Para los alumnos que no encuentran el “Bloc de Notas” (notepad.exe, en inglés), deberán de
localizarlo en la carpeta “System32” que se encuentra en la carpeta “Windows” y la cual la hallarás
a partir de la raíz principal “Disco local(C:)” dentro del Explorador de Windows, tal como se observa
en la siguiente imagen:
Ya que lo hayas localizado dale clic derecho para que aparezca el menú contextual y elige la
opción “Enviar”, en seguida deberá de aparecer una segunda ventana, de la cual elige la opción:
“Escritorio (crear acceso directo)”, y finalmente en el escritorio tendrán un acceso directo que les
permitirá tener acceso al bendito Bloc de Notas, observa la siguiente imagen del escritorio donde
ya se encuentra el acceso directo previamente creado:

Etiquetas
Las etiquetas o marcas delimitan cada uno de los elementos que componen un documento
HTML. Existen dos tipos de etiquetas: la de comienzo de elemento y la de fin o cierre de elemento.
La etiqueta de comienzo está delimitada por los caracteres < y > (“menor que” y “mayor que”).
Está compuesta por el identificador o nombre de la etiqueta, y puede contener una serie de
atributos opcionales que permiten añadir ciertas propiedades. La sintaxis de una etiqueta es:
<identificador atributo1 atributo2 ...>
Etiqueta de comienzo.................................... <etiqueta>

Etiqueta de cierre.......................................... </etiqueta>
Cada uno de los elementos de la página se encontrará entre una etiqueta de comienzo y su
correspondiente etiqueta de cierre, a excepción de algunos elementos que no necesitan
etiqueta de cierre. También es posible anidar etiquetas, es decir, insertar etiquetas entre otras
etiquetas de comienzo y de cierre.
Para que te vayas haciendo una idea de cómo crear una página HTML a través del Bloc de
Notas, vamos a crear una página Web sencilla, con una línea de texto:
Mi primer página, realizando pruebas…
Lo primero que deberás de hacer es acceder al Bloc de Notas, y enseguida captura el siguiente
código, en el documento en blanco:

Después, realiza las siguientes acciones:
Guarda el documento en la carpeta HTML que has creado antes, con el nombre
miprimerpagina.HTML, para guardar una página accede al menú Archivo>Guardar. A
continuación, selecciona en Tipo “Todos los archivos (*.*)” y luego oprime “Guardar”.
Ahora, tu carpeta “HTML” debe mostrarse como sigue:
Observa muy bien, nuestro archivo “miprimerpagina.HTML”, adquiere el ícono del navegador
que tengamos como “principal”, en mi caso tengo declarado “Internet Explorer (versión 11)”
como navegador predilecto, en tu caso podría ser “Google Chrome”, “Foxfire” de Mozilla, u otro.
Como cambiar el navegador de omisión.
Si deseas cambiar de navegador “predilecto”, por ejemplo, supongamos que la página Web
“miprimerpagina.HTML” aparezca con el ícono de Google Chrome y deseamos cambiar el ícono
por el del navegador Internet Explorer (versión 11), entonces haz clic derecho encima del ícono
de Google Chrome y deberá de aparecer un menú contextual, tal como se aprecia enseguida:
Del menú contextual, elige la opción “Propiedades”, debiendo de aparecer la siguiente ventana:
En la ventana “Propiedades miprimerpagina.HTML”,

haz clic sobre el botón “Cambiar”, debiendo de
aparecer una pequeña ventana donde podrás elegir
el navegador de tu preferencia, es decir, en nuestro
caso: “Internet Explorer”, observa la imagen de abajo

En caso de que no encuentres al programa Internet
Explorer 11, puede ser que no lo tengas instalado y
tendrás que “bajarlo” de la nube (Internet), y dar clic
sobre el texto “Más aplicaciones ↓”, y buscarlo en la
carpeta donde se haya instalado, eso significa que
cuando lo vayas a instalar (si es el caso), toma nota donde diablos lo está instalando, es decir la
ubicación de la carpeta donde ha sido instalado, y así será más fácil localizarlo cuando uses la
opción “Más aplicaciones ↓”.
En caso de que no lo tengas instalado, te recomiendo bajarlo y la liga es:
https://www.microsoft.com/es-es/download/confirmation.aspx?id=41628
Recuerda, empleare Internet Explorer (versión 11) a lo largo de estos apuntes.

Bien, continuamos, así que haz clic dos veces sobre el icono del archivo miprimerpagina.HTML,
éste debería abrirse automáticamente en el navegador que tengas instalado en tu
computadora (el definido como predilecto), el navegador deberá mostrar una página como la
que se muestra enseguida:
Como puedes ver, la página resultante es una página que solamente tiene una línea de texto.
Si observas la barra de título del navegador, verás que el título de la página es “Mi primer
pÃ¡gina”. Este título ha sido establecido por la línea <TITLE>Mi primer página</TITTLE>.
Como ya te habrás dado cuenta, las vocales acentuadas, las ignora el navegador, para
remediar este asunto del idioma, se tienen dos formas de indicarle al navegador que interprete
en idioma español, así que la primera forma es emplear la etiqueta HTML con su atributo
LANGUAGE (lenguaje en español), tal como sigue:
<HTML lang=es>

Y la otra forma, es agregar la etiqueta META con su atributo CHARSET, dentro de la etiqueta HEAD,
tal como sigue:
<META CHARSET=utf-8>
Generalmente, una de las dos formas será válida, dependiendo de la versión del navegador, o
también de la versión de Windows, así que prueba ambas y alguna te dará buen resultado. En
mi caso me funcionó la 2ª. Forma:
El color de fondo de la página ha sido establecido por la línea <BODY BGCOLOR=BLUE>.

El texto Hola, estoy haciendo pruebas. Lo observamos como tal, gracias a la etiqueta: <FONT
COLOR=WHITE SIZE=10>Hola, estoy haciendo pruebas. </FONT>.
Crea otra nueva página Web con el nombre “segunda.HTML” pero esta vez que el título sea
SEGUNDA PÁGINA, el texto sea Sigo practicando y el color de fondo el #CCCCCC (es un valor
hexadecimal, que también nos permite definir un color).

Sesión 2 - Introducción a HTML
Estructura de una página
La estructura básica de una página es:
<HTML>
<HEAD>
:
</HEAD>
:
<BODY>
:
</BODY>
</HTML>
Ahora veamos cómo funcionan estas etiquetas:
Identificador del tipo de documento <HTML>
Todas las páginas Web escritas en HTML deben tener la extensión HTML. Al mismo tiempo, deben
tener las etiquetas <HTML> y </HTML>.
Entre las etiquetas <HTML> y </HTML> estará comprendido el resto del código HTML de la página.
Por ejemplo:
<HTML>
:
:
</HTML>
Cabecera de la página <HEAD>

La cabecera de la página se utiliza para agrupar información sobre ella, como puede ser el título.
Está formada por las etiquetas <HEAD> y </HEAD>. La etiqueta <HEAD> va justo debajo de la
etiqueta <HTML>. Por ejemplo:
<HTML>
<HEAD>
:
:
</HEAD>
:
:
</HTML>
Entre las etiquetas <HEAD> y </HEAD>, las etiquetas que podemos encontrar y más se utilizan son:
<LINNK>, <STYLE>, <SCRIPT>, <META> y <TITLE> que es la que se explica a continuación.

Título de la página <TITLE>
El título de la página es el que aparecerá en la parte superior de la ventana del navegador,
cuando la página esté cargada en él.
Para asignar un título a una página es necesario escribir el texto deseado entre las etiquetas <TITLE>
y </TITLE>.
Estas etiquetas han de estar dentro de la cabecera, es decir, entre las etiquetas <HEAD> y </HEAD>.
Por ejemplo:
<HTML>
<HEAD>
<TITLE> Prácticas de HTML </TITLE>
</HEAD>
:
</HTML>
Crea una página web con la estructura básica vista anteriormente que tenga como título
“Página web de ‘tus apellidos y tu nombre(s)’”. Guárdala con el nombre “mititulo.html”, y
además añade el texto Mis aficiones favoritas son, y en el siguiente renglón coloca la lista
de cuando menos cuatro aficiones (con tamaño de texto de 5, y colores los que gustes),
además para pedirle al navegador que salte de renglón deberás de usar la etiqueta <BR>
(significa Line Break), o si deseas saltar y dejar un renglón en blanco, entonces deberás de
usar la pareja de etiquetas: <BR><P>, donde <P> es la etiqueta párrafo.
Cuerpo del documento <BODY>
El cuerpo del documento contiene la información propia del documento, es decir lo que queremos
que se visualice: el texto de la página, las imágenes, los formularios, la música, los vídeos, a todo
esto se le conoce como MULTIMEDIA.
Todos estos elementos tienen que encontrarse entre las etiquetas <BODY> y </BODY>, que van justo
debajo de la cabecera.
A través de la etiqueta <BODY> es posible establecer el color o la imagen de fondo de la página.
El color de fondo puede establecerse a través del atributo BGCOLOR, al que es posible asignarle
un color representado en hexadecimal o por un nombre predefinido.
Por ejemplo, para hacer que el color de fondo de una página sea de color azul, tendremos que
escribir:
:
<BODY BGCOLOR=#0000FF>
:
</BODY></HTML>
El valor hexadecimal #0000FF representa el color azul.

La imagen de fondo puede establecerse a través del atributo BACKGROUND, indicando la ruta en
la que se encuentra la imagen.
Por ejemplo, para hacer que la imagen de fondo de una página sea la imagen niños.jpg, que
se encuentra en la misma carpeta que se encuentra guardada la página, tendremos que
escribir:
:
<BODY BACKGROUND=niños.jpg>
:
</BODY>
</HTML>
En el caso de que la imagen no se encuentre en la misma carpeta que la página, y se encuentre

dentro de la carpeta imagenes, siempre y cuando esta se encuentre en la misma carpeta que la
página, tendremos que escribir:
:
<BODY BACKGROUND=imagenes/niños.jpg>
:
</BODY>
</HTML>
Crea una carpeta llamada IMAGENES dentro de la carpeta HTML y coloca ahí la imagen
‘niños.jpg’ que he compartido en Classroom.
A continuación, crea una página web con la estructura básica vista anteriormente que tenga
como título ‘Web con imagen de fondo’ y como imagen de fondo la que acabas de colocar en
la carpeta imagenes. Guárdala con el nombre “imagenfondo.html”.
A través de la etiqueta <BODY> también es posible establecer el color del texto de la página a
través del atributo TEXT.
Por ejemplo, para hacer que el color del texto de una página sea de color rojo, tendremos que
escribir:
:
<BODY TEXT=#FF0000>
:
</BODY>
</HTML>
Que sería equivalente a poner el valor predefinido: RED
Crea una página web con la estructura básica vista anteriormente que tenga como título ‘Texto de
colores’ y con el texto “Hola mundo” en color azul. Guárdala con el nombre “textocolores.html”.

Sesión #3 - Introducción a HTML
En estas prácticas vamos a aprender a cambiar las propiedades del texto, así como a insertar
caracteres especiales o separadores.
Caracteres especiales y espacios en blanco

Existen una serie de caracteres que no se visualizan correctamente en algunos navegadores,
como es el caso de la ñ y las vocales acentuadas, por lo que habría que escribir el nombre que
los representa.
A continuación, se muestra una lista con algunos caracteres y el nombre con el que han de ser
representados:
Carácter Representación Carácter Representación
< < > >
á á Á Á
é é É É
í í Í Í
ó ó Ó Ó
ú ú Ú Ú
ñ ñ Ñ Ñ
© © ® ®
÷ ÷ × ×
± ±
√ √ ≤ &le
≥ ≥ ∞ ∞
& & n/m &fracnm
(*) La representación “&fracnm”, la “n” representa el numerador, y la “m” al denominador” de la

fracción que se desea representar en HTML, por ejemplo, la representación &frac27, el carácter
2/7. Hay que tener en cuenta que si se escriben varios espacios en blanco seguidos, solamente
se mostrará uno en el navegador. Para conseguir que se muestren varios espacios en blanco
seguidos puede sustituirse cada uno de ellos por
Por ejemplo, para insertar el texto:
¡Bienvenidos, esta es mi 1a página!
Habría que escribir:
<b>¡Bienvenidos, esta es mi 1<sup>a</sup> página!</b>
Otro ejemplo:
El símbolo que representa el agua es H2O
El símbolo que representa el agua es <B>H<SUB>2</SUB>O</B>
Como habrás observado, el superíndice (para colocar como exponente) es la etiqueta <SUP>, y
para el subíndice se emplea la etiqueta <SUB>.
Crea una página web con la estructura básica ya vista que tenga como título ‘Probando los
caracteres especiales’ y en el navegador deberá aparecer el siguiente texto en color naranja:
Fórmula para resolver ecuaciones cuadráticas:
x = (-b ±√(b2 – 4ac))/(2a)
Deberás escribir los correspondientes códigos para que aparezca tal cual está aquí. Cuando
acabes guárdala en la carpeta habitual con el nombre “caracteresespeciales.html”.
Comentarios
En ocasiones podemos desear añadir comentarios aclaratorios dentro del código, de manera
que no sean visualizados en el navegador, pero sí a la hora de editar el documento.
Para insertar comentarios dentro del código, basta con insertar el texto entre 
Todo el código que se inserte entre estos símbolos no será visualizado en los navegadores. Por
ejemplo, para insertar el texto siguiente como un comentario:
Si deseamos escribir:
La etiqueta META permite indicar al navegador que el lenguaje es español
Habría que escribir en HTML:

:
<META CHARSET=utf-8> 
:
Crea una página web con la estructura básica ya vista que tenga como título ‘Insertando
comentarios’, un comentario aclaratorio donde ponga: “Los comentarios sirven para que el
código quede mucho más claro” y como texto que ponga:
“Aprendiendo a crear páginas con acentos: á é í ó ú”

Deberás escribir los correspondientes códigos para que aparezca tal cual está aquí. Cuando
acabes guárdala con el nombre “comentarios.html”
Saltos de línea <BR>

Si oprimimos INTRO en un documento HTML, el salto de línea se producirá en el código, pero no se
mostrará en el navegador. Para que se produzca el salto de línea en el navegador, en lugar de
oprimir la tecla INTRO hay que insertar la etiqueta <BR> donde se desee que se produzca el salto.
La etiqueta <BR> no requiere de etiqueta de cierre. No hay que insertar la etiqueta </BR> después
de ella, ya que dicha etiqueta no existe.
Queridos usuarios,
tengo el placer de comunicarles que hay una nueva sección.

Queridos usuarios, <BR>tengo el placer de comunicarles que hay una nueva sección.
Crea una página web con la estructura básica ya vista que tenga como título ‘Insertando
saltos de línea’, color de fondo amarillo y como texto que ponga:
Primera línea
Segunda línea
Tercera línea
Cuarta línea
Cuando acabes guárdala con el nombre “saltosdelinea.html”
Separadores <HR>
El elemento que suele utilizarse para separar secciones dentro de una misma página es la regla
horizontal. Para insertar una regla horizontal hay que insertar la etiqueta <HR>. Dicha etiqueta no
precisa ninguna etiqueta de cierre.
Es posible especificar algunos atributos de la regla horizontal:
Atributo Significado Posibles valores

left (izquierda)
alineación de la regla
align right (derecha)
dentro de la página
center (centro)
un número, acompañado de % cuando se desee
width ancho de la regla
que sea en porcentaje
size alto de la regla un número
Por ejemplo, para insertar el texto y la regla horizontal siguientes:

Inicio
Bienvenidos a mi página.
Habría que escribir en el body:
Inicio<HR align=left width=70% size=5 noshade>Bienvenidos a mi página.
Crea una página web con la estructura básica que acabamos de ver y que tenga como título
‘Barras de separación’, y texto en color verde que ponga:
Primera sección
(regla horizontal)
Segunda sección
(regla horizontal)
Tercera sección
Cuando acabes guárdala con el nombre “separadores.html”.

Formato de texto
Las propiedades del texto pueden modificarse a través de la etiqueta <FONT>. Para ello, podemos
insertar el texto entre las etiquetas <FONT> y </FONT>, especificando algunos de los atributos de
la etiqueta:

FACE fuente nombre de la fuente
COLOR color del texto número hexadecimal o texto predefinido
valores del 1 al 7, siendo por defecto el 3,
SIZE tamaño del texto o desplazamiento respecto al tamaño por defecto,
añadiendo + o - delante del valor
Por ejemplo, para insertar el texto: Bienvenidos a mi página web
<FONT COLOR="#993366" SIZE="4" FACE="Comic Sans MS, Arial, MS Sans Serif">Bienvenidos a mi

página web</FONT>
También es posible definir una fuente para todo el documento. Para ello, hay que insertar la
etiqueta <BASEFOT> después de la etiqueta <BODY>.
La etiqueta <BASEFONT> no necesita una etiqueta de cierre, y permite modificar los mismos
atributos del texto que la etiqueta <FONT>.
Por ejemplo:
<BODY>
<BASEFONT COLOR="#006699" SIZE="4" FACE="Arial">
...
Este código haría que la fuente del documento fuera por defecto de color azul, de tamaño 4 y
Arial. Si después de indicar la etiqueta <BASEFONT> o <FONT>, el navegador encuentra otra
etiqueta <FONT>, la que prevalece es siempre la última que se encuentra.
Crea una página web con la estructura básica ya vista que tenga como título ‘Letra Times New
Roman’ y en el navegador deberá aparecer el siguiente texto con la fuente Times New Roman y
tamaño 6:
Fundamentos de Windows
Perfeccione sus habilidades en Windows y aprenda otras nuevas.
Ya sea un usuario principiante o avanzado, seguro que esta sección le resultará muy
interesante. Contiene mucha información útil y fácil de entender, además de instrucciones
claras y detalladas.
Cuando acabes guárdala en la carpeta habitual con el nombre “letratimes.html”

Resaltado del texto <B>
Existen una serie de etiquetas que permiten aplicar diferentes estilos al texto que se encuentra
entre ellas, y generalmente se utilizan para resaltarlo. No hay que olvidar que todas estas etiquetas
necesitan una etiqueta de cierre, y que pueden aplicarse varias etiquetas al mismo texto.
A continuación se muestran algunas etiquetas asociadas al tipo de letra:
Etiqueta Significado Ejemplo

<B> Negrita curso HTML
<I> Cursiva curso HTML
<U> Subrayado curso HTML
<S> Tachado curso HTML
<BIG> aumenta el tamaño de la fuente curso HTML
<SMALL> disminuye el tamaño de la fuente curso HTML
A continuación se muestran algunas etiquetas asociadas al tipo de información:
Etiqueta Significado Ejemplo

<STRONG> Destacado curso HTML prof. Montiel
<SUB> Subíndice curso HTML prof. Montiel
<SUP> Superíndice curso HTML prof. Montiel
Bienvenidos a www.google.com

<FONT COLOR="#993366" SIZE="4" FACE="Comic Sans MS, Arial, MS Sans Serif">Bienvenidos a
<B><U>www.google.com</U></B></FONT>
Modifica la página web del ejercicio anterior (letratimes.html) y añade las etiquetas necesarias
para hacer que el texto quede de esta forma:
Fundamentos de Windows
Perfeccione sus habilidades en Windows y aprenda otras nuevas.
Ya sea un usuario principiante o avanzado, seguro que esta sección le resultará muy
interesante. Contiene mucha información útil y fácil de entender, además de instrucciones
claras y detalladas.”
Cuando acabes guárdala en la carpeta habitual con el nombre “resaltadoletras.html”.

Párrafos <P>
El texto de una página puede agruparse en párrafos. Para ello, el texto de cada uno de los párrafos
debe insertarse entre las etiquetas <P> y </P>.
No es necesario insertar la etiqueta <BR> para que un nuevo párrafo aparezca debajo del anterior,
ya que las etiquetas <P> y </P> hacen que se cambie de línea automáticamente.
También es posible cambiar la alineación del texto de cada párrafo. Para ello se modifica el valor
del atributo ALIGN, cuyos valores pueden ser LEFT (izquierda), RIGHT (derecha), CENTER (centrado)
o JUSTIFY (justificado).
Otra forma de cambiar la alineación del texto es mediante las etiquetas <DIV> y </DIV>, para las
que también existe el atributo ALIGN. La etiqueta <DIV>, al igual que la etiqueta <P>, se utiliza para
agrupar bloques de texto, pero con la diferencia de que la separación entre ellos es menor.
Bienvenidos a mi página.
Aquí encontrarás cursos de formación muy interesantes.
<DIV ALIGN=CENTER>Bienvenidos a mi página.</DIV> <DIV>Aquí

encontrarás cursos de formaci&oacuten muy interesantes. </DIV>
Crea una página web con título “Alineación del texto”, con fondo de color azul y que contenga
este texto con esta forma y en color naranja:
También puede seleccionar un Ayudante
diferente
Por ejemplo, si prefiere utilizar el teclado en vez del mouse

(ratón), puede hacer que el Ayudante muestre las
sugerencias en teclas de método abreviado.
Todos los programas de Office comparten el mismo Ayudante,

de forma que si se cambia alguna opción, afectará al
Ayudante de todos los programas de Office.
Cuando acabes guárdala en la carpeta habitual con el nombre “alineaciones.html”
Encabezados <H1>
Existen una serie de encabezados que suelen utilizarse para establecer títulos dentro de una
página. La diferencia entre los distintos tipos de encabezado es el tamaño de la letra, el tipo de
resaltado, y la separación existente entre el texto y los elementos que tiene encima y debajo de
él.
Existen seis etiquetas que representan seis tipos de cabeceras distintas. Todas estas etiquetas
precisan una etiqueta de cierre.
A continuación se muestran los distintos encabezados existentes:

Para todas estas etiquetas es posible especificar el valor del atributo ALIGN.
El lenguaje HTML
<H2 ALIGN="CENTER">El lenguaje HTML</H2><H4>Apartado 1: Las etiquetas</H4>
Crea una página web con título “Encabezados diferentes” y que contenga este texto con esta
forma y en color verde:
También puede seleccionar un Ayudante diferente. (H1)
Por ejemplo, si prefiere utilizar el teclado en vez del mouse (ratón), puede hacer que el
Ayudante muestre las sugerencias en teclas de método abreviado. (H5)
Todos los programas de Office comparten el mismo Ayudante, de forma

que si se cambia alguna opción, afectará al Ayudante de todos los
programas de Office. (H3)
Cuando acabes guárdala en la carpeta habitual con el nombre “encabezados.html”
Marquesinas <MARQUEE>
Las marquesinas son líneas de texto que pueden desplazarse de un lado a otro de la ventana en
forma de línea.
Para insertar una marquesina, es necesario insertar el texto entre las etiquetas <MARQUEE> y
</MARQUEE>.
La marquesina, por defecto, se desplaza de derecha a izquierda indefinidamente, pero si lo deseas
puedes hacer que estas propiedades varíen.
A través del atributo BEHAVIOR puede modificarse el tipo de movimiento. Puede tomar los valores
ALTERNATE (de lado a lado de la ventana, como si rebotara en los extremos), SCROLL (de un lado
a otro, continuamente) o SLIDE (de un lado a otro, pero una sola vez).
A través del atributo DIRECTION puede modificarse la dirección en la que se moverá el texto.
Puede tomar los valores DOWN (de arriba a abajo), UP (de abajo a arriba), RIGHT (de derecha a
izquierda) o LEFT (de izquierda a derecha).
También es posible establecer un color de fondo, a través del atributo BGCOLOR.
Por ejemplo, para insertar la siguiente marquesina:

<MARQUEE BGCOLOR=#006699 BEHAVIOR=ALTERNATE DIRECTION=RIGHT>
<B><FONT COLOR=#FFFFCC SIZE=5>Esto es una marquesina</FONT></B>
</MARQUEE>
También es posible insertar imágenes, tablas y otros elementos entre las etiquetas <MARQUEE> y
</MARQUEE>, no solamente texto.
Crea una página web con título “Creación de marquesinas”, que contenga este texto con
tamaño 3 y en color verde, con dirección del texto hacia la izquierda:
Cuando acabes guárdala en la carpeta habitual con el nombre “marquesina.html”
Listas Ordenadas y no ordenadas (OL, UL)

En la mayoría de los documentos HTML se usan listas para organizar el texto. El lenguaje HTML
incorpora distintas formas de mostrar listas, por ejemplo con viñetas sencillas o también con letras
o números.
Listas Ordenadas (OL), permite crear listas con números ascendentes, ya sea arábigos o romanos,
con letras en orden alfabético, captura el siguiente código fuente en el bloc de notas, llámale al
archivo: LISTAS.HTML y verifica con la muestra que se exhibe a un lado.
Código fuente ASÍ SE VE EN EL NAVEGADOR
El atributo TYPE permite declarar los valores “I” números romanos con letra mayúscula, “i” números
romanos con letra minúsculas, “A” letras mayúsculas (en orden ascendente), “a” letras minúsculas
(en orden ascendente) y muchos más, emplea estos valores mencionados y observa los resultados.
Las listas no ordenadas (UL), son listas que carecen de un número o letras, en lugar de ello, se
emplean símbolos, por ejemplo: círculos (con relleno o sin relleno), cuadro, etc., e incluso puedes
personalizar el símbolo a través de imágenes a tu gusto.
Teclea el siguiente código fuente, en tu bloc de Notas y llámale al archivo LISTA NO ORD.HTML
ASÍ SE VE EN EL NAVEGADOR
El comportamiento de las listas es poco común, observa la interpretación del navegador cuando
empleamos la etiqueta <CENTER> para centrar una lista, observa como lo hace:
Observa bien, efectivamente centra todos los elementos, sin embargo las “viñetas” (pequeños
círculos) se quedan justificadas a la izquierda, dando una presentación nada convincente. Para
logar un centrado más aceptable, incorporaré la etiqueta <STYLE>, la cual permite modificar los
valores de omisión (o default) de las etiquetas HTML existentes. Teclea el siguiente código fuente
con el bloc de notas y al archivo llámalo LISTA ESPECIAL.HTML

Te explico: la etiqueta <DIV> permite establecer una división dentro del cuerpo de una página
Web, dicha división es simplemente para manipular los elementos que contenga, en este caso la
presencia de DIV en la etiqueta <STYLE> es para establecer el valor de omisión, que consiste en
alinear los elementos al centro contenidos en la división (text-align: center;).
La presencia de UL en la etiqueta <STYLE> es para establecer el valor por omisión en la etiqueta

<UL> (UNORDER LIST) que consiste en alinear los elementos de la lista a la izquierda en bloque (ósea
todos alineados igual).
La presencia de LI en la etiqueta <STYLE> es para establecer el valor por omisión en la etiqueta

<LI> (LIST ITEM) que consiste en colocar una imagen personalizada, background url:(ESTRELLA.JPG),
como símbolo para la viñeta a emplear, además que coloque la viñeta hacia arriba a la izquierda
(top left no-repeat) sin repetir, y finalmente que haya una separación entre la viñeta y el nombre
del elemento de la lista de 40 pixeles (padding-left: 40px).
ASÍ SE VE EN EL NAVEGADOR

Hiperenlaces (1)
En esta práctica vamos a ver qué son los hiperenlaces, para qué sirven y cómo crearlos, ya que
son un elemento esencial para cualquier página web. Un hiperenlace, hipervínculo, o vínculo,
no es más que un enlace, que al ser pulsado lleva de una página o archivo.
Aquellos elementos (texto, imágenes, etc.) sobre los que se desee insertar un enlace han de
encontrarse entre las etiquetas <A> y </A>.
A través del atributo HREF se especifica la página a la que está asociado el enlace, la página
que se visualizará cuando el usuario haga clic en el enlace.
Por ejemplo, para insertar el enlace (que enlaza con la página del CECyT 6):
Visita www.cecyt6.ipn.mx (página Web donde se accede)
<B>Visita <A HREF=https://www.cecyt6.ipn.mx>www.cecyt6.ipn.mx</A></B>
hiperenlaces’ y en el navegador deberá aparecer el siguiente texto con la fuente Times New
Roman:
“Hola, estoy probando los hiperenlaces, cuando pulse aquí accederá a la página del prof.
Montiel”
(link de la página del prof. Montiel es:

https://www.blogger.com/profile/13459447733473331475)
Guárdala con el nombre “hiperenlace.html” en la carpeta habitual.
Tipos de referencias
Existen diferentes formas de expresar una referencia a una página a través del atributo HREF.
• Referencia absoluta:
Conduce a una ubicación externa al sitio en el que se encuentra el documento. La ubicación es
en Internet, en este caso hay que empezar la referencia por https://, el nombre del dominio y
algunas veces el nombre de la página. Si no se escribe el nombre de la página se cargará la
página de inicio asociada al dominio.
Para insertar el enlace: Visita www.ipn.mx
Visita <A HREF=https://www.ipn.mx>www.ipn.mx</a>

• Referencia relativa al sitio:
Conduce a un documento situado dentro del mismo sitio que el documento actual. Un sitio web
es un conjunto de archivos y carpetas, relacionados entre sí, con un diseño similar o un objetivo
común, estando todos ellos dentro de una misma carpeta, conocida como carpeta raíz del sitio.
Por ejemplo, teniendo en cuenta que el documento Times.html se encuentra directamente
dentro de la carpeta raíz del sitio, para insertar el enlace:
Enlace a la página web Times que ya creamos anteriormente
<A HREF=letratimes.html> Enlace a la página web que ya creamos anteriormente </A>

Observa como aparece el símbolo "/" delante del nombre del documento. Esta barra inclinada
indica la carpeta raíz del sitio. Si el documento letratimes.html se encontrara, por ejemplo, dentro
de una carpeta llamada tema4, y esta estuviera dentro de la carpeta raíz del sitio, habría que
escribir:
<A HERF=tema4/letratimes.html>Enlace a la página web letratimes que ya creamos

anteriormente</A>
hiperenlaces 2’ y en el navegador deberá aparecer un enlace al archivo ‘resaltadoletras.html’
que creaste anteriormente, con el siguiente texto:
“Enlace al archivo resaltadoletras”
Guárdala con el nombre “hiperenlace2.html” en la carpeta habitual.
Crear dentro de la carpeta HTML una carpeta con el nombre PRUEBA y copiar dentro el archivo
‘marquesina.html’ que hiciste en la práctica anterior. A continuación añadir a la página del
ejercicio anterior un enlace a dicha página (tener en cuenta que el hiperenlace accede ahora
a una carpeta.
Guárdala con el nombre ‘hiperenlace3.html’ en la carpeta habitual.
Crear una página web que contenga un hiperenlace a los siguientes archivos:
- primera.html El texto es libre, podrás poner el texto que quieras siempre

que el hipervínculo se active cuando se pulse sobre la
- segunda.html
palabra ‘aquí’.
- mititulo.html
Por ejemplo: Pulsa aquí para acceder al archivo
- probandocolores.html
Tercera.htm
- https://www.blogger.com/profile/13459447733473331475
- www.cecyt6.ipn.mx
- https://es.symbolab.com/solver/factor-calculator
Guárdala con el nombre “hiperenlace4.html” en la carpeta habitual.

Hiperenlaces (2) - Destino del enlace
El destino del enlace determina en qué ventana va a ser abierta la página vinculada, se
especifica a través del atributo target al que 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 del marco que contiene el vínculo o en el conjunto
de marcos padre.
_self:
Es la opción predeterminada. Abre el documento vinculado en el mismo marco o ventana que
el vínculo.
_top:
Abre el documento vinculado en la ventana completa del navegador.
No te preocupes si no te queda del todo claro para qué sirve cada una de estas opciones de
destino, ya que se volverán a ver más adelante. De momento sólo te interesa retener la opción
_blank y _self.
Para insertar el enlace:
Visita www.ipn.mx en una ventana nueva
<A HREF="https://www.ipn.mx" target ="_blank">Visita www.ipn.mx en una ventana nueva</a>

Es interesante utilizar esta opción cuando la página de destino está fuera de nuestro sitio para
que cuando el usuario cierre la ventana del explorador, se encuentre automáticamente en la
página desde la que había salido (que vuelva a nuestro sitio).
Modificar la página “hiperenlace.html” que creaste en la práctica anterior para que abra la
página en una página aparte.
Guardarla con el nombre “aparte.html” (con la opción guardar como...) y comprobar que
funciona correctamente.
Modificar la página “hiperenlace2.html” que creaste en la práctica anterior para que abra el
documento vinculado en la ventana completa del navegador.
Guardarla con el nombre “completa.html” (con la opción guardar como...) y comprobar que
funciona correctamente.

Vínculos de correo electrónico
Este tipo de enlaces o vínculos abren la aplicación Outlook Express para escribir un correo
electrónico, cuyo destinatario será el especificado en el enlace. Para ello la referencia del
vínculo debe ser "mailto:direcciondecorreo".
Por ejemplo, para insertar un enlace que permita enviar un correo electrónico al colegio, tal
como este:
Pulsa aquí para enviar un e-mail para el Prof. Montiel
<A HREF="mailto:prof_montiel@hotmail.com">Pulsa aquí para enviar un e-mail para el Prof.

Montiel</A>
Después de hacer clic en el enlace se abrirá el Outlook Express (si el usuario lo tiene instalado)
con la pantalla para redactar un nuevo mensaje y con el campo destinatario completado con
la dirección de correo. Podemos hacer que esté completado algún campo más como es el
asunto. En este caso habría que escribir:
<A HREF="mailto:prof_montiel@hotmail.com?subject=el asunto del mensaje">e-mail para el Prof.
Montiel</A>
Crear una página web con el título “Envío de mensajes de correo electrónico” y que contenga
un pequeño texto con un hiperenlace que envíe un e-mail a la dirección
carlos.montiel.voca6@gmail.com con el asunto “Prueba de Correo”.
Guardar la página con el nombre “correo.html”
Vínculos a Archivos para descargar

El valor del atributo HREF normalmente será una página web (con extensión html, asp, php...)
pero también puede ser un archivo comprimido, una hoja de Excel, un documento Word, un
documento con extensión PDF. Cuando el enlace no es a una página Web nos aparecerá el
cuadro de diálogo que seguro habrás visto alguna vez en el que el navegador le pide al usuario
permiso para descargar el archivo en su ordenador. Por ejemplo si tenemos el código siguiente:
<A HREF=recursos.zip>Bajar recursos</A>
El navegador habilitará el software para descomprimir el archivo “recursos.zip”, que en mi caso

es el Winrar.exe, y obtendré la siguiente respuesta:

El navegador reconoce algunas extensiones como asociadas a un determinado programa (por
ejemplo la extensión .doc está asociada al programa Word, .pdf al programa Acrobat Reader,
.xlsx al programa Excel...) en este caso en el cuadro de diálogo aparece una nueva opción, la
de abrir el archivo sin descargarlo en el disco duro del usuario.
Para nombrar el archivo podemos utilizar según el caso, una referencia externa, una referencia
relativa al sitio o una referencia relativa al documento.
Por ejemplo, en la carpeta donde se encuentra esta página tenemos el archivo Word carta.doc
y queremos que nuestros visitantes puedan visualizar e incluso descargar el archivo en su disco
duro, en este caso definiremos el enlace: haz clic aquí para descargarte el archivo
De la siguiente forma:
<A HREF="carta.doc" TARGET=_blank >haz clic aquí para descargarte el archivo</A>

En este caso hemos utilizado una referencia relativa al documento ya que la carta se encuentra
en la misma carpeta que nuestra página.
Crear una página web con el título “Descarga de archivos en una web” que tenga un enlace a
un archivo de Word (cualquiera de los que tienes en tu carpeta de alumno) para que el que
haga clic en el enlace se lo pueda descargar. El texto del enlace será: “Haz clic aquí para
descargarte el archivo de Word”.
Pista: Para que sea más fácil puedes copiar ese archivo de word dentro de la carpeta HTML.
Guarda la página con el nombre “archivos.html” en la carpeta habitual.

Imágenes (1)
Vamos a ver cómo insertar imágenes, y cómo modificar algunas de sus propiedades.
Todas las páginas web acostumbran a tener un cierto número de

imágenes, que permiten mejorar su apariencia, o dotarla de una mayor
información visual.
Para insertar una imagen es necesario insertar la etiqueta <img> Dicha

etiqueta no necesita etiqueta de cierre.
El nombre de la imagen ha de especificarse a través del atributo SRC.
Por ejemplo, para insertar la siguiente imagen:
<IMG SRC="imagenes/2009.jpg">
Teniendo en cuenta que la imagen se llama 2009.jpg y que está dentro de la carpeta imagenes,
que se encuentra en el mismo directorio que el documento actual (referencia relativa al
documento).
Para trabajar de una forma más sencilla y ordenada, es recomendable que todos los
documentos HTML se encuentren en un mismo directorio, y que dentro de este directorio existan
diferentes carpetas para agrupar otros objetos, como puede ser una carpeta destinada a
almacenar imagenes, o una carpeta destinada a almacenar archivos de audio, etc.
Realiza una página web con el título “Insertando imágenes.html” donde aparezca el texto
centrado “Aquí tenemos un par de imágenes”. Dos líneas debajo insertarás las imágenes
“2009.jpg” y “2070.jpg” (deberás copiar previamente dichas imágenes a la carpeta Imágenes).
Guarda la página con el nombre “imagenes.html”.
Texto alternativo
El texto alternativo se muestra al momento de no hallar la imagen. Por ejemplo:
Si en lugar del código anterior hubiéramos insertado el siguiente código:
<IMG SRC="imagenes/2070.jpg" ALT="Abuelos paseando" >

Al no encontrar la imagen, verías como aparece el texto: Abuelos paseando.
A PARTIR DE AHORA A TODAS LAS IMÁGENES DE LOS

EJERCICIOS DEBERÁS PONERLE UNA PEQUEÑA
DESCRIPCIÓN UTILIZANDO “ALT”.
Realizar sobre la página del ejercicio anterior los cambios que se acaban de exponer para que
aparezca un comentario sobre las dos imágenes. El texto para mostrar será “Abuelos paseando”
y “Barcos navegando”. Comprobar que cuando no localice las imagenes nos debe aparecer el
texto deseado.
Guardar la página con el nombre “imagenes2.html” (con la opción guardar como...).
Crear una página web con el título “Web de Coches de lujo” donde aparezcan 4 imágenes de
coches de lujo (las debéis bajar de internet) con su nombre respectivo debajo. Poner como color
de fondo el color naranja, como texto de encabezado en la primera línea “Automóviles de altas
prestaciones” y una barra horizontal para separar el título de las imágenes.
Nota: si las imágenes descargadas son demasiado grandes les puedes cambiar el tamaño con
el Paint a un tamaño de 300x200 pixeles (estas imágenes se guardarán en la carpeta Imágenes).
Guardar la página con el nombre “coches.html” y comprobar que se visualizan correctamente.
Borde de una imagen

En general, al visualizar una página en un navegador las imágenes aparecen sin ningún borde
alrededor, pero es posible establecer uno a través del atributo BORDER.
El atributo BORDER puede tomar valores numéricos, que indican el grosor en píxeles del borde.
Por ejemplo, para insertar la siguiente imagen con borde:
<IMG SRC="imagenes/5005.jpg" BORDER="4">

Crear una página web con el título “Bordes de imagen” donde se muestre el
ejemplo anterior para comprobar la utilización de los bordes. Insertar la misma
imagen 4 veces, poniendo en cada caso los siguientes tamaños de borde: 5, 10,
15 y 20 pixeles.
Guardar la página con el nombre “bordes.html”.
Modificar la página “coches.html” creada anteriormente para añadirle un borde de 10 píxeles a

cada una de las imágenes. Guardar la página resultante con el nombre “bordecoches.html”
(con la opción guardar como...).

Imágenes (2) - Imágenes con hipervínculo
Para insertar una imagen con un enlace utilizaremos la sintaxis ya vista en prácticas anteriores. En
este caso en concreto habría que escribir:
Dirección Web Destino Imagen
<A HREF="http://www.perrosygatos.com" TARGET ="_blank" ><IMG SRC="imagenes/8232.jpg"

BORDER="0" ></A>
Si se desea establecer un vínculo sobre una imagen y no se desea que se muestre el borde (que
por su color indica que existe dicho vínculo), es necesario establecer BORDER="0".
Crear la página web con el enlace en la imagen del ejemplo anterior que tenga como título de
Página “Página de perros y gatos” y aquellos elementos que tu consideres oportunos (texto, otras
imágenes, barras, bordes de imágenes, etc.) Las imágenes se guardarán en la carpeta
Imágenes. Una de las imágenes tendrá un enlace a la página expuesta en el ejemplo anterior.
Guardarla con el nombre “perrosygatos.html” y comprobar que se visualiza correctamente.
Tamaño de una imagen

Cuando insertamos una imagen, ésta se muestra en los navegadores con su tamaño original,
pero por diversos motivos puede interesarnos modificar dicho tamaño.
A través de los atributos width (anchura) y height (altura) puede modificarse el tamaño de la
imagen. Dicho cambio de tamaño no se aplica directamente sobre el archivo de imagen, sino
que lo que varía es la visualización de la imagen en el navegador.
El valor que pueden tomar los atributos width y height ha de ser un número, acompañado de %
cuando se desee que sea en porcentaje con respecto a la página.
Por ejemplo, para insertar la siguiente imagen (cuyo tamaño original era de 510 píxeles de
anchura y 341 píxeles de altura) con 300 píxeles de anchura y 80 píxeles de altura:
<IMG SRC="imagenes/COMIDA.jpg" WIDTH="300" HEIGHT="80">
Al modificar el tamaño de la imagen a través de estos atributos es muy probable que la imagen
resultante no sea de buena calidad, en comparación de cómo podría quedar modificándola
desde un editor externo, como Photoshop. Por tanto esta técnica no la utilizaremos demasiado
porque será preferible redimensionar las imágenes desde un editor como Photoshop.
Crear una página web con el título “Cambiando el tamaño de las imágenes” donde aparezca
la imagen “DINERO.jpg” con un tamaño de 800x200 pixeles. Guardar la página con el nombre
“cambioimagen.htm” y comprobar que se visualiza correctamente.

Alineación de una imagen
La alineación de las imágenes se establece igual que hacíamos con el texto a través de la
etiqueta <DIV ALIGN>
Por ejemplo, para alinear una imagen en las siguientes posiciones de la página utilizaríamos:
EXPRESIÓN SIGNIFICADO
<DIV ALIGN= “left”><IMG SRC="imagenes/EQUIPO.JPG"></DIV> Alinear la imagen a la

izquierda de la pantalla
<DIV ALIGN= “center”><IMG SRC="imagenes/EQUIPO.JPG"></DIV> Alinear la imagen en el

centro de la pantalla
<DIV ALIGN= “right”><IMG SRC="imagenes/EQUIPO.JPG"></DIV> Alinear la imagen a la

derecha de la pantalla
Crear una página web con el título “Alineación de imágenes”, donde aparezcan 3 imágenes:
‘SOLDADOR.JPG’, ‘SERVICIO.JPG’ y ‘SALUDO.JPG’ cada una de ellas con una alineación distinta
(izquierda, centrada, derecha). Deben tener un tamaño de 150x300 pixeles. Además cada una
de ellas tendrá un hipervínculo con una estas páginas: “perrosygatos.html”, “imagenes.html” y
“coches.html”.
Guardar la página con el nombre “alineacionimagen.html” y comprobar que se visualiza
correctamente.
Crear una página web donde aparezcan 3 equipos de fútbol con su respectivo nombre debajo,
con alineación centrada. Cada una de ellas tendrá un hipervínculo a la página oficial de dicho
club. (por ejemplo: https://www.pasionaguila.com/ ). El título de esta página será “Clubs de
Fútbol” y tendrá un encabezado en la página con el mismo nombre. Añadir el texto que creas
conveniente.
Guardar la página con el nombre “futbol.htm” y comprobar que se visualiza correctamente.

Tablas (1)
Ahora vamos a ver cómo trabajar con tablas. Podremos insertar tablas, filas y columnas, y
modificar sus propiedades.
Todos los objetos se alinean por defecto a la izquierda de las páginas web, pero gracias a las
tablas es posible distribuir el texto en columnas, colocar imágenes al lado de un bloque de texto,
y otra serie de cosas que sin las tablas serían imposibles de realizarse.
Las tablas están formadas por celdas, que son los recuadros que se obtienen como resultado de
la intersección entre una fila y una columna.
COLUMNA
imagen y texto
Texto dentro de una

celda
FILA CELDA
Para crear una tabla hay que insertar las etiquetas <TABLE> y </TABLE>. Entre dichas etiquetas
habrá que especificar las filas y columnas que formarán la tabla.
Fila <TR>
Es necesario insertar las etiquetas <TR> y </TR> por cada una de las filas de la tabla. Estas etiquetas
deberán insertarse entre las etiquetas <TABLE> y </TABLE>. Por ejemplo, para crear una tabla con
cinco filas escribiríamos:
1 columna
<TABLE>
<TR>...</TR>
<TR>...</TR>
<TR>...</TR>
5 filas
<TR>...</TR>
<TR>...</TR>
</TABLE>

Columna o celda <TD>
Para crear una tabla no basta con especificar el número de filas, es necesario también especificar
el número de columnas.
Una celda es el resultado de la intersección entre una fila y una columna, por lo que podremos
especificar el número de celdas por fila, que equivale a especificar el número de columnas por
fila.
Es necesario insertar las etiquetas <TD> y </TD> por cada una de las celdas que compongan cada
una de las filas de la tabla. Por lo tanto, habrá que insertar esas etiquetas entre las etiquetas <TR>
y </TR>.
Entre las etiquetas <TD> y </TD> se podrá especificar el contenido de cada una de las celdas.
Por ejemplo, para insertar la siguiente tabla de 3 filas por 2 columnas:
Código fuente:
<html>
<head>
<title>Tablas #1</title>
<meta charset=utf-8>
</head>
<body>
<table border=1 align=center>
<tr><td>Lunes</td><td>Martes</td></tr>
<tr><td>Matemáticas</td><td>Lengua</td></tr>
<tr><td>Filosofía</td><td>Informática</td></tr>
</table>
</body>
</html>
Interpretación del navegador:

Tablas (2) - Formato de la tabla
Es posible modificar los siguientes atributos de una tabla:

un número, acompañado de % cuando se
width ancho de la tabla
desee que sea en porcentaje
height altura de la tabla
espacio entre el contenido de las
cellpadding un número
celdas y el borde
cellspacing espacio entre celdas un número
border grosor del borde un número
left (izquierda)
alineación de la tabla dentro de la
align right(derecha)
página
center (centro)
bgcolor color de fondo número hexadecimal
background imagen de fondo número hexadecimal

bordercolor color del borde número hexadecimal
Por ejemplo, para modificar la tabla de la practica anterior para que quedase como la
siguiente:
<TABLE width="30%" border="2" align="center" cellspacing="4" bordercolor="#000000"

bgcolor="#FFCC99">
...
</TABLE>
Con esto indicamos que el ancho (width) de la tabla debe ocupar el 50% del ancho de la
ventana (lo puedes comprobar cambiando el ancho de la ventana de tu navegador y verás
que el ancho de la tabla varía para ocupar siempre la mitad de la ventana), que el borde
(border) tiene un grosor de 2 píxeles, que la tabla está alineada al centro (center) de la ventana,
que hay 4 de espacio entre las celdas (cellspacing="4"), que el borde de la tabla es negro
(#000000) y el fondo naranja (#FFCC99).
Realiza la tabla anterior ayudándote de estas indicaciones y las de la práctica anterior para que
te quede igual que tienes aquí.
Formato de las celdas
Es posible modificar los siguientes atributos de una celda:

width ancho de la tabla
height altura de la tabla
left (izquierda)
alineación horizontal del contenido de
align right (derecha)
la celda
center (centro)
baseline (línea de base)
alineación vertical del contenido de la bottom (inferior)
valign
celda middle (medio)
top (superior)
bgcolor color de fondo número hexadecimal
background imagen de fondo número hexadecimal

bordercolor color del borde número hexadecimal
También es posible modificar estos atributos de toda una fila, especificándolos en la etiqueta
<TR>, en lugar de en la etiqueta <TD>. Hay que tener en cuenta que los atributos tienen más
prioridad cuando son establecidos para una celda que cuando son establecidos para una fila
completa. Al mismo tiempo, tienen más prioridad los atributos establecidos para una fila que los
establecidos para toda la tabla. Por ejemplo, si escribiéramos el siguiente código:
<html>
<head>
<title>Tablas #1</title>
<meta charset=utf-8>
</head>
<body>
<table width="50%" border="2" align="center" cellspacing="0" bordercolor="#000000"
bgcolor="#FFCC99">
<tr align="center" bgcolor="#0099CC">
<td>Lunes</td>
<td bgcolor="#66CC99">Martes</td>
</tr>
<tr>
<td>Matemáticas</td>
<td>Lengua</td>
</tr>
<tr>
<td>Filosofía</td>
<td>Informática</td>
</tr>
</table>
</body>
</html>
Obtendríamos la siguiente tabla:
Se ha establecido el color naranja como fondo de toda la tabla, pero con la línea de código <TR
align="center" bgcolor="#0099CC"> y un color azul como color de fondo de la primera fila, por lo
que dicha fila se mostrará de color azul, y no de color naranja. Al mismo tiempo, se ha cambiado
el color de la segunda celda de la primera fila por el color verde, a través de la línea <td
bgcolor="#66CC99">Domingo</td> por lo que esta fila en vez de ser azul será verde, los atributos
de celda tienen prioridad sobre los de la fila.
Crear una página web que tenga como título “Clases del día” y un encabezado en la primera
línea que ponga “Horario de clases del 2º. Semestre”. A continuación deberás definir la tabla
necesaria para albergar tu horario de clases (si no te acuerdas de todas las clases, podrás
inventarlas).
Además la página debe tener color de fondo de un color diferente para cada fila de la tabla.
Guarda la página con el nombre ‘horario.html’.

Tablas (3) – Atributos especiales
Enseguida teclea el siguiente código HTML en un archivo de bloc de notas y llámale: pagina
TABLE 2.HTML:
Te explico:
Etiqueta <TD colspan=3> se expandirá a 3 columnas para el contenido especificado en esta
etiqueta, ¿Por qué 3 columnas? Por la sencilla razón que las siguientes etiquetas precisamente
están declarando 3 columnas, ¿ok?
Etiqueta  es para definir comentarios, los cuales no son interpretados por los
navegadores, así que por favor en todos los archivos bloc de notas que me van a entregar como
tareas, es obligatorio que usen esta etiqueta para que indiquen sus apellidos, nombre(s) y grupo
al que pertenecen, por ejemplo:

Colóquenla antes de la etiqueta </BODY>.
Ahora te muestro la interpretación del navegador del código HTML previamente discutido:

En el siguiente código HTML te muestro todos los elementos que involucra la creación de una
tabla, tecléalo en un bloc de notas y al archivo llámale: pagina TABLE 3.HTML
Te explico:
• Etiqueta <CAPTION>…</CAPTION> es subordinada de la etiqueta <TABLE>, la cual permite

definir el Titulo que queramos definir a una tabla.

• Etiqueta <THEAD>…</THEAD> es subordinada de la etiqueta <TABLE>, la cual permite definir
la cabecera (títulos de las columnas) para una tabla que deseamos definir.
• Etiqueta <TBODY>…</TBODY> es subordinada de la etiqueta <TABLE>, la cual define el

cuerpo principal de una tabla (celdas que contendrán cierta información).
• Etiqueta <TFOOT>…</TFOOT> es subordinada de la etiqueta <TABLE>, la cual permite definir

el pie de tabla (información colocada al final de la tabla, -último renglón-).
Finalmente, para terminar con el tema de Tablas, teclea el siguiente código HTML en el bloc de
notas, y al archivo llámale: pagina TABLE 4.HTML
Te explico:
• Etiqueta <TH rowspan=2> subordinada de la etiqueta <TABLE> indica que se expandirá a

dos renglones, y en ella está contenida la etiqueta <IMG> que insertará una imagen

(logo.gif) con dimensiones: ancho (width) de 80 pixeles y altura (height) de 80 pixeles. Sin
olvidar que pertenece a los títulos de la Tabla.
• Etiqueta <TH colspan=2> subordinada de la etiqueta <TABLE> indica que se expandirá a

dos columnas, es decir: el texto “Media” abarcará dos columnas.
• Etiqueta <TH rowspan=2> subordinada de la etiqueta <TABLE> indica que se expandirá a

dos renglones, por ello el texto: “Ojos” ocupará uno de ellos (el primero) y el texto: “rojos”
ocupara el segundo, y la etiqueta <BR> permite “brincar” un renglón, por ello el texto “rojos”
se coloca en el 2º. Renglón.
• Etiqueta <TD colspan=2> subordinada de la etiqueta <TABLE> indica que se expandirá a

dos columnas, significa que el texto: “No disponible” abarcará dos columnas.
Finalmente, cabe mencionar que la etiqueta <BR> es interpretada por el navegador como salto
de renglón, pero cuando esta etiqueta está acompañada por la etiqueta <P> (párrafo), es decir:
<BR><P>, ambas serán interpretadas por el navegador como el saltar un renglón en blanco, es
decir dejar un renglón en blanco entre el texto anterior y el siguiente.
Enseguida te muestro la interpretación del navegador (en este caso por Google Chrome) del
código HTML previo:

TAREA:
(A) Crear el código HTML para obtener la siguiente interpretación por el navegador:
(B) Crear el código HTML para obtener la siguiente interpretación por el navegador:
Los dos archivos resultantes llámales Tabla 1 tarea.HTML y Tabla 2 tarea.HTML.

Frames (Marcos, -en español-)
Los marcos o Frames son excelentes herramientas que ayudan a administrar nuestras páginas web
con un toque más organizado. Le dan una estructura definida a nuestro sitio web. Aunque se
considera obsoleto su uso, es importante conocerlos ya que hay sitios web que todavía los utilizan.
Permiten dividir la ventana en secciones más pequeñas, donde en cada división es una página
html independiente. Resumiendo, en una ventana del navegador, la etiqueta Frame permite
convivir (que participen) varias páginas Web a la vez.
Para crear Frames (marcos) en html, se usan las siguientes etiquetas y atributos:
Etiqueta ¿Para qué sirve? Datos Extras

<FRAMESET> </FRAMESET> Define varios marcos que En tu código colocaras estas
albergarán diferentes etiquetas en lugar de nuestro
páginas Web. conocido BODY.
<FRAMESET Divide la ventana de forma Especificarás los porcentajes de
ROWS=?></FRAMESET> horizontal. altura de c/u renglones. La suma
ROWS en español significa de éstos debe ser 100%, puedes
RENGLONES. emplear el asterisco (*).
<FRAMESET Divide la ventana de forma Especificarás los porcentajes de
COLS=?></FRAMESET> vertical. ancho de c/u columnas. La
COLS en español significa suma de éstos debe ser 100%,
COLUMNAS. puedes emplear el asterisco (*).
<FRAMESET BORDER=?> Especifica el borde del Cualquier número.
Frame.
<FRAMESET Indica si el Frame tendrá un Yes = Si
FRAMEBORDER=”yes/no”> borde o no. No = No
<FRAMESET Personaliza el borde con un El color es en hexadecimal o
BORDERCOLOR=”###”> color que gustes. con nombre.
<FRAME> Definición de cada marco Dentro de éste, colocaras otros

de manera individual. parámetros.
<FRAME SRC=”URL”> Dentro de la definición del Comúnmente páginas Web

marco, el URL será la que se encuentran en la misma
dirección de la página de carpeta de la página INDEX.
HTML que colocaras en ese
marco.
<FRAME NAME=”…” > Permite asignar nombre al Puedes agregar distintos

marco, para realizar los atributos como:
redireccionamientos ✓ _blank
necesarios. ✓ _self
✓ _parent
✓ _top
<FRAME MARGINWIDTH=?> Utilizado para definir el Debes colocar el margen
ancho de los márgenes. izquierdo y derecho.

Creando nuestro primer Frame
Recordando que el Frame será el marco de nuestra página web, es conveniente tener un modelo
estructurado para saber qué nombre llevará cada Frame, que enlace estará en cada uno y evitar
errores en los redireccionamientos.
Comenzamos nuestro código con el <HTML> y las demás etiquetas que utilizamos normalmente,
pero esta vez indicaremos que será un documento para FRAMES, por lo que remplazaremos el
<BODY> por el <FRAMESET ROWS> o <FRAMESET COLS>.
También usaremos la etiqueta <FRAME SRC=”PÁGINA.HTML”> para especificar las páginas Web a
cargar en cada Frame.
Crearemos primero 5 páginas Web con el fondo de distinto color para ejemplificar:
P1.html ASÍ SE VE EN EL NAVEGADOR
P2.HTML ASÍ SE VE EN EL NAVEGADOR

Ahora crearemos el archivo o página Web que contendrá a todos los marcos que queramos crear,
a este archivo comúnmente se le llama “Index.HTML”, que será la página principal.
Frame con división horizontal

Se usa el atributo ROWS (filas) para definir el tamaño de los marcos, en este ejemplo se divide la
pantalla en 3 filas, la primera ocupa el 30% de la pantalla con el archivo P1.html, el segundo ocupa
el 50% de la pantalla con el archivo P2.html y por último se usa el * para decirle que es el resto con
el archivo P3.html, es decir 20%.
INDEX.HTML ASÍ SE VE EN EL NAVEGADOR

Frame con división vertical
Se usa el atributo COLS (columnas) para definir el tamaño que tendrá cada división en columnas,
en este ejemplo se divide la pantalla en 3, la primera ocupa el 20% de la pantalla con el archivo
P1.html, el segundo ocupa el 60% de la pantalla con el archivo P2.html y por último se usa el * para
decirle que es el resto con el archivo P3.html.
INDEX.HTML ASÍ SE VE EN EL NAVEGADOR
Frame combinado
Combinar Frames, es el uso más común, entre los diseñadores gráficos que se dedican al diseño
de páginas Web, Frame combinado se refiere a la combinación de Frames tanto horizontales
como verticales, te mostraré dos ejemplos para que tengas una mejor idea.
Ejemplo #1
Código fuente de la página INDEX.HTML ASI SE VE EN EL NAVEGADOR
Como ya se te explico, NO EXISTE LA ETIQUETA BODY, no se requiere cuando se especifican Frames,

tómalo muy en cuenta, ya que la mayoría de los jóvenes que reprueban este tema, olvidan por
completo estas indicaciones.
La página INDEX.HTML, se emplean varios marcos, recuerda la etiqueta FRAME, precisamente es
para mostrar simultáneamente varias páginas Web en la ventana del navegador, en nuestro
ejemplo se manifiestan 9 páginas Web, te explico: (1) BANNER.HTML, (2) MENU.HTML, (3)
INICIO.HTML, (4) ALUMNO.HTML, (5) P1.HTML (página de color Naranja), (6) P2.HTML (página de
color Rojo), (7) P3.HTML (página de color Verde), (8) P4.HTML (página de color Azul) y (9) P5.HTML
(página color Amarillo),observa la siguiente imagen:
Obvio, incluyendo la página INDEX.HTML, son 10 páginas Web en total, que te iré mostrando
enseguida, tanto el código fuente, como el cómo se aprecia en el navegador.
Solo para recordarte, las páginas web: P1.HTML, P2.HTML, P3.HTML, P4.HTML, y P5.HTML, ya fueron
tratadas con anterioridad, puedes regresarte y observar tanto el código fuente como su
representación por parte de navegador, así que te mostraré enseguida las restantes.
Página BANNER.HTML ASI SE VE EN EL NAVEGADOR
Página MENU.HTML ASI SE VE EN EL NAVEGADOR

Página INICIO.HTML ASI SE VE EN EL NAVEGADOR
Página ALUMNO.HTML ASI SE VE EN EL NAVEGADOR
Ejemplo #2
Página INDEX.HTML ASI SE VE EN EL NAVEGADOR
La página INDEX.HTML, alberga cinco páginas Web, es decir 5 Frames, el primer Frame es el que
está colocado en la parte superior (RS.HTML), que muestra la parte superior de la cortina, el
segundo Frame es el que esta colocado en la parte izquierda (C1.HTML) del escenario (cortina con
una cuerda en medio), el tercer Frame es el que se encuentra en la parte central (C2.HTML) del
escenario, precisamente donde se muestran 5 figuras (números del uno al cinco), el cuarto Frame
esta colocado en la parte derecha (C3.HTML) del escenario (cortina con una cuerda en medio), y
el quinto Frame es el que muestra las imagenes: “uno”, “dos”, etc., las cuales poseen hipervínculo,
que permiten invocar o llamar a otras páginas Web.
En el código fuente de la página INDEX.HTML, se distinguen 5 páginas Web, siendo: RS.HTML (renglón
superior), C1.HTML (columna uno), C2.HTML (columna dos), C3.HTML (columna tres), y RI.HTML (renglón
inferior). Los códigos fuente de las páginas Web que te acabo de mencionar, te los mostraré
enseguida con su interpretación por parte del navegador correspondiente.
Código fuente de la página RS.HTML
ASI SE VE EN EL NAVEGADOR
Cabe señalar que se empleo la etiqueta “BGSOUND”, permite establecer música de fondo, además
indica que el archivo de sonido “M1.MP3” se encuentra en la carpeta “R”, la cual deberá de estar en
la misma carpeta donde se encuentran las páginas Web involucradas, el atributo “LOOP” permite
repetir la música de manera “infinita”. Los atributos “WIDHT” y “HEIGHT” están al 100%, esto permite
que las imágenes se adecuen a las dimensiones de la ventana del navegador.
Código fuente de la página C1.HTML ASI SE VE EN EL NAVEGADOR

Código fuente de la página C2.HTML
Código fuente de la página C3.HTML ASI SE VE EN EL NAVEGADOR

Código fuente de la página RI.HTML
Código fuente de las páginas N1.HTML, N2.HTML, N3.HTML, N4.HTML y N5.HTML

UNO.GIF (DOS.GIF, TRES.GIF, CUATRO.GIF y CINCO.GIF)
Todas las páginas son iguales,

Excepto en el título y en el
nombre de la imagen.

Música de fondo
Muchas de las páginas Web que se encuentran en Internet poseen música de fondo, para ello se
emplea la etiqueta BGSOUND, su sintaxis más común es:
<BGSOUND SRC=MUSICA.MP3 LOOP=INFINITE>
El atributo SRC permite definir el nombre del archivo de sonido, comúnmente el formato de música
que se emplea en la nube es el MP3, y el atributo LOOP, permite indicar al navegador que continúe
con la música, es decir, que repita la música de forma INFINITA.
Música
También tenemos la etiqueta <EMBED> que nos permite colocar controles para tocar, detener, y
terminar el escuchar música en una página Web, por ejemplo:
<EMBED SRC=M1.MP3 AUTOSTART=TRUE SHOWCONTROLS=TRUE LOOP=-1 WIDTH=300 HEIGHT=40>
El atributo AUTOSTART, permite habilitar o deshabilitar el autoinicio, SHOWCONTROLS permite

mostrar u ocultar los controles, LOOP permite repetir la música, n veces o indefinidamente, el valor
-1 indica repetir sin parar, WIDTH permite dar ancho al área de los controles y HEIGHT permite dar
altura al área de los controles.
Recuerda la etiqueta BGSOUND permite establecer fondo musical a una página Web, pues la
siguiente etiqueta es similar:
<EMBED SRC=M1.MP3 AUTOSTART=TRUE SHOWCONTROLS=FALSE LOOP=-1 WIDTH=300 HEIGHT=40>
El atributo SHOWCONTROLS=FALSE, oculta los controles.
Vídeo
La etiqueta <EMBED> también es útil para el manejo de vídeo, simplemente cambiamos el nombre
del archivo de audio por el nombre del archivo de vídeo, así de simple, observa el siguiente
ejemplo:
<EMBED SRC=V.MP4 AUTOSTART=TRUE LOOP=-1 WIDTH=300 HEIGHT=250>
Cuando deseamos mostrar un vídeo, debemos de usar los atributos WIDTH y HEIGHT para
dimensionar el área donde se mostrará dicho vídeo, ya no se requerirá el atributo
SHOWCONTROLS, sale sobrando, y el tipo de vídeo, puede ser del formato MP4 o AVI
La etiqueta
<EMBED SRC=V.MP4 AUTOSTART=TRUE LOOP=-1 WIDTH=300 HEIGHT=250>

Es interpretada por el navegador, y nos muestra el video tal como se observa enseguida:
Recuerda, las etiquetas que he explicado corresponden a HTML versión 4.0, por ello es muy
conveniente emplear el navegador Internet Explorer (versión 11), el cual aún respeta etiquetas del
HTML versión 4.0.
Pues hemos terminado, espero que todo este menjurje te sea de utilidad, saludos y nos vemos en
la próxima.
😎🤞 …

HTML 4.0

Cargado por

Información del documento

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

HTML 4.0

Cargado por

Copyright:

Formatos disponibles

INTRODUCCIÓN A HTML 4.

prof. carlos montiel rentería

Desarrolló: Prof. Carlos Montiel Rentería Correo: prof_montiel@hotmail.com 1

Desarrolló: Prof. Carlos Montiel Rentería Correo: prof_montiel@hotmail.com 3

Debiendo de aparecer la siguiente ventana:

Desarrolló: Prof. Carlos Montiel Rentería Correo: prof_montiel@hotmail.com 4

Desarrolló: Prof. Carlos Montiel Rentería Correo: prof_montiel@hotmail.com 5

Desarrolló: Prof. Carlos Montiel Rentería Correo: prof_montiel@hotmail.com 6

Desarrolló: Prof. Carlos Montiel Rentería Correo: prof_montiel@hotmail.com 7

Acceder al Bloc de Notas y crear un acceso directo en la barra de tareas

Colócate en la caja de búsqueda de Windows 10 (parte inferior izquierda del escritorio de

Y elige la opción “Anclar a la barra de tareas”, y se colocará un ícono de acceso directo al

y el vídeo en YouTube: https://youtu.be/QpdLnN9OMQw

Desarrolló: Prof. Carlos Montiel Rentería Correo: prof_montiel@hotmail.com 8

Desarrolló: Prof. Carlos Montiel Rentería Correo: prof_montiel@hotmail.com 9

<identificador atributo1 atributo2 ...>

Etiqueta de comienzo.................................... <etiqueta>

Mi primer página, realizando pruebas…

Desarrolló: Prof. Carlos Montiel Rentería Correo: prof_montiel@hotmail.com 10

Ahora, tu carpeta “HTML” debe mostrarse como sigue:

En la ventana “Propiedades miprimerpagina.HTML”,

Desarrolló: Prof. Carlos Montiel Rentería Correo: prof_montiel@hotmail.com 12

Recuerda, empleare Internet Explorer (versión 11) a lo largo de estos apuntes.

Desarrolló: Prof. Carlos Montiel Rentería Correo: prof_montiel@hotmail.com 13

El color de fondo de la página ha sido establecido por la línea <BODY BGCOLOR=BLUE>.

Desarrolló: Prof. Carlos Montiel Rentería Correo: prof_montiel@hotmail.com 14

Identificador del tipo de documento <HTML>

Cabecera de la página <HEAD>

Desarrolló: Prof. Carlos Montiel Rentería Correo: prof_montiel@hotmail.com 15

Cuerpo del documento <BODY>

El valor hexadecimal #0000FF representa el color azul.

En el caso de que la imagen no se encuentre en la misma carpeta que la página, y se encuentre

Que sería equivalente a poner el valor predefinido: RED

Desarrolló: Prof. Carlos Montiel Rentería Correo: prof_montiel@hotmail.com 17

Caracteres especiales y espacios en blanco

(*) La representación “&fracnm”, la “n” representa el numerador, y la “m” al denominador” de la

¡Bienvenidos, esta es mi 1a página!

Habría que escribir:

<b>¡Bienvenidos, esta es mi 1<sup>a</sup> p&aacute;gina!</b>

El símbolo que representa el agua es H2O

Habría que escribir:

El s&iacute;mbolo que representa el agua es <B>H<SUB>2</SUB>O</B>

La etiqueta META permite indicar al navegador que el lenguaje es español

Habría que escribir en HTML:

“Aprendiendo a crear páginas con acentos: á é í ó ú”

Saltos de línea <BR>

tengo el placer de comunicarles que hay una nueva sección.

Habría que escribir:

Desarrolló: Prof. Carlos Montiel Rentería Correo: prof_montiel@hotmail.com 19

Cuando acabes guárdala con el nombre “saltosdelinea.html”

Atributo Significado Posibles valores

Por ejemplo, para insertar el texto y la regla horizontal siguientes:

Habría que escribir en el body:

Inicio<HR align=left width=70% size=5 noshade>Bienvenidos a mi p&aacute;gina.

Cuando acabes guárdala con el nombre “separadores.html”.

Desarrolló: Prof. Carlos Montiel Rentería Correo: prof_montiel@hotmail.com 20

Atributo Significado Posibles valores

<FONT COLOR="#993366" SIZE="4" FACE="Comic Sans MS, Arial, MS Sans Serif">Bienvenidos a mi

Cuando acabes guárdala en la carpeta habitual con el nombre “letratimes.html”

Desarrolló: Prof. Carlos Montiel Rentería Correo: prof_montiel@hotmail.com 21

Etiqueta Significado Ejemplo

A continuación se muestran algunas etiquetas asociadas al tipo de información:

Etiqueta Significado Ejemplo

<SUB> Subíndice curso HTML prof. Montiel

<b>¡Bienvenidos, esta es mi 1<sup>a</sup> página!</b>

El símbolo que representa el agua es <B>H<SUB>2</SUB>O</B>

Inicio<HR align=left width=70% size=5 noshade>Bienvenidos a mi página.

<DIV ALIGN=CENTER>Bienvenidos a mi página.</DIV> <DIV>Aquí

<A HREF="carta.doc" TARGET=_blank >haz clic aquí para descargarte el archivo</A>