Semana01 - HTML (Manual Practico)
Cargado por
Williams Vargas RamirezSemana01 - HTML (Manual Practico)
Cargado por
Williams Vargas RamirezManual de HTML Profesor: Daniel Huaman
IDAT
MANUAL DE HTML
1
Manual de HTML Profesor: Daniel Huaman
IDAT
Semana 01: Paginas web - Creacion de paginas con
HTML
o HTML(HyperText Markup Language)
HTML (HyperText Markup Language) es un lenguaje de programación que se
utiliza para la creación de páginas en la WWW. Por página entenderemos el documento
que aparece en el visualizador.
En resumen las paginas web son hechas en HTML y el navegador,visualizador,cliente o
el web browser como se le quiera llamar lo interpreta, compila y ejecuta mostrando
como resultado el contenido de la pagina.
Para hacer una pagina Web solo se necesita un editor de texto desde el block de notas
hasta programas hechos exclusivamente para editar paginas web(Frontpage, Visual
Interdev,Dreamweaver, etc).
El principio esencial del lenguaje HTML es el uso de las etiquetas (tags). Funcionan de
la siguiente manera:
<XXX> Este es el inicio de una etiqueta.
</XXX> Este es el cierre de una etiqueta.
Las letras de la etiqueta pueden estar en mayúsculas o minúsculas, indiferentemente. Lo
que haya entre ambas etiquetas estará influenciada por ellas. Por ejemplo, todo el
documento HTML debe estar entre las etiquetas
<HTML> y </HTML>:
<HTML> [Todo el documento] </HTML>
El documento en sí está dividido en dos zonas principales:
El encabezamiento, comprendido entre las etiquetas
<HEAD> y </HEAD>
El cuerpo, comprendido entre las etiquetas
<BODY> y </BODY>
2
Manual de HTML Profesor: Daniel Huaman
IDAT
Dentro del encabezamiento hay información del documento, que no se ve en la pantalla
principal, principalmente el título del documento, comprendido entre las etiquetas
<TITLE> y </TITLE>. El título debe ser breve y descriptivo de su contenido, pues
será lo que vean los demás cuando añadan nuestra página a su bookmark (o agenda de
direcciones).
Dentro del cuerpo está todo lo que queremos que aparezca en la pantalla principal
(texto, imágenes, etc.)
o Estructura de una pagina HTML
<HTML>
<HEAD>
<TITLE>Titulo de la página</TITLE>
</HEAD>
<BODY parámetros>
Contenido de la Página
</BODY>
</HTML>
Cabecera
Elementos que no alteran el contenido de la página.
Ejemplo :
<TITLE> Titulo Documento </TITLE>
<META AUTHOR=“Idat” KEYWORDS=“Java”>
<BASE HREF=“http://www.mitienda.com”>
Cuerpo del Documento
<BODY parámetros> Contenido </BODY>
o Tags(elementos o etiquetas) mas usados
Texto en negrita
<B>...</B>
Ejemplo :
3
Manual de HTML Profesor: Daniel Huaman
IDAT
4
Manual de HTML Profesor: Daniel Huaman
IDAT
Ampliación del tamaño de los caracteres
<BIG>...</BIG>
Ejemplo :
Texto en itálico
<EM>...</EM>
Ejemplo :
5
Manual de HTML Profesor: Daniel Huaman
IDAT
Color de Texto
<FONT color="#XXXXXX">...</FONT>
Ejemplo :
Texto en itálico(Cursiva)
<I>...</I>
Ejemplo :
Texto preformateado
<PRE>...</PRE>
6
Manual de HTML Profesor: Daniel Huaman
IDAT
Ejemplo :
Reducción del tamaño de los caracteres
<SMALL>...</SMALL>
Ejemplo :
Puesta en negrita del texto
<STRONG>...</STRONG>
Ejemplo :
7
Manual de HTML Profesor: Daniel Huaman
IDAT
Texto subrayado
<STRONG>...</STRONG>
Ejemplo :
Comentarios ignorado por el navegador
<STRONG>...</STRONG>
Ejemplo :
Salto de línea
<BR>
Ejemplo :
8
Manual de HTML Profesor: Daniel Huaman
IDAT
Centra cada elemento comprendido en la et iqueta
<CENTER>...</CENTER>
Ejemplo :
Centra el elemento encuadrado por la etiqu eta
<DIV align=center> ...</DIV>
Ejemplo :
Alinea el elemento a la izquierda
<DIV align=left> ...</DIV>
Ejemplo :
9
Manual de HTML Profesor: Daniel Huaman
IDAT
Alinea el elemento a la derecha
<DIV align=right> ...</DIV>
Ejemplo :
Nuevo párrafo
<P>...</P>
Ejemplo :
Párrafo centrado
<P align=center>...</P>
Ejemplo :
10
Manual de HTML Profesor: Daniel Huaman
IDAT
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 :
11
Manual de HTML Profesor: Daniel Huaman
IDAT
Lista numerada del Elemento de lista
<OL>
<LI>
</OL>
Ejemplo :
Raya horizontal
<HR>
Ejemplo :
12
Manual de HTML Profesor: Daniel Huaman
IDAT
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:
13
Manual de HTML Profesor: Daniel Huaman
IDAT
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
14
Manual de HTML Profesor: Daniel Huaman
IDAT
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
15
Manual de HTML Profesor: Daniel Huaman
IDAT
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 1 fila 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 fila (<TR bgcolor="#XXXXXX"> )
16
Manual de HTML Profesor: Daniel Huaman
IDAT
Ejemplo 12:
Anchura de columna en % ( width="15%" )
15% 5%
Ejemplo 13:
Numero de celdas para f usionar horizonta lmente (<TD colspan=x > )
colspan = 4
Ejemplo 14:
Numero de celdas para fusionar verticalmente (rowspan=3 )
17
Manual de HTML Profesor: Daniel Huaman
IDAT
Define una estructura de frames
<frameset >
<frame ………….. >
<frame ………….. >
<frame ………….. >
<frame ………….. >
.
.
.
</frameset>
Ejemplo 1:
18
Manual de HTML Profesor: Daniel Huaman
IDAT
Insertar imagen en el fondo de ua pagina 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
Esto significa que se tendrá un frame (marco o conetenedor de paginas dentro de un pagina web)
Dentro de este marco tendremos a la pagina “pagina.html” (observar la propiedad src de la etiqueta
iframe)
19
Manual de HTML Profesor: Daniel Huaman
IDAT
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 el editor
Señor.
Alias Carácter obtenido
á á
é é
í í
ó ó
ú ú
ñ ñ
Ñ Ñ
¡ ¡
¿ ¿
< <
> >
& &
" “
20
Manual de HTML Profesor: Daniel Huaman
IDAT
Ejercicios de HTML desarrollados
1. Realizar una pagina html que muestre la siguiente frase “Bienvenido al mundo de
Java “
Solución:
2. Realizar una pagina Html que me permita mostrar un parrafo de una expresión y tiene
que estar centrado.
Solución:
21
Manual de HTML Profesor: Daniel Huaman
IDAT
3. Realizar una pagina Html que me permita implementar una tabla de 2 filas por 2
columnas que muestre lo siguiente
Solución:
4. Realizar una pagina Html 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 .
22
Manual de HTML Profesor: Daniel Huaman
IDAT
Solución:
5. Realizar una pagina en Html que me permita insertar una imagen .
Solución:
23
Manual de HTML Profesor: Daniel Huaman
IDAT
Tema 2: Paginas web - Creacion de formularios
web con HTML
Definición de Formularios
Es una forma de comunicación entre las páginas y el servidor
Los formularios son una de las herramientas de que disponemos a la hora de hacer
nuestras páginas web interactivas, en el sentido de que nos permiten recopilar
información de la persona que ve la página, procesarla y responder a ella, pudiendo
de esta forma responder adecuadamente a sus acciones o peticiones.
<form action = ”registro.html” method = “post” name = “frmRegistro” >
... Elementos del Formulario...
</form>
* action = "ruta_programa". Indica el programa del servidor que va a "tratar" las
variables que se envíen con el formulario o el envío de los datos mediante correo
electrónico mediante el valor "mailto: direccion_de_correo", en cuyo caso
deberemos añadir el parámetro ENCTYPE="text/plain" para que lo que recibamos
resulte legible. También puede ser una URL usando el método GET (por ejemplo,
un botón para ir a otra página).
En el caso de que definamos aquí un programa para el tratamiento de datos
deberemos especificar su ruta relativa respecto al directorio de carpetas del servidor
en dónde tengamos situado nuestra aplicación web o bien una URL completa, si el
programa está en otra dirección de Internet.
* method = " POST / GET " . Indica el método según el que se van a transferir las
variables del formulario. POST envía los datos, normalmente al programa CGI
definido en action o por correo si en action hemos utilizado mailto. El método GET
añade los argumentos del formulario al URL recogido en action (utilizando como
separador de las variables la "?"). El método de uso más normal es POST, y en el
caso de que estemos mandando el formulario a nuestra dirección de correo
electrónico es obligado usarlo.
Con GET los datos son encadenados al URL especificado en action , utilizando el
tipo de codificación especificado en el atributo enctype. Este método se utiliza
cuando los datos no modifican la base de datos, por ejemplo, al realizar una
búsqueda, y los caracteres a enviar tienen que pertenecer obligariamente al
conjunto ASCII.
Con el método POST se realiza una transacción mediante el protocolo HTTP,
utilizando la codificación enctype. Se utiliza para aplicaciones que modifican la base
de datos de destino.
24
Manual de HTML Profesor: Daniel Huaman
IDAT
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 multiples lineas, atributos:
<textarea name=“identificador” rows=“3” cols=“40” >
Valor del TextArea
</textarea>
25
Manual de HTML Profesor: Daniel Huaman
IDAT
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”>
Ejemplo 1: : <input type=“radio” name=“identificador” value=“M” checked>
Masculino
26
Manual de HTML Profesor: Daniel Huaman
IDAT
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 de un proceso
<input type=“submit” name=”nom del boton” value=“valor Boton1”>
<input type=“reset” name=”nom del boton” value=“valor Boton2”>
<input type=“button” name=”nom del boton” value=“valor Boton3”>
27
Manual de HTML Profesor: Daniel Huaman
IDAT
Ejemplo 1:
Otros Controles
Existe otros controles para Ocultar Variables, Mostrar asteriscos o Mostrar el
explorador de Archivos los cuales son respectivamente:
<input type=“hidden” name=”” value=””>
<input type=“password” name=”” value=””>
<input type=“file” name=”” value=””>
Ejercicios de Formularios
1.- Realizar una pagina Html que me permita implementar un formulario que posea un
botón que me permita ir a otra página.
Solución:
28
Manual de HTML Profesor: Daniel Huaman
IDAT
2.- Realizar una pagina Html que implemente un combox que cargue tres paises de
sudamerica
Solución:
3.- Realizar una pagina Html que implemente un Lista articulos para oficina
Solución:
29
Manual de HTML Profesor: Daniel Huaman
IDAT
4.- Realizar una pagina html que me permita implementar un area de texto .
Solución:
30
