 |
 |
 |
 |
 |
 |
 |
 |
Capítulo II: Empieza a Trabajar
Para poder utilizar HTML debes saber qué es y cómo funciona. HTML significa Lenguaje de Marcado de Hypertexto, se basa en SGML (Standard General Markup Language) que significa Lenguaje Estándar de Marcado Generalizado, un sistema mucho más grande de procesamiento de documentos, y éstos dos no guardan formatos específicos en su texto; para hacerlo hay que utilizar ciertas instrucciones que le indicarán al explorador cómo debe presentarlo; y aún así el formato que elijas para tu el texto de tu página en tu explorador puede distar del que aparecerá en la computadora de otros, ya que como lo había mencionado en el capítulo anterior, la Web es independiente de plataforma.
Un Lenguage de Marcado, es un texto ASCII, que carece de formato y contiene instrucciones específicas dentro del documento, que en HTML se les llama etiquetas, que vienen casi siempre en pares, una que le indica al explorador que comienza la etiqueta (abre), y otra que le indica que la finaliza (cierra). HTML tiene un conjunto definido de etiquetas que puede usar. Tú no puedes inventar las tuyas propias, ya que el explorador probablemente no las reconozca.
La mayor parte de las etiquetas llevan la siguiente sintaxis:
<Etiqueta atributo1="valor" atributo2="valor">objeto
afectado</Etiqueta>
No todas las etiquetas tienen atributos, ni todas
tienen cierre. Algunas son de un solo lado, e incluso otras
contienen más etiquetas dentro. Las etiquetas las puedes
escribir en mayúsculas, minúsculas o combinadas, ya que HTML no
hace distinción.
Ahora Sí, para hacer tu propia página web, necesitas abrir cualquier procesador de textos, desde el Bloc de Notas hasta el uno muy sofisticado como Word 2000. Para hacer tu primer ensayo de página escribe el siguiente código
<html>
<title>Mi primer ensayo de Página</title>
<body>
<h1>Este es un documento HTML</h1>
</body></html>
Ya que lo tengas, guárdalo en tu disco, con la extensión htm, ejemplo: pagina.htm; ahora abre tu navegador y en tu barra de direcciones escribe: file:/// y a continuación la ruta y el nombre de tu página, ejemplo: file:///c:/directorio/pagina.htm.
Entonces el explorador leerá tu página y te mostrará "Este es un documento HTML", y en el encabezado de la ventana dirá "Mi primer ensayo de Página". A continuación te presento las primeras etiquetas que aprenderás en este curso:
<HTML>
Ésta es la primer etiqueta en todo documento de hypertexto,
dentro de ella debe estar toda la página, y al final debes
cerrar la etiqueta:
<html>
...la página
</html>
<HEAD>
Especifica el encabezado del archivo, aquí se especifica la
información sobre el archivo como es el título, las palabras
clave, el tipo de contenido, el generador de la página etc...
<html><head>
<title>Este es el título<title>
<meta name="keywords" content="aquí van las
palabras clave">
</head></html>
<BODY>
Aquí va el contenido de la página, es decir, todo lo
escrito, las imágenes, los hypervínculos, etc... Ésta tercer
etiqueta en combinación con las dos anteriores generaría un código
como este:
<html><head>
<title>Este es el título<title>
<meta name="keywords" content="aquí van las
palabras clave">
</head>
<body><h1>Inicio</h1>
<p>este es el contenido...</p>
</body></html>
Fíjate bien que todas las etiquetas están anidadas, esto quiere decir que una etiqueta se abre y se cierra sin salirse de otra, en este caso, <head> y <body> se abren y se cierran por separado, pero dentro de <html>. Si se te olvida anidar tus etiquetas, el explorador ignorará las líneas posteriores. También te habrás dado cuenta de que introduje una etiqueta llamada <h1></h1> y otra <h6></h6>, estas etiquetas sirven para formatear texto de encabezados, dándole al texto afectado un tamaño y forma determinada por el explorador.
<H1>...<H6>
Existen 6 niveles de encabezados, que van desde <h1> hasta
<h6>, siendo <h1> el más grande de todos y <h6>
el más pequeño, en base a ésto puedes intentar mostrar tus
datos jerárquicamente con distintos niveles de encabezados.
<html><head>
<title>Este es el título<title>
</head><body>
<h1>Encabezado principal</h1>
<h2>Subtítulo 1</h2>
<h3>Capítulo 1</h3>
<h4>Tema 1</h4>
<h4>Tema 2</h4>
<h3>Capítulo 2</h3>
<h3>Capítulo 3</h3>
<h2>Subtítulo 2</h2>
</body></html>
Ya que tienes tu título y algunos temas, sería bueno añadirle
algunos párrafos, para hacerlo se necesita la etiqueta <p></p>
, para especificar la alineación del texto se utiliza en
atributo align dentro
de la etiqueta que puede ser "center", "left"
o "right", <p align="center">
por ejemplo:
<html><body><p>Hola, aquí tu puedes escribir
todo lo que tú quieras sin ninguna restricción de longitud.</p><p>Éste
es el segundo párrafo... Y puedo seguir escribiendo hasta el
cansancio</p></body></html>
Además de encabezados, títulos y párrafos, HTML permite
mostrar datos en forma de listas ordenadas, con viñetas, de
glosario, de menú o de directorio. Para hacer una lista ordenada
se utiliza <ol></ol> y cada elemento debe
especificarse con la etiqueta <li>
<p>Éstos son los tres elemntos de mi página</p>
<ol>
<li>Elemento 1
<li>Elemento 2
<li>Elemento 3
</ol>
Es símbolo predeterminado de órden es la numeración arábiga,
pero con el atributo type podemos
especificar que tipo de símbolo queremos:
<ol type="1"> Números arábigos. 1,2,3,4...
<ol type="a"> Letras minúsculas. a,b,c,d...
<ol type="A"> Letras mayúsculas. A,B,C,D...
<ol type="i"> Números romanos. i, ii, iii, iv...
<ol type="I"> Números romanos. I, II, III, IV...
el atributo type, también se puede aplicar a la etiqueta <li>,
pero no afectará sólo a ese elemento, sino también a los
consecuentes. Pero si queremos iniciar la lista a partir de un número
podemos utilizar el atributo start para
<ol> pero si queremos cambiar el número de elemento en
cualquier parte de la lista necesitamos el atributo value
en <li>, lo que afectará al elemento en sí, y a los
consecuentes.
<ol type="I" start="4">
<li>Elemento 4
<li>Elemento 5
<li type="a">Elemento 6
<li type="1">Elemento 7
<li value=100>Elemento 100
<li type="I" value=3045>Elemento 3045
Éste código genera la siguiente lista:
- Elemento 4
- Elemento 5
- Elemento 6
- Elemento 7
- Elemento 100
- Elemento 3045
Para listas con viñetas se utiliza la etiqueta <ul></ul>, y para cambiar entre los tres tipos de viñetas se utiliza el atributo type:
| <ul type="disc"> <li>disco </ul><ul type="square"> <li>cuadrado </ul><ul type="circle"> <li>círculo</ul> |
|
Las listas de glosario son
distintas a las demás, ya que cada elemento consta de dos partes;
el término y la definición, y cada una con su propia etiqueta,
para escribir el término se utiliza <dt> y para poner el término
se utiliza <dd>, anidadas en <dl> y </dl>.
<html><tilte>Título</title><body>
<dl>
<dt>Éste es el término:<dd>y esta es su definición,
cómo podrás ver, la definición abarca más espacio que el término
<dt>Éste es otro término
</dl></body></html>
Las listas de menú no tienen ningún caracter
especial que los identifique, pero en algunos exploradores se les
pone una sangría que los identifica; aquí los elementos se
anidan en <menu></menu>
<html><title>Lista de Menú</title><body>
<menu>
<li>Éste es un elemento de la lista de menú
<li>Aquí hay otro
</menu></body></html>
Las listas de directorio son iguales que las de menu solo que se utilizan para términos más cortos ya que el explorador las sitúa horizontalmente, los elementos se encierran entre <dir></dir>.
Ya que sabes utilizar las listas, te recomiendo que copies éste ejemplo, lo pegues en un procesador de texto, lo grabes con extensión htm y lo veas en tu explorador; ya podrás cambiarle todo lo que tú quieras, así podrás ver tu trabajo en el explorador en tiempo real.
<html>
<head><title>La página del Ajedrez</title>
<meta name="keywords" content="ajedrez rey dama
caballo alfil peón torre México Chess">
<head><body>
<h1>La página del Ajedrez en México</h1>
<p>El ajedrez es uno de los juegos más antiguos del mundo,
y se le considera como
el juego de la mente, ya que uno necesita idear estrategias, para
llegar a ganar, pues
aquí el azar no tiene nada que ver con la partida</p>
<h2>El objetivo del juego</h2>
<p>El objetivo del juego es llevar al rey del contrincante
a una posición dónde éste
no pueda hacer ningún movimiento legal, y a la vez esté siendo
atacado por alguna pieza
del equipo contrario, denominada jaque mate.</p>
<h2>Nombres de las piezas</h2>
<ul type="disc">
<li>Rey<li>Dama<li>Torre<li>Caballo<li>Alfil<li>Peón</ul>
</body>
</html>
haz clic aquí para ver la página en una ventana nueva
¿Qué es un vínculo? Un vínculo es un texto
exaltado que al ser pulsado por el mouse cambia la dirección del
URL actual. Para hacer un vínculo se necesitan dos cosas: la URL
del archivo que se quiere vincular y el téxto exaltado que
servirá para activar el vínculo. Para crear vínculos se
utiliza la etiqueta <a></a>, y entre al abre y cierre
se escribirá el texto de activación. Pero no serviría un vínculo
sin el atributo que defina el archivo vinculado, éste es href
y su valor será la URL del archivo a vincular.
<a href="http://samuel.scriptmania.com">Haz
clic aquí</a>
El atributo href, puede adquirir cualquier valor URL válido, es decir, mientras que el explorador pueda interpretar el protocolo utilizado, el vínculo será correcto. Otro atributo de <a> es title, que define el texto que se expondrá en pantalla cuando el mouse pase sobre el vínculo, por unos segundos; aunque éste es más bien un atributo estético que funcional.
Ahora que ya sabes como hacer links, intentemos vinular dos páginas. ¿Recuerdas la página de Ajedrez? pues veámosla de nuevo, pero ahora con vínculos.
ajedrez.htm
<html>
<head><title>La página del Ajedrez</title>
<meta name="keywords" content="ajedrez rey dama
caballo alfil peón torre México Chess">
<head><body>
<h1>La página del Ajedrez en México</h1>
<p>El ajedrez es uno de los juegos más antiguos del mundo,
y se le considera como
el juego de la mente, ya que uno necesita idear estrategias, para
llegar a ganar, pues
aquí el azar no tiene nada que ver con la partida</p>
<a href="objetivos.htm" title="Si haces clic,
verás la página de objetivos"><h2>Objetivos</h2></a>
<h2>Nombres de las piezas</h2>
<ul type="disc">
<li>Rey<li>Dama<li>Torre<li>Caballo<li>Alfil<li>Peón</ul>
</body>
</html>
objetivos.htm
<html>
<head><title>Objetivos del Ajedrez</title>
</head><body>
<h1>Objetivos del juego</h1>
<p>El principal objetivo del juego es llevar al rey del
contrincante a una posición dónde éste no pueda hacer
ningún movimiento legal, y a la vez esté siendo atacado por
alguna pieza del equipo contrario, denominada jaque mate.
</p><p>Para lograr ésto, se deben desarrollar las
piezas hacia el centro del tablero, para ganar posición, y
posteriormente para dar Jaque Mate. El juego consta generalmente
de tres partes:</p>
<ol type="I">
<li>salida<li>desarrollo<li>final
</ol><p align="center" href="ajedrez.htm">Atrás</a></body>
</html>
haz clic aquí para ver las páginas en una ventana nueva
Para hacer vínculos con lugares específicos dentro del mismo
documento, necesitas crear antes un ancla, que es un marcador
dentro del documento, y después hacer el vínculo al ancla
mencionada. Para especificar un ancla, se necesita utilizar el
atributo name de la etiqueta <a>,
y su valor será el nombre del ancla, ejemplo:
<a name="ancla">Inicio del documento</a>
Ahora, debes especificar el vínculo hacia el ancla anterior,
éste puede estar en cualquier parte del documento, y al hacer
clic en él, el cursor se posicionará en el inicio del ancla, en
éste caso "Inicio del documento". Para específicar la
URL de un ancla, se debe escribir la ruta y el archivo seguido de
un # y después el nombre del ancla, ejemplo:
<a href="archivo.htm#ancla">Haz clic aquí</a>
En el índice de éste curso, se utilizan vínculos de ancla para cada tema y vínculos normales para los capítulos. La etiqueta <a> para HTML 4.0 y 3.2 tiene dos atributos de relación que son rel y rev el valor de dichos atributos establece la relación entre el recurso actual y el vínculo, siendo rel, la relación directa de la página actual al vínculo y rev, la relación inversa desde el vínculo a la página actual. Ésto significa que rel indica que el documento actual es el relacionado del vínculo, y rev indica que el vínculo es el relacionado del documento actual.
Ahora que ya sabes hacer un vínculo, debes saber cómo
utilizar el URL de cada referencia, con protocolos distintos a
http. El localizador Uniforme de Recursos o URL, consta de tres
partes fundamentales que son:
Protocolo: qué es el tipo de información que
va a procesar el explorador, ej: http, ftp, mailto, file, gopher,
wais...
Dominio: Es el sistema de internet, que contiene
la información de los protocolos.
Ruta: Son los directorios y el archivo a dónde
apunta el URL.
http://www.dominio.com/directorios.../archivo.extensión
En muchas plataformas actuales, se permite asignar nombres de
archivo, mayores a 8 caracteres y éstos pueden contener espacios,
lo que puede ser muy útil para identificar al archivo, pero en
la Web, los exploradores pueden entrar en conflicto, ya que sólo
admiten los caracteres de mayúsculas y misnúsculas de la A a la
Z, del 0 al 9 y los símbolos .$-+_. Si se quiere especificar
otro caracter, se debe utilizar el código ISO latin, iniciándolos
con el símbolo de porcentaje %
%20 es el espacio.
%3f es interrogación
%2f es diagonal...
Existe una gran cantidad de protocolos diferentes de URL, y sería imposible nombrar todos ellos pero existen cuatro de ellos que son los más comunes y se mencionan a continuación:
HTTP: (Hypertext Transport Protocol) Significa protocolo de transferencia de hypertexto, porque presisamente eso hace, envía la información de la págnia desde el servidor hasta la computadora local., cuando se escribe la ruta exacta del archivo, el explorador muestra la página, imagen, etc... al que hizo referencia, pero si se escribe solo la ruta, el nombre de archivo que buscará por predeterminación será index.html, ésto quiere decir que cuando tecleamos http://algun.dominio.com el explorador realmente busca http://algun.dominio.com/index.html. También es necesario mencionar que este protocolo, es el predeterminado para un recurso relativo, si te acuerdas, en muchas ocasiones no es necesario escribir http:// en el atributo href de un vínculo, porque el explorador lo toma como http:// a menos que se le escriba lo contrario.
Las URL relativas sirven para no tener que escribir toda la dirección completa, el explorador rellenará los espacios que falten, con la dirección del directorio actual, quiere decir que si tenemos la ruta www.algo.com/algo y dentro, dos archivos algo1.htm y algo2.htm, podemos especificar una relación relativa entre ellos escribiendo solamente el nombre del archivo, ya que se encuentran en el mismo directorio. ej: <a href="algo2.htm">...</a> pero si hubiese un archivo llamado algo3.htm en el directorio www.algo.com/algo/mas/ deberíamos escribir <a href="mas/algo3.htm">...</a> y si quisieramos vincular con un archivo index.htm que se encuentra en el primer nivel www.algo.com/ deberíamos escribir <a href="../index.htm">...</a> los dos puntos indican un nivel inferior.
FTP: (File Transference Protocol), significa
Protocolo de Transferencia de Archivos, y se utiliza desde un
servidor que cuente con ésta información, para transferir
archivos desde el servidor, hasta el usuario. ftp cumple con las
reglas de un URL, y puede transferir un directorio entero, o algún
archivo específico.
ftp://algo.servidor.com/directorio/ - transfiere
todos los archivos de un directorio.
ftp://algo.servidor.com/directorio/archivo.ext -
transfiere solo un archivo llamado archivo.ext.
FILE: (file) significa Archivo, y se utiliza para hacer referencia a un archivo del lado del cliente, o si se especifica un dominio, hará lo mismo que http:// ejemplo: file:///dir1/dir2/archivo.ext
MAILTO: (Mail to) significa Correo hacia... Se utiliza para abrir una ventana con el recipiente de correos predeterminado del usuario, qué escribe la dirección de correo electrónico al que hace referencia el vínculo en la parte de destinatario. Un ejemplo es: mailto:[email protected]