Notification of Exam 2024 (HTML)
Click Here for Notification
Notification of Exam 2024 (HTML)
Introduction
→Everything you see on the web is a document written in a special language called HTML or Hypertext Markup Language.
→ This language tells browsers like Mosaic or Netscape or Internet Explorer how to display text, pictures, and links on the screen.
HTML and its Capabilities
HTML is:
- Web page layout language.
- Hyperlink specification language.
- Markup language.
HTML is not:
- Word processing tool.
- Programming language.
History of HTML
-
Tim Berners-Lee, a physicist at CERN (the European Organization for Nuclear Research), devised a way in the late '80s and early '90s to share documents over the internet.
-
Before that, internet communication had been limited to plain text, using technologies such as email, FTP (File Transfer Protocol), and Usenet-based discussion boards. This was in the form of a markup language called HTML.
-
For its first five years (1990 – 1995), HTML went through a number of revisions and experienced a number of extensions.
-
Then HTML 3.02 and HTML 4.01 versions were released in the late '90s. The current approved standard of HTML is HTML 5, which was released in 2012.
| Version | Year |
|---|---|
| HTML | 1991 |
| HTML+ | 1993 |
| HTML 2.0 | 1995 |
| HTML 3.2 | 1997 |
| HTML 4.0 | 1999 |
| XHTML 1.0 | 2000 |
| HTML 5 | 2012 |
| XHTML 5 | 2013 |
Writing HTML Documents
HTML Documents structure:
💻
<html>
<head>
<title>Document Title</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is a simple HTML page.</p>
</body>
</html>
Note:-
HTML is not case-sensitive, i.e., HTML tags can be written in capital as well as small letters, Eg:- <head>, <head>, or <HEAD> are the same in HTML.
The <HTML> Tag
The <HTML> tag identifies the document as an HTML document. An HTML document begins with <HTML> and ends with </HTML>. Here, <HTML> starts the HTML tag, and </HTML> ends the HTML tag.
💻<HTML> .....HTML Document content here </HTML>
The <HEAD> Tag
The <HEAD> tag contains information about the document, including its title, scripts used, style definitions, and document description. The <HEAD> tag is placed between <HTML> tags.
💻
<HTML>
<HEAD>
Header information comes here
</HEAD>
</HTML>
The <TITLE> Tag
This tag contains the document title. The title specified inside the <TITLE> tag appears on the browser's title bar. The <TITLE> tag is placed between the opening and closing <HEAD> tags.
💻
<html>
<head>
<title>Document Title here</title>
</head>
<body>
All the tags, attributes, and information in the document body go here
</body>
</html>
The <BODY> Tag
The <BODY> tag encloses all the tags, attributes, and information to be displayed on the web page. The <BODY> tag is placed below the closing </HEAD> tag and above the closing <HTML> tag.
Document Structure in HTML 5:
💻
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Document Title here</title>
</head>
<body>
All the tags, attributes, and information
in the document body go here
</body>
</html>
Document structure in HTML 5:
If you are creating an HTML document, then the document structure should be as given:
💻<!DOCTYPE html> <html lang="en"> <meta charset="utf-8"> <title> ---------- </title> ---------- </head> <body> ---------- </body> </html>
If you compare HTML 5's document structure with the earlier given HTML document structure, you'll notice certain changes, like:
- Additional <!DOCTYPE html> tag
- Different way of using <html> tag language="en"
- Additional (though optional but recommended) <meta charset="utf-8">
- All other tags are similar.
- Additional <DOCTYPE> tag: <!DOCTYPE html>
- Different way of using <HTML> tag: <html>
- Additional (though optional but recommended) <meta charset>: <meta charset="utf-8">
- All other tags remain similar.
Writing HTML Documents
Creating an HTML Document
To create an HTML document using a text editor like Notepad:
- Open a text editor by clicking on the Start button, navigating to All Programs, and then selecting Accessories and Notepad.
- A Notepad window will appear. Type the HTML code here.
- Next, you need to save the file with an HTML extension.
Saving the File
Save the file as follows:
- Click on File → Save As command.
- In the "Save as type" box, choose All Files, and save it as a text document with the
.htmlextension (e.g.,first.html). - Click the Save button.
Viewing an HTML Document in a Browser
To view an HTML document in a browser:
- Open a web browser like Mozilla Firefox or Google Chrome.
- Press Ctrl + O or click on the File → Open command.
- A file open dialog will open. Find your HTML document and click the Open button at the bottom.
Alternatively, you can enter the HTML document's path in the browser's address bar and hit Enter to view it.
Example paths:
C:/my-document/first.htmlE:/work/first.html
The browser will display the webpage you have created.
Basic Terminology
Tag
It is a keyword used to specify a certain kind of formatting and display of content. A tag is written within angle brackets <>.
For example:
<TITLE><HTML><BODY>All of these are tags, enclosed in angle brackets.
Element
An element represents a complete individual component. An element consists of:
- A start tag (opening tag)
- An end tag (closing tag)
- Content between the start and end tags.
For example:
<TITLE> my first webpage </TITLE>
In the example above,
<TITLE> is the start tag, </TITLE> is the end tag, and "my first webpage" is the content between the tags. This entire structure is an element.
Attribute
An attribute allows the addition of extra information to an element. Attributes appear inside the opening tag and have specific values written inside quotation marks. For example:
<HTML Lang="en">
In this example,
the attribute "Lang" has the value "en," specifying the language as English for the HTML tag.
Types of HTML Elements
In HTML, there are two main types of elements:
- Container Elements (Pair Elements): These elements require both a starting and an ending tag.
Examples include: <HTML> ... </HTML><HEAD> ... </HEAD><TITLE> ... </TITLE><B> ... </B><I> ... </I><CENTER> ... </CENTER>- Empty Elements (Void Elements): These elements require only a starting tag, and they don't have an ending tag.
Examples include: <BR><BASE><BASEFONT><HR><IMG><LINK>
→Empty elements are sometimes referred to as void elements and can be defined in different ways.
Empty or void elements can be represented in three ways:-
- Just specify the start tag:
<BR>
<BASE>
- Include no content inside start and end tags:
<CODE></CODE>
- Use self-closing tags. Self-closing tags combine the start and end tags into one:
<CODE/>
<BR/>
HTML Tag Structure:(Rules)
The structure of an HTML tag is discussed in the following lines:
- Tags are enclosed within angle brackets (< and >).
- An end tag has the same name as the start tag but with an additional slash (/) before the tag name.
- Tag attributes, if any, come after the tag name and are separated by one or more space characters or return characters.
- An attribute's value, if any, is given after the equal sign (=) within quotes, generally after the attribute name.
For example:
<A href="http://www.netscape.com/yellowpages"> Basic HTML tags
The HTML Tags (The Lang Attribute)
The Lang attribute of the <HTML> tag specifies the language used within the document.
For example:
<HTML Lang="en">
Additional attributes include:
| Code | Languages |
|---|---|
| en | English |
| en-us | US English |
| en-uk | UK English |
| fr | French |
| de | German |
| ar | Arabic |
| hi | Hindi |
The HEAD Tag (Document Header)
The <HEAD> tag contains information about the document, including its title, scripts, style definitions, and document description.
<HEAD> <META charset="utf-8" /> </HEAD>
In HTML 5, you define the character set through the charset attribute of the META tag, and UTF-8 is the preferred charset.
Writing HTML Documents
Creating an HTML Document
To create an HTML document using a text editor like Notepad:- Open a text editor by clicking on the Start button, navigating to All Programs, and then selecting Accessories and Notepad.
- A Notepad window will appear. Type the HTML code here.
- Next, you need to save the file with an HTML extension.
- Click on File → Save As command.
- In the "Save as type" box, choose All Files, and save it as a text document with the .html extension (e.g., first.html).
- Click the Save button.
To view an HTML document in a browser:
- Open a web browser like Mozilla Firefox or Google Chrome.
- Press Ctrl + O or click on the File → Open command.
- A file open dialog will open. Find your HTML document and click the Open button at the bottom.
- Alternatively, you can enter the HTML document's path in the browser's address bar and hit Enter to view it. Example paths: C:/mydocument/first.html
Brief Overview of HTML Tags and Attributes
html:The root element that wraps all content on the page.head:Contains meta-information about the HTML document, such as title, character set, etc.title:Sets the title of the HTML document, which appears in the browser tab.body:Contains the content of the HTML document, such as text, images, links, etc.
Unordered List (ul):
ul: Defines an unordered list.
type Attribute: Specifies the type of bullet used for list items.
Values include:
- "disc" (default): A filled circle.
- "circle": An open circle.
- "square": A filled square.
Attributes for ul:
type:Specifies the type of bullet (e.g., "disc", "circle", "square").
li: Represents a list item in ordered or unordered lists.
Example:
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
Ordered List (ol)
ol: Defines an ordered list.
Attributes for ol:
start:Specifies the starting value of the ordered list.type Attribute:Specifies the type of numbering used for list items. (e.g., "1", "A", "a", "I", or "i").
Values include:
- "1" (default): Arabic numerals (1, 2, 3, ...).
- "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, ...).
Attributes for ol:
start:Sets the starting value for the numbering in an ordered list.
Example:
<ol start="3">
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ol>
Description List (dl)
dl Element: Defines a description list.
dt Element: Represents a term (name) in a description list.
dd Element: Represents the description or definition of the term in a description list. Define details
li Element: Represents a list item within an unordered list.
Example:
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
HTML Styles
Font Tag ()
face Attribute: Specifies the font family for the text.
Example:
<font face="Arial">This is Arial font.</font>
size Attribute: Sets the size of the text. The value can be a number from 1 to 7, where 3 is the default size.
Example:
<font size="4">This is larger text.</font>
color Attribute: Defines the text color. The value can be a color name or a hexadecimal RGB value.
Example:
<font color="blue">This is blue text.</font>
Inserting Images (<img>)
src Attribute: Specifies the source URL (file path or URL) of the image.
Example:
<img src="image.jpg" alt="Description" width="300" height="200">
alt Attribute: Provides alternative text for the image, which is displayed if the image cannot be loaded.
width Attribute: Sets the width of the image.
height Attribute: Sets the height of the image.
Superscript (<sup>) and Subscript (<sub>)
sup Element: Represents text that is to be superscripted (raised).
Example: E=mc2
sub Element: Represents text that is to be subscripted (lowered).
Example: H2O
Complete Example
<!DOCTYPE html>
<html>
<head>
<title>Your Title Here</title>
<style>
body {
background: #ffffff; /* Background color */
color: #000000; /* Text color */
}
a:link { color: #0000ff; /* Link color */ }
a:visited { color: #800080; /* Visited link color */ }
a:hover { color: #ff0000; /* Hovered link color */ }
</style>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<b>This is bold text.</b>
<i>This is italicized text.</i>
<u>This is underlined text.</u>
<ul type="circle">
<li>Unordered List Item 1</li>
<li>Unordered List Item 2</li>
</ul>
<ol start="3" type="I">
<li>Ordered List Item 3</li>
<li>Ordered List Item 4</li>
</ol>
<dl>
<dt>Definition Term 1</dt>
<dd>Definition Description 1</dd>
<dt>Definition Term 2</dt>
<dd>Definition Description 2</dd>
</dl>
<br>
<hr>
<!-- Comment: This is a comment -->
</body>
</html>
Font Tag (<font>)
face Attribute: Specifies the font family for the text.
Example: This is Arial font.
size Attribute: Sets the size of the text. The value can be a number from 1 to 7, where 3 is the default size.
Example: This is larger text.
color Attribute: Defines the text color. The value can be a color name or a hexadecimal RGB value.
Example: This is blue text.
Inserting Images (<img>)
src Attribute: Specifies the source URL (file path or URL) of the image.
Example: 
alt Attribute: Provides alternative text for the image, which is displayed if the image cannot be loaded.
width Attribute: Sets the width of the image.
height Attribute: Sets the height of the image.
Superscript (<sup>) and Subscript (<sub>)
sup Element: Represents text that is to be superscripted (raised).
Example: E=mc2
sub Element: Represents text that is to be subscripted (lowered).
Example: H2O
