1. Introducción.

En este curso se tratará de familiarizar al público con el uso del HTML, Hyper Text Markup Language, un lenguaje diseñado para la construcción de páginas WEB. Intentaremos enseñar la forma de hacer poco a poco estas páginas introduciendo diversos comandos que conseguirán dar un toque profesional a nuestras creaciones, y todo esto en Español.

En estas páginas se aprenderán los comandos más usados en la práctica, ya que sería muy largo (y pesado) repasar todos los comandos de este lenguaje en continua expansión. De todas formas, al final del curso se incluyen algunas técnicas y pequeños trucos más avanzados, así como direcciones Internet de otros cursos y tutoriales más completos de HTML, Java, Javascript, CGI-bin... tanto en castellano como en inglés.

Además hemos preparado un tutorial avanzado que incluye Javascript, formularios, etc.

En la actualidad existen diferentes aplicaciones que permiten generar código HTML (páginas web) de manera sencilla y casi sin programar, pero incluso los mejores no cubren (ni podrán cubrir) la gran cantidad de opciones y comandos HTML existentes, a parte de que suelen generar un código bastante desordenado y confuso, lo que dificulta posteriores actualizaciones del documento creado.

Por esta razon conviene conocer, aunque sea de forma básica, este lenguaje, ya sea para crear páginas completas o para retocar las generadas por otros programas. Además verás que es un lenguaje muy sencillo y lógico.

En este curso suponemos que se conocen el funcionamiento básico de un browser o navegador web, el formato de las direcciones de internet y las rutas de acceso a archivos. (aunque si teneis dudas, podeis enviarnos un e_mail).

También se incluirán algunas utilidades y programas que nos ayuden a seguir el curso y realizar cosas que no se pueen hacer programando, como GIFs animados, así como bastantes ejemplos de páginas web.

1.2. Introducción: qué es el HTML?

El lenguaje HTML nos permite la creación de páginas web (si has llegado hasta estas páginas supongo que es porque sabes lo que es una página web y un browser o visor, como Netscape...).

Al contrario que en otros lenguajes como C, C++, Pascal, etc. los funtes HTML no son compilados generando ejecutables, sino interpretados por visores web. Esto tiene la ventaja de que en realidad, un documento HTML no es más que un archivo de texto, y por tanto es compatible con cualquier plataforma o sistema operativo que disponga de un browser como Netscape (hay visores para prácticamente todos los sistemas y entornos: Windows, Mac, Linux, Unix, X-Window...).

Otra ventaja de que el lenguaje no se compile, es que podemos obtener sin ningún problema el código fuente de cualquier documento HTML que encontremos en Internet símplemente grabando la página en formato HTML.

Por si todas estas ventajas fueran pocas, este lenguaje es muy sencillo y lógico, por lo que no se precisan conocimientos previos en programación.

A un nivel básico es casi tan fácil como manejar un procesador de textos, pero puede complicarse todo lo que queramos.

A lo largo de este curso de HTML utilizaremos texto en negrita para señalar las palabras reservadas o comandos y en cursiva para los comentarios comentarios o valores variables.

1.3. Documento HTML base.

En este apartado se mostrarán los pasos necesarios para construir una página básica, aunque al principio parezca un poco fea.

Se introducirá el concepto de Etiqueta en HTML, que nos permitirá realizar todo lo que necesitamos para crear la página.

En un documento HTML escribimos el texto como en un procesador de textos normal, añadiendo unos comandos especiales, llamados "tags" (etiquetas), que se definen entre símbolos 'mayor que', 'menor que' < > ,y que se colocan al principio y al final del texto a modificar por el comando (hay excepciones en este sentido).

El "tag" del final (hay algunos comandos que no lo necesitan), que cierra el alcance del comando, lleva ademas una barra '/'. </ >

Este ejemplo mostraría la frase: "esto es un texto de prueba en una pagina web.", mostrando la palabra "prueba" en letras grandes, y "pagina web" subrayado. Asi:

Todo documento HTML debe estar delimitado por el comando <HTML> para indicar al browser o navegador que es un documento de este tipo (lógico, no?)

<HTML> (principio del area delimitada por el comando: html)
...
... (aquí va el codigo html)
...
</HTML> (fin del area de acción del comando html)

Dentro del documento se distinguen dos partes bien diferenciadas, el encabezamiento (head) y el cuerpo (body), que vienen delimitados por los tags: <HEAD> y <BODY>respectivamente.

El encabezamiento (head) contendrá información del documento que se da al browser, y que no aparecerá en la pantalla del navegador, de la cual de momento solo nos interesa el título (que se muestra en el borde de la ventana en la que está el documento) y otros datos adicionales como nombre del programa con el que se han hecho las páginas, etc.

El cuerpo (body) contiene todo aquello que queramos que aparezca en pantalla, como puede ser el texto (como el que ahora estás leyendo), imágenes, etc.

La página básica hasta ahora quedaría así:

<HTML>
<HEAD>
...
... (aquí irá la cabecera (título) de la página)
...
</HEAD>
<BODY>
...
... (aquí va el resto del código html)
...
</BODY>
</HTML>

Finalmente, dentro de la cabecera (head) ponemos el título de nuestra página web (title), que no aparecerá en el documento, sino en la barra de título de la ventana del browser al ver la página:

<HTML>
<HEAD>
<TITLE>
... (aquí va el título de la página)
</TITLE>
</HEAD>
<BODY>
...
... (aquí va el resto del codigo html)
...
</BODY>
</HTML>

Ya tenemos la base para realizar nuestra página web. Como veis es una estructura bastante lógica.

Ahora solo nos queda rellenar el cuerpo de la página (body) con el código que iremos viendo en los siguientes temas, por ejemplo escribamos alguna frase:

<HTML>
<HEAD>
<TITLE>
Mi primera pagina web
</TITLE>
</HEAD>
<BODY>
Hola, mundo!
</BODY>
</HTML>

Este código ya puede ser interpretado por un browser o navegador web.

Los archivos HTML es conveniente que tengan la extensión ".html" o ".htm", para poder diferenciarlos de otro tipo de archivos.

Para ver como quedaría este ejemplo al ser interpretado por el visor html, pulsa aquí (para volver pulsa de nuevo en el botón correspondiente.

1.4. Nociones básicas de texto en HTML. Notas a tener e cuenta.

- Los comandos o etiquetas HTML se pueden anidar (unas dentro de otras) para combinar varios efectos. Por ejemplo si hacemos: (los nombres de los comandos son imaginarios)

- Los saltos de línea, espacios en blanco múltiples y tabuladores que incluyas en el código HTML serán ignorados por el navegador al ser interpretados, por lo que si escribimos dentro del código:

esto es   una    linea
y   esto es  otra linea.

el navegador mostrara:

esto es una linea y esto es otra linea.

Para conseguir los saltos de línea será necesario escribir las líneas delimitadas por el comando <P> ... </P> (de párrafo), o usar el comando <BR> al final de la línea (como el '\n' en programación o el salto de carro), que es uno de los comandos que no tiene cierre (no se puede poner <BR>...</BR>).

El código anterior se podría poner ahora: (siempre dentro del espacio <BODY>)

Otra forma de conseguir texto con tabuladores, espacios, símbolos especiales y saltos de línea es encerrarlo todo entre las etiquetas <PRE> ... </PRE> (texto preformateado).

El texto preformateado es bastante útil para mostrar código de algún lenguaje de programación (como C, C++..) o insertar de manera rápida algún texto en una página web, sin tener que modificar nada.

La única pega de este tipo de texto es que no permite comandos HTML en su interior para modificar el estilo de algunas palabras, poner enlaces... además aparece con un tipo de letra especial (tipo máquina de escribir) y pone un salto de línea al final del texto.

- Otro aspecto a tener en cuenta es que los símbolos '<' '>' y '&' son reservados del lenguaje, y para poder hacer que aparezcan por pantalla, así como otros signos ('ñ', matematicos, comerciales...) se deben usar unos códigos especiales, precedidos todos ellos de '&' y terminados en punto y coma. Algunos ejemplos:

á --> &aacute; (para mayúsculas... &Aacute; &Eacute...)
é --> &eacute;
í --> &iacute;
ó --> &oacute;
ú --> &uacute;
ñ --> &ntilde; (para mayúsculas... &Ntilde)
< --> &lt; (little than --> menor que)
> --> &gt; (greater than --> mayor que)
& --> &amp; (ampersand)
" --> &quot;
...

* Por último, decir que los comandos de este lenguaje no distingue entre mayúsculas y minúsculas, por lo que se pueden usar indistíntamente, y que hay distintas versiones del lenguaje, en contínua evolución, y van surgiendo nuevos comandos, por lo que hay algunos navegadores más antiguos que no reconocen todos estos. Personalmente recominedo Netscape (la versión actual es la 3.0).

Pulsa aquí para ver un ejemplo de lo visto hasta ahora.

Ir al tema siguiente

Otros Links de Interés:

Cocina  -  Videos  -  Juegos Gratis  - Postales cachondas  - Cine  - Programas Gratis  -  Letras de Canciones

Listas de todos los Tutoriales Gratis. 1998- 2007 - -

Los tutoriales y cursos aquí reunidos son una recopilación de los mejores encontrados en Internet.
El crédito y copyright de los mismos si lo hubiere corresponde al autor de cada uno de ellos.
Si tu tutorial o curso está aquí, y deseas darlo de baja de esta recopilación o quieres añadir el tuyo, envíanos un mensaje desde aquí

Publispain - Fun