AN INTRODUCTION BY FAITH BRENNER

AN INTRODUCTION BY FAITH BRENNER
HTML AN INTRODUCTION BY FAITH BRENNER

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

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”

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

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

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

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>

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

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)

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

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

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

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

<title></title>
BASIC HTML TAGS <html> <head> <title></title> </head> <body> </body> </html>

<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

PARTS OF AN HTML DOCUMENT
FOLLOWING THE <html> TAG, THE WEB PAGE IS DIVIDED INTO TWO DISTINCT PARTS: HEAD <head> </head> BODY <body> </body>

<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

<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

A COMPLETE WEB PAGE! <html> <head>
<title>A SAMPLE WEB PAGE</title> </head> <body> MY NAME IS FAITH BRENNER. </body> </html> VIEW WEB PAGE

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

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

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>

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

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

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><img src="barpencil.gif" width="670" height="16” border="0" alt="PENCIL“ /> </center> </body> </html> VIEW CHANGES

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=” </a> VIEW WEB PAGE

HTML BASICS – SUMMARY VIEW WEB PAGE
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

AN INTRODUCTION BY FAITH BRENNER

Similar presentations

Presentation on theme: "AN INTRODUCTION BY FAITH BRENNER"— Presentation transcript:

Similar presentations

About project

Feedback

Log in

Auth with social network:

AN INTRODUCTION BY FAITH BRENNER

Similar presentations

Presentation on theme: "AN INTRODUCTION BY FAITH BRENNER"— Presentation transcript:

Similar presentations

About project

Feedback