Scribd
Cargar
11 vistas53 páginas

HTML

El documento es una guía sobre HTML, el lenguaje de marcado utilizado para crear páginas web, que incluye información sobre su estructura, etiquetas, atributos y el concepto de hipertexto. Se describen las características de los lenguajes de marcado y se detallan las etiquetas específicas para texto, imágenes, enlaces, listas, tablas, sonido y video. Además, se menciona la importancia del hipertexto en la navegación web y cómo se organizan los documentos HTML.

Cargado por

radanichemmamendez
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
11 vistas53 páginas

HTML

El documento es una guía sobre HTML, el lenguaje de marcado utilizado para crear páginas web, que incluye información sobre su estructura, etiquetas, atributos y el concepto de hipertexto. Se describen las características de los lenguajes de marcado y se detallan las etiquetas específicas para texto, imágenes, enlaces, listas, tablas, sonido y video. Además, se menciona la importancia del hipertexto en la navegación web y cómo se organizan los documentos HTML.

Cargado por

radanichemmamendez
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd

<html> <html> <html> <html> <html>

H IPER

T EXT

M ARKUP

L ANGUAGE

</html></html></html></html></html>
HTML
Hiper Text Markup Language

2° Edición

Analista Universitario en Sistemas


Profesor Universitario
Cristalli Nicolás Luis

“La arena es un puñadito,


pero hay montañas de arena”

Atahualpa Yupanqui

Ciudad de Rosario, Argentina


Julio - 2023
UNR - ESUPCOM
Departamento TIC
Material disponible en Biblioteca Virtual
[Link]
INDICE
Lenguaje de marcas 2
Hipertexto 4
HTML 5
Etiquetas 5
Estructura básica 6
Atributos de las etiquetas 7
Etiquetas para texto 8
Etiquetas para imágenes 11
Enlaces 14
Internos 15
Locales 16
Remotos 17
Listas 18
Desordenadas 18
Ordenadas 19
De Definición 21
Anidadas 21
Tablas 23
Estructura 23
Tamaño de tabla 26
Tamaño de celda 27
Combinación de celdas 27
Resumen de atributos 28
Sonido 30
Etiqueta a 30
Etiqueta audio 30
Video 32
Etiqueta video 32
Video desde YouTube 34
Frames 36
Definición de la estructura 37
Atributos name y target 41
CSS 45
Técnicas para aplicar estilos 46

HTML PAG 1
LENGUAJE DE MARCAS
Un lenguaje de marcado, o lenguaje de marcas, es una forma de codificar un
documento incorporando etiquetas o marcas junto con la información a mostrar.
Estas marcas contienen instrucciones sobre la estructura y forma que se aplica a la
presentación de dicha información.
Una marca es una señalización, un indicador o una bandera colocada en un texto
con el fin de delimitar una parte del mismo para darle un formato determinado.
Algunas de las marcas más utilizadas son "<" y ">", símbolos que utiliza HTML para
definir sus etiquetas.

Los lenguajes de marcado suelen confundirse con lenguajes de programación. Sin


embargo no son lo mismo. El lenguaje de marcado no tiene funciones aritméticas o
variables, como poseen los lenguajes de programación. Tenemos que tener en
cuenta que el lenguaje de marcas no es un lenguaje de programación como tal,
pero puede contener partes de códigos de uno o más lenguajes de programación.

CARACTERÍSTICAS DE LOS LENGUAJES DE MARCAS


Uso de texto plano
Al estar escrito como texto plano cualquier persona puede leer, entender y
editar su contenido fácilmente desde cualquier editor o visor de texto plano
(Notepad, Pluma, Atom, Sublime Text, etc).

Lenguaje compacto
Las etiquetas de marcas se mezclan con el contenido del mismo. Esto permite
escribir un código que se ejecute con rapidez.

Independencia del dispositivo


Permite mostrar el contenido software o información en una amplia variedad
de dispositivos, independientemente del hardware o equipo local donde se
esté implementando.

Facilidad de procesamiento
Posibilita el desarrollo y utilización de otros lenguajes especializados según el
tipo de documento que se requiera procesar.

HTML PAG 2
Flexibilidad
Facilita de combinación con otros lenguajes de programación y de marcado.

CLASES DE LENGUAJES DE MARCAS


Se suelen diferenciar tres clases de lenguajes de marcado, aunque en la práctica
pueden combinarse varias clases en un mismo documento.

Marcado de presentación
Es aquel que indica el formato del texto. Este tipo de marcado es útil para
maquetar la presentación de un documento para su lectura, pero resulta
insuficiente para el procesamiento automático de la información. El marcado
de presentación resulta más fácil de elaborar, sobre todo para cantidades
pequeñas de información. En este tipo las etiquetas de marcado suelen estar
ocultas al usuario.

Marcado de procedimientos
Está enfocado hacia la presentación del texto, sin embargo, también es visible
para el usuario que edita el texto. El programa que representa el documento
debe interpretar el código en el mismo orden en que aparece. Por ejemplo,
para formatear un título, debe haber una serie de directivas inmediatamente
antes del texto en cuestión, indicándole al software instrucciones tales como
centrar, aumentar el tamaño de la fuente, o cambiar a negrita.
Inmediatamente después del título deberá haber etiquetas inversas que
reviertan estos efectos.

Marcado descriptivo
Utiliza etiquetas para describir los fragmentos de texto, pero sin especificar
cómo deben ser representados, o en qué orden.

HTML PAG 3
HIPERTEXTO
El World Wide Web (WWW) es un sistema que contiene una cantidad de información
casi infinita. Pero esta información debe estar ordenada de alguna forma, de
manera que sea posible encontrar lo que se busca.
La unidad básica donde está almacenada esta información son las páginas Web.
Estas páginas se caracterizan por contener texto, imágenes, animaciones e incluso
sonido y video.
Una de las características más importantes de las páginas Web es que son
hipertexto. Esto quiere decir que las páginas no son elementos aislados, sino que
están unidas a otras mediante los links o enlaces hipertexto. Gracias a estos
enlaces el navegante de internet puede pulsar sobre un elemento de una página
(texto, imagen, botón, etc) para navegar hasta otra página. Será cuestión del
programador de la página decidir cuales serán estos elementos y a donde nos
conducirán al pulsar sobre ellos.

El hipertexto es un sistema de organización y presentación de datos que se basa en


la vinculación de fragmentos textuales o gráficos a otros fragmentos, lo cual
permite al usuario acceder a la información, no necesariamente de forma
secuencial, sino desde cualquiera de los distintos ítems relacionados. El hipertexto
es una estructura no secuencial que permite crear, agregar, enlazar y compartir
información de diversas fuentes por medio de enlaces asociativos y redes sociales.
El hipertexto es texto que contiene enlaces a otros textos

La forma más habitual de hipertexto en informática es la de hipervínculos o


referencias cruzadas automáticas que van a otros documentos. Si el usuario
selecciona un hipervínculo, el programa muestra el documento enlazado. El
hipertexto no está limitado a datos textuales, se pueden encontrar dibujos del
elemento especificado o especializado, sonido o vídeo referido al tema. El programa
que se usa para leer los documentos de hipertexto se llama navegador, browser,
visualizador o cliente, y cuando el lector o usuario sigue un enlace, se dice que está
navegando por la web. El hipertexto es una de las formas de la hipermedia,
enfocada en diseñar, escribir y redactar texto en un medio.

HTML PAG 4
HTML
HTML es un lenguaje de marcado que se utiliza para el desarrollo de páginas de
Internet. Se trata de la siglas que corresponden a HyperText Markup Language, es
decir, Lenguaje de Marcas de Hipertexto. Sirve para indicar como va ordenado el
contenido de una página web. Esto lo hace por medio de las marcas de hipertexto,
las cuales son etiquetas conocidas en inglés como tags.
HTML posee un conjunto de etiquetas que se van intercalando entre el texto de
forma que los programas que utilizamos para navegar en internet sepan qué es lo
que tienen que mostrar cuando accedemos a una página y cómo deben presentarlo
en la pantalla.

Definiéndolo de forma sencilla, "HTML es lo que se utiliza para crear todas las
páginas web de Internet". Más concretamente, HTML es el lenguaje con el que se
"escriben" la mayoría de las páginas web. Los diseñadores utilizan el lenguaje HTML
para crear sus páginas web, los programas que utilizan los diseñadores generan
páginas escritas en HTML y los navegadores que utilizamos los usuarios muestran
las páginas web después de leer su contenido HTML.

Una página web es un archivo que contiene código HTML en forma de texto plano.
Estos archivos tienen la extensión “.html”. Podemos crear, visualizar y editar un
archivo .html (pagina web) desde:

→ Un editor de texto plano como Pluma en Linux o Bloc de Notas de Windows.


→ Una suit ofimática que exporte documentos en html como Microsoft Office,
OpenOffice, etc.
→ Un editor de de páginas web como NVU, Dreamweaver, Frontpage, etc.

ETIQUETAS
El principio esencial del lenguaje HTML es el uso de etiquetas (tags). Las etiquetas
HTML se escriben encerradas entre ángulos. Normalmente se utilizan dos etiquetas:
una de inicio y otra de fin para indicar que ha terminado el efecto que queríamos
presentar. La única diferencia entre ambas es que la de cierre lleva una barra
inclinada "/" antes del código. Lo que haya entre ambas etiquetas estará afectado
por ellas.

HTML PAG 5
Etiqueta de apertura
Carácter < seguido del nombre de la etiqueta (sin espacios en blanco) y
terminado con el carácter >

Etiqueta de cierre
Carácter < seguido del carácter / seguido del nombre de la etiqueta (sin
espacios en blanco) y terminado con el carácter >

<nombre_etiqueta> …………... </nombre_etiqueta>

ESTRUCTURA BÁSICA DE UN DOCUMENTO HTML


Las páginas HTML se dividen en dos partes: la cabecera y el cuerpo.

Cabecera
Incluye información sobre la propia página, como por ejemplo su título y su
idioma.
Cuerpo
Incluye todos los contenidos de la página, como párrafos de texto e
imágenes.

El cuerpo (llamado body en inglés) contiene todo lo que el usuario ve en su


pantalla. La cabecera (llamada head en inglés) contiene todo lo que no se ve (con
la única excepción del título de la página, que los navegadores muestran como
título de sus ventanas o pestañas).

HTML PAG 6
La estructura de un documento HTML respeta la siguiente forma:

Etiquetas básicas de un documento HTML

<html>
Indica el comienzo y el final de un documento HTML. Ninguna etiqueta o
contenido puede colocarse antes o después de la etiqueta <html> (con una
sola excepción que se verá más adelante).
En el interior de la etiqueta <html> se definen la cabecera y el cuerpo del
documento HTML y todo lo que se coloque fuera de la etiqueta <html> se
ignora.

<head>
Delimita la parte de la cabecera del documento. La cabecera contiene
información sobre el propio documento HTML, como por ejemplo su título y el
idioma de la página.
Los contenidos indicados en la cabecera no son visibles para el usuario, con la
excepción de la etiqueta <title>, que se utiliza para indicar el título del
documento y al cual los navegadores lo visualizan en la parte superior
izquierda de la ventana del navegador, o en la pestaña correspondiente (si no
te has fijado anteriormente, vuelve a abrir el primer ejemplo en cualquier
navegador y observa dónde se muestra el título de la página).

<body>
Delimita el cuerpo del documento HTML. El cuerpo encierra todos los
contenidos que se muestran al usuario (párrafos de texto, imágenes, tablas,
enlaces, videos, listas, etc).
En general el <body> de un documento contiene cientos de etiquetas HTML,
mientras que el <head> no contiene más que unas pocas.

ATRIBUTOS DE LAS ETIQUETAS


Algunas elementos requieren de cierta información adicional para estar
completamente definidos. Las etiquetas pueden tener de forma opcional u
obligatoria lo que se denomina atributos o modificadores.
Los atributos matizan el significado de la etiqueta. Las etiquetas tienen atributos
para cambiar aspectos del efecto que producen. Los atributos permiten personalizar
las etiquetas HTML. Los atributos se incluyen dentro de la etiqueta de apertura.

No todos los atributos se pueden utilizar en todas las etiquetas. Por ello, cada
etiqueta define su propia lista de atributos disponibles. Además, cada atributo

HTML PAG 7
también indica el tipo de valor que se le puede asignar. Si el valor de un atributo no
es válido, el navegador ignora ese atributo.
Aunque cada una de las etiquetas HTML define sus propios atributos, algunos de los
atributos son comunes a muchas o casi todas las etiquetas.

ETIQUETAS PARA TEXTO


Existen diversas etiquetas para poder indicar la distribución, forma, tamaño, color o
tipo de fuente del texto. El texto contenido entre una etiqueta de apertura y cierre
será modificado según la funcionalidad de la misma.

A continuación se dan algunos ejemplos de etiquetas de texto con su respectiva


ejecución o salida de pantalla en navegador:

<b> negrita </b>


<i> cursiva inclinada </i>
<tt> maquina </tt>
<strong> texto resaltado </strong>
<u> subrrayado </u>
<strike> tachada </strike>
<sub> subindice baja 1 nivel </sub>
<sup> superindice sube 1 nivel </sup>
<big> aumenta el tamaño en 1 </big>
<small> disminuye el tamaño en 1 </small>
<h1> este es un titular grande </h1>
<h3> este titular es mediano </h3>
<h6> este es un titular pequeño </h6>

HTML PAG 8
Los saltos de línea se indican con la etiqueta <br> y para diferenciar un párrafo de
otro se usa la etiqueta <p>:

<p> Esto es un párrafo en una sola línea. </p>


<p> Y esto es un párrafo que ocupa <br> exactamente <br> tres líneas. </p>

Se puede alinear un texto con el atributo align a la izquierda (‘left’ ), derecha


(‘right’) o en el centro (‘center’) de la página:

<p align='left'> Este párrafo está a la izquierda </p>


<p align='center'> Este otro está centrado </p>
<p align='right'> Y este a la derecha </p>

Para indentar un texto se puede usar le etiqueta <blockquote>:

<blockquote>
Esto está indentado <br> como bien podemos apreciar.
</blockquote>
Y esto no está indentado.

HTML PAG 9
Mediante la etiqueta <font> y sus atributos podemos indicar distinto tipos de
fuentes, tamaño, colores, etc. El color del texto se puede indicar con el valor del
atributo en ingles o con el código hexadecimal RGB (Red,Green,Blue) del color.

<font face='Arial' size='5' color='red'>


Este texto se verá con el tipo de letra Arial , tamaño 5 y color rojo.
</font>

<font color='blue'> Este texto es de color azul. </font>


<font color='#0000FF'> Y este también es azul. </font>

Con la etiqueta <hr> se puede dibujar una línea horizontal en la pantalla a modo
de separador. Los atributos más usuales para ella son: color (para ponerle un
color) , size (para cambiar su altura) y width (donde indicaremos su anchura, por
ejemplo si ponemos ‘300’ indica una anchura de 300 pixeles, o si ponemos ‘50%’ la
línea ocuparía el 50% del ancho de la pantalla).

<hr color='red' size='6' width='50%'>

<hr color='blue' size='1' width='100%'>

<hr color='green' size='3' width='25%'>

HTML PAG 10
Concatenación de etiquetas

Las etiquetas se pueden encadenar o anidar una a continuación de otra. Esto


posibilita aplicar simultáneamente varias propiedades a una misma porción de
documento. Así, por ejemplo, un texto encerrado entre varias etiquetas
concatenadas quedará afectado por las propiedades de todas las etiquetas que lo
anidan.

Si queremos que un texto este en cursiva, negrita y subrayado, anidaremos las


etiquetas correspondientes <i> (cursiva inclinada) + <u> (subrayado) + <b>
(negrita), independientemente del orden en que las anidemos:

<i><u><b> cursiva, subrayado y negrita </i></u></b>

ETIQUETA PARA IMÁGENES


Para hacer que aparezcan imágenes en nuestro documento y en nuestra página
web, utilizamos la etiqueta <img> (imagen). Es indispensable añadir el atributo src
(source) para indicar la ruta en la que está el archivo imagen a mostrar. No es
necesario cerrar la etiqueta de imagen con su correspondiente </img>.

Los atributos que podemos usar de la etiqueta <img> son:

alt: Dentro de las comillas de este atributo colocaremos una breve descripción de la
imagen. Este comentario se mostrará en lugar de la imagen en el caso de que el
navegador no pueda cargar la imagen. Una vez cargada la imagen, si colocamos el
puntero del ratón sobre ella, también se nos mostrará la descripción escrita en este
atributo.

height y width: Definen la altura (height) y anchura (width) en pixeles de la


imagen.

border: Define el tamaño en pixeles del cuadro que rodea a la imagen. En caso de
que no queramos que aparezca el borde, damos el valor cero (“0”).

vspace y hspace: Sirven para indicar el espacio libre vertical (vspace) y horizontal
(hspace), en pixeles, que tiene que colocarse entre la imagen y los otros elementos
que la rodean, como texto, imágenes, etc.

lowsrc: Con este atributo indicamos un archivo de la imagen que está en baja
resolución, de tal forma que cuando el navegador detecta este atributo primero
descarga y muestra la imagen de baja resolución y luego descarga la imagen con la
resolución correcta.

HTML PAG 11
align: Mediante este atributo alineamos la imagen con respecto al texto. Este
atributo puede tener estos valores: top, middle, bottom, left y right.

<img src='imagenes/[Link]'
alt="Logo de la escuela"
align='middle'
border='1'
height='200'
width='200'>

ESC SUPERIOR DE COMERCIO

En el atributo src (source/fuente de la imagen) de la etiqueta <img> hay que poner


la ruta donde se encuentra la imagen. Esto se puede ver claramente en el ejemplo
anterior. Lo recomendable, para seguir una codificación limpia y estandarizada, es
crear una carpeta en la que se encuentren todas las imágenes, dentro de la carpeta
donde se encuentra nuestro documento HTML.

Aquí, nuestro documento HTML llamado “[Link]” se encuentra dentro de una


carpeta con el nombre “HTML”. Dentro de esta, junto con nuestro archivo de la
pagina web, tenemos una carpeta llamada “imagenes” en la que se encuentra la
imagen que usamos “[Link]”. Para que la etiqueta <img> encuentre la
fuente de la imagen que debe mostrar, le especificamos que en la carpeta donde
está el documento HTML hay una carpeta llamada “imagenes”, y dentro de ella la
imagen “[Link]”:

src=”imagenes/[Link]”

En este ejemplo recordamos que el documento “[Link]” no está en la misma


carpeta que la imagen “[Link]”, por eso le indicamos la ruta con el

HTML PAG 12
nombre de la carpeta. Hay muchas metodologías de trabajo distintas para este
caso, aquí solo mostramos una de ellas.

El fondo de una pagina también puede ser una imagen. Para establecer como fondo
de la pagina una imagen, una vez que la tenemos en nuestra carpeta copiada e
identificada, tenemos que usar el atributo background en la etiqueta <body>
ubicado en la parte superior del documento HTML.

<body background='imagenes/[Link]'>
<font color='red' size='5'> PAGINA CON IMAGEN DE FONDO </font>
</body>

La imagen “[Link]” la guardamos en la misma carpeta “imagenes” en la que


teníamos “[Link]”. De igual manera que en el atributo src de la etiqueta
<img>, en el atributo background de la etiqueta <body> ponemos la ruta para
acceder a la imagen que sera el fondo de la página.

Otra opción para el fondo de la página es establecer un determinado color usando


el atributo bgcolor en la etiqueta <body>.

<body bgcolor='green'>
<font color='red' size='5'> PAGINA CON COLOR DE FONDO </font>
</body>

HTML PAG 13
ENLACES
HTML es un lenguaje para hipertexto y permite crear una estructura que no es
secuencial, compartiendo información por medio de enlaces. Un enlace o link es
una zona de texto o imagen que si son seleccionados nos trasladan a otro
documento de hipertexto o a otra posición dentro del documento actual.

Hasta aquí, hemos podido ver que una página web es un archivo HTML en el que
podemos incluir, entre otras cosas, textos formateados a nuestro gusto e imágenes.
Del mismo modo, un sitio web podrá ser considerado como el conjunto de archivos
que constituyen el contenido al que quien navega tiene acceso. Sin embargo, no
podríamos hablar de navegación por las distintas páginas si estos archivos HTML no
estuviesen debidamente conectados entre ellos y con el exterior de nuestro sitio
por medio de enlaces de hipertexto. En efecto, el atractivo original de HTML radica
en la posible puesta en relación de los contenidos de los archivos, introduciendo
referencias bajo forma de enlaces que permitan un acceso rápido a la información
deseada.

Un enlace puede ser fácilmente detectado en una página web. Basta con deslizar el
puntero del ratón sobre las imágenes o el texto y ver como cambia de su forma
original, transformándose por regla general, en una mano con un dedo señalador.
Adicionalmente, estos enlaces suelen ir, en el caso de los textos, coloreados y
subrayados para que el usuario no tenga dificultad en reconocerlos. Si no
especificamos lo contrario, estos enlaces texto estarán subrayados y coloreados en
azul. En el caso de las imágenes que sirvan de enlace veremos que están
delimitadas por un marco azul por defecto.

Para crear un enlace hay que utilizar la etiqueta <a>. Todo lo que encerremos entre
<a> y </a>, ya sea texto o imágenes, será considerado como enlace y sufrirá dos
modificaciones:

→ Se visualizará de manera distinta en el navegador: el texto aparecerá


subrayado y de un color distinto y las imágenes estarán rodeadas por un
borde del mismo color que el del texto del enlace. Este color dependerá de la
configuración que tenga el usuario en su navegador

→ Al pulsar sobre el enlace, seremos enviados hacia donde apunte el enlace.


El enlace en la página normalmente aparecerá subrayado y en color azul, y al
deslizar el puntero del ratón sobre él cambiará su forma original
transformándose por regla general en una mano con el dedo índice extendido.

HTML PAG 14
Dentro de la etiqueta de apertura deberemos especificar asimismo el destino del
enlace. Este destino será introducido bajo forma de atributo, el cual lleva por
nombre href.

El contenido es un texto o una imagen. Es la parte de la página que se colocará


activa y donde deberemos pulsar para acceder al enlace. Por su parte, dirección
será el destino del enlace: una página, un correo electrónico o un archivo.

TIPOS DE ENLACES
En función del destino al cual nos remite o envía un enlace al hacer clic sobre él,
estos se clasifican en:

Enlaces Internos
Los que se dirigen a otras partes dentro de la misma página.

Enlaces locales
Los que se dirigen a otras páginas del mismo sitio web.

Enlaces remotos
Los dirigidos hacia páginas de otros sitios web.

Enlaces con direcciones de correo


Para crear un mensaje de correo dirigido a una dirección.

Enlaces con archivos


Para que los usuarios puedan hacer descarga de ficheros.

ENLACES INTERNOS
Son los enlaces que apuntan a un lugar diferente dentro de la misma página. Este
tipo de enlaces son esencialmente utilizados en páginas donde el acceso a los
contenidos puede verse dificultado debido al gran tamaño de la misma.

Mediante estos enlaces podemos ofrecer al visitante la posibilidad de acceder


rápidamente al principio o final de la página, o bien a diferentes párrafos o
secciones.

Para crear un enlace de este tipo es necesario, aparte del enlace de origen
propiamente dicho, un segundo enlace que será colocado en el destino. Veamos
más claramente como funcionan estos enlaces con un ejemplo sencillo:

Supongamos que queremos crear un enlace que apunte al final de la página.


Primero hay que colocar nuestro enlace “Ir abajo” sobre el cual haciendo clic nos
enviará al final de la página. Lo pondremos arriba del documento y lo escribiremos
del siguiente modo:

HTML PAG 15
<a href="#abajo"> Ir abajo </a>

El contenido del enlace es el texto "Ir abajo". El destino “abajo” es un punto de la


misma página que todavía no hemos definido.
¡Atentos con el símbolo #! Es él quien especifica al navegador que el enlace apunta
a una sección en particular. No debemos olvidarnos de colocarlo si estamos creando
un enlace interno en el mismo documento HTML.

En segundo lugar, hay que generar un enlace en el destino. Este enlace llevara por
nombre “abajo” para poder distinguirlo de los otros posibles enlaces realizados
dentro de la misma página. En este caso, la etiqueta que escribiremos al final del
documento HTML será ésta:

<a name="abajo"> </a>

Al hacer clic en “Ir abajo” seremos dirigidos a la posición donde se encuentra la


etiqueta que tiene como nombre “abajo”.

ENLACES LOCALES
Para crear este tipo de enlaces, hemos de introducir una etiqueta de la siguiente
forma:

<a href="[Link]"> Contenido </a>

Por regla general, para una mejor organización, los sitios suelen estar ordenados
por directorios. Estos directorios suelen contener diferentes secciones de la página,
imágenes, sonidos, etc. Es por ello que en muchos casos no nos valdrá con
especificar el nombre del archivo, sino que tendremos que especificar además el
directorio en el que nuestro [Link] esta alojado.

Un ejemplo sería el siguiente, en el cual desde nuestro documento “[Link]”


vamos a ir a la página “[Link]”, donde se mostrará en la misma un texto que
informe que estamos en la página 2. Los dos documentos html se encuentran
ubicados en la misma carpeta.

<a href="[Link]"> Acceder a la pagina 2 </a>

Otro ejemplo que vamos a ver es el de hacer un enlace con la imagen que ya
usamos antes y que nos enviará también a la página dos. En este caso, al pararnos
arriba de la imagen, aparecerá el icono de la mano indicando que esta es un enlace;
al presionarla nos enviará a la página 2.

<a href="[Link]"> <img src='imagenes/[Link]' border='1'> </a>

HTML PAG 16
Los enlaces locales pueden, a su vez, apuntar no solo a la página en general, sino
más precisamente a una sección concreta. Este tipo de enlaces resultan ser un
híbrido, una mezcla, una unión entre un enlace de tipo interno y de tipo local. La
sintaxis es de este tipo:

<a href="[Link]#seccion"> Contenido </a>

Como para los enlaces internos, en est caso, hemos de marcar la sección en el
documento “[Link]” donde apunta el enlace local, con otro enlace del tipo
interno de la siguiente forma:

<a name="seccion"></a>

ENLACES REMOTOS
Son los enlaces que se dirigen hacia páginas que se encuentran fuera de nuestro
sitio web, es decir, cualquier otro documento que no forma parte de nuestro sitio.
Este tipo de enlaces es muy común y no representa ninguna dificultad.
Simplemente colocamos en el atributo href de nuestra etiqueta <a> la URL o
dirección de la página con la que queremos enlazar. Será algo parecido a esto:

<a href="[Link] Ir a la web de la Escuela </a>

Sólo cabe destacar que todos las direcciones web (URLs) empiezan por http:// o
[Link] Esto indica que el protocolo por el que se accede es HTTP, el utilizado en la
web. No debemos olvidarnos de colocarlas, porque si no los enlaces serán tratados
como enlaces locales a nuestro sitio.

HTML PAG 17
LISTAS
Las posibilidades que nos ofrece el HTML en cuestión de tratamiento de texto son
realmente notables. No se limitan a lo visto hasta ahora, sino que van más lejos
todavía. Varios ejemplos de ello son las listas, que sirven para enumerar y definir
elementos, los textos con formatos y las cabeceras o títulos. Las listas son utilizadas
para citar, numerar y definir objetos. En ocasiones, es posible agrupar determinadas
palabras o frases en un conjunto de elementos que tienen más significado de forma
conjunta.

Junto con los párrafos y los encabezados, las listas son uno de los elementos HTML
más comúnmente usados en las páginas web. Las listas HTML proporcionan una
forma de clasificar información y hacer que esta sea más inteligible por parte del
visitante de las páginas.

TIPOS DE LISTAS
El lenguaje HTML define los siguientes tipos de listas, cada una con una
presentación diferente:

Desordenadas o no numerada.

Ordenada o numerada.

De definición o glosario.

Pronto sabremos como crear cada una de ellas y cuando es conveniente usar una u
otra, y comprobaremos, una vez más la gran sencillez del lenguaje HTML.

La forma de crear listas difiere ligeramente de los elementos HTML vistos hasta
ahora, ya que consta de dos pasos. Primero hay que definir el tipo de lista y
después deben insertarse cada uno de los elementos de lista. Al crear una lista
deberemos indicar su inicio y su fin.

Para empezar la lista usaremos la instrucción de inicio de la etiqueta de esa lista.


Existe una etiqueta para cada tipo distinto de lista. Una vez hemos abierto la lista
deberemos insertar, como hemos dicho antes, cada uno de los elementos de lista.
Para ello usaremos una nueva etiqueta que dependerá del tipo de lista. La etiqueta
que usaremos para cada elemento tiene instrucción de fin que delimita el final del
elemento de lista actual, pero es opcional usarla o no. Si no se hace se considera
que el elemento termina cuando empieza el siguiente o cuando termina la lista.

LISTAS DESORDENADAS
Son conocidas también como listas no numeradas ya que en estas no es necesario
numerar de alguna manera los elementos que las componen, sino que cada
elemento de la lista tiene delante un símbolo. Las listas no ordenadas son las más
sencillas y las que más se utilizan. Una lista no ordenada es un conjunto de
elementos relacionados entre sí pero para los que no se indica un orden o secuencia
determinados.

HTML PAG 18
Este tipo de lista queda delimitada por la etiqueta <ul> al inicio y </ul> al final (ul
proviene de Unordered List, que significa lista no ordenada). Dentro de estas
etiquetas insertaremos cada elemento con la etiqueta <li> y </li>, aunque ya
comentamos anteriormente que es opcional utilizar la instrucción de fin del
elemento.

Si queremos establecer en nuestra página HTML una lista donde figuren distintos
colores, donde no es necesario que ninguna de estos tenga determinado orden, lo
haremos de la siguiente forma utilizando las listas no ordenadas:

<ul>
<li> Rojo
<li> Verde
<li> Azul
<li> Amarillo
<li> Negro
</ul>

El navegador, por defecto, muestra los elementos de la lista tabulados y con una
pequeña viñeta formada por un círculo negro. Podemos cambiar la viñeta de la lista
desordenada utilizando el atributo type dentro de la etiqueta de apertura <ul>. Las
viñetas que podemos elgir son "disc", "circle" o "square" (circle: la viñeta es un
círculo negro, disc: la viñeta es una circunferencia, square: la viñeta es un
cuadrado).

<ul type=”square”> <ul type=”circle”> <ul type=”disc”>


<li> Argentina <li> Argentina <li> Argentina
<li> Francia <li> Francia <li> Francia
<li> China <li> China <li> China
</ul> </ul> </ul>

LISTAS ORDENADAS
También se las conoce como listas numeradas y son aquellas en las que cada
elemento de la lista tiene delante un número que indica el orden del elemento
dentro del conjunto de la lista. Este tipo de listas numera los elementos de la lista
en el orden en el que se han introducido en el código HTML y la numeración por
defecto se realiza con números empezando por el 1. Son convenientes para usar en
el caso de querer indicar un conjunto de instrucciones ordenadas, para realizar un
indice, en toda situación donde el orden de los elementos sea relevante e
importante.

HTML PAG 19
Este tipo de listas queda delimitado por las etiquetas <ol> y </ol> (ol: Ordered List,
Lista ordenada), y cada elemento se inserta, al igual que en el caso de listas no
ordenadas, con la etiqueta <li>.

<ol>
<li> Poner agua a hervir
<li> Colocar tallarines en el agua
<li> Esperar 10 minutos
<li> Colar los tallarines
<li> Comer
</ol>

El navegador muestra la lista de forma muy parecida a las listas no ordenadas,


salvo que en este caso no se emplean viñetas gráficas en los elementos, sino que
se numeran de forma consecutiva. Es posible especificar el tipo de numeración que
se dará en la lista de objetos eligiendo entre números arábigos, números romanos y
letras usando el atributo type en la etiqueta <ol>, como en las listas desordenadas.

También podemos indicar al navegador que inicie la lista por el numero que
nosotros deseemos utilizando el atributo start. El número siempre debe indicarse en
la forma arábiga (1, 2, 3, …) aunque el tipo de lista esté en letras u otro. Otra de las
opciones que tenemos es usar el atributo value en la etiqueta <li> de cada
elemento para que aparezca un valor distinto y luego las siguientes entradas
continuarán desde ese número. Del mismo modo, en la etiqueta <li> de cada
objeto, está el atributo type para usar otro tipo de numeración distinto al de la lista.

Veamos algunos ejemplos:

<ol type="1" start="1"> <ol type="a" start="1"> <ol type="I" start="1">


<li> Primer elemento <li> Primer elemento <li> Primer elemento
<li> Segundo elemento <li> Segundo elemento <li> Segundo elemento
<li> Tercer elemento <li> Tercer elemento <li> Tercer elemento
</ol> </ol> </ol>

<ol type="A" start="3"> <ol type="i" start="7"> <ol>


<li> Primer elemento <li> Primer elemento <li> Primer elemento
<li> Segundo elemento <li> Segundo elemento <li value="4"> Segundo elem.
<li> Tercer elemento <li> Tercer elemento <li type="I"> Tercer elemento
</ol> </ol> </ol>

HTML PAG 20
LISTAS DE DEFINICIÓN
A diferencia de los dos tipos anteriores de listas, estas se utilizan para presentar la
información sin marcas ni números. Lo que hace es recurrir a los sangrados de los
párrafos.

Este tipo de listas es usado para crear glosarios o listas de definiciones o de


descripciones. El principio y final de este tipo de listas se delimitan con las etiquetas
<dl> y </dl > (dl: Definition List, Lista de definición). La inserción de elemento es
ligeramente distinta a la del resto de listas ya que no se usa la etiqueta <li>. Esto
es así porque en este caso cada uno de los elementos de lista está compuesta de
dos partes:

Palabra que queremos definir

Para insertar la palabra usaremos la etiqueta <dt> que proviene de Definition


Term (Término de definición). Esta nueva etiqueta funciona de forma muy
similar a <li> y la instrucción de fin </dt> es igualmente optativa.

Definición o descripción de esa palabra

Una vez indicada la palabra es hora de poner su definición. Para ello usamos
otra nueva etiqueta: <dd> cuyas siglas significan Definition Descriptión (parte
de la definición que contiene la descripción). La definición suele ser un párrafo
y será mostrado por los navegadores sangrado con respecto al texto anterior.

<dl>
<dt> HTML
<dd> Lenguaje es se utiliza para establecer la estructura y contenido
de un sitio web.
<dt> Lista
<dd> Colección de elementos homogéneos entre los que existe una
relación
<dt> Definición
<dd> Enunciado con que se define una palabra o un concepto.
</dl>

LISTAS ANIDADAS
Vistos todos los tipos de listas, se nos puede plantear una pregunta: ¿Se puede
incluir una lista dentro de otra? La respuesta es si. El lenguaje HTML permite
insertar listas dentro de otras, ya sean del mismo o de distinto tipo. A esta

HTML PAG 21
posibilidad se le llama anidamiento de listas y la forma de realizarlo es incluir todo
el código de una lista dentro de uno de los elementos de la otra. En el siguiente
ejemplo combinaremos algunos de los ejemplos anteriores para dar lugar a un
listado con varias listas anidadas unas dentro de otras:

<ul>
<li> Argentina
<ol>
<li> Santa Fe
<ul>
<li> Rosario
<li> San Lorenzo
</ul>
<li> Cordoba
<ul>
<li> Carlos Paz
<li> Cosquin
</ul>
</ol>
<li>
<dl>
<dt> Chile
<dd> País largo y angosto de Sudamérica
</dl>
</ul>

HTML PAG 22
TABLAS
Con su aparición, las tablas revolucionaron el diseño de las páginas web. Las tablas
eran una herramienta perfecta para organizar datos de manera ordenada, pero su
utilidad no se queda ahí ya que escondiendo los bordes podremos usarlas también
para definir la estructura de las páginas.

Una tabla en un conjunto de celdas organizadas dentro de las cuales podemos


alojar distintos contenidos. Es un elemento compuesto por filas y columnas.
Hoy, gran parte de los diseñadores de páginas basan su maquetado en este tipo de
artilugios. En efecto, una tabla nos permite organizar y distribuir los espacios de la
manera más optima. Nos puede ayudar a generar texto en columnas como los
periódicos, prefijar los tamaños ocupados por distintas secciones de la página o
poner de una manera sencilla un pie de foto a una imagen.

ESTRUCTURA DE UNA TABLA


Para crear las tablas será necesario usar una nueva etiqueta: <table>, que significa
en inglés tabla. Esta etiqueta consta de instrucción de inicio <table> e instrucción
de fin </table> . Entre ambas debemos introducir otras tres etiquetas que definirán
la estructura de la tabla. Estas etiquetas son:

<tr>
La etiqueta Table Row nos permitirá insertar filas en la tabla. La tabla tendrá
tantas filas como apariciones de esta etiqueta haya entre <table> y </table>.
La instrucción de inicio de <tr> marca el comienzo de la línea, la instrucción
de fin </tr> marca su final. La instrucción de fin es optativa, si no se usa se
considera que una línea ha acabado cuando comienza otra o cuando acaba la
tabla. Entre el comienzo y el fin de la línea debemos insertar las celdas de la
tabla.

<th>
Este es el primero de los dos tipos de celdas existentes en el lenguaje HTML.
El nombre de la etiqueta proviene del inglés Table Header, encabezado de
tabla. Al igual que la etiqueta anterior el comienzo del encabezado viene dado

HTML PAG 23
por la instrucción de inicio <th> y finaliza con la instrucción de fin </th> o
con el comienzo de otra celda. En general entre el comienzo y el fin se suele
insertar texto, que será mostrado en negrita o subrayado y centrado.

<td>
Este es el segundo tipo de celda de las tablas HTML. El nombre de la etiqueta,
Table Data (Datos de tabla), nos induce a pensar que su función será
introducir todos los datos que queramos en las celdas definidas de esta forma.
Y así será, de hecho podemos insertar cualquier elemento de HTML:
imágenes, listas, texto formateado e incluso otras tablas. En la práctica la
diferencia principal entre esta etiqueta y la anterior es que el texto de los
encabezados de tabla aparecerá resaltado y centrado y el de las celdas
normales no.

<table>
<tr>
<th> Cabezera 1 </th>
<th> Cabezera 2 </th>
<th> Cabezera 3 </th>
</tr>
<tr>
<td> Dato 1 </td>
<td> Dato 2 </td>
<td> Dato 3 </td>
</tr>
<tr>
<td> Dato 4 </td>
<td> Dato 5 </td>
<td> Dato 6 </td>
</tr>
</table>

Quizá el hecho que más nos sorprenda es que la tabla no tiene bordes y que las
celdas no están dibujadas, característica que añadiremos a la tabla con el atributo
border en la etiqueta <table>. Lo que más nos interesa ahora es comprender la
estructura de la tabla anterior. Como hemos podido comprobar esta tabla se va
creando por filas y dentro de cada fila se insertan las celdas, cada una de las cuales
aparecerán en una columna.

El modificar border coloca bordes internos y externos en la tabla, pero la anchura


que se especifica solo afecta a los bordes externos. Un efecto de sombreado del
borde exterior se da cuando el modificador border toma un valor superior a 1
(border=”4”). Si queremos que el borde exterior de la tabla sea igual que los bordes
interiores debemos utilizar el atributo de la siguiente forma: border=”1”.

También tenemos la opción de poner título a la tabla. Es conveniente que las tablas
tengan un título que las identifique y aclare su contenido. Aunque ese título puede
ser colocado poniendo texto formateado antes de la tabla, html dispone de la
etiqueta <caption> para darle nombre a la tabla.

HTML PAG 24
<table border="1">
<caption>Identificación de celdas</caption>
<tr>
<td> Celda A1 </td>
<td> Celda B1 </td>
<td> Celda C1 </td>
</tr>
<tr>
<td> Celda A2 </td>
<td> Celda B2 </td>
<td> Celda C2 </td>
</tr>
<tr>
<td> Celda A3 </td>
<td> Celda B3 </td>
<td> Celda C3 </td>
</tr>
</table>

Como se mencionó anteriormente, dentro de una celda de una tabla se pueden


colocar texto, imágenes, tablas anidadas, enlaces, etc. Colocar una imagen será tan
sencillo como, en lugar de texto, insertar la etiqueta img de la misma forma que la
pondríamos por fuera de la tabla. Lo mismo pasa con la etiqueta de enlace y otros.

<table border="1">
<caption> <b> PERIFERICOS </b> </caption>
<tr>
<th> Nombre </th>
<th> Tipo </th>
<th> Imagen </th>
<th> Más información </th>
</tr>
<tr>
<td> Teclado </td>
<td> Entrada </td>
<td> <img src="imagenes/[Link]" height="100" width="100"> </td>
<td> <a href="[Link] – Teclado </a> </td>
</tr>
<tr>
<td> Monitor </td>
<td> Salida </td>
<td> <img src="imagenes/[Link]" height="100" width="100"> </td>
<td> <a href="[Link] – Monitor</a> </td>
</tr>
<tr>
<td> Impresora con escaner </td>
<td> Entrada y salida </td>
<td> <img src="imagenes/[Link]" height="100" width="100"> </td>
<td> <a href="[Link] -Impresora</a></td>
</tr>
</table>

HTML PAG 25
TAMAÑO DE LAS TABLAS
El tamaño de las tablas no es siempre el mismo. Todas las celdas de una misma
columna deben tener un mismo ancho y todas las celdas de una misma fila deben
tener la misma altura. La altura de cada fila quedará determinada por el elemento
más alto (o el texto con más líneas) de todas las celdas de la fila. De manera similar
se calcula el ancho de las columnas. Es decir, por defecto el tamaño de la tabla
viene dado por el texto o los gráficos que contiene.

Sin embargo es posible que en ocasiones queramos cambiar la anchura de nuestra


tabla. Nos puede convenir, en alguna situación, forzarle a la tabla que tenga una
dimensión total mayores que las que le corresponden tanto en anchura como en
longitud. Esto se consigue añadiendo dentro de la etiqueta <table> los atributos
width y height igual a: un porcentaje de la dimensión de la pantalla o a una cifra
que equivale al número de pixels.

HTML PAG 26
<table border="1" width="50%">
<caption>Identificación de celdas con width=”50%”</caption>
<tr>
<th> </th>
<th> A </th>
<th> B </th>
<th> C </th>
</tr>
<tr>
<th> 1 </th>
<td> Celda A1 </td>
<td> Celda B1 </td>
<td> Celda C1 </td>
</tr>
<tr>
<th> 2 </th>
<td> Celda A2 </td>
<td> Celda B2 </td>
<td> Celda C2 </td>
</tr>
<tr>
<th> 3 </th>
<td> Celda A3 </td>
<td> Celda B3 </td>
<td> Celda C3 </td>
</tr>
</table>

TAMAÑO DE CELDAS
Al igual que hemos modificado el ancho de la tabla completa también podremos
modificar el tamaño de cada celda por separado. En este caso tendremos más
posibilidades aún, ya que podremos modificar también la altura de la celda usando
el atributo height. Al igual que antes, las dimensiones que especifiquemos con
width y height sólo serán respetadas si en ese espacio cabe su contenido. En los
atributos height y width se pueden definir la altura de la celda en pixels o
porcentaje.

A modo de ejemplo:

<td width="80"> Dará una anchura de 80 pixels a la celda.

<td width="80%"> Dará una anchura a la celda del 80% de la anchura de la tabla.

COMBINACIÓN DE CELDAS
A veces puede interesarnos que una celda se extienda sobre otras, de manera que
queden todas combinadas y se presenten como una sola. Esto se consigue
añadiendo dentro de la etiqueta de la celda los atributos colspan=”n” para
extenderse sobre un número n determinado de columnas, o rowspan=”n” para
extenderse verticalmente sobre un número n determinado de filas.

HTML PAG 27
<table border="1">
<tr>
<td colspan="2" align="center"> A </td>
</tr>
<tr>
<td align="center"> B </td>
<td align="center"> C </td>
</tr>
</table>

Podemos reconocer como algo nuevo en este ejemplo la aparición del atributo align
en la celda. Este establece la alineación que tendrá el contenido de la celda:
“center” (centrado), “right” (derecha) o “left” (izquierda).

<table border="1">
<tr>
<td align="center"> A </td>
<td rowspan="2" align="center"> B </td>
</tr>
<tr>
<td align="center"> C </td>
</tr>
</table>

RESUMES DE ATRIBUTOS
<table>

border Establece el valor en pixels del borde de la tabla. Si le asignamos el


valor cero no habrá borde.
bordercolor Color del borde.
background Permite colocar un fondo para la tabla a partir de un enlace a
una imagen.
bgcolor Color del fondo de tabla.
cellspacing Número de pixels entre celdas.
cellpadding Pixels entre el borde de la celda y su contenido.
align Alinea la tabla en la página. Sus valores son: center, right o left.
width Anchura de la tabla en pixels o en porcentaje (el 100% es el máximo
del que dispone el navegador).
height Altura de la tabla en pixels o en porcentaje.

<tr>
Los utilizamos para que los cambios afecten a toda las celdas de la fila.

align Alineación que afecta a todas las celdas de la fila. Sus valores son:
center, right o left.
valign Alinea el contenido de las celdas verticalmente arriba (top), abajo
(bottom) o centro (middle).
bgcolor Color del interior de la línea de celdas.
bordercolor Color del borde de la línea de celdas.

HTML PAG 28
<td>
Nos permite cambiar características a una celda en concreto.

align Alinea horizontalmente el contenido de la celda. Sus valores son: center,


right o left.
valign Alinea el contenido de las celdas verticalmente arriba (top), abajo
(bottom) o centro (middle).
bgcolor Color del fondo de celda.
bordercolor Color del borde.
background Permite colocar un fondo para la celda a partir de un enlace a
una imagen.
height Altura de la celda en pixels o en porcentaje.
width Anchura de la celda en pixels o en porcentaje.
colspan Expande una celda horizontalmente .
rowspan Expande una celda verticalmente.
nowrap El texto de esa celda no puede ser partido en varias líneas

HTML PAG 29
SONIDO
Una página Web puede tener sonidos incorporados, bien sea como un fondo sonoro
que se ejecuta automáticamente al iniciar y cargar la página, o como una opción
para que la active el propio usuario manualmente.

ETIQUETA A
Una forma de incluir sonidos, dejando al usuario la decisión de escucharlos o no, se
puede hacer utilizando la etiqueta <a> que ya hemos utilizado para incluir enlaces
anteriormente en nuestras páginas html. Para hacerlo incluiremos el sonido en el
parámetro href del enlace, del mismo modo en que utilizábamos este atributo para
hacer referencia a un documento html o url externa.

<a href="sonidos/phil colins - one more night.mp3">


Escuchar canción One more night de Phil Colins
</a>

En este ejemplo, el archivo de sonido (canción en formato mp3) se encuentra


dentro de una carpeta llamada “sonidos”. Lo que se genera es un link o un enlace
para hacer click sobre él. El sonido se abrirá en una nueva página, se auto
reproducirá y dispondremos de los controles para pausarlo, bajar el volumen,
adelantarlo o atrasarlo, etc.

ETIQUETA AUDIO
Otra forma de incorporar sonido a una página web es utilizando la etiqueta
<audio>. Ésta es una etiqueta que sirve para la inclusión de ficheros de audio, para
llegar a interpretarlos mejor y ampliarlos con más atributos y propiedades. Con ella
podemos hacer que parezca directamente en la página el objeto para controlar el
sonido.

Los atributos que tiene esta etiqueta son:


src
Dirección url, fuente del sonido, audio a reproducir. Obligatoria.
preload
Sus valores pueden ser auto, metadata o none. Indica como realizar la
precarga del audio.
autoplay
Comienza a reproducir el audio automáticamente.

HTML PAG 30
loop
Vuelve a iniciar el audio cuando finaliza su reproducción (bucle).
muted
Establece el audio sin sonido (silenciado).
controls
Muestra los controles de reproducción. Por defecto no se muestran.

En esta etiqueta los atributos autoplay, loop, muted y controls se utilizan de manera
tal que si están escritos dentro de la etiqueta <audio> estarán activos, de lo
contrario, si están ausentes en la etiqueta, estarán inactivos. Por ejemplo: por
defecto los controles de sonido no se muestran, si queremos que aparezcan
tenemos que colocar solamente la palabra (el atributo) “controls”. Lo mismo ocurre
con autoplay: si pretendemos que automáticamente el sonido se reproduzca
agregamos la palabra (el atributo) “autoplay” en la etiqueta.

Con este código no veremos los controles ni escucharemos el audio:

<audio src="sonidos/phil colins - one more night.mp3"></audio>

Con este código veremos los controles del audio, lo podremos reproducir
manualmente, subir y bajar el volumen, adelantarlo o atrasarlo y pausarlo:

<audio src="sonidos/phil colins - one more night.mp3" controls></audio>

Si lo que pretendemos hacer es introducir en nuestra página una sonido de fondo


que se reproduzca automática e infinitamente, sin que el usuario pueda pararlo,
adelantarlo ni tener control sobre el, usaremos lo siguiente:

<audio src="sonidos/phil colins - one more night.mp3" autoplay loop></audio>

En caso de que el navegador no encuentre el audio porque lo hemos direccionado


mal, no colocamos bien el nombre, la ubicación, la ruta, aparecerán los controles de
la siguiente manera (si en la etiqueta está el atributo de controles activos):

HTML PAG 31
VIDEO
ETIQUETA VIDEO
Para poder insertar videos en nuestras páginas HTML tenemos que utilizar la
etiqueta <video>.

Esta etiqueta tiene varios atributos a nuestra disposición:

src
Dirección url, fuente del video, video a reproducir. Obligatoria.
poster
Dirección url, ruta a imagen. Muestra una imagen a modo de presentación.
preload
Sus valores pueden ser auto, metadata o none. Indica como realizar la precarga
del video.
autoplay
Comienza a reproducir el video automáticamente.
loop
Vuelve a iniciar el video cuando finaliza su reproducción (bucle).
muted
Establece el video sin sonido (silenciado).
controls
Muestra los controles de reproducción. Por defecto no se muestran.
width
Indica el tamaño de ancho del video.
height
Indica el tamaño de alto del video.

A continuación veremos un ejemplo de inserción de un video que ya tenemos en


nuestra pc. En este caso lo guardamos en una carpeta llamada “videos” para mantener
ordenado nuestro trabajo y poder establecer la ruta del archivo en la etiqueta:

<video
src="videos/Paisajes submarinos.mp4"
width="640"
height="480">
</video>

Sin embargo, esto mostrará el primer fotograma del video, con un tamaño de 640x480,
pero se verá como una imagen, ya que no muestra los controles del video y tampoco
tiene la autoreproducción activada. Podríamos solucionarlo indicando los atributos
controls o autoplay.

<video
src="videos/Paisajes submarinos.mp4"
width="640"
height="480"
controls autoplay>
</video>

HTML PAG 32
Este video se reproducirá automáticamente por la presencia el atributo autoplay que
funciona igual que en la etiqueta <audio> utilizada para insertar sonidos. Solamente
escribirlo en la etiqueta implica que está activa esta funcionalidad. Lo mismo sucede
con el atributo controls que le permite al usuario pausar, adelantar, retroceder y hacer
pantalla completa con el video, al mismo tiempo que puede así controlar el nivel del
volumen del mismo.

Veamos otro ejemplo utilizando el atributo poster donde indicaremos la ruta a una
imagen que represente al video:

<video src="videos/Paisajes submarinos.mp4"


poster="imagenes/imagen [Link]"
width="640" height="480"
controls>
</video>

HTML PAG 33
En este caso cargamos un video. El mismo no se mostrará porque se ha indicado que
se utilice una imagen de presentación. Esta imagen es la que aparecerá hasta que el
usuario pulse en el botón de reproducir de los controles.

VIDEO DESDE YOUTUBE


YouTube es la plataforma de contenido digital de video en la cual podemos encontrar
una cantidad infinita de material y variedad. En estos tiempos muestra un crecimiento
exponencial y su uso por parte de quienes navegamos en internet es cotidiano. Un
aspecto fantástico de YouTube no es solo que podemos ver vídeos en su plataforma,
también podemos elegir el vídeo que nos guste para incrustarlo en nuestra página web,
mostrándolo como contenido.

Para insertar en nuestro documento html un video directamente desde YouTube,


aprovechando todas las funcionalidades y controles que esta plataforma multimedia
nos brinda, debemos seguir los siguientes pasos:

1. Buscamos el vídeo en YouTube que queremos poner en nuestra página.

2. Debajo del video que seleccionamos, y ya estamos viendo, hay una opción que dice
“compartir”.

3. Elegir la opción correcta para insertar. El botón que necesitamos es el primero, donde
dice “Incorporar” y tiene los símbolos <> como icono.

HTML PAG 34
4. Opciones para insertar y código <embed>. Después hacer click en “Incorporar”
veremos una pantalla donde podemos elegir opciones de nuestra preferencia: mostrar
controles de reproducción, iniciar en un tiempo determinado, etc. Para finalizar
hacemos click en el botón inferior derecho que dice “Copiar”. El texto con la etiqueta
<iframe width…> se pondrá de color azul y ya tendremos nuestra etiqueta copiada con
el video para pegar en el documento html.

<iframe width="560" height="315"


src="[Link] frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen></iframe>

Así es como, definitivamente, si seguimos los paso correctamente, se verá el video


insertado directamente desde la plataforma YouTube en nuestra página Web.

HTML PAG 35
FRAMES
Los frames son una herramienta técnica para insertar varios documentos HTML en una
sola ventana del navegador. Para ello se divide la pantalla en varias zonas o secciones
que reciben el nombre de frames o marcos. En cada uno de estos marcos debemos
insertar un contenido, que (en general) será un documento HTML, aunque también
puede ser una imagen o algún otro elemento visualizable por los navegadores.

Una de las ventajas de los frames es que cada uno de los documentos HTML puede ser
cambiado sin que ello afecte al resto. Los frames son útiles para mantener visibles
barras de navegación, encabezados y/o logotipos aunque el usuario se desplace por el
contenido de la página o navegue por el sitio Web.

Una de las característica más importantes de esta herramienta es que pulsando un


enlace situado en un frame, se puede cargar en otro frame una página determinada.
Esto se utiliza frecuentemente para tener un marco estrecho en la parte lateral (o
superior) con un índice del contenido, en forma de diferentes enlaces, que al ser
pulsados cargan en la ventana principal las distintas páginas. De esta manera se facilita
la navegación entre las páginas, pues aunque se vaya pasando de unas a otras,
siempre estará a la vista el indice del conjunto.

HTML PAG 36
Los frames, como decíamos, nos permiten partir la ventana del navegador en
diferentes áreas. Cada una de estas áreas son independientes y han de ser codificadas
con archivos HTML, también independientes. Como resultado, cada frame o marco
contiene las propiedades específicas que se le indique en el código HTML para
presentar en ese espacio. Así mismo, y dado que cada marco es independiente,
tendrán sus propias barras de desplazamiento, horizontales y verticales, por separado.

A continuación veremos un esquema con un ejemplo de una página web realizada con
frames. En este ejemplo se utilizaron 4 documentos HTML para conseguir mostrar el
contenido con marcos. Esto puede resultar extraño ya que las páginas que se muestran
son 3, identificadas como:

→ 1: contenido del frame 1, 2do documento HTML.


→ 2: contenido del frame 2, 3er documento HTML.
→ 3: contenido del frame 3, 4to documento HTML.
→ Definición de la estructura: 1er documento HTML, hace que sean 4 en total, es
el de definición de la estructura de los frames.

DEFINICIÓN DE LA ESTRUCTURA
Lo primero que tenemos que hacer es crear un documento HTML en el que definiremos
cuantas zonas, frames o marcos va a haber, que distribuciones y tamaños van a tener,
y cual va a ser el contenido de cada una de ellas.

Para crear frames utilizamos la etiqueta <frameset> la cual va a sustituir al habitual


<body>. Dentro de esta etiqueta primero definimos cada uno de los marcos
poniéndoles un nombre y especificando que documento HTML le corresponde mediante
la etiqueta <frame>.

Las divisiones que se pueden hacer con un <frameset> son en filas o en columnas.
Para indicarlo utilizamos el atributo cols si queremos una partición en columnas o el
atributo rows si la queremos en filas. En el atributo cols o rows colocamos entre

HTML PAG 37
comillas el número de particiones que deseamos realizar, indicando el tamaño que va a
asignarse a cada una.

Formatos de tamaño:

Porcentajes - %
Porcentaje referido al espacio total disponible en la pantalla.

Absolutos
Mediante un número especificando el tamaño en pixels.

Sobre el espacio sobrante


Colocando un asterisco (*) indicamos que el marco ocupa todo el espacio
sobrante. Si ponemos el asterisco en varios marcos se repartirán el espacio
equitativamente y si queremos que uno de los marcos sea mayor lo
hacemos poniendo un número delante del asterisco, de tal forma que si
ponemos 3* ese marco será tres veces mayor que el que tenga tan sólo el
asterisco. Estos tres formatos se pueden combinar.

<html>
<head>
<title>FRAMES</title>
</head>
<frameset cols="20%,80%">
<frame src="[Link]">
<frame src="[Link]">
</frameset>
</html>

En el código anterior, a diferencia del esquema que tenemos al principio de esta


página, se definieron 2 frames en lugar de 3. Son 2 columnas: la primera abarca un
20% de la página y la segunda un 80%.

Mediante la etiqueta <frame> y el atributo src de esta definimos la procedencia de


cada una de las filas o columnas. El valor del atributo src es la ruta y nombre del
archivo html que se mostrará en el frame. Cada frame del ejemplo se corresponde con
su documento HTML ([Link] y [Link]) ubicados todos en la misma carpeta.
Habrá tantas etiquetas <frame> como particiones hayamos especificado en el atributo
cols o rows.

Volviendo a hacer hincapié en algo ya especificado, aquí nos encontramos nuevamente


con 3 documentos en total para poder armar esta solución. Es el del código que
detallamos arriba el que hace la definición de la estructura de los marcos: [Link].
Los archivos [Link] y [Link] solo presentan un código que indica mostrar
los carteles que podemos visualizar en los marco: FRAME 1 y FRAME 2

HTML PAG 38
<html> <html>
<head> <head>
<title></title> <title></title>
</head> </head>
<body> <body>
<h2>FRAME 1</h2> <h2>FRAME 2</h2>
</body> </body>
</html> </html>

Este documento de definición de la estructura de frames o marcos (en nuestro ejemplo


[Link]) es un documento parecido a los que conocíamos hasta ahora. La
diferencia está que en vez de utilizar la etiqueta <body>, que sirve normalmente para
delimitar lo que se va a ver en la pantalla, se hace uso de la etiqueta <frameset> para
definir los frames que va a haber en esa pantalla.

Ejemplos de frames

<html>
<head>
<title>FRAMES</title>
</head>
<frameset rows="100, *, 20%">
<frame src="[Link]">
<frame src="[Link]">
<frame src="[Link]">
</frameset>
</html>

<html>
<head>
<title>FRAMES</title>
</head>
<frameset cols="25%, 50% , *">
<frame src="[Link]">
<frame src="[Link]">
<frame src="[Link]">
</frameset>
</html>

HTML PAG 39
<html>
<head>
<title>FRAMES</title>
</head>
<frameset cols="25%, 75%">
<frame src="[Link]">
<frameset rows="40%,60%">
<frame src="[Link]">
<frame src="[Link]">
</frameset>
</frameset>
</html>

En los tres ejemplos anteriores se utilizo un primer documento HTML como definición
de la estructura de marcos llamado [Link] y cuyo código es el que se visualiza a
la izquierda o arriba de la imagen correspondiente.

También se usaron tres documentos más HTML correspondientes con las páginas que
se ven dentro de los marcos llamados [Link], [Link] y [Link]. En
ellos el código es el texto que indica las características de cada marco. Esto no quiere
decir que solo se puedan usar solo 3 marcos, la cantidad que podemos elegir para
trabajar con frames es infinita y su distribución también.

En el primer ejemplo hay 3 filas, en el segundo hay 3 columnas y en el tercero tenemos


marcos anidados: la primera columna es entera y tiene al marco 1, pero la segunda
columna está dividida en 2 filas donde su primera fila es el marco 2 y su segunda fila es
el marco 3.

HTML PAG 40
ATRIBUTOS NAME Y TARGET
Hasta ahora vimos ejemplos de utilización de frames solo de visualización, con un
documento HTML destinado a la definición de la estructura de marcos y luego un
documento HTML más para cada unos de los frames que definíamos, mostrando algo
estático y sin cambio.

Pero uno de los usos que más se da trabajando con frames es el de establecer un
marco como índice o menú e ir cambiando el contenido de otro u otros frames de
acuerdo a lo que seleccionemos en el primer marco estático. Para conseguir esto
vamos a usar los atributos name de la etiqueta <frame> y target de la etiqueta <a>.

Recordamos que utilizamos la etiqueta <a> para realizar enlaces hacia otros
documentos HTML locales o para dirigirnos a otros sitios web, entre otras opciones.

Atributo name
Se utiliza en la etiqueta <frame> (la que hasta ahora nos sirvió para indicar la
pagina HTML que contiene el marco con el atributo src). Este atributo permitirá
darle un nombre al marco y así poder dirigir los enlaces hacia él.

Atributo target
Se utiliza en la etiqueta <a> de enlaces. Su función es la de indicar en que frame
se va a mostrar la página a la que apunta este enlace. Ese marco en el que
aparecerá la página estará identificada con su nombre, o sea, su atributo name.

Como ejemplo representativo y explicativo de la utilización de un frame cómo índice o


menú de contenidos desplegados y abiertos en otro frame dinámico, vamos a crear un
documento HTML para definir la estructura de frames llamado [Link]. En
esté crearemos dos columnas:

HTML PAG 41
Columna izquierda
Va a mostrar el menú para acceder a los distintos contenidos de nuestro sitio
web. En él se visualizarán los enlaces hacia documentos HTML que expanden la
información que nombra dicho enlace. En este caso será un menú de dispositivos
de almacenamiento digitales (Pendrive, Disco rígido, CD/DVD, Memoria SD).
Como este marco permanecerá estático sin cambiar su contenido, es opcional
establecer el atributo name en la etiqueta <frame>, de lo contrario, si aquí
queremos redireccionar enlaces, si o si tenemos que ponerle un valor a este
atributo.

Columna derecha
En está columna se irán cargando los distintos documentos HTML que traten
sobre la opción elegida en el menú de la columna izquierda. Para cada uno de los
enlaces de la columna izquierda deberemos tener una página HTML realizada
que se pueda cargar en la columna derecha o central. Como en esté marco se
van a redireccionar las página desde el menú, debemos establecer el atributo
name de la etiqueta <frame> para que el enlace lo pueda encontrar y cargar allí
su contenido. Al inicio, cuando se cargue por primera vez el sitio web y no se
haya hecho ninguna selección en el menú, mostraremos una descripción en él
sobre los dispositivos de almacenamiento digitales (primer HTML de información)
y para cada dispositivo que el usuario pueda seleccionar del menú iremos
mostrando su detalle (un HTML distinto de información para cada dispositivo).

Vamos a ver primero el código de [Link] que muestra la estructura de los


marcos y abajo el de [Link] que muestra el menú con los enlaces a la izquierda.

<html>
<head>
<title>Dispositivos de almacenamiento</title>
</head>
<frameset cols="20%, 80%">
<frame src="[Link]" name="indice">
<frame src="[Link]" name="info">
</frameset>
</html>

<html>
<head>
<title></title>
</head>
<body>
<h3>Seleccione dispositivo</h3>
<a href="[Link]" target="info">Pendrive</a>
<br><br>
<a href="[Link]" target="info">Disco Rígido</a>
<br><br>
<a href="[Link]" target="info">CD/DVD</a>
<br><br>
<a href="[Link]" target="info">Memoria SD</a>
</body>
</html>

HTML PAG 42
El documento [Link] es el que se muestra al inicio en la columna
derecha, o central, y contiene información y una imagen. Al igual que todos los
documentos que muestren información en el frame central, llamado “info”,
[Link] está compuesto por un título, un párrafo y una imagen centrada,
por lo cual obviaremos mostrar su código html.
Lo principal aquí es poder entender que el frame central tiene un nombre, determinado
por el atributo name=”info” en la etiqueta <frame> de dicho marco. En este frame
más grande se abrirán los enlaces del menú del frame izquierdo, ya que estos detallan
que el documento html se debe abrir en el frame central con el atributo target=”info”
en la etiqueta <a> de cada enlace.

En las siguientes imágenes se puede ver como se van cargando en el marco derecho
central llamado info todos los documentos HTML que contienen información sobre cada
dispositivo: [Link], [Link], [Link] y [Link], todos en la misma
carpeta que [Link] y [Link].
El marco izquierdo siempre permanece igual, mostrando el menú para ir cambiando
entre las distintas opciones a su derecha.

HTML PAG 43
HTML PAG 44
CSS
Las páginas web y los documentos html que venimos haciendo hasta ahora tienen
mezclado en su código el contenido del sitio junto con las etiquetas necesarias para
darle formato. Esto tiene sus inconvenientes ya que la lectura del código html se hace
pesada y difícil a la hora de buscar errores, editar, mejorar o depurar las páginas.

CSS consiste en definir la forma de presentación que le aplicaremos, de manera más


precisa y prolija, a algunas de las siguientes opciones:

→ Un sitio web entero completo


→ Un documento html
→ Una porción de una página web
→ Una etiqueta en particular

CSS se concentra en cómo volver la estructura de un documento html utilizable y


atractiva a la vista del usuario. Se encarga de presentar esa estructura y su contenido
html en la pantalla.

Un archivo de estilos CSS es un grupo de reglas de formato que ayudarán a cambiar y


definir la apariencia de nuestra página web. Sin estas reglas, el texto y cualquier otro
elemento html sería mostrado en pantalla utilizando los estilos estándar provistos por
el navegador. Los estilos son reglas simples que normalmente requieren solo unas
pocas líneas de código y pueden ser declarados en el mismo documento. No es
estrictamente necesario obtener esta información de archivos externos, pero es una
práctica recomendada.

CSS es un lenguaje que surge como un complemento para superar las limitaciones y
reducir la complejidad de html. Al comienzo, atributos dentro de las etiquetas HTML
proveían estilos esenciales para cada elemento, pero a medida que el lenguaje
evolucionó, la escritura de códigos se volvió más compleja y HTML por sí mismo no
pudo más satisfacer las demandas de diseñadores. En consecuencia, CSS pronto fue
adoptado como la forma de separar la estructura de la presentación dentro de los sitios
web.

HTML PAG 45
CSS es un lenguaje que trabaja junto con HTML para proveer estilos visuales a los
elementos del documento, como tamaño, color, fondo, bordes, etc.

A pesar de que cada navegador garantiza estilos por defecto para cada uno de los
elementos HTML, estos estilos no necesariamente satisfacen los requerimientos de
cada diseñador. Normalmente se encuentran muy distanciados de lo que queremos
para nuestros sitios webs. Diseñadores y desarrolladores a menudo deben aplicar sus
propios estilos para obtener la organización y el efecto visual que realmente desean.

TÉCNICAS PARA APLICAR ESTILOS


Aplicar estilos a los elementos HTML cambia la forma en que estos son presentados en
pantalla. Como explicamos anteriormente, los navegadores proveen estilos por defecto
que en la mayoría de los casos no son suficientes para satisfacer las necesidades de los
diseñadores. Para cambiar esto, podemos sobrescribir estos estilos con los nuestros
usando diferentes técnicas:

Pequeñas partes de la página


Para definir estilos en secciones reducidas de una página se utiliza la etiqueta
<span> en conjunto con el atributo style. Lo que se hace es indicar las
características de estilos que se desea aplicar a una parte muy pequeña del
documento, como podría ser una palabra dentro de un párrafo. La etiqueta
abierta <span> con el atributo style modificará el estilo de acuerdo a lo definido
hasta que se cierre, obviamente, con la etiqueta </span>.

Vamos a tomar como ejemplo cambiar el estilo de una palabra dentro de un texto
que se encuentra en una etiqueta de párrafo. Lo que haremos será escribir en
color rojo la palabra ‘estilo’.

<p> Podemos cambiar el <span style="color:red"> estilo </span> de algunas


palabras dentro un párrafo. </p>

HTML PAG 46
Así como lo hicimos con la palabra ‘estilo’, podemos escribir de color rojo los
sustantivos del texto que se encuentra en la etiqueta párrafo.

<p> Podemos cambiar el <span style="color:red"> estilo </span>


de algunas <span style="color:red"> palabras </span>
dentro un <span style="color:red"> párrafo </span> </p>

Para aplicar esta técnica basta con abrir la etiqueta span <span> junto con el
atributo style, igualado al estilo y valor deseado style=”color:red”, al comienzo
del cambio de estilo. Para cerrar el cambio de estilo hay que colocar la etiqueta
de cierre de span </span>. La sintaxis y estructura a respetar en cualquier caso
en el que se quiera modificar alguna sección pequeña de código es:

< span style = ” estilo_a_modificar : valor_del_estilo ” >


Sección que recibe el cambio de estilo
< /span >

Estilos en línea
Una de las técnicas más simples para incorporar estilos CSS a un documento html
es la de asignar los estilos dentro de las etiquetas por medio del atributo style, en
el mismo documento html. Esta técnica también es conocida como la de ‘Estilo
definido para una etiqueta’ ya que de este modo podemos hacer que toda una
etiqueta muestre un estilo determinado.

Para mostrar el funcionamiento del atributo style dentro de una etiqueta, vamos
a utilizar la de párrafo <p> cambiando el color de la fuente y también el tamaño.
Dentro de la etiqueta de apertura del párrafo agregamos el atributo style con el
valor font-size:____ y color:____. La sintaxis de este tipo de estilo es:

< nombre_etiqueta style = ” estilo_a_modificar : valor_del_estilo ” >


………………………………………………………………….
</ nombre_etiqueta >

<p style = " color : red " > Estilo en línea. Párrafo con fuente color rojo. </p>

<p style = "color : blue" > Estilo en línea. Otro párrafo con fuente color azul. </p>

<p> Párrafo sin estilo modificado en tamaño de fuente. </p>


<p style = "font-size : 25" > Párrafo con tamaño de fuente 25 de estilo en línea.</p>
<p style = "font-size : 20" > Párrafo con tamaño de fuente 20 de estilo en línea.</p>

HTML PAG 47
Es posible concatenar dos o más cambios de estilos, separando estos con punto y
coma “;”. Para continuar con el ejemplo que venimos haciendo, podemos definir
que el párrafo tenga un tamaño de fuente 20 y color verde de la siguiente
manera:
< p style= "font-size:20 ; color:green" >
Párrafo con tamaño de fuente 20 y color verde.
< /p >

Usar la técnica demostrada anteriormente es una buena manera de probar estilos


y obtener una vista rápida de sus efectos, pero no es recomendado para aplicar
estilos a todo el documento. La razón es simple: cuando usamos esta técnica,
debemos escribir y repetir cada estilo en cada uno de los elementos que
queremos modificar, incrementando el tamaño del documento a proporciones
inaceptables y haciéndolo imposible de mantener y actualizar.

Estilos para toda una página

Una mejor alternativa, a lo que vimos en el apartado anterior, es insertar los


estilos en la cabecera del documento. Esto afectará los elementos HTML
correspondientes de toda la página. Esta es una manera muy cómoda de darle
forma al documento y muy potente, ya que estos estilos serán seguidos en toda
la página y nos ahorraremos así muchas etiquetas HTML que apliquen forma al
documento. Además, si deseamos cambiar los estilos de la página lo haremos de
una sola vez.

HTML PAG 48
El elemento <style> dentro de la etiqueta <head> del código anterior permite
a los desarrolladores agrupar estilos CSS dentro del mismo documento HTML que
se está haciendo.
En este ejemplo se dio estilo a dos etiquetas que se comportarán como se las
definió allí: <h1> y <h2>. Los dos titulares estarán centrados. El más grande
tendrá texto de color amarillo y fondo azul mientras que el más pequeño será de
texto rojo y fondo negro.
Como se puede observar a la etiqueta <h3> no se le dio formato, por lo que se
presenta estándar al mostrarse.

La sintaxis en esta técnica de estilos, que se escribe dentro de la cabecera o


<head> del documento html, es la siguiente:

<style>
nombre_etiqueta_a_modificar_1 {
estilo_a_modificar_1 : valor_del_estilo_a_modificar_1 ;
estilo_a_modificar_2 : valor_del_estilo_a_modificar_2 ;
estilo_a_modificar_n : valor_del_estilo_a_modificar_n
}
nombre_etiqueta_a_modificar_2 {
estilo_a_modificar_1 : valor_del_estilo_a_modificar_1 ;
estilo_a_modificar_2 : valor_del_estilo_a_modificar_2 ;
estilo_a_modificar_n : valor_del_estilo_a_modificar_n
}
nombre_etiqueta_a_modificar_k {
estilo_a_modificar_1 : valor_del_estilo_a_modificar_1 ;
estilo_a_modificar_2 : valor_del_estilo_a_modificar_2 ;
estilo_a_modificar_n : valor_del_estilo_a_modificar_n
}
</style>

A continuación se detalla y muestra la ejecución de otro ejemplo donde se les da


estilo para todo el documento al body y a los párrafos:

HTML PAG 49
Archivos Externos
Declarar estilos en la cabecera del documento, como hicimos en el apartado
anterior, ahorra espacio y vuelve al código más consistente y actualizable. Pero
esto requiere hacer una copia de cada grupo de estilos en todos los documentos
de nuestro sitio web. La solución es mover todos los estilos a un archivo externo y
luego utilizar el elemento <link> para insertar este archivo dentro de cada
documento que los necesite. Este método nos permite cambiar los estilos por
completo simplemente incluyendo un archivo diferente. También nos permite
modificar o adaptar nuestros documentos a cada circunstancia o dispositivo,

Una de las características más potentes de la programación con hojas de estilos


consiste en que, de una vez, podemos definir los estilos de todo un sitio web. Esto
se consigue creando un archivo donde tan sólo colocamos las declaraciones de
estilos de la página y enlazando todas las páginas del sitio con ese archivo. De
este modo, todas las páginas comparten una misma declaración de estilos y, por
lo tanto, si la cambiamos, cambiarán todas las páginas.

HTML PAG 50
BIBLIOGRAFÍA
- “Resumen HTML” - Daniel Doña Ibáñez

- “Curso completo de HTML - Jorge Ferrer, Víctor García, Rodrigo García

- “Manual práctico de HTML - Álvaro Martínez Echevarría – 1995

- “Manual Básico de creación de páginas Web” - Universidad de Murcia

- “HTML: Guía rápida de referencia” - Jorge Sanchez – 2003

- “Introducción a XHTML” - Javier Eguiluz – 2013

HTML PAG 51

También podría gustarte