GUIA DE LABORATORIO DE HTML BASICO - ING.IVAN PETRLIK AZABACHE

DESARROLLO DE
APLICACIONES WEB
GUIA DE LABORATORIO
DE HTML

ING.IVAN PETRLIK
AZABACHE
2014

Párrafo alineado a la izquierda
<P align=left>...</P>
Ejemplo :

Párrafo 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 página Web
<A href="http://...">...</A>
Ejemplo :

Enlace hacia una dirección Email
<A href="mailto:...">...</A>
Ejemplo :

Inserción de una imagen al formato Gif o Jpg
<IMG src="xyz.jpg ">
Ejemplo 1:

Ejemplo 2:
width = 200

Height =100

Definición 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

Definición de Formularios
Es una forma de comunicación entre las páginas 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=“text”name=“identificador”size=“30”maxlength=“30”
value=“Contenido” >
Ejemplo 1:

Area de Texto
Define una caja donde se puede escribir un texto de multipleslineas, atributos:
<textareaname=“identificador”rows=“3”cols=“40”>
Valor del TextArea
</textarea>
Ejemplo 1:

Opción múltiple
Para el uso de opciones múltiples tenemos:
<input type=“checkbox”name=“identificador”checked >
Ejemplo 1:

Opción ú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 selección 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 información o
la realización 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 “

Solución:

2. Realizar una paginaHtml que me permita mostrar un parrafo de una expresión y tiene
que estar centrado.

Solución:

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

Solución:

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 .

Solución:

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

Solución:

6. Realizar una paginaHtml que me permita implementar un formulario que posea un
botón que me permita ir a otra página.

Solución:

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

Solución:

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

Solución:

9. Realizar una paginahtml que me permita implementar un area

Solución:

de texto .

o

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 “Señor” tendríamos que poner
en eleditor Señor.

Alias
á
é
í
ó
ú
ñ
Ñ
¡
¿
<
>
&
"

Carácter obtenido
á
é
í
ó
ú
ñ
Ñ
¡
¿
<
>
&
“

GUIA DE LABORATORIO DE HTML BASICO - ING.IVAN PETRLIK AZABACHE

GUIA DE LABORATORIO DE HTML BASICO - ING.IVAN PETRLIK AZABACHE

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (18)

Destacado

Destacado (7)

Similar a GUIA DE LABORATORIO DE HTML BASICO - ING.IVAN PETRLIK AZABACHE

Similar a GUIA DE LABORATORIO DE HTML BASICO - ING.IVAN PETRLIK AZABACHE (20)

GUIA DE LABORATORIO DE HTML BASICO - ING.IVAN PETRLIK AZABACHE