CSS Lesson 2: Background Colour and Containers

Hi Everyone,

As you may have noticed my previous post about CSS was written on an HTML document. Although today we will be using a CSS document!

Today we will be learning how to change the background colour and create containers in a CSS document.  When creating containers we will need to also need to create some code in an HTML document.

Let’s start off with some simple code to change our background colour.

body {
background-color:#FF9999
}     

Now  let’s get started on our containers. Containers can be used for organising your web page into different sections, or just for show.

body {
background-color:#FF9999
}     

.container {
width:860px;
min-height:400px; 
background-color:white;
margin:0 auto;
padding:20px;
}

Now we need to write some code into an HTML document so that the container will actually show up on our web page.

<body>

<div class="container"> 
</div>

</body>

Next time we will work on creating a header in our code.

Advertisements

Other Resources for Learning HTML

When I decided I was going to teach myself HTML I needed to find some reliable resources. I started out with CodeAcademy, this website allows you to explore new and different ways to code. I decided to start with HTML and CSS because I am interested in websites. HTML and CSS and the building blocks of most websites.

I enjoyed CodeAcademy so much I decided to save up for a reference book. I chose ‘Beginning HTML5 and CSS3 for Dummies‘. I have used this book as a reference for writing lesson blog posts.

A great online reference is w3schools. This website has a complete reference guide to all HTML tags as well as CSS. This website also offers other web languages like JavaScript, that I’d like to start learning soon.

This video talks about why it is important to learn code and the possiblities it creates, WATCH IT NOW!

If you have any other suggestions please leave a comment below.

 

Thanks,

Georgia

HTML Lesson 5 : Adding Tables

Adding tables to your website is a great way to organise information.

Today I am going to be showing you how to add a table to your website. Tables are commonly used for organising statistics or important information. Below you will find an example.

<table style="width:300px">
<tr>
<td>Emma</td>
<td>Mason</td>
<td>50 Points</td>
</tr>
</table>

This code would display a 1×3 table. Now lets add this tag to our code from Lesson 4.

<!DOCTYPE html>
<html>
<head>
<title>
Techno Girl
</title>
</head>
<body>
<This is how you start a paragraph>
<p>
<a href=”http://www.google.com" target=”blank”>Click here for all life’s answers</a>
<img src="http://rollcode.com/wp-content/uploads/2014/02/calm_geek_geek_on_pau87x.jpg">
<a href="http://www.google.com"><img src="http://messiahmom.files.wordpress.com/2011/01/awkward-turtle.jpg" alt="Awkward Turtle" width="42" height="42"></a>
<table style="width:300px">
<tr>
<td>Emma</td>
<td>Mason</td>
<td>50 Points</td>
</tr>
</table>
</body>
</html>

HTML Lesson 4 : Linking Through Images

Adding a link through an image is a great way to lead others to different web pages.

Today I am going to be showing you how to create a link through an image. Below you will find an example.

<a href="http://www.google.com"><img src="http://messiahmom.files.wordpress.com/2011/01/awkward-turtle.jpg" alt="Awkward Turtle" width="42" height="42"></a>

This will diplay an image of an ‘Awkward Turtle’ that is linked to Google. Clicking the ‘Turtle’ opens the page specified in the ‘href’ part of the tag. In this case Google.

Now let’s add this tag to our code from Lesson 3. 

<!DOCTYPE html>
<html>
<head>
<title>
Techno Girl
</title>
</head>
<body>
<This is how you start a paragraph>
<p>
<a href=”http://www.google.com" target=”blank”>Click here for all life’s answers</a>
<img src="http://rollcode.com/wp-content/uploads/2014/02/calm_geek_geek_on_pau87x.jpg">
<a href="http://www.google.com"><img src="http://messiahmom.files.wordpress.com/2011/01/awkward-turtle.jpg" alt="Awkward Turtle" width="42" height="42"></a>
</body>
</html>

HTML Lesson 3 : Adding Images

Adding an image to your website gives it colour and versatility.

Today I am going to be showing you how to put an image on your website. Below you will see an example of an image tag.

<img src="http://rollcode.com/wp-content/uploads/2014/02/calm_geek_geek_on_pau87x.jpg">

In another example we can specify the hieght and width of the image.

<img src="http://rollcode.com/wp-content/uploads/2014/02/calm_geek_geek_on_pau87x.jpg" height="42" width="42">

Now let’s add a image to our code from Lesson 2.

<!DOCTYPE html>
<html>
<head>
<title>
Techno Girl
</title>
</head>
<body>
<This is how you start a paragraph>
<p>
<a href=”http://www.google.com" target=”blank”>Click here for all life’s answers</a>
<<img src="http://rollcode.com/wp-content/uploads/2014/02/calm_geek_geek_on_pau87x.jpg">
</body>
</html>

HTML Lesson 2 : Using Hyperlinks

Hyperlinks lead you to another webpage and which can be very useful in a variety of ways.

Today I will be showing you how to create a hyperlink in your HTML page. The basic format of a hyperlink has two parts. The URL you are linking to and the title. The example below shows how to link to google.

<a href="http://www.google.com">Click here for all life's answers</a>

Click here for all life’s answers

In another example we can open the hyperlink in another browser tab using the target tag.

<a href="http://www.google.com" target="_blank">Click here for all life's answers</a>

Lets add a hyperlink to the code we created in Lesson 1.

<!DOCTYPE html>
<html>
<head>
<title>
Techno Girl
</title>
</head>
<body>
<This is how you start a paragraph>
<p>
<a href=”http://www.google.com" target=”blank”>Click here for all life’s answers</a>
</body>
</html>

HTML Lesson 1: Basic HTML Format

The basic building blocks of an HTML file are ‘tags’. Tags define sections of the document and can include structure and styles.

Today I am going to be showing you how to set up your HTML page, I will also be showing you how to create a title for your website and a paragraph for your webpage.

Step 1: Create a ‘Textedit’ (or -Text File- on a windows computer) document

Step 2: Write <!DOCTYPE html>

Step 3: Underneath what you just wrote type <html> and </html>

Step 4: In Between the ‘html’ tags press the ‘enter’ key a few times. Then press ‘tab’ and write the following tags <head> and </head>

Step 5: In Between those tags press the ‘enter’ key a few times. Then write the following tags <title> and </title>

Step 6: Between the ‘title’ tags type the title of your website. This title will appear when someone searches up your website in an internet browser.

The body tag marks the part of the document that will appear in your web browser. In this example we will display a simple piece of text.

Step 7: Add the body tags as follows <body> and </body>.

Step 8: Add the paragraph tags in between the body tags, <p> and </p>. Between those paragraph tags type what you would like to appear on your web page.

<!DOCTYPE html>
<html>
<head>
<title>
Techno Girl
</title>
</head>
<body>
<p>This is how you start a paragraph</p>
</body>
</html>