creating a web page with html5 computer concepts i and ii sue norris
TRANSCRIPT
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