CSS въведение: селектори, стилове, класове – Домашни

html5-css3

След курса по HTML основи, логично преминаваме в CSS, за да се научим да правим всякакви шарении и глезотии 😀 .  В първата тема – CSS въведение: селектори, стилове, класове , ни бяха представени основните механизми на CSS, начини за избиране на дадени елементи, важност на CSS правилата и т.н. В следващите няколко реда ще представя моите решения и логиката ми зад тях.

Задача 1 – Simple Ticket

Тук създавам структурата с таблица ( може и без, но за това се изискват знания, които още нямаме ), слагам класове на текста с един и същ цвят, и добавям точката, чрез картинка ( може да се направи и само с CSS ).
За сваляне от DropBox: – Цък

HTML и CSS в jsFiddle: –  Цък

Задача 2 – Simple Styled Table

В общи линии пак създавам структурата с таблица, стилизирам заглавните клетки с нужния фон, използвам някои от новите псевдо селектори за останала стилизация ( Примерно да се редува оцветяването на редовете през едно ).
За сваляне от DropBox: – Цък

HTML и CSS в jsFiddle: – Цък

Задача 3 – Simple Web Page

Целта ( според мен ) тук е да стилизираме предоставения ни HMTL без да го променяме. За целта използвам новите CSS3 селектори.
За сваляне от DropBox: – Цък

HTML и CSS в jsFiddle: – Цък

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;
}

Какво е Zen-Coding и трябва ли да го използваме ?


В няколкото години в които съм се занимавал с писането на HTML и многото досадни Copy + Paste случай, реших да потърся алтернатива на тази досада и така без да искам попаднах на Zen-Coding.

Но какво всъщност е Zen-coding и защо трябва да го ползвам ?

Та в същността си Zen-coding представлява разширение за почти всички по-популярни IDE, което улеснява и намалява значително времето за писане на код.

Добре, как ускорява писането на код ?

Със прости съкратени команди може да генерирате значително количество код. Ето пример:

Имате нужда от div, в които има неподреден списък с 5 елемента, в които има линк. Пишете си в IDE-то : div>ul>li*5>a , натискаме Ctrl+E ( това е шорткъта за “разпъване” на код ) и ни изкрава готовия HTML код:

<div>
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</div>

Искаме елементите на листа да имат клас “item”. Няма проблем: Пишете си в IDE-то : div>ul>li.item*5>a и вече имаме готов HTML код:

<div>
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</div>

За пълен списък на това какво може да правите с съкратения код, може да видите тук

Но откъде да си го сваля ?

Тук може да намерите най-новата версия на Zen-Coding – цък

Заключение

Силно ви препоръчвам да ползвате Zen-Coding, тъй кат без него ще прекарате доста часове в Copy + Paste на НТМL код;