Решения на задачите от лекция „Html introduction“
Задача 1
<!DOCTYPE html>
<html>
<head>
<title>Runners Home</title>
<meta charset="UTF-8">
<style type="text/css">
li:before
{
content:"- ";
}
ul
{
list-style-type:none;
padding-left: 0px;
}
</style>
</head>
<body>
<header>
Hello, Stranger!
<h1>Welcome to Runners Home™ </h1>
</header>
<section>
<p>Runners Home ™ is dedicated to providing you with:</p>
<ul>
<li>the most up-to-date information on running races</li>
<li>the best resources for runners</li>
</ul>
</section>
<hr>
<footer>
<p>© 2007 Runners home. All rights reserved</p>
</footer>
</body>
</html>
Задача 2
<!DOCTYPE html> <html> <head> <title>Lists</title> <meta charset="UTF-8"> </head> <body> <section> <p>Preceding Text:</p> <ol type="I"> <li>List Item 1 <ol type="a"> <li>Nested Item 1.1</li> <li>Nested Item 1.2</li> </ol> </li> <li>List Item 2 <ol> <li>Nested Item 2.1</li> <li>Nested Item 2.2 <ul type="circle"> <li>Nested Item 2.2.1</li> <li>Nested Item 2.2.2 <ul type="square"> <li>Nested Item 2.2.2.1</li> <li>Nested Item 2.2.2.2</li> </ul> </li> <li>Nested Item 2.2.3</li> </ul> </li> <li>Nested Item 2.3</li> </ol> </li> <li>List Item 3 <ul type="disc"> <li>Nested Item 3.1</li> <li>Nested Item 3.2</li> <li>Nested Item 3.3</li> </ul> </li> </ol> </section> </body> </html>
Задача 3
a. Profile
<!DOCTYPE html>
<html>
<head>
<title>Profile</title>
<meta charset="UTF-8">
<style>
#friends
{
position:relative;
left:100px;
}
#info
{
position:relative;
left:200px;
}
</style>
</head>
<body>
<header>
<a href="Profile.html">Profile</a>
<a id="friends" href="Friends.html">Friends</a>
<a id="info" href="Info.html">Additional Information</a>
<hr>
<h1>
<i>Profile of Doncho</i>
</h1>
<hr>
</header>
<section>
<img src="Doncho.jpg" alt="Profile picture">
<p>
<strong>Name : Doncho Minkov</strong>
</p>
<p>
<strong>Birthday : 22.June.1989</strong>
</p>
<p>
<strong>Ocupation : Student</strong>
</p>
<p>
<strong>Area of ocupation : IT</strong>
</p>
</section>
</body>
</html>
b. Friends
<!DOCTYPE html>
<html>
<head>
<title>Friends</title>
<meta charset="UTF-8">
<style type="text/css">
ul
{
list-style-type:none;
}
#friends
{
position:relative;
left:100px;
}
#info
{
position:relative;
left:200px;
}
</style>
</head>
<body>
<header>
<a href="Profile.html">Profile</a>
<a id="friends" href="Friends.html">Friends</a>
<a id="info" href="Info.html">Additional Information</a>
<hr/>
<h1>
<i>Friends of Doncho</i>
</h1>
<hr/>
</header>
<section>
<ol>
<li><i>Pesho Ivanov</i>
<ul>
<li>Student</li>
</ul>
</li>
<li><i>Vankata</i>
<ul>
<li>Software developer</li>
</ul>
</li>
<li><i>Bai Gosho</i>
<ul>
<li>System admin</li>
</ul>
</li>
</ol>
</section>
</body>
</html>
c. Additional Information
<!DOCTYPE html>
<html>
<head>
<title>Additional information</title>
<meta charset="UTF-8">
<style>
#friends
{
position:relative;
left:100px;
}
#info
{
position:relative;
left:200px;
}
</style>
</head>
<body>
<header>
<a href="Profile.html">Profile</a>
<a id="friends" href="Friends.html">Friends</a>
<a id="info" href="Info.html">Additional Information</a>
<hr>
<h1>
<i>Additional Information about Doncho</i>
</h1>
<hr>
</header>
<section>
<p>
<i>Student of <a href="http://www.uni-sofia.bg/">Sofia University</a></i>
</p>
<p>
<i>Born in Burgas</i>
</p>
<p>
<i>Living in Sofia</i>
</p>
<p>
<i>Working at <a href="http://www.telerik.com/">telerik</a></i>
</p>
</section>
</body>
</html>