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

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 á á é é í í ó ó ú ú ñ ñ Ñ Ñ ¡ ¡ ¿ ¿ < < > > & & " “

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

Documents

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