Working with HTML – Using Visual Studio

Shape of the Day:

  • Ensure you have accessed Visual Studio on your computer
  • Follow instructions from yesterday’s HTML start up
  • Complete Review Questions on HTML
  • Start the HTML Challenge

Website of the Day:

http://fabianburghardt.de/webolution/ – Follow the changes of the NASA website from 1991 to 2020

1. Check with Mr. Chastkavich to make sure Visual Studio is working on your computer.

2. Open Visual Studio and follow these steps:

  • Ensure you have the Web Development 10 folder created on your synced one drive folder
  • Access Visual Studio Online Version here
  • You should see two tabs at the top, Get Started and Release Notes. You can close both of these tabs.
  • Click on the three lines at the top left > File > New File
  • 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 see the changes you make from your code in Visual Studio, make sure you have the webpage file open and be sure to hit refresh after making changes.
  • 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.
  • 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 – HTML tags usually come in pairs (opening and closing tag) – all webpages must be saved as “filename.html” 

3. Questions on HTML – Complete in word or notepad

  1. Name the basic HTML tags used to set up every webpage?
  2. The title tag shows text in a unique spot – where is it? Be specific.
  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 in Visual Studio?

4. Complete the following HTML Challenge:

  • Open up the Notepad document here
  • Copy and paste it into a new HTML File using Visual Studio. Try to preview it. What seems to be wrong?
  • Try to fix it so it works!

5. If everything above is completed, try this website and see what you can make: http://scratch.mit.edu/