CSS Lesson 3: Adding a Header

Hi Everyone!

In our last CSS lesson we learnt how to add background colors and containers. Today we will be learning how to make a header. To make a header (similar to containers) we need to link our CSS code back to our HTML code. For this we will need two files, an ‘index.html’ file and a ‘stylesheet.css’.

Firstly let’s write our CSS code. Using CSS we can customize our header like so.

h1 {
font-family: Courier;
font-size: 20px;
color: blue;
}

Next we’ll write our HTML code. Through this code we’ll link our two files together and we’ll also write what we want our header to display.

<link href”stylesheet.css” rel=“stylesheet” type=“text/css”>
<h1>Yay! You made a heading.</h1>

That’s it! If you have any questions about this code feel free to leave a comment below. Happy coding! 🙂

Advertisements

CSS Lesson 1: Basic CSS

Hi Everyone,

Previously we have been working with HTML, which is basically used for creating the content on your website. But, we haven’t yet talked about CSS. CSS stands for Cascading Styles Sheets, in other words you can use CSS to  your website!

If you would like some more information about how CSS works click here. 

Here is an example of how to use CSS through a HTML document to change your background colour.

<!DOCTYPE >
<html>
<head>
<style>
body { 
       background-color: yellow;
}
</style>
</head>

 

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>