Web Design

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 formating 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.

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.
  • Your teacher may ask you to use Sublime Text to create and edit HTML files. Sublime Text is very good at help you with coding using syntax hightlighting which means using colours to hightlight key words, and using indentations to make your code easy to follow/read.
  • You are going to use a text editor called Notepad to show you how to create and edit HTML files in this unit.

Code It

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

sublimeText.png

  • 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

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

saveHtml.png

NOTE: read the following

  • the remaining screenshots using 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

  • 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

Code It

  • Continue under the </head> tag, type:
<!DOCTYPE html>
<html>
<head>
<title>My Dog Jack</title>
</head>
<body>
<p>My dog Jack is a minature 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

Test It

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 minature schnauzer. He is 8 months old.</p>
</body>
</html>

Go to your folder you created for this project, you shoud see something like this: file-1.png

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

page-1.png

  • You have just made your first web page. A web site will have many web pages. Those web pages are linked with hyperlinks which allow users to navigate from one web page to another.
  • In the next section, we will create another web page and link those two so that you can go from one web page to the other.
  • Before we start our next section, let's check our understanding by taking a short quiz.

Badge It

learning strand: Data and Data Representation

  • Take the quiz by clicking this link.
  • Silver: Score 50%
  • Gold: Score 70%
  • Platinum: Score 90%