Sie sind auf Seite 1von 21

GUIA DE

LABORATORIO DE
HTML
Prrafo alineado a la izquierda

<P align=left>...</P>
Ejemplo :

Prrafo alineado a la derecha

<P align=right>...</P>

Ejemplo :

Lista no numerada del Elemento de lista

<UL>
<LI>
</UL>

Ejemplo :
Lista numerada del Elemento de lista

<OL>
<LI>
</OL>

Ejemplo :

Raya horizontal
<HR>

Ejemplo :
Enlace hacia una pgina Web
<A href="http://...">...</A>

Ejemplo :

Enlace hacia una direccin Email


<A href="mailto:...">...</A>

Ejemplo :

Insercin de una imagen al formato Gif o Jpg

<IMG src="xyz.jpg">

Ejemplo 1:
Ejemplo 2:
width = 200

Height =100

Definicin de una tabla

<TABLE border=num>...</TABLE>

Ejemplo 1:
Tabla con un borde de 20 y constituido por 1 fila por dos columnas

Ejemplo 3:
Tabla con anchura en %( width="x% )

Ancho en porcentaje de
la tabla
Ejemplo 4:
Tabla con anchura en pixeles ( width="x )
Ancho en pixeles de la
tabla

Ejemplo 5:
Tabla con anchura del borde

Borde de la tabla

Ejemplo 6:
Espacio entre el borde y el texto(cellpadding=x )

35

35

Ejemplo 7:
Espesor de la raya entre las celdas( cellspacing=x )

35
35

Ejemplo 8:
Insertar 2 filas a la tabla
Insertar dos filas a la tabla

Ejemplo 9:
Tabla con un borde(border) de 10 y constituido por 3 filas por dos columnas

Insertar dos columnas a la


tabla

Ejemplo 10:
Tabla con un borde(border) de 10 y constituido por 3 filas por dos columnas
columna01 columna02

Fila 01
Fila02
Fila03

Ejemplo 11:
color de una celda ( <TD bgcolor="#XXXXXX"> )
Ejemplo 12:
Anchura de columna en %( width="15%" )

15% 5%
Ejemplo 13:
Numero de celdas para fusionar horizontalmente( <TD colspan=x > )

colspan = 50

Ejemplo 14:
Numero de celdas para fusionar verticalmente (rowspan=50 )
Define una estructura de frames
<frameset >
<frame ..>
<frame ..>
<frame .. >
<frame .. >
.
.
.
</frameset>

Ejemplo 1:
Insertar imagen en el fondo de uapagina HTML
<BODY background="imagen.jpg/imagen.gif" >

</BODY>

Ejemplo 1:

Pagina web independiente dentro de un documento html

<iframe name=nombre" src="pagina.html"></iframe>

Ejemplo 1:

Pagina.html
Definicin de Formularios
Es una forma de comunicacin entre las pginas y el servidor

<form action = registro.html method = post name = frmRegistro >


... Elementos del Formulario...
</form>

Ejemplo 1:

Elementos del Formulario :


Campo de Texto
<input type=textname=identificadorsize=30maxlength=30
value=Contenido >

Ejemplo 1:
Area de Texto
Define una caja donde se puede escribir un texto de multipleslineas, atributos:

<textareaname=identificadorrows=3cols=40>
Valor del TextArea
</textarea>

Ejemplo 1:

Opcin mltiple
Para el uso de opciones mltiples tenemos:

<input type=checkboxname=identificadorchecked >

Ejemplo 1:

Opcin nica
Para el uso de opciones discriminantes tenemos:
Sexo: <br>
Femenino : <input type=radio name=identificador value=F>
Masculino : <input type=radio name=identificador value=M checked>
Ejemplo 1:

Combos
Para seleccin simple, mostradas en una lista (Combos):
<select name=identificador size=20 multiple >
<option value=1 selected>valor1</option>
<option value=2>valor2</option>
<option value=3>valor3</option>
</select>
Ejemplo 1:

Botones
Sirven para disparar un evento, el cual puede producir el envio de la informacin o
la realizacin deun proceso

<input type=submit name=nom delboton value=valor Boton1>


<input type=reset name=nom delboton value=valor Boton2>
<input type=button name=nom delboton value=valor Boton3>
Ejemplo 1:

Otros Controles
Existe otros controles para Ocultar Variables, Mostrar asteriscos o Mostrar el
explorador deArchivos los cuales son respectivamente:

<input type=hidden name= value=>


<input type=password name= value=>
<input type=file name= value=>

o Ejercicios de HTML desarrollados


1. Realizar una paginahtml que muestre la siguiente frase Bienvenido al mundo de
Java

Solucin:
2. Realizar una paginaHtml que me permita mostrar un parrafo de una expresin y tiene
que estar centrado.

Solucin:

3. Realizar una paginaHtml que me permita implementar una tabla de 2 filas por 2
columnas que muestre lo siguiente
Solucin:

4. Realizar una paginaHtml que me permita definir dos link que vaya a la pagina de la
universidad san martin y la otra me permita acceder a mi correo electronico .

Solucin:
5. Realizar una pagina en Html que me permita insertar una imagen .

Solucin:

6. Realizar una paginaHtml que me permita implementar un formulario que posea un


botn que me permita ir a otra pgina.

Solucin:
7. Realizar una paginaHtml que implemente un combox que cargue tres paises de
sudamerica

Solucin:

8. Realizar una paginaHtml que implemente un Lista articulos para oficina

Solucin:
9. Realizar una paginahtml que me permita implementar un area de texto .

Solucin:
o Tabla de colores
Color Rojo Azul Verde Amarillo Magenta Negro Blanco
Cod. Color 00FF00 0000FF FFFF00 FF00FF 000000 FFFFFF

o Tabla de Codigo de los caracteres en HTML


Algunos navegadores no aceptan ciertos caracteres para lo cual el lenguaje
HTML da su equivalente en ALIAS
Por ejemplo si queremos escribir la palabra Seor tendramos que poner
en eleditor Se&ntilde;or.

Alias Carcter obtenido


&aacute;
&eacute;
&iacute;
&oacute;
&uacute;
&ntilde;
&Ntilde;
&iexcl;
&iquest;
&lt; <
&gt; >
&amp; &
&quot;