creating a web page - portland community...
TRANSCRIPT
Creating A Web PageCreating A Web Page
Computer Concepts I and IIComputer Concepts I and IISue NorrisSue Norris
AgendaAgenda
What is HTMLWhat is HTMLHTML and XHTML TagsHTML and XHTML TagsRequired HTML and XHTML TagsRequired HTML and XHTML TagsUsing Notepad to Create a Simple Using Notepad to Create a Simple Web PageWeb PageViewing Your Web Page in a BrowserViewing Your Web Page in a BrowserSubmitting Your ProjectSubmitting Your Project
Slide MenuSlide MenuHTML HTML XHTMLXHTML Required HTML TagsRequired HTML Tags
XHTML RequirementsXHTML Requirements Creating a Web Page Creating a Web Page with Notepadwith Notepad
Formatting TagsFormatting Tags
Paragraph TagParagraph Tag Page Background Page Background ColorColor
Anchor Tag for LinksAnchor Tag for Links
ListsLists Header TagsHeader Tags Further HTML Further HTML TrainingTraining
XHTML AdditionXHTML Addition DOCTYPE StatementDOCTYPE Statement Further XHTML Further XHTML TrainingTraining
XHTML ValidationXHTML Validation Viewing HTML SourceViewing HTML Source Transfer Files to Web Transfer Files to Web ServerServer
TablesTables
HHyper yper TText ext MMarkup arkup LLanguageanguageEvery Web Page is Formatted with HTML Every Web Page is Formatted with HTML markup tagsmarkup tagsHTML Markup tags Tell a Browser How to HTML Markup tags Tell a Browser How to Display a Web PageDisplay a Web PageA Web Page ALWAYS has a File Extension A Web Page ALWAYS has a File Extension of htm or htmlof htm or htmlThe Browser (The Browser (ieie Internet Explorer, Internet Explorer, Netscape, Netscape, FirefoxFirefox) Reads the HTML tags ) Reads the HTML tags Sequentially From Top to Bottom and Sequentially From Top to Bottom and Formats the Page Based On What the Formats the Page Based On What the Tags SayTags Say
XHTMLXHTML
EExxtensible tensible HHyperyperTTextext MMarkup arkup LLanguageanguageAlmost Identical to HTML 4.01Almost Identical to HTML 4.01Stricter and Cleaner Version of HTMLStricter and Cleaner Version of HTML
What Do What Do HTMLHTML Tags Look Tags Look Like?Like?
HTML Tags Look Like:HTML Tags Look Like:<p> </p><p> </p> paragraph tagparagraph tag<b> </b><b> </b> bold tagbold tag<<ulul> </> </ulul>> unordered list tagunordered list tag<<lili> </> </lili>> list item taglist item tagWhat is Common About HTML Tags?What is Common About HTML Tags?•• Starting and Ending TagsStarting and Ending Tags•• Data Between the Tags will be Formatted Data Between the Tags will be Formatted
According to the TagAccording to the Tag•• The Starting Tag Starts the Type of Format; The Starting Tag Starts the Type of Format;
the Ending Tag Stops the Type of Formatthe Ending Tag Stops the Type of Format
Required HTML TagsRequired HTML TagsThe Following HTML Tags are Required/Recommended for The Following HTML Tags are Required/Recommended for
Every We PagesEvery We Pages
<html><html> Every Web Page Starts with the Every Web Page Starts with the <html> tag<html> tag
<head><head> The Starting <head> tag always The Starting <head> tag always follows the <html> tagfollows the <html> tag
<title>My First Web Page</title><title>My First Web Page</title> The title tags encompass the title The title tags encompass the title of your pageof your page
</head></head> The Ending </head> tag The Ending </head> tag always follows the ending always follows the ending </title> tag</title> tag
<body> <body> Starting body tagStarting body tag
Everything that appears on a Everything that appears on a web page goes between the web page goes between the <body> and </body> tags<body> and </body> tags
</body></body> Ending body tagEnding body tag
</html></html> Ends every web pageEnds every web page
XHTML Additional RequirementsXHTML Additional RequirementsAll HTML Tags and Tag Elements Must be All HTML Tags and Tag Elements Must be in lowerin lower--casecaseEvery HTML Tag Must have a Starting Tag Every HTML Tag Must have a Starting Tag AND an Ending TagAND an Ending TagHTML Tags Must be Properly NestedHTML Tags Must be Properly NestedHTML Tag Attributes Must be in QuotesHTML Tag Attributes Must be in QuotesThe Id attribute replaces the Name The Id attribute replaces the Name AttributeAttributeThe DOCTYPE Declaration Should be the The DOCTYPE Declaration Should be the First Line in a XHTML DocumentFirst Line in a XHTML Document
Slide Menu
Starting a Simple Web PageStarting a Simple Web Page
Open NotepadOpen NotepadClick Start Button, Click on All Programs, Click Start Button, Click on All Programs,
Click on Accessories, Click on NotepadClick on Accessories, Click on Notepad
Slide Menu
Notepad OpensNotepad Opens
Save Your Web PageSave Your Web Page•• Click File on the Menu Bar, Click Save, Click File on the Menu Bar, Click Save, Choose Choose
DesktopDesktop for Save in, type in Example1.htm in for Save in, type in Example1.htm in File Name and Click SaveFile Name and Click Save
•• NOTE: We are Saving to the Desktop to Make NOTE: We are Saving to the Desktop to Make This Easy; You Would Normally Save to a This Easy; You Would Normally Save to a Folder of ChoiceFolder of Choice
Slide Menu
Type the Following HTML Tags into your Example1.htm Type the Following HTML Tags into your Example1.htm document. document.
Type in the Tags Exactly as You See Them AboveType in the Tags Exactly as You See Them AboveTo Comply with To Comply with XHTMLXHTML coding standards:coding standards:•• ALL ALL xHTMLxHTML tags MUST be in lower case tags MUST be in lower case •• ALL tags MUST have a starting tag and an ending tagALL tags MUST have a starting tag and an ending tag
Save Your Web PageSave Your Web PageClick File on the Menu Bar, Click SaveClick File on the Menu Bar, Click Save
Minimize the Notepad Window; We Will Come Back to ItMinimize the Notepad Window; We Will Come Back to ItSlide Menu
Go to your DesktopGo to your Desktop•• You Should See the Example1.htm ICON on your You Should See the Example1.htm ICON on your
Desktop, Similar to that BelowDesktop, Similar to that Below•• If you DonIf you Don’’t, Go Back to Slide 6 and Start Overt, Go Back to Slide 6 and Start Over
DoubleDouble--Click on the Example1.htm ICONClick on the Example1.htm ICON
Slide Menu
View Your Lovely WorkView Your Lovely WorkYour Browser Window Should Open with Your Browser Window Should Open with Your Web Page Loaded in It.Your Web Page Loaded in It.It if DoesnIt if Doesn’’t, Go Back to Slide 7 and Make t, Go Back to Slide 7 and Make Sure You Saved Your Page CorrectlySure You Saved Your Page Correctly
Slide Menu
Add Formatting to TextAdd Formatting to TextMaximize Your Notepad WindowMaximize Your Notepad WindowChange Your HTML Code To Add the Bold Tag or Other Text Change Your HTML Code To Add the Bold Tag or Other Text Formatting Tag, and So It Looks Similar to the FollowingFormatting Tag, and So It Looks Similar to the Following
NOTE: The Yellow Background is Only to Highlight the NOTE: The Yellow Background is Only to Highlight the Inserted TagInserted TagWhen Done, Save Your Web Page and Minimize the When Done, Save Your Web Page and Minimize the Notepad WindowNotepad Window Slide Menu
Go to your DesktopGo to your DesktopDoubleDouble--Click on the Example1.html Click on the Example1.html ICONICON
Slide Menu
View Your WorkView Your WorkIf You Did Everything Correctly, Your Web Page If You Did Everything Correctly, Your Web Page Should Look Similar to the Following and Should Look Similar to the Following and My My FirstFirst should be in should be in BoldBold::
Slide Menu
Continuing With Your Web PageContinuing With Your Web PageCreate Two Paragraphs with the Paragraph TagCreate Two Paragraphs with the Paragraph Tag•• Edit Your Example1.htm file in Notepad to add the two Edit Your Example1.htm file in Notepad to add the two
Paragraph Tags that you See Below. Paragraph Tags that you See Below. •• Also add the <u></u> and <i></i> tags for Also add the <u></u> and <i></i> tags for UnderlineUnderline and and
ItalicsItalics formatting.formatting.•• XHTML RULE: Tags MUST BE Properly Nested. If formatting XHTML RULE: Tags MUST BE Properly Nested. If formatting
Starts with <i><u>, the Order of the Ending Tags Must Be: Starts with <i><u>, the Order of the Ending Tags Must Be: </u></i>.</u></i>.
•• Save Your File and Minimize the Notepad WindowSave Your File and Minimize the Notepad Window
Slide Menu
View Your PageView Your Page
Go to Your Desktop and DoubleGo to Your Desktop and Double--Click the Click the Example1.htm ICON. Your Webpage Should Look Example1.htm ICON. Your Webpage Should Look Similar to That Shown in the Image Below.Similar to That Shown in the Image Below.If it DoesnIf it Doesn’’t Go Back to Slide 14 and Make t Go Back to Slide 14 and Make CorrectionsCorrections
Slide Menu
Add a Background ColorAdd a Background ColorA Webpage Background Color is Added with the A Webpage Background Color is Added with the bgcolorbgcolor parameter parameter of the Body Tagof the Body TagColors are Entered as 6 character hexadecimal numbersColors are Entered as 6 character hexadecimal numbersCode Must Start with # and be enclosed in Code Must Start with # and be enclosed in “”“”Pick a Color and Code From the Color Chart in the Creating Web Pick a Color and Code From the Color Chart in the Creating Web Pages Webpage and Modify Your Example1.htm pagePages Webpage and Modify Your Example1.htm page’’s Body Tag s Body Tag as Belowas BelowSave Your File and Minimize Your Notepad WindowSave Your File and Minimize Your Notepad Window
Slide Menu
View Your Web PageView Your Web PageGo to Your Desktop and DoubleGo to Your Desktop and Double--Click the Click the Example1.htm ICON. Your Webpage Example1.htm ICON. Your Webpage Should Look Similar to That Shown in the Should Look Similar to That Shown in the Image Below.Image Below.If it DoesnIf it Doesn’’t Go Back to Slide 16 and Make t Go Back to Slide 16 and Make CorrectionsCorrections
Slide Menu
Add a LinkAdd a Link
Links Are Created with the Anchor Tag: <a></a>Links Are Created with the Anchor Tag: <a></a>A Link to the Microsoft web site would look like: A Link to the Microsoft web site would look like: <a href=<a href=““http://www.microsoft.comhttp://www.microsoft.com//””>>Click hereClick here</a> </a> to go to the Microsoft Site.to go to the Microsoft Site.•• This Represents a Link to an External Web SiteThis Represents a Link to an External Web Site•• The Information Between the The Information Between the ““ ”” s is the Address of the Linked s is the Address of the Linked
to Pageto Page•• The Information in The Information in YellowYellow and Between the > and </a> is and Between the > and </a> is
What Appears on the Web Page for the User to ClickWhat Appears on the Web Page for the User to ClickA Link to Another Page Within the Same Web Site Might A Link to Another Page Within the Same Web Site Might Look Like:Look Like:<a href=<a href=““computers.htmcomputers.htm””>>Computers PageComputers Page</a></a>•• Name of Page is Name of Page is computers.htmcomputers.htm•• No Path is Specified if page is within the same folder as callinNo Path is Specified if page is within the same folder as calling g
Web PageWeb Page•• Computers Page is What Will Display on Calling Page for User Computers Page is What Will Display on Calling Page for User
to Clickto Click
Slide Menu
Try ItTry ItMaximize Your Notepad Window with Maximize Your Notepad Window with Example1.htm Open in ItExample1.htm Open in ItEdit your HTML Code So That It Looks as Pictured Edit your HTML Code So That It Looks as Pictured Below.Below.Save Your File and Minimize the Notepad WindowSave Your File and Minimize the Notepad Window
Slide Menu
View Your Web PageView Your Web PageGo to Your Desktop and DoubleGo to Your Desktop and Double--Click the Example1.htm Click the Example1.htm ICON. Your Webpage Should Look Similar to That Shown in ICON. Your Webpage Should Look Similar to That Shown in the Image Below.the Image Below.Try Your Link. Does It Go to the Microsoft Site?Try Your Link. Does It Go to the Microsoft Site?If it DoesnIf it Doesn’’t Go Back to Slide 18, Make Corrections, and Try t Go Back to Slide 18, Make Corrections, and Try AgainAgain
Slide Menu
Creating A ListCreating A ListOrdered Lists (numbered) are Created with the Ordered Lists (numbered) are Created with the OL and LI tags OL and LI tags •• Example of Two Item Unordered ListExample of Two Item Unordered List
<p>Rivers</p><p>Rivers</p><<ulul>><<lili>Mississippi</>Mississippi</lili>><<lili>Missouri</>Missouri</lili>></</ulul>>
Unordered Lists (bulleted) are Created with the Unordered Lists (bulleted) are Created with the UL and LI tagsUL and LI tags•• Example of Two Item Ordered ListExample of Two Item Ordered List
<p>Rivers</p><p>Rivers</p><<olol>><<lili>Mississippi</>Mississippi</lili>><<lili>Missouri</>Missouri</lili>></</olol>>
Slide Menu
Try ItTry ItMaximize Your Example1.htm Notepad Window and Edit Your Maximize Your Example1.htm Notepad Window and Edit Your HTML Source Code so That it Looks as Below.HTML Source Code so That it Looks as Below.Save Your File and Minimize Your Notepad WindowSave Your File and Minimize Your Notepad Window
Slide Menu
View Your PageView Your PageGo to Your Desktop Go to Your Desktop and Doubleand Double--Click Click the Example1.htm the Example1.htm ICON. Your ICON. Your Webpage Should Webpage Should Look Similar to Look Similar to That Shown in the That Shown in the Image Below.Image Below.Do your Lists Look Do your Lists Look Similar?Similar?If They DonIf They Don’’t Go t Go Back to Slide 22, Back to Slide 22, Make Corrections, Make Corrections, and Try Againand Try Again
Slide Menu
Adding a Header TagAdding a Header TagHeader Tags are Used to Emphasize Header Tags are Used to Emphasize Web Page Sections and Subsections Web Page Sections and Subsections in an Outline Fashionin an Outline FashionHeader Tags Range From H1 to H6 Header Tags Range From H1 to H6 with H1 Being the Largest and H6 with H1 Being the Largest and H6 the Smallestthe SmallestExamples:Examples:
<h1>Main Section</h1><h1>Main Section</h1><h2>Sub<h2>Sub--section</h2>section</h2><h3>Sub<h3>Sub--subsub--section</h3>section</h3>
Slide Menu
Try ItTry ItMaximize your Example1.htm Notepad WindowMaximize your Example1.htm Notepad WindowEdit Your HTML Code To Look as BelowEdit Your HTML Code To Look as BelowSave Your File and Minimize the WindowSave Your File and Minimize the Window
Slide Menu
View Your WorkView Your WorkGo to Your Desktop and DoubleGo to Your Desktop and Double--Click the Example1.htm Click the Example1.htm ICON. Your Webpage Should Look Similar to That Shown in ICON. Your Webpage Should Look Similar to That Shown in the Image Below.the Image Below.Do You Notice the Heading Difference?Do You Notice the Heading Difference?If it DoesnIf it Doesn’’t Go Back to Slide 25, Make Corrections, and Try t Go Back to Slide 25, Make Corrections, and Try AgainAgain
Slide Menu
TablesTablesTables are Created with the Tables are Created with the following tags:following tags:•• TableTable•• TR for table RowsTR for table Rows•• TD for Table CellsTD for Table Cells
In the Example to the Right, a In the Example to the Right, a 3 Row, 3 Column Table is 3 Row, 3 Column Table is CreatedCreated•• The Table is 500 pixels wideThe Table is 500 pixels wide•• The Table has a border that is The Table has a border that is
1 pixel wide.1 pixel wide.Note: The Information Note: The Information Between the <td> & </td> is Between the <td> & </td> is Just Padding; You Can Have Just Padding; You Can Have Anything You LikeAnything You LikeOpen Your Example1.htm file Open Your Example1.htm file and add the tags for a table. and add the tags for a table. Put whatever data you want Put whatever data you want into the Cells. Save Your File.into the Cells. Save Your File.See the See the W3Schools Tutorial W3Schools Tutorial Site Site for Additional for Additional Information on Creating Information on Creating Tables Tables
Slide Menu
View Your TableView Your TableDoubleDouble--click on the Desktop ICON for Example1.htm to View Your click on the Desktop ICON for Example1.htm to View Your WorkWorkIt Should Look Similar to the FollowingIt Should Look Similar to the FollowingIf It DoesnIf It Doesn’’t, Go Back and Review Your Tagst, Go Back and Review Your Tags
Slide Menu
Further HTML TrainingFurther HTML TrainingContinue Training at the W3Schools HTML Tutorial Site:Continue Training at the W3Schools HTML Tutorial Site:http://www.w3schools.com/html/default.asphttp://www.w3schools.com/html/default.asp
Slide Menu
XHTML Finishing TouchesXHTML Finishing TouchesDOCTYPE Statement RequiredDOCTYPE Statement Required•• First Statement in XHTML Source CodeFirst Statement in XHTML Source Code•• Three Document Type Definitions (DTD) SupportedThree Document Type Definitions (DTD) Supported
StrictStrictTransitionalTransitionalFramesFrames
•• Transitional is Most CommonTransitional is Most CommonFine for This ClassFine for This ClassIf Cascading Style Sheets (CSS) are Used, Strict DTD If Cascading Style Sheets (CSS) are Used, Strict DTD Should be UsedShould be Used<!DOCTYPE html PUBLIC "<!DOCTYPE html PUBLIC "--//W3C//DTD XHTML 1.0 //W3C//DTD XHTML 1.0 Transitional//EN" Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1"http://www.w3.org/TR/xhtml1/DTD/xhtml1--transitional.dtd"> transitional.dtd">
Slide Menu
Add DOCTYPE StatementAdd DOCTYPE StatementOpen Your Example1.htm Notepad Window and Open Your Example1.htm Notepad Window and Edit Your HTML Code so That it Looks as BelowEdit Your HTML Code so That it Looks as BelowSave Your Page, Minimize the Window, then Save Your Page, Minimize the Window, then Check Your Web Page to Make Sure it OpensCheck Your Web Page to Make Sure it Opens
Slide Menu
Further XHTML TrainingFurther XHTML TrainingContinue Your XHTML Training at:Continue Your XHTML Training at:http://www.w3schools.com/xhtml/default.asphttp://www.w3schools.com/xhtml/default.aspTutorials From Introduction to Validation are RequiredTutorials From Introduction to Validation are Required
Slide Menu
XHTML ValidationXHTML Validation
Validate HTML Source Validate HTML Source CodeCode•• Verifies If Source Code Verifies If Source Code
Conforms to XHTML Conforms to XHTML StandardsStandards
•• Pinpoints ErrorsPinpoints Errors•• Offers Offers
RecommendationsRecommendationsSeveral Web Sites Several Web Sites AvailableAvailable•• Try: Try:
http://validator.aborla.http://validator.aborla.net/net/
See Web Page Notes See Web Page Notes for Further for Further InformationInformation
Slide Menu
Viewing the HTML Source Code of Viewing the HTML Source Code of a Web Pagea Web Page
The HTML Code of any Web Page The HTML Code of any Web Page Can Easily be Viewed in a BrowserCan Easily be Viewed in a BrowserIn IE, click In IE, click ViewView on the Menu Bar on the Menu Bar and Select and Select SourceSourceIn In MozillaMozilla FirefoxFirefox, click , click ViewView on the on the Menu Bar and Select Menu Bar and Select Page SourcePage Source
Slide Menu
Transfer Files to Web ServerTransfer Files to Web Server
Use a FTP Program To Transfer Student Use a FTP Program To Transfer Student Web Pages and Files to the Web ServerWeb Pages and Files to the Web Server•• IE FTP ClientIE FTP Client•• WS_FTPLEWS_FTPLE•• FetchFetchMost Assignments Also Need to be Posted Most Assignments Also Need to be Posted to the Assignment to the Assignment DropboxDropbox in in WebCTWebCT•• Make Sure Your Page Has All RequirementsMake Sure Your Page Has All Requirements•• Make Sure Your Link WorksMake Sure Your Link WorksThat WasnThat Wasn’’t So Hard, Was Itt So Hard, Was It
Slide Menu
SummarySummary
What is HTMLWhat is HTMLHTML TagsHTML TagsRequired HTML TagsRequired HTML TagsCreating a Web Page in NotepadCreating a Web Page in NotepadViewing a Web Page in the BrowserViewing a Web Page in the BrowserSubmitting Your Web PageSubmitting Your Web Page
Slide Menu