HTML or Hypertext Markup language is not actually a programming language its just a markup language. So HTML is just a standard Markup language for creating structure of the web pages. HTML is the combination of different elements which tells browsers where to display what. An element is combination of closing and starting html tags for example <p> and </p>.
There are various HTML tags like p, ol, ul, h1, h2 , img, a, strong and many more. They just tell the browser how and what to display. Browser do not display the tags but browser use tags to render the content into web page.
HTML Versions
Since the web released there have been several versions of HTML , before tables used to make whole layouts of website but now HTML5 is in action which gives you power to define your own elements. For example <footer> , <header> so these element tags are more explanatory itself than previous versions.
| Version | Year |
|---|---|
| HTML | 1991 |
| HTML 2.0 | 1995 |
| HTML 3.2 | 1997 |
| HTML 4.01 | 1999 |
| XHTML | 2000 |
| HTML5 | 2014 |
Creating First HTML Page
To create a html page you should always know that html extension is either .html or .htm . You can either use .html or use .htm both have no difference is up to you which file extension you would like to proceed with. However we use .html file extension in our examples.
First of all you should have a code editor we recommend notepad++. Download and install notepad++ or any other code editor of your choice.
Now run notepad++ and create a new file. In which paste the following code.
<html>
<head>
<title>HTML Introduction</title>
</head>
<body>
<h1>I am heading 1</h1>
<h2>I am heading 2</h2>
<h3>I am heading 3</h3>
<h4>I am heading 4</h4>
<h5>I am heading 5</h5>
<h6>I am heading 6</h6>
</body>
</html>Now click on Save file and make sure you select Hyper Text Markup language .html extension in file type. If your editor do not have built in extension for .html then write .html with your filename yourself. And select file type as All Types. Save and once you try to open now the file would open in browser.
View your web page on web browser
If you saved your file correctly in .html extension while trying to open it. You will see file now opens in web browser if this is not happening please go to previous steps again.
How to open HTML file in code editor again?
You would may like to open your file in code editor again to make some changes. But when you double click on your HTML file it opens into the web browser? Don’t worry just right click and edit with your desired application. Right click and open with your desired application. That’s how you can open a html file in code editor again.
Tip: <h1> is starting heading 1 tag and </h1> is ending heading 1 tag. Almost all html elements have a starting and ending tags.
Understanding HTML Code
HTML is the most simple language you would ever learn in your web application development journey. Let’s have a look to simple HTML web page’s code below first.
<html>
<head>
<title>HTML Introduction</title>
</head>
<body>
<h1>I am heading 1</h1>
<h2>I am heading 2</h2>
<h3>I am heading 3</h3>
<h4>I am heading 4</h4>
<h5>I am heading 5</h5>
<h6>I am heading 6</h6>
</body>
</html>You can see everything is wrapped in element <html></html> which means the whole web page should be inside html element tags.
Head Tag in HTML
Head element is very important part of a web page. Which starts with <head and ends with </head> tags. The document title, the stylesheets, the favicon, the responsive zoom features. Everything comes in the head tags cause that’s not visible in web page’s body but used to include important files and tags about web page. Don’t be confused with it for now you will understand it more during our CSS course.
Body Tag in HTML
As you can see in above example the body element starts with <body> tag and ends with </body> ending tag. Everything inside <body> is actually going to display on web browser. As in above example we have 6 different headings h1, h2, h3, h4, h5, h6 and they are starting and closing themselves. So body would be displaying everything on browser except tags and comments. Cause tags are used to just render and make the structure or type. While commends are special elements just to make code more understandable and not to display on web browser.
Heading Tags in HTML
<h1>I am heading 1</h1>
<h2>I am heading 2</h2>
<h3>I am heading 3</h3>
<h4>I am heading 4</h4>
<h5>I am heading 5</h5>
<h6>I am heading 6</h6>We have 6 different headings in html. Each heading have its own number from 1 to 6 remember headings are very important for search engines. As h1 is page’s main heading while h2 is section heading and the h3 are children of h3 and so on. If you do not understand the headings hierarchy for now ignore it and you should only remember. When you want to format a text bold you should not use heading for that purpose. Heading is heading of page or section itself. Starts with <h1> tag and ends with </h1> tag. See example above.
Comments in HTML
<!-- I am a comment /-->Comments are just code comments which are used to make code more understandable. In html comment starts with <!– and ends with –> anything between these tags will not display in your browser. Cause browser ignore comments. Comments are just for yourself or for other coders who would modify your code later to give them hints what a section is. Always try to make commented and beautiful code this practice will not only save your time in future but will also make you love your code.
Paragraph, Bold, Italic and Underline in HTML
<p>Lorem Ipsum is industry. <em>Lorem Ipsum</em> 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 <u>has survived</u> not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was <strong>popularised</strong> in with the release of Letraset sheets containing <i>Lorem Ipsum</i> passages..</p>In HTML paragraphs starts with tag <p> and ends with tag </p> everything inside defines a paragraph.
If you want to format word or line inside a paragraph e.g bold, you would use <strong> and </strong> tags around that word or line to make that bolder.
When you want to make a line underline just use <u> </u> around that word or line to make it underline.
And when you want to format a text or line italic just use <i> </i> tag around that word or line. You can also use <em> </em> both <i> and <em> tags do same work.
Horizontal Rules in HTML
<hr />Horizontal ruler is just a line which you can put in your html document with <hr /> code. This is special html tag which close in itself as you can see there is no closing tag for <hr> tag. Because there is nothing which have to come inside this tag. So whenever you want to put a line in your HTML just use <hr />.
Pre in HTML
<pre>
Introduction I We Then
What
Quality System Ready
</pre>As you know browser ignore all white spaces you have in your code. For example in your code you have several lines between two tags, and a lot of space between two words but browser ignore all these white spaces. And shows your web page without those spaces. Yes because browser ignore all these white spaces which you use to make your code more readable. So in case you need to display those white spaces and get browser not ignore them just use element <pre> </pre> around the text or code you want to display as it is.
Ordered Lists ol in HTML
<ol>
<li>USA</li>
<li>UK
<ol type="A">
<li>London</li>
<li>Manchester</li>
</ol>
</li>
<li>Canada</li>
<li>Australia</li>
</ol>When you want to display something in list view. You use either ordered list or unordered lists. The both types of lists have list items tags <li> which defines the list items in these both types of lists.
The major difference between ordered and unordered lists are ordered lists show number, a , x, or anything depending on attribute type. While ordered list display a disc or dot in start of list item. In example above you can see the ordered list with nested ordered list. Where the parent list have default type and will show list items as 1, 2 , 3 while the child ordered list have type attribute set to A. So it would show A , B so on. Ordered list starts with tag <ol> and ends with tag </ol> while the list items comes between tags <li></li> so each list item in its own tags.
UnOrdered Lists ul in HTML
<ul>
<li>USA</li>
<li>UK
<ol>
<li>London</li>
<li>Manchester</li>
</ol>
</li>
<li>Canada</li>
<li>Australia</li>
</ul>Just like ordered list unordered list starts with <ul> tag and ends with </ul> tag while the items inside comes between tags <li> and </li>. So the unordered list will display dot or disc in start of list items. Which you can modify with CSS we will guide you later. This is most popular type of list used in HTML pages for example its used in sidebar widgets, header navigation, footer navigations and styled with CSS.
Definition lists in HTML
<dt>Pakistan</dt>
<dd>Karachi</dd>
<dd>Lahore</dd>
<dd>Islambad</dd>The definition list is a list which have a heading then its sub headings. <dt> is definition title tag which is heading tag. While the list items will be wrapped in tag <dd> </dd> unlikely ul and ol which wraps in <li></li>. See example above for Definition lists code example.
HTML Special Characters
© ♥ ♣
<p>I will display €</p>
<p>I will display €</p>
<p>I will display €</p>There are various types of characters for example copyright © , trademark ™ and many other characters in HTML. When you need to use these characters you cannot type them directly using you r keyboard. For that html have special characters which you can find in HTML special Characters table. Where you can get the code to make your desired character in your HTML.
HTML Attributes
<ol type="A"> </ol>
<a href="https://google.com">Google</a>
<img src="images/src.jpg" />
<div class="red"></div>HTML attributes are actually the part of html tags. In example above you can see <ol> itself is a HTML tag which have different attributes you can use them. If you use attribute type with value A as in example above the display of <ol> will be A, B, C instead of default 1, 2 , 3 . Similarly in anchor <a> tag the href=”” attribute tells anchor to reference or link where. Similarly in <img the attribute src=”” tells the source of image where to get image to display in <img tag . And in Div tag the class attribute is used to just apply a class which have its own styling in CSS. We will cover CSS and Div later.
Difference between HTML tags and Attributes
Tag is HTML tag which for example <img and the attribute it its tags sub values or definitions. For example <img src=”image.jpg” in this example <img is a HTML tag while src is an attribute of <img tag. Every tag have its own tags which you will use as per requirements.
If you want to get the full code please download in link below.
Next Lecture HTML Links – HTML Tutorial – Web Application Development