Escolar Documentos
Profissional Documentos
Cultura Documentos
<html> <head> <title>Ttulo de tu Web</title> </head> <body> Textos, tablas, imagenes o grficos, enlaces, etc. </body> </html>
Etiquetas Bsicas
Textos
Esto es texto simple: cada navegador lo visualizar segn su configuracin por defecto. <FONT SIZE="1">Este texto es tamao 1.</FONT> <FONT SIZE="2">Este texto es tamao 2.</FONT> <FONT SIZE="4">Este texto es tamao 4.</FONT> <FONT SIZE="+1">Este texto es tamao +1 (que es lo mismo que tamao 4).</FONT> <FONT FACE="Arial" SIZE="5" COLOR="FFFF00">Este texto posee varias especificaciones de formato.</FONT>
Formato de Caracteres
Cdigo <B>...</B> <I>...</I> <U>...</U> <SUB>...</SUB> <SUP>...</SUP> Funcin Negrita Cursiva Subrayado Subndice Superndice
Ttulos
<H1>Ttulo <H2>Ttulo <H3>Ttulo <H4>Ttulo 1</H1> 2</H2> 3</H3> 4</H4>
Listas
<H3>Los meses de primavera</H3> <UL> <LI>Abril</LI> <LI>Mayo</LI> <LI>Junio</LI> </UL> <BR> <H3>Los meses de verano</H3> <OL> <LI>Julio</LI> <LI>Agosto</LI> <LI>Septiembre</LI> </OL> <BR> <H3>Los meses del ao</H3> <UL> <LI>Los meses de primavera <OL> <LI>Abril</LI> <LI>Mayo</LI> <LI>Junio</LI>
</OL> </LI> <LI>Los meses de verano <OL> <LI>Julio</LI> <LI>Agosto</LI> <LI>Septiembre</LI> </OL> </LI> </UL>
Lneas
sta es una lnea normal: <HR> sta es una lnea normal, sin sombreado: <HR noshade> sta es una lnea que ocupa la mitad de la pantalla (si no se establece la alineacin, se coloca centrada por defecto): <HR width="50%"> sta es ms estrecha y mucho ms gorda: <HR width="10%" size="20"> sta es igual pero de color rojo: <HR width="10%" size="20" color="#FF0000">
Enlaces Externos
Vamos a enlazar las palabras "pincha aqu" con algunos destinos remotos.<BR> 1.- Con la pgina web de la UD:<BR> <A HREF="http://www.deusto.es" target="_blank">pincha aqu</a><BR> 2.- Con el servidor FTP de la sede de Ginebra de la OMS:<BR> <A HREF="ftp://ftp.who.ch/" target="_blank">pincha aqu</a><BR> 3.- Con mi correo electrnico:<BR> <A HREF="mailto:airibar@fil.deusto.es">pincha aqu</a><BR>
Locales
Cuando todos los documentos residen en el mismo directorio no hay ningn problema, y la etiqueta ser, simplemente: <A HREF="fichero.htm">...</A>. Cuando los ficheros residen en diferentes directorios, hay que facilitar la direccin completa del fichero, lo que puede hacerse de manera absoluta o relativa:
Direccionamiento absoluto: se indica la trayectoria completa del archivo en cuestin: <A HREF=file:///c:/directorio/subdirectorios/fichero.htm">... </A>
Direccionamiento relativo: no se indican los nombres de los directorios. Por ejemplo: <A HREF=../../..fichero.htm">...</A>
Con Imagenes
<a href="URL a la que se direcciona"><img src="URL completa de la Imagen"></a>
Tablas
Cdigo <table> <tr> <td>Celda <td>Celda <td>Celda </tr> <tr> <td>Celda <td>Celda <td>Celda </tr> </table> 1</td> 2</td> 3</td> 4</td> 5</td> 6</td> Vista
Cdigo <table> <tr> <td>Campo 1</td> <td>Campo 2</td> <td>Campo 3</td> </tr> <tr> <td colspan="2">Campos 4 y 5</td> <td>Campo 6</td> </tr> <tr> <td>Campo 7</td> <td>Campo 8</td> <td>Campo 9</td> </tr> </table> Vista
Cdigo <table> <tr> <td rowspan="3">Campo unificado</td> <td>Campo 2</td> <td>Campo 3</td> </tr> <tr> <td>Campo 5</td> <td>Campo 6</td> </tr> <tr> <td>Campo 8</td> <td>Campo 9</td>
Otro ejemplo
Escribimos: <TABLE BORDER="3" CELLSPACING="5" WIDTH="150"> <TR> <TD>1 </TD> <TD> 2 </TD> </TR> <TR> <TD>3 </TD> <TD> 4</TD> </TR> </TABLE> Visualizamos
1 3
2 4
Otro ejemplo. Fijate en la etiqueta TH, que sustituye a TR, resalta su contenido con negrita, por eso se usa para los ttulos
Escribimos:
<TABLE BORDER="3" CELLSPACING="5" WIDTH="200"> <TH COLSPAN=2 BGCOLOR="#6D8FFF> Este es el ttulo</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 tambin</TD> </TR> </TABLE>
Visualizamos
Este es el ttulo
Esta es la Esta es de la celda de la 1 1 fila y de la fila y de la 1 2 columna columna Esto est con un fondo azul Y esto tambin
Formulario
<htm l> <head> <title>Ejemplo de formularios html</title> </head> <body> <form action="mailto:emaildelaempresaquehaceelformulario@email.com" method="pos t" enctype="text/plain"> Nombre: <input type="text" name="nombre" size="25" maxlength="50"><br><br> Apellidos: <input type="text" name="apellidos" size="35" maxlength="100"> <br><br> Correo electrónico: <input type="text" value="@" name="correo" size="40" maxlength="100"> <br><br> Población: <input type="text" name="poblacion" size="15" maxlength="50"> <br><br> Provincia: <input type="text" name="provincia" size="15" maxlength="50"> <table width="100%" border="0" cellspacing="0" cellpadding="10"> <tr> <td>Edad: <br> <input type="radio" name="edad" value="020"> 0-20 <br> <input type="radio" name="edad" value="2040" checked> 20-40 <br> <input type="radio" name="edad" value="4060"> 40-60 <br> <input type="radio" name="edad" value="60100"> 60-100</td> <td>¿Cómo nos conociste?<br> <input type="checkbox" name="conocer"> A través de un amigo.<br> <input type="checkbox" name="conocer"> A través de un buscador.<br> <input type="checkbox" name="conocer"> Navegando por la red.<br> <input type="checkbox" name="conocer">
Otros</td> </tr> </table> Opinión sobre nuestra página web<br> <textarea cols="40" rows="5" name="opinion">Escriba aquí su opinión...</textarea> <br><br> Tiene alguna sugerencia... <br> <textarea cols="40" rows="5" name="sugerencias">Escriba aquí sus sugerencias...</textarea> <br><br> ¿Cúanto navegas por intenet? (Señala la opción que más se acerque)<br> <select name="frecuencia" size="2"> <option value="1">2 horas al día. <option value="2">4 horas al día. <option value="3">10 horas a la semana. <option value="4">20 horas al mes. </select> <br> <br> <table width="50%" border="0" align="center" cellpadding="10" cellspacing="0"> <tr> <td><div align="center"> <input type="submit" value="Enviar formulario"> </div></td> <td><div align="center"> <input type="Reset" value="Borrar formulario"> </div></td> </tr> </table> </form> </body> </html>