Documentos de Académico
Documentos de Profesional
Documentos de Cultura
Intro HTML
Intro HTML
El editor Notepad++
Los documentos HTML se pueden crear con cualquier editor de texto que no aada
informacin de formato, como el programa Notepad que se distribuye con los sistemas
operativos Windows. Sin embargo existen editores que, manteniendo esa
caracterstica, entienden el lenguaje HTML coloreando las etiquetas reconocidas,
detectando errores de sintaxis y facilitando enormemente la tarea de edicin del texto
HTML.
Otras etiquetas no se aplican al texto encerrado entre su inicio y final, sino que
indican efectos o modificaciones en ellas mismas. Por ejemplo <br> inserta un salto
de lnea, <hr> una lnea de separacin horizontal, etctera.
Muchas etiquetas admiten calificadores que aaden informacin u opciones al
modo bsico de tratar el texto. As por ejemplo, si la etiqueta <div></div> trata
como un bloque el texto encerrado, <div align=center></div> indicar que
ese texto debe mostrarse centrado en la pantalla.
</html>
El cdigo HTML encerrado entre las marcas se divide en dos partes bien
diferenciadas: la cabecera y el cuerpo. La primera va encerrada entre las etiquetas
<head></head> y contiene el nombre de la pgina, que puede ser mostrado por el
navegador mientras la carga, informacin de estilos a utilizar en la pgina, scripts en
otros lenguajes de programacin, etctera.
El cuerpo viene encerrado entre <body></body> y contiene la informacin
que servir para mostrar la pgina: textos, formatos, enlaces, etctera. Esta etiqueta
admite varios calificadores para indicar el color del fondo (bgcolor), texto (text),
enlaces (link, vlink, alink), etctera, o para indicar una imagen de fondo
(background). Los colores se especifican mediante palabras reservadas (black,
red, blue) o indicando en hexadecimal sus tres componentes RGB (en la ventana
de seleccin de color del programa GIMP, nos aparecen como notacin html).
Tipos de letra
Aunque existen formas de definir tipos de letra y formatos ms completos para los
caracteres, slo vamos a comentar las etiquetas bsicas de que disponemos para
modificar el tipo de letra.
La etiqueta <b></b> hace que el texto que encierra se represente en negrita,
<i></i> en itlica, <u></u> sirve para representar texto subrayado y <s></s> texto
tachado. Adems disponemos de <tt></tt> para texto monoespacio o en formato
teletipo, <big></big> para representar texto de mayor tamao y <small></small>
para texto menor. Se pueden tambin indicar subndices y superndices con
<sub></sub> y <sup></sup> respectivamente.
Estas etiquetas se pueden mezclar en distintas letras de una palabra y se
pueden adems combinar, incluyendo varios modificadores. Por ejemplo
<b>T<i>e<u>xto</u></i></b> r<u>a</u><i>r</i><b>o</b>
se representara como
Texto raro
Formateando el texto
Una vez visto cmo podemos definir la apariencia de los caracteres en pantalla, queda
por estudiar como dar formato a os prrafos e incluir otros elementos tales como listas,
tablas etctera.
Otro elemento de formato muy usado es la lista. HTML permite generar listas sin
orden, es decir, cuyas opciones no van numeradas, con la etiqueta <ul></ul> y listas
ordenadas con <ol></ol>. Dentro de cada lista, los elementos se delimitan con
<li></li>. Por supuesto, est permitido incluir listas dentro de otras listas como aparece
en el ejemplo siguiente.
<ol>
<li>Primer elemento de la lista con orden.</li>
<li>Este segundo elemento es ms raro.<br>Incluye un salto de
nea slo para liar.</li>
<li>El tercero muestra cmo se pueden hacer listas anidadas.
<ul>
<li>Elemento de la lista de la lista.</li>
<li>Otro.</li>
<li>As hasta cansarnos</li>
</ul>
</li>
<li>Este, que es el ltimo, nos devuelve a la normalidad.</li>
</ol>
buena prctica para evitar confundirse al ver el texto tal como lo vamos escribiendo,
sin formato.
Y su apecto en el navegador:
y 2, columna 1
</tr>
<tr>
<td valign="middle" align="center">
<table bgcolor="pink" border=2>
<tr bgcolor="cyan" align="center">
<td>C1</td>
<td>C2</td>
<td>C3</td>
<td>C4</td>
</tr>
<tr>
<td bgcolor="cyan">F1</td>
<td>Texto1</td>
<td>Texto2</td>
<td>Texto3</td>
</tr>
<tr>
<td bgcolor="cyan">F2</td>
<td>Texto4</td>
<td>Texto5</td>
<td>Texto6</td>
</tr>
</table>
</td>
<td valing="middle" align="left">
Ahora viene la lista
<ol>
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
<li>Elemento 4</li>
<li>Elemento 5</li>
</ol>
</td>
</tr>
</table>
Enlaces
Hasta ahora hemos visto funciones de HTML para el formato de los textos y su
representacin en pantalla. Sin embargo, su caracterstica principal como lenguaje de
hipertexto es su capacidad para incorporar en los textos otro tipo de informacin:
imgenes, vdeo, sonidos u otros textos, y permitirnos navegar de unos a otros con
facilidad. Estas funciones del lenguaje se consiguen mediante etiquetas que
constituyen enlaces a otros ficheros o pginas.
El primer elemento que nos puede interesar incluir es una imagen. Esto se
consigue con la etiqueta <img> que requiere el atributo src para indicar dnde se
encuentra el fichero que contenga la imagen. Los tipos de ficheros que pueden ser
representados dependen del navegador. Normalmente los formatos de imagen ms
comunes (.jpg, .bmp, .gif, .png) pueden ser utilizados. Otros atributos interesantes
son los ya vistos height y width para indicar el tamao, align para indicar la
posicin con respecto a la pgina y border para situar, si se desea, un marco de los
pxeles indicados alrededor. Adems, hspace y vspace nos permiten indicar el
espacio libre a dejar alrededor de la imagen, tanto en horizontal como en vertical. Por
ltimo vale la pena comentar la etiqueta alt que permite definir un texto que
aparecer en lugar de la imagen mientras esta se carga o cuando pasemos el puntero
del ratn sobre ella. A continuacin aparece un ejemplo de cmo incluir una imagen en
una pgina:
<img src=mi_imagen.jpg alt=Foto de mis vacaciones align=middle>
El enlace por excelencia en las pginas web, el que nos permite enlazar otras pginas,
otras zonas de la propia pgina, ficheros, enviar correo electrnico, etctera es el
etiquetado con <a></a> (del ingls, anchor). El atributo ms importante es href, que
indica la direccin de la hiper-referencia y por construccin de esta, su tipo.
De esta manera, para enlazar una pgina web de Internet el texto que
utilizamos para el atributo ser http://direccion_web; si queremos enlazar un
fichero en nuestro servidor, pondremos nombre_de_fichero. Si queremos enviar
un
correo
electrnico
mediante
el
enlace
usaremos
la
expresin
mailto:direccin_de_correo. Los siguientes ejemplos sirven para mostrar
estos distintos tipos de enlaces y su uso.
Para saber ms
Adems de estas breves notas, se recomienda leer los tutoriales en lnea que existen
en la pgina web de la asignatura y consultar el cdigo HTML de las pginas que nos
gusten. Para resolver cualquier duda la referencia mejor es el manual del lenguaje
HTML.
Si por el contrario queremos remontarnos varios directorios por encima del actual nada
nos impide poner ../../../imagen.jpg. si, como en la figura inferior, la pgina
estuviera en subdir3 y el fichero imagen.jpg en Origen.
Y si queremos descender por otros subdirectorios de alguno por encima del actual, la
expresin quedar cmo ../../subdir2_2/subdir2_22/imagen.jpg si,
como aparece en esta ltima figura, la pgina se encuentra en subdir2_12 e
imagen.jpg en subdir2_22.
Para comprender las referencias relativas basta con tener en cuenta que cada ../
asciende una carpeta desde la que estamos, y cada nombre de carpeta desciende. As
../../ nos sita en subdir2 y de all vamos a subdir2_2 y subdir2_22.