HTML
(HYPERTEXT MARKUP
LANGUAGE)
HTML
• HTML stands for HyperText Markup Language. (Hypertext is text
displayed on a device that contains links (called hyperlinks) to other text,
files, or resources, allowing users to navigate between them by clicking)
• It is the standard language used to create and design web pages.
• It tells the web browser how to display text, links, images, and other forms
of multimedia on a webpage.
• HTML sets up the basic structure of a website.
• It’s not a programming language but a markup language, meaning it uses tags
to describe content.
• HTML is the backbone of every webpage you see on the internet.
• It works with CSS (for styling) and JavaScript (for interactivity).
• HTML is the first step to building websites and web applications
• Universal Usage: Every website uses HTML
HOW HTML WORKS
• Markup Language: Uses tags (e.g., <p> , <h1> , <img> ) to define elements
on a page.
• Browser Interpretation: Web browsers (Chrome, Firefox, etc.) read HTML
files and render them as visual webpages.
• Client-Side Technology: HTML runs on the user’s device, not on a server.
• File Extension: HTML files end with .html or .htm
HTML PAGE STRUCTURE
• <!DOCTYPE html> - This is the document type declaration, not a tag. It declares that the document is an
HTML5 document.
• <html> - This is called the HTML root element. All other elements are contained within it.
• <head> - element is a container for metadata (data about the webpage) and instructions that are
not directly displayed on the page. Typical elements inside the <head> include:
<title> : Defines the title displayed on the browser tab.
<meta> : Provides information like the character encoding , description and keywords of webpage.
<link> : Links external stylesheets or resources.
<style> : Embeds internal CSS styles.
<script> : Embeds JavaScript for functionality.
• <h2> - The <h2> tag is a second-level heading tag.
• <p> - The <p> tag represents a paragraph of text.
• <body> - The body tag is used to enclose all the visible content of a webpage. In other words, the body
content is what the browser will show on the front end.
TAG
• A tag in HTML is a piece of code used to define the start and/or end of an HTML
element. Tags are instructions enclosed in angle brackets <> that tell the browser
how to interpret or display content.
• Structure of Tags
• Opening tag: Starts an element.
• Example: <p> begins a paragraph.
• Closing tag: Ends an element.
• Example: </p> ends a paragraph.
• Self-closing tag: Does not need a closing tag.
• Example: <br> line break.
TYPES OF TAG
• Paired Tags (Container Tags)
• Have both an opening and a closing tag.
• Example:
<h1> , <p>
• Empty Tags (Self-closing Tags)
• Do not contain content and do not need closing tags.
• Example:
<br> , <img>
SOME BASIC TAGS
• <h1> to <h6> : Headings (h1 is the largest, h6 is the smallest).
• <p> : Paragraph
• <br> : Line break (self-closing).
• <hr> : Horizontal line/separator.
• <b> : Bold text.
• <i> : Italic text.
• <u> : Underlined text.
• <big> : Defines big text.
• <small> : Defines smaller text
• <center> : Defines centered text.
• <font> : Defines font, color, and size for text.
• <mark> : Defines marked/highlighted text.
• <pre> : Defines preformatted text.
• <strike> : Defines strikethrough text
• <sup> : Defines superscripted text
• <sub> : Defines subscripted text
<P> TAG ATTRIBUTE
• align : Specifies the alignment of text inside the paragraph. Values can be
left, center, right, justify. (Deprecated)
• Example :
<p align="center">This is a centered paragraph.</p>
<HR> TAG ATTRIBUTES
• width – Specifies the width of the line (in pixels or percentage).
• size – Sets the thickness (height) of the line in pixels.
• align – Defines alignment of the horizontal line (left, right, center). (Deprecated)
• noshade – Removes shading, making the line solid (used as a Boolean attribute).
(Deprecated)
• color – Defines the color of the horizontal line. (Deprecated)
<FONT> TAG ATTRIBUTES
• color – Specifies the text color.
• size – Defines the size of the text (1 to 7, default is 3).
• face – Sets the typeface (font family) for the text (e.g., Arial, Verdana, Times New
Roman (default)).
HTML LISTS
• An HTML List allows you to organize data on web pages into
an ordered or unordered format to make the information
easier to read and visually appealing. HTML Lists are very
helpful for creating structured, accessible content in web
development.
TYPES OF HTML LISTS
There are three main types of lists in HTML:
• Unordered Lists (<ul>): These lists are used for items that do not need
to be in any specific order. The list items are typically marked with bullets.
• Ordered Lists (<ol>): These lists are used when the order of the items is
important. Each item in an ordered list is typically marked with numbers or
letters.
• Description Lists (<dl>): These lists are used to contain terms and their
corresponding descriptions.
UNORDERED LIST (<UL> TAG)
The HTML <ul> tag in HTML is used to create an unordered list, which groups a set
of list items that do not need to follow a specific order. Each item in the list is defined
using the <li> (list item) tag. By default, the items in an unordered list are displayed with
bullet points.
• Syntax
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
ATTRIBUTE OF UL TAG
• Type : Specifies the kind of marker used in the list. Values includes disc,
circle, square, etc.
• compact – Reduces spacing between list items (deprecated)
TYPES OF LIST STYLES:
• disc (default): Solid round bullets.
• circle: Hollow bullets.
• square: Square bullets.
• none: No bullets.
EXAMPLE
<ul type="circle">
<li>HTML</li>
<li>CSS</li>
</ul>
ORDERED LIST (<OL> TAG)
The HTML <ol> tag defines an ordered list. An ordered list can be numerical or
alphabetical. It's a fundamental HTML element used for structuring content and providing
sequential organization. The numbering format can be customized using attributes like type
and start, ensuring flexibility in list presentation.
• Syntax
<ol>
<li>Item 1</li>
<li>Item 2</li>
</ol>
ATTRIBUTES OF OL TAG
• Reversed : Defines that the order of the list items should be descending (from high to
low).
• Start : Defines the starting number or alphabet for the ordered list.
• Type : Defines the type of order for the list items.
• compact – Reduces spacing between list items (deprecated)
TYPES OF LIST STYLES:
• 1: This is the default value. It defines the list items in decimal numbers.(1, 2, 3, 4 .).
• a : It defines the list items in alphabetically ordered lowercase letters .(a, b, c, d ...).
• A : It defines the list items in alphabetically ordered uppercase letters.(A, B, C, D ..).
• i : It defines the list items in lowercase roman number order.(i, ii, iii, iv, v, vi ...).
• I : It defines the list items in uppercase roman number order.(I, II, III, IV, V, VI ..).
EXAMPLES
<ol reversed>
<li>Item One</li>
<li>Item Two</li>
<li>Item Three</li>
</ol>
EXAMPLES
<ol type="A">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>
EXAMPLES
<ol start="5">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>
DESCRIPTION LISTS (<DL> TAG)
• The <dl> tag in HTML is used to represent the description list. This tag
is used with <dt> and <dd> tag to create a list of terms and their
associated descriptions.
• Elements inside dl tag:
<dt> : Defines a term in the list.
<dd> : Provides the description or definition of the term.
EXAMPLE
<dl>
<dt>Item 1</dt>
<dd>This is description for item 1</dd>
<dt>Item 2</dt>
<dd>This is description for item 2</dd>
</dl>
<IMG> TAG
• The HTML <img> tag is used to embed an image in web pages by
linking them. It creates a placeholder for the image, it does not require a
closing tag.
• There are two ways to insert the images into a webpage:
By providing a full path (absolute path) or address (URL) to access an internet file.
By providing the file path relative to the location of the current web page file.
<IMG> TAG ATTRIBUTES
• src – Specifies the path (URL) of the image.
• alt – Alternate text shown if the image cannot be displayed.
• width – Sets the width of the image (in pixels or percentage).
• height – Sets the height of the image (in pixels or percentage).
• title – Tooltip text displayed when hovering over the image.
<IMG> TAG ATTRIBUTES
• align (deprecated) – Specifies the alignment of the image (left, right).
• border (deprecated) – Sets the width of the image border.
• hspace (deprecated) – Sets horizontal space around the image.
• vspace (deprecated) – Sets vertical space around the image.
EXAMPLE
<img src="[Link]"
alt="Mountain View“
width="300"
height="200"
title="Mountain Landscape“>
HTML FILE PATHS
• A file path describes the location of a file in a web site's folder structure.
• File paths are used when linking to external files, like:
Web pages
Images
Style sheets
JavaScripts
ABSOLUTE FILE PATHS
• An absolute file path is the full URL to a file:
• Example
<img src="F:\IWT\images\[Link]" alt="Mountain">
RELATIVE FILE PATHS
• A relative file path points to a file relative to the current page.
• Example
• <img src="[Link]">
The "[Link]" file is located in the same folder as the current page
RELATIVE FILE PATHS
• <img src="images/[Link]">
The "[Link]" file is located in the images folder in the current folder
• <img src="/images/[Link]">
The "[Link]" file is located in the images folder at the root of the current web
• <img src="../[Link]">
The "[Link]" file is located in the folder one level up from the current folder
<A> TAG
• The <a> tag (anchor tag) in HTML creates hyperlinks, allowing users to
navigate to different locations, such as another webpage (external linking)
or a specific section within the same page (internal linking). It’s a core
component of hypertext, enabling the interactive navigation central to the
web.
<A> TAG ATTRIBUTES
• Href (Hyperlink Reference) : Specifies the URL of the page the link goes to.
• Target: Specifies where to open the linked document.
• Values:
_self :- Default. Opens in the same tab.
_blank :- Opens in a new tab/window.
_parent :- Opens in the parent frame.
_top :- Opens in the full body of the window.
• Title : Specifies extra information (tooltip) about the link, shown when hovered.
<A> TAG ATTRIBUTES
• download : Specifies that the target will be downloaded when clicked, instead of
navigating to it.
• type : Specifies the MIME type of the linked document.
INTERNAL LINKS
• An internal link connects one part of a website to another page or section within the
same website.
It is used for site navigation or linking to a specific section on the same page.
• Examples of Internal Links
• Linking to another page in the same website:
<a href="[Link]">About Us</a>
• Linking to a section in the same page:
<a href="#contact">Go to Contact Section</a>
...
<h2 id="contact">Contact Us</h2>
EXTERNAL LINKS
• An external link connects a page of a website to a completely different website.
It is used to point users to an external resource or reference.
• Example of External Link
<a href="[Link] target="_blank">Visit Wikipedia</a>
