), otras que parecen definir secciones de la página (
('table data', celda). Vemos que no existe ninguna etiqueta 'columna'. En su lugar empleamos las 'celdas' definidas en cada 'fila' para delimitarlas. Ilustración 6: visualización etiquetado de tablas en HTML Además Además de estos estos elemen elementos tos básic básicos, os, las tablas tablas pueden pueden conten contener er otros otros como: como: > (cabecera), | (celda de cabecera). Tambié También n pueden pueden realiz realizars arse e tablas tablas con estruc estructur turas as más comple complejas jas,, por ejempl ejemplo o uniend uniendo o columnas o filas mediante los atributos colspan y rowspan, rowspan, respectivamente, en la etiqueta | . 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 por Digital Learning 13 de 37 Curso on-line “Editor Páginas Web KompoZer” Anexo I: HTML/CSS Creación de página HTML Para Para crear crear una página página HTML HTML simpl simplemen emente te debemo debemos s genera generarr un docume documento nto de texto 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 ' Bloc de Notas' Notas' (ó Notepad ), ), que viene instalado por defecto en Windows o bien el Gedit que viene incorporado con el escritorio GNOME en Linux. Si utiliz utilizamo amos s el Notepad , accedem accedemos os al program programa a en Inicio/Programas/Accesorios/ Inicio/Programas/Accesorios/Bloc Bloc de Notas y podemos crear esta sencilla página (prueba.html): Ilustración 7: fichero de texto guardado como página web 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 por Digital Learning 14 de 37 Curso on-line “Editor Páginas Web KompoZer” Anexo I: HTML/CSS Asimismo, se han incluido algunos caracteres especiales como 'espacios 'espacios en blanco', 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 e n nuestro teclado. • emplea emplear, r, con la seguri seguridad dad de ser represen representad tados os adecua adecuadam dament ente, e, caract caracteres eres del lenguaje lenguaje que no pertenecen al conjunto conjunto mínimo mínimo común ASCII. Por ejemplo ejemplo en español 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 caracteres como UTF-8, UTF-8, éstos están contemplados, contemplados, la página página pasará pasará por diferentes 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 propi propio o text texto o de la pági página na se expli explica can n sus sus cara caract cterí eríst stic icas as y como como incl inclui uirl rlos os con con la expresión & código; código; (si (si bien bien,, es algo algo de los los edit editor ores es HTML HTML,, como como Komp Kompoz ozer er,, hace hacen n automáticamente sin necesidad de que tengamos que recordar dichos códigos) Elementos div y span: aunque son elementos de HTML, dada su estr estrec echa ha relac relació ión n con con la apli aplica caci ción ón de esti estilo los, s, los los verem veremos os en la sección dedicada a CSS Elaborado por Digital por Digital Learning 15 de 37 Curso on-line “Editor Páginas Web KompoZer” Anexo I: HTML/CSS Ilustración 8: página web con caracteres caracteres especiales en su su contenido (ver código código HTML en imagen siguiente) Elaborado por Digital por Digital Learning 16 de 37 Curso on-line “Editor Páginas Web KompoZer” Anexo I: HTML/CSS Ilustración 9: código HTML correspondiente a la imagen anterior Elaborado por Digital por Digital Learning 17 de 37 Curso on-line “Editor Páginas Web KompoZer” Anexo I: HTML/CSS Doctype Al inicio de la página página,, antes antes de la etiquet etiqueta a KompoZe KompoZerr incluy incluye e 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 'quirck mode' 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). 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.: "> En esta esta pá pági gina na de wi wiki kipe pedi dia a (http://e (http://es.wik s.wikipedia ipedia.org/ .org/wiki/ wiki/DOCTYP DOCTYPE) E) podemos 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 Como Como indi indica camo mos s al princ princip ipio io de esta esta intr introd oduc ucci ción ón,, las las pági página nas s HTML HTML se divi dividen den en dos secciones: secciones: el cuerpo, delimit delimitado ado por las etiquetas etiquetas > y donde incluimos incluimos el conten contenido ido a visual visualiza izarr en la página página y una secci sección ón cabecer cabecera, a, delimi delimitad tado o por las etique etiquetas tas . En esta sección , incluimos incluimos meta-etiqu meta-etiquetas etas con información información acerca de la página, página, que no se visualiza en el navegador (salvo la etiqueta Elaborado por Digital por Digital Learning 18 de 37 Curso on-line “Editor Páginas Web KompoZer” Anexo I: HTML/CSS Ilustración 10: Meta-etiquetas en sección Elaborado por Digital por Digital Learning 19 de 37 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á mostrará un enlace enlace o el interlineado interlineado de un párrafo 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. Ilustración 11: aplicación de estilos de presentación a una página web con CSS Elaborado por Digital por Digital Learning 20 de 37 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: línea: definido dentro de las propias etiquetas HTML • Hoja de estilo interna: interna : en la sección del mismo documento HTML • Hoja de estilo externa: externa : en un archivo diferente al documento HTML ¿Por qué se denominan hojas de estilos ' en cascada'? 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 línea en algunas etiquetas 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: Tahoma;” >Texto con fuente Tahoma azul azul visualización: Texto con fuente Tahoma azulEn el ejemplo de arriba, incluimos en una etiqueta párrafo , el atributo 'style', cuyo valor son dos características de estilo de la fuente a mostrar: color azul y tipografía Tahoma. de cada página web. Este párrafo style=”color:red”;>tiene esta parte de texto en rojo y esta parte no. Mostraría en el navegador: Este párrafo tiene esta parte de texto en rojo y esta parte no . • div: div: es un elemen elemento to de bloque bloque que permite permite delimi delimitar tar conten contenedo edores res (denom (denomina inadas das divisiones o capas) mediante las etiquetas , pudiendo englobar múltiples elementos. Utiliz Utilizand ando o los element elementos os con los atribu atributos tos de identi identific ficaci ación ón 'id', 'id', podemo podemos s estructurar estructurar lógicament lógicamente e nuestro nuestro documento, documento, diferencia diferenciando ndo distintas distintas secciones secciones dentro del mismo: cabecera, menú, multicolumnas, pie... Con CSS, CSS, podemos podemos aplica aplicarr a estas estas seccio secciones nes dimens dimension iones es y posici posiciona onamie miento nto 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 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). 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: class: incluyendo este atributo con un nombre (< selector class selector class = ”nombre”>) podemos aplicar estilos diferenciados a esos selectores, refiriéndonos a ellos en la hoja de estilo con: selector .nombre id: id: mism misma a func funció ión n que que 'cla 'class ss'' pero pero se util utiliz iza a para para un ún únic ico o elem element ento o ( Elaborado por Digital por Digital Learning 31 de 37 Curso on-line “Editor Páginas Web KompoZer” Anexo I: HTML/CSS Ilustración 15: atributo Class: modos y ejemplo de aplicación 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: Position: esta propiedad se puede aplicar a cualquier elemento y permite establecer dond donde e se mos mostrar trará á ést éste en la pági págin na. Los valor alores es que que pued puede e tomar omar son: son: ◦ ◦ ◦ ◦ ◦ static (estático ó normal): es el valor por defecto. de fecto. El elemento se posicionará según el flujo normal del documento. (ver ( 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: fixed: igual al absoluto salvo que la caja permanece inamovible en la ventana del navegador, aunque hagamos scroll en scroll en ella float: float: la Elaborado por Digital por Digital Learning describimos más adelante 32 de 37 Curso on-line “Editor Páginas Web KompoZer” Anexo I: HTML/CSS Como Como pued puede e dedu deduci cirs rse e de su defin definic ició ión, n, apli aplica carr cual cualqu quie iera ra de las las tres tres últi última mas s propi propied edad ades es pued puede e produ produci cirr sola solapa pami mien ento tos s con con otros otros elem elemen ento tos s de la pági página na.. Para establecer cuánto se mueve la caja, se utilizan las propiedades top, right, bottom, left (arrib (arriba, a, derech derecha, a, abajo, abajo, izqui izquierda erda)) con valore valores s que pueden pueden especi especific ficars arse e 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 coordenadas indicado indicado por la cruceta en la parte superior 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). Ilustración 16: referencias de posicionamiento Para consultar consultar más en detalle detalle estas estas propiedades propiedades y visualizar visualizar su efecto efecto en algunas imágenes, imágenes, puedes consultar por ejemplo este capít capítulo ulo sobre posic posicionam ionamiento iento 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 por Digital Learning 33 de 37 Curso on-line “Editor Páginas Web KompoZer” • Anexo I: HTML/CSS Float: esta propiedad propiedad hace moverse al elemento elemento tan a la izquierda 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 cajas ocupan su lugar y a continuac continuación ión la caja flotante flotante se posiciona 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 existe otra otra propie propiedad dad,, clear (que (que en este este caso caso podr podría íamo mos s trad traduc ucir ir por por 'despejar'), que se utiliza normalmente normalmente en conjunto conjunto con float y float y que impide a un elemento que se posicione a un lado un otro o a ambos (valores right, left, both) 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 caja cajas s a las las que que se apli aplica ca la prop propie ieda dad d floa floatt con con valo valorr a la dere derech cha. a. Puede consultarse más en detalle en las mismas referencias que dábamos para la propiedad position Elaborado por Digital por Digital Learning 34 de 37 Curso on-line “Editor Páginas Web KompoZer” Anexo I: HTML/CSS Ilustración 17: aplicación de la propiedad 'float' Elaborado por Digital por Digital Learning 35 de 37 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 incorporación ón de nuevas nuevas etiquetas etiquetas que permitieran permitieran ampliar ampliar la 'funcional 'funcionalidad' idad' del lenguaje (muchas de ellas, en un principio, fueron adopciones de características que iban iban incorpo incorporan rando do de forma forma partic particula ular, r, fuera fuera del estánd estándar, ar, los navega navegadore dores s 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, 1998, con HTML 4.0 se empiez empiezan an a separa separar, r, descar descartan tando do muchas muchas de las etiqueta etiquetas s relacionadas con la presentación en favor de un nuevo lenguaje, el CSS 2 (hojas de estilo en cascada) al que se encomienda e ncomienda 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 escribirse en minúscula minúsculas s (*) (aún podemos ver muchas muchas páginas 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: TransitionalStrict y Frameset, las dos primeras relacionadas con la permisividad o restricción de uso respectivam respectivamente ente de etiquetas etiquetas de presentaci presentación ón o físicas, 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 XHTM XHTML, L, tamb tambié ién n se dan dan las las vari varian ante tes s Tran Transi siti tion onal al y Stri Strict ct,, que que admi admite ten n o no, no, respectivamente, algunos elementos de HTML 4. Además se aprobó la versión XHTML 1.1 (200 (2001) 1) que que intr introd oduc ucía ía el conc concep epto to de modu modula lari riza zaci ción ón,, para para faci facili lita tarr la crea creaci ción ó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, bien, la W3C decidió parar parar el avance de la nueva versión 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 por Digital Learning 36 de 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 1.0 ambo ambos s en modo modo estr estric icto to (str (stric ict) t) si el web web es nu nuev evo o y no tene tenemo mos s nece necesi sida dad d 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 siga siendo perfectamente válida). Para los los muy interesados pueden ver un par de artículos (en inglés) sobre este tema: • • Enviar XHT Enviar XHTML ML com como o tex text/ t/htm html, l, con consid siderad erado o pel peligr igroso oso (Se (Send nd XHTML XHTML as text/ text/htm htmll 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 (1989,, 19 1991) 91) presentación HTML HTML 3.0/3.2 3.0/3.2 (1995/ (1995/1997 1997): ): estruc estructur tura a + HTML 4.0 (1998) HTML 4.01 (1999): estructura + CSS 2 (1998): (1998): presentaci presentación. ó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 HTML 5, XHTML XHTML 2.0 2.0 y CSS CSS 3: 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 empiez empiezan an a inco incorporar rporar algu algunas nas funci funcionali onalidades dades que que se han han propu propues esto to en esta estas s nuevas recomendaciones. Elaborado por Digital por Digital Learning 37 de 37 Sign In
Our partners will collect data and use cookies for ad personalization and measurement. Learn how we and our ad partner Google, collect and use data. Agree & close
|
---|