BY Faith Brenner

HTML AN
INTRODUCTION
BY
FAITH
BRENNER
1
OBJECTIVES
• BY THE END OF THIS LESSON YOU WILL:
– UNDERSTAND HTML BASICS AND WHAT YOU
CAN DO WITH IT
– BE ABLE TO USE BASIC HTML TAGS
– BE ABLE TO USE SOME BASIC FORMATTING
AND SPECIALTY TAGS TO IMPROVE THE
LOOKS OF A WEB PAGE
– BE ABLE TO LINK PAGES TOGETHER USING
HYPERLINKS
– DEVELOP A SIMPLE WEB PAGE
2
WHAT IS HTML?
• Stands for “HyperText Markup Language”
– HTML IS THE LANGUAGE USED TO WRITE WEB
PAGES
• IT ALLOWS YOU TO FORMAT PLAIN TEXT TO MAKE
IT MORE VISUALLY APPEALING TO THOSE WHO ARE
VIEWING YOUR WEB PAGE
– THE “MARKUP” BASICALLY MEANS TO APPLY
FORMATTING ELEMENTS TO YOUR TEXT
• THIS MARKUP IS ACCOMPLISHED THROUGH THE
USE OF HTML “TAGS”
3
HTML & Browsers
• A WEB BROWSER IS REQUIRED TO VIEW
WEB PAGES. IT IS SOFTWARE THAT:
– RECEIVES INFORMATION OVER THE
INTERNET
– INTERPRETS THE HTML SOURCE CODE
– DISPLAYS THE RESULTS TO THE VIEWER
• A WEB BROWSER ALLOWS THE USER TO
VIEW THE WEB PAGE WITH THE
FORMATTING DESCRIBED BY THE HTML
TAGS
4
WHAT ARE
HTML TAGS?
• HTML TAGS SURROUND TEXT TO:
– APPLY FORMATTING TO TEXT
• BOLD, ITALIC, FONT SIZE, ETC.
– PROVIDE SPECIAL INSTRUCTIONS
• LINK TEXT OR GRAPHICS TO OTHER WEB
PAGES AND ALLOW THE USER TO JUMP
TO AN ASSOCIATED TOPIC OUT ON THE
INTERNET
• DISPLAY GRAPHICS
5
HOW DO I
USE HTML?
• SOFTWARE REQUIRED
– A SIMPLE WORD PROCESSOR FOR
DEVELOPING THE SOURCE CODE
• NOTEPAD WORKS WELL
– A WEB BROWSER FOR VIEWING THE
WEB PAGE
• THE MOST COMMON BROWSERS ARE:
– MICROSOFT INTERNET EXPLORER
– MOZILLA FIREFOX
– NETSCAPE NAVIGATOR
6
WHAT DO TAGS
LOOK LIKE?
• BASIC HTML TAGS CONSIST OF:
– A LEFT ANGLE BRACKET (<)
– A TAG NAME
– A RIGHT ANGLE BRACKET (>)
• TAGS ARE USUALLY PAIRED TO
START AND END THE TAG
INSTRUCTION.
– <tag name> TEXT </tag name>
7
WHAT DO TAGS
LOOK LIKE?
• FOR PAIRED HTML TAGS, THE END TAG LOOKS
JUST LIKE START TAG EXCEPT A SLASH (/)
PRECEDES THE TAG NAME
– START TAG EXAMPLE:
• <body>
– END TAG EXAMPLE:
• </body>
• MOST TAGS ARE PAIRED BUT THERE ARE A
FEW “SINGLETS” – TAGS WITHOUT A END TAG
(singlets are self-closing tags that contain a space and
forward slash before the closing bracket)
– EXAMPLE: - INSERTS A LINE BREAK
8
WHAT DO TAGS
LOOK LIKE?
• SOME TAGS INCLUDE AN “ATTRIBUTE”,
WHICH IS ADDITIONAL INFORMATION
INCLUDED INSIDE THE START TAG
– EXAMPLE:
• <body bgcolor=“BLUE” text=“BLACK”>
– THIS TAG WOULD:
» FORMAT THE BACKGROUND COLOR OF THE
WEB PAGE TO BLUE
» MAKE ALL TEXT ON THE WEB PAGE BLACK AS
THE DEFAULT FOR THE PAGE (THE FONT
COLOR TAGS CAN OVERRIDE THE DEFAULT
TEXT COLOR FORMATTED BY THE BODY TAG)
9
XHTML
• IN ORDER TO BY COMPILIANT WITH THE
NEWEST STANDARDS, THE VERSION OF
HTML TO USE IS CALLED ‘XHTML’ –
EXTENSIBLE HYPERTEXT MARKUP
LANGUAGE
• XHTML FOLLOWS STRICTER SYNTAX
THAN PREVIOUS VERSIONS OF HTML –
THESE SYNTAX RULES ARE THE SAME
FOR EVERY XML DOCUMENT
(HTML/XHTML DOCUMENTS ARE
VERSIONS OF XML DOCUMENTS).
10
XHTML (XML)
SYNTAX
• THE SYNTAX FOR HTML THAT FOLLOWS
THE XHTML (XML) STANDARDS :
– ALL TAG NAMES AND ATTRIBUTE NAMES
MUST BE LOWER CASE
– ATTRIBUTES ARE DEFINED BY
ATTRIBUTE/VALUE PAIRS, WITH THE
VALUES ENCLOSED IN QUOTES FOLLOWING
THE EQUAL SIGN
• TEXT
11
XHTML (XML)
SYNTAX
– MOST TAGS ARE PAIRED (OPENING AND CLOSING
TAGS) AND CONTAIN CONTENT
• 
– SINGLET TAGS (all tags that do not contain content) MUST
CONTAIN A SPACE AND A FORWARD SLASH
IMMEDIATELY BEFORE THE CLOSING ANGLE BRACKET
• 
– WHEN NESTING TAGS, THE “FIRST IN, LAST OUT” (FILO)
RULE APPLIES
• TEXT
12
BASIC
HTML TAGS
• IN ORDER TO CREATE A WEB PAGE
THERE ARE SEVERAL REQUIRED
TAGS CALLED “BASIC TAGS”
• BASIC TAGS PROVIDE THE

STRUCTURE OR FRAMEWORK FOR
THE ENTIRE WEB PAGE
13
BASIC
HTML TAGS
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
14
<html></html>
• THE <html></html> ARE THE TAGS
THAT TELLS YOUR BROWSER THAT
THE FILE CONTAINS HTML CODE.
– THE FILE EXTENSION FOR AN HTML FILE
MUST BE .HTML OR .HTM AND ALSO
INDICATES THAT IT IS AN HTML FILE
• THE START TAG IS THE FIRST TAG AND
THE END TAG IS THE LAST TAG ON A
WEB PAGE
15
PARTS OF AN
HTML DOCUMENT
• FOLLOWING THE <html> TAG,
THE WEB PAGE IS DIVIDED INTO
TWO DISTINCT PARTS:
– HEAD
• <head> </head>
– BODY
• <body> </body>
16
<head> </head>
• THE HEAD CONTAINS:
– TITLE
<title></title>
– DISPLAYS THE TITLE OF THE PAGE IN THE
BROWSER TITLE BAR
– METATAGS
<meta name=“KEYWORD”
contents=“keywords” >
– USED FOR INCLUDING INFORMATION ABOUT
THE PAGE FOR SEARCH ENGINES 17
<body> </body>
• THE BODY IS THE LARGEST PART
OF AN HTML DOCUMENT
• IT IS THE VISIBLE PART OF THE
DOCUMENT
– THE PART THAT IS DISPLAYED TO THE
VIEWER OF THE WEB PAGE
– THE REST OF THE HTML TAGS ARE
PLACED IN THE BODY OF THE WEB
PAGE 18
A COMPLETE
WEB PAGE!
<html>
<head>
<title>A SAMPLE WEB PAGE</title>
</head>
<body>
MY NAME IS FAITH BRENNER.
</body>
</html>
VIEW WEB PAGE
19
FORMATTING
TEXT
• THERE ARE MANY TAGS THAT “FORMAT” TEXT
– MAKE THE TEXT LOOK MORE INTERESTING
• SOME EXAMPLES OF TAGS THAT FORMAT
TEXT:
– 
• MAKES TEXT THEY SURROUND BOLD
– 
• ITALICIZES TEXT
– 
• UNDERLINES TEXT
– <center> </center>
• CENTERS THE TEXT ON THE PAGE
20
WEB PAGE - TEXT
FORMATTED
<html>
<head>
</head>
<body>
MY NAME IS FAITH
BRENNER.
</body>
</html>
NOTE HOW THE FORMATTING TAGS SURROUND THE TEXT
TO BE FORMATTED. THE END TAG STOPS THE FORMAT.
VIEW CHANGES 21
TAG ATTRIBUTES
• MANY OF THE HTML TAGS HAVE ATTRIBUTES
THAT HELP DEFINE SPECIFIC ASPECTS OF THE
TAG
– EXAMPLES:
• TAG ATTRIBUTES CAN BE USED TO
SPECIFY THE SIZE AND COLOR OF THE TEXT
– 
• <body></body> TAG ATTRIBUTES CAN BE USED TO SPECIFY
THE TYPE OF BACKGROUND AND THE DEFAULT COLOR OF
THE TEXT
– <body background="bgembflag.gif“ text=“GREEN”>
</body>
22
WEB PAGE – USE OF
TAG ATTRIBUTES
<html>
<head>
</head>
<body background="bgembflag.gif" text="GREEN">
<center>MY NAME IS FAITH 
BRENNER.</center>
</body>
</html>
VIEW CHANGES
23
GRAPHICS
• THE LAST EXAMPLE USED A GRAPHIC FOR THE
BACKGROUND, BUT GRAPHICS CAN ALSO BE
PLACE ON THE PAGE ALONG SIDE OF THE TEXT
• IN ORDER TO PLACE A GRAPHIC ON A WEB PAGE,
THE IMAGE TAG IS USED
– <img> - THIS TAG IS A SINGLET; IT DOES NOT HAVE AN
END TAG
– EXAMPLE:
• <img src="books.jpg" width="100" height="86"
border="0" alt="BOOKS">
24
WEB PAGE – USE OF
GRAPHICS
<html>
<head>
</head>
<body background="bgpastel.gif" text="GREEN">
<center>
<img src ="books.jpg" width="100" height="86" border="0" alt="BOOKS“ />
<img src="bookpages.gif" width="78" height="62" border="0" alt=“BOOK“ />
</center> 
<center>MY NAME IS 
FAITHBRENNER.
</center> 
<center><img src="barpencil.gif" width="670" height="16” border="0"
alt="PENCIL“ />
</center>
</body>
</html> VIEW CHANGES
25
LINKING YOUR
WEB PAGE
• THE POWER OF HTML CAN BEST BE DEMONSTRATED BY
ITS ABILITY TO LINK TEXT OR IMAGES TO ANOTHER
DOCUMENT ON THE INTERNET
• YOU CAN HAVE YOUR USERS “JUMP” FROM YOUR PAGE
TO ANOTHER PAGE ON THE INTERNET BY USING A
HYPERLINK
• HYPERLINK TAGS ARE ANCHOR TAGS:
– <a href=”HTTP://WWW.RICHLAND.EDU”>RCC </a>
VIEW WEB PAGE
26
HTML BASICS –
SUMMARY
• BY USING THE BASIC HTML TAGS, FORMATTING TAGS WITH
ATTRIBUTES, AND SPECIALTY TAGS, YOU CAN DEVELOP A SIMPLE
WEB PAGE USING ONLY A SIMPLE WORD PROCESSOR AND A WEB
BROWSER
• WHEN YOU UNDERSTAND HOW HTML TAGS AND THEIR ATTRIBUTES
ARE USED, YOU CAN CREATE MORE COMPLEX WEB PAGES OR
EASILY MODIFY AND UPDATE EXISTING WEB PAGES.
• YOU CAN LINK YOUR PAGE TO OTHER PAGES ON THE INTERNET TO
ENHANCE THE RESOURCES AVAILABLE
• FUTURE ADVANCED TOPICS: IN ADDITION TO THOSE ELEMENTS
DEMONSTRATED, YOU CAN ALSO CREATE TABLES, LISTS, ONLINE
FORMS, AND PRESENT YOUR PAGE IN FRAMES – ALL WITH THE USE
OF HTML TAGS
VIEW WEB PAGE
27

BY Faith Brenner

Uploaded by

Document Information

Original Description:

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

BY Faith Brenner

Uploaded by

Copyright:

Available Formats

HTML AN

• BASIC TAGS PROVIDE THE

VIEW WEB PAGE

You might also like