Post on 13-Jun-2015
description
DESARROLLO DE
APLICACIONES WEB
GUIA DE LABORATORIO
DE HTML
ING.IVAN PETRLIK
AZABACHE
2014
Párrafo alineado a la izquierda
Ejemplo :
Párrafo alineado a la derecha
Ejemplo :
Lista no numerada del Elemento de lista
Ejemplo :
<P align=left>...</P>
<P align=right>...</P>
<UL>
<LI>
</UL>
Lista numerada del Elemento de lista
Ejemplo :
Raya horizontal
Ejemplo :
<OL>
<LI>
</OL>
<HR>
Enlace hacia una página Web
Ejemplo :
Enlace hacia una dirección Email
Ejemplo :
Inserción de una imagen al formato Gif o Jpg
Ejemplo 1:
<A href="http:// .. .">...</A>
<A href="mailto:...">...</A>
<IMG src="xyz.jpg">
Ejemplo 2: width = 200 Height =100
Definición de una tabla
Ejemplo 1: Tabla con un borde de 20 y constituido por 1 fila por dos columnas
Ejemplo 3: Tabla con anchura en %( width="x%” )
<TABLE border=num>...</TABLE>
Ancho en
porcentaje de la
tabla
Ejemplo 4: Tabla con anchura en pixeles ( width="x” )
Ejemplo 5: Tabla con anchura del borde
Ejemplo 6: Espacio entre el borde y el texto(cellpadding=x )
Ejemplo 7: Espesor de la raya entre las celdas ( cellspacing=x )
Ancho en pixeles
de la tabla
Borde de la tabla
35
35
35
Ejemplo 8: Insertar 2 filas a la tabla
Ejemplo 9: Tabla con un borde(border) de 10 y constituido por 3 filas por dos columnas
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"> )
35
Insertar dos filas a
la tabla
Insertar dos
columnas a la tabla
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
Ejemplo 1:
<frameset >
<frame …………..>
<frame …………..>
<frame ………….. >
<frame ………….. >
.
.
.
</frameset>
Insertar imagen en el fondo de uapagina HTML Ejemplo 1:
Pagina web independiente dentro de un documento html
Ejemplo 1: Pagina.html
<iframe name=“nombre" src="pagina.html"></iframe>
<BODY background="imagen.jpg/imagen.gif" >
</BODY>
</BODY>
Definición de Formularios Es una forma de comunicación entre las páginas y el servidor
Ejemplo 1:
Elementos del Formulario :
Campo de Texto
Ejemplo 1:
<form action = ”registro.html” method = “post” name = “frmRegistro” > ... Elementos del Formulario... </form>
<input type=“text”name=“identificador”size=“30”maxlength=“30” value=“Contenido” >
Area de Texto Define una caja donde se puede escribir un texto de multipleslineas, atributos:
Ejemplo 1:
Opción múltiple Para el uso de opciones múltiples tenemos:
Ejemplo 1:
Opción única
Para el uso de opciones discriminantes tenemos:
<input type=“checkbox”name=“identificador”checked >
<textareaname=“identificador”rows=“3”cols=“40”> Valor del TextArea </textarea>
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):
Ejemplo 1:
Botones Sirven para disparar un evento, el cual puede producir el envio de la información o la realización deun proceso
<select name=“identificador” size=“20” multiple >
<option value=”1” selected>valor1</option>
<option value=”2”>valor2</option>
<option value=”3”>valor3</option>
</select>
<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:
o Ejercicios de HTML desarrollados
1. Realizar una paginahtml que muestre la siguiente frase “Bienvenido al mundo de
Java “
Solución:
<input type=“hidden” name=”” value=””> <input type=“password” name=”” value=””> <input type=“file” name=”” value=””>
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 de texto .
Solución:
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 “Señor” tendríamos que poner
en eleditor Señor.
Alias Carácter obtenido á á é é í í ó ó ú ú ñ ñ Ñ Ñ ¡ ¡ ¿ ¿ < < > > & & " “