Creating Web Pages (part 1)

Spiderman ©Marvel Comics

Creating Web Pages (part 1)

Learning Objective:

Learning Outcomes:

Understand how HTML is laid out and which components are required

to make a webpage.

GOOD: Select and use a suitable heading type and add some basic information in a paragraph.

BEST: Add an image to the page and change the background colour.

BETTER: Use advanced features like image attributes, hexadecimal colour & Hyperlinks

K E Y W O R D S

HTML(Hyper Text Markup Language)

URL

Hexadecimal

Server

head

Local Hosting

tags </>body

indentation

CSS

JavaScript

How is HTML Written?

HTML is made up of open and close tags with content in the middle. Here are some examples: <html> </html> <title> This is my title </title> <body>All the main content goes

here</body> <img> (one of a few tags to have no closing

tag) <a> </a>

Getting Started

Before you can start building your web page you need to do the following:

1. Create a folder in your documents called …

webpage

2. Open up Notepad, create a new document and save it into your “webpage” folder as…

index.html HELP VID1

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</body>

</html>

This line tells the web browser to expect an

HTML web page.

TASK 1Type these tags into your

blank document in Notepadthen save the file.

(Don’t forget to indent it in the same way as here.)

This section gives information about the site

(it’s one of the places search engines look for

information.)

All of the content (the visible parts) of your

website will go into the <body> section.

<!DOCTYPE html>

<html> <head> <title>My Hero Website!</title> </head> <body> <h1>Welcome to my website!</h1>

<p>This is a website about me!</p> </body>

</html> CHALLENGE 1

Add a suitable title, heading and opening paragraph to your web page.

Investigate different types of heading you could use, what happens when you type <h6> </h6> ?

<p> is a paragraph, add some content about your Hero

HELP VID2

Inserting an ImageWe’re now going to add an image to our

webpage.

For an image to be visible to others on the Internet, you must use an image that you have uploaded to a web server and is not just stored on your computer alone.

I have used an image that is on the web. You will find your own and follow it to its source. ( view image)

What are the drawbacks to using an image someone else is hosting it on their server/computer?

HTML tag for an image

(Src stands for source)

Website/Web Server where image is

hosted

Folder on Web Server

Image File

<img src="http://cdn.screenrant.com/wp-content/uploads/Spider-Man-and-the-Avengers.jpg">

Task 2 – Images

Add an image of your choice

Your task is to add 2 images to your website. Do each of the following:

1 – If you have permission/not publishing on the web you could use an image already on the Internet. For example, if you went to Google Images and select a photo, click on “View Original Image”, it will show you just the image and you will be able to view the URL to put in the src=“”

2 – Move/Save an image into the same folder where your HTML file is saved. Once it is there you can just put the file name after the <img src=“”> tag i.e <img src=“Spiderman.jpg“> Make sure you know the file extension (jpg,png,gif etc)

Challenge 2 Extended – Image Properties

Change the properties of the image

Below is an example of an image with additional attributes added to the origina; code, seperated by “Quotation marks”. This will give the web browser more information about how to display the image:

Alt: This is the text that will be displayed if the image cannot be displayed

Width and Height = You specify the exact size that you would like the image to be displayed

<img src=“WHAT EVER YOUR URL WAS" alt=“Spiderman and Friends" width="304" height="228">

Extended Challenge: Add additional properties & images to your hero site

Task 3 – HTML ColoursHTML colours are usually coded using a Hexadecimal Notation

which codes colours in the RGB format (Red, Green, Blue)

To set the background colour for a page find the <body> tag and add the following:

<body bgcolor=“#CCFFFF”>

Notice the American spelling of colour

RGBCC- Amount of Red

FF – Amount of GreenFF – Amount of Blue

Change the background colour to the colour of your choice in your website Use this to select the Hex colour:http://www.w3schools.com/tags/ref_colorpicker.asp

http://www.w3schools.com/tags/ref_colorpicker.asp



Task 4 – Inserting a HyperlinkWe’re now going to add a Hyperlink to our page that

links to another website

A hyperlink is simply a link to another electronic file. Making a hyperlink to a website is making a link to a specific HTML file.

<a> is the HTML tag for a hyperlink. It’s worth noting that the default appearance for hyperlinks in browsers is as follows:

• An unvisited link is underlined and blue• A visited link is underlined and purple• An active link is underlined and red

Add the code below to your website

HTML tag for a hyperlink to a

website

The URL of the page the link goes to

The wording that will appear as the

link

The end of the hyperlink

<a href="http://marvel.com/universe/Spider-Man_(Peter_Parker)/”>Who is he? </a>

Challenge 4 – Add a Hyperlink to an Image

Now that you have learnt how to make the words into a hyperlink, your task is to make the image you added earlier into a hyperlink.

Code your website so that the user is able to click on your image and it will take them to a website that relates to your hero

Task 5 – Tables

Important HTML Table Tags:

<table> Tag to place at the start of the table

<tr> Tag to start a new row<td> Tag to display a column within that row

Tables are very useful on websites to help organise the appearance of the content you wish to display.

<table border="1">< tr>< td>Row 1, cell 1</td>< td>Row 1, cell 2</td>< /tr>< /table>

Enter the code below into your website:

What Could you put in a table about your hero?

Challenge 5 – Adding to the table

Using your knowledge of tables, edit and add to your table code to change it so that it looks like the webpage below:

Don’t be afraid to copy and paste any duplicated code

Quick Questions

1. What does HTML stand for?

2. What are the three main languages of the Web?

3. What is the purpose of the <body> tags?

4. Why do we indent different sections of our code?

Spiderman ©Marvel Comics

Creating Web Pages (part 2)

Learning Objective:

Learning Outcomes:

Understand how CSS works with HTML to change the appearance of

a web page.

GOOD: Change the colours of the page background and text using CSS.

BETTER: Use <div> tags to define and style separate areas of the page and experiment and apply different border styles to CSS boxes.

BEST: Apply a font using Google Fonts.

K E Y W O R D S

CSS(Cascading Style Sheet)

~<div> tags

~border

~ RGB value

What is CSS?

One of the main languages of the Web:HTML CSSJavaScript

HTML defines the content. (we covered this last lesson.)

CSS defines the appearance.

JavaScript defines the behaviour.

Getting Started

Before you can start styling your web page with CSS you need to do the following:1. Open up your index.html page in Notepad++2. Create a new file in Notepad++ called…

style.css3. Save this into the same folder as your web page.4. Add the line of code in bold below to the

<head> section of your own web page:

<head> <title>My Cool Website!</title> <link rel="stylesheet" href="style.css"></head>

Note – NO capitals here!

Structure of CSS

CSS is a bit different to html. Instead of open and close tags it uses brackets{ } to begin and end a section.

To define a style for our body we would do this…

body{

}

This tells the CSS what part of the web page

we are styling.

Curly brackets are used to begin and end each

section of CSS.

color:

A CSS property can be assigned a value using

the colon :

All CSS statements must end with a

semicolon ;

rgb(251, 133, 195);

body{ color: rgb(195,1,112); background-color: rgb(251,133,195);}

YOUR TASK Type these styles into your

CSS document. You can play with the RGB values to change the colours. Search online for an “RGB Colour picker” to help you.

<div> Tags

<div> tags define divisions (or sections) of our page so we can apply different styles todifferent parts.

In html this looks like…

<div id=“box”>

</div>

<div> tags define the start and end of a

section in the

<body>.

Some content would go in here. For

example, paragraphs of information, pictures etc.

Each <div> needs an ID so the CSS

know which one we are styling.

<!DOCTYPE html>

<html> <head> <title>My Cool Website!</title> </head> <body> <div id=“box”> <h1>Welcome to my website!</h1>

<p>Some info you’ve written </p></div>

</body>

</html>

YOUR TASK Add <div> tags to your web

page to define a section of the html. Add the bits in bold into your own page

What is HTML?

One of the main languages of the Web: HTMLCSSJavaScript

HTML defines the content.

CSS defines the appearance. (we’ll look at this next lesson.)

JavaScript defines the behaviour.

body{ color: rgb(195,1,112); background-color: rgb(251,133,195);}

div#box{ width: 80%; margin-left: 10%; background-color: rgb(253,195,225);

} YOUR TASKS Give your box some style by adding the section in bold

to your CSS document. Use www.w3schools.com to find out how to give

your box a border (hint: put the code underneath the background colour)

EXTENSION Apply a font to your web page using “Google Fonts”.

Quick Questions

1. What does CSS stand for?

2. What are <div> tags used for?

3. Give an example of a type of border style that can be applied using CSS.

4. Who managed to successfully apply a font using Google Fonts?

Creating Web Pages (part 1)

Documents

Transcript of Creating Web Pages (part 1)