Html

Site hosted by Angelfire.com: Build your free website today!

Tutorial de HTML basico proporcionado por: Portalmundos

0.- Introducción

Para los menos enteradillos en esto de las páginas web primero hay que adentrarse en el mundo del lenguaje HTML (Hyper Text Markup Language, algo así como Lenguaje de Marcas de Hipertexto). Es por eso que te ofrecemos diversas maneras de familiarizarte con él. Antes de todo debes saber que la mayoría de diseñadores de páginas web utilizan muy poco el HTML, entonces te preguntarás... ¿y porqué debo aprenderlo?.

Pues la verdad es que no tienes que aprenderlo si no quieres, aún que siempre es mejor conocerlo al menos un poco, porque siempre hay que hacer algunos retoques manualmente que ningún editor hace exactamente a tu gusto. Si estás intentando hacer tu primera página web sólo hecha un vistazo por aqui, apréndete las directivas más importantes y luego bájate algún editor de HTML en versión shareware, o si tienes el Front Page o el Dreamweaver, o el HotMetal, etc. mucho mejor, (incluso el mismo Word puede traducir texto normal a HTML, así que no digas que no lo tienes fácil para conseguir un editor).

Si no deseas ningún editor que traduzca lenguaje normal a HTML eres mi ídolo, pero te esperan muchas horas delante del bloc de notas para conseguir el mismo resultado que obtendrías en pocos minutos utilizando la forma que te recomiendo. Sin embargo, tu opinión es la que cuenta, de todos modos serás tú y sólo tú quién hará la página web, así que ánimo, y a leer un poco se ha dicho.

Recuerda, antes de comenzar que, utilices lo que utilices, debes guardar tus documentos HTML con la extensión ".htm" o ".html", ya sé que ésto parecerá absurdo si utilizas el FrontPage por ejemplo, pero si escribes un documento de código HTML usando el Bloc de Notas, éste se grabará por defecto con formato ".txt" y será un documento sin sentido, ¿ok?

1.-Estructura básica del código:

Todo código HTML debe iniciarse y finalizar con las directivas <html> y </html> (de hecho son la misma directiva pero si te fijas la primera abre el código y la segunda lo cierra con la barra "/"). Fíjate también que las directivas siempre estan encerradas dentro de las llaves "<>". Seguidamente abriremos la directiva HEAD, la directiva BODY y la directiva TITLE (no importa si son mayúsculas o minúsculas, pero recomiendo siempre minúsculas), pero dejémonos de rollos, hecha un vistazo a estas líneas de código:

<html>

<head>

<title>Mi primera página web</title>

</head>

<body>

</body>

</html>

Esta página es bastante absurda aparte de que carece de contenido, pero sirve como ejemplo para ver la estructura del documento. Primero como ya sabes, abrimos <html> y al final de todo lo cerramos con </html>. Definimos la cabecera del documento con <head> y dentro de la cabecera podemos poner varias cosas que ya veremos, una de ellas es el título, que va entre las directivas <title> y </title>. Como ves he escrito el título de forma totalmente normal, sin comillas ni símbolos ni cosas raras, lo que está entre esas dos directivas el navegador ya lo mostrará tal como tú lo escribas.

Después de escribir el título cerramos la cabecera con </head>, y seguidamente abrimos el "cuerpo" del documento, con <body>, y lo cerramos porque de momento no queremos poner nada, así que ahora ponemos </body>, y acabamos con </html>.

RECUERDA: Cuando cierres una directiva no olvides nunca poner la barra "/", pues es un típico error que puede dar muchos problemas, no en un documento tan pequeño porque enseguida lo detectas, pero sí en grandes documentos con muchas líneas de código, y si no compruébalo en la página de cualquier gran portal como http://www.terra.es (si quieres, como experimento, haz click en el link y cuando entres en la página mira su código fuente usando la opción del Internet Explorer que se encuentra en el menú "Ver" / "código fuente").

Ahora te estarás haciendo la típica pregunta...¿porqué debo poner <html> y </html> en un documento html si igualmente lo grabaré en formato "html" y lo veré en un navegador expreso para este tipo de código? Parece un poco absurdo pero no lo es, puesto que cada vez más, se incrusta código html en los e-mails o en medio de cualquier otro tipo de documento, pues gracias al html podemos gozar de imágenes, movimientos, hiperenlaces a internet y todo tipo de truquitos que irás viendo.

Ahora graba el documento y ábrelo con tu navegador (Microsoft Internet Explorer o Netscape Navigator son los más populares y son gratuitos, así que no me digas que no tienes navegador).

Voilà! Si todo ha ido bien verás una absurda página en blanco cuyo título en la barra azul de la ventana del explorador será "Mi primera página web", (El título también sale en la barra de tareas de Windows que indica las ventanas activas).

2.- Primeras pruebas

Bien, ahora vamos a llenar el documento con cosas más interesantes. Para comenzar utilizaremos la archi-usada directiva , que puede estar sóla sin cerrarse (significa salto de párrafo), o antes y después de cualquier texto que queramos poner en la página. Por ejemplo:

Esto es demasiado fácil para mi

Ahora tiene más mérito porque sale centrado

Ahora alineado a la derecha

Tachán, y a la izquierda

Lo veríamos en nuestro navegador de la siguiente forma:

---------------------------------------------

Esto es demasiado fácil para mi

Ahora tiene más mérito porque el texto está centrado

Ahora alineado a la derecha

Tachán, y a la izquierda

---------------------------------------------

Te habrás dado cuenta de que si no especificas nada, por defecto el navegador muestra todas las líneas alineadas a la izquierda. Como he dicho antes, la directiva también sirve para hacer un salto de párrafo, aunque también podemos utilizar para hacer sólo un salto de línea, sin tanto espacio entre una y otra. Así pues, y en este caso son directivas vacías, ni se abren ni se cierran, aunque en el caso de se puede utilizar de las dos formas.

Habiendo llegado hasta este punto recomiendo que pares y practiques una pequeña página web, pónle un título, define la cabecera, el cuerpo, etc, aunque carezcan de contenido, y explica cuatro tonterías jugando con las alineaciones a izquierda, centro y derecha. Mmmm, seguro que ya lo habías hecho, como si no te conociera...

3.- "Links" o hiperenlaces

Es la gran diferencia entre un documento web y un documento de texto normal, o si no, ¿porqué estaríamos perdiendo el tiempo para poner dos o tres líneas a la izquierda o a la derecha del documento si con el Word ya hubiéramos escrito dos páginas explicando nuestras penas? Poner un hiperenlace a cualquier otra parte del mismo documento, de la misma web, a un archivo de música, de vídeo, a cualquier otro lugar de internet, etc., es tan fácil como esto:

Haz click<a href="http://www.geocities.com/daniovide"AQUI</a>

En el navegador, leeremos "Haz click AQUI", y veremos en un color diferente, seguramente en azul, la palabra "AQUI", porque con la directiva <a> hemos definido un hiperenlace a otra página de internet que se abrirá cuando el que visualice la página haga click en esta palabra.

Si en lugar de esta dirección web (que por cierto, es otra página mía que os recomiendo), ponemos <a href="pagina2.html">, por ejemplo, iríamos a un archivo llamado así dentro de la misma web en la que estamos, si es que existe tal archivo, claro, sino veríamos el típico mensaje del explorador indicando que el link está roto y no conduce a ningún sitio o que no encuentra la página y te recomienda msn.com para buscar lo que quieres, etc...(qué listillos estos de Microsoft).

Evidentemente, podemos poner también un nombre de archivo como "cancionpija.mp3", "peliporno.avi", "miprograma.zip", o incluso "peazovirus.exe", y el navegador abrirá este archivo buscando el programa apropiado (un reproductor multimedia, un descomprimidor de archivos, etc.).

4.- Colores y fuentes

Me olvidaba de dos cosas importantes, dar color y estilo a las fuentes y al fondo de la pantalla. El diseño se ha convertido en lo más importante en una página web, pues no sólo debe tener un buen contenido, sino que tienes que presentarlo de forma amena, vistosa, divertida, etc., según lo que quieras explicar (por ejemplo, esto es un aburrido minicurso de html con un aburrido fondo blando y unas aburridos letras sin dibujos ni fotos ni nada, jejeje)....vamos allá!

Para dar color de fondo a una página debemos definirlo en la directiva <BODY>, utilizando el atributo "BGCOLOR", seguido del nombre del color que queremos poner. Como siempre, veamos un ejemplo:

<HTML>

Hola, esta es una página con fondo azul

</BODY>

<HTML>

Los colores que podemos utilizar en HTML 3.2 son : "black, silver, gray, white, maroon, red, purple, fuchsia, green, lime, olive, yellow, navy, blue, teal y aqua", (dependiendo del explorador y la versión del lenguaje html que este acepte podemos utilizar más).

También es muy usual definir el color mediante el código RGB, indicando la proporción de los tres colores básicos con los que podemos fabricar todos los demás, aunque la primera opción ya está aceptada en los más importantes navegadores, por lo que será mejor que llamemos a los colores por su nombre, al menos de momento :)

Ya hemos visto cómo dar color al fondo de la pantalla, antes de pasar a hacerlo con las fuentes veremos una posibilidad más que también es muy común; se trata de utilizar un archivo de imagen como fondo para la web de forma que podremos obtener una textura mucho más atractiva. Veamos cómo se consigue:

El archivo fondo.jpg contiene el fondo de esta página

</BODY>

Evidentemente hay miles de lugares de internet donde podréis obtener fantásticos fondos para vuestras páginas, uno de ellos es, por ejemplo, http://members.nbci.com/verox/fondos/.

Como ya sabemos modificar el fondo a nuestro gusto, pasaremos a hacer lo mismo con las fuentes, y es que si no se define esta, cada usuario verá la página con la fuente que tenga instalada por defecto en su navegador, con lo que cada usuario vería la página de una forma totalmente diferente y podría dar lugar a cosas muy extrañas. El funcionamiento de esta técnica es muy similar a la que hemos visto para definir el fondo, con la única diferencia que el fondo se define una sóla vez y la fuente la podemos definir tantas veces como queramos, incluso una vez para cada letra de nuestra página. En este caso la directiva a utilizar es , poniendo a continuación el texto y al final . (A estas alturas creo que no hace falta recordar que las directivas se abren y se cierran excepto muy pocas, pero por si acaso...)

Esta frase está escrita en color azul

Esta está mitad rojay mitad verde.

Este código se vería traducido en el explorador de la siguiente forma:

------------------------------------

Esta frase está escrita en color azul

Esta está mitad roja y mitad verde.

------------------------------------

OJO: Hemos utilizado una sola vez la directvia entre frase y frase para provocar un salto de párrafo. En este caso la directiva no se cierra, aunque de la misma forma podríamos haber utilizado la directiva con una finalidad parecida, aunque en lugar de salto de párrafo habríamos provocado un retorno de carro, dejando mucho menos espacio entre una frase y otra. Estas son de las pocas directivas que no tienen que cerrarse.

Evidentemente, además del color, también podemos (y debemos!) definir el estilo de la fuente. Esto es mucho más sencillo porque todos estamos acostumbrados a cambiar las fuentes cuando escribimos cualquier documento con Word, así que todos conocemos las típicas "Arial, Times New Roman, Verdana, Maiandra GD, Impact, etc".)

Para definir el estilo de la fuente, utilizaremos el atributo "face" dentro de la misma directiva .

Esta frase está con un estilo diferente

Antes de seguir, aprovechemos para matar dos pájaros de un tiro y ver cómo podemos también cambiar el tamaño de la fuente dentro de la misma directiva con este ejemplo:

Esta frase aún es más diferente

Veamos cómo quedarían estas dos frases en nuestro navegador:

-----------------------------------

Esta frase está con un estilo diferente

Esta frase aún es más diferente

-----------------------------------

En vez de definir el tamaño de la fuente con un número, podemos hacerlo sumando +1 o -1, +2 o -2, etc. a la fuente habitual de la página, con lo que toda la página tendrá el mismo tamaño de fuente excepto donde nosotros hayamos sumado o restado tamaño, como veremos a continuación.

Frase normal

Frase con letras más grandes

Frase con letras aún más grandes

Aunque seguro que ya lo imaginas, lo veremos en el navegador de la siguiente forma:

------------------------------

Frase normal

Frase más grande

Frase con letras aún más grandes

------------------------------

Incluso podemos utilizar otras formas de jugar con el tamaño y estilo de las fuentes, también muy habituales, con las herramientas (negrita), (itálica o cursiva), (subrayado>, (subíndice), (superíndice), <STRIKE> (texto tachado, aunque Microsoft Internet Explorer permite la abreviatura <S>), <BIG> (aumento del tamaño de la letra), (disminución del tamaño de la letra) y muchos más.

Una vez más, no olvidar que estas directivas también se abren y se cierran, pues si olvidamos ésto, después de usar cualquiera de estas directivas, todo el documento que hubiera a continuación se vería en el explorador tal como hubiéramos querido definir esa sola línea. (Este es un error bastante habitual, por lo que siempre que escribimos documentos en html, debemos irlos grabando contínuamente, verlos en nuestro navegador, detectar los posibles fallos, corregirlos y continuar).

Por último, estas directivas son independientes de <BODY> y de , por lo que las debemos usar en cualquier momento, como vemos en el siguiento ejemplo:

Texto en negrita, subrayado y en cursiva

La mejor táctica es ir cerrando las directivas por el orden inverso al que hemos empleado para abrirlas, de esta forma nunca olvidaremos cuál está abierta y cuál está cerrada.

5.- Imágenes

Insertar imágenes es algo absolutamente vital e indispensable en un buen sitio web, y si no, mira ésta página...ups! Bueno, no he dicho nada.

Para insertar una imagen debemos utilizar la directiva <IMG>, forzosamente complementada con el atributo "src" con el que le diremos al navegador dónde debe ir a buscar el archivo con la imagen en cuestión. Los archivos de imagen más populares de internet son los que tienen el formato JPG y GIF (los BMP ocupan demasiado por lo que casi nunca se usan). Una vez más, vayamos al ejemplo:

Qué fácil ha sido, ¿no?, además, esta directiva no precisa de cierre, y se puede insertar en cualquier lugar, incluso dentro de tablas, y más adelante veremos como podemos utilizar una imagen como hiperenlace, algo también super-habitual.

Combinada con IMG podemos utilizar, por ejemplo, la directiva <CENTER>, que, pese a que no he recordado mencionarla anteriormente, se puede utilizar en cualquier parte, con texto o con imágenes, aunque la directiva <CENTER> también coincide con el atributo "center" usado en y tiene exactamente la misma función, por lo que no ha sido conveniente mencionarla antes, jejeje.

La foto en este caso se vería centrada, aunque también podemos utilizar otras formas de alinear una foto, usando el atributo "align" que ya conocemos. Las posibilidades de "align" en este caso, son algo más variadas:

<IMG align="top"> Alinearíamos la imagen en la parte superior del texto que le rodea.

<IMG align="bottom"> Lo mismo pero en la parte inferior.

Alineación top

Up Arrow Alineación bottom

Right Arrow Alineación middle

También podemos utilizar left, right y middle, aunque no hace falta poner ejemplos porque creo que ya imaginarás el resultado de la utilización de estas funciones.

Es importante también poner un pequeño texto explicativo sobre la imagen o a dónde conduce esta si se trata de un link. Esto se consigue mediante el atributo "alt":

Más o menos imaginaréis qué se consigue con estas tres simples líneas de código, pero por si acaso, ahora lo veremos. Por fin comenzamos con cosas realmente espectaculares, y si no, mirad esta superfoto en formato GIF de un tío (¿quién será éste?) bailando. Si pasas el puntero del mouse sobre la foto aparece un pequeño texto incitándote a pulsar sobre la imagen para seguir un hiperenlace.

Haz click en mi para ir a la página principal

Recordad el efecto conseguido con la instrucción antes de la foto, cerrándola después con , para que ésta salga centrada.

Esta imagen en concreto se trata de un GIF animado. Los archivos GIF pueden ser estáticos o animados, éstos últimos son simplemente muchas imágenes GIF que se van alternando entre ellas de forma que parezca que simulan movimiento. Seguro que habéis visto muchos navegando por Internet, ya que llaman más la atención que las imágenes estáticas, y es utilizando casi siempre en los banners publicitarios. En otras secciones de esta web podrás ver lugares de internet donde se enseña a hacer un gif animado muy fácilmente y diversos programas que permiten hacerlo.

Para terminar, la directiva <IMG> dispone de otros atributos bastante importantes como "height" (altura en pixels) y "width" (anchura en pixels). Y otra cosa, si queréis ponerle un borde, nada mejor que el atributo "border" indicando un número que será el grosor de este. Algunos navegadores ponen por defecto un pequeño borde a todas las imágenes aunque en el código html no se especifique. Es por eso que lo mejor si no queremos borde es poner <IMG border="0" src="imagen.gif">

IMPORTANTE: Por si no os habíais dado cuenta, los parámetros de los atributos se especifican entre comillas, aunque sean números! Tampoco olvidéis del signo igual (=) entre el atributo y el parámetro.

6.- Apuntes finales, música de fondo y comentarios

Este es un tema más delicado, porque existe una pequeña ambigüedad, y es que tanto Microsoft Internet Explorer como Netscape Navigator tienen sus propias instrucciones HTML particulares para indicar la reproducción de un archivo musical (normalmente se utilizan archivos en formato MIDI, debido a que ocupan muy pocos kbytes y se pueden descargar fácilmente. De nada sirve poner una gran canción de fondo en una página web si esta tardará 5 minutos en descargarse porque está en formato MP3 o WAV, que es mucho peor!).

Para Internet Explorer, la directiva es <BGSOUND>, y los atributos que reconoce son "src" (origen del archivo) y "loop" (número de veces que se repetirá la canción o sonido). Para el atributo "loop" podemos usar el parámetro "infinite", que hará que se reproduzca indefinidamente el archivo en cuestión.

Netscape Navigator no dispone de una directiva específica para reproducir archivos de sonido, aunque podemos utilizar una táctica muy típica que es reconocida por los dos navegadores. Incrustaremos un objeto reconocido como plug-in (que puede ser cualquier tipo de sub-programa externo) desde el cual llamaremos el archivo de sonido para que se reproduzca en la página web. Aunque parezca complicado, resulta que es prácticamente idéntico a utilizar <BGSOUND>. Para emplear nuestro truquillo utlizaremos la directiva <EMBED>, con los siguientes atributos:

height (altura en pixels), src (dirección del plug-in, en este caso, archivo de sonido), width (anchura en pixels), hidden (no requiere parámetros, y sirve para ocultar el objeto. Con que es un archivo de sonido debemos ocultar el objeto porque lo que queremos es escucharlo y no ver un cuadradito sin contenido alguno. Lo escucharemos igualmente y no entorpecerá nuestro excelente trabajo, jejeje.)

Para terminar, todo buen diseñador de páginas web inserta pequeños comentarios en medio de su código HTML, sobretodo para sí mismo, pues cuando consultas el código para hacer algún retoque ya no te acuerdas de dónde has puesto cada cosa, o a qué hace referencia esta imagen, etc. Estos comentarios no se ven para nada en el navegador, y sólo quedan en el código para quien haga consulta de éste. Evidentemente no tienes porqué ponerlos, pero si el código es muy largo, es mejor ir poniendo, al menos de vez en cuando, una pequeña línea informativa por si dentro de unos meses vuelves a mirar el código y no entiendes nada. (Seguro que te pasará).

Los comentarios se insertan de esta manera:

7.- PUBLICA TU PRIMERA PÁGINA WEB!

Pese a que el lenguaje HTML es mucho más complejo de lo que aqui hemos visto, tienes información de sobra como para realizar tu primera página web, con un aspecto prácticamente profesional. Más adelante puedes consultar otros lugares especializados, conocer muchas más posibilidades, insertar META-TAGS, javascripts, subprogramas JAVA, animaciones en FLASH, etc. En otros apartados de esta web podrás aprender a realizar muchas de estas cosas, incluso sin saber nada de programación en java o javascript, tendrás la posibilidad de incrustar códigos java y javascript de libre distribución en tu página web y darle un aspecto completamente profesional. En este mismo apartado, y próximamente, podrás aprender a insertar FRAMES en tu página, y muchos trucos en HTML, HTML dinámico (también llamado DHTML), códigos en JAVA y en JAVASCRIPT, y un largo etcétera.

Cuando tengas lista tu página web debes buscar un servidor gratuito, o comprar un dominio y un contratar un servicio de hosting, aunque esto es bastante caro. (Por cierto, si haces click en algunos de los banners que ves por aqui me ayudarás a comprarme uno). En esta web podrás ver los mejores servidores gratuitos que hay para alojar tus páginas y los servicios que ofrece cada uno de ellos, explicando todas sus características. También puedes contadores, estadísticas y libros de visitas para mejorar tu trabajo y darle un aspecto cada vez más profesional. Evidentemente, también podrás ver cómo sacar algún provecho de tu aparentemente infructuoso trabajo (aunque no creas que te vas a hacer millonario!).

VOLVER

Para ver codigos Html visita la pagina de Mas Codigos