Unit #1-02

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 IDE, with your GitHub account

Lesson

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

  • when you close the IDE, how does someone on the internet see your web page?

  • we need a way to keep our web pages "permanently"

• our 1st choice is going to be to place it on the "Class Server"

  • go over "Class Server"

    • see link in Google Classroom

  • go over connecting to Class Server

    • change your password first!!!!!

      • use the terminal

      • ssh mr-coxall@10.100.204.80 (replace "mr-coxall" with your login!)
        passwd 

  • go over "SFTP" extension

    • go over setting it up
      {
          "name": "Class Server",
          "host": "10.100.204.80",
          "protocol": "sftp",
          "port": 22,
          "username": "icd2o-1-2024",
          "remotePath": "/home/icd2o-1-2024",
          "uploadOnSave": false,
          "useTempFile": false,
          "openSsh": false
      } 

    • go over "Upload Folder"

    • go over "coping" something over

      • go over "Upload file"

• our 2nd choice (since it does not work with PHP)

  • GitHub has already solved this issue

    • go to Repository

    • ⚙ Settings

    • 🗔 Pages

    • then from the "Deploy from a branch ▼" button, select "GitHub Actions"

  • each time you "commit" any changes to your code, GitHub will now run a "GitHub Action" that will build your web site and publish it

    • this web site will also be permanently visible

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

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

    • DO NOT just place them in the root

Activity

• 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

Daily Assignment

• 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 push your final code back to GitHub and publish it to permanent URL

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