>> Introduction to HTML: Tags
HTML - Definition
• Hyper - is the opposite of linear
• Text – words / sentences / paragraphs
• Mark-up – Marking the text
• Language – It is a language
– Markup language that specifies the structure and content
of documents that are displayed in web browsers
– We’ll create HTML documents by typing HTML markup text
in a text editor (such as Notepad, TextEdit, vi, emacs) and
saving it with the .html or .htm filename extension.
Fundamentals of Web Programming 2
How to write HTML?
• An HTML document is comprised of one word commands
enclosed between the less than (<) and greater than (>)
sign
• Determine how the page is handled
• Also called “TAGS”
• Tags nearly always come in pairs:
– an opening tag <html>
– a closing tag </html>
Fundamentals of Web Programming 3
HTML TAGS
element = <opening tag> + content + <closing tag>
Tag Structure
Element
End Tag
Start Tag Content
<h2 style=“background-color:#ff0000;” >My First HTML Class </h2>
Attribute
Fundamentals of Web Programming 4
HTML Elements
Paired Elements Void Elements
• Has both starting & ending tags • No End Tag
• Example • No Content
• Header Tags • Self-Closes
• Paragraph Tags
Fundamentals of Web Programming 5
HTML Structure
• 5 Important HTML Tags you should know
before coding an HTML document
– DOCTYPE
– HTML
– HEAD
– TITLE
– BODY
Fundamentals of Web Programming 6
Empty HTML Document
<!DOCTYPE html>
<html>
<head>
<title>
</title>
</head>
<body>
</body>
</html>
Fundamentals of Web Programming 7
DOCTYPE Tag
• DOCument TYPE
• Should be placed at the start of each web page
• Shows which standard the page complies with
HTML ver. 4.1
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
HTML ver. 5
<!DOCTYPE html>
Fundamentals of Web Programming 8
HTML Tag
• Root Element / Tag
• Contains all tags that will be used in an HTML document
• Necessary
• Attribute “lang”
– define the language of the content within the document
<html lang=“en”>
</html>
Fundamentals of Web Programming 9
HEAD Tag
• Provide information about the author, title and description of the
page
• Also includes links to other scripting languages such as CSS and
JavaScript
• meta tags (like keywords used by search engines)
• Includes the <title> tag
– Includes a descriptive title of your web page
Fundamentals of Web Programming 10
BODY Tag
• Contains information that will be
displayed on the web
– Text, Images, Videos, Ads, Links etc.
Fundamentals of Web Programming 11
TRY NOW
• Create a new html file and call it
“mypage.html”
• Add the five required tags – doctype,
html, head, title and body
• Add the title text as “My Personal Page”
Fundamentals of Web Programming 12
Comments in HTML
• Content wrapped within a comment will not be
displayed on the web page
• Comments help keep our files organized
• Comments become especially useful when there are
multiple people working on the same files
HTML comments start with <!-- and end with -->
EXAMPLE
<!-- This is a comment in HTML -->
Fundamentals of Web Programming 13
TEXT-BASED ELEMENTS
IN HTML
Fundamentals of Web Programming 14
Heading Tags
<h1>the biggest heading</h1>
<h2>the second biggest heading</h2>
………
………
………
<h6>the smallest heading</h6>
• Create a <h3> sized heading in the body
TRY NOW • Make the heading as “My Contact Info
(Just don't forget to close it)
Fundamentals of Web Programming 15
Paragraph Tag
Enclosed between the <p> and </p> tags
• Create three paragraphs using <p> tags
• Fill them with content
TRY NOW • Address
• Telephone
• Email Address
Fundamentals of Web Programming 16
Bold Tag
– To make text bold and place a strong
importance on it
– Enclosed between the <strong> and
</strong> tags
• For each of the <p> added before
• Bold the titles
• Address
TRY NOW • Telephone
• Email Address
Fundamentals of Web Programming 17
Italics Tag
– To italicize text, thereby placing emphasis on
it
– Enclosed between the <em> and </em> tags
TRY NOW
• For each of the <p> added before
• Italicize the content of each of them
Fundamentals of Web Programming 18
del Tag
• Most browsers render the del element as strike-
through text. With this format users can
indicate document revisions.
• To strike through a text enclosed between the
<del> and </del> tags
Fundamentals of Web Programming 19
Sup and sub Tags
• To superscript text (i.e., raise text above the
baseline and in a decreased font size) use the
sup tag
• To subscript text (i.e., lower text below the
baseline and in a decreased font size), use the
sub tag
• (subscript)
• (superscript)
Fundamentals of Web Programming 20
Horizontal rule
• Most browsers render a horizontal rule,
indicated by the <hr/> tag, as a
horizontal line
• The hr element also inserts a line break
above and below the horizontal line
Fundamentals of Web Programming 21
Summary
• HTML is used to give websites structure.
• We open HTML files using a browser, and the
browser renders(shows us) the file.
• HTML files have a <head> and a<body> (just like you!)
• In the head, we have the <title>tags, and we use these to
specify the webpage's name.
• How to make headings and paragraphs.
• How to bold and italicize text on the page
22
