HTML5 - SPLessons

Learn HTML5

Chapter 2

SPLessons 5 Steps, 3 Clicks
5 Steps - 3 Clicks

Learn HTML5

Learn HTML5

shape Introduction

Learn HTML5 chapter gives the Overview of HTML5. HTML is the language which is developed for creating the web pages.Following are the concepts covered in “Learn HTML5” chapter. Tutorial.

  • History of HTML5
  • HTML Fundamentals

History of HTML5

shape Description

Tim Berners-Lee invented HTML in the year of 1990 at CERN European Laboratory in Geneva, which is a product of Standard Generalized Markup Language (SGML). The Standard 2.0 version of HTML introduced in September 1995 and later another version of 3.2 in January 14, 1997 which is recommended by W3c (World Wide Web Consortium) and other version of 4.0 in July 8, 1997 now using latest version HTML 5 published on October 2014.

  • In the year of 2004 WHAT(Web Hypertext Application Technology) working group was formed with the members of Apple, Mozilla Foundation and Opera software to develop the HTML5.
  • In the year 2008 first version of HTML5 published and written by Ian Hickson but the experts says that HTML5 is a evolving technology that will never be finished.
  • In the year of 2008 HTML5 has become compatible for the all the browsers like Firefox, Chrome and  Safari.
  • In 2010 July, YouTube developed HTML5 Video player.
  • In 2011 September, 34% of Top 100 Alexa’s web sites are using HTML5.
  • In 2013 January, HTML5 adoption expected to boom as over 1 billion HTML5 compatible smart phones will be sold.

HTML Fundamentals

shape Description

HTML fundamentals will demonstrate about the basic html tags and execution of those tags with some examples.

shape Description

HTML head element contains metadata which describes about the document. Meta data will not displayed which have some tags to describe the metadata as shown below

Body

shape Description

The main content of the HTML document is present in the body tag and whatever the content written using body tag which is visible in the web browser contains following tags.

Headings

shape Description

Heading tags are defined from <h1> to <h6> as shown below.

<!DOCTYPE html>
<html>
	<body>
		<h1>SPLessons</h1>
		<h2>SPLessons</h2>
		<h3>SPLessons</h3>
		<h4>SPLessons</h4>
		<h5>SPLessons</h5>
		<h6>SPLessons</h6>
	</body>
</html>

Output of the above code as shown in below image.

Paragraph

shape Description

Paragraph tag defines with the <p>……</p> tags as shown below.

<!DOCTYPE html>
<html>
	<body>
		<p>SPLessons a paragraph 1.</p>
		<p>SPLessons a paragraph 2.</p>
		<p>SPLessons a paragraph 3.</p>
	</body>
</html>

Out put of the above code as shown in below image.

Lists

shape Description

List tags are defined with the <li>…….</li> tags as shown below.

<!DOCTYPE html>
<html>
	<body>
		<h2>Unordered List with Default Bullets</h2>
		<ul>
			<li>Java</li>
			<li>HTML</li>
			<li>.net</li>
		</ul>  
	</body>
</html>

Output of the above code as shown in below image.

Tables

shape Description

Table tags are divided into three types those are the

<th> is defined as the Table headings.

<td> is defined as the Table data.

<tr> is defined as the Table row.

<!DOCTYPE html>
<html>
	<body>
		<table style="width:100%">
			<tr>
				<td>Rock</td>
				<td>Mith</td>		
				<td>50</td>
			</tr>
			<tr>
				<td>Luis</td>
				<td>Kate</td>		
				<td>94</td>
			</tr>
			<tr>
				<td>Willson</td>
				<td>Nikson</td>		
				<td>80</td>
			</tr>
		</table>
	</body>
</html>

Output of the above code as shown in below image.

shape Description

Links tags are used to a way from one page to another page.

<!DOCTYPE html>
<html>
	<body>
		<p><a href="https://www.splessons.com/">Visit our HTML tutorial</a></p>
	</body>
</html>

Output of the above code as shown in below image.

Images

shape Description

Image tag will defined as the <img> tag as shown below.

<!DOCTYPE html>
<html>
	<body>
		<img src="splessons.jpg" alt="splessons.com" width="104" height="142">
	</body>
</html>

Output of the above code as shown in below image.

Summary

shape Points

  • HTML5 compatible for the all the browsers.
  • Meta data will not displayed on the browsers.
  • Content written in body which displayed on the browser.