Anexo1 HTML Css

Curso on-line
Editor de Pginas Web (NVU) / KompoZer
Anexo I: introduccin a HTML y CSS
Versin 1.0 Fecha: 01/11/2010
elaborado por
Este documento, as como el resto de material que compone el Curso, estn disponibles en la direccin: http://digitallearning.es/online , segn esta licencia Creative Commons
Curso on-line Editor Pginas Web KompoZer
Anexo I: HTML/CSS
ndice de contenido
Introduccin a HTML y CSS
Objetivos y alcance de este documento.........................................................................3 Analoga para describir HTML y CSS..............................................................................4 HTML........................................................................................................................8 Qu es HTML?......................................................................................................8 Elementos del HTML...............................................................................................9 Etiquetas ms comunes de HTML............................................................................11 Elementos de bloque y en lnea..............................................................................12 Tablas.................................................................................................................13 Creacin de pgina HTML.......................................................................................14 Otros elementos y caracteres especiales..................................................................14 Doctype...............................................................................................................18 Seccin <head>...................................................................................................18 CSS........................................................................................................................20 Qu son las hojas de estilo?.................................................................................20 Formas y preferencias al aplicar estilos....................................................................21 Modelo de Cajas...................................................................................................26 Propiedades CSS..................................................................................................28 Unidades de medida..............................................................................................29 Colores................................................................................................................29 Elementos HTML div y span...................................................................................31 Posicionamiento de cajas.......................................................................................32 Versiones HTML / XHTML...........................................................................................36
Elaborado por Digital Learning
2 de 37
Anexo I: HTML/CSS
Objetivos y alcance de este documento

Para sacar el mximo partido al editor de pginas web Kompozer, es aconsejable que conozcamos los elementos esenciales de los HTML y CSS. Nos ayudar a crear mejores pginas y a tener un mayor control sobre el diseo de las mismas. Alguien preguntar pero no aprende uno a utilizar un editor como Kompozer precisamente para evitar 'enredarse' con esos lenguajes? Bueno, en cierta manera s y no. S, en el sentido de que no tenemos porque tener memorizados o conocer al detalle todas las etiquetas y propiedades, sus atributos y sintaxis: el programa nos va ayudar en esta tarea de una manera muy intuitiva. Esa ayuda, en forma de botones, mens y en definitiva de una interfaz grfica fcil de entender, va a ser mucho ms productiva si intentemos comprender qu estamos haciendo, o mejor dicho, qu est haciendo el programa por nosotros. Adems, nos ayudar a construir pginas cada vez mejor diseadas. Vamos a ver que tanto HTML como CSS no son lenguajes de programacin sino de marcado, descriptivos de la estructura y presentacin de la pgina que creamos, y por tanto de mucha menor complejidad. Sus fundamentos y aplicacin estn al alcance de una persona sin especiales conocimientos informticos. En cualquier caso, los apartados que vienen a continuacin, no pretenden ser un tutorial completo de HTML/CSS. Es solo una introduccin para que nos sintamos cmodos, o al menos, no nos perdamos, trabajando con estos lenguajes a travs del editor KompoZer. A partir de aqu, nuestro consejo es que sigis aprendiendo para dominar mejor estos lenguajes. Hay mltiples recursos (cursos, libros, tutoriales, pginas web) disponibles sobre este tema. En la pgina de recomendaciones hemos recopilado algunos de inters.
3 de 37
Anexo I: HTML/CSS
Analoga para describir HTML y CSS

Vamos a emplear una analoga que nos puede ayudar a comprender mejor el papel de cada uno de estos lenguajes. Consideremos una noticia en un peridico que llega al redactor jefe tal como aparece en la imagen de abajo, como 'texto sin formato' (esta analoga no pretende ser un fiel reflejo del proceso de publicacin en un peridico, tan solo una situacin que podamos entender fcilmente). Vemos que el texto es legible, pero no es fcil comprenderlo, al menos en una primera lectura rpida. El redactor, para preparar la noticia para su publicacin marca con rotuladores la estructura de la misma: dnde empieza y acaba la noticia, y sus diferentes partes (titular, subttulo principal, la fuente de la que proviene la noticia y los distintos prrafos que la componen...). Una vez marcada su estructura, y de acuerdo a la pgina del peridico donde se vaya a publicar, el espacio que le vayan a dedicar y en general las normas de estilo de dicho peridico, se definir para esos elementos marcados que presentacin tendrn, como por ejemplo el diseo (o 'layout') o las tipografas a utilizar.
Ilustracin 1: formateando una noticia de un medio impreso. Analoga con HTML/CSS
4 de 37
Anexo I: HTML/CSS
Para comprender mejor la analoga que estamos planteando, este marcado a mano de la estructura o semntica del contenido de la noticia, podramos representarlo (o haberlo hecho) de una manera ms detallada, utilizando etiquetas de inicio y fin para cada elemento que ha identificado el editor. Para ello, utilizaremos brackets (parntesis angulados) '< >'.
Ilustracin 2: marcado de una noticia con etiquetas. Similitud con HTML
A partir de este ejemplo, veamos el paralelismo que guarda con HTML y CSS. Si nos fijamos en la siguiente imagen:
5 de 37
Anexo I: HTML/CSS
Ilustracin 3: Funciones del HTML y de CSS
el lenguaje HTML juega el papel de las marcas o anotaciones que realizaba el redactor: definen la estructura del documento, la semntica del contenido, lo que podramos denominar el marcado lgico del documento. Si vemos con ms detenimiento, las etiquetas que identifican el fin de un elemento llevan el caracter '/'. Podemos ver que marcamos un inicio y un fin de la noticia (o en este caso, pgina) con las marcas <html> y </html> respectivamente. Podemos adivinar tambin marcas para los elementos destacados de la noticia, distintos al cuerpo de la misma: <h1>, <h2>, <h3> y <h4> con sus respectivas acotaciones o finales: </hx>, que corresponden al titular, subttulo, autor y origen de la noticia. Tambin podemos distinguir etiquetas para los prrafos (<p>), otras que parecen definir secciones de la pgina (<div id=titulares, columna izquierda, columna derecha>) y otras que quizs ahora no entendamos del todo (<head>, <title>, <body>) y que iremos viendo. A partir de este marcado HTML, el lenguaje de hojas de estilo (CSS) nos permitira definir la presentacin o apariencia de dicha pgina web, mediante la aplicacin de determinadas reglas de estilo a cada elemento identificado en el contenido.
6 de 37
Anexo I: HTML/CSS
Comentario: en este ejemplo, el etiquetado no es exactamente igual al realizado por el redactor. Aparecen elementos que tienen ms que ver con la presentacin, como <div id=columna_izquierda> y el <div id=columna_derecha> y en cambio no vemos el mismo significado semntico que conseguamos con la etiqueta <fuente>. Ambas objeciones son correctas, pero recordemos que utilizamos una analoga, no una transcripcin literal, para ayudarnos a comprender el papel de HTML y CSS. Los divs 'columna' no marcan la estructura interna del documento, pero nos sirven para aplicar estilos posteriormente. HTML 'ayuda' en algunas funciones de presentacin (de hecho, hasta aparecer CSS, las ejerca l). En cualquier caso, no dice cmo hay que presentar esos 'bloques'; podra decidirse que columna_izquierda fuera arriba y columna_derecha abajo, o no haber hecho nada con ellos. Es CSS la que lo determina como se presentarn. Igual ocurre con <fuente>. Podramos haber definido un bloque con la etiqueta <div id=fuente> englobando a <h3> y <h4>. La flexibilidad de HTML, principalmente a travs de los identificadores 'class' e 'id' que podemos colocar en ciertas etiquetas (y que veremos ms adelante) le permite ir ms all, pero no vamos a profundizar para no apartarnos de lo que pretende ser un sencillo ejemplo introductorio
7 de 37
Anexo I: HTML/CSS
HTML
Qu es HTML?
Una vez presentados los conceptos generales, vamos a dar definiciones ms precisas. HTML son las siglas de: Lenguaje de Marcado (o Anotacin) de Hipertexto ('HyperText Markup Language') No es propiamente un lenguaje de programacin, sino de marcacin, diseado para estructurar documentos mediante etiquetas. Estas etiquetas no se visualizan, pero indican al navegador (recordemos, los programas que nos ayudan a visualizar las pginas web en Internet: Firefox, Internet Explorer,...) qu tipo de contenido es, para que pueda tratarlo/mostrarlo adecuadamente (por ejemplo: si es una cabecera, un prrafo o una tabla). Por supuesto esto incluye uno de los elementos principales, que de alguna manera es la sea de identidad del HTML: los enlaces de hipertexto, que conectan a esa pgina con otros pginas, permitiendo al usuario 'navegar' por ese sitio y por todos los sitios web a los que est enlazado utilizando el protocolo HTTP (*). Aunque originalmente el HTML permita tambin indicar el formato de presentacin, lo que denominamos marcado fsico, a partir de la versin 4, esa funcin se encomienda (**) a un lenguaje de presentacin especfico: CSS, al que se conoce como 'Hojas de Estilo'.
Nota (*): HTTP: Protocolo de Transferencia de Hipertexto (HyperText Transfer Protocol): es el sistema por el cul se envan las peticiones para acceder a una pgina web (el navegador/cliente) y la respuesta de esa web (servidor) remitiendo la informacin.
Nota (**): segn especificaciones del W3C, Consorcio de la WWW Organismo encargado de coordinar y establecer los estndares en Internet. Lo han definido muy acertadamente como 'la ONU de Internet': no siempre los actores principales, como las empresas que desarrollan software y que adems forman parte de l, siguen a rajatabla sus recomendaciones.
8 de 37
Anexo I: HTML/CSS
Elementos del HTML

Las pginas HTML se construyen con elementos que son identificados mediante etiquetas. Estos elementos pueden definir: 1) Los 'contenedores' principales de la propia pgina (algo as como el armazn) Toda pgina HTML debe tener al menos esta estructura:
Ilustracin 4: estructura de una pgina HTML
Nota: tambin es recomendable incluir antes de <html> el Doctype de la pgina (en xhtml es obligatorio). Lo veremos ms adelante.
2) Las distintas partes del contenido de la pgina: un encabezamiento un prrafo, una lista, una tabla, una imagen, un enlace,... (veremos ms adelante las ms comunes) 3) Informacin sobre la pgina (las meta-etiquetas 'metatags') que no se muestra por el navegador (p.ej.: el autor, descripcin, conjunto de caracteres empleados,...) Salvo algunas pocas excepciones, la parte de contenido que define una etiqueta se delimita mediante una etiqueta de apertura y otra de cierre:
9 de 37
Anexo I: HTML/CSS
Las etiquetas pueden incluir informacin adicional mediante los atributos, que permiten: Que un mismo elemento sea tratado de forma diferente. P.ej: <h1 style=font-family: Arial> (indica un tipo de fuente particular para h1)
Especificar algn valor necesario para ese elemento P.ej: <a href=http://www.digitallearning.es>UGR</a> (indica a qu pgina enlaza ese vnculo)
La estructura general de una etiqueta con atributos sera:
Ilustracin 5: estructura general de una etiqueta HTML
10 de 37
Anexo I: HTML/CSS
Etiquetas ms comunes de HTML

Vamos a listar algunas de las etiquetas ms utilizadas. Puedes consultar todas en algunas de las pginas que indicamos en http://www.delicious.com/tallercpep/html.
<title></title> <hx></hx> <p></p> <br> ( <br/> <hr> ( <hr/>) <div></div> <span></span> <table></table> <tr></tr> <td></td> <ul></ul> <ol></ol> <li></li> <img> ( <img />)
ttulo de la pgina que se muestra en el navegador encabezamientos de orden/nivel x=1, 2, 3, 4, 5 6 prrafo salto de lnea (no tiene etiqueta de cierre) lnea horizontal divisin de la pgina (define un rea/seccin como contenedor) selecciona / delimita una porcin de contenido tabla fila de la tabla celda de la tabla lista no numerada lista numerada cada elemento (item) de la lista Imagen. En esta etiqueta deberemos indicar cul es el fichero imagen que utilizamos. Para ello empleamos el atributo src (source: fuente), donde incluimos la URL (direccin) absoluta o relativa del fichero : <img src... />
Enlace. En esta etiqueta debemos indicar la pgina web a la que enlazamos. Para ello usamos el atributo href, donde incluimos la URL (direccin) absoluta o relativa de dicha pgina: <a href=...></a>. Tambin es posible crear enlaces internos a zonas dentro de la propia pgina con el atributo name.
<a></a>
<em></em> <strong></strong> 
texto enfatizado (itlica) texto enfatizado (negrita) Comentarios. Para insertar comentarios en la pgina (no se procesan ni se muestra en el navegador)
11 de 37
Anexo I: HTML/CSS
Comentario: algunas etiquetas de presentacin se descartaron en la versin HTML 4 (ver apartado versiones HTML) en favor del lenguaje CSS especfico para definir estilos. Aunque son 'obsoletas', los navegadores suelen visualizarlas bien y aunque cada vez menos, se siguen utilizando en muchos webs. Ejemplo destacado: la etiqueta <font> que define las caractersticas de la fuente. Aconsejamos introducir las etiquetas en minscula. Proporciona mayor claridad y uniformidad y cumple los estndares HTML y XHTML
Elementos de bloque y en lnea

Un concepto importante que influye en las propiedades y tratamiento de los elementos de contenidos, es la clasificacin que HTML hace de ellos en dos grupos: Elementos de bloque: empiezan en una nueva lnea y ocupan todo el espacio disponible hasta el final de la lnea. pueden contener elementos en lnea algunos pueden contener a su vez otro elementos de bloque (por ejemplo, el elemento div, que se utiliza como contenedor y que veremos ms adelante) los bloques se apilan de arriba a abajo, es decir, cada uno ocupa todo el ancho de la pgina, colocndose debajo del bloque que le precede en el cdigo (X)HTML. Ejemplos: encabezamientos, prrafos, listas, tablas, divisiones,..
Elementos en lnea: ocupan el espacio necesario para mostrar su contenido no pueden contener elementos de bloques siguen un flujo izquierda-derecha y arriba-abajo, es decir, se colocan al lado derecho del anterior elemento en lnea, salvo que no haya suficiente espacio disponible, en cuyo caso se colocarn debajo, lo ms a la izquierda posible. Ejemplos: enlaces, imgenes, nfasis,...
En el apartado de estilos (CSS), al explicar el modelo de cajas, volveremos sobre estas caractersticas y el tratamiento que tienen a la hora de disponer los elementos en la pgina.
12 de 37
Anexo I: HTML/CSS
Tablas
Por ser un elemento muy utilizado con mltiples opciones, vamos a hacer una breve resea de ellas. En la imagen vemos la representacin de una tabla muy simple, de dos filas y dos columnas, visualizando los elementos que corresponden a las etiquetas: <table> (tabla) <tr> ('table row', es decir, fila) <td> ('table data', celda).
Vemos que no existe ninguna etiqueta 'columna'. En su lugar empleamos las 'celdas' definidas en cada 'fila' para delimitarlas.
Ilustracin 6: visualizacin etiquetado de tablas en HTML
Adems de estos elementos bsicos, las tablas pueden contener otros como: <thead> (cabecera), <tbody> (seccin), <tfoot> (pi), <caption> (ttulo) <th> (celda de cabecera). Tambin pueden realizarse tablas con estructuras ms complejas, por ejemplo uniendo columnas o filas mediante los atributos colspan y rowspan, respectivamente, en la etiqueta <td>. Podemos asimismo, fijar los tamaos (anchuras, alturas, espacio entre celdas, ), tipo de bordes, fondos, y otra serie de propiedades. No vamos a entrar en todas las posibilidades que nos ofrecen las tablas ya que excede de esta breve introduccin. No obstante, con Kompozer, el tratamiento de las mismas es similar al que podemos tener en un procesador de texto avanzado, con opciones de men en la barra de herramientas, mens contextuales y otras ayudas que facilitan enormemente la tarea.
13 de 37
Anexo I: HTML/CSS
Creacin de pgina HTML

Para crear una pgina HTML simplemente debemos generar un documento de texto sin formato que incluya el contenido de la pgina, estructurado con las etiquetas adecuadas, y guardndolo con la extensin '.html' Aunque Kompozer ya nos guarda la pgina con dicha extensin, podramos hacer una prueba con algn editor de textos simple, como el 'Bloc de Notas' ( Notepad), que viene instalado por defecto en Windows o bien el Gedit que viene incorporado con el escritorio GNOME en Linux. Si utilizamos el Notepad, accedemos al programa en Inicio/Programas/Accesorios/Bloc de Notas y podemos crear esta sencilla pgina (prueba.html):
Ilustracin 7: fichero de texto guardado como pgina web
Otros elementos y caracteres especiales

Para finalizar esta rpida introduccin al etiquetado HTML, mostramos otro ejemplo de pgina Web, donde adems de encabezamientos y prrafos, incluimos algunos de los elementos ms usuales: Listas (en este caso no numerada) Imagen Enlace Tabla
14 de 37
Anexo I: HTML/CSS
Asimismo, se han incluido algunos caracteres especiales como 'espacios en blanco', smbolo '&', vocales acentuadas,...para los que necesitamos un tratamiento especial en HTML. Para ello podemos emplear los denominados 'Entidades de Caracteres HTML' que permiten resolver los siguientes problemas: emplear caracteres que tienen un significado en HTML y que por lo tanto podran confundirse con parte del lenguaje si los utilizamos tal cual en el texto: < > & ' poder introducir varios espacios en blanco seguidos, introducir caracteres/smbolos que no estn representados en nuestro teclado. emplear, con la seguridad de ser representados adecuadamente, caracteres del lenguaje que no pertenecen al conjunto mnimo comn ASCII. Por ejemplo en espaol las vocales acentuadas o la , particulares de nuestro idioma (o por ejemplo, la los acentos circunflejos en otros casos). Aunque en principio si utilizamos un conjunto de caracteres como UTF-8, stos estn contemplados, la pgina pasar por diferentes programas y sistemas operativos (navegador usuario, servidor web,...) y corre el riesgo de que algn eslabn de la cadena no se utilice dicha codificacin y la conversin no se haga correctamente.
En el propio texto de la pgina se explican sus caractersticas y como incluirlos con la expresin &cdigo; (si bien, es algo de los editores HTML, como Kompozer, hacen automticamente sin necesidad de que tengamos que recordar dichos cdigos)
Elementos div y span: aunque son elementos de HTML, dada su estrecha relacin con la aplicacin de estilos, los veremos en la seccin dedicada a CSS
15 de 37
Anexo I: HTML/CSS
Ilustracin 8: pgina web con caracteres especiales en su contenido (ver cdigo HTML en imagen siguiente)
16 de 37
Anexo I: HTML/CSS
Ilustracin 9: cdigo HTML correspondiente a la imagen anterior
17 de 37
Anexo I: HTML/CSS
Doctype
Al inicio de la pgina, antes de la etiqueta <html> KompoZer incluye una declaracin indicando que norma HTML XHTML seguimos y si lo hacemos de forma estricta o no, (segn lo hayamos definido previamente) para que el navegador la interprete adecuadamente. La ausencia de un Doctpe, podra hacer que algunas versiones de navegadores entren en lo que se denomina 'quirck mode' con una incorrecta visualizacin de la pgina (esta cuestin es un poco ms enrevesada de lo que comentamos aqu tan brevemente. Si quieres conocer ms detalles sobre esto puedes consultar: http://www.quirksmode.org/css/ o en http://www.cs.tut.fi/~jkorpela/quirks-mode.html). No debemos preocuparnos por lo farragoso de la expresin, un editor como Kompozer la colocar automticamente mediante una sencilla seleccin de men. Un ej.:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
En esta pgina de wikipedia (http://es.wikipedia.org/wiki/DOCTYPE) podemos ver las diferentes versiones de Doctype y su explicacin.
Al final de este documento hemos incluido un apartado, explicando brevemente las diferentes versiones de los lenguajes (HTML/XHTML)
Seccin <head>
Como indicamos al principio de esta introduccin, las pginas HTML se dividen en dos secciones: el cuerpo, delimitado por las etiquetas <body></body> y donde incluimos el contenido a visualizar en la pgina y una seccin cabecera, delimitado por las etiquetas <head></head>. En esta seccin <head>, incluimos meta-etiquetas con informacin acerca de la pgina, que no se visualiza en el navegador (salvo la etiqueta <title>, que aparece como ttulo de dicha pgina en la pestaa del navegador). En Kompozer veremos que estos datos se pueden configurar en un men de propiedades para que se introduzcan automticamente o bien, editarlos si queremos introducir algn cambio. Mostramos un ejemplo de algunas de estas meta-etiquetas:
18 de 37
Anexo I: HTML/CSS
Ilustracin 10: Meta-etiquetas en seccin <head>
19 de 37
Anexo I: HTML/CSS
CSS Qu son las hojas de estilo?

Una vez creada la estructura del documento y definido sus contenidos a nivel semntico con (X)HTML, podemos darle una apariencia y presentacin personalizada mediante la utilizacin de CSS (Hojas de Estilo en Cascada / 'Cascade Style Sheets' ). Con CSS podemos indicar el aspecto de cada elemento de la pgina, como por ejemplo, el tipo de letra de un ttulo, el color con que se mostrar un enlace o el interlineado de un prrafo o una lista. Tambin veremos que CSS puede posicionar y dimensionar los distintos bloques de la pgina, de forma que podamos establecer la disposicin de todos los elementos en la misma. Solo haremos una breve introduccin para ver los conceptos bsicos de CSS que nos ayuden a entender mejor el diseo y la construccin de Sitios Web.
Ilustracin 11: aplicacin de estilos de presentacin a una pgina web con CSS
20 de 37
Anexo I: HTML/CSS
Formas y preferencias al aplicar estilos

Las Hojas de Estilo ( Estilos) se pueden incluir de 3 formas diferentes: Estilo en lnea: definido dentro de las propias etiquetas HTML Hoja de estilo interna: en la seccin <head> del mismo documento HTML Hoja de estilo externa: en un archivo diferente al documento HTML
Por qu se denominan hojas de estilos 'en cascada'? Pues porque estas tres formas de incluir estilos no son excluyentes y pueden combinarse (por ejemplo, utilizando una hoja de estilos externa general e incluyendo estilos en lnea en algunas etiquetas del documento). En caso de conflicto, prevalece el estilo ms 'interno'. La prioridad es:
1 - estilo en linea --> 2 - hoja estilo interna --> 3 - hoja estilo externa
Ejemplos: 1. Estilo en lnea: <p style=color: blue; font-family: Tahoma;>Texto con fuente Tahoma azul</p> visualizacin:
Texto con fuente Tahoma azul
En el ejemplo de arriba, incluimos en una etiqueta prrafo <p>, el atributo 'style', cuyo valor son dos caractersticas de estilo de la fuente a mostrar: color azul y tipografa Tahoma.
21 de 37
Curso on-line Editor Pginas Web KompoZer 2. Hoja de estilo interna:
Anexo I: HTML/CSS
1. Incluimos las reglas de estilo entre las etiquetas: <style type=text/css>..................</style> 2. Elegimos el elemento (selector) al que queremos dar un determinado estilo de presentacin (en este caso 'p': los prrafos) e incluimos entre llaves {} las caractersticas que vamos a aplicarle:
p {font-family:...... ;
................... ; }
(acabadas en ';')
(podemos agrupar varios selectores (p,h1 {....}) y/o declaraciones) 3. Cada caracterstica (declaracin), se compone de una propiedad (p.ej. font-size - tamao de letra) y un valor (en este caso:'large' grande).
22 de 37
Anexo I: HTML/CSS
Ilustracin 12: estructura de una regla de estilo
23 de 37
Anexo I: HTML/CSS
3.
Hoja de estilo externa:
Incluimos la etiqueta <link> (enlace) en la cabecera del documento HTML. En ella se describe: rel: tipo de relacin; stylesheet: hoja de estilo href: la direccin URL donde se encuentra la hoja type: tipo de archivo (una CSS) Creamos un fichero de texto sin formato donde incluiremos las reglas de estilo que se aplicarn a ese documento HTML. El nombre del archivo (y su direccin) debe coincidir con el incluido en el atributo 'href' de la etiqueta <link>. Debe guardarse con la extensin '.css'
24 de 37
Anexo I: HTML/CSS
La utilizacin de CSS respecto a las antiguas etiquetas de estilo de HTML confiere importantes ventajas, adems de cumplir con los estndares y estructurar mejor los documentos. Dos de ellas son: la posibilidad de reutilizar las hojas para distintas pginas y facilitar el mantenimiento de un sitio web. Un simple ejemplo: podemos cambiar el tamao del texto de todos los prrafos modificando simplemente en el en el selector 'p' de la hoja de estilo, sin tener que cambiar en cada etiqueta <p> de cada pgina web.
25 de 37
Anexo I: HTML/CSS
Modelo de Cajas
Otra funcin muy importante de los estilos, es aplicar dimensiones y posicin a los elementos HTML, basndose en el denominado Modelo de cajas, uno de los conceptos fundamentales de CSS. Segn este modelo, los navegadores ven o tratan cada elemento en la pgina HTML como una caja rectangular. Recordemos que HTML diferencia dos tipos de elementos: bloques y en lnea. De acuerdo a esas caractersticas la representacin y disposicin de los mismos en una pgina sera del tipo que mostramos en la siguiente imagen:
26 de 37
Curso on-line Editor Pginas Web KompoZer Estas cajas se componen de diversos elementos:
Anexo I: HTML/CSS
CSS puede configurar las propiedades de estas cajas: dimensiones, espaciados de relleno interior (padding), borde, imagen de fondo, color de fondo y mrgenes, como veremos en el apartado siguiente.
Nota: este esquema de caja (contenido, padding, borde y margen) es tridimensional. Para completarlo, habra que aadir: 'imagen de fondo' y 'color de fondo'. Podemos verlo en este grfico: http://www.hicksdesign.co.uk/boxmodel
27 de 37
Anexo I: HTML/CSS
Propiedades CSS
Existen numerosas propiedades que pueden controlarse con CSS. No vamos a listar todos de forma exhaustiva, solo algunos ejemplos. En http://www.delicious.com/tallercpep/css indicamos algunos sitios web donde consultar la referencia completa de propiedades.
Fuentes
font-family: tipos (arial,verdana,...). Se puede especificar una lista de opciones. font-weight: grosor font-size: tamao font-style: estilo (itlica,..)
Texto
color: color text-decoration: efectos (subrayado,...) text-align: alineacin line-height: interlineado text-indent: tabulacin letterspacing:espaciado entre letras
Listas
list-style-type: tipo de vieta (crculo, cuadrado, nmero,letra...) list-style-image: utilizar imgenes en las vietas list-style-position: alineacin texto con vieta
Fondo
background-color: color background-image: poner una imagen background-repeat: como se repite la imagen de fondo (vertical,horizontal,..) backgroundposition: posicin imagen de fondo
Algunas propiedades relacionadas con el modelo de cajas
Contenido
width: anchura height: altura line-height: distancia entre lneas overflow:mayor que el espacio asignado (scroll, ocultar,mostrarl..)
Borde
border-width: anchura border-style: tipo (linea, puntos,guiones...) border-color: color
Padding y Mrgenes
padding: anchura de la zona de relleno margin: anchura de los mrgenes Pueden aplicarse valores distintos a cada lado: arriba (top), derecha (right), abajo (bottom), izquierda (left) Ejemplos: margin-top padding-right border-width-bottom border-style-left
28 de 37
Anexo I: HTML/CSS
Adems, CSS puede alterar el flujo normal en que se disponen estas cajas en la pgina, definiendo la forma en que se posicionarn y visualizarn, lo que nos permite establecer el layout de la misma. Lo veremos en el apartado de Posicionamiento.
Unidades de medida
Los valores para propiedades que tienen dimensin (p.ej.,tamao de letra, anchura de mrgenes/padding, grosor bordes,...), pueden definirse de forma muy diversa:
valores absolutos
Pixels (px) (relativa respecto a la resolucin de pantalla) Milmetros (mm) y centmetros (cm) Puntos (pt) y picas (pc) (1 pc = 12 pt) Pulgadas (in) (1 pulgada = 72 puntos)
valores relativos
Porcentajes (%) factor escala (em) (% y em, respecto al tamao de fuente del elemento padre. Ej: body: 14px --> h1: 1.2 em = 17px; h1: 150% = 21px) respecto a la altura de la letra 'x' (ex)
Expresiones:
(xx-/x-) small, medium, (x-/xx-) large, smaller, larger
Por el carcter de esta introduccin, no podemos ver en detalle todos los posibles valores que pueden tomar las diferentes propiedades. En cualquier caso, al trabajar con un editor de html como Kompozer. veremos que no es imprescindible (al igual que sucede con la sintaxis de las propiedades) conocer todas estas abreviaturas/expresiones, ya que podemos seleccionar los valores mediante mens.
Colores
Los colores en HTML/CSS se definen por una combinacin (suma) de los tres colores primarios: rojo, verde y azul (modelo RGB: red-green-blue). Los colores que podemos aplicar resultan de la combinacin de un valor (entre 0-255) de cada uno de estos 3 colores. Estas combinaciones pueden especificarse de formas distintas en CSS: Notacin en porcentaje: rgb(x%, y%, z%) (x,y,z entre 0-100): Ej: rgb(90%, 27%, 32%) Notacin absoluta decimal: rgb(x, y, z) (x,y,z entre 0-255). Ej: rgb(203, 0, 15) Notacin absoluta hexadecimal: #xxyyzz (xx,yy,zz entre 00 y ff): Ej.:#23a73f Con un nombre en ingls (no pueden utilizarse todos, solo un subconjunto. Ver tabla con palabras clave en la imagen ms abajo). Ej: red, blue....
29 de 37
Anexo I: HTML/CSS
Ilustracin 13: modelo RGB (imagen de Wikipedia)
Ilustracin 14: Colores definidos en CSS(Imagen procedente de la especificacin del W3C)
Al utilizar un editor web como Kompozer, podremos seleccionar visualmente los colores y convertir entre notaciones, sin necesidad de conocer estos cdigos. Adems, existen mltiples herramientas complementarias para gestionar los colores de un web
30 de 37
Anexo I: HTML/CSS
Elementos HTML div y span

Explicamos brevemente dos elementos HTML que nos permiten delimitar contenidos y reas en la pgina: span: permite delimitar un contenido interior mediante las etiquetas <span></span> y darle un estilo particular distinto al elemento en que se encuentra. Por ejemplo, escoger solo una parte de texto en un prrafo y darle otro formato: <p>Este prrafo <span style=color:red;>tiene esta parte de texto en rojo</span> y esta parte no.</p> Mostrara en el navegador:
Este prrafo tiene esta parte de texto en rojo y esta parte no.
div: es un elemento de bloque que permite delimitar contenedores (denominadas divisiones o capas) mediante las etiquetas <div></div>, pudiendo englobar mltiples elementos. Utilizando los elementos <div> con los atributos de identificacin 'id', podemos estructurar lgicamente nuestro documento, diferenciando distintas secciones dentro del mismo: cabecera, men, multicolumnas, pie... Con CSS, podemos aplicar a estas secciones dimensiones y posicionamiento en la pgina, es decir, configurar su visualizacin, rompiendo el flujo que siguen por defecto de acuerdo al modelo de cajas que vimos anteriormente. Esto nos permite maquetar la pgina, es decir, disear su presentacin estableciendo la disposicin de los distintos elementos en la misma (lo que se denomina layout). Describiremos este aspecto en un apartado posterior.
Atributos id y class
Podemos aplicar estilos a un conjunto particular de selectores utilizando los atributos 'class' e 'id' en las etiquetas HTML, permitindonos identificar elementos concretos en la pgina. class: incluyendo este atributo con un nombre (<selector class = nombre>) podemos aplicar estilos diferenciados a esos selectores, refirindonos a ellos en la hoja de estilo con: selector.nombre id: misma funcin que 'class' pero se utiliza para un nico elemento (<selector id=nombre>). En la hoja de estilo los identificamos con la expresin: selector#nombre
31 de 37
Anexo I: HTML/CSS
Ilustracin 15: atributo Class: modos y ejemplo de aplicacin
Posicionamiento de cajas
Como comentamos anteriormente, podemos alterar el flujo normal de la disposicin de las cajas mediante CSS. Para ello contamos con dos propiedades: position (posicionamiento) y float (posicionamiento flotante). Vamos a describir su funcionamiento a travs de los valore que pueden tomar: Position: esta propiedad se puede aplicar a cualquier elemento y permite establecer donde se mostrar ste en la pgina. Los valores que puede tomar son: static (esttico normal): es el valor por defecto. El elemento se posicionar segn el flujo normal del documento. (ver apartado elementos de bloque y en lnea) relative (relativo): se desplaza en los ejes horizontal y vertical respecto de su posicionamiento normal (valor static), segn el espacio que indiquemos. El resto de cajas no se ven alteradas en cuanto a su ubicacin. absolute (absoluto): se desplaza horizontal y/o verticalmente como el relativo pero con dos diferencias: la referencia la toma del primer elemento padre posicionado y la caja sale totalmente del flujo del documento, ses decir, otras ocupan el espacio que deja vaco al desplazarse. fixed: igual al absoluto salvo que la caja permanece inamovible en la ventana del navegador, aunque hagamos scroll en ella float: la describimos ms adelante
32 de 37
Anexo I: HTML/CSS
Como puede deducirse de su definicin, aplicar cualquiera de las tres ltimas propiedades puede producir solapamientos con otros elementos de la pgina. Para establecer cunto se mueve la caja, se utilizan las propiedades top, right, bottom, left (arriba, derecha, abajo, izquierda) con valores que pueden especificarse en unidades de medida absolutas o relativas. Para visualizar de forma genrica como se calcula ese desplazamiento, mostramos en la siguiente imagen un elemento (caja verde) con un movimiento referenciado a dos elementos distintos. Respecto al elemento body (representado por el rectngulo mayor con origen de coordenadas indicado por la cruceta en la parte superior izquierda de la imagen) se desplaza 18px a la derecha (right) y 10 px hacia abajo (down). Respecto al div central, se desplaza 6 px arriba (top) y 10px a la derecha (right).
Ilustracin 16: referencias de posicionamiento
Para consultar ms en detalle estas propiedades y visualizar su efecto en algunas imgenes, puedes consultar por ejemplo este captulo sobre posicionamiento de un libro on-line sobre CSS o el web de w3school.com (en ingls) donde podrs hacer incluso ejercicios interactivos.
33 de 37
Anexo I: HTML/CSS
Float: esta propiedad hace moverse al elemento tan a la izquierda o la derecha de la pgina como le sea posible, segn tenga el valor left o right respectivamente. Las caractersticas principales de este desplazamiento son: el elemento sale del flujo normal del documento; en ese momento el resto de cajas ocupan su lugar y a continuacin la caja flotante se posiciona lo ms a la izquierda o derecha posible segn se haya definido aunque la caja puede posicionarse sobre otra que haya ocupado su lugar, los elementos en lnea (por ejemplo el texto) hacen sitio y adaptan su anchura al espacio libre que deja esa caja flotante (lo que se denomina reflow, es decir, refluyen, como si depositaramos un elemento slido en la corriente de un fluido) si hay varias cajas flotantes, se respetan entre ellas la posicin, es decir, no hay solapamientos y se alinean segn su orden en el cdigo HTML. Por ejemplo, si hay 2 divs flotantes a la derecha, el primero que se define se sita a la derecha del todo, y el siguiente se pondr a su izquierda, pegada a la anterior (lo ms a la derecha posible) y si no tiene espacio en esa lnea, pasar a la derecha de la lnea siguiente. existe otra propiedad, clear (que en este caso podramos traducir por 'despejar'), que se utiliza normalmente en conjunto con float y que impide a un elemento que se posicione a un lado un otro o a ambos (valores right, left, both) de una caja flotante, pudindole obligar a que se desplace hacia abajo a una nueva lnea.
En la siguiente imagen, mostramos el ejemplo que citbamos del comportamiento de 3 cajas a las que se aplica la propiedad float con valor a la derecha. Puede consultarse ms en detalle en las mismas referencias que dbamos para la propiedad position
34 de 37
Anexo I: HTML/CSS
Ilustracin 17: aplicacin de la propiedad 'float'
35 de 37
Anexo I: HTML/CSS
Versiones HTML / XHTML

Desde 1989 en que se public la primera versin de HTML, ha habido una evolucin de este lenguaje, marcado principalmente por dos facetas: la incorporacin de nuevas etiquetas que permitieran ampliar la 'funcionalidad' del lenguaje (muchas de ellas, en un principio, fueron adopciones de caractersticas que iban incorporando de forma particular, fuera del estndar, los navegadores ms utilizados en el mercado como Netscape Navigator y posteriormente Microsoft IE). La separacin paulatina de las funciones de estructurar y presentar el contenido de las pginas web. En las primeras versiones, HTML comprenda ambas facetas y a partir de 1998, con HTML 4.0 se empiezan a separar, descartando muchas de las etiquetas relacionadas con la presentacin en favor de un nuevo lenguaje, el CSS 2 (hojas de estilo en cascada) al que se encomienda esta tarea.
En el ao 2000, se public un nuevo estndar: el XHTML 1.0, una adaptacin del HTML a las normas del XML (otro lenguaje de marcaje). XHTML es muy similar en sintaxis al HTML 4, aunque con una serie de reglas XML algo ms estrictas , entre otras, que las etiquetas han de escribirse en minsculas (*) (an podemos ver muchas pginas en HTML con etiquetas en maysculas, ya que ste no las diferencia de las minsculas. Para muchos autores de pginas web, cuando utilizaban editores sin resaltado de cdigo, se les haca ms fcil distinguir las etiquetas del contenido de esta forma). Actualmente conviven distintas 'variantes' en la ltima versin de HTML 4.01: TransitionalStrict y Frameset, las dos primeras relacionadas con la permisividad o restriccin de uso respectivamente de etiquetas de presentacin o fsicas, y el tercero regulando el uso de frames marcos (aunque no se recomienda la utilizacin de estos ltimos y por tanto, cada vez ms en desuso). En XHTML, tambin se dan las variantes Transitional y Strict, que admiten o no, respectivamente, algunos elementos de HTML 4. Adems se aprob la versin XHTML 1.1 (2001) que introduca el concepto de modularizacin, para facilitar la creacin de subconjuntos ms reducidos o para ampliar el lenguaje segn distintas necesidades, pero que ha tenido poca utilizacin. Para un prximo futuro, se est trabajando en fase de borrador en las nuevas versiones HTML 5, XHTML 2.0 y CSS3, si bien, la W3C decidi parar el avance de la nueva versin XHTML en favor de HTML 5. Algunos navegadores ya empiezan a incorporar algunas funcionalidades que se han propuesto en estas nuevas recomendaciones.
36 de 37
Anexo I: HTML/CSS
Respecto a qu versin conviene utilizar ahora para crear pginas, hay bastante discusin. La recomendaciones mayoritarias se centran lgicamente en las versiones HTML 4.01 XHTML 1.0 ambos en modo estricto (strict) si el web es nuevo y no tenemos necesidad de compatibilidad 'hacia atrs'. Aunque aparentemente el etiquetado en XHTML podra pensarse como ms recomendable, algunos programadores expusieron argumentos en contra, quizs demasiado tcnicos para alguien que empieza y no est suficientemente familiarizado con HTML y XML, pero que dejaba la cuestin ms en el aire. Adems, la ms que probable evolucin a HTML5, resta atractivo a la opcin XHTML (aunque siga siendo perfectamente vlida). Para los muy interesados pueden ver un par de artculos (en ingls) sobre este tema: Enviar XHTML como text/html, considerado peligroso (Send XHTML as text/html considered harmful) HTML o XHTML: importa de verdad? (HTML or XHTML: does it really matter?)
Resumen de versiones HTML 1.0 y 2.0 (1989, 1991) - HTML 3.0/3.2 (1995/1997): estructura + presentacin HTML 4.0 (1998) HTML 4.01 (1999): estructura + CSS 2 (1998): presentacin. En estas versiones de HTML se dan distintas variantes: XHTML 1.0 (2000): adaptacin del HTML a las normas del XML (otro lenguaje de marcaje). XHTML es muy similar en sintaxis al HTML 4.01, aunque con una serie de reglas XML algo ms estrictas . Tambin se dan las variantes Transitional y Strict (admite o no algunos elementos de HTML 4) XHTML 1.1 (2001): introduce el concepto de modularizacin para facilitar la creacin de subconjuntos ms reducidos o para ampliar el lenguaje segn distintas necesidades. HTML 5, XHTML 2.0 y CSS 3: estn an en fase borrador, si bien, la W3C decidi parar el avance de la nueva versin XHTML en favor de HTML 5. Algunos navegadores ya empiezan a incorporar algunas funcionalidades que se han propuesto en estas nuevas recomendaciones.
37 de 37

Anexo1 HTML Css

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

Anexo1 HTML Css

Cargado por

Copyright:

Formatos disponibles

Curso on-line

Editor de Pginas Web (NVU) / KompoZer

Anexo I: introduccin a HTML y CSS

Versin 1.0 Fecha: 01/11/2010

Curso on-line Editor Pginas Web KompoZer

Elaborado por Digital Learning

Curso on-line Editor Pginas Web KompoZer

Objetivos y alcance de este documento

Elaborado por Digital Learning

Curso on-line Editor Pginas Web KompoZer

Analoga para describir HTML y CSS

Ilustracin 1: formateando una noticia de un medio impreso. Analoga con HTML/CSS

Elaborado por Digital Learning

Curso on-line Editor Pginas Web KompoZer

Ilustracin 2: marcado de una noticia con etiquetas. Similitud con HTML

Elaborado por Digital Learning

Curso on-line Editor Pginas Web KompoZer

Ilustracin 3: Funciones del HTML y de CSS

Elaborado por Digital Learning

Curso on-line Editor Pginas Web KompoZer

Elaborado por Digital Learning

Curso on-line Editor Pginas Web KompoZer

Elaborado por Digital Learning

Curso on-line Editor Pginas Web KompoZer

Elementos del HTML

Ilustracin 4: estructura de una pgina HTML

Elaborado por Digital Learning

Curso on-line Editor Pginas Web KompoZer

La estructura general de una etiqueta con atributos sera:

Ilustracin 5: estructura general de una etiqueta HTML

Elaborado por Digital Learning

Curso on-line Editor Pginas Web KompoZer

Etiquetas ms comunes de HTML

<em></em> <strong></strong>

Elaborado por Digital Learning

Curso on-line Editor Pginas Web KompoZer

Elementos de bloque y en lnea

Elaborado por Digital Learning

Curso on-line Editor Pginas Web KompoZer

Ilustracin 6: visualizacin etiquetado de tablas en HTML

Elaborado por Digital Learning

Curso on-line Editor Pginas Web KompoZer

Creacin de pgina HTML

Ilustracin 7: fichero de texto guardado como pgina web

Otros elementos y caracteres especiales

Elaborado por Digital Learning

Curso on-line Editor Pginas Web KompoZer

Elaborado por Digital Learning

Curso on-line Editor Pginas Web KompoZer

Elaborado por Digital Learning

Curso on-line Editor Pginas Web KompoZer

Ilustracin 9: cdigo HTML correspondiente a la imagen anterior

Elaborado por Digital Learning

Curso on-line Editor Pginas Web KompoZer

Elaborado por Digital Learning

Curso on-line Editor Pginas Web KompoZer

Ilustracin 10: Meta-etiquetas en seccin <head>

Elaborado por Digital Learning

Curso on-line Editor Pginas Web KompoZer

CSS Qu son las hojas de estilo?

Elaborado por Digital Learning

Curso on-line Editor Pginas Web KompoZer

Formas y preferencias al aplicar estilos

Texto con fuente Tahoma azul