Sesion HTML

Taller de Programacin Web

Ing. Jos Alberto CASTRO CURAY Pg. N 1



HTML

l lenguaje utilizado por la World Wide Web es el HTML, actualmente

el lenguaje hipermedia ms aceptado a nivel mundial. El HTML (Hyper

Text Markup Language) es el lenguaje con el que se escriben las

pginas web. Es un lenguaje de hipertexto, es decir, un lenguaje que permite

escribir texto de forma estructurada, y que est compuesto por etiquetas,

que marcan el inicio y el fin de cada elemento del documento.

Un documento hipertexto no slo se compone de texto, puede contener

imgenes, sonido, vdeos, etc., por lo que el resultado puede considerarse como un documento

multimedia.

Los documentos HTML deben tener la extensin html o htm, para que puedan ser visualizados en

los navegadores (programas que permiten visualizar las pginas web). Los navegadores se

encargan de interpretar el cdigo HTML de los documentos, y de mostrar a los usuarios las

pginas web resultantes del cdigo interpretado.

Qu se necesita para crear una pgina Web?

Lo principal de HTML es que no necesitas ningn lenguaje de programacin o programa especial

para crear pginas Web. Tan solo necesitas un editor como el Bloc de Notas o WordPad de

Windows.

Un editor es un programa que permite redactar documentos, pero hoy en da existen editores

que le permiten crear pginas Web sin la necesidad de escribir ni una sola lnea de cdigo HTML.

Estos editores disponen de un entorno visual, y generan automticamente el cdigo de las

pginas. Al poder ver en todo momento cmo quedar la pgina en el navegador, se facilita la

creacin de las pginas, y el uso de mens permite ganar rapidez.

Estos editores visuales pueden generar en ocasiones cdigo basura, es decir, cdigo que no sirve

para nada, en otras ocasiones puede ser ms efectivo corregir directamente el cdigo por lo que

resulta necesario saber HTML para poder depurar el cdigo de nuestra pginas.

E



Entre los editores visuales ms comunes para crear pginas web son: Microsoft Frontpage,

Macromedia Dreamweaver, Adobe Pagemill, NetObjects Fusion, CutePage, HotDog Proffesional,

Netscape Composer y Arachnophilia, EditPlus, entre otros, de los cuales algunos tienen la ventaja

de ser gratuitos.

Interfaces del editor EditPlus

Etiquetas

Las etiquetas o marcas delimitan cada uno de los elementos que componen un documento HTML.

Existen dos tipos de etiquetas, la de comienzo de elemento y la de fin o cierre de elemento.

La etiqueta de comienzo est delimitada por los caracteres < y >. Est compuesta por el

identificador o nombre de la etiqueta, y puede contener una serie de atributos opcionales que

permiten aadir ciertas propiedades.

Sintaxis es:

Los atributos de la etiqueta de comienzo siguen una sintaxis predefinida y pueden tomar

cualquier valor propio del usuario, o valores HTML predefinidos.

La etiqueta de final est delimitada por los caracteres . Est compuesta por el identificador

o nombre de la etiqueta, y no contiene atributos.

Sintaxis es:

Existen excepciones de algunos elementos que no necesitan etiqueta de cierre. Tambin es

posible anidar etiquetas, es decir, insertar etiquetas entre otras etiquetas de comienzo y de

cierre.



Estructura bsica de una pgina web

La estructura bsica de una pgina es:

Identificador del tipo de documento

Todas las pginas web escritas en HTML tienen que tener la extensin html o htm. Al mismo

tiempo, tienen que tener las etiquetas y .

Entre las etiquetas y estar comprendido el resto del cdigo HTML de la

pgina.

Cabecera de la pgina

La cabecera de la pgina se utiliza para agrupar informacin sobre ella, como puede ser el

ttulo. Est formada por las etiquetas y .

Entre las etiquetas y , las etiquetas que podemos encontrar y ms se utilizan

son:

, ,

Esta etiqueta se utiliza para aadir informacin sobre la pgina, la cual puede ser utilizada

por los buscadores. Los buscadores consultan la informacin de la etiqueta de las

pginas, buscando coincidencias con lo que el usuario pretende encontrar. A travs de

esta etiqueta pueden especificarse los atributos name y content.

o El atributo name indica el tipo de informacin. y

o El atributo content indica el valor de dicha informacin.

Para indicar el tipo de informacin podemos utilizar cualquier palabra que deseemos,

como puede ser "Autor", "Palabras clave", "Descripcin", etc. Pero debido a que la

...

...



mayora de buscadores estn en ingls, es preferible que el tipo de informacin se

especifique en ingls. Entre los tipos de informacin ms utilizados son los siguientes:

Tipo Significado

author Autor de la pgina

classification Palabras para clasificar la pgina en los buscadores

description Descripcin del contenido de la pgina

generator Programa utilizado para crear la pgina

keywords Palabras clave

La etiqueta no necesita etiqueta de cierre. Para cada etiqueta solo es

posible indicar un tipo de informacin y su valor, pero es posible insertar varias etiquetas

en un mismo documento.

La etiqueta ha de estar entre las etiquetas y . Ejemplo:

...

Ttulo de la pgina

El ttulo de la pgina es el que aparecer en la parte superior de la ventana del navegador,

cuando la pgina est cargada en l. Para asignar un ttulo a una pgina es necesario

escribir el texto deseado entre las etiquetas y .

Mi Primera pagina Web

Cuerpo del documento

El cuerpo del documento contiene la informacin propia del documento, es decir lo que

queremos que se visualice, el texto de la pgina, las imgenes, los formularios, etc.

Todos estos elementos tienen que encontrarse entre las etiquetas y , que

van justo debajo de la cabecera.

A travs de la etiqueta es posible establecer el color o la imagen de fondo de la

pgina, aplicar formato al texto, a los mrgenes.



Atributo bgcolor define el color de fondo, se le debe asignarle un color representado en

hexadecimal o por un nombre predefinido.

Por ejemplo, para hacer que el color de fondo de una pgina sea de color azul, tendremos

que escribir:

Atributo background permite establecer una imagen de fondo, indicando la ruta en la que

se encuentra la imagen.

Por ejemplo, para hacer que la imagen de fondo de una pgina sea la imagen mifondo.gif,

que se encuentra en el mismo directorio en el que se encuentra guardada la pgina,

tendremos que escribir:

En el caso de que la imagen no se encuentre en el mismo directorio que la pgina, y se

encuentre dentro de la carpeta imagenes, que s se encuentra en el mismo directorio que

la pgina, tendremos que escribir:

Atributo text permite establecer el color del texto de la pgina.

Por ejemplo, para hacer que el color del texto de una pgina sea de color rojo, tendremos

que escribir:

Atributos leftmargin (margen izquierdo) y topmargin (margen superior) permite

establecer el borde de la ventana y el contenido de la pgina, cuyo tamao se da en

pxeles

Atributos marginwidth (anchura del margen) y marginheight (altura del margen).

Estos atributos suelen utilizarse para eliminar el margen, para lo cual deben valer cero.

...

...

...

...

...



Comentarios

Para insertar comentarios dentro del cdigo, basta con insertar el texto entre .

Todo el cdigo que se inserte entre estos smbolos no ser visualizado en los navegadores.

Saltos de lnea

Para insertar un salto de lnea, se utiliza la etiqueta donde se desee que se produzca el salto.

La etiqueta no necesita la etiqueta de cierre. Por ejemplo, para insertar el texto:

Texto preformateado

Las etiquetas y permite que el texto aparezca en el navegador tal cual ha sido

insertado dentro de estas etiquetas, es decir, los espacios en blanco que se inserten en el texto,

as como todos los saltos de lnea.

El inconveniente de esta etiqueta es que entre las etiquetas y no se pueden incluir

las etiquetas (para incluir imgenes), (para incluir objetos como animaciones),

, , ni .

Separadores

permite insertar una regla horizontal, que suele utilizarse para separar secciones dentro de

una misma pgina. No se necesita de la etiqueta de cierre.

Atributo Significado Posibles valores

align alineacin de la regla dentro de la pgina

left (izquierda), right (derecha), center (centro)

width ancho de la regla un nmero, acompaado de % cuando se desee que sea en porcentaje

size alto de la regla un nmero

noshade eliminar el sombreado de la regla no puede tomar valores

Sangrado de texto

Las etiquetas y permite aplicar sangra. Su uso de esta etiqueta

obliga a que el texto aparezca en una nueva lnea.

Bienvenidos a la Provincia de Huarmey Bienvenidos

a la Provincia de Huarmey



Insertando el texto entre varias etiquetas y se consigue que los

mrgenes sean mayores.

Formateado de texto ...

Si desea formatear un texto utilice la etiqueta . Para ello, podemos insertar el texto entre

las etiquetas y , especificando algunos de los atributos de la etiqueta:

Atributo Significado valores Posibles

face fuente nombre de la fuente, o fuentes

color color del texto nmero hexadecimal o texto predefinido

size tamao del texto valores del 1 al 7, siendo por defecto el 3.

Ejemplo:

Bienvenidos a la Web

Tambin es posible definir una fuente para todo el documento. Para ello, hay que insertar la

etiqueta despus de la etiqueta , la cual no necesita una etiqueta de cierre, y

tiene los mismos atributos que la etiqueta . Por ejemplo:

Resaltado del texto ...

Existen etiquetas que permiten la apariencia o el estilo del texto, que por lo general se utilizan

para resaltarlo. Estas etiquetas son:

Etiqueta Significado

Negrita

Cursiva

Subrayado

Tachado

Teletipo (mquina de escribir)

Aumenta el tamao de la fuente

Disminuye el tamao de la fuente

Destacado

Subndice

Superndice

Debe de tener en cuenta que todas estas etiquetas necesitan una etiqueta de cierre, y pueden

aplicarse varias etiquetas al mismo texto.












Prrafos ...

Para agrupar textos en prrafos diferentes se debe de utilizar las etiquetas y .

No es necesario insertar la etiqueta para que un nuevo prrafo aparezca debajo del anterior,

ya que las etiquetas y hacen que se cambie de lnea automticamente.

Tambin puede alinear el texto de cada prrafo utilizando los atributo align, cuyos valores pueden

ser left (izquierda), right (derecha), center (centrado) o justify (justificado).

Agrupacin de bloques ...

La etiqueta , al igual que la etiqueta , se utiliza para agrupar bloques de texto, pero con

la diferencia de que la separacin entre ellos es menor. Tambin debe de utilizar la etiqueta de

cierre , y puede utilizar el atributo align. As mismo, hacen que se cambie de lnea

automticamente



Agrupacin de bloques ...

Otro par de etiquetas que permiten agrupar bloques de texto, pero que no implican el cambio de

lnea, son las etiquetas y .

Encabezados ...

Existen seis tipos de encabezados que suelen utilizarse para establecer ttulos dentro de una

pgina. La diferencia entre los distintos tipos de encabezado es el tamao de la letra, el tipo de

resaltado, y la separacin existente entre el texto y los elementos que tiene encima y debajo de

l. Todas ellas precisan una etiqueta de cierre.

Etiqueta Ejemplo

Para todas estas etiquetas es posible especificar el valor del atributo align.

Marquesinas

Son lneas de texto que pueden desplazarse de un lado a otro de la ventana en forma de lnea.

Para insertar una marquesina, es necesario insertar el texto entre las etiquetas y

.

La marquesina, por defecto, se desplaza de derecha a izquierda indefinidamente, pero si lo deseas

puedes hacer que estas propiedades varen.

atributo behavior puede modificarse el tipo de movimiento. Puede tomar los valores

alternate (de lado a lado de la ventana, como si rebotara en los extremos), scroll (de un lado

a otro, continuamente) o slide (de un lado a otro, pero una sola vez).

atributo direction puede modificarse la direccin en la que se mover el texto. Puede tomar

los valores down (de arriba a abajo), up (de abajo a arriba), right (de derecha a izquierda) o

left (de izquierda a derecha).



atributo bgcolor permite establecer un color de fondo.

Por ejemplo:

Las listas y

Cada uno de los elementos de una lista ha de insertarse entre las etiquetas y . Ejemplo:

Carreras Profesionales Computacin Sistemas Informtica

Listas Desordenadas Vietas y :

Para que una lista sea desordenada, sus elementos debern encontrarse entre las etiquetas

y .

A travs del atributo type es posible elegir el tipo de vieta, que puede ser circle (crculo),

disc (disco) o square (cuadrado). Ejemplo:


HUARMEY *** PERU




Lista ordenada Numeracin y :

Para que una lista sea ordenada, sus elementos debern encontrarse entre las etiquetas

y .

A travs del atributo type es posible elegir el tipo de numeracin, que puede ser 1

(nmeros), a (letras minsculas), A (letras maysculas), i (nmeros romanos en minsculas) o

I (nmeros romanos en maysculas). Ejemplo:



Anidar Listas:

Se puede anidar listar utilizando numeracin y vietas a la vez.

Ejemplo:



COMPUTACION Y SISTEMAS Primer Ciclo Formacin General tica Matemtica Comunicacin Formacin Profesional Fundamentos Computacin Bsica Segundo ciclo Formacin General Responsabilidad Matemtica II Fsica Formacin Profesional Programacin Base de Datos



Hiperenlace

Un hipervnculo o vnculo, es un enlace, que al ser pulsado lleva de una pgina o archivo. Aquellos

elementos (texto, imgenes, etc.) sobre los que se desee insertar un enlace han de encontrarse

entre las etiquetas y .

A travs del atributo href se especifica la pgina a la que est asociado el enlace.

Por ejemplo El siguiente cdigo permite abrir la pgina Web de google:

TIPOS DE REFERENCIAS

Existen diferentes formas de expresar una referencia a una pgina a travs del atributo href.

Referencia absoluta: Conduce a una ubicacin externa (internet) al sitio en el que se

encuentra el documento. En este caso hay que empezar la referencia por http://. Ejemplo:

Referencia relativa al sitio: Conduce a un documento situado dentro del mismo sitio que el

documento actual. Un sitio web es un conjunto de archivos y carpetas, relacionados entre s,

con un diseo similar o un objetivo comn, estando todos ellos dentro de una misma

carpeta, conocida como carpeta raz del sitio.

Por ejemplo, si el archivo web.htm se encuentra directamente dentro de la carpeta raz del

sitio, para insertar el enlace se escribira:

El smbolo "/" delante del nombre del archivo la carpeta raz del sitio. Si el archivo web.htm

se encontrara dentro de una carpeta llamada cursoweb, la cual se encuentra dentro de la

carpeta raz del sitio, se habra que escribir:

Referencia relativa al documento: Conduce a un documento situado dentro del mismo sitio

que el documento actual, pero partiendo del directorio en el que se encuentra el actual.

Teniendo en cuenta que el documento web.htm se encuentra dentro de la misma carpeta

que el documento actual, para insertar el enlace, se tendra que escribir:

ir a www.google.com.pe


ir al tema Web

ir al tema Web

ir al tema Web



En este caso no aparece el smbolo "/" delante del nombre del documento.

Teniendo en cuenta que el documento web.htm se encontrara dentro de una carpeta

llamada cursoweb y esta estuviera dentro de la misma carpeta que el documento actual,

se tendra que escribir:

Punto de fijacin: Conduce a un punto dentro de un documento, ya sea dentro del actual o

de otro diferente. Para ello el vnculo debe ser: "nombre_de_documento#nombre_de_punto"

Por ejemplo, si dentro del archivo web.htm existiese un punto de fijacin llamado

estructura, entonces se tendra que escribir:

PUNTOS DE FIJACIN. ANCLAS

Los puntos de fijacin se utilizan cuando se tienen documentos extensos, divididos en varios

apartados. Estos puntos de fijacin nos permiten ir directamente al apartado deseado, en lugar

de ir al comienzo del documento. Son muy tiles a la hora de crear ndices.

Un ancla necesita que se inserten las y , con el atributo name, que puede tomar

cualquier nombre o valor inventado por el usuario, se recomienda no utilizar caracteres

especiales.

Por ejemplo, para insertar un punto de fijacin delante del siguiente texto:

La estructura de una pgina

Se tendra que escribir:

Si el documento actual se llama web.htm, y el ancla se llama estructura, el enlace que nos llevara

directamente a la lnea de texto en la que se encuentra el ancla sera:

Si el ancla se encuentra en el mismo documento que el enlace, como ocurre en este caso, ya no es

necesario escribir el nombre de la pgina en el atributo href.

ir al tema Web

ir a la Estructura de una pgina Web

La estructura de una pgina





DESTINO DEL ENLACE

El destino del enlace determina en qu ventana va a ser abierta la pgina vinculada, se especifica

a travs del atributo target al que se le puede asignar los siguientes valores:

_blank: Abre el documento vinculado en una ventana nueva del navegador.

_parent: Abre el documento vinculado en la ventana del marco que contiene el vnculo o en

el conjunto de marcos padre.

_self: Es la opcin predeterminada. Abre el documento vinculado en el mismo marco o

ventana que el vnculo.

_top: Abre el documento vinculado en la ventana completa del navegador.

Esta opcin se utiliza cuando la pgina de destino est fuera de nuestro sitio para que cuando el

usuario cierre la ventana del explorador, se encuentre automticamente en la pgina desde la que

haba salido (que vuelva a nuestro sitio).

FORMATO DE LOS ENLACES

En general, un texto que tiene un vnculo asociado suele aparecer subrayado.

Cuando el vnculo est definido sobre una imagen, en el borde aparecen una serie de

puntitos al pulsar sobre ella.

Cuando el vnculo est definido sobre una zona de una imagen (un mapa), aparece el

contorno de esa zona.

Si el vnculo se asigna a un texto como a una imagen, el cursor cambia de forma al situarse

encima del vnculo. Suele adquirir la apariencia de una mano sealando.

Normalmente los vnculos de texto cambian de color cuando el enlace ha sido ya pulsado o

cuando el puntero del ratn se posiciona sobre l, estos cambios estn predefinidos en cada

navegador, pero nosotros podemos cambiar esos colores.

Los colores de los vnculos pueden especificarse a travs de las propiedades de la pgina, en la

etiqueta . Estos colores se asignan a travs de los atributos:

link: Permite determinar el color de los enlaces sin visitar (enlace que no ha sido pulsado

ninguna vez).

alink: Permite determinar el color del enlace activo (enlace que acaba de ser pulsado).

vlink: Permite determinar el color de los enlaces visitados (enlaces que ya han sido pulsados).




Por ejemplo:

Mientras no se visite el enlace ser de color azul

Mientras la pgina sea la ltima visitada, el enlace ser de color rojo

Cuando se haya visitado la pgina el enlace ser de color amarillo

OTROS TIPOS DE ENLACES

Entre otros tipos de enlaces que no conducen a otra pgina web tenemos:

Correo electrnico: Abre la aplicacin Outlook Express para escribir un correo electrnico,

cuyo destinatario ser el especificado en el enlace. Para ello la referencia del vnculo debe ser

"mailto:direcciondecorreo".

Por ejemplo, para insertar un enlace que permita enviar un correo electrnico al docente del

presente curso, tendras que escribir:

Vnculo a ficheros para descarga: El valor del atributo href normalmente ser una pgina

web (con extensin htm, html, asp, php...) pero tambin puede ser un fichero comprimido,

una hoja de Excel, un documento Word, un documento con extensin pdf.

Cuando el enlace no es a una pgina Web nos aparecer el cuadro de dilogo en el que el

navegador le pide al usuario

permiso para descargar el fichero

en su ordenador.

El navegador reconoce algunas

extensiones como asociadas a un

determinado programa (por

ejemplo.doc a Word, .pdf al

Acrobar Reader, .xls al Excel...).

Por ejemplo: si se desea descargar el archivo tutorial.pdf, entonces escribiras:


e-mail para el docente

Descargue tutorial aqu



Vnculo vaco: Al pulsar sobre un enlace vaco no se abre ninguna pgina ni archivo, pero el

formato es el mismo que el de cualquier otro enlace. El vnculo debe ser el smbolo

almohadilla "#".

Por ejemplo, para insertar el enlace vaco:

Imagen

Las imgenes permiten mejorar la apariencia de las pginas web, o dotarla de una mayor

informacin visual. Para insertar una imagen es necesario insertar la etiqueta . Dicha

etiqueta no necesita etiqueta de cierre.

El nombre de la imagen ha de especificarse a travs del atributo src.

Por ejemplo, para insertar una imagen que se llama logo_web.gif y que est dentro de la carpeta

imgenes, que se encuentra en el mismo directorio que el documento actual (referencia relativa

al documento), se tendra que escribir:

Para trabajar de una forma ms sencilla y ordenada, es recomendable que todos los documentos

html se encuentren en un mismo directorio, y que dentro de este directorio existan diferentes

carpetas para agrupar otros objetos, como puede ser una carpeta destinada a almacenar

imgenes, o una carpeta destinada a almacenar archivos de audio, etc.

Texto alternativo

Cuando una imagen no puede ser visualizada en el navegador, cosa que puede ocurrir al

especificar mal el valor del atributo src, aparece un recuadro blanco con una X roja en su lugar,

junto con el nombre de la imagen. Podemos hacer que en lugar de mostrarse el nombre de la

imagen aparezca el texto que nosotros deseemos, gracias al atributo alt.

Por ejemplo, imagina que deseamos mostrar una imagen llamada logo_web.gif, con el texto

alternativo Imagen logotipo, para ello insertamos el siguiente cdigo:

El texto alternativo se muestra tambin al situar el puntero sobre la imagen.

Borde de una imagen

Al visualizar una pgina en un navegador las imgenes aparecen sin ningn borde alrededor, pero

es posible establecer uno a travs del atributo border.

vnculo vaco



El atributo border puede tomar valores numricos, que indican el grosor en pxeles del borde.

Por ejemplo, para insertar la siguiente imagen con borde:

Tamao de una imagen

Cuando insertamos una imagen, esta se muestra en los navegadores con su tamao original, pero

por diversos motivos puede interesarnos modificar dicho tamao. A travs de los atributos width

(anchura) y height (altura) puede modificarse el tamao de la imagen.

El valor que pueden tomar los atributos width y height ha de ser un nmero, acompaado de %

cuando se desee que sea en porcentaje con respecto a la pgina. Por ejemplo:

Alineacin de una imagen

La alineacin de las imgenes se establece a travs del atributo align. Este atributo indica la

alineacin de las imgenes con respecto a la lnea de texto en la que se encuentran.

Los valores del atributo align pueden ser los siguientes:

Valor Significado

absbottom inferior absoluta

absmiddle medio absoluta

baseline lnea de base

bottom inferior

left izquierda

middle Medio

right derecha

texttop texto superior

top superior

Ejemplo:

Tabla

Las tablas estn formadas por celdas, que son los recuadros que se obtienen como resultado de la

interseccin entre una fila y una columna.



Para crear una tabla hay que insertar las etiquetas y . Entre dichas etiquetas

habr que especificar las filas y columnas que formarn la tabla.

Fila

Es necesario insertar las etiquetas y por cada una de las filas de la tabla. Estas etiquetas

debern insertarse entre las etiquetas y .

Por ejemplo, para crear una tabla con tres filas escribiramos:

Columna o celda

Para crear una tabla no basta con especificar el nmero de filas, es necesario tambin especificar

el nmero de columnas. Una celda es el resultado de la interseccin entre una fila y una columna.

Es necesario insertar las etiquetas y por cada una de las celdas que compongan cada

una de las filas de la tabla. Por lo tanto, habr que insertar esas etiquetas entre las etiquetas

y .

Entre las etiquetas y se podr especificar el contenido de cada una de las celdas. Por

ejemplo, para insertar la siguiente tabla:

DIAS HORARIO

LUNES 08:00 A 11:20

VIERNES 08:00 A 12:20

...

...

...

DIAS

HORARIO

LUNES

08:00 A 11:20

VIERNES

08:00 A 12:20



Formato de la tabla

Es posible modificar los siguientes atributos de una tabla:


width ancho de la tabla un nmero, acompaado de % cuando se desee que sea en porcentaje

height altura de la tabla un nmero, acompaado de % cuando se desee que sea en porcentaje

cellpadding espacio entre el contenido de las celdas y el borde

un nmero

cellspacing espacio entre celdas un nmero

border grosor del borde un nmero

align alineacin de la tabla dentro de la pgina

left (izquierda) right (derecha) center (centro)

bgcolor color de fondo nmero hexadecimal

background imagen de fondo nmero hexadecimal

bordercolor color del borde nmero hexadecimal

Por ejemplo, si la tabla anterior se desea que el ancho (width) de la tabla debe ocupar el 50% del

ancho de la ventana, que el borde (border) tenga un grosor de dos pxeles, que la tabla este

alineada al centro (center) de la ventana, que no haiga espacio entre las celdas (cellspacing="0"),

que el borde la tabla es negro (#000000) y el fondo naranja (#FFCC99), entonces se tendra que

escribir:

Formato de las celdas

Es posible modificar los siguientes atributos de una celda:


width ancho de la tabla un nmero, acompaado de % cuando se desee que sea en porcentaje

height altura de la tabla un nmero, acompaado de % cuando se desee que sea en porcentaje

align alineacin horizontal del contenido de la celda

left (izquierda) right (derecha) center (centro)

valign alineacin vertical del contenido de la celda

baseline (lnea de base) bottom (inferior) middle (medio) top (superior)

bgcolor color de fondo nmero hexadecimal

background imagen de fondo nmero hexadecimal


...



Tambin es posible modificar estos atributos de toda una fila, especificndolos en la etiqueta

, en lugar de en la etiqueta . Hay que tener en cuenta que los atributos tienen ms

prioridad cuando son establecidos para una celda que para una fila completa. Al mismo tiempo,

tienen ms prioridad los atributos establecidos para una fila que para toda la tabla.

Encabezado de columna

Las etiquetas y se utilizan para definir las celdas de cada una de las filas, pero

podemos poner en su lugar las etiquetas y .

Para la etiqueta es posible especificar los mismos atributos que para la etiqueta , pero

esta nueva etiqueta hace que el texto de la celda aparezca centrado y en negrita, por lo que se

utiliza para definir los encabezados o ttulos de las columnas. Ejemplo, si deseamos modificar la

tabla anterior se tendra que escribir:

Combinar celdas

Para las etiquetas y existen los atributos colspan y rowspan, que se utilizan para

combinar celdas.

Atributo colspan Permite especificar el nmero de columnas por las que se extender la

celda.

Atributo rowspan Permite especificar el nmero de filas por las que se extender la celda.

Ejemplo: Se desarrollar la siguiente tabla:

DESARROLLO WEB

LENGUAJE DE PROGRAMACION MAS UTILIZADOS

PHP ASP

EMPRESAS PUBLICAS 85% 15%

EMPRESAS PRIVADAS 60% 40%

< table width="50%" border="1" align="center">

DIAS

HORARIO

LUNES

08:00 A 11:20

VIERNES

08:00 A 12:20



DESARROLLO WEB

LENGUAJE DE PROGRAMACION

MAS UTILIZADOS

PHP

ASP

EMPRESAS PUBLICAS

85%

15%

EMPRESAS PRIVADAS

60%

40%

Conjunto de marcos

Los marcos o frames sirven para distribuir mejor los datos de las pginas, ya que permiten

mantener fijas algunas partes, como pueden ser el logotipo y la barra de navegacin, mientras

que otras s pueden cambiar. Adems de mejorar la funcionalidad, pueden mejorar tambin la

apariencia.

Cada uno de los marcos de una pgina, contiene un documento HTML individual.

Los conjuntos de marcos se definen a travs de las etiquetas y , que van

despus de la etiqueta . A travs de estas etiquetas se indica el nmero de marcos en que

se dividir la ventana, cada uno de los cuales ser una especie de sub ventana.

Cuando se insertan las etiquetas y no hay que insertar las etiquetas

y , ya que el cuerpo del documento ser el cuerpo de las pginas que se carguen

en cada uno de los marcos del conjunto de marcos.

Los atributos que pueden especificarse sobre la etiqueta son los siguientes:




cols tamao de cada una de las columnas en que se divide el documento

Un nmero (acompaado de % cuando se desee que sea en porcentaje) por cada columna, separados por comas.

rows tamao de cada una de las columnas en que se divide el documento

Un nmero (acompaado de % cuando se desee que sea en porcentaje) por cada fila, separados por comas.

frameborder aparece o no el borde de los marcos

Yes no

framespacing separacin entre los marcos un nmero

border grosor del borde un nmero, acompaado de % cuando se desee que sea en porcentaje


Tambin es posible incluir asteriscos como valores para los atributos cols y rows. Este valor indica

que dicha fila o columna ocupar todo lo que quede de ventana o sub ventana. Cuando existan

varias columnas o filas con este valor, se repartirn de forma equitativa lo que quede de ventana.

Ejemplo:

...

Como el atributo rows tiene el valor asterisco, solo habra una fila, que ocupara todo el alto de la

ventana. En este caso concreto no hara falta poner el atributo rows. Como el atributo cols tiene

tres valores, estaramos dividiendo el documento en tres columnas. La primera columna sera de

150 pxeles de ancho, la tercera del 25% de la ventana, y la segunda columna ocupara lo que

quedar de ventana (el 75% de la ventana menos 150 pxeles).

Tambin es posible anidar marcos. Es decir, es posible dividir marcos en otros marcos. Ejemplo:

...

...

Estaramos dividiendo el documento en dos columnas. La primera sera de 142 pxeles, y la otra

abarcara el resto de la ventana. As mismo, la primera columna o sub ventana estara dividida en

dos filas o sub ventanas horizontales, la primera de ellas de 80 pxeles. La segunda columna o sub

ventana se dividira en tres columnas, la primera del 25% de la sub ventana, y las otras dos se

repartiran el resto a partes iguales (se repartiran el 75% de la sub ventana).

Debemos de tener en cuenta que entre las etiquetas y slo se pueden

encontrar la etiquetas y sus etiquetas de cierre.

Marco

Ahora veremos cmo hacer que se carguen las distintas pginas en cada uno de los marcos. Para

indicar qu documento se cargar en cada uno de los marcos habr que insertar la etiqueta

por cada uno de los marcos de la ventana. Estas etiquetas estarn entre las etiquetas

y , y no necesitan etiqueta de cierre.



Es posible modificar los siguientes atributos de un marco:


frameborder aparece o no el borde del marco yes o 1; no o 0

name nombre del marco cualquier valor

noresize si aparece, el usuario no podr redimensionar el tamao de este marco

no puede tomar valores

marginwidth anchura del margen con respecto a los bordes del marco

un nmero, acompaado de % cuando se desee que sea en porcentaje

marginheight altura del margen con respecto a los bordes del marco

un nmero, acompaado de % cuando se desee que sea en porcentaje

scrolling se mostrar o no la barra de desplazamiento cuando la pgina del marco no se pueda visualizar completamente en l

yes no auto

src documento que se cargar en el marco ruta y nombre del documento

Por ejemplo, para crear una pgina con dos marcos horizontales (rows="90,*"), y el segundo

marco horizontal dividido en dos marcos verticales (cols="150,*"):

Destino del enlace

En el tema de hipervnculos se vio los posibles destinos de los enlaces como son: _blank, _parent,

_self, y _top.

Adems de estos destinos para los enlaces, tambin podrs utilizar los nombres de los distintos

marcos de la pgina. Por ejemplo, si tuviramos un marco con el nombre marcoderecho,

podramos insertar el enlace:

Aulaclic en el marco derecho

Formulario

Los formularios se utilizan para obtener opiniones, dudas, y otra serie de datos sobre los usuarios,

para introducir pedidos a travs de la red, tienen multitud de aplicaciones. Un formulario est

formado por etiquetas, campos de texto, mens desplegables, y botones.



Es muy recomendable utilizar tablas para organizar los elementos de los formularios. Utilizando

tablas se consigue una mejor distribucin de los elementos del formulario, lo que facilita su

comprensin y mejora su apariencia.

Los formularios se insertan a travs de las etiquetas y . Entre dichas etiquetas

habr que insertar los diferentes objetos que formarn el formulario. La etiqueta tiene los

siguientes atributos:

El atributo action indica una direccin de correo electrnico a la que enviar informacin el

formulario, o la direccin del programa que se encargar de procesar el contenido del

formulario.

El atributo enctype indica el modo en que ser cifrada la informacin para su envo. Por

defecto tiene el valor application/x-www-form-urlencoded.

El atributo method indica el mtodo mediante el que se transferirn las variables del

formulario. Su valor puede ser get o post.

El valor get se utiliza cuando no se van a producir cambios en ningn documento o programa

que no sea el navegador del usuario que pretende mandar el formulario, como ocurre

cuando se realizan consultas sobre una base de datos.

El valor post se utiliza cuando s se van a producir cambios, como ocurre cuando el usuario

manda datos que deben ser almacenados en una base de datos.

A continuacin veamos los distintos elementos que se pueden incluir en un formulario.

reas de texto

Las reas de texto permiten a los usuarios insertar varias lneas de texto. Se utilizan mayormente

para los comentarios.

Para insertar un rea de texto es necesario incluir las etiquetas y entre las

etiquetas y del formulario.

El atributo name indica el nombre del rea de texto. Es necesario dar nombres a cada uno de

los elementos de un formulario, para poder identificarlos a la hora de procesarlos.

El atributo rows indica el nmero de lneas que podrn ser visualizadas en el rea de texto

por lo que determina al alto del rea de texto.

El atributo cols indica el nmero de caracteres por lnea que podrn ser visualizados en el

rea de texto por lo que determina al ancho del rea de texto.

Por ejemplo:



Escribe Aqu

Elementos de entrada

Para insertar un elemento de entrada es necesario incluir la etiqueta entre las etiquetas

y del formulario.

El atributo name indica el nombre que se desea dar al elemento de entrada, mediante el cual

ser evaluado.

El atributo type indica el tipo de elemento de entrada.

Existen varios tipos de elementos de entrada, y el resto de atributos que pueden definirse para

cada uno de ellos.

Campo de texto:

Para insertar un campo de texto, el atributo type debe tener el valor text.

El atributo size indica el nmero de caracteres que podrn ser visualizados en el campo de

texto, determina el ancho de la caja.

El atributo maxlenght indica el nmero de caracteres que podrn ser insertados en el campo

de texto.

El atributo value indica el valor inicial del campo de texto.

Por ejemplo:

Campo de contrasea:

Para insertar un campo de contrasea, el atributo type debe tener el valor password. El resto de

atributos son los mismos que para un campo de texto normal. La nica diferencia es que todas las

letras escritas en el campo de contrasea sern visualizadas como asteriscos.

Por ejemplo:



Botn:

Para insertar un botn, el atributo type debe tener:

El valor es submit, al pulsar sobre el botn se enviar el formulario.

El valor es restore, al pulsar sobre el botn se restablecer el formulario, borrndose todos

los campos del formulario que hayan sido modificados y adquiriendo su valor inicial.

El valor es button, al pulsar sobre el botn no se realizar ninguna accin.

El atributo value indica el texto que mostrar el botn.

Por ejemplo:

Casilla de verificacin:

Para insertar una casilla de verificacin, el atributo type debe tener el valor checkbox.

El atributo value indica el valor asociado a la casilla de verificacin. Es necesario poner este

atributo, aunque el usuario no pueda ver su valor. Es el valor a enviar.

La aparicin del atributo checked indica que la casilla aparecer activada inicialmente. Este

atributo no toma valores.

Por ejemplo:

Botn de opcin:

Para insertar un botn de opcin, el atributo type debe tener el valor radio.

El atributo value indica el valor asociado al botn de opcin. Es necesario poner este

atributo, aunque el usuario no pueda ver su valor. Es el valor a enviar.

La aparicin del atributo checked indica que el botn aparecer activado inicialmente. Este

atributo no toma valores.

Los botones de opcin se utilizan cuando se desea que una variable del formulario pueda tomar

un solo valor de entre varios posibles. Para ello, se insertan varios botones de opcin con el

mismo nombre (que indica la variable) y con distintos valores. Solamente uno de estos botones



podr estar activado, el que est activado cuando se enva el formulario, su valor ser el que

tendr la variable.

Por ejemplo:

Campos de seleccin ...

Los campos de seleccin se utilizan para insertar mens y listas desplegables. Para insertar uno de

estos mens o listas es necesario insertar las etiquetas y en un formulario.

El atributo name indica el nombre del men o lista ser el nombre de la variable que

contendr el valor seleccionado.

El atributo size indica el nmero de elementos de la lista que pueden ser visualizados al

mismo tiempo, determina el alto de la lista.

La aparicin del atributo multiple indica que el usuario podr seleccionar varios elementos

de la lista al mismo tiempo, ayudndose de la tecla Ctrl. Este atributo no toma valores.

La aparicin del atributo disabled indica que la lista estar desactivada, por lo que el usuario

no podr seleccionar sus elementos. Este atributo tampoco toma valores.

Cada uno de los elementos de la lista ha de insertarse entre las etiquetas y .

El atributo value indica el valor a enviar si se selecciona el elemento. Si no se especifica este

atributo, se enviar el texto de la opcin, que se encuentra entre las etiquetas y

.

La aparicin del atributo selected indica que el elemento aparecer seleccionado. Este atributo no

toma valores.

Por ejemplo, para insertar el men o combo:

Seleccione

Sistemas

Civil

Derecho

Contabilidad



Por ejemplo, para insertar la lista:

Seleccione

Sistemas

Civil

Derecho

Contabilidad

Sesion HTML

Documents

Transcript of Sesion HTML