1 – Getting Started

🎯 Learning Objectives

Developing Programming and Development (learning strand) skills, specifically:

  • Understand that HTML is a programming language for the web.
  • Understand that HTML can be used for formatting data in a specific way.
  • Understand that web browsers are used for displaying web pages.

Developing understanding of Data and Data Representation (learning strand), specifically:

  • Understand that computers store and transfer data in binary (0s and 1s).
  • Understand that data can be represented in different formats.
  • Understand that HTML is a language for representing data on web pages.
💬 Key Vocabulary
  • http (hypertext transfer protocol)
  • Domain name
  • HTML (HyperText Markup Languge)
  • Tags
  • HTML element
  • Title element
  • HTML paragraph element

📖 Web Design

What we already know

The world wide web is a collection of html documents, and they all link to each other using hyper links.

A web browser is a piece of software that understands html documents and display them in human friendly formats.

To access a website, you specify the protocol http (hypertext transfer protocol) and the domain name where the website is located.

📖 Learn It

HTML or HyperText Markup Language is the main markup language for creating web pages and other information that can be displayed in a web browser. A markup language specifies the rules and symbols for formatting text files. The code used to specify the formatting are called tags.

In this unit, you are to learn some of HTML tags to format text, images and backgrounds of web pages.

A text file that uses HTML tags for its format (both layout and style) to be displayed in a browser is called a HTML file. It normally has an .html file extension.

You will use Sublime Text to create and edit HTML files. Sublime Text is very good at help you with coding using syntax highlighting which means using colours to highlight key words, and using indentations to make your code easy to follow/read.

📝 Code It

Step 1

  1. Open Sublime Text by clicking the Start button in the bottom-left hand corner of your screen, typing ‘sublime’ and hitting the enter key.
  2. Once the file opens, you should see a blank Sublime Text window like this:

Step 2

  • In the Sublime Text window, type:
<!DOCTYPE html>
<html>

The <!DOCTYPE> declaration must be the very first thing in your HTML document, before the <html> tag.

The <!DOCTYPE> is NOT a tag. It is an instruction to the web browser about what version of HTML the page is written in.

<html> is a tag. Tags are instructions to a Web browser.

This particular instruction lets the Web browser know that what follows is a Web page, written in HTML: HyperText Markup Language.

html-0.png

Step 3

  1. On the Menu Bar of the Sublime Text, click File, then Save.
  2. When the Save As window appears, select your home drive, then Computing folder you made in the beginning of the year.
  3. Make another new folder called it myWebPages
  4. Double click on the new folder to go inside it.
  5. IMPORTANT: In the Save as type drop-down menu, choose All files.
  6. Type index.html as the file name and click Save.
saveHtml.png

The remaining screenshots use Notepad instead of Sublime Text. The code is the same. Using Sublime Text is better for formatting, easier to follow your code and easier to debug.

Although the declaration <!DOCTYPE html> is missing from the screenshots, it should always be the first line of your code.

📖 Learn It

Whenever you’re creating a Web site, give the home page the file name index.html.

index.html comes up automatically when the address of a Web site or directory is typed into a browser.

For instance, if you go to www.bbc.co.uk, the home page appears automatically. That’s because its file name is index.html.

If the file name of BBC website home page was homepage.html, you’d have to type www.bbc.co.uk/homepage.html to get it to appear.

📝 Code It

Step 1

  1. Below the <html> tag, type:
<head>
<title>My Dog Jack</title>
</head>

The <head> section of our page contains information that doesn’t show up on the page when it’s viewed in a web browser.

Note the closing </head> tag. In HTML, you must give the browser instructions to end something as well as start it.

Everything from the start tag to the end tag is called a HTML element.

The text My Dog Jack is not a tag. It is text surrounded by tags. The <title> and </title> tags tell the browser what to do with the text: make it the title of the page where appears on the tab of a web browser. This is the title element.

html-1.png

Step 2

  1. Continue under the </head> tag, type:
<!DOCTYPE html>
<html>
<head>
<title>My Dog Jack</title>
</head>
<body>
<p>My dog Jack is a miniature schnauzer. He is 8 months old.</p>
</body>
</html>
  • The <body> section contains information that actually shows up on the page when it’s viewed in a browser.
  • The <p> and </p> tags tells the browser to display the text between those two tags as a paragraph. This is a HTML paragraph element.
  • The paragraph is placed between the <body> and the </body> tags which tells the browser to display the paragraph on the web page. If we want anything else such as an image(picture) on the page, we also need to place it in between the <body> tags.
html-2.png

Step 4

  1. You should have the following code in your notepad. Click File, Save to save the web page.
<!DOCTYPE html>
<html>
<head>
<title>My Dog Jack</title>
</head>
<body>
<p>My dog Jack is a miniature schnauzer. He is 8 months old.</p>
</body>
</html>

2. Go to your folder you created for this project.

3. Double click on the file index.html or right click then choose open with to open it in a browser. You should see your first web page like this:

page-1.png

💬 Summary

In this lesson, you…
  • Understand that HTML is a programming language for the web.
  • Understand that HTML can be used for formatting data in a specific way.
  • Understand that web browsers are used for displaying web pages.
In the next lesson, you will…
  • Understand and be able to use tags to format data in a web page.
  • Understand that web pages are linked by hyper links.
  • Be able to create hyper links to external web sites as well as to local files, such as images and files

🏅 Badge it

🥈 Silver Badge
  • Take the quiz by clicking this link. Score 50% to earn the Silver Badge
🥇 Gold Badge
  • Score 70% to earn the Gold Badge
🥉 Platinum Badge
  • Score 90% to earn the Platinum Badge