Você está na página 1de 8

Preliminares de programacin web

Cdigo html Bsico


Para programar bastan Recuerde poner la las ganas, un pc extensin .html al y un editor de texto. guardar el archivo.

<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>

Cambio de lneas <br> Prrafo


Prrafo alineado a la izquierda <P align="left">...</P> <P align="center">...</P> Prrafo centrado <P align="right">...</P> Prrafo alienado a la derecha <P align="justify">...</P> Prrafo justificado

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

Celda 1 Celda 2 Celda 3 Celda 4 Celda 5 Celda 6

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

Campo 1 Campo 2 Campo 3 Campos 4 y 5 Campo 7 Campo 8 Campo 6 Campo 9

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>

</tr> </table> Vista

Campo 2 Campo 3 Campo unificado Campo 5 Campo 6 Campo 8 Campo 9

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&oacute;nico: <input type="text" value="@" name="correo" size="40" maxlength="100"> <br><br> Poblaci&oacute;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>&iquest;C&oacute;mo nos conociste?<br> <input type="checkbox" name="conocer"> A trav&eacute;s de un amigo.<br> <input type="checkbox" name="conocer"> A trav&eacute;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&oacute;n sobre nuestra p&aacute;gina web<br> <textarea cols="40" rows="5" name="opinion">Escriba aqu&iacute; su opini&oacute;n...</textarea> <br><br> Tiene alguna sugerencia... <br> <textarea cols="40" rows="5" name="sugerencias">Escriba aqu&iacute; sus sugerencias...</textarea> <br><br> &iquest;C&uacute;anto navegas por intenet? (Se&ntilde;ala la opci&oacute;n que m&aacute;s se acerque)<br> <select name="frecuencia" size="2"> <option value="1">2 horas al d&iacute;a. <option value="2">4 horas al d&iacute;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>

Você também pode gostar