El lenguaje html trabaja con etiquetas (tags) que tienen diferentes usos. Por ejemplo <TITLE> </TITLE> sirve para colocar el nombre de la página en el marco superior del navegador. Las mayoría de las etiquetas necesitan cerrarse y modifican la información contenida dentro de ellas. Algunas como <BR> no necesitan cerrarse. Después se explicará mejor el significado de éstas y otras más.
Todos los documentos en html deben tener la siguiente estructura:
<HTML>
<HEAD>
<TITLE>Mi página</TITLE>
</HEAD>
<BODY>
Aquí va todo el contenido del programa.
</BODY>
</HTML>
Este formato debe seguirse siempre como una regla. El uso de las demás etiquetas y el contenido del programa irá dentro de la etiqueta <BODY> </BODY>. El título va a ser el nombre que le quieras dar a tu página.
*** Ahora comienza lo interesante, vamos a empezar a construir nuestra página de Internet. Entra al editor de textos, carga tu archivo prueba.htm (que por ahora debe estar vacío) y teclea lo siguiente:
<HTML>
<HEAD>
<TITLE>Historia de Internet</TITLE>
</HEAD>
<BODY>
En esta página explicaremos brevemente los inicios de la red de redes.
</BODY>
</HTML>
*****************
Lo que estamos haciendo aquí es generando el esqueleto de nuestra página. Estas son las etiquetas básicas para cualquier diseño. El título de esta página-ejemplo es Historia de Internet y aparece en el marco superior del navegador. Como se acaba de mencionar, dentro de las etiquetas <BODY> </BODY> desarrollaremos todo nuestro contenido.
Presiona el enlace que aparece subrayado para ver como debe lucir nuestra página hasta ahora. Ver página web
Pulsa Guardar en el editor de textos para grabar en prueba.htm lo que acabamos de codificar. Recuerda que ya has aprendido cómo visualizarlo.
Texto
Ya sabemos cómo es la estructura de un documento en html. Es el momento de empezar a manipular los elementos de nuestra página. El elemento fundamental en Internet es el texto. Aunque el auge de los últimos años se ha debido principalmente al contenido multimedia, (gráficos, sonido y video) el texto sigue siendo la base de todo documento en la red.
A diferencia de los procesadores de texto comerciales (Word, WordPerfect, etc.), la manipulación de texto en html está un tanto limitada y es necesario utilizar ciertas etiquetas para modificar el texto a nuestro gusto. Enseguida se muestran algunas de las etiquetas más populares en el manejo de texto.
<PRE> </PRE>
Permite que el texto que se encuentre dentro de ella se visualice tal como se creó en la página origen, respetando espaciado, salto de línea, salto de párrafo, tabulación, etc.
<BR>
Realiza un salto de línea. Esta etiqueta no necesita cerrarse.
<P>
Realiza un salto de párrafo. Tampoco necesita cerrarse.
<CENTER> </CENTER>
Posiciona el texto seleccionado en el centro de la página. También puede aplicarse a gráficos.
<Hx> </Hx>
Se utiliza para resaltar encabezados. La x son números que van del 1 al 6, siendo el 1 el encabezado más grande y resaltado, el 2 un poco menos y así sucesivamente.
Ejem:
<H1>Encabezado</H1>
<H2>Encabezado</H2>
<H3>Encabezado</H3>
<H4>Encabezado</H4>
<FONT SIZE=x> </FONT>
Sirve para cambiar el tamaño de las letras. La x es un número que indica el tamaño de la letra y va del 1 al 7. El número predeterminado es el 3.
Texto en <B>Negritas</B>
Texto en <I>Itálica</I>
Texto <U>subrayado</U>
<ADDRESS>
Dirección
</ADDRESS>
<HR>
Se utiliza como línea separadora. Tiene algunos atributos que la modifican. WIDTH indica la longitud, SIZE indica la altura, ALIGN la colocación de la línea y NOSHADE que no tenga relieve y además le añade un color gris más fuerte.
Ejem:
<HR>
<HR WIDTH=20% ALIGN=RIGHT SIZE=7>
<HR WIDTH=250 ALIGN=CENTER SIZE=5 NOSHADE>
*** Vamos a utilizar en nuestra página algunas de éstas etiquetas para modificar texto. Carga prueba.htm y teclea lo siguiente:
<HTML>
<HEAD>
<TITLE>Historia de Internet</TITLE>
</HEAD>
<BODY>
<h2>En esta página explicaremos brevemente los inicios de la red de redes.</h2><br>
<h3>Introducción</h3><p>
El mundo de las telecomunicaciones ha tenido un crecimiento acelerado
en los últimos años, en el que <b>Internet</b> ha sido
pieza clave. Hace unas décadas atrás, cuando el Departamento de
Defensa de los Estados Unidos desarrollaba una red de comunicaciones
que fuera capaz de soportar un ataque externo durante la guerra fría,
nadie se imaginó que después de transferir el control de esa red
llamada <u>ARPANET</u> a los investigadores universitarios,
ésta crecería exponencialmente involucrando significativamente a
toda la sociedad.
<hr>
<font size=2>Documento creado en Febrero del 2000</font>
</BODY>
</HTML>
*****************
Presiona el enlace para ver nuestra página después de agregar más información y de utilizar algunos de los modificadores de texto explicados en esta sección. Ver página web
Color
Con el fin de hacer un documento más agradable y atractivo a la vista, es necesario en algunas ocasiones resaltarlo con un color diferente. Esto se puede aplicar al fondo, a un enlace, al texto, a una palabra o a una letra.
Para poder representar un color en html, se deben utilizar 6 números hexadecimales. Ejem:
ROJO FF0000
VERDE 00FF00
AZUL 0000FF
MAGENTA FF00FF
VIOLETA 9900DD
ROSA CLARO FFDDFF
Aunque se ve un poco complicado en realidad no lo es. Lo que te recomiendo hacer es jugar con las combinaciones hasta que encuentres la que te gusta. Tomando los colores básicos de la tabla anterior puedes variar los números (0-9) o las letras (A-F) y ver cómo cambian las tonalidades.
Html también acepta los nombres de los colores en lugar de los números hexadecimales, por ejemplo "RED" en lugar de "FF0000", o "BLUE" en lugar de "0000FF", pero tiene la limitante de que solamente reconoce unos cuantos colores.
Se pueden seleccionar los colores deseados desde el inicio del documento en la etiqueta <BODY> </BODY> por ejemplo:
<BODY BGCOLOR="#FFFFFF" TEXT="#FF0000" LINK="#00AEFF">
donde:
BGCOLOR es el color del fondo.
TEXT es el color del texto.
LINK es el color del enlace.
Ojo: En este ejemplo se ve que antes del color siempre se coloca un signo "#".
También se puede cambiar el color sólo para un segmento deseado como:
<FONT COLOR="#FF0000">Texto</FONT>
*** Sigamos con nuestro ejemplo; cargamos el archivo prueba.htm y le agregamos lo siguiente:
<HTML>
<HEAD>
<TITLE>Historia de Internet</TITLE>
</HEAD> <BODY BGCOLOR="#0FF0FF">
<h2>En esta página explicaremos brevemente los inicios de la red de redes.</h2><br>
<h3>Introducción</h3><p>
El mundo de las telecomunicaciones ha tenido un crecimiento acelerado
en los últimos años, en el que <b>Internet</b> ha sido
pieza clave. Hace unas décadas atrás, cuando el <font color=RED>Departamento de
Defensa de los Estados Unidos</font> desarrollaba una red de comunicaciones
que fuera capaz de soportar un ataque externo durante la guerra fría,
nadie se imaginó que después de transferir el control de esa red
llamada <u>ARPANET</u> a los investigadores universitarios,
ésta crecería exponencialmente involucrando significativamente a
toda la sociedad.
<hr>
<font size=2>Documento creado en Febrero del 2000</font>
</BODY>
</HTML>
*****************
Las modificaciones hechas a nuestro archivo deben ser evidentes. En la etiqueta <BODY> </BODY> hemos agregado un determinado color para el fondo. También hemos especificado que sólo un segmento del texto sea de color rojo.
Presiona para ver nuestro diseño: Ver página web
Imágenes
Una característica muy importante en las páginas de Internet son los gráficos o imágenes. Estos elementos contribuyen a hacer más completa una página proporcionando mayor realce. Las imágenes se pueden usar como fondo de nuestra página, como complemento y apoyo visual para cierta información, vínculos hacia otras páginas, etc. Los formatos de imágenes más comunes en Internet son los .gif y .jpg, así que si queremos introducir un gráfico, éste tiene que cumplir con estos formatos.
Para agregar una imagen en un documento se utiliza la etiqueta <IMG>.
Ejem:
<IMG SRC="home2.jpg" ALT="Casa azul">
Casa azul
Donde:
IMG indica el deseo de cargar una imagen.
SRC indica la ruta en la que se encuentra nuestro gráfico. Este puede estar en el mismo directorio de nuestra página, en otro directorio, o incluso en un servidor en algún lugar del mundo.
Ejem:
<IMG SRC="../web/imagen/home2.jpg" ALT="Casa azul">
ALT asigna un nombre a la imagen para que cuando alguien cargue nuestra página desde un navegador que no despliegue gráficos, pueda saber que en ese lugar existe una imagen.
Existen una serie de atributos que modifican las imágenes de diferente forma, aquí están algunos:
ALIGN=left|right|top|middle|bottom
Las opciones para ALIGN sitúan al gráfico en diferentes posiciones con respecto al texto.
BORDER=n
Le agrega un borde a la imagen y "n" indica el grosor.
WIDTH=n, HEIGHT=n
Especifican la altura y la anchura de la imagen, cuyas unidades se dan en pixels.
VSPACE=n, HSPACE=n
Se utiliza para dejar espacio tanto vertical como horizontal entre la imagen y el texto que la rodee.
Ejem:
Este ejemplo mostrará una imagen alineada a la izquierda del texto y separada de él horizontalmente 10 unidades con un borde de grosor 2.
*** Agreguemos ahora una imagen a nuestro diseño. Carga prueba.htm y realiza la modificación.
<HTML>
<HEAD>
<TITLE>Historia de Internet>/TITLE>
</HEAD>
<BODY BGCOLOR="#0FF0FF">
<h2>En esta página explicaremos brevemente los inicios de la red de redes.</h2><br>
<h3>Introducción</h3><p>
El mundo de las telecomunicaciones ha tenido un crecimiento acelerado
en los últimos años, en el que <b>Internet</b> ha sido
pieza clave. Hace unas décadas atrás, cuando el <font color=RED> Departamento de
Defensa de los Estados Unidos </font> desarrollaba una red de comunicaciones
que fuera capaz de soportar un ataque externo durante la guerra fría,
nadie se imaginó que después de transferir el control de esa red
llamada <u>ARPANET</u> a los investigadores universitarios,
ésta crecería exponencialmente involucrando significativamente a
toda la sociedad.
<hr>
<font size=2>Documento creado en Febrero del 2000</font>
<center><IMG SRC="home2.jpg" ALT="Casa azul"></center>
</BODY>
</HTML>
*****************
Se ha insertado un gráfico a nuestra página que debe aparecer centrado. Da un click al enlace para ver el archivo.
Ver página web
Enlaces (Links)
El poder verdadero de html radica en la capacidad de manejar hipertexto o hipermedios como algunos le llaman, y se logra por medio de enlaces o links. Esto es, a través de un click en un segmento de texto o una imagen, es posible encontrar más información relacionada con la que originó ese click. Dicha información puede encontrarse en otras páginas dentro y fuera de nuestro servidor*, o en algún punto concreto de páginas dentro y fuera de nuestro servidor.
*La computadora donde tenemos montada nuestra página.
El enlace por definición aparece en nuestras páginas subrayado y de color azul. Como ya se vió anteriormente, el color del enlace puede cambiarse al gusto.
La etiqueta encargada de establecer un enlace es:
<A> </A>.
Dentro de esta etiqueta está la función HREF en la cual se debe indicar la dirección donde está la información a enlazar y también el tipo de protocolo* utilizado. Con HREF es posible también hacer enlaces directos hacia imágenes, sonidos, etc.
*El protocolo son las normas o reglas utilizadas para diferentes tipos de servicios como documentos hipertexto, transferencia de archivos, correo electrónico, etc. Ejem: HTTP, FTP, MAILTO, GOPHER, etc.
Ejem:
<A HREF="http://www.usatoday.com">Periódico USA Today</A>
Periódico USA Today
Dale un click al enlace creado y después pulsa "Back" o "Atrás" para regresar.
Este ejemplo muestra un link hacia otra página fuera de la nuestra en otro servidor.
Ejem:
<A HREF="index.html">Página principal>/A>
Página principal
Dale un click al enlace creado y después pulsa "Back" o "Atrás" para regresar.
Este ejemplo muestra un link hacia otra página dentro del mismo servidor en el que se encuentra esta página tutorial de html.
También es posible crear un enlace a través de una imagen en lugar de utilizar un segmento de texto. Esto se hace de la misma manera que los ejemplos anteriores, sólo que en lugar de escribir texto entre las etiquetas se inserta una imagen como las que ya hemos visto.
Ejem:
<A HREF="http://www.goto.com"><IMG SRC="logo.gif"></A>
www.goto.com
Dale un click al enlace gráfico creado y después pulsa "Back" o "Atrás" para regresar.
Este ejemplo muestra un link gráfico hacia otra página web.
*** Vamos ahora a aplicar enlaces en nuestro ejemplo. Carga prueba.htm
<HTML>
<HEAD>
<TITLE>Historia de Internet</TITLE>
</HEAD>
<BODY BGCOLOR="#0FF0FF">
<h2>En esta página explicaremos brevemente los inicios de la red de redes.</h2><br>
<h3>Introducción</h3><p>
El mundo de las telecomunicaciones ha tenido un crecimiento acelerado
en los últimos años, en el que <b>Internet</b> ha sido
pieza clave. Hace unas décadas atrás, cuando el <font color=RED> Departamento de
Defensa de los Estados Unidos </font> desarrollaba una red de comunicaciones
que fuera capaz de soportar un ataque externo durante la guerra fría,
nadie se imaginó que después de transferir el control de esa red
llamada <u>ARPANET</u> a los investigadores universitarios,
ésta crecería exponencialmente involucrando significativamente a
toda la sociedad.<P>
* Más información sobre este tema en:
<A HREF="http://www.interhelp.org/historia01.html">www.interhelp.org</A>
<hr>
<font size=2>Documento creado en Febrero del 2000</font>
<center><A HREF="index.html"><IMG SRC="home2.jpg" ALT="Casa azul"></A></center>
</BODY>
</HTML>
Tomado de:http://www.taringa.net/posts/info/2070607/Manual-de-HTML-para-principiantes.html
Video de HTMl:https://www.youtube.com/watch?v=av_PL4_jz1I
