HTML.pptx

HTML stands for Hyper Text Markup Language.
HTML is the standard markup language for Web
pages.
HTML elements are the building blocks of HTML
pages.
HTML elements are represented by <> tags.
What is HTML tag?
HTML tags are the building blocks of HTML Language.
These are surrounded by two angle brackets. These are
basically the instruction that tells the browser what to
show on the web page. There are two types of HTML
tags, paired tag or unpaired tags. Paired tags have
closing braces as well </>.
What is HTML?

The <html></html> tag is the highest level element that
encloses every HTML page. This tag encloses the
complete HTML document and mainly comprises of
document header which is represented by
<head>...</head> and document body which is
represented by <body>...</body> tags.
The <head></head> tag holds meta information such as
the page’s title and charset.
The<title></title>tag is used inside the <head> tag to
mention the document title.
The <body></body> tag encloses all the content that
appears on the page. which keeps other HTML tags like
<h1>, <div>, etc.

How HTML Works?
The working of HTML language is quite simple and
easy to understand. All you need to is follow these
steps given below
Open a notepad file.
Create some bunch of short codes using tag.
Save it with extension .html OR .htm
Now run it using any browser. (Such as Internet
Explorer, Google Chrome, Safari, or Mozilla
Firefox

Basic Html Structure:
<HTML>
<HEAD>
<!– META INFORMATION-->
<TITLE>TILTLE OF THE WEBPAGE</TITLE>
</HEAD>
<BODY>
<!– PAGE CONTENT -- >
</BODY>
</HTML>

What is an attribute?
Attributes define additional characteristics or
properties of the element . Attributes are always
specified in the start tag (or opening tag) and
usually consists of name/value pairs like
name="value" . Attribute values should always be
enclosed in quotation marks.
Syntax:
<tag_name attribute_name=“value”>

The <body> tag defines the document’s body. The
<body> element contains all the content of an HTML
document such as
headings,paragraphs,images,hyperlinks,tables,lists
etc.
<BODY >TAG
Attribute Description
background
Image to be used a
background
bgcolor Background color
text Foreground color of text

CODE:
<html>
<head>
<title>Page Title</title>
</head>
<body bgcolor=“orange">
HELLO STUDENTS
</body>
</html>

Title of the page
Backgroun
d color of
the page
Content of the body

CODE:
<html>
<head>
</head>
<body background="C:UsersuserDesktop1.jpg"
text="blue">
HELLO STUDENTS
BACKGROUND IS SET AND TEXT COLOR SET
TO BLUE.
</body>
</html>

Assignment 1:Write a code in HTML having
background color as pink and text in color
orange.
Assignment 2:Write a code in HTML having
background image and text color in green.
Note: You can refer the textbook.

<HEADING> TAG
HTML defines six levels of headings. A heading element
implies all the font changes, paragraph breaks before and
after, and any white space necessary to render the heading.
The heading elements are H1, H2, H3, H4, H5, and H6 with
H1 being the highest (or most important) level and H6 the
least.
Search engines use the headings to index the structure and
content of your web pages. Users often skim a page by its
headings. It is important to use headings to show the
document structure.<h1> headings should be used for main
headings, followed by <h2> headings, then the less
important <h3>, and so on.

Atrribute Description
Align Sets the alignment of the
heading
It has values-
’right,left,center and justify’
Example: <h1 align=“center”> this the heading1
which will appear at the center of the page</h1>

<html>
<head>
</head>
<body>
<h1 align="center">Heading 1</h1>
<h2 align="right">Heading 2</h2>
<h3 align="left">Heading 3</h3>
<h4 align="justify">Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</body>
</html>

Paragraph tag
The defines a paragraph. Browsers automatically
add some space(margin) before and after each 
element
Align Sets the alignment of the
pargraph.
It has values-
’right,left,center and justify’

<html>
<body bgcolor="orange" text="green">

This paragraph
contains a lot of lines
in the source code,
but the browser
ignores it.


My Bonnie lies over the ocean.
My Bonnie lies over the sea.
Oh, bring back my Bonnie to me.

</body>
</html>

 Line break tag
The tag inserts a single line break. The tag is an
empty
tag which means that it has no end tag.

<html>
<body bgcolor="orange" text="green">

This paragraph
in the source code,
but the browser
ignores it.


My Bonnie lies over the ocean. My Bonnie lies
over the sea. My Bonnie lies over the ocean.
 Oh, bring back my Bonnie to me.

</body>
</html>

<HR> tag –horizontal line
The <hr> tag in HTML stands for horizontal line
and is used to insert a horizontal line in an
HTML page to divide or separate document
sections. The <hr> tag is an empty tag and it
does not require an end tag.
size
Used to specify the height of the
horizontal rule.
width
Used to specify the width of the
horizontal rule.

<html>
<body bgcolor="cyan" text="black">

This paragraph
<hr>in the source code,
but the browser
ignores it.

My Bonnie lies over the ocean.<hr size="10">
My Bonnie lies over the sea.
 <hr width="80%">My Bonnie lies over the
ocean.
 Oh, bring back my Bonnie to me.

</body>
</html>

 tag
The tag is used to specify the font face, font
size and color of the text.
Attributes Example Description
Size=“number” Size=“2” Set the font size
Size=“+number” Size=“+1” Increases the font
size
Size=“-number” Size=“-1” Decreases the font
size
Face=“face name” Face=“Times New
Roman”
Defines the font
name
Color=“value” Color=“red” Set the font color

<html>
<body>
<h3>Setting Font Size</h3>
Font size = "6" 
Font size = "7" 
Font size = "-1" 
Font size = "+3" 
Font size = "+4" 
Verdana 
Comic Sans
MS 
WildWest 
This text is in pink 
This text is red
</body>
</html>

<PRE> Tag
The tag preformats the text. The text is displayed in the
monospace form. Browsers normally render pre text in a fixed-
pitched font, with whitespace in tact, and without word wrap.
<ADDRESS> Tag
The <address> tag defines the contact information for the
author/owner of a document or an article. The contact
information can be an email address, URL, physical address,
phone number, social media handle, etc.The text in the
<address> element usually renders in italic, and browsers will
always add a line break before and after the <address>
element.

<html>
<body bgcolor="pink" text="green">
This paragraph
in the source code,
but the browser
ignores it.
<pre>
My Bonnie lies over the sea.</pre> 
<address>My Bonnie lies over the ocean.
Oh, bring back my Bonnie to me.</address>
</body>
</html>

<MARQUEE> Tag
An HTML marquee is a scrolling piece of text displayed either horizontally
across or vertically down your webpage depending on the settings. This is
created by using HTML <marquees> tag.
Attribute Value Description
behavior
alternate,
scroll, slide
The behavior of how the text scrolls. It can
be one of the following
bgcolor
colorname or
colorcode
Background color
direction
left, right, up,
down.
Direction that the text scrolls.
The default value is left if the direction
attribute is not specified.
width Pixels or %
Width of the marquee (expressed in either
pixels or percent)
scrolldelay seconds Defines how long to delay between each
jump.
scrollamount number Defines how how far to jump.

<html>
<body bgcolor="pink" text="green">
<marquee>This is basic example of
marquee</marquee> 
 <marquee width = "50%">This example will
take only 50% width</marquee>
 <marquee direction = "right">This text will
scroll from left to right</marquee>
 <marquee direction = "up" >This text will
scroll from bottom to up</marquee>
 <marquee bgcolor="orange"
behavior="slide">the background color is
orange</marquee>
 <marquee
</body>
</html>

CHARACTER FORMATTING TAGS:
1)Physical style
1)-bold: element defines bold text, without
any extra importance.
2)-italic: element defines italic text, without
any extra importance.
3)-underline: Anything that appears within
... element, is displayed with
underline.
2)Logical style
1):element defines strong text, with
added semantic "strong" importance.
2)-emphasize: element defines
emphasized text, with added semantic
importance.

<html>
<body>
computer science 
computer science 
computer science 
computer science 
computer science 
COMPUTER
SCIENCE
</body>
</html>

Tag: It is subscript tag. The subscript text appears half
a character below the normal line, and is sometimes rendered
in a smaller font. Subscript text can be used for chemical
formulas and mathematical equations.
Eg: H2O
H2O
 Tag: It is superscript tag. The superscript text appears
half a character above the normal line, and is sometimes
rendered in a smaller font. Superscript text can be used for
chemical formulas and mathematical equations.
Eg: (a+b)2
(a + b)2

IMAGES IN HTML
Images are very important to beautify as well as to depict
many complex concepts in simple way on your web page.
You can insert any image in your web page by
using <img> tag.
<img src = "Image URL" >
src(source) used to specify the URL of the resource.
(Note: It a compulsory attribute)
NOTE:The <img> tag is an empty tag, which means that,
it can contain only list of attributes and it has no closing
tag.

Attribute Description
alt provides an alternate text for an image, if the
user for some reason cannot view it (because of
slow connection, an error in the src attribute, or if
the user uses a screen reader).
The value of the alt attribute should describe the
image
Width Defines the width of the image in pixels
Height Defines the height of the image in pixels
Border Specify the border thickness in pixels
Align Sets the alignment of the image
Attribute list of image <img> tag:

<html>
<body>
Inserting the image
<img src="C:UsersuserDesktoptrulli.jpg">
 set the height and width of the image
<img src="C:UsersuserDesktoptrulli.jpg"
height="150" width="150">
</body>
</html>

<html>
<body>
Inserting the image
<img src="C:UsersuserDesktoptrulli.jpg" height="250"
border="5" align="right">
If a browser cannot find the image, it will display the
alternate text:
<img src="wrongname.gif" alt="Flowers in Chania">
 set the height and width of the image
<img src="C:UsersuserDesktoptrulli.jpg" height="150"
width="150">
</body>
</html>

The anchor tag-<a>
A link is specified using HTML tag <a>. This tag is
called anchor tag and anything between the opening <a> tag
and the closing </a> tag becomes part of the link and a user
can click that part to reach to the linked document.
Href(Hypertext Reference)The HREF is an attribute of the
anchor tag, which is used to identify sections within a
document.
(Note: It a compulsory attribute)
Synatx:
<a href = “URL”>Link Text</a>

Link to a page on the world wide web
<a href=https://www.google.com/> Google
Page</a>
Link to document located in different directory
<a href=“locationa.html>Click here</a>
Link to an image by image as a link
<a href=“locationimage.jpg”><img
src=“loactionimage1.jpeg”></a>
Link to Mail(mail to)
<a href=mailto:emailid@host>Name</a>

<html>
<body bgcolor="cyan">
Click the following link
<a href="https://www.w3schools.com/html/">Visit our HTML
tutorial</a> 
 Link to the different page
<a href="C:UsersuserDesktophtmlimage.html">Click here
to go the image page</a> 
 Link to the image using image
 <a href="C:UsersuserDesktoptrulli.jpg"><img
src="C:UsersuserDesktopsmiley.gif"></a>
</body>
</html>

HTML offers web authors three ways for specifying
lists of information. All lists must contain one or more
list elements. HTML lists allow web authors to group a
set of related items in lists.
There are 3 types of lists
⁻Unordered list-<ul>
•bulleted items
⁻Ordered list-<ol>
•numbered items
⁻Description list-<dl>
•A list of items, with a description of each item.

UNORDERED LIST:
An unordered list is a collection of related items that have no
special order or sequence. This list is created by using HTML
tag. Each item in the list is marked with a bullet.
<ul>-unordered list created using the <ul> element
<li>- list item starts with the <li> element.
Eg:<ul> <li>Chocolate Cake</li>
<li>Black Forest Cake</li>
<li>Pineapple Cake</li>
</ul>
OUTPUT:
•Chocolate Cake
•Black Forest Cake
•Pineapple Cake

The ‘type’ Attribute
You can use ‘type’ attribute for <ul> tag to specify the type
of bullet you like. By default, it is a disc. Following are the
possible options −
<ul type = "square">
<ul type = "disc">
<ul type = "circle">
<ul type = “none">
Eg:<ul type = "square">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>

<HTML>
<BODY>
<ul> <li>Chocolate Cake</li> <li>Black Forest Cake</li>
<li>Pineapple Cake</li> </ul>
<ul type = "square">
<li>Beetroot</li><li>Ginger</li><li>Potato</li>
<li>Radish</li></ul>
<ul type = "circle">
<li>Beetroot</li> <li>Ginger</li><li>Potato</li>
<li>Radish</li></ul>
<ul type = "NONE">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li> <li>Radish</li>
</ul>
</BODY>
</HTML>

Ordered list
To put your items in a numbered list instead of bulleted, then HTML
ordered list will be used. This list is created by using <ol> tag. The
numbering starts at one and is incremented by one for each
successive ordered list element tagged with <li>.
<ol>-ordered list created using the <ol> element
<li>- list item starts with the <li> element.
Eg:<ol><li>Mix dry ingredients thoroughly.</li>
<li>Pour in wet ingredients. </li>
<li>Mix for 10 minutes. </li>
<li>Bake for one hour at 300 degrees. </li></ol>
OUTPUT:
1. Mix dry ingredients thoroughly.
2. Pour in wet ingredients.
3. Mix for 10 minutes.
4. Bake for one hour at 300 degrees.

The ‘type’ Attribute
You can use ‘type’ attribute for <ol> tag to specify
the type of numbering you like. By default, it is a
number. Following are the possible options −
<ol type = "1"> - Default-Case Numerals.
<ol type = "I"> - Upper-Case Numerals.
<ol type = "i"> - Lower-Case Numerals.
<ol type = "A"> - Upper-Case Letters.
<ol type = "a"> - Lower-Case Letters.

<html>
<body>
<ol type = "1">
<li>Fasten your seatbelt</li><li>Starts the car's engine</li>
<li>Look around and go</li> </ol>
<ol type = "I">
<li>Mix dry ingredients thoroughly.</li><li>Pour in wet
ingredients.</li> <li>Mix for 10 minutes.</li><li>Bake for one hour at
300 degrees.</li></ol>
<ol type = "i">
<li>Beetroot</li> <li>Ginger</li>
<li>Potato</li><li>Radish</li></OL>
<ol type = "A">
<li>Beetroot</li><li>Ginger</li> <li>Potato</li><li>Radish</li>
</ol>
<ol type = "a">
<li>Beetroot</li><li>Ginger</li><li>Potato</li>
<li>Radish</li></ol>
</body>

The ‘start’ attribute:
The numbering of items in an ordered list typically
starts with 1. However, if you want to change that
you can use the ‘start’ attribute, as shown in the
following example:
<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.

<html>
<body>
<ol start="10">
<li>Mix ingredients</li>
<li>Bake in oven for an hour</li>
<li>Allow to stand for ten minutes</li>
</ol>
<ol type="A" start="6">
<li>Mix ingredients</li>
<li>Bake in oven for an hour</li>
<li>Allow to stand for ten minutes</li>
</ol>
<ol type = "i" start = "4">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>

Description Lists
A description list is a list of items with a description or
definition of each item.
<dl>-The description list is created using <dl> element.
<dt>-The <dl> element is used in conjunction with
the <dt> element which specify a term.
<dd>-The <dd> element which specify the term's definition.
Browsers usually render the definition lists by placing the
terms and definitions in separate lines, where the term's
definitions are slightly indented.

<html>
<body>
<dl>
<dt>Bread</dt>
<dd>A baked food made of
flour.</dd>
<dt>Coffee</dt>
<dd>A drink made from roasted
coffee beans.</dd>
<dt>Tea</dt>
<dd>it is the hot drink</dd>
</dl>

<html>
<body>
<h2>A Nested List</h2>
<ul>
<li>Coffee</li>
<li>Tea
<ol>
<li>Black tea</li>
<li>Green tea</li>
</ol>
</li>

HTML.pptx

More Related Content

Similar to HTML.pptx

Recently uploaded

HTML.pptx