Guia de html 3 y 4 periodo

INDICADOR DE LOGRO: Diseñar una página Web utilizando diferentes códigos del
lenguaje HTML.

TEMAS:
1.
QUÉ ES HTML?
2.
PASOS PARA CREAR UN DOCUMENTO HTML
3.
PASOS PARA GUARDAR UN DOCUMENTO HTML
4.
ETIQUETAS
5.
ESTRUCTURA BÁSICA DE UN DOCUMENTO HTML
6.
ETIQUETAS PARA CREAR TÍTULOS
7.
ETIQUETAS PARA APLICAR ATRIBUTOS A LAS PÁGINAS
 Color de fondo
 Imagen de fondo
 Márgenes
8.
ETIQUETAS PARA FORMATO DE PÁRRAFOS
 Alineación(Justificar, centrar, izquierda, derecha)
 Interlineado
 Encabezados
9.
ETIQUETAS PARA FORMATO DE TEXTOS
 Estilo( Negrita, Kursiva, Subrayado)
 Tipo de fuente o letra
 Tamaño de fuente
 Color de fuente
10.
ETIQUETAS DE LISTAS
 Numeradas
 Con viñetas
 Listas de definición. Ej.: Un glosario.
11.
ETIQUETAS PARA CREAR TABLAS
12.
ETIQUETAS PARA INSERTAR IMÁGENES
13.
ETIQUETAS PARA CREAR ENLACES
14.
ETIQUETAS PARA FORMULARIOS
 Campos de texto
 Lista de Opciones
 Botones de radio
 Cajas de Validación

1.

QUÉ ES HTML? (Hyper Text Markup Language)

HTML es el lenguaje con el que se escriben las páginas web. Las páginas web pueden
ser vistas por el usuario mediante un tipo de aplicación llamada navegador. Podemos
decir por lo tanto que el HTML es el lenguaje usado por los navegadores para mostrar
las páginas webs al usuario, siendo hoy en día la interface más extendida en la red. Este
lenguaje nos permite aglutinar textos, sonidos e imágenes y combinarlos a nuestro gusto.
Además, y es aquí donde reside su ventaja con respecto a libros o revistas, el HTML nos
permite la introducción de referencias a otras páginas por medio de los enlaces hipertexto.
2.

PASOS PARA CREAR UN DOCUMENTO HTML

Para crear un documento HTML debo:
 Abrir el botón menú Inicio en la barra de tareas
 Programas
 Accesorios
 Bloc de Notas
3.
PASOS PARA GUARDAR UN DOCUMENTO HTML
 Clic en el menú Archivo
 Clic en el comando Guardar Como
 Selecciono la Unidad en la que deseo Guardar el documento
 Escribo el nombre de archivo, seguido coloco un punto con la tecla numérica y luego
escribo HTML EJEMPLO: SANGIL.html
4.
CÓMO ABRIR LA PÁGINA WEB
 Abro la unidad en la que guarde el documento
 Busco el documento y doy doble clic sobre él
 Para observar o modificar el código doy clic en el menú ver y luego en el comando
código de fuente.
 Siempre que se agrega o modifica el código debo dar clic en el comando guardar para
aplicar los cambios realizados en el documento.
5.

ETIQUETAS

Las etiquetas son el elemento en el que se basa y presenta la sintaxis de un documento
HTML; toda etiqueta se abre entre signo mayor y menor y se cierra agregando (/)
Ejemplo: cuando se empieza a crear el documento debe escribirse la etiqueta <html> y
para cerrarlo o terminarlo </html>, más adelanta conocerás una gran variedad de
etiquetas que te permitirán diseñar diferentes tipos de documentos.

6.
ESTRUCTURA BÁSICA DE UN DOCUMENTO HTML
Todo documento HTML tiene la siguiente estructura:
 Comienza con la etiqueta <html>
 Después está el encabezamiento que se abre con la etiqueta <head> y cierra con la
etiqueta </head>, donde colocaremos etiquetas de índole informativo como por ejemplo el
titulo de nuestra página.

 Y finalmente está el cuerpo del documento que empieza o se abre con la etiqueta
<body> y termina con la etiqueta </body> en donde aparece la información del
documento.
 Finalmente se cierra la etiqueta </html> lo cual indica que allí concluye el documento.
Ejemplo:
<html>
<Head>
Etiquetas y contenidos del encabezado Datos que no aparecen en nuestra página pero
que son importantes para catalogarla: Titulo, palabras clave,...
</head>
<body> Etiquetas y contenidos del cuerpo Parte del documento que será mostrada por el
navegador: Texto e imágenes
</body>
</html>
Las mayúsculas o minúsculas son indiferentes al escribir etiquetas

7.

ETIQUETAS PARA CREAR TITULOS

Dentro del documento se encuentran títulos que de acuerdo a su importancia pueden
clasificarse en diferentes niveles:
 Mucha importancia
<h1> JÓVENES EN ACCIÓN </h1>
 Menos importancia
<h2>Jóvenes deportistas </h2>
 Mucho menos importancia
<h3>Jóvenes futbolistas </h3>
8.

ETIQUETAS PARA APLICAR ATRIBUTOS A LAS PÁGINAS

 Color de fondo <body bgcolor=”digita el código del color deseado”>
 Color de texto en toda la página <body text=”código del color deseado”
 Color de los enlaces <body link=”código del color deseado”>
 Color de enlaces visitados <body vlink=”código del color deseado”>
 Color de
 enlaces activos <body alink=”código del color deseado”>
 Imagen de fondo en la página <body background=”Se escribe la ruta y extensión
(.gif)en donde se encuentra guardada la imagen”
 Sonido de fondo para para la página <Bgsound src=”Se escribe la ruta donde se
encuentra guardado el sonido, luego la extensión ejm: .Wav”loop=”true”
<wildth=”200”Heigh=”55”Autostar=”True”loop=”false”HIPPEN=”True”>
Ejemplo de color del texto
Vamos a ver una página donde el color de fondo sea negro, y los colores del texto y los
enlaces sean claros. Pondremos el color de texto balnco y los enlaces amarillos, más
resaltados los que no estén visitados y menos resaltados lo que ya están visitados. Para
ello escribiríamos la etiqueta body así:
<body bgcolor="#000000" text="#ffffff" link="#ffff33" alink="#ffffcc" alink="ffff00">

 Márgenes
Con otros atributos de la etiqueta <body> se pueden asignar espacios de margen en las
páginas, lo que es muy útil para eliminar los márgenes en blanco que aparecen a los
lados, arriba y debajo de la página. Estos atributos son distintos para Internet Explorer y
para Netscape Navigator, por lo que debemos utilizarlos todos si queremos
que todos los navegadores los interpreten perfectamente.
leftmargin: para indicar el margen a los lados de la página. Válido para iexplorer.
topmargin: para indicar el margen arriba y debajo de la página. Para iexplorer.
marginwidth: la contrapartida de leftmargin para Netscape. (Margen a los lados)
marginheight: igual que topmargin, pero para Netscape. (Margen arriba y abajo)
Una forma de simplificar nuestro código y de evitar introducir continuamente el atributo
align sobre cada una de nuestras etiquetas es utilizando la etiqueta <div>.
Esta etiqueta por si sola no sirve para nada. Tiene que estar acompañada del atributo
align y lo que nos permite es alinear cualquier elemento (párrafo o imagen) de la manera
que nosotros deseemos. Así, el código:
<p align="left">Parrafo1</p>
<p align="left"> Parrafo3</p>
<p align="left"> Parrafo2</p>
Es equivalente a:
<div align="left">
<p>Parrafo1</p>
<p>Parrafo2</p>
<p>Parrafo3</p>
</div>
Como hemos visto, la etiqueta <div> marca divisiones en las que definimos un mismo tipo
de alineado.

9.

ETIQUETAS PARA FORMATO DE PÁRRAFOS

 Abrir o crear un párrafo <p>
 Cerrar o terminar un párrafo </p>
 Párrafo alineado a la izquierda: <p align="left">Texto alineado a la izquierda</p>
 Párrafo Justificado: <p align="justify">Texto alineado al centro</p>
 Párrafo alineado a la derecha: <p align="right">Texto alineado a la derecha</p>
 Interlineado, o sea pasar de un renglón a otro: <br> </br>
 Encabezados:
<h1>Encabezado de nivel 1</h1>
Ejemplo:

<html>
<head>
<title>Todos los encabezados
</title>
</head>
<body>
</body>
</html>
10.
ETIQUETAS PARA FORMATO DE TEXTOS
Las siguientes etiquetas permiten aplicar ciertos atributos a los textos:
 Estilo: Negrita
Podemos escribir texto en negrita incluyéndolo dentro de las etiquetas <b> y </b> (bold).
Esta misma tarea es desempeñada por <strong> y </strong> siendo ambas equivalentes.
Nosotros nos inclinamos por la primera por simple razón de esfuerzo. Escribiendo un
código de este tipo: <b>Texto en negrita</b> Obtenemos este resultado: Texto en
negrita.
 Estilo Kursiva
También en este caso existen dos posibilidades, una corta: <i> e </i> (italic) y otra un poco
más larga: <em> y </em>. He aquí un ejemplo de texto en itálica: <i>Texto en itálica</i>
Que da el siguiente efecto: Texto en itálica
 Estilo subrayado:
El HTML nos propone también para el subrayado el par de etiquetas: <u> y </u>
(underlined). Sin embargo, el uso de subrayados ha de ser aplicado con mucha
precaución dado que los enlaces hipertexto van, a no ser que se indique lo contrario,
subrayados con lo que podemos confundir al lector y apartarlo del verdadero interés de
nuestro texto.
 Tipo de fuente o letra
La etiqueta para el tipo de fuente es <Font face=”escribo el nombre del tipo de fuente que
desee”> y se cierra </Font>
Ejemplo: <font face="Comic Sans MS,arial,verdana">Este texto tiene otra
tipografía</font>
Que se visualizaría así en una página web. Este texto tiene otra tipografía
 Tamaño de fuente
La etiqueta que permite definir el tamaño de la letra es: <font size=4>Este texto es
más grande</font>, los tamaños van desde 1 hasta 7.
 Color de fuente
Aplicamos color a la fuente con la etiqueta:
<font color="se escribe el nombre del color en inglés o el código">en este espacio
digito el texto </font>
Ejemplo:
<Font color=”red”> La naturaleza es maravillosa</Font> o
<Font color=”#FF2400”> La naturaleza es maravillosa</Font>
Las dos formas son correctas y en los dos casos el color de fuente es rojo.

Algunos colores son:

Aqua
Black
Blue
Fuchsia
Gray
Green
Lime
Maroon
Navy
Olive
Purple
Red
Silver
Teal
White
Yellow
 Subíndices y Superíndices:
Este tipo de formato resulta de extremada utilidad para textos científicos. Las etiquetas
empleadas son: <sup> y </sup> para los superíndices
<sub> y </sub> para los subíndices.
Ejemplo: La <sup>13</sup>CC<sub>3</sub>H<sub>4</sub>ClNOS es un heterociclo
alergeno enriquecido El resultado:
13

La

CC3H4ClNOS es un heterociclo alérgeno enriquecido

Ejericicio # 1
1. cree una página sencilla de html en la cual utilice los elementos anteriores para crear su
autobiografía. Debe aplicar: color de fondo, color de letra, imágenes de fondo, etiquetas
para formatos de párrafos y texto.
11.
ETIQUETAS PARA LISTAS
 Numeradas
<ol> Abre la lista
<li>Digito la primera línea o renglón de texto</li>
<li>Digito la segunda línea de texto</li>
</ol>cierra la lista
Podemos colocar listas numeradas con letras, números romanos….. Observa el Ejemplo:
<p>Ordenamos por números</p>
<ol type="1">
<li>Elemento 1
<li> Elemento 2
</ol> <p>Ordenamos por letras</p>
<ol type="a">
<li>Elemento a
<li> Elemento b
</ol>
<p>Ordenamos por números romanos empezando por el 10</p>
<ol type="i" start="10">

<li>Elemento x
<li> Elemento xi
</ol>
El resultado:
Ordenamos por números
1. Elemento 1
2. Elemento 2
Ordenamos por letras
a. Elemento a
b. Elemento b
Ordenamos por números romanos empezando por el 10
x. Elemento x
xi. Elemento xi

 Con viñetas
<ul>Abre la lista
<li>Digita el primer elemento de la lista </li>
<li>Digita el segundoelemento de la lista </li>
</ul> Cierra la lista.
El tipo de viñeta puede ser: circle, disc, square y el siguiente ejemplo te enseñará cómo
definirlo:

Vamos a ver un ejemplo de lista con un cuadrado en lugar de un redondel, y en el último
elemento colocaremos un círculo.
Para ello vamos a colocar el atributo type en la etiqueta <ul>, con lo que afectará a todos
los elementos de la lista.
<ul type="square">
<li>Elemento 1
<li>Elemento 2
<li>Elemento 3
<li type="circle">Elemento 4 </ul>
Que tiene como resultado:
 Elemento 1
 Elemento 2
 Elemento 3
o

Elemento 4

 Listas de definición. Ej.: Un glosario.
Cada elemento es presentado junto con su definición. La etiqueta principal es <dl> y </dl>
(definition list). La etiquetas del elemento y su definición son <dt> (definition term) y
<dd> (definition definition) respectivamente.
Ejemplo:

<p>Diccionario de la Real Academia</p>
<dl>
<dt>Bruja
<dd>Señora montada en una escoba
<dt>Hora
<dd>Medida de tiempo equivalente a sesenta minutos </dl>
El resultado obtenido es:
Diccionario de la Real Academia
Bruja
Señora montada en una escoba
Hora
Medida de tiempo equivalente a sesenta minutos
Ejercicio # 2
Cree en el bloc de notas una nueva página en donde realice con ayuda de las etiquetas
para listas un glosario de html, para ello utilice las lecturas anexas a este documento.

12.
ETIQUETAS PARA CREAR TABLAS
La tabla se empieza a crear con la etiqueta:
<table> y se cierra con </table>
Las filas se crean con la etiqueta <tr> y se cierran con </tr>
Las columnas se crean con la etiqueta <td>digito el texto y cierro la columna </td>
Ejemplo:
<table>
<tr>
<td>Lunes</td>
<td> Martes</td>
</tr>
<tr>
<td> Miércoles</td>
<td> Jueves</td>
</tr>
</table>
Cuando se presenta la página se obtiene el siguiente resultado:
Lunes
Miércoles

Martes
Jueves

Aplicar Atributos a tablas, filas y celdas
Los atributos que se desean colocar a la tabla, fila o celda deben escribirse cuando se
abre la respectiva etiqueta; algunos atributos son comunes.
Atributos para la tabla
Son todas las etiquetas que permiten aplicar atributos de alineación o formato a una tabla,
algunos de ellos son:
 Align: Permite alinear la tabla en la hoja.
 Background: Coloca una imagen de fondo a la tabla
 Bgcolor: Permite colocar un color para toda la tabla

 Border: Define el grosor de la línea o borde de contorno de la tabla
 Bordercolor: Define el color del borde
 Cellpading: Define el espacio o distancia entre el borde y el contenido de la celda.
 Cellspacing: Define el espacio entre los bordes
 Height: Define la altura de la tabla en pixeles o porcentaje
 Width: Determina el ancho deseado para la tabla
Etiquetas que permiten aplicar atributos a las filas y celdas de una tabla:

Align: Para justificar el texto en la celda

Valign para la posición del texto dentro de la celda: (Top) arriba, (middle) en el
centro y (bottom) abajo

Bgcolor: para aplicar color a la celda o a la fila elegida

Bordercolor: Define el color del borde

Background: Permite insertar una imagen en la celda

Height: Define la altura de la celda en pixeles o porcentaje

Width: Define el ancho de la celda en pixeles o porcentaje

Colspan: fusiona dos celdas continuas horizontalmente

Rowspan: Fusiona dos celdas continuas verticalmente.
El siguiente ejemplo nos permite visualizar la forma correcta de aplicar atributos a la tabla,
celdas y filas:
Cuando se presenta la página Web el resultado obtenido es el siguiente:

Ejercicio # 3
Utilizando la página elaborada en el ejercicio # 1, inserte una tabla en la cual organice su
horario de clase semanal.
En una página nueva realice una tabla donde se realice una factura de venta de materiales
para construcción:

Fecha de pedido
unidades

Descripcion

Valor unitario

Valor total

Valor Neto
IVA
Valor Total

Firma

13.

ALMACEN EL LADRILLO
Nit: 89023476-9
Av. 124 # 34-09 Barrio la Belleza
Fecha de entrega

ETIQUETAS PARA INSERTAR IMÁGENES

Las imágenes son muy importantes en un sitio Web, para insertar una imagen en una
página Web se utiliza la etiqueta:
<img src =”Escribo la dirección en la que se encuentra guardada la imagen, para saber la
dirección ubico la imagen y la copio, seguido coloco punto con la tecla del bloque
numérico y luego la extensión de la imagen, cierro las comillas” y cierro la etiqueta </img>
Para saber el tipo de archivo que es la imagen damos clic secundario dentro de ellas y en
la lista de opciones que se activa clic en propiedades, en la ventana que se abre
observamos en donde dice tipo, puede ser: GIF, WMF, JPEG,
Ejemplo:

<img

src=

“C:Archivos

de

programaMicrosoft

OfficeMEDIACntCD1Animatedj0283572.GIF”> </img >
Al presentar la página nos permitirá visualizar la siguiente imagen guardada en la dirección
especificada:

ATRIBUTOS QUE PUEDEN DARSE A UNA IMAGEN
Así como pueden aplicarse atributos a la fuente, a las tablas también las imágenes tienen
algunos atributos que permiten variar y mejorar su aspecto, ellos son:

Alt: Permite hacer una descripción de la imagen.

HEIGHT Y WIDTH: Definen la altura y anchura respectivamente de la imagen en
píxeles.

BORDER: Definen el tamaño en pixeles del cuadro que rodea la imagen.

VSPACE Y HSPACE: Sirven para indicar el espacio libre, en pixeles, que tiene
que colocarse entre la imagen y los otros elementos que la rodean, como texto, otras
imágenes, etc.

LOWSRC: Con este atributo podemos indicar un archivo de la imagen de baja
resolución. Cuando el navegador detecta que la imagen tiene este atributo primero
descarga y muestra la imagen de baja resolución (que ocupa muy poco y que se transfiere
muy rápido). Posteriormente descarga y muestra la imagen de resolución adecuada
(señalada con el atributo src, que se supone que ocupará más y será más lenta de
transferir). Este atributo está en desuso, aunque supone una ventaja considerable para
que la descarga inicial de la web se realice más rápido y que un visitante pueda ver una
muestra de la imagen mientras se descarga la imagen real.

ALINEACIÓN DENTRO DEL DOCUMENTO:
CENTRAR LA IMAGEN: <div align="center"><img src="images/logo.gif"></div>
ALINEAR A LA DERECHA:<img src="imagen.gif" align="right">
ALINEAR A LA IZQUIERDA: <img src="imagen.gif" align="left">


ATRIBUTOS QUE SE PUEDEN DAR A LA ALINEACIÓN:

Estos valores adicionales del atributo Align son:

Top Ajusta la imagen a la parte más alta de la línea. Esto quiere decir que, si hay
una imagen más alta, ambas imágenes presentaran el borde superior a la misma altura.

Bottom Ajusta el bajo de la imagen al texto.

Absbottom Colocara el borde inferior de la imagen a nivel del elemento más bajo
de la línea.

Middle Hace coincidir la base de la línea de texto con el medio vertical de la
imagen.

Absmiddle Ajusta la imagen al medio absoluto de la línea.
EJEMPLO:
<html>
<head>
<title>Imagen y sus atributos</title>
</head>
<body>
<h1>Imagen y sus atributos</h1>
<br>
<img
src="C:Archivos
de
OfficeMEDIACntCD1Animatedj0189257.GIF" width="28"
tamaño original" border="3">
<br>
<br>
<img
src="C:Archivos
de
OfficeMEDIACntCD1ClipArt7j0301506.GIF"
width="68"
achatada" border="0">
<br>
<br>

programaMicrosoft
height="21" alt="Imagen

programaMicrosoft
height="21"
alt="Imagen

<img
src="C:Archivos
de
programaMicrosoft
OfficeMEDIACntCD1ClipArt4j0240639.WMF" width="28" height="51" alt="Imagen
alargada" border="0"> <br>
<br>
<img
src="C:Archivos
de
programaMicrosoft
OfficeMEDIACntCD1Animatedj0213508.GIF" width="56" height="42" alt="Imagen doble
grande" border="0">
</body>
</html>

Con el anterior código obtenemos en la página las siguientes imágenes:

14. ETIQUETAS PARA CREAR ENLACES CON TEXTOS E IMÁGENES
Los enlaces o links son muy importantes en un sitio Web ya que es mediante ellos que
podemos acceder a otras páginas u archivos externos relacionados con el tema.
Un enlace puede ser fácilmente detectado en una página. Basta con deslizar el puntero
del ratón sobre las imágenes o el texto y ver como cambia de su forma original
transformándose por regla general en una mano con un dedo señalador. Adicionalmente,
estos enlaces suelen ir, en el caso de los textos, coloreados y subrayados para que el
usuario no tenga dificultad en reconocerlos.
Podemos fácilmente convertir en enlace un texto o una imagen mediante las siguientes
etiquetas:
<a href="Aquí se digita la dirección en la que se encuentra el documento que deseamos
abrir con el enlace">aquí se digita el contenido o explicación para el usuario</a>
En función del destino los enlaces son clásicamente agrupados del siguiente modo:
• Enlaces internos: los que se dirigen a otras partes dentro de la misma página.
<a href="#abajo">Ir abajo</a>
• Enlaces locales: los que se dirigen a otras páginas del mismo sitio web.
<a href="seccion1/paginas/yyy.html">contenido</a>
• Enlaces remotos: los dirigidos hacia páginas de otros sitios web.
<a href="http://www.comcel.com">ir a playboy.com</a>

• Enlaces con direcciones de correo: para crear un mensaje de correo dirigido a una
dirección.
Para colocar un enlace dirigido hacia una dirección de correo colocamos mailto: en el
atributo href del enlace, seguido de la dirección de correo a la que se debe dirigir el
enlace.
<a href="mailto:ldangel@risaralda.gov.co">ldangel@risaralda.gov.co</a>
• Enlaces con archivos: para que los usuarios puedan hacer download de ficheros.
<a href="d:Ilma Yaneth amadoprofesora Ilma Yanethcurso de Officce">curso de Officce
y html</a>
 Abrir un enlace con una imagen
<a href="c:documents and SettingsAll Usersmenú inicioprogramasjuegos"><img
src="c:archivos
de
programaMicrosoft

officemediacntcd1clipart3j0232734.wmf"></img></a>

Ejercicio # 4
Realice una pagina en html en la cual cree una tabla, dentro de cada casilla ubique una
imagen (fotografía de niños, amigos, familia o tema que desee). Como mínimo 8
imágenes.
Al archivo realizado en el ejercicio 1, debe colocarle un hipervínculo o enlace a esta
imagen, quiere decir que esta página es el álbum de fotos de su biografía.
A cada imagen realice un hipervínculo hacia una nueva página que permita que al hacer
click muestre la descripción de la imagen.

15. ETIQUETAS PARA DISEÑAR FORMULARIOS

Los formularios son esas famosas cajas de texto y botones que podemos encontrar en
muchas páginas web. Son muy utilizados para realizar búsquedas o bien para introducir
datos personales por ejemplo en sitios de comercio electrónico. Los datos que el usuario
introduce en estos campos son enviados al correo electrónico del administrador del
formulario o bien a un programa que se encarga de procesarlo automáticamente.
Los formularios son definidos por medio de las etiquetas <form> y </form>.Dentro de esta
etiqueta <form> debemos especificar algunos atributos:
1.

Action:

Define el tipo de acción a llevar a cabo con el formulario. Como ya hemos dicho, existen
dos posibilidades:
• El formulario es enviado a una dirección de correo electrónico
• El formulario es enviado a un programa o script que procesa su contenido
En el primer caso, el contenido del formulario es enviado a la dirección de correo
electrónico especificada por medio de una sintaxis de este tipo:
<Form action="mailto:direccion@correo.com”...>
Si lo que queremos es que el formulario sea procesado por un programa, hemos de
especificar la dirección del archivo que contiene dicho programa. La etiqueta quedaría en
este caso de la siguiente forma: <form action="dirección del archivo”...>
2.

Method

Este atributo se encarga de especificar la forma en la que el formulario es enviado. Los
dos valores posibles que puede tomar este atributo son post y get. A efectos prácticos y,
salvo que se diga lo contrario, daremos siempre el valor post.
3.

Enctype

Se utiliza para indicar la forma en la que viajará la información que se mande por el
formulario. En el caso más corriente, enviar el formulario por correo electrónico, el valor de
este atributo debe de ser "text/plain". Así conseguimos que se envíe el contenido del
formulario como texto plano dentro del email.
Si queremos que el formulario se procese automáticamente por un programa,
generalmente no utilizaremos este atributo, de modo que tome su valor por defecto, es
decir, no incluiremos enctype dentro de la etiqueta <form>
Ejemplo de etiqueta <form> completa
Así, para el caso más habitual -el envío del formulario por correo- la etiqueta de creación
del formulario tendrá el siguiente aspecto:
<form action="mailto:direccion@correo.com (o nombre del archivo de proceso)"
method="post" enctype="text/plain">

TIPOS DE FORMULARIOS

Existe una gran variedad de formularios que pueden crearse en un sitio Web, entre ellos
tenemos:
 Campos de texto
Texto corto
Las cajas de texto son colocadas por medio de la etiqueta <input>. Dentro de esta
etiqueta hemos de especificar el valor de dos atributos: type y name.
La etiqueta es de la siguiente forma:
<input type="text" name="nombre">
De este modo expresamos nuestro deseo de crear una caja de texto cuyo contenido será
llamado nombre (por ejemplo). El aspecto de este tipo de cajas es de sobra conocido, aquí
lo podemos ver:

Algunos atributos que podemos dar a los campos o cajas de texto son:

Size: Define el tamaño de la caja en número de caracteres. Si al escribir el usuario
llega al final de la caja, el texto ira desfilando a medida que se escribe haciendo
desaparecer la parte de texto que queda a la izquierda.

Maxlenght: Indica el tamaño máximo del texto que puede ser tomado por el
formulario. Es importante no confundirlo con el atributo size. Mientras el primero define el
tamaño aparente de la caja de texto, maxlenght indica el tamaño máximo real del texto
que se puede escribir. Podemos tener una caja de texto con un tamaño aparente (size)
que es menor que el tamaño máximo (maxlenght). Lo que ocurrirá en este caso es que, al
escribir, el texto ira desfilando dentro de la caja hasta que lleguemos a su tamaño máximo
definido por maxlenght, momento en el cual nos será imposible continuar escribiendo.

Value: En algunos casos puede resultarnos interesante asignar un valor definido
al campo en cuestión. Esto puede ayudar al usuario a rellenar más rápidamente el
formulario o darle alguna idea sobre la naturaleza de datos que se requieren. Este valor
inicial del campo puede ser expresado mediante el atributo value.

Veamos su
efecto con
un ejemplo
sencillo:
<input type="text" name="nombre" value="Perico Palotes">
Genera un campo de este tipo:

 Texto oculto
Podemos esconder el texto escrito por medio de asteriscos de manera que pueda aportar
cierta confidencialidad. Este tipo de campos son análogos y se usan para digitar claves; la
etiqueta que nos permite crear esta caja de texto es:
<input type="password" name="nombre">
En este caso, podemos comprobar que al escribir dentro del campo en lugar de texto
veremos asteriscos.
Ejemplo:
<input type="password" name="nombre">
Al presentar la página podemos visualizar la caja de texto así:

 Texto largo
Si deseamos poner a la disposición de usuario un campo de texto donde pueda escribir
cómodamente sobre un espacio compuesto de varias líneas, hemos de invocar una nueva
etiqueta: <textarea> y su cierre correspondiente.
Este tipo de campos son prácticos cuando el contenido a enviar no es un nombre teléfono
o cualquier otro dato breve, sino más bien, un comentario, opinión, etc.
Dentro de la etiqueta textarea deberemos indicar, como para el caso visto anteriormente,
el atributo name para asociar el contenido a un nombre que será asemejado a una
variable en los programas de proceso. Además, podemos definir las dimensiones del
campo a partir de los atributos siguientes:
o
Rows: Define el número de líneas del campo de texto.
o
cols : Define el número de columnas del campo de texto.
o
La etiqueta queda por tanto de esta forma:
o
<textarea name="comentario" rows="10" cols="40"></textarea>, al digitarla y
presentar la página nos permite visualizar el formulario así:

o

Lista de Opciones

Las listas de opciones son ese tipo de menús desplegables que nos permiten elegir una (o
varias) de las múltiples opciones que nos proponen. Para construirlas emplearemos una
etiqueta con su respectivo cierre: <select>
Como para los casos ya vistos, dentro de esta etiqueta definiremos su nombre por medio
del atributo name. Cada opción será incluida en una línea precedida de la etiqueta
<option>.
Podemos ver, a partir de estas directivas, la forma más típica y sencilla de esta etiqueta:
<select name="NOMBRE CORRECTO DE LA RECTORA DE MI COLEGIO">
<option>GLORIA ARIAS ARIZA</option>
<option>GLORIA MENDOZA ARIAS</option>
<option>GLORIA ARIAS ARDILA</option>
<option>GLORIA ARIAS MENDOZA</option>
</select>
El resultado que se visualiza cuando se presenta la página Web es:

 Botones de radio

Existe otra alternativa para plantear una elección, en este caso, obligamos al internauta a
elegir únicamente una de las opciones que se le proponen. La etiqueta empleada en este
caso es <input> en la cual tendremos el atributo type ha de tomar el valor radio.
Ejemplo:
<input type="radio" name="estacion" value="1">Primavera <br>
<input type="radio" name="estacion" value="2">Verano <br>
<input type="radio" name="estacion" value="3">Otoño <br>
<input type="radio" name="estacion" value="4">Invierno
Al presentar la página Web se visualiza el grupo de opciones así:

 Cajas de Validación
Este tipo de elementos pueden ser activados o desactivados por el visitante por un simple
clic sobre la caja para seleccionar la opción deseada:

La etiqueta para crear cajas de validación es: <input type="checkbox" name="se digita la
opción deseada">
Ejemplo:
El orden correcto de los colores de la bandera de colombia son:
<input type="checkbox" name="opción 1 "> rojo-amarillo-azul <br>
<input type="checkbox" name="Opción 2 "> amarillo -azul -rojo <br>
<input type="checkbox" name="Opción 3 "> amarillo- rojo- azul <br>
El código permite visualizar en la página las cajas de validación así:

Envio, borrado y demás en formularios HTML
Los formularios han de dar plaza no solamente a la información a tomar del usuario sino
también a otra serie de funciones. Concretamente, han de permitirnos su envío mediante
un botón. También puede resultar práctico poder proponer un botón de borrado o bien
acompañarlo de datos ocultos que puedan ayudarnos en su procesamiento.
Para terminar la saga de formularios, daremos a conocer los medios de instalar todas
estas funciones.
Botón de envío
Permite que el usuario o navegante de la página envíe a su creador o gestor cierta
información por medio de formularios (grupos de opciones, cajas de validación), la etiqueta
utilizada es:
<input type="submit" value="Enviar">
Con este código generamos un botón como este:

Botón de borrado
Este botón nos permitirá borrar el formulario por completo en el caso de que el usuario
desee rehacerlo desde el principio. Su estructura sintáctica es análoga a la anterior:
<input type="reset" value="Borrar">
A diferencia del botón de envío, indispensable en cualquier formulario, el botón de borrado
resulta meramente optativo y no es utilizado frecuentemente. Hay que tener cuidado de no
ponerlo muy cerca del botón de envío y de distinguir claramente el uno del otro. Código
que permitió crear el formulario visualizado en la anterior ventana:

Código que permitió crear el formulario visualizado en la anterior ventana:
<h3>EN EL SIGUIENTE FORMULARIO COMPLETA LA INFORMACIÓN SOBRE LA
FRECUENCIA CON QUE VIAJAS</H3>
<form action="mailto:jaimetru@risaralda.gov.co"
Nombre

method="post"

<input type="text" name="nombre" size="30" maxlength="100"> <br>

enctype="text/plain">

Email <input type="text" name="email" size="25" maxlength="100" value="@"> <br>
Población <input type="text" name="Ciudad a la que viajas" size="20" maxlength="60">
<br>
Sexo <br> <input type="radio" name="sexo" value="Varon" checked>
Hombre <br> <input type="radio" name="sexo" value="Hembra"> Mujer <br> <br>
Frecuencia de los viajes <br>
<select name="utilizacion">
<option value="1">Varias veces al dia
<option value="2">Una vez al dia
<option value="3">Varias veces a la semana
<option value="4">varias veces al mes
</select> <br> <br>
COMENTA SOBRE TU MEJOR VIAJE <br>
<textarea cols="30" rows="7" name="comentarios">
</textarea><br><br>
14.

ETIQUETAS PARA ANIMACIÓN

Existe una gran variedad de etiquetas que permiten darle animación a los objetos del sitio
web, algunas de ellas son:
 Mover un título de izquierda a derecha: <marquee></marquee>, la etiqueta se coloca
antes del título texto que deseo mover.
 Avanzar y retroceder un letrero: <marquee align=”middle” behavior=”alternate”>
</marquee>
 Insertar un sonido a la página:
<BGSOUND SRC=”se escribe la dirección en la que se encuentra el sonido que se desea
reproducir, seguido se coloca punto con el bloque de teclas numéricas y se escribe el tipo
de archivo y finalmente los atributos del sonido.
Ejemplo:
<BGSOUND SRC="D:SISTEMASINSTRUMENTAL02 COUP DE COEUR.mp3"
loop="true">
<wildth="200"Heigh="55"Autustar="true"loop="false"HIPPEN="true"></bgsound>

¿CÓMO APRENDER?
DIMENSIÓN ARGUMENTATIVA

TRABAJO INDIVIDUAL
1. Leo detenidamente la información presentada en la parte de conceptos básicos de la
guía
TRABAJO EN GRUPOS
1. Me reúno con un compañero(a) y comentamos a cerca de lo leído en los conceptos
básicos respondiendo los siguientes interrogantes:
 ¿Cuál es el objetivo que debemos lograr con el desarrollo de la guía?
 ¿Qué aplicaciones debemos manipular en el desarrollo de la guía?
 ¿Qué conceptos de la guía ya conocía?
 ¿Qué conceptos de la guía son totalmente nuevos?
ACTIVIDADES PRÁCTICAS
1.
2.
3.
4.

Creo el código necesario que me permita visualizar la siguiente página Web.
Observo el formato y animación de la página en el computador de mi profesora.
Puedo cambiar los atributos a la tabla y a la fuente.
Presento mi trabajo.

¿QUÉ APRENDÍ?
DIMENSIÓN PROPOSITIVA

ESTUDIANTE:____________________________GRUPO:________ FECHA: ________
JUICIO VALORATIVO

INDICADOR DE LOGRO: Diseñar un sitio Web de dos páginas en donde utilice los
diferentes códigos del lenguaje HTML.
Ahora vas a desarrollar tu creatividad y habilidad manipulando los diferentes códigos
vistos en la guía.
1.
Diseña un sitio Web de dos páginas sobre el tema: Mecanismos de participación
ciudadana (Derecho de petición, tutela, acción ciudadana, acción de cumplimiento,
acción popular, áreas corpus, consulta, referendo, voto) utilizando el lenguaje HTML que
contenga:

Títulos

Texto en párrafos con diferentes formatos (estilo, color, tamaño, alineación y tipo
de fuente)

Imágenes

Color o imagen de fondo

Sonido

Texto en tabla

Texto en listas numeradas o con viñetas

En laces internos (dentro del mismo sitio Web) y externo (con otros archivos)

Formularios

Efecto de animación para el texto o imágenes

FORTALEZAS

DEBILIDADES

INDICADOR DE LOGRO: Diseñar un sitio Web utilizando el lenguaje HTML.

MIDE TU GRADO DE ASIMILACIÓN, CREATIVIDAD E INNOVACIÓN PARA DISEÑAR
Y PERSONALIZAR TU PROPIO SITIO WEB.
1.
Crea un sitio Web mínimo de 4 páginas sobre un tema de tu interés, en el que
apliques los conocimientos adquiridos en el desarrollo de la Guía número 4 y mejóralo
consultando e insertando nuevos códigos.
2.
Debes diseñar una página principal en la que presentes el tema del sitio y los
subtemas de cada página secundaria.
3.
Las páginas deben contener enlaces que te permitan navegar en forma rápida.
4.
Presenta el Sitio Web a tu profesora y compañeros(as) de grupo.

FORTALEZAS

DEBILIDADES

Guia de html 3 y 4 periodo

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Destacado

Destacado (20)

Similar a Guia de html 3 y 4 periodo

Similar a Guia de html 3 y 4 periodo (20)

Guia de html 3 y 4 periodo