INTRODUCCION AL HTML (Segunda Parte)

El HTML (HiperText Markup Language) es el lenguaje utilizado para representar documentos en la WWW (World Wide Web). Además de texto normal incluye también, elementos multimedia (gráficos, vídeo, audio) y existen enlaces (links) que permiten saltar a otras partes del documento o a otro sitio cualquiera de Internet.

Otra característica muy importante de este lenguaje es que es portable, es decir, se pueden visualizar las páginas con cualquier sistema operativo y, por supuesto también crearlas.

En la actualidad (noviembre 1999), Netscape y Microsoft siguen sin ponerse de acuerdo en el estándar del lenguaje. Microsoft ha asumido las directrices del ww3, pero no así Netscape, que implementa etiquetas propias, de modo que las páginas no se visualizan igual en el Navigator y en el Explorer.

Las etiquetas constituyen la filosofía de este lenguaje. Por medio de ellas se pueden controlar los elementos tipográficos del texto: tipo, color y tamaño de las fuentes, el estilo (negrita, cursiva, etc), así como también la inclusión de tablas, listas, formularios, la inserción de fotos, sonidos, fondos, los enlaces mencionados anteriormente. etc.

Las etiquetas se pueden modificar por medio de sus atributos, éstos son del tipo atributo="valor" y se colocan detrás del nombre de la etiqueta
El nombre de la etiqueta y sus atributos se colocan entre los símbolos < y > y normalmente se usan dos, una de inicio y otra final, para conseguir el efecto deseado.

Por ejemplo si escribimos

El texto se verá rojo y en tamaño un poco menor de lo normal

Se verá como El texto se verá rojo y en tamaño un poco menor de lo normal

El uso de estas etiquetas, y por ende el aprendizaje del HTML, no es difícil. Precisamente el objetivo de esta pequeña guía es servir de introducción y referencia de las características más usadas del HTML

¿Cómo empiezo a escribir HTML?

Para comenzar tan sólo necesitas un editor de texto para escribir las páginas y un navegador para visualizarlas.

El editor no debe formatear el texto. Usa el Bloc de notas (Notepad) en Windows 95 o 98. Se carga muy rápido y además es el programa que se abrirá por defecto desde el navegador.

Las etiquetas y sus atributos se pueden escribir en mayúsculas o minúsculas. El lenguaje ignora, también, los espacios en blanco seguidos, donde sólo cuenta uno de ellos.

Una vez que hayas escrito una página, guárdala en un fichero con extensión .htm o .html. Cuando hagas doble click sobre él se abrirá el navegador y te mostrará la página.

Para ver el contenido de los ficheros anteriores (los acabados en htm o html) con el Bloc de notas puedes crear un acceso directo al mismo en la carpeta "SendTo" del directorio "Windows" y te aparecerá como opción en "Enviar a " cuando hagas click con el botón derecho del ratón sobre el fichero.
Otro modo es abrir el fichero con el Explorer y luego, con el cursor colocado sobre el texto (no sobre imágenes) pulsar el botón derecho y elegir "Ver código fuente". En el Comunicator también se puede "Ver el origen" pero en un visor propio que no permite modificar el texto

Ten cuidado con el nombre de los ficheros, pues los servidores donde se alojan las páginas sí distinguen mayúsculas de minúsculas y no es lo mismo Inicio.htm que inicio.htm

¿Qué necesito para crear una página Web?

Lo primero que debes tener claro es qué contenidos va a tener tu página. Por ejemplo, si vas a hacer una página sobre tu Instituto, ¿qué vas a poner?: las enseñanzas que se cursan, los proyectos que estáis llevando a cabo, un poco de historia del pueblo o ciudad donde esté enclavado el centro, las actividades extraescolares que realiza el centro, etc.

Una vez decidido esto ¿qué necesitas? De entrada, el doble de tiempo que calcules para realizarla. Además necesitarás:

•       Un navegador. Aunque hay más, parece que el Explorer y el Netscape son los mejores.
•       Un editor de Html (que bien puede ser el que viene con los navegadores) o bien escribir todo el código a mano.
•       Hacer las fotos que vas a poner y escanearlas (esto suele llevar bastante tiempo si no se ha hecho antes) Puedes hacerlo en el CPR.

• Un programa gráfico para retocar las imágenes, mira en la página de imágenes.
•       Espacio en un servidor que albergue la página. Si tienes cuenta en el PNTIC puedes subir unos 250 KB, que son suficientes para una página sencilla
•       Un programa para subir la página al servidor, puede ser el WS_FTP que localizarás en http://www.ipswitch.com
• Dar de alta la página en algunos buscadores (Alta Vista, Olé, etc) y también en el PNTIC si la página está relacionada con la educación. Si no haces esto, solamente podrán visitar tu página quienes conozcan la dirección exacta.

Y sobretodo bastante tiempo para el mantenimiento de la página: comprobar los enlaces, actualizar las fotos, el contenido, etc.

Estructura básica de un documento HTML

Todos los documentos Html tienen la estructura que se muesta a continuación, aunque la etiqueta //*()*// puede ser sustituida por //*()*//para un tipo de páginas que dividen la ventana del navegador en varios cuadros (frames).

Entre las etiquetas //*( y )*// se suelen colocar otras opcionales, como por ejemplo:
//*En este caso las etiquetas le indican a los buscadores el contenido de nuestras páginas (description) y algunas palabras clave (keywords) para su localización.

*//

La cabecera es la sección comprendida entre //*( y . )*// . En ella se encuentra necesariamente el título (entre las etiquetas //*()).

El título de la página debe describir su contenido por ejemplo:
//*( )*//

no valdría en cambio //*( )*//ya que esto no dice nada por si solo

Dentro de la cabecera también se suele incluir código en JavaScript, que se reconoce porque va comprendido entre las etiquetas

//*

*//

El cuerpo (body) del documento html es normalmente lo más importante. Es aquí donde debemos colocar el contenido de nuestra página: texto, fotos, etc.

El cuerpo está delimitado por las etiquetas //* ( y ) *// y La etiqueta //*()*// suele contener algunos atributos, a saber:

BGCOLOR parámetro usado para especificar el color de fondo de la página. El color se define como una terna de números (#rrggbb) en base hexadecimal en el orden rojo, verde, azul (Red, Green, Blue). También se puede usar el nombre en inglés de los colores predefinidos en los navegadores.

Sintaxis: o //*( o ) *//

Una buena ayuda para la seleccion de colores con #rrggbb la puedes encontrar en: Paleta de Colores

TEXT, parametro usado para definir el color del texto por omision. Su formato es el mismo que el de BGCOLOR. Si no se pone nada es negro.

LINK, VLINK, ALINK, parámetros usados para especificar el color por omision de: texto con enlace, enlace ya visitado y enlace activo.

Los colores por omision son LINK=blue, VLINK=purple y ALINK=red. El formato es el mismo que BGCOLOR.

BACKGROUND, parámetro usado para especifica la ruta y nombre de archivo (URL) de la imagen que será usanda como fondo del documento. Esta se verá como mosaico para cubrir toda la ventana si es pequeña (lo habitual).

Sintaxis: //*()*//

Es conveniente especificar la ruta de modo relativo, esto quiere decir que si cambiamos el directorio completo donde están nuestras páginas, desde C:\ a C:\webs por ejemplo, la ruta especificada debe seguir siendo válida.
Por ejemplo si la página desde la que hacemos el enlace se encuentra en el directorio Aprendiendo Html y queremos poner como fondo la imagen fondo.gif, que se encuentra en gifs, se debe poner://*(<BODY BACKGROUND="gifs/fondo.gif">)*//

Si la página estuviese en ejemplos se pondría://*()*//

Fíjate en ../ pues es lo que indica al navegador que debe acudir al directorio superior

By. Alexander D. Florez B.

Fuentes:

http://www.youtube.com/watch?v=iCjmFXkLI6E&feature=related

http://www.pcweb.es/manual_html/mostrar.php?opcion=Bienvenido_a_tu_manual