Intro to Web Development HTML Structure
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.
New Lines <!DOCTYPE html>¶ <html>¶ <head>¶ <title>First HTML5 Web Page</title>¶ </head>¶ <body>¶ <p>¶ Hello, class!¶ </p>¶ ¶ Hope you enjoy the show.¶ </body>¶ </html>¶ Because it is a text file, the “new line” character(s) is interpreted to start a new line when displayed. HTML interprets new line characters differently. HTML interprets a new line character in source code as a space.
Space Characters Whitespace characters <!DOCTYPE█html> ██<head> ████<title>First█HTML5█Web█Page</title> ██</head> ██<body> ████<p> ██████Hello,█class! ████</p> ██████Hope you enjoy the show. ██</body> </html> Whitespace characters White space characters include the space, tab, new lines and a few other characters which take up a blank character position when displayed. This is one of the defining features of “text” files.
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!
Where did the new lines go? <!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> How do we get new lines on a web page? How do we get new lines on a web page it the browsers ignore the new line characters in the source code file?
“New Lines” in HTML Some elements, like <p>, always start on a new line: HTML source file: <p>Hello, class!</p><p>Enjoy the show.</p> Browser renders as: Hello, class! Enjoy the show.
<br> in HTML The HTML element <br> (“break”) causes a new line. HTML source file: <p>Hello, class!<br>Enjoy the show.</p> Browser renders as: Hello, class! Enjoy the show.
<br> The <br> tag doesn’t have a closing element, i.e, there is no </br> in HTM5. While most tags in HTML come in opening and closing pairs, Like <html></html> and <body> and </body> , some tags, like <br>, Do not. These are called void tags. Other HTML5 void tags include <img> (image), <hr> (horizontal rule) and meta (meta information).
Enclosing Tags Elements that have opening and closing tags can contain other tags, i.e., tags can nest. <html> <head> <title>Hello!</title> </head> <body> </body> </html> html element head element title element body element
Indentation Shows Nesting Elements that have opening and closing tags can contain other tags, i.e., tags can nest. <html> <head> <title>Hello</title> </head> <body> </body> </html> html element head element title element body element
Invalid Nesting <html> <head> <body> </head> Elements cannot over lap. <html> <head> <body> </head> </body> </html> html element head element For any two elements on a web page, Either: One completely includes the other, or The other is completely separate. body element
Document Type Tag <!DOCTYPE html> <html> <head> <title>First HTML5 Web Page</title> </head> <body> <p> Hello, class! </p> Hope you enjoy the show. </body> </html> First line of every web page is the DOCTYPE tag. This tell the browser what kinds of document the file is. In this, this tag means that this is an HTML5 version html text file. A web page has one and only one DOCTYPE tag, and it must be the first line. All the lines in this file are HTML EXCEPT the first, <!DOCTYPE line.
<html> Tags <!DOCTYPE html> <html> <head> <title>First HTML5 Web Page</title> </head> <body> <p> Hello, class! </p> Hope you enjoy the show. </body> </html> The 2nd line of every web page is a <html> tag. The last line of the web page is the corresponding closing tag. Each web page as has one and only one pair of html tags. It tells the browser that everything between the open tag <html> and closing tag </html> is html.
<head> Tags <!DOCTYPE html> <html> <head> <title>First HTML5 Web Page</title> </head> <body> <p> Hello, class! </p> Hope you enjoy the show. </body> </html> The <head> section is 1st element inside the <html> element. .
<body> Tags <!DOCTYPE html> <html> <head> <title>First HTML5 Web Page</title> </head> <body> <p> Hello, class! </p> Hope you enjoy the show. </body> </html> The <body> section is 2nd element inside the <html> element. .
Opening Tag <title>First HTML5 Web Page</title> Title opening tag
Closing Tag <title>First HTML5 Web Page</title> Title closing tag
HTML Element <title>First HTML5 Web Page</title> Title HTML Element An HTML element includes: The opening tag The text between the opening and closing tag The closing tag
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
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
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
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
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
HTML5 Elements There are 112 HTML5 elements (the number slowly increases as new elements are introduced). “Learning HTML5” is learning what these 112 elements mean and how to use them on a web page. So far, we have introduced five elements: <html> <head> <body> <title> <p>
HTML5 Elements The <html> </html> tags form a container for all the html markup and text on the page, i.e., the html element IS the entire web page. The html element contains two elements, the <head> element and the <body> element. The <head> element contains information about the web page, i.e., “meta” information, but not any contents of the page itself. The <body> element contains the information to be displayed in the browser window. The <p> (paragraph) element contains a paragraph of text.
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">
Coding Standards html tag names always in lower case. attribute names always in lower case. attribute values always in double quotes. Indent code when an element is "inside" another element. Use only two spaces for indentation.