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.
- 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:- 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>
.png)