Curso de HTML

Nota del autor

Como usuario de Internet me he encontrado con las dificultades propias del bajo nivel de conocimientos de la lengua inglesa; por este motivo decidí poner a disposición de los hispanoparlantes este documento que permita aprender como se crean páginas de la WWW para que cada vez tenga más fuerza nuestra lengua en la Red. Espero que así sea, de forma que si te sirve de algo este curso y creas tus propias páginas en español con información interesante enviame un mensaje para que pueda referenciarlas.

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.


Índice



Introducción


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. Para crear un documento hipertexto para la WWW con este lenguaje sólo debemos añadir las etiquetas adecuadas al texto que contiene la información.
Un documento hipertexto es aquel que, además de incluir texto e ilustraciones, permite el enlace con otros documentos hipertexto que desarrollan o hacen referencia al mismo tema. Por ejemplo, esta introducción podría haberse escrito de la siguiente forma:

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.


Sintaxis HTML


Como hemos dicho, HTML es un lenguaje basado en etiquetas. Estas etiquetas aportan al texto información sobre la forma en que será mostrado. Éstas deben seguir unas reglas determinadas, así, se entiende por etiqueta cualquier texto incluido entre los signos: "<" y ">".
La primera etiqueta que vamos a aprender es aquella por la que deben empezar todos los documentos que queramos sean considerados HTML; esta es:

La segunda etiqueta que aprenderemos será precisamente la última que se debe incluir en un documento HTML indicando el final del documento:

Como se ve, esta etiqueta es igual a la anterior pero precedida del signo "/", esta será la tónica general en HTML: casi todas las etiquetas tienen la estructura: <etiqueta> ... </etiqueta>, "marcando" el texto incluido entre ellas.

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:

Dentro de la cabecera se incluye el título del documento marcado por las etiquetas:

Dentro del cuerpo se incluye el "grueso" del documento, incluyendo el texto, las imágenes, los enlaces, etc.

De esta forma queda definida la estructura básica de cualquier documento HTML como sigue:



<HTML>

<HEAD><TITLE> ... </TITLE></HEAD>

<BODY>

.....

</BODY>

</HTML>

En el cuerpo de un documento HTML, el texto que se incluye carece por completo de formato, es decir, no tienen importancia los avances de línea y/o retornos de carro que incluya, sino que será el visualizador del usuario el que muestre el texto de la forma adecuada en función de los gustos del propio usuario final en cuanto a tamaño y tipo de letra, tamaño de la ventana de visualización, etc.
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.


Etiquetas HTML


El lenguaje HTML lo constituyen una gran variedad de etiquetas que permiten la creación de complejos documentos hipertexto. En este curso las dividiremos en varios grupos:

  1. Etiquetas para el estilo del texto
  2. Etiquetas para el formato del texto
  3. Etiquetas para la creación de enlaces
  4. Etiquetas para incluir imágenes
  5. Etiquetas para la creación de tablas
  6. Otras etiquetas

Etiquetas de estilo


En un documento HTML debemos distinguir dos tipos distintos de estilos: los estilos físicos y los lógicos. Los primeros son aquellos que determinan exactamente como se presentará el texto al usuario (por ejemplo negrita), y los segundos son aquellos que dan cierta cualidad al texto pero que dependerá de la configuración y tipo de visualizador para su presentación (por ejemplo una cita). De todos los estilos existentes en HTML, los más usuales son:


Etiquetas de formato


En un documento HTML el texto carece de formato, será el tamaño de la ventana del visualizador y el tipo de letra elegido por el usuario el que determine la disposición del texto. No obstante, se dispone de ciertas etiquetas HTML que permiten controlar el aspecto del texto.

Las etiquetas de formato más usuales son:


Etiquetas para crear enlaces


Para la creación de enlaces hipertexto disponemos de la pareja de etiquetas:

Estas permiten crear lo que se conoce como anclas. Un ancla puede ser tanto el punto de destino de un enlace, asignándole un nombre a un punto determinado de un documento; como la referencia a determinado punto (el ancla indicada anteriormente) del mismo u otro documento.

Según el tipo de ancla, el inicio de enlace (<A ...>) puede llevar los atributos:

La etiqueta que señaliza el punto de salto podrá incluir sólo el URL (sin #nombre) y el salto se producirá al inicio del documento, o bien podrá incluir sólo #nombre y el salto se producirá dentro del mismo documento que la contiene.

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.


Etiquetas para incluir imágenes


Para insertar una imagen se usará la etiqueta:

<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.


Etiquetas para crear tablas


Una tabla en HTML se encierra entre las etiquetas: <TABLE> y </TABLE>. Si queremos que aparezca el borde de la tabla añadiremos a <TABLE> el atributo BORDER.

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

 


Otras etiquetas HTML


Existen otras etiquetas como:

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

Anexos


  1. Definiciones
  2. Símbolos especiales

Definiciones


ASCII:
American Standard Code for Information Interchange - Código americano estándar para el intercambio de información
Hipertexto:
Estilo de documento que incluye texto, gráficos y enlaces a otros documentos.
HTML:
HyperText Markup Language - lenguaje de definición por marcas para hipertexto.
URL:
Uniform Resource Locator - Localizador uniforme de recursos. Indica la forma de aceder a un determinado recurso, como una imagen, un documento HTML, un fichero, etc. dentro de Internet.
Un URL tiene la estructura: protocolo://servidor/camino/recurso, donde:
WWW:
World Wide Web - Telaraña Mundial. Es la forma más fácil de distribuir información en Internet usando HTML.

Símbolos especiales


Los símbolos especiales permiten escribir en distintos lenguajes, incluyendo los acentos, diéresis, etc. Para incluirlos se usan las etiquetas mostradas en la tabla. Como vemos, todos empiezan por & y acaban en ;

Símbolo Etiqueta Símbolo Etiqueta Símbolo Etiqueta Símbolo Etiqueta
á &aacute; Á &Aacute; à &agrave; À &Agrave;
é &eacute; É &Eacute; è &egrave; È &Egrave;
í &iacute; Í &Iacute; ì &igrave; Ì &Igrave;
ó &oacute; Ó &Oacute; ò &ograve; Ò &Ograve;
ú &uacute; Ú &Uacute; ù &ugrave; Ù &Ugrave;
ä &auml; Ä &Auml; â &acirc; Â &Acirc;
ë &euml; Ë &Euml; ê &ecirc; Ê &Ecirc;
ï &iuml; Ï &Iuml; î &icirc; Î &Icirc;
ö &ouml; Ö &Ouml; ô &ocirc; Ô &Ocirc;
ü &uuml; Ü &Uuml; û &ucirc; Û &Ucirc;
ñ &ntilde; Ñ &Ntilde; ý &yacute; ÿ &yuml;
ç &ccedil; Ç &Ccedil; æ &aelig; Æ &AElig;
ø &oslash; Ø &Oslash; © &copy; ® &reg;
& &amp; " &quot; < &lt; > &gt;
     (espacio) &nbsp; &#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.


Juego de caracteres ISO-8859-1
  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

Bibliografía y referencias


Como de casi todos los temas relacionados con Internet, la mayor fuente de información sobre ellos es la propia Internet. Por este motivo, las referencias que a continuación se citan son en su mayor parte otros documentos hipertexto disponibles en Internet.

Además es posible encontrar información en varios artículos de revistas especializadas, como:


Como ayuda a cualquiera que desee desarrollar documentos HTML se encuentran disponibles muchos editores específicos que facilitan la labor. El que el autor ha utilizado en la realización de este curso es: HTML Assistant Pro en su versión Freeware.

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.

Si conoces otras referencias interesantes, a ser posible en español, envia un mensaje a:


José Alejandro Saavedra J.

mailto:joalsaju@hotmail.com

https://joalsaju.tripod.com/