PRIMEROS PASOS E HTML HTML es el lenguaje que se emplea para crear páginas web. Este lenguaje puede generar color, tamaño y fuente de letra, fondos, imágenes, hiperenlaces, listas de selección, botones, etc., que vendrán configurados mediante los denominados identificadores, también llamados tag. Un identificador o tag es una marca que permite fijar los atributos de tamaño, posición y comportamiento del texto y/o las imágenes de la página web. Por regla general los identificadores constan de una apertura (cuando se establecen sus características) y un cierre (cuando deben dejar de hacer efecto); sin embargo, algunos identificadores no tienen cierre. El formato base de un identificador es <identificador [atributos]>. Para cerrar el identificador se usa el formato </identificador> sin atributos. El texto comprendido entre ambos identificadores es el que se verá afectado por dichos identificadores. Los identificadores se pueden combinar para mejorar el resultado final. A su vez, en un identificador, los distintos atributos pueden combinarse a fin de obtener el efecto deseado en cada momento. Para escribir un código en HTML necesitaremos un editor de texto plano, es decir, que no introduzca caracteres no deseados en el código. Nosotro utilizaremos el bloc de notas de windows. Otra cosa más, HTML funcionará igual si tecleamos los tags y sus atributos en mayúsculas, minúsculas o una combinación de ambas. En este capítulo vamos a aprender cuál es la estructura básica de un código HTML (es decir, un documento web), así como la forma de crearlo y usarlo. Un documento web o página web es un conjunto de tags HTML que se escriben en un editor de texto plano y se ejecutan en un navegador web (Explorer, Netscape, etc.). Lo primero que tenemos que saber es que en toda página web existen dos partes claramente diferenciadas: la cabecera o head y el cuerpo o body. En la cabecera aparecen una serie de datos generales acerca del documento. El más evidente de estos datos es el título de la página, que aparecerá en la barra de título del navegador cuando se use dicha página. Del resto de los datos de la cabecera no vamos a preocuparnos por el momento. En el cuerpo se define el contenido de la página en sí, es decir, aquello que queremos que aparezca en el área de navegación del navegador. 1
barra de título barra de botones barra de dirección área de navegación La estructura básica de una página web es como la siguiente: Título de la página Siempre que generemos un código, deberemos guardarlo en una carpeta y/o en un disco 3 ½. Es vital que la extensión sea.htm (también vale.html), ya que sólo por la extensión el sistema operativo reconoce este archivo como un documento web. El nombre del archivo deberá escribirse en minúsculas y sin espacios ni caracteres especiales. Los únicos signos de puntuación admitidos son el punto (uno sólo), que lo usaremos para separar el nombre de la extensión y el guión bajo. El nombre podrá contener letras y números, pero deberá empezar por una letra. Así mismo, nos abstendremos de meter en el nombre de un archivo letras acentuadas, eñes o cualquier otro carácter de algún alfabeto local. Únicamente se admiten los caracteres del alfabeto internacional (inglés) Cuando guardemos el código en la carpeta o disco con el nombre adecuado, veremos el icono que representa al archivo con un formato como el siguiente: Para ejecutar la página, una vez creada, bastará con hacer doble clic sobre el icono y automáticamente se abrirá el navegador y se cargará la página. La ruta completa de acceso y el nombre del fichero aparecerán en la barra de dirección. 2
Ahora veamos en detalle el código que acabamos de escribir y qué es lo que hace. En primer lugar encontramos el tag. Este tag se emplea siempre para iniciar un código html. Es la forma de decirle al navegador que en ese punto empieza el código. Por esta razón se pone esta línea siempre como la primera del código. Por el contrario, al final del código tenemos el tag, que le indica al navegador que el código finaliza en ese punto. No deberemos incluir ningún tag ni nada más después de esta línea. Veamos a continuación el código de la cabecera: Título de la página al igual que el código general, la cabecera tiene un principio, indicado por, y un final, indicado por. Todo lo que queramos incluir en la cabecera irá colocado entre estas dos líneas. Aunque dentro del head se pueden incluir muchas cosas, de momento sólo incluiremos el título de la página. Este título va entre los tags y, que indican, respectivamente, el comienzo y el final de dicho título. El título es una cadena de texto que aparecerá en la barra de título del navegador cuando se ejecute la página. Este título es sólo un texto para que aparezca en la página y no tiene nada que ver con el nombre que le dimos al fichero. A continuación pasamos a la segunda sección de toda página web: el body o cuerpo. El body incluye todo lo que queramos visualizar en el área de navegación. Se inicia con el tag. A partir de este tag iremos metiendo código. Lo primero que vamos a hacer e s incluir un texto en la página para que se muestre en el área de navegación. cómo lo haremos?: Esto es una línea de texto. 3
A continuación guardamos el código. Para ello hacemos clic en el menú Archivo/ Guardar como y lo guardamos en la carpeta o disco correspondiente. Como nombre del fichero: texto_simple.htm. COFIGURADO FODO Y TEXTO En este capítulo vamos a aprender cómo poner un color de fondo en nuestra página y cómo modificar el texto, formatearlo, cambiar el tamaño, la tipografía, etc. Además, aprenderemos algunos recursos rudimentarios para colocarlos en la parte de la página que nos interese. COFIGURADO EL FODO El color por defecto del área de navegación es blanco, pero podemos asignarle diferentes colores. Para ello necesitamos añadirle al tag el atributo bgcolor, y le asignaremos un valor que indique el color que deseamos. La palabra bicolor viene del término inglés background color (color de fondo). Para entender la manera de establecer el color en HTML necesitamos saber cómo se crean los colores en el monitor. Para definir un color cualquiera en el monitor se hace a partir de una combinación de tres colores: rojo, verde y azul. Cualquier color que necesitemos crear se forma mezclando distintas proporciones de rojo, verde y azul. Para indicar un color cualquiera, cada uno de los colores primarios deberá recibir un valor entre 0 y 255. Así pues, el amarillo estaría formado por el máximo posible de rojo, el máximo posible de verde y nada de azul, es decir, sería la combinación 255, 255, 0. los valores de los colores primarios los expresaremos siempre en ese orden: proporción de rojo, verde y por último azul. Por eso a este formato se le conoce como RGB (de Red, Green, Blue). Sin embargo, los creadores de HTML han hecho el lenguaje de tal modo que los valores de los tres colores primarios hay que expresarlos en hexadecimal. Esta numeración permite emplear las letras de la A a la F, asignándoles los valores numéricos de 10 a 15. Así pues, el 0 decimal sería 00 hexadecimal, el 15 decimal sería 0F, el 255 sería FF, y así sucesivamente. Así pues, el color amarillo expresado en hexadecimal será FFFF00 (rojo=255=ff; verde=255=ff; azul=0=00). Además, deberemos añadir delante de la combinación de colores el signo # (almohadilla). Por lo tanto, si queremos que nuestra página tenga como color de fondo el amarillo, el tag quedará de la siguiente forma: <body bgcolor= #FFFF00 > nota: el valor que se le pasa a un atributo puede ir indistintamente entre comillas o sin ellas. Este mismo sistema que hemos aprendido para fijar el color de fondo nos servirá para establecer los colores de texto y de otros elementos de la página web. 4
COFIGURADO EL TEXTO Cómo establecer el color del texto en toda la página. Para ello recurrimos a otro atributo del tag. Se trata del atributo text que recibirá un valor en hexadecimal para determinar el color del texto. Veamos un ejemplo: colores_1.htm Colores <body bgcolor="#66cc99" text="#0000ff"> Texto azul sobre fondo verde 5
Organizar el texto en la página a) crear saltos de línea. Si tecleamos el siguiente código: (organizar_texto_1.htm). Organización Esto debería de ser una línea de texto. Y esto debería de ser otra. cuando lo ejecutemos veremos todo el texto en una sóla línea, en lugar de en dos líneas 6
esto es así porque los navegadores no reconocen un salto de línea, a no ser que se lo indiquemos específicamente. Para ello emplearemos otro tag nuevo. Se trata de <br>. Este tag no recibe ningún tipo de atributos y no tiene cierre, es decir, no existe </br>. (salto_de_línea.htm). Organización Esto debería de ser una línea de texto.<br> Y esto debería de ser otra. 7
si necesitamos las líneas más separadas, podemos introducir más saltos de línea en el código: (varios_saltos.htm). Organización Esto debería de ser una línea de texto.<br><br><br><br> Y esto debería de ser otra. 8
b) Crear párrafos. Para iniciar un párrafo de texto empleamos el tag <p> y terminamos el párrafo con el tag </p>. (usar_parrafos_1.htm). Uso de párrafos en HTML <p> Con cien cañones por banda, <br> viento en popa a toda vela, <br> no corta elmar, si no vuela <br> un velero bergantín. </p> <p> Bajel pirata al que llaman, <br> por su bravura, el temido, <br> en todo el mar conocido, <br> del uno al otro confín. </p> 9
<p> La luna en el mar riela, <br> en la lona gime el viento <br> y alza, en blando movimiento, <br> olas de plata y azul. </p> <p> Y va el capitán pirata, <br> cantando alegre en la popa. <br> Asia a un lado, al otro, Europa <br> y allá, a su frente, Estambul. </p> c) alineación del texto en la página Podemos darle a nuestro texto una rudimentaria alineación, usando el tag <div> y el atributo <align>. Este atributo puede recibir los siguientes valores: Center, si deseamos alinear el texto en el centro de la página. Right, si deseamos alinearlo a la derecha. 10
(alinear_1.htm). Ejemplo de alineaciones Este texto aparece a la izquierda. <div align=center> Este texto aparece centrado. </div> <div align=right> Este texto aparece a la derecha. </div> 11
Para alinear los contenidos al centro de la página podemos usar también el tag <center>. (alinear_2.htm). Ejemplo de alineaciones Este texto aparece a la izquierda. <center> Este texto aparece centrado. </center> <div align=right> Este texto aparece a la derecha. </div> d) Efectos simples en el texto. En el siguiente código observaremos que: - el texto que aparece entre los tags <b> y </b> queda en negrita (b indica bold (negrita)). - El texto que aparece entre los tags <i> y </i> aparece en cursiva (la i se refiere a italic (cursiva)). - El texto que aparece entre los tags <u> y </u> aparece subrayado (la u significa underlined (subrayado)). - El texto que aparece entre los tags <s> y </s> aparece tachado (la s significa strike (tachar)). 12
(efectos_simples_1.htm). Ejemplo de efectos simples <b> Esto es letra negrita </b> <br> <i> Esto es letra cursiva </i> <br> <u> Esto aparece subrayado </u> <br> <s> Esto aparece tachado </s> <br> Este texto no tiene efectos 13
también podemos combinar varios efectos en un solo texto: (efectos_simples_2.htm). Ejemplo de efectos simples <b><i><u> Esto es letra negrita, cursiva y subrayada. </u></i></b> <br> Este texto no tiene efectos. 14
IMPORTATE!!!: Como se aprecia he usado los tres tags anidados (uno dentro de otro) para acumular sus efectos sobre el texto. Es importantísimo, cuando anidamos distintos tags, cerrar primero el último que abrimos, y viceversa. Es decir, los tags se cierran siempre en orden inverso al que se abren. e) Crear encabezamientos. Para ello el texto del titular lo incluiremos entre los tags <h1> y </h1>. Este tag tiene dos efectos sobre el texto. Por una parte crea una letra de gran tamaño. Por la otra insertará en la página un salto de párrafo sin necesidad de usar los tags <p> y </p>: (encabezamientos_1.htm). Encabezamientos 15
<h1> Esto es el titular </h1> Esto es el texto normal.<br> Como ve, continúa debajo del titular. se emplean distintos tags para titulares, subtitulares, etc, simplemente cambiando el número 1 que aparece en este tag por otro número (hasta el 6). Veamos un ejemplo: (encabezamientos_2.htm). Encabezamientos 16
<h1> Esto es texto con h1. </h1> <h2> Esto es texto con h2. </h2> <h3> Esto es texto con h3. </h3> <h4> Esto es texto con h4. </h4> <h5> Esto es texto con h5. </h5> <h6> Esto es texto con h6. </h6> Esto es el texto normal.<br> Como ve continúa debajo del titular. 17
Efectos avanzados en el texto. Aprenderemos a continuación cómo configurar las características del texto (color, tipo de letra y tamaño) de toda la página por defecto. Para ello utilizaremos el tag <basefont>, que puede presentar los siguientes atributos: Color: sirve para establecer el color de todo el texto de la página por defecto. Face: sirve para cambiar el tipo de letra (que por defecto es Times New Roman). Size: sirve para cambiar el tamaño de la letra por defecto. El tamaño de la letra con <basefont> puede ir de 1 a 7, siendo el 1 la letra más pequeña y el 7 la más grande. El tamaño por defecto es equivalente al valor 3. Veamos un ejemplo: (fuentes_2.htm). Uso de fuentes 18
<basefont color="#0000ff" face="arial" size=2> El texto de esta página está en color azul. <br> Así lo hemos determinado mediante <br> el uso de basefont. </basefont> IMPORTATE!!!: <basefont> debe colocarse inmediatamente después de abrir el e inmediatamente antes de cerrar con <(body>. De este modo, las características de texto que son determinadas por este tag afectarán a toda la página. Pero si lo que queremos es modificar las propiedades de una parte del texto, en lugar de todo el texto de la página, emplearemos el tag <font>, que recibe los mismos atributos que <basefont>. (fuentes_3.htm). 19
Uso de fuentes <basefont color="#0000ff" face="arial" size=2> En esta página vamos a ver <br> un uso combinado de font y basefont. <br> El texto de esta página está en color azul. <br> Así lo hemos determinado mediante <br> el uso de basefont.<br> <font color=#ff0000 face="comic sans ms" size=4> Este texto aparece <br> afectado por el tag font.<br> </font> Aquí volvemos al texto <br> normal de la página.<br> </basefont> 20
Separar bloques de texto Cuando en una página tenemos mucho texto, conviene separar los bloques temáticos de forma clara y visible. Para ello, la solución más simple es usar líneas horizontales entre los distintos bloques de contenidos. Para generar una línea empleamos el tag <hr> (acrónimo de horizontal rule). Este tag genera, por defecto, una línea que cubre todo el ancho de l área de navegación, de lado a lado: (lineas_1.htm). Líneas horizontales 21
<p> Esto es un párrafo de texto. </p> <hr> <p> Esto es otro párrafo. </p> Este tag puede recibir el atributo width, que permite especificar la anchura que va a cubrir la línea expresada en un porcentaje del ancho de la ventana: (líneas_3.htm). Líneas horizontales 22
<p> Esto es un párrafo de texto. </p> <hr width=50%> <p> Esto es otro párrafo. </p> También podemos controlar el espesor de la línea. Para ello utilizaremos el atributo size, que sólo puede recibir un valor absoluto en píxeles. El valor máximo es de 100 pixeles. La línea que se obtiene es transparente, es decir, toma el color del fondo: (lineas_5.htm). Líneas horizontales 23
<p> Esto es un párrafo de texto. </p> <hr width=50% size=20> <p> Esto es otro párrafo. </p> Podemos cambiar el color de la línea mediante el atributo color: (lineas_7.htm). 24
Líneas horizontales <p> Esto es un párrafo de texto. </p> <hr width=50% size=20 color="#ff0000"> <p> Esto es otro párrafo. </p> 25
26