Esto en una pagina se vería así:
ITÁLICA
En este caso existen dos posibilidades, una corta: i y su cierre (italic) y otra un poco más
larga: EM y su cierre. En esta guía vamos a usar, y en la mayoría de las páginas que veréis
por ahí, os encontraréis con la primera forma sin duda más sencilla a escribir y a acordarse.
<p><i> Texto en italica </i> y texto normal</p>
Esto en una pagina se vería así:
SUBRAYADO
El HTML nos propone también para el subrayado la etiqueta: U (underlined). Sin embargo, el
uso de subrayados ha de ser aplicado con mucha precaución dado que los enlaces
hipertexto van, a no ser que se indique lo contrario, subrayados con lo que podemos
confundir al lector y apartarlo del verdadero interés de nuestro texto.
Además, cabe decir que la etiqueta U se ha quedado obsoleta, debido a que es algo que
realmente se debe hacer del lado del CSS, al ser básicamente un estilo.
<p><u> Texto subrayado</u> y texto normal</p>
Esto en una pagina se vería así:
ENCABEZADOS
Existen otras etiquetas para definir párrafos especiales, que funcionaran como títulos de
nuestra pagina. Son los encabezados o headings en inglés. Como decimos, son etiquetas
que formatean el texto como un titulo, pero el hecho de que cambien el formato no es lo
que nos tiene que preocupar, sino el significado en sí de la etiqueta. Es cierto que los
navegadores asignan un tamaño mayor de letra y colocan el texto en negrita, pero lo
importante es que sirven para definir la estructura del contenido de un documento HTML.
Así los navegadores para ciegos podrán informar a los invidentes que esta es una división
nueva de contenido y que su titulo es este o aquel. También motores de búsqueda sabrán
interpretar mejor el contenido de una página en función de los títulos y subtítulos.
Hay varios tipos de encabezados, que se diferencian visualmente en el tamaño de la letra
que utilizan. La etiqueta en concreto es la H1, para los encabezados más grandes, H2 para
los de segundo nivel y así hasta H6 que es el encabezado más pequeño. Pero lo
importante, insistimos es la estructura que denotan. Una página tendrá generalmente un
encabezado de nivel 1 y dentro varios de nivel 2.
8
Luego, dentro de los H2 encontraremos si acaso H3, etc. Nunca debemos usar los
encabezados porque nos formateen el texto de una manera dada, sino porque nuestro
documento lo requiera según su estructura.
Los encabezados se verán de esta manera en la página:
Los encabezados implican también una separación en párrafos, así que todo lo que
escribamos dentro de H1 y su cierre (o cualquier otro encabezado) se colocará en un
párrafo independiente.
Podemos ver cómo se presentan algunos encabezados a continuación.
<h1> Encabezado de nivel 1 </h1>
Los encabezados, como otras etiquetas de HTML, soportan el atributo align. Veremos un
ejemplo de encabezado de nivel 2 alineado al centro, aunque repetimos que esto debería
hacerse en CSS.
<h2 align=”center”> Encabezado de nivel 2 </h2>
LISTAS EN HTML
Las posibilidades que nos ofrece el HTML en cuestión de tratamiento de texto son
realmente notables. No se limitan a lo visto hasta ahora, sino que van más lejos todavía.
Varios ejemplos de ello son las listas, que sirven para enumerar y definir elementos.
Las listas originalmente están pensadas para citar, numerar y definir cosas a través de
características, o al menos así lo hacemos en la escritura de textos. Sin embargo, las listas
finalmente se utilizan para mucho más que enumerar una serie de puntos, en realidad son
un recurso muy interesante para poder maquetar elementos diversos, como barras de
navegación, pestañas etc.
Por ahora, trataremos las listas desde el punto de vista de su construcción y veremos los
diferentes tipos que existen, y que podemos utilizar para resolver nuestras distintas
necesidades a la hora de escribir textos en HTML.
Podemos distinguir dos tipos de listas HTML:
• Listas desordenadas
• Listas ordenadas
9
LISTAS DESORDENADAS
Son delimitadas por las etiquetas UL y su cierre (unordered list). Cada uno de los elementos
de la lista es citado por medio de una etiqueta LI (La LI tiene su cierre, aunque si no lo
colocas el navegador al ver el siguiente LI interpretará que estás cerrando el anterior). La
cosa queda así:
<p>Países del mundo</p>
<ul>
<li>Argentina</li>
<li>Perú</li>
<li>Chile</li>
</ul>
Esto en una pagina se vería así:
Podemos definir el tipo de viñeta empleada para cada elemento. Para ello debemos
especificarlo por medio del atributo type incluido dentro de la etiqueta de apertura UL, si
queremos que el estilo sea válido para toda la lista, o dentro de la etiqueta LI si queremos
hacerlo específico de un solo elemento. La sintaxis es del siguiente tipo:
<ul type="tipo de viñeta">
Donde tipo de viñeta puede ser uno de los siguientes:
• circle
• disc
• square
Vamos a ver un ejemplo de lista con un cuadrado en lugar de un redondel, y en el último
elemento colocaremos un círculo. Para ello vamos a colocar el atributo type en la etiqueta
UL, con lo que afectará a todos los elementos de la lista.
<ul type="square">
<li>Elemento 1 </li>
<li>Elemento 2 </li>
<li>Elemento 3 </li>
<li type="circle">Elemento 4
</ul>
10
Esto en una pagina se vería así:
LISTAS ORDENADAS
Las listas ordenadas sirven también para presentar información, en diversos elementos o
items, con la particularidad que éstos estarán predecidos de un número o una letra para
enumerarlos, siempre por un orden.
Para realizar las listas ordenadas usaremos las etiquetas OL (ordered list) y su cierre. Cada
elemento sera igualmente indicado por la etiqueta LI, que ya vimos en las listas
desordenadas.
Pongamos un ejemplo:
<p>Reglas de comportamiento en el trabajo</p>
<ol>
<li>El jefe siempre tiene la razón </li>
<li>En caso de duda aplicar regla 1 </li>
</ol>
Esto en una pagina se vería así:
Del mismo modo que para las listas desordenadas, las listas ordenadas ofrecen la
posibilidad de modificar el estilo. En concreto nos es posible especificar el tipo de
numeración empleado eligiendo entre números (1, 2, 3...), letras (a, b, c...) y sus mayúsculas
(A, B, C,...) y números romanos en sus versiones mayúsculas (I, II, III,...) y minúsculas (i, ii, iii,...).
Para realizar dicha selección hemos de utilizar, como para el caso precedente, el atributo
type, el cual será situado dentro de la etiqueta OL. Los valores que puede tomar el atributo
en este caso son:
11
Puede que en algún caso deseemos comenzar nuestra enumeración por un número o letra
que no tiene por qué ser necesariamente el primero de todos. Para solventar esta situación,
podemos utilizar un segundo atributo, start, que tendrá como valor un número. Este
número, que por defecto es 1, corresponde al valor a partir del cual comenzamos a definir
nuestra lista. Para el caso de las letras o los números romanos, el navegador se encarga de
hacer la traducción del número a la letra correspondiente.
Un ejemplo de todo esto sería:
<p>Ordenamos por números</p>
<ol type="1">
<li>Elemento 1 </li>
<li> Elemento 2 </li>
</ol>
<p>Ordenamos por letras</p>
<ol type="a">
<li>Elemento a </li>
<li> Elemento b </li>
</ol>
<p>Ordenamos por números romanos empezando por el 10</p>
<ol type="i" start="10">
<li>Elemento x </li>
<li> Elemento xi </li>
</ol>
Esto en una pagina se vería así:
12
ANIDANDO LISTAS
Nada nos impide utilizar todas estas etiquetas de forma anidada como hemos visto en
otros casos. De esta forma, podemos conseguir listas mixtas como por ejemplo:
<p>Ciudades del mundo</p>
<ul>
<li>Argentina </li>
<ol>
<li>Buenos Aires </li>
<li>Bariloche </li>
</ol>
<li>Uruguay </li>
<ol>
<li>Montevideo </li>
<li>Punta del Este </li>
</ol>
</ul>
Esto en una pagina se vería así:
ENLACES EN HTML
Hasta aquí, hemos podido ver que una página web es un archivo HTML en el que podemos
incluir, entre otras cosas, textos formateados a nuestro gusto e imágenes (las veremos con
detalle enseguida). Del mismo modo, un sitio web podrá ser considerado como el conjunto
de archivos, principalmente páginas HTML e imágenes, que constituyen el contenido al que
el navegante tiene acceso.
Sin embargo, no podríamos hablar de navegante o de navegación si estos archivos HTML
no estuviesen debidamente conectados entre ellos y con el exterior de nuestro sitio por
medio de enlaces hipertexto. En efecto, el atractivo original del HTML radica en la posible
puesta en relación de los contenidos de los archivos introduciendo referencias bajo forma
de enlaces que permitan un acceso rápido a la información deseada. De poco serviría en la
red tener páginas aisladas a las que la gente no puede acceder y desde las que la gente no
puede saltar a otras.
Un enlace puede ser fácilmente detectado por el usuario en una página. Basta con deslizar
el puntero del ratón sobre las imágenes o el texto y ver como cambia de su forma original
transformándose por regla general en una mano con un dedo señalador.
13
Adicionalmente, estos enlaces suelen ir, en el caso de los textos, coloreados y subrayados
para que el usuario no tenga dificultad en reconocerlos.
SINTAXIS DE UN ENLACE
Para colocar un enlace, nos serviremos de las etiquetas a y su cierre. Dentro de la etiqueta
de apertura deberemos especificar asimismo el destino del enlace. Este destino será
introducido bajo forma de atributo, el cual lleva por nombre "href".
La sintaxis general de un enlace es por tanto de la forma:
<a href="destino">contenido</a>
Siendo el "contenido" un texto o una imagen. Es la parte de la página que se colocará
activa y donde deberemos pulsar para acceder al enlace. Por su parte, "destino" será una
página, un correo electrónico o un archivo.
Por ejemplo, un enlace a la home de EggEducación, se vería así:
<a href="[Link] de EggEducació[Link]</a>
Esto en una pagina se vería así:
Ahora, si queremos que el contenido del enlace sea una imagen y no un texto, podremos
colocar la correspondiente etiqueta IMG dentro de la etiqueta a.
<a href="[Link] src="[Link]"></a>
Nota: veremos la etiqueta de imágenes más adelante.
EL ASPECTO DE LOS ENLACES
Nosotros mediante el HTML, y las hojas de estilo CSS, podemos definir el aspecto que
tendrán los enlaces en una página. Sin embargo, ya de manera predeterminada el
navegador los destaca para que los podamos distinguir. Generalmente encontraremos a
los enlaces subrayados y coloreados en azul, aunque esta regla depende del navegador
del usuario y de sus estilos definidos como predeterminados.
TIPOS DE ENLACES
Para estudiar en profundidad los enlaces tenemos que clasificarlos por su tipo, porque
dependiendo ese tipo algunas cosas cambiarán a la hora de construirlos.
En función del destino los enlaces son clásicamente agrupados del siguiente modo:
• Enlaces locales: los que se dirigen a otras páginas del mismo sitio web.
• Enlaces remotos: los dirigidos hacia páginas de otros sitios web. Estos son los que
vimos en el ejemplo anterior.
14
ENLACES LOCALES
Como hemos dicho, un sitio web esta constituido de páginas interconexas, que se
relacionan mediante enlaces de hipertexto. Para cumplir con esto es que vamos a utilizar
los enlaces locales.
Los enlaces locales se tratan de un tipo de enlace mucho más común en el día a día del
desarrollo. De hecho, es el tipo de enlace que más se produce en lo general. Estos enlaces
locales nos permiten relacionar distintos documentos HTML que componen un sitio web.
Gracias a los enlaces locales podremos convertir varias páginas sueltas en un sitio web
completo, compuesto de varios documentos.
Para crear este tipo de enlaces, hemos de usar la misma etiqueta A que ya conocemos, de
la siguiente forma:
<a href="[Link]">contenido</a>
RUTAS DE LOS ENLACES
Hacer un enlace en si no es para nada complejo. No requiere muchas explicaciones con lo
que ya hemos visto en la guía alcanza, sin embargo hay que abordar con detalle un tema
importante: las rutas de los enlaces. Como rutas nos referimos al destino del enlace, o sea,
lo que ponemos en el atributo "href" y es importante que nos paremos aquí porque nos
puede dar algunos problemas al desarrollar, sobre todo para las personas que puedan
tener menos experiencia en el trabajo con el ordenador.
Por regla general, para una mejor organización, los sitios suelen estar ordenados por
directorios. Estos directorios suelen contener diferentes secciones de la página, imágenes,
scripts, estilos, etc. Es por ello que en muchos casos no nos valdrá con especificar el
nombre del archivo, sino que tendremos que especificar además el directorio en el que
nuestro [Link] esta alojado.
Para aquellos que no saben como mostrar un camino de un archivo, aquí van una serie de
indicaciones que los ayudaran a comprender la forma de expresarlos. No resulta difícil en
absoluto y con un poco de practica lo haréis prácticamente sin pensar.
1. Hay que situarse mentalmente en el directorio en el que se encuentra la página
donde vamos a crear el enlace.
2. Si la página destino está en el mismo directorio que el archivo desde donde vamos
a enlazar podemos colocar simplemente el nombre del archivo de destino, ya que
no hay necesidad de cambiar de directorio.
3. Si la página de destino está en una carpeta o subdirectorio interior al directorio
donde está el archivo de origen, hemos de marcar la ruta enumerando cada uno de
los directorios por los que pasamos hasta llegar al archivo de destino, separándolos
por el símbolo barra "/". Al final obviamente, escribimos el nombre del archivo
destino.
4. Si la página destino se encuentra en un directorio padre (superior al de la página del
enlace), hemos de escribir dos puntos y una barra "../" tantas veces como niveles
subamos en la arborescencia hasta dar con el directorio donde esta emplazado el
archivo destino.
15
