Scribd
Upload
2 views

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

The document outlines exercises and homework for the 'HTML and CSS' course at SoftUni, detailing the creation of various web pages with specific constraints and requirements. Each exercise includes the creation of HTML and CSS files, along with guidelines on the use of HTML tags and styling. Students are required to submit their solutions through the SoftUni judge system.

Uploaded by

kalitalareworld2020
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
2 views

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

The document outlines exercises and homework for the 'HTML and CSS' course at SoftUni, detailing the creation of various web pages with specific constraints and requirements. Each exercise includes the creation of HTML and CSS files, along with guidelines on the use of HTML tags and styling. Students are required to submit their solutions through the SoftUni judge system.

Uploaded by

kalitalareworld2020
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 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