Scribd Logo
Upload

Welcome to Scribd!

  • 48 views

    HTML-CSS-Overview-Exercise-and-Homework

    Uploaded by

    Ivailo Ivanov

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd

    HTML-CSS-Overview-Exercise-and-Homework

    Uploaded by

    Ivailo Ivanov
    48 views6 pages

    Original Title

    01. HTML-CSS-Overview-Exercise-and-Homework

    Copyright

    © © All Rights Reserved

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Download as docx, pdf, or txt
    48 views6 pages

    HTML-CSS-Overview-Exercise-and-Homework

    Uploaded by

    Ivailo Ivanov

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Download as docx, pdf, or txt
    of 6

    Exercises: HTML and CSS Overview

    Problems for exercises and homework for the “HTML and CSS” course @ SoftUni. Submit your solutions in the
    SoftUni judge system at https://judge.softuni.bg/Contests/394/HTML-and-CSS-Overview .

    1. My First Page
    Create a Web Page like the following.

    Create “my-first-page.html”

    Constraints
     <h1> tag for heading
     <p> tag for paragraph

    2. Definition Lists
    Create a Web Page like the following.

    © Software University Foundation (softuni.org). This work is licensed under the CC-BY-NC-SA license.

    Follow us: Page 1 of 6


    Create “definition-lists.html”

    Constraints
     <h2> tag for heading
     <dl> tag for definition list

    3. Reversed List
    Create a Web Page like the following.

    Create two files: “reversed-list.html” and “reversed-list.css”

    © Software University Foundation (softuni.org). This work is licensed under the CC-BY-NC-SA license.

    Follow us: Page 2 of 6


    Constraints
     <div> with id=wrapper as a container
    o Background color: #dddddd
    o Text color: #95191a
    o Width container: 300px
    o Border: 1px solid #000000

    Hints
    Use:
     <ol> with reversed attribute
    o <ol reversed="reversed">
     Submit only reversed-list.html + reversed-list.css in ZIP file

    4. The Runners Home


    Create a Web Page like the following using Runners-Home.txt.

    Create two files: “runners-home.html” and “runners-home.css”

    Constraints
     <div> with id=wrapper as a container
    o Background color: #5bc0de

    Hints
    Use:
     <h1> and <h2> tags for headings
     <sup> tag for superscript text
     <p> tag for paragraphs and <span> for Hello, Stranger!
     <ul> tag for list items

    © Software University Foundation (softuni.org). This work is licensed under the CC-BY-NC-SA license.

    Follow us: Page 3 of 6


     <hr /> for horizontal line
     <footer> tag for copyright part + &copy; for copy right symbol

    5. Book Story
     Create a Web Page like the following using Book-Story.txt.

    Create two files: “book-story.html” and “book-story.css”

    Constraints
     <div> with id=wrapper as a container
    o Width container: 400px
    o Background color: #dddddd
    o Border: 1px solid #000000
    o Margin Left: 20px
    o Padding: 10px
     <p> tag for paragraph + font-size: 18px
     <em> tag for italic text

    Hints
    Use:

    © Software University Foundation (softuni.org). This work is licensed under the CC-BY-NC-SA license.

    Follow us: Page 4 of 6


     <h1> tag for heading + center the text
     <q> tag for quotation text
    o q::before {
    content: open-quote;
    }
    o q::after {
    content: close-quote;
    }

    6. *World Cup News


    Create a Web Page like the following using World-Cup-News.txt.

    Create two files: “world-cup-news.html” and “world-cup-news.css”

    © Software University Foundation (softuni.org). This work is licensed under the CC-BY-NC-SA license.

    Follow us: Page 5 of 6


    Constraints
     <div> with id= "wrapper" as a container
    o Width container: 700px
    o Height container: 730px
    o Border: 1px solid #000000
    o Center the container
    o Padding: 10px
    o Background color: #a6e1ec
     <h1> and <h2> tags for headings
     <p> tag for paragraph
     <strong> tag for bold text
     <em> tag for italic text
     <img> tag for images
    o Width: 200px
    o Margin Right: 10px
    o Vertical Align: middle
     <span class= "text"> for the text next to images
    o Text color: #2EA620
     <li> tag
    o Width: 520px
    o Padding: 10px
    o Margin Bottom: 5px
    o Font Size: 14px
    o Border: 1px solid #000000

    © Software University Foundation (softuni.org). This work is licensed under the CC-BY-NC-SA license.

    Follow us: Page 6 of 6

    You might also like