Learning Outcome

At the end of this lesson, you will be able to:

• create your first permanent web page

Review

• review creating a GitHub repo and logging into Codespaces, with your GitHub account

  • ENSURE you always login with your GitHub account and NOT any Google account!

Lesson

• Codespaces is a great way to develop webpages, unfortunately they do not stay around permanently

  • we need a way to keep our webpages "permanently"

• GitHub has already solved this issue

  • go over how to use GitHub Pages to publish your websites

• go over how to set up a directory structure for your website

  • create a folder called "images" to place your images in

    • DO NOT just place them in the root

Daily Assignment

• work through the following tutorial:

  • note that once again that in the tutorial they have VERY BAD indenting style, DON'T do what they do

    • ALWAYS indent 2 spaces

  • the tutorials are:

    • HTML Attributes

    • HTML Headings

    • HTML Paragraphs

    • HTML <sup> Tag

• ensure you know the difference between an Absolute URL and Relative URL

  • when linking pages within your own website, ALWAYS use relative URLs

  • when pointing to someone else's website, use absolute URLs

• in GitHub create repo called "ICS2O-Unit1-02-HTML-hello_world" and open it in codespaces

  • create the "Hello, World!" webpage (see screenshot below: ↓) 

  • you can get the image, "hello_world.png", from this lesson's Google Drive page (see Google Drive Folder below: ↓) 

  • ensure you connect and push your final code back to GitHub

  • remember to change the "setting" to indent 2 and not 4 spaces in Codespaces for index.html

  • submit a screen capture of your work from today and yesterday in Google Classroom.

Extra

• create a second webpage (genesis.html):

  • add in:

    • 3 headings, the first 2 verses of Genesis, using superscripts, and the image

    • add a link from your index.html page to this one

    • see screenshot below and my example here