HTML – Introduction

Решения на задачите от лекция „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&trade; </h1>
		</header>
		<section>
			<p>Runners Home &trade; 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>&copy; 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>

Оставете коментар

Вашият имейл адрес няма да бъде публикуван. Задължителните полета са отбелязани с *