|
|
|
|
El html es un LENGUAJE, con sus propias (y sencillas) normas sintácticas. La más elemental es que las "instrucciones" para interpretar una configuración (aspecto) de un archivo se incluyen entre los caracteres "< >". Vamos a llamar a cada una de esas órdenes "etiqueta"
- - Por ejemplo: si un documento no encuentra el caracter ">" de cierre de una etiqueta, no la interpreta como tal.
- - La gran mayoría de las etiquetas tienen un comando inicial <lo que sea> y uno final </lo que sea> Si no encuentra la etiqueta de final de comando, no lo interpreta.
- - Se puede escribir html con un simple bloc de notas:
Puedes encontrarlo instalado en:
Imaginemos que únicamente queremos crear una página web con una sola línea (no es mucho, pero para empezar...).
- Abrimos el bloc:
Hemos escrito, además de una serie de instrucciones, como el título de la página ("SOY UN GENIO"), una frase en el "cuerpo" del documento: "¡Oh, cielos!..."
Luego, para convertir estas instrucciones a página web, es suficiente guardar este archivo llamándole *.htm o *.html (es decir, loquesea.htm o loquesea.html). En nuestro caso, lo llamaremos "mipagina.htm" [OJO: EVITAR TILDES Y EÑES)
Como ese archivo tiene nombre que acaba en .htm, Windows interpreta sin más que es una página web, y la abre con el siguiente resultado, con sólo abrirla con el explorador (la lupita que encontrarás en programas)
RESULTADO
ESTO, POR SENCILLO QUE SEA, ES UNA PÁGINA WEB.
OBSERVA DÓNDE ESTÁ EL TÍTULO DE LA PÁGINA.
Vamos a analizar lo que hemos hecho. Pensemos que
<HTML> <HEAD> <TITLE>Título de la página</TITLE> ... </HEAD> <BODY> Aquí iría el contenido de la página </BODY> </HTML>
Algunas veces, LA ETIQUETA <body> Puede ser sustituida por <frameset> para un tipo de páginas que dividen la ventana del navegador en varios cuadros (llamados frames). De momento, vamos a dejar para más adelante esta posibilidad (que provoca una página con "marcos", como las que hemos recorrido)
RESUMIENDO:
<HTML> (Etiqueta que indica que lo que viene a continuación es un documento HTML) <HEAD>(Etiqueta de apertura de la cabecera).
Aquí va la información sobre el título de la página, el autor, palabras clave, etc. que no se presentarán en la ventana del navegador, salvo el título que aparecer en la barra de título de la parte superior
</HEAD>(Etiqueta de cierre de la cabecera)<BODY>(Etiqueta de apertura del cuerpo)
Aquí va el contenido de la página que será lo que se presente en pantalla.
</BODY>(Etiqueta de cierre del cuerpo)</HTML>(Etiqueta de cierre del documento)
el lenguaje html es la base de la programación de páginas web,podríamos INDAGAR en una página web cómo se han dispuesto dichoscódigos.ABRE una página web cualquiera. Por ejemplo, la páginacon la que iniciábamos el curso (que hemos simplificado, quitandolos efectos dinámicos), a la que puedes llamar desdeel siguiente enlace:ÁBRETE, SÉSAMO, y muéstrame, de paso, los secretos de tus entrañasVamos a analizar más detenidamente las distintas secciones que componen la página. Para eso, tenemos que seleccionar, a la vista de dicha página web, la opción "Ver" y "Código fuente":
UNA VEZ HECHO ESTO, ABRIRÍAMOS EL BLOC DE NOTAS EN EL QUE SE NOS MUESTRA EL CÓDIGO HTML.
EN NUESTRO CASO, SERÍA:
VEMOS QUE, EFECTIVAMENTE, LA PÁGINA WEB SE REDUCE A UNA SERIE DE ETIQUETAS O INSTRUCCIONES. SIN PRETENSIÓN DE QUE POR AHORA APRENDAS EXHAUSTIVAMENTE SU USO, VAMOS A ANALIZAR ALGUNAS:
<html>
ESTA ETIQUETA NOS DICE QUE ESTAMOS EN HTML
<head>
<meta http-equiv="Content-Language" content="es">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>previa2</title>
</head>
<body background="azul.JPG">
<font face="Algerian" size="4" color="#FFFFFF">cfie
valladolid-ii</p>
<p>curso 2002-2003</p>
<p>ponente: ignacio martín jiménez</font></p>
<p></p>
<p align="center">
<font face="Algerian" size="7" color="#FF0000">seminario
de formación</p>
<p>Internet como recurso</p>
<p>en la clase de historia</font></p>
<a href="index.htm"><img border="0" src="../GIF/GLOBO.gif" width="35" height="42"></a></p>En este caso, el enlace conectivo es una imagen: <img border="0" src="../GIF/GLOBO.gif" width="35" height="42">
</body>
</html>La importancia de asimilar la estructura básica reside en que una de las mejores formas de aprender a crear páginas HTML es viendo páginas creadas por otros autores. Si tenemos claro el sistema utilizado podremos reconocer los elementos que nos parezcan interesantes e irlos incorporando a nuestras páginas.
- ABRE UNA PÁGINA WEB CUALQUIER. Si dudas cuál elegir, coge por ejemplo ESTA
- EN PRIMER LUGAR, CONSULTA SU CÓDIGO HTLM.
- ATRÉVETE A CAMBIAR ALGUNAS VARIABLES, COMO EL TAMAÑO DE LA FUENTE, EL COLOR (COMO NO SABEMOS LOS CÓDIGOS, PONDREMOS NOMBRES EN INGLÉS, COMO "BLUE", ETC.) EN UNA SEGUNDA FASE, DESTROZA LAS IMÁGENES, LOS ENLACES O LO QUE SE TE OCURRA (A SER POSIBLE, MENOS EL ORDENADOR, QUE ES DEL ESTADO)
- GUARDA LOS CAMBIOS DEL BLOC EN EL DISCO DURO CON FORMATO .HTML, Y LUEGO ABRE EL ARCHIVO AL QUE HABRÁS RENOMBRADO.
- REPÍTASE.
<meta name="description" content="Información sobre el nuevo currículo del área en Castilla y León">
<meta name="keywords" content="educación">En este caso las etiquetas le indican a los buscadores el contenido de nuestras páginas (description) y algunas palabras clave (keywords) para su localización.
El título de la página debe describir su contenido por ejemplo:
<TITLE>Página del CFIE Valladolid II. Asesoría de Ciencias Sociales </TITLE>
No sería conveniente, en cambio, formulaciones como la siguiente:
<TITLE>Página de Inicio</TITLE>, ya que esto no dice nada por sí sóloA veces, también dentro de la cabecera se suele incluye un código en JavaScript (un tipo de programación especial de las páginas web), que se reconoce porque va comprendido entre las etiquetas
<script language="JavaScript">
<!--Aquí iría el código
// -->
</SCRIPT>[No des importancia por el momento a los JavaScripts, que en todo caso trataremos más adelante]
El cuerpo está delimitado por las etiquetas <body> y </body> La etiqueta <body> suele contener algunos atributos, a saber:
BGCOLOR parámetro usado para especificar el color de fondo de la página. El color se define como una terna de números (#rrggbb) en base hexadecimal en el orden rojo, verde, azul (Red, Green, Blue). También se puede usar el nombre en inglés de los colores predefinidos en los navegadores.
Sintaxis: <BODY BGCOLOR=#0000FF> o <BODY BGCOLOR="blue">
Haz la siguiente prueba:
1º- ABRE EL BLOC DE NOTAS.
2º- CONSTRUYE UN ENCABEZADO DE PÁGINA WEB CON LOS ATRIBUTOS QUE HEMOS DICHO:
<HTML>
<HEAD>
<TITLE>Título de la página</TITLE>
...
</HEAD>
<BODY>
Aquí iría el contenido de la página
</BODY>
</HTML>3º- AHORA, GUARDA EN EL DISCO a:loquesea.htm DICHO ARCHIVO. LUEGO, POCO A POCO LE VAMOS A IR CAMBIANDO ALGÚN ATRIBUTO, GUARDAMOS, ABRIMOS DE NUEVO LA PÁGINA WEB (O LA "REFESCAMOS") Y VEMOS QUÉ EFECTOS TIENEN LOS CAMBIOS. COMENZAREMOS POR EL
<BODY BGCOLOR="blue">,
Y LUEGO LO VAMOS CAMBIANDO POR "red", "green", etc.
4º- A MEDIDA QUE VAMOS AVANZANDO EN OTROS ATRIBUTOS DE TEXTO, ETC., REPETIMOS ESTE PROCESO.
RECURSO: Una buena ayuda para la selección de colores con #rrggbb la puedes encontrar en: Paleta de Colores
Los colores por omisión son LINK=blue, VLINK=purple y ALINK=red. El formato es el mismo que BGCOLOR.
Valores Color resultante Valores Color resultante Valores Color resultante FF0000 00FF00 0000FF FFFF00 FF00FF 00FFFF 25A7BB ACB312 6047B6
BACKGROUND, parámetro usado para especifica la ruta y nombre de archivo (URL) de la imagen que será usada como fondo del documento. Esta se verá como mosaico para cubrir toda la ventana si es pequeña (lo habitual).
Sintaxis: <BODY BACKGROUND="ruta/archivo.gif">
Aquí comienzan las verdaderas posibilidades expresivas del html. Por ejemplo, en nuestro archivo, vamos a poner como imagen de fondo la denominada "velazquezhilanderas.jpg". El efecto no es muy bueno, pues es una imagen muy saturada de color, pero te puede servir como referencia para comprender el sentido de la imagen de fondo.
RECUERDA: la etiqueta completa será:
<BODY BACKGROUND="ruta/velazquezhilanderas.jpg">, donde `ruta' es el camino que indica dónde encontrará el explorador esta imagen:
- Indícale, si es preciso, la unidad (a:, c:, d:...), y el directorio y subdirectorio donde está. Un ejemplo
Es conveniente especificar la ruta de modo relativo: esto quiere decir que si cambiamos el directorio completo donde están nuestras páginas, desde C:\ a C:\webs, por ejemplo, la ruta especificada debe seguir siendo válida.
Por ejemplo si la página desde la que hacemos el enlace seencuentra en el directorio Aprendiendo Html y queremos poner como fondo la imagen fondo.gif, que se encuentra en gifs, se debe poner:
<BODY BACKGROUND="gifs/fondo.gif">
Si la página estuviese en ejemplos se pondría:
<BODY BACKGROUND="../gifs/fondo.gif">Fíjate en ../ pues es lo que indica al navegador que debe acudir al directorio superior
Los formatos que actualmente soportan los navegadores son los archivos GIF y los JPG. Una descripción pormenorizada de sus propiedades y la forma de trabajar con ellos para obtener los mejores resultados serían materia de un curso específico, por lo que nos limitaremos a decir que, mientras que el formato GIF es adecuado para imágenes con un máximo de 256 colores y con predominio de los colores planos, el formato JPG ofrece mejores resultados con imágenes de 16 millones de colores y variación tonal continua.
Una característica añadida del formato GIF es que permite definir colores transparentes, con lo que las siluetas del dibujo quedarán recortadas sobre el fondo. También se utiliza para crear pequeñas animaciones, aunque hay que señalar que éstas pueden llegar a resultar bastante molestas.
RESPECTO AL DISEÑO DE UNA PÁGINA WEB, RECUERDA:
|
|
Los colores se forman a partir de tres básicos, que son el rojo, verde y azul. La intensidad de cada componente se expresa como un número hexadecimal del 00 al FF (del 0 al 255 en base diez)
#FF0000 - Rojo
#00FF00 - Verde
#0000FF - AzulOtros colores son:
#FFFFFF - Blanco
#000000 - Negro
#FFFF00 - Amarillo
Ejemplo 1: <FONT SIZE=+2 COLOR=#FF00FF>Esto esta en color fucsia</FONT>
Ejemplo 2: Este color es #C1E1F8
Paleta de colores
16 Colores estandar (4 bits)
BLACK NAVY BLUE TEAL AQUA
SILVER GRAY YELLOW GREEN OLIVE LIME
RED MAROON WHITE FUCHSIA PURPLE 256 Colores RGB (8 bits)
RED
FF0000FF3300 CC3300 FF9999 FFCCCC 990033 MAROON
990000FF3333 CC3333 FFCC99 CC0066 993300 FF0033 CC0033 FF9966 FF6699 660000 000000 CC0000 663333 990066 330000
LIME
66FF0033FF33 66FF66 OLIVE
66FF0099FF99 CCFFCC GREEN
00FF0000CC00 009900 006600 003300 00CC00 009900 006600 003300 009900 006600 66FF00 009900
AQUA
00FFFF00FFFF 3333FF TEAL
0080806666FF 9999FF BLUE
0000FF33FFFF 66FFFF 99FFFF CCFFFF CCCCFF 0000CC 000099 000099 CCCCFF 000066 000033 000099
00CCCC 009999 006666 003333
YELLOW FFFF33 FFFF66 FFFF99 FFFFCC CCCC00 999900 666600 333300
FUCHSIA FF33FF FF66FF FF99FF FFCCFF CC00CC 990099 660066 330033
TEAL 7D337D 7D667D 7D997D 7DCC7D E100E1 CC00CC AF00AF 990099
FF3300 FF3333 FF3366 FF3399 FF33CC FF33FF
FF6600 FF6633 FF6666 FF6699 FF66CC FF66FF
FF9900 FF9933 FF9966 FF9999 FF99CC FF99FF
FFCC00 FFCC33 FFCC66 FFCC99 FFCCCC FFCCFF
FFFF00 FFFF33 FFFF66 FFFF99 FFFFCC FFFFFF
CC0000 CC0033 CC0066 CC0099 CC00CC CC00FF
CC3300 CC3333 CC3366 CC3399 CC33CC CC33FF
CC6600 CC6633 CC6666 CC6699 CC66CC CC66FF
CC9900 CC9933 CC9966 CC9999 CC99CC CC99FF
CCCC00 CCCC33 CCCC66 CCCC99 CCCCCC CCCCFF
CCFF00 CCFF33 CCFF66 CCFF99 CCFFCC CCFFFF
990000 990033 990066 990099 9900CC 9900FF
993300 993333 993366 993399 9933CC 9933FF
996600 996633 996666 996699 9966CC 9966FF
999900 999933 999966 999999 9999CC 9999FF
99CC00 99CC33 99CC66 99CC99 99CCCC 99CCFF
99FF00 99FF33 99FF66 99FF99 99FFCC 99FFFF
666600 666633 666666 666699 6666CC 6666FF
669900 669933 669966 669999 6699CC 6699FF
66CC00 66CC33 66CC66 66CC99 66CCCC 66CCFF
66FF00 66FF33 66FF66 66FF99 66FFCC 66FFFF
336600 336633 336666 336699 3366CC 3366FF
339900 339933 339966 339999 3399CC 3399FF
006600 006633 006666 006699 0066CC 0066FF
009900 009933 009966 009999 0099CC 0099FF
33CC00 33CC33 33CC66 33CC99 33CCCC 33CCFF
00CC00 00CC33 00CC66 00CC99 00CCCC 00CCFF
33FF00 33FF33 33FF66 33FF99 33FFCC 33FFFF
00FF00 00FF33 00FF66 00FF99 00FFCC 00FFFF
663300 663333 663366 663399 6633CC 6633FF
660000 660033 660066 660099 6600CC 6600FF
333300 333333 333366 333399 3333CC 3333FF
003300 003333 003366 003399 0033CC 0033FF
330000 330033 330066 330099 3300CC 3300FF
000000 000033 000066 000099 0000CC 0000FF
|
|
Los frames (marcos o cuadros) permiten dividir la ventana en varias más pequeñas, de modo que en cada una de ellas se cargua una página html distinta. Las versiones más antiguas de los navegadores no tienen implementada esta característica, por lo que no podrán verlos.
Sintaxis
Los frames se declaran con la etiqueta <FRAMESET>, que debe ser colocada antes de la etiqueta <BODY>. Si no se cumple este requisito, la etiqueta se ignorará.
Un ejmplo sencillo es el siguiente: (puedes ver el ejemplo real pulsando aquí)<HTML> <HEAD><TITLE> Título de la página </TITLE></HEAD> <FRAMESET ROWS=75,*> <FRAME SRC="frames1.htm" > <FRAME SRC="frames2.htm" > </FRAMESET> <NOFRAMES> <BODY> Lo siento,su navegador no soporta frames. Pulse <a href="frames1.htm>aquí </A> para acceder a los contenidos de estas páginas. </BODY> </NOFRAMES> </HTML>EL atributo ROWS (filas) es el que define el número y el tamaño de los frames, en este caso dos filas, de 75 píxels la primera y el resto de la ventana la segunda. También se puede dividir en columnas mediante COLS
El tamaño de los frames se puede especificar de más formas:
COLS=*,5* dos columnas, la segunda cinco veces mayor que la primera
COLS=150,*,150 tres colunmas, la primera y tercera de 150 píxels, la segunda ocupa el resto.
ROWS=20%,80% dos filas que ocupan el 20 % y el 80 % del espacio respectivamente.Las etiquetas NOFRAMES y BODY solamente se usan por cortesía, de hecho se pueden suprimir.
Las etiquetas FRAME SRC="frames.htm" cargan las página indicadas en el frame correspondiente.
También es posible anidar frames, llamando a una página que tenga de nuevo frames o bien declarándolo explÍcitamente. Un ejemplo de esto último es el que aparece abajo (el real aquí )
<FRAMESET COLS=20%,*> <FRAME SRC="frames1.htm"> <FRAMESET ROWS=20%,*> <FRAME SRC="frames2.htm"> <FRAME SRC="frames3.htm"> </FRAMESET> </FRAMESET>Este código divide la ventana en dos columnas, la primera del 20 % del ancho total, y la segunda queda dividida a su vez en dos filas, siendo la primera de ellas un 20 % del total
El atributo TARGET
Lo más interesante de los frames es la posibilidad que tienen de interactuar entre si, es decir pulsar un enlace en el frame 1 y cargar el contenido en el frame 2.
Para conseguir esto hay que darle un nombre a los frames y luego indicar en el enlace donde se va a cargar mediante el atributo TARGET. Veamos un ejemplo<HTML> <HEAD><TITLE> Frames --Ejemplo 3--</TITLE></HEAD> <FRAMESET COLS=150,*> <FRAME SRC="frames4.htm" NAME=margen> <FRAME SRC="frames5.htm" NAME=principal> </FRAMESET> </HTML>Los enlaces de la página frames4.htm , que es la que se carga en el margen izquierdo, se escriben de la forma:
<A HREF="frames1.htm" TARGET=principal>Frame 1 </A>Hay ciertos valores reservados para TARGET. estos son
TARGET=_top, hace que la página se cargue en la ventana completa del navegador.
En los frames se pueden modificar algunas de sus características por medio de las etiquetas que siguen:
SCROLLING= yes, no , auto . Indica si el frame llevará siempre, nunca o cuando lo necesite, barra de deslizamiento vertical
BORDERCOLOR="color" . Indica el color del borde
MARGINWIDTH=n . Indica el margen horizontal, tanto derecho como izquierdo, en píxels
MARGINHEIGHT=n . Indica el margen vertical, tanto superior como inferior, en píxels
NORESIZE . Indica que el frame no se puede redimensionar. Si no se pone este atributo colocando el cursor en el borde del frame, permitiría su deslizamiento
FRAMEBORDER=yes, no . Indica si los frames tendrán bordes o no.
|
|
He aquí los elementos básicos para la realización de un formulario
<FORM ACTION="mailto:tulogin@tuservidor.pntic.mec.es" METHOD="post" ENCTYPE="text/plain">
...
</FORM>Entre las etiquetas anteriores deben ir todas las etiquetas que generan los botones, casillas, campos, etc. y también todas las etiquetas de HTML que permitan dar forma al formulario (tablas, colores, etc)
El atributo ACTION nos indica la dirección de correo a la cual se van a enviar los datos del formulario. Así pues debes sustituir tulogin@tuservidor.pntic.mec.es por tu dirección de correo.
Los atributos METHOD y ENCTYPE indican cómo se transferirán los datos (post, correo) y la codificación del texto
El atributo HIDDEN no mostrará el campo en la página web, aunque sí enviará su contenido.
<INPUT TYPE="text" SIZE="25" NAME="Nombre">
Esta etiqueta produce un campo similar al que se muestra debajo, para introducir texto (en este caso el nombre), de una longitud de 25 caracteres.
Cuando nos llegue al buzón de correo el texto de este campo aparecerá asociado a la palabra que pongamos en NAME (en este caso a Nombre)
Puede incluirse otro atributo opcional VALUE="Pon aquí tu nombre", en este caso aparecería Pon aquí tu nombre dentro del campo
<TEXTAREA NAME="comentario" ROWS=3 COLS=50>
Introduzca aquí sus comentarios
</TEXTAREA>Este código produciría el siguiente resultado:
<SELECT NAME="estudios">
<OPTION SELECTED> ESO
<OPTION> Bachillerato
<OPTION> Ciclos Formativos
<OPTION> Garantía Social
</SELECT>
Que produciría un campo similar al siguiente:
donde ESO aparece seleccionada por defecto.
Una variante de las listas de opciones son los menús con barras de desplazamiento
<SELECT NAME="americanos" SIZE=6> <OPTION>España
<OPTION>México
<OPTION>Argentina
<OPTION>Costa Rica
<OPTION>Panamá
<OPTION>Belice
<OPTION>Honduras
<OPTION>Bolivia
<OPTION>Chile
<OPTION>Paraguay
</SELECT>que da como resultado una entrada del tipo
Si en la etiqueta <SELECT ...> introducimos el atributo MULTIPLE: nos está permitido efectuar selecciones múltiples.
<SELECT NAME="menu" SIZE=6 MULTIPLE>
< INPUT TYPE="checkbox" NAME="nivel" VALUE="eso"> ESO <BR>
< INPUT TYPE="checkbox" NAME="nivel" VALUE="bachiller"> Bachillerato <BR>
< INPUT TYPE="checkbox" NAME="nivel" VALUE="primaria"> Primaria <BRNos permite elegir entre varias posibilidades una o más casillas. Recibiremos como dato el valor de la casilla señalada, asociada en este caso a nivel. Produciría un resultado como el siguiente:
ESO
Bachillerato
Primaria
< INPUT TYPE="radio" NAME="sexo" VALUE="hombre" CHECKED> Hombre
< INPUT TYPE="radio" NAME="sexo" VALUE="mujer" > MujerSimilar al anterior, con la diferencia de que solo nos permite seleccionar una de las opciones mostradas, se utiliza para mostrar opciones excluyentes entre si. Luce como:
Hombre
Mujer
Se utilizan las siguientes etiquetas para hacer los botones de Enviar y Borrar
< INPUT TYPE="submit" VALUE="Enviar">
< INPUT TYPE="reset" VALUE="Borrar">Producirán uno botones como estos:
Cuando presionemos "Enviar" se transferirá el contenido de los campos a la dirección de correo indicada, por lo que necesitamos estar conectados a Internet para comprobarlo.
Si presionamos Borrar se borrará el contenido de los campos
Sustituye los campos necesarios para colocarlo en tu página
<form action="mailto:tu@direccion.es" method="post" enctype="text/plain">
<center><table bgcolor="#cccccc" border="0" cellpadding="6"
cellspacing="0" width="400">
<tr>
<td align="right" valign="top"><b>Nombre</b></td>
<td><input type="text" size="25" name="Nombre"> </td>
</tr>
<tr>
<td align="right" valign="top"><b>E-mail</b></td>
<td><input type="text" size="25" name="e-mail"> </td>
</tr>
<tr>
<td align="right" valign="top"><b>Especialidad</b></td>
<td><input type="text" size="25" name="Especialidad"> </td>
</tr>
<tr>
<td align="right" valign="top"><b>Centro de destino</b></td>
<td><input type="text" size="25" name="Centro"> </td>
</tr>
<tr>
<td align="right" valign="top"><b>Provincia</b></td>
<td><input type="text" size="25" name="Provincia"> </td>
</tr>
<tr>
<td align="right" valign="top"><b>Pulsa una vez</b> <b>></b> </td>
<td align="center"> <input
type="submit" name="Enviar datos" value=" Enviar "><input type="reset" value="Borrar" name="B1"> </td>
</tr>
</table>
</center>
</form>
|
|
Las tablas se usan con profusión en las páginas Web, muchas veces debido a que son el único instrumento con el que se cuenta, para asegurarse que las cosas estarán en su sitio. Para definir una tabla se usan las etiquetas:
<TABLE> y </TABLE> son las etiquetas donde está contenida la tabla
<TR> y </TR> son las etiquetas que indican el comienzo y fin de una fila (<th> y </th> si es una fila de cabecera)
<TD> y </TD> señalan una celda.La tabla se va definiendo declarando una fila y a continuación las celdas que contiene esa fila, luego otra fila y sus celadas, etc. No es necesario que todas las filas contengan el mismo número de celdas.
La tabla (2x2) más sencilla que podemos hacer es la siguiente
Escribimos: Visualizamos <TABLE >
<TR>
<TD>1 </TD> <TD> 2 </TD>
</TR> <TR>
<TD>3 </TD> <TD> 4</TD>
</TR>
</TABLE>
1 2 3 4 El resultado no es muy brillante, pero vamos a ir viendo las distintas posibilidades que tenemos para mejorarlo.
Todos los atributos son opcionales
BORDER="4". Indica el tamaño del borde en píxels, en este caso 4. Si no se indica nada carece de borde
WIDTH="5" o WIDTH="50%". Es el ancho de la tabla, puede especificarse en valor absoluto (5 píxels) o como un porcentaje (50% del ancho disponible)
CELLSPACING="2". Es el espacio entre las celdas, por defecto es 2
CELLPADDING="5". Es el espacio entre el contenido de las celdas y el borde de las mismas, por defecto es 1
ALIGN=" left", "right", "center". Alinea la tabla a la izquierda , derecha o en el centro.Otro ejemplo
Escribimos: Visualizamos <TABLE BORDER="3" CELLSPACING="5" WIDTH="150">
<TR>
<TD>1 </TD> <TD> 2 </TD>
</TR> <TR>
<TD>3 </TD> <TD> 4</TD>
</TR>
</TABLE>
1 2 3 4
Las etiquetas que soportan las filas y las celdas son
WIDTH="30". Ancho de toda la fila o celda. También se puede dar en %
ALIGN=" left", "right", "center". Alinea el contenido a la izquierda, derecha o centro
VALIGN="top" , "middle" o "bottom". Alinea el contenido verticalmente arriba, en medio o abajo
BGCOLOR="#AACCEE". Pone un fondo del color especificado a la celda o fila
COLSPAN=3. Especifica el número de columnas que abarca la fila
ROWSPAN=2. Especifica el número de filas que abarca la columnaTercer ejemplo. FÍjate en la etiqueta TH, que sustituye a TR, resalta su contenido con negrita, por eso se usa para los títulos
Escribimos: Visualizamos <TABLE BORDER="3" CELLSPACING="5" WIDTH="200">
<TH COLSPAN=2 BGCOLOR="#6D8FFF> Este es el título</TH>
<TR align="center">
<TD>Esta es la celda de la 1ª fila y de la 1ª columna</TD>
<TD> Esta es de la 1ª fila y de la 2ª columna</TD>
</TR>
<TR BGCOLOR="#6D8FFF>
<TD>Esto está con un fondo azul</TD>
<TD align="right" valign="bottom">Y esto también</TD>
</TR>
</TABLE>
Este es el título Esta es la celda de la 1ª fila y de la 1ª columna Esta es de la 1ª fila y de la 2ª columna Esto está con un fondo azul Y esto también Como ves, se pueden ir modificando los comandos básicos para obtener la tabla que deseemos.
Como dijimos, las tablas son a veces la mejor manera de asegurarnos que cada cosa esté en su sitio. En esos casos toda la página es una tabla invisible y los distintos elementos aparecen colocados en el sitio exacto mediante el uso de filas, columnas, sus dimensiones y alineamientos, el espacio entre las mismas, etc.
Normalmente el ancho de esas tablas es de alrededor de 600 píxels para que la presentación sea similar en todos los monitores. Hay muchos ejemplos de este uso, sobretodo en las páginas diseñadas por profesionales, observa sino la de El Pais o la de Microsoft
Como inconvenientes señalar que las tablas impiden el deslizamiento uniforme de la ventana, cuando se desplaza con la barra y el tamaño de la página aumenta considerablemente.
<TABLE> y </TABLE> Son las etiquetas de apertura y cierre de la tabla. Entre ellas irán las etiquetas y los contenidos de cada una de las filas y celdas <TR> y </TR> Son las etiquetas que indican el principio y final de una fila. Entre ellas habrá que incluir las etiquetas y contenidos de las celdas que la forman. <TD> y </TD> Con ellas delimitamos cada una de las celdas. Entre ambas incluiremos el contenido correspondiente Anidar tablas
En ocasiones, especialmente cuando utilizamos las tablas como recurso de formato para distribuir la información dentro de la página, nos interesa introducir una tabla dentro de una celda perteneciente a una tabla creada anteriormente. Esto no permitirá, por ejemplo, hacer que convivan tablas con borde junto a tablas sin borde.
|
|
En general los enlaces tienen la siguiente estructura
<A HREF="URL"> Texto del enlace</A>
El texto del enlace es lo que se visualizará en el navegador. La URL es la dirección donde apunta el enlace y puede ser de estos tipos:
Veamos un ejemplo para saltar al inicio de esta página. Escribiríamos en el lugar desde el que queremos saltar:<A HREF="#inicio"> Ir al Inicio</A>
Y en el sitio exacto adonde queremos saltar, debemos poner la siguiente etiqueta:
<A NAME="inicio"> </A>Una vez escrito esto y guardada la página veríamos al abrirla con el Navegador
Al pulsar sobre ella nos llevaría al principio de la página ya que fue allí donde coloqué el marcador
En este caso la URL se dará de forma relativa (igual que para poner un fondo a la página). Por ejemplo si tenemos dos páginas en el mismo directorio pagina1.htm y pagina2.htm y queremos poner un enlace desde la pagina1.htm a la pagina2.htm debemos escribir
<a href="pagina2.htm">Ir a pagina2</a>
Con esto es suficiente: no hay que crear ningún marcador a no ser que quieras ir a un sitio concreto de la pagina2.htm. En ese caso tendrías que poner en el sitio adonde quieres llegar de la pagina2.htm
<a name="sitio"></a>
y en la pagina1.htm
<a href="pagina2.htm#sitio>Ir a sitio de la página 2</a>Las palabras forma relativa, al principio de esta sección, constituyen un enlace de este último tipo
Ahora la URL debe darse de forma absoluta, tal como la ves en la ventana de dirección del navegador, es decir:
<A HREF="http://centros4.pntic.mec.es/ies.de.valladolid">IES valladolid</A>
te llevaría a la página de entrada del supuesto IES valladolid
Con frecuencia se emplean imágenes como enlaces. A veces son enlaces a las mismas imágenes con más resolución, como en el caso de fotos. Otras veces nos llevan a una localización cualquiera.
Para que una imagen sea un enlace hay que colocarla en el lugar del texto del enlace, si además queremos que vaya a otra imagen, ésta la debemos poner en el lugar de la URL.
Veamos unos ejemplos Supongamos para ello, que la estructura de nuestras páginas es la indicada en la imagen. Si escribo en la página actual localizada en Aprendiendo Html
obtengo una imagen que al pulsarla me lleva al inicio de esta página, exactamente como esta:Para que una imagen sea un enlace a otra imagen se debe escribir:
<a href="gifs/sky.jpg"><img src="gifs/ojo.gif" ></a>
que da como resultado
Enlace con una dirección de correo
Este es un enlace un poco diferente, veamos un ejemplo
<A HREF="mailto: abercian@pntic.mec.es"> abercian@pntic.mec.es </A>
que se ve como abercian@pntic.mec.es y que si lo pulsas se abre el programa de correo que tengas configurado, con la dirección en el campo correspondiente
Enlace con un grupo de noticias
Como antes la sintaxis es un poco diferente
<A HREF="news://news.pntic.mec.es/"> Mira en las noticias del MEC para encontrar profesores colgados</A>
que se vería
Mira en las noticias del MEC para encontrar profesores colgados
Enlace para descargar un fichero
En la URL se poner la ruta donde está el fichero. Por ejemplo, para descargar un fichero de nombre guiahtml.zip se debe poner
<A HREF="../zip/guiahtml.zip">guiahtml.zip</A>
que se vería así guiahtml.zip. Si pulsas sobre él se abrirá una ventana avisándote de una descarga de archivos y preguntándote qué deseas hacer
Enlace que se abre en una nueva ventana
Si quieres que la página que enlazas aparezca en una nueva ventana del navegador, solamente tienes que poner target="nombre" como atributo del enlace, es decir:
<a href="index.htm" target="nueva">Indice</a>
que se verá como Indice
Aún hay más tipos de enlaces, pero éstos son los más importantes
|
|
Los mapas sensibles son imágenes que presentan múltiples enlaces según la zona donde se sitúe el cursor. Para conseguir esto se divide la imagen en zonas mediante las coordenadas de las mismas.
Procedimiento
<IMG SRC="gifs/mapa.gif USEMAP="#directorio">
<MAP NAME="directorio">
<AREA SHAPE="forma de la zona" COORDS="coordenadas" HREF="URL asignada" ALT="comentario">
</MAP>
Los valores que pueden tomar la forma y las coordenadas son:
RECT. Rectángulo o cuadrado
COORDS="x,y,u,v" donde x,y son las coordenadas del vértice superior izquierdo del rectángulo y u,v es el vértice inferior derecho. El origen de coordenadas 0,0 es el vértice superior izquierdo
CIRCLE. Círculo
COORDS="x,y,z", donde x,y es el cetro de la circunferencia y z el radio
POLY. Línea poligonal cerrada
COORDS="X,x, Y,y, Z,z...,X,x", donde los pares X,x, Y,y, etc representan los vértices del polígono. El primero coincidirá con el último.
DEFAULT. La zona no referenciada anteriormente
Para hallar las coordenada necesitarás un editor de imágenes, como los señalados en la página de imágenes. Si te empeñas también puedes hacerlo a ojo, siempre que la imagen no sea muy complicada, ya que cuando pulsas la zona en el navegador aparece definida un instante.
Vamos a crear un mapa sensible con una imagen capturada del explorador de Windows95. Para hacerlo pulsa la tecla Imprimir Pantalla (Print Screen SysRq) y luego pega la imagen capturada con cualquier editor de imágenes. El Paint que viene con Windows 95 y 98 no vale ya que, aunque captua la pantalla, luego no puedes guardar la imagen en formato gif o jpg. Usa el Adobe Photoshop, el Paint Shop Pro o el Corel.
Vamos a crear un mapa que nos podría servir como menú en la página principal.
Para conseguir el mapa de la izquierda hemos escrito
<IMG SRC="gifs/mapa.gif" USEMAP="#directorio" ALIGN="left" HSPACE=20>
<MAP NAME="directorio">
<AREA SHAPE="RECT" COORDS="0,0,94,22" HREF="colores.htm">
<AREA SHAPE="RECT" COORDS="0,22,94,39" HREF="comienzo.htm">
<AREA SHAPE="RECT" COORDS="0,39,94,56" HREF="enlaces.htm">
<AREA SHAPE="RECT" COORDS="0,56,94,73" HREF="estructura.htm">
<AREA SHAPE="RECT" COORDS="0,73,94,90" HREF="formatos.htm">
<AREA SHAPE="RECT" COORDS="0,90,94,107" HREF="imagenes.htm">
<AREA SHAPE="RECT" COORDS="0,107,94,124" HREF="index.htm">
<AREA SHAPE="RECT" COORDS="0,124,94,141" HREF="listas.htm">
<AREA SHAPE="RECT" COORDS="0,141,94,158" HREF="mapas.htm">
<AREA SHAPE="RECT" COORDS="0,158,94,175" HREF="publicar.htm">
<AREA SHAPE="RECT" COORDS="0,175,94,192" HREF="tablas.htm">
<AREA SHAPE="RECT" COORDS="0,175,94,214" HREF="frames.htm">
</MAP>No te asustes con tanto número, fíjate en las regularidades que presentan. La 1ª columna y la 3ª indican donde empieza y donde acaba horizontalmente. La 2ª y la 4ª lo hacen en sentido vertical.
Cualquiera de los programas citados anteriormente te indican las coordenadas de cualquier punto de una imagen.Fíjate también que la etiqueta inicial <IMG SRC...> es una etiqueta de imagen y como tal acepta todos sus atributos.
|
|
Como muchos sistemas tienen distintos juegos de caracteres ASCII, se emplean códigos para representarlos por igual en cualquiera de ellos. De esta manera se asegura que cualquiera que vea nuestra página lo hará de igual modo que nosotros.
Estos símbolos especiales permiten también escribir en distintos lenguajes, ya que incluyen los acentos, diéresis, etc. Para incluirlos en la página se usan las etiquetas mostradas en la tabla. Como vemos, todos empiezan por & y acaban en ; y se deben escribir respetando las mayúsculas y minúsculas
Símbolo Etiqueta Símbolo Etiqueta Símbolo Etiqueta Símbolo Etiqueta á á Á Á à à À À é é É É è è È È í í Í Í ì ì Ì Ì ó ó Ó Ó ò ò Ò Ò ú ú Ú Ú ù ù Ù Ù ä ä Ä Ä â â Â Â ë ë Ë Ë ê ê Ê Ê ï ï Ï Ï î î Î Î ö ö Ö Ö ô ô Ô Ô ü ü Ü Ü û û Û Û ñ ñ Ñ Ñ ý ý ÿ ÿ ç ç Ç Ç æ æ Æ Æ ø ø Ø Ø © © ® ® & & " " < < > > (espacio)
Otra forma de representar estos caracteres especiales es por medio del código estándar ISO-8859-1. En este caso para incluirlos debemos escribir &#nn; donde nn representa el número dado en la tabla de abajo
Juego de caracteres ISO-8859-1 32 ! 33 " 34 # 35 $ 36 % 37 & 38 ' 39 ( 40 ) 41 * 42 + 43 , 44 - 45 . 46 / 47 0 48 1 49 2 50 3 51 4 52 5 53 6 54 7 55 8 56 9 57 : 58 ; 59 < 60 = 61 > 62 ? 63 @ 64 A 65 B 66 C 67 D 68 E 69 F 70 G 71 H 72 I 73 J 74 K 75 L 76 M 77 N 78 O 79 P 80 Q 81 R 82 S 83 T 84 U 85 V 86 W 87 X 88 Y 89 Z 90 [ 91 \ 92 ] 93 ^ 94 _ 95 ` 96 a 97 b 98 c 99 d 100 e 101 f 102 g 103 h 104 i 105 j 106 k 107 l 108 m 109 n 110 o 111 p 112 q 113 r 114 s 115 t 116 u 117 v 118 w 119 x 120 y 121 z 122 { 123 | 124 } 125 ~ 126 &127; 127 € 128 129 ‚ 130 ƒ 131 „ 132 … 133 † 134 ‡ 135 ˆ 136 ‰ 137 Š 138 ‹ 139 Œ 140 141 Ž 142 143 144 ‘ 145 ’ 146 “ 147 ” 148 • 149 – 150 — 151 ˜ 152 ™ 153 š 154 › 155 œ 156 157 ž 158 Ÿ 159 160 ¡ 161 ¢ 162 £ 163 ¤ 164 ¥ 165 ¦ 166 § 167 ¨ 168 © 169 ª 170 « 171 ¬ 172 173 ® 174 ¯ 175 ° 176 ± 177 ² 178 ³ 179 ´ 180 µ 181 ¶ 182 · 183 ¸ 184 ¹ 185 º 186 » 187 ¼ 188 ½ 189 ¾ 190 ¿ 191 À 192 Á 193  194 à 195 Ä 196 Å 197 Æ 198 Ç 199 È 200 É 201 Ê 202 Ë 203 Ì 204 Í 205 Î 206 Ï 207 Ð 208 Ñ 209 Ò 210 Ó 211 Ô 212 Õ 213 Ö 214 × 215 Ø 216 Ù 217 Ú 218 Û 219 Ü 220 Ý 221 Þ 222 ß 223 à 224 á 225 â 226 ã 227 ä 228 å 229 æ 230 ç 231 è 232 é 233 ê 234 ë 235 ì 236 í 237 î 238 ï 239 ð 240 ñ 241 ò 242 ó 243 ô 244 õ 245 ö 246 ÷ 247 ø 248 ù 249 ú 250 û 251 ü 252 ý 253 þ 254 ÿ 255
|
|
De un modo similar a como se inserta una imagen se puede insertar un fichero de sonido o de vídeo.
En este caso la etiqueta depende del navegador, ya que se implementa de forma diferente en el Explorer y el Netscape. Los formatos más usados son mid (para temas musicales sin voces) , wav y au.
La etiqueta básica para que se cargue el fichero de música con la página, sin intervención del usuario, es en Netscape (siendo obligatorio especificar el tamaño):
<EMBED SRC="gifs/derroche.mid" WIDTH=144 HEIGHT=30>
En Netscape se verá para WIDTH=160 HEIGHT=70 como:
La etiqueta EMBED tiene multitud de atributos, he aquí algunos.
AUTOSTART= FALSE (por defecto) y TRUE. Este último hace que suene inmediatamente después de cargar la página sin necesidad de pulsar el botón.
HIDDEN=TRUE, oculta la consola y sólo tiene este valor . Como no se podría activar el sonido pulsando el botón, suene al cargar la página
LOOP=FALSE ,TRUE(por defecto),N para oir el fichero una vez, infinitas o el número que especifiquemos en N
CONTROLS=SMALLCONSOLE, aparece una consola pequeñita
Si pones esta etiqueta, las versiones más recientes del Explorer (desde la 4.0) también la interpretan correctamente, salvo LOOP. El Explorer lee el fichero una vez para LOOP=0 y lo repite indefinidamente para N igual a otro valor cualquiera.
Explorer
El Explorer ofrece menos posibilidades para manejar estos ficheros. La etiqueta básica para que se cargue la música con la página es:
<BGSOUND SRC="fichero de sonido" LOOP= n ó INFINITE>
donde n es el número de veces que se oye el fichero: 1, 2, 3 ... o infinitas
Sonido de fondo en los dos navegadores
Si deseas que suene la música al cargar la página con los dos navegadores debes escribir las etiquetas para ambos.
Es decir debes poner:<bgsound src="../gifs/houston.mid">
<embed src="../gifs/houston.mid" Hidden="true" >para que suene una vez
o bien:
<BGSOUND SRC="../gifs/cantina.wav" LOOP=infinite>
<EMBED SRC="../gifs/cantina.wav" WIDTH=200 HEIGHT=55 AUTOSTART="true" LOOP="true" HIDDEN="true">para que se ejecute indefinidamente.
Los archivos midi están basados en partituras en las que se indica el tono y duración de cada una de las notas, así como el instrumento que interpreta cada pista. Su característica principal es el escaso espacio que ocupan en comparación con la información que incluyen. Resultan adecuados, pues, para incorporar pasajes musicales.
Dado que los archivos midi se basan en partituras tienen la ventaja de poder crearse y modificarse con facilidad si se tienen nociones de música. Presentan, en cambio, el inconveniente de que la calidad de la reproducción dependerá de la tarjeta de sonido con la que se escuchen, ya que si esta es de escasa calidad los timbres de los instrumentos se asemejaran poco al sonido real.
En los archivos de formato wav invertimos los términos: son muy extensos porque se basan en la digitalización directa de una fuente de sonido. Además, no dependen demasiado de la calidad de la tarjeta de sonido en que se reproducen y no resultan adecuados para fragmentos musicales largos, sino para efectos especiales y voz. (Siempre habrá que procurar utilizar fragmentos breves debido a su gran extensión).
Sea cual sea el formato que utilicemos el factor principal a tener en cuenta será la extensión de los archivos. Independientemente de que el equipo con el que elaboremos las páginas de la revista sea muy potente, nunca podemos saber con que equipo y, sobre todo, con qué tipo de módem accederán a nuestra página los futuros visitantes y... una página que tarda mucho en cargarse no suele incorporarse a la libreta de marcadores y es difícil que vuelva a ser visitada.
Aquí tienes algunos ejemplos de páginas con sonidos. Una vez cargadas utiliza el botón derecho del ratón para ver el código fuente (el origen en Netscape).
Si no quieres que se cargue la música con la página, algo que llega a resultar bastante pesado a veces, debes poner un enlace al fichero de sonido, lo que funciona con ambos navegadores: Netscape y Explorer.
Escucha Derroche de Ana Belén
También puedes poner cualquier otro tipo de ficheros de sonido, como mp3, que comprime hasta 12 veces la música, sin pérdida apreciable de calidad.
El gran problema de los ficheros de vídeo es su tamaño, ya que unos pocos segundos pueden representar varios Mb (mega bytes) de tamaño. Probablemente en el futuro se irá generalizando su uso, ya que aumentará la velocidad en la Red. Los formatos que se emplean son variados: avi, mpeg, ram, mov, etc, que pueden reproducir a la vez sonido y vídeo.
Los ficheros avi y mpeg se reproducen con el Reproductor Multimedia de Windows, pero los demás necesitan visores propios que se deben instalar previamente. Por ejemplo los ficheros ram se visualizan con Real Player, los mov con Quick Time, etc.
Son los llamados plug-in
<EMBED SRC="video.avi" HEIGHT=300 WIDTH=400 AUTOSTART=false LOOP=false>
<A HREF="gifs/jordan.avi">Mira el vídeo de Jordan</A>
lo que abrirá el programa asociado al tipo de vídeo elegido cuando lo pulses. En el Netscape también puedes hacer esto mismo.Si quieres probar aquí tienes un bonito aterrizaje del Columbia (para verlo necesitas estar conectado a internet y ojo que son 708 KB)
STS-87 Columbia Landing (240x180 MPEG 708K)
|
|
Existen ciertas normas que se deben seguir a la hora de realizar una página Web. No son obligatorias, pero si convenientes.
Las páginas no deben superar, incluidos los elementos gráficos, más de 30 o 40 Kb. Puede admitirse que la página principal o alguna otra sean un poco más grandes. El texto que haya en una página no debe ocupar más de dos o tres pantallas, en caso de que así sea, es mejor dividirlo.
Hay que tener en cuenta que la mayoría de los ordenadores trabajan con 640x480 píxels de resolución de pantalla, por lo que si se incluyen imágenes, tablas o elementos más anchos, no se visualizarán completamente.
Del mismo modo, tampoco hay que abusar de los Applets Java. Son muy bonitos pero sobrecargan en exceso los ordenadores de los usuarios.
Es conveniente incluir una página donde indique las novedades, de ese modo los visitantes habituales sabrán dónde deben mirar. Indica también la fecha de actualización de las páginas al final de las mismas.
Debes incluir siempre una dirección e-mail para que te puedan enviar mensajes, comentarios, opiniones, etc (respóndelos con prontitud ). Si la página es sobre el Centro también es conveniente poner la dirección y el teléfono real.
Al menos debes incluir enlaces a páginas de contenido similar al de la tuya. Por ejemplo a otros Colegios e Instituciones educativas, si haces una página sobre tu centro. De esta manera aseguras que los visitantes encuentren más fácilmente lo que buscan y por cortesías también pondrán enlaces hacia tu página.
Supongamos que ya has creado tu página. Probablemente no será una sola, serán varias y puede que también existan directorios dentro de ella. No obstante esto no tiene mucha importancia para "subirla" al servidor
Supongamos también que vas a subirla a un ordenador delcnice con el programa WS_FTP, que puedes descargar y usar de forma gratuita siempre que seas un profesor. Con otros programas se hace de modo similar.
Cuando arrancas el programa te aparece una pantalla similar a la que aparece a la derecha, en la que tienes que rellenar los campos como se indican en la misma. La máquina donde vamos a subir la página es acacia (ya sabes que hay distintos servidores que tienen nombres de árboles: olmo, sauce, roble, etc), que está en el Programa de Nuevas Tecnologías (pntic) del Ministerio de Educación y Cultura (mec) en España (es).
El nombre de usuario ficticio sería ana y como ves la contraseña aparece con asteriscos. La dirección de correo de Ana sería ana@acacia.pntic.mec.es ya que la palabra que precede al símbolo arroba es el nombre de usuario o login y coincide con User ID
Una vez que has completado esta pantalla pulsa Aceptar. Te aparecerá otra pantalla, como la debajo de este texto, dividida en dos ventanas; la de la izquierda se corresponde con tu ordenador y la de la derecha el directorio que tienes asignado en acacia. Sitúate en el directorio o fichero que quieras transferir pulsando sobre él a la izquierda, y sobre public html a la derecha y pulsa sobre el símbolo -->. Los ficheros o directorios que hayas seleccionado serán transferidos al servidor.
Ahora sólo te resta comprobarlo accediendo a tu página a través de Internet. Comprueba que los enlaces funcionan correctamente.
|
|
El lenguaje de adición de hipertexto, o como se denomina en inglés HyperText Markup Language (HTML) está compuesto de un conjunto de elementos que definen un documento y guían su presentación. Este documento presenta una guía de referencia rápida a los elementos del Nivel 1 al nivel 3 de HTML, dando una breve descripción de cada uno de ellos.HTML: Referencia rápida
Este documento incluye las últimas modificaciones y proposiciones realizadas para HTML, incluyendo elementos exclusivos del navegador de WWW Netscape, por lo cual este documento está sujeto a continua evolución y cambio. Para información en general acerca de HTML, incluyendo planes para nuevas versiones, consulte http://www.w3.org/MarkUp/MarkUp.html
Un elemento HTML puede incluir un nombre, algunos atributos y algún texto o hipertexto, y aparecerá en un documento HTML como
Por ejemplo:
<nombre_etiqueta> texto </nombre_etiqueta><nombre_etiqueta nombre_atributo=argumento> texto </nombre_etiqueta>, o solamente<nombre_etiqueta>y
<title> Mi Documento </title>Un documento HTML está compuesto de un elemento simple:
<a href="argumento"> texto </a>Este, a su vez se compone de elementos de encabezado y cuerpo:
<html>. . .</html>y
<head>. . .</head>
<body>. . .</body>Atributos:
<body background="nombre_de_archivo">- Especifica una imagen para el fondo del documento.
<body bgcolor="#rrggbb">- Especifica un color para el fondo del documento.
<body text="#rrggbb">- Especifica un color para el texto normal del documento.
<body link="#rrggbb" vlink="#rrggbb" alink="#rrggbb">- Establece el color del texto de vínculo, del vínculo visitado y del vínculo activo.
#rrggbbrepresenta el valor hexadecimal del color expresado como rojo-verde-azul.Para permitir a documentos HTML antiguos permanecer legibles,
<html>,<head>y<body>son actualmente opcionales en documentos HTML.Elementos en el elemento de encabezado
<isindex>- Especifica que el documento describe una base de datos que puede ser buscada usando el método de búsqueda por índice. Por ejemplo, un usuario de Lynx usará el comando "s" del teclado. Atributos:
<isindex prompt="Nuevo mensaje">- Especifica el mensaje que aparecerá antes del campo de entrada de texto a buscar. Si no se especifica ningún mensaje, el mensaje por omisión es:
This is a searchable index. Enter search keywords:<title>. . .</title>- Especifica el título del documento. Note que el título no aparecerá en el documento como se acostumbra en documentos impresos. Generalmente aparece en la barra de la ventana identificando el contenido de la misma. Las etiquetas HTML de encabezados realizan las funciones de títulos.
<base>- Especifica el nombre del archivo en el cual el documento actual es almacenado. Esto es útil cuando las referencias a vínculos en el documento no incluyen nombres de rutas completos, (es decir, están parcialmente calificados.)
<link rev="RELACION" rel="RELACION" href="URL">- La etiqueta de vínculo permite definir relaciones entre el documento conteniendo la etiqueta de vínculo y el documento especificado en el "URL". El atributo
relespecifica la relacion entre el archivo HTML y el localizador de recursos uniforme, o por su nombre en inglés, Uniform Resource Locator (URL). El atributorev(por "reversa") especifica la relacion entre el URL y el archivo HTML. Por ejemplo,<link rev="made" href="URL">indica que el creador del archivo o propietario está descrito en el documento identificado por el URL. (Note que las etiquetas de vínculos no se muestran en la pantalla como parte del documento. Definen relaciones estáticas, no vínculos de hipertexto.)Elementos colocados en el elemento del cuerpo
Las siguentes secciones describen elementos que pueden ser usados en el cuerpo del documento.
Elementos de texto
<p>- El fin de un párrafo que será formateado antes de que se muestre en la pantalla
<pre>. . .</pre>- Identifica texto que ha sido formateado previamente (preformateado) por algún otro sistema y debe ser desplegado tal como es. Texto preformateado puede incluir etiquetas embebidas, pero no todos los tipos de etiquetas están permitidos. La etiqueta
<tag>puede ser usada para incluir tablas en documentos.<listing>. . .</listing>- Ejemplo de listado de computadora; las etiquetas incluidas serán ignorados, pero los espacios de tabulación funcionarán. Esta es una etiqueta arcaica.
<xmp>. . .</xmp>- Similar a
<pre>excepto que no se reconocerán etiquetas incluídas.<plaintext>- Similar a
<pre>excepto que no se reconocerán etiquetas incluidas, como no hay etiqueta para finalizar, el resto del documento será traducido como texto simple. Esta es una etiqueta arcaica. Note que algunos navegadores reconocen una etiqueta</plaintext>, aún cuando no está definido por el estándard.<blockquote>. . .</blockquote>- Incluye una sección de texto citado de cualquier otra fuente.
Vínculos de hipertexto o anclas
Un ancla debe incluir un atributo
<a name="nombre_vinculo">. . .</a>- Define un destino en un documento
<a href="#nombre_vinculo">. . .</a>- Vínculo a un destino en el mismo documento
<a href="URL">. . .</a>- Vínculo a otro archivo o recurso
<a href="URL#nombre_vinculo">. . .</a>- Vínculo a un destino en otro documento
<a href="URL?palabra_a_buscar+palabra_a_buscar">. . .</a>- Manda una cadena a buscar a un servidor. Diferentes servidores pueden interpretar la cadena de manera diferente. En el caso de servicios de búsqueda orientados a palabras, varias palabras a buscar pueden ser especificadas separando palabras individuales por el signo de suma (+)
nameohref, y puede incluir ambos.La estructura de un localizador de recursos uniforme, o por su nombre en inglés, Uniform Resource Locator (URL) puede ser expresado como:
donde los posibles tipos de recursos incluyen:
- tipo_de_recurso://dominio.del.host:puerto/ruta
file, http, news, gopher, telnet, ftp, mailtoywais, entre otros, y cada tipo de recurso interpreta la ruta a su manera. (Estrictamente hablando, la información delnombre_vinculoy lapalabra_a_buscarincluidos en los atributosnameyhrefen los ejemplos anteriores son parte del URL. Se presentan como entidades separadas por simplicidad.) Note que cada tipo de recurso se relaciona a un tipo específico de servidor. Los dos puntos seguidos por un puerto TCP entero es opcional, y es usado cuando un servidor está escuchando en un puerto no estándar.Una descripción más completa de los URLs se presenta en http://www.w3.org/Addressing/
Encabezados
<h1>. . .</h1>Encabezado o título más prominente<h2>. . .</h2><h3>. . .</h3><h4>. . .</h4><h5>. . .</h5><h6>. . .</h6>Encabezado o título menos prominente
Este código... ...da como resultado <H1>Cabecera 1</H1> Cabecera 1
<H2>Cabecera 2</H2> Cabecera 2
<H3>Cabecera 3</H3> Cabecera 3
<H4>Cabecera 4</H4> Cabecera 4
<H5>Cabecera 5</H5> Cabecera 5
<H6>Cabecera 6</H6> Cabecera 6
Estilos lógicos
<em>. . .</em>- Énfasis
<strong>. . .</strong>- Énfasis mayor
<code>. . .</code>- Despliega una directiva HTML
<samp>. . .</samp>- Incluye salida ejemplo
<kbd>. . .</kbd>- Despliega una tecla del teclado
<var>. . .</var>- Define una variable
<dfn>. . .</dfn>- Despliega una definición (no soportado ampliamente)
<cite>. . .</cite>- Despliega una cita
Estilos físicos
<b>. . .</b>- Negritas
<i>. . .</i>- Itálicas
<u>. . .</u>- Subrayado
<tt>. . .</tt>- Tipo de letra de máquina de escribir
Este código... ...da como resultado Esta <B>palabra</B> está en <B>negrilla</B> Esta palabra está en negrilla Esta <I>palabra</I> está en <I>itálica</I> Esta palabra está en itálica Esta <U>palabra</U> está <U>subrayada</U> Esta palabra está subrayada Lista de definiciones/glosario: <dl>
<dl><dt>Primer término a definir<dd>Definición del primer término<dt>Siguiente término a definir<dd>Siguiente definición</dl>
- El atributo
compactde la etiqueta<dl>puede ser usado para generar una lista de definiciones requiriendo menos espacio.
Presentando una lista sin ordenar: <ul>
Atributos:
<ul><li>Primer objeto de la lista<li>Siguiente objeto de la lista</ul>
<ul type=disc¦circle¦square>- Especifica el tipo de marca entre los diferentes niveles identados. Las marcas pueden ser discos, círculos o cuadrados.
<li type=disc¦circle¦square>- Se puede especificar el tipo de marca por cada elemento en la lista.
Presentando una lista ordenada: <ol>
Atributos:
<ol><li>Primer objeto de la lista<li>Siguiente objeto de la lista</ol>
<ol type=A¦a¦I¦i¦1>- Especifica el tipo de numeración a emplear en las listas ordenadas. Los tipos de numeración son: letras mayúsculas, letras minúsculas, numerales romanos grandes, numerales romanos pequeños, y el valor por omisión, números.
<ol start=numero>- Especifica el valor donde comienza la lista ordenada. El valor por omisión es 1.
<li type=A¦a¦i¦1 start=numero>- Se puede especificar el tipo de numeración y el comienzo por cada elemento en la lista.
Presentando un menú interactivo: <menu>
<menu><li>Primer objeto de la lista<li>Siguiente objeto</menu>Presentando una lista directorio de objetos: <dir>
La longitud de los objetos debe ser menor a 20 letras.
<dir><li>Primer objeto de la lista<li>Segundo objeto de la lista<li>Siguiente objeto de la lista</dir>
Entidades
Ejemplos:
&palabra_clave;- Muestra una letra en particular identificado por una palabra especial. Note que el punto y coma siguiendo a la palabra clave es requerido, y la palabra clave debe ser una de la lista presentada en:
- http://www.w3.org/MarkUp/html-spec/html-spec_13.html
á -- áé -- éí -- íó -- óú -- úÁ -- ÁÉ -- ÉÉ -- ÍÓ -- ÓÚ -- Úñ -- ñÑ -- Ñ& -- &< -- <> -- >® -- ®© -- ©
&#equivalente_ascii;- Usa un caracter literalmente. Note de nuevo que el punto y coma siguiendo al valor numérico ASCII es requerido.
Interface de formas HTML
La interface de formas HTML permite a los creadores de documentos definir documentos HTML conteniendo formas para ser llenadas por los usuarios. Cuando un usuario llena la forma y presiona un botón indicando que la forma debe ser "presentada", la información en la forma es enviada a un servidor para ser procesada. El servidor generalmente preparará un documento HTML usando la información proporcionada por el usuario y la regresará al cliente para ser desplegada.Las siguentes etiquetas implementa la interface de formas:
Las últimas cuatro etiquetas solamente pueden ser usadas dentro del elemento
<form>. . .</form><input><select>. . .</select><option><textarea>. . .</textarea><form>. . .</form>.
Define una forma
<form>. . .</form>Define una forma en un documento HTML. Un documento puede contener múltiples elementos
<form>, pero elementos<form>no pueden estar anidados. Note que las etiquetas de no-formas pueden ser usados dentro de un elemento<form>. Atributos y sus argumentos:
action:- La localización URL del programa que procesará la forma.
method:Uno degetopost- El método escogido para intercambiar datos entre el cliente y el programa iniciado al procesar la forma.
postes preferido para la mayoría de las aplicaciones.
- Ejemplo:
<form action="http://kuhttp.cc.ukans.edu/cgi-bin/register" method=post>...</form>
Define un campo de entrada
<input>(No hay etiqueta para finalizar)Define un campo de entrada donde el usuario puede introducir información en la forma. Cada campo de entrada asigna un valor a una variable que tiene un
nameespecificado y untypede datos especificado. Atributos y sus argumentos:
type- Especifica el tipo de datos para la variable.
type="text"ytype="password"aceptan datos de caracterestype="checkbox"es seleccionado o notype="radio"permite la selecció de uno o varios campos de radio, si todos tienen el mismo nombre de variabletype="submit"es un botón de acción que manda la forma completada al servidortype="reset"es un botón que cambia las variables de la forma a sus valores por omisiónname"texto"dondetextoes un nombre simbólico (no mostrado) identificando la variableinputcomo en:<input type="checkbox" name="caja1">value"texto"donde la función detextodepende del argumento detype.
- Para
type="text"otype="password", textoes el valor por omisión para la variableinput.- Si
type="checkbox"otype="radio", textoes el valor de la variable input cuando esta "marcada".- Para
type="reset"otype="submit", textoes una etiqueta que aparecerá en el botón de presentació o de reinicio en lugar de las palabras"submit"y"reset.checked- Sin argumentos. Para
type="checkbox"otype="radio", sicheckedestá presente el campoinputestá marcado por omisión.sizeanchodondeanchoes un valor entero representando el número de caracteres permitidos para los campos deinput type="text"otype="password".maxlengthlongituddondelongitudes el número de caracteres aceptados portype="text"otype="password". Este atributo es válido solamente para líneas sencillas de campos"text"o"password".Define un campo de selección
<select>. . .</select>Define y despliega un conjunto de objetos opcionales de una lista de la cual el usuario puede seleccionar uno o más objetos. Este elemento requiere de un elemento
<option>para cada objeto en la lista. Atributos y sus argumentos:
name"texto"dondetextoes el identificador simbólico para la variable del camposelect.size- El argumento para
sizees un valor entero representando el número de objetos<option>que serán desplegados al mismo tiempo.multiple- Sin argumentos. Si está presente, el atributo
multiplepermite la selección de más de un valor<option>.Define una opción en un campo de selección
optionDentro del elemento
<select>las etiquetas<option>son usadas para definir los posibles valores para el camposelect. Si el atributoselectedestá presente entonces el valoroptiones seleccionado por omisión. En el siguiente ejemplo las tres opciones pueden ser escogidas pero los plátanos son escogidos por omisión.
<select multiple>
<option>Manzanas
<option selected>Plátanos
<option>Cerezas
</select>
Define un área de texto
<textarea>. . . texto por omisión . . .</textarea>Define un campo rectangular donde el usuario puede introducir datos en forma de texto. Si el "texto por omisión está presente, será desplegado cuando el campo aparezca. De otra manera el campo estará en blanco. Atributos y sus valores:
name"texto"dondetextoes un nombre simbólico que identifica la variable<textarea>rowsycols- Ambos atributos toman un valor entero que representa las líneas y número de caracteres por líneas en el
<textarea>a ser desplegados.Misceláneos
<!--texto-->- Coloca un comentario en el archivo HTML fuente
<address>...</address>- Presenta información de la dirección
<img src="URL" alt="texto alternativo">- Introduce una imagen en el documento. Atributos:
src- Especifica la localización de la imagen
alt- Permite que una cadena de texto sea puesta en lugar de la imagen en clientes que no pueden mostrar imágenes
<imgalign=left¦right¦top¦texttop¦middle¦absmiddle¦baseline¦bottom¦absbottom>- Especifica una relación con el texto circundante. Los atributos
leftyrightpermiten que la imagen se alinea a la izquierda o a la derecha, y el texto siguiente "envuelva" a la imagen.El atributo
topalinea la imagen al tope del más alto objeto en la línea, y es equivalente atexttop, el cual alinea la imagen al tope del más alto texto en la línea.El atributo
middlealinea la base de la línea actual con la parte media de la imagen, y es equivalente aabsmiddle, que alinea la parte media de la línea actual con la parte media de la imagen.Los atributos
baseline, bottomson equivalentes, y alinean el tope inferior de la imagen con la base de la línea actual; estos atributos son semejantes aabsbottom, que alinea el tope inferior de la imagen con el tope inferior de la línea actual.<img width=numero height=valor>- Determina el tamaño de la imagen a desplegar.
<img border=numero>- Permite especificar el ancho del borde que circunda las imágenes desplegadas
<img vspace=numero hspace=numero>- Especifican el espacio vertical y horizontal en pixeles entre el texto y las imágenes.
<img ismap>- Si
ismapestá presente y la etiqueta de la imagen se encuentra dentro de un ancla, se podrá hacer "clic" en la imagen. Las coordenadas (por pixel) del cursor se añadirán al URL especificado en el ancla si el usuario hace clic en la imagen ismap. El URL resultante tomará la forma "URL?m,n" donde m y n son coordenadas enteras.<br>- Fuerza un salto de línea inmediatamente y conserva el mismo estilo.
<br clear=left¦right¦all>- El salto de línea se realiza hasta que ya no exista una imagen alineada a la izquierda, a la derecha, o en ambos márgenes.
<wbr>- Señala donde puede se permite romper una palabra si se necesita insertar.
<hr>- Coloca una regla horizontal o separador entre secciones de texto. Atributos:
<hr size=numero>- Permite indicar que tan delgada es la regla horizontal
<hr width=numero¦porcentaje>- La regla horizontal es, por omisión, del ancho de la página. Con este atributo se puede especificar un ancho exacto en pixeles, o una anchura relativa medida en porcentaje del ancho del documento.
<hr align=left¦right¦center>- Especifica la alineación de la regla. Solamente es útil si se cambia el ancho de la regla con el atributo anterior.
<hr noshade>- Barra sólida, sin sombreado.
<nobr>...</nobr>- Especifica que un texto no puede tener saltos de línea insertados.
<font size=numero>...</font>- Especifica el tamaño del tipo de letra. Los números válidos son del 1 al 7. El tamaño por omisión es de 3.
<font size=+¦-numero>...</font>- Especifica un incremento o decremento del tamaño de la letra, relativo al tamaño de la letra por omisión del documento.
<basefont size=numero>...</basefont>- Permite cambiar el tamaño de la letra por omisión del documento.
<center>...</center>- Especifica el centrado de texto o imágenes.
<blink>...</blink>- El texto que se encuentra dentro de esta etiqueta parpadea.
Tablas
<table>...</table>- Especifica una tabla. Las siguientes etiquetas y atributos solamente tienen significado dentro de las etiquetas que especifican la tabla.
<tr>...</tr>- Especifica una fila de la tabla.
<td>...</td>- Especifica los datos que contiene la tabla.
<th>...</th>- Indica el texto que forma el encabezado de la tabla
<caption>...</caption>- Establece el título de la tabla.
- Atributos:
border=numero- Establece si aparece o no un borde alrededor de las celdas de la tabla, y cual es el grosor del borde.
align=top¦bottom- Dentro de la etiqueta
caption, establece la ubicación del título de la etiqueta, ya sea en la parte superior o inferior de la tablaalign=left¦center¦right- Establece la ubicación de los datos dentro de las celdas. Funciona dentro de las etiquetas
tr, thytd.valign=top¦middle¦bottom¦baseline- Especifica la alineación vertical de los datos
nowrap- Establece que las líneas contenidas en las celdas afectadas no se pueden romper para ajustarse al ancho de las celdas.
colspan=numero- Indica cuántas columnas ocupa la celda.
rowspan=numero- Indica cuántas líneas ocupa la celda.
cellspacing=numero- Indica el espacio insertado entre las celdas individuales de una tabla
cellpadding=numero- Establece el espacio entre el borde de la celda y el contenido de la celda.
width=numero¦porcentaje- Establece el ancho de la tabla o de las celdas especificadas en un valor en pixeles o en porcentaje con respecto al ancho del documento.
|
|
A B C D E F G H I J L M N O P R S T U V W X Z
[Fíjate que este abecedario constituye un ejemplo de URL relativa o marcadores de esta misma página]
Analógico.- Representación de la información mediante una señal que varía de tamaño o intensidad constantemente. (Lo contrario a digital).
Ancho de banda.- Cantidad de información que puede transmitirse a través de una conexión por unidad de tiempo. Se suele medir en bits por segundo.
ANSI.- (American National Standards Institute) Organismo americano dedicado a la normalización. Por lo que nos ocupa, desarrolló un standard para representación de información en la pantalla, en el terminal. Una BBS en modo ANSI o modo terminal, sería en modo texto.
APPLET.- Aplicacion escrita en JAVA y compilada.
ARPANET.- Advanced Research Projects Agency Network. Red de la Agencia de Proyectos de Investigación Avanzada. Red militar Norteamericana a traves de lineas telefónicas de la que posteriormente derivó Internet.
Archie.- Protocolo que sirve para localizar un archivo en algún servidor FTP. También suelen llevar este nombre los programas que utilizan el protocolo.
ASCII.- American Standard Code for Information Interchange. Estandar Americano para Intercambio de Informacion. La tabla basica de caracteres ASCII esta compuesta por 128 caracteres incluyendo simbolos y caracteres de control. Existe una version extendida de 256
Asíncrona.- Tipo de comunicación donde cada byte se transmite del emisor al receptor de modo independiente. Es la que utilizan los módems, por ejemplo.
ASN.- Autonomus System Number. Número de sistema autónomo. Grupo de Routers y redes controlados por una única autoridad administrativa.
ATM.- Asyncronous Transmision Mode. Modo de Transmisión Asíncrona. Sistema de tranmision de datos usado en banda ancha para aprovechar al maximo la capacidad de una linea. Se trata de un sistema de conmutacion de paquetes que soporta velocidades de hasta 1,2 Gbps.
Autopista de la información.- Expresión que acuñó Al Gore, vicepresidente de EE.UU., refiriéndose a Internet en especial, pero que engloba todos los servicios Online.
Backbone.- Línea de alta velocidad o conjunto de conexiones que distribuyen el tráfico de paquetes a otras de menor capacidad, por ello suelen ser troncales.
Baudio.- Número de veces por segundo que la señal portadora cambia de valor. Se suele confundir con los bps. Un ejemplo para clarificarlo : Un módem de 14.400 bps puede estar funcionando a 1800 baudios, ya que es capaz de codificar 8 bits en cada cambio de valor de la señal.
BBS.- (Bulletin Board System) Traducido, en ocasiones, como tablero electrónico. Es un sistema informático que ofrece una serie de servicios a sus usuarios : mensajería electrónica, ficheros, teleconferencias, información, etc.
Binhex.- (BINary HEXadecimal). Algoritmo que permite codificar información binaria en formato ASCII de siete bits (el que utilizan los PCs). Se emplea en el correo electrónico para los caracteres especiales como letras acentuadas, la ñ, etc. Hay que recordar que el ASCII está basado en el inglés.
BIOS.- Basic Input Output System. Sistema Básico de Entrada/Salida. Programa residente normalmente en Eprom que controla la iteracciones básicas entre el hardware y el Software.
BIT.- (Binary Digit). Digito Binario. Unidad mínima de información, puede tener dos estados "0" o "1".
Bookmark.- Marca. Anotación normalmente de una dirección WWW o URL que queda archivada para su posterior uso.
Bps.- (Bits por segundo) Unidad de medida para la transmisión de información.
Browser.- Término aplicado normalmente a los programas que permiten acceder al servicio WWW.
Cadena de inicialización.- En inglés "Init String". Grupo de órdenes que envía el programa de comunicaciones al módem a fin de configurarlo.
Callback.- Sistema muy empleado en E.E.U.U. para llamadas internacionales consistente en ( previo abono) llamar a un Tlf. indicar el número con el que queremos contactar y colgar. Posteriormente se recibe una llamada que nos comunica con el número deseado.
Carrier.- Operador de Telefonía que proporciona conexion a Internet a alto nivel.
Caudal.- Cantidad de ocupacion en un ancho de banda. Ej. En una linea de 1Mbps. puede haber un caudal de 256Kbps. con lo que los 768Kbps. restantes de el ancho de banda permanecen desocupados.
Cracker.- Individuo con amplios conocimientos informaticos que desprotege/piratea programas o produce daños en sistemas o redes.
Chat.- Conversación electrónica en tiempo real a través de teclado y monitor. Puede establecerse entre 2 o más usuarios. En castellano se puede ver traducido como teleconferencia.
CD.- Compact Disc. Disco Compacto. Disco Optico de 12 cm de diametro para almacenamiento binario. Su capacidad "formateado" es de 660 Mb. Usado en principio para almacenar audio. Cuando se usa para almacenamiento de datos genéricos es llamado CD-ROM.
CGI.- Common Gateway Interface. Interface de Acceso Común. Programas usados para hacer llamadas a rutinas o controlar otros programas o bases de datos desde una página Web. También pueden generar directamente HTML.
Ciberespacio.- Conjunto de todos los servicios telemáticos existentes, entre los cuales destaca especialmente Internet.
CIR.- Commited Information Rate. Es el Caudal mínimo de información que garantiza el operador telefónico al cliente (normalmente el proveedor de acceso) el resto del ancho de banda esta pues sujeto al estado de la red y las necesidades del operador telefónico.
Cliente-servidor.- Arquitectura de comunicación remota entre programas. El cliente solicita datos al servidor y los ejecuta. No es necesario que estén ejecutándose los dos a la vez. Se utiliza en Internet, Eudora, por ejemplo, es un programa-cliente para recoger, enviar y gestionar correo electrónico.
Conferencia o fórum.- Área de una BBS o servicio telemático que versa sobre un tema. Se dejan mensajes públicos, que lee toda persona que se baja la conferencia.
COOKIE.- Pequeño trozo de datos que entrega el programa servidor de HTTP al navegador WWW para que este lo guarde. Normalmente se trata de informacion sobre la conexion o los datos requeridos, de esta manera puede saber que hizo el usuario en la ultima visita.
Correo electrónico.- (e-mail) Intercambio de mensajes entre usuarios de una red de ordenadores, sea por cable (LAN, etc) o telemática (Internet, Compuserve, etc). En principio, sólo es texto y de carácter privado. Pero a los mensajes se les puede vincular ficheros de cualquier tipo y enviarlos juntos. Para poder enviar o recibir correo en Internet necesitamos un buzón o dirección electrónica.
DialUp.- Acción de llamar un módem a otro módem a través de la RTC (Red Telefónica Conmutada, la que usamos todos).
Digital.- Representación de información de modo binario (2 estados). Es la que utilizan los ordenadores.
DNS.- (Domain Name Service) Servicio que traduce los nombres como platea.pntic.mec.es a su verdadero identificativo o dirección IP 193.144.238.1, y viceversa.
Domain.- Dominio. Sistema de denominacion de Hosts en Internet. Los dominios van separados por un punto y jerarquicamente estan organizados de derecha a izquierda. ejp: pntic.mec.es
Dominio.- Permite identificar un ordenador o conjunto de ellos. Este nombre está estructurado siguiendo una jerarquía. por ejemplo : mail.intercom.es. Mail = servidor de correo, intercom =empresa y es= España.
Download.- Literalmente "Bajar Carga". Se refiere al acto de transferir un fichero/s desde un servidor a nuestro ordenador. En español: " bajarse un programa ".
DUPLEX.- Capacidad de un dispositivo para operar de dos maneras. En comunicaciones se refiere normalmente a la capacidad de un dispositivo para recibir/transmitir. Existen dos modalidades HALF-DUPLEX: Cuando puede recibir y transmitir alternativamente y FULL-DUPLEX cuando puede hacer ambas cosas simultaneamente.
DVD.- Digital Video Disk. Nuevo estandar en dispositivos de almacenamiento masivo con formato de CD pero que llega a 17 GB de capacidad.
E-ZINE.- Electronic Magazine. Revista Electrónica. Cualquier revista producida para su difusión por medios informáticos, pricipalmente por Internet.
E-mai.-l Electronic Mail. Correo Electrónico. Sistema de mensajeria informática similar en muchos aspectos al correo ordinario pero muchisimo mas rapido.
FAQ.- (Frequently Asked Questions). Documento que recoge las preguntas más frecuentes sobre un tema y, por supuesto, las respuestas.
FAT.- File Allocation Table. Tabla de Localizacion de Ficheros. Sistema de organización de ficheros en discos duros. Muy usado en PC.
FDDI.- (Fiber Distributed Data Interface) Norma que permite transferir datos a través de fibra óptica a altísima velocidad (100 Mbps).
Finger.- Protocolo que permite saber quién está registrado en un ordenador de Internet, o quien está conectado. Por razones de seguridad puede estar desactivado.
Frame.- Estructura. Tambien trama de datos. En Browsers de WWW como Netscape se refiere a una estructura de sub-ventanas dentro de un documento HTML.
Frame Relay.- Protocolo de enlace mediante circuito virtual permanente muy usado para dar conexion directa a Internet.
FTP.- (File Transfer Protocol). Protocolo empleado para la transferencia de ficheros en una red TCP/IP. Requiere de identificación del usuario. En Internet hay los FTP anónimos, donde el usuario utiliza el genérico "anonymous" y como password su dirección electrónica. También se llama así el programa cliente para este servicio (ejemplo : CuteFTP), aunque los navegadores como Netscape también pueden utilizar este servicio en la mayoría de los servidores FTP.
Gateway.- Elemento hardware y/o software con capacidad para traducir un protocolo de alto nivel a otro.
GIF.- Graphics Interchange Format. Formato Grafico de Intercambio.
GIX.- Global Internet Exchange. Intercambio Global Internet.
GMT.- Greenwich Mean Time. Hora de Referencia de Greenwich. Equivalente a UT.
GSM.- Global System Mobile comunications. Sistema Global de Comunicaciones Moviles. Sistema digital de telecomunicaciones pricipalmente usado para telefonia movil. Existe compatibilidad entre redes por tanto un telefono GSM puede funcionar teóricamente en todo el mundo. En EEUU esta situado en la banda de los 1900MHZ y es llamado DCS-1900.
GT.- Global Time. Tiempo Global. Sistema horario de referencia en Internet.
GUI.- Graphic User Interface. Interface Gráfico de Usuario.
Gateway.- Prueta de Acceso. Dispositivo que permite conectar entre si dos redes normalmente de distinto protocolo o un Host a una red. En Español: Pasarela.
Gopher.- Protocolo para navegar y buscar información organizada jerárquicamente y presentada en modo texto.
Hacker.- Experto en informática capaz de de entrar en sistemas cuyo acceso es restringido. No necesariamente con malas intenciones.
Hayes.- Marca de módems y lenguaje de comandos para manejar los módems. La mayoría de modelos son compatibles con éste y es reconocido como estándar del mercado.
Header.- Cabecera. Primera parte de un paquete de datos que contiene información sobre las caracteristicas de este.
Hit.- Literalmente "golpe". Se usa para referirse a cada vez que un link es pulsado en una página WEB.
Homepage.- Página principal o inicial de un sitio WEB.
Host.- Ordenador que gestiona servicios para ser utilizados por el resto de máquinas conectadas a la red. En un host encontraremos ficheros, servidores de correo, de Webs, etc, etc.
HTML.- HyperText Markup Language. Lenguaje de Marcas de Hypertexto. Lenguaje para elaborar paginas Web actualmente se encuentra en su versión 4. Fue desarrollado en el CERN. Gracias a él ves esta página.
HTTP.- HyperText Transfer Protocol. Protocolo de Tranferencia de Hypertexto. Protocolo usado en la WWW para transmitir páginas Web.
Host.- Ordenador conectado a Internet. Ordenador en general. Literalmente anfitrión.
Iberpac.- Red de Telefonica para la transmisión de datos en forma de paquetes,(normalmente en X-25) principalmente de uso corporativo.
Ibernet.- Red española gestionada por telefónica con protocolo IP. Es la subred Internet española.
Infovía.- Servicio de Telefónica, con contenidos y proveedores de información en línea. Una de las características más importantes es que llamando al 055 se paga tarifa de llamada local, ¡¡desde cualquier lugar o pueblo de España !!. A través de Infovía se puede entrar en Internet y este es el medio más habitual (tarifas: horario normal > 139 ptas/hora y horario reducio > 106 ptas/hora )
Internet.- INTerconnected NETworks. La red de redes.
INTRANET.- Se llaman asi a las redes tipo Internet pero que son de uso interno, por ejemplo, la red corporativa de una empresa que utilizara protocolo TCP/IP y servicios similares como WWW.
IP address.- Expresión compuesta por cuatro números separados por puntos y que designan de manera unívoca a un ordenador en la Internet. Para que no sea un caos, estos números los coordina una sociedad llama InterNIC. IP (Internet Protocol) es el protocolo que permite conectarse dos ordenadores.
IRC.- Internet Relay Chat. Canal de Chat de Internet. Sistema para transmisión de texto multiusuario a traves de un servidor IRC. Usado normalmente para conversar on-line tambien sirve para tranmitir ficheros.
ISDN.- Integrated Services Digital Network. Red Digital de Servicios Integrados. En español RDSI.
ISP.- Internet Service Provider. Proveedor de Servicios Internet.
JAVA.- Lenguaje de programacion orientado a objeto parecido al C++. Usado en WWW para la telecarga y telejecucion de programas en el ordenador cliente. Desarrollado por Sun microsystems.
JAVASCRIPT.- Programa escrito en el lenguaje script de Java que es interpretado por la aplicacion cliente, normalmente un navegador (Browser).
JPEG.- Join Photograph Expert Group. Union de Grupo de Expertos Fotográficos. Formato gráfico con pérdidas que consigue elevados ratios de compresión.
LAN.- (Local Área Network) Red de Área Local. Como su nombre indica, es una red de ordenadores de tamaño pequeño/medio localizada en un edificio (como máximo). Se conectan los ordenadores a través de tarjetas de red, y las arquitecturas más conocidas son Ethernet y Token-Ring.
Link.- Enlace. Unión. Se llama asi a las partes de una página WEB que nos llevan a otra parte de la misma o nos enlaza con otro servidor.
Línea dedicada.- Línea telefónica que une permanentemente dos puntos. Ofrecen una mayor velocidad que un módem (64 kbps, 256 kbps... hasta Gbps)... una de sus variantes es la más conocida y utilizada por los proveedores de Internet : la línea punto a punto.
Linux.- Version Shareware del conocido systema operativo Unix. Es un sistema multitarea multiusuario de 32 bits para PC.
Login.- Nombre o identificativo de usuario en un sistema remoto. También log in : acción de conectarse a un ordenador.
Mailing list.- Direcciones de correo electrónico donde puedes suscribirte a recibir noticias sobre determinados temas. Se utiliza el e-mail para recoger y mandar las noticias. Las más populares listas de correo las encontraremos por listserv.
Majornet.- Red de correo entre las BBS que corren bajo el software WorldGroup o The Major BBS (ambos de Galacticomm). Internet no es la única red de correos... también es muy conocida y de ámbito mundial : Fidonet (Fido en la jerga de los cibernautas).
MIME.- (Multipurpose Internet Mail Extensions). Extensiones Multipropósito que permiten que cuando enviemos un e-mail con un fichero binario vinculado, éste fichero llegue en su formato original. (ver Uuencode/Uudecode).
MMX.- Multi Media eXtensions. Extensiones Multimedia. Juego de instrucciones extra que incorporan los nuevos microprocesadores Pentium orientado a conseguir una mayor velocidad de ejecución de aplicaciones que procesan o mueven grandes bloques de datos
Módem.- (Modulador, DEModulador) Periférico que permite transmitir datos entre dos ordenadores a través de una línea telefónica. Hoy en día, por precio y características, se recomiendan los módems de alta velocidad, de 14400 bps en adelante. También la mayoría tienen las normas para envío y recepción de fax.
MPEG.- Motion Pictures Expert Group. Grupo de Expertos en Imagen en Movimiento. Formato gráfico de almacenamiento de video. Utiliza como el JPEG compresión con perdidas alcanzando ratios muy altos.
MS-DOS.- Microsoft Disk Operating System. Sistema Operativo en Disco de Microsoft. Sistema operativo muy extendido en PC del tipo de linea de comandos.
MTU.- Maximum Transmission Unit. Unidad Maxima de Transmision. Tamaño máximo de paquete en protocolos IP como el SLIP.
Navegador.- Aplicado a los programas usados para conectarse al servicio WWW: Netscape Comunicator, Internet Explorer, Mosaic, Opera
NET.- Red
Netiquette.- Etiqueta de la RED. Formas y usos comunes para el uso de los servicios de Internet. Las normas de educación de los usuarios de Internet.
Netizen.- Ciudadano de la Red.
Netscape.- El nombre del navegador más utilizado de la red. Otros navegadores son : Mosaic, el Internet Explorer y Opera
NEWS.- Noticias. Servicio de Internet con una estructura de "tablon de anuncios" dividido en temas y paises en los que los usuarios con intereses comunes dejan o responden a mensajes relacionados con el mencionado grupo.Tienen sus propios servidores, su propio protocolo (NNTP) y sus propios programas-clientes (el más conocido : Free Agent).
Newsgroups.- Los distintos grupos de noticias de las News
Nick.- Nombre o pseudónimo que utiliza un usuario de IRC.
Nodo.- Por definicion punto donde convergen mas de dos lineas. A veces se refiere a una única máquina en Internet.
OEM.- Original Equipament Manufactured. Manufactura de Equipo Original. Empresa que compra un producto a un fabricante y lo integra en un producto propio. Todos los fabricantes por ejemplo, que incluyen un Pentium en su equipo actuan como OEM.
Offline.- Modo de interactuar con los servicios Online (BBS, Internet, etc), de tal manera que en el disco local tenemos la información que necesitamos, la manipulamos sin necesidad de estar conectados y la enviamos cuando queremos. Nuestra BBS se puede configurar para trabajar Offline, Eudora y FreeAgent no necesitan estar conectados para leer el correo o las news, ni para redactar mensajes.
OS2.- Operating System 2. Sistema operativo de 32 bits multitarea creado por IBM. Creado para PC con entorno gráfico de usuario. La version actual es la 4 la cual soporta ordenes habladas y dictado.
Paquete.- Cantidad minima de datos que se transmite en una red o entre disposi tivos. Tiene una estructura y longitud distinta segun el protocolo al que pertenezca. Tambien llamado TRAMA.
PGP.- Pretty Good Privacity. Paquete de encriptacion basado en clave publica escrito por Phil Zimmerman.
Phracker.- Pirata informatico que se vale de las redes telefonicas para acceder a otros sistemas o simplemente para no pagar telefono.
PING.- Packet INternet Groper. Rastreador de Paquetes Internet. Programa utilizado para comprobar si un Host esta disponible. Envia paquetes de control para comprobar si el host esta activo y los devuelve.
POP.- (Post Office Protocol). Es el que se utiliza para configurar los servidores de correo. Nuestro POP server es el encargado de recibir el correo.
PPP.- (Point to Point Protocol). Protocolo de bajo nivel que permite transferir paquetes de información a través de una línea asíncrona o síncrona. Es capaz de optimizar el uso de la línea mediante conexión y desconexión dinámica, es la conexión más rápida para Internet y la utilizada por casi todos los proveedores. El PPP es el programa que llama por teléfono, como puede ser el Trumpet Winsock, el ConfigPPP del MacOS o el Acceso Telefónico a Redes de Windows 95 (Tipo de Servidor PPP).
Protocolo.- Conjunto de normas técnicas que regulan las comunicaciones entre ordenadores.
Proveedor.- Empresa que está conectada con una línea de alta velocidad a Internet, y que permite el acceso a sus usuarios mediante módem, líneas dedicadas, etc. También puede ofrecer servicios como servidor de ficheros, de páginas Web, asesoría sobre comunicaciones, etc.
PROXY.- Servidor Cache. El Proxy es un servidor de que conectado normalmente al servidor de acceso a la WWW de un proveedor de acceso va almacenando toda la informacion que los usuarios reciben de la WEB, por tanto, si otro usuario accede a traves del proxy a un sitio previamente visitado,recibira la informacion del servidor proxy en lugar del servidor real.
Puerto.- Todas las conexiones y diálogos TCP/IP se llevan a cabo sobre estos, y cada protocolo para su uso tiene definido un puerto estándar.
RDSI.- (Red Digital de Servicios Integrados) Red que da soporte a varios canales digitales. La RDSI básica tiene 2 de 64 kbps y uno de 16 kbps para señales de control. Ideal para imagen, sonido y multimedia.
Router.- Dispositivo físico o lógico que permite encaminar la conexión entre redes TCP/IP, es el encargado de que los paquetes de información lleguen a su destino.
RWIN.- Receive Window. Ventana de recepcion. Parametro de TCP que determina la cantidad máxima de datos que puede recibir el ordenador que actúa como receptor.
Servidor.- Ordenador que suministra información a otros ordenadores, los cuales ejecutan los programas clientes.
SLIP.- (Serial Line Internet Protocol) Protocolo que permite transferir paquetes TCP/IP, permite sólo transmisión asíncrona, direcciones IP, no tiene detección de errores y está menos optimizado que el PPP.
SMTP.- (Simple Mail Transfer Protocol) Protocolo para transferir correo electrónico a través de Internet.
SNMP.- (Simple Network Management Protocol) Protocolo que se encarga del direccionamiento de red, se utiliza para grandes redes.
SysOp.- (System Operator) Persona responsable de la configuración, mantenimiento, actualización y seguridad de un sistema telemático.
TCP/IP.- (Transmission Control Protocol/Internet Protocol) Conjunto de protocolos de bajo nivel (IP, TCP, UDP, ICP, RARP, etc) que permiten el funcionamiento de Internet.
Telemática.- De Telecomunicaciones e Informática. Se refiere a las comunicaciones por ordenador.
Telnet.- Protocolo y programas que permite la conexión remota a otro ordenador. Igual que FTP, viene del UNIX (sistema operativo multitarea y multiusuario).
Time-out.- Parametro que indica a un programa el tiempo máximo de espera antes de abortar una tarea o función. Tambien mensaje de error.
TTL.- Time To Live.Tiempo de Vida. Contador interno que incorporan los paquetes Multicast y determinan su propagacion.
UART.- (Universal Asynchronous Receiver/Transmitter) Circuito integrado en el módem o en la controladora del puerto de comunicaciones que pasa los datos del ordenador al módem (de digital y paralelo a analógico y serial) y viceversa.
UNIX.- Sistema operativo multitarea, multiusuario. Gran parte de las caracteristicas de otros sistemas mas conocidos como MS-DOS estan basadas en este sistema muy extendido para grandes servidores. Internet no se puede comprender en su totalida sin conocer el Unix, ya que las comunicaciones son una parte fundamental en Unix.
URL.- (Uniform Resource Locator) Denominador y dirección de los recursos de Internet. Ejemplos : http ://www.intercom.es o ftp://ftp.funet.fi
USB.- Universal Serial Bus. Bus Serie Universal.
UUCP.- (Unix to Unix Copy Program) Protocolo de AT&T para transferir archivos entre máquinas UNIX. Muy utilizado para copiar news y correo electrónico, aunque tiende a desaparecer y queda reservado a uso local.
Veronica.- (Very Easy Rodent Oriented Net-wide Index to Computerized Archives) Localizador de servidores Gopher.
VR.- Virtual Reality. Realidad Virtual.
VRML.- (Virtual Reality Markup Language) Lenguaje para representar mundos virtuales en 3D a través de Internet. Hace falta el programa cliente adecuado para visualizarlos e interactuar con ellos.
WAIS.- (Wide Area Information Servers) Se trata de un método de búsqueda indexada de información (texto, gráficos, sonido). El resultado de la búsqueda muestra una lista de artículos ordenada por el grado de similitud con el ítem buscado.
WAN.- (Wide Área Network) Red de ordenadores extensa, se entiende que va más allá de un edificio.
WEB, WWW o W3.- El verdadero impulsor de la revolución Internet. Es el conjunto de recursos que pueden ser accedidos por los programas clientes llamados navegadores o browsers. Se caracteriza por la amigabilidad, facilidad de uso y espectacularidad de su presentación hipermedia.
Webcam.- Cámara conectada a una página WEB a traves de la cual los visitantes pueden ver imagenes normalmente en directo.
WINDOWS.- Pseudo sistema operativo. Más bien se trata de un entorno gráfico con algunas capacidades multitarea. La version actual WINDOWS 95 funciona parcialmente a 32 bits.
WorldGroup Manager.- Software de BBS líder en EE.UU., y que es utilizado por Intercom para su completo servicio Online.
WWW, WEB o W3 World Wide Web.- Telaraña mudial, para muchos la WWW es Internet, para otros es solo una parte de esta. Podriamos decir estrictamente que la WEB es la parte de Internet a la que accedemos a través del protocolo HTTP y en consecuencia gracias a Browsers normalmente gráficos como Netscape.
Warez.- Software pirata. Programas comerciales originales, que son distribuidos de forma gratuita en la Red. Bajarse estos programas es ilegal.
X25.- Protocolo de transmisión de datos muy usado en Iberpac. Establece circuitos virtuales, enlaces y canales.
ZIP.- Extensión de los ficheros comprimidos más usados en Internet. Un programa para manejarlos: WinZip
RECURSOS
Manuales de HTML
Webmaestro: Uno de los más completos manuales en castellano sobre HTML. (http://wmaestro.com/webmaestro)Tejedores del WEB: Otro interesante manual también en castellano desde el otro lado del charco (http://www.dic.uchile.cl/~manual/)
Editores HTML
Además de los editores que acompañan a los navegadores puedes probar también algún de éstos que están también en castellano.Web Scope: Puedes encontrarlo en http://www.geocities.com/SiliconValley/4966/scope.htm
CastWeb: lo obtendrás en http://personales.mundivia.es/personales/alrodzam/ (Es un programa de 16 bits, válido por tanto para Windows 3.x)
Y si quieres ir probando alguno de los muchos que hay en inglés puedes acudir a algún servidor de programas shareware, como
Solo Windows 95 cuya sección de editores html se encuentra en la página http://ms.ctv.es/SW95/share32/edithtml.html
FTP de la Universidad de Alcalá de Henares http://www.alcala.es/ftpdir/Html.htm
Programas de FTP
Dos programas fáciles de usar y muy eficaces para la transferencia de ficheros son Ws-Ftp y CuteFTP (ambos en inglés). Disponen de versiones de uso gratuito.Ws-Ftp: Consulta su página principal en http://www.ipswitch.com
CuteFTP: La Home Page se encuentra en http://www.cuteftp.com y ya disponen de una versión en español.
Sonidos
WebStore: El almacén de imágenes y sonidos que acompaña al manual Webmaestro. (http://www.wmaestro.com/webstore/index.html)Midis de música clásica: Está claro ¿no?. Su dirección es http://www.prs.net/midi.html
Editores de imagen
Paint Shop Pro: Posiblemente el mejor programa shareware para tratamiento de imágenes. Se puede obtener desde su página http://www.jasc.com o desde una gran cantidad de servidores ftp.Trucos y ayudas para Paint Shop Pro: Desde la propia WEB de PSP (http://www.jasc.com/tips.html) nos ofrecen esta colección de trucos y ayudas y además incluyen enlaces a otras páginas de gran calidad relacionadas con el tema (En inglés pero muy gráfico)
Imágenes
ColorVivo: Una de las clásicas fuentes de recursos gráficos.Almacén de imágenes de Almudena Rueda : Otra sitio español para obtener imágenes (http://intrabuilder.databasedm.es/arueda/)
Gif animados: Para usarlos con prudencia. En http://www6.uniovi.es/gifanim/gifmake1_esp.htm dispones de un tutorial para poder construir tus propios archivos
Nota: Esta página ha sido elaborada por Ignacio Martín Jiménez a partir de diversos tutoriales y recursos de acceso libre en Internet.
vamos a trabajar ahora con frontpage.
Para volver a la página principal
Estructura
básica de un documento HTML
