Saber A
Marcas
Las marcas
delimitan elementos de un documento como cabeceras, párrafos etc. y son
utilizados para dar un tratamiento diferente al texto.
En HTML las marcas
se delimitan con los signos menor que, mayor que, es decir que para abrir <
inferior a, cerrar > superior a, adicionando la diagonal inversa
al final.
Atributo de las
Marcas
Algunas marcas pueden
admitir pudiendo tener cada uno de estos atributos con valor A 0, color, texto,
estilo, formato este valor ira entre comillas si dicho valor es alfanumérico.
Estructura de
los Documentos
Cabecera
La cabecera se
emplea para para facilitar información y está delimitada por: < Head y </
Head>.
Dentro de la
cabeza podemos destacar el título que indica el nombre del documento esta
delimita por el documento: < TITLE > Y </TITLE>
<HTML>
<HEAD>
<TITLE>
... Bienvenido …</TITLE>
</HEAD>
</BODY>
</BODY>
</HTML>
Cuerpo
El resto de documento recibirá entre
las marcas < Body > y </Body>
Encabezados
Los encabezados se emplean para dividir
los documentos en secciones o más completamente para marcar los títulos de las
secciones. Las marcas son de tipo:
< H1> tamaño mayor
</H1>
<H6>
tamaño menor </H6>
Definiciones 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: una de las
utilizadas son: <p> se utiliza para separar párrafos. Dado para HTML todo el texto es
continuo, principio y fin de un párrafo los marcas inician y final son:
<P> y </P>.
<PRE>
El texto insertado entre los mascas
<PRE> y </PRE> será utilizado representado el formato que fue
escrito en el fichero fuente HTML.
<ADDRESS>
Empleada para iniciar que un texto representa
una dirección o firma generalmente activa en cursiva y suele estar tabulado.
<BLOCKQUOTE>
Se suele representar con tabulaciones
ala izquierda y derecha y en cursiva. En sistemas que no permiten representar
en cursiva se puede emplear algunos tipos de símbolos a principio de las
líneas.
<BR>
Este elemento solo tiene marca inicial
indica un salto de línea es decir una salto de renglón.
<HR>
Solo tiene marca inicial se emplea para
representar una línea horizontal.
Comentarios
Todo texto que empiece por <!…Comentario…>
será ignorado por el Browser y por lo tanto no será visible. Esto sirve para el
autor del documento para comentar en su fichero fuente.
Fondos y Colores de Texto
Un cierto número de atributos de la
marca Body permite controlar el color de fondo de la ventana, el color de las
de las caracteres de texto y finalmente el color de los enlaces <Body
atributo 1 atributo 2…. Atributo N>.
El atributo BG color permite escoger un
color para el fondo de la página.
< BG color = “# rrggbb”>
Donde “rr”,”gg”,”bb”
son valores hexadecimales
uo---ff
BACKGROUND (fondo): Específica una imagen residente en el servidor
en la cual se utilizara como fondo.
< BODY BRACK GROUND =” FICHERO- GRAFICO.GIF”>
TEXT
Permite controlar el color estándar es
decir texto que especifique un enlace. <BODY TEX =”# rr gg bb “>
LINK
Color de enlace que a
uno no ha sido visitado.
<BODY LINK =”# rr gg bb “>
ALINK
Color muy fugaz que aparece cuando se
haga clic en el enlace.
<BODY C LINK=”# RRGGBB”>
VLINK
Es
el color de un enlace que ya ha sido visitado.
<BODY C LINK=”# RRGGBB”>
Título HN
Es la marca que asignara el tamaño de
los caracteres donde N varía 1a 6. Las más grande tiene valor de 1 y los más
pequeños valor de 6 el texto entre esta marcas se trata en Negrita.
TAMAÑO DE LETRA Y COLOR
<FONT>
Permite actuar sobre bloques de distintos
características situadas en línea misma línea.
Atributo
SIZE: Regula la altura de las características
de 1 a 7.
El
atributo COLOR: Especifica el
color de los caracteres.
<FONT SIZE=3. COLOR=·00800>…TEXTO=/FONT>
Estilo
físico o estelo de caracteres
<B> Negrita <b> hola! </b>
<I> Cursiva <I> Hola! </I>
<V> Subrayado <V> hola! </v>
ESTILO LOGICOS, ESTILO DE PARRAFOS
<CITE> Cita
<CODE> Código Fuente
<DFN> Definido
<EM> Enfátiza
<KDB> Palabra Clave
<SAMP> Ejemplo
<STRANG>
Resuelta
<VAR> Variable
COMBINACION DE
TAMAÑO Y
ESTILO
Toda ventaja trabaja bajo el efecto de un solo par
cerrado de marcas.
<I>
<FRONT SIZ
R= 5>
<b> Hola, </b> Como
<front size=6> estas?</front>
</front>
</i>
HIPPER ENLACES
El lector explora
un documento en la web haciendo clic sobre zonas activas para asi hacer
aparecer nuevos documentos. En HTML definimos una zona activa (PUEDE SER TEXTO,
IMAGEN), que se asocia al URL (protocolo) de direccionamiento de
documentos) del documento que sustituíra al documento visualizado cuando se
haga clic sobre esa zona. Un ancla, por lo 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 o hacia un documento
propuesto por dicho servidor, la marca especifica el atributo HREF cuyo valor
precisa el URL del documento a recuperar.
ZONA ACTIVABLE
<A
HREF=”URL_de_ destino”>Zona. Activable</A>
El atributo HREF: Ancla de partida a un enlace interno y se
crear un enlace a un punto determinado del fichero. Para ello hay que colocar un ancla activa. (Ancla de partida) y un Ancla inactiva (Ancla de llegada).
Zona activable
con atributos visuales
<A HREF=·
ETIQUETAS> Zona_ activable_con_atributos_visuales </A>
Name
Define el ancla de llegada, lugar que se podría acceder haciendo
un clic sobre un ancla de partida.
Zona no
activable sin atributos visuales.
<A
NAME=”Label”>zona_no.activable_sin atributos.visualesz</A>
Marca TABLE
Una tabla se
define en las marcas: <table> y </table>. Esta
primera maraca regula la presentación general de la tabla mediante 3 atributos:
BORDER:
Define el grosor de marca exterior
CELLPADDING: Define en el espacio alrededor de texto de una celda.
CELLSPACING: Define el espacio entre celdas.
WIDTH: Define la anchur4a de la tabla relativiza a la anchura de
ventana.
Marca TR
Las marcas que definen una nueva fila son: <TR> Y
</TR>, que admite 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 valores.
TOP: Coloca el
texto en la parte superior de la celda.
BOTTOM: Coloca el texto en la parte inferior de la celda
MIDDLE: Coloca el texto en el centro de la celda
ALIGN (Alineación Horizontal): Que puede
tomar los valores.
RIGHT: Coloca el
texto a la derecha la celda.
LEFT: Coloca el
texto a la izquierda de la celda.
CENTER: Coloca el
texto en el centro de la celda.
MARCA TD
El elementó de inicio
de una columna. Puede completarse con los atributos: VALING Y ALIGN que será entonces prioritario sobre los mismos
valores definidos en la marca de TR.
Dos atributos
Suplementarios
COLPAN Y ROWSPAN: Permite generar celdas cuya superficie un
múltiplo de la celda elemental la matriz de la tabla que define el número de
celdas elementales se le calcula por el número de líneas por la tabla (NUMERO INSTRUCCIONES R) multiplicado
por el número de la celdas entre actuar, (TD) de la líneas que se definen más
celdas (Mayor de Numero TD).
Numero de celdas por el número de la tabla calcula sobre
la línea que define el mayor número de celdas. El atributó TD es NOWRAP que impide el esto de la celda en varios
líneas.
Marca <TH>
Funciona de forma singular a TD admitiendo los mismos
atributos pero se considera como una marca de título de una celda.
Automáticamente centra el texto y lo pone en negrita.
Marca <Caption>
Esta marca permite poner un título encima (Atributo
aling, top) o debajo (atributo aling: bottom) de la tabla.
La marca IMG
Permite incluir una imagen. Esta marca ira siempre
complementada por el atributo SRC que permite dar la dirección del fichero
grafico que contiene la imagen.
El valor de atributo
SRC permite especificar un URL y es por tanto encontrar imágenes definidas
como sigue:
<IMG
SRC=”http://……rosa.gif”>
Alineación de imágenes
La marca <
IMG> y ALING que permite situar la imagen en relación a la línea de texto actual y puede tomar los
siguientes valores…
* TOP para alinear la parte superior
de la imagen
* MIDDLE para alinear la base el
centro de la imagen
* BOTTOM para alinear la base de la
imagen.
Imágenes Externas.
Este tipo de
imágenes no aparecen en la pantalla, cuando se carga la página, sino que se
crea un enlace hipertexto a la imagen
< A HREF=”Image.gif”> hacer clic </A>.
Imágenes como anclas
Se puede remplazar
el texto de un ancla 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 clic.
<A HREF=”imagen.gif”><IMG
SRC=”info.gif”></A>
Formularios
Es una plantilla
para representar un conjunto de datos y generar en la pantalla cuadros de
dialogo con el lector como en un formulario de papel, se podrán tener zonas en
las que se introducirá un texto, 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 el
identificador de cada zona y el valor introducido. Es importante señalar que la
utilidad de los formularios está limitada al uso de las páginas con servidores,
ya que las acciones asociadas son programas (generalmente scripts de CGI) estos
programas deben funcionar en un servidor al que se le proporcionan los datos de
un formulario para ser procesados.
Declaración del formulario
La marca
<form> y </form> definen un formulario y entre ellas se situan
todas las marcas que generan los diversos elementos que componen un formulario.
Esta marca debe ir acompañada obligatoriamente por dos atributos:
Atributo Method:
Esta dirigido al programador que codifica el script encargado de dar valor a
post o el valor get que define el modo de transferencia de los datos hacia el
script.
Atributo Action:
Define el URL de un programa script encargado de tratar los datos adquiridos
desde el formulario.
<form method=
tipo_de_metodo_action=URL_del_script>
<form
method=”post” action=”cgi_bin/inscription>
Todas las marcas
que se definan tienen los siguientes
atributos comunes:
Atributo name:
Define el nombre que permitirá al scipt identificar el origen de los datos.
Este nombre debe ser único.
Atributo Value:
Definido para un campo, texto que permite definir contenido del campo.
Bottom submit:
Indica el texto al escribir en el botón.
Boton radio y
cheekbox: Valor asociado al botón cuando esta punzado. Identifica el bloque de
botones.
Campos de
Selección
La marca
<select> permite generar 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 caption. La presentación de la lista depende del atributo size, su
valor es inferior a 2 o está ausente de la lista se interpreta como un menú
desplegable (pop-list). En este caso la lista se visualiza en una ventana con
barra de desplazamiento. El valor dado al atributo size da entonces el número
de líneas en la ventana. La deriva de la presencia del atributo Multifle.
Menu desplegable:
Entrada directa
|
<option> Entrada indirecta
<option> Entrada lateral
<option selected> Entrada
directa
</select>
</form>
Ventana con barra
de desplazamiento
<form>
<select multiple name=”lenguaje” size=”3”>
<option select> ada
<option> C++
<option> Clipper
<option> Pascal
<option> Fortran
<option> Cabol
</select>
</form>
Área de texto
La marca
<textarea> permite crear una ventana con barras de desplazamiento
horizontales y verticales en la que se podrá escribir texto. El valor dado a
los atributos rows (líneas) cols (columnas) delimmita el tamaño de esta
ventana.
<form>
<textarea
name=”comment” rows=5 cols=40>
Introduzca aqui sus comentarios
</textarea>
</form>
No hay comentarios:
Publicar un comentario