-
Notifications
You must be signed in to change notification settings - Fork 134
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'master' of https://github.com/TelerikAcademy/HTML
Conflicts: 3. HTML Fundamentals/3. Common-elements.html
- Loading branch information
Showing
10 changed files
with
358 additions
and
337 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,9 +1,12 @@ | ||
<!doctype html> | ||
<!DOCTYPE html> | ||
<html> | ||
<head> | ||
<title>HTML Concepts</title> | ||
</head> | ||
<body> | ||
<h1>Hello Pesho!</h1> | ||
<a href="http://google.com"> go to Google</a> | ||
<hr width="95%" size="3px"/> | ||
<img src="images/SEB-Ninja.png" width="15px"/> | ||
<h1>Hello Pesho!</h1> | ||
<a href="http://google.com"> go to Google</a> | ||
<hr width="95%" size="3" /> | ||
<img src="images/SEB-Ninja.png" width="100" /> | ||
</body> | ||
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,26 +1,22 @@ | ||
<!doctype html> | ||
<!DOCTYPE html> | ||
<html> | ||
<head> | ||
<title>HTML Structure - Demonstration</title> | ||
<style> | ||
img | ||
{ | ||
width:150px; | ||
} | ||
</style> | ||
<script> | ||
|
||
function onClick() | ||
{ | ||
alert("Clicked"); | ||
} | ||
|
||
</script> | ||
<title>HTML Structure</title> | ||
<style> | ||
img { | ||
width: 150px; | ||
} | ||
</style> | ||
<script> | ||
function onClick() { | ||
alert("Clicked"); | ||
} | ||
</script> | ||
</head> | ||
<body> | ||
<h1>Hello Pesho!</h1> | ||
<a href="http://google.com"> go to Google</a> | ||
<hr width="95%" size="3px"/> | ||
<img src="images/SEB-Ninja.png" onclick="onClick()"/> | ||
<h1>Hello Pesho!</h1> | ||
<a href="http://google.com"> go to Google</a> | ||
<hr width="95%" size="3" /> | ||
<img src="images/SEB-Ninja.png" onclick="onClick()" /> | ||
</body> | ||
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,35 +1,38 @@ | ||
<!doctype html> | ||
<!DOCTYPE html> | ||
<html> | ||
<head> | ||
<title>HTML Common Tags - Demonstration</title> | ||
<title>HTML Common Tags</title> | ||
</head> | ||
<body> | ||
<a href="http://www.telerik.com/" title="Telerik">Link to Telerik Web site</a> | ||
<img src="images/seb-ninja.png" width="50px" alt="logo" /> | ||
This text is <em>emphasized.</em> | ||
<br />new line<br /> | ||
This one is <strong>more emphasized.</strong> | ||
<h1>Heading 1</h1> | ||
<h2>Sub heading 2</h2> | ||
<h3>Sub heading 3</h3> | ||
<p>This is my first paragraph</p> | ||
<p>This is my second paragraph</p> | ||
<div style="background: skyblue;">This is a div</div> | ||
<ol type="1"> | ||
<li>Apple</li> | ||
<li>Orange</li> | ||
<li>Grapefruit</li> | ||
</ol> | ||
<ul type="disc"> | ||
<li>Apple</li> | ||
<li>Orange</li> | ||
<li>Grapefruit</li> | ||
</ul> | ||
<dl> | ||
<dt>HTML</dt> | ||
<dd>A markup language</dd> | ||
<dt>CSS</dt> | ||
<dd>Language used to</dd> | ||
</dl> | ||
<a href="http://www.telerik.com/" title="Telerik">Link to Telerik Web site</a> | ||
<img src="images/seb-ninja.png" width="50" alt="logo" /> | ||
This text is <em>emphasized.</em> | ||
<br />new line<br /> | ||
This one is <strong>more emphasized.</strong> | ||
<h1>Heading 1</h1> | ||
<h2>Sub heading 2</h2> | ||
<h3>Sub heading 3</h3> | ||
<h4>Sub heading 4</h4> | ||
<h5>Sub heading 5</h5> | ||
<h6>Sub heading 6</h6> | ||
<p>This is my first paragraph</p> | ||
<p>This is my second paragraph</p> | ||
<div style="background: skyblue;">This is a div</div> | ||
<ol type="1"> | ||
<li>Apple</li> | ||
<li>Orange</li> | ||
<li>Grapefruit</li> | ||
</ol> | ||
<ul type="disc"> | ||
<li>Apple</li> | ||
<li>Orange</li> | ||
<li>Grapefruit</li> | ||
</ul> | ||
<dl> | ||
<dt>HTML</dt> | ||
<dd>A markup language</dd> | ||
<dt>CSS</dt> | ||
<dd>Language used to</dd> | ||
</dl> | ||
</body> | ||
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,12 +1,12 @@ | ||
<!doctype html> | ||
<!DOCTYPE html> | ||
<html> | ||
<head> | ||
<title>HTML section elements - divs - Demonstration</title> | ||
<title>HTML section elements - divs</title> | ||
</head> | ||
<body> | ||
<div>Some text in a DIV</div> | ||
<div style='font-size:24px; color: red'>Some text in a DIV</div> | ||
<div style="text-align: center; font-weight:bold">Some text in a DIV</div> | ||
<div>Some text in a DIV</div> | ||
<div>Some text in a DIV</div> | ||
<div style='font-size:24px; color: red'>Some text in a DIV</div> | ||
<div style="text-align: center; font-weight:bold">Some text in a DIV</div> | ||
<div>Some text in a DIV</div> | ||
</body> | ||
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,13 +1,13 @@ | ||
<!doctype html> | ||
<!DOCTYPE html> | ||
<html> | ||
<head> | ||
<title>HTML section elements - span - Demonstration</title> | ||
<title>HTML section elements - span</title> | ||
</head> | ||
<body> | ||
<span>Some text in a SPAN</span> | ||
<span>Some text in a SPAN</span> | ||
<span>Some text in a SPAN</span> | ||
<span>Some text in a SPAN</span> | ||
<span>Some text in a SPAN</span> | ||
<span>Some text in a SPAN.</span> | ||
<span>Some text in a SPAN.</span> | ||
<span>Some text in a SPAN.</span> | ||
<span>Some text in a SPAN.</span> | ||
<span>Some text in a SPAN.</span> | ||
</body> | ||
</html> |
179 changes: 91 additions & 88 deletions
179
3. HTML Fundamentals/6. Semantic-structural-tags-divs.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,94 +1,97 @@ | ||
<!DOCTYPE html> | ||
<html> | ||
<head> | ||
<link type="text/css" rel="stylesheet" href="styles/semantic-tags.css" /> | ||
<title>Semantic structural tags (divs)</title> | ||
<link type="text/css" rel="stylesheet" href="styles/semantic-tags.css" /> | ||
</head> | ||
<body> | ||
<div id="header"> | ||
<h1>This is the Header</h1> | ||
</div> | ||
<div id="navigation"> | ||
<ul> | ||
<li> | ||
<a href="#"> | ||
Nav 1 | ||
</a> | ||
</li> | ||
<li> | ||
<a href="#"> | ||
Nav 2 | ||
</a> | ||
</li> | ||
<li> | ||
<a href="#"> | ||
Nav 3 | ||
</a> | ||
</li> | ||
<li> | ||
<a href="#"> | ||
Nav 4 | ||
</a> | ||
</li> | ||
</ul> | ||
</div> | ||
<div id="sidebar"> | ||
<ul> | ||
<li> | ||
<a href="#"> | ||
Item 1 | ||
</a> | ||
</li> | ||
<li> | ||
<a href="#"> | ||
Item 2 | ||
</a> | ||
</li> | ||
<li> | ||
<a href="#"> | ||
Item 3 | ||
</a> | ||
</li> | ||
<li> | ||
<a href="#"> | ||
Item 4 | ||
</a> | ||
</li> | ||
<li> | ||
<a href="#"> | ||
Item 5 | ||
</a> | ||
</li> | ||
<li> | ||
<a href="#"> | ||
Item 6 | ||
</a> | ||
</li> | ||
<li> | ||
<a href="#"> | ||
Item 7 | ||
</a> | ||
</li> | ||
</ul> | ||
</div> | ||
<div id="content"> | ||
<h2>Lorem Ipsum</h1> | ||
<p> | ||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sed sodales dui. Integer posuere odio vel augue porta quis viverra odio tempor. Vestibulum vitae mi metus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae velit neque. Pellentesque eleifend sem vel nisi rhoncus sollicitudin. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent vel iaculis orci. | ||
</p> | ||
<h3>Donec non quam euismod mauris congue interdum</h3> | ||
<p>Cras elementum mi eget sapien accumsan gravida. Duis non leo massa. Proin mattis gravida quam, at ultrices dui bibendum ac. Aliquam varius mi sed ligula aliquam sed mattis arcu lacinia. Phasellus aliquam adipiscing sem sit amet viverra. Proin eu metus nunc, a laoreet est. Donec id urna dui. Fusce ut lectus sit amet lorem vulputate cursus et pretium justo. Vestibulum consequat scelerisque rhoncus. Curabitur varius pretium mollis. Sed gravida mattis odio ut posuere. | ||
</p> | ||
<p> | ||
Nunc a justo consequat ipsum luctus malesuada et vel sem. Proin tempor aliquet nunc, vulputate rutrum turpis pulvinar quis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris tellus nisl, gravida sed pulvinar quis, convallis sit amet tellus. Sed tempus tempus felis, ac laoreet dolor iaculis ac. Nulla quis dolor ante, et dapibus nulla. Etiam sollicitudin est quis dolor auctor sit amet consequat metus vehicula. Sed magna ipsum, sollicitudin eu sollicitudin in, bibendum ac leo. Fusce eget dui in eros tempor hendrerit. Sed ut neque turpis. Praesent sapien magna, lobortis sed ullamcorper sed, iaculis imperdiet nisl. Ut quis ante tortor. | ||
</p> | ||
<p> | ||
Curabitur mattis viverra venenatis. Nunc eu lorem ligula. Praesent vehicula fermentum nulla, et malesuada erat lacinia hendrerit. Nulla tristique ultrices gravida. Vestibulum tempus, ipsum quis accumsan fermentum, ipsum ligula posuere lectus, sit amet vulputate leo lectus id dui. Nam placerat leo vitae lorem suscipit a dictum neque luctus. Etiam justo elit, eleifend sed viverra at, imperdiet ut lectus. Vivamus cursus blandit arcu, sit amet pretium neque consequat sed. Donec consequat lorem in orci hendrerit vel pharetra augue tincidunt. Fusce at est risus, sed lacinia elit. Pellentesque eros tellus, condimentum nec interdum sit amet, cursus eget urna. | ||
</p> | ||
<p> | ||
Sed scelerisque mattis imperdiet. Ut varius magna nec lacus mattis dictum. Etiam ultricies, ligula eget laoreet cursus, erat ante congue tellus, sit amet dapibus tortor mi ac ante. Integer ultricies, diam quis molestie lobortis, leo ligula pellentesque diam, non tempus magna augue egestas lectus. Fusce orci tortor, auctor sed viverra ullamcorper, aliquet sed justo. Aenean gravida tristique bibendum. Donec non odio orci, at consectetur dui. Proin nec tellus tellus. Aliquam enim elit, feugiat eu aliquam sit amet, convallis in nulla. Fusce nisi ligula, placerat vel ultricies in, pulvinar et enim. Ut mollis eros id elit convallis ac volutpat urna auctor. Donec quis urna tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean quis lacus ut lectus rhoncus vestibulum eget id enim. Integer et pellentesque sem. Donec tristique lacus eu risus suscipit vitae consectetur elit elementum. | ||
</p> | ||
</div> | ||
<div id="footer"> | ||
<h1>This is the Footer</h1> | ||
</div> | ||
<div id="header"> | ||
<h1>This is the Header</h1> | ||
</div> | ||
<div id="navigation"> | ||
<ul> | ||
<li> | ||
<a href="#"> | ||
Nav 1 | ||
</a> | ||
</li> | ||
<li> | ||
<a href="#"> | ||
Nav 2 | ||
</a> | ||
</li> | ||
<li> | ||
<a href="#"> | ||
Nav 3 | ||
</a> | ||
</li> | ||
<li> | ||
<a href="#"> | ||
Nav 4 | ||
</a> | ||
</li> | ||
</ul> | ||
</div> | ||
<div id="sidebar"> | ||
<ul> | ||
<li> | ||
<a href="#"> | ||
Item 1 | ||
</a> | ||
</li> | ||
<li> | ||
<a href="#"> | ||
Item 2 | ||
</a> | ||
</li> | ||
<li> | ||
<a href="#"> | ||
Item 3 | ||
</a> | ||
</li> | ||
<li> | ||
<a href="#"> | ||
Item 4 | ||
</a> | ||
</li> | ||
<li> | ||
<a href="#"> | ||
Item 5 | ||
</a> | ||
</li> | ||
<li> | ||
<a href="#"> | ||
Item 6 | ||
</a> | ||
</li> | ||
<li> | ||
<a href="#"> | ||
Item 7 | ||
</a> | ||
</li> | ||
</ul> | ||
</div> | ||
<div id="content"> | ||
<h2>Lorem Ipsum</h2> | ||
<p> | ||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sed sodales dui. Integer posuere odio vel augue porta quis viverra odio tempor. Vestibulum vitae mi metus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae velit neque. Pellentesque eleifend sem vel nisi rhoncus sollicitudin. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent vel iaculis orci. | ||
</p> | ||
<h3>Donec non quam euismod mauris congue interdum</h3> | ||
<p> | ||
Cras elementum mi eget sapien accumsan gravida. Duis non leo massa. Proin mattis gravida quam, at ultrices dui bibendum ac. Aliquam varius mi sed ligula aliquam sed mattis arcu lacinia. Phasellus aliquam adipiscing sem sit amet viverra. Proin eu metus nunc, a laoreet est. Donec id urna dui. Fusce ut lectus sit amet lorem vulputate cursus et pretium justo. Vestibulum consequat scelerisque rhoncus. Curabitur varius pretium mollis. Sed gravida mattis odio ut posuere. | ||
</p> | ||
<p> | ||
Nunc a justo consequat ipsum luctus malesuada et vel sem. Proin tempor aliquet nunc, vulputate rutrum turpis pulvinar quis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris tellus nisl, gravida sed pulvinar quis, convallis sit amet tellus. Sed tempus tempus felis, ac laoreet dolor iaculis ac. Nulla quis dolor ante, et dapibus nulla. Etiam sollicitudin est quis dolor auctor sit amet consequat metus vehicula. Sed magna ipsum, sollicitudin eu sollicitudin in, bibendum ac leo. Fusce eget dui in eros tempor hendrerit. Sed ut neque turpis. Praesent sapien magna, lobortis sed ullamcorper sed, iaculis imperdiet nisl. Ut quis ante tortor. | ||
</p> | ||
<p> | ||
Curabitur mattis viverra venenatis. Nunc eu lorem ligula. Praesent vehicula fermentum nulla, et malesuada erat lacinia hendrerit. Nulla tristique ultrices gravida. Vestibulum tempus, ipsum quis accumsan fermentum, ipsum ligula posuere lectus, sit amet vulputate leo lectus id dui. Nam placerat leo vitae lorem suscipit a dictum neque luctus. Etiam justo elit, eleifend sed viverra at, imperdiet ut lectus. Vivamus cursus blandit arcu, sit amet pretium neque consequat sed. Donec consequat lorem in orci hendrerit vel pharetra augue tincidunt. Fusce at est risus, sed lacinia elit. Pellentesque eros tellus, condimentum nec interdum sit amet, cursus eget urna. | ||
</p> | ||
<p> | ||
Sed scelerisque mattis imperdiet. Ut varius magna nec lacus mattis dictum. Etiam ultricies, ligula eget laoreet cursus, erat ante congue tellus, sit amet dapibus tortor mi ac ante. Integer ultricies, diam quis molestie lobortis, leo ligula pellentesque diam, non tempus magna augue egestas lectus. Fusce orci tortor, auctor sed viverra ullamcorper, aliquet sed justo. Aenean gravida tristique bibendum. Donec non odio orci, at consectetur dui. Proin nec tellus tellus. Aliquam enim elit, feugiat eu aliquam sit amet, convallis in nulla. Fusce nisi ligula, placerat vel ultricies in, pulvinar et enim. Ut mollis eros id elit convallis ac volutpat urna auctor. Donec quis urna tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean quis lacus ut lectus rhoncus vestibulum eget id enim. Integer et pellentesque sem. Donec tristique lacus eu risus suscipit vitae consectetur elit elementum. | ||
</p> | ||
</div> | ||
<div id="footer"> | ||
<h1>This is the Footer</h1> | ||
</div> | ||
</body> | ||
</html> |
Oops, something went wrong.