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.
Otherwise, try the previous page.
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.
- Find the line that says
</style> - Add a blank line above it.
- Add this code there:
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.
If something goes wrong, try reading your code slowly, letter by letter. Is it different from the example?
If you're with other people, ask someone else to look for the problem. It's always easier to see problems in someone else's code!
Let's add one more rule
Let's add one more CSS rule, which changes the style of the paragraph text.
p {
border: 2px solid aliceblue;
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
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.
Everything between those two tags is inside the body.
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 heading on your page.
p is short for 'paragraph'.
Add another paragraph by adding a new line inside the body. Start the new line with <p> and end it with </p>. You can write anything you like in between the tags.
Remember: End tags have a slash before their name, like this: </body>
Adding an Image
Try adding this somewhere inside your page body:
<img src="http://mgatland.neocities.org/countryside.jpg" alt="Wispy clouds above a grassy field at dusk">
An <img> tag shows an image on your page.
You can change the image by putting in a different link.
The 'alt' part is for "alternative text". Here you describe the image for visitors who are unable to see it.
Side note: <img> tags are unusual because they don't have an end tag. There's no such thing as </img>.
Links
Try adding this:
<a href="http://www.google.com">Here is a link.</a>It should look like this:
Pay close attention to where the pointy brackets go! The href part is inside the first tag.
Make your link go to a website you like to visit.
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.
About CSS
A CSS rule tells your browser how to draw your HTML.
Here's an example of a CSS rule:
img {
border: 10px dashed green;
margin: 30px;
}
The green part says what the rule is for. This rule is for when you draw an img tag.
The curly brackets { and } mark the start and end of the instructions.
Each instruction is like this:
margin: 30px;
There are hundreds of different rules you can use! They always have a : in the middle and a ; at the end. This one says to leave a 30 pixel wide margin around the element.
So the whole thing says: When you draw an img element (an image), you must draw a border that is 10 pixels thick, green and dashed, and you must leave a margin of empty space around it that is 30 pixels wide.
Add the CSS to your page and see if it works!
Remember that CSS goes in the <style> section of the page.
If it has curly brackets {}, it's CSS. If it has pointy brackets <> it's HTML.
Basic layout
Some people have wide screens, but it's hard to read text that is too wide.
Let's put the contents of our webpage inside a container that won't get too wide.
We're going to rearrange the HTML tree so the body's only child is a new section, <main>, and everything else is now a child of the main.
Add the following tag inside your page <body> (so before your <h1> tag):
<main>
Add this tag at the end of the page, after your last paragraph or image tag and before the closing </body>tag:
</main>
Now the HTML tree should go: body → main → everything else. Finally, add a CSS rule to your <style> section to make the main element narrow:
main {
max-width: 800px;
margin: auto;
background-color: lightblue;
}
The narrow main element will shrink its children.
Customize your page!
It's time to customize your web page. Add a few more images, paragraphs and make it about anything you like!
If you need ideas, how about making a gallery with 5 cute cat photos?
Once you've added a few things, read on for some more advanced HTML and CSS tips.
How to make an image centered
CSS:
img {
display: block;
margin-left: auto;
margin-right: auto;
}
display: block; means this element will be displayed on its own line with nothing on either side. The margin rules put it in the centre.
Is your image too wide? If it is, you can set its size by adding a CSS rule to set the width:
width: 80%;Or try this one instead. Percentage (%) widths change based on the width of the parent. Pixel (px) widths do not:
width: 400px;How Borders, Padding and Margins work
Imagine that html tags create a box. The box can have a border.
HTML:
<p>this has a border</p>
CSS:
p {
border: 1px solid blue;
}
How it looks:
The border is very tight on the left side. We can add padding, which is space between the border and the words inside.
Add this CSS between the curly brackets:
padding: 10px;
How it looks:
Margin is space OUTSIDE the box.
Add this CSS between the curly brackets:
margin: 40px;
How it looks:
Right click on the box above, and choose Inspect. This will open the Web Developer Tools. It can be pretty complicated, but somewhere you should see this diagram which shows you how thick the borders, margins and padding are on:
If you hold your mouse over different parts of the diagram, they will be highlighted on the web page. This can help you figure out why things appear where they are!
You can also double-click on any of the numbers to change them. Try making the top border thicker.
The Developer Tools are just for trying ideas out. The changes you make there are not saved and will disappear when you refresh the page.
Try adding margins, padding, or borders to different parts of your page.
Clean up your CSS
You might now have two different CSS rules for img and two different rules for p. Keep your CSS easy to read by combining these rules together.
Messy example:
p {
color: white;
}
p {
margin: 10px;
}
Tidy it up by combining the two p sections:
p {
color: white;
margin: 10px;
}
Now all the rules for paragraphs are together. Nice and tidy!
Look through your CSS and combine any sections that have the same selector. (The selectors are coloured green in the example above.)
Other CSS rules
Let's add a rounded corners. The rule is called border-radius.
CSS:
border-radius: 10px;How it looks:
How about a shadow?
CSS:
box-shadow: 3px 3px 5px 1px grey;How it looks:
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 we can use to select it. You make up the label. Here I called it warning:
HTML:
<p>This is a normal paragraph.</p>
<p class="warning">This is a WARNING paragraph!.</p>
Now you can write a CSS rule that applies to anything that has that class.
CSS:
.warning {
color: red;
border: 2px solid orange;
background-color: pink;
}
The result:
This is a normal paragraph.
This is a WARNING paragraph!
Note that in our CSS rule, there is a dot in front of the selector for ".warning". That shows that it's not a tag name (like p or img), it's a class name.
Classes let you quickly add your styles to anything you want.
Putting things inside other things
We can create advanced layouts by putting some HTML elements inside other ones.
Here we have put a h4 heading and some 'option' divs inside a div we called a 'survey'.
A div is just a general thing - unlike p (for paragraph), div has no meaning on its own. We can use it to mean whatever we want.
HTML:
<div class="survey">
<h4>How many cats is enough cats?</h4>
<div class="option">one cat</div>
<div class="option">two cats</div>
<div class="option">ten cats</div>
<div class="option">no cats</div>
</div>
CSS:
.survey {
border: 2px solid orange;
padding: 10px;
margin: 10px;
width: 340px;
text-align: center;
}
.option {
background-color: wheat;
padding: 4px;
margin: 4px;
border-radius: 15px;
}How it looks:
How many cats is enough cats?
Try adding a navigation bar to your page.
Add a pair of <nav> tags, then put some link tags (<a>) inside.
Write a CSS rule to make the nav bar a different color from the rest of the page.
Write a rule to make the links inside the nav bar a different color. (If you want them to look different from other links on your page, you will need to give them a class like the 'warning' example we did earlier.)
Links have a built in style that makes them underlined. You may want to override that style by giving them the rule text-decoration: none;
Hover effects
When you hold the mouse over something, that's called "hovering".
We can add special CSS rules that only apply when an element is being hovered over. Normally, this is only used on elements the user can interact with, like links:
a:hover {
color: orange;
}However, you can add hover effects to anything you like!
img:hover {
transform: rotate(4deg);
}or
p:hover {
background-color: slategray;
}If someone is using a phone to view your site, they won't have a mouse so they can't hover 😞 It's important that your website still makes sense without hover effects.
Some terms
Here are some words you can use to talk about HTML:
This whole thing is called an HTML element:
<h1>Welcome to my page</h1>
The element is made out of 3 parts:
- the start tag:
<h1> - the content:
Welcome to my page - the end tag:
</h1>
Some elements contain attributes:
<a class='warning' href='https://www.google.com'>My favourite website</a>
These parts are attributes:
class='warning'href='https://www.google.com'
Attributes always appear inside the start tag.
Some special tags like <img> only have a start tag, no end tag and no content!
So now you know: HTML is made out of elements, and elements are made out of a start tag, content, and an end tag. The start tag might have attributes inside it.
Extra for experts
Try making some elements that display an image and a comment, like this:
I wake up. I nap. I go to bed.
We used the rule display: inline-block on the image and the text to allow them to appear side-by-side instead of on their own lines.
The image and the text are both inside a div element which provides the grey background.
That's the end!
There is a lot more you can do with HTML and CSS, but these are the basics. Remember what you've learned:
- The HTML code in the page <body> is what appears on the screen
- The CSS code in the <style> section tells your browser how to draw things
- You can add images <img src="…"> and links <a href="…">
- CSS can add borders, padding and margins
- Classes let us set up rules then add them to whatever parts of the page we like