Scribd
Cargar
86 vistas

Guia de Laboratorio de HTML Parte2

Este documento proporciona una guía de laboratorio sobre el desarrollo de aplicaciones web con HTML. Explica elementos básicos de HTML como párrafos, listas, enlaces, imágenes y tablas, y ofrece ejemplos de su uso. También cubre formularios, marcos y estilos con CSS. El documento fue creado por el Ing. Ivan Petrlik de Azabache en 2014.

Cargado por

Karen Muñoz
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
86 vistas

Guia de Laboratorio de HTML Parte2

Este documento proporciona una guía de laboratorio sobre el desarrollo de aplicaciones web con HTML. Explica elementos básicos de HTML como párrafos, listas, enlaces, imágenes y tablas, y ofrece ejemplos de su uso. También cubre formularios, marcos y estilos con CSS. El documento fue creado por el Ing. Ivan Petrlik de Azabache en 2014.

Cargado por

Karen Muñoz
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 21

DESARROLLO DE

APLICACIONES WEB
GUIA DE LABORATORIO
DE HTML

ING.IVAN PETRLIK
AZABACHE
2014

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:
</BODY>

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

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

Solucin:

de texto .

Tabla de colores
Color
Rojo
Cod. Color

Azul
Verde
Amarillo Magenta Negro Blanco
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
&aacute;
&eacute;
&iacute;
&oacute;
&uacute;
&ntilde;
&Ntilde;
&iexcl;
&iquest;
&lt;
&gt;
&amp;
&quot;

Carcter obtenido

<
>
&

También podría gustarte