Guia de Conceptos Teóricos de HTML - 11 Web

COLEGIO LEÓN DE GREIFF
GUIA - DESARROLLO WEB

CONCEPTOS TEORICO DE HTML
PERIODO: II
DOCENTE: RUBEN DARIO DIAZ H
AÑO LECTIVO 2020-2021
CONCEPTOS TEÓRICOS DE HTML.
Objetivos planteados:
Que conozcas la estructura básica de un documento HTML.
Que aprendas a construir una página HTML utilizando los recursos elementales.
Que adquieras las bases necesarias para poder continuar de forma autónoma
el aprendizaje sobre elementos avanzados de lenguaje HTML.
Que puedas utilizar otro software donde se aplique el HTML.
Que puedas visualizar la estructura interna de la página web.
INTRODUCCIÓN HTML
DEFINICIÓN Y ORÍGENES:
El HTML o HyperText Markup Language (traducible como Lenguaje de
Marcas de HiperTexto) puede definirse como un sistema unificador de la
información que permite integrar en un mismo documento (la llamada “Página
Web”) objetos de distinta naturaleza. Es mucho más sencillo que un lenguaje
de programación ya que está formado por una serie de marcas (etiquetas o
tags) que podemos escribir con el más simple de los procesadores de texto.
Este lenguaje, creado por Tim Berners-Lee, ingeniero del CERN (Conseil
Europeen pour la Recherche Nucleaire), tiene sus raíces en el SGML (Standard
Generalized Markup Language) que es un lenguaje de marcas mucho más
amplio que sirve de fundamento para definir otros lenguajes de marcas para
propósitos más concretos. Así, el HTML es una aplicación del estándar ISO
8879:1986 (SGML), que se formalizó en 1990 con la aparición del World Wide
Web.
VERSIONES Y EXTENSIONES:
Las distintas versiones del HTML se documentan en los DTD (Document Type
Definition) que describen las especificaciones del lenguaje, es decir, sus
distintos elementos (en este caso marcas) y el modo en que deben ser
utilizados. Con cierta periodicidad la IETF (Internet Engineering Task Force) ha
venido emitiendo borradores (drafts) de estos DTD con nuevas propuestas para
ampliar el lenguaje, ya sea incluyendo nuevos elementos o añadiendo
atributos a elementos ya existentes.
Colegio León de Greiff Guía didáctica DESARROLLO WEB
Hasta la fecha se han realizado tres versiones del HTML. Sin embargo,
algunas empresas de software, propietarias de los navegadores más
populares de Internet, han ido añadiendo unilateralmente una serie de
extensiones (exclusivas de sus navegadores) que tratan de optimizar las
prestaciones del HTML estándar aunque se alejan de él. Este ha sido el caso
de NETSCAPE, y recientemente también de MICROSOFT.
En mayo de 1996 se cerró el HTML 3.2, que es la integración de las mejores
extensiones en el estándar. En esta discusión han participado todas las
empresas interesadas (IBM, MICROSOFT, NETSCAPE, NOVELL, SOFTQUAD,
SPYGLASS y SUN MICROSYSTEMS).
En las próximas páginas iremos analizando las distintas marcas del HTML y
sus correspondientes atributos (la primera que debe preceder a todo
documento que cumpla con el nuevo estándar es <!DOCTYPE HTML PUBLIC
“-//W3C//DTD HTML 3.2//EN”>). Para aclarar si se trata de una u otra versión
o extensión usaremos las notaciones del cuadro adjunto (debe tenerse en
cuenta que una versión superior incluye a las anteriores).
SERVIDORES Y CLIENTES.
Las redes que forman Internet se organizan en Servidores y Clientes. Los
primeros, administrados por expertos en informática, son ordenadores
conectados permanentemente a Internet y que hospedan sus distintos
recursos (páginas web, programas, etc). Los segundos, los clientes, son
ordenadores conectados a servidores, y que pueden ser utilizados por
usuarios con menos conocimientos informáticos. Cuando hablemos de
Cliente nos referiremos a los programas instalados en este último tipo de
ordenadores, en especial nos referiremos al navegador o browser.
HTTP, UN PROTOCOLO “SIN ESTADO”.
Para la comunicación entre Servidores y Clientes en el WWW se utiliza el HTTP
(HyperText Transfer Protocol). Su funcionamiento es el siguiente: el Cliente
establece una conexión con el Servidor y le envía una petición, este último
le envía la respuesta (una página web), y se cierra la comunicación entre
ambos. Aunque el navegador mantenga el documento, la conexión no
permanece. Por ello se dice que el HTTP es un protocolo de transmisión sin
estado, es decir, no retiene información sobre la conexión una vez que la
comunicación haya concluido.
EJECUCIÓN DE APLICACIONES EN EL SERVIDOR: PROGRAMAS CGI.
Sin embargo, los estados entre cliente y servidor debían ser gestionados
para permitir enviar información a los servidores o acceder a bases de datos
de forma interactiva. Fue, el NCSA (National Center for Supercomputing
El presente documento es propiedad del Colegio León de Greiff, cualquier modificación debe ser
autorizada – Sistema Gestión de Calidad Página 2 de 42
Applications), creador del navegador MOSAIC, quien desarrolló en sus

servidores un interfaz denominado CGI (Common Gateway Interface).
Gracias a este, una serie de programas instalados en el servidor podían
interactuar con el cliente. Esto fue motivo suficiente para que se revisara el
HTML, incorporándose en su versión 2 los Formularios (que veremos más
adelante).
EJECUCIÓN DE APLICACIONES EN EL CLIENTE: PROGRAMAS JAVA.
Pero el futuro de Internet parece que pasa por un nuevo tipo de lenguaje
de programación semejante al C++ y desarrollado por SUN MICROSYSTEM:
el JAVA es un robusto lenguaje de programación diseñado para crear
aplicaciones que se pueden cargar a través de la Red para que
posteriormente sean ejecutadas de forma local, es decir, en el propio
cliente.
Las aplicaciones (applets) desarrolladas en este lenguaje se apoyan en una
completa librería estandarizada, y se compilan para obtener un código
intermedio, muy cercano a las instrucciones de la máquina, que es lo que se
envía al cliente. Este incluye un intérprete que convierte el código
intermedio al del ordenador con el que esté operando. De esta forma las
aplicaciones JAVA son rápidas y pueden funcionar en cualquier ordenador
(es decir, que es multiplataforma).
Al tratarse de documentos de texto podemos afirmar que nos bastaría con
el Bloc de notas de Windows para crear nuestras páginas HTML.
Aunque este procedimiento resultaría bastante incómodo para su uso
habitual, ya que nos obligaría a conocer todas las etiquetas del HTML,
puede ser interesante para que comprendamos la estructura de una página
WEB y será lo primero que utilizaremos.
EL FORMATO DE LAS ETIQUETAS HTML
Las etiquetas HTML se escriben encerradas entre ángulos signo mayor que
< y menor que >. Normalmente se utilizan dos etiquetas: una de inicio y otra
de final 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.
<etiqueta> texto que presentará el efecto</etiqueta>
Por ejemplo:<B>texto</B> dará como efecto texto
Algunas Marcas (las simples o las de apertura) pueden ir acompañadas de
una serie de Atributos que varían el comportamiento de la propia marca.
Ejemplo: <BODY BGCOLOR=#FFFFFF TEXT=#00FF00 LINK=#FF0000>
Por último, una marca puede estar escrita en mayúsculas, en minúsculas o

en ambas. Se dice, por tanto, que no es “caso sensitivo”.
LA ESTRUCTURA BÁSICA DE UNA PÁGINA WEB

Para que un navegador reconozca que lo que está viendo es una página
WEB se utiliza la siguiente estructura:
<HTML> (Etiqueta que indica que lo que viene a continuación es un
documento HTML)
<HEAD>(Etiqueta de apertura de la cabecera).
Aquí va la información sobre el título de la página, el autor, palabras clave,
etc. que no se presentarán en la ventana del navegador, salvo el título que
aparecera en la barra de título de la parte superior
</HEAD>(Etiqueta de cierre de la cabecera)
<BODY>(Etiqueta de apertura del cuerpo)
Aquí va el contenido de la página que será lo que se presente en pantalla.
</BODY>(Etiqueta de cierre del cuerpo)
</HTML>(Etiqueta de cierre del documento)
LA CABECERA DEL DOCUMENTO:

<HEAD></HEAD>: Estas marcas delimitan la Cabecera de la página web y
contiene información sobre el propio documento. Los elementos incluidos
aquí sirven para interpretar y mantener el contenido del documento que, a
su vez, está delimitado por las marcas <BODY></BODY>. Las marcas que
pueden aparecer en la cabecera son las siguientes:
LAS CABECERAS
Uno de los elementos de formato que nos resultará imprescindible será la
diferenciación de tamaños de letra para poder introducir títulos de epígrafes
y organizar visualmente la información.
Disponemos para esta tarea de seis formatos predeterminados de
cabeceras. Para utilizarlos deberemos poner la etiqueta de apertura
delante de la primera letra cuya apariencia deseemos modificar y cerrar
tras la última para volver al texto normal. (Además las etiquetas de
cabecera introducen un salto de párrafo sin necesidad de indicarlo)
Este código ... ...da Como resultado
<H1> Cabecera 1</H1> Cabecera 1
<BASE>: Dirección URL virtual del documento. Se emplea para especificar un

directorio de base distinto del actual. Se suele usar para hacer pruebas con
un documento y asociarle elementos propios de otro, y para poder
cambiarlos de ubicación sin que dejen de funcionar los enlaces. Si se omite
esta marca, se toma como dirección base la que se ha tomado para
acceder al documento. Tiene un solo atributo y es obligatorio:
Atributo Función href=“URL”
Dirección del documento.
<LINK>: Se utiliza para definir las relaciones entre los distintos documentos,
para definir barras de botones automáticamente o para crear áreas
estáticas (banners).
Atributo Función
rel=home, toc, index, glossary Define la relación establecida entre el
copyright, up, next, previous documento HTML y la dirección URL.
help, bookmarks, banner.
rev=relación Es el reverso del anterior, es decir, especifica la relación entre
la dirección URL y el documento HTML.
href=“URL” Dirección del documento objeto de la relación.
Title Específica el nombre de la relación.
<META>: Información especial de identificación del documento (llamada

metainformation) no definida por otras marcas. Debe aparecer entre las
primeras líneas del documento HTML. Es especialmente útil para la creación
de documentos dinámicos desde el lado del cliente (CLIENT-PULL de
NETSCAPE).
Atributo Función
name=nombre Nombre asignado.
http-equiv=comando HTTP Comando HTTP que se quiere
ejecutar.
content=contenido Contenido del atributo.
<TITLE></TITLE>: Delimitador del título de la página. Es un elemento necesario

y especialmente útil para identificar el documento. Aunque no existe un
límite, es recomendable no usar títulos con más de 64 caracteres.
Comandos HTTP más usados:
Expires. Indica la fecha en que expira el documento.

<META HTTP-EQUIV=“Expires” CONTENT=“Sun, 22 Sept 1996”>
Keywords. Palabras clave por las que el documento sea localizable.
<META HTTP-EQUIV=“Keywords” CONTENT=“Sevilla, Andalucía, España”>
Reply-to. Dirección de correo electrónico del autor del documento.
<META HTTP-EQUIV=“Reply-to” CONTENT=“arturo2@ibm.net”>
Refresh. Indica que se desea cargar este u otro documento pasados unos
segundos.
<META HTTP-EQUIV=“Refresh” CONTENT=0>
<META HTTP-EQUIV=“Refresh”
CONTENT=“5;URL=http://www.hola.es/hola.htm”>
<ISINDEX>: Es una marca generada automáticamente por un programa

instalado en un servidor. Sirve para establecer un mecanismo para realizar
búsquedas en documentos y servidores. Tiene dos atributos (href y prompt).
<STYLE></STYLE>: Es un contenedor reservado para el uso futuro de
diferentes hojas de estilo. El estilo que se especifique en este lugar sustituirá
al que tenga asignado por defecto el navegador, dando más libertad
creativa al autor de páginas web.
<SCRIPT></SCRIPT>: Reservado también para el uso futuro de programas
ejecutables desde el navegador.
No obstante, NETSCAPE e INTERNET EXPLORER ya están haciendo uso de este
tipo de contenedor al incluir en él el código fuente de aplicaciones
desarrolladas en JAVASCRIPT, una versión aligerada del lenguaje JAVA.
Para aplicaciones desarrolladas en JAVA, se utiliza el contenedor

<APPLET></APPLET>, que es el lugar donde se han de incluir sus códigos y que
tienen los siguientes atributos:
Atributo Función
code=“nombre” Indica el nombre del archivo a ejecutar.
width=número Define el ancho del resultado de la
aplicación.
height=número Define la altura del resultado de la
aplicación.
ETIQUETAS Y MARCAS HTML

Aplica Etiquetas y Marcas HTML en el diseño de una Página Web
ESTILO FÍSICO:
En el Estilo Físico es el autor del documento quien especifica la apariencia
del texto. El autor del documento controla en mayor medida el diseño
definitivo de la página. El efecto de estos estilos se acumula.
<B></B>: Negrita (Bold), el texto aparece con un tipo de letra más grueso.
<I></I>: Cursiva (Italic), el texto se muestra ligeramente inclinado.
<U></U>: Subrayado (Underline), se incluye una línea horizontal bajo cada
letra.
(N3)
<TT></TT>: Texto de Terminal, se usa un tipo de letra no proporcional.
<S></S>: Tachado (Strikeout). (H3, N3)
<SUB></SUB>: Subíndice (Subscript). (N2, H3)
<SUP></SUP>: Superíndice (Superscript). (N2, H3)
<BIG></BIG>: Tamaño Grande (Big) de letra. (N2, H3)
<SMALL></SMALL>: Tamaño Pequeño (Small) de letra. (N2, H3)
<PRE></PRE>: Delimita un texto que se quiere mostrar con el formato propio
del código fuente. Es decir que respeta el tipo de texto (font)
proporcional, los espacios y los saltos de línea. Al finalizar un bloque
delimitado con estas marcas se incorpora automáticamente un
salto de línea.
Atributo Función
width=número Indica el tamaño máximo del texto.
<CENTER></CENTER>: Delimitador que hace que el contenido se
centre con respecto a los márgenes actuales.
<BLINK></BLINK>: Texto Intermitente (Blinking). Es quizá la marca más

odiada del WWW. (N2)
<BASEFONT SIZE=n> (donde n=1,2,3,4,5,6,7) Establece
el tamaño base de la fuente de letra. En el Navigator de NETSCAPE el valor
por defecto es 3, en el Internet Explorer de MICROSOFT es 2.
<FONT></FONT>: Delimitador para modificar la fuente de caracteres (font).
Atributo Función
Size =n (n=1,2,3,4,5,6,7) Tamaño de la fuente.
Size =±n (n=1,2,3,4,5,6,7) Incremento a disminución del tamaño
de la fuente sobre el establecido en BASEFONT.
Color = #rrggbb Valor RGB del color del texto.
Color = nombre Nombre del color del texto. (M1)
Face =“nombre1, nombre2, nombre3” Establece el nombre de la fuente.
Si se especifica más de un
nombre se selecciona la primera
disponible. (M1)
<TAB></TAB>: Tabulación horizontal. (H3)
DIVISORES DEL TEXTO:

<P>: Divisor de Párrafos (Paragraph). Normalmente es considerada como
marca simple, pero en el futuro será un delimitador (<P></P>).
Atributo Función
align= left, right, center Alineación del párrafo. (H3)
<BR>: Salto de línea (Line Break). Al contrario del anterior, pueden
acumularse.
Atributo Función
clear=left, right, all Permite que el texto bordee la imagen
flotante
<HR>: Barra horizontal (Horizontal Rule) con cierto efecto de relieve.

Atributo Función
align= left, right, center Alineación del párrafo
size=número Controla el grosor de la barra
width=número Controla la anchura en pixels
width=porcentaje Controla el porcentaje de pantalla
ocupado
noshade Elimina el efecto tridimensional de

sombra
Enfatización
El otro elemento del que disponemos para resaltar un fragmento de texto es
la utilización de las tipografías en negrilla, itálicas y subrayadas. Su utilización
se ajusta al convenio general de etiqueta de apertura y etiqueta de cierre
limitando el texto al que se aplica el efecto.
Este código... ... da Como resultado

Esta <B>palabra</B> está en Esta palabra está en
<B>negrilla</B> negrilla
Esta <I>palabra</I> está en <I>itálica</I> Esta palabra está en itálica
Esta <U>palabra</U> está Esta palabra esta
<U>subrayada</U> subrayada
JUSTIFICACIÓN DEL TEXTO

La justificación del texto por defecto se hace a la izquierda. Por el momento,
mientras no se generalicen las nuevas especificaciones de la siguiente
versión del lenguaje HTML no tenemos posibilidad de hacer una justificación
completa, por lo que el texto nos quedará siempre "en bandera", esto es sin
alinear en los finales de renglón.
Además de la justificación por defecto podemos también justificar el texto
a partir del centro o a partir de la derecha. Para hacerlo deberemos poner
al principio del párrafo que deseamos justificar la etiqueta de apertura y la
de cierre en el final.
<CENTER> y su correspondiente cierre </CENTER> marcan la justificación

centrada.
<DIV ALIGN=right> y </DIV> delimitan un párrafo justificado a partir del
margen derecho.
ENLACES HIPERTEXTO
Un enlace es una referencia a un documento HTML (página web) o a
cualquier otro objeto (archivo de sonido, gráfico, programa, etc),
expresada por medio de un formato universalmente aceptado. El enlace,
probablemente el elemento más importante del HTML y del WWW, aparece
como una serie de palabras o imágenes resaltadas.
Dentro de una página web pueden existir diferentes tipos de enlaces. Pero
estos se construyen con una sola marca (o mejor dicho un contenedor) que
es la siguiente:
<A></A>: Ancla (Anchor) o delimitador de un enlace hipertexto. El texto o la

imagen incluída en esta marca se resalta con un color distinto, un subrayado
o un borde, y el cursor cambia de aspecto cuando se coloca sobre él. Estos
son los posibles atributos.
Atributo Función
href=“URL” Dirección de destino del enlace. Puede ser un URL absoluto o
relativo al mismo servidor.
href=#<nombre> Dirección de destino de un enlace relativo al mismo
documento.
name=“nombre” Define un índice dentro de un documento.
EL CUERPO DEL DOCUMENTO

<BODY></BODY>: Estas son las marcas que definen el contenido del
documento HTML. Todas las que analicemos en las próximas páginas estarán
incluidas dentro de este contenedor. De momento veamos sus atributos:
Atributo Función
background=“URL” Dirección de la imagen que se usará como
fondo del documento. (H3, N1, M1)
bgcolor=“#rrggbb” Valor RGB del color de fondo. (N1, M1)
bgcolor=nombre de color
Nombre del color usado como fondo. (N2, M1)
bgproperties=fixed La imagen del fondo no se desplazará ni se
multiplicará. (M1)
leftmargin=número Margen del documento en pixels. (M1)
link=“#rrggbb” Valor RGB del color usado en los enlaces no visitados.
(N1, M1)
link=nombre de color Nombre del color usado en el texto. (N2, M1)
text=“#rrggbb” Valor RGB del color usado en el texto. (N1, M1)
text=nombre de color Nombre del color usado en el texto. (N2, M1)
topmargin=número Margen superior en pixels. (M1)
vlink=“#rrggbb” Valor RGB del color usado en los enlaces visitados. (N1,
M1)
vlink=nombre de color Nombre del color usado en los enlaces visitados.

(N2, M1)
alink=“#rrggbb” Valor RGB del color usado en los enlaces activos.
(N1, M2)
alink=nombre de color Nombre del color usado en los enlaces activos.
(N2, M2)
EL FORMATO DEL COLOR

El formato más usado para definir el color es el RGB (Red, Green, Blue) que
se basa en asignar un “peso” o valor a cada uno de los tres componentes
del color: rojo, verde, azul. El código tiene pues el siguiente formato:
#RRGGBB, y los valores de cada componente son números hexadecimales
que van desde los extremos 00 a FF, pasando por niveles intermedios (33, 66,
99, etc). Existen aplicaciones que asignan estos valores automáticamente.
Como ejemplo práctico asignaremos a continuación valores extremos a
cada uno de los tres colores básicos, obteniendo los siguientes códigos de
colores RGB:
Negro: #000000 Rojo: #FF0000 Amarillo: #FFFF00
Blanco: #FFFFFF Verde: #00FF00 Púrpura: #FF00FF
Azul: #0000FF Celeste: #00FFFF
Otra forma alternativa de asignar un color es indicando su nombre. El HTML
3.2 recoge una lista de 16 colores. Estos colores, que tienen su origen en el
estándar soportado por la paleta VGA de Windows, son los siguientes:
AQUA, BLACK, BLUE, FUCHSIA, GRAY, GREEN, LIME, MAROON, NAVY, OLIVE,
PURPLE, RED, SILVER, TEAL, WHITE y YELLOW.
COLOR DE FONDO / IMAGEN DE FONDO

<body bgcolor=“#ccff00”> … </body>
<body backgraund=“*.jpg”> … </body>
COLOR DE UN TEXTO
<font color=“red”> … </font>
<font color=“#33ff99”> … </font>
SISTEMA DE COLOR RGB
LETREROS (<MARQUEE></MARQUEE>)
Si queremos dar mayor dinamismo al texto de la página podemos crear
letreros en desplazamiento. Para ello utilizaremos el delimitador
<MARQUEE></MARQUEE>, que cuenta con los siguientes atributos:

Atributo Función
behavior=scroll, slide, alternate Comportamiento del letrero.
direction=left, right Dirección del desplazamiento.
loop=número Número de veces que se repite la
visualización del letrero.
loop=infinite La visualización del letrero se repetirá
indefinidamente.
scrollamount=número Número de pixels que cambian en cada
una de las fases de visualización.
scrolldelay=número Tiempo (en milisegundos) entre cada una
de las fases de visualización.
hspace=número Anchura de los márgenes horizontales.
vspace=número Anchura de los márgenes verticales.
height=número o porcentaje Altura del elemento.
width=número o porcentaje Anchura del letrero.
align=top, bottom, middle Alineación vertical del letrero.
bgcolor=#rrggbb Valor RGB del color del fondo.
bgcolor=nombre Nombre del color del fondo.
HIPERTEXTO
Incluye
Texto
Sonido
Animación
Imagen
Hipervínculos
Php, XML, ASP
JavaScript, etc.
TEXTO
<h1>…</h1>
<font face=“tahoma”> … </font>
<font size=“5”> … </font>
<font color=“blue”> … </font>
<b> … </b>
<br>
<p>
<li>
<marquee> … </marque>
<marquee behavior=“alternate”> … </marque>
SONIDO
<bgsound src=“*.*”>
<bgsound src=“*.*” loop=“3”>
<bgsound src=“*.*” loop=“infinite”>
“Se recomienda digitar el comando en la primera línea de código”
Formatos usados *.mid *.mp3 *.Wav
IMAGEN
<img src=“*.*”>
Formatos *.gif *.jpg
“Se recomienda el gif como imágenes y los jpg para fotos”
HIPERVINCULO
<a href=“http://www.gmail.com”>Gmail</A>
<a href=“http://mision”>Nuestra Misión</A>
<a href=“http://www.gmail.com” target=“_blank”> Visite Gmail </A> DESDE
UNA IMAGEN
<a href=“http://www.gmail.com”>
<img src=“boton_gmail.gif”></A>
<a href=“http://www.gmail.com”>
<img src=“boton_gmail.gif” alt=“gmail”></A>
CÓDIGO EMBEBIDO EN HTML

php javascript asp xml,
etc <html> <script
language=“javaScript”>
</script>
</html>
FORMATOS DE IMÁGENES
Existen varios formatos gráficos utilizables para el diseño de documentos
HTML. Los más comunes son: GIF, JPEG y sus variantes (JPG, BMP, XMP, XBM).
GIF (Graphics Interchange Format), el más generalizado, es un formato
comercial (creado por UNISYS para COMPUSERVE) y, por tanto, al no ser de
uso público, de incierto futuro como estándar. Está basado en un
mecanismo de compresión (LZW) muy sencillo, y utiliza como máximo 256
colores por pixel. Pero puede simular por aproximación (dithering) otros
colores distintos de la paleta, combinando los valores de los pixels
colindantes. Por último, permite la creación de imágenes con fondo
transparente (sustituyendo uno de los colores por una máscara especial que
muestra el fondo tras la imagen), la inclusión de extensiones multimedia
(filmación o sonido -MIDI-) y la visualización gradual de la propia imagen. Es
el formato apropiado para iconos o imágenes pequeñas con pocos colores.
JPEG (Joint Photographic Experts Group), sí es de dominio público, pero no
todos los navegadores lo reconocen. Es un formato con mayor nivel de
compresión que el anterior (los ficheros serán más pequeños pero en general
tardan más en cargarse). Utiliza 16´7 millones de colores (proporcionando
imágenes más fieles al original) y también permite la visualización gradual
de la imagen. Es el formato apropiado para fotos e imágenes de calidad.
La marca <IMG> es la que se utiliza para incluir una imagen en un
documento HTML. Es una marca simple con un amplio abanico de atributos:
Atributo Función
src=“URL” Dirección de la imagen. Es el único
atributo obligatorio.
lowsrc=“URL” Dirección de un fichero con la misma
imagen indicada en src pero a baja resolución. (N1)
align=top, middle, bottom Alineación vertical de la imagen con

respecto a la línea de texto en la que se encuentra.
align=texttop, absmiddle, absbottom, Alineación del texto con respecto
a una baseline(=bottom) imagen flotante. (N1, M1)
align=left, right Alineación horizontal de la imagen. La inclusión
de este atributo da lugar a una imagen flotante. (H3, N1, M1)
alt=“texto” Texto que se mostrará como alternativa a la
imagen cuando ésta no se visualice.
width=anchura Anchura de la imagen. (H3, N1, M1)
height=altura Altura de la imagen. (H3, N1, M1)
hspace=tamaño Anchura del margen horizontal de la imagen.
(N1, M1)
vspace=tamaño Margen vertical de la imagen.
(N2, M1)
border=tamaño Grosor del borde de la imagen. (N1,
M1)
Otros atributos para esta marca se describirán más adelante cuando

veamos las formas de construir Mapas Sensibles, y la inclusión de filmaciones
on-line en las páginas web con las Extensiones de Microsoft.
Por último, hay que indicar que en el HTML 3.0 se incluye el delimitador
<FIG></FIG> que define imágenes flotantes (rodeadas de texto). El
problema es que aún no es soportado por ninguno de los navegadores
disponibles.
MARCAS Y ATRIBUTOS DE TABLAS
Elabora diseños de tablas aplicando códigos y etiquetas HTML.

La creación de Tablas se contempló por primera vez en el HTML 2.0. Hasta
entonces, la única manera que existía para tabular cosas en los documentos
de hipertexto era a través de las marcas <PRE></PRE>. Pero los resultados
dejaban mucho que desear.
Las Tablas, por tanto, son elementos creados esencialmente para mejorar
el aspecto de las páginas web. Permiten la inclusión de enlaces e imágenes
y la posibilidad de crear notas al margen, distribuir el texto en columnas o
diseñar formularios.
Las marcas que hacen posible las Tablas son las cinco siguientes:
<TABLE></TABLE>: Delimitador de la Tabla.

<TR></TR> (Table Row): Delimitador de Filas.
<TD></TD> (Table Data): Delimitador de Celdas.
<TH></TH> (Table Header): Delimitador de Cabeceras.
<CAPTION></CAPTION>: Delimitador del Título de la Tabla.
<TABLE></TABLE>: Estas dos marcas delimitan los elementos de una Tabla. Es

posible crear tablas dentro de otras tablas.
Atributo Función
align=left, right, center Alineación del texto de la tabla. (H3, M1)
border La tabla presenta los bordes. (H3, N1, M1)
border=número Control del grosor del borde. (N1)
cellspacing=número Control del espacio insertado entre dos celdas dentro
de una tabla. Por defecto es 2. (N1)
cellpadding=número Control del espacio entre el borde de la
celda y su contenido. Por defecto es 1. (N1)
width=“número o porcentaje” Control sobre el ancho de la tabla, en
números absolutos (pixels) o relativos (porcentaje sobre el ancho del
documento) (N1)
bgcolor=“#rrggbb” Color de fondo de la tabla. (N3, M2)
El navegador Internet Explorer de MICROSOFT cuenta además con una serie

de atributos referentes al color de la tabla, y que veremos más adelante.
<TR></TR>: Delimitador de una fila. Habrá tantas filas como delimitadores TR.
Los atributos especificados aquí se convierten en los atributos por defecto
para todas las celdas de la fila.
Atributo Función
align=left, right, center Alineación del texto de la celda. (H3, N1,
M1) valign=top, middle, bottom, baseline Alineación vertical del texto.
Con el valor baseline se especifica que todas las celdas de la fila se
alinearán verticalmente con respecto a la misma base. (H3, N1, M1)
bgcolor=“#rrggbb” Color de fondo de la fila. (N3)
<TD></TD>: Delimitador de una celda. Sólo podrá aparecer dentro de los

delimitadores TR. Por defecto estará alineados a la izquierda
(align=left) y en el medio (valign=middle).
Atributo Función
M1)
valign=top, middle, bottom, baseline Alineación vertical del texto. Con el
valor baseline se especifica que todas las celdas de la fila se alinearán
verticalmente con respecto a la misma base. (H3, N1, M1)
nowrap Las líneas dentro de la celda no se romperán
para ajustarse al ancho de la misma. (H3, N1)
colspan=número Especifica el número de columnas que
ocupa la celda. El valor por defecto es 1. (H3, N1)
rowspan=número Especifica el número de filas que ocupa
la celda. El valor por defecto es 1. (H3, N1)
width=número o porcentaje Control sobre el ancho de la celda, en
números absolutos (pixels) o relativos (porcentaje sobre el ancho de la
tabla). (N1)
bgcolor=“#rrggbb” Color de fondo de la celda. (N3)
<TH></TH>: Delimitador de una cabecera. Es igual que el delimitador TD pero

centrado (align=center) y en negrita (<B></B>).
Atributo Función
M1)
valign=top, middle, bottom, baseline Alineación vertical del texto. Con el
valor baseline se especifica que todas las celdas de la fila se alinearán
verticalmente con respecto a la misma base. (H3, N1, M1)
nowrap Las líneas dentro de la celda no se romperán
para ajustarse al ancho de la misma. (H3, N1)
colspan=número Especifica el número de columnas que
ocupa la celda. El valor por defecto es 1. (H3, N1)
rowspan=número Especifica el número de filas que ocupa
la celda. El valor por defecto es 1. (H3, N1)
width=número o porcentaje Control sobre el ancho de la celda, en
números absolutos (pixels) o relativos (porcentaje sobre el ancho de la
tabla). (N1)
bgcolor=“#rrggbb” Color de fondo de la cabecera. (N3)
TABLAS COLOREADAS (<TABLE></TABLE>):
A los atributos explicados anteriormente para hacer tablas (es decir, para
el delimitador <TABLE></TABLE>) MICROSOFT añade los siguientes:
Atributo Función
bgcolor=#rrggbb Valor RGB del color de fondo.
bgcolor=nombre Nombre del color de fondo.
bordercolor=#rrggbb Valor RGB del color del borde.
bordercolor=nombre Nombre del color del borde.
bordercolorlight=#rrggbb Valor RGB del color claro del borde en
la Visualización 3D. bordercolorlight=nombre Nombre
del color claro del borde en la Visualización 3D.
bordercolordark=#rrggbb Valor RGB del color oscuro del borde en
la Visualización 3D. bordercolordark=nombre Nombre
del color oscuro del borde en la Visualización 3D.
valign=top, middle, bottom Alineación vertical del texto de la tabla.
<CAPTION></CAPTION>: Delimitador del título de la tabla.

Atributo Función
align=left, right, center Alineación del título de la tabla. (H3, N1,
M1) align=top, bottom Alineación vertical del título. (N1,
M1)
MARCAS Y ELEMENTOS DE LOS FORMULARIOS
Los Formularios (forms) se utilizan para la recepción y envío de datos desde

una página Web. Dejando de lado aspectos más complejos como la
programación de las aplicaciones (CGI), su instalación en el servidor y su
manera de procesar la información, nos vamos a centrar exclusivamente en
el diseño de los Formularios, cuyas marcas son las siguientes:
<FORM></FORM>: Delimitador de un formulario.
<INPUT>: Control de la entrada de datos.
<SELECT></SELECT>: Delimitador de una lista desplegable o de
selección.
<OPTION>: Componente de una lista desplegable o de selección.
<TEXTAREA></TEXTAREA>: Delimitador de un campo amplio de texto.
<FORM></FORM>: Estas marcas delimitan un formulario. Entre estas dos

puede aparecer cualquier otra marca excepto otro <FORM>. Es decir,
puede haber varios formularios en una página Web, pero nunca un
formulario dentro de otro. Por otra parte, hay que tener en cuenta que los
formularios no se diferencian visualmente del resto de la página. Por ello, si
se quiere diferenciar, una posibilidad es colocar una marca <HR> antes y
después del formulario. Estos son sus atributos:
Atributo Función
action=“URL” Dirección URL del programa que se ejecutará
para procesar el formulario.
method=get, post Método empleado para enviar y codificar
la información introducida por el usuario.
El método (METHOD) utilizado dependerá de la forma en que trabaja el
servidor:
GET es el método por defecto, y hace que el contenido del formulario sea
añadido a la dirección URL.
POST es el método que suele recomendarse, y hace que el contenido del
formulario sea enviado al servidor independientemente de la dirección URL.
Junto a este atributo se puede añadir otro, denominado ENCTYPE (encoding

type), que especifica el tipo de codificación del contenido del formulario.
<INPUT>: Esta marca se utiliza para definir un elemento de entrada de datos
dentro de un formulario. En algunos aspectos su tratamiento es semejante a
la marca <IMG>. Sus atributos son:
Atributo Función
type=“text, password, checkbox, Tipo de entrada de datos.
radio, submit, reset”
name=“nombre” Nombre del campo de entrada
de datos.
value=“valor” Valor que devuelve el control.
chequed[={true|false}] Indica si el elemento está o no inicialmente
seleccionado.
size=“caracteres” Anchura de la ventana del control en
caracteres.
size=“ancho, alto” Anchura y altura de la ventana del control.
maxlength=“ancho” Máximo número de caracteres permitidos
para la entrada de datos.
No todos estos atributos son compatibles entre sí. Vamos a detenernos

brevemente en ellos:
TYPE. Los distintos tipos de entrada de datos son los siguientes:
A. CAMPOS DE ENTRADA DE TEXTO:
- Text. Campo de entrada de una línea de texto. Es la opción por
defecto.
- Password. Es un tipo de campo de entrada de texto en el que cada
uno de los caracteres (letras y/o números) son representados como
asteriscos.
Ejemplo:
<INPUT type=“text” name=“campo1” value=“texto:” size=“20”
maxlength=“5”>
B. CASILLEROS DE SELECCIÓN:
- Checkbox. Casillero de selección en forma de cuadrado. Se utiliza
con variables que pueden tomar dos únicos valores. Por tanto, puede estar
seleccionado (on) o ignorado (off).
- Radio. Casillero de selección en forma de círculo. Se utilizan cuando

una misma variable está asociada a varios elementos, cada uno con un
valor distinto. Por tanto, cada casillero puede estar seleccionado (on) o
ignorado (off).
Ejemplo:
<INPUT type=“checkbox” name=“pregunta” value=1 checked>

C. BOTONES DE ACCIÓN:
- Submit. Es un botón que hace que los datos introducidos en el
formulario sean enviados al servidor para su procesamiento.
- Reset. Es otro botón que borra todos los datos introducidos haciendo
que el formulario vuelva a aparecer con sus datos originales.
Ejemplo:
<INPUT type=“submit” value=“ENVIAR DATOS”>
D. OTROS TIPOS DE ATRIBUTOS:

- Hidden. Es un almacén interno de datos. Es decir, el navegador no
muestra su contenido (recogido en el atributo value) pero sí se lo transmite
al programa CGI.
Ejemplo:
<INPUT type=“hidden” name=“browser” value=“arena”>
- Image. Es un tipo especial que funciona de forma parecida a los
Mapas Sensibles Servidor y especialmente útil para la construcción de barras
de herramientas divididas en varias imágenes. En lugar de un formulario se
visualiza una imagen cuya ubicación se indica en el atributo src, y que
puede alinearse con el atributo align.
Ejemplo:
<INPUT type=“image” src=“botones.gif” name=“barra” align=right>
NAME. Es el nombre simbólico del campo de entrada de datos. Debe
aparecer junto con el atributo Type, salvo que este sea Submit o Reset,
VALUE. Si se utiliza para un campo de entrada de texto (text o password)
especifica el contenido por defecto del campo. Si se utiliza para casilleros
de selección (checkbox o radio) especifica el valor del mismo cuando se
selecciona (por defecto es “on”). Si se utiliza para botones de acción (submit
o reset) especifica el nombre que aparecerá con los mismos.
CHECKED. Sólo se utiliza para indicar si los casilleros de selección (checkbox
o radio) están seleccionados de antemano o no.
SIZE. Se usa para indicar el tamaño de los campos de entrada de texto (text
o password). Su valor por defecto es 20. Se pueden conseguir campos de
entrada de texto de varias líneas con size=ancho,alto, pero es más
apropiado utilizar el delimitador <TEXTAREA></TEXTAREA>, como veremos
más adelante.
MAXLENGTH. Este atributo sólo es apropiado para limitar el número de
caracteres en campos de entrada de texto (text o password) de una sola
línea. Si no aparece, por defecto es ilimitado.
<SELECT></SELECT>: Estas marcas delimitan una lista desplegable o de
selección, que suelen tener barras de desplazamiento (scrollbar). En un
formulario, es decir, entre las marcas <FORM></FORM>, puede haber tantas
listas desplegables como se quiera. Además, pueden entremezclarse texto
u otras marcas (pero no otro formulario, como ya hemos dicho).
Atributo Función
name=“nombre” Nombre de la variable.
size=número Determina el número de elementos visibles de la ventana
de visualización (y, por tanto, su amplitud en líneas). Si el tamaño es mayor
que 1 se fuerza la visualización de una lista de selección.
multiple Permite seleccionar varios elementos. Fuerza parición de una
lista de selección independientemente del valor que tome el atributo size.
Entre las marcas que delimitan una lista de selección sólo se permite otra,
<OPTION>, que es la que le corresponde a cada componente de la lista,
seguida del texto que se desee añadir.
Atributo Función
selected Indica que la opción está seleccionada
inicialmente. Pueden ser más de una.
value=“valor” Valor devuelto por la opción.
<TEXTAREA></TEXTAREA>: Estas marcas delimitan un campo amplio de texto,

es decir, con varias líneas y columnas. Es, por tanto, una variante del tipo
texto (type=text) de la marca INPUT. Puede introducirse todo el texto que se
desee, que será el texto por defecto que aparezca en el campo de entrada.
La barra de desplazamiento (scrollbar) aparece automáticamente.
Atributo Función
name=“nombre” Nombre de la variable.
rows=número Número de filas (la altura o el número de caracteres
observados de forma vertical).
cols=número Número de columnas (el ancho o número de caracteres

observados de forma horizontal).
SUBVENTANAS, MARCOS O FRAMES

Fue una de las extensiones más discutidas de NETSCAPE. Está operativa
desde la versión 2.0 de su Navigator y consiste en la posibilidad de abrir
varios marcos independientes (frames) con otros tantos documentos en
cada uno. El HTML 3.2 y la más reciente versión de su principal rival, el Internet
Explorer 3.0 de MICROSOFT, ya incluyen todas estas marcas:
<FRAMESET></FRAMESET>: Delimitador de un documento con marcos.
<FRAME>: Define el contenido de un marco simple.
<NOFRAMES></NOFRAMES>: Contenedor de documentos alternativos sin
marcos.
<FRAMESET></FRAMESET>: Estas dos marcas delimitan un documento con
frames. Entre ellas sólo deben aparecer las de otro subdocumento con
marcos (<FRAMESET>), la marca <FRAME> y las de <NOFRAMES> que
veremos a continuación. Su principal característica es que no tiene cuerpo
(sustituye a las marcas <BODY></BODY>) y, por tanto, ninguno de los
atributos de la marca <BODY> podrán acompañar a la marca <FRAMESET>
que cuenta con dos atributos propios:
Atributo Función
rows=“altura filas” Especificación del número y disposición de las
filas.
cols=“ancho columnas” Especificación del número y disposición de las
columnas.
border=número Ancho del borde. Por defecto es 5. (N3)
bordercolor=“#rrggbb” Color de los bordes del marco. (N3)
frameborder=“yes”/“no” Control del relieve del borde. Por defecto
es en
3D (“yes”). (N3, M3)
La formulación más sencilla para estos dos atributos es la de separar
porcentajes con comas. Por ejemplo, <FRAMESET ROWS=“20%, 60%, 20%”> o
<FRAMESET COLS=“40%, 60%”>.
<FRAME>: Esta es una marca única (no un delimitador) que define el

contenido de un marco simple. Tiene los siguientes atributos:
Atributo Función
src=“URL” Dirección del documento contenido en el
marco. Sin este atributo aparecería un marco vacío. Es el único obligatorio.
name=“nombre” Nombre asignado al marco para que se
pueda hacer referencia a él desde otro lugar.
marginwidth=número (ancho) Control de los márgenes izquierdo y
derecho.
marginheight=número (altura) Control de los márgenes superior e
inferior.
scrolling=yes, no, auto Indica si tendrá o no barra de
desplazamiento. El valor por defecto es auto, es decir, el browser se encarga
de poner dicha barra cuando lo crea necesario.
Noresize No se permite modificar el tamaño del
marco.
Bordercolor=“#rrggbb” Color de los bordes del marco. (N3)
frameborder=“yes”/“no” Control del relieve del borde. (N3, M3)
<NOFRAMES></NOFRAMES>: Delimitador de información alternativa para

browsers que no utilicen frames.
MÚLTIPLES VENTANAS. EL ATRIBUTO TARGET:
Con los frames, NETSCAPE introdujo la posibilidad de abrir varias

subventanas independientes en la ventana del navegador. Sin embargo se
corría el riesgo de enlazar desde un marco con otras páginas con marcos
propios, quedando reducidas a una pequeña porción de la pantalla. Con
el atributo target, aparece la posibilidad de abrir mútiples ventanas (no
subventanas), reforzando así la utilidad de los frames.
Este atributo tiene el formato: target=“nombre”, y puede complementar a
distintas marcas como se indica a continuación:
En un enlace <A>, sin este atributo el documento se cargar en la ventana
donde se pulsó el enlace. Pero si incluímos el atributo target forzamos al
documento a que se cargue en otra ventana. La estructura sería la
siguiente: <A HREF=“url” TARGET=“nombre”>Enlace</A>.
La marca <BASE> indica por defecto, entre otras cosas, que todos los
documentos se cargan en la ventana actual. Con el atributo target se
establece una nueva ventana por defecto donde se cargarán todos los
enlaces de la página (a menos que en alguno de ellos se utilice este atributo
para especificar otra ventana). La marca quedaría así: <BASE
TARGET=“nombre”>.
Cuando más adelante describamos los Mapas Cliente, veremos que
constan de una serie de areas que sirven de enlace con otros documentos.
El atributo target servirá, igual que en el primer caso, para especificar la
ventana donde se cargará aquel. La marca y sus correspondientes atributos
tendrían el siguiente formato: <AREA SHAPE=“tipo” COORDS=“x,y,...”
HREF=“url” TARGET=“nombre”>
El mismo efecto podremos observar con los Formularios, quedando la marca
de la siguiente forma: <FORM ACTION=“url” TARGET=“nombre”>.
El nombre que acompaña al atributo se corresponde con una ventana que
no tiene porqué existir de antemano. Tan solo hay una restricción: que dicho
nombre comience con un caracter alfa-numérico. No obstante existen una
serie de nombres que comienzan por el caracter de subrayado (“_”). Estos
nombres tienen un significado especial, como se indica a continuación:
target=“_blank”. Hace que el enlace cargue el documento en una nueva
ventana independiente (sin nombre). Es como si se abriera otro navegador.
target=“_self”. Este es el valor por defecto, es decir, carga un documento en
la misma ventana del enlace. Se suele usar en combinación con la marca
<BASE> como acabamos de ver.
target=“_top”. Hace que el enlace se cargue en una ventana completa. Si
ya lo está tendrá el mismo efecto que target=“_self”. Es especialmente útil
con los frames.
target=“_parent”. Hace que el enlace cargue el documento en el frame
inmediatamente superior. En caso de que el enlace no esté en un segundo
frame, este atributo funciona igual que target=“_top”.
CONCEPTOS TEÓRICOS CSC III
HOJAS DE ESTILO (CSS)

CSS son las siglas de Cascade Style Sheet que traducido significa hojas
de estilo en cascada.
Las hojas de estilo es una tecnología que nos permite controlar la
apariencia de una página web.
En un principio, los sitos web se concentraban más en su contenido que
en su presentación.
HTML no pone mucha atención en la apariencia del documento. CSS
describe como los elementos dispuestos en la página son presentados al
usuario. CSS es un gran avance que complementa el HTML y la Web en
general.
Con CSS podemos especificar estilos como el tamaño, fuentes, color,
espaciado entre textos y recuadros así como el lugar donde disponer
texto e imágenes en la página.
El lenguaje de las Hojas de Estilo está definido en la Especificaciones
CSS1 y CSS2 del World Wide Web Consortium (W3C), es un estándar
aceptado por toda la industria relacionada con la Web, o por lo menos,
gran parte de navegadores.
Podemos asociar las reglas de estilo a las marcas HTML de tres maneras:
directamente a la marca, en el head de la página o agrupar las reglas
de estilo en un archivo independiente con extensión *.css.
DEFINICION DE ESTILOS A NIVEL DE MARCA
Es la forma más fácil pero menos recomendada para aplicación de un

estilo a una marca HTML. Se define en la propiedad style los estilos a
definir para dicha marca.
Es común definir estilos directamente en las marcas HTML cuando
estamos diseñando la página y posteriormente trasladar el estilo creado
a una hoja de estilos.
La sintaxis para definir un estilo a una marca HTML es la siguiente:

<html>
<head>
</head>
<body>
<h1style="color:#ff0000;background-color:#ffff00"> Este mensaje es de
color rojo sobre fondo amarillo.
</h1>
</body>
</html>
Por defecto, todo navegador tiene un estilo definido para cada marca
HTML, lo que hacemos con la propiedad style es redefinir el estilo por
defecto. En este problema definimos que la marca h1defina como color
de texto el rojo y como color de fondo el amarillo:
COLEGIO LEON DE GREIFF

Html – CSS I - Pág. 2
Docente: RUBEN DARIO DIAZ H.
RUDADEN7@YAHOO.ES
<h1 style="color:#ff0000;background-color:#ffff00"> Este mensaje es
de color rojo sobre fondo amarillo. </h1>
Veremos más adelante que hay muchas propiedades en CSS. En este

primer ejemplo inicializamos las propiedades color (define el color del
texto) y background-color (define el color de fondo del texto).
Cada vez que inicializamos una propiedad debemos separarla de la
siguiente por punto y coma.
Cuando definimos estilos directamente en las marcas HTML, tenemos
que tener en cuenta que el estilo se aplica únicamente a la marca
donde inicializamos la propiedad style, es decir, si tenemos dos
secciones h1, deberemos definir la propiedad style para cada marca:
<h1 style="color:#ff0000;background-color:#ffff00">
Primer título
</h1>
<h1 style="color:#ff0000;background-color:#ffff00">
Segundo título
</h1>
Como podemos observar, más allá que los dos estilos son exactamente
iguales, estamos obligados a definirlos para cada marca HTML.
DEFINICION DE ESTILOS A NIVEL DE PÁGINA
Es la definición de estilos en una sección de la cabecera de la página

HTML donde podemos definir estilos que se aplican a las distintas marcas
HTML de la página.
El problema del concepto anterior donde debíamos crear un estilo
similar para la marca h1 se puede resolver en forma más adecuada
empleando la definición de estilos a nivel de página.
Problema: Mostrar dos títulos con texto de color rojo sobre fondo amarillo.
<html>
<head>
<title>Problema</title>
<style type="text/css">
h1 {color:#ff0000;background-color:#ffff00}
</style>
</head>
<body>
<h1>Primer título</h1>
<h1>Segundo título</h1>
</body>
rudaden7@yahoo.es
</html>
Podemos observar que en la cabecera de la página definimos la
sección:
h1 {color:#ff0000;background-color:#ffff00}
</style>
Debe estar encerrada por la marca style. En este ejemplo indicamos al
navegador que en todos los lugares de esta página donde se utilice la
marca h1 debe aplicar como estilo de color de texto el rojo y fondo el
amarillo. Podemos observar que es mucho más eficiente que definir los
estilos directamente sobre las marcas HTML.
Podemos definir estilos para muchas marcas en la sección style:

<html>
<head>
<title>Problema</titl
e> <style
type="text/css">> h1
{color:#ff0000} h2
{color:#00ff00} h3
{color:#0000ff}
</style>
</head>
<body>
<h1>rojo</h1>
<h2>verde</h2>
<h3>azul</h3>
</body>
</html>
PROPIEDADES RELACIONADAS A FUENTES
Contamos con una serie de propiedades relacionadas a fuentes:

font-family
font-size font-
style font-
weight font-
variant
Podemos inicializar algunas o todas las propiedades relacionadas a
fuentes, un ejemplo:
rudaden7@yahoo.es
<html>
<head>
h1 { font-family:times new roman; font-size:30px; font-style:italic;
font-weight:bold; }
h2{ font-family:verdana; font-size:20px; }

</style>
</head>
<body>
<h1>Titulo de nivel 1</h1>
<h2>Titulo de nivel 2</h2>
</body>
</html>
Como podemos observar, hemos definido dos reglas de estilos para las
marcas h1 y h2, eso significa que el navegador utilizará esas reglas de
fuentes para todas las partes de la página que se utilicen dichas marcas
HTML. La primera regla definida para la marca h1 es:
h1 { font-family:times new roman; font-size:30px; font-style:italic; font-
weight:bold; }
Recordemos que para definir la regla de estilo debemos indicar el
nombre de la marca HTML a la que definiremos el estilo y luego, entre
paréntesis, todas las propiedades y sus valores separados por punto y
coma.
La primera propiedad inicializada es font-family, algunas de las fuentes
más comunes que puede acceder el navegador son:
Arial
Arial Black
Arial Narrow
Courier New
rudaden7@yahoo.es
Georgia
Impact
Tahoma
Times New Roman
Verdana
En caso que la fuente no esté disponible el navegador selecciona el

estilo por defecto para esa marca HTML.
Podemos definir varias fuentes por si acaso alguna no se encuentra

disponible para el navegador, esto lo hacemos separando por coma
todas las fuentes (se eligen de izquierda a derecha):
font-family: verdana, arial, georgia; La segunda propiedad inicializada
es fontsize, hay varias medidas para indicar el tamaño de la fuente
(veremos más adelante otros sistemas de medida), en nuestro caso
indicamos en píxeles:
font-size:30px;
La tercera propiedad es font-style, que puede tener los siguientes
valores: Normal – italic - oblique
La última propiedad es font-weight, pudiendo tomar los siguientes
valores: Normal – bold – bolder - lighter
100 200 300 400 500 600 700 800 900
Esta propiedad indica el peso de la fuente (mientras tenga un valor

mayor los caracteres serán más rellenos).
La segunda regla define sólo dos propiedades relacionadas a la fuente:
rudaden7@yahoo.es
h2 {font-family:verdana; font-size:20px; }
Las propiedades que no se inicializan quedan como responsabilidad al
navegador, quien elegirá los valores correspondientes.
Existe una última propiedad no utilizada en este ejemplo que es font-
variant que puede asumir estos dos valores: small-caps Normal
Define si la fuente se muestra en mayúsculas tipo normal o pequeñas.
AGRUPACION DE VARIAS MARCAS HTML CON UNA MISMA REGLA

DE ESTILO
Esta característica nos permite ahorrar la escritura de reglas duplicadas

para diferentes marcas HTML.
Supongamos que queremos la misma fuente y color para las marcas

h1,h2 y h3 luego podemos Implementarlo de la siguiente manera:
<html>
<head>
<style type="text/css"> h1,h2,h3 { font-family:verdana; color:#0000ff; }
</style>
</head>
<body>
<h1>Título de nivel 1</h1>
</body>
</html>
Es decir, separamos por coma todas las marcas a las que se aplicará la
misma regla de estilo:
h1,h2,h3 {
rudaden7@yahoo.es
font-family:verdana; color:#0000ff; }
DEFINICION DE VARIAS REGLAS PARA UNA MISMA MARCA HTML
En algunas circunstancias, es necesario desglosar la inicialización de

propiedades en distintas reglas.
Supongamos que queremos todas las cabeceras con la misma fuente,
pero tamaños de fuente distinta, luego podemos implementarlo de la
siguiente manera:
<html>
<head>
<title>Problema</title> <style type="text/css">
h1,h2,h3,h4,h5,h6 { font-family:Verdana; }
h1 { font-size:40px; }
h5 { font-size:15px;}
</style>
</head>
<body>
rudaden7@yahoo.es
</body>
</html>
Es decir, podemos inicializar un conjunto de marcas HTML con una serie

de propiedades de estilo comunes. Luego agregamos en forma
individual las propiedades no comunes a dichas marcas:
h1,h2,h3,h4,h5,h6 { font-family:Verdana; }
Es decir, a la marca h1 realmente le hemos definido 2 propiedades:
font-family y font-size. Lo mismo para las otras marcas HTML.
PROPIEDADES RELACIONADAS AL TEXTO
A una de estas propiedades ya la vimos cuando comenzamos con los

primeros conceptos: color, nos permite definir el color del texto, lo
podemos indicar por medio de tres valores hexadecimales que indican
la mezcla de rojo, verde y azul.
Por ejemplo:
Si queremos rojo puro debemos indicar:
color:#ff0000;
Si queremos verde puro:
color:#00ff00
Si queremos azul puro: color:#0000ff
Luego si queremos amarillo debemos mezclar el rojo y el verde:

color:#ffff00
Hay muchos programas que nos permiten seleccionar un color y nos

descomponen dicho valor en las proporciones de rojo, verde y azul.
Otra forma de indicar el color, si tenemos los valores en decimal, es por
medio de la siguiente sintaxis:
Fundación Centro Colombiano de Estudios Profesionales
rudaden7@yahoo.es
color:rgb(255,0,0);
Es decir, por medio de la función rgb (red,green,blue), indicamos la
cantidad de rojo, verde y azul en formato decimal.
La segunda propiedad relacionada al texto es text-align, que puede
tomar alguno de estos cuatro valores:
left
right
center
justify
Si especificamos: text-align:center;
El texto aparecerá centrado. Si queremos justificar a derecha,
emplearemos el valor right y si queremos a la izquierda, el valor será left.
La tercera propiedad relacionada al texto que podemos emplear es
textdecoration que nos permite entre otras cosas que aparezca
subrayado el texto, tachado o una línea en la parte superior, los valores
posibles de esta propiedad son: none underline overline line-through
Como ejemplo, definiremos estilos relacionados al texto para las marcas
de cabecera h1,h2 y h3:
<head>
h1 { color:#ff0000; text-align:left; text-decoration:underline; }
h2 { color:#dd0000; text-align:center; text-decoration:underline; }
h3 { color:#aa0000; }

rudaden7@yahoo.es
text-align:right;
text-decoration:underline;
}
</style>
</head>
<body>
<h1>Título de nivel 1.<h1>
</body>
</html>
Es decir, para los títulos de nivel 1 tenemos la regla:
h1 { color:#ff0000; text-align:left; text-decoration:underline; }
Es decir, color de texto rojo intenso, el texto debe aparecer de izquierda
a derecha y subrayado.
Luego para la marca h2 tenemos:
h2 { color:#dd0000; text-align:center; text-decoration:underline; }
El color sigue siendo rojo pero un poco más oscuro, el texto debe
aparecer centrado y subrayado. y por último:
h3 { color:#aa0000; text-align:right; text-decoration:underline; }
Para los títulos de nivel tres, el texto es rojo más oscuro, alineado a
derecha y subrayado.
OTRAS PROPIEDADES RELACIONADAS AL TEXTO
Vimos en el concepto anterior las propiedades:

color
COLEGIO LEON D EGREIFF
rudaden7@yahoo.es
text-align text-decoration
Ahora veremos el objetivo de las siguientes propiedades que nos
faltan: letter-spacing word-spacing text-indent text-transform
La propiedad letter-spacing y word-spacing permite indicar el espacio
que debe haber entre los caracteres y entre las palabras.
La propiedad text-indent, indenta la primera línea de un texto. A partir

de la segunda línea, el texto aparece sin indentación. Podemos indicar
un valor negativo con lo que la indentación es hacia la izquierda.
Por último, la propiedad text-transform puede inicializarse con alguno de
los siguientes valores: none - capitalize - lowercase - uppercase
Cada uno de estos valores transforman el texto como sigue:
capitalize: Dispone en mayúsculas el primer carácter de cada
palabra. lowercase: Convierte a minúsculas todas las letras del
texto. uppercase: Convierte a mayúsculas todas las letras del
texto.
none: No provoca cambios en el texto.
El siguiente ejemplo define reglas para las marcas h1 y p:
<html>
<head>
<style
type="text/css">
h1 { letter-spacing:10px; word-spacing:30px; text-transform:capitalize; }
p { text-indent:20px; }
</style>
COLEGIO LEON D EGREIFF
rudaden7@yahoo.es
</head>
<body>
<h1>Este es un título de nivel 1</h1>
<p>Todo el texto siguiente se encuentra encerrada en la marca de
párrafo y con el objetivo de ver el efecto de la propiedad text-
indent. La propiedad text-indent podemos inicializarla con un valor
positivo, como es el caso actual o podemos inicializarla con un
valor negativo lo que provocará que el texto de la primera línea del
párrafo comience en una columna inferior al de todo el bloque.
</p>
</body>
</html>
La cabecera de nivel uno, tiene la siguiente regla:
h1 { letter-spacing:10px; word-spacing:30px; text-transform:capitalize; }
Es decir que las letras deben tener una separación de 10 pixeles, las
palabras deben estar separadas por 30 pixeles y por último deben
disponerse en mayúsculas la primera letra de cada palabra.
Para la marca p tenemos la siguiente
regla: p { text-indent:20px; }
Es decir, la primera línea del párrafo deberá imprimirse 20 píxeles a la
derecha donde normalmente debería aparecer.
DEFINICION DE HOJAS DE ESTILO EN UN ARCHIVO EXTERNO
Hasta ahora hemos visto la definición de estilos a nivel de marca HTML y

la definición de estilos a nivel de página. Dijimos que la primera forma es
muy poco recomendada y la segunda es utilizada cuando queremos
definir estilos que serán empleados sólo por esa página.
Ahora veremos que la metodología más empleada es la definición de
una hoja de estilo en un archivo separado que deberá tener la extensión
css.
Este archivo contendrá las reglas de estilo (igual como las hemos visto
hasta ahora) pero estarán separadas del archivo HTML.
La ventaja fundamental es que con esto podemos aplicar las mismas
reglas de estilo a parte o a todas las páginas del sitio web. Veremos que
esto será muy provechoso cuando necesitemos hacer cambios de estilo
(cambiando las reglas de estilo de este archivo estaremos cambiando
la apariencia de múltiples páginas del sitio).
También tiene como ventaja que al programador le resulta más
ordenado tener lo referente a HTML en un archivo y las reglas de estilo
en un archivo aparte.
Otra ventaja es que cuando un navegador solicita una página, se le
envía el archivo HTML y el archivo CSS, quedando guardado este último
archivo en la caché de la computadora, con lo cual, en las sucesivas
páginas que requieran el mismo archivo de estilos, ese mismo archivo se
rescata de la caché y no requiere que el servidor web se lo reenvíe
(ahorrando tiempo de transferencia). Ahora veremos la primera página
HTML que tiene asociada una hoja de estilo en un archivo externo.
El archivo HTML es (pagina1.html):

<html>
<head>
<link rel="StyleSheet" href="estilos.css" type="text/css">
</head>
<body>
<h1>Definición de hojas de estilo en un archivo externo.</h1>
<p>
Hasta ahora hemos visto la definición de estilos a nivel de marca HTML y

la definición de estilos a nivel de página. Dijimos que la primera forma es
muy poco recomendada y la segunda es utilizada cuando queremos
definir estilos que serán empleados solo por esa página.
Ahora veremos que la metodología más empleada es la definición de

una hoja de estilo en un archivo separado que deberá tener la extensión
css.
rudaden7@yahoo.es
</p>
</body>
</html>
El archivo que tiene las reglas de estilo es (estilos.css):
body { background-color:#eafadd; }
h1 { color:#0000cc; font-family:times new roman; font-size:25px;
text-align:center; text-decoration:underline; }
p { color:#555555; font-family:verdana; text-align:justify; }
Como podemos observar, para indicar el archivo de estilos externo,
debemos agregar en la Cabecera (head) del archivo HTML la siguiente
marca:
<link rel="StyleSheet" href="estilos.css" type="text/css">
La propiedad href hace referencia al archivo externo que afectará la
presentación de esta página.
En la propiedad type, indica al navegador cual es el formato de archivo.

El atributo rel se usa para definir la relación entre el archivo enlazado y
el documento HTML.
De ahora en más nos acostumbraremos a trabajar con hojas de estilo
definidas en un archivo externo, que es en definitiva la forma más común
de desarrollar un sitio web aplicando CSS.
CONCEPTOS TEORICOS DE HTML5
Antes que nada, debemos de saber que ahora, con este nuevo
estándar de HTML, en lugar de la famosa primera línea aquella de:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
strict.dtd"> Ahora sólo tenemos que escribir:
<!doctype html>
Y nuestro documento será reconocido como un documento HTML5

(después tendremos qué ver cómo "parchar" el documento, para que
sea visto por aquellos navegadores que no soporten este estándar).
Bien, ahora visualicemos el esquema básico de nuestro primer diseño
(primitivo) con HTML5.
El esquema que propongo, contiene la mayor parte de las etiquetas
referidas en otra entrada
de este blog.
Ya de acuerdo en el
esquema básico,
deberemos escribir las
etiquetas HTML5, de
acuerdo con su normativa.
Eso, quedaría así:
<!doctype html>
<html>
<head>
<title>Prueba de html 5</title>
</head>
<body>
<header>
<h1>Aprendizaje de HTML 5</h1>

</header>
<nav>

</nav>
<section id="principal">

</section>
<section>

</section>
<aside>

</aside>
<footer>

</footer>
</body>
</html>
En HTML 5, sólo hay un tipo de documento. Se declara en el comienzo

de la página <! DOCTYPE html>. "Simplemente" le dice al navegador
que se está tratando con un documento HTML.
La etiqueta <header> "envuelve" a los elementos iniciales de nuestra
página
y que sirven como identificación gráfica, como el logotipo, el título del
sitio, un motor de búesqueda, etcétera. Como sabemos, cada
cabecera suele contener una etiqueta que corresponde a su
jerarquía (h1 a h6, generalmente). Aquí utilizamos <h1>como título de
toda la página. Más adelante veremos cómo introducir secciones.
La etiqueta <nav> se utiliza para los elementos de navegación
principal y secundaria del sitio (ya depende de la imaginación y el
diseño).
La etiqueta <section> se utiliza para denotar una sección en el
documento. puede contener todo tipo de marcas y varias
secciones se pueden anidar unas dentro de otras.
La etiqueta <aside> se utiliza para mostrar los contenidos relacionados

con el contenido principal. En este caso lo estamos utilizando para la
barra lateral.
La etiqueta <footer> contendrá información adicional sobre el
contenido: quién lo escribió, copyright, enlaces a documentos
relacionados etcétera.
Como ya habíamos apuntado en otra entrada, con HTML5, en lugar
de utilizar divs que contienen las diferentes secciones de la página,
ahora usamos etiquetas adecuadas y estandarizadas. En otras
palabras, utilizamos semántica.
Así, facilitamos la tarea de los motores de búsqueda y los lectores de
pantalla para averiguar qué es lo que en una página. Es decir,
integramos el SEO a nuestro sitio, de una manera nativa.
Sigo con las "novedades" (entre comillas, porque no son tan nuevas)
de #HTML5 en lo referente a las etiquetas.
Antes, de incrustar audio y video en HTML, era poco menos que un
zafarrancho de "parches", plug-ins y un largo etcétera que es casi
interminable. Es pensando en ello que el W3C introdujo estos
elementos: <audio> y <video> que permiten incrustar multimedia en
sitios y aplicaciones en formatos nativos, sin necesidad de pasar
porFlash (un golpe severo a esta tecnología y su propietario, Adobe,
fue el anuncio de Youtube de que abandonaría a Flash y se inclinaría
por los formatos nativos incrustados en #HTML5 lo que, lógicamente,
le dio un impulso bárbaro al nuevo código #HTML5 ) o QT. Los
controles para estas etiquetas, serán como para cualquier formato
nativo y permite, con facilidad (relativa, claro), hacer los enlaces
sobre video, lo que en Flash, significaba un alto conocimiento de AS.
Sin embargo, como una deferencia y una manera de ser "inclusivos",
se conserva la etiqueta <embed> para contenido incrustado que
necesita plugins; este elemento que ya reconocen los navegadores,
ahora, al formar parte del estándar, no generará conflicto con
<object>.
Ahora, esta nueva revisión de HTML, adopta una etiqueta que
(casualmente), Google usa en su aplicación de mapas
(GoogleMaps): es la etiqueta <canvas> que permite generar gráficos
al "dibujar" en su interior. Los que sepan de Flash, recordarán que es
todo un arte crear aplicaciones de este tipo con cierta elegancia (los
primitivos sistemas de dibujo, son relativamente fáciles). Ahora con

<canvas> en #HTML5, la cosa se pone interesante.
Para incluir un video con HTML5 usas el siguiente formato:
<video src=”un-video-mlw.avi” width=”320” height=”240”></video>
Adicionalmente al ancho y alto, hay atributos adicionales que puede
usar:
preload = que empezará a precargar el video independientemente
de las acciones del usuario sobre el player.
<video src=”un-video-mlw.avi” width=”320” height=”240”
preload></video>
Recomendamos utilizarlo si la función de la página es mostrar un
video. Si por el contrario, el video únicamente ayudará a
complementar la información (un post que tiene múltiples videos o
referencias, no lo recomendamos)
preload=”none”></video>
Y el anterior que le dirá explicitamente que no tiene que precargar el
video.
autoplay = dará play al video en cuanto cargue la página sin acción
del usuario sobre los controles.
autoplay></video> controls = invoca a incluirse los controles
(play, pausa, volumen, etc.) en el player del video. Estos controles
están predefinidos en cada navegador y como veremos más
adelante en algunos players opciones pueden ser modificados con
javascript + css3.
controls></video>

Guia de Conceptos Teóricos de HTML - 11 Web

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Guia de Conceptos Teóricos de HTML - 11 Web

Cargado por

Copyright:

Formatos disponibles

COLEGIO LEÓN DE GREIFF

GUIA - DESARROLLO WEB

CONCEPTOS TEÓRICOS DE HTML.

Applications), creador del navegador MOSAIC, quien desarrolló en sus

Por último, una marca puede estar escrita en mayúsculas, en minúsculas o

LA ESTRUCTURA BÁSICA DE UNA PÁGINA WEB

LA CABECERA DEL DOCUMENTO:

Este código ... ...da Como resultado

<H1> Cabecera 1</H1> Cabecera 1

<H2> Cabecera 2</H2> Cabecera 2

<H3> Cabecera 3</H3> Cabecera 3

<H4> Cabecera 4</H4> Cabecera 4

<H5> Cabecera 5</H5> Cabecera 5

<H6> Cabecera 6</H6> Cabecera 6

<BASE>: Dirección URL virtual del documento. Se emplea para especificar un

<META>: Información especial de identificación del documento (llamada

<TITLE></TITLE>: Delimitador del título de la página. Es un elemento necesario

Comandos HTTP más usados:

Expires. Indica la fecha en que expira el documento.

<ISINDEX>: Es una marca generada automáticamente por un programa

Para aplicaciones desarrolladas en JAVA, se utiliza el contenedor

ETIQUETAS Y MARCAS HTML

<BLINK></BLINK>: Texto Intermitente (Blinking). Es quizá la marca más

DIVISORES DEL TEXTO:

<HR>: Barra horizontal (Horizontal Rule) con cierto efecto de relieve.

noshade Elimina el efecto tridimensional de

Este código... ... da Como resultado

JUSTIFICACIÓN DEL TEXTO

<CENTER> y su correspondiente cierre </CENTER> marcan la justificación

<A></A>: Ancla (Anchor) o delimitador de un enlace hipertexto. El texto o la

EL CUERPO DEL DOCUMENTO

vlink=nombre de color Nombre del color usado en los enlaces visitados.

EL FORMATO DEL COLOR

COLOR DE FONDO / IMAGEN DE FONDO

SISTEMA DE COLOR RGB

<MARQUEE></MARQUEE>, que cuenta con los siguientes atributos:

<img src=“boton_gmail.gif” alt=“gmail”></A>

CÓDIGO EMBEBIDO EN HTML

align=top, middle, bottom Alineación vertical de la imagen con

Otros atributos para esta marca se describirán más adelante cuando

MARCAS Y ATRIBUTOS DE TABLAS

Elabora diseños de tablas aplicando códigos y etiquetas HTML.

<TABLE></TABLE>: Delimitador de la Tabla.

<TABLE></TABLE>: Estas dos marcas delimitan los elementos de una Tabla. Es

El navegador Internet Explorer de MICROSOFT cuenta además con una serie

<TD></TD>: Delimitador de una celda. Sólo podrá aparecer dentro de los

<TH></TH>: Delimitador de una cabecera. Es igual que el delimitador TD pero

TABLAS COLOREADAS (<TABLE></TABLE>):

<CAPTION></CAPTION>: Delimitador del título de la tabla.

MARCAS Y ELEMENTOS DE LOS FORMULARIOS

Los Formularios (forms) se utilizan para la recepción y envío de datos desde

<FORM></FORM>: Estas marcas delimitan un formulario. Entre estas dos

Junto a este atributo se puede añadir otro, denominado ENCTYPE (encoding

No todos estos atributos son compatibles entre sí. Vamos a detenernos

- Radio. Casillero de selección en forma de círculo. Se utilizan cuando

<INPUT type=“checkbox” name=“pregunta” value=1 checked>

D. OTROS TIPOS DE ATRIBUTOS:

<TEXTAREA></TEXTAREA>: Estas marcas delimitan un campo amplio de texto,

cols=número Número de columnas (el ancho o número de caracteres

SUBVENTANAS, MARCOS O FRAMES

<FRAME>: Esta es una marca única (no un delimitador) que define el

<NOFRAMES></NOFRAMES>: Delimitador de información alternativa para

MÚLTIPLES VENTANAS. EL ATRIBUTO TARGET: