Creating A Web Page Computer Concepts I and II Sue Norris
Q:: Markdown vs. HTML
Agenda What is HTML What is HTML HTML and XHTML Tags HTML and XHTML Tags Required HTML and XHTML Tags Required HTML and XHTML Tags Using Notepad+ to Create a Simple Web Page Using Notepad+ to Create a Simple Web Page Viewing Your Web Page in a Browser Viewing Your Web Page in a Browser Submitting Your Project Submitting Your Project
Slide Menu HTML XHTML Required HTML Tags Required HTML Tags XHTML Requirements XHTML Requirements Creating a Web Page with Notepad Creating a Web Page with Notepad Formatting Tags Formatting Tags Paragraph Tag Paragraph Tag Page Background Color Page Background Color Anchor Tag for Links Anchor Tag for Links Lists Header Tags Header Tags Further HTML Training Further HTML Training XHTML Addition XHTML Addition DOCTYPE Statement DOCTYPE Statement Further XHTML Training Further XHTML Training XHTML Validation XHTML Validation Viewing HTML Source Viewing HTML Source Transfer Files to Web Server Transfer Files to Web Server Tables
Hyper Text Markup Language Every Web Page is Formatted with HTML markup tags Every Web Page is Formatted with HTML markup tags HTML Markup tags Tell a Browser How to Display a Web Page HTML Markup tags Tell a Browser How to Display a Web Page A Web Page ALWAYS has a File Extension of htm or html A Web Page ALWAYS has a File Extension of htm or html The Browser (ie Internet Explorer, Netscape, Firefox) Reads the HTML tags Sequentially From Top to Bottom and Formats the Page Based On What the Tags Say The Browser (ie Internet Explorer, Netscape, Firefox) Reads the HTML tags Sequentially From Top to Bottom and Formats the Page Based On What the Tags Say
XHTML Extensible HyperText Markup Language Extensible HyperText Markup Language Almost Identical to HTML 4.01 Almost Identical to HTML 4.01 Stricter and Cleaner Version of HTML Stricter and Cleaner Version of HTML Slide Menu
What Do HTML Tags Look Like? HTML Tags Look Like: HTML Tags Look Like: paragraph tag paragraph tag bold tag bold tag unordered list tag unordered list tag list item tag list item tag What 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 According to the TagData Between the Tags will be Formatted According to the Tag The Starting Tag Starts the Type of Format; the Ending Tag Stops the Type of FormatThe Starting Tag Starts the Type of Format; the Ending Tag Stops the Type of Format Slide Menu
Required HTML Tags The Following HTML Tags are Required/Recommended for Every We Pages <html> Every Web Page Starts with the tag <head> The Starting tag always follows the tag My First Web Page My First Web Page The title tags encompass the title of your page </head> The Ending tag always follows the ending tag <body> Starting body tag Everything that appears on a web page goes between the and tags </body> Ending body tag </html> Ends every web page Slide Menu
XHTML Additional Requirements All HTML Tags and Tag Elements Must be in lower-case All HTML Tags and Tag Elements Must be in lower-case Every HTML Tag Must have a Starting Tag AND an Ending Tag Every HTML Tag Must have a Starting Tag AND an Ending Tag HTML Tags Must be Properly Nested HTML Tags Must be Properly Nested HTML Tag Attributes Must be in Quotes HTML Tag Attributes Must be in Quotes The Id attribute replaces the Name Attribute The Id attribute replaces the Name Attribute The DOCTYPE Declaration Should be the First Line in a XHTML Document The DOCTYPE Declaration Should be the First Line in a XHTML Document Slide Menu
Starting a Simple Web Page Using a Text Editor In Window’s, Open Notepad In Window’s, Open Notepad Click Start Button, Click on All Programs, Click on Accessories, Click on Notepad Slide Menu
Notepad Opens Notepad Opens Slide Menu
Open TextEdit on the Mac Click Finder on the Dock Click Finder on the Dock Click Applications Click Applications Click on TextEdit ICON to Open Click on TextEdit ICON to Open Slide Menu
TextEdit Opens TextEdit Opens Save Your Web Page Save Your Web Page Slide Menu
Save Your Document Whenever you create a web page, ALWAYS Save Your Web Page First Whenever you create a web page, ALWAYS Save Your Web Page First In WindowsIn Windows Click File on the Menu Bar, Click Save, Choose Desktop for Save in, type in Example1.htm in File Name and Click Save Click File on the Menu Bar, Click Save, Choose Desktop for Save in, type in Example1.htm in File Name and Click Save NOTE: We are Saving to the Desktop to Make This Easy; You Would Normally Save to a Folder of Choice NOTE: We are Saving to the Desktop to Make This Easy; You Would Normally Save to a Folder of Choice In MacIn Mac Click File on the Menu Bar, Click Save As, Choose Documents for Where, type in Example1.htm in Save As field and Click Save Click File on the Menu Bar, Click Save As, Choose Documents for Where, type in Example1.htm in Save As field and Click Save
Type the Following HTML Tags into your Example1.htm document. Type the Following HTML Tags into your Example1.htm document. Type in the Tags Exactly as You See Them Above Type in the Tags Exactly as You See Them Above To Comply with XHTML coding standards: To Comply with XHTML coding standards: ALL xHTML tags MUST be in lower caseALL xHTML 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 Page Save Your Web Page Click File on the Menu Bar, Click Save Minimize the Notepad Window; We Will Come Back to It Minimize the Notepad Window; We Will Come Back to It Slide Menu
Go to your Desktop Go to your Desktop You Should See the Example1.htm ICON on your Desktop, Similar to that BelowYou Should See the Example1.htm ICON on your Desktop, Similar to that Below If you Don’t, Go Back to Starting a Web Page and Start OverIf you Don’t, Go Back to Starting a Web Page and Start OverStarting a Web Page Starting a Web Page Double-Click on the Example1.htm ICON Double-Click on the Example1.htm ICON Slide Menu
View Your Lovely Work Your Browser Window Should Open with Your Web Page Loaded in It. Your Browser Window Should Open with Your Web Page Loaded in It. It if Doesn’t, Go Back to Starting A Simple Web Page slide and Make Sure You Saved Your Page Correctly It if Doesn’t, Go Back to Starting A Simple Web Page slide and Make Sure You Saved Your Page CorrectlyStarting A Simple Web Page slideStarting A Simple Web Page slide Slide Menu
Add Formatting to Text Maximize Your Notepad Window Maximize Your Notepad Window Change Your HTML Code To Add the Bold Tag or Other Text Formatting Tag, and So It Looks Similar to the Following Change Your HTML Code To Add the Bold Tag or Other Text Formatting Tag, and So It Looks Similar to the Following NOTE: The Yellow Background is Only to Highlight the Inserted Tag NOTE: The Yellow Background is Only to Highlight the Inserted Tag When Done, Save Your Web Page and Minimize the Notepad Window When Done, Save Your Web Page and Minimize the Notepad Window Slide Menu
Go to your Desktop Go to your Desktop Double-Click on the Example1.html ICON Double-Click on the Example1.html ICON Slide Menu
View Your Work If You Did Everything Correctly, Your Web Page Should Look Similar to the Following and My First should be in Bold. If You Did Everything Correctly, Your Web Page Should Look Similar to the Following and My First should be in Bold. If you Don’t Have this, Go Back to the Add Formatting slide and try again. If you Don’t Have this, Go Back to the Add Formatting slide and try again.Add FormattingAdd Formatting Slide Menu
Continuing With Your Web Page Create Two Paragraphs with the Paragraph Tag Create Two Paragraphs with the Paragraph Tag Edit Your Example1.htm file in Notepad to add the two Paragraph Tags that you See Below.Edit Your Example1.htm file in Notepad to add the two Paragraph Tags that you See Below. Also add the and tags for Underline and Italics formatting.Also add the and tags for Underline and Italics formatting. XHTML RULE: Tags MUST BE Properly Nested. If formatting Starts with, the Order of the Ending Tags Must Be:.XHTML RULE: Tags MUST BE Properly Nested. If formatting Starts with, the Order of the Ending Tags Must Be:. Save Your File and Minimize the Notepad WindowSave Your File and Minimize the Notepad Window Slide Menu
View Your Page Go to Your Desktop and Double-Click the Example1.htm ICON. Your Webpage Should Look Similar to That Shown in the Image Below. Go to Your Desktop and Double-Click the Example1.htm ICON. Your Webpage Should Look Similar to That Shown in the Image Below. If it Doesn’t Go Back to Slide 20 and Make Corrections If it Doesn’t Go Back to Slide 20 and Make Corrections Slide Menu
Add a Background Color A Webpage Background Color is Added with the bgcolor parameter of the Body Tag A Webpage Background Color is Added with the bgcolor parameter of the Body Tag Colors are Entered as 6 character hexadecimal numbers Colors are Entered as 6 character hexadecimal numbers Code Must Start with # and be enclosed in “” Code Must Start with # and be enclosed in “” Go to the Webmonkey site and pick a color that you like and jot down the 6 character hexadecimal code associated with it. Go to the Webmonkey site and pick a color that you like and jot down the 6 character hexadecimal code associated with it.Webmonkey Save Your File and Minimize Your Notepad Window Save Your File and Minimize Your Notepad Window Slide Menu
View Your Web Page Go to Your Desktop and Double-Click the Example1.htm ICON. Your Webpage Should Look Similar to That Shown in the Image Below. Go to Your Desktop and Double-Click the Example1.htm ICON. Your Webpage Should Look Similar to That Shown in the Image Below. If it Doesn’t Go Back to the Add a Background Color slide and Make Corrections If it Doesn’t Go Back to the Add a Background Color slide and Make CorrectionsAdd a Background Color slideAdd a Background Color slide Slide Menu
Add a Link Links Are Created with the Anchor Tag: Links Are Created with the Anchor Tag: A Link to the Microsoft web site would look like: Click here to go to the Microsoft Site. A Link to the Microsoft web site would look like: Click here 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 “ ” s is the Address of the Linked to PageThe Information Between the “ ” s is the Address of the Linked to Page The Information in Yellow and Between the > and is What Appears on the Web Page for the User to ClickThe Information in Yellow and Between the > and is What Appears on the Web Page for the User to Click A Link to Another Page Within the Same Web Site Might Look Like: Computers Page A Link to Another Page Within the Same Web Site Might Look Like: Computers Page Name of Page is computers.htmName of Page is computers.htm No Path is Specified if page is within the same folder as calling Web PageNo Path is Specified if page is within the same folder as calling Web Page Computers Page is What Will Display on Calling Page for User to ClickComputers Page is What Will Display on Calling Page for User to Click Slide Menu
Check Your HTML Source Code If you Use a Web-Page Editor, Check the Source Code of Your tag. If you Use a Web-Page Editor, Check the Source Code of Your tag. It Should Look Similar to the Following:It Should Look Similar to the Following: Computers Page Computers Page The following is Incorrect and Won’t WorkThe following is Incorrect and Won’t Work This is Pointing to a Location on YOUR Hard Drive.This is Pointing to a Location on YOUR Hard Drive. When it is Transferred to the Web Server, the Browser will Look for the File at the Same Location on the User’s Hard Drive. Not Likely There.When it is Transferred to the Web Server, the Browser will Look for the File at the Same Location on the User’s Hard Drive. Not Likely There.
Try It Maximize Your Notepad Window with Example1.htm Open in It Maximize Your Notepad Window with Example1.htm Open in It Edit your HTML Code So That It Looks as Pictured Below. Edit your HTML Code So That It Looks as Pictured Below. Save Your File and Minimize the Notepad Window Save Your File and Minimize the Notepad Window Slide Menu
View Your Web Page Go to Your Desktop and Double-Click the Example1.htm ICON. Your Webpage Should Look Similar to That Shown in the Image Below. Go to Your Desktop and Double-Click the Example1.htm ICON. Your Webpage Should Look Similar to That Shown in 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 Doesn’t Go Back to the Adding a Link slide, Make Corrections, and Try Again If it Doesn’t Go Back to the Adding a Link slide, Make Corrections, and Try AgainAdding a Link slideAdding a Link slide Slide Menu
Creating A List Ordered Lists (numbered) are Created with the OL and LI tags Ordered Lists (numbered) are Created with the OL and LI tags Example of Two Item Unordered List Rivers Mississippi Missouri Example of Two Item Unordered List Rivers Mississippi Missouri Unordered Lists (bulleted) are Created with the UL and LI tags Unordered Lists (bulleted) are Created with the UL and LI tags Example of Two Item Ordered List Rivers Mississippi Missouri Example of Two Item Ordered List Rivers Mississippi Missouri Slide Menu
Try It Maximize Your Example1.htm Notepad Window and Edit Your HTML Source Code so That it Looks as Below. Maximize Your Example1.htm Notepad Window and Edit Your HTML Source Code so That it Looks as Below. Save Your File and Minimize Your Notepad Window Save Your File and Minimize Your Notepad Window Slide Menu
View Your Page Go to Your Desktop and Double-Click the Example1.htm ICON. Your Webpage Should Look Similar to That Shown in the Image Below. Go to Your Desktop and Double-Click the Example1.htm ICON. Your Webpage Should Look Similar to That Shown in the Image Below. Do your Lists Look Similar? Do your Lists Look Similar? If They Don’t Go Back to the Creating a List slide, Make Corrections, and Try Again If They Don’t Go Back to the Creating a List slide, Make Corrections, and Try Again Creating a List slide Creating a List slide Slide Menu
Adding a Header Tag Header Tags are Used to Emphasize Web Page Sections and Subsections in an Outline Fashion Header Tags are Used to Emphasize Web Page Sections and Subsections in an Outline Fashion Header Tags Range From H1 to H6 with H1 Being the Largest and H6 the Smallest Header Tags Range From H1 to H6 with H1 Being the Largest and H6 the Smallest Examples: Examples: Main Section Main Section Sub-section Sub-section Sub-sub-section Sub-sub-section Slide Menu
Try It Maximize your Example1.htm Notepad Window Maximize your Example1.htm Notepad Window Edit Your HTML Code To Look as Below Edit Your HTML Code To Look as Below Save Your File and Minimize the Window Save Your File and Minimize the Window Slide Menu
View Your Work Go to Your Desktop and Double-Click the Example1.htm ICON. Your Webpage Should Look Similar to That Shown in the Image Below. Go to Your Desktop and Double-Click the Example1.htm ICON. Your Webpage Should Look Similar to That Shown in the Image Below. Do You Notice the Heading Difference? Do You Notice the Heading Difference? If it Doesn’t Go Back to the Adding a Header slide, Make Corrections, and Try Again If it Doesn’t Go Back to the Adding a Header slide, Make Corrections, and Try AgainAdding a Header slideAdding a Header slide Slide Menu
Tables Tables are Created with the following tags: Tables are Created with the following tags: TableTable TR for table RowsTR for table Rows TD for Table CellsTD for Table Cells In the Example to the Right, a 3 Row, 3 Column Table is Created In the Example to the Right, a 3 Row, 3 Column Table is Created The Table is 500 pixels wideThe Table is 500 pixels wide The Table has a border that is 1 pixel wide.The Table has a border that is 1 pixel wide. Note: The Information Between the & is Just Padding; You Can Have Anything You Like Note: The Information Between the & is Just Padding; You Can Have Anything You Like Open Your Example1.htm file and add the tags for a table. Put whatever data you want into the Cells. Save Your File. Open Your Example1.htm file and add the tags for a table. Put whatever data you want into the Cells. Save Your File. See the W3Schools Tutorial Site for Additional Information on Creating Tables See the W3Schools Tutorial Site for Additional Information on Creating TablesW3Schools Tutorial Site W3Schools Tutorial Site Slide Menu
View Your Table Double-click on the Desktop ICON for Example1.htm to View Your Work Double-click on the Desktop ICON for Example1.htm to View Your Work It Should Look Similar to the Following It Should Look Similar to the Following If It Doesn’t, Go Back and Review Your Tags If It Doesn’t, Go Back and Review Your Tags Slide Menu
Further HTML Training Continue Training at the W3Schools HTML Tutorial Site:
XHTML Finishing Touches DOCTYPE Statement Required DOCTYPE Statement Required First Statement in XHTML Source CodeFirst Statement in XHTML Source Code Three Document Type Definitions (DTD) SupportedThree Document Type Definitions (DTD) Supported Strict Strict Transitional Transitional Frames Frames Transitional is Most CommonTransitional is Most Common Fine for This Class Fine for This Class If Cascading Style Sheets (CSS) are Used, Strict DTD Should be Used If Cascading Style Sheets (CSS) are Used, Strict DTD Should be Used Slide Menu
Add DOCTYPE Statement Open Your Example1.htm Notepad Window and Edit Your HTML Code so That it Looks as Below Open Your Example1.htm Notepad Window and Edit Your HTML Code so That it Looks as Below Save Your Page, Minimize the Window, then Check Your Web Page to Make Sure it Opens Save Your Page, Minimize the Window, then Check Your Web Page to Make Sure it Opens Slide Menu
Further XHTML Training Continue Your XHTML Training at: Continue Your XHTML Training at: Tutorials From Introduction to Validation are Required Tutorials From Introduction to Validation are Required Slide Menu
XHTML Validation Validate HTML Source Code Validate HTML Source Code Verifies If Source Code Conforms to XHTML StandardsVerifies If Source Code Conforms to XHTML Standards Pinpoints ErrorsPinpoints Errors Offers RecommendationsOffers Recommendations Several Web Sites Available Several Web Sites Available Try: net/Try: net/ net/ net/ See Web Page Notes for Further Information See Web Page Notes for Further Information Slide Menu
Viewing the HTML Source Code of a Web Page The HTML Code of any Web Page Can Easily be Viewed in a Browser The HTML Code of any Web Page Can Easily be Viewed in a Browser In IE, click View on the Menu Bar and Select Source In IE, click View on the Menu Bar and Select Source In Mozilla Firefox, click View on the Menu Bar and Select Page Source In Mozilla Firefox, click View on the Menu Bar and Select Page Source Slide Menu
Transfer Files to Web Server Use a FTP Program To Transfer Student Web Pages and Files to the Web Server Use a FTP Program To Transfer Student Web Pages and Files to the Web Server IE FTP ClientIE FTP Client WS_FTPLEWS_FTPLE FetchFetch Most Assignments Also Need to be Posted to the Assignment Dropbox in WebCT Most Assignments Also Need to be Posted to the Assignment Dropbox in WebCT Make Sure Your Page Has All RequirementsMake Sure Your Page Has All Requirements Make Sure Your Link WorksMake Sure Your Link Works That Wasn’t So Hard, Was It That Wasn’t So Hard, Was It Slide Menu
Summary What is HTML What is HTML HTML Tags HTML Tags Required HTML Tags Required HTML Tags Creating a Web Page in Notepad Creating a Web Page in Notepad Viewing a Web Page in the Browser Viewing a Web Page in the Browser Submitting Your Web Page Submitting Your Web Page Slide Menu