HTML and CSS:

Webpages contain different types of information, like headings,

paragraphs, links, images, and more. In HTML, these are
called elements.

Here's an example of a basic webpage. Don't worry if you don't

understand it all yet!

This is the HTML that describes the webpage:

A Single Heading:
Let's create our own HTML heading, using the h1 element—short
for heading level 1.

Here's the plan

We begin with a start tag: <h1>

Then some text: This is a heading.

Then a matching end tag: </h1>

Let's do it!
Here's the HTML (you can edit this!):

Naming Bits of HTML:

Let's name the parts of HTML so we can talk about them.

 angle brackets: the less than (<) and greater than (>) symbols.

 start tag: the element name surrounded by angle brackets ( <h1>)

 end tag: like the start tag, but with a forward slash ( </h1>)

 content: the bits between a start tag and an end tag.

Between the Tags:

Content needs to go in between tags, but content and tags don't
need to be on the same line.
Different Heading Levels:
There are six levels of headings from h1 (the biggest) to h6 (the
smallest).
These look like:

The h1 heading on a page is the most important, and is often called

the main heading. It describes the content of the entire page.
The h2 to h6 levels are used for subheadings. Subheadings break up the
information on a page into sections and make it easier to read.
Paragraphs:
Ordinary text goes inside p (paragraph) elements.
Let's try creating two paragraphs. Here's what happens if we do it with
one p element:
Hmm, that doesn't look quite right. All the space inside the paragraph
content has been ignored!

We need to make each paragraph a separate p element.

Let’s go Fancy:
Now we know a little bit of HTML, let's style it with some CSS!

Remember, HTML describes the information and structure of the page,

like headings and paragraphs.

With CSS, we can add style to the page!

We've already written some CSS (in a hidden file!) to style the headings
for this page:

Where Does my Code go?

We write our HTML and CSS in separate files.

So far, we've been writing all our HTML in a file called [Link].
We want to write our CSS in a separate file, called [Link] - a Cascading
Style Sheet (CSS) file. The styles defined in this file apply to the whole
page!
CSS, here we Come:
A CSS file needs to be linked to a HTML file with a link element.
To link our [Link] file we add a link element to our [Link] file, like
this:

We set two attributes on link:

 rel: short for relationship. Here we say we're linking to a stylesheet.

 href is the location of the stylesheet, which is the file name.

Now the styles we define in our CSS file will be applied to our HTML
document.

A real example
Below we have an [Link] file and a [Link] file, but we haven't linked
them together!

See the difference? (Answer: The font size changed.)

Getting Stylish with Size:
We can use CSS to change the font size of our paragraphs.
Here's a HTML file with a link to a CSS file in it:

What’s in a Style?
Let's break down the parts in a CSS file.

 Selector: comes before the curly braces, the { and },

and selects the HTML elements the styles should apply to. Here it's
selecting every p element.
 Styles: are inside the curly braces. Styles are always of the
format property: value;. In the example above:
o the property is font-size.
o the value is 10px (which stands for 10 pixels).

Together, a selector and its styles are called a rule.

Here's another example:

Answer: In this example, width is the property.
We'll learn what the width property does—along with other text
properties—later in this module!

Width:
The width property sets how wide an element is.
By default, headings and paragraphs fill up the entire width available, but
we can make them smaller.

Difference:
Remember - px stands for pixel
One of the most common ways of measuring length on screen is in pixels,
so you'll see this a lot!

Line Height:
The line-height property sets how much space there is between
lines of text.
A line height of 1 makes each line exactly as tall as the font, and 2 is
exactly double spacing.

Aligning Text:
The text-align property sets text alignment. Some values
are left, right, and center.
Text alignment decides which side of a page text lines up with. Browsers
set the text alignment to left by default - it's so common you've probably
never noticed!

center not centre

CSS uses the American spelling of center, so we'll use that instead of the
normal centre.

Overview of Module 1:

You learnt how to:

 Write your own HTML elements, including:

o Headings (h1 - h6)
o Paragraphs (p)
 Include a CSS file using link;
 Create your own CSS styles, to:
o Adjust text with font-size;
o Change the width;
o Play with text using line-height and text-align.

You also know some new terms:

 selector: tells CSS which elements to change;

 property: the thing we want to change (like font-size);
 value: the new style (like 10px);
 px: short for pixels.
You can now design webpages like this:

We'll start by introducing a few new HTML tags. Remember, HTML is used
to describe the structure and information of our webpage.

Emphasis with em:

The em element (short for emphasis) makes text lean to the right.
Emphasis is used to make words stand out. It indicates that the text is
important, or that it should be read in a different voice.
Importance with strong:
Another element used for emphasis is strong.
It's used to indicate some words are important, even more important
than em. It can even mean the words are serious or urgent.

Difference:

If you've done HTML before...

You may think strong is the same as b, since browsers often make them
look the same.

But some browser make them look different, and screen readers will
read strong text differently!
Breaking up Lines:

How do you start a new line without starting a new paragraph, then?

You can use the br (line break) element to start a new line.
For example, here's a haiku by Masaoka Shiki:

Unlike other elements, the br element doesn't have a closing tag.

The </br> tag doesn't exist.

Structure, not style

Remember that HTML is for structure, not style. The br element is HTML,
so it should only be used when a new line means something, like in poetry
or song lyrics.

Nested Elements:
If one element is inside another, we say they're nested.
When nesting elements, the inside element's tags must be
between the outside element's tags.

Here are some examples of the correct ordering and incorrect nesting
syntax:

Correct

Correct:

Some Elements Need to be Nested:

The strong, em and br elements must always be nested inside
other elements.
br only has one tag, but it still needs to be nested inside another element.
Corrected Version:

Grouping With span:

We've shown you CSS properties that apply a style to all the text in an
element, like font-size. But what if you only wanted to style part of the text
in an element?
The span element lets you group text inside another element and
apply a different style to it.
span only applies the styles you set. If you don't set a style, it does
nothing.
Example:

Adding Some Colour:

Let's add some colour! You can colour text with the color property.
Here, we make h1 a deep pink colour:
CSS has lots of colour names. There are all the common colours,
like black, red and yellow. There are also some interesting colour names,
like papayawhip or peachpuff!
You can find the full list of named colours you can use here. Try them out
above!

color not colour

CSS uses words with American spellings. If you spell the property as colour,
it won't work.

Background Colour:
The background-color property adds colour behind elements.
You can give it the same colour names as the color property.

Adding Images:
What would the internet be without images of cats?

To put an image into a website, you can use the img element.
<img> doesn't need closing!
img is a self-closing tag, just like br. There is no </img> tag because you
can't put anything inside an image!

alt Text:
The alt text shows up when a browser can't find an image file. It's
also useful for visually impaired people.
If a browser can't find an image, the alt text shows up like this (Short &
descriptive):

This alt text will also be read out by screen readers. Screen readers are
programs that help visually impaired people by reading out a webpage to
them.

Changing Image Size by Pixels:

We can change an image's size in CSS by

setting width and height properties on img.
Our cat picture is 640 pixels wide and 480 pixels tall. It's too big for the
window!

Stretching Images:

Setting only one of the width or height makes sure the image isn't
stretched or squished.
But by setting both width and height, we can stretch the image.
Stretched Image:

Unstretched Image by Ensuring the Right Ratio Compared to the Original

Image:

Changing Image Size by Percentage:

We can set the width and height properties to a percentage as

well.
If you set width to 100%, the image will become as wide as it can be
without spilling over the edges of the page.

What about height?

You can also set height to a percentage, but it might not do anything
unless you put the image inside another element.
Side by Side:
By changing the width of images, we can make them appear side
by side on the page.
By changing the image width to less than 50%, we can fit two (or
more!) images side by side on the page.

Why not 50%?

Inline elements, like text and images, automatically have spaces added in
between them. With the extra space sitting in between, there isn't room
for two 50% width images to on the same line!

Try changing the image width to 50% to see what happens.

Links:

A link is an element that, when clicked, takes you to a different

page or to a completely different website.

The a element (short for anchor) creates links on pages.

What’s in a Link?

Let's look at the parts of a link, one by one.

 <a>: The opening tag of the anchor link. It contains

the href attribute.

 href: This attribute has an equals sign followed by a URL in quotation

marks. The URL is where the browser takes the user when they click
on the link.

 link text: The words that the user reads and can click on to follow
the link.
  </a>: The closing tag of the anchor link.

Let's look at another example:

What's the link text in this example? (Answer: [Link])

What's href ?
href is short for hypertext reference because it refers to another page.
Links to Other Pages:

Websites are usually made up of many individual webpages. To

let users navigate a website, these pages need to be linked
together.

Here we have three files: [Link], [Link], and [Link].

Try clicking between them using the links:
Text Decoration:

Links are underlined by default, but we can change this with

the text-decoration property.
Setting it to none will remove the underline.

Underline:

Line-Through:

Overline:
Just like underline, these options also work on any text.

A link to... nothing?

In the example above, we set href = "". This looks like it would go nowhere,
but it actually links the page back to itself.
Overview of Module 2:

You learnt how to:

 Format text in HTML with:

o em to indicate some words should be read in a different voice;
o strong to indicate some words are very important;
o br to start a new line;
 Style only some of the text inside another element with span;
 Add colour in CSS with:
o color to colour text;
o background-color to put colour behind an element;
 Add images with the img element, and:
o Give them alt text;
o Change their size and shape with height and width properties;
 Link to other pages with the a anchor link;
 Add or remove underlines, overlines and line-throughs with the text-
decoration property;

You now also know some new terms:

 emphasis: indicating some words are important or different;

 nesting: putting one HTML element inside another;
 link: Text you can click that takes you to another page.
RGB in CSS:

You can set colours using RGB numbers in CSS using

the rgb function.
The rgb function takes three numbers in brackets, for example (255, 128,
0). The numbers are Red, Green and Blue, in that order.

Warm and Cool Colours:

Colour schemes can change how your website feels.

If you pick warm colours, your website might feel

more friendly or pleasant.

If you pick cool colours, your website might feel more serious or formal.
Colours like red and orange are warm, like a fire. Green and blue are cool,
like ice or forests.

Margins:

So far, all our content has been going right up to the edges of the page.
Adding space around content makes it easier to read, and more visually
appealing

You can add space around content using margins.

Here, we've added 50 pixels of space on the left of p elements with margin-
left.

You can add space on the top, right, bottom and left sides of an element
with these properties:

 margin-top
 margin-right
 margin-bottom
 margin-left

Margin Shorthand:

What if we want to add margins to all sides but don't want to write out all
four margin properties?

We can add margins on all sides at once with

the shorthand property margin.
If you give it just one value, like the example below, it sets all four
margins to that value:
Two Value Margins:
You can set one value for margin, which sets all the margins. What if we
want more control?
For more control, you can also set two values for margin.

For example, setting it to margin: 10px 50px; will:

 Set top and bottom to the first value

(10px).
 Set left and right to the second
value (50px).

It sets the margins like this (check the

left):

What margin setting is this? (Answer: margin:

25px 15px;)
Four Value Margins:

For even more control, you can set four values for margin.

For example, in margin: 10px 50px 30px 20px; the:

 First value sets top (10px);

 Second value sets right (50px);
 Third value sets bottom (20px);
 Fourth value sets left (30px).

Which works like this:

Removing Margins:

Some elements, like headings and paragraphs, automatically

have margins added to them by the browser.
You can remove these by setting margin: 0.

Deleting all the styles so there is some more white space:

That looks a lot better now, all thanks to white space!

Auto-Width Margins:

You can use auto margins to centre an element in the middle of

the page.
First, you need to a set a width for the element. Then, you set the left and
right margins to auto.

auto needs a width!

If you haven't set a width on the element, the browser can't calculate how
large to make the auto margins.

Text is now also aligned in the centre.

NOTE: I set the text-align of the h1 heading to be center.

Overview of Module 1:

Now you can:

 Specify a colour by:

o Its name, out of a selection of available colours; or
o Its RGB values, which let you specify any colour you want;
  Pick a good colour scheme for your website.
 Work with margins:
o Set margins on one side with margin-top, margin-right, margin-
bottom and margin-left;
o Set margins on all sides with margin, using one, two or four
values;
o Remove margins;
o Centre with margins;
 Use white space effectively;
 Design a vertical layout for a page.

You've also learned some new terms:

 additive colour: when mixing colours together makes them lighter,

like with lights on a computer screen;
 subtractive colour: when mixing colours together makes them
darker, like with paints;
 warm colours: colours that are reddish, like those in a fire;
 cool colours: colours that are blueish or greenish, like ice or a
forest.
 white space: The empty space around elements that doesn't have
any content in it.

Now you can make websites that look like this:

Adding Page Structure:
Did you know that all along, your browser has been doing sneaky things
behind the scenes?

HTML documents actually have an html element at the top, with

a head and a body inside it.
We've been leaving these out, but the browser has been adding them in
for us. This:

is automatically turned into this:

Don't worry if you don't understand it all yet! We'll go through it in the
next slides.

Just like your head is on top of your body, the head should always
come before the body.

The html and body Elements:

The html and body elements don't change how a page looks, but
browsers need them to know which bits of a page are which.
The body element is where all the page content goes, like headings,
paragraphs and images.
Meanwhile, the html element is where everything goes, including the body.
Example:

Why did nothing change even when the heading is outside

the body? Remember, body doesn't change how a page looks.
It's still important to put page content inside the body, though. It
lets us style it!
Styling the body:
Want to apply styles to an entire page?

Easy! You can add styles to the body element.

This works just like adding styles to p and h1 elements

Some properties will change the styles of all elements in the page when
applied to the body. Here, the color property changes the colour of all text
elements.

A body With a head:

So, page content elements go inside the body. What's the head for?
The head element is where we put information about the
document, like the stylesheet link.
If you put the stylesheet link inside the body, the browser will still try and
link to the CSS file correctly, but Grok will warn you like this:
The stylesheet link element should be the child of the head element.
JavaScript:
The script Element:
To add a paragraph to a HTML page we use a p element. To add
JavaScript, we use a script element.
Instead of containing text, a script element contains JavaScript.

// This is a comment
Comments are ignored by the browser; they're for humans to read. In
JavaScript we write // to start a comment. In HTML we use <!-- -->.
Behind the Scenes:
Let's look behind the scenes of that example. Here's the code (don't worry
if it looks scary!):

Remember, when you clicked on the button it changed the message

from Sarah is the best! to Annie is the best!. Can you see those two bits of text
in the code?
But...How Does it All Work?
The id Attribute:
Let’s start with the first line of our example:

You may not have seen an id attribute before.

id is short for identifier. We can set an id on a HTML element to give us a
more specific way to refer to that element.
In the example, we've given the h1 element the id "best".
When we want to change an element with JavaScript, we can use the id to
tell JavaScript exactly which element we are referring to.
The id can be anything we like. For example, it could be:

But that would be a lot more confusing! A meaningful id makes our code
much easier to read and understand.
The button Element:
Let’s look at the second part of our example:

The button element adds a clickable button to our page.

We’ve given the button an id - "changeName" - so that we can refer to it in
the JavaScript.
Now for the JavaScript:
Finally, here’s the last part of our example, which is the JavaScript
(remember the JavaScript goes inside the script element):

For now, let’s look at just the highlighted bit. We'll cover the rest later.
textContent:
HTML elements like h1 and p contain text. The text is a property of the
element (it’s something that belongs to the element).
We can use JavaScript to manipulate the properties of elements. Here’s
how we changed the text property (called textContent) in our example:

best (the id of the h1 element) is followed by a . (dot) and then textContent.

This means, "from best we want the property textContent".
In other words, this how we tell JavaScript that we want to change the text
displayed by the h1 heading. The part after the = sign is what we want to
change the text to.
What are Those Quote Marks?
Because JavaScript is just text, the computer can get confused between
which parts are code and which parts are messages for humans to read
(like a heading).

If we wrote:
JavaScript thinks that Annie is the best! is code, and we would see a Syntax
Error (syntax is the spelling or grammar of coding). We tell JavaScript that
something is a message with quote marks:

We call this a string which is short for "a string of letters" (because they
come one after another).

Single or Double quotes?

In JavaScript we prefer to use a single quote mark ' but you can
use " double as well.
Setting Values:

In maths an equal’s sign (=) means that two things are the same, but it's
different in JavaScript!
In JavaScript = means "set the value". It's an instruction, to be carried out
by JavaScript. So, when we write:

We're saying, "Set the textContent property on best to the string 'Annie is the
best!'".
Behind the Scenes:
Now that you've written some code, try and spot the new things in this
example:

Lets think about what it did. Whenever you clicked the button it updated
the heading.

Pay attention to the highlighted line. Can you guess what it does?
It's very similar to how our programs have worked so far, but instead of
using a hardcoded string it's using a value that the user has entered.

Comparing Code:

Let's have a look at the two examples we've seen side-by-side:

There’re two big differences between these two examples:

1. The second one has an input field, to collect input from the user.
2. The second one sets textContent to the input field's value
property ([Link]) instead of a string ('Annie is the best!').

Input value:
Just like h1 elements have a textContent property, every input element has
a property called value. In our example from the previous slide,
the value was whatever text the user entered. We got that value like this:

This means "From the input (with the id food), we want the property value".
Finishing Lines of Code:

In English, when we finish a sentence, we write a full stop. In JavaScript we

end our statements with a ; (semi-colon). Like this:

Each statement is a single instruction for JavaScript to run. We put them

each on their own line to make them more readable.
Definitions:
Property - a "thing" that belongs to an element. Like textContent.
Attribute - something gives additional information about an element, and
sits inside its tags.

String - Messages for humans within the code. It's called

a string because it's a "string of letters".

Statement - A line of code in JavaScript. Ended with a ;.