Campus Virtual de Elkin Garzón Aldana
Estás en el Ambiente Virtual de Elkin
  EGAyudas Web
 

Vive el Chat


E-mail y Redes Sociales
Clica la imagen para ingresar de inmediato

      


Subir Imagenes y Videos Para Publicar Donde Quieras





Base de Datos


 

Preliminares de programación web

Código html Básico

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

 
<html>
<head>
<title>Título de tu Web</title>
</head>
<body>
Textos, tablas, imagenes o gráficos, enlaces, etc.
</body>
</html>

Etiquetas Básicas

 
Textos
Esto es texto simple: cada navegador lo visualizará según su configuración por defecto.
<FONT SIZE="1">Este texto es tamaño 1.</FONT>
<FONT SIZE="2">Este texto es tamaño 2.</FONT>
<FONT SIZE="4">Este texto es tamaño 4.</FONT>
<FONT SIZE="+1">Este texto es tamaño +1 (que es lo mismo que tamaño 4).</FONT>
<FONT FACE="Arial" SIZE="5" COLOR="FFFF00">Este texto posee varias especificaciones de formato.</FONT>

Formato de Caracteres
Código Función
<B>...</B> Negrita
<I>...</I> Cursiva
<U>...</U> Subrayado
<SUB>...</SUB> Subíndice
<SUP>...</SUP>   Superíndice

Títulos

<H1>Título 1</H1>
<H2>Título 2</H2>
<H3>Título 3</H3>
<H4>Título 4</H4>

Cambio de líneas
<br>

Párrafo
<P align="left">...</P> Párrafo alineado a la izquierda  
<P align="center">...</P>   Párrafo centrado
<P align="right">...</P> Párrafo alienado a la derecha
<P align="justify">...</P> Párrafo 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 año</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>

Líneas
Ésta es una línea normal:
<HR>
Ésta es una línea normal, sin sombreado:
<HR noshade>
Ésta es una línea que ocupa la mitad de la pantalla (si no se establece la alineación, se coloca centrada por defecto):
<HR width="50%">
Ésta es más estrecha y mucho más 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 página 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 electrónico:<BR>
<A HREF="mailto:airibar@fil.deusto.es">pincha aquí</a><BR>

Locales

  • Cuando todos los documentos residen en el mismo directorio no hay ningún problema, y la etiqueta será, simplemente: <A HREF="fichero.htm">...</A>.
  • Cuando los ficheros residen en diferentes directorios, hay que facilitar la dirección completa del fichero, lo que puede hacerse de manera absoluta o relativa:
    • Direccionamiento absoluto: se indica la trayectoria completa del archivo en cuestión:
      <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
Código
<table>
<tr>
<td>Celda 1</td>
<td>Celda 2</td>
<td>Celda 3</td>
</tr>
<tr>
<td>Celda 4</td>
<td>Celda 5</td>
<td>Celda 6</td>
</tr>
</table>
Vista
Celda 1 Celda 2 Celda 3
Celda 4 Celda 5 Celda 6
 



Código
<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 6
Campo 7 Campo 8 Campo 9
 


Código
<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 unificado Campo 2 Campo 3
Campo 5 Campo 6
Campo 8 Campo 9
 

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

Otro ejemplo. Fijate 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

Formulario
<html>
  <head>
  <title>Ejemplo de formularios html</title>
  </head>
   
  <body>
  <form action="mailto:emaildelaempresaquehaceelformulario@email.com" method="post" 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>

Programación Avanzada
Clica Aquí Para Acceder al Modulo

 


 
  
  Contigo son 9313 visitantes en EgaVirtual  
 
Este sitio web fue creado de forma gratuita con PaginaWebGratis.es. ¿Quieres también tu sitio web propio?
Registrarse gratis