Si no sabes absolutamente nada...
| ¡APRENDE HTML FACILMENTE! |
De la mano de un autodidacta y en una sola lección!
¡Todo "en texto" para que lo imprimas cómoda y rápidamente (ocupa poquito)!
Házte una idea de qué es eso del HTML, presume ante tus amigos contándoles mentiras
como que creas páginas web sin editores, explícales "lo fácil que es", y a continuación,
cómprate sin miedo un buen libro sobre el tema y aprende de verdad.
¡No me interesa nada, quiero volver a la home page!
Confieso que para escribir esta página he utilizado, por comodidad, el editor PageMill 2.0,
Pero siguiendo las instrucciones siguientes se puede escribir una página web sencilla "que
funcione" perfectamente. Sin embargo, mi intención es sólo familiarizarte con el lenguaje
HTML, y animarte a que aprendas un poquito más de la mano de auténticos entendidos.
Las páginas web constan básicamente de un texto que se puede escribir con cualquier procesador de textos que permita guardar lo escrito como texto ASCII: es decir, casi todos. Sin ir más lejos, el Wordpad de Windows o el Simpletext de MacOS.
El texto ASCII es texto simple, sin códigos extraños propios de cada programa (Word, Wordperfect...). El documento creado por estos aparecerá con sufijos propios (las abreviaturas que aparecen detrás del nombre separadas por un punto) como texto.txt o texto.wps, etc...
Nuestro texto va a ser un documento HTML (hiper-text-markup-language o algo asi). debemos, por tanto renombrarlo con el sufijo correspondiente, es decir: texto.html o también texto.htm
Renombrado así, el Navegador que utilicen nuestros lectores, ya sean Explorer, Navigator, Opera... entenderán que se trata de un documento HTML y accederán a el como tal.
Puedes ver como está escrita o "codificada" una página web abriendo el documento con un procesador de textos corriente. Podrás observar que al texto "normal", al que se lee desde el navegador, se le añaden unos códigos raros. Este es el lenguaje HTML.
Esa jerga rara sirve para indicar dónde viene un retroceso de carro, dónde un acento, dónde debe verse una imagen, para crear tablas, para crear "links" o enlaces a otras páginas o puntos de esa misma página, etc, etc...
Verás que el texto empieza con <html> y termina con </html>. Estas se llaman etiquetas o tags. La primera indica el comienzo de un documento html. La segunda, con una barra / ,indica donde termina este.
A continuación verás las etiquetas <head> y </head>, es decir, comienzo y fin de cabecera. Dentro de esta, es decir, entre ambas etiquetas, aparecerá el título, entre las etiquetas <title> y </title>. Este título no es (aunque puede coincidir) el título que se ve al leer el documento con el navegador. Pero si será el que aparezca como titular de la página si se guarda como "bookmark" o "favoritos", y será también el que se vea en la ventana del navegador en vuestro ordenador.
También pueden aparecer códigos como <meta name="generator" content="nombre del editor de páginas web">, que indican el programa con el que se creó la página. Si lo hacéis con un simple editor de textos podéis poner "con estas manitas y a pelo"
Y, por fin, entre las etiquetas <body> y </body> el "body" o cuerpo del texto principal. Es decir, lo que se puede leer y ver desde el navegador.
¿YA PUEDO ESCRIBIR ALGO, PARA EMPEZAR?
¡Adelante! Olvídate, de momento, de acentos, eñes, y aperturas de interrogación y exclamación (no son texto ASCII) Empieza con algo así:
<HTML>
<HEAD>
<meta name="generator" content="Hecho con mi editor de páginas web favorito">
<TITLE>
MI PRIMER DOCUMENTO HTML
</TITLE>
<BODY>
Este es mi primer documento html escrito sin editores.
</BODY>
</HTML>
¿PUEDO ELEGIR EL COLOR DEL FONDO o tiene que aparecer ese feo color gris que me sale hasta ahora?
Claro que si, y aunque sobre gustos no hay nada escrito, procura al menos que el texto sea legible (también vermos como puedes cambiar el color de éste). Para ello debes decirle al navegador que le ponga al "background" o fondo de la página un color determinado. Los colores de los monitores de los ordenadores, como los de la tele, dependen de la luminosidad que tengan los puntitos o pixels rojos, verdes y azules de la pantalla. (No, no hay más, el resto de colores y tonos se consigue combinando luminosidades de éstos.)
El color se indica, pues, con tres pares de dígitos, dos para el rojo, dos para el verde y dos para el azul. La escala de luminosidad para cada uno de ellos es un poquito rara, siendo, de menor a mayor: 00 ... 33 ... 66 ... 99 ... CC ... FF
De este modo, el color negro sería #000000, es decir, cero luminosidad en los tres colores base. Un blanco, por el contrario sería #ffffff o máxima luminosidad en los tres colores. ¿Y un color amarillo, por ejemplo? Pues algo asi como #ffff00: nada de azul y máximo de rojo y verde dan un amarillo intenso.
En fin, que el color del fondo se lo podemos añadir a la etiqueta "body" de la siguiente manera: <BODY BGCOLOR= "#ffffff">, es decir, queremos que el background color del body o color de fondo del cuerpo del documento HTML tenga una intensidad máxima en los tres colores, o sea, que sea blanco como el de esta página.
¿Y EL COLOR DEL TEXTO TAMBIÉN SE PUEDE CAMBIAR?
Pues sí, en la línea superior tienes la prueba. Sólo hay que añadir al texto en cuestión la etiqueta siguiente:
< FONT COLOR= #FF0000> texto en cuestion </FONT>
es decir, color de la "fuente" o tipografía FF0000, o sea, rojo. Observa que terminamos con la etiqueta </FONT>. Esto es para indicar que los atributos que damos al texto (color en este caso) terminan ahí.
¿Y QUÉ MAS PUEDO HACER CON EL TEXTO?
Comparado con lo que se puede hacer con un procesador de textos decente, poco. Pero es suficiente para la mayoría de los casos.
Retroceso de carro: Pon simplemente la etiqueta <BR> (de break line, en inglés)
Crear párrafos: Al comienzo de éstos pon <P> y al final </P> (de paragraph)
Texto en negrita: Donde este comience <B> y donde acabe </B> (de bold, negrita en inglés)
Texto en cursiva: Al principio <I> y al terminar </I> (de italic, cursiva en inglés)
Alineaciones:
Alineación izquierda: Por defecto, la alineación es a la izquierda, no hace falta, en principio, poner nada. Sería, en todo caso, <P ALIGN=LEFT> texto que se quiere alinear </P>
Alineación derecha: <P ALIGN=RIGHT> texto que se quiere alinear </P>. Es decir, se pide al navegador que alinee todo el párrafo contenido entre ambas etiquetas.
Alineación al centro: <P ALIGN=CENTER> texto que se quiere alinear </P>. Si quieres alinear al centro toda la página, puedes poner un hermoso <CENTER> al principio y ya está.
Cambiar el cuerpo o tamaño del texto. Para titulares, por ejemplo. Tienes, en principio, una escala de tamaños entre -2 y +4, siendo "0" el tamaño normal por defecto. El texto a variar irá entre etiquetas "FONT", como cuando hablábamos del cambio de color. En este caso no cambiamos el "COLOR" si no el tamaño o "SIZE". De este modo:
<FONT SIZE=+2> Titular o lo que sea </FONT>
Otro modo, más específico para cabeceras, es utilizar, de menor a mayor, las etiquetas <H6>, <H5>, <H4>, <H3>, <H2> ó <H1>, antes del texto y </H> al final;
<H3> Cabecera en cuestión </H>
Se pueden hacer más cosas, claro, pero explicarlo todo, insisto, no es la finalidad de esta página web. Crear columnas y bloques de texto, por ejemplo, es algo que muchísimos libros explican en varios idiomas, y a ellos os remito.
Caracteres especiales: Insisto en que el texto HTML es texto ASCII, no puedes teclear como si tal cosa un acento y mucho menos, claro, una "eñe". Algunos caracteres especiales frecuentes en español (ya está la "Ñ") son los siguientes:
La "ñ". En vez de teclearla debes sustituirla por todo esto: ñ (punto y coma incluidos). Así, una palabra como... ñoño se escribiría en html así: ñoño
Un acento también necesita un "código" especial. Una "a" acentuada sería á Una "e" acentuada sería é "código" se escribe, por tanto, código
El acento a la izquierda es à è ì ò ù etc...
Las comillas son " (siempre con el punto y coma, ojo) ¿Queda "claro"?
Abrir interrogación (¿) , al contrario que cerrarla (?) tiene también miga. Hay que poner ¿
Con abrir Admiración (¡), ocurre lo mismo. En este caso podremos ¡:
¿QUIERES PONER ESAS FEAS LINEAS HORIZONTALES, como esa de más arriba?
Sólo hay que teclear <HR>. Si no añades nada más, la línea ocupará el ancho de la ventana de tu navegador. Pero puedes controlar su longitud en cuanto a porcentaje de ventana ocupado con la etiqueta <HR WIDTH="50%">, por ejemplo, si quieres que ocupe un 50% de ésta.
Si quieres ser más preciso, puedes dar la longitud en píxels, de este modo: <HR WIDTH="100">, donde "100" son 100 píxels de anchura.
El grosor de las reglas o líneas también es controlablede modo parecido, indicando el grosor (SIZE) en píxels. Así, una regla de 10 píxels sería: <HR SIZE="10">
Para complicarlo un poco más: ¿Y una regla alineada a la izquierda, de un 50% de ancho y 10 píxels de altura? Fácil: <HR ALIGN=LEFT SIZE="10" WIDTH="50%">
Por último: Las reglas aparecen por defecto con un efecto de relieve y sombra (SHADE). Si se quiere que la regla sea una simple línea negra, en el ejemplo anterior habría que añadir que no queremos que tenga SHADE, o sea: <HR ALIGN=LEFT SIZE="10" WIDTH="50%" NOSHADE>.
BUENO... ¿PERO QUE PASA CON LAS IMÁGENES?
Las imágenes se insertan en la página como si de un caracter de texto se tratara. Es decir, ocupan una posición respecto de una "línea de texto" y hay que alinearlas y colocarlas en consecuencia. Por supuesto las imágenes se "ven" en la página web, peron en realidad "no están ahí", son un archivo gráfico al que "llamamos" para que aparezca donde queremos.
¿Como colocamos una imagen? Escribiendo en html una "llamada" como esta: <IMG SRC="imagen.gif"> Donde "imagen" es el nombre de la imagen, foto o ilustración que queremos colocar, y "gif" el sufijo del formato de imagen que utilizamos. Los formatos más utilizados son GIF y JPG. Ambos tienen ventajas y desventajas, pero eso ya pertenece a otro capítulo.
Ojo, hemos supuesto que la imagen se encuentra en el mismo directorio o carpeta que nuestra página web. De lo contrario, habría que indicar con las consabidas barras "/" la ruta de acceso a éstas. Por ejemplo: <IMG SRC="mi_web/imagenes/imagen.gif">
Es IMPORTANTE recordar que hay que respetar las mayúsculas o minúsculas al nombrar y hacer referencia a nuestros archivos. Y por mucho que uséis Win95 ó Win98 ó un Macintosh es más que aconsejable respetar la vieja norma de los nombres de ocho caracteres y sufijos de tres.
Es probable que el navegador, por defecto, dibuje un recuadro azul alrededor de vuestra imagen para resaltarla. Para evitar esto sólo hay que incluir en la etiqueta de inserción de la imagen que no queremos ese "borde" de este modo: <IMG SRC="imagen.gif" BORDER="0"> (Si se sustituye el "0" por 1, 2, 3 ... el grosor del recuadro aumentará)
Vuestra imagen tendrá unas determinadas dimensiones en píxels. A pesar de esto se puede forzar al navegador a distorsionar o escalar la imagen cambiando sus parámetros en píxels. Esto puede ser muy práctico en ocasiones. Lo haríamos así, dándo las medidas en anchura (width) y altura (height):
<IMG SRC="imagen.gif" WIDTH="120" HEIGHT= "60" BORDER="0">
ESTO ES HTML... ¿Y LOS FAMOSOS LINKS O ENLACES?
Lo más característico de las páginas escritas con html es su funcionamiento como "hipertexto" (de ahí viene el "HT" de HTML). Haciendo clic con el puntero del ratón sobre una palabra, frase o imagen (foto, botón o lo que sea) saltamos a otro punto de esa página, a otra página web en el mismo servidor, o incluso a un punto concreto de una página en un remoto servidor en otro punto del planeta. ¿Cómo? Fácil, "debajo" de ese punto en que se hace ese clic hay un código HTML como éste:
Para enlazar con otra página (en el mismo directorio)
<A HREF="otrapag.html"> pulsa aqui </A> donde "otrapag.html", por ejemplo, es el nombre de la página a la que se quiere "saltar" y "pulsa aquí" es el texto que se verá subrayado y en azul (normalmente) invitando a a que se pulse sobre él.
Para enlazar con otra dirección web
<A HREF="http://www.otrourl.com">pulsa aqui</A>. Así, como quien no quiere la cosa, mandas al lector de tu página rumbo a lo desconocido, ya que él sólo lee "pulsa aquí". (Puedes ser más cortés escribiendo algo más descriptivo o repitiendo la dirección nuevamente: <A HREF="http://www.otrourl.com">http://www.otrourl.com</A>)
Para enlazar con otra página en otra dirección web
<A HREF="http://www.otrourl.com/otrapag.html">pulsa aqui</A> ¿Fácil, no?
Vale, ¿y para ir a otro punto de mi página? Para
esto, como es lógico, PRIMERO hay que "marcar" o
señalar de algún modo el punto de destino. Tal que así:
<A NAME="punto1">Aqui</A>. No es necesario
llamarlo "punto1", puedes poner lo que quieras, incluso diferentes
nombre para crear más "marcas" o anclajes. Tampoco es necesario
poner nada en lugar de "Aqui", quedando la "marca" invisible.
Lo SEGUNDO es colocar en el punto de partida (donde hacemos clic)
lo siguiente: <A HREF="#punto1">haz clic aqui</A>
De ese modo, al pulsar sobre la frase "haz clic aqui" (o la que
queramos) iremos a parar al "punto1" (en este caso). (De todo
esto tienes un ejemplo en esta página que estás leyendo)
Envíame un e-mail si esta página te ha servido de algo. ¡Enteradillos criticones abstenerse!
gerique@maccomp.com
Página patrocinada por Geocities. ¡Consigue también tu página web gratis!