Saber A
Marcas
Las marcas delimitan elementos de un
documento como cabeceras, párrafos, etcétera y son utilizados para dar un
tratamiento diferente al texto que se encuentre entre las marcas. En html las
marcas se delimitan con los signos < abrir y > cerrar.
Atributos de las marcas
Algunas marcas pueden admitir atributos,
pudiendo tener cada uno de estos un valor. Este valor ira entre comillas si
dicho valor esalfanumérico.
Estructura de los documentos
La cabecera se emplea para facilitar
información acerca del documento y está delimitada por <Head> prologo
</Head>. Dentro de la cabecera podemos destacar el titulo que indica el
documento con su nombre.
Cuerpo
El resto del documento recibirá entre las
marcas <Body>...</Body> esta es la estructura mínima que deben de
poseer.
<Html>
<Head>
<Title>Bienvenido</Title>
<Body>
Documento
</Head>
</Html>
Encabezado
Los encabezados se emplean para dividir
los documentos en secciones o más en concretamente para marcar los titulos de
esas secciones. Las marcas son del tipo: <H1> tamaño mayor </H1>.
Tamaño de letra <Title><H1> Bienvenido </H1><H6> Tamaño
menor </H6>
Definición de los bloques
Para definir y separar bloques de texto
se emplean una serie de marcas que definen párrafos, texto preformateado o
bloques con significado especial como direcciones o citas.
Marcas de bloques
<P> y </P>: Se utiliza para
separar párrafos dado que para el html todo el texto es continuo y necesitamos
algún mecanismo para indicar el principio y el fin de un párrafo.
<Pre>…</Pre>: El texto
insertado entre las marcas para ser visualizado respetando el formato con el
que fue escrito en el archivo de fuente.
<Address> …<Address>:
Empleada para indicar que un texto representa una dirección o una forma.
Generalmente se activa en cursiva y suele estar tabulado.
<Blockquote>…</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.
<Br> Este elemento solo tiene marca
inicial e indica un salto de línea.
<Hr> Solo tiene una marca inicial y
se emplea para representar una línea horizontal.
Comentarios
Todo texto que empiece por
<!...Comentario…> es un comentario será ignorado por el Html y por lo
tanto no será visible. Esto sirve al autor del documento para comentar su
fichero fuente.
Fondos y colores de texto
Un cierto número de atributos de la marca
body permiten controlar el color de fondo de la ventana, el color de los
colores del texto y finalmente el color de los enlaces.
<Body atributo1.atributo2> Aquí va
el tamaño, color, ancho, alto del cuerpo.
El atributo bgcolor permite escoger un
color para el fondo de la pagina.
<BGcolor=”#rrggbb”> donde “rr”
“gg””bb” son valores hexadecimales comprendidos entre “oo” y “ff” que
especifican el grado de saturación de los colores.
Atributo Background=Fondo: Este atributo
especifica una imagen residente la cual se uitilizara como fondo de
pagina<Bodybackground=”fichero.gif”> cuando lleva punto después de
fichero es una imagen con movimiento.
Atributo text: Permite controlar el color
del texto estándar es decir todo texto que no especifique ningún enlace
<Bodytext=”#rrggbb”>
Atributo link, vlink y alink: Controla el
color de los enlaces: Link=color del enlace que aun no ha sido visitado.
<Body Link=”#rrggbb”>
Alink=Color muy fugaz que aparece cuando
s hace clic sobre el enlace <BodyAlink=”#rrggbb”>
Vlink=Es el color de un enlace que ya ha
sido visitado <BodyVlink”#rrggbb”>
Titulo
<Hn> Es la marca que asigna el
tamaño de los caracteres donde n varia de 1 a 6. Las más grandes tienen un
valor de 1 y las más pequeñas un valor de 6. El texto entre estas marcas se
trata en negritas.
Tamaño de la letra y color
<Font> L marca Font permite actuar
sobre bloques distintos de caracteres situados en la misma línea.
El atributo Size regula la altura de los
caracteres de 1 a 7. El atributo Color especifica el color de los caracteres
ejemplo: <Font Size=3 Color=#008000>…Texto…</Font>
Estilo físico o estilo de los caracteres
<B> Negrita
<b>Hola</b><I> Cursiva <i> hola
</i><V>Subrayado <V>hola</V>
Estilos lógicos y estilo de párrafo
<Html>
<Head>
<Tilte> Ejemplo 1-Mi primera pagina
web </Title>
</Head>
<Body>
<Center><H1>Mi primera pagina web
</H1></Center>
<Hr>
Esta es mi primera página web aun que
todavía no sencilla <Br> como el lenguaje html no es difícil, pronto
estaré en condiciones de hacer cosas más interesantes.
<P> Aquí va un segundo
párrafo</P>
</Body>
</Html>
<Html>
<Head>
<Tilte> Ejemplo 2-Comandos básicos
</Title>
</Head>
<Body>
<Center><H1>Comandosbásicos</H1></Center>
<!—Este documento contiene todo lo que
he aprendido hasta ahora sobre html-->
<H2> Párrafos </H2>
<P> Este es mi primer párrafo del
ejemplo 2</P>
<P> Este es mi segundo párrafo.
Aquí hay una ruptura de línea <Br> de texto </P>
<Hr>
<H2> Listas </H2>
<H3> Ordenadas </H3>
<P> La <Front
Size=”+1”><I>música</I></Front>
Combinación de tamaño y estilo
Toda ventana trabaja bajo el efecto de
solo un par cerrado de marcas ejemplo:
<i>
<Font Size=5>
<b>Hola</b>
<Font Size= 6> Como
estas?</Font>
</i></Font>
Quedaría: Hola como estas?
Hiperenlaces
El lector explora un documento en la web
haciendo clic sobre las zonas activas para asi hacer aparecer nuevos
documentos. En html definimos una zona activa (que puede ser un texto o una
imagen) que se asocia al URL (Protocolo de direccionamiento de documentos), el
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>)
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 elURL del documento a
recuperar. Zona activable: <A HREF=”URL.de.destino”>zona_activa</A>
El atributo HREF, ancla de partida a un
enlace interno
Crea un enlace a un punto determina el
fichero en ejecución. Para ello hay que colocar un ancla activa (ancla de
partida) y un ancla inactiva (ancla de llegada). El ancla de partida se define
de la siguiente forma: Zona activable con atributos visuales.
<A HREF=#
etiqueta>zona_activable_con_atributos_visuales</A>
El atributo name, ancla de llegada
Define el ancla de llegada lugar que se
podrá acceder haciendo un clic sobre el ancla de partida. Zona no activable sin
atributos visuales:
<A
name=”label”>zona_no_activable_sin_atributos_visuales</A>
La marca <table>
Se define entre las marcas <Table>
y </Table> esta primera marca regula la presentación general de la tabla
mediante tres atributos:
· Border: Define el grosor del marco
exterior
· Cellpadding: Define el espacio
alrededor del texto de una celda
· Cellspacing: Define la anchura de la tabla
relativa a la anchura de la ventana.
La marca <Tr>
Define una nueva fila son <Tr> y
</Tr> que admite los siguientes atributos 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 tabla
· Bottom: Coloca el texto en la parte
inferior de la tabla
· Middle: Coloca el texto en el centro de
la tabla
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: Coloca el texto en el centro de
la celda
La marca <Td>
Es el elemento de inicio de una columna.
Puede complementarse con los atributos Valign y Align que será entonces
prioritarios sobre los mismos valores definidos en la marca <Tr>.
Los atributo suplementarios COLSPAN y
ROWSPAN permiten generar celdas es un múltiplo de la celda elemental. La matriz
de la tabla que define el numero de celdas elementales se calcula por el número
de líneas de la tabla (numero de instrucciones Tr), multiplicando por el numero
de celdas (numero de celdas Td) de la línea que define mas celdas (mayor numero
de Td).
El número de celdas por 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 de la celda en varias líneas.
La Marca <Th>
Esta marca funciona de forma similar a Td
admitiendo los valores de los mismos atributos pero se considera como una marca
de Titulo de una celda. Automáticamente centra el texto y lo pone en negrita.
La Marca <Caption>
Esta marca permite poner un titulo encima
(atributo ALIGN=Top) o de bajo (Atributo ALIGN=Bottom) de la tabla.
La Marca <IMG>
Es la marca que permite incluir una
imagen esta marca ira siempre complementada por el atributo SCR que permite dar
la dirección del fichero grafico que contiene la imagen <IMG>Scr=nombre
del fichero. El valor del atributo Scr permiteespecificar un URL y es por tanto
correcto encontrar imágenes definidas como una dirección en internet:
<IMG Scr=”http://nombre del
fichero>
Alineación de imágenes
La marca img admite el atributo ALIGN que
permite situar la imagen en relación a la línea de texto actual y pueden tomar
los siguientes valores: Top para alinear la parte superior de la imagen, Middle
para alinear el centro de la imagen y Bottom para alinear la base de la imagen.
Imágenes como anclas
Se puede reemplazar el texto de un ancla
para una 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=”archivo.gif><IMG
Scr=”imagen.gif></A>
Formularios
Un formulario es una plantilla para
representar datos y generar en la pantalla cuadros de dialogo con el lector.
Como en un formulario en papel, se podrán tener zonas en las que se introducirá
un texto, casillas de verificación, listas de selección, etcétera.
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 junto con servidores ya que
las acciones asociados son programas, estos programas deben funcionar un
servidor al que se le proporciona los datos de un formulario para ser
procesados.
Declaración del formulario
La marca <Form> y </Form>
definen un formulario y entre ellas se situaran todas las marcas que generan
los diversos elementos que componen un formulario.
Esta marca debe de ir acompañada
obligatoriamente por dos atributos: El atributo method está dirigido al
programador que codifica el script que puede dársele el valor post o el valor
Get que define el modo de transferencia de los datos hacia el script.
El atributo Action que define el URL de
un programa (script) encargado de tratar los datos adquiridos desde el
formulario
<FormMethod=tipo_de_metodoAction-URL_del_script>
<Form=”Pot”
Action=”cgi”_bin/inscripción”>
Todas las marcas se definirán con los
siguientes atributos comunes: El atributo name: define el nombre que permitirá
al script identificar el origen de los datos. Este nombre debe de ser único.
El atributo Value definido para un campo
de: texto que permite definir el contenido del campo.
Bottomsubmit: indica el texto a escribir
el botón
Bottom radio y bottomcheck box: Valor
asociado al botón cuando esta pulsado name que identifica el bloque de botones.
Campos de entrada <INPUT>
Servirá para definir campos para entrar
en un texto y botones que permiten escoger opciones.
El atributo Type: Asociado a la marca
input permite la selección del elemento de entrada. Puede tomar los siguientes
valores.
· Submit: Desencadena el envió del
formulario hacia el script; el texto definido en value se escribirá en el botón
<Form>
<Input type= “Submit” value=”salida”>
</Form>
· Reset: Permite borrar los datos ya
entrados
<Form>
<input type=”reset” value=”Borrar”>
</Form>
· Password: Permite entrar una palabra
clave de forma confidencial
<Form>
<Input type=”password” name=”pwd”>
</Form>
· Check box: Crea un bloque de botones
que permite una selección múltiple de opciones.
Macintosh
Pc
<Form>
<Input type=”check box” name=”micro” value
“mac”>Maccintosh
<Input type=”check box” name=”micro” value=”pc”>
Pc
</Form>
· Hidden: Sirve para pasar datos
adquiridos de un formulario a otra sin que aparezca nada en pantalla
· <Input type=”hidden” name=
nombre_de_variablevalue=valor_de_la_variable>
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 (elementos) se especifica mediante la marca <Option>
la presentación de la lista depende del atributo <Size>; si su valor es
inferior, la 2da está ausente, la lista se interpreta como un menú despegable
(pop-list). En caso contrario la lista se visualizara en una ventana con barra
de desplazamiento. El valor dado entonces al atributo <Size> da entonces
el número de líneas visible en la ventana, la opcion de selección múltiple se
deriva de la presencia del atributo <Múltiple>.
Menúdespegable
<Form>