Working with HTML – Using “Brackets”

Shape of the Day:

  • Show Mr. Chastkavich your completed questions about “The Internet” from yesterday.
  • Ensure Brackets works on your computer
  • Follow instructions from yesterday’s HTML start up
  • Complete Review Questions on HTML

Website of the Day:

https://moments.epic.net/#home – Here’s a site you can have some fun with! Try checking the code out here to see what makes it work.

1. Show Mr. Chastkavich your completed questions about “The Internet”

2. Check with Mr. Chastkavich to make sure Brackets is working on your computer.

3. Open Brackets Program and follow these steps:

  • Ensure you have the Web Development 10 folder created on your synced one drive folder
  • Open Brackets program
  • Click on file > new
  • Save the file in your one drive folder and ensure you add .html to the end of the file name – for example mywebpage.html – otherwise it won’t recognize it as an html file
  • To preview your code in Brackets, click on the sideways thunderbolt on the top right of the window.
  • This should be a live preview – you should see the changes of the page as you change the code.  You must save your document to see the changes. Ctrl + S or file > save
  • Now follow this tutorial on HTML to get you started.
  • Create a folder on your Web Dev 10 one drive folder called HTML Basics. You will save your practice webpages and images in this folder.
  • Go back to the website of the day and see if you recognize any code or patterns with HTML.
  • You can edit the code with the X-Ray Goggles or using right click > inspect
  • Open these instructions on how to organize your html code
  • Add text, images, links and nested tags like a bold link, a bold paragraph and a LINKED image!
  • Remember – Do not capitalize HTML tags – they usually come in pairs (opening and closing tag) – all webpages must be saved as “filename.html”

4. Questions on HTML – Complete in word or notepad

  1. Name the four basic HTML tags used to set up every webpage?
  2. The title tag shows text in a unique spot – where is it?
  3. What is the use for a comment tag? Will you see it on your browser/webpage?
  4. What are two tags to force content to begin on a new line?
  5. What does self-closing tags mean – what are examples of these tags?
  6. How do you ensure you saved a document as an HTML file?
  7. Why are you able to preview the webpage you are making in a browser?
  8. How can you preview what you are changing using Brackets?