HTML Basics


Това е първата домашна от HTML5 трака към Софтуерната Академия на Телерик.
Задача 1. Simple Page :

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<title>Simple Page</title>
		<meta name="description" content="homework" />
		<meta name="author" content="Teodor" />
		<meta name="viewport" content="width=device-width; initial-scale=1.0" />
	</head>

	<body>
		<div>
			<header>
				<p>
					Hello, Stranger!
				</p>
				<h1>Welcome to Runners Home™</h1>
			</header>
			<div>
				<p>
					Runners Home™ is dedicated to provideing you with
				</p>
				- the moste up-to-date information on running races
				<br/>
				- the best resources for runners
			</div>
			<hr>
			<footer>
				<p>
					© Runners Home. All rights reserved.
				</p>
			</footer>
		</div>
	</body>
</html>

Задача 2. Nested Lists :

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<title>Simple Page</title>
		<meta name="description" content="homework" />
		<meta name="author" content="Teodor" />
		<meta name="viewport" content="width=device-width; initial-scale=1.0" />
	</head>

	<body>
		<div>
			<p>
				Presseeding 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="disc">
								<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>
						<li>
							Nested Item 3.1
						</li>
						<li>
							Nested Item 3.2
						</li>
						<li>
							Nested Item 3.3
						</li>
					</ul>
				</li>
			</ol>
		</div>
	</body>
</html>

Задача 3. Web Profile:
Friends section:

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
		Remove this if you use the .htaccess -->
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<title>Friends</title>
		<meta name="description" content="homework" />
		<meta name="author" content="Teodor" />
		<meta name="viewport" content="width=device-width; initial-scale=1.0" />
		<link href="style/style.css" rel="stylesheet" type="text/css" />
	</head>

	<body>
		<div>
			<header>
				<h1>Friends</h1>
			</header>

			<nav>
				<a id="first" href="Profile.html">Profile</a>
				<a href="#">Friends</a>
				<a href="Info.html">Additional information</a>
			</nav>

			<div>
				<hr/>
				<h3><em>Additional Information about Doncho</em></h3>
				<hr/>
				<ol>
					<li>
						<dl>
							<dt>
								<em>Pesho Ivanov</em>
							</dt>
							<dd>
								Student
							</dd>
						</dl>
					</li>
					<li>
						<dl>
							<dt>
								<em>Vankata</em>
							</dt>
							<dd>
								Software developer
							</dd>
						</dl>
					</li>
					<li>
						<dl>
							<dt>
								<em>Bai Gosho</em>
							</dt>
							<dd>
								System admin
							</dd>
						</dl>
					</li>
				</ol>
			</div>
		</div>
	</body>
</html>

Information section:

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<title>Info</title>
		<meta name="description" content="homework" />
		<meta name="author" content="Teodor" />
		<meta name="viewport" content="width=device-width; initial-scale=1.0" />
		<link href="style/style.css" rel="stylesheet" type="text/css" />
	</head>

	<body>
		<div>
			<header>
				<h1><em>Additional information about Doncho </em></h1>
			</header>
			<nav>
				<a id="first" href="Profile.html">Profile</a>
				<a href="Friends.html">Friends</a>
				<a href="#">Additional information</a>
			</nav>

			<div>
				<hr/>
				<h3>Frends of Doncho</h3>
				<hr/>
			</div>

			<div>
				<em>Student at <a href="#">Sofia University</a>
				<br />
				Born in Burgas
				<br />
				Living in Sofia
				<br />
				Working at <a href="#">Telerik</a></em>
			</div>

		</div>
	</body>
</html>

Profile section:

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<title>Profile</title>
		<meta name="description" content="homework" />
		<meta name="author" content="Teodor" />
		<meta name="viewport" content="width=device-width; initial-scale=1.0" />
		<link href="style/style.css" rel="stylesheet" type="text/css" />
	</head>

	<body>
		<div>
			<header>
				<h1>Profile</h1>
			</header>
			<nav>
				<a id="first" href="#">Profile</a>
				<a href="Friends.html">Friends</a>
				<a href="Info.html">Additional information</a>
			</nav>
			<div>
				<hr/>
				<h3>Profile of Doncho</h3>
				<hr/>
			</div>
			<div>
				<img src="http://www.vnvlvokc.com/ow_userfiles/plugins/shoppro/images/product_1.jpg" alt="Testing image" width="50px" height="50px"/>
			</div>
			<div>
				<p>
					Name: Doncho Minkov
				</p>
				<p>
					Birthday: 22 June 1989
				</p>
				<p>
					Occupation: Student
				</p>
				<p>
					Area of occupation: IT
				</p>
			</div>
		</div>
	</body>
</html>

И накрая малко CSS за вкус към 3тата задача:

body 
{
	background-color: #ccecff;
}
nav > a
{
	margin-left: 100px;
}
#first
{
	margin: 0;
}

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s