HTML Overview Notes
HTML OVERVIEW
Q 1. What is HTML?
Ans:
HTML (Hyper Text Markup Language) is a markup language used for creating web pages and web applications.
Q 2. What is Hyper Text?
Ans:
Hyper Text means “Text within Text”. A text which has a link within it, is a hypertext.
Q 3. What is a markup language?
Ans:
A markup language is a language which uses tags to define elements within a document. It uses human readable tags for formatting, both the layout and style, within a text file. E.g. HTML, XHTML and XML.
Q 4. Who is Father of HTML?
Ans:
Tim Berners-Lee proposed HTML in 1989 – 1991.
Q 5. What are some common HTML editors?
Ans:
Notepad, Eclipse, CoffeeCup, Visual Studio etc.
Q 6. What are features of HTML?
Ans:
- It is a very easy and simple language. It can be easily understood and modified.
- It is a markup language so it provides a flexible way to design web pages along with the text.
- It is platform-independent because it can be displayed on any platform like Windows, Linux and Macintosh etc.
- It facilitates the programmer to add Graphics, Videos, and Sound to the web pages which makes it more attractive and interactive.
Q 7. What are tags?
Ans:
Tags are coded HTML commands which indicates how web page should be formatted and displayed. E.g a tag for a paragraph is
E.g a tag for a paragraph is
<p> </p>
Q 8. What is an attribute?
Ans:
Attribute is a special word used inside the OPENING tag to specify additional information to tag such as color etc. For e.g. an attribute to align paragraph is
<p align=”LEFT”>
Q 9. What is an element?
Ans:
Element represent one complete component with opening tag, closing tag and content in between them. They are of 2 types
- Container Element: These are ones which have tags in pairs, starting and closing tag.
E.g <p>… </p>
- Empty/Void Element: They require only the starting tag.
E.g<BR>, <HR>, <IMG> etc.
They can be written in 3 ways –<BR>, <BR></BR> and <BR/>
- Container Element: These are ones which have tags in pairs, starting and closing tag.
Q 10. What is a typical structure of HTML?
Ans:
Every HTML document follows this structure
> <HTML>
<HEAD>
</HEAD>
<BODY>
</BODY>
> </HTML>
Q 11. What is <HTML> tag?
Ans:
- <HTML> tag identifies the document as HTML document.
- It has an optional attribute to specify language
- Eg.
<html lang=”en”>
Q 12. What is <HEAD> tag?
Ans:
The <HEAD> tag contains metadata (information about webpage) and instructions for the browser that is not directly visible on the web page
HTML HEAD SECTION
- DOCTYPE: It tells the browser what version of HTML is used.
- It is at the top of the document. (note: it is not in head, not even within HTML tag)
- It is not an HTML tag.
- Title: Used to define the title of the document
- It defines a title in the browser tab.
- It provides a title for the page when it is added to favorites.
- It displays a title for the page in search engine results.
E.g. <title>Simply Coding </title>
- Link: Used to link an external style sheet to your webpage.
E.g. <link rel="stylesheet" href="external.css">
- Meta: Used to specify information about the HTML document like, character set, page description, keywords, author etc.
- Metadata will not be displayed on the page, but will be machine parsable.
- Metadata is always passed as name/value pairs.
E.g. <meta charset="UTF-8">
<meta name="keywords" content="HTML, Coding"> // Keyword for browser search
<meta name="author" content="rekha">
<meta name="description" content="Learning HTML"> //Description of web page
<meta name="viewport" content="width=device-width, initial-scale=1.0"> // to display content on multiple devices.
<meta http-equiv="refresh" content="30"> //refresh doc every 30 secs.
- Basefont: Used to specify default text-color, face and font-size for text on page
Eg. <basefont color="red" face="courier, serif" size="5">
- Style: Used to style the HTML page. Recommended to be part of CSS now.
*****************
HTML TEXT FORMATTING TAGS USED IN THE BODY
Q 13. What is <BODY> element?
Ans:
The <body> element contains all the contents of an HTML document, such as text, hyperlinks, images, tables, lists, etc. This is the entire content of the web page. It has following attributes
- Background: To display a background image
- Bgcolor: To specify background color
- Text: To specify text color
- Link: To specify link which has not been visited color
- Vlink: To specify link which has been visited color
- alink: To specify link color which appears briefly when clicked.
- Leftmargin: Specifies blank area which is left from the left edge of the page.
- Topmargin:Specifies blank area which is left from the top edge of the page.
HTML Text Tags
HTML formatting is a process of formatting text for better look and feel. There are 12 formatting tags
BOLD <b> …</b> :Content is shown in bold letters.
STRONG <strong> </strong>: Defines important text //has same effect as bold.
Italic <i>… </i> : Content is shown in italic letters
MARK <mark></Mark>: Content is shown highlighted or marked.
UNDERLINED <u></u>: Content is shown underlined.
STRIKE <strike></strike>: Content is shown displayed with strikethrough.
MONOSPACED <tt></tt>: Content is shown with each letter has the same width.
SUPERSCRIPED <sup></sup>: Content is displayed half char height above the other chars
SUBSCRIPT <sub></sub>: Content is displayed half char height below the other chars
DELETED <del></del>: Content is displayed as deleted text.
INSERTED <ins></ins>: Content is displayed as inserted text.
LARGER <big></big>: Content is displayed a font size larger.
SMALLER <small></small>: Content is shown a font size smaller.
Unclosed HTML Tags
Some HTML tags are not closed, for example br and hr.
<BR> Tag: br stands for break line, it breaks the line of the code.
It is required as all the extra lines and unnecessary spaces are removed by the browser.
<HR> Tag: HR stands for Horizontal Rule. This tag is used to put a line across the webpage.
It has attributes of size, width, noshade, color
g. <HR size = 12 width = “30%” noshade color = blue>
<!–– … ––> Tag: This is the comment tag used to only add detail in source code but is not rendered by the browser.
<IMG> Tag: Covered below
HTML Special Characters
There are some special characters that make up the HTML language. If we try to use one of these, the browser will try to interpret it as HTML. Therefore we need to use the entity name or entity number when we want to output any of these reserved characters.
| Character | Entity Name | Entity Name |
|---|---|---|
| “ | " | quotation mark |
| ‘ | & | Apostrophe |
| & | & | Ampersand |
| < | < | less-than |
| > | > | greater-than |
HTML Image Tag
- <img> : Used to display image on the web page.
- It has attributes SRC – It gives the image file URL. and ALT – It gives the alternate text. (Does not work in chrome)
Syntax - <imgsrc=".." alt="…"/>
Example - <imgsrc="img.jpg" alt="Good Morning"/>
- Contains attributes only
- Does not have closing tags
- Optional attribute – width and height used to display the image. Align attribute has options top, bottom, middle, left, right. (Recommended to apply CSS in HTML5)
- Can display GIF (Graphics Interchange Format), JPEG or XBM (X bitmap)
HTML Link Tags
- ANCHOR : defines a hyperlink which used to give the address of the destination page
Syntax -<a href = "..........."> Link Text </a>
Example - <a href="second.html">Click for Second Page</a>
- An unvisited link is displayed underlined and blue.
- A visited link displayed underlined and purple.
- An active link is underlined and red.
