How to code, test, and validate a web page

Transcription

1 Chapter 2 How to code, test, and validate a web page Slide 1

2 Objectives Applied 1. Use a text editor like Aptana Studio 3 to create and edit HTML and CSS files. 2. Test an HTML document that s stored on your computer or a local server by loading it into a browser. 3. Validate an HTML document using a web site like W3C Markup Validation Service or Aptana s validation feature. Knowledge 1. Describe the use of the head and body elements in an HTML document. 2. Describe these types of HTML tags: opening, closing, and empty. 3. Describe the use of attributes within HTML tags. 4. Describe the use of HTML comments and whitespace. Slide 2

3 Objectives (cont.) M U R A C H ' S H T M L 5 A N D C S S 3, C 2 5. Describe the components of a CSS rule set. 6. Describe the use of these types of CSS selectors: type, id, and class. 7. Explain how and why you would start a new HTML or CSS file from a template. 8. Describe three ways to run a web page and one way to retest a page after you ve changed the source code for the page. 9. Describe two benefits of validating HTML files. Slide 3

4 The basic structure of an HTML5 document <!DOCTYPE html> DOCTYPE declaration <html> <head>.. </head> <body>.. </body> </html> head element body element document tree Slide 4

5 A simple HTML5 document <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>san Joaquin Valley Town Hall</title> </head> <body> <h1>san Joaquin Valley Town Hall</h1> <p>welcome to San Joaquin Valley Town Hall.</p> <p>we have some amazing speakers in store for you this season!</p> <p><a href="speakers.html">speaker information</a></p> </body> </html> Slide 5

6 Our coding recommendation for HTML5 Do all coding in lowercase because it s easier to read. Slide 6

7 Two elements with opening and closing tags <h1>san Joaquin Valley Town Hall</h1> <p>here is a list of links:</p> Two empty tags <br> <img src="logo.gif" alt="murach Logo"> Correct and incorrect nesting of tags Correct nesting <p>order your copy <i>today!</i></p> Incorrect nesting <p>order your copy <i>today!</p></i> Slide 7

8 How to code an opening tag with attributes An opening tag with one attribute <a href="contact.html"> An opening tag with three attributes <a href="contact.html" title="click to Contact Us" class="nav_link"> How to code an empty tag with attributes <img src="logo.gif" alt="murach Logo"> Slide 8

9 How to code a Boolean attribute <input type="checkbox" name="maillist" checked> Attributes for identifying HTML elements An opening tag with an id attribute <div id="page"> An opening tag with a class attribute <a href="contact.html" title= "Click to Contact Us" class="nav_link"> Slide 9

10 Coding rules M U R A C H ' S H T M L 5 A N D C S S 3, C 2 An attribute consists of the attribute name, an equals sign (=), and the value for the attribute. Attribute values don t have to be enclosed in quotes if they don t contain spaces. Attribute values must be enclosed in single or double quotes if they contain one or more spaces, but you can t mix the type of quotation mark used for a single value. Boolean attributes can be coded as just the attribute name. To code multiple attributes, separate each attribute with a space. Our coding recommendation For consistency, enclose all attribute values in double quotes. Slide 10

11 A document with comments and whitespace <!DOCTYPE html>  <html> <head> <title>san Joaquin Valley Town Hall</title> </head> <body> <h1>san Joaquin Valley Town Hall</h1> <h2>bringing cutting-edge speakers to the valley </h2>  Slide 11

12 Our coding recommendations Use whitespace to indent lines of code and make them easier to read. Don t overdo your use of whitespace, because it does add to the size of the file. Slide 12

13 The parts of a CSS rule set selector property value h1 { color: navy; } Declaration (or rule) Slide 13

14 A simple CSS document with comments /********************************************************* * Description: Primary style sheet for valleytownhall.com * Author: Anne Boehm *********************************************************/ /* Adjust the styles for the body */ body { background-color: #FACD8A; /* a shade of orange */ } /* Adjust the styles for the headings */ h1 { color: #363636; } h2 { font-style: italic; border-bottom: 3px solid #EF9C00; /* bottom border */ } /* Adjust the styles for the unordered list */ ul { list-style-type: square; /* Change the bullets */ } Slide 14

15 Elements that can be selected by type, id, or class <body> <div id="main"> <h1 class="base_color">student materials</h1> <p>here are the links for the downloads:</p> <ul id="links"> <li><a href= "exercises.html">exercises</a></li> <li><a href= "solutions.html">solutions</a></li> </ul> <p id="copyright" class= "base_color">copyright 2012</p> </div> </body> Slide 15

16 CSS rule sets that select by type, id, and class Type body { font-family: Arial, sans-serif; } ID #main { width: 300px; padding: 1em; } #copyright { font-size: 75%; text-align: right; } Class.base_color { color: blue; } Slide 16

17 The elements in a browser Slide 17

18 The last dialog box for creating an Aptana project Slide 18

19 The root folder for all of the book applications C:\html5_css3\book_apps How to create a project Use the File New Web Project command to display the New Web Project dialog box. Or, in the App Explorer window, click on the Create Project button, select Web Project, and click the Next button to display the New Web Project dialog box. In the New Web Project dialog box, enter a name for the project. Next, uncheck the Use Default Location box, click on the Browse button, and select the top-level folder for the project. If a warning message appears, read it so you realize that deleting the project in Aptana may also delete the project on the disk drive. Then, click the Finish button. Slide 19

20 A project and HTML file in Aptana Slide 20

21 How to open an HTML file within a project Use the drop-down list in Aptana s App Explorer to select the project. Then, locate the file and double-click on it. How to open an HTML file that isn t in a project Use Aptana s Project Explorer to locate the file. Then, doubleclick on it. Use the File Open File command. Slide 21

22 How to create a new HTML file from a template Slide 22

23 How to start a new HTML file from any template Select the File New File command. In the New File dialog box that s displayed, select the folder for the new file and enter a filename including its.html extension. Still in the New File dialog box, click on the Advanced button, check the Link to File in the File System box, click on the Browse button, and select the template for the new file. Click the Finish button. Slide 23

24 How to start a new HTML file from another file Open the file that you want to base the new file on. Then, use the File Save As command to save the file with a new name. Slide 24

25 Aptana with an HTML auto-completion list Slide 25

26 Common coding errors M U R A C H ' S H T M L 5 A N D C S S 3, C 2 An opening tag without a closing tag. Misspelled tag or attribute names. Quotation marks that aren t paired. Incorrect file references in link, img, or <a> elements. Slide 26

27 How to set the syntax colors Use the Window Preferences command to open the Preferences dialog box.\ Click on Aptana Studio, click on Themes, and choose a theme from the drop-down list. In this book, we use the Dreamweaver theme. Slide 27

28 How to create a new CSS file from a template Slide 28

29 How to start a new CSS file from any template Select the File New File command. In the New File dialog box, select the folder for the new file, and enter a filename for the new file, including its.css extension. Still in the New File dialog box, click on the Advanced button, check the Link to File in the File System box, click on the Browse button, and select the template for the new file. Click the Finish button. How to start a new CSS file from another CSS file Open the file that you want to base the new file on. Then, use the File Save As command to save the file with a new name. Slide 29

30 Aptana with an auto-completion list for a CSS file Slide 30

31 Common coding errors M U R A C H ' S H T M L 5 A N D C S S 3, C 2 Braces that aren t paired correctly. Missing semicolons. Misspelled property names. Id or class names that don t match the names used in the HTML. Notes Aptana s color coding indicates that a measurement like.5em is incorrect. However, the digit before the decimal point isn t required, so an entry like.5em will be rendered correctly. Slide 31

32 The Show Preview and Run buttons Show Preview button Run button Slide 32

33 The Aptana preview of javascript_book.html Slide 33

34 The HTML file displayed in the Firefox browser Slide 34

35 How to run a web page that s on an intranet or your own computer Use your browser s File Open or Open File command. Type the complete path and filename into your browser s address bar, and press Enter. On a Windows system, use Windows Explorer to find the HTML file, and double-click on it. If you re using Aptana, select the HTML file and click the Run button to open the file in the default browser. If you re using another text editor or IDE, look for a similar button or command. Slide 35

36 How to rerun a web page from a browser Click the Reload or Refresh button in the browser. How to test a web page Run the page in all of the browsers that are likely to access your site. Check the contents and appearance of the page to make sure it s correct in all browsers. Click on all of the links to make sure they work properly. How to debug a web page Find the causes of the errors in the HTML or CSS code, make the corrections, and test again. Slide 36

37 The home page for the W3C validator Slide 37

38 How to use the W3C Markup Validation Service Go to this URL: Identify the file to be validated, and click the Check button. How to validate an HTML file from Aptana Select the file. Issue the Commands HTML Validate Syntax (W3C) command. Slide 38

39 Aptana validator output for an HTML file Slide 39

40 The CSS Validation Service with errors displayed Slide 40

41 How to use the W3C CSS Validation Service Go to the URL that follows, identify the file to be validated, and click the Check button: How to validate a CSS file from Aptana Select the file. Issue the Commands CSS Validate Selected CSS (W3C) command. Slide 41