Scribd Logo
Hochladen

Willkommen bei Scribd!

  • Alvaro - Figueroa Tarea5

    Hochgeladen von

    Alvaro Figueroa
    652 Ansichten10 Seiten
    El documento describe cómo se diseñó el formato de un libro digital a partir de código HTML y CSS existente. Se eliminó el estilo en el código HTML, se agregó un enlace a un archivo CSS externo, y se definieron reglas CSS para configurar los estilos de elementos como el cuerpo, los divs, los capítulos y los párrafos. Esto permitió visualizar el diseño del libro digital según lo solicitado.

    Originalbeschreibung:

    Originaltitel

    Alvaro_Figueroa tarea5

    Copyright

    © © All Rights Reserved

    Verfügbare Formate

    DOCX, PDF, TXT oder online auf Scribd lesen

    Stufen Sie dieses Dokument als nützlich ein?

    Sind diese Inhalte unangemessen?

    Dieses Dokument melden
    El documento describe cómo se diseñó el formato de un libro digital a partir de código HTML y CSS existente. Se eliminó el estilo en el código HTML, se agregó un enlace a un archivo CSS externo, y se definieron reglas CSS para configurar los estilos de elementos como el cuerpo, los divs, los capítulos y los párrafos. Esto permitió visualizar el diseño del libro digital según lo solicitado.

    Copyright:

    © All Rights Reserved
    Als DOCX, PDF, TXT herunterladen oder online auf Scribd lesen
    Markieren Sie unangemessene Inhalte
    652 Ansichten10 Seiten

    Alvaro - Figueroa Tarea5

    Hochgeladen von

    Alvaro Figueroa
    El documento describe cómo se diseñó el formato de un libro digital a partir de código HTML y CSS existente. Se eliminó el estilo en el código HTML, se agregó un enlace a un archivo CSS externo, y se definieron reglas CSS para configurar los estilos de elementos como el cuerpo, los divs, los capítulos y los párrafos. Esto permitió visualizar el diseño del libro digital según lo solicitado.

    Copyright:

    © All Rights Reserved
    Als DOCX, PDF, TXT herunterladen oder online auf Scribd lesen
    Markieren Sie unangemessene Inhalte
    von 10

    Título de la tarea

    Nombre Alumno

    Nombre Asignatura

    Instituto IACC

    Ponga la fecha aquí


    Desarrollo

    Un importante autor le solicita que realice el diseño de su nuevo libro, el que se alojará en

    formato digital.- Por lo anterior, le ha pedido una pequeña demostración de cómo se

    visualizará.- Para ello, le entrega el código que realizó otra persona, la que no fue

    responsable y por tanto, no finalizó el prototipo.-

    - A partir del código HTML proporcionado que se presenta aquí:

    Para comenzar mostraré el resultado del trabajo para luego detallar como lo realicé y sus

    respectivos códigos:

     Primero, en el código HTML retiramos el comando style, ya que no se utilizará en

    HTML por que pasará por medio de un archivo CSS.-


    <style type="text/css">

    </style>

     Ahora se escribe el siguiente script para realizar el llamado al archivo CSS ya creado, en

    este caso reglas.css

    <link rel="stylesheet" href="reglas.css">

     Luego, se determinan las reglas CSS para el código HTML, donde hay una regla general

    para el CSS especificando el margin y el padding de la página eliminándolo por

    completo:

    *{margin: 0;padding: 0;}

     En body, determinamos que tendrá un magen inzquiero de 10px. Y el margen derecho

    10px., determinando el color de fondo con #232d2e:

    body{

    margin-left: 10px;

    margin-right: 10px;

    background-color: #232d2e;

     Ahora se configura el div detallando el margen, el color, su letra y el tamaño de ésta:

    div{

    margin-top: 10px;
    color: #dfdfdf;

    border: solid 30px;

    font-family: arial black;

    font-size: 17px;

     Se configuran los capítulos que se encuentran dentro del DIV, siendo llamados desde su

    clase determinada en el código HTML:

    <span class="cap1">&laquo; Capítulo 1</span>

    <span class="cap3">&nbsp; Capítulo 3 &raquo;</span>

     Ahora se configura CSS de la siguiente forma:

    .cap1{

    margin-top: -8px;

    color: black;

    float: left;

    .cap3{

    margin-top: -8px;

    color: black;

    float: right;

    }
     Para finalizar, se configuran los párrafos ejecutados en HTML:

    <p class="parrafo1">Capítulo dos</p>

    <p>Este es el contenido del capítulo 2 de este interesante libro </p>

    <p>Verás que es tan interesante como el primero</p>

    p{

    margin-top: 20px;

    font-family: arial;

    font-size: 25px;

    color: darkgreen;

    .parrafo1{

    font-family: arial;

    font-size: 30px;

    color: blue;

     Los códigos finales quedan de la siguiente manera:

    CSS archivo: reglas.css

    *{margin: 0;padding: 0;}

    body{

    margin-left: 10px;

    margin-right: 10px;

    background-color: #232d2e;
    }

    div{

    margin-top: 10px;

    color: #dfdfdf;

    border: solid 30px;

    font-family: arial black;

    font-size: 17px;

    .cap1{

    margin-top: -8px;

    color: black;

    float: left;

    .cap3{

    margin-top: -8px;

    color: black;

    float: right;

    p{

    margin-top: 20px;

    font-family: arial;

    font-size: 25px;

    color: darkgreen;

    }
    .parrafo1{

    font-family: arial;

    font-size: 30px;

    color: blue;

    }
    HTML archivo: ejemplo.html

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>

    <meta http-equiv=”Content-Type” content=”text/html; charset=ISO-8859-1″ />

    <title>Tarea Semana 5</title>

    <link rel="stylesheet" href="reglas.css">

    </head>

    <body>

    <div class="cap">

    <span class="cap1">&laquo; Capítulo 1</span>

    <span class="cap3">&nbsp; Capítulo 3 &raquo;</span>

    </div>

    <p class="parrafo1">Capítulo dos</p>

    <p>Este es el contenido del capítulo 2 de este interesante libro </p>

    <p>Verás que es tan interesante como el primero</p>

    </body>

    </html>
    Bibliografía

    IACC (2020). Hojas de estilo en cascada (CSS) II . Programación Web I. Semana 5.

    Modelo de caja CSS. https://devcode.la/tutoriales/modelo-caja-css/

    Curso básico de selectores CSS. https://www.youtube.com/watch?

    v=uqkj7HQ7ids&feature=youtu.be

    Das könnte Ihnen auch gefallen