Scribd Logo
Cargar

¡Te damos la bienvenida a Scribd!

  • 01 Código HTML Proporcionado

    Cargado por

    Cristian Montecinos
    10 vistas10 páginas
    iacc

    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?

    Denunciar este documento
    iacc

    Copyright:

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

    01 Código HTML Proporcionado

    Cargado por

    Cristian Montecinos
    iacc

    Copyright:

    © All Rights Reserved
    Descargue como PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    de 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

    También podría gustarte