Language of web page
HTML (Hypertext Markup Language)
Basic & Formatting Tags
QUIZ
HTML stands for -
A) HighText Machine Language
B) HyperText and links Markup Language
C) HyperText Markup Language
D) None of these
QUIZ
The correct sequence of HTML tags for
starting a webpage is -
A) Head, Title, HTML, body
B) HTML, Body, Title, Head
C) HTML, Head, Title, Body
D) HTML, Head, Title, Body
QUIZ
Which of the following tag is used for
inserting the largest heading in HTML?
A) <h3>
B) <h1>
C) <h5>
D) <h6>
QUIZ
How to create an unordered list (a list with
the list items in bullets) in HTML?
A) <ul>
B) <ol>
C) <li>
D) <i>
What is HTML
HTML describes the content and format
of web pages using tags.
Ex. Title Tag: <title>A title </title>
It’s the job of the web browser to interpret
tags and display the content accordingly.
HTML Syntax
An HTML file contains both formatting
tags and content.
Document content is what we see on the
webpage.
Tags are the HTML codes that control the
appearance of the document content.
Tags are surrounded by angular brackets
< >.
Tags are not case sensitive.
HTML Syntax
Closing
HTML syntax: tag
Paired or two-sided tag:
<tag attributes>document content</tag>
Starting Properties of the Actual content appears in
tag. webpage. It could be empty
tag Optional!
Examples: <p> Hello </p>
<body bgcolor = “yellow”> Welcome </body>
HTML Syntax
HTML syntax:
Single or one-sided tag:
<tag />
e.g. Breaking line tag: <br/>
Horizontal line tag: <hr/>
Structure of the web page
Inside the <html></html> tag
Each web page has a body part described in <body></body>
tag:
<html> The content of
<head> the whole web
<title> My Web Page </title> page should be
</head> put here
<body>
This is a sample HTML file.
</body>
</html>
BODY ELEMENT
The BODY element of a web page is an important
element in regards to the page’s appearance.
Attributes of body tag are:
• Bgcolor: Sets the background color.
• Background: Sets the background image.
• Text: Sets the color for the text in body.
• Top margin: Sets the margin(space) from the top.
COMMENT TAG
This tag is used to write comments, user
can write the description.
This tag has no effect on content of the
web page shown on the viewer’s browser
Eg:
<!My description>
BASIC TAGS
HEADING TAG
<h1>…</h1> to <h6>…</h6>.
H1 specifies highest level of heading (size of text is biggest)
whereas H6 specifies lowest level of heading ( size of text is
smallest).
Headings, <Hx> </Hx>
<HTML> Heading 1
<HEAD> Heading 2
<TITLE> Example Heading 3
Page</TITLE>
Heading 4
</HEAD> Heading 5
<BODY> Heading 6
<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>
Paragraph Tag
<p>… </p>
starting required and ending is optional.
Paragraphs allows to add text to a document in such a
way that it will automatically adjust the end of line to suit
the window size of the browser in which it is being
displayed. Each line of text stretches to the entire length
of the window
Inserts a line space before and after a paragraph
Attribute: a)align : Specifies the paragraph should be left
aligned, right aligned, justified or center aligned. By
default, it is left aligned.
Horizontal Rule, <HR>
The <HR> element causes the browser to
display a horizontal line (rule) in your
document.
Horizontal rules are used as a separator
between the content of an html page.
<HR> does not use a closing tag
Attributes of <HR> tag
Width: How much area the line will cover the
page.
Align: By default, it calculates the width from
the center, we can set it to left or right.
Size: Vertical size of the horizontal rule.
Color: We can set the color of the horizontal
rule.
Break TAG, <BR>
Line breaks allow you to decide where the text
will break on a line or continue to the end of the
window.
A <BR> is an empty Element, meaning that it
may contain attributes but it does not contain
content.
Character Formatting
It enhances the web page with Bold, Italics, and other
character formatting options.
Objectives:
Upon completing this section, we would be able to:
1. Change the color and size of text.
2. Use Common Character Formatting Elements.
3. Align the text.
4. Add special characters.
5. Use other character formatting elements.
Bold, Italic and other Character
Formatting Elements
<B> Bold </B> Displays text in bold .
<I> Italic </I> Displays text in italics.
<U> Underline </U> Displays text which is underlined
<S> Strikeout </S> Displays text which has the line on it.
<strong> welcome</strong> Browsers usually display this as bold.
<em> emphasis</em> > Browsers usually display this as italics.
<bdo dir=“rtl”> reverse the string</bdo>
<big> size is big</big>
<small> size is small</small>
<SUB> Displays text as subscript.
Eg:
<p> chemical name of water is H<sub>2</sub>O.</p>
Chemical name of water is H2O.
<SUP> Displays text as superscript.
Eg:
<p> My date of birth is 27<sup>th</sup> jan.</p>
My date of birth is 27th jan.
<CENTER></CENTER> Will center elements.
Some elements have attributes for alignment
(ALIGN) e.g. Headings, Paragraphs and
Horizontal Rules.
FONT TAG
It is used to set the font of the text.
Attributes:
FACE: It sets the type of the font.
SIZE : It sets the size of the text. We can also set the
relative value using the “+” or “-” sign.
COLOR: “#RRGGBB” , sets the color of the text within
the font tag.
Eg:
<font face="Courier New, Courier, monospace"
size="20px" color="#33FF00"> Text</font>
Special Tag: Marquee Tag
It is used to move the text on the web page.
Starting and ending tag is required.
Attributes:
Align: Alignment of the text according to the marquee
top, middle and bottom etc.
Behavior: Can be scroll by default, slide and alternate.
Bgcolor: Sets the background color for the marquee box.
Direction: Sets the movement direction-right ,left,up or
down.
Height: Specifies the height of the marquee box.
Loop: Specifies how many times a movement should
occur.
Width: The area to be covered horizontally on a web
page.
Scroll amount: Determines the speed of the movement
of text. Higher the value, more is the speed.
Scroll Delay: Sets the value to slow the movement of
text. Higher the value, slow is the movement.
Eg: <marquee behavior="scroll" bgcolor="#CC0000"
direction="down" height="100px" align="middle" loop= 2
scrollamount="20">welcome</marquee>
<html>
<head>
<title>
Lists in HTML PowerPoint
</title>
</head>
<body>
How to create lists
in HTML
</body>
</html>
Creating Lists
in HTML
• 3 types of lists
– Unordered list
• Bulleted items
– Ordered list
1. Numbered items
– Definition List
• a list of items, with a description of each item
Unordered Lists
in HTML
• The tag for a bulleted list is <ul> & </ul>
• Each item is surrounded with the open and close
<li> tag (li = list item)
• Bullets can be changed to squares or circles with the
optional code type=“square” or type=”circle” in the
<ul> tag.
– Code View -- Browser View
<ul >
<li>Milk</li> • Milk
<li>Eggs</li> • Eggs
</ul>
Ordered Lists
in HTML
• The tag for a numbered list is <ol> & </ol>
• Each item is surrounded with the open and close
<li> tag (li = list item)
• List items will be numbered
• Numbers can be changed to a, A, i, or I with the optional code
type=“a”, type=“A”, etc in the <ol> tag.
– Code View
<ol > -- Browser View
<li>George Washington</li> 1. George Washington
<li>John Adams</li> 2. Johns Adam
</ol>
Another way to define style types:
• <ol type =“i“> </ol>
Value for type attribute Description Examples
1 Arabic numerals 1,2,3,4,5
A Capital letters A,B,C,D,E
a Small Letters a, b, c, d, e
I Large Roman Numerals I,II,III,IV,V
i Small Roman Numerals i ,ii, iii, iv, v
Definition Lists
in HTML
• The tag for this list is <dl> & </dl>
• Each term is surrounded with the <dt> tag
(Definition Term) and each description is surrounded
with the <dd> tag (Definition Description)
-- Browser View
– Code View Electron
<dl> - carries a negative electric charge
Neutron
<dt>Electron</dt>
- carries no electric charge
<dd>- carries a negative electric charge</dd>
<dt>Neutron</dt>
<dd>- carries no electric charge</dd>
</dl>
Web pages can contain links that take you
directly to other pages and even 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.
HTML uses the <a> (anchor) tag to create a link.
It can point to any resource on the Web: an
HTML page, an image, a sound file, a movie,
etc.
The syntax of creating an anchor:
<a href="url">Text to be displayed</a>
The element “a” stands for "anchor". And the
attribute href is short for "hypertext reference",
which specifies where the link leads to - typically
an address on the internet or a file name.
Here is an example of what a link to
facebook.com could look like:
<a href="http://www.facebook.com/">Here
is a link to Facebook.com</a>
In the example the attribute href has the value
"http://www.facebook.com", which is the full
address of Facebook and is called a URL
(Uniform Resource Locator).
Remember to close the element with an </a>.
To make a link between web pages which are required for web
site creation, we do not need to spell out the entire address
(URL) for the document.
For example, if we made two pages (let us call them page1.htm
and page2.htm) and saved them in the same folder , we can
make a link from one page to the other by only typing the
name of the file in the link.
<a href="page2.htm">Click here to go to page 2</a>
If page 2 were placed in a subfolder (named
"subfolder"), the link could look like this:
<a href="subfolder/page2.htm">Click here to
go to page 2</a>
THANKS!!!!!!!
