1 of 34

Lesson 2

Our First Web Page

HTML Basics

csinschools.com

2 of 34

Previously, on CS in Schools...

  • True or False: the Internet is a network of computers that are connected together.
  • True or False: A URL (Uniform Resource Locator) specifies where a resource such as a web page can be found on the Internet.

2

3 of 34

Learning objectives

By the end of the lesson you will be able to:

  • sign up and into replit.com
  • build your first web page
  • understand and use the basic HTML tags

3

4 of 34

5 of 34

Choose a username and write it down

6 of 34

Choose a username and write it down

Picking a Username

  • Don't use your real name
  • Pick something short and memorable
  • Stuck? Just keep the default username

7 of 34

Choose a password and write it down

8 of 34

Choose a password and write it down

Picking a Password

  • Don't use something you've used somewhere else
  • Don't tell your friends
  • Only share your password with your teacher

9 of 34

Click on Sign up

10 of 34

You've created your account!

11 of 34

12 of 34

Activity 02.01 - My Favourite Animal

Your first task is to update the following web page to highlight your favourite animal.

12

Complete Repl.it Activity:02.01 - My Favourite Animal

Activity hint!

  • Need some help?
  • See the next slide.

13 of 34

Activity 02.01 - My Favourite Animal

You will need to modify the following <tags>:

13

A tag is a keyword HTML uses to understand how you want elements to display on a webpage. To begin, a keyword is written in between an open tag < > and to end, a close tag </>.

14 of 34

Basic HTML Structure

14

Unlike Python, HTML code is not affected by indentations. However, indentation is useful for readability for the user!

15 of 34

Basic HTML Structure - Specifying a Version of HTML

15

This tag lets your browser know that this document is using the latest version of HTML which is called HTML5.

Did you know: The World Wide Web Consortium develop the standards for the web (https://www.w3.org/)

16 of 34

Basic HTML Structure - HTML Tag

16

The <html> tag is used to indicate the start of the page content. This is called an opening tag.

The </html> tag indicates the end of the HTML code. This is called a closing tag. Notice the "/"?

17 of 34

Basic HTML Structure - HTML Tag

17

Together, <html> and </html> contain all other tags in our document.

18 of 34

Basic HTML Structure - Head tag

18

Similarly, the <head> element is a container for metadata.

Here we use it to set the title of the webpage, which gets displayed in the tab of your browser.

Metadata is data about other data. For example, if we call a song our data, the metadata would be the author and song title.

19 of 34

Basic HTML Structure - Title Tag

19

By using the <title> element, we can specify the text we want to appear as the title for our webpage.

Because it is inside the <head> element, it will be displayed in the tab of our browser.

20 of 34

Basic HTML Structure - Title Tag

Here we can see that the tab of our browser has been modified by the <title> element inside the <head> element. Now it says "My first web page".

20

21 of 34

Basic HTML Structure - Body Tag

21

The <body> element should contain all the content of the website - this includes images, tables, text, buttons, links and more.

22 of 34

Basic HTML Structure - The Content

22

Here we have what will be displayed on our web page. In this case it is a paragraph of text.

Paragraphs are indicated by <p> and </p>. The text in between these opening and closing tags will be displayed on the web page.

23 of 34

HTML Tags - Headings

23

  • Headings are specified in a tag with a h followed by a number from 1 to 6. 1 is the largest heading, and 6 is the smallest.
  • These tags belong inside the body element.
  • The text inside the start tag and close tag is displayed.

24 of 34

HTML Tags - Images

24

To insert an image in HTML we use the img tag.

Notice how the tag is only 3 letters and not the full word "image".

25 of 34

HTML Tags - Images

25

The image tag contains two attributes called src and alt.

26 of 34

HTML Tags - Images

26

The src attribute specifies where the actual image is located. In this case it is looking for a file called charlie.jpg.

The alt attribute provides a text description of the image and can be used by search engines. If for some reason the image cannot be displayed, this text will be shown.

27 of 34

HTML Tags - Straight Lines

27

The <hr /> tag displays a big straight line across the page, called a "horizontal rule", like you can see below.

28 of 34

Industry Connection: Thinktank Time...

  • Why are websites important for businesses?
  • What things should business consider when designing a website?
  • Why have a website and not just a social media presence?

28

29 of 34

Activity 02.02 - Charlie and Chloe's Big Adventure

Your second task is to complete the web page about two dogs called Charlie and Chloe who embark upon a big adventure.

29

Complete Repl.it Activity:02.02 - Charlie and Chloe's Big Adventure

30 of 34

Privacy

30

  • Who can access your website? Anyone one the internet!
  • Ensure anything you publish on the internet passes the Grandma test
    • Don't publish any material you would not be proud to show your Grandmother!
  • Make sure to never post anything that identifies you personally
    • Home address
    • Full name
    • Gamertag
    • Phone number
  • Always make sure to get permission from anyone before posting their image online

31 of 34

Activity 02.03 - Share Your Website

Your website is now live on the Internet. It can be accessed by the URL highlighted below. Email this link to another member of the class and view their website.

31

32 of 34

Summary

  • HTML uses a series of tags to determine what is displayed
  • The <h1> to <h6> tags are used for headings, with <h1> being the largest
  • <p> tags are used to display paragraphs
  • <img> tags are used to display images
  • <hr /> tags display a horizontal rule

32

33 of 34

Extension Activity: My Favourite Thing!

Create a webpage based on something that you really love!

33

Worksheet

  • Open a copy of the Extension Activity and have a go at making your own webpage

34 of 34

License Information

These CS in Schools lessons plans, worksheets, and other materials were created by Jeff Plumb and have been modified by the team at CS in Schools. They are licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.

34