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
<CITE>
Cita
<CODE>
Código de fuente
<DFN>
Definido
<EM>
Enfatiza
<KDB>
Palabra clave
<SAMP>
Ejemplo
<STRONG>
Resalta
<VAR>
Variable
<Html>
<Head>
<Tilte> Ejemplo 1-Mi primera pagina web </Title>
</Head>
<Body>
<Center><H1>Miprimerapagina 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
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>
