html

Class Monday, September 24, 2018

 Today’s goals:

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

 Today’s featured web site:

 Set up for Successful Coding!

  1. Launch the class website in Firefox or Chrome, click on Class Work, and then click on that day’s post.
  2. Create a new folder on your computer if you’re beginning a new project. This is where you will save all of the project files.
  3. Open Notepad++
  4. Follow the instructions written on the class page
  5. SAVE your file in Notepad++ every time you make a change (use save icon in top menu, go to File, Save, or simply hit ctrl s on your keyboard).
  6. SAVE your webpage and any related files in the folder you created for the project on your computer.
  7. LAUNCH or OPEN your webpage in Chrome or Firefox to preview your work. Go to RUN in the top menu of Notepad++ or find your webpage on your computer and double-click on it to open in a browser. Leave your page open; do not close it.
  8. REFRESH the browser every time you make a change (hit the refresh button at the top of the browser or simply hit ctrl r on your keyboard).

 HTML basics

What is it? What do you use it for?

  • Let’s read this useful HTML tutorial together
  • Create a folder on your computer right now and call it HTML basics. You’re going to save all of your practice webpages and images in this folder.

 Create and edit HTML

  • Open Notepad++ on your computer
  • Look at your computer’s keyboard and find the pointy brackets (or greater than/less than symbols) < >. You must use the shift key to type these. Also look for the forward slash /, which we’ll be using in our closing tags. You DO NOT need the shift key to type the forward slash.
  • Let’s begin adding some HTML tags!
  • We’re going to use the basic tags to add text, images, links, and nested tags such as a bold link or a bold paragraph.

 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

 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 today 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)