HTML Basics: Structure and Styles
Uploaded by
chintakindigaurav95HTML Basics: Structure and Styles
Uploaded by
chintakindigaurav95Introduction to HTML
What is HTML?
HTML stands for Hyper Text Markup Language
HTML is the standard markup language for creating Web pages
HTML consists of elements
HTML elements are used to display the content in the browser
Structure of HTML Page
A Simple HTML Document
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
What is an HTML Element?
An HTML element is defined by a start tag, some content, and an end tag:
<tagname> Content goes here... </tagname>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
Steps to execute HTML program
Step1: Open Notepad
Step2: Write HTML code
Step3: Save HTML page (Ex: [Link])
Step4: View HTML page in browser
Web Browsers
A web browser is a software application used to display web pages.
Examples of Web browsers:
o Google Chrome
o Mozilla Firefox
o Microsoft Edge etc…
HTML Headings
HTML headings are titles
HTML headings are defined with the <h1> to <h6> tags.
Example on HTML Headings
<!DOCTYPE html>
<html>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</body>
</html>
Homework
Interview Questions:
1) Describe about HTML
2) Write the structure of HTML Program
3) Explain about Web Browser and give examples
4) Execute HTML Headings program
HTML Styles
The HTML style attribute is used to add styles to an element, such as color, font, size, and
more.
Syntax of HTML style attribute
<tagname style="property:value;">
Here, "property:value;" is CSS related
Example:
<body style="background-color:blue;">
HTML Styles: Background Color
The CSS background-color property defines the background color for an HTML element
Example1 on Background Color property: Apply Blue color background to body tag:
<!DOCTYPE html>
<html>
<body style="background-color:blue;">
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Example2 on Background color attribute: Apply yellow color background to body tag
<!DOCTYPE html>
<html>
<body style="background-color:yellow;">
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Exercises: Apply the following colors to body tag one-by-one
Example3 on Background color attribute:
1) Apply chocolate background color to body tag
2) Apply yellow background color to paragraph tag
<!DOCTYPE html>
<html>
<body style="background-color: chocolate;">
<p style="background-color:yellow;">This is a paragraph.</p>
</body>
</html>
Example 4 on Background color attribute:
1) Apply “Blue” background color to body tag
2) Apply “BlueViolet” background color to heading1
3) Apply “Brown” background color to Paragraph
<!DOCTYPE html>
<html>
<body style="background-color:blue;">
<h1 style="background-color:BlueViolet;">This is a heading</h1>
<p style="background-color:Brow;">This is a paragraph.</p>
</body>
</html>
Home work:
Interview Questions:
1) Explain HTML Styles
2) What is the syntax of “style” attribute
3) Explain Background Color property
Task1:
a) Apply “BurlyWood” background color to h1
b) Apply “CadetBlue” background color to h2
Task2:
a) Apply “Chocolate” background color to h3
b) Apply “Coral” background color to h4
Task3:
a) Apply “Cornsilk” background color to h5
b) Apply “Crimson” background color to h6
Task4:
a) Apply “DarkOrange” background color to body
b) Apply “DarkGreen” background color to h1
c) Apply “DarkOrchid” background color to paragraph
HTML Styles: Text Color
The CSS “Text color” property defines the text color for an HTML element.
Syntax:
<tagname style=”color: color name;”> Content </tagname>
Example: <h1 style=”color:green;”> This is a heading </h1>
Example1:
a) Apply red color to heading1
b) Apply green color to heading2
c) Apply blue color to heading3
<!DOCTYPE html>
<html>
<head>
<title> Text color </title>
</head>
<body>
<h1 style="color:red;"> This is Heading1 </h1>
<h2 style="color:green;"> This is Heading2 </h2>
<h3 style="color:blue;"> This is Heading3 </h3>
</body>
</html>
Example2:
a) Apply red color to heading1
b) Apply green color to paragraph
c) Apply blue color to heading2
d) Apply orange color to paragraph
<!DOCTYPE html>
<html>
<head>
<title> Text color </title>
</head>
<body>
<h1 style="color:red;"> This is Heading1 </h1>
<h2 style="color:green;"> This is Heading2 </h2>
<h3 style="color:blue;"> This is Heading3 </h3>
</body>
</html>
Example3:
a) Apply yellow background color to heading 1 and apply blue color as text color
b) Apply blue background color to heading2 and apply yellow color as text color
<!DOCTYPE html>
<html>
<head>
<title> Applying background colors and text colors </title>
</head>
<body>
<h1 style="background-color:yellow; color:blue;">This is Heading 1</h1>
<h2 style="background-color:blue; color:yellow;">This is Heading 2</h2>
</body>
</html>
Home Work:
Interview Questions:
1) Explain “style” attribute
2) What is the difference between attribute and property
Task1:
a) Apply “orange” background color to body
b) Apply “green” background color to heading1 and apply “pink” color as text color
c) Apply “black” background color to heading2 and apply “while” color as text color
d) Apply “blue” background color to heading3 and apply “yellow” color as text color
e) Apply “red” background color to heading4 and apply “black” color as text color
Task2:
a) Apply “DarkOrange” background color to paragraph1 and apply “DarkGreen” as text color
b) Apply “DarkOrchid” background color to paragraph2 and apply “DarkOrange” as text color
HTML Styles: Fonts
The CSS font-family property defines the font to be used for an HTML element.
Syntax:
<tagname style=”font-family: font name;”> Content </tagname>
Ex: <h1 style=”font-family: arial;”> This is heading 1</h1>
Example1:
a) Apply “arial” font to h1 tag
b) Apply “arial black” font to h2 tag
<!DOCTYPE html>
<html>
<head>
<title> Fonts types </title>
</head>
<body>
<h1 style="font-family: arial;"> This is Heading1 </h1>
<h2 style="font-family: arial black;"> This is Heading2 </h2>
</body>
</html>
Example2:
a) Apply “Calibri” font to h3 tag
b) Apply “Agency FB” font to h4 tag
<!DOCTYPE html>
<html>
<head>
<title> font styles </title>
</head>
<body>
<h3 style="font-family: calibri;"> This is Heading 3</h3>
<h4 style="font-family: agency fb;"> This is Heading 4</h4>
</body>
</html>
Example3:
a) Apply “orange” background color to body tag
b) Apply “agency fb” font to h1 tag
c) Apply “Algerian” font to paragraph
<!DOCTYPE html>
<html>
<head>
<title> font styles and background color </title>
</head>
<body style="background-color:orange;">
<h1 style="font-family: agency fb;"> This is Heading 1</h1>
<p style="font-family: algerian;"> This is paragraph </p>
</body>
</html>
Home work:
Interview Questions:
a) Explain about “font-family” property
b) Write the list of fonts
c) Write the program to apply the fonts to four paragraphs
Task1:
a) Apply “Arial Black” font to h1 tag
b) Apply “Elephant” font to h2 tag
c) Apply “Georgia” font to h3 tag
d) Apply “Impact” font to h4 tag
e) Apply “Verdana” font to h5 tag
f) Apply “Tahoma” font to h6 tag
Task2:
a) Apply “Calibri” font to h1 tag
b) Apply “Century Gothic” font to first paragraph
c) Apply “Courier New” font to h2 tag
d) Apply “Verdana” font to second paragraph
HTML Styles: Text Size
The CSS font-size property defines the text size for an HTML element.
Syntax:
<tagname style=”font-size: percentage;”> Content </tagname>
Ex: <h1 style=”font-size:200%;”> This is Heading 1 </h1>
Example:
a) Apply 200% font size to h1 tag
b) Apply 150% font size to h2 tag
<!DOCTYPE html>
<html>
<head>
<title> Font Size </title>
</head>
<body>
<h1 style="font-size:200%;"> This is Heading 1</h1>
<h2 style="font-size:150%;"> This is Heading 2 </h2>
</body>
</html>
Example 2:
a) Apply 400% font size to h1 tag
b) Apply 200% font size to paragraph tag
<!DOCTYPE html>
<html>
<head>
<title> font size </title>
</head>
<body>
<h1 style="font-size:400%;"> This is Heading 1</h1>
<p style="font-size:200%;"> This is paragraph </p>
</body>
</html>
Example3:
a) Apply background color as blue to body tag
b) Apply background color as yellow to h1 tag, apply Arial Black font, 500% font size
c) Apply orange background color to paragraph tag, apply Arial font, 400% font size
<!DOCTYPE html>
<html>
<head>
<title> Background color, font type, font size </title>
</head>
<body style="background-color:blue;">
<h1 style="background-color:yellow; font-family: arial black; font-size:500%;"> This is Heading1
</h1>
<p style="background-color:orange; font-family: arial; font-size:400%;"> This is paragraph </p>
</body>
</html>
HTML Styles: Text Alignment
The CSS text-align property defines the horizontal text alignment for an HTML element.
Syntax:
<tagname style=”text-align: alignment type;”> Content </tagname>
Ex: <h1 style=”text-align:center;”> This is Heading 1</h1>
<h2 style=”text-align:right;”>This is Heading 2</h2>
Note: left side alignment is the default alignment.
Example1:
a) Apply Center alignment to h1 tag
b) Apply right alignment to paragraph tag
<!DOCTYPE html>
<html>
<head>
<title> Text Alignment </title>
</head>
<body>
<h1 style="text-align:center;">This is Heading 1</h1>
<p style="text-align:right;"> This is paragraph</p>
</body>
</html>
Home work:
Interview questions:
1) What is “font-size” property of “style” attribute?
2) Give Syntax of “font-size” property?
3) What is text alignment?
4) What are the text alignments? And what is the default text alignment?
5) What is the syntax of “text-align” property?
6) Give two examples for “font-size” property and “text-align” property?
Task1:
a) To h1 tag, apply blue background color, yellow text color, arial font and 350% font size
b) To h2 tag, apply green background color, white text color, arial black font and 300% font
size
c) To h3 tag, apply brown background color, yellow text color, agency fb font, and 250% font
size
d) To h4 tag, apply black background color, white text color, algerian font and 200% font size
e) To h5 tag, apply yellow background color, green text color, Impact font and 150% font size
f) To h6 tag, apply pink background color, red text color, High Tower Text font and 100% font
size
HTML Formatting Elements
Formatting elements are designed to display special types of text.
The following are the HTML formatting Elements:
o <b> - Bold text
o <i> - Italic text
o <mark> - Marked text
o <small> - Smaller text
o <del> - Deleted text
o <ins> - Inserted text
o <sub> - Subscript text
o <sup> - Superscript text
o <u> - underlined text
These HTML Formatting Elements are explained one-by-one:
HTML Formatting Elements: <b> and <i> Elements
The HTML <b> element defines bold text.
Syntax:
<b> Content </b>
Ex: <b> This is bold text </b>
The HTML <i> element defines Italic text.
Syntax:
<i> Content </i>
Ex: <i> This is Italic text </i>
Example1:
a) Apply orange background color to body tag
b) Apply blue background color to first paragraph and apply bold style
c) Apply pink background color to second paragraph and apply italic style
<!DOCTYPE html>
<html>
<head>
<title> Bold and Italic styles </title>
</head>
<body style="background-color: orange;”>
<p style=”background-color: blue;”><b> This is paragraph with bold style </b></p>
<p style=”background-color: pink;”><i> This is paragraph with Italic style </i></p>
</body>
</html>
Note: <p> is block-level element, where as <b> and <i> elements are Inline elements
A block-level element starts on new line.
Other examples of block-level elements:
o <h1> to <h6>
o <article>
o <div>
o <hr>
o <li>
o <ol>
o <ul>
o <table>
o <video>
An Inline element does not start on a new line.
Ex: <b> and <i> elements do not start on a new line.
Other examples of inline elements:
o <a>
o <big>
o <button>
o <code>
o <img>
o <input>
o <label>
o <map>
o <script>
o <select>
o <small>
o <sub>
o <sup>
o <textarea>
o <time>
Example2:
a) Apply yellow background color to body tag
b) Apply blue background color to h1 tag, orange text color, agency fb font, 150% font size
and both bold and Italic styles
c) Apply green background color to h2 tag, white text color, Calibri font, 100% font size and
Italic style
<!DOCTYPE html>
<html>
<head>
<title> bgcolor, text color, font type, font size, bold and italic </title>
</head>
<body style="background-color:yellow;">
<h1 style="background-color: blue; color: orange; font-family: agency fb; font-size: 150%;"><b><i>
This is Heading 1</i></b></h1>
<h2 style="background-color: green; color: white; font-family: calibri; font-size: 100%;"><i> This is
Heading 2 </i></h2>
</body>
</html>
HTML Formatting Elements: <small> and <mark> Elements
The HTML <small> element defines smaller text.
Syntax:
<small> Content </small>
Ex: <small> This is smaller text </small>
The HTML <mark> element defines the text that should be marked or highlighted.
Note: background color of marked text is yellow color by default.
Syntax:
<mark> content </mark>
Ex:
<p> HTML stands for <mark> Hyper Text Markup Language </mark></p>
Example1:
a) Apply orange background color to body tag
b) Display first paragraph as normal paragraph and apply green background color
c) To second paragraph, apply pink background color, apply “small” style
d) To third paragraph, apply blue background color, apply “mark” style
Ex: HTML stands for Hyper Text Markup Language
In this text, highlight Hyper Text Markup Language
<!DOCTYPE html>
<html>
<head>
<title> Small and Mark styles </title>
</head>
<body style="background-color: orange;">
<p style="background-color: green;"> This is normal paragraph </p>
<p style="background-color: pink;"><small> This is smaller paragraph </small> </p>
<p style="background-color: blue;"> HTML stands for <mark>Hyper Text Markup Language
</mark></p>
</body>
</html>
Example2:
a) Apply pink background color to body tag
b) To paragraph tag, apply blue background color, yellow text color, arial font, 200% font
size and apply “mark” style green background color
<!DOCTYPE html>
<html>
<head>
<title> mark example </title>
</head>
<body style="background-color: pink;">
<p style="background-color: blue; color: yellow; font-family: arial; font-size:200%;"> CSS stands for
<mark style="background-color: green;"> Cascading Style Sheets </mark></p>
</body>
</html>
Example3:
a) Apply blue background color to body tag
b) To paragraph tag, apply gold background color, red text color, arial black font, 250% font
size, and apply “mark” style with orange background color
<!DOCTYPE html>
<html>
<head>
<title> mark example </title>
</head>
<body style="background-color: blue;">
<p style="background-color:gold; color: red; font-family: arial black; font-size: 250%"> SQL stands for
<mark style="background-color: orange;"> Structured Query Language </mark> </p>
</body>
</html>
HTML Formatting Elements: <del> and <ins> Elements
The HTML <del> element defines text that has been deleted from a document.
Syntax:
<del> Content to delete </del>
Ex: <p> Product Discount <del> 10% </del></p>
The HTML <ins> element defines text that has been inserted into a document.
Syntax:
<ins> Content to insert </ins>
Ex: <p> Product Discount <del> 10% </del><ins> 20% </ins></p>
Example1:
a) Apply pink background color to body tag
b) Apply orange background color to <p> tag and apply <del>, <ins> tags
Ex: Content is: delete 5% discount and insert 10% discount on Samsung Galaxy S24
<!DOCTYPE html>
<html>
<head>
<title> del and ins example </title>
</head>
<body style="background-color: pink;">
<p style="background-color: orange;">Samsung Galaxy S24 <del> 5%</del><ins> 10% </ins>
discount</p>
</body>
</html>
HTML Formatting Elements: <sub> and <sup> Elements
The HTML <sub> element defines subscript text.
Subscript text appears half a character below the normal line.
Syntax:
<sub> content </sub>
Ex: <p> This is <sub> subscripted text </sub> </p>
The HTML <sup> element defines superscript text.
Superscript text appears half a character above the normal line.
Syntax:
<sup> content </sup>
Ex: <p> This is <sup> superscripted text </sup> </p>
Example:
a) Apply green background color to body tag
b) Apply yellow background color to paragraph tag and create the following formula by
using superscript tag
<!DOCTYPE html>
<html>
<head>
<title> Superscript </title>
</head>
<body style="background-color: green;">
<p style="background-color: yellow;"> (a+b)<sup>2</sup>=a<sup>2</sup>+b<sup>2</sup>+2ab</p>
</body>
</html>
Interview Questions:
a) Explain about <small> and <mark> tags
b) Write HTML programs on <small> and <mark> tags
c) Describe <del> and <ins> tags
d) Write two programs on <del> and <ins> tags
e) What is the difference between <sub> and <sup> tags
Task1:
a) Apply gold background color to body tag
b) To first paragraph, apply blue background color, apply “small” style
c) To second paragraph, apply purple background color, apply “mark” style.
Ex: HTML is the standard markup language for creating Web Pages.
In this text, highlight “Web Pages” word
Task2:
a) Apply blue background color to body tag
b) Apply orange background color to <p> tag and apply <del>, <ins> tags
Ex: Content is: delete 10% discount and insert 20% discount on Cosmetics
Task3:
a) Apply purple background color to body tag
b) Apply orange background color to <p> tag and create the following formula by using <sup>
tag
HTML Formatting Elements: <u> Element
The HTML <u> element defines underlined text.
Syntax:
<u> Content </u>
Ex: HTML stands for <u> Hyper Text Markup Language </u> </p>
Example:
a) Apply brown background to body tag
b) Apply blue background to h1 tag, apply white text color, apply 250% font size and give “
Web Development” heading
c) Apply yellow background color to paragraph tag, apply 150% font-size and underline “
Web Development” word in the following paragraph:
Web Development is the act of building, creating and maintaining websites. Web
Development encompasses broad range of tasks including everything from coding, to
technical design, to the performance of a website or application running on the internet.
Web Development consists of front-end and back-end components.
<!DOCTYPE html>
<html>
<head>
<title> Underlined Text example </title>
</head>
<body style="background-color: brown">
<h1 style="background-color: blue; color:white; font-size: 250%;"> Web Development </h1>
<p style="background-color: yellow; font-size:150%;">
<u>Web Development</u> is the act of building, creating and maintaining websites. <u>Web
Development</u> encompasses broad range of tasks including everything from coding, to technical
design, to the performance of a website or application running on the internet. <u>Web
Development</u> consists of front-end and back-end components.
</p>
</body>
</html>
Interview questions:
a) What is the difference between <sup> and <sub>
b) Display two examples on <sup> and <sub> tags
c) What is the purpose of <u> tag
d) Write one example on <u> tag
Task:
a) Apply purple background color to body tag
b) Apply yellow background color to h1 tag, apply blue text color, apply 200% font size and
give “Cyber Security” heading
c) Apply pink background color to paragraph tag, apply 150% font size and underline “Cyber
Security” word in the following paragraph:
Cyber Security involves using specialized tools to detect and remove harmful software
while also learning to identify and avoid online scams. Practicing good cyber security
habits keep your data private and ensure safe online experience. Cyber Security is also
referred to as Information Security, Information Assurance or System Security.
HTML Comments
HTML comments are used for writing explanations about the code, which can be useful for
anyone for reading or editing the HTML document.
Comments are not displayed in the browser.
By using HTML Comments, we can hide the code or content which need not be displayed in
the browser.
There are two types of HTML comments:
o Single-line comments
o Multi-line comments
Syntax of Single-line comment:
<!-- Comment here -->
Syntax of Multi-line comment:
<!--
Comment line1
Comment line2
-->
Example for Single-line comment:
a) Apply yellow background color to body tag
b) Write first paragraph with 200% font size
c) Hide the first paragraph
d) Write the second paragraph with 250% font size
e) Display the second paragraph
<!DOCTYPE html>
<html>
<head>
<title> HTML Single-line Comment </title>
</head>
<body style="background-color: yellow;">
<!-- <p style="font-size:200%;"> This is First paragraph </p> -->
<p style="font-size: 250%;">This is second paragraph </p>
</body>
</html>
Example for multi-line comment:
a) Apply pink background color to body tag
b) Write first paragraph with 150% font size
c) Write second paragraph with 200% font size
d) Hide first and second paragraphs
e) Write third paragraph with 250% font size
f) Display third paragraph
<!DOCTYPE html>
<html>
<head>
<title>HTML Multi-line comment </title>
</head>
<body style="background-color: pink;">
<!--
<p style="font-size: 150%;"> This is first paragraph </p>
<p style="font-size: 200%;"> This is second paragraph </p>
-->
<p style="font-size: 250%;"> This is third paragraph </p>
</body>
</html>
Homework:
Interview Questions:
a) What is the purpose of HTML Comments?
b) How many types of comments are there in HTML? And what are they?
c) Write the syntax of single-line and multi-line comments
d) Write two examples for HTML comments
Task1:
a) Apply blud background color to body tag
b) Write first paragraph with 150% font size
c) Hide first paragraph
d) Write second paragraph with 200% font size and display this second paragraph
e) Write third paragraph with 250% font size and display this third paragraph
Task2:
a) Apply orange background color to body tag
b) Write first paragraph with 200% font size
c) Write second paragraph with 250% font size
d) Hide first and second paragraphs
e) Write third paragraph with 300% font size and display third paragraph
HTML Links
HTML Links are used to go from one web page to another web page.
HTML Links are technically called as Hyperlinks.
The HTML <a> tag defines hyperlink. Here <a> tag stands for anchor tag.
Syntax:
<a href=”url”> Link text </a>
Here, “href” stands for Hypertext Reference. “href” is one attribute of <a> tag.
“url” stands for “Uniform Resource Locator”
“url” is the address of another HTML page
Ex: <a href=”[Link] Amazon Website </a>
www:
o www stands for World Wide Web
o World Wide Web is an information System which is used to share the information
over the internet
https:
o https stands for Hyper Text Transfer Protocol Secure
o https is used for secured communication over the internet.
Example1:
a) Apply gold background color to body tag
b) Write first <a> tag and open Amazon website
c) Write second <a> tag and open Flipkart website
<!DOCTYPE html>
<html>
<head>
<title> Anchor Tag Example </title>
</head>
<body style="background-color:gold;">
<a href="[Link] Amazon Website </a> <br>
<a href="[Link] Flipkart Website </a>
</body>
</html>
Example2:
a) Apply orange background color to body tag
b) To first <a> tag, apply text color as blue, apply font-family as arial and open “Amazon
Website”
c) To second <a> tag, apply text color as green, apply font-family as arial and open “Flipkart
Website”
d) To third <a> tag, apply text color as purple, apply font-family as arial and open “Big
Basket Website”
<!DOCTYPE html>
<html>
<head>
<title> Anchor Tag Example 2 </title>
</head>
<body style="background-color: orange;">
<a style="color: blue; font-family: arial;" href="[Link] Website</a>
<br>
<a style="color: green; font-family: arial;" href="[Link] Flipkart Website</a>
<br>
<a style="color: purple; font-family:arial;" href="[Link] Bigbasket
Website</a>
</body>
</html>
Home work:
Interview Questions:
a) What is the purpose of <a> tag?
b) Explain about “href” attribute?
c) What is WWW?
d) What is https?
Task1:
a) Apply blue background color to body tag
b) To first <a> tag, apply text color as yellow, apply font-family as Verdana, apply 200% font
size and open “Samsung Website”
c) To second <a> tag, apply text color as green, apply font-family as arial black, apply 200%
font size and open “iPhone Website”
Task2:
a) Apply green background color to body tag
b) To first <a> tag, apply text color as pink, apply font-family as arial black, apply 150% font
size and open “Tech Mahendra Website”
c) To second <a> tag, apply text color as blue, apply font-family as arial black, apply 150%
font size and open “Capgemini website”
Example3:
a) Apply pink background color to body tag
b) To first <a> tag, apply text color as purple, apply font-family as verdana, 200% font size
and open “TCS website”
c) To second <a> tag, apply text color as blue, font-family as verdana, 200% font size and
open “Wipro Website”
<!DOCTYPE html>
<html>
<head>
<title> Anchor tag example 3 </title>
</head>
<body style="background-color: pink;">
<a style="color: purple; font-family: verdana; font-size: 200%" href="[Link] TCS
Website </a>
<a style="color: blue; font-family: verdana; font-size: 200%" href="[Link] Wipro
Website </a>
</body>
</html>
HTML Links: The target Attribute
By default, the linked page will be displayed in the current browser window or same tab of
same window. To change this, we must specify another target for the link.
The target attribute specifies where to open the linked document.
The target attribute can have one of the following values:
o _self opens the document in the same tab. _self is default target. So, no need to
mention in the code.
o _blank opens the document in new tab.
Syntax of _blank
<a href=”url” target=”_blank”> Link Text </a>
Ex: <a href=”[Link] target=”_blank”> Amazon Website </a>
Here, Amazon website will open in new tab.
Example1:
a) Apply orange background color to body tag
b) To <a> tag, apply text color as green, apply font-family as arial, apply 200% font-size and
open “Tata website”, apply _blank target
<!DOCTYPE html>
<html>
<head>
<title> Target tag of anchor tag </title>
</head>
<body style="background-color: orange;">
<a style="color:green; font-family: arial; font-size:200%;" href="[Link]
target="_blank"> Tata Website </a>
</body>
</html>
Example2:
a) Apply purple background color to body tag
b) To <a> tag, apply background color as pink, apply text color as blue, apply font style as
Calibri and apply font size as 250% and open Mercedes benz website in another tab.
<!DOCTYPE html>
<html>
<head>
<title> Target tag example 2</title>
</head>
<body style="background-color:purple;">
<a style="background-color: pink; color: blue; font-family: calibri; font-size: 250%;"
href="[Link] target="_blank"> Mercedes Benz Website </a>
</body>
</html>
Home work:
Interview Questions:
a) Explain about “_self” value of target attribute of <a> tag
b) What is “_blank” value of target attribute of <a> tag
c) What is the fundamental difference between “_self” and “_blank” of <a> tag
Task:
a) Apply pink background color to body tag
b) To <a> tag, apply text color as blue, apply font-family as calibri and apply 250% font size
and open “HP website”, apply _blank target
HTML Links: Image as a Link
To use an image as a link, then put the <img> tag inside the <a> tag.
Syntax:
<a href=”url”> <img src=”image” alt=”alternate text” height=”size” width=”size”></a>
Here, in <img> tag
Src: specifies the path to the image file (or) Source of image file
Alt: provides alternative text for the image if it cannot be displayed.
Height and width: Define the dimensions of the image.
Ex: <a href=”[Link] src=”amazon [Link]” alt=”Amazon
website” height=”120” width=”120”></a>
Example1:
a) Apply “blue” background to body tag
b) Use <a> tag
c) Use “amazon [Link]” with 150 size as height and width
d) Use “amazon [Link]” as Hyperlink to open “amazon” website.
<!DOCTYPE html>
<html>
<head>
<title> using image as link </title>
</head>
<body style="background-color: blue;">
<a href="[Link] src="amazon [Link]" alt="Amazon Website"
height="150" width="150"> </a>
</body>
</html>
Example2:
a) Apply orange background color to body tag
b) Use <a> tag
c) Use “flipkart [Link]” with 100 size as height and width and use “flipkart image” to
open “flipkart website”
d) Use “bigbasket [Link]” with 100 size as height and width and use “bigbasket image”
to open “bigbasket website”
<!DOCTYPE html>
<html>
<head>
<title> Using image as a link </title>
</head>
<body style="background-color:orange;">
<a href="[Link] src="flipkart [Link]" alt="Flipkart website"
height="100" width="100"></a>
<a href="[Link] src="bigbasket [Link]" alt="Bigbasket website"
height="100" width="100"></a>
</body>
</html>
HTML Links: Link to an Email Address
“mailto” value to be used in <a> tag to link to an Email Address.
Syntax:
<a href=”[Link] address”> Link Text </a>
Ex: <a href=”[Link] Send Mail </a>
Example1:
a) Apply yellow background color to body tag
b) Use <a> tag, apply 200% font size
c) Link <a> tag to your Email address
<!DOCTYPE html>
<html>
<head>
<title> Linking to Email Address </title>
</head>
<body style="background-color: yellow;">
<a style="font-size:200%;" href="[Link] Send Mail </a>
</body>
</html>
Home work:
Interview questions:
a) What is the purpose of <img> tag?
b) What are the attributes of <img> tag?
c) Write the syntax of using image as <a> tag
d) How to link to Email ID through <a> tag?
Task1:
a) Apply green background color to body tag
b) Use <a> tag
c) Use “mercedes benz [Link]” with 150 size as height and width
d) Use “mercedes benz image” as Hyperlink to open “mercedes benz” website
Task2:
a) Apply yellow background color to body tag
b) To first <a> tag, apply orange background color, apply blue color to text, apply algerian font
style and apply 150% font size
c) Link to first Email ID through first <a> tag
d) To second <a> tag, apply blue background color, apply red color to text, apply algerian font
style and apply 150% font size
e) Link second Email ID through second <a> tag
HTML Links: Button as a Link
HTML button tag is used to open the link.
Syntax:
<button onclick=”[Link]=’url’ “> Link Text </button>
Here,
<button> is HTML tag.
Onclick is button event type.
[Link] is used to open the ‘url’
Ex: <button onclick=”[Link]=’[Link] “> Amazon Website
</button>
Example1:
a) Apply blue background color to body tag
b) Use button tag to open Amazon website
<!DOCTYPE html>
<html>
<head>
<title> Button tag as link </title>
</head>
<body style="background-color: blue;">
<button onclick="[Link]='[Link] Amazon Website </button>
</body>
</html>
Example2:
a) Apply orange background color to body tag
b) To first button, apply blue background color, apply pink text color, apply font type as
arial black, apply 200% font size and use this first button to open “Flipkart website”
c) To second button, apply black background color, apply white text color, apply font type
as arial black, apply 200% font size and use this button to open “bigbasket website”
<!DOCTYPE html>
<html>
<head>
<title> Button tag as a Link </title>
</head>
<body style="background-color: orange;">
<button style="background-color: blue; color:pink; font-family: arial black; font-size: 200%;"
onclick="[Link]='[Link] Flipkart Website </button>
<button style="background-color: black; color:white; font-family: arial black; font-size: 200%;"
onclick="[Link]='[Link] Bigbasket Website </button>
</body>
</html>
HTML Tables
HTML Table is used to arrange data into rows and columns.
Sample Table
Student ID Student Name Student Course
1 Ravi HTML, CSS, Javascript
2 Raju .Net Fullstack
Syntax of table: Example of table:
<table> <table>
<tr> <tr>
<th> Table Header1 </th> <th> Student ID </th>
<th> Table Header2 </th> <th> Student Name </th>
<th> Table Header3 </th> <th> Student Course </th>
</tr> </tr>
<tr> <tr>
<td> Table Data1 </td> <td> 1 </td>
<td> Table Data2 </td> <td> Ravi </td>
<td> Table Data3 </td> <td> HTML, CSS, Javascript
</tr> </td>
<tr> </tr>
<td> Table Data1 </td> <tr>
<td> Table Data2 </td> <td> 2 </td>
<td> Table Data3 </td> <td> Raju </td>
</tr> <td> .Net Fullstack </td>
</table> </tr>
</table>
Example1:
a) Apply green background color to body tag
b) Display the following student table:
Student ID Student Name Student Course
1 Ravi HTML, CSS, Javascript
2 Raju .Net Fullstack
<!DOCTYPE html>
<html>
<head>
<title> Student table </title>
</head>
<body style="background-color: green";">
<table border>
<tr>
<th> Student ID </th>
<th> Student Name </th>
<th> Student Course </th>
</tr>
<tr>
<td> 1 </td>
<td> Ravi </td>
<td> HTML, CSS, Javascript </td>
</tr>
<tr>
<td> 2 </td>
<td> Raju </td>
<td> .Net Fullstack </td>
</tr>
</table>
</body>
</html>
Homework
Interview questions:
a) Can we use button as link?
b) Can we link to Email ID?
c) Write the syntax for using button as link and similarly write the syntax to link to Email ID
d) How to represent data in the form of rows and columns in HTML?
e) Write the syntax of <table> tag
Task1: Create College table
Columns:
College ID
College Name
College Address
College Phone Number
College Email ID
Task2: Create Books Table
Columns:
Book ID
Book Name
Book Author
No. of pages
Book Price
Example2:
a) Apply pink background color to body tag
b) Use <table> tag, apply blue background color, apply yellow text color, apply arial black
font type, apply 200% font size
c) Display the following customer table:
Customer ID Customer Name Customer Phone No.
1 Susan 9988776655
2 Suresh 8877665544
<!DOCTYPE html>
<html>
<head>
<title> Customer Table </title>
</head>
<body style="background-color:pink;">
<table border style="background-color: blue; color: yellow; font-family: arial black; font-size: 200%;">
<tr>
<th>Customer ID</th>
<th>Name</th>
<th>Ph No.</th>
</tr>
<tr>
<td>1</td>
<td>Susan</td>
<td>9988776655</td>
</tr>
<tr>
<td>2</td>
<td>Suresh</td>
<td>8877665544</td>
</tr>
</table>
</body>
</html>
We can apply style attribute to HTML tags in three ways:
1. Inline style
2. Internal style
3. External style
Inline Style: If we use Style attribute within tag then it is called as Inline Style
Ex: <table style=”background-color: blue; color: yellow; font-family: arial black; font-size:200%;”>
Internal Style:
It is also called as Embedded Style
If we use <style> tag under <head> tag then it is called as Internal style or Embedded style
Ex:
<head>
<title> Internal style example </title>
<style>
table{
background-color: blue;
color: yellow;
font-family: arial black;
font-size: 200%;
}
</style>
</head>
Example1 on internal style:
Apply the following styles to the customer table:
a) Table background color: blue
b) Table text color: yellow
c) Table text font type: arial black
d) Table text font size: 200%
<!DOCTYPE html>
<html>
<head>
<title> Internal style exmaple1 </title>
<style>
table{
background-color: blue;
color: yellow;
font-family: arial black;
font-size:200;
</style>
</head>
<body>
<table border>
<tr>
<th>Customer ID</th>
<th>Name</th>
<th>Phone</th>
</tr>
<tr>
<td>1</td>
<td>Ramesh</td>
<td>9988776655</td>
</tr>
<tr>
<td>2</td>
<td>Suresh</td>
<td>8877665544</td>
</tr>
</table>
</body>
</html>
When we will go for inline style and internal style and external style?
Ans:
a) If we want to apply the style to a tag individually then we will go for inline style
b) If we want to apply the style to a tag throughout the document then we will go for internal
style
c) If we want to apply the style to a tag throughout multiple documents then we will go for
external style
Home work:
Interview questions:
a) What is the fundamental difference between inline style, internal style and external style?
b) Write the syntaxes for inline and internal styles
Task1: Apply inline styles to Faculty table and student table
Task2: Apply internal style to University table and College table
External Style
If we want to apply the style to a tag throughout multiple documents then we will
go for External Style
Syntax for using external Style:
<head>
<title> Some title goes here </title>
<link rel=”stylesheet” href=”[Link]”>
</head>
Ex:
<head>
<title> External Style Example </title>
<link rel=”stylesheet” href=”[Link]”>
</head>
Note: file name is your choice. Ex: [Link]
Steps for using External Style sheets:
Step1: Create [Link] file and save in your current working directory.
Note: File name is your choice. Ex: [Link]
Sample code in [Link] file:
table{
background-color: blue;
color: yellow;
font-family: arial black;
font-size: 200%;
}
Step2: create [Link] file and save it in current working directory.
Note: file name is your choice. Ex: [Link]
Sample Code in [Link] file:
<!DOCTYPE html>
<html>
<head>
<title> External Style Example1 </title>
<link rel=”stylesheet” href=”[Link]”>
</head>
<body>
<table border>
<tr>
<th> Customer ID </th>
<th> Customer Name </th>
<th> Customer Phone No. </th>
</tr>
<tr>
<td> 1 </td>
<td> Suresh </td>
<td> 9988776655 </td>
</tr>
<tr>
<td> 2 </td>
<td> Surendhra </td>
<td> 8877665544 </td>
</tr>
</table>
</body>
</html>
Open [Link] file in the browser to display the output.
Interview Questions:
a) What is HTML Table?
b) Explain <th>, <tr>, <td> tags?
c) Differences between inline style, internal style and external style
d) Write the syntaxes for inline style, internal style, and external style
Task1:
a) Apply orange background color to body tag
b) Apply inline style to student table
Columns: Student ID, Name, Gender, Address, Phone, Email ID, Course
Task2:
a) Apply green background color to body tag
b) Apply internal style to Employees table
Columns: Emp ID, Name, Dept, Salary
Task3:
a) Apply purple background color to body tag
b) Apply external style to Department table
Columns: Dept ID, Name, Location, phone, Email ID
HTML Table Borders
HTML tables can have different shapes of borders.
Syntax to add border to table with 1 pixel size and with black color:
<head>
<title> Title goes here </title>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
Example1:
Create a table with 2 pixels border size and with blue border color with following columns:
a) First Name
b) Last Name
c) Age
<!DOCTYPE html>
<html>
<head>
<title> Table border Example1 </title>
<style>
table, th, td {
border: 2px solid blue;
</style>
</head>
<body>
<table>
<tr>
<th> First Name </th>
<th> Last Name </th>
<th> Age </th>
</tr>
<tr>
<td> Anitha </td>
<td> Muthyala </td>
<td> 25 </td>
</tr>
<tr>
<td> Ganga </td>
<td> VH </td>
<td> 25 </td>
</tr>
</table>
</body>
</html>
Example2:
Create passenger table with the following properties:
a) Border size: 4px
b) Border color: green
c) Font-family: verdana
d) Font-size: 100%
e) Background color: yellow
f) Text color: blue
g) Columns are:
1) Passenger ID
2) Name
3) Destination
4) Date Of Journey
<!DOCTYPE html>
<html>
<head>
<title> Table border example2 </title>
<style>
table, th, td {
border: 4px solid green;
font-family: verdana;
font-size: 100%;
background-color: yellow;
color: blue;
</style>
</head>
<body>
<table>
<tr>
<th> Passenger ID </th>
<th> Name </th>
<th> Destination </th>
<th> Date Of Journey </th>
</tr>
<tr>
<td> 11 </td>
<td> Sunil </td>
<td> Banglore </td>
<td> 18-Feb-2025 </td>
</tr>
<tr>
<td> 12 </td>
<td> Karthik </td>
<td> Chennai </td>
<td> [Link]-2025 </td>
</tr>
</table>
</body>
</html>
HTML Table Borders: Collapsed Table Borders
To avoid double borders in a table, we have to use “Collapsed table borders” concept.
We use border-collapse property to avoid double borders in a table.
Syntax:
<head>
<style>
table, th, td {
border-collapse: collapse;
}
</style>
</head>
Example:
Display the clear difference between with “border-collapse” and without “border-collapse” on
Employees table
Columns are:
a) Emp ID
b) Emp Name
c) Emp Salary
d) Table font family: Calibri
e) Table font size: 200%
<!DOCTYPE html>
<html>
<head>
<title> Border Collapse Example </title>
<style>
table{
border-collapse: collapse;
font-family: calibri;
font-size: 200%;
</style>
</head>
<body>
<table border>
<tr>
<th>Emp ID</th>
<th>Emap Name</th>
<th>Emp Salary</th<
</tr>
<tr>
<td>1</td>
<td>Mahesh</td>
<td>Rs.50,000</td>
</tr>
<tr>
<td>2</td>
<td>Kumar</td>
<td>Rs.60,000</td>
</tr>
</table>
</body>
</html>
HTML Table Borders: Round Table Borders
To get round table borders, we have to use border-radius property.
Syntax:
<head>
<style>
table, th, td {
border: 1px solid black;
border-radius: 10px;
}
</style>
</head>
Example:
a) Apply orange background color to body tag
b) Apply round table borders to Employee table
Columns: Emp ID, Emp Name, Emp Salary
<!DOCTYPE html>
<html>
<head>
<title> Round Table Border example </title>
<style>
table, th, td {
border: 1px solid black;
border-radius: 10px;
</style>
</head>
<body style="background-color: orange;">
<table>
<tr>
<th>Emp ID</th>
<th>Emap Name</th>
<th>Emp Salary</th>
</tr>
<tr>
<td>1</td>
<td>Mahesh</td>
<td>Rs.50,000</td>
</tr>
<tr>
<td>2</td>
<td>Kumar</td>
<td>Rs.60,000</td>
</tr>
</table>
</body>
</html>
Interview Questions:
a) Why we use “border-collapse” property?
b) How to increase border thickness?
c) How to give rounded borders to table?
Task1:
a) Apply blue background color to body tag
b) Apply “border-collapse” property to customer table
c) To customer table, apply 1 pixel border size and black color as border color
d) Columns are:
Customer ID
Name
Address
Phone
Email ID
Task2:
a) Apply green background color to body tag
b) Create Students table
c) To students table, apply rounded borders
d) Columns are:
Student ID
Name
Course
HTML Table Borders: Dotted Table borders
Sample Dotted Table border
To get dotted table border, we have to use border-style: dotted;
Code:
<head>
<style>
table, th, td {
border-style: dotted;
}
</style>
</head>
Example:
Apply dotted table border to Employee table.
Columns: Emp ID, Emp Name, Emp Salary
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border-style: dotted;
}
</style>
</head>
<body>
<table>
<tr>
<th> Emp ID </th>
<th> Emp Name </th>
<th> Emp Salary </th>
</tr>
<tr>
<td> 1 </td>
<td> Anitha </td>
<td> Rs.1,00,000 </td>
</tr>
<tr>
<td> 2 </td>
<td> Sunil </td>
<td> Rs.1,00,000 </td>
</tr>
<tr>
<td> 3 </td>
<td> Ganga </td>
<td> Rs.1,00,000 </td>
</tr>
</table>
</body>
</html>
HTML Table Borders: Dashed Table borders
Sample Dashed Table border:
To get the dashed border to a table, we have to use border-style: dashed;
Code:
<head>
<style>
table, th, td {
border-style: dashed;
}
</style>
</head>
Example:
Apply dashed border to Employee table
Columns: Emp ID, Emp Name, Emp Salary
<!DOCTYPE html>
<html>
<head>
<style>
table,th,td{
border-style: dashed;
</style>
</head>
<body>
<table>
<tr>
<th> Emp ID </th>
<th> Emp Name </th>
<th> Emp Salary </th>
</tr>
<tr>
<td> 1 </td>
<td> Anitha </td>
<td> Rs.1,00,000 </td>
</tr>
<tr>
<td> 2 </td>
<td> Sunil </td>
<td> Rs.1,00,000 </td>
</tr>
<tr>
<td> 3 </td>
<td> Ganga </td>
<td> Rs.1,00,000 </td>
</tr>
</table>
</body>
</html>
HTML Table Borders: Groove Table borders
Sample Groove table border:
Groove border means: Outer thick border and inner thin border
To get groove border to a table, we have to use border-style: groove;
Code:
<head>
<style>
table, th, td {
border-style: groove;
}
</style>
</head>
Example:
Apply groove border style to Employee table
Columns: Emp ID, Emp Name and Emp Salary
<!DOCTYPE html>
<html>
<head>
<title> Groove Table Border </title>
<style>
table,th,td{
border-style: groove;
</style>
</head>
<body>
<table>
<tr>
<th> Emp ID </th>
<th> Emp Name </th>
<th> Emp Salary </th>
</tr>
<tr>
<td> 1 </td>
<td> Anitha </td>
<td> Rs.1,00,000 </td>
</tr>
<tr>
<td> 2 </td>
<td> Sunil </td>
<td> Rs.1,00,000 </td>
</tr>
<tr>
<td> 3 </td>
<td> Ganga </td>
<td> Rs.1,00,000 </td>
</tr>
</table>
</body>
</html>
HTML Table Borders: Inset Table borders
Sample Inset Table border:
It is same as Groove type but with special effect.
To get Inset border to a table, we have to use border-style: inset;
Code:
<head>
<style>
table, th, td {
border-style: inset;
}
</style>
</head>
Example:
Apply inset border style to Employee table
Columns: Emp ID, Emp Name, Emp Salary
<!DOCTYPE html>
<html>
<head>
<title> Inset Table Border </title>
<style>
table,th,td{
border-style: inset;
}
</style>
</head>
<body>
<table>
<tr>
<th> Emp ID </th>
<th> Emp Name </th>
<th> Emp Salary </th>
</tr>
<tr>
<td> 1 </td>
<td> Anitha </td>
<td> Rs.1,00,000 </td>
</tr>
<tr>
<td> 2 </td>
<td> Sunil </td>
<td> Rs.1,00,000 </td>
</tr>
<tr>
<td> 3 </td>
<td> Ganga </td>
<td> Rs.1,00,000 </td>
</tr>
</table>
</body>
</html>
HTML Table Sizes
HTML tables can have different sizes for each row and column.
The following are the sample sizes of rows and columns in a table.
Sample Table: 100% wide Table
Sample Table: first column is 70% of the table width
Sample Table: height of the second row is 200 pixels
HTML Table Sizes: 100% Wide Table
Sample Table:
Code:
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
</style>
</head>
<body>
<table style=”width: 100%;”>
Remaining code is as it is………
Complete Code
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
</style>
</head>
<body>
<table style="width: 100%">
<tr>
<th> Emp ID </th>
<th> Emp Name </th>
<th> Emp Salary </th>
</tr>
<tr>
<td> 1 </td>
<td> Anitha </td>
<td> Rs.1,00,000 </td>
</tr>
<tr>
<td> 2 </td>
<td> Sunil </td>
<td> Rs.1,00,000 </td>
</tr>
<tr>
<td> 3 </td>
<td> Ganga </td>
<td> Rs.1,00,000 </td>
</tr>
</table>
</body>
</html>
HTML Table Sizes: Set the first column to 70% of table width
Sample Table:
Code to set the first column to 70% of the table width (use same Employee table):
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
</style>
</head>
<body>
<table style="width: 100%">
<tr>
<th style="width: 70%"> Emp ID </th>
<th> Emp Name </th>
<th> Emp Salary </th>
</tr>
<tr>
<td> 1 </td>
<td> Anitha </td>
<td> Rs.1,00,000 </td>
</tr>
<tr>
<td> 2 </td>
<td> Sunil </td>
<td> Rs.1,00,000 </td>
</tr>
<tr>
<td> 3 </td>
<td> Ganga </td>
<td> Rs.1,00,000 </td>
</tr>
</table>
</body>
</html>
HTML Table Sizes: Set the height of the second row to 200 pixels
Sample Table:
Code:
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
</style>
</head>
<body>
<table style="width: 100%">
<tr>
<th> Emp ID </th>
<th> Emp Name </th>
<th> Emp Salary </th>
</tr>
<tr style="height:200px">
<td> 1 </td>
<td> Anitha </td>
<td> Rs.1,00,000 </td>
</tr>
<tr>
<td> 2 </td>
<td> Sunil </td>
<td> Rs.1,00,000 </td>
</tr>
<tr>
<td> 3 </td>
<td> Ganga </td>
<td> Rs.1,00,000 </td>
</tr>
</table>
</body>
</html>
Homework:
Interview Questions:
a) How to apply dotted border to a table?
b) Apply dashed border to Customer table (Columns are: Customer ID, Name, Address)
c) Display Groove style of border to Employee table
d) Write the syntax to apply inset border to a table
e) Write the syntax to display 70% width for first column of Student table (Columns are: Student ID, Name,
Course)
f) How to give 100% wide table width?
g) How to increase the row size in a table?
Task1:
a) Apply Groove style of border to college table (Columns are: College ID, Name, Address)
b) Apply 50% width to first column
c) Apply 200 pixels height to second row
HTML Tables: Cell Padding & Cell Spacing
Cell means: The box which contains the data
Cell padding means: The space within the cell
Cell spacing means: The space outside the cell
Syntax of Cell Padding:
th, td {
padding: No. of pixels;
}
Ex:
th, td {
padding: 15px;
}
Sample Code:
<head>
<style>
table, th, td {
border: 1px solid black;
th, td {
padding: 15px;
</style>
</head>
Example:
a) Apply orange background to body tag
b) Put <h1> tag with “Employees Table” heading
c) Create Employee Table
Columns: Emp ID, Emp Name, Emp Salary
d) To Employee table, give 1pixel solid black border and 15 pixels of Cell padding
<!DOCTYPE html>
<html>
<head>
<title> Cell padding Example </title>
<style>
table, th, td {
border: 1px solid black;
th, td{
padding: 30px;
</style>
</head>
<body style="background-color: orange;">
<h1> Employees Table </h1>
<table border>
<tr>
<th> Emp ID </th>
<th> Emp Name </th>
<th> Emp Salary </th>
</tr>
<tr>
<td> 1 </td>
<td> Ravi </td>
<td> Rs.50,000 </td>
</tr>
<tr>
<td> 2 </td>
<td> Raju </td>
<td> Rs.60,000 </td>
</tr>
</table>
</body>
</html>
Cell Spacing:
Cell Spacing: The space outside the cell
Cell spacing is also called as border spacing
Syntax of Cell spacing:
<head>
<style>
table {
border-spacing: No. of pixels;
}
</style>
</head>
Example:
a) Apply orange background to body tag
b) Put <h1> tag with “Employees Table” heading
c) Create Employee Table
Columns: Emp ID, Emp Name, Emp Salary
d) To Employee table, give 1pixel solid black border and 30 pixels of Cell Spacing
<!DOCTYPE html>
<html>
<head>
<title> Cell spacing Example </title>
<style>
table, th, td {
border: 1px solid black;
table{
border-spacing: 30px;
</style>
</head>
<body style="background-color: orange;">
<h1> Employees Table </h1>
<table border>
<tr>
<th> Emp ID </th>
<th> Emp Name </th>
<th> Emp Salary </th>
</tr>
<tr>
<td> 1 </td>
<td> Ravi </td>
<td> Rs.50,000 </td>
</tr>
<tr>
<td> 2 </td>
<td> Raju </td>
<td> Rs.60,000 </td>
</tr>
</table>
</body>
</html>
HTML Tables: Colspan & Rowspan
If a cell spans over multiple columns then it is called as Colspan
If a Cell spans over multiple rows then it is called as Rowspan
Example for both Colspan and Rowspan
Homework
Interview Questions:
a) Difference between Cell padding and Cell spacing?
b) Write the purpose of Colspan and Rowspan?
c) Apply Cell padding to Customer table (columns: Customer ID, Customer Name, Customer
Address)
d) Apply Cell Spacing to Student table (Columns: Student ID, Student Name, Student Course)
Task1:
a) Apply purple background to body tag
b) Put <h2> tag and give heading as “College Table”
c) Apply 2pixel solid black color border to table
d) Apply 30 pixels as cell padding
Task2:
a) Apply green background color to body tag
b) Put <h1> tag and give heading as “Department Table”
c) Apply 4pixels solid black color border to table
d) Apply 20 pixels as cell spacing
Example1:
Create the following Persons table with Colspan:
Name Age
Ravi Kumar 21
Raj Kumari 20
<!DOCTYPE html>
<html>
<head>
<title> Colspan Example1 </title>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
</style>
</head>
<body>
<table style="width:50%">
<tr>
<th colspan="2">Name</th>
<th>Age</th>
</tr>
<tr>
<td>Ravi</td>
<td>Kumar</td>
<td>21</td>
</tr>
<tr>
<td>Raj</td>
<td>Kumari</td>
<td>20</td>
</tr>
</table>
</body>
</html>
Example2:
Create the following Time Table with Colspan:
Time Table
Mon Tue Wed Thu Fri Sat
C# ASP SQL Server MVC .Net Core Angular
Angular .Net Core MVC SQL Server ASP C#
C# ASP SQL Server MVC .Net Core Angular
Angular .Net Core MVC SQL Server ASP C#
<!DOCTYPE html>
<html>
<head>
<title> Colspan Example2 </title>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
text-align: center;
</style>
</head>
<body>
<table style="width: 100%">
<tr>
<th colspan="6">Time Table</th>
</tr>
<tr>
<th>Mon</th>
<th>Tue</th>
<th>Wed</th>
<th>Thu</th>
<th>Fri</th>
<th>Sat</th>
</tr>
<tr>
<td>C#</td>
<td>ASP</td>
<td>SQL Server</td>
<td>MVC</td>
<td>.Net Core</td>
<td>Angular</td>
</tr>
<tr>
<td>Angular</td>
<td>.Net Core</td>
<td>MVC</td>
<td>SQL Server</td>
<td>ASP</td>
<td>C#</td>
</tr>
<tr>
<td>C#</td>
<td>ASP</td>
<td>SQL Server</td>
<td>MVC</td>
<td>.Net Core</td>
<td>Angular</td>
</tr>
<tr>
<td>Angular</td>
<td>.Net Core</td>
<td>MVC</td>
<td>SQL Server</td>
<td>ASP</td>
<td>C#</td>
</tr>
</table>
</body>
</html>
Example3:
Create Time Table with Colspan as follows:
Time Table
Mon Tue Wed Thu Fri Sat
C# ASP SQL Server MVC .Net Core Angular
Angular .Net Core MVC SQL Server ASP C#
Lunch Break
C# ASP SQL Server MVC .Net Core Angular
Angular .Net Core MVC SQL Server ASP C#
<!DOCTYPE html>
<html>
<head>
<title> Colspan Example2 </title>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
text-align: center;
</style>
</head>
<body>
<table style="width: 100%">
<tr>
<th colspan="6">Time Table</th>
</tr>
<tr>
<th>Mon</th>
<th>Tue</th>
<th>Wed</th>
<th>Thu</th>
<th>Fri</th>
<th>Sat</th>
</tr>
<tr>
<td>C#</td>
<td>ASP</td>
<td>SQL Server</td>
<td>MVC</td>
<td>.Net Core</td>
<td>Angular</td>
</tr>
<tr>
<td>Angular</td>
<td>.Net Core</td>
<td>MVC</td>
<td>SQL Server</td>
<td>ASP</td>
<td>C#</td>
</tr>
<tr>
<th colspan="6">Lunch Break</th>
</tr>
<tr>
<td>C#</td>
<td>ASP</td>
<td>SQL Server</td>
<td>MVC</td>
<td>.Net Core</td>
<td>Angular</td>
</tr>
<tr>
<td>Angular</td>
<td>.Net Core</td>
<td>MVC</td>
<td>SQL Server</td>
<td>ASP</td>
<td>C#</td>
</tr>
</table>
</body>
</html>
Homework:
Interview Questions:
a) Display colspan in a table
b) Difference between colspan and rowspan?
Task1:
a) Apply orange background color to body tag
b) Create Students table with colspan and rowspan
Student ID Student Name Student Marks
Sub1 Sub2 Sub3
1 Ravi 70 80 90
2 Raj 60 70 80
<!DOCTYPE html>
<html>
<head>
<title> Colspan and Rowspan Example </title>
<style>
table, th, td{
border: 1px solid black;
border-collapse: collapse;
text-align: center;
</style>
</head>
<body style="background-color: orange;">
<h2> Student Table </h2>
<table style="width:50%">
<tr>
<th rowspan="2">Student ID</th>
<th rowspan="2">Student Name</th>
<th colspan="3">Student Marks</th>
</tr>
<tr>
<th>Sub1</th>
<th>Sub2</th>
<th>Sub3</th>
</tr>
<tr>
<td>1</td>
<td>Ravi</td>
<td>70</td>
<td>80</td>
<td>90</td>
</tr>
<tr>
<td>1</td>
<td>Raj</td>
<td>60</td>
<td>70</td>
<td>80</td>
</tr>
</table>
</body>
</html>
Room Tariff
Room Deluxe Executive
Type AC Non-AC AC Non-AC
2000 1000 3000 2000
<!DOCTYPE html>
<html>
<head>
<title> Colspan and rowspan example 2</title>
<style>
table, th, td{
border: 1px solid black;
border-collapse: collapse;
text-align: center;
</style>
</head>
<body>
<h2> Room Tariff Table </h2>
<table style="width:50%">
<tr>
<th colspan="5">Room Tariff</th>
</tr>
<tr>
<th rowspan="3"> Room <br> Type </th>
<th colspan="2"> Deluxe </th>
<th colspan="2"> Executive </th>
</tr>
<tr>
<th>AC</th>
<th>Non-AC</th>
<th>AC</th>
<th>Non-AC</th>
</tr>
<tr>
<td>2000</td>
<td>1000</td>
<td>3000</td>
<td>2000</td>
</tr>
</table>
</body>
</html>
HTML Lists
A list is a set of related items.
There are two types of lists:
o Unordered Lists
o Ordered Lists
Unordered Lists
Unordered lists are used to present a collection of related items when sequence of items is not
important.
Ex:
List of Fruits
Apple
Banana
Cherry
Grapes
Mangoes
Watermelon
Syntax of unordered list:
<body>
<ul>
<li> Item1 </li>
<li> Item2 </li>
<li> Item3 </li>
<li> Item4 </li>
</ul>
</body>
Here, “ul” stands for unordered list and “li” stands for list item.
Ex:
<body>
<ul>
<li> Apple </li>
<li> Banana </li>
<li> Cherry </li>
<li> Grapes </li>
</ul>
</body>
Example:
a) Apply orange background to body tag
b) Put <h2> tag with “List of Fruits” heading
c) Create an unordered list
d) Items are: Apple, banana, Cherry, Grapes
<!DOCTYPE html>
<html>
<head>
<title> Unordered list </title>
<head>
<body style="background:orange;">
<h2> List of Fruits </h2>
<ul>
<li> Apple </li>
<li> Banana </li>
<li> Cherry </li>
<li> Grapes </li>
</ul>
</body>
</html>
Homework
Interview Questions:
a) When we will go for Colspan and when we will go for rowspan in a table?
b) In a table, maximum how many colspans and rowspans can be created?
c) What is HTML list?
d) How many types of lists are available in HTML? And what are they?
e) When we will go for unordered lists?
f) When we will go for ordered lists?
Task1: Create any two tables with colspans and rowspans
Task2: Create any two unordered lists
Nested unordered lists:
If an unordered list is existed in another unordered list then it is called as Nested unordered
list
Syntax of Nested unordered list:
<body>
<ul>
<li>Item1</li>
<ul>
<li>Item1</li>
<li>Item2</li>
</ul>
<li>Item2</li>
<li>Item3</li>
<li>Item4</li>
</ul>
</body>
Example:
Apples
o Green Apples
o Red Apples
Grapes
o Light green grapes
o Black grapes
Mangoes
o Green Mangoes
o Yellow Mangoes
Complete Code
<!DOCTYPE html>
<html>
<head>
<title> Nested unordered list example </title>
</head>
<body>
<h2> Fruits list </h2>
<ul>
<li>Apples</li>
<ul>
<li>Green Apples</li>
<li>Red Apples</li>
</ul>
<li>Grapes</li>
<ul>
<li>Light green grapes</li>
<li>Black grapes</li>
</ul>
<li>Mangoes</li>
<ul>
<li>green mangoes</li>
<li>yellow mangoes</li>
</ul>
</ul>
</body>
</html>
Output:
Ordered Lists
Ordered lists are used to display a list of items in a specific sequence which are marked with
numbers or letters.
By default, ordered list will be displayed with numbers.
Ordered lists can be displayed with:
o Numbers
o Uppercase letters
o Lowercase letters
o Uppercase Roman Numbers
o Lowercase Roman Numbers
Syntax of ordered list with numbers:
<body>
<ol>
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
<li>Item4</li>
</ol>
</body>
Example1:
1. C#
2. ASP
3. SQL Server
4. MVC
5. .Net Core
6. HTML
7. CSS
8. Javascript
9. Bootstrap
10. Typescript
11. Angular
Complete Code:
<!DOCTYPE html>
<html>
<head>
<title> Ordered list example1 </title>
</head>
<body>
<h2> .Net Full stack </h2>
<ol>
<li>C#</li>
<li>ASP</li>
<li>SQL Server</li>
<li>MVC</li>
<li>.Net Core</li>
<li>HTML</li>
<li>CSS</li>
<li>Javascript</li>
<li>Bootstrap</li>
<li>Typescript</li>
<li>Angular</li>
</ol>
</body>
</html>
Output:
Syntax of ordered list with Uppercase letters:
<body>
<ol type=”A”>
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
<li>Item4</li>
</ol>
</body>
Example:
A. C#
B. ASP
C. SQL Server
D. MVC
E. .Net Core
F. HTML
G. CSS
H. Javascript
I. Bootstrap
J. Typescript
K. Angular
Complete Code
<!DOCTYPE html>
<html>
<head>
<title> Uppercase Ordered list example </title>
</head>
<body>
<h2> .Net Full stack </h2>
<ol type="A">
<li>C#</li>
<li>ASP</li>
<li>SQL Server</li>
<li>MVC</li>
<li>.Net Core</li>
<li>HTML</li>
<li>CSS</li>
<li>Javascript</li>
<li>Bootstrap</li>
<li>Typescript</li>
<li>Angular</li>
</ol>
</body>
</html>
Output:
Syntax of ordered list with lowercase letters:
<body>
<ol type=”a”>
<li> Item1</li>
<li> Item2</li>
<li> Item3</li>
<li> Item4</li>
</ol>
</body>
Example:
a. C#
b. ASP
c. SQL Server
d. MVC
e. .Net Core
f. HTML
g. CSS
h. Javascript
i. Bootstrap
j. Typescript
k. Angular
Compete Code
<!DOCTYPE html>
<html>
<head>
<title> Lowercase ordered list example </title>
</head>
<body>
<h2> .Net Full stack </h2>
<ol type="a">
<li>C#</li>
<li>ASP</li>
<li>SQL Server</li>
<li>MVC</li>
<li>.Net Core</li>
<li>HTML</li>
<li>CSS</li>
<li>Javascript</li>
<li>Bootstrap</li>
<li>Typescript</li>
<li>Angular</li>
</ol>
</body>
</html>
Output:
Syntax of ordered list with Uppercase Roman Numbers
<body>
<ol type=”I”>
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
<li>Item4</li>
</ol>
</body>
Example:
I. C#
II. ASP
III. SQL Server
IV. MVC
V. .Net Core
VI. HTML
VII. CSS
VIII. Javascript
IX. Bootstrap
X. Typescript
XI. Angular
Complete Code
<!DOCTYPE html>
<html>
<head>
<title> Uppercase Roman numbers of ordered list </title>
</head>
<body>
<h2> .Net Full stack </h2>
<ol type="I">
<li>C#</li>
<li>ASP</li>
<li>SQL Server</li>
<li>MVC</li>
<li>.Net Core</li>
<li>HTML</li>
<li>CSS</li>
<li>Javascript</li>
<li>Bootstrap</li>
<li>Typescript</li>
<li>Angular</li>
</ol>
</body>
</html>
Output:
Syntax of ordered list with lowercase roman numbers:
<body>
<ol type=”i”>
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
<li>Item4</li>
</ol>
</body>
Example:
i. C#
ii. ASP
iii. SQL Server
iv. MVC
v. .Net Core
vi. HTML
vii. CSS
viii. Javascript
ix. Bootstrap
x. Typescript
xi. Angular
Complete Code
<!DOCTYPE html>
<html>
<head>
<title> Lowercase Roman numbers of ordered list </title>
</head>
<body>
<h2> .Net Full stack </h2>
<ol type="i">
<li>C#</li>
<li>ASP</li>
<li>SQL Server</li>
<li>MVC</li>
<li>.Net Core</li>
<li>HTML</li>
<li>CSS</li>
<li>Javascript</li>
<li>Bootstrap</li>
<li>Typescript</li>
<li>Angular</li>
</ol>
</body>
</html>
Output:
“start” attribute of <ol> tag:
o “start” attribute is used to start the list with desired number.
o For example, we want to start the list with 5th number then the following code to be written:
<body>
<ol start=”5”>
<li>C#</li>
<li>ASP</li>
<li>SQL Server</li>
<li>MVC</li>
<li>.Net Core</li>
<li>HTML</li>
<li>CSS</li>
<li>Javascript</li>
<li>Bootstrap</li>
<li>Typescript</li>
<li>Angular</li>
</ol>
</body>
Complete Code
<!DOCTYPE html>
<html>
<head>
<title> ordered list start with 5th number </title>
</head>
<body>
<h2> .Net Full stack </h2>
<ol start="5">
<li>C#</li>
<li>ASP</li>
<li>SQL Server</li>
<li>MVC</li>
<li>.Net Core</li>
<li>HTML</li>
<li>CSS</li>
<li>Javascript</li>
<li>Bootstrap</li>
<li>Typescript</li>
<li>Angular</li>
</ol>
</body>
</html>
Output:
Homework
Interview Questions:
a) What is the fundamental difference between unordered list and ordered list?
b) Write the syntax of unordered list and ordered list
c) Write the code for displaying Nested unordered list
d) Display Numbered ordered list
e) Explain about “type” attribute of <ol> tag
f) How to start with desired number in <ol> tag?
Task1: Create any two ordered lists
Task2: Create any two ordered list with Uppercase letters sequence
Task3: Create any two ordered list with lowercase letters sequence
Task4: Create any two ordered lists with Uppercase roman numbers sequence
Task5: Create any two ordered lists with lowercase roman numbers sequence
Task6: Create any two ordered lists with starting number 10
Nested Ordered Lists:
If one ordered list is placed in another ordered list then it is called as Nested ordered list.
Syntax:
<body>
<ol>
<li>Item1</li>
<ol>
<li>Item1</li>
<li>Item2</li>
</ol>
<li>Item2</li>
<li>Item3</li>
</ol>
</body>
Example:
1. Item1
1. Item1
2. Item2
2. Item2
3.Item3
Complete Code
<!DOCTYPE html>
<html>
<head>
<title> Nested Ordered list </title>
</head>
<body>
<ol>
<li>Item1</li>
<ol>
<li>Item1</li>
<li>Item2</li>
</ol>
<li>Item2</li>
<li>Item3</li>
</ol>
</body>
</html>
Output:
Example2:
1. Apples
a. Green Apples
b. Red Apples
2. Grapes
a. Light Green Grapes
b. Black Grapes
3. Mangoes
a. Green Mangoes
b. Yellow Mangoes
Complete Code:
<!DOCTYPE html>
<html>
<head>
<title> Nested Ordered list example2 </title>
</head>
<body>
<ol>
<li>Apples</li>
<ol type="a">
<li>Green Apples</li>
<li>Red Apples</li>
</ol>
<li>Grapes</li>
<ol type="a">
<li>Light Green Grapes</li>
<li>Black Grapes</li>
</ol>
<li>Mangoes</li>
<ol type="a">
<li>Green Mangoes</li>
<li>Yellow Mangoes</li>
</ol>
</ol>
</body>
</html>
Output:
HTML Forms
HTML form is used to collect user input.
Examples of user input:
o First name
o Middle name
o Last name
o Date of birth
o Genter etc….
To collect the user input, the following input types (or input controls) will be used:
o Label
o Text box
o Button
o Checkbox
o Radio button etc…
Label:
Label is used to tell the user to enter what input.
Ex:
In the above example, “First Name” is label. By seeing this label, user will enter “First name” in the
text box.
Textbox:
Textbox is used to take single-line text such as First name, middle name, last name, email id etc….
Syntax of Label:
<label> Label Text </label>
Syntax of Textbox:
<input type=”text”>
Ex:
<label>First name</label>
<input type=”text”>
<label>Middle Name </label>
<input type=”text”>
<label>Last Name</label>
<input type=”text”>
Button
Button is used to perform the action or operation such as submit operation, insert operation, update
operation, display operation, delete operation etc…
Syntax of button:
<input type=”submit”>
Ex:
Complete Code:
<!DOCTYPE html>
<html>
<head>
<title> HTML Forms </title>
</head>
<body>
<h2> Person Details </h2>
<form>
<label>First Name</label>
<input type="text"><br><br>
<label>Last Name</label>
<input type="text"><br><br>
<label>Phone Number</label>
<input type="text"><br><br>
<label>Email ID</label>
<input type="text"><br><br>
<label>Address</label>
<input type="text"><br><br>
<input type="submit">
</form>
</body>
</html>
Output:
Example2:
Complete Code
<!DOCTYPE html>
<html>
<head>
<title> HTML Forms </title>
</head>
<body>
<h2> Employee Details </h2>
<form>
<label>Emp ID</label>
<input type="text"><br><br>
<label>Emp Name</label>
<input type="text"><br><br>
<label>Emp Dept</label>
<input type="text"><br><br>
<label>Emp Salary</label>
<input type="text"><br><br>
<input type="submit">
</form>
</body>
</html>
Output:
Homework
Interview Questions:
a) What is Nested ordered lists?
b) What is the difference between Nested unordered lists and nested ordered lists?
c) What is HTML Form?
d) What is a label?
e) What is Textbox?
f) What is Button?
Task1: Create any two nested ordered lists.
Task2: Create any three HTML forms like Student Details form, Customer details form, College
details form
Textarea:
Textarea is used to input multiple lines of text.
Syntax:
<textarea rows=”number of rows” cols=”Number of columns”>
Ex:
<textarea rows=”5” cols=”20”>
Example:
Complete Code
<!DOCTYPE html>
<html>
<head>
<title> Textarea Example </title>
</head>
<body>
<h3> Employee Details </h3>
<form>
<label> Emp Id </label>
<input type="text"><br><br>
<label> Emp Name </label>
<input type="text"><br><br>
<label> Emp Dept </label>
<input type="text"><br><br>
<label> Emp Salary </label>
<input type="text"><br><br>
<label> Emp Skill Set </label><br>
<textarea rows="5" cols="20"></textarea><br><br>
<input type="submit">
</form>
</body>
</html>
Output:
Password Field
The characters in a password field are masked(shown as asterisks).
Syntax of password field:
<input type=”password”>
Example:
Complete Code
<!DOCTYPE html>
<html>
<head>
<title> Password Field Example </title>
</head>
<body>
<h3> User Login Page </h3>
<form>
<label> Username: </label><br>
<input type="text"><br><br>
<label> Password: </label><br>
<input type="password"><br><br>
<input type="submit">
</form>
</body>
</html>
Output:
Homework
Interview Questions:
a) What is the difference between textbox and textarea?
b) Write the syntax of Password Field?
Task1: Create any two forms with labels, textboxes, and textarea. For example: Student
Registration Form, Faculty form
Task2: Create any two login forms. Ex: Admin login form, user login form, student login form
Reset Button
Reset button is used to reset the initial values to the input fields. (OR) Reset button is used to
make all input fields empty.
Syntax of reset button:
<input type=”reset”>
Example:
Complete Code
<!DOCTYPE html>
<html>
<head>
<title> Reset button example </title>
</head>
<body>
<h4> Employee Details </h4>
<form>
<label> Emp ID </label>
<input type="text"><br><br>
<label> Emp Name </label>
<input type="text"><br><br>
<label> Emp Dept </label>
<input type="text"><br><br>
<label> Emp Salary </label>
<input type="text"><br><br>
<input type="submit">
<input type="reset">
</form>
</body>
</html>
Output:
Radio Button
Radio button allows the user to select ONLY ONE option from the given options.
Ex:
Syntax of radio button:
<input type=”radio” name=”radio button name”>
Ex:
<input type=”radio” name=”gender”>Male <br>
<input type=”radio” name=”gender”>Female<br>
<input type=”radio” name=”gender”>Transgender
Example: Create the following form:
Complete Code
<!DOCTYPE html>
<html>
<head>
<title> Radio button example </title>
</head>
<body>
<h4> Person Details </h4>
<form>
<label>First Name</label>
<input type="text"><br><br>
<label>Last Name</label>
<input type="text"><br><br>
<label>Gender</label><br>
<input type="radio" name="gender">Male<br>
<input type="radio" name="gender">Female<br>
<input type="radio" name="gender">Trasgender<br>
<label>Phone Number</label>
<input type="text"><br><br>
<label>Email ID</label>
<input type="email"><br><br>
<input type="submit">
</form>
</body>
</html>
Output:
Homework
Interview Questions:
a) What is the use of Reset button?
b) What is the difference between Submit button and Reset button?
c) Write the syntaxes of Submit and Reset buttons
d) Explain about Radio button
e) Write the syntax of Radio button with two examples
Task1: Create any two forms with submit and reset buttons
Task2: Create any two forms with radio buttons
Checkbox
Checkboxes allow the user to select ONE or MORE options from given options.
Ex:
Syntax of Checkbox:
<input type=”checkbox”>
Ex:
<input type=”checkbox”>
<label> Telugu </label>
<input type=”checkbox”>
<label> English </label>
<input type=”checkbox”>
<label> Hindi </label>
Example: Design the following form
Complete Code:
<!DOCTYPE html>
<html>
<head>
<title> Checkbox Example </title>
</head>
<body>
<h3> Person Details </h3>
<form>
<label> First Name </label>
<input type="text"><br><br>
<label> Last Name </label>
<input type="text"><br><br>
<label> Languages Known </label><br>
<input type="checkbox">
<label> Telugu </label><br>
<input type="checkbox">
<label> English </label><br>
<input type="checkbox">
<label> Hindi </label><br>
<input type="SUBMIT">
</form>
</body>
</html>
Output:
Drop-down list
Drop-down list allows the user to choose one value from a list.
Ex:
Syntax of drop-down list:
<select>
<option> optiion1 </option>
<option> option2 </option>
</select>
Example: Design the following form
Complete Code:
<!DOCTYPE html>
<html>
<head>
<title> Drop down list example </title>
</head>
<body>
<h3> Person Details </h3>
<form>
<label> First Name </label>
<input type="text"><br><br>
<label> Last Name </label>
<input type="text"><br><br>
<label> Select the state </label>
<select>
<option> Telangana </option>
<option> Andhra Pradesh </option>
<option> Karnataka </option>
<option> Tamil Nadu </option>
</select>
<br>
<input type="submit”>
</form>
</body>
</html>
Output:
Date input
In HTML, date type of input allows the user to select date.
Syntax for date input:
<input type=”date”>
Example: Desing the following form
Complete Code:
<!DOCTYPE html>
<html>
<head>
<title> Date input example </title>
</head>
<body>
<h3> Person Details </h3>
<form>
<label> First Name </label>
<input type="text"><br><br>
<label> Last Name </label>
<input type="text"><br><br>
<label> Date of Birth </label>
<input type="date"><br>
<input type="submit">
</form>
</body>
</html>
Output
Homework
Interview Questions
a) What is Checkbox?
b) What is the difference between radio button and checkbox?
c) How to give date input in HTML form?
d) Write the syntaxes for checkbox, radio button with two examples
e) Write the syntax for date input with two examples
Task1: Design any two forms with labels, text boxes, radio buttons, checkboxes
Task2: Desing any one form with date input
File input
In HTML, file type of input allows the user to select one or more files.
Example for selecting one file:
Syntax to select one file:
<input type=”file”>
Example: Design the following form:
Complete Code
<!DOCTYPE html>
<html>
<head>
<title> Uploading one file </title>
</head>
<body>
<h3> Person Details </h3>
<form>
<label> First Name </label>
<input type="text"><br><br>
<label> Last Name </label>
<input type="text"><br><br>
<label> Upload your Resume </label><br>
<label> Select the File: </label>
<input type="file"><br><br>
<input type="submit">
</form>
</body>
</html>
Output
Like this we can select any one file.
Next let us see the example to select multiple files.
Selection of Multiple Files
User can select one or more files (OR) Multiple Files
Example:
Syntax to select multiple files:
<input type=”file” multiple>
Example: Desing the following form
Complete Code
<!DOCTYPE html>
<html>
<head>
<title> Uploading multiple files </title>
</head>
<body>
<h3> Person Details </h3>
<form>
<label> First Name </label>
<input type="text"><br><br>
<label> Last Name </label>
<input type="text"><br><br>
<label> Upload your resume and Aadhaar Card </label><br>
<label> Select the files: </label>
<input type="file" multiple><br><br>
<input type="submit">
</form>
</body>
</html>
Output
Like this we can select multiple files.
Fieldset and Legend
Field set is a collection of Fields (OR) Set of Fields (OR) Group of related elements
<fieldset> tag is used to create Field set
Legend is a caption of Field set (OR) heading of field set
<legend> tag is used to give legend to the Field set
Ex:
Tomorrow, we will see coding part of fieldset and legend.
Homework
Interview Questions:
a) How to upload one file in HTML page and write the syntax with two examples
b) How to upload multiple files in HTML page and write the syntax with two examples
c) Explain about Field set and legend
Task1: Create any two forms to upload one file
Task2: Create any two forms to upload multiple files
Fieldset and Legend
Fieldset is a collection of fields (OR) set of fields (OR) Group of related
elements
<fieldset> tag is used to create Field set.
Legend is a caption of fieldset (OR) heading of fieldset.
<legend> tag is used to give legend to fieldset.
Ex:
Syntax of fieldset and legend:
<fieldset>
<legend> Caption to fieldset </legend>
<label> label text </label>
<input type=”text”><br><br>
.
.
.
.
<input type=”submit”>
</fieldset>
Example: Design the following form:
Complete code of fieldset and legend:
<!DOCTYPE html>
<html>
<head>
<title> Fieldset and legend example </title>
</head>
<body>
<form>
<fieldset>
<legend> Personal Details </legend>
<label> First Name </label>
<input type="text"><br><br>
<label> Last Name </label>
<input type="text"><br><br>
<label> Email ID </label>
<input type="email"><br><br>
<label> Date Of Birth </label>
<input type="date"><br><br>
<input type="submit">
</fieldset>
</form>
</body>
</html>
Output:
Div tag
The <div> tag defines a division or a section in an HTML document.
Ex:
Syntax of Div tag:
<div>
Content goes here…
</div>
Note: we can apply styles to div tag as follows:
<body>
<div style=”border: 5px solid blue; background-color:lightblue; text-
align:center;”>
<h2> This is heading in div element </h2>
<p> This is some text in div element </p>
</div>
</body>
Complete Code for div tag:
<!DOCTYPE html>
<html>
<head>
<title> Div element example </title>
</head>
<body>
<div style="border: 5px solid blue; background-color:lightblue; text-align:
center;">
<h2> This is a heading in a div element </h2>
<p> This is some text in a div element</p>
</div>
</body>
</html>
Output:
Article tag
The description of particular topic is called as an article.
In HTML, articles are represented with <article> tag.
Syntax of <article> tag:
<article>
Article content goes here….
</article>
Note: we can use <hr> tag to have one horizontal line after every article.
Ex:
Complete code on article tag:
<!DOCTYPE html>
<html>
<head>
<title> Article tag example </title>
</head>
<body>
<article>
Article on HTML
</article>
<hr>
<article>
Article on CSS
</article>
<hr>
<article>
Article on Javascript
</article>
<hr>
</body>
</html>
Output:
Homework
Interview Questions:
a) Explain about fieldset and legend
b) What is <div> tag
c) Describe <article> tag and write its syntax with two examples
Task1: Create a form with Personal Details fieldset, Educational Details
fieldset, Experience Details fieldset
Task2: Create a form with four <div> tags
Task3: Create a form with four articles
Section Tag
The <section> tag is used to group related content. Such as group of chapters, group
of topics etc..
The advantage of <section> tag is organizing the content into sections and
subsections, making it easier for both developers and browsers to understand the
structure of the document.
Syntax of <section> tag:
<section>
Content goes here…
</section>
Note: we can use <hr> tag to have one horizontal line after every section.
Ex:
HTML Content
CSS Content
Javascript Content
Complete Code
<!DOCTYPE html>
<html>
<head>
<title> section tag example </title>
</head>
<body>
<section>
HTML CONTENT
</section>
<hr>
<section>
CSS CONTENT
</section>
<hr>
<section>
JAVASCRIPT CONTENT
</section>
<hr>
</body>
</html>
Output:
Homework
Interview Questions:
a) Explain about <section> tag and write two examples
Task: Design any two HTML pages with <section> tag
You might also like
- Inline, Internal, and External CSS in HTMLNo ratings yetInline, Internal, and External CSS in HTML9 pages
- CSS Selectors and Style Rules ExplainedNo ratings yetCSS Selectors and Style Rules Explained10 pages
- CSS Basics: Syntax, Selectors, and StylesNo ratings yetCSS Basics: Syntax, Selectors, and Styles9 pages
- Understanding Cascading Style Sheets (CSS)No ratings yetUnderstanding Cascading Style Sheets (CSS)56 pages
- Understanding Cascading Style Sheets (CSS)No ratings yetUnderstanding Cascading Style Sheets (CSS)44 pages
- Introduction to CSS Basics and PropertiesNo ratings yetIntroduction to CSS Basics and Properties9 pages
- Introduction to CSS Basics and PropertiesNo ratings yetIntroduction to CSS Basics and Properties16 pages
- Introduction To IT Systems Question PaperNo ratings yetIntroduction To IT Systems Question Paper18 pages
- Software Developer at Safaltek Pvt. Ltd.No ratings yetSoftware Developer at Safaltek Pvt. Ltd.3 pages
- Cloud-Based Blood Bank Management SystemNo ratings yetCloud-Based Blood Bank Management System31 pages
- Netskope CASB User Acceptance Testing PlanNo ratings yetNetskope CASB User Acceptance Testing Plan21 pages
- Alfin Auzikri: Full Stack Developer ProfileNo ratings yetAlfin Auzikri: Full Stack Developer Profile1 page
- Sanet - Me - Basic Programming Essentials - Matthew DeSipioNo ratings yetSanet - Me - Basic Programming Essentials - Matthew DeSipio97 pages
- School Management System Project ReportNo ratings yetSchool Management System Project Report34 pages
- Manual: Welcome To The Freecad On-Line Help100% (1)Manual: Welcome To The Freecad On-Line Help248 pages