Learning Outcome

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

• create your first 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

• who is Tim Berners-Lee

  •  see video "Sir Tim Berners-Lee about the WWW on Its 30th Birthday"

  •  see video "Tim Berners Lee changed the world 25 years ago"

• go over the difference between the internet and world wide web (WWW)

  • see video "The difference between the Internet and the Web"

  • what is the internet -> connected networks

  • what is WWW -> The World Wide Web (WWW), commonly known as the Web, is an information space where documents and other web resources are identified by Uniform Resource Locators (URLs, such as https://www.example.com/), which may be interlinked by hypertext, and are accessible over the internet.

• go over Hypertext Markup Language (HTML):

  • see video "HTML Tutorial: What Is HTML?"

  • Hypertext Markup Language (HTML) is the standard markup language for creating web pages and web applications. With Cascading Style Sheets (CSS) and JavaScript, it forms a triad of cornerstone technologies for the World Wide Web.

  • hypertext means that the document contains links that allow the reader to jump to other places in the document or to another document altogether

  • tags are used to mark up the start of an HTML element and they are usually enclosed in angle brackets

  • an example of a tag is: <h1>

  • most tags must be opened <h1> and closed </h1> in order to function

• go over how to use GitHub and Codespaces IDE to create and test HTML documents

  • once again, create your GitHub Repository

    • then connect it to Codespaces

  • once you have your GitHub repository and are connected to Codespaces

    • creating folders, (see image below: ↓) 

    • ensure they match the course website structure (ICS2O/Unit1/Unit1-01)

    • look, no spaces!!!

• create a file called, index.html

  • go over how to name an HTML document (index.html)

    • go over why the root document must be index.html

  • go over how to preview your web page, in Codespaces

    • and then once it is saved back to GitHub and how to view it there

• go over how to submit daily assignments, using the template provided and them submitting it

  • go over how to paste in your code in from Codespaces, so that it is coloured nicely

Daily Assignment

• work through the following tutorial:

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

    • ALWAYS indent 2 spaces

      • change the setting in Codespaces!

  • the tutorials are:

    • Introduction to HTML

    • HTML Basic

    • HTML Elements

• in GitHub and Codespaces, create the "Hello, World!" webpage (see screenshot 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

Extra

• create a second webpage (index2.html):

  • add in:

    • an <h1> heading

    • a link (you will need to open the preview up in a separate window for the link to work)

    • see screenshot below: ↓