Updated on: July 28, 2019
Before moving on to the introduction to html we should know about what is a markup language and the other types of languages available in IT industry.
We use different languages in different countries to pass instruction to some person in order to make communication better. Similarly, when a machine is asked to do some task, some language is used for the same.
Different types of languages are available to instruct the machine for specific purpose, for example:
- Scripting language
- Markup language
- Programming language…etc.
All these types of languages provides a way to communicate with computer.
Markup language is used for processing, defining and presenting the text within a text document. The idea was derived from marking up the menu-script. These languages are mainly tag based language. HTML is the most widely used markup language worldwide.
Categories of Markup Language:
- Presentational: is used by traditional word processing system to provide what you see is what you get (WYSIWYG) effect.
- Procedural: is the language that is embed with text to provide the processing instruction to the text.
- Descriptive: is the language used to provide information or label that how the text should be treated over the browser.
Introduction to HTML:
Stands for hypertext markup language and is a descriptive markup language which is most widely used to define the layout of the web content.
It was introduced by Tim Berners Lee I the year 1991 and was officially released in 1995 as HTML 2.0, currently HTML 5.2 is in use and was released in 2017.
| Html version | Year |
| HTML | 1991 |
| HTML 2.0 | 1995 |
| HTML 3.2 | 1997 |
| HTML 4.01 | 1999 |
| XHTML | 2000 |
| HTML 5 | 2014 |
| HTML 5.1 | 2016 |
| HTML 5.2 | 2017 |
For the presentation and formatting of the text html uses tags and attributes.
- Tags: markup is all about tags and these tags are predefined in html and can be used accordingly. Tags are the html elements enclosed within angular brackets(<element name>).
Tags are of two types:
- Paired
- Unpaired
- Paired: these tags have two tags one for opening and other for closing the content. The opening tag is referred as the start tag and closing tag is called end tag just to indicate the start point and end point of the content.
<element-name>—-content——</element name>
Here, both the opening and closing tag are almost similar except the end tag has a forward slash in the beginning.
- Unpaired: these tag do not have any closing tag but can be written in any form i.e., either in the opening tag form or closing tag form.
And also with a forward slash in the end of element name.
Example:
<element-name> or </element name> or <element name/>
In last example, the slash is given after the element name means it is closing where it is opened that is why unpaired tags are also called self-closing tag.
the basic structure of html code
<!doctype html>
<html>
<head>
<title>——-</title>
</head>
<body>
` ——body———
</body>
</html>
- Attributes: are used to add some additional properties to the existing html tag. Attributes are always provided in the opening tag.
Example: <body style=”background-color:red”>—————</body>
the important attributes in html are:
- style : to add css to the html element
- src : to provide source of any file
- href : to provide reference of any page or file.
- alt : to provide description of an object.
HTML HEAD SECTION
this section is used to add external files to your html page.
the first major difference b/w head tag and body tag is that 90% of visible page data is enclosed within the body tag.
there are many elements that are used in head tag , the most often used tags are:
<title>: provide the title for the web page
<link> : to link external pages or resources in the current page(attribute:href=”path of resource” rel=”the relation to the html doc” type=”type of source”)
can use double quotes, single quotes or even no need to use the quotes. but for real time implementation double quotes for attributes values are recommended.
<meta> : to add the additional information about html document.
<script> : used to add scripting to the page, java-script, jquery etc.
<style> : use to add internal css to the page.
html has various tags to design the layout in an efficient and effective manner.
1.formatting tags
2.blocklevel tags
3.list tags
4.input tags
5.Media tags
formatting tags:
<h1> to <h6> : for heading
<p> : paragraph tag
<b> : bold text
<i> : italic text
<u> : underlined text
<strike> : strikethrough text
<del> : deleted text(same as strike)
<em> : emphasised text(same as italic)
<ins> : inserted text(same as underlined)
<sup> : superscript(for maths equations)
<sub> : subscript(for chemistry formulae)
<span> : for smaller text(used for slogans etc.)
<mark>: for marked text(highlighted text).
<br> : break the line
<hr> : horizontal line (to break the page).
blocklevel tags:
<div>: to divide the page into blocks(for creating layout).
<table> :to create table using all tag(th,tr,td,table)
<th>: stands for table heading.
<td> : stands for table data.
<tr> : stands for table row.
<iframe> : used to add another web page to the existing one.
List tags: to create list.
<ol> :ordered list
<ul> :unordered list
<li> : list item
<dl> :discription list
<dt> :data term
<dd> : data definition
input tags
- input tags: to provide the input box for some value and also to create buttons.
<input>: has various attributes such as.
- type :to specify which type of value to be inserted.
has various values to set: text,number,password,email,radio,checkbox,
submit,button,url,search,date,file,reset,color etc.
- min : to provide the minimum value.
- max :to provide the maximum value.
- value :to provide default value.
- placeholder:to show input message.
- Name: used to provide name to the input field.
<textarea> :to add comment area(attr: cols,rows).
<select> : to create a dropdown.
<options> : is subtag of select and provides options within dropdown.
Media tags
- Media tags: to add media elements such as video,images etc.
<audio>: subtag: source, attribute: href, add controls to show the play pause.
<video>: subtag: source, attribute: href, controls to show the control menu
<img>: attribute: src,alt,height,width.
there are many other useful tags in html to explore:
<a>: called as anchor tag to create link to jump on the other page.
attrubute are: href,target(values are _blank,_parent etc.)
You can learn all Programming Courses
SOME EXAMPLES:
Html list and div:
