Intro_to_HTML[1]
Uploaded by
pesalagowthamIntro_to_HTML[1]
Uploaded by
pesalagowthamHTML
• HTML stands for Hyper Text Markup Language
• HTML is the standard markup language for Web pages.
• With HTML you can create your own Website.
• HTML is easy to learn
Hyper-Text Markup Language
• Hypertext refers to the way in which Web pages (HTML
documents) are linked together. Thus, the link available on
a webpage is called Hypertext.
• HTML is a Markup Language which means you use
HTML to simply "mark-up" a text document with tags that
tell a Web browser how to structure it to display.
HTML Document Structure
Code Output
<html>
<head>
<title>Sample</title>
</head>
<body>
</body>
</html>
Code Output
<html>
<head>
<title>Sample</title>
</head>
<body>
<h1>This is a
heading</h1>
</body>
</html>
H1 with
Output
style
<!DOCTYPE html>
<html>
<head>
<title> HTML </title>
</head>
<body>
<h1 style="color:red"> Introduction
</h1>
</body>
</html>
H1 with
Output
style
<!DOCTYPE html>
<html>
<head>
<title> HTML </title>
</head>
<body>
<h1 style="color:red"> Introduction </h1>
<h1 style="background-color:purple;">
HTML </h1>
</body>
</html>
H1 with
Output
style
<!DOCTYPE html>
<html>
<head>
<title> HTML </title>
</head>
<body>
<h1 style="color:red"> Introduction </h1>
<h1 style="background-color:purple;"> HTML </h1>
<h1 style="font-family:verdana;">This is a
heading</h1>
</body>
</html>
H1 with
Output
style
<!DOCTYPE html>
<html>
<head>
<title> HTML </title>
</head>
<body>
<h1 style="color:red"> Introduction </h1>
<h1 style="background-color:purple;"> HTML </h1>
<h1 style="font-family:verdana;">This is a
heading</h1>
</body>
</html>
H1 with
<!DOCTYPE html>
<html> style
<head>
<title> HTML </title>
</head>
<body>
<h1 style="color:red"> Introduction </h1>
<h1 style="background-color:purple;"> HTML </h1>
<h1 style="font-family:verdana;">This is a
heading</h1>
<h1 style="text-align:center;">Centered
Heading</h1>
</body>
Output
H1 with
<!DOCTYPE html>
<html> style
<head>
<title> HTML </title>
</head>
<body>
<h1 style="color:red"> Introduction </h1>
<h1 style="background-color:purple;"> HTML </h1>
<h1 style="font-family:verdana;">This is a
heading</h1>
<h1 style="text-align:center;">Centered Heading</h1>
<h1 style="font-size:300%;">Font heading</h1>
</body>
Output
Code Output
<html>
<head>
<title>Sample</title>
</head>
<body>
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
<h4>This is a heading</h4>
<h5>This is a heading</h5>
<h6>This is a heading</h6>
</body>
</html>
Code Output
<html>
<head>
<title>Sample</title>
</head>
<body>
<p>This is a
paragraph</p>
</body>
</html>
<html>
<head> Paragraph
<title>Sample</title>
</head>
<body>
<p>HTML stands for Hyper Text Markup
Language. HTML is the standard markup
language for creating Web pages. HTML
describes the structure of a Web page.HTML
consists of a series of elements.HTML elements
tell the browser how to display the content. </p>
</body>
</html>
Output
Code Output
<html>
<head>
<title>Sample</title>
</head>
<body>
<p>This is a First
paragraph</p>
<p>This is a Second
paragraph</p>
</body>
<html>
Code
<head>
<title>Sample</title>
</head>
<body>
<p>My Name is Dr.N.Sivakumar. Iam
Working in
Pondicherry Engineering College. I live in
Pondicherry </p>
</body>
</html>
Output
Code
<html>
<head>
<title>Sample</title>
</head>
<body>
<p>My Name is Dr.N.Sivakumar. <br/>Iam
Working in Pondicherry Engineering College. I
live in Pondicherry </p>
</body>
</html>
Output
<html>
Code
<head>
<title>Sample</title>
</head>
<body>
<p>My Name is Dr.N.Sivakumar. <br/>Iam
Working in Pondicherry Engineering College.
<br/> I live in Pondicherry </p>
</body>
</html>
Output
<html>
<head> Code
<title>Sample</title>
</head>
<body>
<p>
<center>My Name is
Dr.N.Sivakumar. Iam Working in
Pondicherry Engineering College. I live in
Pondicherry
</center>
</p>
</body>
Output
Horizontal
<html> Lines
<head>
<title>Sample</title>
</head>
<body>
<p> My Name is Dr.N.Sivakumar. </p>
<hr/>
<p> Iam Working in Pondicherry Engineering
College. </p>
</body>
</html>
Output
<html> Without
<head> Formatting
<title>Sample</title>
</head>
<body>
<p>
function sample( int a )
{
printf ("%d",a)
}
</p>
</body> </html>
<html> Preserve
<head> Formatting
<title>Sample</title>
</head>
<body>
<pre>
function sample( int a )
{
printf ("%d",a)
}
</pre>
</body> </html>
<html> Non-Breaking
<head> Statement
<title>Sample</title>
</head>
<body>
<pre>
function sample( int a )
{
printf ("%d",a)
}
</pre>
</body> </html>
Nested HTML
Italics
Elements
<html>
<head>
<title>Sample</title>
</head>
<body>
<h1><i>This is a
heading</i></h1>
</body>
</html>
Bold
<html>
<head>
<title>Sample</title>
</head>
<body>
<p>Welcome to
<b>HTML</b></p>
</body>
</html>
Underlined
<html>
<head>
<title>Sample</title>
</head>
<body>
<p>Welcome to
<u>HTML</u></p>
</body>
</html>
Strike Text
<html>
<head>
<title>Sample</title>
</head>
<body>
<p>Welcome to
<strike>HTML</strike></p>
</body>
</html>
Monospaced
Font
<html>
<head>
<title>Sample</title>
</head>
<body>
<p>Welcome to <tt>html</tt></p>
</body>
</html>
Superscript
Text
<html>
<head>
<title>Sample</title>
</head>
<body>
<p>a<sup>2</sup></p>
</body>
</html>
Subscript Text
<html>
<head>
<title>Sample</title>
</head>
<body>
<p>A<sub>2</sub></p>
</body>
</html>
Larger Text
<html>
<head>
<title>Sample</title>
</head>
<body>
<p>welcome to <big>html</big></p>
</body>
</html>
One font size is bigger
Smaller Text
<html>
<head>
<title>Sample</title>
</head>
<body>
<p>welcome to
<small>html</small></p>
</body>
</html> One font size is smaller
Emphasized
Text
<html>
<head>
<title>Sample</title>
</head>
<body>
<p>welcome to <em>html</em></p>
</body>
</html>
Marked Text
<html>
<head>
<title>Sample</title>
</head>
<body>
<p>welcome to
<mark>html</mark></p>
</body>
</html>
Text
Abbreviation
<html>
<head>
<title>Sample</title>
</head>
<body>
<p>welcome to <abbr title =
“WORKSHOP”>html</abbr></p>
</body>
</html>
Text
Direction
<html>
<head>
<title>Sample</title>
</head>
<body>
<p>welcome to html</p>
<p><bdo dir="rtl">welcome to html</bdo></p>
</body>
</html>
BDO : Bi-Directional Override
Escape
Characters
eb
W
<html>
e
th
<head>
in
ce
<title>Sample</title>
g e pa
Pa o S
</head>
N
<body>
<p>welcome to html. Introduction to CSS </p>
</html>
Escape
Characters
1.   – NoBreak
SPace
<html>
he
<head> in
t
<title>Sample</title> ted
r ea
</head> e
c e
c ag
a P
<body> Sp eb
W
<p>welcome to html.  
     Introduction to
CSS </p>
</html>
Escape
Characters
2. Trademark – TM -
™
<html>
<head>
<title>Sample</title>
</head>
<body>
<p>TECHMYTHS SOLUTIONS
™ </p>
</html>
Escape
Characters
3. CopyRight – ©
<html>
<head>
<title>Sample</title>
</head>
<body>
<p>TECHMYTHS SOLUTIONS ©
</p>
</html>
Attribute
• HTML tags can also have attributes, which are extra bits
of information.
• An attribute is used to define the characteristics of an
HTML element and is placed inside the element's opening
tag.
• All attributes are made up of two parts − a name and
a value
• The name is the property you want to set.
• The value is what you want the value of the property to be
set and always put within quotations.
<html> Attribut
<head> e
<title>Align Attribute Example</title>
</head>
Nam Valu
<body> e e
<p align = "left">This is left aligned</p>
<p align = "center">This is center aligned</p>
<p align = "right">This is right aligned</p>
</body>
</html>
Output
Title
Attribute
<html>
<head>
<title>Sample</title>
</head>
<body>
<h3 title = "Hello HTML!">Titled Heading Tag
Example</h3>
</body>
</html>
Style
Attribute
<html>
<head>
<title>The style Attribute</title>
</head>
<body>
<p style = "font-family:arial;
color:#FF0000;">Welcome to HTML</p>
</body>
</html>
HTML - Comments
• Comment is a piece of code which is ignored by any web
browser.
• It is a good practice to add comments into your HTML
code, especially in complex documents, to indicate
sections of a document.
• Comments help you and others understand your code and
increases code readability.
• HTML comments are placed in between <!-- ... -->
Comment
<html>
<head>
<!-- Head details of HTML -->
<title>HTML</title>
</head>
<!-- Body details of HTML -->
<body>
<p>Welcome to HTML Workshop</p>
</body>
</html>
Invalid
Comment
<html>
<head>
<!-- Head details of HTML -->
<title>HTML</title>
</head>
Space Should not be
< !-- Body details of HTML -->
<body> between < and !
<p>Welcome to HTML Workshop</p>
</body>
</html>
Multi-line
Comment
<html>
<head>
<title>HTML</title>
</head>
<!-- This is a multiline comment and it can span
through as many as lines you like. -->
<body>
<p>Welcome to HTML Workshop</p>
</body>
</html>
Comment
Tag
<html>
<head>
<title>HTML</title>
</head>
<body>
<p>Welcome to <comment> HTML </comment>
Workshop</p>
</body>
</html>
Image
• The <img> tag is an empty tag, which means that, it can contain
only list of attributes and it has no closing tag.
• <img src = "Image URL" ... attributes-list/>
• <img src = "/html/images/test.png" alt = "Test Image" />
• You can use PNG, JPEG or GIF image file
• Image name is always case sensitive.
• The alt attribute is a mandatory attribute which specifies an
alternate text for an image, if the image cannot be displayed.
Image
<html>
<head>
<title>HTML</title>
</head>
<body>
<p>Welcome to HTML Workshop</p>
<img src = "/html/new.jpg" alt = "Test
Image" />
</body>
</html>
Image Height and
Width
<html>
<head>
<title>HTML</title>
</head>
<body>
<p>Welcome to HTML Workshop</p>
<img src = "/html/new.jpg" alt = "Test Image"
width
= "150" height = "100"/>
</body>
</html>
Image
Border
<html>
<head>
<title>HTML</title>
</head>
<body>
<p>Welcome to HTML Workshop</p>
<img src = "/html/new.jpg" alt = "Test Image" border
= "3"/>
</body>
</html>
Image title
attribute
<html>
<head>
<title>HTML</title>
</head>
<body>
<p>Welcome to HTML Workshop</p>
<img src = "C:\Users\Siva Kumar\Desktop\
Workshop/test.jpg"
title="HTML LOGO" />
</body>
</html>
Image alt attribute
<html>
<head>
<title>HTML</title>
</head>
<body>
<p>Welcome to HTML Workshop</p>
<img src = "/html/images/test.png" alt = "Test
Image" width =
"150" height
= "100"/>
</body>
Set Image
Alignment
<html>
<head>
<title>HTML</title>
</head>
<body>
<p>Welcome to HTML Workshop</p>
<img src = "/html/new.jpg" alt = "Test Image" border =
"3"
align =
"right"/>
</body>
HTML - Tables
• <table> tag
• <tr> - Table row <th> <th> <th>
tr
• <td> - Table Data cell
<td> <td> <td>
• <th> - Table Heading
tr
<td> <td> <td>
tr
<html> <tr>
<head> <td>Siva</td>
<title>
HTML Table <td>5000</td>
Header </tr>
</title> <tr>
</head>
<body> <td>Sandeep</td>
<table border = "1">
<tr> <td>7000</td>
<th>Name</th> </tr>
<th>Salary</th </table>
</tr> </body>
</html>
Table Background
Colour
<html> <tr>
<head>
<title> <td>Siva</td>
HTML Table Header
</title> <td>5000</td>
</head> </tr>
<body> <tr>
<table border = "1" bordercolor =
"green" bgcolor = "yellow" > <td>Sandeep</td>
<tr>
<th>Name</th> <td>7000</td>
<th>Salary</th </tr>
</tr> </table>
</body>
</html>
Table Background
Image
<html> <tr>
<head>
<title> <td>Siva</td>
HTML Table Header
</title> <td>5000</td>
</head> </tr>
<body> <tr>
<table border = "1" bordercolor =
"green" background = <td>Sandeep</td>
"/images/test.png">
<tr> <td>7000</td>
<th>Name</th> </tr>
<th>Salary</th </table>
</tr> </body>
</html>
Table Height and
Width
<html> <tr>
<head>
<title> <td>Siva</td>
HTML Table Header
</title> <td>5000</td>
</head> </tr>
<body> <tr>
<table border = "1" width = "400"
height = "150" > <td>Sandeep</td>
<tr>
<th>Name</th> <td>7000</td>
<th>Salary</th </tr>
</tr> </table>
</body>
</html>
Table
Caption
<html> <tr>
<head>
<title> <td>Siva</td>
HTML Table Header
</title> <td>5000</td>
</head> </tr>
<body> <tr>
<table border = "1" width = "400"
height = "150" > <td>Sandeep</td>
<caption>Employee Details </caption>
<tr> <td>7000</td>
<th>Name</th> </tr>
<th>Salary</th </table>
</tr> </body>
</html>
Table Rowspan
Attribute
<html> <tr>
<head> <td>Siva</td>
<title> <td rowspan =
HTML Table Header "2">7000</td>
</title> </tr>
</head>
<body> <tr>
<table border = "1" width = "400" <td>Sandeep</td>
height = "150" > </tr>
<caption>Employee Details </caption> </table>
<tr> </body>
<th>Name</th> </html>
<th>Salary</th
</tr>
Table colspan
Attribute
<html> <tr>
<head> <td colspan =
<title> "2">Siva</td>
HTML Table Header </tr>
</title>
</head> <tr>
<body> <td>Sandeep</td>
<table border = "1" width = "400" <td>5000</td>
height = "150" > </tr>
<caption>Employee Details </caption> </table>
<tr> </body>
<th>Name</th> </html>
<th>Salary</th
</tr>
HTML - Lists
• HTML offers web authors three ways for specifying lists of
information.
• All lists must contain one or more list elements.
• <ul> − An unordered list. This will list items using plain
bullets
• <ol> − An ordered list. This will use different schemes of
numbers to list your items.
• <dl> − A definition list. This arranges your items in the
same way as they are arranged in a dictionary.
Unordered
Lists
<html>
<head>
<title>HTML</title>
</head>
<body>
<p> Syllabus for Workshop</p>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>Java Script</li>
<li>PHP</li>
</ul>
</body>
</html>
Unordered Lists - Type
Attribute
<ul type = "square">
<ul type = "disc">
<ul type = "circle">
Unordered Lists - Type
Attribute
<html>
<head>
<title>HTML</title>
</head>
<body>
<p> Syllabus for Workshop</p>
<ul type = “square”>
<li>HTML</li>
<li>CSS</li>
<li>Java Script</li>
<li>PHP</li>
</ul>
</body>
</html>
Unordered Lists - Type
Attribute
<html>
<head>
<title>HTML</title>
</head>
<body>
<p> Syllabus for Workshop</p>
<ul type = “disc”>
<li>HTML</li>
<li>CSS</li>
<li>Java Script</li>
<li>PHP</li>
</ul>
</body>
</html>
Unordered Lists - Type
Attribute
<html>
<head>
<title>HTML</title>
</head>
<body>
<p> Syllabus for Workshop</p>
<ul type = “circle”>
<li>HTML</li>
<li>CSS</li>
<li>Java Script</li>
<li>PHP</li>
</ul>
</body>
</html>
Ordered
Lists
<html>
<head>
<title>HTML</title>
</head>
<body>
<p> Syllabus for Workshop</p>
<ol>
<li>HTML</li>
<li>CSS</li>
<li>Java Script</li>
<li>PHP</li>
</ol>
</body>
</html>
Ordered Lists – Type
Attribute
<ol type = "1"> - Default-Case
Numerals.
<ol type = "I"> - Upper-Case
Numerals.
<ol type = "i"> - Lower-Case
Numerals.
<ol type = "A"> - Upper-Case
Letters.
Ordered Lists – Type
<html>
Attribute
<head>
<title>HTML</title>
</head>
<body>
<p> Syllabus for Workshop</p>
<ol type=“1”>
<li>HTML</li>
<li>CSS</li>
<li>Java Script</li>
<li>PHP</li>
</ol>
</body>
</html>
Ordered Lists – Type
<html>
Attribute
<head>
<title>HTML</title>
</head>
<body>
<p> Syllabus for
Workshop</p>
<ol type=“I”>
<li>HTML</li>
<li>CSS</li>
<li>Java Script</li>
<li>PHP</li>
</ol>
</body>
</html>
Ordered Lists – Type
<html>
Attribute
<head>
<title>HTML</title>
</head>
<body>
<p> Syllabus for
Workshop</p>
<ol type=“i”>
<li>HTML</li>
<li>CSS</li>
<li>Java Script</li>
<li>PHP</li>
</ol>
</body>
</html>
Ordered Lists – Type
<html>
Attribute
<head>
<title>HTML</title>
</head>
<body>
<p> Syllabus for
Workshop</p>
<ol type=“A”>
<li>HTML</li>
<li>CSS</li>
<li>Java Script</li>
<li>PHP</li>
</ol>
</body>
</html>
Ordered Lists – Type
<html>
Attribute
<head>
<title>HTML</title>
</head>
<body>
<p> Syllabus for
Workshop</p>
<ol type=“a”>
<li>HTML</li>
<li>CSS</li>
<li>Java Script</li>
<li>PHP</li>
</ol>
</body>
</html>
Ordered Lists – Start
Attribute
<ol type = "1" start = "4"> - Numerals
starts with 4.
<ol type = "I" start = "4"> - Numerals
starts with IV.
<ol type = "i" start = "4"> - Numerals
starts with iv.
<ol type = "a" start = "4"> - Letters starts
with d.
<ol type = "A" start = "4"> - Letters starts
with D.
Ordered Lists – Start
<html>
Attribute
<head>
<title>HTML</title>
</head>
<body>
<p> Syllabus for
Workshop</p>
<ol type=“1” start=“4”>
<li>HTML</li>
<li>CSS</li>
<li>Java Script</li>
<li>PHP</li>
</ol>
</body>
</html>
HTML - Text Links
• A webpage can contain various links that take you directly to other
pages
• A webpage can contain various links that take you directly specific
parts of a given page
• These links are known as hyperlinks.
• Hyperlinks allow visitors to navigate between Web sites by clicking
on words, phrases, and images.
• <a href = "Document URL" .. attributes-list>Link Text</a>
HYPERLINKS within
Same Page
<html>
<head> </head>
<body>
<ul>
<li> <a href="#HTML"> Introduction to HTML </a> </li>
<br>
<li> <a href="#CSS"> Introduction to CSS </a> </li>
</ul>
<br> <br>
<br><br><br><br><br><br><br><br><br><br><br>
<p> <a name="HTML"> Hyper Text Markup Language </a>
</p>
<br> <br>
<br><br><br><br><br><br><br><br><br><br><br>
<br> <br>
<br><br><br><br><br><br><br><br><br><br><br>
<p> <a name="CSS"> Cascading Style Sheet </a> </p>
<br> <br>
<br><br><br><br><br><br><br><br><br><br><br>
HYPERLINK
S
<html>
<head>
<title>Hyperlink Example</title>
</head>
<body>
<p>Click following link</p>
<a href =
"https://www.techmyths.in">TECHMYTHS</a>
</body>
</html>
HYPERLINKS – target
attribute
_blank : Opens the linked document in a new window or
tab.
_self : Opens the linked document in the same frame.
_parent : Opens the linked document in the parent frame.
_top : Opens the linked document in the full body
of the window.
HYPERLINKS – target
<html>
attribute
<head>
<title>Hyperlink Example</title>
</head>
<body>
<p>Click following link</p>
<a href = "https://www.techmyths.in" target=“_blank”>OPEN IN NEW
WINDOW</a>
<a href = "https://www.techmyths.in" target=“_self”>OPEN IN
SELF</a>
<a href = "https://www.techmyths.in" target=“_parent”>OPEN IN
PARENT</a>
<a href = "https://www.techmyths.in" target=“_top”>OPEN IN
BODY</a>
</body>
HYPERLINKS – use of base
<html>
path
<head>
<title>Hyperlink Example</title>
<base href = "https://www.adhiparasakthi.in/">
</head>
<body>
<p>Click following link</p>
<a href = "/about-us/" target = "_blank">APEC</a>
</body>
</html>
HYPERLINKS – Setting Link
YouColor
can set colors of your links, active links
and visited links
using link, alink and vlink attributes of
<html> <body> tag.
<head>
<title>Hyperlink Example</title>
</head>
<body alink = "#54A250" link = "#040404" vlink = "#F40633">
<p>Click following link</p>
<a href = "https://www.techmyths.in" >TECHMYTHS</a>
</body>
</html>
HYPERLINKS – Download
<html>
Links
<head>
<title>Hyperlink Example</title>
</head>
<body>
<p>Click following link</p>
<a href =
"http://academics.pec.edu/Syllabus/4_BT_CS_1415.pdf">Download
PDF File</a>
</body>
</html>
HYPERLINKS – Image
Link
<html>
<head>
<title>Hyperlink Example</title>
</head>
<body>
<p>Click the image </p>
<a href = "https://www.techmyths.in" >
<img src = "/html/new.jpg" alt = "Image
Missing" border = "0"/>
</a>
</body>
</html>
HTML – Blocks : <div>
tag
<html> <!-- Second group of tags -->
<head> <div style = "color:green">
<title>HTML div Tag</title> <h4>This is second group</h4>
</head>
<body> <!-- First group of tags --> <p> list of fruits</p>
<div style = "color:red">
<h4>This is first group</h4> <ul>
<p>list of vegetables</p> <li>Apple</li>
<ul> <li>Banana</li>
<li>Beetroot</li> <li>Mango</li>
<li>Ginger</li> <li>Strawberry</li>
<li>Potato</li> </ul>
<li>Radish</li> </div>
</ul>
</div> </body>
</html>
HTML – Blocks : <div>
tag
Outpu
t
Colours – Text and
Background
<html>
<head>
<title>HTML Colors by Name</title>
</head>
<body text = "white" bgcolor = "black">
<p>Text Colour and Background Colour in
HTML</p>
</body>
</html>
HTML Colors - Hex
Codes
• A hexadecimal is a 6 digit representation of a color.
• The first two digits(RR) represent a red value
• The next two are a green value(GG)
• The last are the blue value(BB).
Colors – Text and
Background
<html>
<head>
<title>HTML Colors by Name</title>
</head>
<body text = "#0000FF" bgcolor = "#00FF00">
<p>Text Colour and Background Colour in
HTML</p>
</body>
</html>
HTML Colors – RGB
values
• This color value is specified using the rgb( ) property.
• This property takes three values, one each for red, green, and blue.
• The value can be an integer between 0 and 255 or a percentage.
HTML Colors – RGB
values
<html>
<head>
<title>HTML Colors by Name</title>
</head>
<body text = "rgb(0,0,255)" bgcolor =
"rgb(255,255,0)">
<p>Text Color and Background Colour in
HTML</p>
</body>
</html>
Font
Size
<html>
<head>
<title>Setting Font Size</title>
</head>
<body>
<font size = "1"> HTML</font><br />
<font size = "2"> HTML </font><br />
<font size = "3"> HTML </font><br />
<font size = "4"> HTML </font><br />
<font size = "5"> HTML </font><br />
<font size = "6"> HTML </font><br />
<font size = "7"> HTML </font>
</body>
</html>
Font
FACE
<html>
<head>
<title>Font Face</title>
</head>
<body>
<font face = "Times New Roman" size = "5">Times New
Roman</font><br />
<font face = "Verdana" size = "5">Verdana</font><br />
<font face = "Comic sans MS" size =" 5">Comic Sans
MS</font><br />
<font face = "WildWest" size = "5">WildWest</font><br />
<font face = "Bedrock" size = "5">Bedrock</font><br />
</body>
</html>
Specify alternate font
faces
<html>
<head>
<title>Font Face</title>
</head>
<body>
<font face = "arial, helvetica"> Welcome to HTML
Workshop</font><br />
A visitor will only be able to see your font if they have that
</body>
font installed on their computer. So, it is possible to specify
two or more font face alternatives by listing the font face
</html> names, separated by a comma.
Setting Font
Colors
<html>
<head>
<title>Setting Font Color</title>
</head>
<body>
<font color = "#FF00FF">This text is in pink</font>
<br />
<font color = "red">This text is red</font>
</body>
</html>
<html>
<head>
Setting Font
<title>Setting Basefont Color</title>
</head>
Colors
<body>
<basefont face = "arial, verdana, sans-serif" size = "2" color = "#ff0000">
<p>This is the page's default font.</p>
<p><font size = "+2" color = "darkgray">
This is darkgray text with two sizes larger
</font>
</p>
<p><font face = "courier" size = "-1" color = "#000000">
It is a courier font, a size smaller and black in color.
</font>
</p>
</body>
</html>
Outpu Setting Font
t Colors
HTML -
FORMS
There are different types of form controls that you can
use to collect data using HTML form −
• Text Input Controls
• Checkboxes Controls
• Radio Box Controls
• Select Box Controls
• File Select boxes
• Hidden Controls
• Clickable Buttons
• Submit and Reset Button
Text Input Control
<html>
<head>
<title>Text Input Control</title>
</head>
<body>
<form >
First name: <input type = "text" name =
"first_name" />
<br>
Last name: <input type = "text" name =
"last_name" />
</form>
</body>
</html>
Multi line Text Box
<html>
<head>
</head>
<body>
<form>
<textarea rows="30“ cols=“20”>
</textarea>
</form>
</body>
</html>
Number Input
Box
<!DOCTYPE html>
<html>
<head> </head>
<body>
<form>
Number of days: <input type="number" >
</form>
</body>
</html>
Number Input
Box
<!DOCTYPE html>
<html>
<head> </head>
<body>
<form>
Number of days: <input type="number"
name="numdays" min="1" max="10">
</form>
</body>
</html>
Date Input
Box
<!DOCTYPE html>
<html>
<head> </head>
<body>
<form>
Enter your Date of Birth:
<input type="date" name="dob">
</form>
</body>
</html>
<Fieldset>
<!DOCTYPE html>
<html> <head> </head>
<body>
<form>
<fieldset>
First name: <input type = "text" name = "first_name" />
<br>
Last name: <input type = "text" name = "last_name" />
<br>
Date of Birth: <input type="date" name="dob">
</fieldset>
</form>
</body> </html>
<legend>
<!DOCTYPE html>
<html> <head> </head>
<body>
<form>
<fieldset>
<legend> Personal Details </legend>
<br>
First name: <input type = "text" name = "first_name" />
<br><br>
Last name: <input type = "text" name = "last_name" />
<br><br>
Date of Birth: <input type="date" name="dob">
</fieldset>
</form>
</body> </html>
Password Input
Control
<html>
<head>
<title>File Upload Box</title>
</head>
<body>
<form>
Username: <input type = "text" name =
“Username" />
<br>
Password: <input type = “password" name =
“password" />
</form>
</body>
</html>
Checkbox
Control
<html>
<head>
<title>Checkbox Control</title>
</head>
<body>
<p> Select the Courses </p>
<form>
<input type = "checkbox" name = "HTML" value =
"on"> HTML
<input type = "checkbox" name = "CSS" value = "on">
CSE
<input type = "checkbox" name = "Javascript" value =
"on"> JavaScript
</form>
</body>
Radio Button
Control
<html>
<head>
<title>Radio Button Control</title>
</head>
<body>
<p> Select the Courses </p>
<form>
<input type = "radio" name = "HTML" value =
“HTML"> HTML
<input type = "radio" name = "CSS" value = “CSS”>
CSS
<input type = "radio" name = "Javascript" value =
“JS"> JavaScript
</form>
</body>
Drop Down Box
Control
<html>
<head>
<title>Select Box Control</title>
</head>
<body>
<form>
<select name = "dropdown">
<option value = "HTML" selected>HTML</option>
<option value = "CSS">CSS</option>
<option value = "JAVASCRIPT">JAVA SCRIPT</option>
</select>
</form>
</body>
</html>
File Upload
Control
<html>
<head>
<title>File Upload Box</title>
</head>
<body>
<form>
<input type = "file" name = "fileupload" accept = "image/*" />
</form>
</body>
</html>
File Upload Outp
Control ut
Button
Control
<html>
<head>
<title>File Upload Box</title>
</head>
<body>
<form>
Username: <input type = "text" name = “Username" />
<br>
Password: <input type = “password" name = “password" />
<br><br>
<input type = "submit" name = "submit" value = "Submit" />
<input type = "reset" name = "reset" value = "Reset" />
</form>
</body>
</html>
Marquee
<html>
<head>
<title>HTML marquee Tag</title>
</head>
<body>
<marquee>This is basic example of
marquee</marquee>
</body>
</html>
Marquee
<html>
<head>
<title>HTML marquee Tag</title>
</head>
<body>
<marquee direction = "right">This text will scroll from left to
right</marquee>
</body>
</html>
Marquee
<html>
<head>
<title>HTML marquee Tag</title>
</head>
<body>
<marquee direction = "up">This text will scroll from bottom to up</marquee>
</body>
</html>
Audio
Embedding
<html>
<head>
</head>
<body>
<audio controls>
<source
src="vennilavey.mp3" >
</audio>
</body> The controls attribute adds video controls, like play, pause, and volume.
</html>
Audio -
Autoplay
<html>
<head>
</head>
<body>
<audio controls autoplay>
<source
src="vennilavey.mp3" >
</audio>
</body>
</html>
Audio – Auto play -
muted
<html>
<head>
</head>
<body>
<audio controls autoplay
muted>
<source
src="vennilavey.mp3" >
</audio>
</body>
</html>
Video
<!DOCTYPE html>
<html>
<body>
<video controls>
<source src="auto.mp4"
type="video/mp4">
</video>
</body>
</html>
Video Autoplay
<!DOCTYPE html>
<html>
<body>
<video controls autoplay>
<source src="auto.mp4"
type="video/mp4">
</video>
</body>
</html>
Video Autoplay -
muted
<!DOCTYPE html>
<html>
<body>
<video controls autoplay muted>
<source src="auto.mp4"
type="video/mp4">
</video>
</body>
</html>
Video - Size
<!DOCTYPE html>
<html>
<body>
<video width="320" height="240"
controls>
<source src="auto.mp4"
type="video/mp4">
</video>
</body>
</html>
Youtube Video
<!DOCTYPE html>
<html>
<body>
<iframe width="560" height="315"
src="https://www.youtube.com/embed/f-tHIpq8Ua0?
autoplay=1&mute=1"
</iframe>
</body>
</html>
Youtube Video
- Autoplay - muted
<!DOCTYPE html>
<html>
<body>
<iframe width="560" height="315"
src="https://www.youtube.com/embed/f-tHIpq8Ua0?
autoplay=1&mute=1">
</iframe>
</body>
</html>
Youtube Video -
control
<!DOCTYPE html>
<html>
<body>
<iframe width="560" height="315"
src="https://www.youtube.com/embed/f-tHIpq8Ua0?controls=0">
</iframe>
</body>
</html> controls =0 , then no video controls, like play, pause, and volume.
Emoji
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<h1>My First Emoji</h1>
<p>😀</p>
</body>
</html>
Emoji
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<h1>Sized Emojis</h1>
<p style="font-size:48px"> 😀 😄
😍 💗
</p>
</body>
</html>
You might also like
- Web Design and Internet Programming Lab Manual (2)No ratings yetWeb Design and Internet Programming Lab Manual (2)18 pages
- Lab Instructions: HTML + CSS: Tags. A Tag Is A String Enclosed Within " ", For Example "No ratings yetLab Instructions: HTML + CSS: Tags. A Tag Is A String Enclosed Within " ", For Example "9 pages
- E-Note_25291_Content_Document_20241001040321PMNo ratings yetE-Note_25291_Content_Document_20241001040321PM50 pages
- Build Simple Websites Using Commercial Programs100% (1)Build Simple Websites Using Commercial Programs51 pages
- HTML & CSS Crash Course - Learn HTML and Css With Easy To Follow-step-By-step TutorialsNo ratings yetHTML & CSS Crash Course - Learn HTML and Css With Easy To Follow-step-By-step Tutorials71 pages
- HTML Can Be Edited by Using Professional HTML Editors LikeNo ratings yetHTML Can Be Edited by Using Professional HTML Editors Like22 pages
- Fundamentals of HTML: Hypertext Refers To The Way in Which Web Pages (HTML Documents) Are Linked TogetherNo ratings yetFundamentals of HTML: Hypertext Refers To The Way in Which Web Pages (HTML Documents) Are Linked Together31 pages
- Class 8 Computer worksheet of Introduction to HTMLNo ratings yetClass 8 Computer worksheet of Introduction to HTML8 pages
- Class: XII Subject: Computer: Features of HTMLNo ratings yetClass: XII Subject: Computer: Features of HTML40 pages
- Lesson 1 Learning The Basics: A Beginner's Tutorial To HTML DemoNo ratings yetLesson 1 Learning The Basics: A Beginner's Tutorial To HTML Demo33 pages
- Basic HTML Document: Hypertext Refers To The Way in Which Web Pages (HTML Documents) Are LinkedNo ratings yetBasic HTML Document: Hypertext Refers To The Way in Which Web Pages (HTML Documents) Are Linked41 pages
- Final Activities of Unit 1 1. Copy The Questions and Answers From The Video 1. /copia Las Preguntas y Respuestas Del Video 1100% (1)Final Activities of Unit 1 1. Copy The Questions and Answers From The Video 1. /copia Las Preguntas y Respuestas Del Video 110 pages
- Add A Table For Model Views To A JT Plus PDF TemplateNo ratings yetAdd A Table For Model Views To A JT Plus PDF Template29 pages
- Manifold Flow in Pressure-Distribution SystemsNo ratings yetManifold Flow in Pressure-Distribution Systems7 pages
- Commonly Asked Digital Marketing Interview Questions100% (1)Commonly Asked Digital Marketing Interview Questions13 pages
- Download Complete (Original PDF) Reinforced Concrete Design (9th Edition) PDF for All Chapters100% (7)Download Complete (Original PDF) Reinforced Concrete Design (9th Edition) PDF for All Chapters45 pages
- Caught in Between Faith and Cash The Ottoman Land System of Crete, 1645-1670 in Memory of Pinelopi StathiNo ratings yetCaught in Between Faith and Cash The Ottoman Land System of Crete, 1645-1670 in Memory of Pinelopi Stathi32 pages
- Modernization: Assistant Professor, Dept. of Sociology, Mahatma Gandhi Central University, BiharNo ratings yetModernization: Assistant Professor, Dept. of Sociology, Mahatma Gandhi Central University, Bihar10 pages
- Journal of The Royal Asiatic Society ofNo ratings yetJournal of The Royal Asiatic Society of949 pages
- Skeletal System Sample Detailed Lesson Plan100% (1)Skeletal System Sample Detailed Lesson Plan9 pages
