SUMMARY Starter What can you break without touching

SUMMARY Starter What can you break without touching it?

SUMMARY Starter What can you break without touching it? Your Promise

HTML SKELTON <!DOCTYPE html> <head> <title> I Love Chocolate</title> </head> <body> <h 1>This is the Body of the Page</h 1> <p>Anything within the body of a web page is displayed in the main browser window. </p> </body> </html>

HTML ELEMENT MOST HTML ELEMENTS ARE WRITTEN WITH A START TAG and END TAG, WITH THE CONTENT IN BETWEEN: <tagname>content</tagname> THE HTML ELEMENT IS EVERYTHING FROM THE START TAG TO THE END TAG: <p>My first HTML paragraph. </p>

HTML ELEMENT <p> </p> OPENING TAG CLOSING TAG

HTML OPENING TAG <p> LEFT-ANGLE BRACKET RIGHT-ANGLE BRACKET CHARACTER(S)

HTML CLOSING TAG </p> LEFT-ANGLE BRACKET FORWARD SLASH RIGHT-ANGLE BRACKET CHARACTER(S)

HTML DOCUMENT SKELETON ● All HTML documents must start with a type declaration: <!DOCTYPE html>. ● The HTML document itself begins with <html> and ends with </html>. ● The behind-the-scenes part of the HTML document is between <head> and ends with </head>. ● The visible part of the HTML document is between <body> and </body>.

HTML DOCUMENT SKELTON <!DOCTYPE html> <head> <title></title> </head> <body> </html>

<!DOCTYPE html> DECLARATION <!DOCTYPE html> <head> <title></title> </head> <body> </html> The <!DOCTYPE> declaration is not an HTML tag; it is an instruction to the web browser about what version of HTML the page is written in. Tip: Always add the <!DOCTYPE> declaration to your HTML documents, so that the browser knows what type of document to expect.

<html> </html> HTML ELEMENT <!DOCTYPE html> <head> <title></title> </head> <body> </html> The <html> tag tells the browser that this is an HTML document. The <html> tag represents the root of an HTML document. The <html> tag is the container for all other HTML elements (except for the <!DOCTYPE> tag).

<head> </head> HEAD ELEMENT <!DOCTYPE html> <head> <title></title> </head> <body> </html> The <head> element is a container for all the head elements. The <head> element can include a title for the document, scripts, styles, meta information, and more. These are element that the view can’t see on the page but are in the background. Think of it as the <head> contains your thoughts and the <body> contains what they see.

<title> </title> TITLE ELEMENT <!DOCTYPE html> <head> <title> HOME </title> </head> <body> </html> The <title> tag is required in all HTML documents and it defines the title of the document. IT ALWAYS GOES IN THE HEAD • defines a title in the browser toolbar • provides a title for the page when it is added to favorites • displays a title for the page in search-engine results HOME

<body> </body> BODY ELEMENT <!DOCTYPE html> <head> <title></title> </head> <body> </html> The <body> tag defines the document's body. The <body> element contains all the contents of an HTML document, such as text, hyperlinks, images, tables, lists, etc

BODY and HEAD <!DOCTYPE html> <head> <title></title> </head> <body> </html> THIS is the body. .

ALWAY START WITH BASIC SKELETON <!DOCTYPE html> <head> <title></title> </head> <body> </html> ● This is a basic html document. ● It needs to be saved with the extension. html ● Your home page needs to be called index. html ● All other page name should be descriptive. ○ contact. html, shop. html, gallery. html ● Your head should only contain your title and information that your viewer does not need to see. ● Your body is where most of your html will go.

<p> </p> ELEMENT index. html <body> The HTML <p> element defines a paragraph. <p>This is a paragraph</p> <p>This is another paragraph</p> </body> This is a paragraph This is another paragraph

<h 1> </h 1> HEADING ELEMENT index. html <body> <h 1>Level 1</h 1> <h 2>Level 2</h 2> THIS IS NOT THE SAME AS THE HEAD ELEMENT Heading Tags are used as Titles or Subtitles on a Web Page or Website. These tags start with w letter H followed by a number. The higher the number the smaller the font size. <h 3>Level 3</h 3> <h 4>Level 4</h 4> <h 5>Level 5</h 5> Level 1 <h 6>Level 6</h 6> </body> Level 2 Level 3 Level 4 Level 5 Level 6

LINE BREAKS is self-closing tag index. html <body> <p>The Earth<br />gets one hundred tons heavier every day due to falling space dust. </p> </body> Line Breaks are used if you need to indent in your paragraphs. The Earth gets one hundred tons heavier every day due to falling space dust. .

HORIZONTAL RULES<hr /> is a self closing tag index. html <body> <p> Venus is the only planet that rotates clockwise. </p> <hr /> <p> Jupiter is bigger than all the other planets combined. </p> </body> Venus is the only planet that rotates clockwise. Jupiter is bigger than all the other planets combined.

HTML ASSIGNMENT 1: Skeleton and tags CREATE an index. html file INSIDE INCLUDE: Proper HTML Skeleton with the following elements doctype, html, head, title and body DEFINE and USE the p, h 1 -h 6, title, line break and horizontal rule inside the skeleton LEARN, USE and DEFINE the following tags UN-ORDERED LIST <ul></ul>, ORDERED LIST <ol></ol>, LIST ITEMS <li></li>, TABLES <table></table>, TABLE ROW <tr></tr> & TABLE DATA <td></td> LEARN, USE and DEFINE two other tags

ORDERED LIST <ol></ol> & LIST ITEMS <li></li> index. html <body> <ol> <li>G. Washington<li>J. Adams</li> <li>T. Jefferson</li> </ol> </body> Explain: What tags stand for: <ol> = ordered list <li> = list item 1. 2. 3. G. Washington J. Adams T. Jefferson

UN-ORDERED LIST <ol></ol> & LIST ITEMS <li></li> index. html <body> <ul> <li>superman<li>batman</li> <li>hulk</li> </ul> </body> Explain: What tags stand for: <ul> = un-ordered list <li> = list item ● superman ● batman ● hulk

NESTED LIST & LIST ITEMS index. html Explain: What tags stand for: <ul> = un-ordered list <ol> = ordered list <li> = list item <body> <ul> <li>superman<li> <ol> <li>Lex Luthor</li> <li>Bizzaro</li> <li>Mr. Starzyk</li> </ol> <li>batman</li> <li>hulk</li> </ul> </body> A. Superman ● Lex Luthor ● Mr. Starzyk ● Bizzaro B. Batman C. Hulk

TABLES <table></table>, TABLE ROW <tr></tr> & TABLE DATA <td></td> index. html <body> <table> <tr> <td>ROW 1</td> <td>Smith</td> <td>A</td> </tr> <tr> <td>ROW 2</td> <td>Jackson</td> <td>F</td> </tr> </table> </body> Explain: <table> = defines a table <tr> = defines a row in that table <rd> = defines items in that row ROW 1 ROW 2 Smith Jackson A F

IMAGES <img src=” “> In HTML, images are defined with the <img> tag. The <img> tag is empty, it contains attributes only, and does not have a closing tag. The src attribute specifies the URL (web address) of the image. An image can be link to a local or external file. index. html <body> local <img src="doge. gif"> external <img src="http: //www. google. com/cat. jpg"> </body>

HYPERLINKS <a href=” “> </a> A hyperlink is a text or an image you can click on, and jump to another document. The href attribute specifies the destination address (http: //www. w 3 schools. com/html/) index. html <body> local <a href=“imdex. html”> HOME </a> external <a href=“http: //yahoo. com”>yahoo</a> </body> HOME yahoo