Unit 2: Intro to HTML & CSS

Questions to consider:
1. What is a programming language?
2. What is “syntax” of a programming language?
3. How are web pages made?
Programming Languages
A computer program is just a set of instructions that tell the computer what to do. We write
these instructions using a programming language. Most programming languages are text
based, which means that you have to give the computer specific commands in what looks like
a cryptic form of English.

For example, to write a simple “Hello Class!” on the screen you may write:

print “Hello Class!” (Python)

System.out.println(“Hello Class!”); (Java)

std::cout << “Hello Class!” << std:: endl; (C++)

In short, programming languages:

 Allow us to “talk” to the computer in a language we both understand

 All languages require well-defined syntax
Syntax
 Rules which clearly specify the grammar of the programming language
o For example, how to use specific symbols and key words
 <>
 :
 ;
 “”
 ()
 Etc.

 Rules that specify exactly how symbols may be combined to create well-formed
sentences (or programs) in the language

System.out.println(“Hello Class!”);
print “Hello Class!”

 Syntax error: punctuation error (violation of the rules)

The line below will produce a syntax error. Why?

print “Hello Class!

Ready to Learn HTML and CSS?
Web pages allow us to easily share our ideas and creations with the world!

Web development is regarded as one of the most important skills in our digital society. Being
able to make your own website, to promote your portfolio, market your small business, or just
to learn a valuable skill in the ever-growing technology sector, is a priceless undertaking.

In this unit, you will learn…

 To use a text editor [Brackets] to create web pages

 HTML Basics  CSS Basics

o Tags o Making the webpage
o Hyperlinks “beautiful”
o Images o Colour
o Videos o Borders
o Maps o Spacing
o Fonts o Arranging content
o Tables
o Divs
HTML & CSS
HTML

Every webpage that you visit is written with a programming language called HyperText
Markup Language (HTML). HTML allows you to add content to the webpage. This is
accomplished with a set of codes, called tags, which “mark up” the plain text so that the
browser knows how to interpret the text. You can think of HTML as the skeleton that gives
every webpage structure (title, paragraphs, heading, images, links, etc.).

HyperText: text that allows access to other texts through links (hyperlinks)

Markup Language: using tags to define and structure the raw text

Tags—>
(<element>)
HTML & CSS
CSS

Cascading Style Sheets (CSS) is a programming language that is used to format HTML code.
You can think of CSS as the “pretty” part of the webpage.

Webpages are created using both HTML and CSS (and JavaScript, but
we won’t be learning it this year).

 HTML is used to write the content for the webpage

 CSS is used to define the design and layout of the page
HTML & CSS
Webpage without CSS (only HTML): Webpage with CSS (and HTML):

HTML…..click here
Coding Environment
Web Browser + Text Editor
Web Browser

 Main functionality: present the web resource in a browser window

 Chrome

Text Editor

 Used to write and edit code

 Preinstalled: Notepad/ TextEdit (basic)
 Paid and free: colour highlighting, automation
 This class: Brackets
Brackets
Since HTML documents are plain text files, to create webpages all we need is a text editor and
a browser. You could use a text editor such a notepad, but we will be using something a little
bit more powerful: Brackets

Download & Install

Step 1
1. http://brackets.io/
Step 2
2. Click on “Download Bracket 1.14”
3. Once it downloads, open the installer and click “Run”
4. On the installer, click “Next”
5. Click “Install”
6. Click “Finish”
Step 4 Step 5
First Webpage
Every webpage has a few things in common. We will learn how to set up the skeleton of each
page today. You will use this same skeleton each time you make a new webpage.

HTML uses a set of codes, called tags, to “mark up” plain text so that a browser application
knows how to interpret the text (Is it a paragraph? Is it a photo? Is it a video?, etc.).

A tag consists of an element inside the angle brackets (< >). For example, <title> is the title tag
where title is the element. Tags affect the text they surround, and are usually paired to
indicate the start and end of an instruction. A slash (/) before the element indicates the end of
an instruction, such as </title>.

Example: A webpage with one line of text will be displayed when the HTML document, below
is opened in a browser. Save this program as HelloWorld.html

<!DOCTYPE html>
<html>
<head>
<title> An example of HTML document</title>
</head>

<body>
<p>Hello World!</p>
</body>

</html>
First Webpage
Let’s examine the piece of code we have written.
<!DOCTYPE html> 1
<html> 2
<head> 3
<title> An example of HTML document</title> 4
</head> 5

<body> 6
<p>Hello World!</p> 7
</body> 8
</html> 9

1. Always on first line: Tells the browser what language it’s reading
2. Always on second line: Starts the HTML document (opening tag). Its closing tag is found on line 9.
3. <head>: Information about HTML file. Does not display content. Its closing tag is found on line 5.
4. <title>: Title for the tab
6. <body>: Content of the website. Its closing tag is found on line 8.
7. <p>: Paragraph
9. Always on last line: Ends HTML document (closing tag for #2)

Note 1: Tags nest, so you need to close them in the right order. The last one opened
should be the first one closed.

Note 2: Each HTML document consists of a head and a body.

<head> : Information about the HTML file (title of tab, if webpage contains any
formatting, etc.). Called the metadata of the webpage.
<body> : Content that appears on the webpage: text, images, links, videos, etc.

***Note 3: Make sure to properly indent!! This will save you time and headaches!! ***
Paragraphs & Headings
To add text to our webpage, we use <p> Content </p>.

You can also add headings to each paragraph, using heading tags. There are 6 in total:

 <h1> -- largest font

 <h2>
 <h3>
 <h4>
 <h5>
 <h6> -- smallest font

Practice: In our current document, create a heading (h1), in the body, that says “My School
Day”. Underneath the heading, create two paragraphs telling the user about your typical
school day. Try a couple of the other heading tags.
CodeHS
CodeHS has great tutorials to help you learn HTML & CSS. We will be using a few different
modules from here this year. Please sign up (link on myHSC) for an account by using your
school’s Google account to complete the registration.

Should be already filled in for you!

Homework
 Click on HTML – STRUCTURING WEBSITES (Unit 2)
o Complete the first three activities
 2.1 Introduction to HTML
 2.2 Structure of an HTML Page
 2.3 Formatting Text