Copy Link
Add to Bookmark
Report
SET 033 0X0E
-[ 0x0E ]--------------------------------------------------------------------
-[ HTML II ]-----------------------------------------------------------------
-[ by elotro ]------------------------------------------------------SET-33---
Cocinando con elotro y SET ezine
Plato principal :
__ __ ________ _________ __
| |__| | |__ __| | _ _ | | |
| __ | | | | | |_| | | | |___
|__| |__| |__| |_| |_| |______|
_______ _______
|__ __| |__ __|
| | | |
__| |__ __| |__
|_______| |_______|
( o como volverse loco haciendo paginas web )
Segundo plato : PROGRAMACION DE SERVIDORES WEB (CGI)
Postre : - Formato MIME
- util.c
- Caracteres especiales y simbolos
- Webs recomendadas
Sobremesa : Aclaraciones y agradecimientos
El menu del plato principal incluye :
1. Introduccion
1.1 HTML 2 y 3
1.2 Vale la pena aprender HTML ?
2. Hipertexto
2.1 Ejemplos
2.1.1 Libro
2.1.2 Documento tecnico
2.2 Nocion de hipertexto
2.2.1 Escribiendo hipertexto
2.2.2 Multimedia en la WWW
3. HTML
3.1 Que es HTML ?
3.2 Donde encontrar HTML ?
3.3 El URL
3.4 Donde se almacena el HTML ?
3.5 Proteccion de los documentos
4. Escribiendo HTML
4.1 Marcas
4.2 Acentuacion
4.3 Estructura del HTML
4.3.1 <HTML>
4.3.2 <HEAD>
4.3.3 <TITLE>
4.3.4 <BODY>
4.3.5 <ADDRESS>
4.3.6 <!--Comentarios>
4.4 Atributos de una marca
4.5 Esqueleto de un documento HTML
4.6 Probando documentos HTML
5. Divisiones
5.1 <Hn>
5.2 <BR>
5.3 <P>
5.4 <HR>
5.5 <PRE>
6. Listas
6.1 Descriptiva
6.1.1 <DL>
6.1.2 <DT>
6.1.3 <DD>
6.2 Regular
6.2.1 <LI>
6.2.2 <UL>
6.2.3 Anidamiento de listas (no ordenadas)
6.2.4 <OL>
6.2.5 Anidamiento de listas (ordenadas)
6.3 Listas anidadas
7. Estilos
7.1 Estilo del caracter
7.1.1 <B>
7.1.2 <I>
7.1.3 <U>
7.1.4 <TT>
7.2 Estilo logico y de parrafo
7.2.1 <CITE>
7.2.2 <CODE>
7.2.3 <DFN>
7.2.4 <EM>
7.2.5 <KBD>
7.2.6 <SAMP>
7.2.7 <STRONG>
7.2.8 <VAR>
7.2.9 <BLOCKQUOTE>
7.3 Extensiones
7.3.1 <FONT>
7.3.2 Atributo Size
7.3.3 Atributo Color
8. Enlances
8.1 Marcadores o anclas
8.1.1 <A>
8.1.2 HREF, enlance externo
8.1.3 HREF, enlance interno
8.1.4 NAME, marcador de llegada
8.2 Recursos de un enlance
8.3 Tipos de URL
8.3.1 FTP
8.3.1 NEWS
8.3.1 TELNET
8.3.1 GOPHER
8.3.1 MAILTO
9. Incluyendo imagenes
9.1 Imagenes
9.1.1 <IMG>
9.1.2 Alineando imagenes
9.2 Imagenes en navegadores no graficos
9.3 Imagenes externas
9.4 Imagenes como hipervinculos
10. Fondo de la pagina, atributos extras al texto
10.1 Fondo
10.1.1 BGCOLOR
10.2.2 BACKGROUND
10.2 Color del texto
10.2.1 TEXT
10.2.2 LINK, VLINK, ALINK
11. Tablas
11.1 <TABLE>
11.2 <TR>
11.3 <TD>
11.4 <TH>
11.5 <CAPTION>
12. Paneles o marcos
12.1 Introduccion
12.2 Creacion de paneles
12.2.1 <FRAMESET>
12.2.1 <FRAME>
12.2.1 <NOFRAMES>
12.3 Utilizacion de paneles
12.3 Target
Y hasta aqui llegaremos por hoy, espero que no pasen hambre hasta Set 34
PLATO PRINCIPAL -----------------------------------------------------.
Lenguaje HTML <-------------------------------------'
1. Introduccion --.
<------------------'
1.1 HTML 2 y 3
El nivel de HTML que se podria considerar usado en la actualidad, es el
llamado HTML 3. Este curso se basa, ironicamente, en HTML 2.
Porque se basa en HTML 2: El nivel 2 del HTML es aceptado por practicamente
todos los navegadores o browsers que existen en la actualidad, incluyendo
aquellos que ya estan anticuados, tales como el NCSA Mosaic (que es muy buen
navegador, pero muy antiguo) y otros navegadores basados en el modo grafico
de DOS, que tuvieron muy poca difusion. Uno de ellos es el Web2Dos , que debe
estar en algun hueco de internet.
1.2 Vale la pena aprender HTML ?
El HTML escrito a mano casi no es utilizado para la realizacion de paginas
web, existiendo potentes editores WYSIWYG, como el Hotmetal Pro o el
Microsoft Frontpage, que facilitan mucho la realizacion de documentos HTML.
Si tu eres de esos que andan cambiando paginas web, introduciendose en
sistemas ajenos; entonces no vendra mal que aprendas algo de HTML, para poder
realizar el cambio lo mas rapido y discreto posible.
Aparte, el saber no ocupa lugar (dependiendo del tamanio de tu HD) :)
Este manual basico de HTML abarca los mas basico del HTML, sin nada de zonas
DIV, ni javascript, ni applets java.
2. Hipertexto --.
<----------------'
Para entender rapidamente el hipertexto, se podria decir que es un sistema
que vincula informacion mediante enlances.
Realmente, se deberia decir 'hipermedia' porque con la inclusion de
imagenes, video, sonido, javascript; el mundo de la web ha cambiado
totalmente.
2.1.1 Ejemplos de hipertexto : Libro
En un libro generalmente se accede por la primera pagina (home), siguiendo
la lectura en el orden de las paginas. Las bifurcaciones en la lectura son
introducidas por las notas al pie de pagina o por las aclaraciones del autor.
El documento no se basta por si mismo, posiblemente habra que consultar otras
obras para comprenderlo mejor o para ampliar los conocimientos.
2.1.2 Ejemplos de hipertexto : Documento tecnico
Tomemos por ejemplo el manual de un electrodomestico. Generalmente consta
de un indice de contenidos, y el lector solo accede a los conceptos que
desea leer, sin tener que pasar por los otros.
El acceso se realiza mediante el indice, la tabla de capitulos o el indice
analitico. De esta forma se 'navega' en el texto.
2.2 Nocion de hipertexto
En el ejemplo del documento tecnico se observa la aparicion de 'enlances'
hacia otras partes del texto, que no son contiguas. En un documento escrito,
los enlances se ejecutan mediante la busqueda del tema en el indice y la
busqueda de la pagina correspondiente.
En un docuemnto electronico, los enlances se ejecutan seleccionandolos
y el enlance nos llevara a la pagina de destino.
El hipertexto no se encuentra solamente en los documentos HTML, pero este es
el formato en el que mas se reconoce y el que mas evoluciona.
Con aplicaciones como Acrobat podemos realizar hipertexto en formato
NO HTML, sino que en el caso del Acrobat, el formato es .pdf.
Otro ejemplo de hipertexto es el caso de los archivos de ayuda de Windows.
La rapidez del desplazamiento en el hipertexto (un clic del mouse), la
facilidad de volver hacia atras, permiten una nueva concepcion del documento:
Paginas cortas, contenido esencial, atraccion hacia el lector; son los
ingredientes basicos para realizar un buen hipertexto.
2.2.1 Escribiendo hipertexto
Para escribir hipertexto, podemos contar con Notepad en un entorno Windows;
emacs o vi en un entorno *nix. Existe aplicaciones que permiten realizar un
verdadero WYSIWYG, como las ya nombradas Hotmetal Pro y Microsoft Frontpage.
Existen conversores que traducen un texto en formato .txt, .rtf, .doc, .wri
a documentos HTML.
[ es muy probable que te vuelvas loco al escribir html]
2.2.2 Multimedia en la WWW
La WWW permite la inclusion de video, imagenes, sonido, y millones de
posibilidades extras. Junto con estos elementos y la introduccion del
javascript, la WWW es un sinfin de posibilidades.
RESUMEN : El hipertexto se basa en enlances:
Un enlance puede ser cualquier elemento en pantalla que este disponible
con el mouse. Su objetivo puede ser cualquiera.
Tipos de enlance :
- Interno : Dentro del mismo documento y apunta a un marcador.
- Externo : A otro documento.
- Ejecutable : Se dirige a un programa o script que trata los datos
introducidos, como una respuesta interactiva.
3. HTML --.
<----------'
3.1 Que es HTML ?
HTML (Hyper Text Markup Language, Lenguaje de marcas de hipertexto) es un
lenguaje simple que se utiliza para crear documentos para acceder desde la
WWW. No es un lenguje de descripcion de pagina como PostScript, sino que
desde el HTML (junto con javascript) se pueden controlar practicamente todos
los aspectos de la pagina. HTML es una implementacion simple de SGML
(Standard Generalized Markup Language, Lenguaje generalizado estandar de
marcas).
3.2 Donde encontrar HTML ?
El marco de ejecucion de la WWW y del lenguaje HTML es un modelo cliente-
-servidor, a traves de una red informatica tal como lo es Internet.
Cliente : Es una pc con un programa de consulta (navegador o browser), que
se comunica con la red a traves de un protocolo llamado HTTP (HyperText
Transfer Protocol) que proporciona la informacion estructurada en codigo
HTML. El cliente es el que se encarga de la ejecucion de este codigo y
el que produce la visualizacion del docuemnto.
Ejemplos de cliente son Netscape Navigator y Mozilla.
Servidor : Es un programa que atiende las peticiones del cliente. Verifica
la validez del cliente y se asegura que la solicitud proviene de un cliente
autorizado a acceder al docuemento. Si estas condiciones se cumplen, el
servidor envia el documento al cliente. En caso de que la peticion del
cliente haya sido un enlance ejecutable, el servidor enviara el documento HTML
correspondiente o el archivo al que apunta el enlance. Aunque existen
servidores para maquinas Macintosh, estos casi no se utilizan. La preferencia
es la de servidores en maquinas RISC o PC con un SO Unix, y Windows NT en una
proporcion menor. La multitarea y multiproceso del servidor es lo que permite
un gran numero de consultas simultaneas.
Ejemplos de servidores son Apache o NCSA. En las maquinas Unix, el proceso
se denomina 'HTTPD' (HyperText Transfer Protocol Daemon).
[ un demonio, vamos! ]
3.3 El URL
La interconexion de los documentos se realiza mediante un medio llamado URL
(Uniform Resource Locator). El URL se compone de :
- El protocolo de intercambio entre el cliente y el servidor. Para acceder
a docuemto HTML normalmente se utiliza el protocolo HTTP, pero existen
otros protocolos, tales como FTP y otros menos utilizados.
- La direccion Internet del servidor. Esta direccion es unica en toda la
red. Es la direccion TCP/IP de la maquina. Tiene la forma de una serie de
numeros, tales como 134.158.69.110. Como el numero es dificil de memorizar,
se utiliza el metodo DNS que resuelve la relacion entre la direccion IP
del servidor y el nombre simbolico de la maquina.
[ para dns no estoy yo, ver ezine eko magazine n§1 ]
[ la 2 tiene info sobre como atacar estos servidores ]
- El arbol de directorios que conduce al documento
- El nombre del documento
Existen otras opciones como el puerto de conexion, la informacion de
autentificacion (user y pass), o los argumentos que se pasan a un
programa de tratamiento de datos.
La sintaxis habitual es:
protocolo://nombre_servidor[:puerto]/directorio/subdirectorio/nombre_documento
Ejemplos: http://www.set-ezine.org/archivo.php
ftp://ftp.microsoft.com/images/billysucks.jpg ;)
Si el servidor necesita autentificar el usuario, la sintaxis es:
protocolo://username;password@nombre_servidor[:puerto]/directorio/documento
Ejemplos:
http://billy;gates@www.microsoft.com/images/yousuck.jpg
http://john;smith@www.google.com:80/npi?query+billy+sucks+yes+sir
3.4 Donde se almacena el HTML ?
En el disco de la maquina que oficia de servidor, existe un directorio
destinado a almacenar los ficheros HTML y todos los demas ficheros
relacionados con la pagina web.
El directorio es (maquina unix): /usr/local/etc/htdocs
|______________|
^ ^ ^
Invisible al cliente web
3.5 Proteccion de los documentos
El acceso a los documentos y la proteccion de los mismos se puede reducir
mediante un sistema de proteccion desarrollado por el Web. No debe confundirse
con la proteccion de Unix, que permite la lectura y eventualmente la ejecucion
del fichero. En el sentido Web, el sistema nos permitira autorizar la lectura
de un documento.
- A los lectores registrados que cuenten con un username y password. No
se trata de tener una cuenta en la maquina servidor, sino de aquellos
que esten autorizados segun el demonio HTTPD.
- A los lectores que acceden desde un ambito particular (sentido TCP/IP)
- A los lectores que accedan desde una maquina particular. Las protecciones
aplicadas son muy similares a las del primer punto.
4. Escribiendo HTML --.
<----------------------'
4.1 Marcas
Como ya se ha dicho, el HTML describe la estructura de un documento para el
WWW. Esto se obtiene encerrando cada una de las distintas estructuras de
texto entre una serie de marcas, una al comienzo y otra al final. Las marcas
son invisibles en la presentacion del navegador.
En HTML, las marcas se delimitan de la siguiente manera:
texto normal <MARCA>texto afectado por la marca</MARCA>
Observa el caracter '/' en la marca de fin.
Si se quieren ussar los caracteres <> en un texto normal, estos se
reemplazan por : < = < > = >
Si escribimos : 'Los signos > y < delimitan las marcas'
en un navegador se vera de esta manera:
'Los signos < y > delimitan las marcas'
El texto en el interior de las marcas puede estar en mayusculas o
minusculas, produciendo el mismo efecto. <a> y <A> son iguales.
4.2 Acentuacion
Para transmitir los documentos HTML, estos se transmiten como archivos en
ASCII de 7 bits (caracteres 0/127, SET compatible). Los 7 bits de menor peso
son los que indican el caracter. El octavo bit se utiliza como control de
paridad para validar la exactitud de la transmision.
Como ya debes saber, estos caracteres no incluyen la enye(¤) y los
acentos( ). En el postre tienes una tabla de los caracteres acentuados y los
codigos que se deben utilizar para representarlos.
4.3 Estructura del HTML
Los docuemntos HTML aplican las siguientes marcas :
<HTML> : Indica el comienzo del codigo HTML
Ej: <HTML>
cuerpo del documento
</HTML>
<HEAD> : El titulo del documento se incluye aqui.
Ej: <HTML>
<HEAD>
Articulo de HTML
</HEAD>
cuerpo del documento
</HTML>
<TITLE> : Es el texto que saldra en zona de titulo del navegador
<BODY> : Aqui reside el resto del documento
<ADDRESS> : Es un bloque destinado a dar informacion sobre el autor del
documento. Los navegadores generalmente muestran este texto en cursiva.
<!--Comentarios> : Cualquie texto que comienze por <!-- y termine por -->
sera tomado como un comentario y no sera mostrado por el navegador.
Es equivalente a /* */ en C, // en C++ y ' en Basic.
4.4 Atributos de una marca
En el entrono HTML las marcas pueden tener diferentes atributos. Si el
atributo es numerico, se escribe tal cual. Si es alfanumerico, se escribe
entre "comillas".
<MARCA atributo_1=numerico atributo_2="alfanumerico">
Ej: <A HREF="home/etc/documento.html">
4.5 Esqueleto de un documento HTML
Con los pocos elementos que hemos definido, podemos hacernos una idea de
como se organiza un documento HTML. Puedes ver este trozo de texto con tu
browser favorito, para visualizar el comportamiento del lenguaje HTML.
<HTML>
<!-- Esqueleto HTML -->
<HEAD>
<TITLE> SET Ezine </TITLE>
<HEAD>
<BODY>
SET Ezine presenta : HTML o como volverse loco haciendo paginas web.
<ADDRESS>
elotro - elotro.ar@gmail.com
</ADDRESS>
</BODY>
</HTML>
4.6 Probando documentos HTML
Una vez realizado el codigo HTML, debes guardar el archivo con extension
HTML (.html)
Para probar los documento HTML, solamente tienes que abrirlos con tu browser
preferido. Cuando realizes cambios, selecciona la opcion de acutalizar o
reload, y podras ver el resultado de las modificaciones.
5. Divisiones --.
<----------------'
Generalmente, los textos informativos se dividen siguiendo una cierta
jerarquia, como la del indice de este texto (1.1, 1.2, 1.2.1). Para que esta
organizacion sea mas agradable y mas util para el lector, se puede aumentar
o disminuir el tamanio de los caracteres presentados en la pantalla.
5.1 <Hn>
Esta marca es la que define el tamanio de los caracteres, donde 'n' varia
de 1 a 6 (<h1> -> <h6>). Los caracteres mas grandes tienen el valor 1 y los
mas pequenios tienen el valor 6. Generalmente, el texto entre estas marcas
se trata en estilo negrita. La marca de principio y la marca de fin generan
automaticamente un retorno de carro (ascii 13+10)
[ o era ascii 10+13.., bah es un CRLF ] [ Carriage Return, line feed ]
5.2 <BR>
Cuando un browser ejecuta codigo HTML, ignora los saltos de linea que tiene
el fichero fuente. Para insertar saltos de linea, se debe utilizar la marca
<BR>. Esta marca tiene la particularidad de ser una marca vacia, o sea que
no necesita la inclusion de </BR>
5.3 <P>
La marca <P> provoca un salto al parrafo siguiente. Aunque se considera una
marca vacia, es perfectamente valido terminar un parrafo con </P>
5.4 <HR>
Esta marca produce una linea horizontal en la ventana del browser. Es un
recurso grafico muy atractivo.
[ parece un cuaderno a rayas en el monitor ]
5.5 <PRE>
Esta el nombre de esta marca proviene de preformated(preformateado). Respeta
la paginacion precisa de un texto o de una porcion. Presenta el texto con
una fuente monoespaciada como Courier.
Ej: <html>
<head><title>Tabla Preformateada</title></head>
<body>
<h2> Ejemplo de tabla en texto preformateado (<pre>)</h2>
<pre>
+---------+----------+-----------+----------+---------+
| Lunes | Martes | Miercoles | Jueves | Viernes |
+---------+----------+-----------+----------+---------+
| | | | | |
| | | | | |
| | | | | |
+---------+----------+-----------+----------+---------+
</pre>
</body>
</html>
El atributo width permite fijar en que numero de columna se fijara el texto
preformateado. Por ejemplo, <pre width=40> situara el cursor en la columna 40.
6. Listas --.
<------------'
En HTML se pueden definir dos tipos de listas : Descirptivas y regulares.
6.1 Lista Descriptiva
* Idea del objeto
Descripcion de objeto y bla bla bla bla
bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla
* Otro objeto
Mas descripcion y mas bla bla bla bla
bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla
6.1.1 <DL>
La marca <dl> abre una lista descriptiva. Define el inicio de la lista
y abre el espacio para incluir dos marcas mas : <dt> y <dd>
El atributo compact muestra en la misma linea el objeto y la descripcion.
<dl compact>.
Esta marca debe cerrarse con </dl>
6.1.2 <DT>
Nombra un objeto de la lista. Su contenido no debe sobrepasar una linea.
El estilo de la letra se puede ajustar a gusto del autor con todas las marcas
que se consideren necesarias.
6.1.3 <DD>
Corresponde a la definicion del objeto. El tamanio de esta zona no esta
limitado y cada linea se ubicara con una sangria en la izquierda.
Ejemplo de una lista descriptiva :
<html>
<head><title>Listas <dl></title></head>
<body>
<h2>Glosario(Ejemplo de lista de tipo definición(<dl>))</h2>
<dl compact>
<dt>ASCII<dd>American Standard Code for Information Interchange
<dt>SET<dd>Saqueadores Edicion Técnica
<dt>elotro<dd>Referente a un idiota de sudamerica
</dl>
</body>
</html>
6.2 Lista Regular
* Caballo 1. Chimpance
* Mula 2. Gorila
* Burro 3. Mono
* Menem 4. ViejaC
6.2.1 <LI>
Esta marca es vacia (no precisa </li>). Precede a cada uno de los objetos
de la lista. La sintaxis general de las listas regulares es :
<marca de apertura>
<li>Objeto
<li>...
<marca de cierre>
6.2.2 <UL>
Genera listas no numeradas. Cada uno de objetos va precedido por un simbolo
[se dice vinieta segun Billy G] segun el nivel de anidacion que tenga.
Ejemplo de lista regular:
<html>
<head><title>Listas regulares <ul></title></head>
<body>
<h2>Ejemplo de lista no ordenada (<ul>)</h2>
<ul>
<li>Ficheros HTML
<li>Ficheros de imagen
<li>Ficheros de sonido
<li>Ficheros de vídeo
<li>Ficheros de prueba
<li>Ficheros de ejemplo
<li>Ficheros basura, como este.
</ul>
</body>
</html>
6.2.3 Anidamiento de listas (no ordenadas)
Para generar listas no ordenadas anidadas, solamente hay que incluir otra
marca <ul> dentro de una zona <ul> que no haya sido cerrada con </ul>. Por
supuesto, esta marca tambien llevara su correspondiente marca de cierre </ul>
<html>
<head><title>Listas no ordenadas</title></head>
<body>
<h2>Ejemplo de lista no ordenada anidada (<ul>)</h2>
<ul>
<li>Ficheros HTML
<ul>
<li>Ejemplos
<ul>
<li>Listas
<li>Tablas
<li>Estilos
<ul>
<li>Cita
<li>Texto en enfasis
</ul>
</ul>
</ul>
<li>En curso (como este)
<li>Preescritos (como este)
</ul>
</body>
</html>
6.2.4 <OL>
Esta marca se usa para generar listas numeradas u ordenadas. Observa
el ejemplo :
<html>
<head><title>Listas regulares <ul></title></head>
<body>
<h2>Ejemplo de lista ordenada (<ol>)</h2>
<ol>
<li>Ficheros HTML
<li>Ficheros de imagen
<li>Ficheros de sonido
<li>Ficheros de vídeo
<li>Ficheros de prueba
<li>Ficheros de ejemplo
<li>Ficheros basura, como este.
</ol>
</body>
</html>
6.2.5 Anidamiento de listas (ordenadas)
<html>
<head><title>Listas ordenadas</title></head>
<body>
<h2>Ejemplo de lista ordenada anidada (<ol>)</h2>
<ol>
<li>Ficheros HTML
<ol>
<li>Ejemplos
<ol>
<li>Listas
<li>Tablas
<li>Estilos
<ol>
<li>Cita
<li>Texto en enfasis
</ol>
</ol>
</ol>
<li>En curso (como este)
<li>Preescritos (como este)
</ol>
</body>
</html>
6.3 Listas anidadas
Este es un buen ejemplo de la creacion de listas ordenadas y no ordenadas.
<html>
<head><title>Ejemplo de anidamiento de listas</title></head>
<body>
<h2>Lista anidada</h2>
<ul>
<li>Ficheros HTML
<ol>
<li>Ficheros de prueba
<ul>
<li>prueba1.html
<li>shit.html
<li>index.html
</ul>
<li>Ficheros del servidor
<li>Ficheros de ejemplos
</ol>
<li>Ficheros de sonido
<li>Otros ficheros
</ul>
</body>
</html>
7. Estilos --.
<-------------'
Se llama estilo al tipo de letra de los caracteres, al tamanio de la fuente,
al color del caracter y a todas las demas caracteristicas que se puedan
aplicar al caracter del documento HTML. [segun Billy G, esto se llama formato]
7.1 Estilo del caracter
Existen diversas marcas a la hora de elegir el estilo del caracter :
7.1.1 <B>
Produce un texto en negrita. Esta marca no es vacia, asi que se tiene que
finalizar el texto con </b>.
7.1.2 <I>
Produce un texto en cursiva. Tampoco es una marca vacia.
7.1.3 <U>
Produce un texto subrayado. Esta tampoco es vacia.
7.1.4 <TT>
Produce caracteres como los de una maquina de escribir (Courier), o sea,
con fuente monoespaciada.
Ejemplo de uso de los estilos :
<html>
<head><title>Estilos de texto</title></head>
<body>
El tratamiento de textos <b>WYSIWYG</b><i>(<b>W</b>hat <b>Y</b>ou <b>S</b>
ee <b>I</b>s <b>W</>hat <b>Y</b>ou <b>G</b>et)</i> es un tratamiento de
texto en lo vos ves <tt>es lo que obtenes.</tt>
</body>
</html>
7.2 Estilo logico y de parrafo
Estas marcas de estilo son mas faciles de usar y mas intuitivas para el
que escribe HTML. Como ya te debes haber dado cuenta, se llama estilo logico
porque las marcas 'describen' el texto en su interior.
7.2.1 <CITE>
Se usa para una 'cita' de una obra o una referencia a otro docuemento.
La mayoria de los navegadores presentan caracteres en cursiva para este texto.
<html>
<head><title>Estlo logico y de parrafo : <CITE></title></head>
<body>
Texto fuera de la marca <cite>Texto dentro de la marca</cite>
</body>
</html>
7.2.2 <CODE>
Casi siempre se usa para representar codigo fuente de algun programa. Se
usan caracteres monoespaciados, como fuente Courier.
<html>
<head><title>Estlo logico y de parrafo : <CODE></title></head>
<body>
Assembler al dope <br>
<code>
MOV AX,BX
INC BX
MOV BX,AX
DEC AX
NOP
NOP
INT 20H
</code>
</body>
</html>
7.2.3 <DFN>
Se usa para DeFiNir un texto. Segun el browser, se usan caracteres en
cursiva o en negrita cursiva.
<html>
<head><title>Estlo logico y de parrafo : <DFN></title></head>
<body>
SET EZINE <br>
<dfn>
Publicacion electronica de origen español, dedicada al 'under'
de la escena informatica.
</dfn>
</body>
</html>
7.2.4 <EM>
Resalta un texto. Normalmente se usan caracteres en cursiva.
<html>
<head><title>Estlo logico y de parrafo : <EM></title></head>
<body>
Texto al dope <br>
<em>
Texto resaltado
</em>
</body>
</html>
7.2.5 <KBD>
Ilustra un ejemplo de entrada de texto por teclado. Usa caracteres
monoespaciados. (KBD = KeyBoarD)
<html>
<head><title>Estlo logico y de parrafo : <KBD></title></head>
<body>
User : <kbd>elotro</kbd><br>
Pass : <kbd>********</kbd>
</body>
</html>
7.2.6 <SAMP>
Se usa para representar un ejemplo de un texto (ejemplo = SAMPle en ingles)
<html>
<head><title>Estlo logico y de parrafo : <SAMP></title></head>
<body>
Uso de <SAMP><br>
<samp>
Este es un ejemplo del uso de la marca <samp>
</samp>
</body>
</html>
7.2.7 <STRONG>
Para destacar fuertemente un texto. Generalmente se usan caracteres en
negrita.
<html>
<head><title>Estlo logico y de parrafo : <STRONG></title></head>
<body>
Texto sin destacar <br>
<strong>
Texto destacado
</strong>
</body>
</html>
7.2.8 <VAR>
Para representar una variable, por ejemplo de un codigo basic.
<html>
<head><title>Estlo logico y de parrafo : <VAR></title></head>
<body>
Variables enteras y de cadena :<br>
<var>
numero% = 1
DIM a$(1 to 10)
</var>
</body>
</html>
7.2.9 <BLOCKQUOTE>
Es una combinacion de las marcas <pre> y <address>. Simboliza una direccion
o una firma.
<html>
<head><title>Estlo logico y de parrafo : <BLOCKQUOTE></title></head>
<body>
Sr Lector :<br>
Le comunicamos que este documento es un ejemplo del uso del lenguaje
HTML, especificamente de la marca <BLOCKQUOTE>.<br>
Saluda atte.
<blockquote>
elotro - elotro.ar@gmail.com
</blockquote>
</body>
</html>
7.3 Extensiones
Dentro del lenguaje HTML 2, Netscape propone extensiones al lenguaje,
permitiendo ajustar el tamanio y el color de los caracteres.
[la mayoria de los navegadores actuales tambien permiten esto]
7.3.1 <FONT>
Esta marca es la que actua sobre los bloques de texto. Tiene 2 atributos :
7.3.2 Atributo Size
Permite regular la altura de los caracteres, mediante una escala de 1 a 7.
7.3.3 Atributo Color
Especifica el color de los caracteres mediante el modelo RGB :
Red Green Blue
Rojo Verde Azul Ej: Rojo = #FF0000
Blanco = #FFFFFF
<html>
<head><title>Extensiones de Netscape</title></head>
<body>
La mayoria de los navegadores actuales tambien interpretan estas marcas<br>
<font size=1>1<font size=2>2<font size=3>3<font size=4>4
<font size=5>5<font size=6>6<font size=7>7
<font size=2 color=#00FFFF>a
<font size=4 color=#FF0000>b
</body>
</html>
8. Enlances --.
<--------------'
Los capitulos de arriba se dedican a explicar la preparacion de un documento
HTML en lo que se refiere a la estructura y la presentacion del texto.
Este capitulo se dedica exclusivamente a los enlances hipertextuales de
los documentos HTML.
8.1 Marcadores o anclas
Para comenzar a entender el hipertexto, primero vamos a aclarar unos
conceptos: [ hay que estudiar un poco tambien :) ]
- Ancla de partida : Es la zona sobre la cual se hara clic para acceder al
enlance. Puede ser texto, imagenes.
- Ancla de llegada : Es la zona a la que apunta el ancla de partida. Puede
ser cualquier tipo de fichero.
8.1.1 <A>
Esta marca no se utilizara sola JAMAS.
8.1.2 HREF, enlance externo
Se trata de crear un enlace hacia otra pagina de la web, que puede estar en
un servidor distinto.
<A HREF="url de destino">zona_activable_con_atributos_visuales</A>
<A HREF="SET">http://www.set-ezine.org">SET Ezine</A>
8.1.3 HREF, enlance interno
El funcionamiento de esta marca es similar a la anterior, pero el destino
del hipervinculo es una etiqueta o marcador dentro del propio documento.
Sirve para navegar dentro de documentos extensos.
<A HREF="#etiqueta">zona_activable_con_atributos_visuales</A>
Tambien se puede combinar con la marca hacia un documento externo :
<A HREF="url_destino#etiqueta">zona_activable_con_atributos_visuales</A>
8.1.4 NAME, marcador de llegada
Se usa para definir un ancla de llegada que puede ser usado con la marca
anterior.
<A NAME="etiqueta">zona_NO_activable_SIN_atributos_visuales</A>
8.2 Recursos de un enlance
Un enlance puede apuntar hacia cualquier tipo de documento :
- Ficheros HTML
- Imagenes
- Sonido
- Texto
- Cualquier otro tipo soportado por el navegador mediante la descarga de
'plug-ins'
- Si el navegador no soporta el tipo de documento, preguntara si lo
deseamos descargar hacia nuestro PC.
8.3 Tipos de URL
Como ya debes saber, existen otros servicios disponibles en internet aparte
del HTTP :
8.3.1 FTP
Se usa para trasnmitir ficheros de manera anonima. [bah, 'anonima']
El URL FTP se indica con :
FTP://nombre_servidor/directorio/subdirectorio
Para los admin (RTFM) : Muchos servidores web traen activada una opcion por
defecto que muestra todo el contenido del directorio cuando la direccion
contiene una barra (/) al final.
FTP://nombre_servidor/directorio/subdirectorio/
Tambien se puede agregar el nombre de un fichero en la direccion
FTP://nombre_servidor/directorio/subdirectorio/nombrefichero
Algunos accesos FTP necesitan una cuenta de usuario. Se accede de la
siguiente manera :
FTP://cuenta:pass@nombre_servidor/directorio/subdirectorio/nombrefichero...
8.3.1 NEWS
Para acceder a un servidor de noticias
NEWS:nombreservidor_o_grupodenews
ej: news:alt.2600.new
8.3.1 TELNET
[Creo que no hace falta explicarlo.]
[Si crees que si hace falta, lee SET]
8.3.1 GOPHER
Para acceder a una sede gopher
gopher:nombre_sede
8.3.1 MAILTO
Para enviar correo electronico
mailto:nombredestinatario@servidor
9. Incluyendo imagenes --.
<-------------------------'
Es dificil inmaginar una pagina web que no contenga imagenes, animaciones,
o cualquier atributo visual que llame la atencion. Aqui nos ocuparemos de
las imagenes [tal como dice el titulo :)]
9.1 Imagenes
Existen diversos formatos que pueden ser soportados por los navegadores a
la hora de visualizar las paginas web :
- BMP - JPG - PCX
- XBM - GIF Estatico (84a) - TIFF
- RLE - GIF Animado (87a)
Los mas recomendables son el GIF, JPG y RLE; porque son imagenes vectoriales
que ocupan muy poco espacio. Ademas, el GIF y el JPG son practicamente los
estandares a la hora de incluir imagenes.
9.1.1 <IMG>
Es la marca que indica la inclusion de una imagen. Se utiliza con el
atributo SRC (SouRCe - origen), de la siguiente manera :
<IMG SRC=/directorio/subdirectorio/nombre_fichero_grafico>
Por ejemplo, si colocamos una marca como :
<IMG SRC=/imagenes/terroristas/bush.gif>
^
|___ Se refiere a la siguiente ubicacion :
|
(en una maquina unix) |
/ |
usr |
local |
etc |
htdocs |
imagenes |
terroristas |
bush.gif <---'
bin
...
El atributo SRC tambien permite especificar un URL, o sea que tambien se
pueden incluir imagenes de otro servidor, tal como :
<IMG SRC="http://www.microsoft/images/nudes/billyisbeingfucked.gif
9.1.2 Alineando imagenes
La marca IMG cuenta con otro atributo : ALIGN, que puede tener valores de :
o ALIGN=TOP coloca la imagen en la parte inferior de la linea actual
(tiene el valor TOP porque se refiere al borde superior de
la imagen, no de la linea, de modo que la parte de arriba
de la imagen queda sobre la linea. Pasa igual con bottom)
o ALIGN=MIDDLE la coloca a la mitad de la linea actual
o ALIGN=BOTTOM la coloca en la parte superior de la linea
9.2 Imagenes en navegadores no graficos
Hay algunos navegadores que no trabajan en modo grafico, como Lynx, que
no pueden mostrar las imagenes. Para que el documento no pierda el sentido
y no despiste al lector, se utiliza un atributo que sustituye a la imagen
por un texto en este tipo de navegadores.
<IMG SRC="georgeb.gif" ALT="Terrorista estadounidense">
9.3 Imagenes externas
Se puede ver imagenes mediante el uso de hipervinculos, de la siguiente
manera:
Puede <a href="billyg.gif">hacer clic aqui</a> para ver una foto de un
hombre inteligente y (honesto?) cuando joven, que se volvio ladron cuando
crecio.
9.4 Imagenes como hipervinculos
Se puede reemplazar el texto de un hipervinculo con una imagen:
<a href="billyg.gif"> <img src="microsoft.gif> </a>
10. Fondo de la pagina, atributos extras al texto --.
<---------------------------------------------------'
Las siguientes caracteristicas de los documentos HTML son del HTML 3, pero
me parecio correcto incluirlas porque practicamente todos los navegadores las
soportan.
Hay ciertos atributos de la marca BODY que cambian el color de la ventana
del browser, del los caracteres y de los enlances.
La utilizacion de los atributos no cambia la estructura del documento HTML.
<html>
<head>
<title>Pagina de prueba</title>
</head>
<body atributo1 atributo 2 ...>
documento
...
...
...
</body>
</html>
10.1 Fondo
10.1.1 BGCOLOR
Esta marca especifica un color para el fondo de pagina. Usa el modelo RGB
Por ejemplo :
<body bgcolor="#ffffff"> Coloca fondo blanco
<body bgcolor="#ff0000"> Coloca fondo rojo
10.2.2 BACKGROUND
Coloca una imagen de fondo de pagina, por lo tanto la carga de la pagina
resulta mas lenta.
<body background="fichero_grafico">
<body background="nobush_globalpolice.gif">
10.2 Color del texto
10.2.1 TEXT
Controla el color de todo el texto estandar del documento.
<body text="#rrggbb"> Modelo RGB
<body text="#0000FF"> Texto azul
10.2.2 LINK, VLINK, ALINK
Controlan el color de los enlances del documento.
o LINK es color de los enlances no visitados (azul x default)
o ALINK es el color muy fugaz que aparece cuando se hace clic sobre un
enlance (rojo x default). En estos dias casi no se aprecia debido a la
velocidad de las conexiones.
[claro que no todos tenemos una T1 en casa. Yo ni tengo modem]
o VLINK es el color del enlance que ha sido visitado (violeta x default)
<body link="#ff0000" alink="#0000ff" vlink="#00gg00">
Este ejemplo presenta enlances rojos, que cambian a azul cuando se clickean
y aparecen en verde cuando han sido visitados.
11. Tablas --.
<------------'
HTML 3 permite realizar tablas con regulacion de la alineacion, el tamanio
y el espaciado de la celda.
[si, ya se que esto es de html 2 pero me parecio bien ponerlo aca ]
11.1 <TABLE>
La marca <TABLE> se usa para la apertura de una tabla. El fin de la misma se
indica con </TABLE>. Se pueden usar los atributos BORDER, CELLPADDING,
CELLSPACING . El atributo WIDTH fuerza a la tabla a ocupar un cirto porcentaje
de la ventana del browser.
o Border indica el tamanio del borde
o Cellpadding indica el tamanio de la celda
o Cellspacing indica el tamanio de la separacion de la celda
Ej:
<table border=6 cellspacing=6 cellpadding=10>
11.2 <TR>
Inicia una fila en la tabla. Debe terminar con </tr>
Tiene 2 atributos : ALIGN para la alineacion horizontal y VALIGN para la
vertical. Los valores de estos atributos pueden ser :
- TOP (superior) - MIDDLE (centro vertical)
- BOTTOM (inferior) - CENTER (centro hor.)
- RIGHT (derecha) - LEFT (izquierda)
ej : <tr valing=center align=left><td>1<td>100<td>1000</tr>
11.3 <TD>
Inicia una celda. Tiene los atribuos ALIGN y VALIGN.
11.4 <TH>
Es identica a <td> pero el texto de las celdas se coloca como texto de
cabecera. Tiene los mismos atributos que <td>
11.5 <CAPTION>
Coloca un titulo encima (align=top) o debajo de la tabla (align=bottom)
Ejemplo de tabla :
<html>
<head><title>Ejemplo de tabla</title></head>
<body>
<table border=3 cellspacing=2 cellpadding=10>
<caption align="bottom">
Tabla simple
</caption>
<tr aling="center">
<td><a href="SET">http://www.set-ezine.org">SET Ezine</a></td>
<!-- ****************************** -->
<!-- COLOCA UNA IMAGEN AQUI DEBAJO -->
<!-- ****************************** -->
<td><img src="IMG_AQUI.GIF"></td>
<td>Cambia el nombre de la imagen por la que quieras</td>
</tr>
<tr>
<td>
<ul>
<li>Uno
<li>Dos
<li>Tres
</ul>
</td>
<td>Puedes colocar cualquier elemento dentro de una tabla</td>
<td>HTML</td>
</tr>
<tr>
<td aling="center" valing="middle">
Introduce tu nombre :
</td>
<td aling=left>
<form method="post" action="nada">
<input name="nombre">
</td>
<td align="center">
<input type="submit" value="Clic Me Pringao!">
</form>
</td>
</tr>
</table>
</body>
</html>
12. Paneles o marcos --.
<----------------------'
12.1 Introduccion
Cuenta la historia, que alla por el anyo 1996, Netscape propuso nuevos
mandatos HTML que eran soportados por su nuevo navegador, el Netscape
Navigator [Notescapes Navegando :) ], en su version 2.0 (creo).
La idea era simple, pero muy novedosa y util : en vez de usar la ventana del
browser para mostrar un documento, poruqe no mostrar 2, o 3, o mas aun.
Como se haria esto ? Muy simple, dividir la ventana del navegador en la
cantidad de secciones deseadas, y colocar alli el documento que se deseara.
Cada una de las secciones recibe el nombre de panel (marco segun billy g)
12.2 Creacion de paneles
En realidad, Netscape solo agrego tres marcas al lenguaje HTML para aportar
esta funcionalidad. Sin embargo, la estructura de un documento dividido en
varios paneles difiere de la de un documento clasico. En un documento clasico,
el cuerpo esta entre las marcas <body> y </body>. En el caso de los paneles,
el cuerpo se inserta entre las marcas <frameset>..</frameset> y ademas solo
puede componerse de las tres nuevas marcas <frameset>, <frame> y <noframes>.
Documento clasico Documento de definicion de paneles
""""""""""""""""" """"""""""""""""""""""""""""""""""
<html> <html>
<head> <head>
.. ..
</head> </head>
<body> <frameset ...>
.. <frameset>
</body> ..
</html> </frameset>
..
<frameset>
<frame ..>
...
</frameset>
</frame>
</frameset>
</html>
12.2.1 <FRAMESET>
Es la marca que permite dividir una zona en subzonas, verticales u
horizontales. Si no hay ninguna zona definida aun, las dimensiones se aplican
a toda el area del browser. La marca tiene 2 atributos :
Rows : Para dividir la zona en otras horizontales
ROWS="altura_zona1,altura_zona2,altura_zona..."
Los valores de la lista deben ser numeros enteros, con el siguiente
formato :
n : indica la altura en pixeles
n% : indica la altura segun el porcentaje de la zona madre
n* : n es opcional aqui. El asterisco indica que se debe ocupar
todo el espacio aun disponible
Cols : Usa la misma metodologia de rows, pero crea zonas verticales
Por ejemplo, para crear 3 zonas horizontales, 2 de igual tamanio y otra mas
grande podriamos hacer lo siguiente :
<frameset rows="25%,25%,50%"> o <frameset rows="*,*,2*">
12.2.1 <FRAME>
Se utiliza para caracterizar las subzonas definidas mediante <frameset>
Se utilizan seis atributos
SRC="url" : Indica la url a mostrar en la zona
NAME="nombre" : Indica el nombre de la zona, a fin de que puede ser accedida
desde un enlace. Los nombres predefinidos (_blank, _top,
_parent, _self) no pueden ser usados ni tampoco cualquiera
que comienze con un guion bajo (_)
MARGINWIDTH="n" : Indica el numero de pixeles de los margenes derecho e
izquierdo de la zona.
MARGINHEIGHT="n" : Indica el numero de pixeles de los margenes superior e
inferior de la zona.
SCROLLING="yes/no/auto" : Indica si la zona debe tener barra de
desplazamiento
NORESIZE no tiene un valor. Indica si el tamanio de la zona puede ser
ajustado desde el navegador.
12.2.1 <NOFRAMES>
Es una marca que se usa para presentar los documentos en los navegadores
que no soporten paneles. Este texto es ignorado por los que si los soportan.
El funcionamiento es simple : un browser solo tiene en cuenta las marcas que
conoce. Uno que no maneje paneles ignorara lo comprendido entre <frameset> y
</frameset> y tambien las marcas <noframes> y </noframes>.
Por lo tanto, si se retira todo este texto, solo queda lo comprendido entre
<noframes> y </noframes>
12.3 Utilizacion de paneles
Ahora aprenderemos a crear documentos con paneles y como acceder a ellos
mediante enlances.
12.3 Target
Ademas de las tres marcas que describi mas arriba, tambien se creo un
nuevo atributo, que afecta a las maras que caracterizan a los enlances.
El atributo es TARGET, que precisa el nombre de la zona que debe recibir
el documento correspondiente al enlance.
Por ejemplo :
<a href="/users.html" target="zonausuarios">Ver los usuarios</a>
Target indica que se debe mostrar el documento 'users.html' en el panel
cuyo nombre es 'zonausuarios'. Es decir un panel definido con
<frame name="zonausuarios">.
Si target apunta a un nombre de panel que no existe, se crea una
nueva ventana.
El atributo TARGET posee unos valores predefinidos :
* _blank, que crea una nueva ventana
* _self, que carga el documento en la misma zona del enlance. Si no se
indica el atributo target, _self se toma como valor predeterminado
* _top, que indica que se eliminen todos los paneles de modo que el
documento ocupe toda la ventana del browser
* _parent, indica que el documento ocupe toda la superficie de la zona
en la que se ha visualizado el documento que contiene el enlance.
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
Hasta aqui llega esta entrega, espero que les haya gustado.
Nos veremos en otra apasionante entrega, a la misma hora y
por el mismo canal.
Buena suerte,
elotro
elotro.ar@gmail.com
- - - - - - - - - - - - - - - - - - - - - - - - - - - - -
| No hay que pelear hasta morir. Hay que pelear hasta vencer |
- - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Ernesto Che Guevara
*EOF*
