Unit #1-01

Learning Outcome

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

• create your first web page

Review

• review creating a GitHub repo, Codespace and Coder, 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 create and test HTML documents

  • once again, click the Google Classroom Codespace link

• for now, we are going to always start right at the beginning!

  • we will not be using the terminal right now, so you can close it

  • look at the 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,

    • use the Live Preview extension in IDE

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

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

    • if that does not work, Google Docs extension, Code Blocks

Activity

• 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, for HTML, CSS & JS

  • the tutorials are:

    • Introduction to HTML

    • HTML Basic

    • HTML Elements

Daily Assignment

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

  • ensure you push your final code back to GitHub

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: ↓