|
|
Departamento de Electrónica Universidad de Jaén |
Este documento nace de la mera inquietud del autor por difundir el conocimiento. No tiene, pues, ningún ánimo de lucro. Por este motivo confío en que toda difusión que pueda tener sea de forma gratuita y desinteresada.
HTML es es acrónimo de HiperText Markup Language que, traducido al español, quiere decir algo así como lenguaje de definición por marcas para hipertexto, es decir, HTML es un lenguaje que permite definir documentos hipertexto a base de ciertas etiquetas que marcan partes de un texto cualquiera dándoles una estructura y/o jerarquía.
En la definición anterior, la palabra hipertexto aparece subrayada, lo que indica que es un enlace a otro sitio. Este sitio contendrá (en este caso) la definición de hipertexto. El lugar donde se encuentra la definición puede ser el mismo documento, otro documento en este mismo servidor u otro documento en cualquier servidor de Internet. Es esta posibilidad la que ha logrado la actual difusión de Internet, ya que permite a cualquier usuario sin conocimientos de informática la búsqueda de información o navegación por la Red.
Como he dicho antes, HTML permite convertir un texto cualquiera en hipertexto añadiendo ciertas etiquetas al mismo; estas etiquetas permiten fundamentalmente dar formato, incluir imágenes y crear enlaces en un documento, en definitiva dan un aspecto mucho más vistoso y atractivo que el de un texto normal. No obstante hay que destacar una de las principales características del HTML: los documentos definidos con este lenguaje no serán representados de igual forma en todos los visualizadores, por lo que al confeccionarlos debemos prestar más atención a la estructura y organización del texto que a la apariencia del mismo (esto último lo haríamos si quisieramos el texto para imprimirlo). En versiones más recientes, incluso aún en desarrollo, de HTML se incluyen nuevas etiquetas para cuidar más la presentación; esto queda fuera del alcance de este curso, pero con la información que aquí se facilita y las referencias seleccionadas, espero que todo aquel que tenga alguna información que aportar a la WWW sea capaz de crear sus documentos HTML.
Creo que la principal virtud del HTML es su facilidad de aprendizaje y uso, ya que no es necesario el manejo de ninguna herramienta específica para la creación de documentos salvo un procesador de textos capaz de generar documentos en formato ASCII.
En las etiquetas HTML no afecta el uso de mayúsculas o minúsculas, es indiferente el uso que se haga de ellas. Por otra parte, si la etiqueta (texto introducido entre los signos "<" y ">") no existe será ignorada (Esto permite que cada visualizador use etiquetas propias y que visualizadores antiguos permitan ver documentos HTML de versiones posteriores).
Además del inicio y fin de documento, cualquier documento HTML se divide en dos partes fundamentales: la cabecera y el cuerpo, separadas por las etiquetas:
BACKGROUND="URL" para seleccionar la imagen indicada por URL como fondo de la página.
BGCOLOR="rrggbb" para seleccionar el color de fondo en formato RGB 24 bits.
De esta forma queda definida la estructura básica de cualquier documento HTML como sigue:
<HTML>
<HEAD><TITLE> ... </TITLE></HEAD>
<BODY>
.....
</BODY>
</HTML>
Sólo mediante el uso de etiquetas de formato y estilo será posible controlar el aspecto del documento cuando sea presentado al usuario, y como se dijo en la introducción, más bien controlando la estructura.
| Etiqueta | Efecto |
|---|---|
<B>...</B> | Negrita |
<I>...</I> | Cursiva |
<U>...</U> | Subrayado |
<TT>...</TT> | Fijo (No proporcional) |
| Etiqueta | Efecto |
|---|---|
<ADDRESS>...</ADDRESS> | Dirección |
<CITE>...</CITE> | Cita |
<CODE>...</CODE> | Código |
<DFN>...</DFN> | Definición |
<EM>...</EM> | Énfasis |
<KBD>...</KBD> | Teclado |
<SAMP>...</SAMP> | Ejemplo |
<STRONG>...</STRONG> | Fuerte |
<VAR>...</VAR> | Variable |
Las etiquetas de formato más usuales son:
| Etiqueta | Efecto |
|---|---|
<Hn>...</Hn> | Cabecera de nivel n |
| Etiqueta | Efecto |
|---|---|
<BLOCKQUOTE>...</BLOCKQUOTE> | Sangrado |
<BR> | Ruptura de línea |
<CENTER>...</CENTER> | Centrado |
<HR> | Línea horizontal |
<P> | Fin de párrafo |
<PRE>...</PRE> | Texto preformateado |
| Etiqueta | Efecto |
|---|---|
<UL>...</UL> | Lista sin numerar |
<OL>...</OL> | Lista numerada |
<DIR>...</DIR> | Directorio |
<MENU>...</MENU> | Menú |
<LI> | Elemento de la lista |
<DL>...</DL> | Lista de definiciones |
<DT> | Elemento a definir |
<DD> | Definición |
Según el tipo de ancla, el inicio de enlace (<A ...>) puede llevar los atributos:
Un ancla quedará en el documento como: <A NAME="nombre">texto</A>
donde "texto" puede ser cualquier cosa que aparecerá en pantalla sin ninguna modificación, es decir, un ancla de este tipo no se aprecia al visualizar el documento.
Un enlace quedará en el documento como: <A HREF="URL#nombre">texto</A>
donde "texto" aparecerá subrayado en el visualizador para poder pulsar sobre él y saltar.
El nombre que se da a un ancla debe ser idéntico al que se da posteriormente en el enlace, respetando el uso de mayúsculas y minúsculas.
Si los enlaces son documentos dentro del mismo servidor es conveniente omitir del URL la información referente a él (http://host/) para agilizar las transferencias.
<IMG SRC="URL">
URL indica el localizador de la imagen a incluir.
La etiquetas pueden incluir además algunos atributos como:
En este último caso, la imagen debe ir entre las etiquetas <A HREF=...> y </A> para poder pulsar sobre ella. También es posible, sin ser un mapa, crear un enlace mediante una imagen.
Para poder presentar una imagen en una página HTML, ésta deberá estar en formato GIF, aunque en versiones posteriores se permiten otros formatos como el JPEG y con las extensiones adecuadas en el visualizador se permiten muchos otros, incluso de video (AVI, MPEG, ...).
Cómo el formato más usual es el GIF, es recomendable usar la versión 89a que permite incluir información sobre zonas transparentes en la imagen y almacenar el fichero en formato entrelazado que hace que la imagen aparezca progresivamente mientras se carga con resolución media.
Dentro de la tabla, cada fila queda delimitada por las etiquetas: <TR> y </TR>.
Y dentro de cada fila, las celdas (columnas) se delimitan por las etiquetas: <TD> y </TD>, es decir, el contenido de cada celda aparecerá delimitado por estas etiquetas.
Si queremos que ciertas celdas de la tabla sean cabeceras y aparezca resaltadas, podemos delimitar estas celdas con las etiquetas <TH> y </TH> en lugar de con <TD> y </TD>.
Si queremos añadir un título a la tabla, lo introduciremos entre las etiquetas: <CAPTION> y </CAPTION>.
Resumiendo:
| Etiqueta | Efecto |
|---|---|
<TABLE>...</TABLE> | Inicio y fin de tabla |
<TR>...</TR> | Inicio y fin de fila |
<TD>...</TD> | Inicio y fin de celda |
<TH>...</TH> | Inicio y fin de celda de cabecera |
<CAPTION>...</CAPTION> | Inicio y fin del título |
| Etiqueta | Significado |
|---|---|
<!--texto-> | Comentario (no se visualiza) |
<BASE URL> | URL del fichero actual (sin incluir el nombre) debe aparecer en la cabecera. |
<ISINDEX> | Documento índice |
| Símbolo | Etiqueta | Símbolo | Etiqueta | Símbolo | Etiqueta | Símbolo | Etiqueta |
|---|---|---|---|---|---|---|---|
| á | á | Á | Á | à | à | À | À |
| é | é | É | É | è | è | È | È |
| í | í | Í | Í | ì | ì | Ì | Ì |
| ó | ó | Ó | Ó | ò | ò | Ò | Ò |
| ú | ú | Ú | Ú | ù | ù | Ù | Ù |
| ä | ä | Ä | Ä | â | â | Â | Â |
| ë | ë | Ë | Ë | ê | ê | Ê | Ê |
| ï | ï | Ï | Ï | î | î | Î | Î |
| ö | ö | Ö | Ö | ô | ô | Ô | Ô |
| ü | ü | Ü | Ü | û | û | Û | Û |
| ñ | ñ | Ñ | Ñ | ý | ý | ÿ | ÿ |
| ç | ç | Ç | Ç | æ | æ | Æ | Æ |
| ø | ø | Ø | Ø | © | © | ® | ® |
| & | & | " | " | < | < | > | > |
| (espacio) | | &#nn; | Código nn* |
*nn hace referencia al número del caracter en el código estándar ISO-8859-1. Por ejemplo, el símbolo ¡ es el número 161, y el símbolo ¿ es el número 191.
NOTA: En el caso de los símbolos especiales hay que destacar que deben escribirse tal y como aparecen en la tabla, respetando mayúsculas y minúsculas.
| 32 | ! | 33 | " | 34 | # | 35 | $ | 36 | % | 37 | & | 38 | ' | 39 | |
| ( | 40 | ) | 41 | * | 42 | + | 43 | , | 44 | - | 45 | . | 46 | / | 47 |
| 0 | 48 | 1 | 49 | 2 | 50 | 3 | 51 | 4 | 52 | 5 | 53 | 6 | 54 | 7 | 55 |
| 8 | 56 | 9 | 57 | : | 58 | ; | 59 | < | 60 | = | 61 | > | 62 | ? | 63 |
| @ | 64 | A | 65 | B | 66 | C | 67 | D | 68 | E | 69 | F | 70 | G | 71 |
| H | 72 | I | 73 | J | 74 | K | 75 | L | 76 | M | 77 | N | 78 | O | 79 |
| P | 80 | Q | 81 | R | 82 | S | 83 | T | 84 | U | 85 | V | 86 | W | 87 |
| X | 88 | Y | 89 | Z | 90 | [ | 91 | \ | 92 | ] | 93 | ^ | 94 | _ | 95 |
| ` | 96 | a | 97 | b | 98 | c | 99 | d | 100 | e | 101 | f | 102 | g | 103 |
| h | 104 | i | 105 | j | 106 | k | 107 | l | 108 | m | 109 | n | 110 | o | 111 |
| p | 112 | q | 113 | r | 114 | s | 115 | t | 116 | u | 117 | v | 118 | w | 119 |
| x | 120 | y | 121 | z | 122 | { | 123 | | | 124 | } | 125 | ~ | 126 | &127; | 127 |
| € | 128 | | 129 | ‚ | 130 | ƒ | 131 | „ | 132 | … | 133 | † | 134 | ‡ | 135 |
| ˆ | 136 | ‰ | 137 | Š | 138 | ‹ | 139 | Œ | 140 | | 141 | Ž | 142 | | 143 |
| | 144 | ‘ | 145 | ’ | 146 | “ | 147 | ” | 148 | • | 149 | – | 150 | — | 151 |
| ˜ | 152 | ™ | 153 | š | 154 | › | 155 | œ | 156 | | 157 | ž | 158 | Ÿ | 159 |
| 160 | ¡ | 161 | ¢ | 162 | £ | 163 | ¤ | 164 | ¥ | 165 | ¦ | 166 | § | 167 | |
| ¨ | 168 | © | 169 | ª | 170 | « | 171 | ¬ | 172 | | 173 | ® | 174 | ¯ | 175 |
| ° | 176 | ± | 177 | ² | 178 | ³ | 179 | ´ | 180 | µ | 181 | ¶ | 182 | · | 183 |
| ¸ | 184 | ¹ | 185 | º | 186 | » | 187 | ¼ | 188 | ½ | 189 | ¾ | 190 | ¿ | 191 |
| À | 192 | Á | 193 | Â | 194 | Ã | 195 | Ä | 196 | Å | 197 | Æ | 198 | Ç | 199 |
| È | 200 | É | 201 | Ê | 202 | Ë | 203 | Ì | 204 | Í | 205 | Î | 206 | Ï | 207 |
| Ð | 208 | Ñ | 209 | Ò | 210 | Ó | 211 | Ô | 212 | Õ | 213 | Ö | 214 | × | 215 |
| Ø | 216 | Ù | 217 | Ú | 218 | Û | 219 | Ü | 220 | Ý | 221 | Þ | 222 | ß | 223 |
| à | 224 | á | 225 | â | 226 | ã | 227 | ä | 228 | å | 229 | æ | 230 | ç | 231 |
| è | 232 | é | 233 | ê | 234 | ë | 235 | ì | 236 | í | 237 | î | 238 | ï | 239 |
| ð | 240 | ñ | 241 | ò | 242 | ó | 243 | ô | 244 | õ | 245 | ö | 246 | ÷ | 247 |
| ø | 248 | ù | 249 | ú | 250 | û | 251 | ü | 252 | ý | 253 | þ | 254 | ÿ | 255 |
Tambien es útil disponer de un editor de gráficos que permita trabajar con el formato GIF versión 89a (para entrelazado y transparencias) como Paint Shop Pro.
Ambos están disponbles en ftp://voltio.ujaen.es/ o http://voltio.ujaen.es/pub/html junto con otras utilidades y documentos sobre HTML.
Si conoces otras referencias interesantes, a ser posible en español, envia un mensaje a:
mailto:casanova@ujaen.es
http://voltio.ujaen.es/dto/personas/casanova.htm