Webpages #2

Hi, if you're here you should have a neocities account, and 2 tabs open in your browser: one to edit index.html, and one to view your website.

Changing Colours Colors

We can change the color of anything using CSS.

The CSS is marked by a start tag like this: <style> and and end tag like this: </style>. The code between those tags is the CSS.

Once you've found the CSS, you'll see the words 'red' and 'blue'. Try changing them to other colors, save your page and see what happens.

When we're programming, we have to spell in US English, not NZ English. That means we spell 'color' without the 'u'.

Luckily, most words are still spelt the same way.

Did you change the colors? Remember to save and refresh.

Your CSS code might look like this now:

body {
  color: purple;
  background-color: orange;
}

Change the heading

Let's add a new CSS rule to make the page heading look different.

Add these lines to your CSS, just above line that says </style>.

h1 {
  text-align: center;
  font-size: 90px;
  color: white;
}

Save your changes, switch tabs to your page and check what happened.

You should see that the heading has changed.

About mistakes

When you are coding you will make a LOT of mistakes. Even experts make a lot of mistakes. Just missing one '>' symbol can make your page display strangely.

If you're at a Code Club, the mentors can help you spot mistakes. If you're by yourself, you might have to carefully compare your code with the examples. Look for tiny differences like one symbol being moved or missing.

Let's add one more

Let's add one more CSS rule, which changes the style of the other text.

p {
  border: 2px solid white;
  padding: 12px;
  background-color: maroon;
  color: pink;
}

Try that out. We'll explain how it works later! First let's make the page say something more interesting.

Editing your page body

The "body" of the page controls what words appear on your website.

The body starts with a <body> tag and ends with a </body> tag.

Tags are how we code in HTML. A tag is a word with pointy brackets on each end. Tags mark special parts of the file.

Your page body probably looks like this:

<body>
    <h1>Welcome to my page</h1>
    <p>This is a paragraph.</p>
</body>

h1 is short for 'heading 1'. It represents the biggest (most important) heading on your page.

p is short for 'paragraph'.

You can add another paragraph by adding a new line that has a <p> tag at the start, and a </p> tag at the end.

Did you notice the difference between a start tag and and an end tag? End tags have a slash.

Adding an Image

Try adding this somewhere inside your page body:

<img src="http://mgatland.neocities.org/countryside.jpg">

An img tag shows an image. You can change the URL to show a different image instead.

About HTML

The stuff with pointy brackets is HTML. Using HTML, you can change what the page says, and add images, but you can't change colors or add borders.

HTML is for what the page says, but not how it should look.

You can put HTML tags inside each other. For example, your h1 heading is inside your page body.

How CSS works

A CSS rule controls how your HTML is displayed.

Here's an example of a complete CSS rule:

img {
  border: 10px dashed green;
  margin: 30px;
}

First we say what part of the HTML the rule is for. This could be body for the whole page, or img for images.

Then we use a curly bracket { to say 'the instructions start now.'

Then we have the instructions, like this:

border: 10px dashed green;

There are many different options. But they always have a colon in the middle and a semi-colon at the end.

At the end of the rule, you need to say you've finished by putting a closing curly bracket }.

Tip: Which is which?

HTML has a lot of pointy brackets like these: < >

CSS has a lot of curly brackets like these: { }

CSS goes in the 'style' section. HTML mostly goes in the 'body' section.

Bloop

Hey that's enough instructions, can you make an awesome webpage? Our mentors will help you (if you're at a Code Club! Otherwise you'll have to do a Google search for your question.)

Maybe make a gallery of photos with 5 photos.

Here are some other ideas that might help:

make an image centered

img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

How Borders, Padding and Margins work

Imagine that html tags create a box. The box can have a border.

p {
  border: 2px solid black;
}

this has a border

We can add padding, which means space inside the box.

p {
  border: 2px solid black;
  padding: 10px;
}

this has a border and padding.

Putting boxes inside boxes

<div>
  <p>
    hello
  </p>
  <p>
    hello
  </p>
</div>

hello

... or bold text inside paragraphs.

<p>... or <b>bold</b> text inside paragraphs.</p>

Links

Here is a link.

<a href="http://www.google.com">Here is a link.</a>

Pay close attention to where the pointy brackets go! The href part is inside the first tag.

Making one thing different from the others with CSS classes

What if you want one paragraph to be red, and another one to be blue?

You can give any HTML tag a 'class', which is like an extra label. You make up the label. Here I called it 'loud'

<p>This is a paragraph.</p>
<p class="loud">Here is another.</p>

Now we can write a CSS rule that applies to anything that has that class.

.loud {
  color: red;
}

Note that there is a dot in front of the word "loud". That's to show that it's not a tag name, it's a class name.

You can make up as many classes as you want. Classes don't change anything on their own. You need to write a CSS rule for the class to make it do something.

Internet Safety

...is different for different people.

Ask before sharing someone else's personal information or their photo.

Using other people's work

Getting permission, crediting sources. Why Creative Commons makes this so easy.

Code Club Auckland

Making cool stuff with code!