|
|
|
Contenido: |
|
|
|
El lenguaje HTML |
|
HTML es un lenguaje para definir la estructura de documentos. La mayoría de los documentos tienen estructuras comunes (títulos,
parrafos, listas...) que este lenguaje permite definir mediante "tags" (Etiquetas). Cualquier cosa que no sea una tag es parte
del documento mismo (Lee sobre el origen de HTML en la ayuda de XML).
Este lenguaje no describe la apariencia de un documento sino que ofrece a cada plataforma la información para que le de
formato según su capacidad y la de su navegador (tamaño de la pantalla, fuentes que tiene instaladas, etc.). Por eso es
importante, diseñar los documentos con un contenido claro y bien estructurado que resulte fácil de leer y entender en
cualquier navegador.
Normalmente se utiliza un programa editor para dar formato a los documentos, como Frontpage, Dreamweaver, Amaya, u otro, de modo que no necesitás saber el código interno para crear una página, sin embargo, conviene tener una idea de como se estructura internamente un documento.
Básicamente, los documentos escritos en HTML constan del texto mismo del documento y las "tags" que le dan formato. Por
ejemplo:
<tag> texto del documento </tag>. La tag del principio activa la instrucción, y la última (que será la del principio precedida del signo /) la desactiva. Como HTML no sigue fielmente los estandard del SGML, no
todas las "tags" tienen principio y final pero esto es tema para más adelante.
$
750.00
| $
2,698.90
| $
1,599.99
| $
990.00
|
Volver al comienzo
|
|
Estructura del Documento HTML |
|
Las "tags" que describen la estructura general de un documento y dan una información sencilla sobre él son: <HTML> <HEAD> <TITLE> <BODY>. Estas tags no afectan a la apariencia del documento y solo interpretan y filtran los archivos HTML
Si querés probar, podés copiar estos ejemplos en el block de notas y salvarlo con algún nombre con extensión ".html", despues los abrís con el explorador simplemente haciendo un doble click sobre el archivo. <HTML>: Limitan el documento e indica que se encuentra escrito en este lenguaje. <HEAD>: Especifica el prólogo del resto del archivo. Son pocas las "tags" que van dentro de ella, destacando la del titulo
<TITLE> que será utilizado por los marcadores del navegador e identificará el contenido de la página. Solo puede haber un título por documento, preferiblemente corto aunque significativo, y no caben otras tags dentro de él. En head no hay que colocar nada del texto del documento.
<BODY>: Encierra el cuerpo principal del documento, el contenido.
<HTML>
<HEAD>
<TITLE>Pagina Ejemplo</TITLE>
</HEAD>
<BODY>
Cuerpo del documento...
</BODY>
</HTML>
Volver al comienzo |
|
Estructura de los párrafos |
|
<H1>, <H2>, <H3> son etiquetas de títulos. Le dan al texto el formato predefinido para cada nivel de título. Se pueden definir seis niveles de titulos.
<P>: Párrafos. En principio, sin entrar en detalles de alineación u otras características, digamos que se definen por las tags <P>.....</P>. Esta tag, en un principio, se diseñó para saltar de párrafo por lo que puede ir sola "<P>" al final de un texto indicando que a continuación se quiere una línea en blanco aunque le recomendamos que se acostumbre a utilizarla abriéndola y cerrándola
<BR>: Salto de línea. Esta etiqueta sirve para realizar un salto de linea, puede poner tantas como desee y realizará un salto de línea por cada una de ellas.
Volver al comienzo |
|
Estilos de texto |
|
Estas etiquetas permiten dar formato resaltado a partes del texto, estos son algunos ejemplos, hay muchos más, y la forma en que se representan dependeran de cada navegador:
<B>Texto en negrita</B>.
<I>Texto en italica</I>
<U>Texto subrayado</U>
Se verá en el navegador:
Texto en negrita. Texto en italica. Texto subrayado
<!-- -->: Comentarios. sirve para colocar textos de comentario que nunca se mostrarán a través del navegador y que le servirán para recordatorios en futuras revisiones del documento.
<HTML>
<HEAD>
<TITLE>Pagina ejemplo</TITLE>
</HEAD>
<BODY>
<H1>Mi primera página</H1>
<!-- Este comentario no sera
mostrado por el navegador -->
<P>Esta es un página con titulo, que tiene también un párrafo y unos cuantos saltos de línea.</P>
Uno<br> Dos<br> Tres<br>
</BODY>
</HTML>
Volver al comienzo |
|
Tablas |
|
Las tablas surgieron con la versión HTML 3.0. Las tablas permiten representar y ordenar cualquier elemento en filas y columnas de modo de poder resumir grandes cantidades de información de una manera que puede representarse rápida y fácilmente.
Las tablas se definen fila a fila, celda a celda, comenzando desde la celda superior izquierda. Las columnas se calcularán automáticamente según las celdas que hay en cada fila.
Cada fila de la tabla se indica mediante las tags <tr>.....</tr>. Las tags <th> y <td> con sus correspondientes tags de cierre, indican para indicar las filas individuales dentro de cada fila. Las tags <th>.....</th> indican que se trata de celdas que sirven como encabezado de tabla y suelen visualizarse en negrita. Las tags <td>.....</td> indican que se trata de celdas comunes.
<HTML>
<HEAD>
<TITLE>Ejemplo de Tabla</TITLE>
</HEAD>
<BODY>
<H1>Tablas</H1>
<TABLE BORDER="1">
<TR>
<TH>Caberera 1</TH>
<TH>Caberera 2</TH>
<TH>Caberera 3</TH>
</TR>
<TR>
<TD>Dato 1</TD>
<TD>Dato 2</TD>
<TD>Dato 3</TD>
</TR>
<TR>
<TD>Dato 4</TD>
<TD>Dato 5</TD>
<TD>Dato 6</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Volver al comienzo |
|
Formularios |
|
Los formularios permiten, desde dentro de una presentación web, ingresar información al visitante. Una vez introducidos los valores en los campos habilitados, serán enviados a una URL (normalmente un cgi, php) donde se procesará toda esta información.
La declaración de formulario se delimita por las tags <form>.....</form> y dentro de ellas se recogerán todas las variables de entrada. A la tag de apertura <form> le acompañarán estos atributos:
action="" Entre comillas se indica el programa que va a tratar las variables enviadas con el formulario, un CGI, php, asp, o, simplemente "mailto" que enviará los datos al programa cliente de correo.
Method="" Indica el método de transferencia de las variables. Post, si se envía a través del STDIO. Get, si se envía a través de la URL.
<HTML>
<HEAD>
<TITLE>Formulario ejemplo</TITLE>
</HEAD>
<BODY>
<H1>Formularios</H1>
<FORM ACTION="mailto:mimail@miweb.com" METHOD="POST">
<INPUT TYPE="text" NAME="nombre"><BR>
<INPUT TYPE="submit">
<INPUT TYPE="Reset">
</FORM>
</BODY>
</HTML>
En este ejemplo el formulario abrirá el programa de correo predeterminado para enviar un mensaje, si quisieras procesar estos datos internamente en el servidor, la acción de destino debe ser el nombre del "script" que se hará cargo del trabajo. Por ejemplo <FORM ACTION="mi_proceso.php" METHOD="POST"> Buscá más información sobre como se procesan los datos provenientes de un formulario en la ayuda de php.
Buscá en nuestro shopping de computación, seguramente encontrarás más material de primera calidad.
$
50.00
| $
30.00
| $
20.00
| $
45.00
|
Volver al comienzo |
|