MANUAL DE HTML BASICO
nextor788429 de Octubre de 2013
7.954 Palabras (32 Páginas)229 Visitas
MANUAL DE HTML BASICO
ING. CLAUDIA RODRIGUEZ
1
MANUAL DE HTML BASICO
ING. CLAUDIA RODRIGUEZ
2
INDICE
ESTRUCTURA BÁSICA DE UN DOCUMENTO EN HTML ................................................ 3
TEXTO ............................................................................................................................... 4
IMÁGENES ........................................................................................................................ 7
ENLACES (LINKS) ............................................................................................................. 8
ESPACIOS Y SALTOS DE LINEA ................................................................................... 10
ATRIBUTOS DEL TEXTO ................................................................................................ 12
LISTAS DE ELEMENTOS ................................................................................................ 13
IMAGENES ...................................................................................................................... 15
ENLACES ........................................................................................................................ 17
TABLAS ........................................................................................................................... 18
FRAMES $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$.$$$$.20
MULTIMEDIA $$.$$$$$$$$$$$$$$$$$$$$$$ $$$.$$......28
.
MANUAL DE HTML BASICO
ING. CLAUDIA RODRIGUEZ
3
ESTRUCTURA BÁSICA DE UN DOCUMENTO EN HTML
El lenguaje html trabaja con etiquetas (tags) que tienen diferentes usos. Por ejemplo
<TITLE> </TITLE> sirve para colocar el nombre de la página en el marco superior del
navegador. La mayoría de las etiquetas necesitan cerrarse y modifican la información
contenida dentro de ellas. Algunas como <BR> no necesitan cerrarse. Después se
explicará mejor el significado de éstas y otras más.
Todos los documentos en html deben tener la siguiente estructura:
<HTML>
<HEAD>
<TITLE>Mi página</TITLE>
</HEAD>
<BODY>
Aquí va todo el contenido del programa.
</BODY>
</HTML>
Este formato debe seguirse siempre como una regla. El uso de las demás etiquetas y el
contenido del programa irá dentro de la etiqueta <BODY> </BODY>. El título va a ser el
nombre que le quieras dar a tu página.
*** Ahora comienza lo interesante, vamos a empezar a construir nuestra página de
Internet. Entra al editor de textos, carga tú archivo prueba.htm (que por ahora debe estar
vacío) y teclea lo siguiente:
<HTML>
<HEAD>
<TITLE>Historia de Internet</TITLE>
</HEAD>
<BODY>
En esta página explicaremos brevemente los inicios de la red de redes.
</BODY>
</HTML>
*****************
Lo que estamos haciendo aquí es generando el esqueleto de nuestra página. Estas son
las etiquetas básicas para cualquier diseño. El título de esta página-ejemplo es Historia de
Internet y aparece en el marco superior del navegador. Como se acaba de mencionar,
dentro de las etiquetas <BODY> </BODY> desarrollaremos todo nuestro contenido.
Pulsa Guardar en el editor de textos para grabar en prueba.htm lo que acabamos de
codificar. Recuerda que ya has aprendido cómo visualizarlo.
MANUAL DE HTML BASICO
ING. CLAUDIA RODRIGUEZ
4
TEXTO
Ya sabemos cómo es la estructura de un documento en html. Es el momento de empezar
a manipular los elementos de nuestra página. El elemento fundamental en Internet es el
texto. Aunque el auge de los últimos años se ha debido principalmente al contenido
multimedia, (gráficos, sonido y video) el texto sigue siendo la base de todo documento en
la red.
A diferencia de los procesadores de texto comerciales (Word, WordPerfect, etc.), la
manipulación de texto en html está un tanto limitada y es necesario utilizar ciertas
etiquetas para modificar el texto a nuestro gusto. Enseguida se muestran algunas de las
etiquetas más populares en el manejo de texto.
<PRE> </PRE>
Permite que el texto que se encuentre dentro de ella se visualice tal como se creó en la
página origen, respetando espaciado, salto de línea, salto de párrafo, tabulación, etc.
<BR>
Realiza un salto de línea. Esta etiqueta no necesita cerrarse.
<P>
Realiza un salto de párrafo. Tampoco necesita cerrarse.
<CENTER> </CENTER>
Posiciona el texto seleccionado en el centro de la página. También puede aplicarse a
gráficos.
<Hx> </Hx>
Se utiliza para resaltar encabezados. La x son números que van del 1 al 6, siendo el 1 el
encabezado más grande y resaltado, el 2 un poco menos y así sucesivamente.
Ejem:
<H1>Encabezado</H1>
<H2>Encabezado</H2>
<H3>Encabezado</H3>
<H4>Encabezado</H4>
<FONT SIZE=x> </FONT>
Sirve para cambiar el tamaño de las letras. La x es un número que indica el tamaño de la
letra y va del 1 al 7. El número predeterminado es el 3.
Texto en <B>Negritas</B>
Texto en <I>Itálica</I>
MANUAL DE HTML BASICO
ING. CLAUDIA RODRIGUEZ
5
Texto <U>subrayado</U>
<ADDRESS>
Dirección
</ADDRESS>
<HR>
Se utiliza como línea separadora. Tiene algunos atributos que la modifican. WIDTH indica
La longitud, SIZE indica la altura, ALIGN la colocación de la línea y NOSHADE que no
tenga relieve y además le añade un color gris más fuerte.
Ejem:
<HR>
<HR WIDTH=20% ALIGN=RIGHT SIZE=7>
<HR WIDTH=250 ALIGN=CENTER SIZE=5 NOSHADE>
*** Vamos a utilizar en nuestra página alguna de estas etiquetas para modificar texto.
Carga prueba.htm y teclea lo siguiente:
<HTML>
<HEAD>
<TITLE>Historia de Internet</TITLE>
</HEAD>
<BODY>
<h2>En esta página explicaremos brevemente los inicios de la red de redes.</h2><br>
<h3>Introducción</h3><p>
El mundo de las telecomunicaciones ha tenido un crecimiento acelerado en los últimos
años, en el que <b>Internet</b> ha sido pieza clave. Hace unas décadas atrás, cuando
el Departamento de Defensa de los Estados Unidos desarrollaba una red de
comunicaciones que fuera capaz de soportar un ataque externo durante la guerra fría,
nadie se imaginó que después de transferir el control de esa red llamada
<u>ARPANET</u> a los investigadores universitarios, ésta crecería exponencialmente
involucrando significativamente a toda la sociedad.
<hr>
<font size=2>Documento creado en Febrero del 2000</font>
</BODY>
</HTML>
*****************
COLOR
Con el fin de hacer un documento más agradable y atractivo a la vista, es necesario en
algunas ocasiones resaltarlo con un color diferente. Esto se puede aplicar al fondo, a un
enlace, al texto, a una palabra o a una letra.
MANUAL DE HTML BASICO
ING. CLAUDIA RODRIGUEZ
6
Para poder representar un color en html, se deben utilizar 6 números hexadecimales.
Ejem:
ROJO FF0000
VERDE 00FF00
AZUL 0000FF
MAGENTA FF00FF
VIOLETA 9900DD
ROSA CLARO FFDDFF
Aunque se ve un poco complicado en realidad no lo es. Lo que te recomiendo hacer es
jugar con las combinaciones hasta que encuentres la que te gusta. Tomando los colores
básicos de la tabla anterior puedes variar los números (0-9) o las letras (A-F) y ver cómo
cambian las tonalidades.
Html también acepta los nombres de los colores en lugar de los números hexadecimales,
por ejemplo "RED" en lugar de "FF0000", o "BLUE" en lugar de "0000FF", pero tiene la
limitante de que solamente reconoce unos cuantos colores.
Se pueden seleccionar los colores deseados desde el inicio del documento en la
etiqueta <BODY> </BODY> por ejemplo:
<BODY BGCOLOR="#FFFFFF" TEXT="#FF0000" LINK="#00AEFF">
donde:
BGCOLOR es el color del fondo.
TEXT es el color del texto.
LINK es el color del enlace.
Ojo: En este ejemplo se ve que antes del color siempre se coloca un signo "#".
También se puede cambiar el color sólo para un segmento deseado como:
<FONT COLOR="#FF0000">Texto</FONT>
*** Sigamos con nuestro ejemplo; cargamos el archivo prueba.htm y le agregamos lo
siguiente:
<HTML>
<HEAD>
<TITLE>Historia de Internet</TITLE>
</HEAD> <BODY BGCOLOR="#0FF0FF">
<h2>En esta página explicaremos brevemente los inicios
...