Curso HTML

mailxmail - Cursos para compartir lo que sabes
Curso de HTML
Autor: Felipe Javier Mckeever
[http://www.mailxmail.com/curso-html]
Descubre miles de cursos como éste en www.mailxmail.com 1

Presentación del curso

La elaboración de una página Web, puede realizare de varias maneras, desde escribir
una a una todas las instrucciones en un procesador de textos sencillo, hasta utilizar
programas en que no se necesita saber ninguna comando de html, (Hyper Text
Markup Language) ya que estos automáticamente elaboran todos los códigos, uno
de estos programas es Microsoft Publisher, y muchos más que se pueden encontrar
en Internet,. Además la mayoría de programas como Word y Power Point ya incluye
la opción de grabar como página Web.
Visita más cursos como este en mailxmail:

[http://www.mailxmail.com/cursos-informatica]
[http://www.mailxmail.com/cursos-programacion]
¡Tu opinión cuenta! Lee todas las opiniones de este curso y déjanos la tuya:
[http://www.mailxmail.com/curso-html/opiniones]
Cursos similares
Cursos Valoración Alumnos Vídeo
Algoritmos y lenguaje C
Este curso pretende dar a conocer las explicaciones más simples del trabajo de los 2.840
ordenadores.puedes descubrir cada paso que realizan, cómo lo realizan, qué es l...
[13/01/06]
Desarrollo de aplicaciones para dispositivos

inalámbricos (J2ME) 2.533
Curso que abarca el nivel de principiante a intermedio de la programación j2me para
móviles y pdas, así como la elaboración de páginas web para los mismos. inc...
[14/07/05]
SQL
Sql (structured query language) es un lenguaje de programación para acceder y manipular 24.968
bases de datos. sql surgió de un proyecto de ibm en el que investigaba e...
[10/05/04]
Procesos en C. Sincronización (segunda parte)

Curso de informática sobre sincronización de procesos en c, que, en su segunda parte, 40
desarrolla el tema de la comunicación entre los procesos de un sistema informático; ...
[21/10/08]
Bases de Datos en C#
El curso incluye el código necesario para acceder a las bases de datos y realizar consultas 1.743
de selección y de acción....
[05/04/07]

1. Introducción
[ http://www.mailxmail.com/curso-html/introduccion]
Los Programas para generar páginas Web los podemos clasificar en dos grupos, en
los que podemos identificar las ventajas y desventajas de cada uno de ello.
Programas para novatos:
Nota:
Si se emplea Word para realizar una página Web, se recomienda no utilizar
tabuladores, y no utilizar sangrías francesas. Utilice tablas para producir el mismo
efecto que las sangrías.
Programas para expertos y profesionales.

2. Consejos para el diseño de una página Web

[ http://www.mailxmail.com/curso-html/consejos-diseno-pagina-web]
Organización del contenido de la página
Un tema grande a tratar se debe de dividir en subtemas, colocando cada uno de
ellos en páginas distintas, relacionadas unas a otras por medio de Links. Un grupo
de páginas relacionadas recibe el nombre de sitio.
Si se coloca bastante información en una pagina, esta debe de tener un menú o
índice propio, y en cada tema debe de haber opciones de retorno al menú y a los
temas siguientes y anteriores.
Incluir gráficos, y/o gif animados en todas las páginas.
Es conveniente hacer paginas vistosas por lo que es recomendable que tenga
gráficos, sin embargo hay que tener cuidado de no utilizar demasiados, o gráficos
muy grandes, ya que haría que la página se cargara muy lenta.
Cuando tenemos necesidad de colocar un gran número de gráficos, la técnica a
seguir es reducir las imágenes y colocarlos así en la página, elaborando un código
para permitir ampliar la imagen del gráfico ó mostrar una página adicional con el
gráfico de gran tamaño.
Cuando se necesite mostrar una imagen grande, se presenta primero en la pagina
una imagen reducida dándole el link o enlace a una imagen grande (al oprimir click
a la imagen se carga una pagina con la imagen amplificada.)
Elección de Gráficos
Para diseñar una página Web, debemos de contar con imágenes que no ocupen una
gran cantidad de Bytes, ya que eso hace que la página sea demasiado lenta para
cargar, y provocaría que el visitante se desespere y salga de ella.
Se recomienda realizar un balance entre calidad y velocidad de carga, tratando
siempre de tener las imágenes de calidad aceptable que ocupen poco espacio.
Las imágenes con mucha calidad ocupan más espacio que las que no la tienen.
Se recomienda que en la pagina de inicio o home page, sea aproximadamente de 40
k incluyendo las imágenes. Para que los visitantes que tienen conexiones lentas no
se desesperen y cancelen la carga de la página.
Términos importantes:
HTML
Abreviatura de Hyper Text Markup Language
WWW
Abreviatura de World Wide Web
FTP
Abreviatura de File Transfer Protocol. (Protocolo de Transferencia de archivos. Es el
empleado por programas que sirven para transmitir (enviar) o recibir información a
un servidor. Es el utilizado para enviar paginas a un servidor.
URL

Uniform Resource Locator. Este termino se refiere a una dirección de Internet, o una
dirección de FTP.

3. Elementos del diseño y publicación de una página

[ http://www.mailxmail.com/curso-html/elementos-diseno-publicacion-pagina ]
Web Diseño del programa
- Análisis del Problema y Algoritmo
- Codificación o escritura del programa
- Agregarle presentación al programa
- Con imágenes, sonido, Gif animados, Scrips de Java y Applets.
- Agregarle contadores de visitas.
- Depuración.
- Programamación de Java Scrips y Applets (Avanzado)
- Alojar el sitio o la página en un servidor
- Por medio de un programa Ftp se sube la página al servidor
- Publicación
- Agregar la página en los índices de los motores de búsqueda.
- Intercambio de Banners
Requisitos para el diseño profesional de una página Web
- Computadora pentium con modem
- Conexión a Internet
- Browser (Navegador)
- Editor HTML
- Programa de diseño gráfico
- Programa de retoque fotográfico
- Programas de utilerías
- Programa Ftp.
- Colección de Fondos, Viñetas, Gráficos y Gráficos Gif.
- Direcciones de Internet de utilerías.
Herramientas para el diseño de páginas Web

4. Elementos Básicos y estructura de una pagina Web

[ http://www.mailxmail.com/curso-html/elementos-basicos-estructura-pagina-web]
Directivas
Piense en directivas ó etiquetas como hablar con el browser, o sea es la manera de
darle instrucciones.
Abajo se dan los siguientes ejemplos de directivas:
<HTML>
</HTML>
La primera directiva es de inicio y la siguiente es una directiva del cierre.
Para hacer una directiva de cierre, simplemente agregan un signo / a la directiva de
inicio.
La mayoría de directivas, pero no todas tienen una directiva del cierre.
Las directivas o comandos se pueden realizar en mayúsculas o minúsculas.
Estructura básica de una página Web
Explicación de la estructura básica
Directiva <HTML>
Indica a la computadora que se trata de un programa HTLM.
Todo programa HTML tiene dos partes El encabezado especificado por la directiva
<HEAD> y el cuerpo indicado por la directiva <BODY>
Directiva <HEAD>
Dentro se colocan las directivas para proporcionar información de la página a los
buscadores robóticos de Internet y otras directivas como <TITLE>, <META>,
<SCRIPT> y <STYLE> que a continuación se describen:
Directiva <TITLE>
Enseña el nombre de la página que se muestra en la barra de título del navegador
(Browser) y no el nombre con que se guarda el archivo.
<TITLE>Titulo de la página</TITLE>

Directiva <META>
Proporciona información para que los programas de búsqueda (como google.com,
yahoo.com, altavista.com) encuentren nuestra página.
A continuación se da un ejemplo de la aplicación de la directiva META:
Directiva <SCRIPT> (Este no es lenguaje HTML, y solo se dará un ejemplo)

Es empleada cuando agregamos programas con el lenguaje JAVA SCRIP, para incluir
efectos visuales en la página y acciones.
Ejemplo: Las instrucciones descritas abajo, cambian el texto de los enlaces a rojo al
pasar el Mouse sobre ello.
<style>

</style>
Directiva <STYLE>
Se utiliza para colocar Hojas de Estilo en Cascada (CSS),
Ejemplo: Las instrucciones descritas abajo, indican los atributos y características de
la fuente de los textos de la página
<STYLE>
P {font-family:Arial; font-size:12pt; color:red; background-color:lime}
</STYLE>
Escriba las siguientes instrucciones en un editor de textos simple como Word pad ó
Write o block de notas.
Ejemplo 1: Saltos de línea y de párrafos

5. Resultado
[ http://www.mailxmail.com/curso-html/resultado]
Regla 1
Los retornos de carro que pongo no se respetan en el navegador,
Lo único que separa a los textos son las directivas < P > y la directiva < B r >
Siendo < P > la directiva de final de párrafo
Siendo < B > la directiva de final de línea
Si se desea dejar obtener varias líneas en blanco, no basta con repetir varias veces la
directiva <p>, o <br>, sino es necesario escribirlas juntas, o sea, por cada línea en
blanco que queramos se escribe <p><br>
Regla 2: Todas las directivas deben de estar Anidadas, o sea una dentro de otra.
A excepción de las directivas abiertas como <br> que no necesitan directiva de
cierre
Ejemplo:
Grabar la página (en el directorio practicas-básicas)

Al terminar de escribir el programa grábelo con el nombre de pagina1.html. Se le
puede dar cualquier nombre al archivo mientras la extensión sea html.
Importante: Los nombres de archivo no deben de tener espacios en blanco y estar
escritos en minúscula

6. ¿Cómo abrir una página Html del disco duro

desde Internet Explorer?
[ http://www.mailxmail.com/curso-html/como-abrir-pagina-html-disco-duro-internet-explorer]
Para visualizar el resultado de tu primer pagina en:
a) Para Internet Explorer, debes de hacer lo siguiente: Entrar a Internet Explorer
Seleccionar el archivo, y dar click en el botón abrir
B) Para Netscape Navigator: debes de hacer lo siguiente
Entrar a Netscape Navigator: Seleccionar el archivo, y dar click en el botón abrir
Teniendo el siguiente resultado:
Directiva <BODY>
Define el cuerpo del texto del documento, es la sección principal en la cual va el
contenido de nuestra página.
La directiva <BODY> admite varios atributos, los más importantes son:
BGCOLOR=color de fondo
TEXT= color del texto de la página
LINK=color del texto o link de enlace
VLINK= color del texto o link de enlace visitado
ALINK= color del texto o link de enlace activo
BACKGROUND="imagen de fondo"
Ejemplo:
<BODY BGCOLOR=black text=white link=blue vlink=red>
Fija el color del fondo negro, el texto blanco, el enlace azul y el enlace visitado rojo

7. Dar Formato Básico a una página Web

[ http://www.mailxmail.com/curso-html/dar-formato-basico-pagina-web]
Colores de fondo y texto de la página
Para cambiar el color de fondo de la página
El comando BGCOLOR para cambiar el color del fondo va dentro de la directiva
inicial de <Body>, de la siguiente manera:
<BODY BGCOLOR="Código del color">
Aplicando el codigo de color celeste
<BODY BGCOLOR="#80ffff">
El comando BGCOLOR, es el que se emplea para cambiar el color del fondo.
El código "#80ffff" da el color celeste, los códigos de los colores nos lo dan los
editores de página Web,
Para asignar el color del texto de la página
El comando TEXT para cambiar el color del texto también va dentro de la directiva
inicial de <Body>, al junto con la de BGCOLOR de la siguiente manera.
<BODY TEXT ="Codigo del color">
Aplicando el codigo de color azul
<BODY TEXT="#0000ff">
El comando TEXT, es el que se emplea para cambiar el color del texto de la página.
Agrega dentro de la directiva <BODY> el siguiente código a la primer ejemplo
(pagina1.htlm) <BODY BGCOLOR="#80ffff" TEXT="#0000ff"> Visualiza los cambios
en el browser. Como se puede ver el color del fondo de la página es celeste y el
color del texto es azul Graba el cambio con el nombre pag1-1.html
Resultado
Para colocar una imagen de fondo.
El comando para colocar una imagen como fondo de la página Web, va dentro de la
directiva inicial de <Body>, de la siguiente manera.
<body BACKGROUND="swirlies.gif">
Simplemente cambia el comando BGCOLOR, por el comando BACKGROUND.

El comando BACKGROUND Se utiliza para colocar una imagen como fondo de la
página.
La imagen swirlies.gif, es la que se aplicara como fondo en este ejemplo.
Modifica el comando <body>, el siguiente código del primer ejemplo (pagina1.htlm)
<BODY BACKGROUND="swirlies.gif" TEXT="#0000ff">> Graba los cambios con el
nombre pag1-2.html Visualiza los cambios en el browser.
Resultado

8. Títulos
[ http://www.mailxmail.com/curso-html/titulos ]
Para aplicar Titulos
Las directivas para aplicar titulos son muy sencillas.
Titulo 1, la Directiva es: <H1>TEXTO DEL TITULO 1</H1>
Estilo de los caracteres
Existen dos tipos de estilo de caracteres, el estilo lógico y el estilo físico.
El estilo físico literalmente cambia los caracteres, no así el estilo lógico que solo
cambia la apariencia de los mismos. En el estilo lógico la apariencia de los caracteres
varia de acuerdo a cada Browser, ya que cada uno de ellos tiene una forma diferente
de tratar el texto.
Estilo fisicos
Para aplicar Negritas (bold)
<B>texto en negritas</B>
Para aplicar Cursivas (Italic)
< I >texto en cursivas< / I >
Para aplicar Subrayado. (Underline)
< U >texto subrayado< / U >
Para aplicar letra grande
<BIG> Letras grandes< / B I G >
Para aplicar letra pequeña
<SMALL>Letras pequeñas</SMALL>
Para aplicar subíndices
<SUB>texto en subíndice < / S U B >
Para aplicar índices (Superíndices)
<SUP> Superíndice < / S U P >
Para aplicar letra tipográfica
< T T >Texto< / T T > (Este tipo de letra se parece al de una maquina de escribir.)
Para aplicar letra tachada
< S >Texto< / S >
El efecto de los estilos se acumula, o sea que al aplicar un segundo estilo no se
cancela el anterior sino se acumula, por ejemplo al aplicar negritas y luego cursivas,
el texto obtiene ambos estilos negritas y cursivas. Por lo tanto se pueden aplicar
varios estilos juntos.
Estilos lógicos
Para aplicar texto fuerte.
<STRONG>texto</STRONG>
Para aplicar texto enfatizado
< E M >texto < / E M >

Para aplicar texto de terminal
<KBD>texto</KBD>
Para aplicar texto literal o de cita
<CITE>texto < / C I T E >
Para aplicar texto de codigo HTML (sin que esté se ejecute)
<CODE>texto código</CODE>
Para aplicar texto de definición
< D F N >texto < / D F N >
Para aplicar texto identado o con sangria
<BLOCKQUOTE>texto</BLOCKQUOTE>
Para aplicar texto ejemplo
<SAMP>texto </S A MP >
Para centrar textos o párrafos
Aplique la directiva <center> Texto centrado </center>
Usualmente a los encabezados se les aplica centrado, por ejemplo:
<center><h1>Texto del título centrado</h1></center>
Segundo ejemplo: Escriba las siguientes instrucciones en un editor de textos
simple como word pad ó write o block de notas.
Ejemplo 2 (Encabezados, y Estilos, y alineación)
Resultado
Grábalo con el nombre de página2.html en el directorio practicas-formatos y
visualiza los resultados

9. Tipos y tamaños de fuentes

[ http://www.mailxmail.com/curso-html/tipos-tamanos-fuentes ]
Para cambiar el tamaño de la fuente
Existen dos formas de cambiar el tamaño de letra a la página, una manera es con
directiva (cerrada) <font> ....<\font>, la cual se utiliza para cambiar el tamaño de
letra por párrafos, la otra forma con directiva (abierta) <BASEFONT SIZE="valor
numérico">, se utiliza para cambiar el tamaño de letra por defecto de toda la
página.
Para cambiar el tamaño de la letra todo el documento.
Se utiliza la directiva <BASEFONT SIZE="valor numérico"> como en el ejemplo
<BASEFONT SIZE="5">
Hace que el documento adopte un tamaño de letra tamaño 5 ror defecto para todo
el texto que aparezca después de esta directiva. Si lo ponemos después de la
directiva <BODY> (inmediatamente después a ésta), la modificación del tamaño de
letra afecta a todo el documento:
<BODY> <BASEFONT SIZE="5"> ....
Para cambiar el tamaño de la fuente por párrafos.
Se utiliza las siguientes directivas:
<FONT SIZE=No. de fuente> Texto < / F O N T >
Las fuentes tienen 7 tamaños:
Las podrás Observar en el siguiente ejemplo:
En un archivo nuevo realiza la siguiente codificación dentro de la sección de cuerpo
de la página en el tercer ejemplo (página3.html)
El resultado se verá como sigue

Nota:
Si se utilizan títulos, en un texto determinado, no se emplea <font size=No.> para
el mismo texto, ya que el titulo da la orden para un tamaño determinado de letra y
<font size=No.> estaría dando la orden para otro tamaño de letra.
La directiva <FONT> tiene otros parámetros COLOR="color del texto" y
FACE="nombre de la fuente"
Ejemplo: <font size="3" color=blue face="times new roman">Texto de color azul,
tamaño 3, de fuente tipo times new roman</font>
Para cambiar el tamaño de la fuente por párrafos. (segundo método)
El tamaño de la fuente por defecto (preestablecido) es de tamaño 3.
Si deseamos aumentar el tamaño al siguiente, tenemos las siguientes dos maneras:
<FONT SIZE="4">.....</FONT>
1er. Método
(El tamaño estándar es 3 + 1
<FONT SIZE="+1">...</FONT>
nos da tamaño 4)
2do. Método
Otro ejemplo de comandos quivalentes
<FONT SIZE="2">.....</FONT>
1er. Método
(El tamaño estándar es 3 - 1
<FONT SIZE="-1">...</FONT>
nos da tamaño 2)
2do. Método

10. Texto Preformateado

[ http://www.mailxmail.com/curso-html/texto-preformateado]
Las directivas (<PRE>...</PRE>) permite visualizar el texto tal y como se encuentre
colocado entre estas 2 directivas, con el formato que deseemos, con los retornos de
carro sin ser especificados por <BR>, y las tabulaciones
NOTA:
No es recomendable usar tabulaciones, en su lugar es preferible poner espacios,
(por medio de la barra de espaciar), ya que no todos los browsers tienen
preestablecidos el mismo espacio de tabulador y podría modificarnos la distribución
del texto dependiendo del navegador empleado.
Escribe y graba con el nombre de pagina4.html en el directorio
practicas-formatos la codificación del siguiente ejemplo.
Visualiza detenidamente los resultados
Ejemplo: 4
Nota: Se recomienda realizar la tabla en Word, para posteriormente pegarla en

arachnophilia
Resultado
Alineación de párrafos. (derecha, izquierda y centro y justificado)
Estas propiedades son de la directiva <P>....< / P >
Alinean el texto en la pantalla a la izquierda, derecha, centrado y justificado.
<P ALIGN= "center"> texto centrado < / p >
<P ALIGN= "left"> texto alineado a la izquierda < / p >
<P ALIGN= "right"> texto alineado a la derecha < / p >
<P ALIGN= "justify"> texto justificado < / p >
Escribe y graba con el nombre de pagina5.html en el directorio
practica-formato la codificación del siguiente ejemplo.
Ejemplo 5

Resultado
El resultado se verá como sigue

11. Líneas Divisorias

[ http://www.mailxmail.com/curso-html/lineas-divisorias]
Son Separadores de texto en forma de Líneas Horizontales.
La directiva es: < H R > (Horizontal Rule) y es una directiva abierta.
<HR>
Por defecto nos da una línea de una altura=1 y una anchura=100%
Pudiendo cambiar alto, ancho alineación y color de la misma.
Ejemplo:
<HR SIZE=5 WIDTH="75%" COLOR="#ff0000" ALIGN = CENTER>
SIZE="valor Permite indicar el grosor de la línea en

numerico" cuestión. (valor dpor defecto es 1)
Permite indicar la anchura en pixels o el tanto
WIDTH="valor
por ciento del ancho de la pantalla que
numérico"
ocupará la línea.(valor por defecto es 100%
Determina la forma de alinear la línea en la
ALIGN="LEFT | pantalla (sus valores respectivos son
CENTER | RIGTH" izquierda, derecha y centro). Por defecto el
valor, es de alineado a la izquierda.)
Escribe y graba con el nombre de pagina6.html en el directorio practica-formato la
codificación del siguiente ejemplo.
Ejemplo6:
Resultado
Resumen de directivas y atributos de formatos

12. Creación de listas en HTML

[ http://www.mailxmail.com/curso-html/creacion-listas-html]
Estas listas son parecidas a numeración y viñetas en WORD, teniendo los siguientes
tipos de lista.
Listas numeradas (ordenadas) Listas con viñetas (desordenadas) Listas de
definición Listas anidadas
Listas numeradas
Estas listas generan una numeración automática, (Números arábigos, romanos, o
letras) tienen la directiva cerrada <OL> ...</OL>(Ordered Lists) que significa listas
ordenadas, y se utiliza para iniciar la lista.
Dentro del bloque de la lista cada elemento debe de llevar la directiva abierta < L I >
(list item) que significa elemento de lista
La estructura de una lista ordenada es la siguiente.
Ejemplo 7:
Escribe y graba con el nombre de pagina7.html en un nuevo directorio de nombre

practica listas, la codificación del ejemplo anterior.
Atributos de listas
TYPE="Carácter"
Si se desea cambiar el tipo de numeración se emplea el atributo TYPE="Carácter",
este debe de escribirse dentro de la directiva < O L >, o sea < O L TYPE="Carácter">
Teniendo los siguientes tipos.
<OL TYPE ="A">
Con este atributo la lista comienza con la letra A y el resto de los elementos con las
siguientes letras del alfabeto.
<OL TYPE ="a">
Con este atributo la lista comienza con la letra a y el resto de los elementos con las
siguientes letras del alfabeto. Es igual que la lista anterior con la única diferencia
que es en minúscula.
<OL TYPE ="1">
Con este atributo la lista numerada comienza con el número 1 . Este es el atributo
por defecto.

<OL TYPE ="I">

Con este atributo la lista numerada comienza con el número romano I.
<OL TYPE ="i">
Con este atributo la lista numerada comienza con el número romano i. Igual que la
lista anterior pero en minúscula.
VALUE ="valor numérico"
Es el atributo que se utiliza para indicar el valor que debe de tener el elemento de la
lista numerada., este atributo se coloca dentro de la directiva < L I >, quedando de la
siguiente manera. <LI VALUE="valor numérico">
START="número"
Es el atributo se utiliza para indicar el valor inicial que debe de tener la lista
numerada. Por defecto es 1.
Ejemplo: 8 (TYPE )
Copia la codificación de la lista anterior y realiza los cambios
Graba los cambios y visualiza detenidamente los resultados

Ejemplo: 9 (START y VALUE )

En el ejemplo anterior el atributo START="10", ordena al browser iniciar la
numeración en 10 y el atributo VALUE ="20" cambio el numero del elemento a 20.
Ejemplos: 10 (TYPE, START VALUE)


En el ejemplo anterior el atributo TYPE="I", indica que la numeración es romana, el
atributo START="5", ordena al browser iniciar la numeración en el numero V y el
atributo VALUE ="10" cambio el numero del elemento a X.

13. Listas con viñetas

[ http://www.mailxmail.com/curso-html/listas-vinetas ]
Estas listas generan viñetas de diferentes tipos, muy parecidas a las que se utilizan
en Word, estas listas son de tipo desordenadas.
Estas listas tienen la directiva cerrada <UL>...<\UL> (unordered lists), significa
listas desordenadas y se utiliza para iniciar este tipo de lista.
La estructura de una lista con viñetas (desordenada) es la siguiente.
Ejemplo 11:

TYPE="Nombre_de_Viñeta"
Si se desea cambiar el tipo de viñeta se emplea el atributo TYPE="Nombre_de_Viñeta",
TYPE="Nombre_de_Viñeta", este debe de escribirse dentro de la directiva < U L >, o
sea <UL TYPE="Viñeta">
Nota: Los nombres de las viñetas debe escribirse forzosamente en minúsculas
Se tienen los siguientes tipos.
<UL TYPE ="disc">
Este es el atributo que muestra un circulo con relleno negro, es el que da por
defecto.
<UL TYPE ="circle">
Este es el atributo que muestra un circulo vacío.
<UL TYPE ="square">
Este es el atributo que muestra un pequeño cuadro negro.
Ejemplo 12


14. Listas Anidadas

[ http://www.mailxmail.com/curso-html/listas-anidadas ]
Las listas anidadas, son listas de varios niveles que pueden combinar diferentes
tipos de listas.
Ejemplo 13
Inicia un nuevo archivo y escribe la codificación siguiente, grábalo con el
nombre de practica 8 en el directorio practicas-listas

15. Listas de definición

[ http://www.mailxmail.com/curso-html/listas-definicion ]
Estas listas generan listas de elementos con sangrías y poseen una directiva cerrada
< D L > . . . < / D L > (definition list, lista de definición), la que se utiliza para dar inicio a
la lista de definición.
Para colocar el termino se utiliza la directiva abierta < D T > (Directiva de termino)
Para colocar la definición se utiliza la directiva abierta < D T > (directiva de definición).
Ejemplo 14
Inicia un nuevo archivo y escribe la codificación siguiente, grábalo con el
La directiva < D L >, tiene el parámetro compact, que se emplea para dar sangrías
francesas al texto, con la salvedad que solo funciona de esa manera con temimos
pequeños, para poder entender esto se presenta el siguiente ejemplo.
Ejemplo 15 escribe la codificación siguiente

El espacio que se obtiene de sangría es pequeño ( de 3 a 5 caracteres, dependiendo
del tamaño de ellos y del tamaño de letra del browser).
Observe en el resultado que en el primer párrafo la definición paso a la segunda
línea. En el segundo párrafo la definición sigue inmediatamente al termino FTP

16. Creación de sangrías

[ http://www.mailxmail.com/curso-html/creacion-sangrias]
Se puede obtener el mismo resultado que las listas de definición con la directiva
abierta <DIR>...</DIR> , y con la directiva <blockquote>.
<BLOCKQUOTE>...</BLOCKQUOTE> Es Texto indentado.
<DIR>...</DIR> funciona como un tabulador.
Ejemplo 16
Copia la codificación del ejemplo 14 y realiza los cambios

Ejemplo 17
Copia la codificación anterior y realiza los cambios
Como se puede apreciar el resultado de ambos ejemplos es igual.

Ejemplo 18
inicia un nuevo archivo y escribe la codificación siguiente, grábalo con el


17. Formato de imágenes

[ http://www.mailxmail.com/curso-html/formato-imagenes]
Los navegadores soportan dos tipos de formatos de imágenes GIF y JPEG.
Estos formatos permiten comprimir los datos de las imágenes, de manera que sean
menos lentas de cargar.
Características de las imágenes GIF.
1.- Soportan
Genera gráficos con movimiento
Animaciones.
2 . - Soportan Esto hace que se muestre el fondo sobre el
Transparencias: que se apoya la imagen
Funciona de manera que conforme se va
3 . - Efecto de
cargando va mostrando la imagen más
difusionado o
nítidamente, hasta alcanzar la resolución
entrelazado:
total de la misma
Se emplea en dibujos, no se recomienda
4.- Solo soporta
este formato para fotografías ya que estas
255 colores.
requieren muchos colores
Esto es muy útil para empleo de Internet, ya
5.- Comprime las que la velocidad de transmisión es muy
imágenes lenta para imágenes, sonido y vídeo, ya que
estos suelen ser archivos grandes.
Características de las imágenes JPEG
Soporta un máximo de 16 Se utiliza para imágenes de

millones de colores. fotografías
Este formato tiene mejor
Alta compresión de imágenes.
compresión que el Gif.
En resumen se utiliza el formato GIF, para imágenes animadas e imágenes con
transparencia. El formato JPEG, se utiliza para fotografías.
Algunos de los programas que se recomiendan para la edición de imágenes:
Los que puedes encontrar y bajar de Internet se indican con *
Edición de imágenes Adobe Photoshop Transparencia Lview Pro * Gif animado Gif
Construction Set * Gif Animater * Difuminado Paint Shop Pro * Creación de títulos,
Xara Web Style y botones Creación de títulos Xara 3D3 Con animación en 3d

18. Colocación de imágenes en la pagina Web

[ http://www.mailxmail.com/curso-html/colocacion-imagenes-pagina-web]
La directiva para incluir un gráfico es <IMG > (Imagen), este tiene el formato básico
siguiente:
<IMG SRC="Ruta/imagen">
< I M G > Indica la inserción de una imagen en una página HTML
SRC="Ruta/Imagen" Se utiliza para indicar la ruta y el nombre de gráfico a mostrar:
Ejemplo:
<IMG SRC="imágenes/rosa.gif">
El comando anterior carga en la pagina la imagen rosa del directorio imágenes
La directiva <I M G > tiene los parámetros opcionales BORDER, HEIGHT, WIDTH, ALT
y ALIGN, pudiendo agregarse uno o varios de ellos.
BORDER= Se refiere al borde del gráfico, el número 1 indica

"Tamaño borde y el numero 0 significa sin borde, por
numérico" defecto el valor es 1
HEIGHT= Indica el alto de la imagen en puntos o pixels, o
"Tamaño en porcentaje. Se emplea para cambiar el tamaño
numérico" original del gráfico.
WIDTH= Indica el ancho de la imagen en puntos (pixels) o
"Tamaño en porcentaje. Se emplea para variar el tamaño de
numérico" la imagen original.
Crea un gráfico pequeño que sea rápido de
Tip: cargar y amplificarlo con HEIGHT y WIDTH, para
su visualización
ALT= "Texto a Es el texto que se desea que aparezca cuando se
mostrar" pase el puntero del Mouse sobre la imagen
Indica como se ha de alinear el texto que siga o
ALIGN="top | preceda a la imagen. Se aplica para textos cortos
middle | que entren en una sola línea a un lado de la
bottom" imagen. Si se desea textos más largos, se
emplean tablas que más adelante se ilustraran.
Bottom Alinea el texto en la zona inferior del gráfico.
Top Alinea el texto en la zona superior del gráfico.
Center ó
Alinea el texto en la zona central del gráfico.
Middle

Se da a continuación varios ejemplos de combinaciones de los atributos de

<IMG>
Colocación de borde en una imagen
Sintaxis:
<IMG SRC="Ruta/imagen" BORDER=tamaño ALT="texto a mostrar">
Ejemplo:
<IMG SRC="imagenes/rosa.gif" BORDER= 0 ALT="Imagen de una rosa">
Escribe el ejemplo anterior dentro de la sección <body> de en un nuevo archivo de
nombreimágenes1.html.
Visualiza el resultado.
Resultado
Cambia el atributo BORDER=0 A BORDER=1 y observa que ahora la imagen tiene
un borde.
Resultado

19. Modificación del tamaño de la imagen

[ http://www.mailxmail.com/curso-html/modificacion-tamano-imagen]
Es conveniente grabar imágenes pequeñas y amplificarlas, con el propósito de que
tarden menos en cargarse. Los atributos para cambiar el ancho y la altura son HEIGHT y WIDTH
HEIGHT y WIDTH.
Agrega la siguiente línea en el archivo imágenes.html y observa que ahora hay
una segunda imagen más grande.
<IMG SRC="imagenes/rosa.gif" BORDER=0 ALT="Imagen de una rosa">
<IMG SRC= "imagenes/rosa.gif" BORDER= 0 WIDTH=6 0 HEIGHT=6 0
ALT="Imagen de una rosa">
Resultado
Alineación de texto adyacente de una imagen.
Para alinear el texto se utiliza el atributo ALIGN="top | middle | bottom".
Agrega las siguientes líneas en el archivo imágenes.html y observa los
resultados.
<IMG SRC="imagenes/est-2.jpg" ALT="Estrella de 9 puntas" align="top">
Texto alineado en la parte superior
<p>
<IMG SRC="imagenes/est-azul.jpg" ALT="Estrella de 9 puntas" align="center">
Texto alineado en la parte de enmedio
<p>
<IMG SRC="/imagenes/est-azul2.jpg" ALT=" Estrella de 9 puntas" align="bottom">
Texto alineado en la parte inferior
Resultado

20. Enlaces en una página Web

[ http://www.mailxmail.com/curso-html/enlaces-pagina-web ]
Un hiperenlace (enlace) es la referencia a otros documentos html, gráficos,
direcciones de E-mail, u objetos (archivos Zip, Word, ect). Estos hiperenlaces son las
palabras subrayadas, botones o gráficos a los que al darle Click muestran otra página
El nombre de este lenguaje es HTMl, (Lenguaje creador de Hipertecto), se debe a que
la característica más importante de las paginas Web es precisamente el Hiperenlace.
Nota: Se debe de escribir en minúsculas todos los nombres de los archivos a los que
se hace referencia en los hiperenlaces, ya que algunos servidores en los que se
alojan las páginas no aceptan mayúsculas.
Tip:
El contenido de un sitio se debe de desglosar en subtemas, colocando cada subtema
en una página diferente, uniendo todas las páginas por medio de hiperenlaces.
La directiva para un hiperenlace es:
<A HREF="dir-url"> Texto o imagen </A>
En donde:
Tipos de enlace
Enlace a otra página de nuestro sitio. Enlace a otra sección de la misma página
Enlace a un lugar concreto dentro de otra página de nuestro sitio. Enlace a una
página externa. Enlace por medio de un gráfico Enlace a una dirección de E-mail,
por medio de un gráfico. Enlace a una dirección de E-mail. Enlace a un objeto
(documento zip ó Word)
Enlace otra página de nuestro sitio.
Un enlace es la conexión de una pagina a otra. Un sitio es un grupo de paginas
conectadas entre si, por hiperenlaces.
Para dar ejemplo a un enlace. Supongamos que en la pagina dos quiera hacer un
enlace a la página tres.
Agregue la siguiente línea a la pagina2.html.
<A HREF="pagina3.html">Ejemplo 3 </A>
Grabe la página con el nombre de pagina3-1.html.
Al cargar la página al browser haga Click en el enlace"Ejemplo 3". Si realizo la
practica correctamente se debió haber cambiado de la página2 a la pagina3.
Practica: Realice un menú de enlaces en una página de nombre menu.html, escriba
una lista de enlaces de las primeras 5 páginas de ejemplo. Al final de cada pagina
agregar un enlace a la pagina de menú.
Enlace dentro de la misma página.
En caso que tengamos una página extensa que contenga varios temas, es necesario

crear enlaces a los diferentes temas contenidos en la página.
Para realizar esto es necesario marcar el lugar exacto con un nombre de referencia a
cada tema o lugar al que se desee saltar
La directiva para enlazar un tema de la misma página es:
<A HREF="#marca">Tema a mostrar" </A>
El signo # le indica al browser que se trata de una dirección interna.
"#marca" es el nombre de la referencia a la que se desee saltar dentro de la página.
El atributo para marcar con un nombre del lugar exacto a es:
<A NAME="marca"> </A>
Vea y analice el ejemplo presentado en la página "enlaces-int.html"
enlaces-int.html
Enlace a un lugar exacto dentro de otra página de nuestro sitio.
Podemos tener una combinación en la que nos podemos enlazar una página y a un
punto concreto dentro de ella.
Supongamos que deseamos enlazar a la pagina de nombre capitulo2.html y dentro
de ella al tema 4.
La directiva es la siguiente:
<A HREF="capitulo2.html#tema4">Tema 4 del capitulo 2 < / A >
Dentro de la pagina capitulo2.html debemos de tener marcado el lugar con:
<A NAME="tema4">Tema 4< / A >
Vea y analice el ejemplo presentado en la página "menu1.html"
menu1.html
Enlace a una página externa.
Muchas veces nosotros queremos hacer referencia una pagina o sitio de otra
persona.
La directiva para hacerlo es muy parecida a las anteriores.
Ejemplo:
<h1> Motores de Busqueda </h1>
<A HREF="http://www.yahoo.com">Yahoo</A>
<A HREF="http://www.altavista.digital.com">Alta Vista</A>
<A HREF="http://www.lycos.com">Lycos</A>
Grabe el ejemplo anterior con el nombre enlaces-ext.html
Vea y analice el ejemplo: enlaces-ext.html

21. Enlace por medio de un gráfico

[ http://www.mailxmail.com/curso-html/enlace-medio-grafico]
Se puede utilizar un gráfico en lugar de un texto para enlazar las páginas.
La directiva utilizada para esto es:
<A HREF="dir-url"> imagen </A>
Ejemplos: Escriba el codigo siguiente en el archivo enlace-ext.html
<A HREF="enlaces-ext.html" ><IMG SRC="imagen/rosa.gif"> < / A >
<p>
<a HREF="enlaces-ext.html"><img SRC="imagen/rosa.gif"
border="0">Buscadores< / a >
Vea y analice el ejemplo: enlaces-graf.html
Observe que en la segunda línea se incluyo un texto.
Enlace a una dirección de E-mail.
Se utiliza para que nuestros visitantes puedan mandarnos fácilmente un E-mail.
En la referencia colocamos nuestra dirección de E-mail.
La directiva es la siguiente
<A HREF=mailto:dir_Email>T e xto< / A >
Ejemplo
<A HREF="mailto:mkcever19@mailcity.com">Mandame un E-mail< / A >
Agrega el código anterior al archivo enlace-ext.html, y visualiza el resultado.
Enlace a una dirección de E-mail, por medio de un gráfico.
Se puede combinar el Enlaces de E-mail con un grafico.
Ejemplo:
<A HREF="mailto:mkcever19@mailcity.com"><IMG SRC="imagen/email(1).gif"
border="0" >Mandame un E-mail</A>
Enlace a un objeto (documento zip ó Word)
Se utiliza cuando deseamos poner al alcance de nuestras visitas un archivo
compactado (zip), o un archivo en formato word.
Sintaxis
< A HREF="archivo" > texto < / A >
Ejemplos:
<A HREF="citas.doc" >Bajar el archivo Citas < / A >
<A HREF="citas.zip" >Bajar el archivo comprimido Citas < / A >
enlace-ext.html
(comprueba que la gráfica también activa el enlace.

22. Tablas
[ http://www.mailxmail.com/curso-html/tablas]
La creación de tablas se utiliza en términos generales para mejorar la visualización
de la pagina, entrando en detalles se utiliza para colocar imágenes con textos
extensos a un lado de ellas, crear un columnas de datos, resaltar por medio de
bordes los datos, distribuir los datos de manera ordenada.
Crear una tabla
La estructura de una tabla y sus directivas para crearlas son:
Ejemplo: tabla con una celda
Nota: Como mínimo se tiene que tener un renglón y una celda para una tabla
<TABLE> (Inicio Tabla)
< T R > (Inicia renglón
< T D > (Inicia celda)
Texto de la celda
< / T D > (Fin celda)
< / T R > (Fin renglón)
</TABLE> (Fin Tabla)
Resultado
Texto de celda
Colocar un borde sobre la tabla
El atributo BORDER=1 se visualiza un borde en tabla
El atributo BORDER=0 quita el borde de la tabla.
Ejemplos:
< TABLE BORDER="1">
<TR>
<TD>
Texto de la celda
</TD>
</TR>
</TABLE>
Resultado
Aumentar el gruesor del borde

<TABLE BORDER="8" >
<TR>
<TD>
Texto de la celda
</TD>
</TR>
</TABLE>
Resultado


23. Cambiar el ancho de la tabla

[ http://www.mailxmail.com/curso-html/cambiar-ancho-tabla]
El ancho de la tabla se puede cambiar en porcentaje o en pixels (puntos)
El atributo WIDTH="100%" cambia el ancho de la tabla al 100%
El atributo WIDTH="600" cambia el ancho de la tabla a 600 pixels.
Ejemplos:
<TABLE BORDER="1" WIDTH="100%" >
<TR>
<TD>
Texto de la celda
</TD>
</TR>
</TABLE>
Resultado

<TR>
<TD>
Texto de la celda
</TD>
</TR>
</TABLE>
Resultado
<TABLE BORDER="1" WIDTH="300" >

<TR>
<TD>
Texto de la celda
</TD>
</TR>
</TABLE>
Resultado

24. Cambiar el alto de la tabla

[ http://www.mailxmail.com/curso-html/cambiar-alto-tabla]
<TABLE BORDER="3" WIDTH="200" HEIGHT="100" >
<TR>
<TD> Texto de la celda </TD>
</TR>
</TABLE>
Resultado
Alineación Horizontal (centro derecha e izquierda)

Alineación centrada ALIGN="center"
Alineación derecha ALIGN="right"
Alineación izquierda ALIGN="left"
Alineación centrada: align="center"

<TABLE BORDER="3" WIDTH="200" HEIGHT="100">
<TR>
<TD align="center" > Texto de la celda </TD>
</TR>
</TABLE>
Resultado
Alineación derecha : align="right"

<TR>
<TD align="right" >Texto de la celda</TD>
</TR>
</TABLE>
Resultado
Alineación Izquierda : align="left" (Es por defecto)

Alineación Izquierda : align="left" (Es por defecto)
<TR>
<TD align="left" > Texto de la celda </TD>
</TR>
</TABLE>
Resultado
Alineación Vertical (arriba en medio y abajo)

Alineación arriba: valign="top"
Alineación en medio valign="middle"
Alineación abajo valign="bottom"
Alineación arriba : valign="top"

<TR>
<TD valign="top" > Texto de la celda </TD>
</TR>
</TABLE>
Resultado
Alineación Abajo : valign="bottom"

<TR>
<TD valign= " bottom "> Texto de la celda </TD>
</TR>
</TABLE>
Resultado
Alineación: En medio : valign="middle" (por defecto)

<TR>
<TD valign= " middle "> Texto de la celda </TD>
</TR>

</TABLE>
Resultado

25. Conbinado Alineaciones

[ http://www.mailxmail.com/curso-html/conbinado-alineaciones]
Conbinado Alineaciónes (Centrado verical y horizontal)
<TR>
<TD align= " center" valign= " middle "> Texto de la celda </TD>
</TR>
</TABLE>
Resultado
Tablas con de un renglón y dos columnas.

<TABLE BORDER="3" WIDTH="75%">
<TR>
< T D > Texto en fila 1, celda 1 < / T D >
< T D > Texto en fila 1, celda 2 < / T D >
</TR>
</TABLE>
Resultado

<TR>
<TD WIDTH="50%" > Texto en fila 1, celda 1</TD>
<TD WIDTH="50%" > Texto en fila 1, celda 2 </TD>
</TR>
</TABLE>
Resultado

<TR>
<TD WIDTH="20%" > Texto en fila 1, celda 1</TD>
<TD WIDTH="80%" > Texto en fila 1, celda 2 </TD>
</TR>
</TABLE>
Resultado
Tabla de 1 renglón y tres columnas.

<TR>
< T D WIDTH="20%" > Texto en fila 1, celda 1 < / T D >

</TR>
</TABLE>
Resultado
Tablas de 2 renglones y tres columnas.

<TR>
< T D WIDTH="20%" >fila 1, col. 1 < / T D >
< T D WIDTH="60%" > fila 1, col. 2 < / T D >
< T D WIDTH="20%" > fila 1, col. 3 < / T D >
</TR>
<TR>
< T D >fila 2, col.1 < / T D >
< T D > fila 2, col.2 < / T D >
< T D > fila 2, col.3 < / T D >
</TR>
</TABLE>
Resultado
Tabla de 2 renglones y tres columnas.

<TABLE BORDER="3">
<TR>
< T D >fila 1, col. 1 < / T D >
< T D > fila 1, col. 2 < / T D >
< T D > fila 1, col. 3 < / T D >
</TR>
<TR>
< T D >fila 2, col.1 < / T D >
< T D > fila 2, col.2 < / T D >
< T D > fila 2, col.3 < / T D >
</TR>
</TABLE>
Resultado

26. Encabezados de columnas

[ http://www.mailxmail.com/curso-html/encabezados-columnas]
Centra y resalta el texto contenido en la celda.
<TH>............ </TH> Significa Table Head (Encabezado de tabla)
<table BORDER="3">
<tr>
<th>Col. 1</th>
<th>Col. 2</th>
<th>Col. 3</th>
</tr>
<tr>
<td>fila 1, col. 1</td>
</tr>
<tr>
<td>fila 2, col.1</td>
</tr>
</table>
Resultado

27. Arreglos de bordes

[ http://www.mailxmail.com/curso-html/arreglos-bordes ]
CELLPADDING="Valor Numérico":
Fija el espacio entre el borde exterior de la celda y el borde interior (borde del
contenido)
CELLSPACING="Valor Numérico"
Fija el espacio entre el contenido y el borde interior
Ejemplo 1:
<table border="5" cellpadding="1" cellspacing="10" >
<tr>
<td>Ene</td>
<td>Feb</td>
<td>Mar</td>
</tr>
<tr>
<td>Abr</td>
<td>May</td>
<td>Jun</td>
</tr>
</table>
Resultado
Nótese el espacio entre los bordes (interior y exterior)

Ejemplo 2:
<table border="5" cellpadding="10" cellspacing="1">
<tr>
<td>Ene</td>
<td>Feb</td>
<td>Mar</td>
</tr>
<tr>
<td>Abr</td>
<td>May</td>
<td>Jun</td>
</tr>
</table>
Resultado
Nótese el espacio entre el texto y los bordes.

Ejemplo 3:
<table border="5" cellpadding="10" cellspacing="10" >
<tr>
<td>Ene</td>
<td>Feb</td>
<td>Mar</td>
</tr>
<tr>
<td>Abr</td>
<td>May</td>
<td>Jun</td>
</tr>
</table>
Resultado
Nótese el espacio entre el texto y el borde interior. Y el espacio entre el borde

interior y el borde exterior.

28. Color de fondo para las tablas

[ http://www.mailxmail.com/curso-html/color-fondo-tablas]
Para cambiar del color de fondo, basta con escribir la directiva BGCOLOR dentro del
elemento que de la tabla que se desee cambiar.
Para cambiar el color a la tabla

<TABLE BGCOLOR="codigo de color">
Para cambiar el color a la fila
<TR BGCOLOR="codigo de color">
Para cambiar el color a la celda
<TD BGCOLOR="codigo de color">
Para cambiar el color del borde
<TABLE BORDERCOLOR="codigo de color">
Fijar color a la tabla
<table bgcolor= "#00FFFF" border="1" cellpadding="1" cellspacing="1">
<tr>
<td>Ene</td>
<td>Feb</td>
<td>Mar</td>
</tr>
<tr>
<td>Abr</td>
<td>May</td>
<td>Jun</td>
</tr>
</table>
Resultado
Fijar el color a la fila

< t r bgcolor= "#00FFFF" >
<td>Ene</td>
<td>Feb</td>
<td>Mar</td>
</tr>
<tr>
<td>Abr</td>
<td>May</td>
<td>Jun</td>
</tr>
</table>
Resultado
Para cambiar el color a la celda

<tr >
<td bgcolor= "#00FFFF" >Ene</td>
<td>Feb</td>
<td bgcolor= "#00FFFF" >Mar</td>
</tr>
<tr>
<td>Abr</td>
<td bgcolor= "#00FFFF" >May</td>
<td>Jun</td>
</tr>
</table>
Resultado
Para cambiar el color del borde

<table bordercolor = "#0000FF" border="8" cellpadding="1" cellspacing="1">
<tr>
<td>Ene</td>
<td>Feb</td>
<td>Mar</td>
</tr>
<tr>
<td>Abr</td>
<td>May</td>
<td>Jun</td>
</tr>
</table>
Resultado
Para cambiar el color del borde en dos tonos

<table bordercolordark="#999933" bordercolorlight="#CCCC66" border="8"
cellpadding="1" cellspacing="1">
<tr>
<td>Ene</td>
<td>Feb</td>
<td>Mar</td>
</tr>
<tr>
<td>Abr</td>
<td>May</td>
<td>Jun</td>
</tr>
</table>
Resultado


29. Unir columnas

[ http://www.mailxmail.com/curso-html/unir-columnas]
Se realiza extiendo el No.de columnas que va a ocupar la celda.
Se utiliza la directiva COLSPAN="No. de celdas"
Ejemplo 1 (uniendo 2 columnas)
<tr>
<td colspan="2" > Motores de búsqueda </td>
</tr>
<tr>
<td> Yahoo </td>
<td> Lycos </td>
</tr>
</table>
Resultado
Ejemplo 2: (uniendo 3 columnas)

<tr>
</tr>
<tr>
<td> Yahoo </td>
<td> Lycos </td>
<td> Infoseek </td>
</tr>
</table>
Resultado

30. Unir filas

[ http://www.mailxmail.com/curso-html/unir-filas ]
Se realiza extiendo el No.de renglones que va a ocupar la celda.
Se utiliza la directiva ROWSPAN="No. de celdas"
Ejemplo 1: (uniendo 2 renglones)
<tr>
<td rowspan="2" > Browsers </td>
<td> Internet Explorer </td>
</tr>
<tr>
<td>Netscape Navigator</td>
</tr>
</table>
Resultado
Ejemplo 2: (uniendo 3 renglones)

<table border="5">
<tr>
<td rowspan="3">Browsers</td>
<td>Internet Explorer</td>
</tr>
<tr>
<td>Netscape Navigator</td>
</tr>
<tr>
<td>Mosaic</td>
</tr>
</table>
Resultado
Combinando Renglones y Columnas:

Ejemplo (uniendo 2 columnas y dos filas)
<tr>
<td rowspan="2" > I n t e r n e t < / t d >
</tr>
<tr>
<td> Yahoo </td>
<td> Lycos </td>

</tr>
</table>
Resultado

31. Resumen de las propiedades de las Tablas

[ http://www.mailxmail.com/curso-html/resumen-propiedades-tablas]
Ejemplos de aplicaciones de tablas

1. Organizar texto o gráfico en una tabla
2. Escribir texto en Sangrías.
3. Colocar texto o listas a un lado del gráfico
4. Escribir Texto en dos o más columnas (tipo periódico o revista)
5. Crear menús al margen izquierdo .
6. Enmarcar títulos con bordes.

32. Carácteres especiales

[ http://www.mailxmail.com/curso-html/caracteres-especiales]
Estos caracteres se emplean debido a que no todos los países emplean los mismos
tipos de caracteres especiales como son los de puntuación (comillas, acentos,
diéresis, etc.)., si queremos que las páginas Web estan disponibles a personas de
todo el mundo, debemos emplear los códigos o alias de caracteres especiales de
HTML, estos códigos nos proporcionan los caracteres especiales
independientemente del lenguaje que tenga instalado nuestro visitante.
Los códigos o alias de caracteres especiales de HTML inician con el símbolo & y
terminan con el símbolo ;
Los caracteres especiales de HTML, se pueden representar con códigos ASCII, o por
medio de alias.
Codigo ASCII
Sintaxis:
&#NO.código_ascii;
Ejemplo:
ó Nos da como resultado ó, puesto que el numero de código ASCII para la á
es 225.
Aplicando lo anterior la palabra corazón se escribe así corazón
Alias
Sintaxis:
&alias;
Ejemplos:
Ó Nos da el
ó Nos da el resultado ó resultado Ó
á Nos da el resultado á Á Nos da el
resultado Á
Ñ Nos da el
ñ Nos da el resultado ñ
resultado Ñ
Aplicando lo anterior la palabra corazón se
escribe así corazón

Como podemos ver el alias para los acentos es letra+acute, y el alias para los tildes
es letra+tilde.
Tabla de caracteres especiales HTML

33. Frames o marcos

[ http://www.mailxmail.com/curso-html/frames-marcos]
Los frames o cuadros son divisiones que se le pueden dar a una página Web. En
cada uno de los frames se pueden cargar una página diferente que actúan
independientemente una de otra.
El uso más común del empleo de los frames es en la aplicación de menús.
En el cual se divide la pantalla en dos frames, uno estrecho (en la parte superior o al
lado izquierdo) y otro mayor. Dentro del frame estrecho, se carga la pagina con un
menú conteniendo los enlaces a otras paginas, al pulsar uno de estos enlaces, se
carga la pagina dentro del frame. Mayor.
De manera que el menú siempre estará visible en la parte superior o izquierda, y los
contenidos se estarán cambiando dentro del frame principal.
Ejemplo: Menú Horizontal
Ejemplo: Menú Vertical
Para crear frames se utilizan las directivas cerradas <FRAMESET>..... </FRAMESET>
Esta directiva indica inicio y final de los frames o cuadros.Dentro de ella se colocan
todos los frames que se van a emplear.
La directiva FRAMSET se coloca en lugar de BODY.
Se coloca una directiva <FRAME> por cada cuadro que se quiera tener.
La directiva <FRAME> indica el archivo que va a contener ese cuadro o frame.
Ejemplo: <FRAME SRC="archivo.html">
La directiva FRAMESET, nesesita los parametros ROWS ó COLS, que indican si la
pantalla se va a dividir en filas o columnas.
Ejemplos:
Crear dos marcos o frames horizontales
<html>
<head>
<title>Frame 1</title>
</head>
<frameset ROWS="50%,50%">
<frame src="reglaoro.html">
<frame src="bienpormal.html">
</frameset>
</html>
Resultado
Crear dos marcos o frames Verticales
<html>
<head>
</head>
<frameset COLS="50%,50%">
</frameset>

</html>
Reslultado
Crear dos marcos o frames Horizontales de 20 % la primera columna y 80% la
segunda columna.
<html>
<head>
<title>frame 3</title>
</head>
<frameset rows="20%,80%">
<frame src="banner1.htm" >
<frame src="inmortalidad.html " >
</frameset>
</html>
Reslultado
Crear dos marcos o frames Verticales de 20 % la primera columna y 80% la
segunda
<html>
<head>
</head>
<frameset cols="20%,80%">
</frameset>
</html>
Resultado
Crear dos marcos o frames horizontales fijando el tamaño por medio de pixels
En el siguiente ejemplo se da un tamaño de 100 pixels al frame superior y el resto
de la altura para el área inferior.
<html>
<head>
</head>
<frameset ROWS="100,400">
<frame src="banner1.htm" >
<frame src="inmortalidad.html" >
</frameset>
</html>
Reslultado
Frames o cuadros iteractivos
Para que puedas controlar y decidir en que frame se carga una mueva página es
nesesario dar un nombre al FRAME, y referir a el, la pagina a cargar.
El atributo NAME, es el que permite darle un nombre a cada frame, el cual es
referido por el atributo TARGET="nombre del frame". El atributo TARGET, se coloca
dentro de un enlace, el cual al ser activado el enlace carge la página en el otro frame
referido por TARGET en lugar de cargarlo en el propio frame.

Ejemplos:
Frames o cuadros verticales iteractivos
Para crear frames iteractivos, es nesesario nombrar el frame con el attributo NAME.
Este atributo se coloca dentro del frame.
<frame src="menu2-v.html">
<frame src="reglaoro.html" NAME="principal">
</frameset>
Ver codificación completa
Resultado
Notese que el segundo frame se llama principal.
Para que funcione el frame iteractivo es nesesario que los enlaces esten
relacionados con el frame, por medio del atributo TARGET, el cual se coloca dentro
de los enlaces.
Para que funcione el programa frame 6 es nesesario que el programa menu2-v.html,
contenga el atributo TARGET encada uno de los enlaces. A continuación damos la
codificación de dicho programa.
Extracto del archivomenu2-v.html
<a HREF="reglaoro.html" TARGET="principal">La regla de oro</a>
<a HREF="unidad.html" TARGET="principal">La unidad de la religión</a>
<a HREF="cosecha.html" TARGET="principal">La cosecha de los hechos</a>
<a HREF="lavenida.html" TARGET="principal">La venida de los profetas</a>
Notese que cada enlace se le agrego el atributo TARGET="principal", este atriibuto le
indica al browser que la pagina enlazada se debe de cargar en el frame principal, y
no en el frame desde el que se esta activando.
También se puede utilizar división horizontal de frames iteractivos
Ejemplo
UILIZANDO BASE TARGET
Otro método para relacionar varios enlaces con un frame, es utilizando BASE
TARGET, con esta directiva, nos ahorramos el tener que especificar TARGET en
cada uno de los enlaces, y en su lugar solo basta con especificar una sola vez al
principio de BODY el atributo <BASE TARGET>. para ilustrar esto a continuación le
presentamos el siguiente ejemplo:
Extracto del archivomenu3-v.html
<BASE TARGET="principal">
<a HREF="reglaoro.html">La regla de oro</a>
<a HREF="unidad.html">La unidad de la religión</a>
<a HREF="cosecha.html">La cosecha de los hechos</a>
Ver la codificación completa
Compare la codificación del programa menu2-v.html con menu3-v.html, y notese
que nos ahorramos escribir TARGET en cada enlace, al especificar BASE TARGET al
inicio.
El programa anterior (menu3-v.html) nesesita el programa frame7.html
Ver codificación

Ver codificación
Resultado
Directiva NOFRAMES
Esta se utiliza para advertir a los visitantes que no cuenten con un browser
actualizado, ya que los browsers viejos no manejan frames.
Dentro de la sección NOFRAMES, se coloca un mensaje advirtiendo al visitante que
nesesita un browser actualizado para poder ver la pagina con frames, o para dar un
enlace a una versión sin frames.
</frameset>
<NOFRAMES>
<body>
Esta página utiliza frames, pero su browser no los maneja.
</body>
</NOFRAMES>
</html>
Resultado

34. Características adicionales de los frames

[ http://www.mailxmail.com/curso-html/caracteristicas-adicionales-frames]
En el ejemplo de frame 5 la imagen en el frame superior no entro completa, por lo
que aparece la barra de desplazamiento, en este ejemplo no es nesesaria la barra de
desplazamiento, además le quita presentación o vista a nuestra página.
Esto se puede soluciónar de dos formas: La 1ra. agregando el atributo
SCROLLING="no" dentro de la directiva del frame en que se desee desaparecer la
barra de despalazamiento, y la 2da. colocando la imagen en lugar de la página que
la contenga dentro del frame
Quitar la barra de desplazaminto de un frame
Esto se logra por medio del atributo SCROLLING="no".
Los valores para este atributo son:
SCROLLING="no" Desactiva la barra de desplazamiento

SCROLLING="yes" Activa la barra de desplazamiento
Activa o Desactiva la barra de desplazamiento,
SCROLLING="auto" en función de que entre o no, la página
completa dentro del frame
Siendo este ultimo el que se establece por defecto
A continuación se da un ejemplo de como se quita la barra de desplazamiento.
<html>
<head>
</head>
<frame src="banner1.htm" SCROLLING="no">
<frame src="inmortalidad.html">
</frameset>
</html>
Reslultado
Colocar una imagen dentro de un frame
Solo se nesesita remplazar dentro del frame, el nombre del archivo de la imagen por
el nombre de la página.
La sintaxis es la siguiente:
<frame src="directorio\grafico.gif"> ó <frame src="directorio\grafico.jpg">
<html>
<head>
< t i t l e > f r a m e 1 0 </ti tl e >
</head>
<frame src="..\imagen\inmortal.jpg" scrolling="no">
</frameset>

</frameset>
</html>
Resultado
Cambiar el ancho del margen interior (alto y ancho) de un frame
Normalmente se emplea para centrar un grafico dentro de un frame.
Los atributos empleados son MARGENWIDTH="valor" y MARGENHEIGHT="valor", los
cuales se escriben dentro del frame al que se le desea aplicar margen.
<html>
<head>
< t i t l e > f r a m e 1 1 </ti tl e >
</head>
<frame src="..\imagen\inmortal.jpg" scrolling="no" MARGENWIDTH="15"
MARGENHEIGHT="5">
</frameset>
</html>
Resultado
Quitar el borde de la división del frame
La división del frame se quita por medio del atributo BORDER="0" ó
FRAMEBORDER="no", el cual se escribe dentro de la directiva FRAMESET.
<html>
<head>
</head>
<frameset cols="20%,80%" BORDER="0">
</frameset>
</html>
Resultado
Con el atributo FRAMEBORDER="no", tenemos casi el mismo resultado
Cambiar el ancho del borde de la división del frame
El ancho de la división del frame, se modifica por medio del atributo BORDER="valor",
BORDER="valor", el cual se escribe dentro de la directiva FRAMESET.
<html>
<head>
</head>
<frameset cols="20%,80%" BORDER="20">
</frameset>
</html>
Resultado
Cambiar el color del borde de la división del frame.
El color de la división del frame, se modifica por medio del atributo BORDERCOLOR="#valor",

El color de la división del frame, se modifica por medio del atributo BORDERCOLOR="#valor",
BORDERCOLOR="#valor", el cual se coloca dentro de la directiva FRAMESET.
<html>
<head>
</head>
<frameset cols="20%,80%" BORDER="20" BORDERCOLOR="#80ffff">
</frameset>
</html>
Resultado
Evitar que el visitante cambie la posisión división del frame
Normalmente el visitante de la página puede cambiar la posisión de la división,
dandole dandole click a la división y sin soltar arrastrar el mouse hasta LLEGAR A la
nueva posición.
Si se desea evitar esto el atributo empleado es NORESIZE, el cual se escribe dentro
del frame que se quiere fijar.
<html>
<head>
</head>
<frame src="reglaoro.html" NAME="principal" NORESIZE>
</frameset>
</html>
Resultado
FRAMES MULTIPLES
Se puede dividir la pantalla en varios frames a la vez, solo se nesesita colocar una
directiva FRAME por cada marco que se desee colocar.
Tres marcos horizontales
<html>
<head>
</head>
<frameset ROWS="33%,33%,33%">
<frame src="unidad.html">
</frameset>
</html>
Resultado
Tres marcos verticales
<html>
<head>
</head>

<frameset COLS="20%,40%,40%">
<frame src="unidad.html">
</frameset>
</html>
Resultado

35. Frames combinados

[ http://www.mailxmail.com/curso-html/frames-combinados]
Se pueden tener combinaciónes de FRAMES horizontales y verticales., a continuación
damos algunos ejemplos:
Primer ejemplo:
< frameset rows="64,*" border="0">

<frame src="banner2.html" scrolling="no" noresize>
< frameset cols="150,*">
<frame name="principal" src="reglaoro.html">
</frameset>
Resultado
Segundo ejemplo
<frameset rows="60,*,35" border="0">
<frame name="top" scrolling="no" noresize src="banner2.html">
<frameset cols="150,*" border="0">
<frame name="principal" src="reglaoro.html">
</frameset>
<frame noresize scrolling="no" frameborder="no" src="referencia.html">
</frameset>
Ver Codificación completa
Resultado
Target especiales
Estos targets indican diferentes formas de abrir las ventanas para cargar los
archivos.
Todos los target especiales inician con el signo "_".
TARGET="_blank" Carga la página en una nueva ventana

Carga la página en el frameset anterior al
TARGET="_parent"
frameset actual.
Carga la página en la pantalla completa de la
TARGET="_top" ventana, quitando todos los submarcos o
frames
TARGET="_self" Carga la página en la misma ventana o marco.
He aqui un ejemplo completo con 3 archivos:
frame 20.html, menu5-v.html, menu6-v.html
Para ilustrar TARGET="_blank", TARGET="_top", TARGET="_self"
Ejemplos:
La página webframe 20, carga el archivo menu5-v en el marco superior

Ver codificación de frame 20
El archivo menu 5 vertical carga:
El archivo reglaoro.html en TARGET="principal"
El archivo unidad.html en TARGET="_top"
El archivo cosecha.html en TARGET="_blank"
El archivo menu6-v.html" en TARGET="_self"
Extracto de la codificación del archivo menú 5 vertical

<a HREF="reglaoro.html" TARGET="principal">La regla de oro</a>
<a HREF="unidad.html" TARGET="_top">La unidad de la religión</a>
<a HREF="cosecha.html" TARGET="_blank">La cosecha de los hechos</a>
<a HREF="menu6-v.html" TARGET="_self">Siguente menú</a>
El archivo menu6-v.html carga los archivos inmortalidad1.htm y bienpormal.html
por medio de <base target="_blank">, a excepción del archivo menú 5-v.html,
que se carga con target="_self.
Extracto del archivo menu6-v.html
<base target="_blank">
<a HREF="inmortalidad1.html">La vida despues de la vida</a>
<a HREF="bienpormal.html">Devolver bien por mal</a>
<a HREF="menu5-v.html" target="_self">menu anterior</a>
Resultado
TARGET="_parent"
Esta propiedad se utiliza en los casos en que un frame carga a otro frame.
Para entender este concepto se presenta los siguientes ejemplos:
El programa frame21.html es el padre de banner2.html y frame22.html.
Extracto del programaframe 21.html
<frameset rows="64,*" border="0">
<frame scrolling="no" noresize src="Banner2.html">
<frame src="frame22.html">
</frameset>
El programa frame22.html es el padre de menu7-v.html y "menu8-v.html
Extracto del programaframe22.html
<frame src="menu7-v.html" >
</frameset>
Los enlaces con TARGET="_parent" dentro del programa menu7-v.html, y del
menu8-v.html, van a ser cargados en todo el frame inferior.
Extracto del programamenu7-v.html
<a HREF="inmortalidad.html" target="_parent">La vida despues de la vida</a>
<a HREF="bienpormal.html" target="_parent">Devolver bien por mal</a>
<a HREF="lavenida.html" target="_parent">La venida de los profetas</a>
Extracto del programamenu8-v.html

<base target="_parent">
Menu B
<p>
<a HREF="reglaoro.html">La regla de oro</a>
<a HREF="unidad.html">La unidad de la religión</a>
<a HREF="cosecha.html">La cosecha de los hechos</a>
Ejecutar programa

36. Resumen de las propiedades de los frames

[ http://www.mailxmail.com/curso-html/resumen-propiedades-frames ]
Visita más cursos como este en mailxmail:

[http://www.mailxmail.com/cursos-informatica]
[http://www.mailxmail.com/cursos-programacion]
¡Tu opinión cuenta! Lee todas las opiniones de este curso y déjanos la tuya:
[http://www.mailxmail.com/curso-html/opiniones]
Cursos similares
Cursos Valoración Alumnos Vídeo
Instalación de un Servidor de Correo en Linux

Linux es un sistema operativo libre, con lo que no se tiene que pagar por ningún tipo de 11.768
licencia. también se puede conseguir el código fuente y poderlo modificar libreme...
[16/06/04]
Algoritmos y lenguaje C
Este curso pretende dar a conocer las explicaciones más simples del trabajo de los 2.840
ordenadores.puedes descubrir cada paso que realizan, cómo lo realizan, qué es l...
[13/01/06]
Sistema operativo. Windows 98

Aprende con nuestro curso acerca del sistema operativo windows 98, te enseñaremos las 15
variadas funciones que tiene este software y que te ayudará a...
[28/04/09]
Bases de Datos en C#
El curso incluye el código necesario para acceder a las bases de datos y realizar consultas 1.743
de selección y de acción....
[05/04/07]
Desarrollo de aplicaciones para dispositivos

inalámbricos (J2ME) 2.533
Curso que abarca el nivel de principiante a intermedio de la programación j2me para
móviles y pdas, así como la elaboración de páginas web para los mismos. inc...
[14/07/05]

Curso HTML

Cargado por

Información del documento

Descripción 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

Curso HTML

Cargado por

Copyright:

Formatos disponibles

mailxmail - Cursos para compartir lo que sabes

Descubre miles de cursos como éste en www.mailxmail.com 1

Presentación del curso

Visita más cursos como este en mailxmail:

Desarrollo de aplicaciones para dispositivos

Procesos en C. Sincronización (segunda parte)

Descubre miles de cursos como éste en www.mailxmail.com 2

Descubre miles de cursos como éste en www.mailxmail.com 3

2. Consejos para el diseño de una página Web

Descubre miles de cursos como éste en www.mailxmail.com 4

Descubre miles de cursos como éste en www.mailxmail.com 5

3. Elementos del diseño y publicación de una página

Descubre miles de cursos como éste en www.mailxmail.com 6

4. Elementos Básicos y estructura de una pagina Web

Explicación de la estructura básica

Descubre miles de cursos como éste en www.mailxmail.com 7

Directiva <SCRIPT> (Este no es lenguaje HTML, y solo se dará un ejemplo)

Descubre miles de cursos como éste en www.mailxmail.com 8

Grabar la página (en el directorio practicas-básicas)

Descubre miles de cursos como éste en www.mailxmail.com 9

6. ¿Cómo abrir una página Html del disco duro

Descubre miles de cursos como éste en www.mailxmail.com 10

7. Dar Formato Básico a una página Web

Simplemente cambia el comando BGCOLOR, por el comando BACKGROUND.

Descubre miles de cursos como éste en www.mailxmail.com 11

Descubre miles de cursos como éste en www.mailxmail.com 12

Descubre miles de cursos como éste en www.mailxmail.com 13

9. Tipos y tamaños de fuentes

El resultado se verá como sigue

Descubre miles de cursos como éste en www.mailxmail.com 14

Descubre miles de cursos como éste en www.mailxmail.com 15

10. Texto Preformateado

Nota: Se recomienda realizar la tabla en Word, para posteriormente pegarla en

Descubre miles de cursos como éste en www.mailxmail.com 16

Descubre miles de cursos como éste en www.mailxmail.com 17

11. Líneas Divisorias

SIZE="valor Permite indicar el grosor de la línea en

Descubre miles de cursos como éste en www.mailxmail.com 18

12. Creación de listas en HTML

Escribe y graba con el nombre de pagina7.html en un nuevo directorio de nombre

Descubre miles de cursos como éste en www.mailxmail.com 19

<OL TYPE ="I">

Graba los cambios y visualiza detenidamente los resultados

Graba los cambios y visualiza detenidamente los resultados

Descubre miles de cursos como éste en www.mailxmail.com 20

Graba los cambios y visualiza detenidamente los resultados

Descubre miles de cursos como éste en www.mailxmail.com 21

13. Listas con viñetas

Graba los cambios y visualiza detenidamente los resultados

Descubre miles de cursos como éste en www.mailxmail.com 22

Graba los cambios y visualiza detenidamente los resultados

Descubre miles de cursos como éste en www.mailxmail.com 23

14. Listas Anidadas

Descubre miles de cursos como éste en www.mailxmail.com 24

15. Listas de definición

Graba los cambios y visualiza detenidamente los resultados

Descubre miles de cursos como éste en www.mailxmail.com 25

16. Creación de sangrías

Graba los cambios y visualiza detenidamente los resultados

Como se puede apreciar el resultado de ambos ejemplos es igual.

Descubre miles de cursos como éste en www.mailxmail.com 26

Descubre miles de cursos como éste en www.mailxmail.com 27

17. Formato de imágenes