See discussions, stats, and author profiles for this publication at:
[Link]
Introduction to HTML (Hyper Text Markup Language) - A Review Paper
Article in International Journal of Science and Research (IJSR) · May 2018
CITATION READS
1 11,799
1 author:
Aakanksha Sharma
Melbourne Institute of Technology
22 PUBLICATIONS 97 CITATIONS
SEE PROFILE
All content following this page was uploaded by Aakanksha Sharma on 31 May 2024.
The user has requested enhancement of the downloaded file.
Introduction to HTML (Hyper Text Markup
Language) - A Review Paper
Abstract: HTML is the Standard Markup Language. It is used for developing Web Pages. HTML is Hyper
Text Markup Language and is used for describing the structure of web pages. Various Tags are used in HTML
like "heading", "paragraph", "table", and so on. This paper discusses various HTML tags that are must for
developing web pages.
Keywords: Html Tags, Tables, Lists, Forms and Frames
1. Introduction
HTML is the Hyper Text Markup Language.
The following is a list of some of the most commonly used HTML tags:-
1) <! DOCTYPE HTML>:- It is used to describe the version of html.
2) <HTML>:- It is the root element in an Html Web page.
3) <HEAD>:- It is having information about the document.
4) <TITLE>:- It is used to provide title for the Web Document.
5) <BODY>:- It contains all the information in the document.
6) <H1>:- It defines heading of large size.
7) <P>:- It defines the paragraph.
a) Basic HTML Documents
1) To start any HTML document , it must be started with a document Type Declaration (DTD) i.e <!
DOCTYPE HTML>.
2) HTML document starts with the start tag i.e <HTML> and ends with the end tag i.e </HTML> 3) Content
of document is between the <BODY> and </BODY>.
b) Basic HTML Headings
1) HTML Headings are of 6 types and defined with <h1> to <h6> tags.
2) Heading <H1> defines the heading that is most important and of largest size.
3) Heading <H6> defines the heading that is least important and of smallest size.
4) Heading <H2>,<H3>,<H4>,<H5> are of size in between <H1> and <H6> i.e. (Size of
H6<H5<H4<H3<H2<H1).
c) Basic HTML Paragraphs, Links and Images 1) HTML Paragraphs are defined with the <p> and </p>.
2) Anchor tag <a> is used to define HTML Links.
3) Href Attribute is used to define the link’s destination.
4) Additional properties can be assigned with the use of different Attributes.
5) HTML Images are defined with the <img> tag.
6) Different attributes can be provided with image tag like the source file (src), alternative text (alt), width, and
height.
Paper ID: ART20182355
2. Related Work
HTML elements using Single applet to communicate with multiple HTML elements contained inside of multiple
categories on a page [1].
Volume 7 Issue 5, May 2018
[Link]
Licensed Under Creative Commons Attribution CC BY
DOI: 10.21275/ART20182355 1337
3. Review of HTML Attributes
HTML Elements can use different Attributes to provide information.
Basics of HTML Attributes:- 1) Attributes can be used in all HTML elements. 2) They are used to give
information about the HTML Elements.
3) They are defined by using start tag.
4) They are mostly defined in pairs like name/value pairs
e.g.: name="value”.
5) The Lang Attribute is used to declare a language.
6) The title Attribute is used to display as a tooltip when you mouse over the paragraph.
7) The href Attribute is used to specify the link address. It uses the <a> tag.
E.g. <a href="[Link] Link for Google</a>
8) Size Attributes is used to define the size in terms of width and height.
E.g.<img src="[Link]" width="147" height="112">
9) The alt Attribute is used to provide alternative text to be used in case image is unable to be displayed.
E.g.<img src="[Link]" alt="[Link]" width="104" hei ght="142">
4. Review of HTML Elements
Various HTML Elements are used and they have start and the end tag and in between them the content is inserted.
E.g. <tagname> Body or content </tagname>
Nested HTML Elements
Nested HTML Elements are those in which elements are within the elements. Almost all HTML documents are of
Nested HTML Elements.
E.g In this 4 elements are used.
<!DOCTYPE html>
<html>
<body>
<h1>Table and chair</h1> <p>Table Description</p>
</body>
</html>
5. Review of HTML Styles
HTML Style attribute is used to provide properties in the document. Syntax is <tagname
style="property:value;">
Different Type of Styles:-
1. HTML Background Color
The background-color property is used to provide background color to an document. E.g. <body
style="background-color: blue;">
<h1>Table and Chair</h1>
<p>Table Description</p>
</body>
2. HTML Text Color
The color property is used to text a color in the document. E.g. <h1 style="color:Red;">Table and chair </h1>
<p style="color:Green;">Table Description. </p>
3. HTML Fonts
The font-family property is used to describe the type of font used in the document.
E.g. <h1 style="font-family:times new roman;">Table and chair</h1>
Volume 7 Issue 5, May 2018
[Link]
Licensed Under Creative Commons Attribution CC BY
DOI: 10.21275/ART20182355 1338
<p style="font-family:times new roman;">Table
Description.</p>
4. HTML Text Size
The font-size property is used to define the size of the text in an HTML Document.
E.g.<h1 style="font-size:100%;">Table and chair</h1>
<p style="font-size:150%;">Table Description.</p>
5. HTML Text Alignment
The text-align property is used to text alignment in an HTML Document.
E.g. <h1 style="text-align:Right;">Right Heading</h1>
<p style="text-align:Right;">Right paragraph.</p>
6. HTML Tables
<Table> tag is used to define an HTML Table. It uses some tags for creating rows in the table and for adding data
elements in the table.
Some of them are:
1) <TR>:- It is used to denote Table Row.
2) <TH>:-It is used to denote Table Header.
3) <TD>:- It is used to denote the Table Data.
E.g.:<table style="height:100%">
<tr>
<th>Name</th>
<th>Roll NO</th>
<th>Age</th>
</tr>
<tr>
Paper ID: ART20182355
<td>ABC</td>
<td>2101</td>
<td>27</td>
</tr>
<tr>
<td>CDE</td>
<td>2102</td>
<td>28</td>
</tr>
</table>
1) Adding Border to an HTML Table
Border is required to be defined otherwise it will be displayed without Borders. CSS border property is used to
set the borders.E.g. table, th, td { border: 1px solid Red;
}
2) Collapsing the Borders in an HTML Table
CSS Border-collapse Property is used to collapse the border into one border. table, th, td { border: 1px solid
Red; border-collapse: collapse;
}
Volume 7 Issue 5, May 2018
[Link]
Licensed Under Creative Commons Attribution CC BY
DOI: 10.21275/ART20182355 1339
3) Cell Padding in an HTML Table
It is used to define the space between the cell content and its borders. th, td { padding: 35px;
}
4) Border Spacing in an HTML Table
It is used to provide the spacing between the cells. CSS border-spacing property is used to set the spacing
between borders. E.g. table { border-spacing: 15px;
}
5) Colspan in HTML Table
It is used to merge the columns by using the colspan attribute.
E.g.<table style="width:100%">
<tr>
<th>Name</th>
<th colspan="2">Table</th>
</tr>
<tr>
<td>ABC</td>
<td>55</td>
<td>58</td>
</tr>
</table>
6) Rowspan in an HTML Table
It is used to merge the rows by using the rowspan attribute.
E.g. <table style="width:100%">
<tr>
<th>Name:</th>
<td>ABC</td>
</tr>
<tr>
<th rowspan="2">Tableth>
<td>55</td>
</tr>
<tr>
<td>58</td>
</tr>
</table>
7) Caption in an HTML Table
It is used to provide title to an HTML Table by using <caption> tag.
E.g.<table style="width:100%">
<caption>Record</caption>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>JA</td>
<td>20</td>
</tr>
<tr>
<td>Fy</td>
<td>50</td>
Volume 7 Issue 5, May 2018
[Link]
Licensed Under Creative Commons Attribution CC BY
DOI: 10.21275/ART20182355 1340
</tr>
</table>
7. HTML Lists
Lists are used to define the elements in an order or without order. It is of two types:
1) An Unordered List:
It starts with the <ul> tag and ends with the </ul> tag. By default the list items will use the bullets.
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
It will be displayed as follows:-
• A
• B
• C
2) An Ordered List:
It starts with the <ol> tag and ends with the </ol> tag. By default items will use numbers.
<ol>
<li>A</li>
<li>B</li>
<li>C</li>
</ol>
It will be displayed as follows:-
1. A
2. B
3. C
3) Nested HTML Lists
It is the list within the list.
View publication statPapers ID: ART20182355
<ol>
<li>A</li>
<li>B
<ul>
<li>C</li>
<li>D</li>
</ul>
</li>
<li>E</li>
</ol>
1. A
2. BC
D
8. Future Scope
Volume 7 Issue 5, May 2018
[Link]
Licensed Under Creative Commons Attribution CC BY
DOI: 10.21275/ART20182355 1341
HTML Tags are used in many other forms which I have not added in this Review Paper. It can be extended by
using HTML in Forms, Frames, DTD, CSS, and it can also be discussed with the XML. It’s future scope is to
introduce some advanced HTML tags.
9. Acknowledgment
The success of this Paper would have been uncertain without the help and guidance of dedicated person. Thus as
a token of appreciation of their effort in making it a success, With a deep sense of gratitude I would like to
extend thanks to Mr. Ankush Sharma for their kind cooperation in the preparation of this Paper. Last but not the
least; we would like to convey our heartfelt gratitude to our beloved parents, without their constant inspiration
throughout our career we would not have reached this stage.
References
[1] Håkon Wium Lie, Janne Saarela, “Multipurpose Web publishing using HTML, XML, and CSS”,1999.
Volume 7 Issue 5, May 2018
[Link]
Licensed Under Creative Commons Attribution CC BY
DOI: 10.21275/ART20182355 1342
