You know the primary colors are red, blue, and yellow:
But the primary colors for computer and TV screens are different. They are red, green, and blue.
A screen is made of pixels. You may think a pixel is a tiny square lightbulb. It's actually 3 really tiny rectangle-shaped lightbulbs, called subpixels.
In each pixel, there is one red, one green, and one blue subpixel.
Each pixel has an RGB code that says what color it should make.
To make the color purple, a pixel needs its red and blue subpixels turned on, and its green subpixel turned off:
The RGB code for a purple pixel is:
A yellow pixel has an RGB code of:
An orange pixel has an RGB code of:
We usually use decimal numbers. But programmers often use hexadecimal numbers — or hex
— instead.
In the decimal system there are ten digits.
In the hexadecimal system there are sixteen digits:
Decimal: | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | ||||||
Hex: | 0 |
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
A |
B |
C |
D |
E |
F |
Hex uses the letters A
to F
for the numbers 10 to 15.
This lets you write bigger numbers in fewer spaces: 10 in decimal and A
in hex are both the same number, but 10
is two spaces long, and
is only one.A
Here are some RGB codes in decimal and hex:
decimal | hex | |
red | 255, 0, 0 | FF0000 |
white | 255, 255, 255 | FFFFFF |
dark green | 0, 170, 0 | 00AA00 |
A hex RGB code is actually 3 numbers. FFAA00
for the color orange is actually FF
for red, AA
for green, and 00
for blue.
Knowing how hex works makes it easier to find the perfect color for your website or app.
Just remember: When you see ABCDEF
, you're seeing three numbers: AB
for red, CD
for green, and EF
for blue.
RGB codes are case-insensitive: the computer treats them the same if they're UPPERCASE or lowercase.
One neat thing about knowing hex is you can make colors from words, using the letters A through F!
You can also cheat and use some numbers in place of letters, like 5
for S
.
What other words can you turn into colors?
This paragraph has been styled to look different from the other paragraphs in this book. The code for styling is called CSS. The CSS for this paragraph is below.
A property is something you have. A value is an amount, a measurement, or a setting
— like how you can set
your phone's ringtone.
When you pick a CSS property and give it a value, you make a declaration, like this:
background-color:#FF0000;
This declaration has 3 punctuation marks:
: | colon |
; | semicolon |
# | pound, or hash |
Computers are very picky about punctuation in CSS. If the punctuation is wrong, the CSS won't work.
There are over 500 CSS properties.
This means each image, button, or piece of text you see on a webpage has 500 different settings
you can change to make it look different. That's a lot!
Each CSS declaration needs a selector. It tells your computer which part of a webpage it should select
to use with that declaration. For example:
p, code, img{ width:400px; height:200px; }
This tells your computer that it should select something and make it 400 pixels wide and 200 pixels high.
A selector and its declarations are called a CSS rule.
A rule can be written on one line, or many lines. But the punctuation is always the same.
This selects every quote and every piece of code:
q, code
This selects every piece of code inside a quote:
q code
- form button
- form p button
- form, p, button
- form, button
Fill in the selectors for…
All of a website's CSS is usually kept in a stylesheet:
1 | p, code{ 2 | color:#000000; 3 | font-size:18px; 4 | } 5 | p{ 6 | color:#FF0000; 7 | } 8 | code{ 9 | color:#0000FF; 10| }
It's a sheet of style rules.
The C
in CSS
stands for cascading
, like a waterfall. This means three things:
- If a website has two stylesheets, it uses both of them.
- If a website has two CSS rules for paragraphs, it uses both rules…
- …but if both rules have a
color
, the website will ignore the firstcolor
and use the second one.
1 | p{ 2 | background-color:#000000; 3 | color:#FFFF00; 4 | } 5 | code, p{ 6 | background-color:#00FF00; 7 | } 8 | code{ 9 | background-color:#000000; 10| background-color:#0000FF; 11| }
<h1>
Introducing HTML</h1>
<p>
If you look at the code for any webpage on the Internet, the first thing you see is <dfn>
HTML</dfn>
. You <em>
always</em>
start coding a webpage by writing HTML.</p>
<p>
HTML is a way of grouping words together. It lets you say to your computer, <q>
Hey, <em>
this</em>
group of words has <em>
that</em>
job.</q>
</p>
A webpage can have as many tags as you want. They are (almost) always used to group words together.
HTML has simple rules:
- Elements need an open tag and a close tag.
- Elements have to nest.
There are about 100 HTML elements. But you use only about 15 of them for most things.
The inventors of HTML liked abbreviations.
They could have invented a <paragraph>
tag. Instead, they invented a <p>
tag.
But if you don't know HTML, <paragraph>
is much easier to understand than <p>
.
Things you write really fast can be hard to read. Things that are easy to read can take a long time to write.
Whenever you're making a coding language, you want your language to balance being easy to write and easy to read.
Think back to CSS.
On a webpage, to change the background colors for all paragraphs and quotes to red, and all headlines to blue, you would create a stylesheet like this:
1 | p, q{ 2 | background-color:#FF0000; 3 | } 4 | h1{ 5 | background-color:#0000FF; 6 | }
You usually create two files to make one webpage:
- An HTML document, maybe named
index.html
- A CSS stylesheet, maybe named
styles.css
These files can be named anything you want, but should end with .html
and .css
.
A stylesheet can be long or short. Your webpage will work fine with no stylesheet at all (but it may not look very good).
Every webpage on the Internet begins the same way:
1 | <!DOCTYPE html> 2 | <html> 3 | <head> 4 | <title>My Webpage</title> 5 | </head> 6 | <body> 7 | <h1>Hello, world!</h1> 8 | </body> 9 | </html>
You should always…
- …begin with
<!DOCTYPE html>
- …have exactly one
html
element - …have exactly one
head
andbody
inside thehtml
- …have exactly one
title
inside thehead
What is this?
A sample of a book. The complete book will be printed on paper, which is why it's without a computer
.
Why?
Because other learn-to-code
books are:
- Boring. I thought a more interactive one would be fun.
- Expensive. You can code a website from scratch and publish it, all for free from a library computer. Why change that?
- Long. The only people who want to read 300 pages about Javascript already know Javascript.
Who's this for?
People who say, I'm just not a computer person.
Who are you?
Robert, aka Robin. Source code on Github.