Scribd Logo
Importer

Bienvenue sur Scribd !

  • Yerko ProyectoHTML1.Rar

    Transféré par

    yerko
    18 vues10 pages
    PROYECTO

    Copyright

    © © All Rights Reserved

    Formats disponibles

    DOCX, PDF, TXT ou lisez en ligne sur Scribd

    Avez-vous trouvé ce document utile ?

    Ce contenu est-il inapproprié ?

    Signaler ce document
    PROYECTO

    Droits d'auteur :

    © All Rights Reserved
    Téléchargez comme DOCX, PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    18 vues10 pages

    Yerko ProyectoHTML1.Rar

    Transféré par

    yerko
    PROYECTO

    Droits d'auteur :

    © All Rights Reserved
    Téléchargez comme DOCX, PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    sur 10

    PROYECTO FINAL

    Nombre Alumno

    YERKO MAURICIO LEMUS SUERO

    Nombre Asignatura

    PROGRAMACIÓN HTML I

    Instituto IACC

    Ponga la fecha aquí

    16 DE ABRIL DEL 2018


    DESARROLLO PROYECTO FINAL

     Principalmente se debe tener activado el servidor Apache como


    muestra la siguiente imagen.

     Luego se ingresa a Kompozer y se proceden a crear las carpetas y


    subcarpetas solicitadas, esta estructura queda como la siguiente
    imagen:
    PRIMERO: En el archivo Index se debe crear la estructura de frames
    como muestra el siguiente código:

    Funciones utilizadas:
     Frameset rows
     Bordercolor
     Margenes(ancho y alto)
     Nombres de frames

    <html>

    <head>

    </head>

    <frameset rows="15%,*" bordercolor="grey" >

    <frame name="frame titulo" src="C:\xampp\htdocs\Proyecto\titulo.html"


    marginwidth="10" marginheight="10" scrolling="auto" >

    <frameset cols="20%,*" bordercolor="grey" >

    <frame name="frame1" src="C:\xampp\htdocs\Proyecto\menu.html" marginwidth="10"


    marginheight="10" scrolling="auto" >

    <frame name="frame2" src="C:\xampp\htdocs\Proyecto\Contenido\inicio.html"


    marginwidth="10" marginheight="10" scrolling="auto" >

    </frameset>

    </html>

    SEGUNDO: Se trabaja en el archivo “titulo.html”, en este se utilizan


    funciones de:
     Alineación arriba a la izquierda ( align)
     Formato titulo tipo 1 ( H1)
     Color de fuente blanco(Font color)
     Negrita (strong)
     Fuente tipo arial (Font face)

    El código se aprecia en la siguiente imagen:

    El resultado visual de titulo.html es el siguiente

    TERCERO: Se procede a modificar el archivo “inicio.html”, las funciones


    utilizadas son:
     Fondo color celeste (Background-color rgb=12,182,242)
     Invocación de fotografía ( source =src)
     Centralización de fotografía (align)
     Dimensiones de la fotografía 200px200p (height, width)
     Centrar nombre en letra arial( align , Font Face)
     Otras.
    La siguiente imagen muestra la estructura del código:

    El resultado visual del archivo inicio.html es el siguiente:

    Nota: notar la ubicación del archivo la cual es la solicitada por el


    enunciado.
    CUARTO: Se trabaja en el archivo “menú.html” las funciones utilizadas
    son las siguientes para lograr el objetivo:

     Generación de tabla con 3 filas y una columna (Table function,


    elementos de tabla TR para cada fila y TD para cada columna)
     Color de Fondo Azul oscuro ósea su formato computacional es
    RGB(51,91,255)
     Creación de Hipervínculos (funciones “a” y “href” )
     Otras(border=1) marczr borde

    El resultado visual es el siguiente:


    QUINTO: Se trabaja en la página ficha.html las funciones utilizadas son
    las siguientes:

     Formatos de texto en Times new roman


     Listas ordenadas para el ingreso de datos ( Order List :OL)
     Union de Celdad con COLSPAN=2
     Anchos de celdas para dar el tamaño solicitado
     Vertical alineación (VALIGN) para mover el nombre
     Funciones de Tablas

    El código en HTML se puede apreciar en el siguiente cuadro


    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">

    <html>

    <head>

    <meta http-equiv="content-type"

    content="text/html; charset=ISO-8859-1">

    <title>ficha</title>

    </head>

    <body>

    <table style="width: 356px; height: 142px;" border="1">


    <tbody>

    <tr style="font-family: Times New Roman;">

    <td colspan="2" width="200">FICHA

    </td>

    </tr>

    <tr>

    <td style="font-family: Times New Roman;" width="500">Nombre

    cientifico</td>

    <td style="font-family: Times New Roman;" width="2000"><br>

    pato correntino o pato forzudo</td>

    </tr>

    <tr>

    <td style="font-family: Times New Roman;">Hábitat</td>

    <td style="font-family: Times New Roman;">ríos

    torrentosos con rocas y pozas.

    </td>

    </tr>

    <tr>

    <td style="font-family: Times New Roman;">Morfologia</td>

    <td style="font-family: Times New Roman;">Es de

    color negro bajo los ojos, las mejillas, la garganta y el cuello. Los

    lados y el pecho son de color negro y el pecho de color pardo con

    rayitas negras. El color de su abdomen también es pardo con rayas de

    color negro. La hembra tiene la parte posterior de la cabeza y cuello

    de color gris. Las plumas marginales son grises y los escapulares y

    manto son de color negro.</td>

    </tr>

    <tr>

    <td style="font-family: Times New Roman;" height="100"

    valign="top" width="500">Dieta</td>

    <td style="font-family: Times New Roman;">


    <ol>

    <li>Vegetales</li>

    <li>pequeños peces</li>

    <li>Larvas</li>

    <li>Crustaceos</li>

    </ol>

    </td>

    </tr>

    </tbody>

    </table>

    <br>

    </body>

    </html>

    El resultado visual es el siguiente


    FINALMENTE: Una vez con todos los archivos respectivos llenados se
    procede a ejecutar el archivo principal INDEX.HTML, el resultado es el
    siguiente:

     Notar que si se presiona el hipervínculo FICHA es actualizado la


    ficha como muestra la siguiente imagen:

    Vous aimerez peut-être aussi