Lesson 2
Our First Web Page
HTML Basics
csinschools.com
Previously, on CS in Schools...
2
Learning objectives
By the end of the lesson you will be able to:
3
Join Replit at https://csinschools.io/join
Choose a username and write it down
Choose a username and write it down
Picking a Username
Choose a password and write it down
Choose a password and write it down
Picking a Password
Click on Sign up
You've created your account!
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!
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 </>.
Basic HTML Structure
14
Unlike Python, HTML code is not affected by indentations. However, indentation is useful for readability for the user!
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/)
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 "/"?
Basic HTML Structure - HTML Tag
17
Together, <html> and </html> contain all other tags in our document.
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.
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.
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
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.
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.
HTML Tags - Headings
23
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".
HTML Tags - Images
25
The image tag contains two attributes called src and alt.
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.
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.
Industry Connection: Thinktank Time...
28
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
Privacy
30
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
Summary
32
Extension Activity: My Favourite Thing!
Create a webpage based on something that you really love!
33
Worksheet
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