Lo unico que no le pude hacer es ponerle el archivo de texto... porq aki no salen las tablas... pero espero que les sirva de algo.
hasta la próxima.
INTRODUCCIÓN
Antes de empezar, cabe fijar algunos conceptos básicos que te ayudarán a entender mejor el entorno por el que nos vamos a mover. Lo primero, es entender que HTML (HyperText Markup Language) no es un lenguaje de programación propiamente dicho, sino podríamos llamarlo más bien un sistema de "marcado", lo que hace de HTML un lenguaje sencillo y fácil de aprender aun sin la más mínima experiencia.
En el mercado existen muchísimos editores de HTML, a los que podemos clasificar en dos tipos:
Editores textuales
Se trata de programas con los que se trabaja directamente con el código HTML puro; para facilitar la tarea disponen de comandos preestablecidos que generarán directamente parte del código deseado.
Editores WYSIWIG (What You See Is What You Get)
Traducido, "lo que ves en tu pantalla es lo que ves en tu navegador"; suelen ofrecer la opción de poder trabajar también con el código puro, pero su fuerza está en permitir visualizar y trabajar directamente con los objetos a insertar en una página (imágenes, texto, etc.). El problema con estos editores, por muy buenos que sean, es que suelen generar mucho código "inutil", a veces optimizandolo para un navegador u otro: sin unos conocimientos básicos de HTML te resultará dificil captar estas diferencias y poder mejorar así el diseño de tu página.
Para lo que vamos a ver en este curso, es mejor utilizar un editor textual: el mismo bloc de notas de Windows será suficiente. No te olvides guardar los archivos con extensión .htm o .html.
Algunos consejos a tener en cuenta:
los sitios web vienen creados en local, es decir en tu mismo ordenador; sólo a continuación vienen publicados en un servidor (un ordenador muy potente conectado las 24 horas), a través de un protocolo llamado FTP (File Transfer Protocol); te aconsejamos mantener la misma estructura de carpetas en tu ordenador y en el servidor.
ten mucho cuidado con los nombres de tus archivos, especialmente con mayúsculas y minúsculas: en tu ordenador el fichero "HoLa.hTm" es igual que "hola.htm", pero en el servidor serán dos cosas muy distintas y tendrás problemas con tus enlaces. Es recomendable utilizar siempre carácteres en minúsculo para los nombres y las extensiones.
Cuando navegas, es buena costumbre ir mirando el código de las páginas que tengan alguna particularidad que te interese. Para hacerlo, si usas Internet Explorer elige desde el menú "Ver > Código fuente"; si eres usuario de Netscape: "View > Page Source".
Lo fundamental es entender que HTML utiliza "etiquetas" para posicionar y formatear los elementos y proporcianar más información sobre las páginas:
vamos a ver enseguida un ejemplo práctico:
texto normal
texto en negrita
Para formatear la primera frase no utilizamos ninguna etiqueta particular, y aparece igual que las demás líneas.
Para conseguir el efecto negrita, utilizamos la etiqueta <b></b> a través del siguiente código:
<b>texto en negrita</b>
Como puedes ver, las etiquetas se abren al principio del texto a formatear, y se cierran al final. No será necesario cerrar todas las etiquetas que se abran, ya que algunas no sirven para marcar elementos sino para proporcionar otro tipo de información. A medida que vayamos introduciendo nuevas etiquetas, veremos cuales habrá que cerrar y cuales no habrá necesidad.
Las etiquetas no ponen ningún tipo de problema con mayúsculas y minúsculas.
ENCABEZADO Y CUERPO
La primera etiqueta a insertar es <html>, a la que habrá que cerrar al final de la página con </html>: su función es avisar al navegador que está abriendo una página formateada con dicho lenguaje, ya que éste no es el único empleable (existe también el XML por ejemplo).
Hay que distinguir dos partes claves del documento: el encabezado y el cuerpo. El cuerpo es lo que lleva todo el contenido visualizable de la página, mientras que el encabezado sirve para proporcionar otro tipo de información: título y descripción de la página, palabras claves para los motores de búsqueda etc. Vamos a ver más detenidamente la función desarrollada por el encabezado:
El encabezado está delimitado por las etiquetas <head> y </head>: entre ellas, irán las demás etiquetas:
<title></title>: muy sencillamente dará un título a tu página; además de aparecer en la barra superior del navegador, añadiendola entre tus favoritos será el nombre asignado por defecto.
<meta>: esta etiqueta no se cierra, y se compone de más atributos: "name" indica el tipo de atributo, seguido por "content" que determina su contenido; vamos a ver un ejemplo:
<html>
<head>
<title>Título de tu página</title>
<meta name="author" content="tu nombre: no será visualizado en tu página, pero sí lo verán quienes echen un vistazo al código">
<meta name="keywords" content="aquí puedes insertar todas las palabras claves de tu sitio separadas por comas, servirán a los motores de búsqueda">
<meta name="description" content="algunos motores de búsqueda utilizarán lo que escribas aquí para ofrecer una descripción de tu página">
</head>
<body>
Esto es el cuerpo, lo que escribas aquí será visualizado en el navegador.
</body>
</html>
Como puedes ver, dentro de la etiqueta <body></body> va todo el contenido de la página. Además, en esta etiqueta se pueden colocar atributos para definir algunas propiedades de la página:
BGCOLOR: determina el color de fondo de la página;
BACKGROUND: con una función similar a BGCOLOR, especifica una imagen como fondo;
TEXT: define el color del texto;
LINK: define el color de los enlaces;
ALINK: define el color de los enlaces actualmente activos;
VLINK: define el color de los enlaces visitados.
Los colores pueden definirse a través de su nombre en inglés o de su código hexadecimal (opción recomendada).
Ejemplos:
<body bgcolor="black" text="white" link="red" alink="yellow" vlink="green">
<body background="fondo.gif" text="#ffffff" link="#ff0000" alink="#ffff00" vlink="#00ff00">
FORMATO
Lo primero que vamos a ver ahora es cómo añadir un comentario a nuestro código: es una buena costumbre que te permitirá identificar mejor y más rápido algunas partes de código.
<!-- aquí empieza el comentario...
...y aquí termina -->
Para darle formato al texto, la etiqueta utilizada principalmente es <font>, acompañada por algunos de los siguientes atributos:
COLOR: define el color;
SIZE: define el tamaño, admitiendo valores del 1 al 7;
FACE: define el tipo de fuente.
ejemplos:
<font size="2" color="#ff0000" face="Verdana">EJEMPLO 1</font>
<font size="4" color="#0000ff" face="Arial">EJEMPLO 2</font>
El W3C, el consorcio oficial que se ocupa de armonizar el lenguaje HTML, desaconseja el utilizo de <font>, a reemplazar por hojas de estilo (archivos de extensión .css donde se definen todas las carácteristicas de una página); pero en la realidad se sigue utilizando mucho esta etiqueta, debido a los diferentes modos de interpretar las hojas de estilo por parte de los navegadores (Netscape todavía no consigue visualizar correctamente todos los estilos)
Hay otra etiquetas que se emplean para formatear texto:
<b>Negrita</b>
<i>Cursiva</i>
<u>Subrayado</u>
<strike>Tachado</strike>
HTML pone a tu disposición también sei cabeceras de distinto tamaño, a utilizar para marcar títulos o resaltar partes de texto:
<h1>
Cabecera 1
</h1>
<h2>
Cabecera 2
</h2>
...
<h6>
Cabecera 6
</h6>
ALINEACIÓN DEL TEXTO
Para alinear un texto (u otros objetos), se utiliza la etiqueta <div> junto al atributo "align":
<div align="left">Alineación a la izquierda</div>
<div align="center">Alineación al centro</div>
<div align="right">Alineación a la derecha</div>
Efecto similar se puede conseguir con <p>, que creará un párrafo:
<p align="left">Párrafo alineado a la izquierda</p>
<p align="center">Párrafo alineado al centro</p>
<p align="right">Párrafo alineado a la derecha</p>
Para interrumpir una línea y seguir en la de abajo, se utiliza <br> (esta etiqueta no se cierra):
línea 1<br>línea 2 dará como resultado:
línea 1
línea 2
IMÁGENES
Antes de ver como añadir imágenes a nuestras páginas, cabe precisar lo siguiente: diferiendo de la mayoría de los procesadores de texto, las imágenes en HTML no vienen "fundidas" en los documentos como si de la misma cosa se tratara; simplemente vienen "llamadas" a través de su ruta, dejando bien clara la diferencia entre un documento HTML y la imagen misma (lo mismo ocurre con sonidos, applet Java etc).
La etiqueta <img> no necesita de cierre:
<img src="tuimagen.gif">
donde "src" deriva del inglés "search" e indica la ruta para llegar a la imagen (en este caso "tuimagen.gif" debería encontrarse en el mismo directorio de la página HTML que contiene el código)
Los formatos más empleados en el web son el .gif (Graphics Interchange Format) y el .jpg (o .jpeg, Joint Photographics Experts Group)
La etiqueta <img> tiene muchos atributos útiles:
ALT: permite insertar un comentario para tu imagen: siempre es recomendable hacerlo, ya que algunos navegadores podrían estar configurados para no mostrar imágenenes y además te evitará tener que poner comentarios al lado (el texto indicado con este atributo aparecerá posicionando el ratón por encima de la imagen)
WIDTH (ancho) y HEIGHT (alto): especifican las dimensiones de la imagen en píxeles, permitiendo cambiarlas. Es muy aconsejable su uso ya que a veces una imagen puede tardar bastante en cargarse, y así el navegador sabrá enseguida cuanto espacio ocuparán en la página y podrá disponer el resto de los elementos en su posición correcta desde el principo.
BORDER: permite indicar el espesor de un marco para la imagen. Si omitido, el valor predeterminado será 0 (o sea ningún marco) y 1 si la imagen sirve de enlace.
HSPACE y VSPACE: definen (en píxeles) la distancia horizontal y vertical respectivamente, de los elementos más cercanos (texto, otras imágenes, applet etc)
ALIGN: define la posición respecto al texto que se encuentre inmediatamente antes o después la imagen. Existen varias opciones para este atributo:
align="top" alinea la primera línea de texto a la parte superior de la imagen;
align="middle" alinea la primera línea de texto al centro de la imagen;
align="bottom" alinea la primera línea de texto a la parte inferior de la imagen;
align="left" alinea la imagen a la izquierda;
align="right" alinea la imagen a la derecha.
ENLACES
Por banal que pueda parecer, los enlaces constituyen la verdadera fuerza del Web. Un hipertexto es un modo de formatear un texto de forma no secuencial, es decir, un texto que no necesita ser leído desde el principio hasta el final siguiendo un orden predeterminado: el WWW está formado por millones y millones de hipertextos, y el elemento que permite enlazarlos es <a>
Su atributo más importante es HREF (Hipertext REFerence) que indica la ruta del documento a enlazar; pinchando en el texto incluído entre <a> y </a> se llegará al enlace especificado. También es posible sustituir el texto con una imagen (a través de la etiqueta <img> que vimos anteriormente). El atributo "href" puede contener enlaces a documentos externos o bien alojados en el mismo sitio: la diferencia está en que en el primer caso habrá que especificar la dirección completa y en el segundo una "relativa":
<a href="index.php">Índice</a>
este es un ejemplo de enlace relativo, que te enviará al índice de este curso situado en el mismo directorio de esta página.
Otros atributos:
TARGET: especifica la ventana en la que abrir el documento. Para mayor detalles, consulta el capítulo referente a los frames
TITLE: como el atributo "alt" de la etiqueta <img>, permite definir un comentario que aparecerá posicionando el ratón sobre el enlace
<a href="http://www.memir.webcindario.com " title="enlace" target="_blank"> (URL) </a>
También es posible crear un enlace a una dirección email: pinchando en él, se abrirá automaticamente un nuevo mensaje de correo cuyo destinatario será el especificado en el código:
<a href="mailto:tuemail@tudominio">Escribe a (URC) </a>
Hasta ahora hemos visto como enlazar documentos externos o del mismo sitio: también se pueden crear enlaces a diferentes partes del mismo documento. Para ello, primero tendrás que definir los enlaces internos del documento, o sea esos puntos a los que quieres llegar con el enlace. Posiciónate en el punto deseado e inserta el siguiente código:
<a name="ancla">
luego, define el enlace de esta manera:
<a href="#ancla">enlace</a>
Obviamente puedes usar el texto que quieras en lugar de "ancla".
Si quisieramos llegar a ese mismo punto desde otro documento, utilizaríamos la siguiente sintaxis:
<a href="tupagina.htm#ancla">enlace</a>
LISTAS
Las listas resultan muy cómodas a la hora de organizar el contenido de tus páginas; HTML pone a tu disposición distintos tipos según tus necesidades:
LISTAS ORDENADAS (NUMERADAS)
Constituidas por una etiqueta de apertura y de cierre <ol></ol> y tantas etiquetas <li> cuantos sean los elementos de la lista:
Código Resultados
<ol>
<li> Uno
<li> Dos
<li> Tres
</ol> 1. Uno
2. Dos
3. Tres
HTML ha creado una lista numerada empezando por el número 1; para cambiar el tipo de numeración, sólo tienes que especificarlo en la etiqueta <ol>:
Con números romanos mayúsculos:
Código Resultados
<ol type="I">
<li> Uno
<li> Dos
<li> Tres
</ol> I. Uno
II. Dos
III. Tres
Con números romanos minúsculos:
Código Resultados
<ol type="i">
<li> Uno
<li> Dos
<li> Tres
</ol> i. Uno
ii. Dos
iii. Tres
Con letras del alfabeto mayúsculas:
Código Resultados
<ol type="A">
<li> Uno
<li> Dos
<li> Tres
</ol> A. Uno
B. Dos
C. Tres
Con letras del alfabeto minúsculas:
Código Resultados
<ol type="a">
<li> Uno
<li> Dos
<li> Tres
</ol> a. Uno
b. Dos
c. Tres
LISTAS NO ORDENADAS
Parecidas a las que vimos anteriormente, las listas no ordenadas difieren en no crear una secuencia progresiva de números o letras, sino que utilizan símbolos para marcar cada elemento y la etiqueta <ul></ul>:
Listas con circulillos:
Código Resultados
<ul type="disc">
<li> Uno
<li> Dos
<li> Tres
</ul> • Uno
• Dos
• Tres
Listas con circulitos vacíos:
Código Resultados
<ul type="circle">
<li> Uno
<li> Dos
<li> Tres
</ul> o Uno
o Dos
o Tres
Listas con cuadraditos:
Código Resultados
<ul type="square">
<li> Uno
<li> dos
<li> tres
</ul>  Uno
 dos
 tres
TABLAS
Las tablas constituyen otro elemento muy importante a la hora de darle formato a una página; también se vuelven muy útiles para adaptar las páginas a las distintas resoluciones de pantalla (800 x 600 y 1024 x 768 siendo las más comunes, es recomendable adaptar el tamaño de página al primer formato). El ya nombrado W3C, el consorcio constituido para armonizar el lenguaje HTML, desaconseja su utilizo a tal fin, pero todavía faltan alternativas válidas que sean suportadas por la mayoría de los navegadores.
La etiqueta utilizada para definir una tabla es <table></table> y el primer atributo que vamos a ver es "width", que nos permite definir el ancho expresádolo tanto en píxeles como en porcentaje (también es posible definir el alto a través de "height"): un ancho de 50% dará como resultado una tabla de aproximadamente 320 píxeles para quienes tengan un resolución de pantalla de 640 x 480, mientras que los que la tengan de 1024 x 768 la verán de 512.
Vamos a ver ahora como definir campos dentro de una tabla:
Código
<table border="1" width="120" height="100">
<tr>
<td>Celda 1</td>
<td>Celda 2</td>
</tr>
<tr>
<td>Celda 3</td>
<td>Celda 4</td>
</tr>
</table>
Resultado
Celda 1 Celda 2
Celda 3 Celda 4
Como podemos apreciar, la etiqueta <td></td> es la que inserta celdas en nuetra tabla. La celdas pueden contener toda clase de elementos como texto, imágenes, applet etc. La función de <tr></tr> es la de insertar un salto de línea.
Otros atributos de la etiqueta <table>:
align: define la posición de la tabla respecto al resto de la página (aceptando los valores "left", "center" y "right");
cellspacing: define la distancia en píxeles entre las celdas;
cellpadding: define la distancia en píxeles entre el texto y el borde de la celda;
border: define el espesor de los bordes de una tabla;
bgcolor: define el color de fondo de una tabla;
background: define una imagen como fondo.
La etiqueta <td> también admite atributos:
align: define la posición horizontal del contenido de una celda ("left" "center" y "right");
valign: define la posición de vertical de una celda ("top", "middle" y "bottom");
bgcolor: define el color de fondo de una celda;
background: define una imagen como fondo.
Más ejemplos:
Código
<table border="1" width="300" height="150">
<tr>
<td align="left">Alineación a la izquierda</td>
<td align="center">Alineación al centro</td>
<td align="right">Alineación a la derecha</td>
</tr>
<tr>
<td valign="top">Alineación en la parte superior</td>
<td valign="middle">Alineación en la parte central</td>
<td valign="bottom">Alineación en la parte inferior</td>
</tr>
</table>
Resultados
Alineación a la izquierda Alineación al centro Alineación a la derecha
Alineación en la parte superior Alineación en la parte central Alineación en la parte inferior
Código
<table border="1" width="300">
<td bgcolor="#99CC00">Con color de fondo</td>
<td background="_icono/puce.gif"> Con imagen de fondo</td>
</table>
Resultados
Con color de fondo Con imagen de fondo
FRAMES
Los frames constituyen otro elemento muy útil para organizar el contenido de un sitio web: su función es la de dividir la pantalla del navegador en distintas subventanas independientes y contenentes en su interior una página html: en otras palabras, nuestro navegador cargará una primera página donde serán indicados la cantidad y la posición de los marcos, y por cadauno de ellos la ruta relativa a la página html a abrirse. La página que llevará especificados los distintos frames, no necesitará de la etiqueta <body></body> ya que en realidad no será visualizada directamente.
A continuación veremos algunos ejemplos para tenerlo más claro, pero antes vamos a pasar lista de las etiquetas y sus atributos:
<frameset></frameset> define la cantidad de marcos:
rows: define, en píxeles o en porcentaje, el alto de las filas a incorporarse en el documento;
cols: define, en píxeles o en porcentaje, el ancho de las columnas a incorporarse en el documento;
border: especifica el espesor del borde de separación de los distintos frames (puesto igual a 0 da como resultado la ausencia de bordes).
<frame> define cadauno de los marcos, y no necesita etiqueta de cierre:
name: asigna un nombre a la ventana;
src: define la ruta del documento a cargarse en el marco;
scrolling: definen la presencia o menos de las barras de desplazamiento ("yes", "no" o "auto");
marginwidth: define el ancho del margen para el marco;
marginheight: define el alto del margen para el marco;
noresize: impide que el marco sea redimensionado por el visitante.
<noframes></noframes>: aquí es posible insertar contenidos para los navegadores que no soportan el utilizo de frames (como aquellos para no videntes)
Para crear un enlace dirigido a una ventana o marco particular, se utiliza la etiqueta <a> acompañada por el atributo target:
target="nombre": carga el enlace en la ventana cuyo nombre se indica;
target="_blank": abre el enlace en una ventana nueva del navegador (recomendado para enlaces externos a tu página);
target="_self": carga el enlace en la subventana activa;
target="_parent": el enlace es cargado en el "frameset" definido anteriormente al actual;
target="_top": suprime todas las subventanas y carga el enlace a pantalla completa.
Ejemplo
Código Resultados
<frameset rows="30%,*">
<frame name="SUP" src="sup.html">
<frame name="CEN" src="cen.html"> </frameset> SUP
CEN
La presencia del asterisco (*) después de "30%" indica al navegador que cargue el siguiente frame en el espacio que sobre.
En este caso, si quisieras utilizar el frame superior para desplegar un menu de navegación que cargue los distintos contenidos en el frame central, los enlaces de la página "sup.html" tendrían que llevar el sigiente código:
<a href="pagina.html" target="CEN">enlace</a>
Más ejemplos
Código Resultados
<frameset cols="30%,*">
<frame name="IZQ" src="izq.html">
<frame name="CEN" src="cen.html">
</frameset> IZQ CEN
<frameset rows="20%,60%,20%">
<frame name="SUP" src="sup.html">
<frame name="CEN" src="cen.htm">
<frame name="INF" src="inf.html">
</frameset> SUP
CEN
INF
<frameset rows="30%,*">
<frame name="SUP" src="sup.html">
<frameset cols="30%,*">
<frame name="IZQ" src="izq.html">
<frame name="CEN" src="cen.html">
</frameset>
</frameset> SUP
IZQ CEN
<frameset cols="30%,*">
<frame name="IZQ" src="izq.html">
<frameset rows="30%,*">
<frame name="SUP" src="sup.html">
<frame name="CEN" src="cen.html">
</frameset>
</frameset> IZQ SUP
CEN
<frameset cols="75%,25%">
<frameset rows="20%,80%">
<frame name="SUP" src="sup.html">
<frame name="CEN" src="cen.html">
</frameset> <frameset rows="30%,70%">
<frame name="ESQ" src="esq.html">
<frame name="DER" src="der.html">
</frameset></frameset>
, ese manual es viejo komo del 96 pero k bueno sta
