CONCEPTOS
BÁSICOS
World Wide Web (WWW):
Digamos, simplemente, que es un sistema de información, el sistema
de información propio de Internet. Sus características son:
Información por
hipertexto: Diversos elementos (texto o imágenes) de la información
que se nos muestra en la pantalla están vinculados con otras
informaciones que pueden ser de otras fuentes. Para mostrar en
pantalla esta otra información bastará con hacer clic sobre ellos.
Gráfico: En la
pantalla aparece simultáneamente texto, imágenes e incluso sonidos.
Global: Se puede
acceder a él desde cualquier tipo de plataforma, usando cualquier
navegador y desde cualquier parte del mundo.
Pública: Toda su
información está distribuida en miles de ordenadores que ofrecen su
espacio para almacenarla. Toda esta información es pública y toda
puede ser obtenida por el usuario.
Dinámica: La
información, aunque esta almacenada, puede ser actualizada por el
que la publico sin que el usuario deba actualizar su soporte técnico.
Independiente:
Dada la inmensa cantidad de fuentes, es independiente y libre.
Navegador: Es el
programa que nos ofrece acceso a Internet. Debe ser capaz de
comunicarse con un servidor y comprender el lenguaje de todas las
herramientas que manejan la información de Web. Puede decirse que
cada casa de software podría tener su navegador propio, aunque los
mas populares sean Netscape e Internet Explorer.
Servidor: Se
encarga de proporcionar al navegador los documentos y medios que este
solicita. Utiliza un protocolo HTTP para atender las solicitudes de
archivos por parte de un navegador.
HTTP: Es el
protocolo de transferencia de hipertexto, o sea, el protocolo que los
servidores de World Wde Web utilizan para mandar documentos HTML a
través de Internet.
URL: Es el
Localizador Uniforme de Recursos, o dicho mas claramente, es la
dirección que localiza una información dentro de Internet.
HTML: Estas siglas se
corresponden con la definición "Lenguaje para marcado de
hipertexto". Más claro aún, se trata de un lenguaje para
estructurar documentos a partir de texto en World Wide Web. Este
lenguaje se basa en tags (instrucciones que le dicen al texto como
deben mostrarse) y atributos (parámetros que dan valor al tag).
ORGANIZACIÓN
DE UNA WEB
Para hacer una buena
pagina Web lo ideal es crearnos un boceto inicial de la estructura.
Si hacemos esto, no solo estamos procurando una presentación
agradable y facilitando la tarea de navegar sino que también nos
facilitamos el mantenimiento de futuras revisiones y modificaciones.
Objetivos
Lo primero que debemos
hacer el fijarnos los objetivos que queremos alcanzar según la
información que vayamos a aportar. Para crear nuestra primera
página, estos objetivos deberían no ser muy pretenciosos o tener un
sentido únicamente personal. Tener claros los objetivos nos ayudara
a no plasmar contenidos confusos o innecesarios.
Contenidos
Una vez tenemos los
objetivos, hay que organizar el contenido por temas o secciones, que
se ajusten a nuestros objetivos, reuniendo las informaciones
relacionadas bajo el mismo epígrafe. Es conveniente que los temas
sean razonablemente cortos y si fuera necesario divida en subtemas.
Si por el contrario tenemos temas muy cortos, lo correcto sería
agruparlos bajo un encabezado de tema algo más general.
Primer paso
Un sitio Web consiste de
una o más páginas Web que contienen texto y gráficos y que están
vinculadas entre si creando un cuerpo de información. La página
principal o página base es desde donde se comienza a visitar la
presentación y su URL será la que figure como dirección de la
presentación. Esta página base debe ofrecer un panorama general del
contenido de la presentación.
Organización
Ha llegado la hora de
estructurar la información recopilada en un conjunto de páginas
Web. Podemos crearnos una estructura propia pero lo más lógico es
guiarnos por una estructura clásica.
Secuenciación
Consiste en decidir que
contenido va en cada página, elaborar la trama de vínculos para
navegar entre ellas e incluso, hacernos una idea de que tipo de
gráficos vamos a poner y que ubicación van a tener. Para ello puede
utilizarse un "Tablero de Secuencia", un esquema gráfico
que nos ayudará a recordar en todo momento donde encaja cada página
en el global de la presentación.
Revisión de objetivos
Finalmente y antes de
ponernos a crear nuestra presentación Web, debemos prestar atención
a que lo que tenemos plasmado en el "Tablero de Secuencia"
cubre los objetivos que nos habíamos propuesto. Si es así, ya
podemos comenzar a manejarnos con HTML.
EL
LENGUAJE HTML
Como ya se ha dicho, este
lenguaje estructura documentos. La mayoría de los documentos tienen
estructuras comunes (títulos, parrafos, listas...) que van a ser
definidas por este lenguaje mediante tags. Cualquier cosa que no sea
una tag es parte del documento mismo.
Este lenguaje no describe
la apariencia del diseño de un documento sino que ofrece a cada
plataforma que le de formato según su capacidad y la de su navegador
(tamaño de la pantalla, fuentes que tiene instaladas...). Por ello y
para no fustrarnos, no debemos diseñar los documentos basándonos en
como lucen en nuestro navegador sino que debemos centrarnos en
proporcionar un contenido claro y bien estructurado que resulte fácil
de leer y entender.
No se desespere por lo
que acaba de leer. HTML tiene dos ventajas que lo hacen prácticamente
imprescindibles a la hora de diseñar una presentación web: Su
compatibilidad y su facilidad de aprendizaje debido al reducido
número de tags que usa.
Básicamente, los
documentos escritos en HTML constan del texto mismo del documento y
las tags que pueden llevar atributos. Esto llevado a la práctica,
vendría a ser:
<tag>
elemento </tag>
ESTRUCTURA
BÁSICA DE UN DOCUMENTO HTML: CABECERA Y CUERPO DEL DOCUMENTO
Tres son las tags o
etiquetas que describen la estructura general de un documento y dan
una información sencilla sobre él. Estas tags no afectan a la
apariencia del documento y solo interpretan y filtran los archivos
HTML.
<HTML>:
Limitan el documento e indica que se encuentra escrito en este
lenguaje.
<HEAD>:
Especifica el prólogo del resto del archivo. Son pocas las tags que
van dentro de ella, destacando la del titulo <TITLE> que será
utilizado por los marcadores del navegador e identificará el
contenido de la página. Solo puede haber un título por documento,
preferiblemente corto aunque significativo, y no caben otras tags
dentro de él. En head no hay que colocar nada del texto del
documento.
<BODY>: Encierra
el resto del documento, el contenido.
<H1> <P>
<BR>
Tres son la tags que
describen la estructura general de un documento y dan una información
sencilla sobre él. Estas tags no afectan a la apariencia del
documento y solo interpretan y filtran los archivos HTML.
<H1>, <H2>,
<H3>...: Titulares. Sirven para dividir el texto en secciones.
Se pueden definir seis niveles de titulares, el texto que deseamos
que sea un titular se pone entre las tags <H1> Titular </H1>.
Se definen mediante las tags <H1>.....</H1> hasta
<H6>.....</H6>
<P>:
Párrafos. En principio, sin entrar en detalles de alineación u
otras características, digamos que se definen por las tags
<P>.....<P>. Esta tag, en un principio, se diseñó para
saltar de párrafo por lo que puede ir sola "<P>" al
final de un texto indicando que a continuación se quiere una línea
en blanco aunque le recomendamos que se acostumbre a utilizarla
abriéndola y cerrándola.
<BR>: Saltos
de línea. Esta tag sirve para realizar un salto de linea, puede
poner tantas como desee y realizará un salto de línea por cada una
de ellas.
<!-- -->:
Comentarios. Son directivas que nunca se mostrarán a través del
navegador y que le servirán para recordatorios en futuras revisiones
del documento.
Ejemplo
<HTML>
<HEAD>
<TITLE>Mi Primera
Web</TITLE>
</HEAD>
<BODY>
<H1>Mi primera página</H1>
<!-- Aqui va un comentario que no
es
interpretado por el navegador -->
<P>Hola mundo, esta es un página
con titular,
que tiene también un párrafo y unos
cuantos
saltos de línea.</P>
Uno<br>
Dos<br>
Tres<br>
</BODY>
</HTML>
LOS
HIPERVÍNCULOS
<A>
Lo característico del lenguaje HTML es el
poder generar vínculos de hipertexto para enlazar con ellos todos
sus documentos en web.
Para generar un enlace a otro documento
necesitamos el nombre de un archivo (o su dirección URL) y el texto
que servirá de punto de activación del otro documento. Este segundo
elemento será el que veamos en pantalla y que se servirá del
primero para saltar de documento.
Los enlaces se generan mediante la tag
<A>.....</A> y, a diferencia de los vistos anteriormente,
llevará siempre dentro de la tag un atributo ya sea <A HREF="">
.
<A HREF="URL">.....</A>:
Es el más habitual de los atributos y sirve para saltar entre
diferentes URLs. De momento veremos:
Saltar en una presentación del archivo 1 al
archivo 2: En el archivo 1 incluiremos la directiva <A
HREF="archivo2.html">Siguiente página</a>
Saltar a una pagina web llamada
www.cmp.comuv.com : <A
HREF="http://www.cmp.comuv.com">Visita nuestra pagina
oficial</A>
FORMATO
DE TEXTO.
<B> <U>
<I>
Estos estilos son tags
que afectan a palabras o caracteres dentro de otras entidades de HTML
modificando el aspecto de ese texto para que sea diferente del texto
que lo rodea. Existen dos tipos de estilos:
Estilos lógicos:
Indican como se va a emplear el texto que realizamos:
<em>.....</em>:
Indica que los carácteres estarán enfatizados de alguna manera,
generalmente en cursiva aunque dependerá del navegador.
<strong>.....</strong>:
Los carácteres tendrán mayor énfasis, generalmente en negrita.
<code>.....</code>:
Muestra como una fuente monoespaciada, generalmente Courier.
<samp>.....</samp>:
Muy similar a code.
<kdb>.....</kdb>:
Texto que el usuario debe escribir.
<var>.....</var>:Nombre
de una variable que deba ser reemplazada por su valor real.
Generalmente en cursiva o subrayada.
<dfn>.....</dfn>:Se
usa para resaltar una palabra que se va a definir.
<cite>.....</cite>:
Se usa para citas cortas.
Estilos físicos:
Modifican la presentación real del texto.
<b>.....</b>:
Pone el texto en negrita.
<i>.....</i>:
Pone el texto en cursiva.
<tt>.....</tt>:
Pone el texto en fuente monoespaciada.
<u>.....</u>:
Subraya el texto afectado.
Ejemplo
<HTML>
<HEAD>
<TITLE>Ejemplos de
Textos</TITLE>
</HEAD>
<BODY>
<H1>Estilos de
caracter</H1>
Un ejemplo de texto de
<EM>realzado</EM>.<br>
Un ejemplo de texto de
<STRONG>realzado</STRONG>.<br>
Un ejemplo de texto de
<CODE>realzado</CODE>.<br>
Un ejemplo de texto de
<SAMP>realzado</SAMP>.<br>
Un ejemplo de texto de
<KDB>realzado</KDB>.<br>
Un ejemplo de texto de
<VAR>realzado</VAR>.<br>
Un ejemplo de texto de
<DFN>realzado</DFN>.<br>
Un ejemplo de texto de
<CITE>realzado</CITE>.<br>
<br>
Un ejemplo de texto de
<B>realzado</B>.<br>
Un ejemplo de texto de
<I>realzado</I>.<br>
Un ejemplo de texto de
<U>realzado</U>.<br>
Un ejemplo de texto de
<TT>realzado</TT>.<br>
</BODY>
</HTML>
IMÁGENES
<IMG>
El uso de imágenes es
uno de los factores que ha popularizado tanto World Wide Web. Incluir
imágenes en una presentación web es muy sencillo, solo debe de
tener en cuenta que las imágenes tienen que tener los formatos GIF,
JPEG o PNG. Las imágenes en línea, se especifican a partir de la
tag <img> que no tiene una tag correspondiente de cierre pero
que puede acompañarse de los siguientes atributos:
src= Este atributo
es obligatorio e indica el nombre del archivo de imagen (entre
comillas) o la URL que se va a representar.
Align=
Permite controlar la alineación de una imagen con respecto a una
línea de texto adyacente o a otras imágenes en esa línea. Los tres
valores posibles son los ya conocidos left, right, top, middle y
bottom.
Alt= Es la
alternativa que se estableció cuando todavía existían
visualizadores de solo texto. Entre comillas podremos escribir un
texto que suplantara a esta imagen si no se carga o mientras se carga
o cuando, visualizando ya la imagen, pasamos el ratón por encima.
WIDTH= Este
atributo es opcional pero es recomendable ponerlo para ayudar al
navegador a representar la imagen, significa el ancho de la imagen
que vamos a representar.
HEIGHT=Al igual
que el atributo WIDTH, es opcional y recomendable ponerlo, este
significa el alto de la imagen.
BORDER= Con BORDER
especificamos el ancho de un borde que rodea la imagen.
<IMG
SRC="/graficos/bebe1.jpg" WIDTH=140 HEIGHT=210 BORDER=0
ALT="Un bebé">
Un bebé
Ejemplo:
<HTML>
<HEAD>
<TITLE>Ejemplo
Imagenes</TITLE>
</HEAD>
<BODY>
<H1>EJEMPLO DE UNA
IMAGEN</H1>
<IMG
SRC="/graficos/bebe1.jpg" WIDTH=140 HEIGHT=210 BORDER=0
ALT="Un bebé" ALIGN="RIGHT">
<IMG
SRC="/graficos/bebe1.jpg" WIDTH=140 HEIGHT=210 BORDER=3
ALT="Un bebé" ALIGN="LEFT">
Un texto cualquiera.
</BODY>
</HTML
LISTAS
<UL> <OL>
<LI>
Junto con encabezados y
párrafos, son otro de los elementos HTML más comunes. Pueden darse
cinco tipos diferentes de listas, cada uno con tags (o etiquetas)
distintas aunque con alguna en común:
Listas numeradas u
ordenadas: Se engloban por las tags <ol>.....</ol> y
cada elemento de la lista estará encabezado por la tag <li>
que puede o no llevar la tag de cierre </li>. Es conveniente
que cada elemento de la lista esté en una línea nueva aunque todo
seguido consiga en la presentación el mismo efecto. Cuando el
navegador interpreta una lista ordenada, numera y sangra cada
elemento en forma secuencial, aunque se introduzcan modificaciones.
Listas con viñetas o
sin orden: Se engloban por las tags <ul>.....</ul> y
cada elemento de la lista, también estará encabezado por la tag
<li>. El resultado es que el navegador inserta viñetas
(marcadores) delante de cada elemento.
Listas de menú y de
directorio: Están en desuso puesto que su resultado suele ser,
prácticamente, idéntico al de las listas con viñetas.
Menú: Englobadas por las
tags <menu>.....</menu> y cada elemento encabezado por la
tag <li>.
Directorio: Englobadas
por las tags <dir>.....</dir> y cada elemento encabezado
por la tag <li>.
Listas de glosario:
Cada elemento de la lista está compuesto por un término y una
definición y cada una de estas partes tiene su propia tag. Estas
listas se engloban con las tags <dl>.....</dl>. Para el
término se usa la tag <dt> y para la definición la tag <dd>.
Generalmente el navegador colocará término y definición en dos
líneas diferentes pero esto se puede evitar añadiendo a la tag de
apertura el atributo compact: <dl compact>.
Listas anidadas:
Consiste en poner una lista dentro de otra, de manera que la lista
secundaria sangre respecto a la principal. Puede jugar con los
diferentes tipos de lista pero recuerde estructurar bien las tags:
Las tags de la lista principal englobarán todo el conjunto de las
listas y las tags de las listas secundarías se cerraran antes de
volver a la lista principal. Ahora quizá le empiece a convenir
sangrar el propio código conforme lo va escribiendo en HTML.
Ejemplo
<HTML>
<HEAD>
<TITLE>Ejemplo de
Listas en mi Web </TITLE>
</HEAD>
<BODY>
<H1>Listas</H1>
Una lista ordenada
<ol>
<li>Uno</li>
<li>Dos</li>
<li>Tres</li>
</ol>
<br><br>
Una lista sin ordenar
<ul>
<li>Uno</li>
<li>Dos</li>
<li>Tres</li>
</ul>
<br><br>
Una lista de glosario
<dl>
<dt>Termino 1</dt>
<dd>Definición
1</dd>
<dt>Termino 2</dt>
<dd>Definicion
2</dd>
</dl>
<br><br>
Listas anidadas
<ul>
<li>Uno
<ul>
<li>Uno</li>
<li>Dos</li>
<li>Tres</li>
</ul>
</li>
<li>Dos</li>
<li>Tres</li>
</ul>
</BODY>
</HTML>
SALTOS
Y LINEAS
<HR> <BR>
Líneas divisorias: Se
crean con la tag <hr> que no tiene tag de cierre ni lleva texto
asociado. Se puede especificar el ancho de la línea con el siguiente
atributo
<hr
width="80%">.
Ejemplo:
<HTML>
<HEAD>
<TITLE>Haciendo saltos de linea</TITLE>
</HEAD>
<BODY>
<H1>Saltos y
lineas</H1>
<HR>
<HR width="80%">
<HR width="60%">
<HR width="40%">
<HR width="20%">
----
<br><br><br>
----
</BODY>
</HTML>
LAS
TABLAS
<TABLE> <TR>
<TD>
Las tablas surgieron con la versión HTML 3.0.
Las tablas nos permiten representar y ordenar cualquier elemento de
nuestra presentación en diferentes filas y columnas de modo que
podamos resumir grandes cantidades de información de una manera que
puede representarse rápida y fácilmente.
El contenido de una tabla lo debemos
desarrollar entre las tags <table>.....</table>.
Las tablas se definen fila a fila, celda a
celda, comenzando desde la celda superior izquierda. Las columnas se
calcularán automáticamente según las celdas que hay en cada fila.
Cada fila de la tabla se indica mediante las
tags <tr>.....</tr>. Las tags <th> y <td> con
sus correspondientes tags de cierre, indican para indicar las filas
individuales dentro de cada fila. Las tags <th>.....</th>
indican que se trata de celdas que sirven como encabezado de tabla y
suelen visualizarse en negrita. Las tags <td>.....</td>
indican que se trata de celdas comunes.
<HTML>
<HEAD>
<TITLE>Creando
Tablas</TITLE>
</HEAD>
<BODY>
<H1>Mi Tabla</H1>
<TABLE BORDER="1">
<TR>
<TH>Valor 1</TH>
<TH>Valor 2</TH>
<TH>Valor 3</TH>
</TR>
<TR>
<TD>Dato 1</TD>
<TD>Dato 2</TD>
<TD>Dato 3</TD>
</TR>
<TR>
<TD>Dato 4</TD>
<TD>Dato 5</TD>
<TD>Dato 6</TD>
</TR>
</TABLE>
</BODY>
