Today’s Goals:

• Continue using a simple code editor to code a webpage, preview it in a browser, and save it correctly
• Continue learning HTML

 Today’s featured website:

• https://moments.epic.net/#home – Have some fun playing with this interactive site and then check out some of the code that makes it work here. 

 Questions:

1. What are the four basic HTML tags we will always use to set up every webpage we create?
2. Where does the text you put inside the title tag show up?
3. Why would you use a comment tag? Does the browser display comments?
4. What are two tags you can use to force content to start on a new line?
5. Name the tags you learned that are self-closing (not used in pairs)
6. How do you save an HTML document correctly?
7. Is your webpage live when you preview it in the browser?
8. Why are you able to preview your webpage in the browser? (Hint- think about the purpose of a browser)
9. When you update your webpage, how can you preview the update you just made? (Hint- two steps)

 Important!

• HTML tags are never capitalized
• HTML tags usually come in pairs with an opening and closing tag. There are some exceptions, such as the line break tag and the image tag.
• All webpages must be saved as filename.html

 Create and edit HTML

Screen shot of what we’re creating today:

1. Let’s create a new page in Notepad++. Open Notepad++ and go to File, New.
2. Let’s begin by adding the 4 opening and closing HTML tags we will use for every webpage we create.
3. Save this as webpage2.html
4. Let’s label the head and body sections with HTML comments

   head section contains CSS code and things that are generally not seen
   body section contains all of the visible content on a webpage
   
   

5. Let’s add two headlines to our body section, the largest one h1 and the smallest one h6

   <h1>Largest Headline</h1>
   <h6>Smallest Headline</h6>
   

6. Let’s add a paragraph to our body section

   <p>Paragraph tag</p>

7. Let’s add an image to our body section

   <img src="https://www.mhswebdesign.com/storage/2019/01/pexels-photo-348523.jpeg" />

8. Now let’s add an image manually by downloading it and saving it to our computers before adding it inside and image tag. Let’s all download this image . Right click, choose Save Link as, and rename the photo beach. MAKE SURE YOU SAVE IT IN THE SAME LOCATION AS YOUR WEBPAGE!!! Desktop, folder, wherever! Check the file path at the top of your Notepad++ editor to see where your webpage is saved if you don’t know.

   <img src="name_of_image.jpg" />

9. What tag can we add to separate the images?
10. Let’s add two different sets of bullets, ordered lists and unordered lists 
11. Let’s add a link inside of the one of the bulleted items to see how to properly nest HTML tags. We’ll link the word coffee to my favorite coffee place, New England Coffee. Link to use: https://www.newenglandcoffee.com/
12. Let’s have our link open in a new window by adding target=”_blank” inside of our anchor (link) tag
13. How can we make the word tea bold? Let’s practice once again properly nesting HTML tags.