Scribd
Cargar
245 vistas

Manual Básico de HTML

El documento presenta un manual básico de HTML. Explica que HTML fue creado en 1990 por Tim Berners-Lee para facilitar el acceso a documentos de investigación entre científicos de diferentes universidades. Luego describe las etiquetas y estructura básicas de una página web en HTML, incluyendo las etiquetas <html>, <head>, <title> y <body>. Finalmente, explica cómo agregar formato de texto, encabezados, líneas horizontales y más usando etiquetas como <br>, <hr> y <h1-h6>.

Cargado por

Pedro Avila
Derechos de autor
© Attribution Non-Commercial (BY-NC)
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
245 vistas

Manual Básico de HTML

El documento presenta un manual básico de HTML. Explica que HTML fue creado en 1990 por Tim Berners-Lee para facilitar el acceso a documentos de investigación entre científicos de diferentes universidades. Luego describe las etiquetas y estructura básicas de una página web en HTML, incluyendo las etiquetas <html>, <head>, <title> y <body>. Finalmente, explica cómo agregar formato de texto, encabezados, líneas horizontales y más usando etiquetas como <br>, <hr> y <h1-h6>.

Cargado por

Pedro Avila
Derechos de autor
© Attribution Non-Commercial (BY-NC)
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 18

MANUAL BASICO DE HTML

CREACION DE PAGINAS WEB CON HTML PURO


Ing. Pedro López Ávila

Manual Básico de HTML

HTML

Para abreviar una larga historia, podemos decir que un científico llamado Tim Berners-Lee inventó
HTML allá por 1990. El objetivo era facilitar a científicos de diferentes universidades el acceso a los
documentos de investigación de cada uno de ellos. El proyecto obtuvo un éxito mucho mayor del
que Tim Berners-Lee nunca hubiese llegado a imaginar. Al inventar HTML, este científico sentó las
bases de la web tal y como la conocemos hoy día.

HTML es un lenguaje que hace posible presentar información (por ejemplo, investigaciones
científicas) en Internet. Lo que ves al visualizar una página en Internet es la interpretación que
hace el navegador del código HTML.

HTML es el acrónimo de HyperText Markup Language (Lenguaje de Marcado de Hipertexto) y es


el lenguaje que se utiliza para crear las páginas web. Este lenguaje indica a los navegadores cómo
deben mostrar el contenido de una página web.

El lenguaje html contiene dos partes:

 el contenido, que es el texto que se verá en la pantalla de un ordenador,


 y las etiquetas y atributos que estructuran el texto de la página web en encabezados,
párrafos, listas, enlaces, etc. y normalmente no se muestra en pantalla.

Estructura básica de una página WEB


Una página web está compuesta de 2 partes: el encabezamiento y el cuerpo de la página.
Paralelamente a esto, existen tres etiquetas fundamentales, las mismas que deben estar incluidas
en el archivo HTML de manera obligatoria. Estas tres etiquetas fundamentales son:
<html> </html> Indica al navegador que el documento texto que está leyendo es un documento
HTML. Esta etiqueta se abre al inicio del archivo y se cierra al final del mismo.
<head> </head> Acá se detalla el encabezado de la página WEB. Esta etiqueta se abre luego de
<html>.
<body> </body> Cuerpo de la página donde se despliega el contenido global. Esta etiqueta se abre
luego de cerrar el encabezamiento con </head> y se extiende hasta el final de la página,
cerrándose antes de </HTML>.
Ejemplo 1:
<html>
<head> </head>
<body>
MANUAL BASICO DE HTML
CREACION DE PAGINAS WEB CON HTML PURO
Ing. Pedro López Ávila

Bienvenidos al curso de HTML


</body>
</html>
Importante:
Como se ve en el ejemplo 1. Toda etiqueta abierta debe cerrarse. En caso de no cerrarse el error
podría causar confusión al navegador.

Etiqueta: <title> </title>


Esta etiqueta va en la parte del encabezamiento de la página web, es decir en el HEAD, y define
en su contenido el título de la página web, mismo que aparecerá en la parte superior izquierda de
la pantalla de su navegador.
Sin cerrar nuestro navegador de Internet, volvemos al editor de texto e incluimos el campo
<title> entre las etiquetas de apertura y cierre del encabezado (head).
Ejemplo 2:
<html>
<head> <title>Curso de HTML</title> </head>
<body>
Bienvenidos al curso de HTML
</body>
</html>
Etiqueta <body> </body>
Todo el texto, las imágenes y el formato visibles al usuario deben encontrarse entre las etiquetas
<body>...</body>. Esta etiqueta cuenta con los siguientes atributos:
• Bgcolor define el color de fondo de la página
• Text define el color del texto de la página
• Link define el color de los vínculos en 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
• Bgproperties define el movimiento vertical del fondo.IE
Los atributos se incluyen en la etiqueta de apertura, separados por un espacio.

¿Cómo se utilizan los colores en HTML?


Se pueden llegar a tener 16 millones de colores en una página web.
MANUAL BASICO DE HTML
CREACION DE PAGINAS WEB CON HTML PURO
Ing. Pedro López Ávila

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: Ej.: blue,
green, yellow
2. Se especifica el color deseado mediante números hexadecimales mediante la siguiente
estructura:
#RRVVAA
El color tiene un signo de numeral # antecediendo a los 6 números.
Existen dos números para cada color principal: rojo, verde y azul.
Cada uno de los números varía hexadecimal mente {0,1,2....,9,A,B,...F}.

Ejemplos de Colores:
#RRVVAA Color #RRVVAA Color
#FFFFFF Blanco #000000 Negro
#FF0000 Rojo #00FF00 Verde
#0000FF Azul #FF00FF Magente
#00FFFF Cyan #FFFF00 Amarillo
#70DB93 Agua Marino #000080 Azul Marino
#FF7F00 Coral #A62A2A Café
#C0C0C0 Plomo #4F2F4F Violeta

Utilizando estos datos, haremos una página con fondo celeste y letras negras. Usaremos para este
efecto los atributos bgcolor y text. :
Ejemplo 3:
<html>
<head> <title>Curso de HTML</title> </head>
<body bgcolor=”#C0D9D9” text=”#000000”>
Bienvenidos al curso de HTML
</body>
</html>

Texto en HTML
Una vez que ya se tiene una idea de cómo funcionan la etiqueta de encabezamiento y parte de la
etiqueta de definición del cuerpo de la página, trabajemos con el texto.
MANUAL BASICO DE HTML
CREACION DE PAGINAS WEB CON HTML PURO
Ing. Pedro López Ávila

HTML fue creado en principio para el alfabeto en inglés, sin embargo se buscaron modos para
mostrar también caracteres o símbolos denominados especiales.
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:


&acute; Acento ´
&ntilde; eñe ñ
&quot; Comillas Dobles "
&deg: Grados °
&aacute; a con acento á
&eacute; e con acento é
&nbsp; espacio en blanco

La idea básica para acentos y signos latinos es combinar dos teclas. Para lograr una o con acento
debemos combinar una o y un acento:
&oacute; ó
Para entender un poco más este proceso, veamos el siguiente ejemplo:
Ejemplo 4:
<html>
<head> <title>Curso de HTML</title> </head>
<body bgcolor=”#C0D9D9” text=”#000000”>
Bienvenidos al curso de HTML
Cuando la temperatura es menor a 15&deg;c hace bastante fr&iacute;o.
Este es un ejemplo de p&aacute;gina WEB :)
</body>
</html>

Etiqueta <br>
La etiqueta <br> instruye al navegador cliente que inserte un salto de línea en undocumento HTML.
La etiqueta <BR> tiene el mismo efecto que un retorno de carro en una máquina de escribir. Es
una etiqueta especial, pues no precisa de etiqueta de cierre.
MANUAL BASICO DE HTML
CREACION DE PAGINAS WEB CON HTML PURO
Ing. Pedro López Ávila

Etiqueta <hr>
La etiqueta <hr> dibuja de manera predeterminada una regla horizontal alineada automáticamente,
con una apariencia de tercera dimensión. Esta etiqueta especial, porque no necesita de cierre,
tiene los siguientes atributos:
• Align establece que la regla se alinee a la izquierda, centro o derecha
LEFT,CENTER o RIGHT
• NOSHADE quita el sombreado predeterminado de la regla
• WIDTH permite especificar el ancho de la regla (en pixeles o porcentaje)
• SIZE permite especificar el alto de la regla (en pixeles)
Ejemplo 5:
<html>
<head> <title>Curso de HTML</title> </head>
<body bgcolor="#C0D9D9" text="#000000">
Bienvenidos al curso de HTML<br>
<hr align=center width=50%><br>
Cuando la temperatura es menor a 15&deg;c hace
bastante fr&iacute;o.<br>
<hr align=left width=25% size=5><br>
Este es un ejemplo de p&aacute;gina WEB :)<br>
</body>
</html>

Encabezados
Las etiquetas <h1> </h1> al <h6> </h6> (acrónimos de “heading 1..6”) son encabezados del
cuerpo del texto. El encabezamiento <h1> nos proporciona las letras de mayor tamaño. Notará que
si usamos una etiqueta de encabezamiento, automáticamente se incluirá un retorno de carro al
final del mismo. La etiqueta tiene el siguiente atributo:
• Align Permite ubicar el encabezamiento a la izquierda, centro o derecha de la
pantalla (LEFT, CENTER,RIGHT)
Ejemplo 6:
<html>
<head> <title>Curso de HTML</title> </head>
<body bgcolor="#C0D9D9" text="#000000">
<h1 align="center">
Bienvenidos al curso de HTML</h1><br>
MANUAL BASICO DE HTML
CREACION DE PAGINAS WEB CON HTML PURO
Ing. Pedro López Ávila

<hr align=center width=50%><br>


<h2>Bienvenidos</h2>
Cuando la temperatura es menor a 15&deg;c hace
bastante fr&iacute;o.<br>
<hr align=left width=25% size=5><br>
Este es un ejemplo de p&aacute;gina WEB :)<br>
</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 un texto con negrillas.
Etiqueta <u> </u>
Etiqueta que posibilita resaltar un texto con subrayado.
Etiqueta <i> </i>
Etiqueta que permite resaltar el texto con inclinación itálica.
Recuerde que puede combinar entre si todas estas etiquetas. Veamos un ejemplo para demostrar
el uso de las últimas 4 etiquetas que se vieron.

Ejemplo 7:
<html>
<head> <title>Curso de HTML</title> </head>
<body bgcolor="#C0D9D9" text="#000000">
<h1 align="center">
Bienvenidos al curso de HTML</h1><br>
<hr align=center width=50%><br>
<h2>Bienvenidos</h2>
Cuando la temperatura es menor a 15&deg;c hace
bastante fr&iacute;o.<br>
<hr align=left width=25% size=5><br>
Este es un ejemplo de p&aacute;gina WEB <b><i>:)</i></b><br>
<b>Este texto esta con negrillas</b><br>
<u>Este texto esta con subrayado</u><br>
<i>Este texto esta con inclinaci&oacute;n it&aacute;lica</i><br>
MANUAL BASICO DE HTML
CREACION DE PAGINAS WEB CON HTML PURO
Ing. Pedro López Ávila

Este <b>texto <i>cuenta <u>con un </u>combinado</i> de</b> todo.<br>


</body>
</html>
Etiqueta <font> </font>
Esta etiqueta proporciona al autor un medio de personalizar el texto con respecto al tipo de
fuente, tamaño y color. Atributos:
• Color determina el color que se aplica al texto
• Size determina el tamaño relativo del texto. Los tamaños válidos son del 1 al 7,
siendo el predeterminado el 3 y el más grande el 1.
• Face asigna una fuente o tipo de letra.
Ejemplificando, introduciremos lo siguiente: Bolivia. Note que la primera B es más grande que
el demás texto. Usaremos el tamaño 7 para la letra B y el tamaño estándar (3) para las demás
letras.

Ejemplo 8:
<html>
<head> <title>Curso de HTML</title> </head>
<body bgcolor="#C0D9D9" text="#000000">
<h1 align="center">
Bienvenidos al curso de HTML</h1><br>
<hr align=center width=50%><br>
<h2>Bienvenidos</h2>
Cuando la temperatura es menor a 15&deg;c hace
bastante fr&iacute;o.<br>
<hr align=left width=25% size=5><br>
Este es un ejemplo de p&aacute;gina WEB <b><i>:)</i></b><br>
<b>Este texto esta con negrillas</b><br>
<u>Este texto esta con subrayado</u><br>
<i>Este texto esta con inclinaci&oacute;n it&aacute;lica</i><br>
Este <b>texto <i>cuenta <u>con un </u>combinado</i> de</b> todo.<br>
<font color="red"><font size=7>B</font>o</font><font color="yellow">
li</font><font color="green">via</font><br>
</body>
</html>
MANUAL BASICO DE HTML
CREACION DE PAGINAS WEB CON HTML PURO
Ing. Pedro López Ávila

Imágenes en HTML
Hasta este momento se ha trabajado solamente con texto. Comenzemos a introducir gráficos
ennuestra página HTML.
Se deben tener dos consideraciones importantes para trabajar con gráficos:
Los únicos formatos, que por ahora soportan los visualizadores son: *.gif y *.jpg o *.jpeg.
Las imágenes no deben ser de tamaño grande por que el visualizador o navegador puede demorar
demasiado en bajarlas.
Acá trabajaremos también con el atributo background de la etiqueta <body> que había quedado
pendiente.
La idea de trabajar con un fondo en una página web, es la misma que tener un fondo en nuestro
entorno Windows. El archivo puede estar ubicado en la misma carpeta o bien en otra que contenga
solo gráficos. Trate de que el color de fondo de la página (que ya no aparecerá) sea parecido al
color principal de la imagen que usará como fondo. Si es necesario re acomode los colores de
texto y vínculos definidos en <body>.
Supondremos tenemos un gráfico llamado “fondo.gif” para el ejemplo 8 que como notará será re
formulado en función a utilizar las nuevas etiquetas.
Importante
En Internet por lo general una mayúscula no es igual a una minúscula. Tome en cuenta esto al
utilizar y hacer referencia a archivos. Como sugerencia es bueno tener todos los archivos con
minúsculas.
Etiqueta <img>
Se trata de otra etiqueta especial, pues no necesita de etiqueta de cierre. Esta etiqueta instruye al
navegador para que exhiba la imagen especificada. El formato básico para incluir un gráfico es:
<img src=”imagen.ext”>
No es necesario re dimensionar en forma permanente un archivo gráfico para exhibirlo en
contextos variables; sin embargo, el autor de HTML puede indicar al navegador que re dimensione
la imagen especificando los siguientes atributos:
• Src identifica la imagen que se desplegará.
• Height para redimensionamiento de gráfico (en pixeles o en porcentaje)
• Width para redimensionamiento de gráfico (en pixeles o en porcentaje)
A la imagen se le puede aplicar un borde que se hace notorio especialmente cuando se trata de
una imagen que además es un hipervínculo:
• Border Definido en pixels
La imagen también puede alinearse con respecto al texto:
• ALIGN Alineación, puede ser: TOP, MIDDLE, BOTTOM, LEFT y RIGHT
MANUAL BASICO DE HTML
CREACION DE PAGINAS WEB CON HTML PURO
Ing. Pedro López Ávila

En caso de que la imagen no pueda exhibirse, se puede desplegar un texto:


• ALT Especifica el texto alterno
Es a partir de este ejemplo, que se va a realizar una nueva página, la misma que llamaremos
pag2.html o bien pude ser grabada con otro nombre.
Supondremos contamos con un gráfico llamado foto.jpg.

Ejemplo 9:
<html>
<head> <title>Curso de HTML</title> </head>
<body bgcolor="#C0D9D9" text="#000000" background="fondo.gif">
<center><h1>
Bienvenidos al curso de HTML</h1></center><br>
<hr width=50%><br>
<h2>Informaci&oacute;n General</h2>
Este curso muestra los conceptos b&aacute;sicos del uso de etiquetas e instrucciones en la
elaboraci&oacute;n de documentos <b><i><font color="#000080">HTML</font></i></b>.<br><br>
<center><img src="foto.jpg" border="1" alt="Foto de Claudia"></center>
<br>
Es muy importante saber ubicar los gr&aacute;ficos y combinar de buena manera los colores para
brindar una buena imagen
<b><i><font color="red">:)</font></i></b>.<br><br>
Una p&aacute;gina WEB es muy importante, pues provee a nuestro trabajo una ventana al
mundo.<br>
</body>
</html>
Realice el proceso de grabado con el nuevo nombre de página “pag2.html” y cargue la nueva
página en su navegador.
Tablas
En HTML también podemos incluir arreglos de tablas. Se deben utilizar varias etiquetas:
Etiqueta <table></table>
Señala el inicio y final de una tabla. Sus atributos son:
• 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
MANUAL BASICO DE HTML
CREACION DE PAGINAS WEB CON HTML PURO
Ing. Pedro López Ávila

• BorderColor Asigna un color al 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 titulo para la tabla
• Cellpadding Establece la cantidad de espacio libre junto al contenido de una celda
• 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 principales:
• Colspan especifica el número de celdas que cubre el encabezado
• Align Determina la posición del texto del titilo
Etiqueta <tr> </tr>
Indica al navegador que exhiba el texto dentro de una fila; puede también interpretarse como la
etiqueta que define filas.
• Align Alineación del texto/objetos en toda la fila
Etiqueta <td> </td>
La etiqueta de datos de la tabla, es la que identifica a las columnas o celdas específicas de una
tabla. Atributos principales:
• Align Alineación del texto/objeto de la celda
• Bgcolor Color de fondo de la celda
• Background imagen de fondo de una celda
• Width Ancho de la celda/columna con respecto al ancho de la tabla
Solo precisa definir el ancho en la primera celda de la columna.
Recuerde que dentro de una celda, usted puede insertar desde texto o un gráfico hasta una tabla
entera.
Ejemplo 10:
<html>
<head> <title>Curso de HTML</title> </head>
<body bgcolor="#C0D9D9" text="#000000" background="fondo.gif">
<center><h1>
Bienvenidos al curso de HTML</h1></center><br>
<hr width=50%><br>
<h2>Informaci&oacute;n General</h2>
MANUAL BASICO DE HTML
CREACION DE PAGINAS WEB CON HTML PURO
Ing. Pedro López Ávila

Este curso muestra los conceptos b&aacute;sicos del uso de etiquetas e instrucciones en la
elaboraci&oacute;n de
documentos <b><i><font color="#000080">HTML</font></i></b>.<br><br>
<center><img src="foto.jpg" border="1" alt="Foto de Claudia"></center>
<br>
Es muy importante saber ubicar los gr&aacute;ficos y combinar de buena manera los colores para
brindar una buena imagen
<b><i><font color="red">:)</font></i></b>.<br><br>
Una p&aacute;gina WEB es muy importante, pues provee a nuestro trabajo una ventana al
mundo.<br>
<br><center>
<table width=80% align=center border=3>
<tr><th colspan=3>Directorio Telef&oacute;nico</th></tr>
<tr align=center>
<td width=40% bgcolor="#C0C0C0">
Nombre
</td>
<td width=30% bgcolor="#C0C0C0">
Teléfono
</td>
<td width=30% bgcolor="#C0C0C0">
E-Mail
</td>
</tr>
<tr>
<td>
Jos&eacute; Rodr&iacute;guez
</td>
<td>
223454
</td>
<td>[email protected]</td>
</tr>
<tr>
<td>
MANUAL BASICO DE HTML
CREACION DE PAGINAS WEB CON HTML PURO
Ing. Pedro López Ávila

Carolina Nu&ntilde;ez
</td>
<td>
453444
</td>
<td>[email protected]</td>
</tr>
</table>
<br></center>
</body>
</html>
Grabe este archivo con el nombre pag2.html sobre escribiendo el archivo anterior.
Consejo:
Puede usar tablas sin borde (usando BORDER=0 en la sentencia <table>) para ubicar gráficos y
texto de forma elegante.

Numeración y viñetas
En HTML todo es posible, y tal cual en un editor de texto podemos trabajar con numeración y
viñetas, lo podemos hacer acá.
Etiqueta <ul> </ul>
Indica al navegador que cree una lista con viñetas no ordenada.
No solamente usada para fines de numeraciones y viñetas, sino también para fines de sangría o
tabulaciones.
Etiqueta <ol> </ol>
Listas ordenadas, esta etiqueta predeterminada indica al navegador que numera 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 en
una lista. Atributos:
• Type Especifica el tipo para listas ordenadas Type=A Usa letras
mayusculas, TYPE=a emplea letras minúsculas, Type=I Usa
números romanos grandes, Type=i usa números romanos pequeños
y Type=1 usa números arábigos.
Type también puede servir para definir la forma de la viñeta en las
listas no ordenadas. Type=DISC, CIRCLE y SQUARE son las
MANUAL BASICO DE HTML
CREACION DE PAGINAS WEB CON HTML PURO
Ing. Pedro López Ávila

opciones disponibles.
• Value Indica que se inicie la numeración a partir del número especificado.
Creamos una nueva página para el siguiente ejemplo:
Ejemplo 11:
<html>
<head> <title>Curso de HTML</title> </head>
<body bgcolor="#C0D9D9" text="#000000" background="fondo.gif">
<center><h1>
Bienvenidos al curso de HTML</h1></center><br>
<hr width=50%><br>
<h2>Debemos a comprar</h2><br>
<ul>
<li>Camisas para Jos&eacute;</li>
<li>Loci&oacute;n para Daniel</li>
</ul><br>
<h2>Estudiar para ma&ntilde;ana</h2><br>
<ol>
<li type=a>Geometr&iacute;a</li>
<li>ciencias Sociales</li>
</ol><br>
<h2>Actividades de la semana</h2><br>
<ol>
<li type=i>Asistir a la Universidad</li>
<li>Comprar Disco</li>
<li>Llevar el auto al mec&aacute;nico</li>
</ol><br>
<h1>Objetivos</h1>
<ul>El uso de estas etiquetas tambi&eacute;n puede ayudar a mover el texto en base a
tabulaciones o sangr&iacute;as de texto, para diferenciar parrafos o textos de los
encabezamientos.
</ul>
</body>
</html>
Grabamos el nuevo ejemplo con el nombre “pag3.html”. Hasta este punto tenemos 3 páginas
HTML.
MANUAL BASICO DE HTML
CREACION DE PAGINAS WEB CON HTML PURO
Ing. Pedro López Ávila

Hipervínculos
Un 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 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, a un servidor FTP, enlace de correo
electrónico,... Atributos:

• HREF Recurso al cual se hace referencia el hipervínculo


• NAME Especifica el nombre de la posición a donde apuntar
• TARGET Destino del enlace (generalmente para páginas con Frames)
Por ejemplo, desde una nueva página, que llamaremos pag4.html, crearemos enlaces a las 3
páginas anteriores y además otros enlaces importantes.
En este ejemplo, aplicaremos también los atributos para colores de los vínculos de la etiqueta
Body.

Ejemplo 12:
<html>
<head> <title>P&aacute;gina de enlaces</title> </head>
<body bgcolor="#C0D9D9" text="#000000" background="fondo.gif"
link="#000080" vlink="magenta" alink="black">
<center><h1>
<a name="tope"></a>
Enlaces</h1><br>
<img src="foto.jpg" alt="Foto de Claudia"><br><br>
<a href="index.html">P&aacute;gina Principal
o
P&aacute;gina Uno</a><br>
<a href="pag2.html">P&aacute;gina Dos</a><br>
<a href="pag3.html">P&aacute;gina Tres</a><br>
<br>
<a href="http://www.bolivia-internet.com/">Bolivia en Internet</a><br>
<a href="ftp://ftp.microsoft.com/pub/">FTP de Microsoft</a><br>
MANUAL BASICO DE HTML
CREACION DE PAGINAS WEB CON HTML PURO
Ing. Pedro López Ávila

<a href="mailto:[email protected]">Env&iacute;a comentarios


sobre este manual por E-Mail</a><br>
<br><br>
<a href="#tope">De vuelta arriba</a>
</center>
</body>
</html>
Podrá notar que los enlaces de la parte inferior hacen referencia a recursos que se encuentran en
Internet. Reemplazando la dirección E-Mail del ultimo enlace, podrá crear un enlace a su E-Mail.
El último enlace hace referencia a una porción de la misma página, que fue definida al inicio de la
página HTML. Esta parte es útil para accesos a partes diversas de una sola página.

Frames
Ofrece 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.
Atributos:
• Rows Determina el alto de las filas
• Cols Determina el ancho de las columnas.
• Framespacing Espacio entre frames

Etiqueta <frame></frame>
Define un solo marco que forma parte del conjunto de marcos definidos en <frameset>.Sus
atributos son:
• Marginheight Determina que tanto espacio vertical (en pixeles) existe entre el objeto ubicado en
un marco, y los extremos superior o ingerior de este.
• MarginWidth Determina que tanto espacio horizontal (en pixeles) existe entre el objeto ubicado en
un marco, y los extremos izquierdo o derecho de éste.
• 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 un marco el contenido de un documento HTML.
MANUAL BASICO DE HTML
CREACION DE PAGINAS WEB CON HTML PURO
Ing. Pedro López Ávila

Etiqueta <noframes></noframes>
Etiqueta que es usada para desplegar un texto o una página alternativa cuando un navegador no
es capaz de desplegar los marcos.
Veamos un ejemplo que resume todo esto. Debemos crear un nuevo archivo html, al cual
llamaremos: frames.html.
Ejemplo 13:
<html>
<head> <title>P&aacute;gina de frames</title> </head>
<frameset COLS="20%,*" frameborder=0 framespacing=0 border=0>
<frame name="izquierda" src="pag4.html" marginwidth="0"
marginheight="0" scrolling="auto" frameborder="no">
<frameset ROWS="30%,*" frameborder=0 framespacing=0 border=0>
<frame name="superior" src="pag2.html" marginwidth="0"
marginheight="0" scrolling="auto" frameborder="no">
<frame name="principal" src="pag3.html" marginwidth="0"
marginheight="0" scrolling="auto" frameborder="no">
</frameset>
</frameset>
<noframes>
<center>
Su navegador no puede desplegar frames.
</center>
</noframes>
</html>
Una vez que cargue la nueva página frames.html podrá ver los marcos que se crearon.
Notará que los enlaces del marco derecho aparecen en el mismo marco, lo que debemos hacer es
redireccionar estos enlaces usando el atributo target en el ejemplo pag4.html que quedaría de esta
manera:

Ejemplo 14:
<html>
<head> <title>P&aacute;gina de enlaces</title> </head>
<body bgcolor="#C0D9D9" text="#000000" background="fondo.gif"
link="#000080" vlink="magenta" alink="black">
MANUAL BASICO DE HTML
CREACION DE PAGINAS WEB CON HTML PURO
Ing. Pedro López Ávila

<center><h1>
<a name="tope"></a>
Enlaces</h1><br>
<img src="foto.jpg" alt="Foto de Claudia"><br><br>
<a href="index.html" target="principal">P&aacute;gina Principal
o
P&aacute;gina Uno</a><br>
<a href="pag2.html" target="principal">P&aacute;gina Dos</a><br>
<a href="pag3.html" target="principal">P&aacute;gina Tres</a><br>
<br>
<a href="http://www.bolivia-internet.com/" target="principal">Bolivia
en Internet</a><br>
<a href="ftp://ftp.microsoft.com/pub/" target="principal">FTP de
Microsoft</a><br>
<a href="mailto:[email protected]">Env&iacute;a comentarios
sobre este manual por E-Mail</a><br>
<br><br>
<a href="#tope">De vuelta arriba</a>
</center>
</body>
</html>
Guarde este archivo con el nombre pag4.html y haga una actualización de la página en su
navegador para notar los cambios.

Marquesinas (Marquees)

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 .

La etiqueta básica es:

<MARQUEE> Texto que se desplaza </MARQUEE>

Como no hemos añadido ningún atributo dentro de la etiqueta, el comportamiento de la


marquesina es el que tiene por defecto: ocupa todo el ancho de la pantalla, tiene la altura de una
línea y el texto se desplaza lentamente de derecha a izquierda. Vamos a ver los distintos atributos
que modifican su apariencia y comportamiento:

WIDHT, HEIGHT
MANUAL BASICO DE HTML
CREACION DE PAGINAS WEB CON HTML PURO
Ing. Pedro López Ávila

Ajustan la anchura y altura, respectivamente, de la marquesina. Pueden ser igual a un número de


pixels, o a un porcentaje de la pantalla. Ejemplo:

<MARQUEE WIDTH=50% HEIGHT=60> Esta marquesina ocupa el 50% del ancho de la pantalla y
tiene una altura de 60 pixels </MARQUEE>

ALIGN
Modifica el alineamiento del texto que rodea a la marquesina, que puede ser TOP (arriba),
MIDDLE (en medio) o BOTTOM (abajo). Ejemplo:

<MARQUEE WIDTH=50% HEIGHT=60 ALIGN=BOTTOM>La palabra "¡Hola!" estará alineada con


la parte inferior de la marquesina</MARQUEE> ¡Hola!

BEHAVIOR
Este atributo (que quiere decir en inglés comportamiento) sirve para definir de qué manera se va a
efectuar el desplazamiento del texto. Si es igual a SCROLL (el valor por defecto), el texto aparece
por un lado, se desplaza hasta el otro hasta desaparecer por él, y vuelve a empezar (como los
casos que hemos visto anteriormente). Si es igual a SLIDE, aparece por un lado y se desplaza
hasta llegar al otro extremo, y se para ahí. Si es igual a ALTERNATE se desplaza alternativamente
hacia un lado y otro, siempre dentro de los límites de la marquesina. Ejemplo:

<MARQUEE BEHAVIOR=ALTERNATE>Este texto se mueve a un lado y otro, sin


desaparecer</MARQUEE>

BGCOLOR
Con este atributo se modifica el color de fondo de la marquesina:

<MARQUEE BGCOLOR="#FF7070"> Esta marquesina tiene un fondo de color rosa </MARQUEE>

DIRECTION Este atributo sirve para modificar la dirección hacia la que se dirige el texto. Por
defecto es LEFT (izquierda). Se puede hacer que el texto se dirija hacia la derecha igualando este
atributo a RIGHT.

Ejemplo:

<MARQUEE DIRECTION=RIGHT> Este texto se dirije hacia la derecha </MARQUEE>

SCROLLAMOUNT
Define la cantidad de desplazamiento del texto en cada movimiento de avance, expresado en
pixels. Cuanto mayor es el número, más rápido avanza. Ejemplo:

<MARQUEE SCROLLAMOUNT=50> Doy saltos grandes </MARQUEE>

SCROLLDELAY
Define el tiempo entre cada movimiento de avance, expresado en milisegundos. Cuanto mayor es
el número más lento avanza. Ejemplo:

<MARQUEE SCROLLDELAY =200> Espero mucho entre cada salto </MARQUEE>

También podría gustarte