Your SlideShare is downloading. ×
Introducción a HTML y CSS
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Introducción a HTML y CSS

670

Published on

Guía rápida para entender los conceptos fundamentales de estos dos lenguajes y el papel que juegan en la creación de páginas web. Este documento forma parte del Curso sobre el editor de páginas web …

Guía rápida para entender los conceptos fundamentales de estos dos lenguajes y el papel que juegan en la creación de páginas web. Este documento forma parte del Curso sobre el editor de páginas web KompoZer, disponible gratuitamente en nuestra plataforma de e-learning: http://digitallearning.es/online

Published in: Education
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
670
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Curso on-line Editor de Páginas Web (NVU) / KompoZer Anexo I: introducción a HTML y CSS Versión 1.0 elaborado por Fecha: 01/11/2010 Este documento, así como el resto de material que compone el Curso, están disponibles en la dirección: http://digitallearning.es/online , según esta licencia Creative Commons
  • 2. Curso on-line “Editor Páginas Web KompoZer” Anexo I: HTML/CSS Índice de contenido Introducción a HTML y CSS Objetivos y alcance de este documento.........................................................................3 Analogía para describir HTML y CSS..............................................................................4 HTML........................................................................................................................8 ¿Qué es HTML?......................................................................................................8 Elementos del HTML...............................................................................................9 Etiquetas más comunes de HTML............................................................................11 Elementos de bloque y en línea..............................................................................12 Tablas.................................................................................................................13 Creación de página HTML.......................................................................................14 Otros elementos y caracteres especiales..................................................................14 Doctype...............................................................................................................18 Sección <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
  • 3. Curso on-line “Editor Páginas Web KompoZer” Anexo I: HTML/CSS Objetivos y alcance de este documento Para sacar el máximo partido al editor de páginas web Kompozer, es aconsejable que conozcamos los elementos esenciales de los HTML y CSS. Nos ayudará a crear mejores páginas y a tener un mayor control sobre el diseño 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, menús y en definitiva de una interfaz gráfica fácil de entender, va a ser mucho más productiva si intentemos comprender qué estamos haciendo, o mejor dicho, qué está haciendo el programa por nosotros. Además, nos ayudará a construir páginas cada vez mejor diseñadas. Vamos a ver que tanto HTML como CSS no son lenguajes de programación sino de marcado, descriptivos de la estructura y presentación de la página que creamos, y por tanto de mucha menor complejidad. Sus fundamentos y aplicación están al alcance de una persona sin especiales conocimientos informáticos. En cualquier caso, los apartados que vienen a continuación, no pretenden ser un tutorial completo de HTML/CSS. Es solo una introducción para que nos sintamos cómodos, o al menos, no nos perdamos, trabajando con estos lenguajes a través del editor KompoZer. A partir de aquí, nuestro consejo es que sigáis aprendiendo para dominar mejor estos lenguajes. Hay múltiples recursos (cursos, libros, tutoriales, páginas web) disponibles sobre este tema. En la página de recomendaciones hemos recopilado algunos de interés. Elaborado por Digital Learning 3 de 37
  • 4. Curso on-line “Editor Páginas Web KompoZer” Anexo I: HTML/CSS Analogía para describir HTML y CSS Vamos a emplear una analogía que nos puede ayudar a comprender mejor el papel de cada uno de estos lenguajes. Consideremos una noticia en un periódico que llega al redactor jefe tal como aparece en la imagen de abajo, como 'texto sin formato' (esta analogía no pretende ser un fiel reflejo del proceso de publicación en un periódico, tan solo una situación que podamos entender fácilmente). Vemos que el texto es legible, pero no es fácil comprenderlo, al menos en una primera lectura rápida. El redactor, para preparar la noticia para su publicación marca con rotuladores la estructura de la misma: dónde empieza y acaba la noticia, y sus diferentes partes (titular, subtítulo principal, la fuente de la que proviene la noticia y los distintos párrafos que la componen...). Una vez marcada su estructura, y de acuerdo a la página del periódico donde se vaya a publicar, el espacio que le vayan a dedicar y en general las normas de estilo de dicho periódico, se definirá para esos elementos marcados que presentación tendrán, como por ejemplo el diseño (o 'layout') o las tipografías a utilizar. Elaborado por Digital Learning 4 de 37 Ilustración 1: formateando una noticia de un medio impreso. Analogía con HTML/CSS
  • 5. Curso on-line “Editor Páginas Web KompoZer” Anexo I: HTML/CSS Para comprender mejor la analogía que estamos planteando, este marcado a mano de la estructura o semántica del contenido de la noticia, podríamos representarlo (o haberlo hecho) de una manera más detallada, utilizando etiquetas de inicio y fin para cada elemento que ha identificado el editor. Para ello, utilizaremos brackets (paréntesis angulados) '< >'. A partir de este ejemplo, veamos el paralelismo que guarda con HTML y CSS. Si nos fijamos en la siguiente imagen: Elaborado por Digital Learning 5 de 37 Ilustración 2: marcado de una noticia con etiquetas. Similitud con HTML
  • 6. Curso on-line “Editor Páginas Web KompoZer” Anexo I: HTML/CSS el lenguaje HTML juega el papel de las marcas o anotaciones que realizaba el redactor: definen la estructura del documento, la semántica del contenido, lo que podríamos denominar el marcado lógico del documento. Si vemos con más 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, página) con las marcas <html> y </html> respectivamente. Podemos adivinar también 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, subtítulo, autor y origen de la noticia. También podemos distinguir etiquetas para los párrafos (<p>), otras que parecen definir secciones de la página (<div id=”titulares”, “columna izquierda”, “columna derecha”>) y otras que quizás 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 permitiría definir la presentación o apariencia de dicha página web, mediante la aplicación de determinadas reglas de estilo a cada elemento identificado en el contenido. Elaborado por Digital Learning 6 de 37 Ilustración 3: Funciones del HTML y de CSS
  • 7. Curso on-line “Editor Páginas Web KompoZer” Anexo I: HTML/CSS Comentario: en este ejemplo, el etiquetado no es exactamente igual al realizado por el redactor. Aparecen elementos que tienen más que ver con la presentación, como <div id=”columna_izquierda> y el <div id=”columna_derecha”> y en cambio no vemos el mismo significado semántico que conseguíamos con la etiqueta <fuente>. Ambas objeciones son correctas, pero recordemos que utilizamos una analogía, no una transcripción 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 presentación (de hecho, hasta aparecer CSS, las ejercía él). En cualquier caso, no dice cómo hay que presentar esos 'bloques'; podría 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 presentarán. Igual ocurre con <fuente>. Podríamos haber definido un bloque con la etiqueta <div id=”fuente”> englobando a <h3> y <h4>. La flexibilidad de HTML, principalmente a través de los identificadores 'class' e 'id' que podemos colocar en ciertas etiquetas (y que veremos más adelante) le permite ir más allá, pero no vamos a profundizar para no apartarnos de lo que pretende ser un sencillo ejemplo introductorio Elaborado por Digital Learning 7 de 37
  • 8. Curso on-line “Editor Páginas Web KompoZer” Anexo I: HTML/CSS HTML ¿Qué es HTML? Una vez presentados los conceptos generales, vamos a dar definiciones más precisas. HTML son las siglas de: Lenguaje de Marcado (o Anotación) de Hipertexto ('HyperText Markup Language') No es propiamente un lenguaje de programación, sino de marcación, diseñado para estructurar documentos mediante etiquetas. Estas etiquetas no se visualizan, pero indican al navegador (recordemos, los programas que nos ayudan a visualizar las páginas web en Internet: Firefox, Internet Explorer,...) qué tipo de contenido es, para que pueda tratarlo/mostrarlo adecuadamente (por ejemplo: si es una cabecera, un párrafo o una tabla). Por supuesto esto incluye uno de los elementos principales, que de alguna manera es la seña de identidad del HTML: los enlaces de hipertexto, que conectan a esa página con otros páginas, 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 permitía también indicar el formato de presentación, lo que denominamos marcado físico, a partir de la versión 4, esa función se encomienda (**) a un lenguaje de presentación específico: CSS, al que se conoce como 'Hojas de Estilo'. Nota (*): HTTP: Protocolo de Transferencia de Hipertexto (HyperText Transfer Protocol): es el sistema por el cuál se envían las peticiones para acceder a una página web (el navegador/cliente) y la respuesta de esa web (servidor) remitiendo la información. Nota (**): según especificaciones del W3C, “Consorcio de la WWW” Organismo encargado de coordinar y establecer los estándares 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 además forman parte de él, siguen a rajatabla sus recomendaciones. Elaborado por Digital Learning 8 de 37
  • 9. Curso on-line “Editor Páginas Web KompoZer” Anexo I: HTML/CSS Elementos del HTML Las páginas HTML se construyen con elementos que son identificados mediante etiquetas. Estos elementos pueden definir: 1) Los 'contenedores' principales de la propia página (algo así como el armazón) Toda página HTML debe tener al menos esta estructura: Nota: también es recomendable incluir antes de <html> el Doctype de la página (en xhtml es obligatorio). Lo veremos más adelante. 2) Las distintas partes del contenido de la página: un encabezamiento un párrafo, una lista, una tabla, una imagen, un enlace,... (veremos más adelante las más comunes) 3) Información sobre la página (las meta-etiquetas ó 'metatags') que no se muestra por el navegador (p.ej.: el autor, descripción, 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: Elaborado por Digital Learning 9 de 37 Ilustración 4: estructura de una página HTML
  • 10. Curso on-line “Editor Páginas Web KompoZer” Anexo I: HTML/CSS Las etiquetas pueden incluir información 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 algún valor necesario para ese elemento P.ej: <a href=”http://www.digitallearning.es”>UGR</a> (indica a qué página enlaza ese vínculo) La estructura general de una etiqueta con atributos sería: Elaborado por Digital Learning 10 de 37 Ilustración 5: estructura general de una etiqueta HTML
  • 11. Curso on-line “Editor Páginas Web KompoZer” Anexo I: HTML/CSS Etiquetas más comunes de HTML Vamos a listar algunas de las etiquetas más utilizadas. Puedes consultar todas en algunas de las páginas que indicamos en http://www.delicious.com/tallercpep/html. <title></title> título de la página que se muestra en el navegador <hx></hx> encabezamientos de orden/nivel x=1, 2, 3, 4, 5 ó 6 <p></p> párrafo <br> (ó <br/> salto de línea (no tiene etiqueta de cierre) <hr> (ó <hr/>) línea horizontal <div></div> división de la página (define un área/sección como contenedor) <span></span> selecciona / delimita una porción de contenido <table></table> tabla <tr></tr> fila de la tabla <td></td> celda de la tabla <ul></ul> lista no numerada <ol></ol> lista numerada <li></li> cada elemento (item) de la lista <img> (ó <img />) Imagen. En esta etiqueta deberemos indicar cuál es el fichero imagen que utilizamos. Para ello empleamos el atributo src (source: fuente), donde incluimos la URL (dirección) absoluta o relativa del fichero : <img src”...” /> <a></a> Enlace. En esta etiqueta debemos indicar la página web a la que enlazamos. Para ello usamos el atributo href, donde incluimos la URL (dirección) absoluta o relativa de dicha página: <a href=”...”></a>. También es posible crear enlaces internos a zonas dentro de la propia página con el atributo name. <em></em> texto enfatizado (itálica) <strong></strong> texto enfatizado (negrita) <!-- --> Comentarios. Para insertar comentarios en la página (no se procesan ni se muestra en el navegador) Elaborado por Digital Learning 11 de 37
  • 12. Curso on-line “Editor Páginas Web KompoZer” Anexo I: HTML/CSS Comentario: algunas etiquetas de presentación se descartaron en la versión HTML 4 (ver apartado versiones HTML) en favor del lenguaje CSS específico 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 características de la fuente. Aconsejamos introducir las etiquetas en minúscula. Proporciona mayor claridad y uniformidad y cumple los estándares HTML y XHTML Elementos de bloque y en línea Un concepto importante que influye en las propiedades y tratamiento de los elementos de contenidos, es la clasificación que HTML hace de ellos en dos grupos: • Elementos de bloque: ◦ empiezan en una nueva línea y ocupan todo el espacio disponible hasta el final de la línea. ◦ pueden contener elementos en línea ◦ algunos pueden contener a su vez otro elementos de bloque (por ejemplo, el elemento div, que se utiliza como contenedor y que veremos más adelante) ◦ los bloques se apilan de arriba a abajo, es decir, cada uno ocupa todo el ancho de la página, colocándose debajo del bloque que le precede en el código (X)HTML. ◦ Ejemplos: encabezamientos, párrafos, listas, tablas, divisiones,.. • Elementos en línea: ◦ 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 línea, salvo que no haya suficiente espacio disponible, en cuyo caso se colocarán debajo, lo más a la izquierda posible. ◦ Ejemplos: enlaces, imágenes, énfasis,... En el apartado de estilos (CSS), al explicar el modelo de cajas, volveremos sobre estas características y el tratamiento que tienen a la hora de disponer los elementos en la página. Elaborado por Digital Learning 12 de 37
  • 13. Curso on-line “Editor Páginas Web KompoZer” Anexo I: HTML/CSS Tablas Por ser un elemento muy utilizado con múltiples opciones, vamos a hacer una breve reseña de ellas. En la imagen vemos la representación 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. Además de estos elementos básicos, las tablas pueden contener otros como: <thead> (cabecera), <tbody> (sección), <tfoot> (pié), <caption> (título) ó <th> (celda de cabecera). También pueden realizarse tablas con estructuras más complejas, por ejemplo uniendo columnas o filas mediante los atributos colspan y rowspan, respectivamente, en la etiqueta <td>. Podemos asimismo, fijar los tamaños (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 introducción. 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, menús contextuales y otras ayudas que facilitan enormemente la tarea. Elaborado por Digital Learning 13 de 37 Ilustración 6: visualización etiquetado de tablas en HTML
  • 14. Curso on-line “Editor Páginas Web KompoZer” Anexo I: HTML/CSS Creación de página HTML Para crear una página HTML simplemente debemos generar un documento de texto sin formato que incluya el contenido de la página, estructurado con las etiquetas adecuadas, y guardándolo con la extensión '.html' Aunque Kompozer ya nos guarda la página con dicha extensión, podríamos hacer una prueba con algún 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 página (prueba.html): Otros elementos y caracteres especiales Para finalizar esta rápida introducción al etiquetado HTML, mostramos otro ejemplo de página Web, donde además de encabezamientos y párrafos, incluimos algunos de los elementos más usuales: • Listas (en este caso no numerada) • Imagen • Enlace • Tabla Elaborado por Digital Learning 14 de 37 Ilustración 7: fichero de texto guardado como página web
  • 15. Curso on-line “Editor Páginas Web KompoZer” Anexo I: HTML/CSS Asimismo, se han incluido algunos caracteres especiales como 'espacios en blanco', símbolo '&', 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 podrían confundirse con parte del lenguaje si los utilizamos tal cual en el texto: < > & ' ” • poder introducir varios espacios en blanco seguidos, • introducir caracteres/símbolos que no están representados en nuestro teclado. • emplear, con la seguridad de ser representados adecuadamente, caracteres del lenguaje que no pertenecen al conjunto mínimo común ASCII. Por ejemplo en español 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 están contemplados, la página pasará por diferentes programas y sistemas operativos (navegador usuario, servidor web,...) y corre el riesgo de que algún eslabón de la cadena no se utilice dicha codificación y la conversión no se haga correctamente. En el propio texto de la página se explican sus características y como incluirlos con la expresión &código; (si bien, es algo de los editores HTML, como Kompozer, hacen automáticamente sin necesidad de que tengamos que recordar dichos códigos) Elementos div y span: aunque son elementos de HTML, dada su estrecha relación con la aplicación de estilos, los veremos en la sección dedicada a CSS Elaborado por Digital Learning 15 de 37
  • 16. Curso on-line “Editor Páginas Web KompoZer” Anexo I: HTML/CSS Elaborado por Digital Learning 16 de 37 Ilustración 8: página web con caracteres especiales en su contenido (ver código HTML en imagen siguiente)
  • 17. Curso on-line “Editor Páginas Web KompoZer” Anexo I: HTML/CSS Elaborado por Digital Learning 17 de 37 Ilustración 9: código HTML correspondiente a la imagen anterior
  • 18. Curso on-line “Editor Páginas Web KompoZer” Anexo I: HTML/CSS Doctype Al inicio de la página, antes de la etiqueta <html> KompoZer incluye una declaración indicando que norma HTML ó XHTML seguimos y si lo hacemos de forma estricta o no, (según lo hayamos definido previamente) para que el navegador la interprete adecuadamente. La ausencia de un Doctpe, podría hacer que algunas versiones de navegadores entren en lo que se denomina 'quirck mode' con una incorrecta visualización de la página (esta cuestión es un poco más enrevesada de lo que comentamos aquí tan brevemente. Si quieres conocer más 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 expresión, un editor como Kompozer la colocará automáticamente mediante una sencilla selección de menú. Un ej.: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> En esta página de wikipedia (http://es.wikipedia.org/wiki/DOCTYPE) podemos ver las diferentes versiones de Doctype y su explicación. Al final de este documento hemos incluido un apartado, explicando brevemente las diferentes versiones de los lenguajes (HTML/XHTML) Sección <head> Como indicamos al principio de esta introducción, las páginas HTML se dividen en dos secciones: el cuerpo, delimitado por las etiquetas <body></body> y donde incluimos el contenido a visualizar en la página y una sección cabecera, delimitado por las etiquetas <head></head>. En esta sección <head>, incluimos meta-etiquetas con información acerca de la página, que no se visualiza en el navegador (salvo la etiqueta <title>, que aparece como título de dicha página en la pestaña del navegador). En Kompozer veremos que estos datos se pueden configurar en un menú de propiedades para que se introduzcan automáticamente o bien, editarlos si queremos introducir algún cambio. Mostramos un ejemplo de algunas de estas meta-etiquetas: Elaborado por Digital Learning 18 de 37
  • 19. Curso on-line “Editor Páginas Web KompoZer” Anexo I: HTML/CSS Elaborado por Digital Learning 19 de 37 Ilustración 10: Meta-etiquetas en sección <head>
  • 20. Curso on-line “Editor Páginas Web KompoZer” Anexo I: HTML/CSS CSS ¿Qué son las hojas de estilo? Una vez creada la estructura del documento y definido sus contenidos a nivel semántico con (X)HTML, podemos darle una apariencia y presentación personalizada mediante la utilización de CSS (Hojas de Estilo en Cascada / 'Cascade Style Sheets' ). Con CSS podemos indicar el aspecto de cada elemento de la página, como por ejemplo, el tipo de letra de un título, el color con que se mostrará un enlace o el interlineado de un párrafo o una lista. También veremos que CSS puede posicionar y dimensionar los distintos bloques de la página, de forma que podamos establecer la disposición de todos los elementos en la misma. Solo haremos una breve introducción para ver los conceptos básicos de CSS que nos ayuden a entender mejor el diseño y la construcción de Sitios Web. Elaborado por Digital Learning 20 de 37 Ilustración 11: aplicación de estilos de presentación a una página web con CSS
  • 21. Curso on-line “Editor Páginas Web KompoZer” Anexo I: HTML/CSS Formas y preferencias al aplicar estilos Las Hojas de Estilo (ó Estilos) se pueden incluir de 3 formas diferentes: • Estilo en línea: definido dentro de las propias etiquetas HTML • Hoja de estilo interna: en la sección <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 línea en algunas etiquetas del documento). En caso de conflicto, prevalece el estilo más 'interno'. La prioridad es: 1ª - estilo en linea --> 2ª - hoja estilo interna --> 3ª - hoja estilo externa Ejemplos: 1. Estilo en línea: <p style=”color: blue; font-family: Tahoma;”>Texto con fuente Tahoma azul</p> visualización: Texto con fuente Tahoma azul En el ejemplo de arriba, incluimos en una etiqueta párrafo <p>, el atributo 'style', cuyo valor son dos características de estilo de la fuente a mostrar: color azul y tipografía Tahoma. Elaborado por Digital Learning 21 de 37
  • 22. Curso on-line “Editor Páginas Web KompoZer” Anexo I: HTML/CSS 2. Hoja de estilo interna: 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 presentación (en este caso 'p': los párrafos) e incluimos entre llaves “{}” las características que vamos a aplicarle: p {font-family:...... ; (acabadas en ';') …................... ; } (podemos agrupar varios selectores (p,h1 {....}) y/o declaraciones) 3. Cada característica (declaración), se compone de una propiedad (p.ej. font-size - tamaño de letra) y un valor (en este caso:'large' – grande). Elaborado por Digital Learning 22 de 37
  • 23. Curso on-line “Editor Páginas Web KompoZer” Anexo I: HTML/CSS Elaborado por Digital Learning 23 de 37 Ilustración 12: estructura de una regla de estilo
  • 24. Curso on-line “Editor Páginas Web KompoZer” 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 relación; “stylesheet”: hoja de estilo – href: la dirección 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 aplicarán a ese documento HTML. El nombre del archivo (y su dirección) debe coincidir con el incluido en el atributo 'href' de la etiqueta <link>. Debe guardarse con la extensión '.css' Elaborado por Digital Learning 24 de 37
  • 25. Curso on-line “Editor Páginas Web KompoZer” Anexo I: HTML/CSS La utilización de CSS respecto a las antiguas etiquetas de estilo de HTML confiere importantes ventajas, además de cumplir con los estándares y estructurar mejor los documentos. Dos de ellas son: la posibilidad de reutilizar las hojas para distintas páginas y facilitar el mantenimiento de un sitio web. Un simple ejemplo: podemos cambiar el tamaño del texto de todos los párrafos modificando simplemente en el en el selector 'p' de la hoja de estilo, sin tener que cambiar en cada etiqueta <p> de cada página web. Elaborado por Digital Learning 25 de 37
  • 26. Curso on-line “Editor Páginas Web KompoZer” Anexo I: HTML/CSS Modelo de Cajas Otra función muy importante de los estilos, es aplicar dimensiones y posición a los elementos HTML, basándose en el denominado Modelo de cajas, uno de los conceptos fundamentales de CSS. Según este modelo, los navegadores ven o tratan cada elemento en la página HTML como una caja rectangular. Recordemos que HTML diferencia dos tipos de elementos: bloques y en línea. De acuerdo a esas características la representación y disposición de los mismos en una página sería del tipo que mostramos en la siguiente imagen: Elaborado por Digital Learning 26 de 37
  • 27. Curso on-line “Editor Páginas Web KompoZer” Anexo I: HTML/CSS Estas cajas se componen de diversos elementos: CSS puede configurar las propiedades de estas cajas: dimensiones, espaciados de relleno interior (padding), borde, imagen de fondo, color de fondo y márgenes, como veremos en el apartado siguiente. Nota: este esquema de caja (contenido, padding, borde y margen) es tridimensional. Para completarlo, habría que añadir: 'imagen de fondo' y 'color de fondo'. Podemos verlo en este gráfico: http://www.hicksdesign.co.uk/boxmodel Elaborado por Digital Learning 27 de 37
  • 28. Curso on-line “Editor Páginas Web KompoZer” 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 Texto Listas Fondo font-family: tipos (arial,verdana,...). Se puede especificar una lista de opciones. font-weight: grosor font-size: tamaño font-style: estilo (itálica,..) color: color text-decoration: efectos (subrayado,...) text-align: alineación line-height: interlineado text-indent: tabulación letter- spacing:espaciado entre letras list-style-type: tipo de viñeta (círculo, cuadrado, número,letra...) list-style-image: utilizar imágenes en las viñetas list-style-position: alineación texto con viñeta background-color: color background-image: poner una imagen background-repeat: como se repite la imagen de fondo (vertical,horizontal,..) background- position: posición imagen de fondo Algunas propiedades relacionadas con el modelo de cajas Contenido Borde width: anchura height: altura line-height: distancia entre líneas overflow:mayor que el espacio asignado (scroll, ocultar,mostrarl..) border-width: anchura border-style: tipo (linea, puntos,guiones...) border-color: color Padding y Márgenes padding: anchura de la zona de relleno margin: anchura de los márgenes 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 Elaborado por Digital Learning 28 de 37
  • 29. Curso on-line “Editor Páginas Web KompoZer” Anexo I: HTML/CSS Además, CSS puede alterar el flujo normal en que se disponen estas cajas en la página, definiendo la forma en que se posicionarán y visualizarán, 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 dimensión (p.ej.,tamaño de letra, anchura de márgenes/padding, grosor bordes,...), pueden definirse de forma muy diversa: valores absolutos valores relativos Pixels (px) (relativa respecto a la resolución de pantalla) Milímetros (mm) y centímetros (cm) Puntos (pt) y picas (pc) (1 pc = 12 pt) Pulgadas (in) (1 pulgada = 72 puntos) Porcentajes (%) factor escala (em) (% y em, respecto al tamaño 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 carácter de esta introducción, 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 menús. Colores Los colores en HTML/CSS se definen por una combinación (suma) de los tres colores primarios: rojo, verde y azul (modelo RGB: red-green-blue). Los colores que podemos aplicar resultan de la combinación de un valor (entre 0-255) de cada uno de estos 3 colores. Estas combinaciones pueden especificarse de formas distintas en CSS: • Notación en porcentaje: rgb(x%, y%, z%) (x,y,z entre 0-100): Ej: rgb(90%, 27%, 32%) • Notación absoluta decimal: rgb(x, y, z) (x,y,z entre 0-255). Ej: rgb(203, 0, 15) • Notación absoluta hexadecimal: #xxyyzz (xx,yy,zz entre 00 y ff): Ej.:#23a73f • Con un nombre en inglés (no pueden utilizarse todos, solo un subconjunto. Ver tabla con palabras clave en la imagen más abajo). Ej: red, blue.... Elaborado por Digital Learning 29 de 37
  • 30. Curso on-line “Editor Páginas Web KompoZer” Anexo I: HTML/CSS Al utilizar un editor web como Kompozer, podremos seleccionar visualmente los colores y convertir entre notaciones, sin necesidad de conocer estos códigos. Además, existen múltiples herramientas complementarias para gestionar los colores de un web Elaborado por Digital Learning 30 de 37 Ilustración 13: modelo RGB (imagen de Wikipedia) Ilustración 14: Colores definidos en CSS(Imagen procedente de la especificación del W3C)
  • 31. Curso on-line “Editor Páginas Web KompoZer” Anexo I: HTML/CSS Elementos HTML div y span Explicamos brevemente dos elementos HTML que nos permiten delimitar contenidos y áreas en la página: • 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 párrafo y darle otro formato: <p>Este párrafo <span style=”color:red”;>tiene esta parte de texto en rojo</span> y esta parte no.</p> Mostraría en el navegador: Este párrafo 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 múltiples elementos. Utilizando los elementos <div> con los atributos de identificación 'id', podemos estructurar lógicamente nuestro documento, diferenciando distintas secciones dentro del mismo: cabecera, menú, multicolumnas, pie... Con CSS, podemos aplicar a estas secciones dimensiones y posicionamiento en la página, es decir, configurar su visualización, rompiendo el flujo que siguen por defecto de acuerdo al modelo de cajas que vimos anteriormente. Esto nos permite maquetar la página, es decir, diseñar su presentación estableciendo la disposición 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, permitiéndonos identificar elementos concretos en la página. • class: incluyendo este atributo con un nombre (<selector class = ”nombre”>) podemos aplicar estilos diferenciados a esos selectores, refiriéndonos a ellos en la hoja de estilo con: selector.nombre • id: misma función que 'class' pero se utiliza para un único elemento (<selector id=”nombre”>). En la hoja de estilo los identificamos con la expresión: selector#nombre Elaborado por Digital Learning 31 de 37
  • 32. Curso on-line “Editor Páginas Web KompoZer” Anexo I: HTML/CSS Posicionamiento de cajas Como comentamos anteriormente, podemos alterar el flujo normal de la disposición de las cajas mediante CSS. Para ello contamos con dos propiedades: position (posicionamiento) y float (posicionamiento flotante). Vamos a describir su funcionamiento a través de los valore que pueden tomar: • Position: esta propiedad se puede aplicar a cualquier elemento y permite establecer donde se mostrará éste en la página. Los valores que puede tomar son: ◦ static (estático ó normal): es el valor por defecto. El elemento se posicionará según el flujo normal del documento. (ver apartado elementos de bloque y en línea) ◦ relative (relativo): se desplaza en los ejes horizontal y vertical respecto de su posicionamiento normal (valor static), según el espacio que indiquemos. El resto de cajas no se ven alteradas en cuanto a su ubicación. ◦ 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 vacío 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 más adelante Elaborado por Digital Learning 32 de 37 Ilustración 15: atributo Class: modos y ejemplo de aplicación
  • 33. Curso on-line “Editor Páginas Web KompoZer” Anexo I: HTML/CSS Como puede deducirse de su definición, aplicar cualquiera de las tres últimas propiedades puede producir solapamientos con otros elementos de la página. Para establecer cuánto 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 genérica 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 rectángulo 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). Para consultar más en detalle estas propiedades y visualizar su efecto en algunas imágenes, puedes consultar por ejemplo este capítulo sobre posicionamiento de un libro on-line sobre CSS o el web de w3school.com (en inglés) donde podrás hacer incluso ejercicios interactivos. Elaborado por Digital Learning 33 de 37 Ilustración 16: referencias de posicionamiento
  • 34. Curso on-line “Editor Páginas Web KompoZer” Anexo I: HTML/CSS • Float: esta propiedad hace moverse al elemento tan a la izquierda o la derecha de la página como le sea posible, según tenga el valor left o right respectivamente. Las características 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 continuación la caja flotante se posiciona lo más a la izquierda o derecha posible según se haya definido ◦ aunque la caja puede posicionarse sobre otra que haya ocupado su lugar, los elementos en línea (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 sólido en la corriente de un fluido) ◦ si hay varias cajas flotantes, se respetan entre ellas la posición, es decir, no hay solapamientos y se alinean según su orden en el código HTML. Por ejemplo, si hay 2 divs flotantes a la derecha, el primero que se define se sitúa a la derecha del todo, y el siguiente se pondrá a su izquierda, pegada a la anterior (lo más a la derecha posible) y si no tiene espacio en esa línea, pasará a la derecha de la línea siguiente. ◦ existe otra propiedad, clear (que en este caso podríamos 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, pudiéndole obligar a que se desplace hacia abajo a una nueva línea. En la siguiente imagen, mostramos el ejemplo que citábamos del comportamiento de 3 cajas a las que se aplica la propiedad float con valor a la derecha. Puede consultarse más en detalle en las mismas referencias que dábamos para la propiedad position Elaborado por Digital Learning 34 de 37
  • 35. Curso on-line “Editor Páginas Web KompoZer” Anexo I: HTML/CSS Elaborado por Digital Learning 35 de 37 Ilustración 17: aplicación de la propiedad 'float'
  • 36. Curso on-line “Editor Páginas Web KompoZer” Anexo I: HTML/CSS Versiones HTML / XHTML Desde 1989 en que se publicó la primera versión de HTML, ha habido una evolución de este lenguaje, marcado principalmente por dos facetas: • la incorporación de nuevas etiquetas que permitieran ampliar la 'funcionalidad' del lenguaje (muchas de ellas, en un principio, fueron adopciones de características que iban incorporando de forma particular, fuera del estándar, los navegadores más utilizados en el mercado como Netscape Navigator y posteriormente Microsoft IE). • La separación paulatina de las funciones de estructurar y presentar el contenido de las páginas web. En las primeras versiones, HTML comprendía ambas facetas y a partir de 1998, con HTML 4.0 se empiezan a separar, descartando muchas de las etiquetas relacionadas con la presentación en favor de un nuevo lenguaje, el CSS 2 (hojas de estilo en cascada) al que se encomienda esta tarea. En el año 2000, se publicó un nuevo estándar: el XHTML 1.0, una adaptación 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 más estrictas , entre otras, que las etiquetas han de escribirse en minúsculas (*) (aún podemos ver muchas páginas en HTML con etiquetas en mayúsculas, ya que éste no las diferencia de las minúsculas. Para muchos autores de páginas web, cuando utilizaban editores sin resaltado de código, se les hacía más fácil distinguir las etiquetas del contenido de esta forma). Actualmente conviven distintas 'variantes' en la última versión de HTML 4.01: Transitional- Strict y Frameset, las dos primeras relacionadas con la permisividad o restricción de uso respectivamente de etiquetas de presentación o físicas, y el tercero regulando el uso de frames ó marcos (aunque no se recomienda la utilización de estos últimos y por tanto, cada vez más en desuso). En XHTML, también se dan las variantes Transitional y Strict, que admiten o no, respectivamente, algunos elementos de HTML 4. Además se aprobó la versión XHTML 1.1 (2001) que introducía el concepto de modularización, para facilitar la creación de subconjuntos más reducidos o para ampliar el lenguaje según distintas necesidades, pero que ha tenido poca utilización. Para un próximo 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 versión XHTML en favor de HTML 5. Algunos navegadores ya empiezan a incorporar algunas funcionalidades que se han propuesto en estas nuevas recomendaciones. Elaborado por Digital Learning 36 de 37
  • 37. Curso on-line “Editor Páginas Web KompoZer” Anexo I: HTML/CSS Respecto a qué versión conviene utilizar ahora para crear páginas, hay bastante discusión. La recomendaciones mayoritarias se centran lógicamente 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 atrás'. Aunque aparentemente el etiquetado en XHTML podría pensarse como más recomendable, algunos programadores expusieron argumentos en contra, quizás demasiado técnicos para alguien que empieza y no esté suficientemente familiarizado con HTML y XML, pero que dejaba la cuestión más en el aire. Además, la más que probable evolución a HTML5, resta atractivo a la opción XHTML (aunque siga siendo perfectamente válida). Para los muy interesados pueden ver un par de artículos (en inglés) 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 + presentación • HTML 4.0 (1998) HTML 4.01 (1999): estructura + CSS 2 (1998): presentación. En estas versiones de HTML se dan distintas variantes: • XHTML 1.0 (2000): adaptación 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 más estrictas . También se dan las variantes Transitional y Strict (admite o no algunos elementos de HTML 4) • XHTML 1.1 (2001): introduce el concepto de modularización para facilitar la creación de subconjuntos más reducidos o para ampliar el lenguaje según distintas necesidades. • HTML 5, XHTML 2.0 y CSS 3: están aún en fase borrador, si bien, la W3C decidió parar el avance de la nueva versión XHTML en favor de HTML 5. Algunos navegadores ya empiezan a incorporar algunas funcionalidades que se han propuesto en estas nuevas recomendaciones. Elaborado por Digital Learning 37 de 37

×