HTML - Introduction

>> 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>

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

HTML Structure
• 5 Important HTML Tags you should know
before coding an HTML document
– DOCTYPE
– HTML
– HEAD
– TITLE
– BODY

Empty HTML Document
<!DOCTYPE html>
<html>
<head>
<title>
</title>
</head>
<body>
</body>
</html>

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>

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>

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

BODY Tag
• Contains information that will be

displayed on the web
– Text, Images, Videos, Ads, Links etc.

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”

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 
EXAMPLE


TEXT-BASED ELEMENTS
IN HTML

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)

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

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
TRY NOW • Address
• Telephone
• Email Address

Italics Tag
– To italicize text, thereby placing emphasis on

it
– Enclosed between the <em> and </em> tags
• For each of the <p> added before

TRY NOW • Italicize the content of each of them

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

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
• The first item in the list is x1 (subscript)

• 1 Km= 1 x 103 m (superscript)
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

HTML Elements
Paired Elements Void Elements
• Has both starting & ending tags • No End Tag

• Example • No Content
• Header Tags • Self-Closes
• Paragraph Tags

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

HTML - Introduction

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML - Introduction

Uploaded by

Copyright:

Available Formats

>> Introduction to HTML: Tags

• Hyper - is the opposite of linear

– Markup language that specifies the structure and content

Fundamentals of Web Programming 2

• Determine how the page is handled

• Also called “TAGS”

• Tags nearly always come in pairs:

Fundamentals of Web Programming 3

Fundamentals of Web Programming 4

Fundamentals of Web Programming 5

Fundamentals of Web Programming 6

HTML ver. 4.1

Fundamentals of Web Programming 7

Fundamentals of Web Programming 8

• Also includes links to other scripting languages

• meta tags (like keywords used by search engines)

• Includes the <title> tag

Fundamentals of Web Programming 9

• Contains information that will be

Fundamentals of Web Programming 10

• Create a new html file and call it

Fundamentals of Web Programming 11

HTML comments start with

Fundamentals of Web Programming 12

Fundamentals of Web Programming 13

• Create a <h3> sized heading in the body

Fundamentals of Web Programming 14

Enclosed between the <p> and </p> tags

• Create three paragraphs using <p> tags

Fundamentals of Web Programming 15

– To make text bold and place a strong

• For each of the <p> added before

Fundamentals of Web Programming 16

– To italicize text, thereby placing emphasis on

• For each of the <p> added before

Fundamentals of Web Programming 17

• Most browsers render the del element as strike-

Fundamentals of Web Programming 18

• To superscript text (i.e., raise text above the

• The first item in the list is x1 (subscript)

• Most browsers render a horizontal rule,

Fundamentals of Web Programming 20

Paired Elements Void Elements

• Has both starting & ending tags • No End Tag

Fundamentals of Web Programming 21

You might also like