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: <br /> 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 <title></title> <body> </body> 11 THE 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 TAG, THE WEB PAGE IS DIVIDED INTO TWO DISTINCT PARTS: HEAD BODY <body> </body> 13 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! <title>a SAMPLE WEB PAGE</title> <body> MY NAME IS FAITH BRENNER. </body> 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: <b> </b> MAKES TEXT THEY SURROUND BOLD <i> </i> ITALICIZES TEXT <u> </u> UNDERLINES TEXT <center> </center> CENTERS THE TEXT ON THE PAGE 17 WEB PAGE TEXT FORMATTED <title>a SAMPLE WEB PAGE</title> <body> <b>my NAME IS <i><u>faith</u> BRENNER.</i></b> </body> 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: <font></font> TAG ATTRIBUTES CAN BE USED TO SPECIFY THE SIZE AND COLOR OF THE TEXT <font size= 5 color= green > </font> <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 <title>a SAMPLE WEB PAGE</title> <body background="bgembflag.gif" text="green"> <center><b><i>my NAME IS <font size="5" color= RED > <u>faith</u> </font> BRENNER.</i></b></center> </body> 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 <title>a SAMPLE WEB PAGE</title> <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><br /> <center><b><i>my NAME IS <font size="5" color="red"> <u>faith</u></font>brenner.</i></b> </center><br /> <center><img src="barpencil.gif" width="670" height="16 border="0" alt="pencil"> </center> </bodyt> 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