HTML
Dr. Y.Krishna Bhargavi
Associate Professor
Department of CSE
GRIET
HTML – Structure of Web Page
• HTML document structure tells the browser how to render the text written in each of
the HTML elements of the web page.
• The structure of an HTML document is defined using
HTML tags.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
HTML – Structure of Web Page
• <!DOCTYPE> declaration which stands for Document Type.
• <!DOCTYPE html> declaration update the browser about the version of HTML being
used. By default, it points to HTML5, the latest version.
• The <html> tag encapsulates the complete web page content. All other tags are
'nested' within the <HTML> tag.
• Any HTML document or web page consists of two main sections the 'head' and the
'body'.
• Every HTML document/web page will have only one set of <html>...</html> tag,
<head>...</head> tag, <body>...</body> tag.
• HTML document/web page is saved with .htm or .html extension.
HTML – Structure of Web Page
• HTML elements are case-insensitive. The browser understands the HTML tags
irrespective of their cases.
• HTML Language is platform-independent. That means the same HTML code can run
on different operating systems.
Activity: (demo.html)
Add text in the body section to "Happy Learning!!“, title with “HTML Introduction” and
observe the output.
HTML – Head Tag
• The following elements can be provided within the head tag.
Tags Description
<title> Defines the title that should be displayed on the browser tab
Metadata is in-general, data about data
<meta> Provides metadata about the HTML document
Metadata will not be displayed on the page but will be machine readable
<style> Defines style information for the web page
<link> Defines a link to other documents like CSS
<script> Defines script like JavaScript
Activity: (meta.html)
HTML – Types of Elements
<p> </p>
Container
Elements
1 Block
1
Elements
<br/> Empty
Elements 2 Inline
2
Elements
Standalone Tags
Self Closing Tags
HTML – Attributes
• HTML elements can contain attributes used to set various properties and they are
optional.
• Some of the attributes can be used with any of the HTML elements, called global
attributes.
Syntax: <html lang=“en-US”>
• Features of Attributes:
• Attributes are to be set only in the start tag of a container HTML element.
• Attributes are case-insensitive, but it is recommended to use lowercase as a best
practice.
• It is recommended to use double-quotes for the values of the attributes.
• Use lowercase letters for attribute names for consistency
HTML – Semantic Tags
• <header> element contains header information of the web page.
• <article> element contains the main content of the web page.
• <section> element groups thematically related content.
• <aside> element contains side-info.
• <nav> element defines navigational links.
• <footer> element contains footer information.
• <main> element is used for demarking the main content of the
web page. Only one main tag per web page is allowed.
• <address> element helps to semantically organize address
details in HTML content
Activity: Hussain's Shopping
Quiz
1. Which of the following statements do you feel depicts the importance of having an
appropriate structure of an HTML page? (Choose more than 1 option)
a) Easy for the browser to understand where to display each text check
b) Describes web page content in a better way check
c) Can understand which other contents are linked to the current web page document
check Answer: a,b,c
2. Sam wants to create an HTML page. And he wants to display "Bonstay App" to appear
on the browser tab. In which section of the HTML code he should include the text "Bonstay
App"
a) head section b) body section c) either head or body section
Answer: a
Quiz
3. While creating HTML page, we use various HTML elements. And these HTML elements
together form the entire web page. Choose the element from the given options which
encloses all other elements in the web page
a) <title> b) <html> c) <body> d) <head>
Answer: b
4. Riya finds <!DOCTYPE html> at the beginning of all the web page codes. Can you help
her to understand the relevance of this?
a) It declares the version of HTML
b) It defines the capabilities of HTML
c) It defines the features of HTML
d) All of the options Answer: a
Quiz
5. Pick the two correct statements from the given options regarding the metadata of an
HTML web page.
a) <meta name="viewport" content="width=device-width, initial-scale=0.1">
specifies zoom level of 10% of the web page
b) <meta name="viewport" content="width=device-width, initial-scale=0.1">
specifies zoom level of 100% of the web page Answer: a
6. Which of the below is eventually facilitated by the addition of Semantic Tags?
1. Adding Styling for web page contents like header, footer, etc.
2. Adding the clarity of the role for page content.
3. Ability to provide an idea of what kind of content each portion of the page contains.
a) 1 and 3 b) 2 and 3 c) 1 and 2 Answer: b
HTML – Grouping Elements
HTML – Grouping Elements
• Associate mandatory visual spacing between logical portions of the textual description
so as to improve text readability.
• Highlight the topic headings.
• Group various portions of a web page like applying some common styling.
Quotation &
Paragraph Division List
Citation
<ol>
<div>
</ol>
<p> </div> <ul> <blockquote>
</p> <span> </blockquote>
</ul>
</span> <dl>
</dl>
HTML – Lists
<ol type="a" start="d" reversed>
1. Item
2. Item Ordered Lists
3. Item
• Item
Lists • Item Unordered Lists
• Item
DD
Desc List
Description Lists
HTML – Link Element
• Website is a collection of interconnected web pages.
• Hyperlinks are used to create connections or links between HTML documents/web
pages and users can navigate from one web page to another.
• A hyperlink can point to another web page, or website, or files, or even specific
locations on the same web page.
• Syntax: 1. <a href="https://www.griet.ac.in/" target="_blank">
2. <a href="http://www.google.com">
<img src="google.jpg" /> </a>
3. <h2 id="top">Topic</h2>
<a href="#top">Go to Top</a>
4. <a href="mailto:someone@xyz.com">Send Mail</a>
5. <a href="tel:+9999">Call Us</a>
HTML – Link Element
Types of Hyperlink:
• Text Hyperlink
• Image Hyperlink
• Bookmark Hyperlink
• Email Hyperlink
• Contact number Hyperlink
Target: _blank _self _parent _top #id
<a href="http://example.com" target="_blank" rel="noopener noreferrer">
Example site
</a>
Activity: (anchor.html)
HTML – Text Level Semantic Elements
Our Offices
Please contact our customer care center at 1800-200-300 or write to us at wecare@wayfar.in
Business timings: Monday through Saturday 9.30 AM to 6.30PM. Closed on Sundays and National Hoildays
Element Description
abbr Defines abbreviation or acronym
q Represents text quoted from another source by adding quotation mark (" ")
small Displays text in relatively smaller font-size
mark Highlights text
strong Displays text in bold
em Displays text in the italic or emphasized format
sub Displays text as subscript
sup Displays text as superscript
span Provides styling to text
br Breaks line of text
HTML – Character Entities
Character Description Entity Name Entity Number
Non-breaking
 
space
< Less than < <
> Greater than > >
& Ampersand & &
© Copyright © ©
€ Euro € €
£ Pound £ £
Registered
® ® ®
trademark
Quiz
1. Which of the following attribute can be used to specify the source of the quotation?
a) cite b) url c) href d)src
Answer: a
2. Jose wants to render the content on a web page with double space between words. He
added double spaces in HTML code but it renders only a single space on the web page.
Please help Jose to achieve the above requirement.
a) It is not possible to add more than 1 space between words in HTML web page
b) Jose can add and a real space to the next.
c) Jose can add &nonbreakingspace; between the words
Answer: b
Quiz
3. Is it possible to nest HTML lists?
a) True b) False
Answer: a
4. Joy has created a home page for his application and he has a lot of content in it. Once
the user reaches the bottom of the web page, he has to scroll all the way back to the top to
see the content in the beginning.
Is there any provision in HTML to reduce the user's effort in the above scenario?
a) Bookmark Hyperlink
b) Pagemark Hyperlink
c) Image Hyperlink
Answer: a
Quiz
5. Consider the below-mentioned code snippet.
<div>
<h4>Link element</h4>
<a href="https://fummysite.com" rel="noopener noreferrer" target="_blank" >
Go to website</a>
</div>
What would happen when the user clicks on the “Go to website” text?
a) The page would be opened in the same window.
b) The page would be opened in the new window.
c) The page would be opened in the complete body of the window. Answer: b
d) The text will not act as a link since the target attribute is not mentioned correctly.
HTML – Table
• HTML Tables provide a means by which we can create a tabular format of data on the web.
• An HTML table is a great way to display data that make more sense in spreadsheet formats
as shown below.
HTML – Table
• The table element is defined in HTML using <table>...</table> tag
• It contains table header and table body.
• The table header is for adding header information like column headers and the table
body is for table contents.
Element Description
caption Defines table heading
tr Defines row of the table
th Defines heading of the column
td Defines data of column
thead Defines header part of the table
tbody Defines the content part of the table
colgroup Helps to logically group two or more consecutive columns
THANK YOU
VISIT US
HTML – Forms
HTML – Forms
• HTML Forms, also known as Web Forms, help in capturing information from the user of
a web application.
• The form can be created using <form>...</form> tag of HTML.
• Syntax:
<form name=“Form name” action=“Link to server side program” method=“HTTP
Request method” target=“_self”> </form>
• The form input element is used to collect details from the user.
<input type=“input type” value=“element value”>
<label for=“id of form element”>
HTML – Forms
Value of "type" Description
text Creates textbox
password Creates textbox that accepts the only password
checkbox Creates checkbox
radio Creates a radio button
button Creates a clickable button
submit Creates a button that submits values of all form elements to the server
reset Creates a button that resets values of all form elements to their default value
image Creates a graphical version of a button
file Creates control to upload the file to the server
hidden Creates a hidden text field
HTML – Forms
Value of "type" Description
textarea Defines multiline text field
email Creates textbox that accepts only valid email id
number Creates spinbox that accepts only whole numbers
range Creates a range slider
search Creates a search bar
URL Creates textbox that accepts only valid URL
color Creates color picker
date Creates date picker to select date
month Creates date picker to select a month
week Creates date picker to select week
HTML – Forms
Attributes of input element:
• Placeholder
• Pattern
• Min
• Max
• Step
• Required
• Multiple
• Form-override : formaction, formnovalidate, formmethod,formtarget
HTML – Forms
Pattern Attribute of input element:
Match Symbols : . ^ $
Character Classes : [abc] [^abc] [a-z] [A-Z] [0-9]
/d /D /w/W /s /S
Quantifiers : * + {n} {n,} {n,m}
Grouping : (abc)
Escape Sequence : \
Assertions : /b /B (?=abc) (?!abc)(?<=abc) (?<!abc)
Example: ^(http:\/\/www\.[a-z\d]+\.(com|in|org)\/)$
HTML – Global Attributes
• Attributes that can be used with all HTML elements are called "Global attributes".
Attribute Description
contenteditable Allows the user to edit content. Possible values are true/false.
dir Specifies text direction. Possible values are Itr/ rtl.
title Displays the string message as a tooltip.
Specifies whether the spelling of an element's value should be checked or
spellcheck
not. Possible values are true/false.
id Gives a unique id to an element.
HTML – Media Elements
• HTML provides tags for embedding media content like audio, video, and images and
also for embedding external content like maps.
Image Video
Media
Audio iFrame
THANK YOU
VISIT US
