Introduction to HTML
- HTML stands for Hypertext Markup Language.
- HTML is a computer language that allows creating documents on the World Wide Web (WWW).
- In other words, it is a computer language that allows creating a website (collection of webpage’s) that can be viewed by anyone in the web browser who has an internet connection.
- It defines the structure and layout of web pages (documents) by using different tags and attributes.
- Hypertext – It is a method by which you move around the web, by clicking on the special text called hyperlinks. Hypertext specifies how the web pages (HTML documents) are linked together.
- Hyper – means non-linear i.e. you can go to any place on the internet whenever you want to by clicking on the links. There is no set order to do things.
- Markup Language – The HTML tags are used to markup the text document i.e. tags mark the text or content inside as a certain type of text or content. These markups (tags) tell a web browser how to structure the content to display or render it.
How does it work?
- HTML document is also called as a webpage, which is a text file containing various tags.
- It is saved as HTML file which has an extension as “htm” or “html”.
- The saved file can be viewed through a web browser like Internet Explorer, FireFox, Opera etc.
- The browser reads the file and translates the text into the visible form.
- When the webpage is displayed in the browser, the tags themselves don’t appear but their effects are seen on the screen.
- It is used to create web pages.
- It is used to arrange images on a web page.
- It is used to create interactive forms.
- It is used to link documents.
- It is used to load or include scripts written in scripting languages like JavaScript.
- It is used to load or include Cascading Style Sheets (CSS).
What are HTML tags and HTML attributes?
- HTML Tags (HTML Elements)
- HTML tags are referred to as HTML elements.
- HTML tags can be viewed as keywords within a web page that define how the browser must format and display the content specified within it.
- HTML tags are not case sensitive: <B> means same as <b>
- These tags surrounded by angle braces <tagname>
- Eg <html>
- HTML tags can be nested also.
What do you mean by empty and container tags in HTML?
Container HTML Elements - What are container tags?
- Most HTML tags come in a pair, where the first tag in a pair is called start or opening tag and the second tag in a pair is called as the end or closing tag. The tags which have both start and end tags are called container tags.
- End or closing tag is written like start tag with the forward slash before the tagname.
- Syntax: <tagname> content </tagname>
- Eg. <b> Hello </b>
- Other container tags are <html></html>, <body></body>, <head></head>, <title> </title>
Empty HTML Elements - What are empty tags?
- Some tags have no content within it. Such tags are called empty tags.
- Eg <br> - it has no closing tag.
- Empty tags can be closed in the start or opening tag itself.
- Syntax: <tagname/>
- Eg: <br/>
- Other empty tags are <link>, <meta>, <hr>, <base>
HTML Attributes
- Attributes allow customizing a tag/element i.e. they are used only when one wants to change something about the default way a tag is displayed in the browser.
- Attributes provide additional information about the tag/element.
- Most HTML tags have attributes.
- Attributes are defined within the opening/start tag.
- Attributes are often assigned a value using “=” sign.
- Syntax: name = ”value”
- Eg: <p align=”center”>This is paragraph 1 </p>
Generic Attributes
Here's a table of some other attributes that can be used with many of the HTML tags.
| Attributes | Values | Description |
| align | right, left, center | Specifies horizontal alignment of the content within an element |
| valign | top, middle, bottom | Specifies vertical alignment of the content within an HTML element |
| bgcolor | numeric, hexidecimal, RGB values | Specifies a background color behind an element like <body>, <table>, <tr> etcSpecifies a background color behind an element like <body>, <table>, <tr> etc. |
| background | URL (path) | Specifies a background image behind an element like <body>, <table>, <tr> etc. |
| id | User Defined | Specifies the unique name for an element, helpful for use with Cascading Style Sheets |
| class | User Defined | Specifies the group name to which element belongs to, helpful for use with Cascading Style Sheets |
| width | Numeric Value | Specifies the width of tables, images, table cells, etc. |
| height | Numeric Vlaue | Specifies the height of tables, images, table cells, etc. |
| title | User Defined | Displays the text as a tooltip when mouse hovers over the element. |
Basic HTML Document Structure – What is the simple structure of HTML?
- A typical HTML document starts and ends with <html> and </html> tags. These tags tell browser that entire document is created in HTML and treat as HTML document.
- Inside these tags, the document is further divided into two sections
- 1) Header section – specified by using <head> </head> elements. It contains information about the document such as the title of the document, the author of the document and so on. The information inside this tag is not displayed to the outside world.
- 2) Body section – specified by using <body> </body> elements. It contains the actual content of the document that is seen by the user on the screen.
A typical HTML document will have following structure
<html>
<head> document header related tags like <title> </title>
</head>
<body> document body related tags <p> </p>
</body>
</html>
Example
