Tema 01

Tema 01: HTML Y CSS
BIENVENIDA
Apreciado estudiante, iniciemos con muchas ansias de aprender nuestro primer tema
de estudio, los contenidos que a continuacin te brindar la explicacin de las
etiquetas HTML qu permiten definir los elementos que conforman una pgina Web.
Los diseadores y programadores de pginas Web utilizan el lenguaje HTML de modo
que los navegadores que utilizamos los usuarios muestran las pginas Web despus
de interpretar su contenido HTML
Empecemos!
Introduccin al Tema
HTML es un lenguaje que permite definir los elementos que conforman una pgina
Web. Los diseadores y programadores de pginas Web utilizan el lenguaje HTML de
modo que los navegadores que utilizamos los usuarios muestran las pginas Web
despus de interpretar su contenido HTML.
Escribir y aplicar una hoja de estilo a nuestras pginas es una tarea sencilla. Bastara
con tener un conocimiento bsico acerca de su sintaxis y un listado con las palabras
que deben usarse en cada caso. Sin embargo, existen algunos conceptos ms
avanzados que es importante conocer para obtener el mximo provecho de este
lenguaje. En esta seccin revisaremos la nocin de cascada y de una idea relacionada
con ella, la herencia.
Aprendizajes Esperados
Conozcamos ahora las capacidades y actitudes a desarrollar en este primer tema:
Capacidad
Explica las ventajas y diferencias entre los diversos lenguajes de marcado
utilizados en las aplicaciones Web.
Identifica y reconoce la sintaxis de la CSS y las propiedades para definir el
color y fondo de las cajas.
Actitudes
Asume una actitud responsable respecto a su labor investigativa en estos
temas.
Participa activamente a travs de sus consultas referentes a los temas
estudiados
Esquema Grfico
Observa detenidamente el siguiente esquema, en el encontrars de un vistazo de
manera sintetizada los principales concepto de la temtica que abordaremos. Qu
conceptos o categoras te llaman la atencin?
1.1. HTML Hypertext Text Markup Language.

HTML es un lenguaje que permite definir los elementos que conforman una pgina
Web. Los diseadores y programadores de pginas Web utilizan el lenguaje HTML de
modo que los navegadores que utilizamos los usuarios muestran las pginas Web
despus de interpretar su contenido HTML.
El W3C define el lenguaje HTML como un lenguaje reconocido universalmente y que
permite publicar informacin de forma global. Desde su primera definicin, el lenguaje
HTML ha sido un lenguaje utilizado exclusivamente para crear documentos
electrnicos pero es un lenguaje que se utiliza en la mayora de aplicaciones
electrnicas (aplicaciones web comerciales, educativas, financieras y tambien muy
utilizada en buscadores, etc.).
El lenguaje HTML, cuenta con un conjunto de etiquetas o tambin llamadas "Tags",
las cuales funcionan de la siguiente manera:
<tag> Modelo de Inicio de una etiqueta.
</tag> modelo de Cierre de una etiqueta.
El texto o cualquier elemento de la pgina web, que est entre ambas etiquetas (de
inicio y cierre), estar influenciado por la accin que stas realicen. Por ejemplo, todo
el documento HTML debe estar entre las etiquetas <HTML> y </HTML>.
<HTML>
[Documento Web]
</HTML>
Hay que considerar que no todos los tags tienen etiqueta de cierre. Aunque se
recomienda que las etiquetas o tags que no tienen incluyan un / antes del cierre. Por
ejemplo la etiqueta BR se recomienda escribirla asi: <br />.
Es indiferente escribir las etiquetas en maysculas o minsculas. Pero se recomienda

escribirlas en minsculas.Para diferenciarlas del texto comn, las escribiremos en
maysculas.
Toda pgina web, esta dividida en dos partes bien definidas: la primera es la
cabecera o encabezado y la segunda es el cuerpo o contenido del documento.
La cabecera se define con la etiqueta <HEAD> y su finalizacin es con </HEAD>. En
la cabecera se coloca la informacin sobre la pgina web, pero hay que tener en
cuenta que esta informacin no se muestra en el navegador, excepto el ttulo de la
pgina que se muestra en la barra de ttulo de la ventana del navegador, el cual se
encuentra entre las etiquetas <TITLE> y </TITLE>.
El cuerpo, est comprendido entre las etiquetas <BODY> y </BODY>. Dentro de ste
est todo lo que queremos que aparezca en la pantalla principal (texto, imgenes, etc.)
Por lo mencionado anteriormente, podemos concluir que la estructura de un
documento web (pgina web) tiene dos partes: el encabezado y el cuerpo, y que de
acuerdo a las etiquetas utilizadas para delimitar estas partes, las etiquetas HTML para
construir una pgina web deben estar en el siguiente orden:
<HTML>
<HEAD>
<TITLE> Ttulo de la pgina </TITLE>
</HEAD>
<BODY>
[En este lugar escribiremos el contenido de la pgina]
</BODY>
</HTML>
Antes de crear nuestra primera pgina Web, debemos tener ciertas consideraciones
sobre el texto que vamos a incluir en el documento: No hay necesidad de tratar de
justificar el texto al ancho del navegador, pues el texto de una pgina Web se
caracteriza por justificarse de acuerdo al ancho que tome la ventana, adems cuando
queramos pasar a un nuevo prrafo, es necesario utilizar la etiqueta <P>.
El contenido de la pgina puede tener varios ttulos, los cuales escribiremos entre las
etiquetas <H1> y </H1>, <H2> y </H2>, etc. (hasta H6), el nmero en la etiqueta de
ttulo indica el tamao de los caracteres de la frase o palabra. El tamao mayor es el
correspondiente al nmero 1.
Una etiqueta muy interesante es la de centrado <CENTER> y </CENTER> (debemos
tomar en cuenta que a esta etiqueta no la soportan todos los navegadores, aunque s
la mayora de ellos). Esta etiqueta centra todo lo que est dentro de ella, ya sea texto,
imgenes, etc.
Existen otros tags como por ejemplo, los separadores horizontales (horizontal rules),
que se insertan con la etiqueta <HR> (este tag no tiene la correspondiente etiqueta de
cierre). Con ella se obtiene una raya horizontal tan ancha como la pantalla, y con la
apariencia de estar embutida sobre el fondo, o podemos tambin especificar su ancho
en
pxeles
o
en
porcentaje
respecto
al
ancho
de
la
ventana.
En un editor de texto cualquiera escribimos lo siguiente:
<HTML>
<HEAD>
<TITLE> Mi Primer Ejercicio </TITLE>
</HEAD>
<BODY>
<H1><CENTER> Ejercicio 1 </CENTER></H1>
<HR>
Esta es mi primera pagina web programando con HTML, aun es muy sencillo el diseo
pero pronto haremos paginas mas complejas.
<P> Este es el segundo parrafo.
</BODY>
</HTML>
No olvidemos que una vez escrito este cdigo, debemos guardar el archivo con el
nombre que Ud. desee, en nuestro caso le daremos el nombre de: ejercicio1 con
extensin .html o .htm.
Cuando programemos, tratemos de colocar algunas lneas en blanco cuando sea
necesario, mayormente para separar la cabecera del cuerpo de la pgina, y adems
justificar a la izquierda las lneas en varios niveles, para identificar con mucha mayor
claridad el cdigo que se encuentra dentro de ciertas etiquetas, como lo podemos
notar en el ejemplo anterior. De hecho, todo el cdigo podra estar escrito dentro de
una sola lnea. Lo importante es el orden correcto de las etiquetas. Por cierto, una
etiqueta puede estar anidada dentro de otra. En el ejemplo podemos notar la etiqueta
<CENTER> dentro de la etiqueta <H1>. Es muy importante, en estos casos, que las
etiquetas de inicio y de cierre vayan en el orden correcto, pues de lo contrario se
produciran errores.
1.1.1. Formato de texto con HTML
En ejemplo anterior, podemos notar que cuando colocamos texto, este aparece sin
ningn formato en especial. Slo, cuando quisimos crear un nuevo prrafo, utilizamos
la etiqueta <P>, esta etiqueta inserta una lnea en blanco despus de la ltima del
prrafo anterior. Pero si deseamos realizar un salto de lnea, es decir pasar a la
siguiente lnea sin incluir una en blanco, utilizaremos el tag<BR> (BReak) que en
ingls significa quebrar o romper. Esta etiqueta por su naturaleza o funcionamiento no
tiene una etiqueta de cierre.
Negrita y Cursiva
Cuando trabajamos con texto formateado, las caractersticas ms utilizadas son:
negrita y cursiva. Pues en HTML, podemos darle esas caractersticas al texto
utilizando las etiquetas: <B> para poner el texto en negrita, y <I> para formato cursiva.
Cada una de ellas si cuenta con su respectiva etiqueta de cierre (</B> y </I>).
Espacios en blanco
Al escribir el texto, si ponemos ms de un espacio en blanco entre dos palabras
observamos que el navegador slo reconoce uno de ellos. Si queremos forzarle a que
lo haga, debemos poner el cdigo " " (non-breakingspace).
Superndices y Subndices
En las frmulas matemticas puede interesar poder escribir ndices y subndices, que
se consiguen con las etiquetas <SUP></SUP> y <SUB></SUB> respectivamente. Por
ejemplo: m2 se obtiene con: m<SUP>2</SUP> y vx con: v<SUB>x</SUB>.
1.1.2. Listas
Cuando tenemos un conjunto de elementos es necesario mostrarlos en forma de
listas, las cuales pueden ser de diferentes tipos:
Listas desordenadas (sin numerar)
Listas ordenadas (numeradas)
Listas de definicin.
Las listas desordenadas (UnorderedLists) sirven para presentar cosas que, por no
tener un orden determinado, no necesitan ir precedidas por un nmero. Su estructura
es la siguiente:
<UL>
<LI> Naranja
<LI> Manzana
<LI> Fresa
<LI> Etc.
</UL>
Como se puede apreciar, para crear una lista de este tipo se utiliza la etiqueta <UL>, y
luego para cada elemento la etiqueta <LI> (ListItem). Adems podemos anidar una
lista dentro de otra. Por ejemplo:
<UL>
<LI> Mamferos
<LI> Peces
<UL>
<LI> Sardina
<LI> Bacalao
</UL>
<LI> Aves
</UL>
Las Listas Ordenadas (OrderedLists) sirven para presentar tems en un orden
determinado. Su estructura es muy similar a la anterior. La diferencia est en que en el
resultado aparecer automticamente un nmero correlativo para cada cosa.
<OL>
<LI>Introduccion
<LI> Conceptos Basicos
<LI> Aplicaciones
<LI>Bibliografia
</OL>
El texto aparecer como sigue:
1.Introduccion
2.ConceptosBasicos
3.Aplicaciones
4.Bibliografia
Al igual que las listas desordenadas, tambin se pueden anidar las listas ordenadas.
El tercer tipo lo forman las listas de definicin. Como su nombre indica, son
apropiadas para glosarios (o definiciones de trminos). Toda la lista debe ir englobada
entre las etiquetas <DL> y </DL>. Y a diferencia de las dos que hemos visto, cada
rengln de la lista tiene dos partes: 1) el nombre de la cosa a definir , que se consigue
con la etiqueta <DT> (definitionterm) y 2) la definicin de dicha cosa, que se consigue
con la etiqueta <DD> (definitiondefinition).
<DL>
<DT> HTML
<DD> Son las iniciales de HyperTextMarkupLanguage
<DT> WWW
<DD> Son las iniciales de World Wide Web
</DL>
Su resultado es:
HTML
Son las iniciales de HyperTextMarkupLanguage
WWW
Son las iniciales de World Wide Web
1.1.3. Comentarios no visibles en la pantalla
A veces es muy til escribir comentarios en el documento HTML sobre todo cuando
creamos pginas dinmicas, el cdigo que escribimos, nos pueden servir para
recordar posteriormente sobre lo que hicimos, y que no queremos que se vean en
pantalla.
Esto se consigue encerrando dichos comentarios entre estos dos smbolos:  .
Ejemplo: 
Ejemplo 1:
Comentarios
En el editor escribimos:
<TITLE>Ejercicio 2 </TITLE>
</HEAD>
<BODY>
<CENTER>
<H1> Mis Cursos </H1>
</CENTER>
<HR>
Sin un orden particular, mis <B> cursos </B> son los siguientes:
<UL>
<LI> Redes de computadoras
<LI>Ingenieria de Software
<UL>
<LI> Herramientas Case
<LI> Software de Aplicacin I
<LI> Software de Aplicacin II
</UL>
<LI> Sistemas de Informacin Gerencial
</UL>
Los cursos que mas me gustan son <I> (en orden de preferencia): </I>
<OL>
<LI>Ingenieria de Software
<LI> Sistemas de Informacin Gerencial
<LI> Redes de Computadoras
</OL>
</BODY>
</HTML>
Una vez que terminamos de editar, guardamos el cdigo en un archivo:
ejercicio2.html.
1.1.4. Caracteres especiales
Hemos podido notar en los ejemplos anteriores, que las palabras no aparecan con
tildes, y no hemos utilizado algunos otros caracteres especiales, esto debido a que
existen algunas limitaciones para escribir el texto. Una de ellas es debido a que las
etiquetas se forman como un comando escrito entre los smbolos "<" y ">". Por tanto,
si se quisieran escribir estos caracteres como parte normal del texto, provocara una
ambigedad, ya que el navegador podra interpretarlos como el comienzo o final de

una etiqueta, en vez de un carcter ms del texto.
Para superar estas limitaciones, existen cdigos para escribir estos caracteres y otros
relacionados junto con las etiquetas.
< obtenemos < (lessthan, menor que)
> obtenemos > (greaterthan, mayor que)
& obtenemos & (ampersand)
" obtenemos " (doublequotation)
Podemos ver, que estos cdigos empiezan siempre con el signo & y acaban siempre
con ;. De igual manera, existen cdigos para escribir letras especficas de distintos
idiomas. Los cdigos de las vocales acentuadas se forman comenzando con &,
seguido de la vocal en cuestin, seguido de la palabra acute (aguda) y terminando con
el signo ;
- á - Á
- é - É
- í - Í
- ó - Ó
- ú - Ú
- ñ - Ñ
- ¿ - ¡
Todo esto, que como se ve es muy laborioso, puede parecer intil ya que si escribimos
nuestro texto sin hacer ningn caso de estas convenciones, escribiendo las letras
acentuadas y dems signos directamente, es muy posible que el resultado lo veamos
correctamente en nuestro navegador, pero nunca podremos estar seguros que les
ocurra lo mismo a todos los que accedan a nuestras pginas con otros navegadores
distintos.
Ejemplo 2:
Caracteres Especiales.
<HTML>
<HEAD>
</HEAD>
<BODY>
<CENTER>
<H1> Mis Cursos </H1>
</CENTER>
<HR>
Sin un orden particular, mis <B> cursos </B> son los siguientes:
<UL>
<LI> Redes de computadoras
<LI>Ingeniería de Software
<UL>
<LI> Herramientas Case
<LI> Software de Aplicación I
<LI> Software de Aplicación II
</UL>
<LI> Sistemas de Información Gerencial
</UL>
Los cursos que mas me gustan son <I> (en orden de preferencia): </I>
<OL>
<LI>Ingeniería de Software
<LI> Sistemas de Información Gerencial
<LI> Redes de Computadoras
</OL>
</BODY>
</HTML>
1.1.5. Enlaces o hipervnculos
Enlaces con otras pginas
El xito de la Web, se basa justamente en este elemento: el Hipervnculo o enlace,
pues nos da la posibilidad de unir los distintos documentos repartidos por todo el
mundo.
Estructura de los enlaces.
Los enlaces, en general, tienen la siguiente estructura:
<A REF = "xxx" >yyy</A>
Donde:
xxx : es el destino del hipervnculo.
yyy : es el texto que generalmente aparece subrayado y con un color especial, el cual
indicar en la pantalla la existencia de un enlace.
Tipos de enlaces
Los enlaces los podemos clasificar en cuatro tipos:
Enlaces dentro de la misma pgina
Enlaces con otra pgina nuestra
Enlaces con una pgina fuera de nuestro sistema
Enlaces con una direccin de correo electrnico
Enlaces dentro de la misma pgina
Cuando tenemos documentos (o pginas web) muy extensos, es adecuado trabajar
con este tipo de enlaces, pues nos permite dar un salto desde una posicin a otra
determinada, dentro de la misma pgina. En este caso, lo que antes hemos llamado
XXX, es decir, el destino del enlace, en este caso el sitio dentro de la pgina a donde
queremos saltar, se sustituye por #marcador (la palabra marcador puede ser cualquier
palabra). Lo que hemos llamado antes YYY es la palabra (o palabras) que aparecern
en la pantalla en color (en forma de hipertexto). Su estructura es, entonces:
<A HREF="#marcador"> YYY </A>.
En el sitio exacto a donde queremos saltar, debemos poner la siguiente etiqueta: <A
NAME="marcador"></A>
Por ejemplo, si quiero saltar desde aqu a la pantalla final, pongo la siguiente
etiqueta:<A HREF="#final"> Haga Click aqu para ir al final</A>.
En el final del documento se inserta esta etiqueta: <A NAME="final"></A>.
Enlaces con otra pgina nuestra

Generalmente cuando vamos a crear un Sitio Web, contamos con varias pginas, las
cuales necesitamos enlazar unas con otras. Contamos siempre con una pgina que
ser la Inicial o principal y otras enlazadas a ella.
Supongamos que queremos enlazar con la pgina creada en el ejemplo del captulo
anterior, que la hemos llamado ejemplo2.html. En este caso, simplemente sustituimos
lo que hemos llamado XXX (el destino del enlace) por el nombre del archivo: <A
HREF="ejemplo2.html"> Ejemplo 2 </A>
Si queremos que vaya a un sitio concreto de otra pgina nuestra en vez de ir al

principio de la pgina, adonde va por defecto, en ese sitio tenemos que colocar una
marca o marcador (ver seccin anterior), y completar el enlace con la referencia a ese
marcador.
En este ejemplo podremos hacer un enlace de este tipo:
Deseo poner un enlace desde aqu a otra pgina (supongamos que se llame
pag5.html), pero a un sitio concreto de esa pgina, donde he puesto el marcador <A
NAME="cursos"></A>.
Entonces
la
etiqueta
tiene
que
ser:
<A
HREF="pag5.html#cursos"> Cursos </A>.
Si la pgina a la que quiero saltar est, por ejemplo en el subdirectorio cursos,
entonces en la etiqueta tendra que haber puesto "cursos/pag5.html". Segn el prrafo
anterior, la etiqueta tiene que ser: <A HREF="cursos/pag5.html#cursos"> Cursos </A>.
Y a la inversa, si quiero saltar desde una pgina a otra que est en un directorio
anterior o nivel superior, en la etiqueta tendra que haber puesto "../pag5.html". Esos
dos puntos (..) hace que se dirija al directorio anterior. Obsrvese que se debe utilizar
el smbolo / para indicar los subdirectorios, y no este otro \, que es propio nicamente
de Windows. Podemos evitar todas estas complicaciones colocando todos los archivos
en un solo directorio, pero si tenemos muchas pginas lo mejor es tenerlas en
directorios, pues nos facilitar el mantenimiento de ellas.
Enlaces con una pgina fuera de nuestro sistema
Si queremos enlazar con una pgina que est fuera de nuestro Sitio Web (es decir,
que est en un servidor distinto), es necesario conocer su direccin completa, o URL
(UniformResourceLocator). El URL podra ser, adems de la direccin de una pgina
del Web, una direccin de ftp, gopher, etc.
Una vez conocida la direccin (o URL), la colocamos en vez de lo que hemos llamado
anteriormente xxx (el destino del enlace). Si queremos enlazar con la pgina de la
Nasa (cuyo URL es: http://www.nasa.com), la etiqueta sera:
<A HREF="http://www.nasa.com/">Pgina inicial de la Nasa </A>
Es importante escribir estas direcciones correctamente (respetando las maysculas y
minsculas, pues los servidores UNIX s las distinguen)
Enlaces con una direccin de Correo Electrnico
En este caso, sustituimos lo que se ha llamado antes xxx (el destino del enlace) por
mailto: seguido de la direccin de correo electrnico. La estructura de la etiqueta es:
<A HREF="mailto: usuario@servidoremail">Texto del enlace</A>
Un ejemplo de esto est al final de la pgina principal de este manual. Podra haber
puesto:
Comentarios a <A HREF="mailto: oscar@chiclayo.net">Oscar</A>
Ejemplo 3: Enlaces
<HTML>
<HEAD>
<TITLE>Ejercicio 4 </TITLE></HEAD>
<BODY>
<CENTER><H1> Mis paginas favoritas </H1></CENTER>

<HR>Estas son mis paginas favoritas:
<P><A HREF="http://oscar.capunay.com"> Mi Página</A>
<BR><A HREF="http://gerencia.rednorte.com.pe">Volkan Tech </A>
<BR><A HREF="http://www.google.com"> Google </A>
</BODY>
</HTML>
1.1.6. Imgenes
La etiqueta que nos sirve para incluir imgenes en las pginas Web es muy similar a la
de enlaces a otras pginas. A esta etiqueta se le indica el nombre y la localizacin de
un archivo que contiene una imagen.
La estructura de la etiqueta es:
<IMG SRC="imagen.gif">
Con el comando IMG SRC (ImageSource, origen o fuente de la imagen) se indica que
se quiere mostrar una imagen llamada imagen.gif (el nombre que tenga el archivo).
Dentro de la etiqueta se pueden aadir otros comandos, tal como ALT
<IMG SRC="imagen.gif" ALT="descripcin">
Con ALT se inserta una descripcin (una palabra o una frase breve) de la imagen. ALT
se puede omitir, es en beneficio de los que accedan a nuestra pgina con un programa
navegador en forma de texto slo. Ya que no son capaces de ver la imagen, por lo
menos pueden hacerse una idea sobre ella.
Si el archivo se encuentra en el mismo directorio, es suficiente escribir el nombre. Pero
si se encontrara en otro lugar es necesario indicar su ubicacin exacta, utilizando los
criterios que vimos en la parte de enlaces.
Un aspecto muy importante a tener en cuenta es el tamao de las imgenes, pues una
imagen grande supone un archivo grande, y esto puede resultar en un tiempo excesivo
de carga, con el consiguiente riesgo de que quien est intentando cargar nuestra
pgina se canse de esperar, y desista de ello.
Para elegir la posicin de la imagen con respecto al texto hay distintas posibilidades.
La ms sencilla es colocarla entre dos prrafos, con un titular a un lado.
De momento nos vamos a limitar a escoger la posicin del titular con respecto a la
imagen (si es que queremos ponerle un titular, claro est). Se puede poner arriba, en
medio o abajo del lado de la imagen. Para ello se aade el comando ALIGN a la
etiqueta, de la siguiente manera:
<IMG SRC="isla.gif" ALIGN=TOP> Titular alineado arriba
<IMG SRC="isla.gif" ALIGN=MIDDLE> Titular alineado en medio
<IMG SRC="isla.gif" ALIGN=BOTTOM> Titular alineado abajo
Otra posibilidad muy interesante es la de utilizar una imagen como enlace a otra
pgina. Para estos casos se utilizan generalmente imgenes pequeas (iconos),
aunque se puede usar cualquier tipo de imagen.
Segn vimos anteriormente, la estructura general de un enlace es:
<A HREF="xxx">yyy</A>.
Donde xxx era el destino del enlace e yyy el texto del enlace (o ms generalmente
hablando, lo que aparece en la pantalla como el enlace; anteriormente era un texto, y
en ste va a ser una imagen). En este caso sustituimos xxx por el nombre del archivo
de la pgina a la que queremos acceder. Y en lugar de yyy ponemos la etiqueta
completa de la imagen (que queda as englobada dentro de la etiqueta del enlace).
Como ejemplo vamos a utilizar la imagen (flecha.gif) para acceder al ejercicio 2
(ejercicio2.html):
<A HREF="ejercicio2.html"><IMG SRC="flecha.gif"></A>
Pulsando la imagen comprobamos cmo efectivamente enlaza con la pgina deseada.
Obsrvese adems que la imagen est rodeada de un rectgulo del color normal en
los enlaces. Si no se desea que aparezca ese rectngulo, hay que incluir dentro de la
etiqueta de la imagen el atributo BORDER=0, es decir:
<A HREF="ejercicio2.html"><IMG SRC="flecha.gif" BORDER=0></A>
Posicionando el cursor sobre esta ltima imagen, comprobamos que acta tambin
como enlace aunque carezca del rectngulo de color. Esto puede resultar ms
esttico, pero se corre el riesgo de que el usuario no se d cuenta de que la imagen
sirve de enlace.
Ejemplo 4: Imgenes
<HTML>
<HEAD>
<TITLE> Ejercicio 5 </TITLE>
</HEAD>
<BODY>
<CENTER>
<H1>Ejercicio 5 </H1>
</CENTER>
<HR>
Esta es una pagina Web. Tiene todos los elementos bsicos sobre todo imagenes.
<P><A HREF ="ejercicio1.html"><IMG SRC ="hombre.gif"></A> Mi primera pagina web.
<P><A HREF ="ejercicio2.html"><IMG SRC ="casa.gif"></A> Mis Cursos
<CENTER>
<H3> Un verano inolvidable </H3>
<IMG SRC="playa.gif" ALT="playa">
</CENTER>
</BODY>
</HTML>
1.1.7. Tablas
Las etiquetas necesarias para crear tablas son:
<TABLE> Y </TABLE> para especificar el inicio y final de la tabla.
A esta etiqueta le podemos aadir un comando: BORDER, que sirve para especificar
el grosor del borde de las celdas. La manera de especificar esta caracterstica es la
siguiente:
<TABLE BORDER=[espesor]>
[resto de las etiquetas]
</TABLE>
Por ejemplo: si queremos una tabla con un borde de una unidad de espesor,
escribiremos el siguiente cdigo:
<TABLE BORDER=1>
[resto de las etiquetas]
</TABLE>
Dentro de estas etiquetas, es necesario especificar las filas y columnas que contendr
la tabla.
Las etiquetas para formar cada fila (row) de la tabla, que son: <TR> y </TR>. Estas
etiquetas tenemos que repetirlas tantas veces como filas queremos que tenga la tabla.
Las etiquetas para crear columnas son: <TD> y </TD>, que engloban el contenido de
cada celda concreta (texto, imgenes, etc.).
Hay que repetirla tantas veces como celdas queremos que haya en esa fila.
Ejemplo 5: Tablas
<HTML>
<HEAD>
<TITLE> Ejercicio 6 </TITLE>
</HEAD>
<BODY BACKGROUND="nubes.jpg" BGCOLOR="#CCFFFF" TEXT="#AA0000">
<CENTER>
<H1> Ejercicio 6 </H1>
</CENTER>

<HR width=75%>
<A HREF="new.gif"><IMG SRC="new.gif" WIDTH=150 HEIGHT=75></A>
<TABLE BORDER=1>
<TR><TD>fila1-celda1</TD><TD>fila1-celda2</TD><TD>fila1-celda3</TD></TR>
<TR><TD>fila2-celda1</TD><TD>fila2-celda2</TD><TD>fila2-celda3</TD></TR>
</TABLE>
</BODY>
</HTML>
Que pasara si creamos filas con diferente numero de columnas?, el navegador crear
un espacio vaco en dicha posicin. Si en la tabla del ejercicio 6 eliminamos la tercera
celda de la segunda fila, es decir si borramos <TD>fila2-celda3</TD>, resultar:
fila1-celda1 fila1-celda2
Fila1-celda3
fila2-celda1 fila2-celda2
Titular de la tabla
Se puede aadir un titular a la tabla, es decir un texto situado en la parte superior de la
tabla que indica cul es su contenido. ste titular se consigue con las etiquetas:
<CAPTION> y </CAPTION> para su inicio y finalizacin, respectivamente.
Tomando en cuenta el ejercicio anterior, vemos como podemos utilizar esta etiqueta:
<table BORDER="1">
<caption>Ejemplo de filas desiguales </caption>
<tr>
<td>fila1-celda1</td>
</tr>
<tr>
</tr>
</table>
Adems de las celdas que contienen datos normales, podemos poner, si nos
conviene, celdas de cabecera, que se distinguen por estar el texto de dichas celdas en
negrita y centrado. Estas celdas se insertan escribiendo la etiqueta: <TH> y </TH>.
Vamos a aadir, en el ejemplo anterior, una fila de estas celdas de cabecera, antes de
las otras dos que ya existan:
<TABLE BORDER="1">
<CAPTION>Ejemplo de filas desiguales </CAPTION>
<TR>
<TH>Columna 1</TH><TH>Columna 2</TH><TH>Columna 3</TH>
</TR>
<TR>
<TD>fila1-celda1</TD>
</TR>
<TR>
</TR>
</TABLE>
Ubicacin contenido dentro de la celda
El contenido de una celda por defecto est alineado a la izquierda. Pero se puede
cambiar aadiendo dentro de la etiqueta de la celda los siguientes atributos:
<TD ALIGN=CENTER> Al centro </TD>
<TD ALIGN=RIGHT> A la derecha </TD>
<TH ALIGN=LEFT> Cabecera a la izquierda </TH>
En el caso de la etiqueta <TH>, por defecto el texto esta en el centro de la celda.
Por defecto, las celdas tienen alineacin vertical es en el medio. Esto tambin se
puede cambiar, aadiendo dentro de la etiqueta de la celda los siguientes atibutos:
<TD VALIGN=TOP> Arriba </TD>
<TD VALIGN=CENTER> Centro </TD>
<TD VALIGN=BOTTOM> Abajo </TD>
Cambiando las dimensiones de la tabla
El navegador normalmente dimensiona el tamao de la tabla de acuerdo con el
nmero de filas, de columnas, por el contenido de las celdas, espesor de los bordes,
etc. Pero nosotros por medio de atributos tambin podemos modificar las dimensiones
de una tabla. Estos atributos son: WIDTH y HEIGHT (ancho y alto), los cuales pueden
estar expresados en pixeles o en porcentaje de la dimensin de la pantalla.
Celdas que abarcan a otras varias
A veces puede interesarnos que una celda se extienda sobre otras varias. Esto se
consigue aadindo dentro de la etiqueta de la celda los atributos COLSPAN=nmero
para extenderse sobre un nmero determinado de columnas, o ROWSPAN=nmero
para extenderse verticalmente sobre un nmero determinado de filas.
Por ejemplo, en la tabla anterior vamos a aadir una fila con una sola celda, que
abarca a tres columnas:
<TABLE BORDER="1">
<TR>
</TR>
<TR>
<TD COLSPAN=3> Celda sobre 3 columnas </TD>
</TR>
<TR>
</TR>
<TR>
</TR>
</TABLE>
O, en la misma tabla, vamos a aadir una celda en la primera fila. pero que abarque
tambin a la siguiente:
<TABLE BORDER="1">
<TR>
</TR>
<TR>
<TD COLSPAN=3> Celda sobre 3 columnas </TD>
</TR>
<TR>
<TD ROWSPAN=2> Celda junto a 2 filas </TD>
</TR>
<TR>
</TR>
</TABLE>
Separacin entre las celdas de una tabla
Por defecto, la separacin entre celdas de una tabla es de dos pixels. Pero se puede
variar esto con el atributo CELLSPACING, que se pone dentro de la etiqueta
<TABLE>.
Por ejemplo, para obtener una separacin de 20 pixels entre celdas ponemos:
<TABLE BORDER CELLSPACING=20>
Separacin entre el borde y el contenido dentro de las celdas
La separacin entre el borde y el contenido dentro de las celdas es de un pixel. Si
queremos cambiar esto, lo hacemos con el atributo CELLPADDING, que se pone
dentro de la etiqueta <TABLE>.
Por ejemplo, para obtener una separacin de 20 pixels entre el contenido y los bordes,
dentro de cada celda: <TABLE BORDER CELLPADDING=20>
Se puede combinar este atributo con CELLSPACING, visto lneas atrs. Por ejemplo,
una tabla con bordes de 5 de espesor, separacin entre celdas de 15 y separacin del
contenido con respecto a los bordes de las celdas de 20, lo obtendramos con:
<TABLE BORDER=5 CELLSPACING=15 CELLPADDING=20>
Ejercicio 7
<HTML>
<HEAD>
</HEAD>
<BODY>
<CENTER>
<H1> Ejercicio 6 </H1>
</CENTER>
<HR width=75%>
<TABLE BORDER=3 CELLSPACING=10 CELLPADDING=8>
<TR>
</TR>
<TR>
</TR>
</TABLE>
</BODY>
</HTML>
1.1.8. Formularios
Los formularios permiten a los usuarios enviar informacin al servidor, en el cual hay
instalado(s) programa(s) que procesan esta informacin.
Estructura de un formulario
La estructura de un formulario es la siguiente:
Etiqueta de inicio:
Cuerpo del formulario, con los distintos elementos para poder introducir los
datos.
Botones de envo y de borrado.
Etiqueta de cierre </FORM>
Etiqueta de inicio
<FORM ACTION=mailto:email METHOD="POST" ENCTYPE = "TEXT/PLAIN">
El atributo ACTION indica la accin que se debe efectuar.
El atributo METHOD=POST indica que los datos sean inmediatamente enviados a la
direccin de email u a otro destino establecido segn el atributo ACTION.
Con el atributo ENCTYPE="TEXT/PLAIN" se consigue que las respuestas las
recibamos como un archivo de texto, perfectamente legible y sin codificar.
Elementos para introducir los datos
Existen tres tipos de elementos:
1. Introduccin por medio de texto
2. Introduccin por medio de mens
3. Introduccin por medio de botones
La introduccin de los datos se consigue por medio de la etiqueta:
<INPUT TYPE="xxx" NAME="yyy" VALUE="zzz">
En donde:
xxx es la palabra que indica el tipo de introduccin.
yyy es el nombre que le asignamos nosotros a la variable de introduccin del dato.
zzz es el nombre de la variable que contendr el valor del elemento.
Introduccin por medio de texto (una lnea)
En este caso es xxx=text, es decir, INPUT TYPE="text". El atributo VALUE no procede
en este caso.
Vamos a poner un ejemplo: solicitamos el apellido del usuario.
<FORM ACTION=mailto:email METHOD="POST" ENCTYPE="TEXT/PLAIN">
Escribe tu apellido:
<BR><INPUT TYPE="text" NAME="Apellido">
</FORM>
Si el usuario introduce su apellido, por ejemplo: Ruiz, y pulsa el botn de envo (que
veremos ms adelante), recibiremos un email suyo con el siguiente texto:
Apellido=Ruiz
La longitud de este formulario es por defecto de 20 caracteres. Se puede variar
incluyendo en la etiqueta el atributo SIZE="nmero". Por otra parte, sea cual sea la
longitud del formulario, si no se indica nada, el usuario puede introducir el nmero de
caracteres que quiera. Se puede limitar esto, incluyendo en la etiqueta el atributo
MAXLENGTH="nmero".
En el caso que hemos visto, si hubiramos cambiado la etiqueta correspondiente por:
<INPUT TYPE="text" NAME="Apellido" SIZE="10" MAXLENGTH="12">
Tambin se puede hacer que el texto introducido no sea reconocible, es decir que
todos los caracteres se representen por asteriscos. Basta con cambiar en la etiqueta
INPUT TYPE="text" por INPUT TYPE="password". En el ltimo ejemplo, si cambiamos
la etiquea correspondiente por:
<INPUT TYPE="password" NAME="Apellido" SIZE="10" MAXLENGTH="12">
Los caracteres introducidos se representan por asteriscos.
Introduccin por medio de texto (mltiples lneas)
Cuando el texto a introducir puede alcanzar una gran longitud, por ejemplo un
comentario, es conveniente utilizar un formulario de texto de mltiples lneas.
Esto se consigue con la etiqueta de inicio:
<TEXTAREA NAME="yyy" ROWS="nmero" COLS="nmero">
(en donde no se utiliza INPUT TYPE y donde ROWS representa el nmero de filas, y
COLS el de columnas). y la de cierre: </TEXTAREA>
Ejemplo 6: Formulario solicitando los comentarios del usuario:
Introduce
tus
comentarios:
<BR>
<TEXTAREA
NAME="Comentarios"
ROWS="6"
COLS="40">
</TEXTAREA>
</FORM>
Introduccin por medio de Listas Desplegables
Si queremos que el usuario, en vez de introducir un texto, como hemos visto en los
casos anteriores, escoja entre varias opciones que le presentamos nosotros, haremos
uso de un formulario en forma de listas desplegables.
Se consigue con la etiqueta de inicio <SELECT NAME="yyy"> y la de cierre
</SELECT>. Las distintas opciones a escoger se consiguen con la etiqueta
<OPTION>.
Ejemplo: Pedimos al usuario que elija su color preferido:
Cul es tu color preferido?
<BR>
<SELECT NAME="ColorPreferido">
<OPTION>Rojo
<OPTION>Verde
<OPTION>Azul
</SELECT >
</FORM>
Si el usuario escoge, por ejemplo: Azul y ha pulsado el botn de envo, recibiremos un
email suyo con el texto: ColorPreferido=Azul.
En el ejemplo anterior, slo es visible en el formulario una opcin. Si queremos que
sean visibles mltiples opciones a la vez, aadimos en la etiqueta los atributos
MLTIPLE SIZE="nmero", donde especificamos el nmero de opciones visibles.
Formulario de confirmacin (checkbox)
Si queremos que el usuario confirme una opcin determinada, podemos hacer uso de
un formulario de confirmacin, o checkbox, que se consigue con la etiqueta:
<INPUT TYPE="checkbox" NAME="yyy">
Ejemplo 7: Solicitamos al usuario que confirme su inclusin en una lista de correo:
<INPUT TYPE="checkbox" NAME="Lista">
S, deseo ser incluido en la lista de correo.
</FORM>
Si el usuario marca este formulario y pulsa el botn de envo, recibiremos un email
suyo con el texto: Lista=On.
Si queremos que el formulario aparezca inicialmente como marcado (el usuario no
necesitar hacerlo), basta con aadir el atributo CHECKED dentro de la etiqueta.
Ejemplo: <INPUT TYPE="checkbox" NAME="Lista" CHECKED>
Botones de radio
Cuando queremos que el usuario elija una nica opcin entre varias, podemos hacer
uso de los botones de radio, que se consiguen con la etiqueta:
<INPUT TYPE="radio" NAME="yyy" VALUE="zzz">
Donde yyy es el nombre que le ponemos a la variable que se trata de elegir, y zzz es
el nombre de cada una de las opciones en concreto.
Ejemplo: solicitamos al usuario que defina cul es su sistema operativo preferido:
Cul es tu sistema operativo preferido?
<BR>
<INPUT TYPE="radio" NAME="SistemaOperativo" VALUE="PC" CHECKED> PC
<INPUT TYPE="radio" NAME="SistemaOperativo" VALUE="Mac"> Mac
<INPUT TYPE="radio" NAME="SistemaOperativo" VALUE="Unix">Unix
</FORM>
Obsrvese el atributo opcional CHECKED que se ha aadido en la primera etiqueta.
Esa ser la opcin que aparece marcada por defecto.
Si el usuario ha escogido la opcin PC y pulsa el botn de envo, recibiremos un email
suyo con el texto: SistemaOperativo=PC.
Botones de envo y de borrado
Hasta ahora, en todos los ejemplos que hemos visto, faltaba un elemento esencial en
cualquier formulario, y es el botn de envo de los datos, que se consigue con la
etiqueta:
<INPUT TYPE="submit" VALUE="Enviar">
En donde zzz es el texto que queremos que aparezca en el botn. Ejemplo:
Escribe tu apellido:
<BR><INPUT TYPE="text" NAME="Apellido">
<P><INPUT TYPE="submit" VALUE="Enviardatos">
</FORM>
Otro botn interesante es el de borrado de los datos introducidos, muy conveniente en
un formulario con muchos elementos. Es muy similar al de envo, pues se consigue
con la etiqueta:
<INPUT TYPE="reset" VALUE="zzz">
En donde zzz es el texto que queremos que aparezca en el botn. Si aadimos al
ejemplo anterior la etiqueta:
<P><INPUT TYPE="reset" VALUE="Borrardatos">
Se puede comprobar su funcionamiento, escribiendo algo en el formulario y pulsando
luego el botn de borrado.
Consideraciones finales
Hasta ahora hemos visto uno a uno los diferentes elementos que se pueden utilizar.
Pero no hay ningn inconveniente en usar, dentro del mismo formulario, distintos tipos
de introduccin de datos. Al pulsar el usuario el botn de envo recibiramos en email
suyo con las distintas parejas NAME=VALUE de cada elemento, encadenadas con el
smbolo &.
Ejemplo 8: Formulario 2
<HTML>
<HEAD><TITLE>LIBRO DE VISITAS</TITLE></HEAD>
<BODY>
<P><CENTER>
<H2>Libro de visitas</H2>
<P>
<FORM ACTION=mailto:xy@ab METHOD="POST" ENCTYPE="TEXT/PLAIN">
Tu nombre:
<BR><INPUT TYPE="text" NAME="Nombre">
<P>Escribe tus comentarios:
<BR><TEXTAREA NAME="Comentarios" ROWS="6" COLS="40">
</TEXTAREA>
<P><INPUT TYPE="submit" VALUE="Enviar datos">

<INPUT TYPE="reset" VALUE="Borrar datos">
</FORM>
<P><HR><P>
</BODY>
</HTML>
1.1.9. Frames
Frames (en ingls, marcos o cuadros) es un procedimiento del lenguaje HTML para
dividir la pantalla en diferentes zonas, o ventanas, que pueden actuar
independientemente unas de otras, como si se trataran de pginas diferentes, pues
incluso cada una de ellas pueden tener sus propias barras de desplazamiento. Los
navegadores que lo implementan son el Netscape 2.0, y el Explorer 2.0 en adelante.
Una de sus caractersticas ms importantes es que pulsando un enlace situado en un
frame, se puede cargar en otro frame una pgina determinada. Esto se utiliza
frecuentemente para tener un frame 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 pginas. De esta manera se facilita la navegacin entre
las pginas, pues aunque se vaya pasando de unas a otras, siempre estar a la vista
el ndice del conjunto.
Para comprender los distintos conceptos vamos a desarrollar un ejemplo, creando una
pgina con dos frames. El de la izquierda va a servir de ndice de lo que veamos en el
de la derecha, y en ste veremos inicialmente una pgina de presentacin. Se podr
acceder tambin aqu a las pginas creadas anteriormente, si se pulsa un enlace en el
frame de la izquierda.
Documento de definicin de los frames
Lo primero que tenemos que hacer es crear un documento HTML en el que
definiremos cuntas zonas va a haber, qu distribucin y tamao van a tener, y cul va
ser el contenido de cada una de ellas. En el ejemplo que vamos a desarrollar, la
pgina va a tener dos frames distribuidos en columnas (es decir, uno al lado del otro,
en vez de uno encima del otro, lo que sera una distribucin en filas). Con respecto al
tamao, haremos que el primero (el de la izquierda) ocupe el 20% del ancho de la
pantalla, y el otro, el 80% restante.
Y con respecto al contenido, el frame de la izquierda va a contener un documento
HTML que va a servir de ndice de lo que veamos en el otro (y que vamos a llamar
pagind.html), y el de la derecha otro documento HTML que va a servir de pgina de
presentacin (al que llamaremos pagpre.html). Todo lo anterior se refleja en el
siguiente documento HTML:
Ejemplo 9: Uso de frames
<HTML>
<HEAD>
<TITLE>Mipagina con frames</TITLE>
</HEAD>
<FRAMESET COLS="20%, 80%">
<FRAME SRC="mipagind.html">
<FRAME SRC="mipagpre.html" NAME="principal">
</FRAMESET>
</HTML>
Es un documento parecido a los que conocamos hasta ahora. La diferencia est en
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 (definir los frames).
En este caso, con la etiqueta <FRAMESET COLS="20%, 80%"> se define que va a
haber dos frames y que van a ir en columnas. Si hubiramos querido que fueran en
filas, habramos puesto ROWS (filas, en ingls). Tambin se define el espacio en

anchura que van a ocupar cada uno de ellos en la pantalla. Se ha puesto como
porcentajes del total, pero se podra tambin haber puesto una cifra absoluta, que
representara el nmero de pxeles a ocupar.
Ya se ha definido el nmero de frames, su distribucin y su tamao, pero falta por
definir el contenido de cada frame. Esto se hace con las etiquetas:
Con esto se define que el contenido del primer frame (el de la izquierda) sea el
documento HTML mipagind.html y el del segundo (el de la derecha) sea el documento
HTML mipagpre.html.
Obsrvese que en la etiqueta del segundo se ha incluido el atributo NAME="principal",
pero no as en el primero. El motivo es que se necesita dar un nombre al segundo
frame, pues, como veremos a continuacin, en el documento del primer frame va a
haber unos enlaces que van a ir dirigidos hacia l. En este caso slo tenemos dos
frames, pero podra haber ms, y es necesario distinguirlos unos de otros. Y el primero
no necesita nombre, pues no va a haber enlaces en el segundo dirigidos hacia l.
A este documento le vamos a llamar mipagina.html, pero todava no lo vamos a
guardar, pues falta por aadir algo que veremos ms adelante.
Documentos HTML de cada frame
Necesitamos ahora confeccionar el documento HTML de cada uno de los frames.
Documento del frame de la izquierda
Va a tener un fondo amarillo, y va a contener dos enlaces dirigidos al frame de la
derecha. Adems, como muestra de que se puede aadir cualquier cosa en un frame,
vamos a incluir este logo animado (glogoan2.gif):
<HTML>
<HEAD>
<TITLE>Indice</TITLE>
</HEAD>
<BODY
BGCOLOR="#FFBB00">
<P><A
HREF="mipagpre.html"
TARGET="principal">Presentacin</A>
<P><A
HREF="mipag13.html"
TARGET="principal">Mipgina</A>
<P><IMG
SRC="glogoan2.gif">
</BODY>
</HTML>
Dentro de las etiquetas de los enlaces podemos observar algo nuevo, y es el atributo
TARGET (en ingls: objetivo, blanco), que sirve para hacer que al ser activado el
enlace no se cargue en el propio frame, sino en otro, precisamente en el que hayamos
llamado con ese nombre en el documento de definicin de los frames.
En nuestro caso, le hemos dado el nombre de "principal" al frame de la derecha, y es
por tanto ah donde se van a cargar los documentos HTML.
Documento del frame de la derecha
Va a tener un fondo negro, y va a contener solamente un texto. En captulos
posteriores se irn aadiendo aqu ms cosas.
<HTML>
<HEAD>
<TITLE>Presentacion</TITLE>
</HEAD>
<BODY BGCOLOR="#000000" TEXT="#0000FF">
<CENTER>
<FONT SIZE=+3><STRONG>
<P>ESTA ES LA VERSION
<BR><FONT COLOR="#FF0000">CON FRAMES</FONT>
<BR>DE MI PAGINA
</STRONG>
</FONT>
</CENTER>
</BODY>
</HTML>
Guardamos este documento con el nombre de mipagpre.html
En teora no necesitamos nada ms. Slo queda un detalle: Qu ocurrira con los
navegadores que no soportan los frames? Pues que al desconocer las etiquetas
FRAMESET y FRAME del documento de definicin, no podra ejecutarlo y no podra
cargar la pgina.
Para estos casos est prevista la etiqueta <NOFRAMES> y </NOFRAMES>. Se
aaden al final del documento de definicin de los frames, y a se pone entre ambas lo
que queremos que vean los que acceden con un navegador que no soporta frames.
Puede incluso ser el cdigo HTML de una pgina completa (lo que normalmente va
entre las etiquetas <BODY> y </BODY>)
En nuestro caso, vamos a poner un mensaje advirtiendo de esta circunstancia, y
dirigiendo al usuario, con un enlace normal, hacia la pgina mipag13.html.
<NOFRAMES>
Estas utilizando un navegador que no soporta frames.
<P>Pulsa para visitar mi <A HREF="mipag13.html"> pgina</A>.
</NOFRAMES>
Lo incluimos dentro del documento de definicin de los frames, que hemos visto antes,
y que queda de esta manera:
Ejemplo 10: Incluyendo <noframes>
<HTML>
<HEAD>
<TITLE>Mipagina con frames</TITLE>
</HEAD>
<FRAMESET COLS="20%, 80%">
</FRAMESET>
<NOFRAMES>
Estas utilizando un navegador que no soporta frames.
<P>Pulsa para visitar mi <A HREF="mipag13.html"> pgina</A>.
</NOFRAMES>
</HTML>
1.2. CSS Cascade Style Sheets (Hojas de Estilo en Cascada)
Dentro del diseo de pginas web, se presenta esta como la vanguardia en cuanto a
definicin de estilos dentro de las plantillas de diseo. A travs de instrucciones en
cdigo HTML se definen los estndares del conjunto de pginas que conforman el
proyecto.
CSS2, como fue antes CSS1, se basa en una serie de reglas de diseo:
Compatibilidad hacia atrs y hacia adelante. Las aplicaciones del usuario CSS2
sern capaces de entender las hojas de estilo CSS1. Las aplicaciones del
usuario CSS1 podrn leer las hojas de estilo CSS2 y descartar las partes que
no entienden. Adems, las aplicaciones del usuario que no soporten CSS
sern capaces de mostrar los documentos estilsticamente mejorados. Por
supuesto, el efecto estilstico hecho posible por CSS no ser procesado, pero
todo el contenido ser presentado.
Complementariedad con documentos estructurados. Las hojas de estilo
complementan los documentos estructurados (ej., HTML y aplicaciones XML)
proveyendo informacin estilstica del texto marcado. Debe ser fcil cambiar la
hoja de estilo con poco o ningn impacto en el sistema de marcas.
Independencia del vendedor, la plataforma y el dispositivo. Las hojas de estilo

permiten a los documentos permanecer independientes del vendedor, la
plataforma y el dispositivo. Las mismas hojas de estilo son tambin
independientes del vendedor y la plataforma, pero CSS2 permite dirigir una
hoja de estilo a un grupo de dispositivos (ej., impresoras).
Mantenibilidad. Apuntando a una hoja de estilo desde los documentos, los
responsables de los sitios en la Web pueden simplificar el mantenimiento y
conservar un estilo y un efecto consistente a todo lo largo del sitio. Por ejemplo,
si el color del fondo de las pginas de una organizacin cambia, slo un
archivo necesita ser cambiado.
Simplicidad. CSS2 es ms compleja que CSS1, pero sigue siendo un lenguaje
de estilo simple que es humanamente legible y posible de escribir. Las
propiedades CSS se mantienen independientes unas de otras en la medida de
lo posible y generalmente slo hay un modo de conseguir un efecto
determinado.
Rendimiento de la red. CSS proporciona una compacta codificacin para
presentar los contenidos. Comparado con los archivos de imgenes o de audio
que son usados frecuentemente por los autores para conseguir ciertos efectos
en el procesamiento, las hojas de estilo, la mayora de las veces, disminuyen el
tamao del contenido. Adems, menos conexiones de la red tienen que ser
abiertas, lo cual ayuda a incrementar el rendimiento de la red.
Flexibilidad. Las CSS pueden ser aplicadas al contenido de varias maneras. La
caracterstica clave es la capacidad de formar una cascada de estilos con la
informacin especificada en la hoja de estilo predeterminada (aplicacin del
usuario), las hojas de estilo del usuario, las hojas de estilo vinculadas, el
encabezamiento del documento y en los atributos de los elementos que forman
el cuerpo del documento.
Riqueza. Proporcionando a los autores un abundante juego de efectos de
procesamiento, aumenta la riqueza de la Web como medio de expresin. Los
diseadores han estado ambicionando la funcionalidad comnmente
encontrada en los programas de edicin y de presentaciones grficas. Algunos
de los efectos requeridos entran en conflicto con la independencia del
dispositivo, pero CSS2 llega muy lejos satisfaciendo las demandas de los
diseadores.
Combinacin con lenguajes alternativos. El juego de propiedades de CSS
descriptas en esta especificacin conforman un slido modelo de aplicacin de
formatos para presentaciones visuales y auditivas. Este modelo puede ser
accedido mediante el lenguaje CSS, pero la combinacin con otros lenguajes
tambin es posible. Por ejemplo, un programa en JavaScript puede cambiar
dinmicamente el valor de la propiedad 'color' de un determinado elemento.
Accesibilidad. Varias caractersticas de CSS harn a la Web ms accesible
para los usuarios con discapacidades:
Las propiedades para controlar la apariencia de las fuentes permiten a los
autores eliminar las inaccesibles imgenes de texto renderizado.
Las propiedades de posicionamiento permite a los autores eliminar los
artilugios con el sistema de marcas (ej., imgenes invisibles) para forzar la
composicin.
La semntica de las reglas !important indica que los usuarios con particulares
requerimientos de presentacin pueden suplantar las hojas de estilo del autor.
El nuevo valor 'inherit' (heredado) para todas las propiedades mejora la
generalidad del funcionamiento en cascada y permite una ms fcil y
consistente sintona en el estilo.
El avanzado soporte de medios, incluyendo grupos de medios y los tipos de
medios braille, de relieve y tty permitirn a los usuarios y autores confeccionar
pginas para esos dispositivos.
Las propiedades auditivas ofrecen control sobre la salida de voz y audio.

Los selectores de atributos, la funcin 'attr()' y la propiedad 'content' brindan
acceso al contenido alterno.
Los contadores y la numeracin de secciones y prrafos pueden mejorar la
navegabilidad del documento y economizar espacio de sangrado (importante
en los dispositivos braille).
Las propiedades 'word-spacing' y 'text-indent' tambin eliminan la necesidad de
usar espacios en blanco extras en el documento.
Aqu Mostraremos cun fcil puede ser disear unas simples hojas de estilo. Para esta
gua, necesitar saber un poco del cdigo HTML y alguna terminologa bsica de
composicin grfica. Comenzamos con un pequeo documento HTML:
Ejemplo 1: HTML y CSS
<HTML>
<HEAD>
<TITLE>La Web de OscarCap</TITLE>
</HEAD>
<BODY>
<H1>La Web de OscarCap</H1>
<P>Esta página le ayudará a diseñarpáginas web.
</BODY>
</HTML>
Para establecer el color azul para el texto de los elementos H1, puede escribir la
siguiente regla CSS:
H1 { color: blue }
Una regla CSS consta de dos partes principales: un selector ('H1') y una declaracin
('color: blue'). La declaracin tiene dos partes: una propiedad ('color') y un valor
('blue').
La especificacin HTML 4.0 define de qu manera las reglas de las hojas de estilo
pueden especificarse para los documentos HTML: ya sea dentro del documento HTML
o a travs de una hoja de estilo externa. Para poner la hoja de estilo dentro del
documento, use el elemento STYLE:
Ejemplo 2:
Style
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE> ---- La Web de OscarCap ---- </TITLE>

<STYLE type="text/css">
H1 { color: blue }
</STYLE>
</HEAD>
<BODY>
<P>Esta página web te enseñará mucho.
</BODY>
</HTML>
Para una mayor flexibilidad, recomiendo que los diseadores especifiquen hojas de
estilo externas; ellas pueden cambiarse sin modificar el documento fuente HTML y
pueden compartirse entre varios documentos. Para vincular una hoja de estilo externa
puede usar el elemento LINK:
<HTML>
<HEAD>
<TITLE>La Web de OscarCap</TITLE>
<LINK rel="stylesheet" href="oscar.css" type="text/css">
</HEAD>
<BODY>
<P> Esta página web te enseñará mucho.
</BODY>
</HTML>
El elemento LINK especifica:
el tipo de vnculo: a una hoja de estilo ("stylesheet").
la ubicacin de la hoja de estilo a travs del atributo "href".
el tipo de hoja de estilo que se vincula: "text/css".
Para mostrar la ntima relacin entre una hoja de estilo y el sistema estructurado de
marcas, continuamos usando el elemento STYLE en esta gua. Agreguemos ms
colores:
Ejemplo 3:
Colores con CSS
<HTML>
<HEAD>
BODY { color: red }
H1 { color: blue }
</STYLE>
</HEAD>
<BODY>
</BODY>
</HTML>
La hoja de estilo contiene ahora dos reglas: la primera establece el color del elemento
BODY como 'red' , en tanto la segunda coloca el color del elemento H1 en 'blue'.
Como no se ha especificado ningn valor para el color del elemento P, ste heredar
el color de su elemento padre, es decir, BODY. El elemento H1 tambin es un
elemento hijo de BODY pero la segunda regla reemplaza el valor heredado. En CSS
existen a menudo tales conflictos entre diferentes valores y esta especificacin
describe cmo resolverlos.
CSS2 tiene ms de 100 propiedades diferentes, incluyendo 'color'. Veamos algunos

otros:
<HTML>
<HEAD>
BODY {
font-family: "Gill Sans", sans-serif;
font-size: 12pt;
margin: 3em;
}
</STYLE>
</HEAD>
<BODY>
</BODY>
</HTML>
Lo primero que se puede observar es que varias declaraciones se agrupan en un
bloque encerrado por llaves ({...}) y separado por un punto y coma, no obstante la
ltima declaracin tambin debe estar seguida por un punto y coma.
La primera declaracin en el elemento BODY establece la familia de fuentes "Gill
Sans". Si esa fuente no est disponible, el navegador del usuario usar la familia
'sans-serif' que es una de las cinco familias de fuentes genricas que todas las
aplicaciones del usuario reconocen. Los elementos hijos de BODY heredarn el valor
de la propiedad 'font-family'.
La segunda declaracin establece el tamao de la fuente del elemento BODY en 12
puntos. La unidad de medida "punto" es normalmente usada en la tipografa impresa
para indicar el tamao de la fuente y otras dimensiones. Es un ejemplo de unidad de
medida absoluta que no vara segn el entorno.
La tercera declaracin usa una unidad de medida relativa que vara de acuerdo a las
circunstancias. La unidad "eme" est relacionada con el tamao de la fuente del
elemento. En este caso el resultado es que el margen alrededor del elemento BODY
es tres veces mayor que el tamao de la fuente.
1.2.1. Sintaxis y tipos bsicos de datos en CSS
Esta seccin describe una gramtica (y reglas de anlisis con compatibilidad futura)
comn a cualquier versin de CSS (incluyendo CSS2). Las futuras versiones de CSS
adherirn a esta sintaxis central, aunque pueden agregar restricciones sintcticas
adicionales.
Comandos
Todos los niveles de CSS --nivel 1, nivel 2 y cualquier futuro nivel-- usan la misma
sintaxis central. Los diseadores pueden usar esta caracterstica para crear hojas de
estilo que funcionen con aplicaciones de usuario antiguas, mientras ejercitan tambin
las posibilidades de los niveles ms nuevos de CSS.
A nivel de lxico, las hojas de estilo CSS consisten de una secuencia de comandos. La
lista de comandos para CSS2 es la que sigue. Las definiciones usan expresiones
regulares al estilo de Lex. Los cdigos octales se refieren a ISO 10646. Como en Lex,
en caso de mltiples equivalencias, la equivalencia ms larga determina el comando.
Comando
Definicin
IDENT
{ident}
Comando
ATKEYWORD
STRING
HASH
NUMBER
PERCENTAGE
DIMENSION
Definicin
@{ident}
{string}
#{name}
{num}
{num}%
{num}{ident}
url${w}{string}{w}$
URI
|url${w}([!#$%&*-~]|{nonascii}|{escape})*{w}$
UNICODE-RANGE U\+[0-9A-F?]{1,6}(-[0-9A-F]{1,6})?
CDO
<!-CDC
-->
;
;
{
\{
}
\}
(
$
)
$
[
\[
]
\]
S
[ \r \f]+
COMMENT
\/\*[^*]*\*+([^/][^*]*\*+)*\/
FUNCTION
{ident}\(
INCLUDES
~=
DASHMATCH
|=
DELIM
cualquier otro carcter no equivalente con las reglas anteriores
Las macros entre llaves ({}) arriba son definidas como sigue:
Macro Definicin
Ident
{nmstart}{nmchar}*
name {nmchar}+
nmstart [a-zA-Z]|{nonascii}|{escape}
nonascii [^\0-\177]
unicode \\[0-9a-f]{1,6}[ \r \f]?
escape {unicode}|\\[ -~\200-\4177777]
nmchar [a-zA-Z0-9]|{nonascii}|{escape}
num
[0-9]+|[0-9]*\.[0-9]+
string {string1}|{string2}
string1 \"([ !#$%&(-~]|\\{nl}|\'|{nonascii}|{escape})*\"
string2 \'([ !#$%&(-~]|\\{nl}|\"|{nonascii}|{escape})*\'
nl
|\r |\r|\f
w
[ \r \f]*
Abajo est la sintaxis central para CSS. Las secciones siguientes describen cmo
usarla.
hoja de estilo
[ CDO | CDC | S | estamento ]*;
estamento
regla | regla-arroba;
regla-arroba
ATKEYWORD S* otros* [ bloque | ';' S* ];
bloque
'{' S* [ otros | bloque | ATKEYWORD S* | ';' ]* '}' S*;
regla
selector? '{' S* declaracin? [ ';' S* declaracin? ]* '}' S*;
selector
declaracin
propiedad
valor
otros
otros+;
propiedad ':' S* valor;
IDENT S*;
[ otros | bloque | ATKEYWORD S* ]+;
[ IDENT | NUMBER | PERCENTAGE | DIMENSION |
STRING | DELIM | URI | HASH | UNICODE-RANGE |
INCLUDES | FUNCTION | DASHMATCH | '(' otros* ')' | '['
otros* ']' ] S*;
Los comandos COMMENT no aparecen en la gramtica (para mantenerla legible),

pero cualquier cantidad de estos comandos pueden aparecer en cualquier lugar entre
otros comandos.
El comando S en la gramtica anterior est colocado para los espacios en blanco.
Solamente los caracteres "espacio" (cdigo 32 en Unicode), "tabulador" (9), "avance
de lnea" (10), "retorno de carro" (13) y "avance de hoja" (12) pueden aparecer en los
espacios en blanco. Otros caracteres que producen espacios, tales como "espacio
eme" (8195) y "espacio ideogrfico" (12288) nunca forman parte de los espacios en
blanco.
1.2.2. Palabras clave
Las palabras clave toman la forma de identificadores. Las palabras clave no deben ir
entre comillas ("..." o '...'). De este modo, red es una palabra clave, pero "red" no lo es.
(Es una cadena.)
Otros ejemplos ilcitos:
width: "auto";
border: "none";
font-family: "serif";
background: "red";
1.2.3. Caracteres y maysculas/minsculas
Las reglas siguientes siempre sostienen:
Todas las hojas de estilo CSS son insensibles a las maysculas/minsculas, excepto
para las partes que no estn bajo el control de CSS. Por ejemplo, la diferenciacin
entre maysculas y minsculas en los valores de los atributos HTML "id" y "class", los
nombres de las fuentes y los URI est fuera del alcance de esta especificacin.
Advierta en particular que los nombres de los elementos en HTML no hacen distincin
entre maysculas y minsculas, pero s lo hacen en XML.
En CSS2, los identificadores (incluyendo los nombres de los elementos, clases e ID de
los selectores) pueden contener slo caracteres [A-Za-z0-9] y los caracteres 161 en
adelante en ISO 10646, ms el guin (-); no pueden comenzar con un guin o un
nmero. Tambin pueden contener caracteres con escape y cualquier carcter de ISO
10646 en forma de cdigo numrico (ver el siguiente tem). Por ejemplo, el
identificador "B&W?" puede escribirse como "B\&W\?" o "B\26 W\3F".
Observe que Unicode es simtricamente equivalente a ISO 10646.
En CSS2, una barra invertida (\) indica tres tipos de caracteres de escape.
Primero, dentro de una cadena, una barra invertida seguida de una nueva lnea es
ignorada (es decir, la cadena se evala para no contener la barra invertida o la nueva
lnea).
Segundo, cancela el significado de los caracteres especiales de CSS. Cualquier
carcter (excepto un nmero hexadecimal) puede ser escapado con una barra
invertida para quitar su significado especial. Por ejemplo, "\"" es una cadena
consistente en una comilla doble. Los pre-procesadores de las hojas de estilo no
deben quitar estas barras invertidas de una hoja de estilo debido a que ello puede
cambiar el significado de la misma.
Tercero, el escape con barra invertida permite a los autores referirse a caracteres que
no pueden ponerse fcilmente en un documento. En este caso, la barra invertida es
seguida por hasta seis nmeros hexadecimales (0..9A..F), que representan el carcter
en ISO 10646 con ese nmero. Si un nmero o letra sigue al nmero hexadecimal, el
final del nmero debe ser aclarado.
Hay dos maneras de hacer eso:
Con un espacio (u otro carcter de espacio en blanco): "\26 B" ("&B") proporcionando
exactamente 6 nmeros hexadecimales: "\000026B" ("&B"). De hecho, estos dos
mtodos pueden combinarse. Slo un carcter de espacio en blanco es ignorado
despus del escape hexadecimal. Advierta que esto significa que un espacio "real"
despus de la secuencia de escape debe ir l mismo con escape o duplicado.
Los escapes con barra invertida son siempre considerados como parte de un
identificador o de una cadena (i.e., "\7B" no es una puntuacin, an cuando "{" s lo es,
y "\32" est permitido al comienzo el nombre de una clase, aunque "2" no lo est).
Referencias Bibliogrficas
Bert Bos (2012). Liderazgo de actividad de estilo. Recuperado el 12 de mayo
del 2013 en http://www.w3.org/Style/Examples/011/firstcss.es.html
Carlos Benavides (2002). Manual de CSS. Recuperado el 12 de mayo del 2013
en http://www.sidar.org/recur/desdi/mcss/manual/indice.php
Virtualnauta (2012). Tutorial de CSS. Recuperado el 08 de mayo del 2013 en
http://www.virtualnauta.com/css-introduccion
lvaro Martnez Echevarra (1995). Manual Prctico de HTML. Recuperado el
07 de mayo 2013 en http://www-app.etsit.upm.es/~alvaro/manual/manual.html
Antonio Berciano Alonso (1999). Gua HTML. Recuperado el 07 de mayo del
2013 en http://platea.pntic.mec.es/~abercian/guiahtml/index.html
Virtualnauta (2012). Tutorial de CSS. Recuperado el 08 de mayo del 2013 en
http://www.virtualnauta.com/css-introduccion
Lecturas Recomendadas
Para saber ms
Ponemos a tu disposicin y te invitamos a revisar dos interesantes documentos que te
ayudaran a reforzar y ampliar los temas que hemos estudiado, estos los encontrars
en la base de datos e-libros que utiliza nuestra universidad:
Documento 1: "GUIA INTRODUCCION HTML
Direccin: http://platea.pntic.mec.es/~abercian/guiahtml/index.html
Breve descripcin: Antonio Berciano Alonso, elabor una dinmica gua donde se
mostrar los conceptos bsicos sobre html y cmo se utiliza para crear pginas web.
Documento 2: TUTORIAL CSS

Direccin: http://www.virtualnauta.com/
Breve descripcin: Este breve tutorial est pensado para aquellas personas que
quieren comenzar a utilizar CSS y nunca han escrito una hoja de estilos CSS. Se
centra en cmo crear un archivo HTML, un archivo CSS y cmo hacer que los dos
funcionen juntos. Una vez finalizado este tutorial, podris leer cualquiera de los otros
tutoriales para darle ms estilo a los archivos HTML y CSS. Tambin podris utilizar
un editor de HTML o CSS, para desarrollar sitios Web ms avanzados.
Conclusiones
En esta primera semana se conoci la estructura bsica de un documento
HTML, la construccin de una pagina HTML utilizando los recursos
elementales y para darle estilo a la pgina web se us la CSS, que da como
resultado una mejor organizacin del cdigo HTML, menos pesos en las
pginas y ms flexibilidad y accesibilidad.
Sabemos que HTML no es el nico lenguaje de programacin, pero es el ms
fcil de usar y de aprender no solo por los programadores sino tambin por la
gente comn que desea compartir alguna informacin. El lenguaje de HTML
abri una puerta al mundo permitindoles a las personas expresar sus ideas
por medio de pginas y mostrrselas a todas las personas de del mundo.
Metacognicin
Las siguientes preguntas te ayudarn a reflexionar sobre tus propios aprendizajes, es
un ejerci recomendado para razonar e identificar nuestro esfuerzo intelectual, la
finalidad es regular nuestras acciones y procesos mentales
De la temtica abordada que te llam ms la atencin?
Consideras que aprendiste con los contenidos abordados?
Tuviste dificultad con algn tema o actividad? Cmo los solucionaste?
Qu acciones realizaste para aprender?

Tema 01

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Tema 01

Cargado por

Copyright:

Formatos disponibles

Tema 01: HTML Y CSS

1.1. HTML Hypertext Text Markup Language.

Es indiferente escribir las etiquetas en maysculas o minsculas. Pero se recomienda

ambigedad, ya que el navegador podra interpretarlos como el comienzo o final de

Enlaces con otra pgina nuestra

Si queremos que vaya a un sitio concreto de otra pgina nuestra en vez de ir al

<CENTER><H1> Mis paginas favoritas </H1></CENTER>

<P><INPUT TYPE="submit" VALUE="Enviar datos">

filas, habramos puesto ROWS (filas, en ingls). Tambin se define el espacio en

Independencia del vendedor, la plataforma y el dispositivo. Las hojas de estilo

Las propiedades auditivas ofrecen control sobre la salida de voz y audio.

<TITLE> ---- La Web de OscarCap ---- </TITLE>

CSS2 tiene ms de 100 propiedades diferentes, incluyendo 'color'. Veamos algunos

Los comandos COMMENT no aparecen en la gramtica (para mantenerla legible),

Documento 2: TUTORIAL CSS

También podría gustarte