Creating A Web Page with HTML5 Computer Concepts I and II Sue Norris.

Creating A Web Page with HTML5 Computer Concepts I and II Sue Norris

Agenda What is HTML 5? What is HTML 5? Required HTML 5 Tags Required HTML 5 Tags Using Notepad to Start your Web Page Using Notepad to Start your Web Page Viewing Your Web Page in a Browser Viewing Your Web Page in a Browser Submitting Your Assignment Submitting Your Assignment

Slide Menu HTML Required HTML5 Tags Required HTML5 Tags HTML Requirements HTML 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 Tables Inserting an Image Inserting an Image HTM5L Validation HTM5L Validation Viewing HTML Source Viewing HTML Source Transfer Files to Web Server Transfer Files to Web Server

What is HTML 5 HTML 5 is the latest standard for Web page coding HTML 5 is the latest standard for Web page coding HTML 5 continues to evolve; it is not a finalized standard HTML 5 continues to evolve; it is not a finalized standard Major browsers such as IE, FireFox, Chrome, and Safari support HTML 5 but not fully. Major browsers such as IE, FireFox, Chrome, and Safari support HTML 5 but not fully. 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 tell the browser to do 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 tell the browser to do

What Do HTML5 Tags Look Like? HTML5 Tags Look Like: HTML5 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 XHTML Tags? What is Common About XHTML 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 HTML5 Tags This is not an html5 tag but is used to define the document <html> Every Web Page Starts with the tag <head> The Starting tag always follows the tag Specifies the character encoding for the document My First Web Page My First Web Page The title tags encompass the title of your page; this is the title that shows in the title bar of a window </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

HTML5 Additional Requirements for this Class All HTML5 Tags and Tag Elements Must be in lower-case All HTML5 Tags and Tag Elements Must be in lower-case Every HTML5 Tag Must have a Starting Tag AND an Ending Tag unless it is an empty tag such as the tag Every HTML5 Tag Must have a Starting Tag AND an Ending Tag unless it is an empty tag such as the tag HTML5 Tags Must be Properly Nested HTML5 Tags Must be Properly Nested HTML5 Tag Attributes Must be in Quotes HTML5 Tag Attributes Must be in Quotes The DOCTYPE Declaration Should be the First Line in a HTML5 Document The DOCTYPE Declaration Should be the First Line in a HTML5 Document Slide Menu

<!DOCTYPE Declaration The following DOCTYPE Declaration should be the first line in your HTML5 document The following DOCTYPE Declaration should be the first line in your HTML5 document The DOCTYPE declaration is not a html5 tag. The DOCTYPE declaration is not a html5 tag. The declaration tells the browser that the page is written in html 5. The declaration tells the browser that the page is written in html 5.

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 Documents or a Folder of Choice to Save in, type in Example1.htm in File Name and Click Save Click File on the Menu Bar, Click Save, Choose Documents or a Folder of Choice to Save in, type in Example1.htm in File Name and Click Save 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 HTML5 Tags into your Example1.htm document. Type the Following HTML5 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 All tags must be in lower-case All tags must be in lower-case The DOCTYPE statement is NOT an HTML5 tag. DOCTYPE is capitalized. The DOCTYPE statement is NOT an HTML5 tag. DOCTYPE is capitalized. Save your document. Save your document. In Notepad, an extension of htm or html needs to be added after the filename. In Notepad, an extension of htm or html needs to be added after the filename. Minimize the Notepad Window; We Will Come Back to It Minimize the Notepad Window; We Will Come Back to It Slide Menu

Windows Users Locate your Documents folder in Windows Explorer Locate your Documents folder in Windows Explorer Locate the Example1.htm file Locate the Example1.htm file Double-Click on the Example1.htm file to open it (an htm or html extension tells Windows to open the default Web browser and to load the html document into it). Double-Click on the Example1.htm file to open it (an htm or html extension tells Windows to open the default Web browser and to load the html document into it). Slide Menu

MacUsers Open Finder and then locate your Documents folderOpen Finder and then locate your Documents folder Locate the Example1.htm file and click on it to openLocate the Example1.htm file and click on it to open 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 CorrectlyIt 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

Additional Information for Mac Users Using TextEdit for HTML Files If using TextEdit as your text editor, you may need to make the following changes in order to display Web pages correctly: If using TextEdit as your text editor, you may need to make the following changes in order to display Web pages correctly: Open the Preferences in TextEdit Open the Preferences in TextEdit In the New Document tab, change the first radio button to "plain text" In the New Document tab, change the first radio button to "plain text" In the Open and Save tab, make sure the "Ignore rich text commands in HTML pages" box is selected (first checkbox on the page) In the Open and Save tab, make sure the "Ignore rich text commands in HTML pages" box is selected (first checkbox on the page) Also in the Open and Save tab, set the following under the HTML Saving Options Also in the Open and Save tab, set the following under the HTML Saving Options XHTML 1.0 Transitional for Document TypeXHTML 1.0 Transitional for Document Type Embedded CSS for StylingEmbedded CSS for Styling Unicode (UTF-8) for EncodingUnicode (UTF-8) for Encoding Close the preferences and open your HTML file Close the preferences and open your HTML file When you save your file with Save As, HTML should be in the File Format field. In the Save As field, type the file name followed by.html then click Save. When you save your file with Save As, HTML should be in the File Format field. In the Save As field, type the file name followed by.html then click Save. Slide Menu

View Your Lovely Work You should see the “Title” on the title bar or in a tab. You should see the “Title” on the title bar or in a tab. Nothing should appear on the page because nothing has been coded between the body tags yet. Nothing should appear on the page because nothing has been coded between the body tags yet. Slide Menu

Add Formatting to Text Maximize Your Notepad Window Maximize Your Notepad Window Change Your HTML5 Code To Add the paragraph and bold tags so that your code looks similar to the Following Change Your HTML5 Code To Add the paragraph and bold tags so that your code looks similar to the Following NOTE: The only text formatting that can be done without using style tags is with the strong (same as bold) and em (same as italics) tags. NOTE: The only text formatting that can be done without using style tags is with the strong (same as bold) and em (same as italics) tags. When Done, Save Your Web Page and Minimize the Notepad Window When Done, Save Your Web Page and Minimize the Notepad Window Slide Menu

View Your Work Go to your Windows or Mac Documents folder Double-Click on the Example1.html ICON or file Go to your Windows or Mac Documents folder Double-Click on the Example1.html ICON or file 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 Another Paragraph with the Paragraph Tag Create Another Paragraph with the Paragraph Tag Edit Your Example1.htm file in Notepad or TextEdit to add the second Paragraph Tag as shown below.Edit Your Example1.htm file in Notepad or TextEdit to add the second Paragraph Tag as shown below. Also add the tag for Emphasis formatting.Also add the tag for Emphasis formatting. HTML5 RULE: Tags MUST BE Properly Nested. If formatting Starts with, the Order of the Ending Tags Must Be:.HTML5 RULE: Tags MUST BE Properly Nested. If formatting Starts with, the Order of the Ending Tags Must Be:. Save Your File and Minimize the text editor window.Save Your File and Minimize the text editor window. Slide Menu

View Your Page Go to Your Windows or Mac Documents folder and Double-Click the Example1.htm ICON or file. Your Webpage Should Look Similar to That Shown in the Image Below. Go to Your Windows or Mac Documents folder and Double-Click the Example1.htm ICON or file. Your Webpage Should Look Similar to That Shown in the Image Below. If it Doesn’t Go Back and Make Corrections If it Doesn’t Go Back and Make Corrections Slide Menu

Add a Background Color A Webpage Background Color is Added with an inline style of the body tag. A Webpage Background Color is Added with an inline style of the body tag. Colors are Entered as 6 character hexadecimal numbers (colorvalues) or supported colornames Colors are Entered as 6 character hexadecimal numbers (colorvalues) or supported colornames A hexadecimal Code Must Start with # and be enclosed in “ A hexadecimal Code Must Start with # and be enclosed in “ Go to the W3Schools site and pick a color that you like and jot down the 6 character hexadecimal code associated with it. Go to the W3Schools site and pick a color that you like and jot down the 6 character hexadecimal code associated with it.W3Schools Save Your File and Minimize Your Text Editor Window Save Your File and Minimize Your Text Editor Window Slide Menu

View Your Web Page Go to Your Windows or Mac Documents folder and Double-Click the Example1.htm ICON/file. Your Webpage Should Look Similar to That Shown in the Image Below. Go to Your Windows or Mac Documents folder and Double-Click the Example1.htm ICON/file. 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.http://www.microsoft.com This Represents a Link to an External Web Site or site that is outside of the web site from which the current web page is in.This Represents a Link to an External Web Site or site that is outside of the web site from which the current web page is in. The Information Between the “ ” s is the Address of the Linked to Page.The Information Between the “ ” s is the Address of the Linked to Page. When an address starts with http and includes the complete path to a page, it is called an absolute address.When an address starts with http and includes the complete path to a page, it is called an absolute address. Http stands for hyper-text transfer protocol. It is the Internet protocol used to define how a web page is formatted and displayed.Http stands for hyper-text transfer protocol. It is the Internet protocol used to define how a web page is formatted and displayed. www.microsoft.com is the domain name of where the web page resides.www.microsoft.com is the domain name of where the web page resides.www.microsoft.com The “/” separates domain names, folder names and web page names. When no page name is listed, the browser will try to load a page named index.htm or index.html.The “/” separates domain names, folder names and web page names. When no page name is listed, the browser will try to load a page named index.htm or index.html. 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 Slide Menu

Add a Link continued A Link to Another Page Within the Same Web Site is called an Internal link. An internal link might Look Like: Computers Page A Link to Another Page Within the Same Web Site is called an Internal link. An internal link 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 The web page will display Computers Page as a link for the user to click on. If the user clicks on it, the computers.htm page will open.The web page will display Computers Page as a link for the user to click on. If the user clicks on it, the computers.htm page will open. When an address does not start with http and just includes the name of the page, it is called a relative address.When an address does not start with http and just includes the name of the page, it is called a relative address. Relative addresses can include dots and slashes (i.e.../) before the page name. The combination of these would tell the browser in which folder to look for the page relative to the root folder from which the loaded page was opened from. Relative addresses can include dots and slashes (i.e.../) before the page name. The combination of these would tell the browser in which folder to look for the page relative to the root folder from which the loaded page was opened from. Slide Menu

Relative Address Examples If the address for the object to be loaded only includes the filename and extension of the object, the browser will look for the object in the root folder or folder from which the calling page was opened. If the address for the object to be loaded only includes the filename and extension of the object, the browser will look for the object in the root folder or folder from which the calling page was opened. Go to Planets Go to Planets If the object is located in a sub-folder of the root folder, the object name is preceded with the folder name and a “/”. If the object is located in a sub-folder of the root folder, the object name is preceded with the folder name and a “/”. The following examples show a relative address to a folder named “sample” which is sub-folder of the root folder.The following examples show a relative address to a folder named “sample” which is sub-folder of the root folder. Go to Planets Go to Planets If the object is located in a different folder than the root folder but on the same level as the root folder, the object name is preceded with../ followed by the folder name. If the object is located in a different folder than the root folder but on the same level as the root folder, the object name is preceded with../ followed by the folder name. The following examples show a relative address to a folder named “sample” which is at the same level as the root folder.The following examples show a relative address to a folder named “sample” which is at the same level as the root folder. Go to Planets Go to Planets 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.

Web Page and Object Names IMPORTANT: page names specified in the href attribute of the anchor tag or object names specified in the src attribute of an img tag SHOULD match the name of the file or image stored on the server EXACTLY. IMPORTANT: page names specified in the href attribute of the anchor tag or object names specified in the src attribute of an img tag SHOULD match the name of the file or image stored on the server EXACTLY. Includes caseIncludes case No spaces should be included in name.No spaces should be included in name.

Try It Maximize Your text editor window with Example1.htm Maximize Your text editor window with Example1.htm 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 text editor Window Save Your File and Minimize the text editor Window Slide Menu

View Your Web Page Go to Your Windows or Mac Documents folder and Double- Click the Example1.htm ICON/file. Your Webpage Should Look Similar to That Shown in the Image Below. Go to Your Windows or Mac Documents folder and Double- Click the Example1.htm ICON/file. Your Webpage Should Look Similar to That Shown in the Image Below. Try Your Link. Does It Go to the PCC Site? Try Your Link. Does It Go to the PCC 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 Ordered List Rivers Mississippi Missouri Example of Two Item Ordered 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 Unordered List Rivers Mississippi Missouri Example of Two Item Unordered List Rivers Mississippi Missouri Slide Menu

Creating A List continued Description Lists are Created with the dl and dt and dd tags Description Lists are Created with the dl and dt and dd tags Example of Two Item Description List Rivers Mississippi - Longest river in the United States Missouri - Second longest river in the United States Example of Two Item Description List Rivers Mississippi - Longest river in the United States Missouri - Second longest river in the United States Slide Menu

Try It Maximize Your Example1.htm Window and Edit Your HTML5 Source Code so That it Looks as Below. Maximize Your Example1.htm Window and Edit Your HTML5 Source Code so That it Looks as Below. Save Your File and Minimize Your text editing Window Save Your File and Minimize Your text editing Window Slide Menu

View Your Page Go to Your Windows or Mac Documents folder and Double-Click the Example1.htm ICON/file. Your Webpage Should Look Similar to That Shown in the Image Below. Go to Your Windows or Mac Documents folder and Double-Click the Example1.htm ICON/file. 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 text editing Window Maximize your Example1.htm text editing 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 Windows or Mac Documents folder and Double- Click the Example1.htm ICON/file. Your Webpage Should Look Similar to That Shown in the Image Below. Go to Your Windows or Mac Documents folder and Double- Click the Example1.htm ICON/file. 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 on the next slide, a 3 Row, 3 Column Table is Created In the Example on the next slide, 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. A border=“0” will allow for a borderless table.A border=“0” will allow for a borderless table. 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

Tables Slide Menu

View Your Table Double-click on the Windows ICON or Mac Documents folder for Example1.htm to View Your Work Double-click on the Windows ICON or Mac Documents folder 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

Add an Image Images are added with the image Tag: Images are added with the image Tag: The img tag is positioned in the xhtml source code where you want the image to be loaded. The img tag is positioned in the xhtml source code where you want the image to be loaded. In the following example: In the following example: PCClogo-white-blue.gif is the name of the image.PCClogo-white-blue.gif is the name of the image. The image has a width of 130 pixels and a height of 40 pixelsThe image has a width of 130 pixels and a height of 40 pixels The browser will search and load the image from a folder named imagesThe browser will search and load the image from a folder named images The../ tells the browser that the images folder is at the same level as the root folder or folder from which the calling page was loaded.The../ tells the browser that the images folder is at the same level as the root folder or folder from which the calling page was loaded. ALL OBJECTS including images MUST be transferred to the web server. The PCClogo-white-blue.gif image needs to be transferred to the images folder that is at the same level as the root folder.ALL OBJECTS including images MUST be transferred to the web server. The PCClogo-white-blue.gif image needs to be transferred to the images folder that is at the same level as the root folder. REMEMBER: The name of the image on the server needs to match the name of the image referenced in the src attribute EXACTLY.REMEMBER: The name of the image on the server needs to match the name of the image referenced in the src attribute EXACTLY. Slide Menu

Add an Image con’t. In the following example: In the following example: PCClogo-white-blue.gif is the name of the image.PCClogo-white-blue.gif is the name of the image. The image has a width of 130 pixels and a height of 40 pixelsThe image has a width of 130 pixels and a height of 40 pixels The browser will search and load the image from a folder named imagesThe browser will search and load the image from a folder named images Since there is nothing before the images folder name, the browser searches and loads the image from an images folder that is a sub-folder of the root folder or folder from which the calling page was loaded.Since there is nothing before the images folder name, the browser searches and loads the image from an images folder that is a sub-folder of the root folder or folder from which the calling page was loaded. Slide Menu

Try It Create a sub-folder to your Windows Desktop or Mac Documents folder and name it images. Create a sub-folder to your Windows Desktop or Mac Documents folder and name it images. Click here to open a sample Web page. After it opens, right-click on the PCC Logo image at the bottom and save it as PCClogo-white-blue.gif to the images folder that you created above. Click here to open a sample Web page. After it opens, right-click on the PCC Logo image at the bottom and save it as PCClogo-white-blue.gif to the images folder that you created above.here Slide Menu

Try It Update your Example1.htm source code with the new information Update your Example1.htm source code with the new information Slide Menu

View Your Web Page Go to your Windows ICON or Mac Documents folder and double-click the Example1.htm to View Your Work Go to your Windows ICON or Mac Documents folder and double-click the 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

HTML5 Validation Validate HTML5 Source Code Validate HTML5 Source Code Verifies If Source Code Conforms to HTML5 StandardsVerifies If Source Code Conforms to HTML5 Standards Pinpoints ErrorsPinpoints Errors Offers RecommendationsOffers Recommendations Several Web Sites Available Several Web Sites Available Try: http://validator.w3.org/ http://validator.w3.org/ See Web Page Notes for Further Information See Web Page Notes for Further Information Slide Menu

HTML5 Validation continued Validate HTML5 Source Code Validate HTML5 Source Code Verifies If Source Code Conforms to HTML5 StandardsVerifies If Source Code Conforms to HTML5 Standards Pinpoints ErrorsPinpoints Errors Offers RecommendationsOffers Recommendations Several Web Sites Available Several Web Sites Available Try: http://validator.w3.org/ http://validator.w3.org/ See Web Page Notes for Further Information See Web Page Notes for Further Information Slide Menu

Viewing the HTML5 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 FileZillaFileZilla Most Assignments Also Need to be Posted to the Assignment Dropbox in D2L Most Assignments Also Need to be Posted to the Assignment Dropbox in D2L Make sure your page has ALL requirementsMake sure your page has ALL requirements Make sure ALL objects are transferred to the student serverMake sure ALL objects are transferred to the student server Make sure object names are identical to names specified in tagsMake sure object names are identical to names specified in tags Make Sure Your Links WorkMake Sure Your Links Work That Wasn’t So Hard, Was It That Wasn’t So Hard, Was It Slide Menu

Summary What is HTML5 What is HTML5 HTML5 Tags HTML5 Tags Required HTML5 Tags Required HTML5 Tags Creating a Web Page in Notepad or TextEdit Creating a Web Page in Notepad or TextEdit Viewing a Web Page in the Browser Viewing a Web Page in the Browser Submitting Your Web Page Submitting Your Web Page Slide Menu

Creating A Web Page with HTML5 Computer Concepts I and II Sue Norris.

Similar presentations

Presentation on theme: "Creating A Web Page with HTML5 Computer Concepts I and II Sue Norris."— Presentation transcript:

Similar presentations

About project

Feedback

Log in

Auth with social network:

Creating A Web Page with HTML5 Computer Concepts I and II Sue Norris.

Similar presentations

Presentation on theme: "Creating A Web Page with HTML5 Computer Concepts I and II Sue Norris."— Presentation transcript:

Similar presentations

About project

Feedback