Scribd Logo
Cargar

¡Te damos la bienvenida a Scribd!

  • Actividad - GUÍA DE LABORATORIO SESIÓN 2

    Cargado por

    Cristhian Ipanaque
    4 vistas13 páginas
    Este documento presenta tres ejemplos prácticos de conceptos básicos de ingeniería web como formularios, arrays y CSS. El primer ejemplo muestra cómo crear un formulario HTML básico con campos de texto, selección y casillas de verificación. El segundo ejemplo demuestra cómo crear y mostrar un array simple que almacena información sobre frutas utilizando PHP. El tercer ejemplo enseña cómo posicionar y superponer divisiones con bordes de colores utilizando CSS. Al final, se proponen dos problemas prácticos como tarea.

    Descripción original:

    Derechos de autor

    © © All Rights Reserved

    Formatos disponibles

    DOCX, PDF, TXT o lea en línea desde Scribd

    ¿Le pareció útil este documento?

    ¿Este contenido es inapropiado?

    Denunciar este documento
    Este documento presenta tres ejemplos prácticos de conceptos básicos de ingeniería web como formularios, arrays y CSS. El primer ejemplo muestra cómo crear un formulario HTML básico con campos de texto, selección y casillas de verificación. El segundo ejemplo demuestra cómo crear y mostrar un array simple que almacena información sobre frutas utilizando PHP. El tercer ejemplo enseña cómo posicionar y superponer divisiones con bordes de colores utilizando CSS. Al final, se proponen dos problemas prácticos como tarea.

    Copyright:

    © All Rights Reserved
    Descargue como DOCX, PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    4 vistas13 páginas

    Actividad - GUÍA DE LABORATORIO SESIÓN 2

    Cargado por

    Cristhian Ipanaque
    Este documento presenta tres ejemplos prácticos de conceptos básicos de ingeniería web como formularios, arrays y CSS. El primer ejemplo muestra cómo crear un formulario HTML básico con campos de texto, selección y casillas de verificación. El segundo ejemplo demuestra cómo crear y mostrar un array simple que almacena información sobre frutas utilizando PHP. El tercer ejemplo enseña cómo posicionar y superponer divisiones con bordes de colores utilizando CSS. Al final, se proponen dos problemas prácticos como tarea.

    Copyright:

    © All Rights Reserved
    Descargue como DOCX, PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    de 13

    ESCUELA ACADÉMICA PROFESIONAL DE

    INGENIERÍA DE SISTEMAS

    LABORATORIO N° 02
    Escuela Profesional: Ingeniería de Sistemas. Asignatura: INGENIERÍA WEB
    Sección : C1 Semestre Académico: 2023-I

    Docente: José Antonio Ogosi Auqui Fecha: 10/04/2023

    FORMULARIOS:
    Un formulario HTML es una caja de texto que puede contener casillas de
    verificación, botones y campos alfanuméricos. Suelen encontrarse en los
    sitios web para recolectar los datos personales de los usuarios interesados
    en la oferta del sitio.

    Ejemplos Prácticos
    Ejemplo1: Crear un formulario donde se ingrese los siguientes datos:
    Nombre, Apellido, Profesión, Genero que será elegido a través de la
    etiqueta select , Email, su edad y que se le haga una pregunta de si tiene
    trabajo o no, donde se tendrá que responder con un checkbox.

    Paso 1: Creamos una carpeta que contendrá nuestro html en la ruta C:\xampp\htdocs
    ESCUELA ACADÉMICA PROFESIONAL DE
    INGENIERÍA DE SISTEMAS

    Paso 2: Crear un HTML

    Iniciamos creando un HTML llamado ejercicio1.html donde dentro del <body></body>


    creando un <div></div> que se utiliza para anidar (es decir, que una división puede contener
    otras divisiones), por lo que se utiliza para estructurar en bloques el contenido de la página
    web

    Luego creamos las etiquetas <form> y </form> donde dentro de ellas, se agregan todos los
    atributos necesarios para dar estructura al formulario, los cuales son:

    Action: especifica la acción asociada al formulario.

    Method: indica el método de acceso de la acción del formulario.

    Ahora dentro del form irán nuestras etiquetas que utilizaremos que son:

    <input></input> que cuenta con diferentes tipos de entrada por ejemplo:

     Texto: se expresa como <input type=text> y es por defecto la entrada de una sola
    línea.
     Caja de selección: se expresa como <input type=checkbox> y sirve para representar
    opciones como «Sí/No».
     Botón de envío: se expresa como <input type=submit> y representa la opción de lo
    que tiene que hacer el usuario, que es, en este caso, enviar el formulario.
     Email: Los elementos <input> de tipo email se utilizan para permitir que el usuario
    ingrese y edite una dirección de correo electrónico

    <select ></select> representa un control que muestra un menú de opciones. Las opciones
    contenidas en el menú son representadas por elementos <option>
    ESCUELA ACADÉMICA PROFESIONAL DE
    INGENIERÍA DE SISTEMAS

    Paso 2: Guardamos y ejecutar el html.


    ESCUELA ACADÉMICA PROFESIONAL DE
    INGENIERÍA DE SISTEMAS

    Arrays:
    Un array es un conjunto de variables de una misma clase. Se accede a cada elemento
    individual del array mediante un número entero denominado índice. 0 es el índice o
    localizador del primer elemento y n-1 es el índice del último elemento, siendo n la
    dimensión, tamaño o longitud del array. Así $Fruta[2] representaría a la fruta con
    localizador 2 como veremos a continuación.

    Ejemplo 2: Crea un Arrays simple que guarde información sobre frutas


    utilizando lenguaje php y luego muestra el array.

    Paso1: creamos el folder llamado S2-Ejemplo2


    ESCUELA ACADÉMICA PROFESIONAL DE
    INGENIERÍA DE SISTEMAS

    Paso 2: creamos 1 php llamado ejercicio2.php

    Paso 3: Creemos un array usando lenguaje php


    ESCUELA ACADÉMICA PROFESIONAL DE
    INGENIERÍA DE SISTEMAS

    Paso 4: Ahora mostremos los datos del array

    Paso 5: guardamos y ejecutamos el problema


    ESCUELA ACADÉMICA PROFESIONAL DE
    INGENIERÍA DE SISTEMAS

    CSS: es un mecanismo complementario del lenguaje HTML que


    permite indicarle al navegador el estilo que debe darle a los distintos
    elementos al desplegar la información de un sitio web.

    Ejemplo 3: Crear unas series de <div> que estén pintados, posisionarlos de


    forma desordenada y superpuestos entre ellos.

    PASO 1: creamos carpeta llamada S2-Ejemplo3 y creamos el html llamado Ejercicio3.html y un


    css llamado css.css

    PASO 2: Creamos los <div> y le añadimos el atributo class para poder llamarlo en el css y
    hacemos y usamos la etiqueta <LINK> para llamar al css y con TYPE especificamos que tipo el
    tipo de medio que llamamos. La etiqueta <LINK> debe ir dentro de la cabecera <head>.
    ESCUELA ACADÉMICA PROFESIONAL DE
    INGENIERÍA DE SISTEMAS

    PASO 3. Ingresamos al CSS e ingresamos los diseños a implementar.

    Comenzamos llamando a la etiqueta <div> para añadirle un diseño total a cada <div> donde
    utilizamos posición absolute para establecer de forma exacta la posición en la que se muestra
    la caja de un elemento. La nueva posición de la caja se indica mediante las propiedades top,
    right, bottom y left que veremos a continuación. El border se utiliza para darle un grosos y un
    color al borde de los <div>.

    En la siguiente especificamos que <div> queremos agarrar “div.bloque1” donde le añadimos


    color a todo el <div> usando background-color donde podremos especificar el color que
    deseemos
    ESCUELA ACADÉMICA PROFESIONAL DE
    INGENIERÍA DE SISTEMAS

    Elegimos su altura y anchura utilizando width y height

    Luego ingresamos la posición en donde queremos ubicarla utilizando top, right, bottom y left
    ESCUELA ACADÉMICA PROFESIONAL DE
    INGENIERÍA DE SISTEMAS

    Y finalmente para poder superponerlos entre ellos usamos z-index que indica el orden de un
    elemento posicionado y sus descendientes. Cuando varios elementos se superponen, los
    elementos con mayor valor z-index cubren aquellos con menor valor.
    ESCUELA ACADÉMICA PROFESIONAL DE
    INGENIERÍA DE SISTEMAS

    Ahora hacemos lo mismo con los demás <div> dándole valores diferentes para poder
    diferenciarlos.

    PASO 4: GUARDAMOS Y EJECUTAMOS


    ESCUELA ACADÉMICA PROFESIONAL DE
    INGENIERÍA DE SISTEMAS

    TAREA LABORATIRIO 2

    PROBLEMA 1:
    Realizar la siguiente tabla
    ESCUELA ACADÉMICA PROFESIONAL DE
    INGENIERÍA DE SISTEMAS

    PROBLEMA 2:
    Almacena en un array los primeros 10 números impares e imprímelo cada uno de ellos
    en una sola línea.

    También podría gustarte