HTML AN INTRODUCTION BY FAITH BRENNER 1 OBJECTIVES

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 “Hyper. Text 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 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> </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> <title>A SAMPLE WEB PAGE</title> </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> <title>A SAMPLE WEB PAGE</title> </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> <title>A SAMPLE WEB PAGE</title> </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