SUBMODULO III ELABORACION DE PAGINAS WEB
miércoles, 29 de mayo de 2013
martes, 16 de abril de 2013
DOCUMENTOS
Marcas
Las marcas delimitan el tamaño y los
elementos de un documento como cabeceras, párrafos, etc. Y son utilizados para
dar un tratamiento diferente al texto que se encuentre entre las marcas.
->HTML: las marcas de debilitan con signos para
cubrir menor que y cubrir mayor que, (abrir < inferior a y cerrar >
superior a).
Atributos de las
marcas
Algunas marcas pueden admitir atributos pudiendo tener
cada uno de estos atributos un valor como por ejemplo ancho, alto, color,
formato, estilo. Este valor ira entre comillas su dicho valor es alfanumérico.
Estructura de los números
Cabecera: se emplea para facilitar información acerca
del documento y esté delimitada por: <HEAD>…texto…
</HEAD>. Dentro de la cabecera podemos destacar el título que indica
el nombre del documento.
Ejemplo:
<HTML>
<HEAD>
<TITLE> Bienvenido </TITLE>
<HEAD>
<TITLE> Bienvenido </TITLE>
</HEAD>
</HTML>
Cuerpo
El resto del documento recibirá entre las marcas <BODY>
y </BODY>
Ejemplo:
<HTML>
<HEAD>
<TITLE>...Bienvenida…</TITLE>
</HEAD>
<BODY>
.
.
.
</BODY>
</HTML>
Encabezado
Los encabezados se emplean para dividir los documentos
en secciones para marcar los títulos de esas secciones. Las marcas son entre 1
y 6 donde el uno tiene mayor tamaño.
Ejemplo:
<H1>
Tamaño mayor </H1>
.
.
.
<H6> TAMAÑO
MENOR </H6>
Definición de bloques
Para definir y separar bloques de texto se emplea una
serie de marcas que definen párrafos, texto pre formateado o bloques con
significado especial como direcciones o citas:
<P> y </P>: se utiliza para separar
párrafos. Dado que para el HTML todo el texto
es continuo, necesitamos algún
mecanismo para indicar el principio y el fin de un párrafo. La marca inicial y
final son … <P> y </P>
<PRE>: el texto insertado entre las marcas
<PRE> y </PRE> será visualizado respetando el formato con el que
fue escrito en el fichero fuente HTML.
<ADDPESS>: Empleada para aplicar que un
texto representa una dirección o una firma. Generalmente se activa en cursiva y
suele estar tabulado.
<BLOCK QUOTE>: Se suele representar con
tabulaciones a la izq. y der. y en cursiva. En sistemas que no permiten
representar en cursiva se puede emplear algún tipo de símbolo al principio de
las líneas.
<BR>: Este elemento solo tiene marca
inicial e indica un salto de línea.
<HR>: Solo tiene marca inicial y se emplea
para representar una línea horizontal.
COMENTARIOS
Todo texto que empiece por </… comentario…> será
ignorado por el buscador por lo tanto no será visible esto sirve al autor del
documento para comentar en su archivo fuente.
FONDOS Y COLORES DE TEXTO
Un cierto numero de atributos de la marca
<BODDY>, permite controlar el color de fondo de la ventana, el color de
los caracteres del texto y finalmente el color de los enlaces: atributo <BGCOLOR>; este
atributo permite escoger un color para el formato de la pagina.
<BODY BGCOLOR=”#rrggbb”> donde:”rr””gg”
y ”bb”” son valores hexadecimales entre 00 y FF.
ATRIBUTO
BACKGROUND
Este atributo especifica una imagen recidente en el
servidor la cual se utilizara como fondo de pagina <BODY
BACKGROUND=”archiv.gif”>
TEXT
Permite controlar el color del texto estándar es decir
todo texto que no especifique un enlace <BODY TEXTO=”#rrggbb”>
LINK
Color de enlace que aun no ha sido
visitado <BODY LINK=”#rrbbgg”>
ALINK
Color muy fugaz que aparece cuando se hace clic sobre
el enlace <BODY ALINK=”#rrggbb”>.
VLINK
Es el color de un enlace que ya ha sido visitado <BODY
VLINK=”#rrggbb”>+
LETRA
Es la marca que asigna el tamaño de los caracteres,
donde “n” varía del 1 a 6. Los más grandes tiene valor uno y los más pequeños
valor 6. El texto entre estas marcas se trata en negrita <Hn>
TAMAÑO DE LETRA Y COLOR
La marca FONT permita actuar sobre bloques distintos
de caracteres situados en la misma línea. El atributo SIZE: regula la altura de
los caracteres entre el rango de (1 - 7).
El atributo COLOR: especifica el color de los
caracteres. Ejemplo. <FONT SIZE=3COLOR=#008000>…TEXTO…</FONT>
ESTILO FISICO O ESTILO
DE CARACTERES
<B>Negrita <b>hola!</b> hola!
<I>Cursiva <i>hola!</i> hola!
<V>Subrayado <v>hola!</v> hola!
Estilos lógicos, estilo de párrafo
<CITE>
Cita
<CODE>
Codigo fuente
<DFN>
Definido
<EM>
Enfatiza
<KDB>
Palabra clave
<SAMP>
Ejemplo
<STRONG>
Resalta
<VAR>
Variable
Combinación
de tamaño y estilo
La ventana
trabaja bajo el efecto de solo un parcerrado de marcas ejemplo:
<i>
<font
size=5>
<b>
Hola, </b> como
<Font
size=6> estas? </font>
</font>
</i>
HIPERENLACE
El lector explora un documento en el
WEB haciendo clic sobre las zonas activas para asi hacer aparecer
nuevos documentos. El <HTMLL> definimos una zona activa (que puede ser un
texto o una imagen) que se asocia al URL (protocolo de direccionamiento) del documento
que sustituirá al documento visualizado cuando se haga clic sobre esta
zona. Un ancla por loo tanto sirve para especificar la partida y la
llegada de un enlace hipertexto <A>.
El atributo HREF, ancla de partida hacia un enlace
externo crea un enlace hacia un servidor situado en algún punto de
internet hacia un documento propuesto por dicho servidor. La marca especifica
el atributo HREF cuyo valor precisa URL del documento a recuperar: <AHREF=”URL_D_DESTINO”>
zona_activable </A>
1.El atributo HREI, ancla de partida a un enlace
interno; crea a un enlace a un punto determinado del fichero en ejecucion. Para
ello hay que colocar un ancla activa (ancla de partida) y un ancla de inactiva
(ancla de llegada). El ancla de partida se define de la siguiente
forma:
3 una activable con atributos visibles <AHAREF=#etiqueta>
zona_activable_con_atributo_visuales </A>.
2. El atributo NAME, ancla de llegada define el ancla
de llegada, lugar que se podrá acceder haciendo clic sobre un ancla de partida.
3 una no activable sin atributos visuales:
<ANAME=”Label”>
zona_no_activable_sin_atributos_visuales </A>
TABLA
Una tabla se define entre las marcas entre <TABLE> y </TABLE>. Esta
primer amarca regula a presentación general de la tabla mediante tres
atributos:
*BORDER: define
el grosor del marco exterior.
*CELPADDING: define
el espacio alrededor del texto de una celda.
*CELLPACING: define
el espacio entre celdas.
*WIDTH: define la
anchura de la tabla relativa a la ventana.
MARCAS
Las marcas que definen una nueva fila son:
<TR> y </TR> que admiten los siguientes
atributos de alineación del texto en el interior de todas las celdas de la
fila:
*VALIGN (alineación
vertical): que puede tomar los valores.
-TOP:
coloca el texto en la parte superior de la celda.
-BOTTOM:
colca el texto en la parte inferior de la celda.
-MIDDLE:
coloca ell texto en el centro de la celda.
*ALIGN (alineación
horizontal): que puede tomar los valores.
-RIGHT:
coloca el texto a la derecha de la celda.
-LEFT:
coloca el texto a la izquierda de la celda.
-CENTER:
centra el texto en la celda.
La marca <TD> es el elementyo del inicio de una
columna. Puede completarse con los atributos <VALIGN> y <ALIGN> que
será entonces prioritarios sobre los mismos valores definidos en la marca
<TR>.
La marca <TH> esta marca funciona de forma
similar a <TD> admitieno los mismos atributos pero se considera como una
marca de titulo de celda. Atomaticamente centra el texto y lo pone
ennegrita.
La marca <IMG> permite incluir una imagen. Esta
marca ira siempre complementada con el atributo <SCR> que
permite dar la dirección del fichero grafico (imagen, foto, animacion) que
contiene la imagen.
El valor del atributo <SCR> permite especificar
un URL y es por tanto correcto encontra imágenes definidas
como sigue.
<IMG SCR:”http//img/rosa.gif”>
ALINEACION DE IMAGENES
La marca <IMG> admite el atributo ALIGN que
permite situar la imagen en relación a la linea de texto actual y
permite tomar los siguientes valores.
*TOP: para alinear
la parte superior de la imagen.
*MIDDLE: para
alinear el centro de la imagen.
*BOTTM: para
alinear la base de la imagen.
Ejemplo:
<IMG SRC=”new.gif” align=top>
IMAGENES EXTERNAS
Este tipo de imagines no aparecen en la pantalla
cuando se carga la pagina, si no se crea un enlace hipertexto cuyo
extremo podrá ser una imagen.
Ejemplo:
<A
HREF=”imagen/new.gif”> hacer clic aqui </A>
IMAGENES COMO ANCLAS
Se pueden reemplazar el texto de una ancla por marca
que define una imagen. En este caso la imagen tiene un borde de color para
indicar que se trata de un enlace hipertexto, sobre el que se puede hacer un
clic.
Ejemplo:
<A HREF=”image/new.gif”><IMG
SRC=”image/info.gif”></A>
FORMULARIOS
UN
formulario es una pantalla para representar un conjunto de datos y generar en
la pantalla cuadros de dialogo con el lector. Como un formulario en papel, se
podrán tener zonas en las que se introducirá, casillas de verificación, listas
de seleccion, etc.
El
ususario rellenara zonas en su formulario que se identifican con un nombre
simbolico. Cuando el formulario se envía al programa que lo va a
tratar, este recibe identificador de cada zona y es el valor introducido.
Es
importante señalar que la utilidad de los formularios esta limitada al uso de
las paginas junto con sus servidores, ya que las acciones asociadas son
programas (generalmente scripts de CGI) estos programas deben funcionar en un
servidor al que se le proporcioan los datos de un formulario
para ser procesados.
DECLARACION DEL FORMULARIO
La
marca <FORM> y </FORM> define un formulario y entre ellos se
situara todas las marcas que genera los diversos elementos que componen un
formulario. Esta maraca debe de ir acompñada obligatoriamente por dos …..
1.El
atributo METHOD esta dirigido al programador codifica el script. Al que pueden
darse el valor POST o GET que define en le modo de transferencia de los datos
hacia el script.
2.
El atributo ACTION que define el URL de un programa (script) encargado de
tratar los datos adquiridos desde el formulario.
MARCAS
Todas las marcas que se definirán tienen los
siguientes atributos comunes :
1.El atributo “NAME” define el nombre que
permitirá al script identificar el origen de los datos. Este nombre de ser
único NAME=nombre_d_la_variable_asociado.
2.El atributo “VALUE” definido pára un campo de 2
puntos de un texto; permite definir el contenido del campo.
3.El botón “SUBMINT” indica el texto a escribir
en el botón.
4.El botón “RADIO” y “CHECXBOX”: valor asociado
al botón cuando esta pulsado. “NAME” identifica el bloque de botones.
CAMPOS DE ENTRADA
La
marca INPUT servirá para definir campos para encontrar un texto y botones que
permiten escoger opciones.
El
atributo “TYPE” asociado a la marca <INPUT> permite la selección del
elemnto de entrada. Puede tomar los siguientes valores:
*SUBMINT:de
ser cadena el envío del formulario hacia el script; el texto definido en
“VALUE” se escribirá en el botón:
Ejemplo:
salida
<form>
<input
type=”submint value”=”salida”>
</form>
*RESET:
permite borrar los datos ya entrados.
Ejemplo:
Borrar
<form>
<input type=”reset”value=”borrar”>
*PASSWORD: permite entrar un palabra de forma
clave confidencial.
Ejemplo:
Contraseña
<form>
<input
type=”password” name=”pwd”>
</form>
*CHECXBOX:
cea un bloque de botones que permiten una seleccion multiple de opciones.
Ejemplo:
<form>
<input
type=”checxbox” name=”micro” value=”mac”> Macintosh
< <input type=”checxbox” name=”micro” value=”pc”> PC
</form>
*RADIO:
crea un bloque de botones que permiten una selección exclusiva entre varias
opciones.
Ejemplo:
<from>
<input
type=”radio” name=”media” value=”cd” checked> CD-ROM
<input
type=”radio” name=”media” value=”disquete” checked> DISQUETE
*HIDDEN:
sirve para pasar datos adquiridos de un formularios a otro sin que aparezca
nada en pantalla.
Ejemplo:
<input
type=”hidden” name=”nombre_de_variable” value=”valor_de_la_variable”>
CAMPOS DE SELECCIÓN
La
marca <SLECT> permite genera listas de selección simple o de selección
variable. Seprograma con una lista en la que los ítems se especifica mediante
la marca <OPTION>. La presentación de la lista depende del atributo
<SIZE>; si su valor es inferior a dos o esta ausente la lista se
interpreta como u menu despegable (pop-list), en caso contrario la lista se
visulizara en una ventana con barra de desplazamiento. El valor dado entonces
al atributo <SIZE> dan entonces el numero de líneas visibles
en la ventana. La opción de selección multiple se deriva de la presencia del
atributo MULTIPLE.
Ejemplo:
“MENÚ DESPEGABLE”
<form>
<select
Name:”sede”>
<option>
entrada indirecta
<option>
entrada lateral
<option
SELECTED> entrada directa
</selct>
</form>
“VENTANA CON BARRA DE DESPLAZAMIENTO”
<form>
<select
MULTIPLE NAME=”leunguaje” SIZE=”3”>
<option
SELECTED> Ada
<option>C++
<option>Clipper
<option>
<option>
<option>
</select>
</form>
AREA DE TEXTO
La
marca <TEXTAREA> permite crear una venta con barras de desplazamiento
horizontales y verticales en la que se podrá escribir texto. El valor dado a
los atributos Rows (lineas) y Cols (columnas) delimita el tamaño de esta
ventana.
Ejemplo:
<form>
<textarea
names=”comment” rows=5 cols=40>
Intoduzca
aqui sus comentarios
</textarea>
</form>
Suscribirse a:
Entradas (Atom)