Html

1.1 CONCEPTO
El HTML (HyperText Markup Language) es el lenguaje con el
que se escriben las páginas web. El lenguaje HTML es un
lenguaje que permite escribir texto de forma estructurada, y
que está compuesto por etiquetas, que marcan el inicio y el fin
de cada elemento del documento.
Los documentos HTML deben contener la extensión .html o
.htm, para que puedan ser visualizados en los navegadores.

1.2 EDITORES
Un editor es un programa que permite redactar documentos.
Actualmente existen un gran número de softwares que
permiten crear páginas web sin la necesidad de escribir ni una
sola línea de código HTML.
Para crear páginas web escribiendo directamente el código
HTML se pueden emplear las herramientas Bloc de notas y
Worpad que proporciona Windows.

2.1 IDENTIFICADOR DEL TIPO
DE DOCUMENTO
Toda página web escrita en HTML debe contener la extensión
.html o .htm. Asimismo, tienen que tener las etiquetas <HTML>
y </HTML>.

2.2 CABECERA DE LA PÁGINA
La cabecera de la página se utiliza para agrupar información
sobre ella, como puede ser el título. Se encuentra formada por
las etiquetas <HEAD> y </HEAD>.

2.3 TÍTULO DE LA PÁGINA
El título de la página es el texto que aparecerá en la barra de
título o de la pestaña del navegador, cuando la página esté
cargada en él.
Para asignar un título a una página es necesario escribir el texto
deseado entre las etiquetas <TITLE> y </TITLE>.

2.4 CUERPO DEL
DOCUMENTO
El cuerpo del documento contiene toda la información que se
visualizará en el navegador, como es: el texto, las imágenes, los
formularios, objetos multimedia, etc.
Todos esos elementos se agregan entre las etiquetas <BODY> y
</BODY>, que van debajo de la cabecera.

2.5 COLOR DE FONDO
A través de la etiqueta <BODY> es posible establecer el color o
la imagen de fondo de la página.
El color de fondo se establece a través del atributo BGCOLOR, al
que se asigna un color representado por un valor en
hexadecimal o un nombre predefinido.

2.6 IMAGEN DE FONDO
La imagen de fondo se establece a través del atributo
BACKGROUND, seguido un signo “=” y después el nombre de la
imagen o la ruta donde se localiza dicha imagen.

2.7 COLOR DEL TEXTO
Dentro de la etiqueta <BODY> también se puede especificar el
color del texto, utilizando el atributo TEXT. Al cual se le asigna
un valor representado en hexadecimal o un nombre
predefinido.

3.1 CARACTERES ESPECIALES
Y ESPACIOS EN BLANCO
Carácter Representación
< &LT;
> &GT;
á &AACUTE;
Á &AACUTE;
é &EACUTE;
É &EACUTE;
í &IACUTE;
Í &IACUTE;
ó &OACUTE;
Ó &OACUTE;
ú &UACUTE;
Ú &UACUTE;
ñ &NTILDE;
Ñ &NTILDE;
™ 
Carácter Representación
€ &EURO;
ç &CCEDIL;
Ç &CCEDIL;
ü &UUML;
Ü &UUML;
& &AMP;
¿ &IQUEST;
¡ &IEXCL;
" &QUOT;
· &MIDDOT;
º &ORDM;
ª &ORDF;
¬ &NOT;
© &COPY;
® &REG;

Si se requiere representar un espacio en blanco lo único que
hay que hacer es escribir &nbsp.
Por ejemplo, para insertar el texto: ¡Bienvenido, esta es mi 1ª
página!
Habría que escribir:
¡Bienvenido, esta es mi 1ª página!

3.2 SALTOS DE LÍNEA
Si se pulsa la tecla <INTRO> en un documento HTML, el salto de
línea sólo se producirá en el código, lo cual hará que no se
muestre en el navegador el salto de línea. Para producir un
salto de línea en el navegador, en lugar de pulsar la tecla
<INTRO> hay que insertar la etiqueta <BR>.

3.3 TEXTO PREFORMATEADO
Una forma de asegurarnos de que el texto aparezca en el
navegador tal cual ha sido insertado dentro del código, es
utilizando las etiquetas <PRE> y </PRE>.

3.4 SEPARADORES
El elemento que suele utilizarse para separar secciones dentro
de una misma página es una regla horizontal. Para insertar
dicha regla hay que insertar la etiqueta <HR>.
Atributo Significado Posibles valores
ALIGN
alineación de la regla
dentro de la página
LEFT (izquierda)
RIGHT (derecha)
CENTER (centro)
WIDTH ancho de la regla
un número, acompañado de % cuando se
desee que sea en porcentaje
SIZE alto de la regla un número
COLOR color de la regla un valor hexadecimal
NOSHADE
eliminar el sombreado de
la regla
no puede tomar valores

3.5 SANGRADO DE TEXTO
La sangría es una especie de margen que se establece a ambos
lados del texto. Para que un texto aparezca sangrado, se inserta
entre las etiquetas <BLOCKQUOTE> y </BLOCKQUOTE>.

3.6 FORMATEAR EL TEXTO
Las propiedades del texto pueden modificarse a través de las
etiquetas <FONT> y </FONT>, y especificando algunos de los
atributos de la etiqueta:
FACE fuente nombre de la fuente, o fuentes
COLOR color del texto número hexadecimal o texto predefinido
SIZE tamaño del texto
valores del 1 al 7, siendo por defecto el 3,
o desplazamiento respecto al tamaño por defecto,
añadiendo + o - delante del valor

3.7 RESALTAR EL TEXTO
Etiqueta
Inicio
Etiqueta
Final
Significado Ejemplo
<B> </B> negrita HTML
<I> </I> cursiva HTML
<U> </U> subrayado HTML
<S> </S> tachado HTML
<TT> </TT> teletipo (máquina de escribir) HTML
<BIG> </BIG> aumenta el tamaño de la fuente HTML
<SMALL> </SMALL> disminuye el tamaño de la fuente HTML

3.8 PÁRRAFOS
El texto de una página puede agruparse en párrafos. Para ello,
el texto de cada uno de los párrafos debe insertarse entre las
etiquetas <P> y </P>. También es posible cambiar la alineación
del texto de cada párrafo, sólo hay que escribir el atributo
ALIGN y cualquiera de los siguientes valores:
LEFT
(IZQUIERDA)
RIGHT
(DERECHA)
CENTER
(CENTRADO)
JUSTIFY
(JUSTIFICADO)

3.9 ENCABEZADOS
Existen una serie de encabezados que suelen utilizarse para
establecer títulos dentro de una página. La diferencia entre los
distintos tipos de encabezado es el tamaño de la letra, el tipo
de resaltado, y la separación existente entre el texto y los
elementos que tiene encima y debajo de él.
A continuación se muestran los distintos encabezados
existentes:

3.9 ENCABEZADOS
Etiqueta Ejemplo
<H1> Título 1: HTML
<H2>
Título 2: HTML
<H3>
Título 3: HTML
<H4>
Título 4: HTML

3.10 MARQUESINAS
Las marquesinas son líneas de texto que pueden desplazarse de un
lado a otro de la ventana en forma de línea.
Para insertar una marquesina, es necesario insertar el texto entre las
etiquetas <MARQUEE> y </MARQUEE>.
A través del atributo DIRECTION se modifica la dirección en la que se
moverá el texto. Puede tomar los valores DOWN (de arriba a abajo),
UP (de abajo a arriba), LEFT (de derecha a izquierda) o RIGHT (de
izquierda a derecha).

3.10 MARQUESINAS
A través del atributo BEHAVIOR puede modificarse el tipo de
movimiento. Puede tomar los valores ALTERNATE (de lado a
lado de la ventana, como si rebotara en los extremos), SCROLL
(de un lado a otro, continuamente) o SLIDE (de un lado a otro,
pero una sola vez).

3.11 LISTAS
INICIO FINAL DESCRIPCIÓN
Lista
numerada
<ol type= A * a * I * i start=n>
<lh> título de la lista </lh>
<li> Primera opción
<li> Segunda opción
<li> Tercera opción
</ol>
Se utiliza cuando las
opciones deben ser
numeradas. La opción type
representan número o letras
y start indicará el número
con que inicia.
Lista con
sangrado
<ul type=square * circle * disk>
<li> Primera opción
<li> Segunda opción
<li> Tercera opción
</ul>
Se utiliza cuando las
opciones no presentan un
orden determinado. La
opción type representa la
viñeta.
Lista no
ordenada
<dl>
<dt> Primer tema
<dd> Primer detalle
<dd> Segundo detalle
<dt> Segundo tema
<dd> Tercer detalle
<dd> Cuarto detalle
</dl>
Se utiliza cuando las opciones
llevan un título y una
definición

4.1 DEFINICIÓN
Un hipervínculo o vínculo, es un link o enlace, que al ser
pulsado sobre el, nos dirige hacia una página o archivo.
Los vínculos pueden insertarse en elementos como: texto,
imágenes, etc. Dichos elementos deben encontrarse entre las
etiquetas <A> y </A>.
A través del atributo HREF se especifica la dirección o link, a la
cual nos dirigirá el hipervínculo.

4.2 TIPOS DE REFERENCIA
Existen diferentes formas de expresar una referencia a una
página a través del atributo HREF.
– Referencia absoluta:
Se refiere cuando la ubicación es hacia Internet, es decir,
externa al sitio, en este caso se comienza la referencia con
http://, el nombre del dominio y algunas veces el nombre
de la página.

– Referencia relativa al sitio:
El vínculo se redirecciona a un documento situado dentro
del mismo sitio del documento actual.
– Referencia relativa al documento:
Conduce a un documento situado dentro del mismo sitio,
pero partiendo del directorio donde se encuentra el actual.

– Punto de fijación:
El hipervínculo se dirige hacia un punto dentro del
documento, ya sea dentro del actual o de otro diferente.
Dicho vínculo será:
"nombre_de_documento#nombre_de_punto"

4.3 DESTINO DEL ENLACE
El destino del enlace determina en qué ventana va a ser abierta
la página vinculada, y es especificado mediante el atributo
TARGET. Al cual se le asignan uno de los siguientes valores:
– _BLANK:
Abre la página vinculada en una ventana nueva del
navegador.

– _PARENT:
Abre la página vinculada en la ventana del marco que
contiene el hipervínculo.
– _SELF:
Es la opción predeterminada. Abre la página vinculada en el
mismo marco o ventana que del hipervínculo.

– _TOP:
Abre la página vinculada en la ventana completa del
navegador.

4.4 FORMATO DE LOS
ENLACES
Los vínculos del texto cambian de color cuando el enlace ha
sido pulsado o cuando el puntero del ratón se posiciona sobre
él, estos cambios están predefinidos en cada navegador, pero
es posible modificar esos colores.
Los colores de los links se especifican a través los atributos LINK
(vínculo), ALINK (vínculo activo), y VLINK (vínculo visitado),
dichos atributos deberán colocarse en la etiqueta <BODY>.

4.5 ENLACE A UN E-MAIL
Los hipervínculos permite crear enlaces a un correo electrónico,
cuando se agrega un vínculo de una dirección de correo
electrónico. Este abre la aplicación Microsoft Outlook para
comenzar a escribir un correo electrónico, cuyo destinatario
será el especificado en el enlace. Para ello la referencia del
vínculo debe ser "mailto:direcciondecorreo".

5.1 INSERTAR IMAGEN
Grafico vectorial o mapa de bits que ilustra el contenido de la página
web
Toda página web acostumbra a tener un cierto número de imágenes,
que permiten mejorar su apariencia, o dotarla de una mejor
información visual.
Para colocar una imagen es necesario insertar la etiqueta <IMG>. El
nombre de la imagen se especifica a través del atributo SRC.

5.2 TEXTO ALTERNATIVO
El texto alternativo funciona cuando una imagen no puede ser
visualizada en el navegador, aparezca un texto que deseemos
(por ejemplo, el nombre de la imagen). Esto se especifica con el
atributo ALT.
<IMG SRC=“natsu.jpg” ALT=“Natsu”>

5.3 BORDE DE UNA IMAGEN
Al visualizar una página en un navegador las imágenes
aparecen sin ningún borde alrededor, pero es posible
establecer uno a través del atributo BORDER.
Dicho atributo deberá tomar valores numéricos, que indican el
grosor en píxeles del borde.

5.4 TAMAÑO DE UNA IMAGEN
Cuando se inserta una imagen, esta se muestra en el navegador
con su tamaño original, pero puede modificarse sus medidas al
tamaño que deseemos.
A través de los atributos WIDTH (anchura) y HEIGHT (altura) se
modifica el tamaño de la imagen.

5.5 ALINEACIÓN DE UNA
IMAGEN
La alineación de las imágenes se establece
con el atributo ALIGN. Este atributo indica la
alineación de las imágenes con respecto a la
línea de texto en la que se encuentran.
Los valores del atributo ALIGN pueden ser los
siguientes:
Valor Significado
ABSBOTTOM inferior absoluta
ABSMIDDLE medio absoluta
BASELINE línea de base
BOTTOM inferior
LEFT izquierda
MIDDLE medio
RIGHT derecha
TEXTTOP texto superior
TOP superior

6.1 TABLA
Las tablas están formadas por celdas, que son los recuadros
que se obtienen de la intersección entre una fila y una
columna.
Para crear una tabla se insertan las etiquetas <TABLE> y
</TABLE>. Entre dichas etiquetas se especifican las filas y
columnas que formarán la tabla.

6.2 FILAS
Para colocar filas a la tabla, es necesario insertar las etiquetas
<TR> y </TR> debajo de la etiqueta <TABLE>.
Por ejemplo, para crear una tabla con dos filas escribiríamos:
<TABLE>
<TR>...</TR>
<TR>...</TR>
</TABLE>

6.3 COLUMNAS
Las columnas se especifican con las etiquetas <TD> y </TD>, dichas
etiquetas se insertan entre <TR> y </TR>. Ejemplo:
<TABLE >
<TR>
<TD> …</TD>
<TD> …<</TD>
</TR>
</TABLE>

6.4 FORMATO DE LA TABLA
El formato de tabla se especifica en la etiqueta <TABLE> y se
pueden ocupar los siguientes atributos:
WIDTH ancho de la tabla
HEIGHT altura de la tabla
CELLPADDING
espacio entre el contenido de
las celdas y el borde
un número
CELLSPACING espacio entre celdas un número
BORDER grosor del borde un número
ALIGN
alineación de la tabla dentro de
la página
LEFT (izquierda)
RIGHT (derecha)
CENTER (centro)
BGCOLOR color de fondo número hexadecimal
BACKGROUND imagen de fondo número hexadecimal
BORDERCOLOR color del borde número hexadecimal

6.5 FORMATO DE LAS
CELDAS
Los atributos de la celdas se modifican en la etiqueta <TD>.
WIDTH ancho de la celda
HEIGHT altura de la celda
ALIGN
alineación horizontal del
contenido de la celda
LEFT (izquierda)
RIGHT (derecha)
CENTER (centro)
VALIGN
alineación vertical del contenido
de la celda
BASELINE (línea de base)
BOTTOM (inferior)
MIDDLE (medio)
TOP (superior)
BGCOLOR color de fondo número hexadecimal
BACKGROUND imagen de fondo número hexadecimal
BORDERCOLOR color del borde número hexadecimal

6.6 ENCABEZADO DE UNA
COLUMNA
Las etiquetas <TD> y </TD> se utilizan para definir las celdas de
cada una de las filas, pero también es posible colocar las
etiquetas <TH> y </TH>.
Esta nueva etiqueta hace que el texto de la celda aparezca
centrado y en negrita, por lo que se utiliza para definir los
encabezados o títulos de las columnas.

6.7 TÍTULO DE LA TABLA
El título de la tabla se especifica con las etiquetas <CAPTION> y
</CAPTION>.
Estas etiquetas se colocan después de la etiqueta <TABLE>, y
puede especificarse el valor de los atributos ALIGN (con los
valores BOTTOM, CENTER, LEFT, RIGHT y TOP) y VALIGN (con los
valores BOTTOM y TOP).

6.8 COMBINAR CELDAS
Para las etiquetas <TD> y <TH> existen los atributos COLSPAN y
ROWSPAN, que se utilizan para combinar celdas.
A través del atributo COLSPAN se especifica el número de
columnas por las que se extenderá la celda, y a través del
atributo ROWSPAN se especifica el número de filas por las que
se extenderá la celda.

7.1 SONIDO DE FONDO
Para que nuestra página web contenga sonido deben utilizarse
formatos de audio, tales como: .MP3, .WMA o .MIDI. Una vez
seleccionado nuestro audio se emplea la etiqueta <BGSOUND>,
que se emplea para incluir sonido de fondo.
A través del atributo SRC se especifica la ruta y el nombre del
archivo de audio.

7.1 SONIDO DE FONDO
Con el atributo LOOP se indica el número de veces que se tiene
que reproducir el sonido. Si se desea que el archivo de audio se
reproduzca continuamente en un bucle, se le asigna el valor
infinite o -1. Ejemplo:
<BGSOUND SRC=“intro.mp3” LOOP=“INFINITE”>

7.2 VIDEO Y AUDIO
Los formatos de vídeo que suelen utilizarse en Internet son el
.AVI, .MPEG y .MOV.
La etiqueta <EMBED> se emplea para insertar archivos de
vídeo.
A través del atributo SRC se especifica la ruta y el nombre del
archivo de vídeo.

7.2 VIDEO Y AUDIO
El atributo AUTOSTART indica si el archivo se reproducirá
automáticamente al cargarse la página, y puede tomar los
valores true o false.
El atributo LOOP indica si el archivo se reproducirá
continuamente en un bucle, y también puede tomar los valores
true o false.

7.2 VIDEO Y AUDIO
Los atributos WIDTH (anchura) y HEIGHT (altura) sirven para
especificar el tamaño de la consola de control de vídeo. Estos
atributos pueden tomar como valor un número, que indica el
tamaño en píxeles. Ejemplo:
<EMBED SRC=“video.avi” AUTOSTART=“TRUE” LOOP=“TRUE”
WIDTH=“800” HEIGHT=“600”>

8.1 DEFINICIÓN
Un formulario es el elemento que permite recoger datos
introducidos por el usuario.
Los formularios se insertan a través de las etiquetas <FORM> y
</FORM>. Dentro de la etiqueta <FORM> deberán colocarse
los siguientes atributos:
El atributo ACTION indica la dirección electrónica donde se
mandará el formulario llenado.

8.1 DEFINICIÓN
El atributo ENCTYPE indica el modo en que será cifrada la información para
su envío. Por defecto tiene el valor application/x-www-form-urlencoded.
El atributo METHOD indica el método mediante el que se transferirán las
variables del formulario. Su valor puede ser get o post.
El valor get se utiliza cuando no se van a producir cambios en ningún
documento o programa que no sea el navegador del usuario.
El valor post se utiliza cuando sí se van a producir cambios, como ocurre
cuando el usuario manda datos que deben ser almacenados en una base de
datos.

8.2 ÁREAS DE TEXTO
Las áreas de texto permiten a los usuarios insertar varias líneas
de texto, suelen utilizarse para los comentarios.
Para insertar un área de texto se colocan las etiquetas
<TEXTAREA> y </TEXTAREA> entre las etiquetas <FORM> y
</FORM> del formulario.

8.2 ÁREAS DE TEXTO
El atributo NAME indica el nombre del área de texto.
El atributo ROWS indica el número de líneas que podrán ser
visualizadas en el área de texto por lo que determina el alto del
área de texto.
El atributo COLS indica el número de caracteres por línea que
podrán ser visualizados en el área de texto por lo que
determina al ancho del área de texto.

8.3 ELEMENTOS DE
ENTRADA
Para insertar un elemento de entrada es necesario incluir la
etiqueta <INPUT> entre las etiquetas <FORM> y </FORM> del
formulario.
El atributo NAME indica el nombre que se desea dar al
elemento de entrada, mediante el cual será evaluado, y el
atributo TYPE indica el tipo de elemento de entrada.
Existen diferentes tipos de elementos de entrada y son:

8.3 ELEMENTOS DE
ENTRADA
– Campo de texto:
Para insertar un campo de texto, el atributo TYPE debe tener el valor
text.
El atributo SIZE indica el número de caracteres que podrán ser
visualizados en el campo de texto.
El atributo MAXLENGHT indica el número de caracteres que podrán
ser insertados en el campo de texto.
El atributo VALUE indica el valor inicial del campo de texto.

8.3 ELEMENTOS DE
ENTRADA
– Campo de contraseña:
Para insertar un campo de contraseña, el atributo TYPE debe
tener el valor password.
El resto de atributos son los mismos que para un campo de
texto normal.

8.3 ELEMENTOS DE
ENTRADA
– Botón:
Para insertar un botón, el atributo TYPE debe tener el valor
submit, reset o button.
Si el valor es submit, al pulsar sobre el botón se enviará el
formulario.
Si el valor es reset, al pulsar sobre el botón se restablecerá el
formulario.

8.3 ELEMENTOS DE
ENTRADA
Si el valor es button, al pulsar sobre el botón no se realizará
ninguna acción.
El atributo VALUE indica el texto que mostrará el botón.

8.3 ELEMENTOS DE
ENTRADA
– Casilla de verificación:
Para insertar una casilla de verificación, el atributo TYPE debe
tener el valor checkbox.
El atributo VALUE indica el valor asociado a la casilla de
verificación.
El atributo CHECKED indica que la casilla aparecerá activada
inicialmente. Este atributo no toma valores.

8.4 CAMPOS DE SELECCIÓN
Los campos de selección se utilizan para insertar menús y listas
desplegables.
Para insertarlos se emplean las etiquetas <SELECT> y </SELECT>
en un formulario.
El atributo NAME indica el nombre del menú o lista será el
nombre de la variable que contendrá el valor seleccionado.

El atributo SIZE indica el número de elementos de la lista que
pueden ser visualizados al mismo tiempo.
El atributo MULTIPLE indica que el usuario podrá seleccionar
varios elementos de la lista al mismo tiempo, ayudándose de la
tecla Ctrl. Este atributo no toma valores.

El atributo DISABLED indica que la lista estará desactivada, por
lo que el usuario no podrá seleccionar sus elementos. Este
atributo tampoco toma valores.
Cada uno de los elementos de la lista deberá insertarse entre
las etiquetas <OPTION> y </OPTION>.

El atributo VALUE indica el valor a enviar si se selecciona el
elemento. Si no se especifica este atributo, se enviará el texto
de la opción, que se encuentra entre las etiquetas <OPTION> y
</OPTION>.
El atributo SELECTED indica que el elemento aparecerá
seleccionado. Este atributo no toma valores.

9.1 DEFINICIÓN
Las capas son bloques con contenido que pueden situarse en
cualquier parte de la página y en dónde es posible insertar
contenido HTML. Las capas pueden ocultarse y solaparse entre
sí, permitiendo un mejor diseño de la página web.
Las etiquetas que ayudan a insertar capas son:
<DIV> … </DIV>

9.2 ATRIBUTOS DE LAS
CAPAS
El atributo ID se le asigna un nombre a la capa, y a través del
atributo STYLE se establecen el resto de propiedades de la
capa.
Las propiedades LEFT (izquierda) y TOP (superior) ayudan a
establecer la posición de la capa respecto a los márgenes
izquierdo y superior de la página.

CAPAS
Para que la capa aparezca en la posición establecida, es
necesario incluir la propiedad POSITION con el valor ABSOLUTE.
Si no se estableciera este valor, la capa se mostraría pegada al
margen izquierdo, en la posición en la que hubiera sido
insertada dentro del código.
A través de las propiedades WIDTH (anchura) y HEIGHT (altura)
se establece el tamaño de la capa.

CAPAS
A través de la propiedad Z-INDEX se establece el índice de la
capa dentro de la página, con un valor numérico.
La propiedad VISIBILITY establece la visibilidad de la capa.
Puede tomar los valores INHERIT (muestra la capa mientras la
capa a la que pertenece también se esté mostrando), VISIBLE
(muestra la capa, aunque la capa a la que pertenece no se esté
viendo) y HIDDEN (la capa está oculta).

CAPAS
Las propiedades LAYER-BACKGROUND-IMAGE y BACKGROUND-
IMAGE establece una imagen de fondo para la capa. La ruta y el
nombre de la imagen tienen que entre paréntesis, después de
la palabra URL.
A través de las propiedades LAYER-BACKGROUND-COLOR y
BACKGROUND-COLOR establece un color de fondo para la capa.

CAPAS
La propiedad OVERFLOW establece si se mostrará o no el contenido
de la capa cuando no pueda ser visualizado en su totalidad. Puede
tomar los valores VISIBLE (muestra todo el contenido de la capa,
haciendo más grande la capa), HIDDEN (no visualiza el contenido de
la capa que no quepa en ella), SCROLL (muestra la barra de
desplazamiento, aunque el contenido de la capa pueda ser
visualizado totalmente) y AUTO (muestra la barra de desplazamiento
cuando sea necesario).

CAPAS
La propiedad CLIP establece el área de la capa que podrá ser
visualizado. Lo que hace es recortar la capa, haciendo que
partes de ella no sean visibles. Ha de especificarse la distancia
de los márgenes de la capa entre paréntesis, después de la
palabra URL.

CAPAS
Todas las anteriores propiedades se especifican a través del atributo
STYLE, y deben aparecer entre comillas dobles, con un punto y coma
detrás de cada una. Para asignar los valores a las propiedades se
emplea el símbolo : (dos puntos). Ejemplo:
<div id="capa" style="position:absolute; width:600px; height:800px;
z-index:3; visibility: visible; background-color: #0099CC; background-
image: url(imagenes/fondocapa.gif); clip: rect(1 auto auto 3);">
</div>

10.1 LENGUAJES DE SCRIPT
Los lenguajes de script, es un pequeño lenguaje de
programación cuyo código se inserta dentro del documento
HTML. Este código se ejecuta en el navegador del usuario al
cargar la página, o cuando sucede algo especial como puede ser
el pulsar sobre un enlace.

10.2 JAVASCRIPT
Para insertar lenguaje JavaScript en un documento, es
necesario insertar las etiquetas <SCRIPT> y </SCRIPT> dentro
de las etiquetas <HEAD> y </HEAD> o dentro del cuerpo de la
página.
A través del atributo LANGUAGE se especifica el lenguaje de
script, que en este caso será JAVASCRIPT.

10.2 JAVASCRIPT
<script language="JavaScript" type="text/javascript">
alert("Bienvenido a mi web");
</script>

11.1 CONCEPTO
Los estilos CSS (Cascading Style Sheets), también conocidas
como Hojas de Estilos en Cascada; son un lenguaje formal
usado para definir la presentación de un documento
estructurado escrito en HTML.

11.2 VINCULAR LA HOJA DE
ESTILO
Para vincular una hoja de estilo a un documento es necesario insertar la
etiqueta <LINK> en el documento, entre las etiquetas <HEAD> y </HEAD>.
El atributo HREF especifica la hoja de estilo que se va a vincular al
documento.
El atributo REL señala que se está vinculando una hoja de estilo, por lo que
su valor es STYLESHEET.
A través del atributo TYPE se especifica que el archivo es de texto, con
sintaxis CSS, por lo que su valor es TEXT/CSS.
<link href="misestilos.txt" rel="stylesheet" type="text/css" >

11.3 SINTAXIS DE LA HOJA DE
ESTILO
Una regla CSS se caracteriza por dos elementos principales:
• Selector de tipo: sirve para especificar a qué etiquetas del documento se
aplica el estilo.
• Declaración de estilo: se define entre paréntesis, para especificar qué
estilo aplica a las etiquetas seleccionadas. Se componen de:
– Una o más propiedades, seguidas por el carácter ":" (dos puntos)
– Uno o más valores asociados a cada propiedad, entre comillas y
separados por comas si hay múltiples valores, y todos seguidos por
un punto y coma.

11.3 SINTAXIS DE LA HOJA DE
ESTILO
Encabezado {font-family:calibri}
PROPIEDAD
SELECTOR DECLARACIÓN
VALOR

11.4 PROPIEDADES
• Familia de la fuente:
– La propiedad es FONT-FAMILY.
• Grosor del texto:
– La propiedad es FONT-WEIGHT.
Sus valores pueden ser: bold (negrita), bolder (más
negrita), lighter (ligera) o un número del 100 al 900.

11.4 PROPIEDADES
• Tamaño de la fuente:
– La propiedad es FONT-SIZE.
• Espacio entre líneas:
– La propiedad es LINE-HEIGHT.
• Espacio entre caracteres:
– La propiedad es LETTER-SPACING.

11.4 PROPIEDADES
• Estilo de la fuente:
– La propiedad es FONT-STYLE.
Puede tomar como valor ITALIC, cuando se desee que el texto aparezca
en cursiva.
• Decoración de la fuente:
– La propiedad es TEXT-DECORATION.
Puede tomar como valor NONE (ninguno), UNDERLINE (subrayado),
LINE-THROUGH (una línea encima), OVERLINE (tachado) o BLINK
(parpadeo).

11.4 PROPIEDADES
• Transformar el texto:
– La propiedad es TEXT-TRANSFORM.
Puede tomar como valor CAPITALIZE (la inicial de cada palabra
aparecerá en mayúsculas), UPPERCASE (todo en mayúsculas) o
LOWERCASE (todo en minúsculas).
• Alineación del texto:
– La propiedad es TEXT-ALIGN.
Puede tomar como valor CENTER (centrado), LEFT (izquierda), RIGHT
(derecha) o JUSTIFY (justificado).

11.4 PROPIEDADES
• Sangrado del texto:
– La propiedad es TEXT-INDENT.
• Color:
– La propiedad es COLOR.
• Color de fondo:
– La propiedad es BACKGROUND-COLOR.

11.4 PROPIEDADES
• Imagen de fondo:
– La propiedad es BACKGROUND-IMAGE.
• Márgenes:
– Las propiedades son MARGIN-TOP (margen superior),
MARGIN-RIGHT (margen derecho), MARGIN-BOTTOM (margen
inferior), MARGIN-LEFT (margen izquierdo), o MARGIN (los
valores de los márgenes superior, derecho, inferior e izquierdo,
separados por espacios).

11.4 PROPIEDADES
• Ancho de bordes:
– La propiedad es BORDER-WIDTH.
• Color del borde:
– La propiedad es BORDER-COLOR.

Html

Más contenido relacionado

La actualidad más candente (20)

Destacado (13)

Similar a Html (20)

Más de Daniel Olalde Soto (20)

Último (20)

Html