MARCA
O ATRIBUTO
|
Descripción
|
Ejemplo
|
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 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.
|
<HTML>
<HEAD>
<TITLE> Bienvenido </TITLE>
</HEAD>
</HTML>
|
Cuerpo
|
El resto
del documento recibirá entre las marcas <BODY> y </BODY>
|
<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.
|
<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
|
|
<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.
|
|
<ADDPRESS>
|
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>
|
Este
elemento solo tiene marca inicial e indica un salto de línea.
|
|
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 número 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 página.
|
|
<BODY BGCOLOR=”#rrggbb”>
|
Donde:”rr””gg”
y”bb”” son valores hexadecimales entre 00 y FF.
|
|
BACKGROUND
|
Este
atributo especifica una imagen residente 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
|
FONT
|
Permita
actuar sobre bloques distintos de caracteres situados en la misma línea.
|
|
SIZE
|
Regula
la altura de los caracteres entre el rango de (1 - 7).
|
<FONT
SIZE=3COLOR=#008000>…TEXTO…</FONT>
|
ESTILO FISICO O ESTILO DE
CARACTERES
|
<B>Negrita <b>hola!</b> hola!
<I>Cursive <I>hola! </I> hola!
<V>Subrayado <v>hola!</v> hola!
|
ESTILOS LOGICOS , ESTILO DE
PÁRRAFO
|
<CITE> Cita
<CODE> Codigo fuente
<DFN> Definido
<EM> Enfatiza
<KDB> Palabra clave
<SAMP> Ejemplo
<STRONG> Resalta
<VAR> Variable
|
<I>
<font size=5>
<b> Hola, </b> Como
<Font size=6> estas? </font>
|
HIPERENLACE
|
El lector explora un documento en
el WEB haciendo clic sobre las zonas activas para así 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 lo tanto sirve para especificar la partida y la
llegada de un enlace hipertexto <A>.
|
|
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>
|
NAME
|
Ancla de
llegada define el ancla de llegada, lugar que se podrá acceder haciendo clic
sobre un ancla de partida.
|
<ANAME=”Label”> zona_no_activable_sin_atributos_visuales
</A>
|
TABLA
|
Una tabla
se define entre las marcas entre <TABLE> y </TABLE>. Esta primera marca 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.
|
|
FILA
<TR>
</TR>
|
VALGN*
|
Alineación vertical, que puede tomar los valores.
|
|
-TOP
|
Coloca el texto en la parte superior del texto.
|
|
-BOTTOM
|
Coloca el texto en la parte inferior de la celda
|
|
-MIDDLE
|
Coloca el texto al 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 derecha de la celda.
|
|
-CENTER
|
Centra el texto en la celda.
|
|
La marca
<TD> es el elemento del inicio de una columna. Puede completarse con
los atributos <VALIGN> y <ALIGN> que será entonces prioritario
sobre los mismos valores definidos en la marca <TR>.
|
La marca
<TH> esta marca funciona de forma similar a <TD> admitiendo los
mismos atributos pero se considera como una marca de titulo de celda. Automáticamente
centra el texto y lo pone en negrita.
|
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, animación) que contiene la imagen.
|
El valor
del atributo <SCR> permite especificar un URL y es por tanto correcto encontrar
imágenes definidas como sigue.
<IMG
SCR:”http//img/rosa.gif”>
|
ALINIEACIÓN
DE IMAGENES
|
|
La marca <IMG> admite el atributo ALIGN que
permite situar la imagen en relación a la línea 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.
|
|
BOTTOM*
|
Para
alinear la base de la imagen.
|
|
|
<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 aquí
</A>
|
IMÁGENES
COMO ANCLAS
|
Se pueden reemplazar el texto de un 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.
|
<A HREF=”image/new.gif”><IMG
SRC=”image/info.gif”></A>
|
FORMULARUIOS
|
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 selección, etc.
El usuario rellenara zonas en su
formulario que se identifican con un nombre simbólico. 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 está 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 proporciona
los datos de un formulario para ser procesados.
|
DECLARACIÓN
DE 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 acompañada obligatoriamente por dos….
|
METHOD
|
Este
dirigido al programador codifica el script. Al que pueden darse el valor POST
o GET que define en el modo de transferencia de los datos hacia el script.
|
|
ACTION
|
Define el
URL de un programa (script) encargado de tratar los datos adquiridos desde el
formulario.
|
|
MARCAS
|
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.
|
VALUE
|
Definido para un campo de 2 puntos de
un texto; permite definir el contenido del campo.
|
|
SUBMIT
|
Indica el
texto a escribir en el botón.
|
|
RADIO
Y CHECKBOX
|
Valor asociado al botón cuando esta
pulsado. “NAME” identifica el bloque de botones.
|
|
CAMPOS DE ENTRADA
|
INPUT
|
Servirá para definir campos para
encontrar un texto y botones que permiten escoger opciones.
|
|
TYPE
|
asociado a
la marca <INPUT> permite la selección del elemento de entrada
|
|
SUBMINT*
|
ser cadena el envío del formulario
hacia el script; el texto definido en “VALUE” se escribirá en el botón:
|
salida
<form>
<input type=”submit value”=”salida”>
</form>
|
RESET
|
Permite borra datos ya entrados
|
Borrar
<form>
<input type=”reset “value=”Borrar”>
|
PASSWORD
|
Permite entrar una palabra de forma
clave confidencial.
|
Contraseña
<form>
<input type=”password”
name=”pwd”>
</form>
|
CHECKBOX
|
Crea un
bloque de botones que permiten una selección múltiple de opciones.
|
<form>
<input type=”checkbox” name=”micro”
value=”Mac”> Macintosh
< <input type=”checkbox” name=”micro”
value=”pc”> PC
</form>
|
RADIO
|
Crea un bloque de botones que
permiten una selección exclusiva entre varias opciones.
|
<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 unos
formularios a otro sin que aparezca nada en pantalla.
|
<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. Se programa con una lista en la que los ítems se especifican mediante la marca
<OPTION>. La presentación de la lista depende del atributo
<SIZE>; si su valor es inferior a dos o está ausente la lista se
interpreta como u menú despegable (pop-lista), en caso contrario la lista se visualizara
en una ventana con barra de desplazamiento. El valor dado entonces al
atributo <SIZE> dan entonces el número de líneas visibles en la
ventana. La opción de selección múltiple 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>
|
ÁREA 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 (líneas) y Cols (columnas)
delimita el tamaño de esta ventana.
|
<form>
<textarea names=”comment” rows=5
cols=40>
Introduzca aquí sus comentarios
</textarea>
|