You are on page 1of 5

GUA DE LABORATORIO N 01 OBJETIVOS: Conocer el funcionamiento de la Web, los diferentes lenguajes para el desarrollo de Pginas Web, iniciando con

HTML en un editor de texto bsico (sugerido: Notepad++) 1. Funcionamiento de la WEB La Web funciona siguiendo el modelo clienteservidor. Existe un servidor, que es quien presta el servicio, y un cliente, que es quien lo recibe.

2. Introduccin a HTML Un documento HTML comienza con la etiqueta <html> , y termina con </html>. Dentro del documento hay dos zonas bien diferenciadas: el encabezamiento, delimitado por <HEAD> y</HEAD>, que sirve para definir diversos valores vlidos en todo el documento. Y el cuerpo, delimitado por <BODY> y </BODY>, donde reside la informacin del documento. <HTML> Encabezado <HEAD> <TITLE>Ttulo del documento</TITLE> </HEAD> <BODY> Cuerpo Texto del documento </BODY> </HTML> A continuacin veremos algunos ejemplos, los cuales sern creados en un editor de textos bsico como el bloc de Notas, se sugiere el NotePad++ que es especial para editar archivos HTML, PHP, etc.

1. Tablas bsicas: tabla.html 2. Tablas extendidas: tablaavanzada.html


<html> <head> <title>ejemplo 2</title> </head> <body> <h1>tablas bsicas</h1> <table border="1"> <tr> <th>cabecera 1</th> <th>cabecera 2</th> <th>cabecera 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>

2. Tablas extendidas: tablaavanzada.html


<html> <head> <title>ejemplo 3</title> </head> <body> <h1>tablas avanzadas</h1> <table width="50%" border="1" cellspacing="3" cellpadding="2"> <tr> <td colspan="2" align="right">dato 1</td> <td>un texto cualquiera</td> <td rowspan="2">dato 3</td> </tr> <tr> <td>dato 4</td> <td>dato 4</td> <td align="center">dato 5 </td> </tr> </table> </body> </html>

3. Inclusin de Imgenes: imagenes.html


<html> <head> <title>ejemplo 4</title> </head> <body> <h1>imagenes</h1> <img src="/graficos/imagen.jpg" width=140 height=210 border=0 alt="una imagen" align="right"> <img src="/graficos/imagen.gif" width=140 height=210 border=3 alt="otro imagen;" align="left"> un texto cualquiera. </body> </html>

4. Formularios Bsicos: formulario.html


<html> <head> <title>ejemplo 5</title> </head> <body> <h1>formularios</h1> <form action=mailto:unaprueba method="post"> <input type="text" name="nombre"><br> <input type="submit"><input type="reset"> </form>

</body> </html>

5. Formularios Bsicos: extensin.html 6. Campos de Seleccin: campos.html


<html> <head> <title>ejemplo 6</title> </head> <body> <h1>formularios</h1> <form action="mailto:unaprueba" method="post"> texto: <input type="text" name="nombre"><br> password: <input type="password" name="contra"><br> sexo:<input type="radio" name="boton1" value="1"> hombre <input type="radio" name="boton1" value="2">mujer<br> vehiculo:<input type="checkbox" name="moto" value="si">moto <input type="checkbox" name="coche" value="" checked>coche <br><br> <input type="submit"><input type="reset"> </form> </body> </html>

6. Campos de Seleccin: campos.html


<html> <head> <title>ejemplo 7</title> </head> <body> <h1>formularios</h1> <form action="mailto:unaprueba" method="post"> <select name="colores" multiple> <option value="r">rojo</option> <option value="g">verde</option> <option value="b">azul</option> </select> <br><br> <select name="colores" size="1"> <option value="r">rojo</option> <option value="g">verde</option> <option value="b">azul</option> </select>

<br><br> <input type="submit"><input type="reset"> </form> </body> </html>

<html> <head> <title>ejemplo 7</title> </head> <body> <h1>formularios</h1> <form action="mailto:unaprueba" method="post"> <select name="colores" multiple> <option value="r">rojo</option> <option value="g">verde</option> <option value="b">azul</option> </select> <br><br> <select name="colores" size="1"> <option value="r">rojo</option> <option value="g">verde</option> <option value="b">azul</option> </select> <br><br> <input type="submit"><input type="reset"> </form> </body> </html>

You might also like