Está en la página 1de 16

REPBLICA BOLIVARIANA DE VENEZUELA

MINISTERIO DEL PODER POPULAR PARA LA EDUCACIN


UNIVERSITARIA
INSTITUTO UNIVERSITARIO DE TECNOLOGA DE LOS LLANOS.
NCLEO VALLE DE LA PASCUA, EDO GURICO

Hojas de Estilo en Cascadas y Formularios

Profesor(a): Integrantes:

Luz Marina Riera. Armas, Flor. C.I: 26.717.998

Martnez, Hctor. C.I: 26.844.904

Carrillo, Julio. C.I: 26.844.05

Valle de la Pascua, Mayo de 2016.

NDICE

Pg.

Introduccin. . . . . . . . .3
Contenido:

Hojas de estilo en Cascada


Sintaxis de las hojas de estilo en cascada
Hojas de estilo externas
Hojas de estilo internas
Introduccin a Preprocesadores CSS
Fuentes externas con CSS
Introduccin a los Formularios
Elementos para Formularios
Etiquetas Input
Botones y Tipos
Botones de seleccin, de radio y de accin
Lista de Seleccin
Etiquetas fieldset, leyend, label

Conclusin. . . . . . . . . 16

Bibliografa. . . . . . . . . 17

INTRODUCCIN
A medida que nos afianzamos en el manejo de internet cada uno de nosotros
pasa por tres etapas diferentes: Al principio solamente conocemos unas pocas
pginas, luego nos damos cuenta que existen buscadores los cual lo hace ms
interesante y por ultimo nos damos cuenta que en Internet no solamente se puede se
puede ver la informacin sino que tambin se puede publicar. y qu otra manera ms
fcil y ms sencilla? Si Internet tiene acceso a todos los rincones del mundo.

2
El internet es uno de los inventos mas fantsticos del ltimo siglo, gracias a l
la informacin se ha globalizado, a tal punto cualquier persona desde cualquier parte
del mundo usando y simple telfono con acceso a la web pues puede estar al corriente
de todo el acontecer mundial desde un simple y mero aparato del tamao de una
mano. Vindolo desde esa perspectiva se puede entender el meollo del asunto.
Prosiguiendo el orden de ideas del prrafo anterior, y tomando el mismo
ejemplo, una persona igual puede tambin programas una pgina web desde ese
mismo telfono (Smartphone), y subir informacin que ser vista por el resto de
usuarios de la web en tiempo real, es decir de inmediato.
Actualmente, las personas que comprenden esto, las empresas y corporaciones
que suponen esta realidad, se estn preocupando cada da mas por conocer sobre el
manejo de la web, el diseo de las paginas que les permita ampliar su espectro y tener
xito.
La investigacin presente, trata de socavar en la mente del individuo,
despertar en el esa curiosidad por uno de los lenguajes de programacin ms
universales, y servir de gua bsica para quienes den un paso adelante.

HOJAS DE ESTILO EN CASCADA (CSS)


Son un estndar diseado principalmente para separar los atributos de
presentacin (como el color de fondo, el tamao de la fuente o la sangra) del
contenido. Aunque ste puede trabajar con muchos tipos de documentos, es
mayormente utilizado como una forma de proveer informacin para la presentacin
de pginas web.

3
La separacin entre contenido y presentacin mejora la flexibilidad,
permitiendo a los autores definir un nico conjunto de estilos que miles de
documentos utilizarn, reduciendo as el tiempo y trabajo que se debe invertir en cada
actualizacin. Asimismo, la implementacin de CSS permite a un documento ser
exclusivamente semntico, al liberarlo de la necesidad de usar elementos de
presentacin.
Se usan principalmente para definir estilos que luego se aplicarn a las
pginas de nuestro sitio, incluso a veces permiten definir caractersticas que no
permiten definir los estilos HTML, como el color de fondo para el texto por ejemplo.
Al estar la definicin de los estilos en un archivo externo a las pginas y
comn a todas las pginas del sitio (es recomendable) el aspecto de nuestras pginas
ser ms homogneo y adems podremos cambiar ese aspecto de manera segura e
inmediata cambiando nicamente la hoja de estilos.
SINTAXIS DE LAS HOJAS DE ESTILO
Para especificar las propiedades de una capa no se utilizan etiquetas normales
de HTML. Todas las propiedades se especifican a travs del atributo style, y aparecen
entre comillas dobles, con un punto y coma detrs de cada una. Para asignar los
valores a las propiedades no se utiliza el smbolo = (igual), sino que se utiliza el
smbolo : (dos puntos).
Esto es debido a que se est especificando un estilo, pero sin vincular ninguna
hoja de estilo a la pgina.
Para especificar las propiedades dentro de una hoja de estilo, la sintaxis es
muy similar. En primer lugar se pone el nombre del estilo, y entre llaves se especifica
la lista de propiedades (en minsculas) que se corresponden con dicho estilo. Cada
una de estas propiedades tiene que tener un punto y coma detrs, y los valores se
asignan con el smbolo : (dos puntos).
El nombre del estilo puede ser un nombre determinado cualquiera, o el
nombre de una etiqueta HTML. Para poder utilizar un nombre inventado, tiene que
estar precedido por un punto, o por el nombre de una etiqueta seguida de un punto.

4
Ejemplo: Sintaxis.

HOJAS DE ESTILO EXTERNAS


Las hojas de estilos externas sirven para aplicar los mismos estilos de forma
coherente en algunas o en todas las pginas web de un sitio web. Al definir estilos en
una o varias hojas de estilos externas y adjuntarlos a las pginas web, puede
garantizar que todo el sitio web tenga una apariencia coherente. Si decide cambiar un
estilo, slo tiene que hacer un cambio (en la CSS externa) y ste se refleja
automticamente en todas las pginas web que hagan referencia a dicho estilo y CSS.
Las CSS externas se incluyen en archivos .css, como global.css.
HOJAS DE ESTILO INTERNAS
Las hojas de estilos internas, denominadas en ocasiones CSS incrustadas,
sirven para definir estilos slo para la pgina web actual y tambin para reemplazar
los estilos que se definen en una CSS externa adjunta a la pgina web actual. Las CSS
internas se incluyen entre las etiquetas <head> de las pginas web.
BREVE INTRODUCCIN A PREPROCESADORES CSS
En la programacin informtica, los desarrolladores acaban adquiriendo un rol
determinado segn sus especialidades. Por ejemplo, existen los roles de FrontEnd
Developer o BackEnd Developer. Ahora bien, tanto para unos como para otros,
existen mltiples herramientas que permiten facilitar y optimizar el trabajo.
Desde hace algn tiempo que los preprocesadores de CSS han tomando gran
relevancia en el quehacer diario de los diseadores y desarrolladores web. En la

5
bsqueda de mejorar los flujos de trabajo existentes y realizar ms rpido algunas
funciones que se repiten a lo largo de la maquetacin de un sitio y/o aplicacin web
con este tipo de herramientas se puede salvar tiempo valioso que puede ser invertido
para mejorar otras caractersticas de los proyectos.
Al hablar de preprocesadores CSS, nos referimos a programas que utilizan
lenguajes de programacin complejos ofreciendo la posibilidad de realizar cdigo
CSS con muchas ms posibilidades. Algunas muestras de porque permiten realizar un
mejor cdigo CSS, son:
Permite herencia y POO.
Permiten el uso de variables.
Permiten realizar operaciones.
Se realizan comentarios de cdigo automticos.
Se organiza de forma estructurada y automtica el cdigo.
Permiten el uso de funciones, estructuras de control, bucles
A modo de sntesis, los preprocesadores de CSS son programas que permiten
realizar CSS mediante un lenguaje de programacin. Una vez finalizado el cdigo, el
programa se encarga de convertirlo a CSS para que el navegador web pueda
interpretarlo correctamente.
Existen muchos preprocesadores, pero los ms comunes son LESS y SASS.
Cabe decir que LESS tiene mucha ms popularidad ya que es ms fcil de instalar y
utilizar. Pero en cambio es SASS quien ofrece una amplia gama de opciones y es ms
flexible.

INTRODUCCIN A LOS FORMULARIOS


Los formularios son plantillas que permiten la creacin de documentos HTML
con peticiones de datos. La principal utilidad de los formularios es la posibilidad de
crear cuestionarios, encuestas, pginas de comentarios o cualquier documento en la
que se desee una interaccin por parte del usuario. Adems, permite capturar datos de
varias maneras: directamente desde el teclado, escogiendo un valor de una lista

6
desplegable o seleccionando una opcin desde botones fijos o de todas ellas
combinadas.
Se podrn definir distintos tipos de recuadros de dialogo, botones de
seleccin, mens de mltiples opciones, etc. Para permitir obtener los datos de una
manera ms intuitiva.
Una vez terminada la captura de datos, estos forman un registro que es
enviado a un servidor http (web) que lo procesar y devolver una respuesta (o no).
Pueden utilizarse tambin para enviar su contenido a una direccin de correo
electrnico, o que simplemente abran otra pgina.
Si el formulario se disea para abrir una pgina o para ser enviado por e-mail,
todo se reduce a escribir HTML, pero la cosa se complica cuando se trata de
transacciones de datos que hay que guardar en un servidor (comercio electrnico). En
este caso, en el servidor tiene que haber un programa especial, creado
especficamente para ese formulario, que reciba los datos y sepa qu hacer con ellos,
procesarlos y confeccionar la respuesta que remitir al navegador. A esa respuesta se
le denomina documento virtual ya que esa pgina no est escrita en ninguna parte; es
generada, enviada y destruida.
Como epilogo de las ideas mencionadas en los ltimos prrafos, los
formularios son plenamente bsicos y elementales cuando se habla de HTML.
ELEMENTOS QUE FORMAN EL FORMULARIO
Dentro de la etiqueta de formulario se definirn los distintos elementos de peticin
de datos. Estas instrucciones que se explicarn a continuacin definirn los tipos de
botones, cajas de dialogo y ventanas para la introduccin de datos. Y definirn las
variables que almacenarn los datos introducidos por el usuario. Estas etiquetas se
incluirn entre la de definicin del formulario y la etiqueta de final de formulario.
< /FORM>
Los atributos que presenta la etiqueta FORM son los siguientes:
Action: Indica el programa que se encargar de tratar los datos del formulario.
Este programa debe encontrarse en el servidor y estar escrito en algn
lenguaje de programacin. A este programa se pasar como parmetros los

7
datos introducidos en el formulario y retornar un cdigo HTML que se
mostrar tras procesar el formulario.
Method: Indica el protocolo usado para el envo de los datos. Con POST
enva los datos en la entrada estndar del programa que trata el formulario y
con GET los datos se pasan por parmetro, en la lnea de comandos, al
programa.
Ejemplo:
<FORM ACTION="fichero que trata el formulario" METHOD= POST | GET>
Una vez definidas las caractersticas globales del formulario incluiremos los
distintos botones y cajas de dialogo que lo constituyen. Dentro de la instruccin del
formulario podrn incluirse cualquier texto o instruccin HTML, siendo
recomendado a fin de poder etiquetar las opciones de entrada y especificar cualquier
dato importante relacionado con el formulario. Igualmente un formulario puede ser
incluido en algunas instrucciones HTML como las listas, tablas, etc.
ETIQUETA <INPUT>: ENTRADA BSICA DE DATOS
La etiqueta INPUT se utiliza para definir gran variedad de tipos de campos de entrada
de datos. Por lo general sern entradas de texto corto (a lo sumo una frase) o
opciones. El formato bsico es el siguiente:
<INPUT TYPE= Cualquiera de las siguientes (TEXT | PASSWORD | CHECKBOX |
RADIO | HIDDEN | SUBMIT | IMAGE | RESET) NAME = Variable que toma el
valor VALUE = Valor de Inicializacin>
El atributo TYPE se usa para determinar el tipo de recuadro de dialogo de entrada
que se est definiendo, a continuacin se explicarn por separado cada una de las
opciones. El atributo NAME especifica el nombre de la variable que se define. Este
nombre ser pasado al programa que trata el formulario junto con el valor que le
asigno el usuario del formulario. El atributo VALUE suele especificar el valor de
inicializacin, que ser el valor por defecto.
Por ejemplo: Si se quiere poner un texto pues la analoga sera la siguiente.
<INPUT TYPE=TEXT NAME=variable VALUE=valor inicial SIZE=tamao
MAXLENGTH= longitud mxima>

8
El tamao de la ventana de introduccin de texto se fija con el atributo SIZE,
que indica el tamao de la ventana en caracteres. Aqu solo se define la parte visible,
pero el usuario podr introducir ms texto si lo desea. Para indicar el mximo nmero
de caracteres que se permiten en la entrada usaremos: MAXLENGTH. El
atributo NAME indica el nombre de la variable que toma el valor de la entrada
y VALUE especifica el valor de inicializacin del campo. De todos los atributos solo
ser obligatorio NAME, siendo el resto opcionales. En la entrada se podrn usar
cualquier tipo de caracteres incluso los acentuados, en su formato normal. La
analoga es la misma para la etiqueta Password.
BOTONES Y TIPOS
Submit: Este botn se usa para enviar los datos del formulario, al pulsar el
usuario este botn, se acaba la introduccin del formulario y pasa el control al
programa indicado en ACTION. En todo formulario debe existir al menos un
botn de SUBMIT, si solo incluye un recuadro del tipo TEXT no ser
necesario incluirlo. El formato es:
< INPUT TYPE=SUBMIT VALUE=mensaje a mostrar>
El atributo VALUE especifica una etiqueta no editable que se mostrar
en el botn de envo. Lo normal es que este botn no enve datos, pero si se
indica el atributo NAME con un nombre de variable ser enviada la variable
con el valor de VALUE. Esto puede ser til si se incluyen distintos botones
de SUBMIT para distinguir cual fue pulsado.

Ejemplo

Inst. HTM
< INPUT TYPE=SUBMIT VALUE= Enviar Datos>
L

Resultado

El texto indicado en VALUE es el que etiqueta el botn, al pulsar


Explicacin
sobre l se enviarn los datos del formulario

9
Image: Su funcionalidad es similar al botn de SUBMIT, se usa igualmente
para enviar los datos de un formulario, pero en este caso se presenta una
imagen como botn. Igualmente al pulsar sobre el botn se enviar el
formulario. El formato es el siguiente:
< INPUT TYPE=IMAGE NAME=variable SRC=URL de la
Imagen >
El punto de la imagen en el que pulsa el usuario tambin es pasado al
programa intrprete del formulario, de forma que la imagen igualmente podra
ser un mapa sensible. Se pasarn dos parmetros X y Y con las coordenadas
del punto donde pulso, siendo el programa interprete el encargado de
determinar la zona donde se puls, si se desea.

Ejemplo
Inst. HTM
L <INPUT TYPE=IMAGE SRC=boton.gif>

Resultado

Se muestra la imagen como botn de envo, sustituyendo al botn de


Explicacin
SUBMIT.

BOTONES DE SELECCIN, DE RADIO Y DE ACCIN


Checkbox: El checkbox es un botn que puede presentar dos estados activado
o desactivado. El formato es el siguiente:
< INPUT TYPE=CHECKBOX NAME=variable CHECKED>
Se requiere el atributo NAME. Los valores que tomar la variable
sern o off, dependiendo de su estado. Si el botn estaba activado cuando se
envan los datos del formulario se enviaran el nombre de la variable y el valor
que indique su estado. Si se incluye el atributo CHECKED el botn se
encontrar activado en la inicializacin.
Si se indica el atributo VALUE, cuando se envan los datos con el
botn activado se mandar la variable con el valor indicado y en caso
contrario no se mandar ningn valor.

10
Ejemplo

Inst. HTML <INPUT TYPE=CHECKBOX NAME= variable> Opcin

Opcin
Resultado

En este caso esta desactivado por defecto y su utilizar en caso


Explicacin
de los valores on y off para definir su estado.

<INPUT TYPE=CHECKBOX NAME= variable CHECKED>


Inst. HTML
Opcin

Opcin
Resultado

Ahora se especifica CHECKED para indicar que por defecto debe


Explicacin
estar activado.

Radio: Se usa cuando la opcin puede tomar un valor simple de una serie de
alternativas. En este caso se presentan unos valores opcionales de los que solo
puede tomar un valor. Para especificar cada uno de estos valores se incluir
una etiqueta RADIO por cada una de las posibles alternativas, su estructura
general ser:
<INPUT TYPE=RADIO NAME=variable VALUE=valor1
CHECKE>
<INPUT TYPE=RADIO NAME=variable VALUE=valor 2>
< INPUT TYPE=RADIO NAME=variable VALUE=valor n >
Cada una de las etiquetas RADIO tendr el mismo atributo NAME, y
con un distinto atributo VALUE que ser el valor que tome si se selecciona
esta opcin. Para inicializarlo se usa el atributo CHECKED que se indicar
solo en la opcin que se quiera especificar por defecto.
Ejemplo
Inst. HTM <INPUT TYPE=RADIO NAME= variable VALUE=opcion1 >Opcin
L 1<BR>
<INPUT TYPE=RADIO NAME= variable VALUE=opcion2
CHECKED>Opcin 2<BR>
<INPUT TYPE=RADIO NAME= variable VALUE=opcion3 >Opcin

11
3<BR>
<INPUT TYPE=RADIO NAME= variable VALUE=opcion4 >Opcin
4<BR>

Opcin 1

Opcin 2
Resultado
Opcin 3

Opcin 4

En este caso solo es posible seleccionar uno de los posibles valores, la


Explicacin
opcin CHECKED indica cual es la opcin activa por defecto.

Hidden: En este caso no se muestra ningn campo para la entrada de datos al


usuario, pero el par variable valor especificado es enviado junto con el
formulario. Se suele usar para transmitir informacin de estado control
para enviar algn tipo de informacin que no debe ser variada en el
formulario, pero s debe ser enviada junto a este. El formato es:
< INPUT TYPE=HIDDEN NAME=variable VALUE=valor>
Deber incluir tanto la variable como el valor.
Reset: Este botn se usa para volver a los valores por defecto todos los
elementos del formulario, borrando todos los datos introducidos por el
usuario. Su formato es el siguiente:
< INPUT TYPE=RESET VALUE=Etiqueta a mostrar>
El atributo VALUE especifica la etiqueta que tendr el botn.
LISTAS DE SELECCIN
Select: Se usa para mens simples o mltiples. Define mens de tipo pop-up
(men de barras) y ofrece una alternativa ms compacta al uso de
botones RADIO o CHECKBOX. Su formato es el siguiente:
<SELECT NAME="variable">
<OPTION SELECTED VALUE=valor1> Opcin Primera
<OPTION VALUE=valor2> Opcin Segunda
<OPTION VALUE=valorn> Opcin Ensima

12
</SELECT>
Si se desea que sea un men mltiple se deber incluir el
atributo MULTIPLE en la etiqueta de SELECT, en este caso se mostrarn
todas las opciones en forma de tabla, en el otro caso se mostrar la opcin
activa y un botn para poder modificar esta opcin. En ambos casos solo
podr seleccionarse una de las opciones. Cuando se enva el resultado del
formulario la variables NAME tomar el valor de la opcin que este activa.
La etiqueta OPTION que contenga el atributo SELECTED ser
considerada la opcin por defecto, caso de no especificarse ninguna se
considerar la primera de las opciones.

Ejemplos

<SELECT NAME=variable>
<OPTION VALUE=1> Opcin Primera
Inst. HTM
<OPTION SELECTED VALUE=2> Opcin Segunda
L
<OPTION VALUE=3> Opcin Tercera
</SELECT>

Resultado

Se muestra la opcin activa que puede ser cambiada, por defecto


Explicacin
esta activada la segunda opcin.

<SELECT NAME=variable MULTIPLE>


<OPTION VALUE=1> Opcin Primera
Inst. HTM
<OPTION SELECTED VALUE=2> Opcin Segunda
L
<OPTION VALUE=3> Opcin Tercera
</SELECT>

Resultado

En este caso al ser mltiple se muestran todas las opciones posibles,


Explicacin
de las que solo es posible seleccionar una.

ETIQUETAS <FIELDSET>, <LEYEND>, <LABEL>.


En sentido simple, las etiquetas Fieldset, leyend y label nos sirven para aadir
estructura a nuestros formularios. Detalles de cada uno:

13
Fieldset: Sirve para agrupar controles y elementos relacionados, esto facilita
la navegacin de los usuarios, ya que permite facilitar la navegacin con la
tecla de tabulacin adems de permitir que navegadores que integren
funciones de generacin de voz las lean.
Leyend: Permite asignar un Ttulo a un fieldset. Esto tambin proporciona
accesibilidad cuando nuestro sitio es visitado por una persona con
discapacidad visual.
Label: Se utiliza para asignar un texto a un campo de texto. Me explico. Si
tenemos por ejemplo en un sector de nuestro sitio web lo siguiente:
<label for=nombre>Nombre</label>
<input type=text id=nombre>
Si utilizamos la etiqueta label, y la asignamos a el campo que la
acompaa, hacer click en el texto Nombre es equivalente a hacer click en el
campo de texto.
Ejemplo del uso de las 3 etiquetas:
<form>
<fieldset>
<legend>Inicio de Sesin</legend>
<label for=nombre>Nombre de usuario</label>
<input type=text id=nombre>
<label for=password>Contrasea</label>
<input type=text id=password>
</fieldset>
</form>
Usando este cdigo, obtendremos lo siguiente:

En resumen: La etiqueta fieldset sirve para definir un grupo de elementos


(agrupar), leyend nos permite etiquetar a este grupo de elementos y la etiqueta
label nos sirve para establecer un ttulo para cada campo de un formulario.

14
CONCLUSIN
Es simplemente trascendental el rol que ha jugado el lenguaje de
programacin HTLM los ltimos aos para el desarrollo social y econmico del Ser
Humano.
La cantidad de beneficios que se pueden obtener a travs del buen manejo de
HTLM son innumerables, inmedibles, infinitos. Ya lo que antes eran barreras como el
tiempo, el espacio, la distancia entre las personas son un mero detalle cualquiera, ya
no es un impedimento, la comunicacin se ha globalizado gracias a las pginas web,
sus colores y sus amplio margen de utilidad.
Y es que hoy da, desde el marketing pasando por lo que son las ventas,
compras, de productos, bines y servicios; la asesora, la educacin, el empleo hasta la
comunicacin son todo lo que son, gracias a los lenguajes de programacin, y siendo
ms especficos a HTLM.
Adems de todo esto, lo que antes quizs pareca una labor para personas
especializadas en la materia, por estos das cualquier personas sin ser necesariamente
ingeniero en sistema o tcnico en informtica puede desde la tranquilidad de su hogar
programar una pgina web y tener xito. Eso es lo ms inaudito de todo este asunto.
Actualmente todos los sitios web que rondan en la internet estn diseadas bajo la

15
plataforma de HTML, sus formularios y dems puntualidades mencionadas en este
estudio.
Remembrando, y haciendo una especie de sntesis de toda la informacin
presentada, el internet es un diamante en bruto y los lenguajes de programacin como
HTML son las maneras de pulirlo al mximo, y utilizarlo a nuestro favor sin barrera
ms que nuestro conocimiento,

BIBLIOGRAFA
http://www.virtualnauta.com/html-formularios
https://microbuffer.wordpress.com/2010/12/20/agregar-fuentes-mediante-css/
http://www.htmlpoint.com/css/css_16.htm
https://www.uv.es/jac/guia/indice.htm
https://gmake.wordpress.com/2011/12/12/para-que-sirven-las-etiquetas-
fieldset-leyend-y-label/
https://msdn.microsoft.com/es-es/library/cc295305.aspx
http://librosweb.es/libro/xhtml/capitulo_8/formularios_avanzados.html

16

También podría gustarte