Diseño y Maquetación de Páginas Web PDF

## Diseño y maquetación de páginas web mediante lenguajes de etiquetado ### **Objetivos** - Conocer y manejar los elementos fundamentales del lenguaje HTML. - Diferenciar las etiquetas del lenguaje HTML junto a sus atributos. - Aprender las principales etiquetas para el formateo de texto. - Proyectar y confeccionar listas ordenadas, desordenadas y de definición. - Identificar y emplear los elementos necesarios para generar links, enlaces o hipervínculos. - Diseñar y maquetar páginas web con elementos multimedia: imágenes, sonido y vídeo. ### **Mapa conceptual** **Diseño y maquetación de páginas web mediante lenguajes de etiquetado** | | | :----------------------------------------------------------------- | | **Lenguaje HTML** | | - Fundamentos del lenguaje | | - Estructura de una página HTML | | - Normas básicas de edición | | - Formato de texto y elementos básicos | | - Listas HTML | | - Hipervínculos | | - Imágenes | | - Audio y vídeo | | - Software necesario para trabajar | | - Maquetación y edición HTML | ### **Glosario** **Case sensitive:** en informática, significa que el sistema operativo, la aplicación o el software distinguen entre minúsculas y mayúsculas, luego por tanto, se debe respetar de forma estricta la sintaxis establecida para la declaración y expresión de cada uno de estos elementos. **DTD (definition type document):** es un documento SGML que incorpora la sintaxis necesaria para un determinado tipo de documento. Contrastando un documento con su DTD se puede verificar si este es válido o no. ### **Hipermedia** Hace referencia a la evolución que ha tenido el hipertexto en los últimos años, en los que las páginas web no solamente contienen texto, sino que, además, permiten la inclusión de todo tipo de elementos multimedia, como pueden ser audio, vídeo, animaciones, etc. ### **Hipertexto** Es un documento basado en texto en el que, a través de vínculos o enlaces, se puede acceder a otros documentos de la misma índole de forma cómoda, rápida y sencilla. Esta metodología permite la creación, adición, enlace y compartición de información entre diferentes fuentes que pueden estar o no relacionadas directamente. ### **Hipervínculo** Hace referencia a un elemento activo de una página web (texto, imagen, botón, etc.) con el que el usuario puede interactuar y mediante el cual (con tan solo un clic con el botón izquierdo del ratón) este puede navegar por otras páginas o sitios web relacionados. ### **HTML (hypertext markup language)** Lenguaje de marcado de hipertexto. Es un lenguaje de etiquetado o de marcado que se utiliza para el desarrollo y confección de páginas web en Internet. Está basado en SGML. ### **HTTP (hypertext transfer protocol)** Protocolo de transferencia de hipertexto. Es el protocolo de comunicaciones que permite el intercambio de información basada en hipertexto dentro de la red Internet y a partir de la World Wide Web. ### **SGML (standard generalized markup language)** Lenguaje de marcado generalizado estándar. Es el estándar ISO 8879 del año 1986, que establece lenguajes de marcado para documentos de forma generalizada, declarativa y rigurosa. ### **XHTML (extensible hypertext markup language)** Lenguaje extensible de marcado de hipertexto. Establece una sintaxis y unas normas rigurosas para el código HTML, para que este sea expresado como XML válido. ### **XML (extensible markup language)** Lenguaje de marcado extensible o lenguaje de marcas extensible. Es un metalenguaje desarrollado por el W3C que permite crear y definir otros lenguajes de marcas. ### **W3C (World Wide Web Consortium)** Consorcio www. Es un organismo de carácter internacional que permite gestionar y desarrollar el crecimiento sostenido de la World Wide Web. Se encarga de la generación y aprobación de estándares que permitan el desarrollo y la ampliación de la World Wide Web. ### **2.1. Introducción** La World Wide Web (WWW) o también conocida como "teleraña mundial" es un sistema de intercambio y distribución de información ubicado en Internet. Esta información, a la que acceden miles de usuarios desde diferentes puntos del planeta: debe estar perfectamente ordenada y ser fácilmente accesible. Para ello, se utiliza como base el concepto de página web. Las páginas web están compuestas de un conjunto de elementos que van desde texto e imágenes hasta todo tipo de vídeos, sonidos y animaciones, que permiten enriquecer la experiencia final del usuario y su interacción con las mismas. La cualidad más importante que atesoran las páginas web es su capacidad hipertexto. Esta característica va a permitir al navegante de Internet interactuar no solo con la página web actual, sino también, mediante los denominados hipervínculos, enlaces o links, referenciar otros elementos o páginas web, quedando así, toda la información vinculada y relacionada. Queda en manos del desarrollador de la página web el decidir qué textos, imágenes o elementos actuarán como enlaces activos, de manera que, mediante un simple clic de ratón, permitan al usuario navegar de la página actual a una página o elemento diferente. Para el desarrollo de las páginas web, los programadores emplean los denominados lenguajes de marcas. El origen de estos lenguajes se remonta a los años setenta, en los que la empresa IBM (Industrial Business Machines) crea el lenguaje GML (generalized markup language) o lenguaje generalizado de marcas, entre 1969 y 1970. IBM pretendía establecer de forma descriptiva, y mediante el uso de marcas, el formato de un determinado documento con base en las partes que lo componen. La idea era separar la presentación de la estructura de los documentos, para evitar así los problemas asociados a los diferentes dispositivos y plataformas existentes de por aquel entonces. Posteriormente, GML se convierte, de la mano de ISO (International Organization for Standardization) en un estándar, concretamente en el ISO 8879, de manera que GML se transforma en SGML (standard generalized markup language) en base al cual se desarrollaron los actuales HTML (hypertext markup language) y XML (extensible markup language). ### **2.2. Fundamentos del lenguaje HTML** El lenguaje HTML, permite, mediante un simple etiquetado del texto convencional de un fichero, convertir un documento simple en una página web totalmente funcional. Mediante el uso de etiquetas, HTML va a permitir al diseñador web describir la estructura de la página web y su forma de representación. ### **2.2.1. Software necesario para trabajar con HTML** Para trabajar con el lenguaje HTML se puede utilizar cualquier editor de texto presente en el sistema para la creación de las páginas web. Este tipo de software de edición viene normalmente preinstalado con el propio sistema operativo. Así pues, se puede utilizar el bloc de notas para sistemas Microsoft® Windows o bien el editor vim para sistemas Linux o Unix. Estos son solo algunos ejemplos y, por supuesto, se puede utilizar cualquier otro software disponible con el sistema instalado. Una vez codificado el fichero, este debe ser siempre almacenado en modo texto con extensión .html y no en otro formato (.doc, .docx, etc.), motivo adicional para descartar los procesadores de texto como software de edición. **_Si el editor utilizado para la maquetación del documento HTML guarda obligatoriamente el fichero con extensión .txt, se debe almacenar de esta forma, para posteriormente renombrar el documento y sustituir la extensión .txt por .html y que así pueda ser visible de manera adecuada en un navegador web._** En proyectos de gran envergadura, puede llegar a ser realmente tediosa la labor de codificación de los diferentes ficheros HTML usando únicamente los editores de texto comentados. Afortunadamente, existe lo que se conoce como "editores HTML”, que simplifican la labor de creación de las páginas web. **_www es un sistema que permite distinguir entre mayúsculas y minúsculas (case sensitive). Un error típico es denominar a una página index.html y luego almacenarla en el servidor de forma diferente, por ejemplo, INDEX.HTML. El resultado es que, al realizar la apertura local del fichero podría funcionar y abrirse adecuadamente, pero no funcionaría a la hora de publicarla y alojarla en Internet._** Estos editores se pueden clasificar en tres grandes grupos: asistentes, conversores y WYSIWIG, que se detallan en el cuadro 2.1. | Tipo de editor | Descripción | Ejemplos | | :------------ | :----------------------------------------------------------------------------------------------------------- | :--------------- | | Asistentes | Incluyen plantillas de código predefinidas para ayudar a generar el código HTML. | ATOM, Sublime Text, Brackets | | Conversores | Incorporan funciones de conversión de documentos a páginas web. | Word, Writer | | WYSIWIG | Permiten la maquetación de una página web sin emplear para ello código HTML. | Dreamweaver, Google Web Designer | ### **2.2.2. Estructura de una página web HTML** HTML es un lenguaje claramente estricto y descriptivo que indica, a través de etiquetas, el contenido y estructura de la página web que se está desarrollando. A continuación, se exponen las etiquetas principales que debe contener todo documento HTML. **<!DOCTYPE html>** **<html>** **<head>** **<title> TITULO DE LA PÁGINA WEB </title>** **</head>** **<body>** **CONTENIDO PRINCIPAL DE LA PÁGINA WEB** **</body>** **</html>** 1. Es necesario indicar el tipo de documento que se está creando. En HTML5 es tan sencillo como: **<!DOCTYPE html>** _Esta línea debe ser la primera del archivo, sin espacios ni líneas que la precedan. El tipo de documento permite indicarle a los diferentes navegadores web cómo deben interpretar y comportarse ante la información contenida en el fichero HTML. De esta forma, la visualización en cada navegador será siempre la más adecuada._ En la figura 2.2 se muestran los tipos de DOCTYPE más importantes con base en las diferentes versiones de HTML: **DTD HTML 2.0** <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN"> **DTD HTML 3.2** <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN"> **DTD HTML 4.0 Transicional** <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> **DTD 4.01 ο XHTML Estricto** <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/ strict.dtd"> **DTD para documentos con marcos** <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/ TR/html4/frameset.dtd"> **DTD para HTML5** <!DOCTYPE html> Como puede observarse, para las versiones anteriores a la HTML5 es necesario indicar lo que se conoce como DTD (definition type document), puesto que dichas versiones se basan en SGML. Mediante la incorporación de la DTD adecuada se permite al software del navegador contrastar el documento DTD con la sintaxis del fichero para verificar si esta es la apropiada. 2. Se inserta la etiqueta `<HTML>` que debe englobar a todo el documento HTML y que debe finalizar con su correspondiente etiqueta de cierre `</HTML>`. El documento HTML no tiene razón de ser sin estas dos etiquetas principales. 3. Se encuentra la etiqueta `<HEAD>` o encabezamiento del documento HTML, que finaliza con la etiqueta de cierre `</HEAD>`. Esta etiqueta contiene, entre otras características, las siguientes: - Título de la página web mediante la etiqueta `<TITLE>`. - Referencias a una determinada hoja de estilo CSS mediante la etiqueta `<LINK>`. - Etiquetas `<META>` o meta-tags, que permiten realizar una descripción de las propiedades genéricas de la página web, como el autor, la descripción, las palabras clave que van a permitir a los buscadores de Internet localizarla más fácilmente, etc. Las más utilizadas se recogen en el cuadro 2.2: | Etiqueta Meta | Descripción | | :------------ | :------------------------------------------------------------------------------------------------------------------ | | Charset | Indica el juego de caracteres que se establece para la codificación del documento HTML. Así se puede conseguir que caracteres especiales, como la ñ o las tildes, se vean adecuadamente. | | Author | Indica la autoría de la página. | | Description | Indica una breve descripción del contenido o temática de la página web. | | Keywords | Palabras clave para los motores de búsqueda. | | Copyright | Permite establecer derechos sobre la propiedad de la página. | | http-equiv | Establece cierto control sobre el comportamiento de la página a través del navegador (control de caché, expiración, refresco, etc.). | En la figura 2.3, se define un ejemplo de encabezamiento o cabecera `<HEAD>` típico en un documento HTML: **<HEAD>** **<title> Mi primera página web </title>** **<link rel="STYLESHEET" type="text/css" href="mihojadeestilos.css">** **<meta charset="utf-8">** **<meta name="copyright" content="Jesús Millanes y Maria Pilar Paredes">** **<meta name="author" content="Jesús y Pilar">** **<meta name="description" content="Sistemas Microinformáticos y Redes"** **<meta name="keywords" content="Aplicaciones Web Grado Medio">** **</head>** 4. Se encuentra la etiqueta `<BODY>`, que representa el cuerpo completo de la página web. En él debe ir contenida toda la información principal del documento HTML, dado que esta será la que aparezca dentro del navegador y la que los usuarios podrán visualizar en sus pantallas. Concluye con la etiqueta de cierre `</BODY>`. **_Después de crear la página web es más que conveniente probarla en diferentes navegadores y plataformas (Opera, Firefox, Safari, etc.), así como para diferentes resoluciones de pantalla (640x480, 800×600, 1024×768)._** ### **2.2.3. Normas básicas de edición y maquetación HTML** Para que los diferentes navegadores puedan interpretar adecuadamente la información contenida en los documentos, se deben seguir una serie de pautas y recomendaciones que incorpora el propio lenguaje HTML. A continuación, se presentan algunas normas y recomendaciones importantes para el desarrollo, y pautas sintácticas para utilizar en HTML: a) Es importante mantener una buena organización del documento HTML, dada su estructura descriptiva y formal. b) Las etiquetas HTML y los atributos no son case sensitive, con lo cual, en principio, se pueden indicar en mayúsculas o en minúsculas: `` = `` c) Dependiendo del hospedaje de la página web y del sistema operativo donde se aloja, los valores de los atributos sí que pueden ser case sensitive y, por tanto, ser sensibles a mayúsculas o a minúsculas: `<IMG SRC="FICHERO_WEB.JPG">` = `<IMG SRC="fichero_web.jpg">` - No es posible incorporar espacios en blanco ni tabuladores en los nombres de etiquetas o atributos: `<IMG SRC="imagen.gif">` = `<IMG SRC="imagen.gif">` - Los atributos que toman un valor dentro de las etiquetas deben ir entrecomillados si contienen caracteres que no sean alfanuméricos (números del 0 al 9 y letras mayúsculas y minúsculas): `<A HREF="http://www.mi-sitio-web.com">` - Los atributos que sí toman un valor alfanumérico pueden contener espacios en blanco, siempre que vayan entrecomillados también: `<IMG SRC="apuntes.png" ALT="Mis apuntes de HTML">` - HTML y, concretamente, los navegadores sustituyen cualquier número indefinido de espacios en blanco o de tabuladores por un solo espacio en blanco, de manera que, si un determinado programador desea que se inserte un número específico de dichos caracteres, deberá utilizar la etiqueta especial `<PRE>` de preformateo de texto: `<PRE>Inserto los espacios que quiero </PRE>` - En HTML existen etiquetas de bloque (block, engloban contenido) y etiquetas de línea (inline, no encierran contenido). Pues bien, las etiquetas de bloque siempre deben cerrarse, mientras que las de línea no es necesario: `<A HREF="www.google.es"> Google España </A>  ` - Se puede realizar anidamiento de etiquetas si se desean aplicar diferentes propiedades de manera simultánea a un elemento de la página: `<CENTER>Texto centrado y en negrita</CENTER>` - Aquellos elementos, etiquetas y atributos desconocidos serán omitidos por los navegadores. **_Cuando se comienza la maquetación inicial de un sitio web, se debe crear, en primer lugar, un archivo que se denominará index.html. Esto es así debido a que los servidores web cargan como página principal de sus sitios alojados el archivo que reciba este nombre. De ahí que sea especialmente crítico conocer si se debe incluir el nombre en mayúsculas o en minúsculas._** ### **2.3. Encabezados en HTML** El lenguaje HTML permite, mediante el uso de un conjunto de etiquetas, definir hasta seis tipos de encabezamiento, asociados a diferentes niveles de jerarquía o importancia dentro del documento. **_Para repasar la estructura básica de HTML, sus normas y cómo empezar con una primera página web, puedes visualizar el siguiente vídeo de Zenva:_** Las etiquetas empleadas son las que se recogen en la figura 2.4: **<H1> Encabezado nivel 1 </H1>** **<H2> Encabezado nivel 2 </H2>** **<H3> Encabezado nivel 3 </H3>** **<H4> Encabezado nivel 4 </H4>** **<H5> Encabezado nivel 5 </H5>** **<H6> Encabezado nivel 6 </H6>** _El carácter H asociado a esta etiqueta viene del término en inglés heading, que precisamente significa "encabezado". Después de la H se añade un número del 1 al 6, indicando la importancia de la información contenida en dicho encabezado, donde H1 es la información más relevante a destacar dentro del documento y H6 la menos relevante._ **_Es posible que algunos navegadores representen nuestras páginas web incluso sin incluir las etiquetas <HTML> 0 <BODY>. No obstante, si queremos que nuestra web se visualice siempre de forma adecuada y para la mayor parte de navegadores, deberemos incluir siempre todas las etiquetas necesarias._** En la figura 2.5 se muestra un ejemplo de visualización de estos encabezados utilizando el navegador Edge: En la figura 2.5 se puede observar que todos los encabezamientos están en negrita y que el tamaño de la fuente utilizada va siendo de menor tamaño según decrece la importancia de cada titular ### **2.4. Párrafos en HTML** Los párrafos son importantes para el diseño de la página web, dado que van a permitir estructurar de manera adecuada la información presente en el documento HTML. Se debe tener presente que los párrafos en HTML obvian los espaciados múltiples, tabuladores e incluso los saltos de líneas que haya incluido el programador de la página web. Para verificar este comportamiento, se propone comprobar los siguientes dos ejemplos en un navegador: **<H1> El lenguaje HTML elimina los espacios en blanco dentro de la página web </H1>** **<H1> El lenguaje HTML elimina los espacios en blanco dentro de la página web </H1>** En estos ejemplos puede apreciarse el uso de diferentes espaciados o tabuladores. En la figura 2.6 se puede observar cómo HTML elimina y sustituye un conjunto finito de caracteres en blanco por un único espacio en blanco. Adicionalmente, se puede comprobar dentro de los navegadores web cómo la página web se sigue representando de la forma más adecuada para la resolución y tamaño de ventana presentes en ese momento. Con un tamaño de ventana convencional, la información se presenta monoespaciada y en dos líneas, independientemente del formato aplicado en el código HTML. Al reducir el tamaño de la ventana, el navegador trata de situar la información con una o dos palabras como máximo por línea, con lo que cualquier formato manual que se hubiera tratado de imponer en el código sería de poca o ninguna utilidad. Una vez conocido este comportamiento de HTML, se verá otro conjunto de etiquetas que aporten un mayor control sobre los elementos de la página. ### **2.4.1. Saltos de línea. La etiqueta ** La etiqueta , cuyas siglas vienen de las palabras en inglés breaking line, permite realizar un salto de línea y, a continuación, sigue representando el resto del documento HTML. ### **2.4.2. Párrafos. La etiqueta ** La etiqueta , del inglés paragraph, permite la inserción de un nuevo párrafo en el documento. Esta etiqueta tiene un comportamiento parecido a , pero posee una diferencia fundamental. Mientras que inserta un salto de línea en el lugar en el que aparece, no solo realiza esta función, sino que además añade un espacio entre la línea anterior y la posterior. **_Mientras que simplemente genera un salto de línea, genera un nuevo párrafo e inserta una línea en blanco con respecto al texto anterior._** La etiqueta es una etiqueta de tipo contenedor o bloque, y aunque la instrucción es opcional, durante este libro se empleará para delimitar el comienzo y final de los párrafos que aparezcan en el documento HTML. La etiqueta cuenta con un atributo muy útil denominado ALIGN, que permite establecer la alineación del párrafo dentro del documento HTML. Los valores posibles para el atributo ALIGN son center, left y right para centrar, alinear a la izquierda y alinear a la derecha respectivamente: ** Párrafo con alineación centrada ** ** Párrafo con alineación a la izquierda ** ** Párrafo con alineación a la derecha ** En la figura 2.7 puede observarse el resultado del alineamiento de los párrafos. ### **2.4.3. Separadores o líneas horizontales. La etiqueta <HR>** La etiqueta <HR>, del inglés horizontal rule (línea horizontal) permite insertar una línea horizontal. No necesita etiqueta de cierre. En las últimas versiones de HTML, la etiqueta <HR> ha incorporado una serie de atributos que permiten modificar la visualización y representación de la línea horizontal mostrada. Son los siguientes: - **ALIGN.** Permite modificar la alineación de la línea horizontal. Sus valores pueden ser left, center y right para alineación a la izquierda, centrada o a la derecha. Ejemplo: `<HR ALIGN="right">`. - **SIZE.** Permite establecer el grosor de la línea horizontal. Para ello, se establece el valor en píxeles. Ejemplo: `<HR SIZE="75">`. - **WIDTH.** Permite especificar la anchura de la línea. Este valor se puede establecer de forma absoluta indicando los píxeles que ocupará la línea, o de forma relativa con respecto al ancho total de la ventana del navegador, en cuyo caso, se emplea un valor porcentual. Es más conveniente emplear el segundo método, dado que se obtendrán mejores resultados, independientemente de los tamaños de ventana establecidos por cada usuario. Ejemplo: `<HR WIDTH="100%">`. - **NOSHADE.** Permite eliminar el efecto tridimensional que incorpora la línea horizontal. Con este atributo se muestra únicamente una línea plana y de color negro. Ejemplo: `<HR WIDTH="85" NOSHADE>`. **_Codifica un archivo HTML en el bloc de notas para obtener una página web como la que se muestra a continuación:_** ### **2.5. Formateo de texto en HTML** El lenguaje HTML cuenta con un conjunto de etiquetas para dar formato a los elementos de texto de la página web. Estas etiquetas son de tipo bloque y cuentan con inicio y cierre; el formato se aplicará al texto contenido entre ambas. Estas etiquetas se categorizan en dos tipos de estilos: estilos físicos y estilos lógicos. ### **2.5.1. Estilos físicos. Etiquetas** Son aquellas que describen con precisión y de forma exacta cómo debe estar formateado el texto que contienen. Es decir, una etiqueta de este tipo indicará: "Este texto va en cursiva", "Este texto va en negrita", etc. En la siguiente figura se pueden ver algunos de los estilos físicos más comúnmente utilizados en el formateo de texto: ** Texto en negrita ** ** Texto en cursiva ** ** Texto subrayado ** **<TT> Texto de máquina de escribir </TT>** **<BIG> Texto más grande </BIG>** ** Texto más pequeño ** ### **2.5.2. Estilos lógicos. Etiquetas** Frente a los estilos físicos, se encuentran los estilos lógicos, que refuerzan mucho más el carácter descriptivo del lenguaje HTML. Estas etiquetas, por tanto, ya no indican "Esto va en negrita", sino que indican "Este texto es relevante", "Este texto es código fuente", etc. De esta forma, los navegadores presentan en pantalla la información de la forma más apropiada posible, y en la mayoría de las ocasiones será equivalente a haber usado los estilos físicos correspondientes. | Etiquetas | Descripción | | :-------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | | Strong (fuerte/grueso). Este texto debe resaltar con respecto al resto de elementos textuales. Normalmente, se representa mediante negrita. Puede utilizarse para sustituir a . | | | Emphasize (texto enfatizado). Este texto también destaca con respecto al texto que tiene a su alrededor. Se representa en forma cursiva. Puede utilizarse para sustituir a . | | <CODE> </CODE> | Code (código fuente). Con esta etiqueta se agrupa un texto que forma parte de algún código o programa desarrollado por un programador. Se representa por una fuente monoespaciada tipo Courier New o similar. Puede utilizarse para sustituir a <TT> </TT>. | | <SAMP> </SAMP> | Sample (ejemplos/muestras). Para ejemplificar, dar ejemplos de scripts, etc. El texto resultante se ve de forma similar al representado por <CODE>. | | <VAR> var </VAR> | Variable (variables). Esta etiqueta se utiliza para representar variables dentro de una ecuación matemática, código de programación, parámetros de comandos, etc. El texto se muestra en cursiva. | | <CITE> </CITE> | Cite (citas). Se vio anteriormente en el capítulo. Para textos parafraseados o citas de autor. El texto encerrado entre estas etiquetas se muestra en cursiva. | | <DFN> </DFN> | Definition (definiciones). Se usa cuando se describen definiciones de términos o conceptos. El texto se mostrará en cursiva. | | <KBD> </KBD> | Keyboard (teclado). Representa el texto en forma de teclado de ordenador mediante el uso de una fuente monoespaciada (Courier, Consolas, etc.). | **_Codifica un archivo HTML en el bloc de notas para obtener una página web como la siguiente:_** Como puede observarse, muchas de estas etiquetas tienen un uso parecido y es el programador de la página web el encargado de elegir una u otra. Algunas de ellas también han caído en desuso o ya no son soportadas, por lo que se deberán usar con sumo cuidado. ### **2.5.3. Fuentes de texto. La etiqueta ** A pesar de que las etiquetas vistas hasta ahora son ciertamente útiles y permiten formatear adecuadamente el texto, en la versión 3.2 de HTML surgió una nueva etiqueta que permite cubrir las carencias presentes en las mismas. La etiqueta se denomina `` y va a permitir modificar las principales características del texto que se va a formatear: color, tamaño, tipo de fuente, etc. ### **2.5.4. Cambiar el tamaño del texto** Hasta ahora y con las etiquetas vistas solo se podía modificar el tamaño del texto a través del uso de encabezados, pero, evidentemente, es desaconsejable hacerlo, dado que este no es el objetivo de este tipo de etiquetas. Así pues, ahora se cuenta con la etiqueta `` y el atributo SIZE para poder modificar el tamaño de un párrafo, una palabra e incluso una letra o carácter del documento HTML. El texto afectado debe estar encerrado entre las etiquetas `` y ``. Hay dos posibles maneras de establecer el tamaño: 1. Estableciendo el tamaño con el valor absoluto de 1 a 7. Donde 1 es el menor valor posible para el tamaño y 7 el valor máximo. El valor por defecto para este parámetro es el de 3, que equivale a un texto normal. A continuación se muestra un ejemplo: Este texto tiene un tamaño convencional y `` este es más grande ``. 2. Mediante el valor relativo, que consiste en indicar un tamaño relativo al establecido por defecto. Por ejemplo, para establecer un tamaño de 5, teniendo en cuenta el valor por defecto de 3, se usaría el siguiente código: Texto por defecto (tamaño 3) y `` Tamaño 5 ``. **_Para indicar el tamaño relativo con un valor concreto (+n o -n) es preciso el uso de comillas dobles para su establecimiento en la mayoría de los casos. Como veremos más adelante, las normas estrictas de XHTML obligan al uso de entrecomillado para todos los atributos de las etiquetas, pero, en este caso, es necesario para asegurar que la mayoría de navegadores del momento representen adecuadamente los tamaños de texto._** 3. Se debe tener en cuenta que este tamaño relativo no puede anidarse como ocurría, por ejemplo, con la etiqueta `<BIG>`. Por tanto, no se conseguirá mayor tamaño de fuente añadiendo etiquetas ``: Texto por defecto (tamaño 3), `` Tamaño 5 `` sigue siendo de tamaño 5 ``. **_Codifica un archivo HTML en el bloc de notas para obtener una página web como la que se muestra en la figura 2.11:_** ### **2.5.5. Cambiar el color del texto** El atributo COLOR permite cambiar el color del texto. Inicialmente, el color se podía expresar únicamente mediante un código hexadecimal RGB (red, green, blue) de la siguiente forma: `` Donde RR, GG y BB son la cantidad de rojo, verde y azul que se aporta al color que se va a expresar. Estos pueden tomar un valor entre 00 y FF, donde 00 es la ausencia de este color y FF es la cantidad máxima del mismo. Al atributo COLOR se le puede asignar el término en inglés para el color deseado. En el cuadro 2.4 aparecen algunos de los colores soportados: | Etiqueta | Descripción | | :------------------------------------------- | :--------------------------------------------------------------------------------------------------------------- | | ` ` | Color negro para el texto. | | ` ` | Color blanco para el texto. | | ` ` | Color verde para el texto. | | ` ` | Color marrón rojizo para el texto. | | ` ` | Color verde oliva para el texto. | | ` ` | Color azul marino para el texto. | | ` ` | Color violeta para el texto. | | ` ` | Color rojo para el texto. | | ` ` | Color amarillo para el texto. | | ` ` | Color azul para el texto. | | ` ` | Color verde azulado para el texto. | | ` ` | Color verde lima para el texto. | | ` ` | Color azul claro para el texto. | | ` ` | Color fucsia para el texto. | | ` ` | Color gris claro para el texto. | **_Codifica un archivo HTML en el bloc de notas para obtener una página web como la que se muestra a continuación:_** ### **2.5.6. Preformateo de texto. La etiqueta <PRE>** Como ya se comentó en apartados anteriores, HTML ignora los espaciados múltiples, tabuladores y saltos de línea. Después se analizaron diferentes tipos de etiquetas para dar formato al texto a través de párrafos, saltos de línea manuales, etc. No obstante, muchas veces no será suficiente y, si se necesita aplicar algún tipo de formato personalizado y especial, no bastará con las etiquetas mencionadas. Por ejemplo, suponiendo que se desee crear un pie de página para las páginas web que se vayan creando, indicando los datos personales del desarrollador (figura 2.13). Para conseguir este efecto en HTML se podía recurrir a una imagen diseñada previamente a tal efecto, pero esta página ha sido desarrollada mediante texto y, por tanto, a través de imágenes no se podría visualizar en navegadores modo texto, como Lynx, y el objetivo es que la firma la vea la mayor cantidad de público posible. Teniendo en cuenta el comportamiento de HTML, los espacios múltiples serán sustituidos por un solo espacio y los saltos de línea, eliminados, con lo cual el navegador mostraría esta página tal y como puede verse en la figura 2.14. Como se puede observar, el comportamiento que aplica HTML no es el más adecuado para ciertas situaciones y la mayoría de las veces resulta incómodo. La solución a este inconveniente es la etiqueta `<PRE>`, que tiene su correspondiente etiqueta de cierre `</PRE>`, ya que se aplica, como es lógico, a un bloque de texto. El nombre de esta etiqueta procede del término inglés preformatted y su objetivo es representar el texto tal y como lo ha introducido el programador de la página web (manteniendo espacios, saltos de línea y el resto de elementos). Así pues, el código necesario para poder representar el documento HTML de forma preformateada de la figura 2.13 es el siguiente: `<PRE> Diseño y maquetación de la Web realizado por: Jequsu Aania Pilar </PRE>` **_Es habitual que una vez conocida la etiqueta <PRE> pueda llegar a abusarse de ella. Sin embargo, el uso de esta etiqueta no siempre se adecua a todas las resoluciones de pantalla, tamaños de ventana, etc., con lo que la utilización de <PRE> debe quedar limitada a casos concretos y especiales._** ### **2.5.7. Acentos y caracteres de uso reservado** Una página HTML no es más que un documento de texto convencional codificado en ASCII y, por tanto, no puede contener ningún carácter que no haya sido incluido mediante esta codificación (la letra ñ, caracteres con acento, etc.). HTML incluyó un método para representar todo este tipo de caracteres especiales, como puedan ser los propios de otros idiomas, los acentos, las diéresis. El método consiste en incluir en el documento HTML una serie de códigos particulares que todos los navegadores puedan entender e interpretar. Estos códigos reciben el nombre de secuencias de escape y comienzan por el símbolo `&` seguido de la secuencia adecuada y, finalmente, terminan con un `;`. **_Es de vital importancia respetar para las diferentes secuencias de escape las MAYÚSCULAS y minúsculas. Si se usan de forma indistinta el resultado puede no ser el adecuado o no funcionar la secuencia de escape._** Existen dos tipos de secuencias de escape: - **Secuencias de escape nominales.** En estas secuencias, entre

Diseño y Maquetación de Páginas Web PDF

Document Details

Tags

Related

Summary

Full Transcript

Upgrade to continue