The Hyper Text Markup Language (HTML)
General Information:
-> HTML is a formatting language that's used for static web page design.-> It's not a programming language.-> There are mainly three types of World Wide Web (WWW) documents or pages.-> Static web pages, Dynamic web pages and Active web pages.-> JavaScript, Cascading Style Sheet (CSS) and Hypertext Pre-processor (PHP) also known as Personal Home Page, uses for designing the Dynamic / Active web pages.-> XML: Extensible Markup Language: It has the same functionality as like HTML, but XML provides flexibility to the developer. It is used to transport data from one application or script to another.
- HTML Tags:
-> The html tags are categorized into a container tag or an empty tag.
- Container Tags:
Tags comes in pair with an opening tag and closing tag, called container tags.-> Opening tags indicating the start of the formatting. e.g. <b> Opening tag for bold the text.-> Closing tags indicating the end of the formatting. e.g. </b> Closing tag for bold the text.
- Empty Tags:
In contrast, an empty tag has only an opening tag.e.g. <br> Break tag: It is used to break the line or new-line.
- Structure of HTML:
Note: HTML is not case-sensitive. Its tag may be written in upper case or lower case.<html><comment> This section used to identify the page as a web page </comment><head> <title> The optional Section will appear in the title bar of the web browser. </title> </head><body>The actual content of the document.</body></html>
- Where are HTML tags written?
-> Open a text editor / notepad.
-> Write the above tags to your opened text editor
-> Save the text editor using (ctrl+s) as "filename.html" in any folder of your computer.
-> Go to the folder.
-> "double click" on "flilename.html", it will be displayed in the browser.
- Advantages of HTML:-
-> It can be used in any operating system platform.
-> HTML is compatible with all major browsers and widely supported by web development tools.
-> Hyperlinking one document to another is easy in HTML.
-> It is simple to edit and fast to download documents.
-> HTML is free and independent of platforms and devices.
- Limitations:-
-> HTML is neither a programming language nor a desktop publishing tool.
-> The displayed file is static in nature and cannot be updated by any process.
- Comment tag <comment>:-
-> It is used to add comments in an HTML document. Comments are ignored by the browser and do not appear in the browser window.
-> The comment tag <!-- and --> can be used to enclose the text for the comment as shown below:
<!-- Type your comment here -->
-> The tag <comment> can also be used to insert a comment as shown below:
<comment> Type your comment here </comment>
- Line break tag <br>:-
-> The <br> (line break) tag is an empty tag used to insert a line break in an HTML document.
-> The web browser interprets the <br> tag as a request to insert a line break. It moves the cursor to the beginning of the next line before displaying the following text.
eg.- <html> <head> <title> Use of break tag </title>
</head> <body>
What's Your Name ? <br> Mr. Jack . <br> OR <br> Ms. Jack .
</body>
</html>
- Paragraph tag <p>:-
-> The pair of paragraph tags <p> and </p> are used to enclose and demarcate a section of text as a paragraph.
-> It is a container tag used to create a paragraph. By default, the browser leaves a blank line (space) before and after each paragraph, creating spacing between paragraphs.
-> The align attribute of the <p> tag is used to align the paragraph text to the left, center, or right of the web page.
eg.- <p align = center> Center Aligned Text </p>
- Heading or headline tags <h1> to <h6>:-
-> Heading tags are container tags used to display headings in different sizes.
-> There are six predefined heading levels, represented by the tags <h1>, <h2>, ..., <h6>.
-> Among these, <h1> defines the largest size heading, while <h6> defines the smallest size heading.
-> The align attribute of the heading tag is used to align the heading text to the left, center, or right of the web page.
eg.- <h1 align = center> Center aligned Heading </h1>
- Line break tag <br>:-
<br> (line break) tag is an empty tag used to insert a line break in an HTML document.<br> tag as a request to insert a line break. It moves the cursor to the beginning of the next line before displaying the following text.- Paragraph tag <p>:-
align attribute of the <p> tag is used to align the paragraph text to the left, center, or right of the web page.<h1>, <h2>, ..., <h6>. <h1> defines the largest size heading, while <h6> defines the smallest size heading.align attribute of the heading tag is used to align the heading text to the left, center, or right of the web page.- Structure of Headline Tags:-
Open Notepad and type the example and save the file as work.html.
<html>
<head>
<title> Different Heading Sizes </title>
</head>
<body>
<h1 align = center> Text in heading size 1 </h1>
<h2 align = center> Text in heading size 2 </h2>
<h3 align = left> Text in heading size 3 </h3>
<h4 align = left> Text in heading size 4 </h4>
<h5> Text in heading size 5 </h5>
<h6> Text in heading size 6 </h6>
</body>
</html>
Open Notepad and type the example and save the file as work.html.
<html>
<head>
<title> Different Heading Sizes </title>
</head>
<body>
<h1 align = center> Text in heading size 1 </h1>
<h2 align = center> Text in heading size 2 </h2>
<h3 align = left> Text in heading size 3 </h3>
<h4 align = left> Text in heading size 4 </h4>
<h5> Text in heading size 5 </h5>
<h6> Text in heading size 6 </h6>
</body>
</html>
Output:-
- Text formatting tags:
<b>...</b> Used to make text appear in bold.<i>...</i> Used to make text appear in italic.<u>...</u> Used to make text appear underlined.<sup>...</sup> Used to make text appear as superscript.<sub>...</sub> Used to make text appear as subscript.<tt>...</tt> Used to make text appear in typewriter text (using mono-spaced font).<big>...</big> Used to make text appear in a larger font as compared to the rest of the text.<small>...</small> Used to make text appear in a smaller font as compared to the rest of the text.<em>...</em> Used to emphasise the text (it is a logical tag similar to the italic tag).<strong>...</strong> Used to emphasise the text more strongly than <em> (it is similar to bold tag).
eg.- <html>
<head>
<title> Use of text formatting tags </title>
</head>
<body>
<b><i><u> Water Facts </u></i></b><br>
Formula is <b>H<sub>2</sub>O</b><br>
Molecular Wt. is <b><big>18</big></b><br>
Melting Pt. <big>0<sup>o</sup>C</big><br>
Boiling Pt. <big>100<sup>o</sup>C</big><br>
</body>
</html>
Output:-
Water Facts
Formula is H₂OMolecular Wt. is 18
Melting Pt. 0°C
Boiling Pt. 100°C
- Working with Tables:-
The <table> tag is used to create a table: <table>...</table>. It is a container tag used to display data in tabular form.
Tags associated with the <table> tag are as follows:
- <caption> tag to create a table caption.
- <tr> tag to create a table row.
- <th> tag to create a column header.
- <td> tag to insert data within each cell in the table.
border attribute is used to set the border width of the table.bgcolor attribute is used to set the background color of all the table cells.align attribute is used to specify the alignment of the table on the page.-> A combination of attributes makes the <table> tag very useful.
eg.- <table border = 2 bgcolor = yellow align = center>...</table>
- Structure of Table Tag:-
<table> tag very useful.Open Notepad and type the example and save the file as work.html.
<html>
<head>
<title> Creating a simple table </title>
</head>
<body>
<table border = 2 align = center>
<caption> Hostel Accommodation <caption>
<tr>
<th> Type </th>
<th> Rate </th>
<th> Available </th>
</tr>
<tr>
<td> Single Bed </td>
<td> 500/- </td>
<td> 25 </td>
</tr>
<tr>
<td> Double Bed </td>
<td> 800/- </td>
<td> 15 </td>
</tr>
</table>
</body>
</html>
Output:-
- Working with Scrolling Text:- <marquee>
<marquee> ... </marquee> tag:-
It is a container tag used to display scrolling (moving) text on a web page. A line of scrolling text can be inserted anywhere on a web page. By default, the text scrolls from right to left.
- direction and bgcolor Attributes of the <marquee> Tag:
bgcolor attribute of the <marquee> tag sets the background color of the scrolling text area.- Structure of <MARQUEE> Tag:-
Open Notepad and type the example and save the file as work.html.
<HTML>
<HEAD>
<TITLE> Using Scrolling Text </TITLE>
<HEAD>
<BODY>
<MARQUEE> Scrolling text from right to left </MARQUEE>
<MARQUEE DIRECTION = RIGHT> Scrolling text from left to right </MARQUEE>
</BODY>
</HTML>
- Ordered and Unordered List tags <ol> and <ul>:
Ordered List (<ol>...</ol>): A list in which each item is displayed with numbers or letters.
Unordered List (<ul>...</ul>): A list in which each item is displayed with bullets instead of numbers.
-> Each item in the list is represented using the <li> (List Item) tag inside the <ol> or <ul> tags.
-> The <li> tag is a container (paired) tag, not an empty tag. It has an opening tag (<li>) and a closing tag (</li>) and contains the content of each list item.
Example:
<ol>
<li> Apple </li>
<li> Banana </li>
<li> Mango </li>
</ol>
<ul>
<li> Red </li>
<li> Green </li>
<li> Blue </li>
</ul>- type attributes of the <ul> and <ol> tags:
The type attribute is used to specify the style of numbering in an ordered list (<ol>) or the style of bullets in an unordered list (<ul>).
"A" – Uppercase letters (A, B, C, ...)
"a" – Lowercase letters (a, b, c, ...)
"I" – Uppercase Roman numerals (I, II, III, ...)
"i" – Lowercase Roman numerals (i, ii, iii, ...)
-> For an unordered list (<ul>), the possible type values are:
"circle" – Hollow circle
Example:
<ol type = A>
<li> Apple </li>
<li> Banana </li>
<li> Mango </li>
</ol>
<ul type = circle>
<li> Red </li>
<li> Green </li>
<li> Blue </li>
</ul>- start attribute of the <ol> tag:
-> The numeric value represents the position in the selected numbering style.
For example, if type = a and start= 4, the list starts from 'd' (the fourth letter of the alphabet).
Example:
Output:
d. HTML
e. CSS
f. JavaScript
Note: The start attribute always takes a number, even when the list uses letters (a, A) or Roman numerals (i, I). For example:
type="A" start="3" -> C
type="i" start="5" -> v
type="I" start="4" -> IV
- Difference between Ordered and Unordered List:
.png)