Making Internet with HTML and CSS

The Internet!

How do you think web sites are made?

Did someone draw it on paper and scan it into the computer?
Did someone make it with a word processor (Like Microsoft Word?)
Did someone yell at the computer until it made a website?

Nope! The Internet is made with... Code!

Code is how we tell computers what to do. There are lots of different languages of code, but they all translate your goals and ideas into information that computers understand

Web sites are made up of a language called HTML

What's a browser?

A browser reads the HTML code you write, and displays all the content you told it to in your code
Browsers aren't very smart: they only understand a couple languages. They don't understand english, but they do know HTML
You have to be really specific about what you tell the browser to do, because it's not as smart as you!

Writing HTML code

HTML is made up of building blocks called tags. Tags tell the browser what kind of content you want displayed on the page.
For example, we tell the browser that we want a paragraph using a tag called a "paragraph tag".
A paragraph tag looks like <p>

Because browsers aren't very smart, it doesn't know where your paragraph starts and stops
To make sure the browser understands us, we put our paragraph in between two paragraph tags
The paragraph tag at the end of a paragraph has a slash (/) after the first bracket to let the browser know that this is an ending tag.
<p>This is a paragraph</p>

HTML Tags

Here's a really simple web page:

This line of HTML code tells the browser that the words inside the two tags are a paragraph

The combination of an opening tag, a closing tag, and the content between them makes up what we call an element

Elements are the building-blocks of web pages

There are lots of different kinds of elements, some tell the browser about text elements like paragraphs, lists and headings.

Other elements are for different parts of web pages, like links and images

Headings

Headings are important text that you want your readers to pay attention to

There are 6 kinds of heading tags in HTML

<h1>, <h2>, <h3>, <h4>, <h5>, and <h6>

<h1> is the most important (biggest) heading

<h6> is the least important (smallest) heading

You don't have to use all the headings (you might only use h1 and h2)

But you have to use them in order (h1 comes first!)

Mozilla Thimble

In your browser, go to Webmaker.org

Look for a project called "pics from my last trip". It looks like a photo of trees, and has a red "Starter Project" banner on it. Click on this project.

Click the "Remix" button in the top right of the project page.

Let's take a look at the code:

Notice how there's black italic text between  symbols
These are called Comments. They don't show up on the webpage, they're just there to help you out.

Also notice that there are two main sections to the code: The parts between the two <head> tags, and the parts between the two <body> tags.
Everything inside the <head> tags is invisible on the webpage, the head is just where we tell the browser information about our page, like the title
The <body> is where all our content goes, that's the part that shows up on our page

Let's start customizing our code!

Remember our 6 kinds of headings? Let's look for the biggest one and change it. Right now, the <h1> tag shows the initials "JB".
Look for the part of your code that says <h1 class="logo">JB</h1>
Change the text between the two tags to whatever you like: some initials, your group name, or the name of your website
Watch the changes happen in the preview window on the right side!

Next, let's change the title that says "My Photographs" into something else, like an introduction to your website or a welcome message
Look for the part of code that says <h2 class="title">My Photographs</h2>
Change the text between the two <h2> tags to your own title
Repeat the same process for the first paragraph on the page (remember, those are <p> tags)

Hyper-links

Links are one of the most important parts of the internet
A link element is called an anchor in HTML, and the tag is just an a

<a href="http://google.com">Google</a>

<a href="http://google.com">Google</a>

This part that says "h-ref" is called an attribute. An attribute gives the browser extra information about the element you want to make. In this case, the information we want to tell the browser is the link's hypertext-reference.
It sounds like a confusing term, but really it just means "address", like the address that you see in the bar at the top of your browser. This link has an attribute that tells the browser that when someone clicks on the link, they should go to the address google.com

Let's add a link

We're going to make a link to the interview you wrote.
Underneath your paragraph, add an anchor tag like the one below.

<a href="http://google.com">My Interview</a>

Replace the part that says "http://google.com" (the part inside the quotation marks) with the link to your interview.
Replace the part that says "My Interview" with the title of your interview (that's the part people will click on)

Images

Images are like hyperlinks because they also use an attribute to tell the browser a web address

<img src="http://ladieslearningcode.com/wp-content/uploads/2013/02/IMG_3800.jpg" />

Instead of an href attribute, an image has a src attribute, which tells the browser the source of the image

The soure of the image tells the browser where to look for the picture. The browser then goes and gets the image from the source you tell it, and displays it in the web page.

Let's add an image

We're going to replace the first tree picture with an animated gif.
Find the part in the code that says:

<img src="http://farm8.staticflickr.com/...jpg">

And replace the src value with the link to your animated gif

<img src="http://flickr.com/cat.gif">

Nesting

In HTML, you're allowed to have tags inside other tags

This is called Nesting

Nesting can make it easy to get lost if you don't pay close attention to where you are


<section>
	<p>Paragraph inside of a section!</p>
</section>

Don't get lost!

BEFORE you start editing any of the code, make sure you know where you are.

Remember, most HTML tags come in pairs (Except <img>), so whenever you delete or change something, make sure you've found both parts of the pair.

Add in your crests!

We're going to add in the crests where the landscape photos are
Since there are only two landscape photos, we'll have to duplicate the section 2 times to make room for all 6 crests
The landscape pictures are inside an unordered list
The unordered list tag looks like <ul>
Each list item inside the unordered list is a <li> tag

Unordered Lists

Lists are a good example of nesting
List items (<li>) are nested inside unordered lists (<ul>)


<ul>
	<li>First list item!</li>
	<li>Second list item!</li>
</ul>

Duplicate two list items

Look for the part in the code that has a comment that says "A Picture".
Copy everything between the two <ul> tags
You should start selecting right after the part that looks like

<ul class="grid half-width group">

And end right before the part that looks like:

<ul>

Next, Paste those two list items right before the </ul> tag (the end of the unodered list)
Do this twice, so that we now have 6 list items
Next, replace the src values for each image with the links to your crests
You can replace the text between each of the <h2> tags with your names!

Add your logo!

If you want the logo for your site to be more exciting, why not replace it with the logo picture you made!
Find the <h2> tag that we changed earlier (the part in the green circle)
Delete the <h2> tag
Add in a <img> tag, and make the src value the link to your logo

<img src="http://flickr.com/logo.png" >

We're going to make our sites look pretty with CSS now, but you'll have time to write more content and add more pictures afterwards!

Styling with CSS

You can make plain-looking documents like Wikipedia using only HTML

But if you want to make something more fancy-looking, you need to do CSS to tell the browser what the elements should look like

Use HTML to tell the browser what kind of content is in your document
Use CSS to tell the browser what your content looks like

Building a webpage is like creating a play

The HTML is like the script: it tells the actors what to say and what order to say it in. If you only have HTML, your audience will understand the story, but it might not be a very interesting play
CSS is like the direction, costumes, lighting, and sets in the play. It's telling the actors how to say their lines, where they should be standing when they do it, what they should wear, and what the background looks like.

Writing CSS is like writing rules

CSS is also about Being Bossy

A CSS rule looks like this:


						p {
							color: red;
						}

Each CSS rule is made up of a selector and one or more properties

A property is the name of the thing you want to control. Each property has a value that you can change.

In this example, p is the selector, color is the property, and red is the value.

CSS goes in between <style> tags in our HTML

This lets the browser know that we're writing CSS now, not HTML

Look for the <style> tags at the end of the HTML document in thimble

CSS Selectors

There are several different ways you can target HTML elements to change their styles
We can select elements by the kind of element, for example, we can select all paragraphs with:

p {}

You might have noticed in the HTML that some of the elements have an attribute called a class

<h1 class="logo">

This is so that we can write a selector in the CSS to pick out elements by class
To pick out the <h1> with a class of logo we write:

h1.logo {}

Let's change the background of our header

At the very top of our website, there's a grey background behind our logo
Grey is boring, change it to your favourite colour!
Find the selector for the <header> element


header {
	background: #e0e0e0;
}

This code means that the <header> element will have a background that is #e0e0e0
#e0e0e0 is a hex code. It's a code that means a colour in computer language. In this case, it means light grey.
Delete the part that says #e0e0e0 and write the word red
Make sure you leave the colon and semi-colon where they were.


header {
	background: red;
}

You can try all sorts of colours here: pink, blue, green, black, and more
If you want to get a specific shade of your favourite colour, you'll need a hex code
You can find hex codes for colours at colorpicker.com

How would we change the background colour of the whole page?

Remember how the <body> element holds all the content on our page?

Find the selector for the body element and change the background colour


body {
	background: #CCF2FF;
}

Changing Fonts

In the CSS rules for the body, there's a font-family property.
Right now the font is set to Georgia
You can change the font to Arial, Helvetica, Times, Verdana, Courier, or Impact

Let's change our main heading

Remember how we changed the text of the <h2 class="title">?
Now let's change the style
Find the selector for h2.title
We can change the text colour with the color property


h2.title {
	color: darkblue;
}

We can make the font be not italic by changing the font-style value to normal
We can make it bold setting the font-weight property to bold
We can make the text bigger by changing the font-size property to something like 34px

Have fun with HTML and CSS

Try adding more content: replace all the default text with your own writing
Replace images with pictures that are relevant to your topic
Customize the way your site works by changing CSS properties
Hover your mouse over a section in the preview to find the HTML code for that section
Then try to find the matching selector in the CSS!

Fun CSS Ideas


font-size: 34px;
font-weight: bold;
font-style: italic;
text-decoration: underline;
text-transform: uppercase;
text-shadow: 1px 1px 3px pink;
border: 2px dotted green;
border-radius: 50%; /* use on an image */