sesion html
Post on 06-Jan-2016
224 Views
Preview:
DESCRIPTION
TRANSCRIPT
-
Taller de Programacin Web
Ing. Jos Alberto CASTRO CURAY Pg. N 1
-
Taller de Programacin Web
Ing. Jos Alberto CASTRO CURAY Pg. N 2
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
-
Taller de Programacin Web
Ing. Jos Alberto CASTRO CURAY Pg. N 3
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.
-
Taller de Programacin Web
Ing. Jos Alberto CASTRO CURAY Pg. N 4
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
...
...
-
Taller de Programacin Web
Ing. Jos Alberto CASTRO CURAY Pg. N 5
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.
-
Taller de Programacin Web
Ing. Jos Alberto CASTRO CURAY Pg. N 6
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.
...
...
...
...
...
-
Taller de Programacin Web
Ing. Jos Alberto CASTRO CURAY Pg. N 7
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
-
Taller de Programacin Web
Ing. Jos Alberto CASTRO CURAY Pg. N 8
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.
-
Taller de Programacin Web
Ing. Jos Alberto CASTRO CURAY Pg. N 9
Bienvenidos a la Web
Bienvenidos a la Web
Bienvenidos a la Web
Bienvenidos a la Web
Bienvenidos a la Web
Bienvenidos a la Web
Bienvenidos a la Web
Bienvenidos a la Web
Bienvenidos a la Web
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
-
Taller de Programacin Web
Ing. Jos Alberto CASTRO CURAY Pg. N 10
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).
-
Taller de Programacin Web
Ing. Jos Alberto CASTRO CURAY Pg. N 11
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:
Carreras Profesionales Computacin Sistemas Informtica
HUARMEY *** PERU
-
Taller de Programacin Web
Ing. Jos Alberto CASTRO CURAY Pg. N 12
Carreras Profesionales Computacin Sistemas Informtica
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:
Carreras Profesionales Computacin Sistemas Informtica
Carreras Profesionales Computacin Sistemas Informtica
Anidar Listas:
Se puede anidar listar utilizando numeracin y vietas a la vez.
Ejemplo:
-
Taller de Programacin Web
Ing. Jos Alberto CASTRO CURAY Pg. N 13
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
-
Taller de Programacin Web
Ing. Jos Alberto CASTRO CURAY Pg. N 14
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 a www.google.com.pe
ir al tema Web
ir al tema Web
ir al tema Web
-
Taller de Programacin Web
Ing. Jos Alberto CASTRO CURAY Pg. N 15
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
ir a la Estructura de una pgina Web
ir a la Estructura de una pgina Web
-
Taller de Programacin Web
Ing. Jos Alberto CASTRO CURAY Pg. N 16
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).
ir a www.google.com.pe
-
Taller de Programacin Web
Ing. Jos Alberto CASTRO CURAY Pg. N 17
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:
ir a www.google.com.pe
e-mail para el docente
Descargue tutorial aqu
-
Taller de Programacin Web
Ing. Jos Alberto CASTRO CURAY Pg. N 18
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
-
Taller de Programacin Web
Ing. Jos Alberto CASTRO CURAY Pg. N 19
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.
-
Taller de Programacin Web
Ing. Jos Alberto CASTRO CURAY Pg. N 20
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
-
Taller de Programacin Web
Ing. Jos Alberto CASTRO CURAY Pg. N 21
Formato de la tabla
Es posible modificar los siguientes atributos de una tabla:
Atributo Significado Posibles valores
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:
Atributo Significado Posibles valores
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
bordercolor color del borde nmero hexadecimal
...
-
Taller de Programacin Web
Ing. Jos Alberto CASTRO CURAY Pg. N 22
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
-
Taller de Programacin Web
Ing. Jos Alberto CASTRO CURAY Pg. N 23
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:
-
Taller de Programacin Web
Ing. Jos Alberto CASTRO CURAY Pg. N 24
Atributo Significado Posibles valores
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
bordercolor color del borde nmero hexadecimal
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.
-
Taller de Programacin Web
Ing. Jos Alberto CASTRO CURAY Pg. N 25
Es posible modificar los siguientes atributos de un marco:
Atributo Significado Posibles valores
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.
-
Taller de Programacin Web
Ing. Jos Alberto CASTRO CURAY Pg. N 26
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:
-
Taller de Programacin Web
Ing. Jos Alberto CASTRO CURAY Pg. N 27
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:
-
Taller de Programacin Web
Ing. Jos Alberto CASTRO CURAY Pg. N 28
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
-
Taller de Programacin Web
Ing. Jos Alberto CASTRO CURAY Pg. N 29
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
-
Taller de Programacin Web
Ing. Jos Alberto CASTRO CURAY Pg. N 30
Por ejemplo, para insertar la lista:
Seleccione
Sistemas
Civil
Derecho
Contabilidad
top related