Intro to Web Development Class A Review
Two Ways to View Web Page As Web Page: In Browser
Two Ways to View Web Page As Web Page: In Browser As Text File: In Editor
A Web Page Uses Three languages
A Web Page Uses Three languages HTML
A Web Page Uses Three languages CSS
A Web Page Uses Three languages JavaScript
Web Page Source Code Readable by humans and machines. <!DOCTYPE html> <html> <head> <title>First HTML5 Web Page</title> </head> <body> <p> Hello, class! </p> Hope you enjoy the show. </body> </html> Readable by humans and machines. Web pages are text files.
Web Page Source Code Markup is inside <>s. <!DOCTYPE html> <head> <title>First HTML5 Web Page</title> </head> <body> <p> Hello, class! </p> Hope you enjoy the show. </body> </html> Markup is inside <>s. “Markup” is inside angle brackets
Web Page Source Code Text is outside <>s. <!DOCTYPE html> <head> <title>First HTML5 Web Page</title> </head> <body> <p> Hello, class! </p> Hope you enjoy the show. </body> </html> Text is outside <>s.
How Browsers See HTML <!DOCTYPE█html>█<html>█<head>█<title>First█HTML5█Web█Page</title>█</head>█<body>█<p>█Hello,█class!</p>█<p>█Hope you enjoy the show.█</p>█</body>█</html> The browser converts all new line characters and tabs into white space, like the space character. Consecutive spaces are converted to a single space. All the new line characters are gone!
5 Required Web Page Elements <!DOCTYPE html> <html> <head> <title>First HTML5 Web Page</title> </head> <body> <p> Hello, class! </p> Hope you enjoy the show. </body> </html>
5 Required Web Page Elements <!DOCTYPE html> <html> <head> <title>First HTML5 Web Page</title> </head> <body> <p> Hello, class! </p> Hope you enjoy the show. </body> </html> DOCTYPE
5 Required Web Page Elements <!DOCTYPE html> <html> <head> <title>First HTML5 Web Page</title> </head> <body> <p> Hello, class! </p> Hope you enjoy the show. </body> </html> html element
5 Required Web Page Elements <!DOCTYPE html> <html> <head> <title>First HTML5 Web Page</title> </head> <body> <p> Hello, class! </p> Hope you enjoy the show. </body> </html> head element
5 Required Web Page Elements <!DOCTYPE html> <html> <head> <title>First HTML5 Web Page</title> </head> <body> <p> Hello, class! </p> Hope you enjoy the show. </body> </html> body element
5 Required Web Page Elements <!DOCTYPE html> <html> <head> <title>First HTML5 Web Page</title> </head> <body> <p> Hello, class! </p> Hope you enjoy the show. </body> </html> title element
<p> Element (optional) <!DOCTYPE html> <html> <head> <title>First HTML5 Web Page</title> </head> <body> <p> Hello, class! </p> Hope you enjoy the show. </body> </html> paragraph elements
HTML Attributes <html lang="en"> Element Attribute Attributes are only allowed in opening HTML tags An opening tag may contain zero, one or many attributes. If there is more than one attribute, they are separated by spaces. Attribute format: attrib=“value”.
Attribute Examples <html lang="en"> <meta charset="utf-8"> <link rel="stylesheet" href="reset.css"> <div id="container"> <section id="logo">
HTML5 Elements So far, we have introduced 7 elements: <!doctype html> <html> <head> <body> <title> <p> <br>
Text for class: www.ScottsDevelopers.com > Resources
Text for class: