i
1.INTRODUCTION:
A HTML
Tim Berners-Lee invented www in 1989, He developed HTML in 1991,
Later HTML is taken over by W3C(world wide web consortium)
HTML5 is the latest version
1. Introduction to HTML
● HTML stands for Hyper Text Markup Language
● HTML is the standard markup language for creating Web pages
● HTML describes the structure of a Web page
● HTML consists of a series of elements
● HTML elements tell the browser how to display the content
HTML Page Structure
Below is a visualization of an HTML page structure:
2 Browsers and HTML
i
The purpose of a web browser (Chrome, Edge, Firefox, Safari) is to read HTML
documents and display them correctly.
A browser does not display the HTML tags, but uses them to determine how to
display the document
Chrome Edge Mozilla Firefox Safari Opera
3 Editor’s Offline and Online
Web pages can be created and modified by using professional HTML editors.
However, for learning HTML we recommend a simple text editor like Notepad
(PC) or TextEdit (Mac).
Simple text editor is a good way to learn HTML.
1. Open notepad file: windows+R>type notepad>click OK
4 Tags, Attribute and Elements
HTML Tags & Elements
i
The HTML element is everything from the start tag to the end tag:
<tagname>Content goes here...</tagname>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
.
.
.
.
<li>List Items</li>
<form></form> etc.,
Html Attributes:
HTML attributes provide additional information about HTML elements.
Eg: <img src="mypic.jpg" width="500" height="600">
<a href=”http://www.google.com” target=”blank”>Click Here</a>
5 Doctype Element
All HTML documents must start with a <!DOCTYPE> declaration.
The declaration is not an HTML tag. It is an "information" to the browser about
what document type to expect.
In older documents (HTML 4 or XHTML), the declaration is more complicated
because the declaration must refer to a DTD (Document Type Definition).
HTML 4.01:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
i
XHTML 1.1:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
6 Comments
HTML comments are not displayed in the browser, but they can help
document your HTML source code.
<!-- Write your comments here -->
7 Formatting Text
Formatting elements were designed to display special types of text:
● <b> - Bold text
● <strong> - Important text
● <i> - Italic text
● <em> - Emphasized text
● <mark> - Marked text
● <small> - Smaller text
● <del> - Deleted text
● <ins> - Inserted text
● <sub> - Subscript text
● <sup> - Superscript text
8) Lists and Links
HTML lists allow web developers to group a set of related items in lists.
An unordered HTML list:
● Item
● Item
● Item
● Item
An ordered HTML list:
i
1. First item
2. Second item
3. Third item
4. Fourth item
Example:
<!DOCTYPE html>
<html>
<body>
<h2>An unordered HTML list</h2>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</body>
</html>
Output:
An unordered HTML list
● Coffee
● Tea
● Milk
<!DOCTYPE html>
<html>
<body>
<h2>An ordered HTML list</h2>
i
<ol>
<li>Pencil</li>
<li>Eraser</li>
<li>Pen</li>
</ol>
</body>
</html>
Output:
1. Pencil
2. Eraser
3. Pen
Description List:
A description list is a list of terms, with a description of each term.
The <dl> tag defines the description list, the <dt> tag defines the term (name),
and the <dd> tag
Example
<!DOCTYPE html>
<html>
<body>
<h2>A Description List</h2>
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
i
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
</body>
</html>
Output:
A Description List
Coffee
- black hot drink
Milk
- white cold drink
Links:
Links are found in nearly all web pages. Links allow users to click their way
from page to page.
HTML Links - Hyperlinks
HTML links are hyperlinks.
You can click on a link and jump to another document.
When you move the mouse over a link, the mouse arrow will turn into a little
hand.
Note: A link does not have to be text. A link can be an image or any other HTML
element!
By default, the linked page will be displayed in the current browser window. To
change this, you must specify another target for the link.
i
The target attribute specifies where to open the linked document.
The target attribute can have one of the following values:
● _self - Default. Opens the document in the same window/tab as it was
clicked
● _blank - Opens the document in a new window or tab
● _parent - Opens the document in the parent frame
● _top - Opens the document in the full body of the window
Example:
<!DOCTYPE html>
<html>
<body>
<h2>The target Attribute</h2>
<a href="https://www.w3schools.com/" target="_blank">Visit W3Schools!</a>
<p>If target="_blank", the link will open in a new browser window or tab.</p>
</body>
</html>
Output:
The target Attribute
Visit W3Schools!
