Osvaldo
miércoles, 12 de junio de 2013
martes, 16 de abril de 2013
apuntes del saber A
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 es alfanumé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
Salida
|
<Form>
<Input
type= “Submit” value=”salida”>
</Form>
· Reset:
Permite borrar los datos ya entrados
Borrar
|
<Form>
<input
type=”reset” value=”Borrar”>
</Form>
· Password:
Permite entrar una palabra clave de forma confidencial
<Form>
Pwd
|
<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
Entradadirecta
|
<Form>
<Select
name=”sede”>
<Option> Entrada
indirecta
<Option> Entrada
lateral
<OptionSelected>
Entrada directa
</Select>
</Form>
Ventana con barra de desplazamiento
Ventana con barra de desplazamiento
Ctt
Cliper
Pascal
Fortran
|
(Opcion de selección
múltiple)
<Form>
<Select
multiple name=”lenguaje” size=”3”>
<Opction
selected>ada
<Option>Ctt
<Option>Cliper
<Option>
Pascal
<Option>Fortran
<Option>Cobol
</Select>
</Form>
Area de
texto
La marca <Tex
tarea> 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
<Form>
<Textarea
name =”comment” rows=5 cols=40>
Introduzca aqui sus
comentarios
</Textarea>
</Form>
Suscribirse a:
Entradas (Atom)