We are on a mission to address the digital

skills gap for 10 Million+ young professionals,

train and empower them to forge a career
path into future tech
Hypertext Markup Language
(HTML)
SEP, 2024
 Hypertext Markup Language (HTML)

Web Page

• A Web page is a document commonly written in HTML (Hypertext Markup Language) that can be

displayed in all Internet browsers.

• It is accessed by entering a URL address and may contain text, graphics, and hyperlinks to

other web pages and files.

• Web pages can be either static or dynamic.

• Static pages show the same content each time they are viewed.

• Dynamic pages provide custom content based on the results of a search or request.

3 Hyper Text Markup Language | © SmartCliff | Internal | Version 1.3

 Hypertext Markup Language (HTML)

Webserver

• A Computer or a system that hosts a website on the internet.

• Hosting means that all the web pages and their supporting files are available on that computer.

• The Web server helps to send any web page from the website.

• Without a Webserver, a website cannot be viewed globally.

4 Hyper Text Markup Language | © SmartCliff | Internal | Version 1.3

 Hypertext Markup Language (HTML)

WebSite vs. Web Application

Website​ Web Application​

A collection of multiple web pages that are grouped Web Application or Web App - is a kind of software
together and connected in various ways often called application that can be accessed over the internet
a "web site" or a "site“. using Browser.
A website is a collection of linked web pages that Sometimes the Web App require Authentication to
share a unique domain name​ access the functionality​
Each web page of a website​ It combines server-side code (backend) and client-
provides have explicit links that allows the user to side script (Frontend)to make a Web Application.
move from one page to other.
Example: Amazon, Youtube, Blogs, etc. Example: Google Apps​

Access Web App Globally = Frontend script + Backend code + Web Server + Domain
5 Hyper Text Markup Language | © SmartCliff | Internal | Version 1.3
 Hypertext Markup Language (HTML)

URL

Top level
Subdomain Domain Webpage

Domain Directories
Protocol Name

6 Hyper Text Markup Language | © SmartCliff | Internal | Version 1.3

 Hypertext Markup Language (HTML)

Markup Language

• A Markup language is a computer language that uses tags to define elements within a document.

• It is human-readable, meaning Markup files contain standard words, rather than typical programming

syntax.

• The language specifies code for formatting, layout, and style, within a text file.

• The code used to specify the formatting is called tags.

• HTML and XML (eXtensible Markup Language) is an example of a widely known and used Markup

language.

7 Hyper Text Markup Language | © SmartCliff | Internal | Version 1.3

 Hypertext Markup Language (HTML)

Introduction to HTML

• HTML was built on the Standard Generalized

Markup Language (SGML).

• It includes all of the functionality of previous

HTML versions.

• HTML is a language used to describe the

structure of a document.

• HTML5 is the newest version of HTML.

• HTML and XML (eXtensible Markup

HTML
Language) is an example of a widely known TAGS
and used Markup language.

8 Hyper Text Markup Language | © SmartCliff | Internal | Version 1.3

 Hypertext Markup Language (HTML)

What is HTML?

• HTML stands for HyperText Markup Language and it is used to create webpages.

• It uses HTML tags and attributes to describe the structure and formatting of a web page.

• HTML consists of various elements, that are responsible for telling search engines how to display page

content.

9 Hyper Text Markup Language | © SmartCliff | Internal | Version 1.3

 Hypertext Markup Language (HTML)

Features of HTML

• It is easy to learn and easy to use.

• It is platform-independent.

• Images, videos, and audio can be added to a web page.

• Hypertext can be added to the text.

• It is a markup language.

10 Hyper Text Markup Language | © SmartCliff | Internal | Version 1.3

 Hypertext Markup Language (HTML)

Why learn HTML?

• Every webpage is written in a language called HTML.

• It is a simple markup language.

• Its implementation is easy.

• Helps in developing fundamentals about web programming.

• HTML as the skeleton that gives every webpage structure.

• Web browsers can read HTML files and render them into visible or audible web pages.

• Browsers do not display the HTML tags and scripts but use them to interpret the page’s content.

• Boost professional career.

11 Hyper Text Markup Language | © SmartCliff | Internal | Version 1.3
 Hypertext Markup Language (HTML)

HTML Versions

12 Hyper Text Markup Language | © SmartCliff | Internal | Version 1.3

 Hypertext Markup Language (HTML)

HTML Vs CSS Vs JavaScript

HTML (Structure) HTML + CSS (Presentation) HTML + CSS + JavaScript (Functionality)

13 Hyper Text Markup Language | © SmartCliff | Internal | Version 1.3

 HTML Editors

Please download pictures in

suitable size here and insert them
by clicking the symbol above.

14 Hyper Text Markup Language | © SmartCliff | Internal | Version 1.3

 HTML Editors

What are HTML Editors?

• HTML Editors are tools to write and run (in some cases) an HTML code.

• There are several HTML Editors available to the user (paid and unpaid).

• There are mainly two types of HTML editors:

• Text-Based

• WYSIWYG

15 Hyper Text Markup Language | © SmartCliff | Internal | Version 1.3

 HTML Editors

Text-Based HTML Editor

• Text-based HTML editors allow the user to write and compile code.

• They highlight syntax errors in color.

• So, issues in the code can be identified quickly.

• Examples of text-based HTML editors are:

• Notepad++

• VS Code

• Atom

• Sublime Text

• Bluefish

16 Hyper Text Markup Language | © SmartCliff | Internal | Version 1.3

 HTML Editors

Text-Based HTML Editor: Notepad++

• Notepad++ is a free source code editor.

• It is written in C++ and supports features like

syntax highlighting, limited auto-completion for

programming, scripting, etc.

17 Hyper Text Markup Language | © SmartCliff | Internal | Version 1.3

 HTML Editors

Text-Based HTML Editor: Notepad++

Features:

• Syntax Highlighting:

• Notepad++ highlights the syntax of HTML, JavaScript, and other programming languages to improve

code readability and reduce errors.

• Search and Replace:

• Notepad++ provides a powerful search and replace option, allowing users to replace text across

multiple places efficiently.

18 Hyper Text Markup Language | © SmartCliff | Internal | Version 1.3

 HTML Editors

Text-Based HTML Editor: Notepad++

• Easy Navigation:

• Notepad++ facilitates easy navigation between opened files, making it simple to manage and switch

between different code files.

• Resource Efficiency:

• Notepad++ uses fewer system resources compared to other editors, ensuring smooth performance

even on less powerful machines.

19 Hyper Text Markup Language | © SmartCliff | Internal | Version 1.3

 HTML Editors

Text-Based HTML Editor: VS Code

• VS Code is also a source-code editor developed

by Microsoft.

• It supports Windows, Linux, and macOS.

• The features include debugging support, syntax

highlighting, code refactoring, intelligent code

completion, etc.

20 Hyper Text Markup Language | © SmartCliff | Internal | Version 1.3

 HTML Editors

Text-Based HTML Editor: VS Code

Features:

• Autocompletion:

• VS Code provides intelligent code suggestions and autocompletion to enhance coding speed and

efficiency.

• Extensive Plugin Support:

• VS Code offers a wide range of plugins for customization, enabling users to add unique features

tailored to their workflow.

21 Hyper Text Markup Language | © SmartCliff | Internal | Version 1.3

 HTML Editors

Text-Based HTML Editor: VS Code

• Built-in Git Integration:

• VS Code includes inbuilt Git command support for seamless version control, allowing users to

commit, merge, and manage their repositories directly from the editor.

• Integrated Debugging Tools:

• VS Code is equipped with powerful debugging tools that help users diagnose and fix issues in their

code effortlessly.

22 Hyper Text Markup Language | © SmartCliff | Internal | Version 1.3

 HTML Editors

Text-Based HTML Editor: Atom

• It is a free open-source code editor, which is

capable of editing multiple languages.

• It’s a customizable text editor that keeps it unique.

23 Hyper Text Markup Language | © SmartCliff | Internal | Version 1.3

 HTML Editors

Text-Based HTML Editor: Atom

Features:

• Autocompletion:

• Atom provides intelligent code suggestions and autocompletion to enhance coding speed and

efficiency.

• Extensive Package Library:

• Atom offers access to a massive library of open-source packages, allowing users to extend the

editor's functionality according to their needs.

24 Hyper Text Markup Language | © SmartCliff | Internal | Version 1.3

 HTML Editors

Text-Based HTML Editor: Atom

• Cross-Platform Support:

• Atom is supported on all major operating systems, including Windows, Linux, and macOS.

• Teletype for Collaboration:

• Atom allows for peer coding through its Teletype feature, enabling real-time collaboration with fellow

developers.

25 Hyper Text Markup Language | © SmartCliff | Internal | Version 1.3

 HTML Editors

Text-Based HTML Editor: Sublime Text

• It is a cross-platform source code editor.

• Written in C++ and Python.

• The features include quick navigation to files,

symbols, or lines.

• Allows the user to simultaneously edit multiple

selected areas.

26 Hyper Text Markup Language | © SmartCliff | Internal | Version 1.3

 HTML Editors

Text-Based HTML Editor: Sublime Text

Features:

• Highly Customizable:

• Sublime Text is a highly customizable editor, allowing users to choose from multiple templates with a

variety of features.

• Easy Project Switching:

• Sublime Text makes it easy to switch between different projects, enhancing workflow efficiency.

27 Hyper Text Markup Language | © SmartCliff | Internal | Version 1.3

 HTML Editors

Text-Based HTML Editor: Sublime Text

• Simplified User Interface:

• Sublime Text features a less complex user interface compared to other editors but retains the option

to expand elements for more advanced use.

• Multiple Selection for Instant Changes:

• Sublime Text allows making changes instantly by selecting and editing multiple instances of the same

keyword.

28 Hyper Text Markup Language | © SmartCliff | Internal | Version 1.3

 HTML Editors

Text-Based HTML Editor: Bluefish

• It is created to target large projects.

• Bluefish editor is one of the fastest editors with

efficiency.

29 Hyper Text Markup Language | © SmartCliff | Internal | Version 1.3

 HTML Editors

Text-Based HTML Editor: Bluefish

Features:

• High Speed and Low Memory Usage:

• Bluefish is extremely fast compared to other editors and has low memory usage, making it efficient

and responsive.

• Handling Large and Multiple Files:

• Bluefish can easily handle large files and manage multiple files simultaneously, ensuring smooth

workflow even with complex projects.

30 Hyper Text Markup Language | © SmartCliff | Internal | Version 1.3

 HTML Editors

Text-Based HTML Editor: Bluefish

• Autocompletion:

• Bluefish provides intelligent autocompletion, allowing users to code faster and more efficiently.

• Advanced Project Management:

• Bluefish supports advanced project management features, enabling smooth workflow without

worrying about file management.

31 Hyper Text Markup Language | © SmartCliff | Internal | Version 1.3

 HTML Editors

WYSIWYG Editor

• WYSIWYG stands for “What You See Is What You Get.”

• They’ll show a preview of the source code, as it will appear in the web browser.

• They also don’t require strong HTML knowledge so less tech-savvy users can develop websites easily.

• Examples of WYSIWYG editors are:

• Adobe Dreamweaver CC

• Froala

• Setka Editor

32 Hyper Text Markup Language | © SmartCliff | Internal | Version 1.3

 HTML Editors

WYSIWYG Editor: Adobe Dreamweaver CC

• Adobe Dreamweaver CC is a powerful web design and development application that is part of Adobe

Creative Cloud.

• It provides a comprehensive environment for creating, editing, and managing websites and web

applications.

• Dreamweaver supports both visual design and code-based editing, making it suitable for a wide

range of users from beginners to advanced developers.

33 Hyper Text Markup Language | © SmartCliff | Internal | Version 1.3

 HTML Editors

WYSIWYG Editor: Adobe Dreamweaver CC

Features:

• Visual and Code Editors: Switch between Design View (WYSIWYG) and Code View to see changes in

real-time and edit HTML, CSS, and JavaScript.

• Responsive Design Tools: Built-in tools for designing and previewing websites on different devices and

screen sizes.

• Code Hinting and Autocompletion: Helps with writing code by providing suggestions and completing

code automatically.

• Live Preview: See how your website looks as you edit, with live updates and responsive previews.

34 Hyper Text Markup Language | © SmartCliff | Internal | Version 1.3

 HTML Editors

WYSIWYG Editor: Adobe Dreamweaver CC

• Site Management: Tools for managing site files, including site synchronization, FTP support, and file

management.

• Templates and Starter Layouts: Pre-built templates and layout options to get started quickly.

• Integration with Other Adobe Tools: Seamless integration with other Creative Cloud apps like

Photoshop, Illustrator, and XD.

• Preprocessors Support: Built-in support for CSS preprocessors like SASS and LESS.

35 Hyper Text Markup Language | © SmartCliff | Internal | Version 1.3

 HTML Editors

WYSIWYG Editor: Froala

• Froala is a popular WYSIWYG HTML editor that is designed for ease of use and powerful

functionality.

• It can be used to create and edit HTML content visually, making it a great tool for web development

and content management.

36 Hyper Text Markup Language | © SmartCliff | Internal | Version 1.3

 HTML Editors

WYSIWYG Editor: Froala

Features:

• Intuitive Interface: User-friendly design with a modern, clean interface.

• Rich Text Editing: Provides options for formatting text, adding images, videos, links, and more.

• Responsive Design: Works well on various devices and screen sizes.

• Code View: Allows you to view and edit the HTML code directly.

• Customizable: Offers numerous plugins and customization options to fit different needs.

• Performance: Optimized for fast loading times and smooth operation.

37 Hyper Text Markup Language | © SmartCliff | Internal | Version 1.3

 HTML Editors

WYSIWYG Editor: Setka Editor

• Setka Editor is a modern WYSIWYG editor designed for content creation with a focus on simplicity

and efficiency.

• It provides a range of features to help users create, format, and manage content for websites and digital

platforms.

38 Hyper Text Markup Language | © SmartCliff | Internal | Version 1.3

 HTML Editors

WYSIWYG Editor: Setka Editor

Features:

• User-Friendly Interface: A clean and intuitive interface for both novice and experienced users.

• Rich Text Formatting: Options for text formatting, such as headings, bold, italic, and lists.

• Design Blocks: Pre-designed content blocks for quickly building sections of a page.

• Responsive Design: Ensures that content looks good on various devices and screen sizes.

• Code View: Allows you to view and edit the HTML code directly.

• Customizable Templates: Offers templates and design elements that can be customized to fit your
brand or style.

• Content Collaboration: Features for team collaboration and feedback.

39 Hyper Text Markup Language | © SmartCliff | Internal | Version 1.3

 HTML Basics

Please download pictures in

suitable size here and insert them
by clicking the symbol above.

40 Hyper Text Markup Language | © SmartCliff | Internal | Version 1.3

 HTML Basics

HTML Tags, Elements and Attributes

HTML Tags:

• The essence of HTML programming is tags.

• Tags are the building blocks of HTML.

• Tags are similar to keywords, which specify how a web browser will format and display content.

• A web browser can differentiate between simple content and HTML content with the use of tags.

• A tag is a keyword enclosed by angle brackets. ( < > )

• There are opening(< >) and closing tags(</ >) for many but few tags do not have closing tags.

• All Web pages share a common structure.

• Tags are not case-sensitive.

41 Hyper Text Markup Language | © SmartCliff | Internal | Version 1.3

 HTML Basics

HTML Tags, Elements and Attributes

HTML Elements:

• Elements are building blocks of a web page.

• It consists of a start tag, an end tag, and the content between them.

<tag> Content </tag>

HTML Attributes:

• Attributes are used to customize an element's behavior, special terms called HTML attributes are
utilized inside the opening tag.

• An HTML element type can be modified via HTML attributes.

• They usually come in name/value pairs.

<tag name=“value”> Content </tag>

42 Hyper Text Markup Language | © SmartCliff | Internal | Version 1.3
 HTML Basics

HTML Tags, Elements and Attributes

HTML Attributes:

• Name:

• It holds the property the user wants to set.

• Value:

• It holds the value that the user wants the value of the property to be set and always put within

quotations.

43 Hyper Text Markup Language | © SmartCliff | Internal | Version 1.3

 HTML Basics

HTML Document Structure

• HTML elements are hierarchical, meaning the elements can be inside of an element.

• But there are a few rules to follow like the head can not be placed inside of a body like that so to know

the basic structure of an HTML document.

44 Hyper Text Markup Language | © SmartCliff | Internal | Version 1.3

 HTML Basics

HTML Document Structure

<!-- HTML Version Declaration -->

<!DOCTYPE html>

<!-- HTML Root Element -->

<html>

<!-- HTML Head Section -->

<head>
<!-- HTML Document Title -->
<title> </title>
</head>

<!-- HTML Body Section -->

<body>
</body>

</html>
45 Hyper Text Markup Language | © SmartCliff | Internal | Version 1.3
 HTML Basics

HTML Document Structure

46 Hyper Text Markup Language | © SmartCliff | Internal | Version 1.3

 HTML Basics

HTML Document Structure: <!DOCTYPE>

• This tag defines the document type and HTML version.

• The <!DOCTYPE> declaration must be the first thing in your HTML document, before the <html> tag.

• The <!DOCTYPE> declaration is not an HTML tag; it is an instruction to the web browser about
what version of HTML the page is written in.

• HTML 4.01/XHTML

• <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" http://www.w3.org/TR/xhtml1/

DTD/xhtml1-strict.dtd">

• The DTD specifies the rules for the markup language so that the browsers render the content correctly.

HTML 5 - <!DOCTYPE html>

47 Hyper Text Markup Language | © SmartCliff | Internal | Version 1.3

 HTML Basics

HTML Document Structure: <html>

• The <html> tag tells the browser this is an HTML document.

• This tag represents the root of an HTML document.

• This tag is the container for all other HTML elements (except for the <!DOCTYPE> tag).

• This tag encloses the complete HTML document and mainly comprises of:

• document header which is represented by <head>...</head>

• document body which is represented by <body>...</body> tags.

48 Hyper Text Markup Language | © SmartCliff | Internal | Version 1.3

 HTML Basics

HTML Document Structure: <head>

• The <head> element contains header information about the webpage

• This element is a container for all the head elements.

• It is part of the document’s structure but is not displayed on the webpage.

• This element can include a title for the document, scripts, styles, meta information, and more.

49 Hyper Text Markup Language | © SmartCliff | Internal | Version 1.3

 HTML Basics

HTML Document Structure: <head>

• The following elements can go inside the <head> element:

• <title>

• <style>

• <base>

• <link>

• <meta>

• <script>

• <noscript>

50 Hyper Text Markup Language | © SmartCliff | Internal | Version 1.3

 HTML Basics

HTML Document Structure: <title>

• The <title> tag is used within the <head> section to define the title of the HTML document.

• It appears in the browser tab or window and briefly describes the webpage’s content.

• This tag is required in all HTML documents.

The <title> element:

• defines a title in the browser toolbar

• provides a title for the page when it is added to the favorites

• displays a title for the page in search-engine results

51 Hyper Text Markup Language | © SmartCliff | Internal | Version 1.3

 HTML Basics

HTML Document Structure: <body>

• The <body> tag defines the document's body.

• This element contains all the contents of an HTML document, such as text, hyperlinks, images, tables,

lists, etc.

• All elements within this tag are displayed on the webpage when viewed in a browser.

52 Hyper Text Markup Language | © SmartCliff | Internal | Version 1.3

 HTML Basics

First HTML Page

• Step 1:

• Open text editor Visual Studio Code

• Choose File->New File

53 Hyper Text Markup Language | © SmartCliff | Internal | Version 1.3

 HTML Basics

First HTML Page

Step 2: Type the below code in the New File shown as Untitled-1

<!DOCTYPE html>
<html>
<head>
<title>My First HTML Page</title>
</head>
<body>
Hello, I am here on your webpage!
</body>
</html>

54 Hyper Text Markup Language | © SmartCliff | Internal | Version 1.3

 HTML Basics

First HTML Page

• Step 3:

• Save the file named SimpleHTML.

• An HTML file must be saved with

a .htm or .html extension.

• SimpleHTML file should be saved as

SimpleHTML.html

55 Hyper Text Markup Language | © SmartCliff | Internal | Version 1.3

 HTML Basics

First HTML Page

Step 4: Save the code.

Step 5: Launch or run your HTML file by choosing Run->Start Debugging

56 Hyper Text Markup Language | © SmartCliff | Internal | Version 1.3

 HTML Basics

First HTML Page

Step 6: Then choose a web browser like Chrome or Edge to display the output

57 Hyper Text Markup Language | © SmartCliff | Internal | Version 1.3

 HTML Basics

First HTML Page

Step 7: The output will be displayed in the chosen browser as,

58 Hyper Text Markup Language | © SmartCliff | Internal | Version 1.3

 HTML Basics

First HTML Page

HTML header
<!DOCTYPE HTML>

<html>
<head>
<title>My First HTML Page</title>
</head>
<body>
Hello, I am here on your webpage!
</body>
</html>

HTML body

59 Hyper Text Markup Language | © SmartCliff | Internal | Version 1.3

 HTML Basics

HTML Code Formatting

• The HTML source code should be formatted to increase readability and facilitate debugging.

• Every block element should start on a new line.

• Every nested (block) element should be indented.

• Browsers ignore multiple whitespaces in the page source, so formatting is harmless.

• For performance reasons, formatting can be sacrificed.

60 Hyper Text Markup Language | © SmartCliff | Internal | Version 1.3

 HTML Basics

Basic HTML Tags

• Following are the basic HTML tags:

• Paragraph Tag - <p>

• Heading Tag - <h1> to <h6>

• Line Break Tag - <br>

• Horizontal Ruler Tag - <hr>

• Preserve Formatting Tag - <pre>

• Center Tag - <center>

61 Hyper Text Markup Language | © SmartCliff | Internal | Version 1.3

 HTML Basics

Basic HTML Tags : Paragraph Tag

<!DOCTYPE html>
• The <p> tag offers a way to structure the text
<html>
into different paragraphs, essential for creating <body>
<p>This is a paragraph1.</p>
well-organized and readable web content.
<p>This is a paragraph2.</p>
<p>This is a paragraph3.</p>
• Each paragraph of text should go in between
</body>
an opening <p> and a closing </p> tag. </html>

• Browsers automatically add an empty line

before and after a paragraph.

62 Hyper Text Markup Language | © SmartCliff | Internal | Version 1.3

 HTML Basics

Basic HTML Tags : Paragraph Tag

• Before resizing the browser window

<html>
<body>
<p>
This paragraph contains a lot of lines in the source code, but the browser ignores it.
</p>
<p>
The number of lines in a paragraph depends on the size of the browser window. If you resize the browser
window, the number of lines in this paragraph will change.
</p>
</body>
</html>

63 Hyper Text Markup Language | © SmartCliff | Internal | Version 1.3

 HTML Basics

Basic HTML Tags : Paragraph Tag

• After resizing the browser window

<html>
<body>
<p>
This paragraph contains a lot of lines in the source code, but the browser ignores it.
</p>
<p>
The number of lines in a paragraph depends on the size of the browser window. If you resize the browser
window, the number of lines in this paragraph will change.
</p>
</body>
</html>

64 Hyper Text Markup Language | © SmartCliff | Internal | Version 1.3

 HTML Basics

Basic HTML Tags : Paragraph Tag

• Spaces and new lines are ignored

<html>

<body>

<p>In HTML, spaces and new lines are ignored:</p>

<p>
My Bonnie lies over the ocean.

My Bonnie lies over the sea.

My Bonnie lies over the ocean.

Oh, bring back my Bonnie to me.

</p>

</body>

</html>

65 Hyper Text Markup Language | © SmartCliff | Internal | Version 1.3

 HTML Basics

Basic HTML Tags : Heading Tag

• Heading tags are used to define the headings of documents.

• There are different sizes for the headings.

• HTML also has six levels of headings, which use the elements <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>.

• While displaying any heading, the browser adds one line before and one line after that heading.

• <h1> defines the most important heading.

• <h6> defines the least important heading.

66 Hyper Text Markup Language | © SmartCliff | Internal | Version 1.3

 HTML Basics

Basic HTML Tags : Heading Tag

<html>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
</body>
</html>

67 Hyper Text Markup Language | © SmartCliff | Internal | Version 1.3

 HTML Basics

Basic HTML Tags : Line Break Tag

• The <br> tag inserts a single line break.

• The <br> tag is an empty tag which means that it

has no end tag.

<!DOCTYPE html>
<html>
<body>
<p>
This is<br>a para<br>graph with line breaks
</p>
</body>
</html>

68 Hyper Text Markup Language | © SmartCliff | Internal | Version 1.3

 HTML Basics

Basic HTML Tags : Horizontal Ruler Tag

• The <hr> tag is used to break the page into <h1>Section II</h1>
<p>
various parts, creating horizontal margins with Architecture of Computer<br>
Different Component of Computer<br>
the help of a horizontal line running from the left to </p>
<hr>
right-handhtml>
<!DOCTYPE side of the page. </body>
</html>
•<html>
This is also an empty tag which means that it has
<body>
no end tag.
<h1>Section I</h1>
<p>
Introduction to Computer<br>
Application of Computer<br>
</p>
<hr>

69 Hyper Text Markup Language | © SmartCliff | Internal | Version 1.3

 HTML Basics

Basic HTML Tags : Preformatted Tag

• The <pre> tag defines preformatted text.

• Text in this element is displayed in a fixed-width font (usually Courier), and it preserves both spaces

and line breaks.

• The text follows the exact format of how it is written in the HTML document.

• It is generally used to render programmable codes in documents.

• Any text between the opening <pre> tag and the closing </pre> tag will preserve the formatting of the

source document, which means if the user adds a new line character between two letters that will be

reflected in the document as it is.

70 Hyper Text Markup Language | © SmartCliff | Internal | Version 1.3

 HTML Basics

Basic HTML Tags : Preformatted Tag

<!DOCTYPE html>

<html>
<body>

<p>The pre tag preserves both spaces and line

breaks:</p>

<pre>
My Bonnie lies over the ocean.

My Bonnie lies over the sea.

My Bonnie lies over the ocean.

Oh, bring back my Bonnie to me.

</pre>

</body>
</html>

71 Hyper Text Markup Language | © SmartCliff | Internal | Version 1.3

 HTML Basics

Basic HTML Tags : Center Tag

• The <center> tag can be used to put any content in the center of the page or any table cell.

<!DOCTYPE html>
<html>
<head>
<title>Centering Content Example</title>
</head>
<body>
<p>This text is not in the center.</p>
<center>
<p>This text is in the center.</p>
</center>
</body>
</html>
72 Hyper Text Markup Language | © SmartCliff | Internal | Version 1.3
 HTML Basics

Basic HTML Tags : Center Tag

Note:

• It is important to note that the <center> tag is deprecated in HTML5.

• This means it is no longer recommended for use in modern web development, and it may not be

supported by all browsers in the future.

• Instead, CSS (Cascading Style Sheets) should be used to achieve the same effect.

73 Hyper Text Markup Language | © SmartCliff | Internal | Version 1.3

 HTML Basics

Basic HTML Elements

• HTML elements can be categorized based on their structure into:

• Simple elements

• Nested elements

• Empty elements

74 Hyper Text Markup Language | © SmartCliff | Internal | Version 1.3

 HTML Basics

Basic HTML Elements: Simple Elements

• A simple element is an HTML element that contains only text content or a single HTML tag without any

nested elements.

• It consists of an opening tag, content, and a closing tag.

<p>This is a simple paragraph.</p>

<h1>Heading 1</h1>

75 Hyper Text Markup Language | © SmartCliff | Internal | Version 1.3

 HTML Basics

Basic HTML Elements: Nested Elements

• Nested elements are HTML elements that contain other HTML elements within them.

• This creates a hierarchical structure in the HTML document.

<div>

<h1>Welcome to My Website</h1>

<p>This is a paragraph inside a div.</p>

</div>

76 Hyper Text Markup Language | © SmartCliff | Internal | Version 1.3

 HTML Basics

Basic HTML Elements: Empty Elements

• Empty elements, also known as self-closing elements.

• They do not have any content or a closing tag.

• They are used to insert something into the document, such as a line break, an image, metadata, or a

horizontal ruler.

<br>

<img src="image.jpg" alt="An image">

<meta charset="UTF-8">

<hr>

77 Hyper Text Markup Language | © SmartCliff | Internal | Version 1.3

 HTML Basics

HTML Attributes

• Attributes can control various aspects of elements, such as their behavior, appearance, and other

properties.

Classification of Attributes

• HTML attributes can be classified into several categories based on their purpose and usage:

• Global Attributes or Generic Attributes

• Internationalization Attributes

78 Hyper Text Markup Language | © SmartCliff | Internal | Version 1.3

 HTML Basics

HTML Attributes: Global Attributes or Generic Attributes

• Global attributes are common to all HTML elements and can be used universally.

• These attributes are readily usable with many of the HTML tags.

Attribute Options Function

Names an element for use with

id User Defined
Cascading Style Sheets.

Classifies an element for use with

class User Defined
Cascading Style Sheets.

title User Defined A text to display in a tool tip.

align right, left, center Horizontally aligns tags

79 Hyper Text Markup Language | © SmartCliff | Internal | Version 1.3

 HTML Basics

HTML Attributes: Global Attributes or Generic Attributes

Attribute Options Function

Places a background color behind an

bgcolor numeric, hexadecimal, RGB values
element

Specifies the width of tables, images, or

width Numeric Value
table cells.

Specifies the height of tables, images, or

height Numeric Value
table cells.
style Multiple properties Specifies an inline CSS style for an
element

• For more attributes, refer to the following link:

https://www.w3schools.com/tags/ref_standardattributes.asp

80 Hyper Text Markup Language | © SmartCliff | Internal | Version 1.3

 HTML Basics

HTML Attributes: Global Attributes or Generic Attributes: Example

<!DOCTYPE html> </style>

<html> </head>
<head> <body>
<title>Global(Generic) Attributes Example</title> <div id="uniqueElement">This element has a unique
<style> ID.</div>
#uniqueElement {
color: blue; <p class="styledText">This text is styled using a
font-weight: bold; class.</p>
}
.styledText { <p title="This is a tooltip">Hover over this text to see
color: green; the tooltip.</p>
font-weight: bolder;
} <p align="center">This text is centered.</p>

81 Hyper Text Markup Language | © SmartCliff | Internal | Version 1.3

 HTML Basics

HTML Attributes: Global Attributes or Generic Attributes: Example

<table bgcolor="cyan">
<tr>
<td>This table has a cyan background color.</td>
</tr>
</table>
<p>
<img src="smiley.png" width="100" height="100" />
</p>
<p style="color: red; font-size: 20px;">This text is
styled using the style attribute.</p>

</body>
</html>

82 Hyper Text Markup Language | © SmartCliff | Internal | Version 1.3

 HTML Basics

HTML Attributes: Internationalization Attributes

• In HTML, internationalization attributes ensure that web content is accessible and correctly presented in
different languages and cultures.

Attribute Options Function

Specifies the language of the element's content. These

lang en, fr, es, hi, ru etc. language codes are typically based on the ISO 639
standard and ISO 3166-1 alpha-2 country codes.

dir ltr, rtl Specifies the text direction of the element's content.

Indicates whether the content of the element should be

translate no, yes
translated or not.

Specifies the language of the linked document. These

hreflang en, fr, es, hi, ru etc. language codes are typically based on the ISO 639
standard and ISO 3166-1 alpha-2 country codes.

83 Hyper Text Markup Language | © SmartCliff | Internal | Version 1.3

 HTML Basics

HTML Attributes: Internationalization Attributes: Example

<!DOCTYPE html> <!-- Specifying the text direction -->

<html lang="en"> <p dir="ltr">This text is left-to-right.</p>
<head> <p dir="rtl">/<.‫هذا النص من اليمين إلى اليسار‬p>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, <!-- Specifying whether the text should be translated -->
initial-scale=1.0"> <p translate="no">This text should not be
<title>Internationalization Attributes Example</title> translated.</p>
</head> <p translate="yes">This text can be translated.</p>
<body> <p translate="yes" lang="hi">इस पाठ का अनु वाद ककया जा
<!-- Specifying the language --> सकता है ।</p>
<p lang="en">This is an English paragraph.</p>
<p lang="fr">Ceci est un paragraphe en français.</p>

84 Hyper Text Markup Language | © SmartCliff | Internal | Version 1.3

 HTML Basics

HTML Attributes: Internationalization Attributes: Example

<!-- Specifying the language of the linked document -->

<a href="https://example.com"
hreflang="ta">வெப் சைட்டுக் கு வைல் லுங் கள் </a>

</body>
</html>

85 Hyper Text Markup Language | © SmartCliff | Internal | Version 1.3

 HTML Basics

HTML Display

• Every HTML element has a default display value depending on the element type.

• All the HTML elements can be categorized into two categories:

• Block Elements

• Inline Elements

• They determine the layout and structure of a page by influencing how elements flow and interact.

86 Hyper Text Markup Language | © SmartCliff | Internal | Version 1.3

 HTML Basics

HTML Display: Block Elements

• Block elements are used to create the logical and semantic layout of a web page.

• They help to organize the content into meaningful sections and make it easier for browsers, search

engines, and site visitors to understand the structure and meaning of different parts of the web page.

• They take up the full width available (by default), and they start on a new line.

• They stack vertically, one after the other, with each new block element starting on a new line.

• They can contain other block elements or inline elements.

87 Hyper Text Markup Language | © SmartCliff | Internal | Version 1.3

 HTML Basics

HTML Display: Block Elements

Structural Elements

<div> <header> <footer> <section> <article> <nav>

<aside> <main> <figure> <figcaption>

Text Content

<p> <h1> <h2> <h3> <h4> <h5>

<h6> <blockquote> <hr> <pre>

88 Hyper Text Markup Language | © SmartCliff | Internal | Version 1.3

 HTML Basics

HTML Display: Block Elements

Lists

<ul> <ol> <li> <dl> <dt> <dd>

Form Elements

<form> <fieldset> <legend> <label> <textarea> <output>

<button>

Media

<video> <audio> <canvas> <svg>

89 Hyper Text Markup Language | © SmartCliff | Internal | Version 1.3

 HTML Basics

HTML Display: Block Elements

Tables

<table> <caption> <thead> <tbody> <tfoot> <tr> <th> <td>

Interactive Elements

<details> <summary> <dialog> <address>

Script Elements

<noscript> <script> <style>

Deprecated or Less Common Elements

<center> <font> <basefont>

90 Hyper Text Markup Language | © SmartCliff | Internal | Version 1.3

 HTML Basics

HTML Display: Block Elements: <div>

• The <div> tag is known as the Division tag.

• This block-level element is used to group large sections of HTML content and structure the layout.

• It provides a container to organize, and style sections, facilitating layout design and CSS styling.

• It takes up the full width of its container and starts on a new line, pushing any following content down.

• It has both opening(<div>) and closing (</div>) tags and it is mandatory to close the tag.

• Browsers add line breaks before and after ‘<div>’ elements by default.

91 Hyper Text Markup Language | © SmartCliff | Internal | Version 1.3

 HTML Basics

HTML Display: Block Elements: <div>: Example

<html lang="en"> <div style="background-color: lightblue; color:#4800ffaf;

<head> padding: 10px;">

<meta charset="UTF-8"> <h1>This is a heading inside a div</h1>

<meta name="viewport" content="width=device-width, <p>This is a paragraph inside a div</p>

initial-scale=1.0"> </div>

<title>Div Element</title> <p>This is some text</p>

</head> </body>

<body> </html>

<p>Some Paragraph</p>

92 Hyper Text Markup Language | © SmartCliff | Internal | Version 1.3

 HTML Basics

HTML Display: Block Elements: <div>: Example

93 Hyper Text Markup Language | © SmartCliff | Internal | Version 1.3

 HTML Basics

HTML Display: Inline Elements

• Inline elements only take up as much width as necessary and do not start on a new line.

• They flow horizontally within a block element and don't break the line.

• Inline elements can contain only text or other inline elements.

94 Hyper Text Markup Language | © SmartCliff | Internal | Version 1.3

 HTML Basics

HTML Display: Inline Elements

Text Formatting Elements

<a> <abbr> <b> <bdo> <bdi> <br>

<cite> <code> <data> <del> <dfn> <em>

<i> <ins> <kbd> <mark> <q> <s>

<samp> <small> <span> <strong> <sub> <sup>

<time> <tt> <u> <var> <wbr>

95 Hyper Text Markup Language | © SmartCliff | Internal | Version 1.3

 HTML Basics

HTML Display: Inline Elements

Forms & Input Elements

<button> <input> <label> <select> <textarea> <option>

<optgroup>

Media Elements

<img> <picture> <map> <area> <audio> <video>

<source> <track> <svg> <iframe> <object> <param>

<embed>

96 Hyper Text Markup Language | © SmartCliff | Internal | Version 1.3

 HTML Basics

HTML Display: Inline Elements

Script Elements

<script> <noscript> <style>

Deprecated or Less Common Elements

<font> <basefont>

97 Hyper Text Markup Language | © SmartCliff | Internal | Version 1.3

 HTML Basics

HTML Display: Inline Elements: <span>

• The <span> tag is used to group inline content.

• It's typically used for applying styles or JavaScript functionality to a small portion of text or inline elements

without affecting the layout.

• This element does not start on a new line and only takes up as much width as necessary, allowing

content to flow inline with the surrounding text.

• It has both opening(<span>) and closing (</span>) tags and it is mandatory to close the tag.

98 Hyper Text Markup Language | © SmartCliff | Internal | Version 1.3

 HTML Basics

HTML Display: Inline Elements: <span>: Example

<html lang="en"> <div style="background-color: lightblue; color:#4800ffaf;

<head> padding: 10px;">

<meta charset="UTF-8"> <h1>This is a <span style="color:red">heading</span>

<meta name="viewport" content="width=device-width, inside a div</h1>

initial-scale=1.0"> <p>This is a <span style="font-weight:bold; color:

<title>Span Element</title> #b70c8f;">paragraph</span> inside a div</p>

</head> </div>

<body> <p>This is some text</p>

<p>Some Paragraph</p> </body>

</html>

99 Hyper Text Markup Language | © SmartCliff | Internal | Version 1.3

 HTML Basics

HTML Display: Inline Elements: <span>: Example

100 Hyper Text Markup Language | © SmartCliff | Internal | Version 1.3

 HTML Basics

HTML Display: Block and Inline Elements

Block & Inline Elements

<svg> <img> <button>

<input> <iframe> <video>

<audio>

Note :

• Block elements can contain inline elements.

• But inline elements typically do not contain block elements.

101 Hyper Text Markup Language | © SmartCliff | Internal | Version 1.3

 HTML Basics

HTML Display: Block vs Inline Elements

Feature Block Elements Inline Elements

Take up the full width of their parent Take up only as much width as
Width
container by default. necessary to display their content.

Take up the height of their content by default,

Take up only as much height as
Height but can be set to a fixed or percentage
necessary to display their content.
height.

Cause line breaks before and after the

Line breaks Do not cause line breaks.
element.

All types of margins and padding can be Only horizontal margins and padding
Margins and padding
applied to them. can be applied to them.

<div>, <p>, <h1> - <h6>, <ul>, <ol>, <table>,

Examples <strong>, <em>, <a>, <span>
<form>

102 Hyper Text Markup Language | © SmartCliff | Internal | Version 1.3

 HTML Basics

HTML Formatting

• Large or small screens and resized windows will create different results.

• With HTML, the output cannot be changed by adding extra spaces or extra lines in the HTML code.

• The browser will remove extra spaces and extra lines when the page is displayed.

• Any number of spaces, and any number of new lines, count as only one space.

• HTML Formatting is a process of formatting text for a better look and feel.

103 Hyper Text Markup Language | © SmartCliff | Internal | Version 1.3

 HTML Basics

HTML Formatting

• HTML Formatting is the way of representing textual context on the website in a better way, so the user

can easily navigate through the website.

• HTML Formatting is done by using:

• Physical Tags

• Logical Tags

104 Hyper Text Markup Language | © SmartCliff | Internal | Version 1.3

 HTML Basics

HTML Formatting: Physical Tags

• Physical tags are used to directly define the visual appearance of text, such as making it bold or italic.

• These tags specify how the text should be displayed, regardless of its context or meaning.

• <b>: Makes text bold

• <i>: Makes text italic

• <u>: Underlines text

• These tags were widely used in earlier versions of HTML but are now often replaced by CSS or logical

tags in modern web development.

105 Hyper Text Markup Language | © SmartCliff | Internal | Version 1.3

 HTML Basics

HTML Formatting: Logical Tags

• Logical tags define the meaning or importance of the text rather than its appearance.

• These tags give semantic meaning to the text, and the browser or other user agents determine the

appropriate styling.

• <strong> - Represents strong importance; typically rendered as bold.

• <em> - Represents emphasis; typically rendered as italic.

• <cite> - Represents a citation of a creative work.

• <abbr> - Represents an abbreviation or acronym.

• Logical tags are preferred in HTML5 for their semantic value, which improves accessibility and SEO.
106 Hyper Text Markup Language | © SmartCliff | Internal | Version 1.3
 HTML Basics

HTML Formatting: Physical Tags vs Logical Tags

Feature Physical Tags Logical Tags

Focus on what the text means or how it

Purpose Focus on how text should look.
should be interpreted.

More flexible; styling can be controlled

Limited flexibility; tied directly to visual
Flexibility through CSS, and the meaning is preserved
presentation.
across different user agents.

More accessible; they convey meaning and

Less accessible; they don’t convey the meaning
Accessibility context, which can be interpreted by screen
or context of the text to assistive technologies.
readers and other assistive tools.

Largely deprecated in favor of CSS for visual Encouraged in modern HTML for their
Modern Use
styling. semantic value.

107 Hyper Text Markup Language | © SmartCliff | Internal | Version 1.3

 HTML Basics

HTML Formatting Elements

• The following elements focus on how the text looks visually

Element Name Description

<b> This is a physical tag, which is used to bold the text written between it.

<i> This is a physical tag which is used to make text italic.

<u> This is a physical tag used to underline text written between it.

<s> This is a physical tag that is used to strike through text to indicate something is no longer
correct or relevant.

108 Hyper Text Markup Language | © SmartCliff | Internal | Version 1.3

 HTML Basics

HTML Formatting Elements

Element Name Description

<small> This tag is used to decrease the font size by one unit from base font size.

<mark> This tag is used to highlight text.

<sub> It displays the content slightly below the normal line.

<sup> It displays the content slightly above the normal line.

109 Hyper Text Markup Language | © SmartCliff | Internal | Version 1.3

 HTML Basics

HTML Formatting Elements

Element Name Description

<font> Changes font face, size, and color (Deprecated; use CSS).

<basefont> Sets the base font size (Deprecated; use CSS).

<tt> Renders text in a teletype or monospaced font (Deprecated).

<big> Make text larger (Deprecated; use CSS instead).

<strike> To strike through text (Deprecated; use <s> or CSS instead).

110 Hyper Text Markup Language | © SmartCliff | Internal | Version 1.3

 HTML Basics

HTML Formatting Elements : Example

<!DOCTYPE html> <p><s>This is strikethrough text.</s></p>

<html lang="en"> <p><small>This is smaller text.</small></p>
<head> <p><mark>This is highlighted text.</mark></p>
<meta charset="UTF-8"> <p>This is _subscript text.</p>
<meta name="viewport" content="width=device-width, <p>This is ^superscript text.</p>
initial-scale=1.0">
<title>Text Styling Examples</title> <!-- Deprecated Tags in Use -->
</head> <basefont face="Verdana" size="5" color="green">
<body>
<p><b>This is bold text.</b></p> <!-- Deprecated Tags -->
<p><i>This is italic text.</i></p> <p><font face="Arial" size="4" color="blue">This text
<p><u>This is underlined text.</u></p> uses the deprecated &lt;font&gt; tag to change font face,
size, and color.</font></p>

111 Hyper Text Markup Language | © SmartCliff | Internal | Version 1.3

 HTML Basics

HTML Formatting Elements : Example

<p><tt>This text is rendered in a teletype/monospaced

font (deprecated).</tt></p>

<!-- <big> Tag (Deprecated) -->

<p>This is <big>big text</big> using the deprecated
&lt;big&gt; tag.</p>

<!-- <strike> Tag (Deprecated) -->

<p>This is <strike>strikethrough text</strike> using the
deprecated &lt;strike&gt; tag.</p>

</body>
</html>

112 Hyper Text Markup Language | © SmartCliff | Internal | Version 1.3

 HTML Basics

HTML Formatting Elements

• The following elements are phrase tags that focus on the text’s meaning, structure, or context, which may
or may not include visual styling.

Element Name Description

<strong> This is a logical tag, which tells the browser that the text is important.

<em> This is a logical tag which is used to display content in italic.

<del> Represents deleted text, usually with a strikethrough.

<ins> Represents inserted text, usually with an underline.

<cite> Represents a reference to a creative work.

113 Hyper Text Markup Language | © SmartCliff | Internal | Version 1.3

 HTML Basics

HTML Formatting Elements

Element Name Description

<q> Represents a short inline quotation, often enclosed in quotation marks.

<blockquote> Used for long quotations, displayed as a separate block, typically indented.

<abbr> Defines an abbreviation or acronym, optionally providing a full form through the title
attribute.

<code> Displays text in a monospaced font, used for code snippets.

<var> Represents a variable in a mathematical expression or programming context.

<kbd> Represents user input, typically from a keyboard.

114 Hyper Text Markup Language | © SmartCliff | Internal | Version 1.3

 HTML Basics

HTML Formatting Elements

Element Name Description

<samp> Represents sample output from a computer program.

<dfn> Defines a term, usually highlighted on its first appearance.

<pre> Preformatted text, preserving whitespace and line breaks.

<bdi> Isolates a span of text that might be formatted differently from its surrounding text, often for
bidirectional text.

<bdo> Overrides the current text direction, useful for bidirectional text.

<address> It provides contact information for the document's author or owner.

115 Hyper Text Markup Language | © SmartCliff | Internal | Version 1.3

 HTML Basics

HTML Formatting Elements

Element Name Description

<span> A generic inline container for text, allowing CSS styling or scripting.

<acronym> Deprecated tag formerly used for acronyms, now replaced by <abbr>

<center> Centers text or content (Deprecated; use CSS instead).

116 Hyper Text Markup Language | © SmartCliff | Internal | Version 1.3

 HTML Basics

HTML Formatting Elements : Example

<!DOCTYPE html> <!-- Text Modifications -->

<html lang="en"> <p><del>This text is deleted (del).</del></p>
<head> <p><ins>This text is inserted (ins).</ins></p>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, <!-- Citations and Quotes -->
initial-scale=1.0"> <p><cite>This is a reference to a creative work
<title>HTML Formatting Examples</title> (cite).</cite></p>
</head> <p><q>This is an inline quotation (q).</q></p>
<body> <blockquote>
This is a block quotation (blockquote).
<!-- Text Emphasis --> </blockquote>
<p><strong>This text is important (strong).</strong></p>
<p><em>This text is emphasized (em).</em></p>

117 Hyper Text Markup Language | © SmartCliff | Internal | Version 1.3

 HTML Basics

HTML Formatting Elements : Example

<!-- Abbreviations --> <!-- Definitions and Preformatted Text -->

<p><abbr title="Hypertext Markup <p><dfn>HTML</dfn> stands for Hypertext Markup
Language">HTML</abbr> is the standard markup language Language (dfn).</p>
for creating web pages.</p> <pre>
<!-- Code and Programming Elements --> This text is preformatted (pre).
<p><code>&lt;code&gt;</code> is used to display inline Line breaks and spaces are preserved.
code (code).</p> </pre>
<p>The variable <var>x</var> equals 10.</p>
<p>Press <kbd>Ctrl</kbd> + <kbd>C</kbd> to copy <!-- Bidirectional Elements -->
(kbd).</p> <p><bdi>Text in different direction (bdi)</bdi>.</p>
<p>The program output was <samp>Hello, <p><bdo dir="rtl">This text is in right-to-left direction
World!</samp> (samp).</p> (bdo).</bdo></p>

118 Hyper Text Markup Language | © SmartCliff | Internal | Version 1.3

 HTML Basics

HTML Formatting Elements : Example

<!-- Contact Information --> <!-- Deprecated Elements -->

<address> <p><acronym title="Hypertext Markup
Written by John Doe.<br> Language">HTML</acronym> is used in older HTML
Visit us at:<br> versions (acronym, deprecated).</p>
1234 Elm Street, Some City, Country<br> <p><center>This text is centered using the deprecated
<a center tag.</center></p>
href="mailto:[email protected]">[email protected]
om</a> </body>
</address> </html>

<!-- Generic Container -->

<p><span>This is a generic inline container
(span).</span></p>

119 Hyper Text Markup Language | © SmartCliff | Internal | Version 1.3

 HTML Basics

HTML Formatting Elements : Example

120 Hyper Text Markup Language | © SmartCliff | Internal | Version 1.3

 HTML Basics

Hyperlinks and Bookmarks

• HTML links, or hyperlinks, connect web pages.

• They enable users to navigate between pages or resources.

• Links can be text, images, or other elements, enhancing web navigation and interactivity.

• A hyperlink is specified using HTML tag <a>.

• This tag is called an anchor tag and anything between the opening <a> tag and the closing </a> tag
becomes part of the link.

• Users can click on links to navigate between different pages or resources.

121 Hyper Text Markup Language | © SmartCliff | Internal | Version 1.3

 HTML Basics

Hyperlinks and Bookmarks

• Basic Structure of a Hyperlink:

Syntax:
<a href="URL">Link Text</a>

• href: Specifies the destination URL or the location to which the link should lead.

• Link Text: The clickable text that users see on the webpage.

122 Hyper Text Markup Language | © SmartCliff | Internal | Version 1.3

 HTML Basics

Basic HTML Tag: <a>

• HTML links are hyperlinks.

• An anchor tag is a HTML element that creates a link to a target URL.

• A hyperlink is a text or an image you can click on, and jump to another document.

Example: <a href="url">link text</a>

• The href attribute specifies the destination address

– Internal Link: Address location may be absolute / relative

– External Link: Website URL

123 Hyper Text Markup Language | © SmartCliff | Internal | Version 1.3

 HTML Basics

Basic HTML Tag: <a>

When you move the mouse over a link, two things will normally happen:

– The mouse arrow will turn into a little hand

– The color of the link element will change

By default, a link will appear like this (in all browsers):

– An unvisited link is underlined and blue

– A visited link is underlined and purple

– An active link is underlined and red

<p> External Link:</p>

<p>Learn HTML : <a href="http://www.w3schools.com" >Visit W3Schools!</a></p>

<p> Internal Link:</p>

<a href="information_about_the_planet_venus.txt">About planet venus!</a>

124 Hyper Text Markup Language | © SmartCliff | Internal | Version 1.3

 HTML Basics

Basic HTML Tag: <a>

The target attribute specifies where to open the linked document.

_blank: Opens the linked document in a new window or tab

_self: Opens the linked document in the same frame as it was clicked (this is default)

_parent: Opens the linked document in the parent frame

_top: Opens the linked document in the full body of the window

<p>Open link in a new window or tab: <a href="http://www.w3schools.com" target="_self" >Visit W3Schools!</a></p>

125 Hyper Text Markup Language | © SmartCliff | Internal | Version 1.3

 HTML Basics

Basic HTML Tag: <a>

Create Bookmarks

• HTML bookmarks are used to allow readers to jump to specific parts of a Web page.

• Bookmarks are practical if your website has long pages.

• To make a bookmark, you must first create the bookmark, and then add a link to it.

• When the link is clicked, the page will scroll to the location with the bookmark.

126 Hyper Text Markup Language | © SmartCliff | Internal | Version 1.3

 HTML Basics

Creating Bookmarks - Example

<html> <p>Python Programming</p>

<head> <h2>Web Design</h2>
<title>HTML Bookmark Example</title> <p>HTML 5</p>
</head> <p>CSS3</p>
<body> <h2>Databases</h2>
<h1>Tutorials</h1> <p>Oracle</p>
<p> <p>MySQL</p>
<a href="#script">Scripting Languages</a> <h2>
</p> <a name=“script">Scripting Languages</a>
<h2>Programming</h2> </h2>
<p>C Programming</p> <p>Javascript</p>
<p>C++ Programming</p> <p>PHP</p>
<p>Java Programming</p> </body></html>

127 Hyper Text Markup Language | © SmartCliff | Internal | Version 1.3

 HTML Basics

Basic HTML Tag: <img>

• Use the HTML <img> element to define an image.

• Use the HTML src attribute to define the URL of the image.

• Use the HTML alt attribute to define an alternate text for an image, if it cannot be displayed.

• Use the HTML width and height attributes to define the size of the image.

<img src="daisy_pollen_flower.jpg" alt="Flower">

128 Hyper Text Markup Language | © SmartCliff | Internal | Version 1.3

 HTML Basics

Basic HTML Tag: <img>

<p>An image:
<img src="smiley.png" alt="Smiley face" width="42" height="42"></p>
<p>A moving image:
<img src="programming.gif" alt="Computer man" width="48" height="48"></p>
<p>Note that the syntax of inserting a moving image is no different from a non-moving image.</p>

129 Hyper Text Markup Language | © SmartCliff | Internal | Version 1.3

 HTML Basics

Basic HTML Tag: <img>

<p>Create a link of an image:

<a href="information_about_the_planet_smiley.txt"><img src="smiley.png" alt="HTML tutorial" width="42" height="42"></a></p>

130 Hyper Text Markup Language | © SmartCliff | Internal | Version 1.3

 HTML Basics

Basic HTML Tag: <img>

<p>Image from the same folder as the current page:<p>
<img border="0" src="images/sun.gif" alt=“Sun" width="104" height="142">
<img border="0" src="./images/programming.gif" alt=“Computer_man" width="104" height="142">

<p>Insert an image from One Level down of the current web site:</p>
<img border="0" src="images/Test/merglobe.gif" alt=“Merglobe" width="104" height="142">

<p>Insert an image from a web site:</p>

<img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg" alt=“pexels.com" width="104"
height="142">

131 Hyper Text Markup Language | © SmartCliff | Internal | Version 1.3

 HTML Basics

Basic HTML Tag: <img>

<p>Insert an image from root of the current web site:</p>

<img border="0" src="/images/smiley.png" alt=“Smiley" width="104" height="142">

<p>Insert an image from One Level up of the current web site:</p>

<img border="0" src="../planets.gif" alt=“Planets" width="104" height="142">

<p>Insert an image from One Level up of the current web site:</p>

<img border="0" src="../images/venglobe.gif" alt=“Venglobe" width="104" height="142">

132 Hyper Text Markup Language | © SmartCliff | Internal | Version 1.3

 HTML Basics

Basic HTML Tag: Image Maps

• Use the <map> tag to define an image-map.

• An image-map is an image with clickable areas.

• The name attribute of the <map> tag is associated with the <img>'s usemap attribute and creates a
relationship between the image and the map.

• The <map> tag contains a number of <area> tags, that defines the clickable areas in the image-map

• Shape: To define the shape of the clickable area, and you can choose one of these values:

– rect - defines a rectangular region

– circle - defines a circular region

– poly - defines a polygonal region

– default - defines the entire region

133 Hyper Text Markup Language | © SmartCliff | Internal | Version 1.3

 HTML Basics

Basic HTML Tag: Image Maps

<p>Click on the sun or on one of the planets to watch it closer:</p>

<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">

<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.html">
<area shape="circle" coords="90,58,3" alt="Mercury" href="merglobe.gif">
<area shape="circle" coords="124,58,8" alt="Venus" href="information_about_the_planet_venus.txt">
</map>

134 Hyper Text Markup Language | © SmartCliff | Internal | Version 1.3

 HTML Basics

Basic HTML Tag: <figure>

• The <figure> element identifies self-contained content related to the main content, such as an image,

table, or chart.

• The <figcaption> element is often nested within a <figure> element to add a caption to the content

identified by the <figure> tags.

• A caption can be associated with the <figure> element by inserting a <figcaption>inside it (as the first or

the last child).

• The first <figcaption> element found in the figure is presented as the figure's caption.

135 Hyper Text Markup Language | © SmartCliff | Internal | Version 1.3

 HTML Basics

Basic HTML Tag: <figure>

<img src="flamingo.jpg" alt="flamingo">

<p><i>Fig:1</i>Flamingo</p>

<figure>
<img src="flamingo.jpg" alt="flamingo">
</figure>

<figure>
<img src="elephant.jpg" alt="Elephant">
<figcaption><i>fig. 1</i> An Elephant at Sunset</figcaption>
</figure>

136 Hyper Text Markup Language | © SmartCliff | Internal | Version 1.3

 HTML Basics

Basic HTML Tag: Tables

• The <table> HTML element represents tabular data — that is, information presented in a two-
dimensional table comprised of rows and columns of cells containing data.

• Tables are divided into table rows with the <tr> tag.

• Table data <td> are the data containers of the table.

• They can contain all sorts of HTML elements like text, images, lists, other tables, etc.

• The <caption> tag defines a table caption.

• The <caption> tag must be inserted immediately after the <table> tag.

• A table row can also be divided into table headings with the <th> tag.

137 Hyper Text Markup Language | © SmartCliff | Internal | Version 1.3

 HTML Basics

Basic HTML Tag: Tables

<table> <table border="1">

<tr> <caption>First Table</caption>
<td>Cell 1</td> <tr>
<td>Cell 2</td> <td>Cell 1</td>
<td>Cell 3</td> <td>Cell 2</td>
</tr> <td>Cell 3</td>
<tr> </tr>
<td>Cell 4</td> <tr>
<td>Cell 5</td> <td>Cell 4</td>
<td>Cell 6</td> <td>Cell 5</td>
</tr> <td>Cell 6</td>
</table> </tr>
</table>

138 Hyper Text Markup Language | © SmartCliff | Internal | Version 1.3

 HTML Basics

Basic HTML Tag: Tables

<table border="1">
<caption>First Table</caption>
<tr>
<th>First</th>
<th>Second</th>
<th>Thrid</th>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
<tr>
<td>Cell 4</td>
<td>Cell 5</td>
<td>Cell 6</td>
</tr>
</table>

139 Hyper Text Markup Language | © SmartCliff | Internal | Version 1.3

 HTML Basics

Basic HTML Tag: Tables

<table border="1">
<caption>First Table</caption>
<tr>
<th>First</th>
<th>Second</th>
<th>Thrid</th>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
<tr>
<td><img src="Image/Sunset.jpg" width=200px height=200px></td>
<td>Cell 5</td>
<td>Cell 6</td>
</tr>
</table>

140 Hyper Text Markup Language | © SmartCliff | Internal | Version 1.3

 HTML Basics

Basic HTML Tag: Tables

<table border="1"> </tr>
<tr> <tr>
<td> <td>HI</td>
<p>This is a paragraph</p> <td>HELLO</td>
<p>This is another paragraph</p> </tr>
</td> </table>
<td>This cell contains a table:
<table border="1">
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
<td>D</td>
</tr>
</table>
</td>

141 Hyper Text Markup Language | © SmartCliff | Internal | Version 1.3

 HTML Basics

Basic HTML Tag: Tables

Cellspacing and Cellpadding

• To adjust the white space in your table cells.

• The cellspacing attribute defines the width of the border, while cellpadding represents the distance
between cell borders and the content within a cell.

142 Hyper Text Markup Language | © SmartCliff | Internal | Version 1.3

 HTML Basics

Basic HTML Tag: Tables

<p>Table without cellspacing:</p> <p>Table with cellspacing:</p>
<table border="1"> <table border="1" cellspacing="10">
<tr> <tr>
<th>Month</th> <th>Month</th>
<th>Savings</th> <th>Savings</th>
</tr> </tr>
<tr> <tr>
<td>January</td> <td>January</td>
<td>$100</td> <td>$100</td>
</tr> </tr>
</table> </table>

<p><b>Note:</b> The cellspacing attribute is not supported in HTML5. Use

CSS instead.</p>

143 Hyper Text Markup Language | © SmartCliff | Internal | Version 1.3

 HTML Basics

Basic HTML Tag: Tables

• Colspan and rowspan
• Table cells can span across more than one column or row.

• The attributes COLSPAN ("how many across") and ROWSPAN ("how many down") indicate how many
columns or rows a cell should take up.

• Use the colspan attribute to make a cell span many columns

• Use the rowspan attribute to make a cell span many rows

144 Hyper Text Markup Language | © SmartCliff | Internal | Version 1.3

 HTML Basics

Basic HTML Tag: Tables

<table border="1"> colspan Example I
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$100</td>
</tr>
<tr>
<td colspan="2">Sum: $180</td>
</tr>
</table>

145 Hyper Text Markup Language | © SmartCliff | Internal | Version 1.3

 HTML Basics

Basic HTML Tag: Tables

<table border=2 cellpadding=10> colspan Example II

<tr> <th colspan=2 bgcolor="#99CCFF">Production</th> </tr>

<tr> <td>AAA</td> <td>1493</td> </tr>
<tr> <td>BBB</td> <td>3829</td> </tr>
<tr> <td>CCC</td> <td>0283</td> </tr>
<tr> <th colspan=2>Sales</th> </tr>
<tr> <td>XXX</td> <td>4827</td> </tr>
<tr> <td>YYY</td> <td>7246</td> </tr>
<tr> <td>ZZZ</td> <td>5689</td> </tr>
</table>

146 Hyper Text Markup Language | © SmartCliff | Internal | Version 1.3

 HTML Basics

Basic HTML Tag: Tables

<table border=1> rowspan Example
<tr>
<th>Month</th>
<th>Savings</th>
<th>Savings for holiday!</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
<td rowspan="2">$50</td>

</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>

147 Hyper Text Markup Language | © SmartCliff | Internal | Version 1.3

 HTML Basics

Basic HTML Tag: <colgroup>

• The <colgroup> tag specifies a group of one or more columns in a table for formatting.

• The <colgroup> tag is useful for applying styles to entire columns, instead of repeating the styles for
each cell, for each row.

• To define different properties to a column within a <colgroup>, use the <col> tag within the <colgroup>
tag.
<table> <tr>
<colgroup> <td>3476896</td>
<col span="2" style="background-color:red"> <td>My first HTML</td>
<col style="background-color:yellow"> <td>$53</td>
</colgroup> </tr>
<tr> <tr>
<th>ISBN</th> <td>5869207</td>
<th>Title</th> <td>My first CSS</td>
<th>Price</th> <td>$49</td>
</tr> </tr>
</table>

148 Hyper Text Markup Language | © SmartCliff | Internal | Version 1.3

 HTML Basics

Basic HTML Tag: List

• HTML lists are used to present list of information in well formed and semantic way. There are three
different types of list in HTML and each one has a specific purpose and meaning.

Ordered list

• Used to create a list of related items, in a specific order. All the list items are marked with numbers by
default. It is also known as numbered list.

Unordered list

• Used to create a list of related items, in no particular order. All the list items are marked with bullets.
It is also known as bulleted list.

Description list

• Used to create a list of terms and their descriptions.

149 Hyper Text Markup Language | © SmartCliff | Internal | Version 1.3

 HTML Basics

Basic HTML Tag: List

• The commonly used HTML list tag are as follows:

– <ul> Defines an unordered list

– <ol> Defines an ordered list

– <li> Defines a list item

– <dl> Defines a description list

– <dt> Defines the term in a description list

– <dd> Defines the description in a description list

150 Hyper Text Markup Language | © SmartCliff | Internal | Version 1.3

 HTML Basics

Basic HTML Tag: Ordered List

<h4>An Ordered List:</h4>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<ol reversed>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

151 Hyper Text Markup Language | © SmartCliff | Internal | Version 1.3

 HTML Basics

Basic HTML Tag: Ordered List

<h4>An Ordered List:</h4>
<p>First List</p>
<ol>
<li>Step 1</li>
<li>Step 2</li>
</ol>
<p>Second List</p>
<ol start="3">
<li>Step 3</li>
<li>Step 4</li>
</ol>
<p>Third List</p>
<ol>
<li>Step 5</li>
</ol>

Note: we used the “start” attribute on the “ol” tag to restart the numbering at "3" following the break in the
list above.

152 Hyper Text Markup Language | © SmartCliff | Internal | Version 1.3

 HTML Basics

Basic HTML Tag: Ordered List

<h4>Numbered list:</h4> <h4>Lowercase
<ol> Roman numbers list:</h4>
<li>Apples</li> <ol type="i">
<li>Bananas</li> <li>Apples</li>
</ol> <li>Bananas</li>
<h4>Letters list:</h4> </ol>
<ol type="A">
<li>Apples</li>
<li>Bananas</li>
</ol>
<h4>Lowercase letters list:</h4>
<ol type="a">
<li>Apples</li>
<li>Bananas</li>
</ol>
<h4>Roman numbers list:</h4>
<ol type="I">
<li>Apples</li>
<li>Bananas</li>
</ol>

153 Hyper Text Markup Language | © SmartCliff | Internal | Version 1.3

 HTML Basics

Basic HTML Tag: Unordered List

<h4>An Unordered List:</h4>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

154 Hyper Text Markup Language | © SmartCliff | Internal | Version 1.3

 HTML Basics

Basic HTML Tag: Unordered List

<h4>Disc bullets list:</h4>
<ul style="list-style-type:disc">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
</ul>
<h4>Circle bullets list:</h4>
<ul style="list-style-type:circle">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
</ul>
<h4>Square bullets list:</h4>
<ul style="list-style-type:square">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
</ul>

155 Hyper Text Markup Language | © SmartCliff | Internal | Version 1.3

 HTML Basics

Basic HTML Tag: Nested List

<h4>A nested List:</h4>
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea
<ul>
<li>China</li>
<li>Africa</li>
</ul>
</li>
</ul>
</li>
<li>Milk</li>
</ul>

156 Hyper Text Markup Language | © SmartCliff | Internal | Version 1.3

 HTML Basics

Basic HTML Tag: Comment Tag

• HTML comment tag use to comment a source code

<!--
Comments
-->

• Comments helps coders to improve the code readability and to understand more about the code

• Comments will not be displayed not the screen

• Comment Tag does not support any Standard Attributes.

157 Hyper Text Markup Language | © SmartCliff | Internal | Version 1.3

 HTML Basics

Basic HTML Tag: Comment Tag

<!DOCTYPE html>
<html>
<!--
HTML comment tag use to comment a source code. Comments helps coders to improve the code readability and to
understand more about the code Comments will not be displayed on the screen Comment Tag does not support any
Standard Attributes.
-->
<body>
<h1>Read the Comments given in your Code Page<h1>
</body>
</html>

158 Hyper Text Markup Language | © SmartCliff | Internal | Version 1.3

 HTML Basics

HTML Favicon

• A favicon is a small file containing one or more icons that are used to represent the website or a

blog.

• It is also known as a tab icon, website icon, URL icon, or bookmark icon.

• It is a small image displayed next to the page title in the browser tab.

• It should be a simple image with high contrast.

• It is displayed to the left of the page title in the browser tab.

159 Hyper Text Markup Language | © SmartCliff | Internal | Version 1.3

 HTML Basics

HTML Favicon

• How To Add a Favicon in HTML?

• To add a favicon to your website, either save your favicon image to the root directory of your web

server, or create a folder in the root directory called images, and save your favicon image in this

folder.

• A common name for a favicon image is "favicon.ico".

• Next, add a <link> element to your "index.html" file, after the <title> element.

160 Hyper Text Markup Language | © SmartCliff | Internal | Version 1.3

 HTML Basics

HTML Favicon
<!DOCTYPE html>

<html>
<head>
<title>My Page Title</title>
<link rel="icon" type="image/x-icon" href="/images/favicon.ico">
</head>

<body>

<h1>This is a Heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

161 Hyper Text Markup Language | © SmartCliff | Internal | Version 1.3

 HTML Basics

HTML Favicon
• Favicon File Format Support

• The file formats supported for a favicon image are:

– .ico (favorite icon)

– .png (Portable Network Graphics)

– .gif (Graphics Interchange Format)

– .jpeg (Joint Photographic Experts Group)

– .svg (Scalable Vector Graphics)

162 Hyper Text Markup Language | © SmartCliff | Internal | Version 1.3

 HTML Basics

HTML Emoji
• Emojis are small digital images or icons that are generally used in messaging and other places to
express emotions or ideas.

• Emojis are characters from the UTF-8 character set

• To display an HTML page correctly, a web browser must know the character set used in the page.

• Approach

• By setting the charset used to display webpages in the browser to UTF-8, emojis can be added
to HTML documents.

• Use the <meta> tag in the head section to specify this character encoding information.

• Emojis can be added to HTML after the charset has been declared by utilising the p and span
tags.
163 Hyper Text Markup Language | © SmartCliff | Internal | Version 1.3
 HTML Basics

HTML Emoji

• While the emoji is inserted in the same line using the <span> tag, it is inserted in a new line using

the <p> tag.

• Two methods are used to add emoji in HTML documents:

• Using hexadecimal code

• Using decimal code

• The hexadecimal and decimal codes for emojis start with &#x and end with “;” to inform the browser,

the character represented by the code needs to be displayed.

164 Hyper Text Markup Language | © SmartCliff | Internal | Version 1.3

 HTML Basics

HTML Emoji
<!DOCTYPE html>
<html>
<head>
<title>Emojis</title>
</head>
<body>

<!--Emojis-->
<p>Emoji : &#128540;</p> →Decimal
<p>Emoji : &#x1F61C;</p> →Hexadecimal

</body>
</html>

165 Hyper Text Markup Language | © SmartCliff | Internal | Version 1.3

 HTML Basics

Basic HTML Tag: HTML Form

• HTML Forms are required when you want to collect some data from the site visitor.

• For example during user registration you would like to collect information such as name, email address,
credit card, etc.

• A form will take input from the site visitor and then will post it to a back-end application such as CGI,
ASP.Net or PHP script etc.

• The back-end application will perform required processing on the passed data based on defined
business logic inside the application.

166 Hyper Text Markup Language | © SmartCliff | Internal | Version 1.3

 HTML Basics

HTML Form: <form> Element

• The <form> element defines an HTML form:

<form>
.
form elements
.
</form>

• HTML forms contain form elements.

• Form elements are different types of input elements, checkboxes, radio buttons, submit buttons,
and more.

167 Hyper Text Markup Language | © SmartCliff | Internal | Version 1.3

 HTML Basics

HTML Form Attributes

• The action attribute defines the action to be performed when the form is submitted.

• The common way to submit a form to a server, is by using a submit button. Normally, the form is
submitted to a web page on a web server.

<form action="action_page.html">

• The method attribute specifies the HTTP method (GET or POST) to be used when submitting the forms:

<form action="action_page.html" method="GET">

(OR)

<form action="action_page.html" method="POST">

168 Hyper Text Markup Language | © SmartCliff | Internal | Version 1.3

 HTML Basics

HTML Form Attributes: Get and Post Method

Get Method

• We can use GET (the default method) If the form submission is passive (like a search engine query),
and without sensitive information.

• When you use GET, the form data will be visible in the page address:

action_page.html?firstname=Arul&lastname=Kumar

• GET is best suited to short amounts of data.

Post Method

• We can use the POST method If the form is updating data, or includes sensitive information
(password).

• POST offers better security because the submitted data is not visible in the page address.

169 Hyper Text Markup Language | © SmartCliff | Internal | Version 1.3

 HTML Basics

HTML Form Elements

The HTML <form> element can contain one or more of the following form elements:
• <input>

• <label>

• <select>

• <textarea>

• <button>

• <fieldset>

• <legend>

• <datalist>

• <output>

• <option>

• <optgroup>
170 Hyper Text Markup Language | © SmartCliff | Internal | Version 1.3
 HTML Basics

HTML Form: <Input> Element

• The <input> element is the most important form element.

• The <input> element has many variations, depending on the type attribute.

Example:

• text Defines normal text input <input type="text">

• radio Defines radio button input (for selecting one of many choices) <input type="radio">

• submit Defines a submit button (for submitting the form) <input type="submit">

• Etc.,

• More Input Types: https://www.w3schools.com/html/html_form_input_types.asp

171 Hyper Text Markup Language | © SmartCliff | Internal | Version 1.3

 HTML Basics

HTML Form: <label> Element

The <label> element used to create a label. one label statement is used for one element

• The <label> element is useful for screen-reader users, because the screen-reader will read out loud the

• label when the user focus on the input element.

<h2>The Form Elements</h2>

<form action="">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname"><br><br>
<input type="submit" value="Submit">
</form>

172 Hyper Text Markup Language | © SmartCliff | Internal | Version 1.3

 HTML Basics

HTML Form: <select> Element

• The <select> element defines a drop-down list.

• The <option> elements defines an option that can be selected.

• By default, the first item in the drop-down list is selected.

• To define a pre-selected option, add the selected attribute to the option

<h2>The select Element</h2>

<p>The select element defines a drop-down list:</p>

<form action="/action_page.php">
<label for="cars">Choose a car:</label>
<select id="cars" name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</select>
<input type="submit">
</form>

173 Hyper Text Markup Language | © SmartCliff | Internal | Version 1.3

 HTML Basics

HTML Form Elements

<h1> Sample Form Example </h1>

<form action="Lable.html">
First name:<br>
<input type="text" name="firstname" value="John"> <br> Last name:<br>
<input type="text" name="lastname" value="Mathew"> <br>Password:<br>
<input type="password" id="pwd" name="pwd">
<input type="radio" id="radio" name="HTML" value="HTML">
<input type="checkbox" id="Cars" name="Cars" value="Cars">
<input type="button" onclick="alert('Hai HTML!')" value="Click Here!">
<input type="submit" value="Submit">
</form>
<a href="information_about_the_smiley.txt">Visit</a>
<p>If you click the "Submit" button, the form-data will be sent to a page called Lable.html".</p>

174 Hyper Text Markup Language | © SmartCliff | Internal | Version 1.3

 HTML Basics

HTML Form Elements

175 Hyper Text Markup Language | © SmartCliff | Internal | Version 1.3

 HTML Basics

HTML Form Elements

More HTML Form elements

https://www.w3schools.com/html/html_form_elements.asp

HTML Form element Attributes

https://www.w3schools.com/html/html_form_attributes.asp

176 Hyper Text Markup Language | © SmartCliff | Internal | Version 1.3

 HTML Basics

HTML Layout

• Page layout is the part of graphic design that deals with the arrangement of visual elements on a
page.

Page layout is used to make the web pages look better.

• It establishes the overall appearance, relative importance, and relationships between the graphic
elements to achieve a smooth flow of information and eye movement for maximum effectiveness or
impact.

177 Hyper Text Markup Language | © SmartCliff | Internal | Version 1.3

 HTML Basics

HTML Layout

HTML5 offers new semantic elements that define different parts of a web page:

• Header: Defines a header for a document or a section

• Nav: Defines a container for navigation links

• Section: Defines a section in a document

• Article: Defines an independent self-contained article

• Aside: Defines content aside from the content (like a sidebar)

• Footer: Defines a footer for a document or a section

• Details: Defines additional details

• Summary: Defines a heading for the details element

178 Hyper Text Markup Language | © SmartCliff | Internal | Version 1.3

 HTML Basics

HTML Layout

• The <div> element is often used as a layout tool, because it can easily be positioned with CSS.

HTML Layout Techniques

• There are four different ways to create multicolumn layouts.

• CSS float property

• CSS flexbox
Will discuss later
• CSS framework

• CSS grid

179 Hyper Text Markup Language | © SmartCliff | Internal | Version 1.3

 HTML Basics

Basic HTML Tag: <iframe>

• An iframe or inline frame is used to display external objects including other web pages within a web
page.

<iframe src="URL"></iframe>

• The src attribute specifies the URL (web address) or any web page of the iframe page.
<iframe src="demo_iframe.htm" width="200" height="200"></iframe>
<iframe src="demo_iframe.htm" style="border:none"></iframe>
<iframe src="demo_iframe.htm"
1 style="border:5px dotted2red"></iframe> 3

180 Hyper Text Markup Language | © SmartCliff | Internal | Version 1.3

 HTML Basics

Basic HTML Tag: <iframe>

<iframe height="300px" width="100%" src="demo_iframe.htm" name="iframe_a"></iframe>

<p><a href="https://www.youtube.com/embed/tgbNymZ7vqY" target="iframe_a">Muppet Music Vedio</a></p>

<p>When the target of a link matches the name of an iframe, the link will open in the iframe.</p>

181 Hyper Text Markup Language | © SmartCliff | Internal | Version 1.3

 HTML Basics

Basic HTML Tag: <meta>

• Metadata is data (information) about data.

• The <meta> tag provides metadata about the HTML document. Metadata will not be displayed on the
page, but will be machine parsable.

• Meta elements are typically used to specify page description, keywords, author of the document, last
modified, and other metadata.

• The metadata can be used by browsers (how to display content or reload page), search engines
(keywords), or other web services.

• <meta> tags always goes inside the <head> element.

• Metadata is always passed as name/value pairs.

182 Hyper Text Markup Language | © SmartCliff | Internal | Version 1.3

 HTML Basics

Basic HTML Tag: <meta>

• Define keywords for search engines:

<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">

• Define a description of your web page:

<meta name="description" content="Free Web tutorials on HTML and CSS">

• Define the author of a page:

<meta name="author" content="John Doe">

• Refresh document every 30 seconds:

<meta http-equiv="refresh" content="30">

• Setting the viewport to make your website look good on all devices:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

• Etc.,
183 Hyper Text Markup Language | © SmartCliff | Internal | Version 1.3
 HTML Basics

Basic HTML Tag: <meta>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="Hege Refsnes">
<meta http-equiv="refresh" content="30">
</head>
<body>
<p>All meta information goes in the head section...</p>
</body>
</html>

184 Hyper Text Markup Language | © SmartCliff | Internal | Version 1.3

 HTML Basics

HTML Media

• Multimedia on the web is sound, music, videos, movies, and animations.

• Multimedia comes in many different formats.

• It can be almost anything you can hear or see.

• Examples: Images, music, sound, videos, records, films, animations, and more.

• HTML5 multimedia promises an easier future for multimedia.

185 Hyper Text Markup Language | © SmartCliff | Internal | Version 1.3

 HTML Basics

HTML Media: Playing Videos

• Before HTML5, videos could only be played with a plug-in (like flash).

• The HTML5 <video> element specifies a standard way to embed a video in a web page.

• Currently, there are 3 supported video formats for the <video> element: MP4, WebM, and Ogg.

<video width="320" height="240" controls>

<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

186 Hyper Text Markup Language | © SmartCliff | Internal | Version 1.3

 HTML Basics

HTML Media: Playing Videos

• The controls attribute adds video controls, like play, pause, and volume.

It is a good idea to always include width and height attributes.

• If height and width are not set, the browser does not know the size of the video. The effect will be that
the page will change (or flicker) while the video loads.

• Text between the <video> and </video> tags will only display in browsers that do not support the
<video> element.

• Multiple <source> elements can link to different video files. The browser will use the first recognized
format.

187 Hyper Text Markup Language | © SmartCliff | Internal | Version 1.3

 HTML Basics

HTML Media: Playing Audios

• To play an audio file in HTML, use the <audio> element.

• The controls attribute adds audio controls, like play, pause, and volume.

• Multiple <source> elements can link to different audio files. The browser will use the first recognized
format.

• Currently, there are 3 supported file formats for the <audio> element: MP3, Wav, and Ogg.

<audio controls>
<source src="Sample.mpeg" type="audio/mpeg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

188 Hyper Text Markup Language | © SmartCliff | Internal | Version 1.3

 HTML Basics

HTML Media: Playing Audios

<audio controls>
<source src="Sample.mpeg" type="audio/mpeg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

<audio controls autoplay>

<source src="Sample.mpeg" type="audio/mpeg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

189 Hyper Text Markup Language | © SmartCliff | Internal | Version 1.3

 HTML Basics

HTML Media: Embed Map

Steps:

• Open Google Maps.

• Go to the directions, map, or Street View image you'd like to embed.

In the top left, click Menu .

• Click Share or embed map.

• Click Embed map.

• To the left of the text box, pick the size you want by clicking the Down arrow .

• Copy the text in the box. Paste it into the HTML of your website or blog.

190 Hyper Text Markup Language | © SmartCliff | Internal | Version 1.3

 HTML Basics

HTML Media: Embed Map

<iframe
src="https://www.google.com/maps/embed?pb=!1m23!1m12!1m
3!1d3916.2735766474107!2d76.9907259140108!3d11.01808889
21578!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!4m8!3e6!4m0!4
m5!1s0x3ba8583380afcb77%3A0x5e59090b4d743910!2sMontbl
eu%20Technologies%20Private%20Limited%2C%20RR%20Lan
dmark%2C%20Udayampalayam%20Road%2C%20Nava%20Ind
ia%20Rd%2C%20Coimbatore%2C%20641028!3m2!1d11.01806
48!2d76.992916!5e0!3m2!1sen!2sin!4v1628096015446!5m2!1se
n!2sin" width="600" height="450" style="border:0;"
allowfullscreen="" loading="lazy"></iframe>

191 Hyper Text Markup Language | © SmartCliff | Internal | Version 1.3

 Hypertext Markup Language (HTML)

Quiz

1.Which tag allows you to add a row in a table?

a) <td> </td>

b) <cr> </cr>

c) <tr> </tr>

d)<th> </TR>

Ans: (c)<tr> </tr>

192 Hyper Text Markup Language | © SmartCliff | Internal | Version 1.3
 Hypertext Markup Language (HTML)

Quiz

2. How can apply the background color for the HTML Page?

a) <body color="Red"></body>

b) <body background>Red</body>

c) <body background="Red"></body>

d) <body bgcolor="Red"></body>

Ans: d) <body bgcolor="Red"></body>

193 Hyper Text Markup Language | © SmartCliff | Internal | Version 1.3
 Hypertext Markup Language (HTML)

Quiz

3. Which tag will help you to create a Checkbox component in a HTML form?

a) <checkbox>

b) <input type="checkbox">

c) <input=checkbox>

d) <input checkbox>

Ans: b) <input type="checkbox">

194 Hyper Text Markup Language | © SmartCliff | Internal | Version 1.3
 Hypertext Markup Language (HTML)

Quiz

4. What are the different type of list supported by HTML

a) HTML support only Ordered List

b) HTML support only Unordered List

c) HTML Support both type of List

d) HTML does not support any List

Ans: c) HTML Support both type of List

195 Hyper Text Markup Language | © SmartCliff | Internal | Version 1.3
 Hypertext Markup Language (HTML)

Quiz

5. Which of the following HTML code is valid?

a) <font color="red">

b) <font background-color="red">

c) <font bgcolor="red">

d) <font background="red">

Ans: a) <font color="red">

196 Hyper Text Markup Language | © SmartCliff | Internal | Version 1.3
THANK YOU