4-2 TeoríaHTML

1.
GENERALIDADES ESTRUCTURA DE UNA PÁGINA WEB HTML

<html>
DEFINICIÓN
Es un Lenguaje de Programación muy sencillo que se <head>
C
utiliza para realizar páginas web. HTML, significa: Hyper A Etiquetas y contenidos del
Text Markup Languaje (Lenguaje de Marcación B encabezado.
HiperTexto). El entorno para trabajar HTML es E Datos que no aparecen en la página
simplemente un procesador de texto, como el que ofrecen P C pero que son importantes para
los sistemas operativos Windows (Bloc de notas), UNIX (el Á E catalogarla: Titulo, palabras clave y
G R otras.
editor vi o ed) o el que ofrece MS Office (Microsoft Word).
I A
El conjunto de etiquetas que se creen, se deben guardar </head>
N
con la extensión .htm o .html. A
<body>
EDITORES W C
E U Etiquetas y contenidos del cuerpo.
La programación se realiza en el accesorio: Bloc de Notas B E Parte del documento que será
(para el caso del Sistema Operativo Windows). R mostrada por el navegador: Texto e
P imágenes y otros
GUARDAR ARCHIVO HTML O
</body>
Se debe tener en cuenta que todos los archivos deben de
estar guardados en una carpeta, para ello, primero
debemos de crear dicha carpeta. </html>
El nombre de las carpetas y archivos deben estar en
minúsculas, sin tildes, sin espacios y debe de ser corto. CÓDIGO DE COLORES
El archivo debe tener la extensión: html (en minúsculas). Los colores pueden ser representados de dos formas:
 Archivo u Office. a) Código de Color
 Guardar como. Puede ser representado en formato hexadecimal; la
 Seleccionar y abrir la carpeta creada. proporción de rojo, verde y azul formará el color
 Escribir el nombre: Ejm.: luis.html deseado. Pudiéndose utilizar números del 0 al 9 y letras
 Guardar desde la A hasta la F, en cualquier orden. Ejm.:
ETIQUETAS “#000000” Negro (black)
“#FFFFFF” Blanco (white)
En el editor de texto, deben de introducirse unas marcas o
“#FF0000“ Rojo (red)
caracteres de control, llamadas TAGs, que son
interpretadas por el browser. Todas las TAGs de HTML “#00FF00“ Verde (green)
van encerradas entre los caracteres menor que (<) y mayor “#0000FF” Azul (blue)
que (>), como por ejemplo <HTML>. Además, la mayor b) Nombre de color
parte de ellas son dobles, en el sentido de que hay una Algunos colores están predefinidos y pueden ser
TAG de comienzo y otra de final; entre ambas está el texto referenciados por su nombre en inglés, estos solo
afectado por dichas TAGs. La marca de final es como la de serán validos para Netscape e Internet Explorer de
comienzo, pero incluyendo una barrra (/). Microsoft; algunos colores son:
Las “marcas”, “TAG” o también llamadas “Etiquetas”, son
“Black” Negro
las que definirán la forma del contenido de una página
web. Estas Etiquetas, pueden contener “Atributos”. “White” Blanco
“Red” Rojo
TIPOS DE ETIQUETAS “Green” Verde
a) Abiertas.- No necesitan de un fin, son las que el “Blue” Azul
final está implícito, por ejemplo <P> párrafo, <BR> salto
de línea ó <IMG> inclusión de una imagen. 2. ETIQUETAS BÁSICAS
b) Cerradas.- Necesitan de la misma etiqueta para
finalizar la acción. Existe normalmente una etiqueta de ETIQUETA: DOCUMENTO <HTML>
inicio y otra de fin, la de fin contendrá el mismo texto Es la etiqueta principal y permite crear todo el documento.
que la de inicio añadiéndole al principio una barra Todo lo que se coloque en la página web, tendrá que ir
inclinada /. Ejemplo: inicia <BODY> y finaliza </BODY>. dentro de esta etiqueta.
La etiqueta HTML, está dividida en dos partes principales:
SINTAXIS DE PROGRAMACIÓN
 Cabecera <HEAD>
El HTML es un lenguaje que basa su sintaxis en un  Cuerpo <BODY>
elemento de base al que llamamos etiqueta. La etiqueta Ejemplo:
presenta frecuentemente dos partes: <HTML>
 Una apertura de forma general <etiqueta> Aquí van otras etiquetas
 Un cierre de tipo </ etiqueta> </HTML>
PARTES DE LA PROGRAMACIÓN ETIQUETA: CABECERA <HEAD>
Además de todo esto, un documento HTML ha de estar Todas sus etiquetas son opcionales y se utilizarán solo en
delimitado por la etiqueta <html> y </html>. Dentro de este casos muy determinados; solo la etiqueta <TITLE> tiene un
documento, podemos asimismo distinguir dos partes uso general.
principales: Ejemplo:
 El encabezado, delimitado por <head> y </head> donde <HTML>
colocaremos etiquetas de índole informativo como por <HEAD>
ejemplo el título de nuestra página. Aquí van otras etiquetas
 El cuerpo, flanqueado por las etiquetas <body> y </HEAD>
</body>, que será donde colocaremos nuestro texto e Aquí van otras etiquetas
imágenes delimitados a su vez por otras etiquetas como </HTML>
las que hemos visto.
ETIQUETA: TÍTULO <TITLE>
Tiene como función, el especificar el título del documento
HTML. El título no forma parte del documento.
3. ETIQUETAS DE FORMATO DE TEXTO
Ejemplo:
Y FORMATO DE PÁRRAFO
<HTML>
<HEAD>
<TITLE> Aquí va el título </TITLE> ETIQUETA: CENTRAR <CENTER>
Aquí van otras etiquetas Su función es centrar todos los contenidos (textos,
</HEAD> imágenes, líneas, tablas, listas u otros elementos de
Aquí van otras etiquetas
HTML) que se encuentren dentro de esta etiqueta.
</HTML>
Ejemplo: Resultado:
ETIQUETA: CUERPO <BODY> <CENTER>
Esta etiqueta, está totalmente separada de la etiqueta: ”Túpac Amaru” ”Túpac Amaru”
</CENTER>
<HEAD>. Aquí se ubicarán todas las demás etiquetas que
darán formato al contenido (texto, imágenes, sonidos,
ETIQUETA: TEXTO PRE FORMATEADO <PRE>
vídeos, tablas, formularios y otros). Esta etiqueta tiene sus
propios atributos. Se aplica sobre un párrafo, el cual aparecerá tal y como se
ha escrito en el código fuente.
Ejemplo:
Ejemplo: Resultado:
<HTML>
<PRE> Este texto
<HEAD> Este texto Se presentará
Aquí van otras etiquetas Se presentará tal y como está escrito
tal y como está escrito en esta hoja.
</HEAD> en esta hoja.
<BODY BGCOLOR=”RED” TEXT=”WHITE”> </PRE>
Aquí van otras etiquetas y contenidos.
</BODY> ETIQUETA: PÁRRAFO <P>
</HTML> Permite definir un párrafo, se aplicará al comienzo de un
párrafo de texto e introducirá un espaciado de separación
ATRIBUTOS DE LA ETIQUETA <BODY>
(normalmente dos líneas). Puede tener los atributos:
Cambia el color de fondo, puede <P ALIGN="LEFT">
BGCOLOR=”#rrvvaa”
ser expresado mediante código Aquí van los contenidos Alinear a la izquierda
BGCOLOR=”yellow”
de color o nombre de color. </P>
Es la imagen de fondo, la URL <P ALIGN="CENTER">
BACKGROUND="URL"
busca una imagen que está Aquí van los contenidos Centrar
BACKGROUND="fondo.jpg"
colgada en la red. </P>
Permite que la imagen del fondo <P ALIGN="RIGHT">
BGPROPERTIES="fixed"
no se mueva. Aquí van los contenidos Alinear a la derecha
TEXT=”#rrvvaa” Cambia el color del texto </P>
TEXT=”red” general.
<P ALIGN="JUSTIFY">
Indicará el color de los enlaces Aquí van los contenidos Justificar
LINK=”#rrvvaa”
que no han sido visitados. Por </P>
LINK=”blue”
defecto será azul.
VLINK=”#rrvvaa” Es el color de los enlaces ETIQUETA: SANGRÍA <BLOCKQUOTE>
VLINK=”green” visitados.
ALINK=”#rrvvaa” Es el color de los enlaces Puede ir dentro de la etiqueta <BODY> o dentro de la
ALINK=”river” activos. etiqueta <P>. Su función es colocar el texto con una
Indica el margen de la izquierda sangría automática.
LEFTMARGIN=”0”
y de la derecha Ejemplo: Resultado:
Indica el margen de arriba y <P> Se puede crear párrafos con márgenes diferentes.
TOPMARGIN=”0” Se puede crear párrafos con márgenes Este texto saldrá con unos márgenes
debajo. diferentes. adentrados, tanto al lado izquierdo
<BLOCKQUOTE> como al lado derecho. Esto se notará
Ejemplo: Este texto saldrá con unos márgenes después de crear otro párrafo con la
adentrados, tanto al lado izquierdo etiqueta respectiva.
<HTML> como al lado derecho. Esto se notará Observe bien el resultado.
después de crear otro párrafo con la
<HEAD> etiqueta respectiva.
<TITLE>”Túpac Amaru” </TITLE> </BLOCKQUOTE>
Observe bien el resultado.
</HEAD> </P>
<BODY BACKGROUND=”fondo.gif” TEXT=”FF0000”
LINK=”blue” VLINK=”green” TOPMARGIN=”0” ETIQUETA: SALTO DE LÍNEA <BR>
BGPROPERTIES="fixed">
Aquí van otras etiquetas y contenidos.
Permite pasar a la siguiente línea.
</BODY> Ejemplo: Resultado:
</HTML> Elefante <BR> Elefante
Paloma <BR> Paloma
Realiza una página de título Javier Heruad el cuerpo de color Vaca <BR> Vaca
naranja, encabezado I.E Javier Heraud color de texto blanco y
como párrafo el Himno del Colegio. ETIQUETA: FUENTE <FONT>
Permite cambiar el tamaño, color y tipo de letra; trabajando
para ello con los atributos: FACE, SIZE y COLOR,
respectivamente.
Visitar la dirección
https://www.youtube.com/watch?
v=BqGufV8aXhY crtl +clic para ir a la dirección web
Define el tipo de letra. Utilice sólo tipos de letra Ejemplo: Resultado:
comunes: Times New Roman, Arial, Arial Black, 2 <SUP>3</SUP> 23
FACE= “ARIAL” Algerian, Comic Sans MS, Tahoma y Verdana.
Ejemplo: ETIQUETA: ENCABEZADOS <H1>, <H2>, <H3>, <H4>,
<FONT FACE="Comic Sans MS, Arial, Verdana"> <H5> y <H6>
Permite indicar el tamaño de la fuente, su valor
Esta etiqueta tiene 6 niveles, donde cada nivel muestra un
puede estar entre 1 y 7; donde 1, es el de
menor tamaño y 7 es el de tamaño más grande. tamaño diferente de letra; es así que la etiqueta de
SIZE= “4”
encabezado <H1>, muestra los encabezados más
Ejemplo:
grandes; luego la etiqueta de encabezado <H2>, muestra
<FONT SIZE=”+1”>
Permite definir el color que tendrá el texto. un encabezado más pequeño que el anterior y así
Puede ser mediante código de color o nombre sucesivamente.
COLOR= de color en inglés. Los encabezados implican también una separación en
“BLUE” párrafos, así que todo lo que escribamos dentro de <H1> y
Ejemplo:
<FONT COLOR=”red”> </H1> (o cualquier otro encabezado) se colocará en un
párrafo independiente.
Ejemplo: Ejemplo: Resultado:
Resultado
<FONT FACE="COMIC SANS MS, ARIAL,
<H1>Encabezado1</H1> Encabezado1
Este texto tiene <H2>Encabezado2</H2> Encabezado2
VERDANA" SIZE="6" color="BLUE">
tipo de fuente:
Este texto tiene tipo de fuente: Arial, <H3>Encabezado3</H3> Encabezado3
Arial, Tamaño: 6 y
tamaño: 6 y color: Blue.
color: Blue. <H4>Encabezado4</H4> Encabezado4
</FONT>
ETIQUETA: NEGRITA <B>
La etiqueta <B>, viene de BOLD (Negrita), que permite
aplicar el estilo: NEGRITA sobre el texto que se encuentra ETIQUETA: TEXTO PEQUEÑO <SMALL>
dentro de esta etiqueta. La etiqueta <SMALL>, viene de PEQUEÑO, que permite
que el texto se reduzca de tamaño. Podemos utilizar hasta
Ejemplo:
4 repeticiones continuas de esta etiqueta, donde el
<B> Texto en negrita</B> resultado será un texto de menor tamaño.
ETIQUETA: CURSIVA <I>
Ejemplo: Resultado:
La etiqueta <I>, viene de ITALIC (Cursiva), que permite
<SMALL>Pequeño</SMALL> Pequeño
aplicar el estilo: CURSIVA sobre el texto que se encuentra
dentro de esta etiqueta. <SMALL><SMALL>Pequeño</SMALL></SMALL> Pequeño
Ejemplo: <SMALL><SMALL><SMALL>Pequeño</SMALL></SMALL></SMALL> Pequeño
<I> Texto en cursiva </I> <SMALL><SMALL><SMALL><SMALL>Pequeño</SMALL></SMALL></SMALL></SMALL> Pequeño
ETIQUETA: SUBRAYADO <U>

ETIQUETA: TEXTO GRANDE <BIG>
La etiqueta <U>, viene de UNERLINED (Subrayar), que
permite aplicar el estilo: SUBRAYADO sobre el texto que La etiqueta <BIG>, viene de GRANDE, que permite que el
se encuentra dentro de esta etiqueta. texto aumente de tamaño. Podemos utilizar hasta 4
El uso de los subrayados ha de ser aplicado con mucha repeticiones continuas de esta etiqueta, teniendo como
precaución, dado que los enlaces hipertexto van a indicar resultado que nuestro texto aumentará de tamaño.
que se accione lo contrario; con lo que podemos confundir Ejemplo: Resultado:
al lector y apartarlo del verdadero interés de nuestro texto.
<BIG>Grande</BIG> Grande
Ejemplo: <BIG><BIG>Grande</BIG></BIG> Grande
<U>Los años de estudio </U>
<BIG><BIG><BIG>Grande</BIG></BIG></BIG> Grande
ETIQUETA: TACHADO <S>
<BIG><BIG><BIG><BIG>Grande</BIG></BIG></BIG></BIG> Grande
La etiqueta <S>, viene de STRIKE (Tachado), que permite
aplicar un estilo de TACHADO; es decir, que aparece una ETIQUETA: LISTA DESORDENADA <UL>
línea atravesando al texto que se encuentra dentro de esta
etiqueta. Se la conoce también como “Lista no ordenada” o “Lista sin
numerar”. Las iniciales de la etiqueta <UL>, vienen de
Ejemplo:
Unordered Lists (Lista Desordenada). Esta etiqueta sólo
<S>Tachado</S> indica el tipo de lista que queremos lograr, pero para lograr
ETIQUETA: SUBÍNDICES <SUB> el listado de palabras tenemos que utilizar otra etiqueta
<LI> (LISTA INTERNA). Se utiliza para citar elementos que
La etiqueta <SUB>, viene de SUBÍNDICE, que permite que
no tengan orden definido. Los resultados son tipo viñetas.
el texto se reduzca de tamaño y que se ubique en un nivel
La etiqueta <UL>, puede contener los siguientes atributos:
más bajo de lo normal. Se utiliza por lo general en cifras
numéricas. Es el atributo que permitirá elegir el tipo de viñeta:
 “DISK” : Viñeta en forma de disco.
Ejemplo: Resultado:  “CIRCLE” : Viñeta en forma de círculo.
2 <SUB>3</SUB> 23  “SQUARE” : Viñeta en forma de cuadrado.
ETIQUETA: SUPRAÍNDICE <SUP> Ejemplo: Resultado:

La etiqueta <SUP>, viene de SUPERÍNDICE, que permite <UL TYPE=”CIRCLE”>  Enrique Iglesias
que el texto se reduzca de tamaño y que se ubique en un <LI> Enrique Iglesias  Alejandra Guzmán
nivel más alto de lo normal. Se utiliza por lo general en <LI> Alejandra Guzmán  Cristian Castro
cifras numéricas. <LI> Cristian Castro  Cristina Aguilera
<LI> Cristina Aguilera  Jennifer López
<LI> Jennifer López
</UL>
ETIQUETA: LISTA ORDENADA <OL> Es un espacio en blanco, cada vez que digitemos dichos
Se la conoce también como “Lista numerada”. Las iniciales caracteres ( ) se abrirá un espacio en blanco, como
de la etiqueta <OL>, vienen de Ordered Lists (Lista si estuviéramos dando una barra espaciadora.
Ordenada). Esta etiqueta sólo indica el tipo de lista que
queremos lograr, pero para lograr el listado de palabras 4. ETIQUETAS DE TABLAS
tenemos que utilizar otra etiqueta <LI> (LISTA INTERNA).
Se utiliza para citar elementos que si tienen un orden ETIQUETA: INSERTAR TABLA <TABLE>
definido. Los resultados son del tipo numeración.
La etiqueta <OL>, puede contener los siguientes atributos: La etiqueta <TABLE>, por sí sola no creará nada, tiene que
ir acompañada de otras etiquetas. Sus atributos, son:
Es el atributo que permitirá elegir el tipo de numeración: Determina el borde exterior. El valor
 “1” : Números arábigos. BORDER = “ ” tiene que ser un número, si no se
 “I” : Números romanos en mayúsculas. especifica, no se verán las líneas.
 “i” : Números romanos en minúsculas. Indica el espacio que debe existir entre
 “A” : Letras en mayúsculas. CELLSPACING = “ ” las distintas celdas de la tabla. Por
 “a” : Letras en minúsculas. defecto será 2.
Es la cantidad de espacio entre el
Ejemplo: Resultado: CELLPADDING = “ ” borde de la celda y el contenido de
<OL TYPE=”A”> esta, por defecto es 1.
A) Enrique Iglesias Determina el ancho de la tabla. El valor
<LI> Enrique Iglesias B) Alejandra Guzmán WIDTH = “ ”
<LI> Alejandra Guzmán puede ser numérico o porcentaje.
C) Cristian Castro Determina el alto de la tabla. El valor
<LI> Cristian Castro HEIGHT = “ ”
<LI> Cristina Aguilera D) Cristina Aguilera puede ser numérico o porcentaje.
<LI> Jennifer López E) Jennifer López BORDERCOLOR = “ Define el color del borde. Se puede
</OL> ” expresar en nombre o código de color.
ETIQUETA: LISTA DE DEFINICIÓN <DL>

ETIQUETA: FILA DE LA TABLA <TR>
Es una etiqueta cerrada y las iniciales de la etiqueta <DL>,
vienen de Definition Lists (Lista de Definición). Se utiliza Definirá cada una de las filas de la tabla. Por cada
para crear todo tipo de documentos en donde la definición elemento <TR> que se incluya se creará una fila de la
tenga dos niveles. Ejemplo: diccionario, glosario, índice, tabla. No es necesario indicar la etiqueta de cierre. Sus
subtítulos, etc., permitiendo así que cada elemento tenga atributos, son:
su propia descripción. En esta lista de definición, existirán Indica la alineación del elemento que se
dos elementos: encuentra dentro de la celda. Puede tomar
uno de los siguientes valores:
 El término, aparecerá pegado al borde izquierdo del
ALIGN = “ ”  LEFT: Alineación a la izquierda. Este
documento. valor se da por defecto.
 La definición, aparecerá ligeramente tabulada con  RIGHT: Alineación a la derecha.
respecto al borde izquierdo.  CENTER : Indicará centrado
Esta etiqueta sólo indica el tipo de lista que queremos Indicará la alineación vertical del dato dentro
lograr, pero para lograr el listado de los términos y de su de la celda. Se podrá especificar donde se
respectiva definición, tenemos que utilizar las etiquetas: colocarán los datos dentro de la celda.
<DT> y <DD>, respectivamente. Afectarán a toda la fila. Los valores que
VALIGN = “ ” puede tomar son:
ETIQUETA: DEFINICIÓN DEL TÉRMINO <DT>  TOP: Parte superior de la celda.
 MIDDLE: Centrado verticalmente dentro
Se utiliza dentro de la etiqueta <DL>. Esta etiqueta definirá de la celda.
cada uno de los términos de la lista. Las iniciales <DT>,  BOTTOM: En la parte baja de la celda.
viene de Definition Term (Definición del Término). Indicará el color de fondo que tendrán todas
BGCOLOR = “ ”
las celdas de la fila de la tabla.
ETIQUETA: DEFINICIÓN DE DEFINICIÓN <DD>
Se utiliza dentro de la etiqueta <DL> y después de la Ejemplo utilizando los atributos de las etiquetas <TABLE> y <TR>
etiqueta <DT>. Esta etiqueta definirá cada una de las <TABLE BORDER="3" WIDTH="30%" HEIGHT="300">
definiciones de los respectivos términos de la lista. Las <TR BGCOLOR="aqua" VALIGN = "top">
iniciales <DD>, viene de Definition Definition (Definición de Lenguaje HTML
Definición). </TR>
<TR BGCOLOR="pink" ALIGN = "center">
Ejemplo: Macromedia Flash
<DL> </TR>
<DT> Hardware <TR BGCOLOR="yellow" VALIGN = "middle">
<DD> Es la parte física de la computadora; Microsoft Visual Fox Pro
es decir, todo lo que podemos ver y </TR>
tocar. </TABLE>
<DT> Software
<DD> Es la parte lógica de la computadora; Resultado:
es decir, aquello que no podemos ver
ni tocar.
</DL>
Resultado: ETIQUETA: COLUMNA DE LA TABLA <TD>

Hardware Define el inicio de una columna. La etiqueta <TD> debe ir
Es la parte física de la computadora; después de la etiqueta <TR>. Sus atributos, son:
es decir, todo lo que podemos ver y
tocar.
Software
Es la parte lógica de la computadora;
es decir, aquello que no podemos ver
ni tocar.
CARACTER ESPECIAL:

Indica la alineación horizontal del dato dentro Resultado:
de la celda.
 LEFT: Alineación a la izquierda. Este
ALIGN = “ ”
valor se da por defecto.
 RIGHT: Alineación a la derecha.
 CENTER : Indicará centrado.
Indica la alineación vertical del dato la celda.
 TOP: Parte superior de la celda. PRÁCTICA 02: CREACIÓN DE TABLAS
VALIGN = “ ”  MIDDLE: Centrado verticalmente dentro
de la celda.
 BOTTOM: En la parte baja de la celda
Especifica el ancho que tendrá la columna de
WIDTH = “ ” la tabla, se puede especificar en puntos o
porcentaje.
Indicará el color de fondo que tendrá sólo
BGCOLOR = “ ”
esta celda de la tabla. El color es para cada.
Ejemplo de Tabla con atributos de Fila y Celda

<TABLE BORDER="2" WIDTH="30%" HEIGHT="100">
<TR ALIGN="center">
<TD BGCOLOR="lime">Antonio</TD>
<TD BGCOLOR="yellow">Pedro</TD>
<TD BGCOLOR="pink">Juana</TD>
</TR>
</TABLE> 5. ETIQUETAS DE INSERCIÓN DE
OBJETOS ESTÁTICOS Y MULTIMEDIA
Resultado:
Problemática pedagógica: La Drogadicción.

ETIQUETA: INSERTAR IMAGEN <IMG>
ETIQUETA: COMBINAR CELDAS <TH> Permite insertar imágenes dentro de una página. Los
Se usará para definir una celda de tipo cabecera. archivos deberán ser de preferencia de formatos: GIF,
Automáticamente centra el texto y lo pone en negrita. JPEG, JPG o XBM. El formato GIF es más recomendado
Utilizaremos esta etiqueta para los títulos de las filas o para iconos, gráficos, etc., y el formato JPEG es más útil
columnas. Permite unir dos o más celdas, ya sea en forma para imágenes reales como paisajes, personas, etc.
horizontal o vertical. Sus atributos, son: Existen unos casos especiales en las imágenes GIF, que
Indicará el número de filas que ocupará está son las imágenes transparentes y las imágenes animadas.
ROWSPAN = “ ”
celda en la misma fila.
Tiene los siguientes atributos:
Indicará el número de columnas que ocupará
COLSPAN = “ ”
la celda actual. SRC=“ ”
NOWRAP Permite que no se divida la línea por defecto. Indica la ubicación de la imagen que será empleada en nuestra
página. Dentro de las comillas. se deberá especificar la dirección
exacta de donde está la imagen a insertar.
Ejemplo de Columnas Combinadas
Ejemplo:
<TABLE BORDER="1" BORDERCOLOR="red" WIDTH="20%"
BGCOLOR="yellow" > <IMG SRC=”foto01.jpg”>
<TR> BORDER=“ ”
<TD WIDTH="25%" COLSPAN="2" ALIGN="center">
Indica el tamaño del borde que se usará para nuestra imagen. El
Institución Educativa
valor asignado podrá ser desde el uno (1) hasta un número 10,
</TD>
20 o más.
</TR>
<TR> Ejemplo:
<TD WIDTH="50%" ALIGN="center"> Primaria </TD> <IMG SRC=”foto01.jpg” BORDER=”5”>
<TD WIDTH="50%" ALIGN="center"> Secundaria </TD>
</TR> HEIGHT=“ ”
</TABLE> Determina el alto de la imagen a mostrar, se especifica en puntos
de la pantalla (píxeles) o en tanto por ciento sobre el tamaño del
Resultado: documento. Al modificar el alto, automáticamente se modificará
su ancho adecuado.
Ejemplo:
<IMG SRC=”foto01.jpg” HEIGHT=”80%”>
Ejemplo de Filas Combinadas WIDTH=“ ”

<TABLE BORDER="1" BORDERCOLOR="RED" WIDTH="20%" Determina el ancho en que se mostrará la imagen, escalándola al
BGCOLOR="YELLOW"> tamaño que se quiera. También se expresará en píxeles o en
<TR> tanto por ciento. Al modificar el ancho, automáticamente se
<TD WIDTH="50%" ROWSPAN="3"> ESPECIALIDADES </TD> modificará su alto adecuado.
<TD WIDTH="50%"> COMPUTACIÓN</TD> Ejemplo:
</TR>
<TR> <IMG SRC=”foto01.jpg” WIDTH=”75%”>
<TD WIDTH="50%">SECRETARIADO</TD>
ALIGN=“ ”
</TR>
<TR> Indica la alineación y/o ubicación del texto con respecto a la
<TD WIDTH="50%">INGLÉS </TD> imagen.
</TR> TOP : La primera frase se coloca en la parte alta.
</TABLE> MIDDLE : La primera frase se coloca en el punto medio.
BOTTOM: La primera frase se coloca en la parte de abajo.
LEFT : Coloca la imagen a la izquierda del texto.
RIGHT : Coloca la imagen a la derecha del texto.
Ejemplo:
<IMG SRC=”foto01.jpg” ALIGN=”MIDDLE”> Indica el color de fondo que se usará para
la marquesina. Dicho color se expresa con
HSPACE=“ ”
nombre o código de color.
Indica el espaciado horizontal que debe separar a la imagen del BGCOLOR= “ ” Ejemplo:
texto o cualquier otro elemento circundante. Se especificará en
puntos. <MARQUEE BGCOLOR=”GREEN”>
Ejemplo: </MARQUEE>
<IMG SRC=”foto01.jpg” HSPACE=”20”>
Indica la dirección, hacia donde se va a
VSPACE=“ ” desplazar el objeto. Tiene cuatro valores:
 Left (izquierda)
Indica el espaciado vertical que debe separar a la imagen del
 Right (derecha)
texto o cualquier otro elemento circundante. Se especificará en
 Up (arriba)
puntos DIRECTION= “ ”  Down (abajo)
Ejemplo:
Ejemplo:
<IMG SRC=”foto01.jpg” VSPACE=”25”>
<MARQUEE DIRECTION=”LEFT”>
ALT=“ ” Institución Educativa
</MARQUEE>
Específica el texto que se mostrará al pasar el mouse por encima
de la imagen. Modifica el ancho de la marquesina. El
Ejemplo: valor del ancho se expresa en porcentaje.
<IMG SRC=”foto01.jpg” ALT=”Hola Amigos”> Ejemplo:
WIDTH= “ ”
<MARQUEE WIDTH=”80%”>
Si insertamos dos imágenes seguidas, lo que obtendremos Institución Educativa
como resultado será que las dos imágenes estén pegadas; </MARQUEE>
para evitar ello, debemos de separar las imágenes
Modifica el alto de la marquesina. El valor
utilizando el atributo respectivo. del alto se expresa en número (píxeles).
Ejemplo: Ejemplo:
HEIGHT= “ ”
<IMG SRC=”foto01.jpg” VSPACE=”25”> <MARQUEE HEIGHT=”20”>
<IMG SRC=”foto01.jpg”> Institución Educativa
</MARQUEE>
También podemos utilizar la etiqueta <BR> para colocar la
otra imagen en la siguiente línea. Permite lograr un efecto sobre el
El valor del atributo SCR permite especificar una dirección desplazamiento. Tiene dos valores:
 Alternate.- Permite desplazar el objeto
URL y es por tanto correcto encontrar imágenes en la red;
de derecha a izquierda o viceversa.
el problema es que la visibilidad de la imagen será  Slide.- Desplaza el texto y objeto hacia
demasiado lenta. BEHAVIOR= “ ” un lugar específico y luego se detiene.
Podemos insertar en nuestro trabajo una imagen que se Ejemplo:
encuentra en la red, para ello tendremos que utilizar la <MARQUEE BEHAVIOR=”ALTERNATE”>
dirección URL exactamente tal y como aparece en la barra Institución Educativa
de direcciones. </MARQUEE>
Ejemplo: Indica el número de veces que se va a
<IMG SCR="http://www.aramis.fr/imagenes/flores/rosa.gif"> desplazar el objeto. Tiene dos valores:
 Num: Cantidad definida (0 ........00).
 Infinite: Cantidad indeterminada
ETIQUETA: MARQUESINA <MARQUEE>
LOOP= “ ” (“infinite”).
Esta etiqueta puede ir dentro de las tablas y dentro de los Ejemplo:
marcos. <MARQUEE LOOP=”8”>
Permite dar movimientos a los objetos que se encuentran Institución Educativa
dentro de esta etiqueta. Los objetos pueden ser textos o </MARQUEE>
imágenes. Tiene los siguientes atributos:
Determina la velocidad en que se
desplazará la marquesina. Este valor tiene
que ser expresado en número. Acepta
números desde el 1 hasta el 500.
Si el número del valor es bajo, la velocidad
SCROLLDELAY=" será mayor y si el número del valor es alto,
" entonces la velocidad será lenta.
Ejemplo:
<MARQUEE SCROLLDELAY=”150”>
</MARQUEE>
Esta etiqueta puede contener todos sus atributos:

Ejemplo:
<MARQUEE BGCOLOR=”PINK” DIRECTION=”UP”
WIDTH=”80%” HEIGHT=”20” SCROLLDELAY=”150”>
</MARQUEE>
ETIQUETA: REGLA HORIZONTAL <HR>

Es una etiqueta abierta. Se usa para dividir un documento
en distintas secciones, mostrará una línea horizontal de
tamaño determinable.
Si no se especifican atributos dibujará una línea que ocupe
el ancho de la pantalla. Con los atributos podemos
especificar su color, forma, tamaño y otras características. Es una etiqueta abierta. Permite colocar un archivo de
Estos atributos son: vídeo dentro de la página web. Se utiliza esta etiqueta para
Determinará la alineación de la regla, pero sólo si incluir todos aquellos archivos ajenos al navegador y que
la regla no ocupa todo el ancho de la pantalla. necesitan por lo tanto la ejecución de algún plug-in para su
Tiene como valores: interpretación.
 Left (izquierda) Esta etiqueta podrá colocar un archivo de vídeo, audio o
ALIGN= “ “  Right (derecha) imagen de algún tipo distinto. Sólo podrá ser visto por el
 Center (centro)
usuario, si éste posee el plug-in correspondiente que trata
Ejemplo: ese tipo de archivos, en caso contrario mostrará un
<HR ALIGN=”LEFT”> mensaje de error indicando al usuario que debe proveerse
No muestra la sombra de la barra, evitando el de ese plug-in para poder visualizar el archivo de forma
efecto en tres dimensiones. correcta.
NOSHADE
Ejemplo: Se pueden usar los siguientes atributos:
<HR NOSHADE> Fijará la ruta en la que se encuentra el
SRC=“ ” archivo de audio a reproducir. Se puede
Indicará la altura de la regla en puntos de la
llamar desde la carpeta o de una URL.
pantalla. El valor se expresa en número.
SIZE= ” “ Determina el número de veces que se
Ejemplo:
ejecutará el archivo de vídeo. Los valores
<HR SIZE=”20”> admitidos son:
Especificará el ancho de la regla. Este valor debe LOOP=“ ”  1, 2, ... : Veces que se repetirá el vídeo.
especificarse en porcentaje o número.  True : Se repite indefinidamente.
WIDTH= ” “  False : Se detiene después de
Ejemplo:
ejecutarse una sola vez.
<HR WIDTH=”80%”>
Modifica el ancho de la consola en donde
Define el color de la línea. Este valor se puede se verá el vídeo. El valor se podrá mostrar
expresar en nombre o código de color. WIDTH=“ ”
en porcentaje (teniendo en cuenta el ancho
COLOR=“ ”
Ejemplo: del monitor).
<HR COLOR=”RED”> Modifica el alto de la consola. El valor se
HEIGHT= “ ”
podrá representar en número entero.
Esta etiqueta puede contener todos sus atributos:
Determina el volumen de reproducción del
VOLUME=" "
Ejemplo: sonido, y que puede variar entre 0 y 100.
<HR COLOR=”RED” WIDTH=”80%” ALIGN=”LEFT” SIZE=”20”> Determina si el fichero de audio debe
empezar a reproducirse por sí sólo al
ETIQUETA: INSERTAR SONIDO <BGSOUND> cargarse la página o si por el contrario será
preciso la actuación del usuario (o de
Es una etiqueta abierta. Permite colocar un archivo de AUTOSTART=“ ” código de script) para que comience la
sonido a la página web, éste sonido se reproducirá audición. Posee dos valores:
automáticamente al cargarse la página. Admite los  True : Se inicia automáticamente.
formatos de audio MID, WAV y MP3 (en versiones  False: Se iniciará cuando el usuario lo
actuales). determine.
El oído humano es capaz de captar la asombrosa cantidad
de 44000 sonidos por segundo, es decir, 44 KHz. Por lo Ejemplo:
tanto, para que un sonido digital tenga suficiente calidad <EMBED SRC="video01.mid" LOOP=”3” WIDTH=”50%
deberá estar basado en una frecuencia similar a ésta. AUTOSTART="false">
Tiene los siguientes atributos:
Indica la ubicación del sonido que será
SRC= “ ”
empleada en nuestra página. 6. ETIQUETAS DE ENLACES
Dentro de las comillas. se deberá especificar la
dirección donde está el archivo de sonido.
ETIQUETA: VÍNCULO <A>
Esta propiedad determina el número de
repeticiones del sonido; puede tener como Permite crear un vínculo hacia otra página que se
valores: encuentra dentro de nuestra carpeta; también puede
LOOP= “ ”
 1, 2, ... : Veces que se repetirá el sonido. realizarse el enlace interno; es decir, desde un punto de la
 Infinite : El sonido se repite página hacia otro punto de la misma página, esto se realiza
indefinidamente. en el caso que la página sea demasiado grande y no
Determina el balance del sonido entre los dos tengamos que estar utilizando la barra de desplazamiento.
altavoces del equipo. Sus valores pueden estar La etiqueta puede actuar sobre un texto, una imagen u otro
BALANCE=" "
entre -10,000 y +10,000, correspondiendo el
valor 0 a un balance equilibrado.
elemento que se encuentre en la página.
Los enlaces pueden ser:
Fija el volumen al que se oirá el sonido, y sus  Locales: Son los producidos de una página a otra
VOLUME=" " valores pueden variar entre -10,000 (mínimo) y
página, pero del mismo proyecto.
0 (máximo).
 Internos: Son los producidos dentro de una sola página.
 Externos: Son los producidos hacia una página web o
hacia un correo electrónico.
Esta etiqueta tiene los siguientes atributos:
Esta etiqueta se puede insertar de dos formas:
Ejemplo utilizando para escuchar automáticamente el sonido:

<BGSOUND SRC="sonido01.wav" loop="2">
Ejemplo utilizando palabra para abrir el sonido:
<A href=”balada01.mp3">
Haz clic aquí para oír la música
</A>
ETIQUETA: INSERTAR VÍDEO <EMBED>

Aquí se indicará la dirección con la cual se creará Permite eliminar los bordes de los
FRAMEBORDER=” “
el enlace (vínculo). marcos. Se expresa en números.
Para crear un enlace interno deberá de ir Es el espacio entre un borde y el otro
precedido por el signo michi (#) FRAMESPACING=” “
borde. Se expresa en números.
HREF= “ ” Ejemplo:
Define el color de la división de los
<A HREF=”pagina06.html”> BORDERCOLOR=” “ marcos. Puede ir nombre o código de
Biografía color.
</A>
Define el ancho de la división de los
Permite marcar un área, poniéndole un nombre BORDER=” “
marcos. Se expresa en números.
(con el atributo “NAME”) que luego será buscado
con el atributo de enlace “HREF”. ETIQUETA: DIVISIÓN DE MARCO <FRAME>
Este atributo se utiliza para enlaces del tipo
interno; es decir, dentro de la misma página.
Es una etiqueta abierta y define tan sólo las características
de un marco determinado, no de un conjunto de ellos.
Ejemplo: En esta primera parte,
<A HREF="#animales"> crearemos el vínculo Tiene como atributos los siguientes:
Creación de Tablas (HREF) al nombre SRC = “ “
</A> (NAME) que queremos Contiene el nombre del archivo que se ubicará en esta división.
. buscar luego de hacer Este archivo será buscado, llamado y colocado en este marco.
. clic.
Ejemplo:
. El nombre debe de ir
. precedido con el <FRAME SRC=”botones.html”>
. símbolo michi ( # ). Donde: “botones.html” es el archivo que se ubicará en este
<A NAME="frutas"> primer frame.
Ejemplo:
NAME=“ ” Las Tablas NAME =” “
“#animales”
</A> . Asigna un nombre a un marco para que después podamos
. referirnos a él. Este nombre no será el mismo que el que se
. encuentra en el atributo SRC.
En esta segunda parte Ejemplo:
se colocará el nombre
<FRAME SRC=”botones.html” NAME=”izquierda”>
que buscaremos con el
enlace. NORESIZE
Imaginemos que tenemos una página muy Si lo especificamos el usuario no podrá cambiar de tamaño el
extensa; en donde, en la parte superior tenemos marco; el marco quedará estático.
todos los títulos de la página y en la parte inferior
tenemos el desarrollo de dichos títulos. SCROLLING=“ “
Entonces luego de hacer clic arriba en “Creación
Decide si se colocan o no barras de desplazamiento al marco
de tablas”, el cursor inmediatamente se ubicará
para que podamos movernos por su contenido. Su valor es por
en “Las Tablas”.
defecto AUTO. Las otras opciones son YES y NO.
Trabaja con los siguientes valores:
 “_top” : Muestra el enlace en una nueva FRAMEBORDER=” “
página, en todo el área de la pantalla. Si lo igualamos a cero, se eliminará el borde con todos los
TARGET=“ ”  “_blanck” : Muestra la página en una nueva marcos contiguos que tengan. También este valor es cero.
ventana y sin nombre del navegador.
 “_self” : Muestra la nueva página en el MARGINWIDTH=” “
marco donde está declarado el enlace. Permite cambiar los márgenes horizontales dentro de un marco.
Se representa en píxeles.
7. ETIQUETAS DE MARCOS MARGINHEIGHT=” “
Permite cambiar los márgenes verticales dentro de un marco.
ETIQUETA: CREACIÓN DE MARCO <FRAMESET> Se representa en píxeles.
Es una etiqueta cerrada y se coloca en reemplazo de la Ejemplo:
etiqueta <BODY> (ya no irá el <BODY>). Define el marco
<HTML>
del documento; es decir, que permite que la ventana de la <HEAD>
página se pueda dividir en varias secciones y puedan <TITLE>
trabajar conjuntamente. Esta etiqueta no trabaja sola, tiene Ejercicio de Listas
que tener otras etiquetas en su interior para poder obtener </TITLE>
el resultado. Tiene como atributos: </HEAD>
Permite dividir el cuerpo del <FRAMESET ROWS="50%,50%">
documento en partes verticales. Como <FRAME SRC="izquierda.html">
valores podrán colocarse números <FRAME SRC="derecha.html">
que sumados sean el ancho del </FRAMESET>
monitor o porcentajes que sumados </HTML>
COLS= “ “
sean 100%.
Ejemplo Ejemplo:
<FRAMESET COLS="25%,75%"> o <HTML>
<HEAD>
<FRAMESET COLS="25%,*"> <TITLE>
Permite dividir el cuerpo del Ejercicio de Listas
documento en partes horizontales. </TITLE>
Como valores podrán colocarse </HEAD>
números que sumados sean el alto del <FRAMESET COLS="25%,75%">
monitor o porcentajes que sumados <FRAME SCR="ejemplo01.html">
ROWS= “ “
sean 100%. <FRAME SCR="ejemplo02.html">
Ejemplo </FRAMESET>
<FRAMESET ROWS="20%,80%"> o </HTML>
<FRAMESET ROWS="20%,*">
8. TALLER
Problemática pedagógica: Problemas Sociales.
 Proyecto de creación de Página Web.

4-2 TeoríaHTML

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

4-2 TeoríaHTML

Cargado por

Copyright:

Formatos disponibles

1.

GENERALIDADES ESTRUCTURA DE UNA PÁGINA WEB HTML

Ejemplo: <SMALL><SMALL><SMALL>Pequeño</SMALL></SMALL></SMALL> Pequeño

<I> Texto en cursiva </I> <SMALL><SMALL><SMALL><SMALL>Pequeño</SMALL></SMALL></SMALL></SMALL> Pequeño

ETIQUETA: SUBRAYADO <U>

ETIQUETA: SUPRAÍNDICE <SUP> Ejemplo: Resultado:

ETIQUETA: LISTA DE DEFINICIÓN <DL>

Resultado: ETIQUETA: COLUMNA DE LA TABLA <TD>

CARACTER ESPECIAL:

Ejemplo de Tabla con atributos de Fila y Celda

Problemática pedagógica: La Drogadicción.

Ejemplo de Filas Combinadas WIDTH=“ ”

Esta etiqueta puede contener todos sus atributos:

ETIQUETA: REGLA HORIZONTAL <HR>

Ejemplo utilizando para escuchar automáticamente el sonido:

ETIQUETA: INSERTAR VÍDEO <EMBED>

También podría gustarte

4-2 TeoríaHTML

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

4-2 TeoríaHTML

Cargado por

Copyright:

Formatos disponibles

1.

GENERALIDADES ESTRUCTURA DE UNA PÁGINA WEB HTML

Ejemplo: <SMALL><SMALL><SMALL>Pequeño</SMALL></SMALL></SMALL> Pequeño

<I> Texto en cursiva </I> <SMALL><SMALL><SMALL><SMALL>Pequeño</SMALL></SMALL></SMALL></SMALL> Pequeño

ETIQUETA: SUBRAYADO <U>

ETIQUETA: SUPRAÍNDICE <SUP> Ejemplo: Resultado:

ETIQUETA: LISTA DE DEFINICIÓN <DL>

Resultado: ETIQUETA: COLUMNA DE LA TABLA <TD>

CARACTER ESPECIAL: &nbsp;

Ejemplo de Tabla con atributos de Fila y Celda

Problemática pedagógica: La Drogadicción.

Ejemplo de Filas Combinadas WIDTH=“ ”

Esta etiqueta puede contener todos sus atributos:

ETIQUETA: REGLA HORIZONTAL <HR>

Ejemplo utilizando para escuchar automáticamente el sonido:

ETIQUETA: INSERTAR VÍDEO <EMBED>

También podría gustarte

CARACTER ESPECIAL: