HTML

Manual básico de HTML Ing.
Cleto Alberto Vargas Patsi
HTML
(Hiper Text Markup Language)
INTRODUCCIÓN
Internet es un medio que no precisa de mucho conocimiento, el prerrequisito inmediato

para poder usar este manual es tener conocimientos básicos en el manejo de Windows,
un editor de textos (Bloc de Notas) y haber utilizado alguna vez un navegador de
Internet (IE).
Para la aplicación de los ejemplos de este manual usted necesita:
 Un navegador de Internet (Internet Explorer)

 Un Editor de textos, preferentemente el Bloc de Notas)
 Un medio físico para grabar los ejemplos, ya sea un Pen Drive o Disco
Externo.
¿QUÉ ES EL HTML?
HTML son las iniciales de Hiper Text Markup Language (Lenguaje de Remarcado de
Hiper Texto). Es un conjunto o serie de etiquetas (Tags) incluidas en archivos de texto,
que definen la estructura de un documento WWW y sus vínculos con otros documentos.
ETIQUETAS
Una Etiqueta cumple su función de la siguiente manera:
<Nombre de la etiqueta> Apertura de una etiqueta siempre entre “< >”
</Nombre de la etiqueta> Cierre de la etiqueta siempre entre “</ >”
ESTRUCTURA BÁSICA DE UNA PÁGINA WEB
<html>
<head>
<title>
TÍTULO DE LA PÁGINA
</title>
</head>
<body>
Aquí va el contenido de todo el documento HTML.
</body>
</html>
1
Manual básico de HTML Ing. Cleto Alberto Vargas Patsi
Descripción
 <html> </html> Indica al navegador que el documento texto, que está

leyendo un documento HTML. Esta etiqueta se abre al
principio y al final del documento.
 <head> </head> Acá se detalla el encabezado de la página Web. Esta
etiqueta se abre luego de la etiqueta <html> .
 <title> </title> Define el título de la página WEB.
 <body> </body> Cuerpo de la página donde se despliega el contenido global.
Ejemplo1: Crear una página HTML, que visualice un ejemplo de bienvenida.
CÓMO ESCRIBIR UN DOCUMENTO HTML
 Abrir el programa Bloc de Notas

 Escribir el siguiente código HTML
<html>
<head><title>PRIMERA PÁGINA HTML</title></head>
<body>
Bienvenidos al curso básico de html.
</body>
</html>
CÓMO GUARDAR EL ARCHIVO HTML CON EL BLOC DE NOTAS
 Clic en menú Archivo


 Clic en opción Guardar
 En nombre: escribir: ejemplo1.html
 Clic en Guardar.
Nota.- El ícono tendrá la siguiente forma: (Navegador Internet Explorer)
CÓMO VIZUALIZAR EL ARCHIVO HTML
 Clic en Inicio, Programas

 Clic en Internet Explorer
 Clic en Abrir
 Clic en botón Examinar (Buscar el archivo ejemplo1.html)
2
 Clic en Aceptar.
Título de la Página
 Doble clic en el archivo ejemplo1.html
ETIQUETA <body> </body>

En esta etiqueta se encuentra todo el texto de la página como ser: las imágenes y los
formatos visibles al usuario. Esta etiqueta cuenta con los siguientes atributos que
actúan a nivel del archivo HTML.
Bgcolor define el color de fondo de la página

Text define el color de texto de la página
Link define el color de los vínculos de la página
Alink define el color del vínculo actual o activado en la página
Vlink define el color del vínculo ya visitado
Background define el archivo gráfico que será desplegado como fondo
Bgsound define el archivo de audio que se tocará en la página (IE).
Nota.- Los atributos se incluyen en la etiqueta de apertura <body bgcolor=”blue” …>
separados por un espacio.
¿CÓMO SE UTILIZAN LOS COLORES EN HTML?
Existen dos formas para aplicar colores a una página web:
1. Se especifica el color deseado directamente con el nombre del color en inglés:

Ejemplo: blue, red, black, etc…
2. Se especifica el color deseado con números hexadecimales, mediante la
siguiente estructura #RRVVAA.
NOMBRE COLOR NOMBRE COLOR

#FFFFFF Blanco #000000 Negro
#FF0000 Rojo #00FF00 Verde
#0000FF Azul #FF00FF Magenta
#00FFFF Cyan #FFFF00 Amarillo
#70DB93 Agua Marino #000080 Azul marino
#FF7F00 Coral #A62A2A Café
3
#C0C0C0 Plomo #4F2F4F violeta
TEXTO EN HTML
Para utilizar caracteres especiales usaremos los símbolos & y ; para denotar el inicio y
final respectivamente, de un símbolo especial.
De esta manera:
TEXTO DESCRIPCIÓN PANTALLA

´ Acento ´
ñ Eñe ñ
" Comillas dobles “
° Grados °
á a con acento á

é e con acento é
&nbsp Espacio en blanco
Nota.- En los navegadores actuales se puede escribir directamente el acento en la

página HTML.
Ejemplo2. Crear una página HTML ejemplo2.html con fondo verde y texto rojo.
<html>
<head><title>CURSO DE HTML</title></head>
<body bgcolor="#00FF00" text="#FF0000">
Bienvenidos al curso de html, cuando la temperatura es menor a 15°c,<br>
hace bastante frío. Este es un ejemplo de página Web.
</body>
</html>
ETIQUETA <br>
La etiqueta <br> instruye al navegador cliente que inserte un salto de línea en un

documento HTML, tiene el mismo efecto que un retorno de carro en una máquina de
escribir. Esta es una etiqueta especial, pues no precisa de etiqueta de cierre.
4
ETIQUETA <hr>
La etiqueta <hr> (acrónimo de horizontal rules), dibuja de manera predeterminada una

regla horizontal alineada automáticamente, con una apariencia de tercera dimensión.
Esta etiqueta especial, no necesita de cierre. Tiene los siguientes atributos:
 align establece que la regla se alinee a la izquierda, centro o

derecha LEFT, CENTER, RIGHT.
 width permite especificar el ancho de la regla (en pixeles o
porcentaje)
 Size Permite especificar el alto de la regla.
Ejemplo3.
<html>
<head><title>CURSO DE HTML ejemplo 3</title></head>
<body bgcolor="#000000" text="#FFFFFF">
Documento HTML con fondo NEGRO y texto BLANCO <br><br>
Regla horizontal alineado al centro, un ancho de 10%

<br>
<hr align=center width=50% color="yellow"><br>
Regla horizontal alineado a la izquierda de color púrpura, <br>

un ancho de 25%, alto 15 pixeles%
<br>
<hr align=left width=30% size=4 size=10 color="purple"><br>
</body>
</html>
ENCABEZADOS
5
<h1> </h1> al <h6> </h6> (acrónimos de “heading 1…6”) son

Las etiquetas
encabezados del cuerpo del texto. El encabezamiento <h1> nos proporciona las
letras de mayor tamaño. La etiqueta tiene el siguiente atributo:
 Align Permite ubicar el encabezamiento a la izquierda, centro o derecha de

la pantalla (LEFT, CENTER, RIGHT)
Ejemplo4.
<html>
<head><title>CURSO DE HTML ejemplo 4</title></head>
<body bgcolor="#000000" text="#FF0000">
<h1 align="center">TAMAÑOS DE LETRA EN HTML</h1><br>

<hr align=center width=50%><br>
<h1>Tamaño 1</h1>
<h2>Tamaño 2</h2>
<h3>Tamaño 3</h3>
<h4>Tamaño 4</h4>
<h5>Tamaño 5</h5>
<h6>Tamaño 6</h6>
</body>
</html>
UBICACIÓN, FORMATO Y ATRIBUTOS DE TEXTO
Etiqueta <center> </center>

Se utiliza para centrar el texto/imagen o datos que se encuentren entre la apertura y el
cierre.
Etiqueta <b> </b>

Esta es la etiqueta que nos posibilita resaltar un texto con negrillas.
Etiqueta <u> </u>

Esta es la etiqueta que nos posibilita resaltar un texto con subrayado.
6
Etiqueta <i> </i>

Esta es la etiqueta que nos posibilita resaltar un texto con inclinación itálica (cursiva).
Etiqueta <font> </font>

Esta es la etiqueta que nos posibilita personalizar el texto con respecto al tipo de
fuente tamaño y color, sus atributos son:
 Color Determina el color que se aplicará al texto.

 Size Determina el tamaño relativo del texto. Los tamaños relativos son
relacionados al procesador de textos WORD.
 Face Asigna una fuente o tipo de letra.
Ejemplo5.
<html>
<head><title>FORMATO DE TEXTO EJEMPLO 4</title></head>
<h1 align="center">REPÚBLICA DE BOLIVA</H1><br>
<hr width="50%" size=10 color="yellow"><br>
En tiempos <u>inmemoriales</u> se erigieron montañas, se desplazaron ríos, se

formaron lagos. Nuestra <b>amazonia, nuestro chaco, nuestro altiplano, nuestros llanos
y valles</b> se cubrieron de verdores y flores.
Poblamos esta sagrada <b><u>madre tierra</u></b>con rostros diferentes, entonces

comprendimos a la pluralidad vigente de todas las cosas y nuestra diversidad como
<i>seres y culturas</i>. Asi conformamos nuestros pueblos y jamás comprendimos el
racismo hasta que lo sufrimos desde los funestos tiempos de la colonia.<br>
<h2 align=center>DEPARTAMENTOS</h2>
<hr align=center size=10pt width=25%><br>
<center>
<font color="red" size=1pt face="currier">BENI</font><br>
<font color="yellow" size=2pt face="arial">PANDO</font><br>
<font color="white" size=3pt face="century gothic">ORURO</font><br>
<font color="green" size=4pt face="times new roman">POTOSÍ</font><br>
<font color="blue" size=5pt face="courier new">SANTA CRUZ</font><br>
<font color="magenta" size=6pt face="tahoma">LA PAZ</font><br>
<font color="red" size=15pt face="Algerian">COCHABAMBA</font><br>
7
<font color="orange" size=8pt face="microsoft sans serif">TARIJA</font><br>

<font color="purple" size=9pt face="currier">CHUQUISACA</font><br>
</center>
</body>
</html>
IMÁGENES EN HTML.
Hasta este momento solamente se ha trabajado solamente con texto. Comencemos a

introducir gráficos a nuestra página HTML
Etiqueta <img>
Se trata de otra etiqueta especial, pues no necesita etiqueta de cierre. Esta etiqueta
instruye al navegador para que exhiba la imagen especificada. El formato para incluir un
gráfico es:
<img src=”imagen.jpg” width=120 height=94 alt=”descripción”>
Una práctica aconsejable, es la de dimensionar en pixeles, todas las imágenes con

los comandos width (ancho) y height (alto).
Con el comando ALT se introduce una descripción (una palabra o una frase breve)
indicativa de la imagen.
Ejemplo6.
<html>
<head><title>IMÁGENES EJEMPLO 5</title></head>|
<font color="yellow">
<h1 align="center">INTERNET</H1><br>
<hr ALIGN="CENTER" width="50%" size=10 color="yellow"><br>
<h2>¿QUÉ ES INTERNET?</h2>
Podríamos decir que el <u>internet</u> está formado por una gran cantidad de
ordenadores que pueden
<b><font color="green">intercambiar información entre ellos.</font></b> <i>Es una gran
red mundial de ordenadores</i>.
<marquee>
<h2 align=center>CORREO ELECTRÓNICO</h2>
<hr align=center color="pink"size=12pt width=22%><br>
8
</marquee>
<center>
El correo electrónico o email, es una forma de enviar mensajes entre ordenadores
ordenados a través de <b>INTERNET.</b> Cuando nos dicen que una cuenta de
correo es por ejemplo, 25 Mb. se refieren al espacio que disponemos en el buzón del
servidor. Una dirección de correo tiene una estructura fija:
<font color="red" size 5 pt>nombre_cuenta@_servidor es decir:

[email protected]</font>
</center>
<font color="pink" size=6pt face="comic sans MS">Imágenes insertadas en la página

como formato GIF</font>
<br>
<img src="C:\Program Files\Microsoft Office\CLIPART\PUB60COR\AG00174_.GIF" alt="Reloj">
<img src="C:\Program Files\Microsoft Office\CLIPART\PUB60COR\AG00052_.GIF" alt="Gatito">
<img src="C:\Program Files\Microsoft Office\CLIPART\PUB60COR\AG00176_.GIF" alt="Arbolito"><br>
<center>
<h1> Formato JPG</h1>
</center>
<br>
<center>
<img src="C:\Program Files\Microsoft Office\CLIPART\PUB60COR\j0382957.jpg" witdh=120 height=90
alt="imagen JPG"><br>
Imagen alineada al centro, tamaño 120 pixel, 90 pixel de alto.<br>
</center>
<center>
<font color="green" size=3pt face="comic sans MS">ITI BB USB</font><br>
<font color="green" size=3pt face="comic sans MS">LA PAZ BOLIVIA</font><br>
</center>
</body>
</html>
TABLAS
En HTML también podemos incluir arreglos de tablas representados por filas y

columnas. Las etiquetas son:
Etiqueta <table> </table>

Señala el inicio y final de una tabla. Atributos:
9
Align Establece la alineación de la tabla o texto mediante
ALIGN=LEFT O ALIGN=RIGHT
Bgcolor Establece el color de fondo de las celdas de la tabla.

Border Determina el ancho del borde en pixeles.
BorderColor Asigna el color del borde.
BorderDark Determina el color de la parte oscura de un borde de 3 dimensiones.
BorderLight Asigna el color de la parte clara de un borde de 3 dimensiones.
Caption Especifica el título para la tabla.
Cellpadding Establece la cantidad de espacio ente las celdas de una tabla.
Cellspacing Asigna la cantidad de espacio entre las celdas de una tabla.
Width Determina el ancho de la tabla en pixeles o en un porcentaje.
Etiqueta <th> </th>

Indica al navegador cliente que exhiba el texto como un encabezado en la primera fila
de una tabla. Atributos especiales:
Colspan Permite extenderse sobre un número determinado de columnas.

Rowspan Permite extenderse verticalmente sobre un número determinado de filas.
Align Determina la posición del texto del título.
Etiqueta <tr> </tr>

Identifica a las filas de una tabla. Atributo principal:
Align Alineación del texto/objetos en toda la fila.
Etiqueta <td> </td>

Identifica a las columnas de una tabla. Atributos principales:
Align Alineación del texto/objetos en toda la celda.

Bgcolor Color de fondo de la celda.
Backgroun Imagen de fondo de una celda.
Width Ancho de la celda/columna con respeto al ancho de la tabla, sólo
precisa definir el ancho en la primera celda de la columna.
Ejemplo7.
<html>
10
<head><title>TABLAS EJEMPLO 7</title></head>

<body bgcolor="#A62A2A" text="#FFFFFF">
<font color="red"><h1 align="center">TABLAS EN HTML</h1></font><br>
<hr align=center width=50% size=10 color="yellow"><br>
<h2>TABLA SIN FORMATO DE 10 FILAS Y DOS COLUMNAS</h2>
<table border="1">
<tr>
<th>DEPARTAMENTOS</th>
<th>VOTACIÓN</th>
</tr>
<tr>
<td>LA PAZ</td>
<td>2655</td>
</tr>
<tr>
<td>BENI</td>
<td>1900</td>
</tr>
<tr>
<td>COCHABAMBA</td>
<td>6789</td>
</tr>
<tr>
<td>POTOSÍ</td>
<td>6789</td>
</tr>
<tr>
<td>ORURO</td>
<td>7865</td>
</tr>
<tr>
<td>CHUQUISACA</td>
<td>1234</td>
</tr>
<tr>
<td>SANTA CRUZ</td>
<td>765</td>
</tr>
<tr>
11
<td>TARIJA</td>
<td>3421</td>
</tr>
<tr>
<td>PANDO</td>
<td>6543</td>
</tr>
</table>
<br>
<h3>TABLA CON FORMATO</h3>
<table width=80% align=center border="3">
<tr><th colspan=3><marquee>DIRECTORIO TELEFÓNICO</marquee></th></tr>
<tr align=center>
<td width=40% bgcolor="#FF0000">Nombre</td>

<td width=30% bgcolor="#00FF00"><font
color="black"><b>Teléfono</b></font></td>
<td width=30% bgcolor="#0000FF">E-Mail</td>
</tr>
<tr>
<td>Pedro Poma</td>
<td>453444</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Gonzalo Gómez</td>
<td>223454</td>
</tr>
<tr>
<td>Hormando Vargas</td>
<td>12421542</td>
</tr>
</table>
12
<center>
<img src="C:\Program Files\Microsoft Office\CLIPART\PUB60COR\J0341448.jpg"
witdh=120 height=90 alt="imagen JPG">
<br>
</center>
<center>
<font color="green" size=3pt face="comic sans MS">ITI BB USB</font><br>
<font color="green" size=3pt face="comic sans MS">2015</font><br>
</center>
</body>
</html>
NUMERACIÓN Y VIÑETAS
En HTML todo es posible, y tal cual en un editor de textos, podemos trabajar con
numeración y viñetas.
Etiqueta <ul> </ul>

Indica al navegador que cree una lista con viñetas o listas no ordenadas.
Etiqueta <ol> </ol>

Numeración o listas ordenadas, esta etiqueta predeterminada indica al navegador
que enumere la lista de elementos comprendidos dentro de las etiquetas <ol>
Etiqueta <li> </li>

Se usa para indicar al navegador que exhiba el texto que le sigue como un elemento de
línea de una lista. Sus tributos son:
Type Define la forma de la viñeta en las listas no ordenadas
Type=DISC, CIRCLE o SQUARE, son las opciones disponibles.
Para las listas ordenadas se usa:
Type=A Letras mayúsculas

Type=a Letras minúsculas
Type=I Números romanos grandes
Type=i Números romanos pequeños
13
Type=1 Números arábigos
Ejemplo8.
<html>
<head><title>NUMERACIÓN Y VIÑETAS</title></head>
<body background="C:\Program Files\Microsoft Office\CLIPART\PUB60COR\PH03224I.JPG">
<hr align=center width=50% size=10 color="yellow"><br>
<center><font size=15pt color=blue>NUMERACIÓN Y VIÑETAS CON HTML</font></center>
<br>
<hr align=center width=50%><br>
<font color="blue"><h1>LISTAS NO NUMERADAS O VIÑETAS</h1></font><br>

<h3>LENGUAJES DE PROGRAMACIÓN</h3>
<ul> <ul>
<li>Visual Basic 6.0</li>
<li>Delphi</li>
<li>Power Builder</li>
<li>C++ Builder</li>
</ul>
<br>
<font color="purple"><h1>OTRO EJEMPLO</h1></font><br>

<li>MICROSOFT VISUAL ESTUDIO 2012</li>
<ul type=disc>
<li>Microsoft Visual Basic</li>
<li>Microsoft Visual C#</li>
<li>Microsoft Visual J#</li>
<li>Microsoft Web Developer</li>
</ul></ul>
<br>
<ul>
<li>MICROSOFT OFFICE 2014</li>
<ul type=scuare>
14
<li>Microsoft WORD</li>
<li>Microsoft EXCEL</li>
<li>Microsoft ACCESS</li>
<li>Microsoft POWER POINT</li>
</ul>
</ul>
<br>
<hr align=left width=50%><br>
<center>
<img src="C:\Program Files\Microsoft Office\CLIPART\PUB60COR\PH02039U.BMP"
witdh=120 height=90 alt="imagen JPG">
<br>
</center>
<b><font color="gray" size=3pt face="arial">LISTAS NUMERADAS O NUMERACIÓN</font>

<br></b>
<ol>
<li>SISTEMA OPERATIVO WINDOWS</li>
<ol type=I>
<li>Windows Seven</li>
<li>Windows 8</li>
</ol>
<li>SISTEMA OPERATIVO LINUX</li>
<ol type=i>
<li>Mandrake</li>
<li>Fedora</li>
</ol>
</ol>
<center>
<font color="green" size=3pt face="comic sans MS">ITI BB - USB</font><br>
<font color="green" size=3pt face="comic sans MS">2015</font><br>
</center>
</body>
</html>
15
HIPERVÍNCULOS
El vínculo hipertextual es un texto, botón o imagen que al seleccionar nos lleva a otra
dirección URL, página web o recurso.
Etiqueta <a> </a>

La etiqueta <a> que viene de “ancla”, denota el inicio y </a> el final de una
instrucción que contiene alguna forma de vínculo o hipervínculo. Esta etiqueta permite
al usuario vincularse a otra ubicación dentro del mismo documento HTML, a otro sitio
WEB, o servidor FTP o enlace de correo electrónico, etc. Sus atributos son:
 HREF Recurso al cual se hace referencia el hipervínculo.

 NAME Especifica el nombre de la posición a donde apuntar.
 TARGET Destino de enlace (generalmente para páginas con Frames)
ENLACE A PARTE DE UN DOCUMENTO
<a href=”#referencia”>Texto de enlace</a>
 #referencia; indica la marca hacia la que hay que enlazar, ejemplo:

<a name=”referencia”>Texto</a>
 Texto de enlace; es el texto sobre el que se picará para establecer dicho

enlace con la marca.
ENLACE A RECURSO EXTERNO
<a href=”recurso externo”>Texto de enlace</a>
 Recurso externo; dirección URL. Ejemplo http://www.microsoft.com
ENLACE CON OTRA PÁGINA NUESTRA
<a href=”página.html”>Texto de enlace</a>
16
Ejemplo9.
<html>
<head><title>PÁGINA DE ENLACES</title></head>
<body bgcolor="#C0D9D9" text="#0000000" link="#000080" vlink="brown" alink="black">
<center><font size=15pt color=blue>ENLACES O HIPERVÍNCULOS</font></center>
<center>
<h3>ENLACE A PARTE DE UN DOCUMENTO</h3>
<a href="#internet">Qué es Internet</a><br>
<a href="#correo">Correo Electrónico</a>
<h3>ENLACE A OTRO PÁGINA NUESTRA</h3>

<a href="ejemplo2.html">Enlace a la página ejemplo2.html</a><br>
<a href="ejemplo3.html">Enlace a la página ejemplo3.html</a><br><br>
<h3>ENLACES EXTERNOS</h3>
<a href="http://www.google.com">Página de Google</a><br>
<a href="ftp://ftp.microsoft.com/pub/">FTP de Microsoft</a><br>
<a href="mailto:[email protected]">Enlace a una dirección de correo E-mail</a>
<br><br>
<a href="ejemplo5.html"><img src="1.jpg" width=80 height=50 alt="Enlace por imagen"></a><br>
</center>
<h3><a name="internet">Qué es Internet</a></h3>

Podíamos decir que Internet está formado por una gran cantidad de ordenadores que pueden
intercambiar información entre ellos. El Internet es una gran red mundial de ordenadores.
<h3><a name="correo">Correo Electrónico</a></h3>

El correo electrónico o E-mail es una forma de enviar mensajes entre ordenadores conectados
a través de internet.
El buzón tiene un tamaño fijo, por lo tanto si se acumulan muchos mensajes en el servidor y el
cliente, el buzón puede bloquearse. Aunque antes el servidor suele enviar un mensaje de aviso
para que vaciemos el buzón. Cuando nos dicen que una cuenta de correo es de, por ejemplo:
25 Mb se refieren al espacio del que disponemos en el buzón del servidor.
</center>
<center>
<font color="blue" size=3pt face="comic sans MS">ITI BB - USB</font><br>
<font color="blue" size=3pt face="comic sans MS">2015</font><br>
</center>
</body>
17
</html>
FRAMES
Abre la posibilidad de utilizar marcos y varias páginas en una sola.
Etiqueta <frameset> </frameset>

Define la disposición gráfica de los marcos en la pantalla.
 Rows Determina el alto de las filas

 Cols Determina el ancho de las columnas
 Framespacing Define el espacio entre los frames.
Etiqueta <frame> </frame>

Define un solo marco que forma parte del conjunto de marcos definidos en
<frameset>. Sus atributos son:
 Name Ofrece la capacidad de dar nombres a las ventanas FRAME, de modo
que puedan ser utilizados como destino de los hipervínculos.
 Noresize Indica que el usuario no puede redimensionar el marco.
 Scrolling Habilita una barra de desplazamiento para un marco. Existen tres
parámetros posibles SCROLLING=YES, SCROLLING=NO y
SCROLLING=AUTO que habilita la barra solo si es necesario.
 SRC Indica que exhiba en una marco el contenido de un documento HTML.
Si se desea que no haya un borde de separación entre los frames, se deben incluir en
el atributo FRAMEBORDER=0 dentro de la etiqueta FRAMESET. No todas las
versiones de los navegadores lo implementan.
Etiqueta <noframe> </noframe>

Etiqueta que es usada para desplegar un texto o una página alternativa cuando un
navegador no es capaz de desplegar los marcos.
Ejemplo10.
<html>
<head><title>Marcos en HTML</title></head>
18
<frameset rows="15%,*">
<frame src="documento_fila_superior" noresize scrolling="no">
<frameset cols="20%,*">
<frame src="documento_columna_izquierda" noresize scrolling="yes">

<frame src="documento_columna_derecha" noresize scrolling="no">
</frameset>
</frameset>
<noframes>
<center>Su navegador no puede desplegar frames.</center>
</noframes>
</html>
Ejemplo11.
<html>
<head><title>Página Principal-Frames</title></head>
<frameset rows="15%,*" frameborder=0>
<frame src="pagina1.html" scrolling="no" noresize>
<frameset cols="20%,*" frameborder=0>
<frame src="pagina2.html" scrolling="no" noresize>
<frame src="pagina3.html" scrolling="yes" noresize name="principal">
</frameset>
</frameset>
</html>
Página1.html
<html>
<head><title>Página1.HTML</title></head>
<body bgcolor="blue">
<font color="yellow" size="6">
<marquee>EJEMPLO DE APLICACIÓN DE FRAMES CON DISTINTAS
PÁGINAS</marquee>
</font>
</body>
</html>
19
Página2.html
<html>
<body bgcolor="red">
<font face="Bell MT" color="white" size="6">
<table width=100% bgcolor="white">
<tr><th bgcolor="#219CC5">PAGINAS</th></tr>
<tr><td bgcolor="#70B0E4"><a href="ejemplo1.html" target="principal">Ejemplo1</a></td></tr>
</table>
</font>
</body>
</html>
Página3.html
<html>
<body bgcolor="black" text="white">
<center><h1>ATARDECER DE LA CUMBRE ANDINA</h1>
<img src="ocaso.jpg" width="">
</center>
</body>
</html>
OTRAS ETIQUETAS ÚTILES.
A continuación se presenta algunas etiquetas que pueden ser útiles al momento de

elaborar las páginas HTML, en donde se detalla el objetivo de cada una de estas:
Etiqueta marquee (texto en movimiento)
20
Una marquesina (en inglés, marquee) es una ventana en la que se desplaza un texto.
Sólo son válidas para el Explorer de Microsoft (en el Netscape se verá como texto fijo).
La etiqueta básica es:
<marque>Texto que se desplaza</marquee>
Ejemplo12
<html>
<head><title>TEXTO EN MOVIMIENTO</title></head>
<body bgcolor="black" text="blue">
<center><h1> TEXTO EN MOVIMIENTO EN HTML</h1></center><br>
<marquee>Texto en movimiento por defecto</marquee>

<marquee behavior=alternate>Este texto se mueve de un lado a otro</marquee>
<marquee bgcolor="yellow">Esta marquesina tiene un fondo de color rosa</marquee>
<marquee direction=right>Este texto se dirige a la derecha</marquee>
<marquee direction=up>Este texto se dirige hacia arriba</marquee>
<marquee scrollamount=20>Texto que da grandes saltos</marquee>
<marquee scrolldelay=100>Texto con movimiento lento</marquee>
<font face="impact">
<marquee bgcolor="#FF7070">Este texto se ve con la fuente Impacto</marquee>
</font>
</body>
</html>
Etiqueta de comentarios en HTML 

Se trata de una etiqueta que puede ser introducida en cualquier parte del código y que
es utilizada para realizar acotaciones y/o comentarios.
Sintaxis de ejemplo:


Etiqueta de comentarios en <comment> </comment>
Se trata de una etiqueta que puede ser introducida en cualquier parte del código y que
es utilizada para realizar acotaciones y/o comentarios.
21
<comment> Los comentarios se introducen de esta manera</comment>
Etiqueta <pre> </pre>

La etiqueta <pre> significa texto “pre formateado” y se usa para conservar espacios y
saltos de línea en cuerpos de texto. Esta etiqueta resulta útil en el formato de un párrafo
completo que el autor quisiera que el navegador cliente lo exhibiese palabra por
palabra (como está escrito originalmente el texto).
<pre> El texto que usted observa,

Aparecerá; tal cual, se observa, incluidos los retornos de carro
</pre>
Etiqueta <s> </s> o <strike> </strike>

Instruye al navegador que tache el texto incluido entre las etiquetas.
<strike> Este texto está tachado </strike>
Etiqueta <strong> </strong>

Hace que el navegador exhiba el texto en negritas. Algunos navegadores muestran el
texto en cursivas.
<strong> Este texto está en negrita o cursiva </strong>
Etiqueta <sub> </sub>

Instruye al navegador que exhiba el texto especificado como subíndice.
22
Fórmula del agua: H<sub>2</sub>0 ==> (H2O)
Etiqueta <sup> </sup>

Instruye al navegador que exhiba el texto especificado como super índice.
Matemática: 2 * 2 = 2<sup>2</sup> ==> (22)
Etiqueta <bgsound> </bgsound>

Es utilizado para insertar sonido en nuestra página.
<bgsound src = macano.wav>
Nota.- Su función se aplica cuando la página se abre, juntamente con el sonido.
APLICACIÓN DE SONIDO EN HTML
Ejemplo13
<html>
<head><title>CURSO DE HTML</title></head>
<body bgcolor="black" text="green">
<center><h1>RECURSOS AUDIOVISUALES EN HTML</h1></center><br>
Esta es una muestra de cómo se inserta sonido en nuestra

página a través de un bot&oacuten.<br><br>
<a href="3 NO_WOMAN_NO_CRY___BOB_MARLE.mp3"> <button type="button">

<fontcolor="blue"><b>NO_WOMAN_NO_CRY___BOB_MARLE</b></font></button></a><br>
<a href="1.mp3"> <button type="button">
<font color="blue"><b>EVANECENSE</b></font></button></a><br>
<a href="2.mp3"> <button type="button"> <font color="blue"><b>ALELUYA EN INGLES</b>
</font></button></a><br><br>
Esta es una muestra de cómo se inserta SONIDO en nuestra

23
página por enlace de texto.<br><br>
<a href="3 NO_WOMAN_NO_CRY___BOB_MARLE.mp3">

<font color="pink"><b>NO_WOMAN_NO_CRY___BOB_MARLE.mp4</b></font></a><br>
<a href="1.mp3"><font color="pink"><b>EVANECENSE.mp3</b></font></a><br>
<a href="2.mp3">
<font color="pink"> <b>ALELUYA EN INGLES.mp3</b></font></a><br><br>
Esta es una muestra de cómo se inserta VIDEO en nuestra

página por enlace de texto.<br><br>
<a href="1 Justo A Tiempo Extended Version.wmv">
<font color="cian"><b>FUNKY.wmv</b></font></a><br>
<a href="2 YouTube - We Are The World 25 For Haiti - Official Video.mp4">
<font color="cian"><b>HAYTI.mp4</b></font></a><br>
<a href="Adele Someone Like You (live) (Subtitulada al Espanol).wmv">
<font color="cian"><b>ADELE SIMONE.wmv</b></font></a><br>
</body>
</html>
24

HTML

Cargado por

Copyright:

Formatos disponibles

HTML

Cargado por

Información del documento

Descripción original:

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

HTML

Cargado por

Copyright:

Formatos disponibles

Manual básico de HTML Ing.

Cleto Alberto Vargas Patsi

Internet es un medio que no precisa de mucho conocimiento, el prerrequisito inmediato

Para la aplicación de los ejemplos de este manual usted necesita:

 Un navegador de Internet (Internet Explorer)

Una Etiqueta cumple su función de la siguiente manera:

<Nombre de la etiqueta> Apertura de una etiqueta siempre entre “< >”

</Nombre de la etiqueta> Cierre de la etiqueta siempre entre “</ >”

ESTRUCTURA BÁSICA DE UNA PÁGINA WEB

 <html> </html> Indica al navegador que el documento texto, que está

Ejemplo1: Crear una página HTML, que visualice un ejemplo de bienvenida.

CÓMO ESCRIBIR UN DOCUMENTO HTML

 Abrir el programa Bloc de Notas

 Clic en menú Archivo

Nota.- El ícono tendrá la siguiente forma: (Navegador Internet Explorer)

CÓMO VIZUALIZAR EL ARCHIVO HTML

 Clic en Inicio, Programas

 Doble clic en el archivo ejemplo1.html

ETIQUETA <body> </body>

Bgcolor define el color de fondo de la página

¿CÓMO SE UTILIZAN LOS COLORES EN HTML?

Existen dos formas para aplicar colores a una página web:

1. Se especifica el color deseado directamente con el nombre del color en inglés:

NOMBRE COLOR NOMBRE COLOR

#C0C0C0 Plomo #4F2F4F violeta

TEXTO DESCRIPCIÓN PANTALLA

&aacute; a con acento á

Nota.- En los navegadores actuales se puede escribir directamente el acento en la

La etiqueta <br> instruye al navegador cliente que inserte un salto de línea en un

La etiqueta <hr> (acrónimo de horizontal rules), dibuja de manera predeterminada una

 align establece que la regla se alinee a la izquierda, centro o

Documento HTML con fondo NEGRO y texto BLANCO <br><br>

Regla horizontal alineado al centro, un ancho de 10%

<hr align=center width=50% color="yellow"><br>

Regla horizontal alineado a la izquierda de color púrpura, <br>

<h1> </h1> al <h6> </h6> (acrónimos de “heading 1…6”) son

 Align Permite ubicar el encabezamiento a la izquierda, centro o derecha de

<h1 align="center">TAMAÑOS DE LETRA EN HTML</h1><br>

UBICACIÓN, FORMATO Y ATRIBUTOS DE TEXTO

Etiqueta <center> </center>

Etiqueta <b> </b>

Etiqueta <u> </u>

Etiqueta <i> </i>

Etiqueta <font> </font>

 Color Determina el color que se aplicará al texto.

En tiempos <u>inmemoriales</u> se erigieron montañas, se desplazaron ríos, se

Poblamos esta sagrada <b><u>madre tierra</u></b>con rostros diferentes, entonces

<font color="orange" size=8pt face="microsoft sans serif">TARIJA</font><br>

Hasta este momento solamente se ha trabajado solamente con texto. Comencemos a

<img src=”imagen.jpg” width=120 height=94 alt=”descripción”>

Una práctica aconsejable, es la de dimensionar en pixeles, todas las imágenes con

<font color="red" size 5 pt>nombre_cuenta@_servidor es decir:

<font color="pink" size=6pt face="comic sans MS">Imágenes insertadas en la página

En HTML también podemos incluir arreglos de tablas representados por filas y

Etiqueta <table> </table>

Align Establece la alineación de la tabla o texto mediante

Bgcolor Establece el color de fondo de las celdas de la tabla.

Etiqueta <th> </th>

á a con acento á

Esta es una muestra de cómo se inserta sonido en nuestra

Esta es una muestra de cómo se inserta SONIDO en nuestra

página por enlace de texto.<br><br>

Esta es una muestra de cómo se inserta VIDEO en nuestra