Домашни от Лекцията за Семантичен HMTL

Моите решения задачите от тази лекция.



HTML forms'n frames домашни

В този пост ще публикувам моите решения на задачите от лекцията за HTML формите.
Задача 1. Web Form:

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<title>01. WebForm</title>
		<meta name="description" content="" />
		<meta name="author" content="Teodor" />
		<meta name="viewport" content="width=device-width; initial-scale=1.0" />
	</head>

	<body>
		<form action="" method="post">
			<table border="1">
				<tr>
					<td><label for="lname">Last Name</label></td>
					<td colspan="3">
					<input type="text" id="lname" placeholder="Kurtev"/>
					</td>
				</tr>
				<tr>
					<td><label for="fname">First Name</label></td>
					<td colspan="3">
					<input type="text" id="fname" placeholder="Teodor"/>
					</td>
				</tr>
				<tr>
					<td><label for="addres">Addres</label></td>
					<td colspan="3">					<textarea id="addres" cols="30" rows="5" placeholder="Some addres here"></textarea></td>
				</tr>
				<tr>
					<td><label for="city">City</label></td>
					<td>
					<input type="text" id="city" placeholder="Sofia"/>
					</td>
					<td><label for="state">State</label></td>
					<td>
					<input type="text" id="state" size="3"/>
					</td>
				</tr>
				<tr>
					<td><label for="zipCode">Zip/Postal Code</label></td>
					<td colspan="3">
					<input type="text" id="zipCode" placeholder="123456"/>
					</td>
				</tr>
				<tr>
					<td><label for="country">Country</label></td>
					<td colspan="3">
					<select name="country" id="country">
						<option value="Bulgaria" selected="selected">Bulgaira</option>
						<option value="Macedonia">Macedonia</option>
						<option value="USA">USA</option>
					</select></td>
				</tr>
				<tr>
					<td><label for="phone">Phone (country code, area code, number)</label></td>
					<td colspan="3">
					<p>
						(+
						<input type="text" id="phone" size="3" placeholder="359"/>
						)
						<input type="text" placeholder="88" size="3"/>
						-
						<input type="number" placeholder="8334343"/>
					</p></td>
				</tr>
				<tr>
					<td><label for="mail">E-mail</label></td>
					<td colspan="3">
					<input type="email" id="mail" placeholder="mymail@somethin.com"/>
					</td>
				</tr>
				<tr>
					<td align="right"><label for="month">Birth date</label></td>
					<td colspan="3"><label for="month">Month</label>
					<input type="text" id="month" placeholder="06" size="2"/>
					<label for="day">Day</label>
					<input type="text" id="day" placeholder="14" size="2"/>
					<label for="year">Year (4 digit)</label>
					<input type="text" id="year" placeholder="1980" size="4">
					</td>
				</tr>
				<td align="right"><label for="gender">Gender</label></td>
				<td colspan="3">
				<select name="gender" id="gender">
					<option value="male" selected="selected">Male</option>
					<option value="female">Female</option>
				</select></td>
				<tr>
					<td><label for="opt1">Starting date</label></td>
					<td colspan="3">
					<input id="opt1" type="radio" value="spr06" name="opt1"/>
					<label for="opt1">Spring 2006</label>
					<input id="opt2" type="radio" value="sum06" name="opt2"/>
					<label for="opt2">Summer 2006</label></td>
				</tr>
				<tr>
					<td><label for="info">Comments/Questions</label></td>
					<td colspan="3"><textarea name="" id="info" cols="30" rows="10" placeholder="Please send me more information about the loding."></textarea></td>
				</tr>
				<tr>
					<td colspan="4">
					<input type="submit" value="Submit" name="submit"/>
					<input type="reset" value="Clear This Form" name="reset"/>
					</td>
				</tr>
			</table>
		</form>
	</body>
</html>

Задача 2. Grade Sheet:

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<title>02. GradeSheet</title>
		<meta name="description" content="" />
		<meta name="author" content="Teodor" />
		<meta name="viewport" content="width=device-width; initial-scale=1.0" />
	</head>

	<body>
		<table border="1">
			<thead>
				<tr>
					<th rowspan="2">Order</th>
					<th colspan="3">Personal Info</th>
					<th colspan="5">Uni Marks</th>
				</tr>
				<tr>
					<th>First Name</th>
					<th>Last Name</th>
					<th>Faculty Number</th>
					<th>English</th>
					<th>Math</th>
					<th>Biology</th>
					<th>Physics</th>
					<th>Total</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>1</td>
					<td>Teodor</td>
					<td>Kurtev</td>
					<td>111119999</td>
					<td>6</td>
					<td>6</td>
					<td>6</td>
					<td>6</td>
					<td>6</td>
				</tr>
				<tr>
					<td>2</td>
					<td>Teodor</td>
					<td>Kurtev</td>
					<td>111119999</td>
					<td>6</td>
					<td>6</td>
					<td>6</td>
					<td>6</td>
					<td>6</td>
				</tr>
				<tr>
					<td>3</td>
					<td>Teodor</td>
					<td>Kurtev</td>
					<td>111119999</td>
					<td>6</td>
					<td>6</td>
					<td>6</td>
					<td>6</td>
					<td>6</td>
				</tr>
				<tr>
					<td>4</td>
					<td>Teodor</td>
					<td>Kurtev</td>
					<td>111119999</td>
					<td>6</td>
					<td>6</td>
					<td>6</td>
					<td>6</td>
					<td>6</td>
				</tr>
				<tr>
					<td>5</td>
					<td>Teodor</td>
					<td>Kurtev</td>
					<td>111119999</td>
					<td>6</td>
					<td>6</td>
					<td>6</td>
					<td>6</td>
					<td>6</td>
				</tr>
				<tr>
					<td>6</td>
					<td>Teodor</td>
					<td>Kurtev</td>
					<td>111119999</td>
					<td>6</td>
					<td>6</td>
					<td>6</td>
					<td>6</td>
					<td>6</td>
				</tr>
				<tr>
					<td>7</td>
					<td>Teodor</td>
					<td>Kurtev</td>
					<td>111119999</td>
					<td>6</td>
					<td>6</td>
					<td>6</td>
					<td>6</td>
					<td>6</td>
				</tr>
				<tr>
					<td>8</td>
					<td>Teodor</td>
					<td>Kurtev</td>
					<td>111119999</td>
					<td>6</td>
					<td>6</td>
					<td>6</td>
					<td>6</td>
					<td>6</td>
				</tr>
				<tr>
					<td>9</td>
					<td>Teodor</td>
					<td>Kurtev</td>
					<td>111119999</td>
					<td>6</td>
					<td>6</td>
					<td>6</td>
					<td>6</td>
					<td>6</td>
				</tr>
				<tr>
					<td>10</td>
					<td>Teodor</td>
					<td>Kurtev</td>
					<td>111119999</td>
					<td>6</td>
					<td>6</td>
					<td>6</td>
					<td>6</td>
					<td>6</td>
				</tr>
				<tr>
					<td colspan="9">
						<form action="" method="post">
							<input type="button" value="Pervious" />
							<a href="">1</a>,
							<a href="">2</a>,
							<a href="">3</a>,
							<a href="">4</a>,
							.....,
							<a href="">10</a>,
							<input type="button" value="Next" />
						</form>
					</td>
				</tr>
			</tbody>
		</table>
	</body>
</html>

Задача 3. Inventory Table:

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<title>03. ShipingTable</title>
		<meta name="description" content="" />
		<meta name="author" content="Teodor" />
		<meta name="viewport" content="width=device-width; initial-scale=1.0" />
	</head>
	<body>
		<form action="" method="post">
			<table border="1">
				<thead>
					<tr>
						<th colspan="6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras urna nisi, gravida vitae lacinia ac</th>
					</tr>
					<tr>
						<th><label for="input1">Product ID</label></th>
						<th><label for="input2">Product Name</label></th>
						<th><label for="input3">Unit Price</label>
						<input type="image" src="img/9.png" alt="Test img"/>
						</th>
						<th><label for="input4">Quantity per unit</label></th>
						<th><label for="input5">Unit in stock</label>
						<input type="image" src="img/9.png" alt="Test img"/>
						</th>
						<th><label for="input6">Discontinued</label>
						<input type="image" src="img/9.png" alt="Test img"/>
						</th>
					</tr>
				</thead>
				<tfoot>
					<tr>
						<td colspan="6">
						<input type="image" src="img/fullleft.png" alt="fullback">
						<input type="image" src="img/left.png" alt="back">
						<a href="">1</a><a href="">2</a><a href="">3</a><a href="">4</a><a href="">5</a><a href="">6</a><a href="">7</a><a href="">8</a><a href="">9</a><a href="">10</a>...
						<input type="image" src="img/right.png" alt="forward">
						<input type="image" src="img/fullright.png" alt="fullforward">
						Page size:
						<select name="page">
							<option id="value1" value="10" selected="selected">10</option>
							<option id="value2" value="9" >9</option>
							<option id="value3" value="8" >8</option>
						</select></td>
					</tr>
				</tfoot>
				<tbody>
					<tr>
						<td>
						<input type="text" id="input1" />
						</td>
						<td>
						<input type="text" id="input2" />
						</td>
						<td>
						<input type="text" id="input3" />
						</td>
						<td>
						<input type="text" id="input4" />
						</td>
						<td>
						<input type="text" id="input5" />
						</td>
						<td>
						<input type="checkbox" id="input6" />
						</td>
					</tr>
					<tr>
						<td>1</td>
						<td>Chai</td>
						<td>&dollar; 18.00</td>
						<td>10 boxes x 20 bags</td>
						<td>39</td>
						<td>
						<input type="checkbox"/>
						</td>
					</tr>
					<tr>
						<td>2</td>
						<td>Chai</td>
						<td>&dollar; 18.00</td>
						<td>10 boxes x 20 bags</td>
						<td>39</td>
						<td>
						<input type="checkbox"/>
						</td>
					</tr>
					<tr>
						<td>3</td>
						<td>Chai</td>
						<td>&dollar; 18.00</td>
						<td>10 boxes x 20 bags</td>
						<td>39</td>
						<td>
						<input type="checkbox"/>
						</td>
					</tr>
					<tr>
						<td>4</td>
						<td>Chai</td>
						<td>&dollar; 18.00</td>
						<td>10 boxes x 20 bags</td>
						<td>39</td>
						<td>
						<input type="checkbox" checked="checked" disabled="disabled"/>
						</td>
					</tr>
					<tr>
						<td>5</td>
						<td>Chai</td>
						<td>&dollar; 18.00</td>
						<td>10 boxes x 20 bags</td>
						<td>39</td>
						<td>
						<input type="checkbox"/>
						</td>
					</tr>
					<tr>
						<td>6</td>
						<td>Chai</td>
						<td>&dollar; 18.00</td>
						<td>10 boxes x 20 bags</td>
						<td>39</td>
						<td>
						<input type="checkbox"/>
						</td>
					</tr>
					<tr>
						<td>7</td>
						<td>Chai</td>
						<td>&dollar; 18.00</td>
						<td>10 boxes x 20 bags</td>
						<td>39</td>
						<td>
						<input type="checkbox" checked="checked" disabled="disabled"/>
						</td>
					</tr>
					<tr>
						<td>8</td>
						<td>Chai</td>
						<td>&dollar; 18.00</td>
						<td>10 boxes x 20 bags</td>
						<td>39</td>
						<td>
						<input type="checkbox"/>
						</td>
					</tr>
					<tr>
						<td>9</td>
						<td>Chai</td>
						<td>&dollar; 18.00</td>
						<td>10 boxes x 20 bags</td>
						<td>39</td>
						<td>
						<input type="checkbox"/>
						</td>
					</tr>
					<tr>
						<td>10</td>
						<td>Chai</td>
						<td>&dollar; 18.00</td>
						<td>10 boxes x 20 bags</td>
						<td>39</td>
						<td>
						<input type="checkbox"/>
						</td>
					</tr>
				</tbody>

			</table>
		</form>
	</body>
</html>

Забележка: Може да използвате каквито си картинки си поискате на определените за това места в кода.
Задача 4. Apple Table:

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<title>04. AppleTable</title>
		<meta name="description" content="" />
		<meta name="author" content="Teodor" />
		<meta name="viewport" content="width=device-width; initial-scale=1.0" />
	</head>

	<body>
		<form action="" method="post">
		<table border="1">
			<tr>
				<th><a href="">Apple</a><a href="">Toshiba</a><a href="">Lenovo</a><a href="">Dell</a><a href="">Asus</a><a href="">Hacer</a><a href="">HP</a></th>
			</tr>
			<tr>
				<td>
				<table>
					<!-- 2 half table -->
					<tr>
						<td>
						<table border="1">
							<!-- Notebook warper -->
							<tr>
								<td>
								<table>
									<tr>
										<td>
										<fieldset>
											<legend>
												Apple MacBook Air
											</legend>
											<table>
												<tr>
													<td rowspan="2"><img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcS2Z88a6x88EsAl79Qh_bkuZv0QAj8nLDkTgSpZTlYgvpxRQseX" alt="MacBook"/></td><td>64 GB SSD</td>
												</tr>
												<tr>
													<td>2GB DDR</td>
												</tr>
												<tr>
													<td>1300 USD</td><td>Intel Core i5</td>
												</tr>
											</table>
										</fieldset></td>
										<td>
										<fieldset>
											<legend>
												Apple MacBook Air
											</legend>
											<table>
												<tr>
													<td rowspan="2"><img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcS2Z88a6x88EsAl79Qh_bkuZv0QAj8nLDkTgSpZTlYgvpxRQseX" alt="MacBook"/></td><td>64 GB SSD</td>
												</tr>
												<tr>
													<td>2GB DDR</td>
												</tr>
												<tr>
													<td>1300 USD</td><td>Intel Core i5</td>
												</tr>
											</table>
										</fieldset></td>
									</tr>
									<tr>
										<td>
										<fieldset>
											<legend>
												Apple MacBook Air
											</legend>
											<table>
												<tr>
													<td rowspan="2"><img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcS2Z88a6x88EsAl79Qh_bkuZv0QAj8nLDkTgSpZTlYgvpxRQseX" alt="MacBook"/></td><td>64 GB SSD</td>
												</tr>
												<tr>
													<td>2GB DDR</td>
												</tr>
												<tr>
													<td>1300 USD</td><td>Intel Core i5</td>
												</tr>
											</table>
										</fieldset></td>
										<td>
										<fieldset>
											<legend>
												Apple MacBook Air
											</legend>
											<table>
												<tr>
													<td rowspan="2"><img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcS2Z88a6x88EsAl79Qh_bkuZv0QAj8nLDkTgSpZTlYgvpxRQseX" alt="MacBook"/></td><td>64 GB SSD</td>
												</tr>
												<tr>
													<td>2GB DDR</td>
												</tr>
												<tr>
													<td>1300 USD</td><td>Intel Core i5</td>
												</tr>
											</table>
										</fieldset></td>
									</tr>
									<tr>
										<td>
										<fieldset>
											<legend>
												Apple MacBook Air
											</legend>
											<table>
												<tr>
													<td rowspan="2"><img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcS2Z88a6x88EsAl79Qh_bkuZv0QAj8nLDkTgSpZTlYgvpxRQseX" alt="MacBook"/></td><td>64 GB SSD</td>
												</tr>
												<tr>
													<td>2GB DDR</td>
												</tr>
												<tr>
													<td>1300 USD</td><td>Intel Core i5</td>
												</tr>
											</table>
										</fieldset></td>
										<td>
										<fieldset>
											<legend>
												Apple MacBook Air
											</legend>
											<table>
												<tr>
													<td rowspan="2"><img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcS2Z88a6x88EsAl79Qh_bkuZv0QAj8nLDkTgSpZTlYgvpxRQseX" alt="MacBook"/></td><td>64 GB SSD</td>
												</tr>
												<tr>
													<td>2GB DDR</td>
												</tr>
												<tr>
													<td>1300 USD</td><td>Intel Core i5</td>
												</tr>
											</table>
										</fieldset></td>
									</tr>
								</table></td>
							</tr>
						</table></td>
						<td>
						<label for="minprice">
							Min price: 500 USD
						</label>
						<br/>
						<input id="minprice" type="range" min="0" max="100"/>
						<br/>
						<label for="maxprice">
							Max price: 1500 USD
						</label>
						<br/>
						<input id="maxprice" type="range" min="0" max="100"/>
						<br/>
						<label for="minram">
							Min RAM: 4 GB
						</label>
						<br/>
						<input id="minram" type="range" min="0" max="100"/>
						<br/>
						<label for="maxram">
							Min price: 16 GB
						</label>
						<br/>
						<input id="maxram" type="range" min="0" max="100"/>
						<br/>
						</td>
					</tr>
				</table></td>
			</tr>
		</table>
		</form>
	</body>
</html>

HTML tables Домашно


Това са моите решения на домашната към лекцията HTML tables:
Задача 1. Fresh Fruits:

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<title>01. FreshFruits</title>
		<meta name="description" content="" />
		<meta name="author" content="Teodor" />
		<meta name="viewport" content="width=device-width; initial-scale=1.0" />
	</head>

	<body>
		<div>
			<table>
				<thead>
					<tr>
						<th colspan="2" >Fresh Fruits</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td> Lorem Ipsum is simply dummy text of the printing and typesetting industry.
						Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
						when an unknown printer took a galley of type and scrambled it to make a type specimen book.
						It has survived not only five centuries, but also the leap into electronic typesetting,
						remaining essentially unchanged. It was popularised in the
						1960s with the release of Letraset sheets containing Lorem Ipsum passages,
						and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </td>
						<td><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTTQGNk7s2TKT68hXqgoPbYZFgtXypD2NKghmWYxUJh2LntMeIe" alt="Testing Img" width="200" height="200" /></td>
					</tr>
				</tbody>
			</table>
		</div>
	</body>
</html>

Задача 2. Letters Table:

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<title>02. LettersTable</title>
		<meta name="description" content="" />
		<meta name="author" content="Teodor" />
		<meta name="viewport" content="width=device-width; initial-scale=1.0" />
	</head>

	<body>
		<table border="1">
			<tr>
				<td colspan="3">Title goes here</td>
				<td>A</td>
				<td>B</td>
			</tr>
			<tr>
				<td rowspan="3">C</td>
				<td>D</td>
				<td>E</td>
				<td>F</td>
				<td>G</td>
			</tr>
			<tr>
				<td>H</td>
				<td colspan="2">I</td>
				<td rowspan="2">J</td>
			</tr>
			<tr>
				<td>K</td>
				<td>L</td>
				<td>M</td>
			</tr>
			<tr>
				<td>N</td>
				<td colspan="4">O</td>
			</tr>
		</table>
	</body>
</html>

Задача 3. Simple Web Form:

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<title>03. SimpleWebForm</title>
		<meta name="description" content="" />
		<meta name="author" content="Teodor" />
		<meta name="viewport" content="width=device-width; initial-scale=1.0" />
	</head>

	<body>
		<div>
			<form action="" method="post">
				<label for="name">Member name: </label>
				<input type="text" id="name" />
				<strong>*req</strong>
				<br />
				<label for="email">E-mail: </label>
				<input type="text" id="email" />
				<strong>*req</strong>
				<br />
				<label for="school">School: </label>
				<input type="text" id="school" />
				<strong>*req</strong>
				<br />
				<input type="submit" value="Submit" />
			</form>
		</div>
	</body>
</html>

Задача 4. Calculator:
HTML:

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<title>04. Calculator</title>
		<meta name="description" content="" />
		<meta name="author" content="Teodor" />
		<meta name="viewport" content="width=device-width; initial-scale=1.0" />
		<link href="style/ClacStyle.css" rel="stylesheet" type="text/css" />
	</head>
	<body>
		<div>
			<form action="" method="post">
				<table border="1" cellspacing="0" cellpadding="0">
					<tr>
						<td colspan="4">
							<textarea id="result" dir="rtl">123</textarea>
						</td>
					</tr>
					<tr>
						<td>
						<input type="button" value="1" />
						</td>
						<td>
						<input type="button" value="2" />
						</td>
						<td>
						<input type="button" value="3" />
						</td>
						<td>
						<input type="button" value="+" />
						</td>
					</tr>
					<tr>
						<td>
						<input type="button" value="4" />
						</td>
						<td>
						<input type="button" value="5" />
						</td>
						<td>
						<input type="button" value="6" />
						</td>
						<td>
						<input type="button" value="-" />
						</td>
					</tr>
					<tr>
						<td>
						<input type="button" value="7" />
						</td>
						<td>
						<input type="button" value="8" />
						</td>
						<td>
						<input type="button" value="9" />
						</td>
						<td>
						<input type="button" value="*" />
						</td>
					</tr>
					<tr>
						<td colspan="2">
						<input type="button" id="zero" value="0"/>
						</td>
						<td>
						<input type="button" value="." />
						</td>
						<td>
						<input type="button" value="/" />
						</td>
					</tr>
				</table>
			</form>
		</div>
	</body>
</html>

CSS:

#result
{
	width:202px; 
	height:40px;
}
#zero
{
	width: 102px; 
	height: 50px;
}

input[type="button"] 
{
	width: 50px;
	height: 50px;
}

HTML Basics


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

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

	&lt;body&gt;
		&lt;div&gt;
			&lt;header&gt;
				&lt;p&gt;
					Hello, Stranger!
				&lt;/p&gt;
				&lt;h1&gt;Welcome to Runners Home&amp;trade;&lt;/h1&gt;
			&lt;/header&gt;
			&lt;div&gt;
				&lt;p&gt;
					Runners Home&amp;trade; is dedicated to provideing you with
				&lt;/p&gt;
				- the moste up-to-date information on running races
				&lt;br/&gt;
				- the best resources for runners
			&lt;/div&gt;
			&lt;hr&gt;
			&lt;footer&gt;
				&lt;p&gt;
					&amp;copy; Runners Home. All rights reserved.
				&lt;/p&gt;
			&lt;/footer&gt;
		&lt;/div&gt;
	&lt;/body&gt;
&lt;/html&gt;

Задача 2. Nested Lists :

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

	&lt;body&gt;
		&lt;div&gt;
			&lt;p&gt;
				Presseeding Text
			&lt;/p&gt;
			&lt;ol type=&quot;I&quot;&gt;
				&lt;li&gt;
					List Item 1
					&lt;ol type=&quot;a&quot;&gt;
						&lt;li&gt;
							Nested Item 1.1
						&lt;/li&gt;
						&lt;li&gt;
							Nested Item 1.2
						&lt;/li&gt;
					&lt;/ol&gt;
				&lt;/li&gt;
				&lt;li&gt;
					List Item 2
					&lt;ol&gt;
						&lt;li&gt;
							Nested Item 2.1
						&lt;/li&gt;
						&lt;li&gt;
							Nested Item 2.2
							&lt;ul type=&quot;disc&quot;&gt;
								&lt;li&gt;
									Nested Item 2.2.1
								&lt;/li&gt;
								&lt;li&gt;
									Nested Item 2.2.2
									&lt;ul type=&quot;square&quot;&gt;
										&lt;li&gt;
											Nested Item 2.2.2.1
										&lt;/li&gt;
										&lt;li&gt;
											Nested Item 2.2.2.2
										&lt;/li&gt;
									&lt;/ul&gt;
								&lt;/li&gt;
								&lt;li&gt;
									Nested Item 2.2.3
								&lt;/li&gt;
							&lt;/ul&gt;
						&lt;/li&gt;
						&lt;li&gt;
							Nested item 2.3
						&lt;/li&gt;
					&lt;/ol&gt;
				&lt;/li&gt;
				&lt;li&gt;
					List Item 3
					&lt;ul&gt;
						&lt;li&gt;
							Nested Item 3.1
						&lt;/li&gt;
						&lt;li&gt;
							Nested Item 3.2
						&lt;/li&gt;
						&lt;li&gt;
							Nested Item 3.3
						&lt;/li&gt;
					&lt;/ul&gt;
				&lt;/li&gt;
			&lt;/ol&gt;
		&lt;/div&gt;
	&lt;/body&gt;
&lt;/html&gt;

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

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

	&lt;body&gt;
		&lt;div&gt;
			&lt;header&gt;
				&lt;h1&gt;Friends&lt;/h1&gt;
			&lt;/header&gt;

			&lt;nav&gt;
				&lt;a id=&quot;first&quot; href=&quot;Profile.html&quot;&gt;Profile&lt;/a&gt;
				&lt;a href=&quot;#&quot;&gt;Friends&lt;/a&gt;
				&lt;a href=&quot;Info.html&quot;&gt;Additional information&lt;/a&gt;
			&lt;/nav&gt;

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

Information section:

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

	&lt;body&gt;
		&lt;div&gt;
			&lt;header&gt;
				&lt;h1&gt;&lt;em&gt;Additional information about Doncho &lt;/em&gt;&lt;/h1&gt;
			&lt;/header&gt;
			&lt;nav&gt;
				&lt;a id=&quot;first&quot; href=&quot;Profile.html&quot;&gt;Profile&lt;/a&gt;
				&lt;a href=&quot;Friends.html&quot;&gt;Friends&lt;/a&gt;
				&lt;a href=&quot;#&quot;&gt;Additional information&lt;/a&gt;
			&lt;/nav&gt;

			&lt;div&gt;
				&lt;hr/&gt;
				&lt;h3&gt;Frends of Doncho&lt;/h3&gt;
				&lt;hr/&gt;
			&lt;/div&gt;

			&lt;div&gt;
				&lt;em&gt;Student at &lt;a href=&quot;#&quot;&gt;Sofia University&lt;/a&gt;
				&lt;br /&gt;
				Born in Burgas
				&lt;br /&gt;
				Living in Sofia
				&lt;br /&gt;
				Working at &lt;a href=&quot;#&quot;&gt;Telerik&lt;/a&gt;&lt;/em&gt;
			&lt;/div&gt;

		&lt;/div&gt;
	&lt;/body&gt;
&lt;/html&gt;

Profile section:

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

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

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

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