Las marcas delimitan elementos de un doc. Como cabeceras, párrafos etc. Y son utilizados para dar un tratamiento diferente al texto que se encuentre entre las arcas.
En HTML las marcas se delimitan con los signos mayores que, menor que, adicionando la diagonal inversa al cerrar
Abrir < inferior a Cerrar > inferior a /.
ATRIBUTOS DE LAS MARCAS
Algunas marcas pueden admitir atributos pudiendo tener cada uno de estos atributos con un valor. Como por ejemplo: color, textura, estilo, forma, ancho, alto. Este valor ira entre comillas “ ” si dicho valor es alfanumérico.
ESTRUCTURA DEL DOCUMENTO:
CABECERAS
La cabecera se utiliza para facilitar información acerca del doc. Y esta delimitada por <HEAD> y </HEAD>.
Dentro de la cabecera podemos destacar el título que indica el nombre del doc. Está delimitada por <TITLE> </TITLE>.
Ejemplo.
<HTML>
<HEAD>
<TITLE>…Bienvenidos…</TITLE>
<HEAD>
<BODY>
</BODY>
</HTML>
CUERPO
E l resto del doc. Estará dentro de las marcas que son <BODY> </BODY>
ECABEZADO
Los encabezados se emplean para dividir los doc. En secciones o más completamente para marcar los títulos de las secciones. Las marcas son del tipo:
<H1> Tamaño mayor </H1>
<H6> Tamaño menor </H6>
DEFINICIONDE BLOQUES
Para definir o separa bloques de texto se emplean una serie de marcas que definen párrafos, texto reformateado o bloques con significado especial como direcciones o citas. <P> inicia un párrafo
Se utiliza para separar párrafos. Dado que para HTML todo el texto es continuo necesitamos algunos mecanismos para indicar el principio y el fin de un párrafo. Las marcas son
<P> y </P>
<!--[if !supportLists]-->v <!--[endif]--><PRE> El texto insertado entre las marcas <PRE> y </PRE> será visualizado respetando al formato con el que fue escrito en el fichero, fuente HTML.
<!--[if !supportLists]-->v <!--[endif]--><ANDDRESS> Empleada para indicar que un texto representa una dirección o firma generalmente activa en cursiva y suele estar tabulado.
<!--[if !supportLists]-->v <!--[endif]--><BLOCKQUOTE> Se suele representar con tabulaciones a la izquierda y derecha 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.
<!--[if !supportLists]-->v <!--[endif]--><BR> Este elemento solo tiene marca inicial e indica un salto de línea es decir un salto de renglón.
<!--[if !supportLists]-->v <!--[endif]--><HR> Solo tiene marca inicial y se emplea para representar una línea horizontal.
COMENTARIOS
Todo texto que empiece por <!...comentario…> será dicho dado por el browser y por lo tanto y por lo tanto no será visible al autor del doc. Para comentar en su fichero fuente.
FONDOS Y COLOR DE TEXTO
Un cierto número de atributos de la marca BODY permite controlar el fondo de la ventana, el color de los caracteres del texto y finalmente el color de los enlaces:
<BODY atributo 1 atributo 2…atributo N>
El atributo BGCOLOR permite escoger un color para el fondo de la pág. <BGCOLOR =”#rrggbb”>
Donde “rr” “gg” “bb” son valores hexadecimales. 00-FF*---16
<!--[if !supportLists]-->v <!--[endif]-->BACKGROUND: Especifica una imagen en el especificador la cual se utiliza como fondo de la pág.
<BODY BRACKGROUND =”FICHERO_GRAFICO.GIF>
<!--[if !supportLists]-->v <!--[endif]-->TEXT: Permite controlar el color del texto estándar es decir todo texto que ni especifique un enlace.
<BODY TEXT=”# RRGGBB”>
<!--[if !supportLists]-->v <!--[endif]-->LINK: Color de enlace que aún no ha sido visitado. <BODY LINK= “#RRGGBB”>
<!--[if !supportLists]-->v <!--[endif]-->ALINK: Color muy fugas que aparece cuando se hace clic sobre el enlace. <BODY ALINK= “#RRGGBB”>
<!--[if !supportLists]-->v <!--[endif]-->VLINK: Es el color de un enlace que ya ha sido visitado. <BODY VLINK= “#RRGGBB”>
TITULO HN
Es la marca que asigna el tamaño de los caracteres donde N varía de 1-6. Los más grandes tienen valor de 1 y los más pequeños valor de 6. El texto entre estas marcas se trata en negritas.
TAMAÑO DE LA LETRA Y EL COLOR
<!--[if !supportLists]-->v <!--[endif]-->La marca FONT permite actuar sobre bloques distintos de caracteres situados en la misma línea.
<!--[if !supportLists]-->v <!--[endif]-->El atributo SIZE regula la altura de los caracteres de 1-7
<!--[if !supportLists]-->v <!--[endif]-->El atributo COLOR especifica el color de los caracteres <FONT SIZE=3 COLOR=#008000>…TEXTO </FONT>
ESTILO FISICO O ESTILO DE LOS CARACTERES
<B> negritas <b>hola! </b>
<I> cursiva <i>hola! </i>
<V> subrayado <v>hola! </v>
ESTILOS LOGICOS, ESTILOS DE PARRAFOS
<CITE> cita <KDB> palabra clave
<CUDE> código fuente <SAMP> ejemplo
<DFN> definido <STRONG> resalta
<EM> enfatiza <VAR> variable
CONBINACION DE TAMAÑO Y ESTILO
Toda ventana trabaja bajo solo un par serrado de marcas
<i> cursiva
<Font size=5>
<b> hola </b> Como
<Font size=6 estas? </font>
</font>
</i>
HIPERENLACES
El lector explora un documento en la web haciendo clic sobre las zonas activas para así hacer aparecer nuevos documentos. En HTML definimos una zona activa (que puede ser un texto a una imagen) que se asocia al URL (protocolo de direccionamiento de doc.) del documento que sustituirá al doc. Visualizado cuando se haga clic sobre sobre esa zona. Un ancla x, lo tanto sirve para la partida de un enlace hipertexto (<A>).
El atributo HREF, ancla de partida hacia un en lace externo crea un enlace hacia un servidor situado hacia un punto de internet, o hacia un doc. 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_DISTINTO”> zona_activable </A>
EL ATRIBUTO HREF
Ancla de partida aun enlace interno, crea un enlace a un punto determinado del fichero en ejecución. 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=#Etiquetada> zona_activable_con_atributos_visuales </A>
MARCA TABLE
Una marca se define entre las marcas <TABLE> y </TABLE> esta primera marca regula la presentación general de la tabla mediante tres atributos:
<!--[if !supportLists]-->v <!--[endif]-->BORDER: define el grosor de la marca exterior
<!--[if !supportLists]-->v <!--[endif]-->CELLPADDING: define el espacio alrededor del texto de 1 celda
<!--[if !supportLists]-->v <!--[endif]-->CELLSPACING: define el espacio entre celdas
<!--[if !supportLists]-->v <!--[endif]-->WIDTH: define la anchura de la tabla relativa a la anchura de la ventana.
MARCA TR
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 pila: VALING (alineación vertical) que puede tomar los valores:*TOP, coloca los textos en la parte superior de la celda.
<!--[if !supportLists]-->v <!--[endif]-->BOTTOM: coloca el texto en la parte inferior de la celda
<!--[if !supportLists]-->v <!--[endif]-->MIDDLE: coloca el texto en el centro de la celda
ALIGN: alineación horizontal que puede tomar los valores :
<!--[if !supportLists]-->v <!--[endif]-->RIGHT: coloca el texto a la derecha de la celda
<!--[if !supportLists]-->v <!--[endif]-->LEFT: coloca el texto a la izquierda de la celda
<!--[if !supportLists]-->v <!--[endif]-->CENTER: coloca el texto en el centro de la celda
MARCA TD
Es el elemento de inicio de una columna. Puede completarse con los atributos VALING y ALIGN que separan entonces prioritario sobre los mismos valores definidos en la marca TR.
DOS ATRIBUTOS SUPLEMENTARIOS:
COLSPAN y ROWSPAN permiten generar celdas cuya superficie es un múltiplo de la celda elemental. La matriz de la tabla que define el número de la celda elementales se calcula por el número de líneas de la tabla (número de instrucciones TR), multiplicado por el número de las celdas (número de las celdas TD) de las líneas que define más celdas (mayor numero TD).
El número de celdas por la línea de la tabla se calcula sobre la línea que define el mayor número de celdas.
El atributo TD es NOWRAP que impide dividir el texto en varias líneas.
LA MARCA TH
Esta marca funciona de forma similar 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 negritas.
LA MARCA CAPTION
Esta marca permite poner un título encima (atributo ALIGN=TOP) o debajo (atributo ALIGN=BOTTOM) de la tabla.
IMÁGENES
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 del atributo SRC permite especificar un VRL y es por tanto correcto encontrar imágenes definidas como siguen.
ALINEACION DE IMAGEN
La marca <IMG> admite el atributo ALIGN que permite situar a la imagen en relación con la línea del texto actual y puede tomar los siguientes valores:
<!--[if !supportLists]-->v <!--[endif]-->TOP: para alinear la parte superior de la imagen
<!--[if !supportLists]-->v <!--[endif]-->MIDDLE: para alinear
<!--[if !supportLists]-->v <!--[endif]-->BOTTOM: para alinear la base de la imagen
LAS 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 como externo puede ser una imagen.
<A HREF=”imagen.gif”> Hacer clic </A>
LAS IMAGENES 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 un clic.
<A HREF=”imagen.gif”><IMG SCR=”info.gif”></A>
FORMULARIOS
Es una plantilla para representar un conjunto de datos y generar en la pantalla cuadros de diálogos con el lector. Como en un formulario de papel, se podrá 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.
Cundo 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 que la utilidad de los formularios está limitado 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 proporciona los datos de un formulario para ser procesadas.
DECLARACION DE FORMULARIO
La marca <FORM> y </FORM> definen un formulario y entre ellas se situaron todas las marcas que generan los diversos elementos que componen un formulario. Esta marca debe ir acompañada obligatoriamente por dos atributos:
<!--[if !supportLists]-->v <!--[endif]-->METHOD: está dirigido al programador que codifica el scripts encargado de dar valor a POST o el valor GET que define el modo de transferencia de los datos hacia el scripts.
<!--[if !supportLists]-->v <!--[endif]-->ACTION: que define el URL de un programa scripts encargado de tratar los datos adquiridos desde el formulario.
<FORM METHOD=tipo_de_metodo ACTION=URL_del_scripts>
<FORM METHOD=”POST” ACTION=”egi_bin/inscripción>
Todas las marcas que se definirán tienen los siguientes atributos comunes:
<!--[if !supportLists]-->v <!--[endif]-->NAME: define el nombre que definirá al scripts e identificar el origen de los datos. Este nombre debe ser único.
<!--[if !supportLists]-->v <!--[endif]-->VALUE: definido para el campo de texto.
<!--[if !supportLists]-->v <!--[endif]-->TEXTO: permite definir el contenido del campo.
<!--[if !supportLists]-->v <!--[endif]-->BOTON SUBMINT: identifica el texto a escribir el botón.
<!--[if !supportLists]-->v <!--[endif]-->BOTON RADID Y BOTON CITECKBOX: valor asociado al botón cuando esta pulsado. Identifica el bloque de botones.
CAMPOS DE SELECCCION
La marca <SELECT> permite generar listas de selección simple o de selección variable. Se programa con una lista en la que los intems (los elementos) se especifican mediante la marca <OPTION>.
La presentación de la lista depende del atributo SIZE; si su valor es inferior a 2 o está ausente la lista se interpreta como menú desplegable (POP-LIST). En este caso la lista se visualiza en una ventana con barra de desplazamiento. El valor dado entonces el atributo SIZE da entonces el número de líneas en la ventana.
La opción de selección múltiple se deriva de la presencia del atributo múltiple. Ejemplo: Menú desplegable:
<FORM>
<SELECT NAME=”SEDE”>
<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 SELECTED> Ada
<OPTION> Ctt
<OPTION> Clipper
<OPTION> Pascal
<OPTION> Fortram
<OPTION> Cabol
</SELECT>
</FORM>
AREA 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) delimitan el tamaño de esta ventana. Ejemplo:
<FORM>
<TEXTAREA NAME=”comment” ROWS=5 COLS=40>
Introduzca aquí sus comentarios
</TEXTAREA>
</FORM>
No hay comentarios:
Publicar un comentario