Null

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
1
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:
– NETSCAPE NAVIGATOR
– MICROSOFT INTERNET EXPLORER
6
2
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
– 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
3
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
10
BASIC
HTML TAGS
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
11
<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 12
4
PARTS OF AN
HTML DOCUMENT
• FOLLOWING THE <html> TAG, THE
WEB PAGE IS DIVIDED INTO TWO
DISTINCT PARTS:
– HEAD
• <head> </head>
– BODY
• <body> </body>
13
<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
14
<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 15
5
A COMPLETE
WEB PAGE!
<html>
<head>
<title>A SAMPLE WEB PAGE</title>
</head>
<body>
MY NAME IS FAITH BRENNER.
</body>
</html>
VIEW WEB PAGE
16
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
17
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
18
6
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>
19
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
20
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">
21
7
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>
</bodyt>
</html> VIEW CHANGES
22
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
23
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
24
8

Null

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

Null

Uploaded by

Copyright:

Available Formats

HTML AN

You might also like