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:

La 13

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 Martes

Miércoles 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:

ALMACEN EL LADRILLO

Nit: 89023476-9

Av. 124 # 34-09 Barrio la Belleza

Fecha de pedido Fecha de entrega

unidades Descripcion Valor unitario Valor total

Firma

Valor Neto

IVA

Valor Total

13. 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 programa\Microsoft

Office\MEDIA\CntCD1\Animated\j0283572.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 programa\Microsoft Office\MEDIA\CntCD1\Animated\j0189257.GIF" width="28" height="21" alt="Imagen tamaño original" border="3"> <br> <br> <img src="C:\Archivos de programa\Microsoft Office\MEDIA\CntCD1\ClipArt7\j0301506.GIF" width="68" height="21" alt="Imagen achatada" border="0"> <br> <br>

<img src="C:\Archivos de programa\Microsoft Office\MEDIA\CntCD1\ClipArt4\j0240639.WMF" width="28" height="51" alt="Imagen alargada" border="0"> <br> <br> <img src="C:\Archivos de programa\Microsoft Office\MEDIA\CntCD1\Animated\j0213508.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:[email protected]">[email protected]</a>

• Enlaces con archivos: para que los usuarios puedan hacer download de ficheros.

<a href="d:\Ilma Yaneth amado\profesora Ilma Yaneth\curso de Officce">curso de Officce

y html</a>

Abrir un enlace con una imagen <a href="c:\documents and Settings\All Users\menú inicio\programas\juegos"><img

src="c:\archivos de programa\Microsoft

office\media\cntcd1\clipart3\j0232734.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:[email protected]”...> 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:[email protected] (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:[email protected]" method="post" enctype="text/plain">

Nombre

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

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:\SISTEMAS\INSTRUMENTAL\02 COUP DE COEUR.mp3"

loop="true">

<wildth="200"Heigh="55"Autustar="true"loop="false"HIPPEN="true"></bgsound>

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. Creo el código necesario que me permita visualizar la siguiente página Web.

2. Observo el formato y animación de la página en el computador de mi profesora.

3. Puedo cambiar los atributos a la tabla y a la fuente.

4. Presento mi trabajo.

¿CÓMO APRENDER?

DIMENSIÓN ARGUMENTATIVA

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

¿QUÉ APRENDÍ?

DIMENSIÓN PROPOSITIVA

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

Documents

Transcript of Guia de html 3 y 4 periodo