Scribd Logo
Cargar

¡Te damos la bienvenida a Scribd!

  • 5 vistas

    Guia 2 - Desarrollo Web

    Cargado por

    f5gmv6hdw8

    Copyright:

    © All Rights Reserved
    Descargue como PDF, TXT o lea en línea desde Scribd

    Guia 2 - Desarrollo Web

    Cargado por

    f5gmv6hdw8
    5 vistas7 páginas

    Derechos de autor

    © © All Rights Reserved

    Formatos disponibles

    PDF, TXT o lea en línea desde Scribd

    ¿Le pareció útil este documento?

    ¿Este contenido es inapropiado?

    Copyright:

    © All Rights Reserved
    Descargue como PDF, TXT o lea en línea desde Scribd
    Descargar como pdf o txt
    5 vistas7 páginas

    Guia 2 - Desarrollo Web

    Cargado por

    f5gmv6hdw8

    Copyright:

    © All Rights Reserved
    Descargue como PDF, TXT o lea en línea desde Scribd
    Descargar como pdf o txt
    Está en la página 1de 7

    TEMA: HOJAS DE ESTILOS EN CASCADA (CSS) Y FORMULARIOS WEB HTML

    Objetivo:

    ✓
    Aplicar hojas de estilos y construir formularios web basados en HTML como elementos fundamentales
    en el desarrollo web
    1
    1. LAS HOJAS DE ESTILO EN CASCADA

    Las hojas de estilo en cascada (en inglés Cascading Style Sheets), CSS es un lenguaje usado para
    definir la presentación y/o apariencia visual de un documento estructurado en formato HTML,
    XHTML o XML. El W3C (World Wide Web Consortium) es el organismo encargado de formular la
    especificación de las hojas de estilo que servirán de estándar para la industria. La idea que se
    encuentra detrás del desarrollo de CSS es separar la estructura de un documento de su
    presentación. Por ejemplo, el elemento de HTML <h1> indica que un bloque de texto es un
    encabezamiento y que es más importante que un bloque etiquetado como <H2>. Versiones más
    antiguas de HTML permitían atributos extra dentro de la etiqueta abierta para darle formato (como
    el color o el tamaño de fuente). No obstante, cada etiqueta <H1> debía disponer de la información
    si se deseaba un diseño consistente para una página y, además, una persona que lea esa página
    con un navegador pierde totalmente el control sobre la visualización del texto.

    Cuando se utiliza CSS, la etiqueta <H1> no debería proporcionar información sobre cómo va a ser
    visualizado, solamente marca la estructura del documento. La información de estilo separada en
    una hoja de estilo, especifica cómo se ha de mostrar <H1>: color, fuente, alineación del texto,
    tamaño y otras características no visuales. La información de estilo puede ser adjuntada tanto
    como un documento separado o en el mismo documento HTML. En este último caso podrían
    definirse estilos generales en la cabecera del documento o en cada etiqueta particular mediante el
    atributo "style".

    1.1 TIPOS DE ESTILOS

    CSS proporciona tres caminos diferentes para aplicar las reglas de estilo a una página Web:

    1. Hoja de estilo externa: es una hoja de estilo que está almacenada en un archivo diferente al
    archivo donde se almacena el código HTML de la página Web. Esta es la manera de
    programar más potente, porque separa completamente las reglas de formateo para la página
    HTML de la estructura básica de la página.
    2. Hoja de estilo interna: es una hoja de estilo que está incrustada dentro de un documento
    HTML. (Va a la derecha dentro del elemento <head>). De esta manera se obtiene el beneficio
    de separar la información del estilo, del código HTML propiamente dicho. Se puede optar por
    copiar la hoja de estilo incrustada de una página a otra, (esta posibilidad es difícil de ejecutar si
    se desea para guardar las copias sincronizadas).
    3. Estilo en línea (inline): es un método para insertar el lenguaje de estilo de página,
    directamente, dentro de una etiqueta HTML. Esta manera de proceder no es totalmente
    adecuada. El incrustar la descripción del formateo dentro del documento de la página Web, a
    nivel de código se convierte en una tarea larga, tediosa y poco elegante de resolver el
    problema de la programación de la página. Este modo de trabajo se podría usar de manera
    ocasional si se pretende aplicar un formateo con prisa

    1
    Tomado de http://es.wikipedia.org/wiki/Hojas_de_estilo_en_cascada
    1.3 VENTAJAS DE USAR LAS HOJAS DE ESTILO

    ✓
    Control centralizado de la presentación de un sitio web completo con lo que se agiliza de forma
    considerable la actualización del mismo.
    ✓ Los navegadores permiten a los usuarios especificar su propia hoja de estilo local que será
    aplicada a un sitio web, con lo que aumenta considerablemente la accesibilidad. Por ejemplo,
    personas con deficiencias visuales pueden configurar su propia hoja de estilo para aumentar el
    tamaño del texto o remarcar más los enlaces.
    ✓
    Una página puede disponer de diferentes hojas de estilo según el dispositivo que la muestre o
    incluso a elección del usuario. Por ejemplo, para ser impresa, mostrada en un dispositivo móvil,
    o ser "leída" por un sintetizador de voz.
    ✓
    El documento HTML en sí mismo es más claro de entender y se consigue reducir
    considerablemente su tamaño.

    ACTIVIDAD N°1. DISEÑO Y APLICACIÓN DE UNA HOJAS DE ESTILOS CSS

    Paso 1: A continuación encontrara una serie de códigos, copie cada una de las líneas en un editor
    HTML (Por ejemplo Notepad++), guárdelo con el nombre “Estilos.css” y ubíquelo en la carpeta
    donde va almacenar las páginas web que a las que va aplicar esta hoja de estilos.
    Paso 2: A continuación encontrara un archivo HTML que servirá de ejemplo de cómo aplicar una
    hoja de estilos a una página Web Html. Copie cada una de las líneas en un editor de HTML,
    guárdelo con el nombre “MisEstilos.html” y ubíquelo en la carpeta donde guardo el archivo
    “Estilos.css" del punto anterior
    2. FORMULARIOS WEB HTML

    Los formularios son una característica del estándar HTML que permite recolectar información
    provista por los usuarios o visitantes. Estos formularios pueden ser útiles para obtener información
    personal, información de contacto, preferencias u opiniones, o cualquier tipo de entrada por parte
    del usuario o visitante que así se requiera. Un formulario puede ser insertado en un documento
    HTML mediante la etiqueta HTML “form” la cual actúa como contenedor para todos los elementos
    de entrada (input). Un formulario web html debe definirse en este lenguaje y por lo tanto necesita
    de etiquetas que lo especifiquen. La declaración de formulario queda establecida por las etiquetas
    <form>.....</form> y dentro de ellas se recogerán todas las variables de entrada. Form es una
    etiqueta de HTML que representa un formulario. En un formulario web html se pueden agregar
    diversos campos de entrada de datos o de confirmación así como botones, que como mínimo ha
    de haber uno. Al etiqueta de apertura <form> le suelen acompañar los siguientes atributos:

    1. Action="" : Entre las comillas se indica el programa que va a tratar las variables enviadas con
    el formulario o la URL “mailto” para el envio de emails.
    2. Method="": Indica el método de transferencia de las variables, los cuales pueden ser
    ✓
    POST: Los datos son adjuntados al cuerpo del formulario.
    ✓
    GET: Los datos son adjuntados a la URL, es decir los datos se envía a través de la URL.

    ACTIVIDAD N°2: FORMULARIOS WEB Y CONTROLES GRAFICOS HTML

    Investigue en internet cuales son principales elementos y/o controles que se pueden agregar a un
    formulario web html, investigue cuales son los atributos que tienen y la forma correcta de definirlos
    dentro de un archivo html, saque los apuntes correspondientes.

    Una vez finalice la investigación proceda a realizar los pasos que se indican a continuación:

    Paso 1 :A continuación encontrara una serie de códigos, copie cada una de las líneas en un editor
    HTML, guárdelo con el nombre “EstiloFormulario.css” y ubíquelo en la carpeta donde va a guardar
    la página principal de esta actividad.
    Paso 2:. Página Principal, Copie cada una de las siguientes líneas en un editor de HTML, guárdelo
    con el nombre “MiFormulario.html” en una carpeta al lado de la hoja de estilos del paso 1.
    TALLER
    1. Aplique hojas de estilos “CSS” y configure la misma apariencia visual a todas las páginas
    desarrolladas en la guía anterior (Desarrollo Web Con HTML).

    2. Diseñe un formulario Web html y aplíquele una Hoja de Estilos (CSS). El formulario debe
    corresponder a una encuesta, el cual debe iniciar desde una página Index.

    ✓
    El formulario debe contener los datos básicos de una persona o cliente como por ejemplo:
    Nombres, Apellidos, Dirección, Sexo, Edad, Teléfono, Celular, Profesión u Oficio, etc
    ✓
    Debe agregar una serie de preguntas (mínimo 10) tanto de selección múltiple como
    abiertas de un tema específico escogido por usted.
    ✓
    Debe utilizar la mayor cantidad de los controles gráficos html vistos en la guía y finalizar
    con un botón de envió de datos.

    3. Diseñe una página Web HTML que contenga la información correspondiente a su Hoja De
    Vida. (Use una hoja de estilo en cascada CSS para la apariencia visual y use tablas HTML
    para distribuir la información en pantalla)

    También podría gustarte