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

Creating A Web Page Creating A Web Page with HTML5with HTML5

Computer Concepts I and IIComputer Concepts I and IISue NorrisSue Norris

AgendaAgenda

What is HTML 5?What is HTML 5? Required HTML 5 TagsRequired HTML 5 Tags Using Notepad to Start your Web Using Notepad to Start your Web

PagePage Viewing Your Web Page in a BrowserViewing Your Web Page in a Browser Submitting Your AssignmentSubmitting Your Assignment

Slide MenuSlide MenuHTML Required HTML5 Tags

HTML Requirements Creating a Web Page with Notepad

Formatting Tags

Paragraph Tag Page Background Color Anchor Tag for Links

Lists Header Tags Tables

Inserting an Image HTM5L Validation Viewing HTML Source

Transfer Files to Web Server

What is HTML 5What is HTML 5 HTML 5 is the latest standard for Web HTML 5 is the latest standard for Web

page codingpage coding HTML 5 continues to evolve; it is not a HTML 5 continues to evolve; it is not a

finalized standardfinalized standard Major browsers such as IE, FireFox, Major browsers such as IE, FireFox,

Chrome, and Safari support HTML 5 but Chrome, and Safari support HTML 5 but not fully. not fully.

The Browser (ie Internet Explorer, The Browser (ie Internet Explorer, Netscape, Firefox) Reads the HTML tags Netscape, Firefox) Reads the HTML tags Sequentially From Top to Bottom and Sequentially From Top to Bottom and Formats the Page Based On What the Tags Formats the Page Based On What the Tags tell the browser to dotell the browser to do

What Do What Do HTML5HTML5 Tags Look Like? Tags Look Like?

HTML5 Tags Look Like:HTML5 Tags Look Like:<p> </p><p> </p> paragraph tagparagraph tag<b> </b><b> </b> bold tagbold tag<ul> </ul><ul> </ul> unordered list tagunordered list tag<li> </li><li> </li> list item taglist 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 Data Between the Tags will be Formatted

According to the TagAccording to the Tag• The Starting Tag Starts the Type of Format; the The Starting Tag Starts the Type of Format; the

Ending Tag Stops the Type of FormatEnding Tag Stops the Type of Format

Slide Menu

Required HTML5 TagsRequired HTML5 Tags<!DOCTYPE html><!DOCTYPE html> This is not an html5 tag but is used to define This is not an html5 tag but is used to define

the documentthe document

<html><html> Every Web Page Starts with the <html> tagEvery Web Page Starts with the <html> tag

<head><head> The Starting <head> tag always follows the The Starting <head> tag always follows the <html> tag<html> tag

<meta charset="UTF-8"> Specifies the character encoding for the Specifies the character encoding for the documentdocument

<title>My First Web Page</title><title>My First Web Page</title> The title tags encompass the title of your The title tags encompass the title of your page; this is the title that shows in the title page; this is the title that shows in the title bar of a windowbar of a window

</head></head> The Ending </head> tag always follows the The Ending </head> tag always follows the ending </title> tagending </title> tag

<body> <body> Starting body tagStarting body tag

Everything that appears on a web page Everything that appears on a web page goes between the <body> and </body> goes between the <body> and </body> tagstags

</body></body> Ending body tagEnding body tag

</html></html> Ends every web pageEnds every web page Slide Menu

HTML5 Additional Requirements HTML5 Additional Requirements for this Classfor this Class

All HTML5 Tags and Tag Elements Must be All HTML5 Tags and Tag Elements Must be in lower-casein lower-case

Every HTML5 Tag Must have a Starting Tag Every HTML5 Tag Must have a Starting Tag AND an Ending Tag unless it is an empty AND an Ending Tag unless it is an empty tag such as the <br> tagtag such as the <br> tag

HTML5 Tags Must be Properly NestedHTML5 Tags Must be Properly Nested HTML5 Tag Attributes Must be in QuotesHTML5 Tag Attributes Must be in Quotes The DOCTYPE Declaration Should be the The DOCTYPE Declaration Should be the

First Line in a HTML5 DocumentFirst Line in a HTML5 Document

Slide Menu

<!DOCTYPE Declaration<!DOCTYPE Declaration The following DOCTYPE Declaration should be the The following DOCTYPE Declaration should be the

first line in your HTML5 documentfirst line in your HTML5 document

<!DOCTYPE HTML>

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 The declaration tells the browser that the page is written in

html 5.html 5.

Starting a Simple Web Page Using Starting a Simple Web Page Using a Text Editora Text Editor

In Window’s, Open NotepadIn Window’s, Open NotepadClick Start Button, Click on All Programs, Click Click Start Button, Click on All Programs, Click

on Accessories, Click on Notepadon Accessories, Click on Notepad

Slide Menu

Notepad OpensNotepad Opens

Slide Menu

Open TextEdit on the MacOpen TextEdit on the Mac

Click Finder on the Click Finder on the DockDock

Click ApplicationsClick Applications

Click on TextEdit Click on TextEdit ICON to OpenICON to Open

Slide Menu

TextEdit OpensTextEdit Opens

Save Your Web PageSave Your Web Page

Slide Menu

Save Your DocumentSave Your Document Whenever you create a web page, Whenever you create a web page,

ALWAYS Save Your Web Page FirstALWAYS Save Your Web Page First• In WindowsIn Windows

Click File on the Menu Bar, Click Save, Click File on the Menu Bar, Click Save, Choose Choose Documents or a Folder of Choice Documents or a Folder of Choice to Save in, type in to Save in, type in Example1.htm in File Name and Click SaveExample1.htm in File Name and Click Save

• In MacIn Mac Click File on the Menu Bar, Click Save As, Click File on the Menu Bar, Click Save As, Choose Choose

DocumentsDocuments for Where, type in Example1.htm in Save for Where, type in Example1.htm in Save As field and Click SaveAs field and Click Save

Type the Following HTML5 Tags into your Example1.htm Type the Following HTML5 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 Above All tags must be in lower-caseAll tags must be in lower-case The DOCTYPE statement is NOT an HTML5 tag. DOCTYPE is The DOCTYPE statement is NOT an HTML5 tag. DOCTYPE is

capitalized. capitalized. Save your document.Save your document. In Notepad, an extension of htm or html needs to be added In Notepad, an extension of htm or html needs to be added

after the filename.after the filename. Minimize the Notepad Window; We Will Come Back to ItMinimize the Notepad Window; We Will Come Back to It

Slide Menu

Windows UsersWindows Users

Locate your Documents folder in Windows Locate your Documents folder in Windows ExplorerExplorer

Locate the Example1.htm fileLocate the Example1.htm file Double-Click on the Example1.htm file to open it Double-Click on the Example1.htm file to open it

(an htm or html extension tells Windows to open (an htm or html extension tells Windows to open the default Web browser and to load the html the default Web browser and to load the html document into it).document into it).

Slide Menu

MacUsersMacUsers

• 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 Your Browser Window Should Open with Your Web Page

Loaded in It.Loaded in It.• It if Doesn’t, Go Back to It if Doesn’t, Go Back to

Starting A Simple Web Page slide and Make Sure You and Make Sure You Saved Your Page CorrectlySaved Your Page Correctly

Slide Menu

Additional Information for Mac UsersAdditional Information for Mac UsersUsing TextEdit for HTML FilesUsing TextEdit for HTML Files

If using TextEdit as your text editor, you may need to make the following If using TextEdit as your text editor, you may need to make the following changes in order to display Web pages correctly:changes in order to display Web pages correctly:

Open the POpen the Preferencesreferences in TextEdit in TextEdit In the In the New DocumentNew Document tab, change the first radio button to "plain text" tab, change the first radio button to "plain text" In the In the Open and SaveOpen and Save tab, make sure the " tab, make sure the "Ignore rich text commands Ignore rich text commands

in HTML pagesin HTML pages" box is selected (first checkbox on the page)" box is selected (first checkbox on the page) Also in the Also in the Open and SaveOpen and Save tab, set the following under the tab, set the following under the HTML Saving HTML Saving

OptionsOptions • 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 fileClose the preferences and open your HTML file When you save your file with Save As, HTML should be in the File Format 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 field. In the Save As field, type the file name followed by .html then click Save.Save.

Slide Menu

View Your Lovely WorkView Your Lovely Work You should see the “Title” on the title bar or in You should see the “Title” on the title bar or in

a tab.a tab. Nothing should appear on the page because Nothing should appear on the page because

nothing has been coded between the body nothing has been coded between the body tags yet.tags yet.

Slide Menu

Add Formatting to TextAdd Formatting to Text Maximize Your Notepad WindowMaximize Your Notepad Window Change Your HTML5 Code To Add the paragraph and bold Change Your HTML5 Code To Add the paragraph and bold

tags so that your code looks similar to the Followingtags so that your code looks similar to the Following

NOTENOTE: The only text formatting that can be done without : The only text formatting that can be done without using style tags is with the strong (same as bold) and em using style tags is with the strong (same as bold) and em (same as italics) tags.(same as italics) tags.

When Done, Save Your Web Page and Minimize the When Done, Save Your Web Page and Minimize the Notepad WindowNotepad Window Slide Menu

View Your WorkView Your Work Go to your Windows or Mac Documents folder Double-Click on the Go to your Windows or Mac Documents folder Double-Click on the

Example1.html ICON or fileExample1.html ICON or file If You Did Everything Correctly, Your Web Page Should Look Similar to If You Did Everything Correctly, Your Web Page Should Look Similar to

the Following and the Following and My FirstMy First should be in should be in Bold.Bold. If you Don’t Have this, Go Back to the If you Don’t Have this, Go Back to the Add Formatting slide and try slide and try

again.again.

Slide Menu

Continuing With Your Web PageContinuing With Your Web Page Create Another Paragraph with the Paragraph TagCreate Another Paragraph with the Paragraph Tag

• Edit Your Example1.htm file in Notepad or TextEdit to add the Edit Your Example1.htm file in Notepad or TextEdit to add the second Paragraph Tag as shown below. second Paragraph Tag as shown below.

• Also add the <em></em> tag for Also add the <em></em> tag for Emphasis Emphasis formatting.formatting.• HTML5 RULE: Tags MUST BE Properly Nested. If formatting HTML5 RULE: Tags MUST BE Properly Nested. If formatting

Starts with <i><b>, the Order of the Ending Tags Must Be: Starts with <i><b>, the Order of the Ending Tags Must Be: </b></i>.</b></i>.

• Save Your File and Minimize the text editor window.Save Your File and Minimize the text editor window.

Slide Menu

</p>

View Your PageView Your Page Go to Your Windows or Mac Documents folder and Go to Your Windows or Mac Documents folder and

Double-Click the Example1.htm ICON or file. Your Double-Click the Example1.htm ICON or file. Your Webpage Should Look Similar to That Shown in Webpage Should Look Similar to That Shown in the Image Below.the Image Below.

If it Doesn’t Go Back and Make CorrectionsIf it Doesn’t Go Back and Make Corrections

Slide Menu

Add a Background ColorAdd a Background Color A Webpage Background Color is Added with an inline style of the A Webpage Background Color is Added with an inline style of the

body tag.body tag. Colors are Entered as 6 character hexadecimal numbers Colors are Entered as 6 character hexadecimal numbers

(colorvalues) or supported colornames(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 Go to the W3Schools site and pick a color that you like and jot site and pick a color that you like and jot

down the 6 character hexadecimal code associated with it.down the 6 character hexadecimal code associated with it. Save Your File and Minimize Your Text Editor WindowSave Your File and Minimize Your Text Editor Window

Slide Menu

View Your Web PageView Your Web Page Go to Your Windows or Mac Documents folder and Go to Your Windows or Mac Documents folder and

Double-Click the Example1.htm ICON/file. Your Double-Click the Example1.htm ICON/file. Your Webpage Should Look Similar to That Shown in the Webpage Should Look Similar to That Shown in the Image Below.Image Below.

If it Doesn’t Go Back to the If it Doesn’t Go Back to the Add a Background Color slide and Make Corrections and Make Corrections

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.com/”>/”>Click hereClick here</a> </a> to go to the Microsoft Site.to go to the Microsoft Site.• This Represents a Link to an This Represents a Link to an ExternalExternal Web Site or site that is Web Site or site that is

outside of the web site from which the current web page is in.outside of the web site from which the current web page is in.• The Information Between the “ ” s is the Address of the Linked The Information Between the “ ” s is the Address of the Linked

to Page.to Page.• When an address starts with http and includes the complete When an address starts with http and includes the complete

path to a page, it is called an path to a page, it is called an absoluteabsolute address. address.• Http stands for Http stands for hyper-text transfer protocolhyper-text transfer protocol. It is the Internet . It is the Internet

protocol used to define how a web page is formatted and protocol used to define how a web page is formatted and displayed.displayed.

• www.microsoft.com is the domain name of where the web is the domain name of where the web page resides.page resides.

• The “/” separates domain names, folder names and web page The “/” separates domain names, folder names and web page names. When no page name is listed, the browser will try to names. When no page name is listed, the browser will try to load a page named index.htm or index.html.load a page named index.htm or index.html.

• 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 Click

Slide Menu

Add a Link continuedAdd a Link continued

A Link to Another Page Within the Same Web Site A Link to Another Page Within the Same Web Site is called an Internal link. An internal link might is called an Internal link. An internal link might Look Like:Look Like:<a href=“computers.htm”><a href=“computers.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 No Path is Specified if page is within the same folder as

calling Web Pagecalling Web Page• The web page will display The web page will display Computers Page Computers Page as a link for as a link for

the user to click on. If the user clicks on it, the the user to click on. If the user clicks on it, the computers.htm page will open.computers.htm page will open.

• When an address does not start with http and just When an address does not start with http and just includes the name of the page, it is called a relative includes the name of the page, it is called a relative address. address.

Relative addresses can include dots and slashes (i.e. ../) Relative addresses can include dots and slashes (i.e. ../) before the page name. The combination of these would tell before the page name. The combination of these would tell the browser in which folder to look for the page relative to the browser in which folder to look for the page relative to the root folder from which the loaded page was opened the root folder from which the loaded page was opened from.from.

Slide Menu

Relative Address ExamplesRelative Address Examples If the address for the object to be loaded only includes the If the address for the object to be loaded only includes the

filename and extension of the object, the browser will look filename and extension of the object, the browser will look for the object in the root folder or folder from which the for the object in the root folder or folder from which the calling page was opened.calling page was opened.• <a href=“planets.htm”>Go to Planets </a><a href=“planets.htm”>Go to Planets </a>• <img src=“saturn.gif” alt=“saturn” /><img src=“saturn.gif” alt=“saturn” />

If the object is located in a sub-folder of the root folder, the If the object is located in a sub-folder of the root folder, the object name is preceded with the folder name and a “/”.object name is preceded with the folder name and a “/”.• The following examples show a relative address to a folder The following examples show a relative address to a folder

named “sample” which is sub-folder of the root folder.named “sample” which is sub-folder of the root folder.• < href=“sample/planets.htm”>Go to Planets </a>< href=“sample/planets.htm”>Go to Planets </a>• <img src=“sample/saturn.gif” alt=“saturn” /><img src=“sample/saturn.gif” alt=“saturn” />

If the object is located in a different folder than the root If the object is located in a different folder than the root folder but on the same level as the root folder, the object folder but on the same level as the root folder, the object name is preceded with ../ followed by the folder name.name is preceded with ../ followed by the folder name.• The following examples show a relative address to a folder The following examples show a relative address to a folder

named “sample” which is at the same level as the root folder.named “sample” which is at the same level as the root folder.• < href=“../sample/planets.htm”>Go to Planets </a>< href=“../sample/planets.htm”>Go to Planets </a>• <img src=“../sample/saturn.gif” alt=“saturn” /><img src=“../sample/saturn.gif” alt=“saturn” />

Slide Menu

Check Your HTML Source CodeCheck Your HTML Source Code If you Use a Web-Page Editor, Check the If you Use a Web-Page Editor, Check the

Source Code of Your <a> tag.Source Code of Your <a> tag.• It Should Look Similar to the Following:It Should Look Similar to the Following:

<a href=“computers.htm”><a href=“computers.htm”>Computers Computers PagePage</a></a>

• The following is Incorrect and Won’t WorkThe following is Incorrect and Won’t Work

<a href="<a href="file:///C:/....... file:///C:/....... </a></a>• 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 When it is Transferred to the Web Server, the

Browser will Look for the File at the Same Location Browser will Look for the File at the Same Location on the User’s Hard Drive. Not Likely There.on the User’s Hard Drive. Not Likely There.

Web Page and Object NamesWeb Page and Object Names IMPORTANT: IMPORTANT: page names specified in page names specified in

the the hrefhref attribute of the attribute of the anchoranchor tag or tag or object names specified in the object names specified in the srcsrc attribute attribute of an of an imgimg tag SHOULD match the name of tag SHOULD match the name of the file or image stored on the server the file or image stored on the server EXACTLYEXACTLY..• Includes case Includes case • No spaces should be included in name.No spaces should be included in name.

Try ItTry It Maximize Your text editor window with Maximize Your text editor window with

Example1.htm Example1.htm Edit 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 text editor Save Your File and Minimize the text editor

WindowWindow

Slide Menu

</p>

View Your Web PageView Your Web Page Go to Your Windows or Mac Documents folder and Double-Go to Your Windows or Mac Documents folder and Double-

Click the Example1.htm ICON/file. Your Webpage Should Click the Example1.htm ICON/file. Your Webpage Should Look Similar to That Shown in the Image Below.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 If it Doesn’t Go Back to the Adding a Link slide, Make , Make

Corrections, and Try AgainCorrections, and Try Again

Slide Menu

Creating A ListCreating A List Ordered Lists (numbered) are Created with the ol Ordered Lists (numbered) are Created with the ol

and li tags and li tags • Example of Two Item Ordered ListExample of Two Item Ordered List

<p>Rivers</p><p>Rivers</p><ol><ol><li>Mississippi</li><li>Mississippi</li><li>Missouri</li><li>Missouri</li></ol></ol>

Unordered Lists (bulleted) are Created with the ul Unordered Lists (bulleted) are Created with the ul and li tagsand li tags• Example of Two Item Unordered ListExample of Two Item Unordered List

<p>Rivers</p><p>Rivers</p><ul><ul><li>Mississippi</li><li>Mississippi</li><li>Missouri</li><li>Missouri</li></ul></ul>

Slide Menu

Creating A List continuedCreating A List continued Description Lists are Created with the dl and dt Description Lists are Created with the dl and dt

and dd tags and dd tags • Example of Two Item Description ListExample of Two Item Description List

<p>Rivers</p><p>Rivers</p><dl><dl><dt>Mississippi</dt><dt>Mississippi</dt><dd>- Longest river in the United States</dd><dd>- Longest river in the United States</dd><dt>Missouri</dt><dt>Missouri</dt><dd>- Second longest river in the United States</dd><dd>- Second longest river in the United States</dd></dl></dl>

Slide Menu

Try ItTry It Maximize Your Example1.htm Window and Edit Your HTML5 Maximize Your Example1.htm Window and Edit Your HTML5

Source Code so That it Looks as Below.Source Code so That it Looks as Below. Save Your File and Minimize Your text editing WindowSave Your File and Minimize Your text editing Window

Slide Menu

</p>

View Your PageView Your Page Go to Your Go to Your

Windows or Mac Windows or Mac Documents folder Documents folder and Double-Click and Double-Click the Example1.htm the Example1.htm ICON/file. Your ICON/file. 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 Don’t Go If They Don’t Go Back to the Back to the Creating a List slide, Make Corrections, , Make Corrections, and Try Againand Try Again

Slide Menu

Adding a Header TagAdding a Header Tag Header 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 Fashion

Header Tags Range From h1 to h6 Header Tags Range From h1 to h6 with h1 Being the Largest and h6 the with h1 Being the Largest and h6 the SmallestSmallest

Examples:Examples: <h1>Main Section</h1><h1>Main Section</h1> <h2>Sub-section</h2><h2>Sub-section</h2> <h3>Sub-sub-section</h3><h3>Sub-sub-section</h3>

Slide Menu

Try ItTry It Maximize your Example1.htm text editing WindowMaximize your Example1.htm text editing Window Edit Your HTML Code To Look as BelowEdit Your HTML Code To Look as Below Save Your File and Minimize the WindowSave Your File and Minimize the Window

Slide Menu

</p>

View Your WorkView Your Work Go to Your Windows or Mac Documents folder and Double-Go to Your Windows or Mac Documents folder and Double-

Click the Example1.htm ICON/file. Your Webpage Should Click the Example1.htm ICON/file. Your Webpage Should Look Similar to That Shown in the Image Below.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 If it Doesn’t Go Back to the Adding a Header slide, Make , Make

Corrections, and Try AgainCorrections, and Try Again

Slide Menu

TablesTables 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 In the Example on the next slide, a 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 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 <td> & </td> is Just Note: The Information Between the <td> & </td> is Just Padding; You Can Have Anything You LikePadding; You Can Have Anything You Like

Open Your Example1.htm file and add the tags for a table. Open Your Example1.htm file and add the tags for a table. Put whatever data you want into the Cells. Save Your File.Put whatever data you want into the Cells. Save Your File.

See the See the W3Schools Tutorial Site for Additional Information for Additional Information on Creating Tables on Creating Tables

Slide Menu

</p>

TablesTables

Slide Menu

</p>

View Your TableView Your Table Double-click on the Windows ICON or Mac Documents folder for Double-click on the Windows ICON or Mac Documents folder for

Example1.htm to View Your WorkExample1.htm to View Your Work It Should Look Similar to the FollowingIt Should Look Similar to the Following If It Doesn’t, Go Back and Review Your TagsIf It Doesn’t, Go Back and Review Your Tags

Slide Menu

Add an ImageAdd an Image Images are added with the Images are added with the imageimage Tag: <img /> Tag: <img /> The img tag is positioned in the xhtml source code where The img tag is positioned in the xhtml source code where

you want the image to be loaded.you want the image to be loaded. In the following example:In the following example:

<img src=“../images/PCClogo-white-blue.gif" width="130" <img src=“../images/PCClogo-white-blue.gif" width="130" height="40" alt="PC-logo" />height="40" alt="PC-logo" />

• PCClogo-white-blue.gif PCClogo-white-blue.gif is the name of the image. is the name of the image. • The image has a The image has a widthwidth of 130 pixels and a of 130 pixels and a heightheight of 40 pixels of 40 pixels• The browser will search and load the image from a folder named The browser will search and load the image from a folder named

imagesimages• The The ../ ../ tells the browser that the images folder is at the same level as 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 root folder or folder from which the calling page was loaded.• ALL OBJECTS including images MUST be transferred to the web server. ALL OBJECTS including images MUST be transferred to the web server.

The The PCClogo-white-blue.gif PCClogo-white-blue.gif image needs to be transferred to the image needs to be transferred to the images folder that is at the same level as the root folder.images folder that is at the same level as the root folder.

• REMEMBER: REMEMBER: The name of the image on the server needs to The name of the image on the server needs to matchmatch the name of the image referenced in the the name of the image referenced in the srcsrc attribute EXACTLY.attribute EXACTLY.

Slide Menu

Add an Image con’t.Add an Image con’t. In the following example:In the following example:

<img src=“images/PCClogo-white-blue.gif" <img src=“images/PCClogo-white-blue.gif" width="130" height="40" alt="PC-logo" />width="130" height="40" alt="PC-logo" />

• PCClogo-white-blue.gif PCClogo-white-blue.gif is the name of the image. is the name of the image. • The image has a The image has a widthwidth of 130 pixels and a of 130 pixels and a heightheight of 40 of 40

pixelspixels• The browser will search and load the image from a folder The browser will search and load the image from a folder

named named imagesimages• Since there is nothing before the Since there is nothing before the imagesimages folder name, folder name,

the browser searches and loads the image from an the browser searches and loads the image from an images folder that is a sub-folder of the root folder or images folder that is a sub-folder of the root folder or folder from which the calling page was loaded.folder from which the calling page was loaded.

Slide Menu

Try ItTry It

Create a sub-folder to your Windows Desktop or Create a sub-folder to your Windows Desktop or Mac Documents folder and name it Mac Documents folder and name it imagesimages..

Click here to open a sample Web page. After it Click here to open a sample Web page. After it opens, right-click on the PCC Logo image at the opens, right-click on the PCC Logo image at the bottom and save it as bottom and save it as PCClogo-white-blue.gifPCClogo-white-blue.gif to the images folder that you created above.to the images folder that you created above.

Slide Menu

Try ItTry It

Update your Example1.htm source code with the new Update your Example1.htm source code with the new informationinformation Slide Menu

View Your Web PageView Your Web Page Go to your Windows Go to your Windows

ICON or Mac ICON or Mac Documents folder Documents folder and double-click the and double-click the Example1.htm to Example1.htm to View Your WorkView Your Work

It Should Look It Should Look Similar to the Similar to the FollowingFollowing

If It Doesn’t, Go If It Doesn’t, Go Back and Review Back and Review Your TagsYour Tags

Slide Menu

HTML5 ValidationHTML5 Validation

Validate HTML5 Validate HTML5 Source CodeSource Code• Verifies If Source Verifies If Source

Code Conforms to Code Conforms to HTML5 StandardsHTML5 Standards

• Pinpoints ErrorsPinpoints Errors• Offers Offers

RecommendationsRecommendations Several Web Sites Several Web Sites

AvailableAvailableTry: Try:

http://validator.w3.orhttp://validator.w3.org/g/

See Web Page Notes See Web Page Notes for Further for Further InformationInformation Slide Menu

HTML5 Validation continuedHTML5 Validation continued

Validate HTML5 Validate HTML5 Source CodeSource Code• Verifies If Source Verifies If Source

Code Conforms to Code Conforms to HTML5 StandardsHTML5 Standards

• Pinpoints ErrorsPinpoints Errors• Offers Offers

RecommendationsRecommendations Several Web Sites Several Web Sites

AvailableAvailableTry: Try:

http://validator.w3.orhttp://validator.w3.org/g/

See Web Page Notes See Web Page Notes for Further for Further InformationInformation Slide Menu

Viewing the HTML5 Source Code Viewing the HTML5 Source Code of a Web Pageof a Web Page

The HTML Code of any Web Page Can The HTML Code of any Web Page Can Easily be Viewed in a BrowserEasily be Viewed in a Browser

In IE, click In IE, click ViewView on the Menu Bar and on the Menu Bar and Select Select SourceSource

In Mozilla Firefox, click In Mozilla Firefox, 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• FileZillaFileZilla

Most Assignments Also Need to be Posted Most Assignments Also Need to be Posted to the Assignment Dropbox in D2Lto 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 Make sure ALL objects are transferred to the

student serverstudent server• Make sure object names are identical to names Make sure object names are identical to names

specified in tagsspecified in tags• Make Sure Your Links WorkMake Sure Your Links Work

That Wasn’t So Hard, Was ItThat Wasn’t So Hard, Was It

Slide Menu

SummarySummary

What is HTML5What is HTML5 HTML5 TagsHTML5 Tags Required HTML5 TagsRequired HTML5 Tags Creating a Web Page in Notepad or Creating a Web Page in Notepad or

TextEditTextEdit Viewing a Web Page in the BrowserViewing a Web Page in the Browser Submitting Your Web PageSubmitting Your Web Page

Slide Menu