UNIDAD 4: NOCIONES BÁSICAS DE DISEÑO WEB (MAQUETACIÓN HTML) CURSO ELABORACIÓN DE CONTENIDOS FORMATIVOS Plan de Formación Edukanda 1
Índice 1. Introducción... 3 2. Objetivos... 4 3. El lenguaje HTML... 5 3.1 Elemento... 6 3.2 Atributo y valor... 7 4. Estructura de un documento HTML... 8 4.1 DOCTYPE... 8 4.2 Documento HTML... 9 4.3 Elemento head... 10 4.4 Elemento body... 10 5. Formateo del contenido de un documento HTML... 11 5.1 Encabezados... 11 5.2 Párrafos... 12 5.3 Citas... 13 5.4 Enfatizar contenido... 14 5.5 Centrar texto o imágenes... 14 6. Elementos de estilo... 15 6.1 Modifican el texto entre dos etiquetas... 15 6.2 Modifican el texto que les sigue... 17 7. Listas... 19 8. Tablas... 23 9. Enlaces... 25 10. Imágenes... 26 11. Marcos... 27 12. Conclusiones... 31 13. Mapa conceptual... 32 14. Información complementaria... 33 2
1. Introducción El HTML, acrónimo en inglés de HyperText Markup Language, es el código que permite la creación y edición de documentos web. El HTML es un lenguaje de marcado. Para convertir un texto a una página web, debemos ir añadiéndole marcas que identifiquen qué es cada uno de los elementos y cómo deberían mostrarse. Es un metalenguaje basado en etiquetas que posee la ventaja de que puede ser implementado por código de otros lenguajes como JavaScript, ampliando y mejorando su capacidad original. En esta unidad explicaremos brevemente en qué consiste el lenguaje HTML, su funcionamiento, y daremos las pautas básicas para que el usuario tenga las competencias necesarias para iniciarse en el mundo de la programación web. 3
2. Objetivos Los objetivos generales que se pretenden alcanzar con esta Unidad son los siguientes: Explicar los fundamentos básicos del lenguaje HTML. Aprender la sintaxis del lenguaje HTML. Adquirir la competencia necesaria para ser capaz de crear un documento básico en HTML. 4
3. El lenguaje HTML El lenguaje HTML es el código que permite la creación y edición de páginas web. Utiliza el código ASCII puro, que puede teclearse en cualquier editor de textos básico para posteriormente ser interpretado secuencialmente por un objeto cliente denominado navegador (browser) que visualiza el resultado en pantalla. El código ASCII es un esquema de codificación que asigna valores numéricos a las letras, números, signos de puntuación y algunos otros caracteres. Al normalizar los valores utilizados para dichos caracteres, ASCII permite que los ordenadores y programas informáticos intercambien información. La sintaxis del lenguaje HTML está estructurada según el siguiente protocolo: Una etiqueta inicial que señala el comienzo de un elemento. Un número determinado de atributos (y sus valores asociados). Una cierta cantidad de contenido (caracteres y otros elementos). Una etiqueta que marca el final. Ejemplo: <p align= center >Mi coche es rojo</p> Etiquetas inicial y final Ejemplo: <p align= center >Mi coche es rojo</p> Atributo y valor Ejemplo: <p align= center >Mi coche es rojo</p> Contenido 5
Para comprender el lenguaje HTML, debemos tener en cuenta tres conceptos: elemento, atributo y valor. 3.1 Elemento Los elementos son la estructura básica del lenguaje HTML, y tienen dos propiedades básicas: atributos y contenido. Los elementos, generalmente, tienen una etiqueta de inicio y otra de cierre, y el contenido está ubicado entre ambas. Las etiquetas tienen gran importancia en un documento HTML ya que brindan información especial que es necesaria para determinar la representación final del documento; es decir, donde se define una etiqueta en el código, algo sucederá en la representación del documento, algunas veces visualmente y otras de manera oculta. Todas las etiquetas comparten el mismo formato: empiezan con el signo menor que < y terminan con el signo mayor que >. Por ejemplo, el elemento html tiene dos etiquetas: La etiqueta de inicio <html> define el inicio del documento HTML. La etiqueta de cierre </html> define el final del documento HTML. Estas etiquetas indican al navegador que todo lo que hay entre ellas debe ser interpretado como un documento HTML. La etiqueta final se diferencia de la inicial por el signo: /. Si no, no se podría saber cuándo empieza y termina un elemento, ya que se pueden contener unos dentro de otros. Hay que tener muy en cuenta que elementos y etiquetas no son la misma cosa: las etiquetas son las marcas que definen el inicio y el final de un elemento. 6
Ejemplo: <p align= center >Mi coche es rojo</p> Etiquetas inicial y final ELEMENTO 3.2 Atributo y valor Atributo es toda propiedad que se le puede asignar a un elemento. Por supuesto un elemento puede tener varios atributos: <elemento atributo='valor' atributo='valor'>... </elemento> Ejemplo: <p align= center class= titular >Mi coche es rojo</p> Los atributos deben estar en la etiqueta inicial, nunca en la final. El orden que guarden dentro de la etiqueta es indiferente. Deben separarse por un espacio en blanco del nombre del elemento y de otros atributos. Atributo y valor deben estar unidos por el signo: =. Los valores deben estar encerrados con comillas, dobles o simples. Entre los atributos más usuales podemos destacar los siguientes: Align. Class. Border. Width. Height. 7
4. Estructura de un documento HTML En este apartado conoceremos los cuatro elementos básicos que componen la estructura de un documento HTML. La estructura básica de un documento HTML es la siguiente: <!DOCTYPE> <html> <head> </head> <body> </body> </html> La primera línea está reservada al DOCTYPE (tipo de documento), después viene el documento HTML, que está dividido en dos secciones: head y body. 4.1 DOCTYPE Este es el elemento que define el tipo de documento con el que estamos trabajando. Es muy importante porque le indica al navegador la versión y el tipo de HTML empleado en el documento. De esta forma, el navegador usará el modelo de renderización (la forma según la cual el navegador interpreta el documento HTML) adecuado al tipo de documento. Existen tres tipos de DOCTYPE: Strict. Este doctype es el que contiene la definición de HTML recomendada por el W3C. 8
Transitional. Este doctype es básicamente igual al strict, con el añadido de algunos elementos y atributos antiguos que se han quedado desfasados, pero que se conservan para mantener la compatibilidad. Frameset. Este es igual al transitional al que se le han añadido los elementos específicos para la creación de marcos. Ejemplo: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/tr/html4/strict.dtd"> Ejemplo: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/tr/html4/loose.dtd"> Ejemplo: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/tr/html4/frameset.dtd"> Ejemplos de los tres tipos de doctype 4.2 Documento HTML El elemento HTML delimita el documento, indicando al navegador el comienzo y el fin de la página html. Sus etiquetas son: <html> (siempre al comienzo, después del DOCTYPE) y </html> (siempre al terminar el documento). 9
4.3 Elemento head La función de dicho elemento es delimitar la cabecera del documento. Sus etiquetas son <head> y </head> En la cabecera es donde se debe incluir información sobre el documento, información que en su mayor parte no se mostrará a los lectores de la página. También es dónde se incluyen las llamadas a posibles archivos externos relacionados con el documento (hojas de estilo, scripts, etc). El elemento más importante que se mostrará en la cabecera será el elemento title, que se corresponderá con el título de la página en cuestión, y se delimita con etiquetas de la siguiente manera: <title></title>. Un ejemplo del title de una página podría ser: <doctype> <html> <head> <title>página de prueba</title> </head> 4.4 Elemento body Delimita el cuerpo del documento. En este elemento van contenidos todos los componentes de la página (texto, imágenes, etc.). El body viene definido por las etiquetas <body> (para señalar el comienzo del contenido) y </body> (siempre al finalizar el documento, y antes de la etiqueta </html>). Por ejemplo: <doctype> <html> <head> <title>página de prueba</title> </head> <body> <p>hola mundo</p> </body> </html> 10
5. Formateo del contenido de un documento HTML Los documentos HTML suelen constar de título, texto dividido en párrafos, con partes resaltadas, citas, etc. A continuación explicaremos los elementos del lenguaje HTML que permiten darle forma a un documento sea cual sea su contenido. 5.1 Encabezados El lenguaje HTML permite estructurar un documento en secciones diferentes mediante los encabezados, que son los títulos de cada una de dichas secciones. El elemento que define un encabezado es el carácter h seguido de una cifra del 1 al 6. Por tanto, encontramos que los encabezados pueden ser: h1, h2, h3, h4, h5 y h6. Estos encabezados van categorizados de mayor a menor, de tal manera que se pueden crear estructuras jerárquicas con ellos: el encabezado h1 sería la primera sección sin anidar y el h6 el máximo nivel de anidamiento. A continuación se pueden ver ejemplos de diferentes tipos de encabezado. Encabezado Nivel 1 Encabezado Nivel 2 Encabezado Nivel 3 Encabezado Nivel 4 Encabezado Nivel 5 Encabezado Nivel 6 11
5.2 Párrafos En el párrafo podemos encontrar dos elementos básicos: El elemento p: Es el componente básico en la edición de textos en lenguaje HTML, y corresponde a un solo párrafo. Sus etiquetas son <p></p>. Sus principales atributos genéricos son: o Identificadores: id; class; style; title. o Internationalization (l18n): lang; dir. Sus atributos de transición: o Align. El elemento br: La etiqueta <br> introduce un salto de renglón, de tal manera que el texto a continuación de dicha etiqueta pasa al renglón siguiente. 12
5.3 Citas Para incluir citas en un texto existen tres elementos diferenciados: Elemento blockquote: Es el elemento indicado para utilizar en citas extensas. Sus etiquetas son < blockquote></ blockquote>. El efecto que provoca este etiquetado es que el texto que se encierre entre ellas se muestre con sangría a ambos lados. Elemento q: Es el apropiado para citas cortas situadas en el medio de una línea de texto. Sus etiquetas son <q></q>. Este elemento sólo tiene efecto en los navegadores más modernos (Firefox, Chrome, Internet Explorer 8 ). Elemento cite: Es el elemento indicado para señalar la fuente o el autor de la cita. Sus etiquetas son <cite></cite> Codificación <p>este elemento crea una cita extensa</p><blockquote><p>como se puede comprobar en el presente ejemplo</p>< /blockquote> Codificación <p>este elemento crea una cita corta</p><q><p>como se puede comprobar</p>< /q> Codificación Este elemento señala el <cite>autor de la cita</cite> Elemento blockquote Elemento q Elemento cite Resultado Este elemento crea una cita extensa como se puede comprobar en el presente ejemplo Resultado Este elemento crea una cita corta como se puede comprobar Resultado Este elemento señala el autor de la cita. 13
5.4 Enfatizar contenido Mediante el código html también podemos enfatizar el contenido de nuestro documento a través de los siguientes elementos: Elemento em: Este elemento sirve para darle énfasis al texto. Sus etiquetas son <em> y </em>. El texto contenido suele aparecer en cursiva. Elemento strong: Este elemento se emplea para darle más énfasis al texto que con el elemento anterior. Sus etiquetas son <strong></strong>. El texto contenido suele aparecer en negrita. Codificación Este elemento da <em>énfasis</em> Codificación Este elemento da <strong>mucho énfasis</strong> Enfasis em Énfasis strong Resultado Este elemento da énfasis Resultado Este elemento da mucho énfasis. 5.5 Centrar texto o imágenes Si deseamos centrar texto o imágenes, debemos utilizar el elemento div, que se utiliza para designar un bloque de contenido dentro del documento. Las etiquetas <div></div> con el atributo align= center se utilizan para centrar todo el contenido que se encuentre encerrado entre ellas, ya sean textos, párrafos enteros o imágenes. Hay que advertir que este elemento, al crear un bloque de contenido, fuerza un salto de renglón. Centrar texto o imágenes Codificación Resultado <div align= center >Este elemento se Este elemento se utiliza para centrar utiliza para centrar texto o texto o imágenes imágenes</div> 14
6. Elementos de estilo Los elementos de estilo dentro del lenguaje HTML sirven para indicar cómo queremos que se muestre el texto. Lo más correcto, no obstante, es separar el estilo de la estructura del texto mediante la utilización de hojas de estilo externas, pero vamos a explicar brevemente de qué forma se le puede dar estilo al texto empleando elementos del lenguaje HTML. Podemos dividirlos en dos grandes categorías: los elementos que modifican el contenido entre dos etiquetas y los que modifican el texto que les sigue. 6.1 Modifican el texto entre dos etiquetas Estos elementos modifican el texto contenido entre dos etiquetas. Elemento b. Utilizando este elemento se consigue mostrar el texto en negrita. Sus etiquetas son <b></b>. Elemento b Codificación Resultado Tengo un coche <b>rojo</b> Tengo un coche rojo Elemento i. Utilizando este elemento se consigue mostrar el texto en cursiva. Sus etiquetas son <i></i>. Elemento i Codificación Resultado Tengo un coche <i>rojo</i> Tengo un coche rojo Elemento tt. Utilizando este elemento se consigue mostrar el texto con caracteres monoespaciados. Sus etiquetas son <tt></tt>. Elemento tt Codificación Resultado Tengo un coche <tt>rojo</tt> Tengo un coche rojo 15
Hay otros elementos que tienen el mismo efecto visual que tt, pero que además añaden un cierto contexto semántico, como code (para representar código de ordenador), kbd (representando texto que se supone que el usuario debe introducir), o samp (representando texto generado por un ordenador). Elemento sup. Utilizando este elemento se convierte el texto seleccionado en super índice. Sus etiquetas son <sup></sup>. Codificación Tengo un coche de 1<sup>a</sup> calidad Elemento sup Resultado Tengo un coche de 1ª calidad Elemento sub. Utilizando este elemento se convierte el texto seleccionado en subíndice. Sus etiquetas son <sub></sub>. Codificación Los coches emiten CO<sub>2</sub> a la atmósfera. Elemento sub Resultado Los coches emiten CO 2 a la atmósfera. 16
6.2 Modifican el texto que les sigue Existen dos tipos de elementos que modifican el texto que va a continuación: Elemento FONT. Este elemento nos sirve para cambiar ciertos atributos del texto que escribimos, como puede ser el tamaño, el color, etc. Face (representa el tipo de fuente) Size (Representa el tamaño de la fuente) Color (el color se puede indicar en inglés o hexadecimal precedido de una almohadilla) Elemento FONT Codificación <FONT face= Comic Sans Ms >Tengo un coche rojo</font> <FONT size= 16 >Tengo un coche rojo</font> <FONT color= blue >Tengo un coche rojo</font> <FONT color= #0000FF >Tengo un coche rojo</font> Resultado Tengo un coche rojo. Tengo un coche rojo Tengo un coche rojo. Tengo un coche rojo. Elemento INPUT. Este elemento define la introducción de variables; estas variables son las que definen las características del elemento. Junto a este elemento encontraremos los siguientes atributos: o Type. Indica el tipo de variable a introducir. Text. Indica que el campo a introducir será un texto. Sus atributos son los siguientes: Maxlenght=. Seguido de un valor que limitará el número máximo de caracteres a introducir en ese campo. Size=. Seguido de un valor que limitará el número de caracteres a mostrar en pantalla. Value=. Indica que no hay valor inicial del campo. Password. Indica que el campo a introducir será una palabra de paso. Mostrará asteriscos en lugar de letras escritas. Sus atributos serán iguales que los de la variable text. Checkbox. El campo se elegirá marcando de entre varias opciones una casilla cuadrada. Value=. Entre comillas se indicará el valor de la casilla. Checked=. La casilla aparecerá marcada por defecto. 17
Radio. El campo se elegirá marcando de entre varias opciones una casilla circular. Value=. Entre comillas se indicará el valor de la casilla. Image. El campo contendrá el valor en coordenadas del punto de la imagen que haya pinchado. Atributo obligatorio: Src=. Entre comillas escribiremos el nombre del archivo de imagen. Hidden. El visitante no puede modificar su valor, ya que no está visible. Se manda siempre junto al atributo value= seguido de su valor entre comillas. o Name=. Indicará el nombre que se asigna a un determinado campo. <p> Nombre: <INPUT type="text" name="nombre"><br> Apellido: <INPUT type="text" name="apellido"><br> email: <INPUT type="text" name="email"><br> <INPUT type="radio" name="sexo" value="varón"> Varón<BR> <INPUT type="radio" name="sexo" value="mujer"> Mujer<BR> <INPUT type="submit" value="enviar"> <INPUT type="reset"> </p> Este ejemplo de código daría como resultado un formulario así: Nombre: Apellido: 7. email: Varón Mujer Enviar Reset 18
Listas En este apartado describiremos los tres tipos de listas que podemos incluir en nuestros documentos y las herramientas que el lenguaje HTML nos proporciona para ello. Listas no ordenadas (viñetas). En este tipo de listas encontramos la información organizada de forma no secuenciada. Para construirlas se emplean los elementos ul y li. o Elemento ul. Es el que define y delimita la lista. Sus etiquetas son <ul></ul>. Sus principales atributos genéricos son: Style: define estilos CSS. Sus principales atributos de transición son: Type: es el estilo de viñeta. Entre sus posibles valores: disc, circle y square. o Elemento li. Es el que define y delimita cada punto de la lista. Sus etiquetas son <li></li>. Sus principales atributos genéricos son: Style: define estilos CSS. Sus principales atributos de transición son: Type: es el estilo de viñeta. Entre sus posibles valores: disc, circle y square. Codificación <ul> <li>tengo un coche rojo</li> <li>tengo un coche azul</li> <li>tengo un coche rosa</li> </ul> <ul type= square > <li>tengo un coche rojo</li> <li>tengo un coche azul</li> <li>tengo un coche rosa</li> </ul> Elemento ul li Resultado Tengo un coche rojo Tengo un coche azul Tengo un coche rosa Tengo un coche rojo Tengo un coche azul Tengo un coche rosa 19
Listas ordenadas. En las listas ordenadas la información se muestra secuenciada numérica o alfabéticamente. Este tipo de listas se construye igual que las listas no ordenadas, pero los elementos que se utilizan en este caso son los elementos ol y li. o Elemento ol. Es el que define y delimita la lista. Sus etiquetas son <ol></ol>. Sus principales atributos genéricos son: Style: define estilos CSS. Sus principales atributos de transición son: Type: define el tipo de secuencia. Entre sus posibles valores: 1 (secuencia numérica); I (secuencia numérica romana en mayúscula); i (secuencia numérica romana en minúscula); A (secuencia alfabética en mayúscula); a (secuencia alfabética en minúscula). Start: valor inicial de la secuencia. Valores posibles: un número. o Elemento li. Es el que define y delimita cada punto de la lista. Sus etiquetas son <li></li>. Sus principales atributos genéricos son: Style: define estilos CSS. Sus principales atributos de transición son: Type: define el tipo de secuencia. Entre sus posibles valores: 1 (secuencia numérica); I (secuencia numérica romana en mayúscula); i (secuencia numérica romana en minúscula); A (secuencia alfabética en mayúscula); a (secuencia alfabética en minúscula). Start: valor de inicio de la secuencia. Valores posibles: un número (en caso de listas de secuencia alfabética seguirá siendo un número, y la lista empezará en la letra correspondiente a ese número de orden). 20
Codificación Elemento ol li <ol> <li>tengo un coche rojo</li> <li>tengo un coche azul</li> <li>tengo un coche rosa</li></ol> <ol type= A"> <li>tengo un coche rojo</li> <li>tengo un coche azul</li> <li>tengo un coche rosa</li></ol> Resultado 1. Tengo un coche rojo 2. Tengo un coche azul 3. Tengo un coche rosa A. Tengo un coche rojo B. Tengo un coche azul C. Tengo un coche rosa Listas de definiciones o glosario. En estas listas la información se divide en dos secciones: concepto y definición. Para construirlas se utilizan los elementos dl, dt y dd. o Elemento dl. Es el que define y delimita la lista. Sus etiquetas son <dl></dl>. o Elemento dt. Es el que define y delimita el concepto a definir. Sus etiquetas son <dt></dt>. o Elemento dd. Es el que define y delimita la definición del concepto. Sus etiquetas son <dd></dd>. <dl> <dt>agua</dt> <dd>el agua es una sustancia cuya molécula está formada por dos átomos de hidrógeno y uno de oxígeno.</dd> <dt>aire</dt> <dd>se denomina aire a la mezcla de gases que constituye la atmósfera terrestre, que permanecen alrededor de la Tierra por la acción de la fuerza de gravedad.</dd> </dl> Resultado: Agua El agua es una sustancia cuya molécula está formada por dos átomos de hidrógeno y uno de oxígeno. 21
Aire Se denomina aire a la mezcla de gases que constituye la atmósfera terrestre, que permanecen alrededor de la Tierra por la acción de la fuerza de gravedad. 22
8. Tablas Las tablas son una de las herramientas más útiles para mostrar la información de una manera estructurada. Para componer una tabla en HTML necesitaremos los siguientes elementos: Table: Es el elemento que define y delimita la tabla. Sus etiquetas son <table></table>. Sus atributos principales son: o Width: anchura de la tabla. o Border: grosor del borde de la tabla. o Cellspacing: espacio entre celdas. o Cellpadding: espacio entre el contenido y los bordes de la celda. Tr: Es el elemento que define y delimita las filas de la tabla. Sus etiquetas son <tr></tr>. Td: Es el elemento con el que crearemos las celdas de la tabla. Sus etiquetas son <td></td>. Sus atributos principales son: o Align: alineación horizontal. o Valign: alineación vertical. o Colspan: número de columnas ocupadas por la celda. o Rowspan: número de filas ocupadas por la celda. Ejemplo: para construir una tabla básica podemos utilizar el siguiente código: <table> <tr> </tr> <tr> </tr> <tr> <td align= center >primero</td> <td align= center >segundo</td> <td align= center >tercero</td> <td align= center >cuarto</td> 23
</tr> </table> <td align= center >quinto</td> <td align= center >sexto</td> Y obtendríamos la siguiente tabla: primero tercero quinto segundo cuarto sexto 24
9. Enlaces Dentro de un documento HTML, los enlaces pueden clasificarse de dos maneras: Internos: Enlazan dentro de un mismo documento; Externos: Enlazan a otro documento. Elemento a. Sus etiquetas son: <a></a> (ambas obligatorias). Sus principales atributos son: o o Href (hipertexto-referencia) indica el recurso al que queremos acceder desde el ancla origen. Name (nombre) asigna un nombre al elemento a para que pueda ser usado como ancla destino. Su estructura básica consiste en la etiqueta o tag <a href="página"> al principio del enlace y cerrando con la etiqueta o tag </a>. El término página hace referencia a una URL (Localización de Recurso Universal, por sus siglas en inglés) que puede indicar la referencia a un documento HTTP, FTP, MAIL y otros protocolos de Internet que permiten localizar información en la Red. Ejemplos: Elemento a Codificación Referencia a una página local: <a href="index.html">principal </a> Referencia a una página en un servidor HTTP: <a href="http://www.wikipedia.org/index.html"> Bienvenido a Wikipedia </a> Principal Resultado Bienvenido a Wikipedia Referencia a un archivo en un servidor FTP:<a href="ftp://demo.elsendero.es"> El Sendero </a> El Sendero 25
10. Imágenes Para insertar una imagen en nuestro documento HTML debemos utilizar el elemento <img> (sin etiqueta de cierre). Sus principales atributos son: src: indica la dirección de origen de la imagen. Valores posibles: la URL de la imagen a insertar. También podemos insertar imágenes que estén almacenadas en nuestro equipo: o <img src="http://www.loquesea.com/nombreimagen.jpg > o <img src= directorio/nombreimagen.jpg > alt: Para proporcionar un texto alternativo en caso de que la imagen no esté disponible, o no se pueda visualizar. border: Para definir un borde alrededor de la imagen. Su valor es siempre un número que define el grosor de dicho borde (usando 0 para forzar que la imagen no tenga borde). <img src= http://www.eldia.es/zonaweb/wpcontent/uploads/2009/07/512d27e6c3wikipedia-logo.png alt= Esta es una imagen del logotipo de la Wikipedia border= 0 > 26
11. Marcos Los marcos son divisiones de la ventana del navegador que permiten mostrar varios documentos HTML a la vez. Para definir un conjunto de marcos se utilizan los elementos frameset y frame. Documento HTML 1 Marco 1 Marco 2 Documento HTML 2 Marco 3 Documento HTML 3 Documento HTML con 3 marcos En un conjunto de marcos, el elemento frameset toma el lugar de la etiqueta body, y se usa para definir la disposición dentro de la ventana (especificando filas o columnas) de los distintos marcos rectangulares. Los atributos definidos en el frameset se aplican a todos los frames que contiene en su interior. Los atributos principales son: Border y bordercolor: Se utilizan para definir respectivamente el grosor y color de los bordes que separan los distintos marcos. Cols y Rows: Se utilizan para definir respectivamente los anchos de las distintas columnas o filas de marcos que se van a mostrar. Se pueden usar valores en medidas absolutas en píxeles, porcentajes del ancho o alto total de 27
la ventana, o el valor *, para que uno o más marcos se adapten automáticamente al espacio disponible. Por ejemplo: o <frameset cols= 25%,120,* > </frameset> Esto generaría un conjunto de marcos de tres columnas, la primera con un ancho del 25% de total del ancho disponible, la segunda con 120 píxeles de ancho, y la última ocupando el resto del espacio disponible. Para un conjunto regular de marcos formando una cuadrícula se pueden definir los anchos y altos de cada uno mediante estos dos atributos cols y rows en un mismo elemento frameset. Para disposiciones irregulares, se pueden anidar conjuntos de marcos unos dentro de otros. Conjunto regular Conjunto irregular El elemento frame se usa para definir cada uno de los marcos contenidos dentro de un frameset, de la siguiente manera: <frameset> <frame> <frame> </frameset> Los atributos principales de un frame son Src: Indica el documento html que se va a mostrar dentro del marco. Name: Define un nombre asociado al marco. Noresize: Es un atributo al que no es necesario aplicar ningún valor. Simplemente colocándolo en la etiqueta frame impide que dicho marco pueda ser redimensionado manualmente por el usuario (de otro modo, el usuario puede cambiar el tamaño del marco pulsando en su borde con el ratón). 28
Scrolling: Define si aparecerán o no barras de desplazamiento en el marco si el contenido es mayor que el área del mismo. Los valores pueden ser auto (las barras de desplazamiento aparecen sólo si el contenido es mayor que el marco), no (nunca aparecerán) o yes (aparecen siempre, aunque el contenido encaje dentro del marco). Un ejemplo de conjunto de marcos regular sería: <doctype> <html> <head> <title>página de prueba</title> </head> <frameset cols="30%,*" rows="20%,*"> <frame src="pagina1.html" name="marco1" noresize scrolling="auto"> <frame src="pagina2.html" name="marco2" noresize scrolling="no"> <frame src="pagina3.html" name="marco3"> <frame src="pagina4.html" name="marco4"> </frameset> </html> Y el resultado sería: Marco 1 Marco 2 Marco 3 Marco 4 Un ejemplo de conjunto de marcos irregular, con un frameset anidado dentro de otro, sería: 29
<doctype> <html> <head> </head> <body> <title>página de prueba</title> <frameset cols="20%,*"> <frameset rows="33%,33%,*"> <frame="pagina1.html" name="marco1"> <frame="pagina2.html" name="marco2"> <frame="pagina3.html" name="marco3"> </frameset> <frame src="pagina4.html" name="marco4" noresize scrolling="auto" /> </frameset> </body> </html> Y resultaría en: Marco 1 Marco 2 Marco 4 Marco 3 30
12. Conclusiones El HTML es el código que permite la creación y edición de documentos web. Es un metalenguaje basado en etiquetas que posee la ventaja de que puede ser implementado por código de otros lenguajes como JavaScript, ampliando y mejorando su capacidad original. La sintaxis del lenguaje HTML está estructurada según el siguiente protocolo: etiqueta inicial, un número determinado de atributos, cierta cantidad de contenidos y una etiqueta de cierre. Los cuatro elementos básicos que componen la estructura de un documento HTML son DOCTYPE, documento html, head y body. Los elementos del lenguaje HTML que permiten darle forma a un documento son el encabezado, el párrafo, las citas, los elementos para enfatizar contenido y los elementos para centrar texto o imágenes. Existen dos tipos de elementos de estilo: los que modifican el texto entre dos etiquetas y los que modifican el texto que les sigue. Las listas en HTML pueden ser de tres tipos: no ordenadas, ordenadas y de definiciones o glosario. Los enlaces e imágenes en HTML se muestran utilizando las etiquetas <a></a> (enlaces) y <img> (imágenes). Los marcos o frames en HTML se utilizan para mostrar varios documentos HTML a la vez. 31
13. Mapa conceptual 32
14. Información complementaria - Curso de HTML 4.0: http://www.programacion.com/articulo/curso_de_html_4_0_32 - http://www.aulafacil.com/cursohtml/temario.htm - Wikilearning: http://www.wikilearning.com/curso_gratis/curso_completo_de_html/9708 - AulaClic: http://www.aulaclic.es/html/index.htm 33