Coding, Testing and Valdating a Web Page Chapter 2
Learning Outcomes Use a text editor like Notepad to create and edit HTML files. Test an HTML document that’s stored on your computer or a local server by loading it into a browser. Validate an HTML document using a website like W3C Markup Validation Service. Describe the use of the head and body elements in an HTML document. Describe the use of attributes within HTML tags. Describe the use of HTML comments and whitespace.
Our First HTML5 Web Page: index.html <!DOCTYPE html> <html lang="en"> <head> <title>Page Title Goes Here</title> <meta charset="utf-8"> </head> <body> <p>Hello World!</p> </body> </html>
HTML Basics Most HTML Elements consist of an opening and closing tag set <body> . . . </body> Some HTML Elements do not have a closing tag <br>, <img> Many HTML elements have Attributes consisting of the attribute name, an equal sign and the attribute value enclosed in quotes <html lang="en">, <meta charset="utf-8">
Basic Structure of an HTML5 document DOCTYPE declaration <!DOCTYPE html> <html lang="en"> <head> . </head> <body> </html> Head element Document tree Body element
Head & Body Sections Head Section Contains information that describes the web page document <head> …head section info goes here </head> Body Section Contains text and elements that display in the web page document <body> …body section info goes here </body>
HTML <title> and <meta> tags title and meta tags are coded between the opening and closing head tags <!DOCTYPE html> <html lang="en"> <head> <title>My First HTML5 Web Page</title> <meta charset="utf-8"> </head> <body> <p>Hello World</p> </body> </html>
Body element Everything you see in the browser window has to be in between the body opening and closing tags So, for this page all you will see is Hello World <!DOCTYPE html> <html lang="en"> <head> <title>My First HTML5 Web Page</title> <meta charset="utf-8"> </head> <body> <p>Hello World</p> </body> </html>
Semantic Tagging HTML tags are used to tag content according to the purpose of the content HTML tags are not used to tag content so that it looks a certain way Web Designers call this Semantic Tagging CSS will be used for all presentation how the content looks or is formatted
Coding HTML Rules of Thumb Although you can code the HTML using lowercase, uppercase, or mixed case, we recommend that you do all coding in lowercase because it’s easier to read. Use whitespace to indent lines of code and make them easier to read.
Common HTML Coding Errors Forgetting to close an HTML element with a closing tag Misspelling tags names Misspelling attribute names Quotation marks that are not paired Incorrect file names and paths
display Property Display = block All HTML elements are either Inline or Block display elements Inline and Block define how an element is displayed in relation to other adjacent content Display = inline An inline element only takes up as much width as necessary, and does not force line breaks; displayed next to adjacent content. Display = block A block element is an element that takes up the full width available, and has a line break before and after it; displayed on separate line from adjacent content.
The Paragraph Element (block) <p> tag <p> …paragraph goes here… </p> Groups sentences and sections of text together. Configures empty space above and below the paragraph
Nesting elements Is is common practice to code elements nested inside each other as long as the interior nested elements are inline elements Correct Example: <p><strong>this is bold text</strong></p> Incorrect Example: <p><strong>this is bold text</p></strong> Never include block elements inside other block elements unless you are building a list, then the list item tags are always inside the list tags OR the outer element is a div tag
Writing Valid HTML Benefit: Check your code for syntax errors Valid code more consistent browser display W3C HTML Validation Tool http://validator.w3.org Additional HTML5 Validation Tool http://html5.validator.nu
Home Page for the W3C HTML Validator
The errors and warning for an HTML file with a missing > at the end of the img element