Presentation is loading. Please wait.

Presentation is loading. Please wait.

Computer Concepts I and II Sue Norris

Similar presentations


Presentation on theme: "Computer Concepts I and II Sue Norris"— Presentation transcript:

1 Computer Concepts I and II Sue Norris
Creating A Web Page Computer Concepts I and II Sue Norris

2 Agenda What is HTML HTML and XHTML Tags Required HTML and XHTML Tags
Using Notepad to Create a Simple Web Page Viewing Your Web Page in a Browser Submitting Your Project

3 Slide Menu HTML XHTML Required HTML Tags XHTML Requirements
Creating a Web Page with Notepad Formatting Tags Paragraph Tag Page Background Color Anchor Tag for Links Lists Header Tags Further HTML Training XHTML Addition DOCTYPE Statement Further XHTML Training XHTML Validation Viewing HTML Source Transfer Files to Web Server Tables

4 Hyper Text Markup Language
Every Web Page is Formatted with HTML markup tags HTML Markup tags Tell a Browser How to Display a Web Page A Web Page ALWAYS has a File Extension of htm or html The Browser (ie Internet Explorer, Netscape, Firefox) Reads the HTML tags Sequentially From Top to Bottom and Formats the Page Based On What the Tags Say

5 XHTML Extensible HyperText Markup Language
Almost Identical to HTML 4.01 Stricter and Cleaner Version of HTML

6 Distributed Hypermedia
Documents can contain links to other documents, hence “distributed hypermedia” Proposed by CERN in 1989 Conseil Européen poir la Rescherche Nucléaire “European Council for Nuclear Research” Portions of the same document may reside on different systems 4/11/2017 CIS Portland Community College

7 CIS 121 - Portland Community College
Browsers Browsers are software programs that integrate distributed hypermedia Browsers pull together the elements from various systems and present a unified whole image to the user Developed by 1993 Netscape, Internet Explorer are examples 4/11/2017 CIS Portland Community College

8 Guide Lines for System Design
A system should be: Transparent Forgiving Visually Oriented 4/11/2017 CIS Portland Community College

9 CIS 121 - Portland Community College
Style Points Good Design Fully functional Seamless Tested Use Outline Format <HTML> <BODY> </BODY> </HTML> 4/11/2017 CIS Portland Community College

10 CIS 121 - Portland Community College
Style Rules Use standard HTML so that it can be read everywhere Use common sense with colors and backgrounds, and effects Avoid large downloads Make it easy for the user to navigate 4/11/2017 CIS Portland Community College

11 CIS 121 - Portland Community College
More Style Rules Make it easy to read Be on your best behavior Keep it simple Avoid typografical errors Make sure everything works 4/11/2017 CIS Portland Community College

12 CIS 121 - Portland Community College
HTML Basics Element – A region of the HTML file that has similar display requirements Tag – Special HTML markers that identify the start and end of an element Attribute – Additional information that tells the browser something about the element Elements may be text, images, sounds, or anything else that appears in the document. 4/11/2017 CIS Portland Community College

13 CIS 121 - Portland Community College
Syntax Tag and Attribute ‘names’ are case Insensitive. Attribute ‘values’ are case Sensitive. For this class: ‘Names’ will NOT be capitalized ‘Values’ will use upper and lower case 4/11/2017 CIS Portland Community College

14 What Do HTML Tags Look Like?
<p> </p> paragraph tag <b> </b> bold tag <ul> </ul> unordered list tag <li> </li> list item tag What is Common About HTML Tags? Starting and Ending Tags Data 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 Format

15 The Following HTML Tags are Required/Recommended for Every We Pages
Required HTML Tags The Following HTML Tags are Required/Recommended for Every We Pages <html> Every Web Page Starts with the <html> tag <head> The Starting <head> tag always follows the <html> tag <title>My First Web Page</title> The title tags encompass the title of your page </head> The Ending </head> tag always follows the ending </title> tag <body> Starting body tag Everything that appears on a web page goes between the <body> and </body> tags </body> Ending body tag </html> Ends every web page

16 CIS 121 - Portland Community College
HTML Page Structure <HTML> <HEAD> <TITLE> Title of the Page </TITLE> </HEAD> <BODY> Main Portion of Page </BODY> </HTML> 4/11/2017 CIS Portland Community College

17 XHTML Additional Requirements
All HTML Tags and Tag Elements Must be in lower-case Every HTML Tag Must have a Starting Tag AND an Ending Tag HTML Tags Must be Properly Nested HTML Tag Attributes Must be in Quotes The Id attribute replaces the Name Attribute The DOCTYPE Declaration Should be the First Line in a XHTML Document Slide Menu

18 Starting a Simple Web Page
Open Notepad Click Start Button, Click on All Programs, Click on Accessories, Click on Notepad Slide Menu

19 Notepad Opens Save Your Web Page
Click File on the Menu Bar, Click Save, [Choose Your Website Folder] for Save in, type in INDEX.html in File Name and Click Save Slide Menu

20 Type the Following HTML Tags into your Example1.htm document.
Type in the Tags Exactly as You See Them Above To Comply with XHTML coding standards: ALL xHTML tags MUST be in lower case ALL tags MUST have a starting tag and an ending tag Save Your Web Page Click File on the Menu Bar, Click Save Minimize the Notepad Window; We Will Come Back to It Slide Menu

21 Go to your Website Folder Double-Click on the Index.html file
You Should See the Index.html file Double-Click on the Index.html file Slide Menu

22 View Your Lovely Work Your Browser Window Should Open with Your Web Page Loaded in It. It if Doesn’t, Go Back to one slide and Make Sure You Saved Your Page Correctly Slide Menu

23 Add Formatting to Text Maximize Your Notepad Window
Change Your HTML Code To Add the Bold Tag or Other Text Formatting Tag, and So It Looks Similar to the Following NOTE: The Yellow Background is Only to Highlight the Inserted Tag When Done, Save Your Web Page and Minimize the Notepad Window Slide Menu

24 Go back to your Browser and webpage and Refresh the browser.
This can be done by either hitting the F5 key or clicking on the refresh icon Slide Menu

25 View Your Work If You Did Everything Correctly, Your Web Page Should Look Similar to the Following and My First should be in Bold: Slide Menu

26 Continuing With Your Web Page
Create Two Paragraphs with the Paragraph Tag Edit Your Example1.htm file in Notepad to add the two Paragraph Tags that you See Below. Also add the <u></u> and <i></i> tags for Underline and Italics formatting. XHTML RULE: Tags MUST BE Properly Nested. If formatting Starts with <i><u>, the Order of the Ending Tags Must Be: </u></i>. Save Your File and Minimize the Notepad Window Slide Menu

27 View Your Page Go back to your Browser and webpage and Refresh the browser. Your Webpage Should Look Similar to That Shown in the Image Below. If it Doesn’t Go Back to the last slide and make corrections Slide Menu

28 Add a Background Color A Webpage Background Color is Added with the bgcolor parameter of the Body Tag Colors are Entered as 6 character hexadecimal numbers Code Must Start with # and be enclosed in “” Go to the HTML Color Picker site and pick a color that you like and jot down the 6 character hexadecimal code associated with it. Save Your File and Minimize Your Notepad Window Slide Menu

29 View Your Web Page Go back to your Browser and webpage and Refresh the browser. Your Webpage Should Look Similar to That Shown in the Image Below. If it Doesn’t Go Back to Slide 16 and Make Corrections Slide Menu

30 Add a Link Links Are Created with the Anchor Tag: <a></a>
A Link to the Microsoft web site would look like: <a href=“http://www.microsoft.com/”>Click here</a> to go to the Microsoft Site. This Represents a Link to an External Web Site The Information Between the “ ” s is the Address of the Linked to Page The Information in Yellow and Between the > and </a> is What Appears on the Web Page for the User to Click A Link to Another Page Within the Same Web Site Might Look Like: <a href=“computers.htm”>Computers Page</a> Name of Page is computers.htm No Path is Specified if page is within the same folder as calling Web Page Computers Page is What Will Display on Calling Page for User to Click Slide Menu

31 Try It Maximize Your Notepad Window with INDEX.html
Edit your HTML Code So That It Looks as Pictured Below. Save Your File and Minimize the Notepad Window Slide Menu

32 View Your Web Page Go back to your Browser and webpage and Refresh the browser. Your Webpage Should Look Similar to That Shown in the Image Below. Try Your Link. Does It Go to the Microsoft Site? If it Doesn’t Go Back to the last slide, Make Corrections, and Try Again Slide Menu

33 Creating A List Ordered Lists (numbered) are Created with the OL and LI tags Example of Two Item Unordered List <p>Rivers</p> <ul> <li>Mississippi</li> <li>Missouri</li> </ul> Unordered Lists (bulleted) are Created with the UL and LI tags Example of Two Item Ordered List <p>Rivers</p> <ol> <li>Mississippi</li> <li>Missouri</li> </ol> Slide Menu

34 Try It Maximize Your Example1.htm Notepad Window and Edit Your HTML Source Code so That it Looks as Below. Save Your File and Minimize Your Notepad Window Slide Menu

35 View Your Page Go back to your Browser and webpage and Refresh the browser. Your Webpage Should Look Similar to That Shown in this slide. Do your Lists Look Similar? If They Don’t Go Back one Slide, Make Corrections, and Try Again Slide Menu

36 Adding a Header Tag 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 Examples: <h1>Main Section</h1> <h2>Sub-section</h2> <h3>Sub-sub-section</h3> Slide Menu

37 Try It Maximize your Example1.htm Notepad Window
Edit Your HTML Code To Look as Below Save Your File and Minimize the Window Slide Menu

38 View Your Work Go back to your Browser and webpage and Refresh the browser. Your Webpage Should Look Similar to That Shown in the Image Below. Do You Notice the Heading Difference? If it Doesn’t Go Back to Slide 25, Make Corrections, and Try Again Slide Menu

39 Tables Tables are Created with the following tags:
TR for table Rows TD for Table Cells In the Example to the Right, a 3 Row, 3 Column Table is Created The Table is 500 pixels wide The Table has a border that is 1 pixel wide. Note: The Information Between the <td> & </td> is Just Padding; You Can Have Anything You Like Return to your notepad 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 Slide Menu

40 View Your Table Go back to your Browser and webpage and Refresh the browser. View Your Work It Should Look Similar to the Following If It Doesn’t, Go Back and Review Your Tags Slide Menu

41 Adding Images to Web Pages
<IMG> Element Links page to .gif, .xbm, or .jpeg files “Open” element that is defined by the SRC attribute <IMG SRC=XXX > 4/11/2017 CIS Portland Community College

42 Adding Sounds Use anchor element to point to “.wav” file
<A HREF=“xxx.wav”> 4/11/2017 CIS Portland Community College

43 Further HTML Training Continue Training at the W3Schools HTML Tutorial Site:

44 XHTML Finishing Touches
DOCTYPE Statement Required First Statement in XHTML Source Code Three Document Type Definitions (DTD) Supported Strict Transitional Frames Transitional is Most Common Fine for This Class If Cascading Style Sheets (CSS) are Used, Strict DTD Should be Used <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> Slide Menu

45 Add DOCTYPE Statement Return to your Notepad Window and Edit Your HTML Code so That it Looks as Below Save Your Page, Minimize the Window, then Check Your Web Page to Make Sure it Opens Slide Menu

46 Further XHTML Training
Continue Your XHTML Training at: Tutorials From Introduction to Validation are Required Slide Menu

47 XHTML Validation Validate HTML Source Code Several Web Sites Available
Verifies If Source Code Conforms to XHTML Standards Pinpoints Errors Offers Recommendations Several Web Sites Available Try: See Web Page Notes for Further Information Slide Menu

48 Viewing the HTML Source Code of a Web Page
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 Mozilla Firefox, click View on the Menu Bar and Select Page Source Slide Menu

49 Transfer Files to Web Server
Use a FTP Program To Transfer Student Web Pages and Files to the Web Server WS_FTP LE IE FTP Client Fetch That Wasn’t So Hard, Was It Slide Menu

50 Summary What is HTML HTML Tags Required HTML Tags
Creating a Web Page in Notepad Viewing a Web Page in the Browser Submitting Your Web Page Slide Menu


Download ppt "Computer Concepts I and II Sue Norris"

Similar presentations


Ads by Google