Scribd
Upload
8 views

HTML Introduction

Uploaded by

inourall00
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
8 views

HTML Introduction

Uploaded by

inourall00
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 22

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

You might also like