Creating Web Pages (part 1)

Creating Web Pages (part 1)

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

HTML(Hyper Text Markup Language) CSS head JavaScript tags </> body Hexadecimal indentation URL Server Local Hosting

Recap

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: • Create a folder in your documents called … webpage • Open up Notepad, create a new document and save it into your “webpage” folder as… index.html HELP VID1

This line tells the web browser to expect an HTML web page. <!DOCTYPE html><html> <head> </head> <body> </body></html> This section gives information about the site (it’s one of the places search engines look for information.) TASK 1 Type these tags into your blank document in Notepad then save the file. (Don’t forget to indent it in the same way as here.) 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> HELP VID2 • 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

Inserting an Image 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? We’re now going to add an image to our webpage. <img src="http://cdn.screenrant.com/wp-content/uploads/Spider-Man-and-the-Avengers.jpg"> HTML tag for an image (Src stands for source) Website/Web Server where image is hosted Folder on Web Server Image File

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 Colours To set the background colour for a page find the <body> tag and add the following: <body bgcolor=“#CCFFFF”> HTML colours are usually coded using a Hexadecimal Notation which codes colours in the RGB format (Red, Green, Blue) Notice the American spelling of colour RGB CC- Amount of Red FF – Amount of Green FF – 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

Task 4 – Inserting a Hyperlink • 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 We’re now going to add a Hyperlink to our page that links to another website <a href="http://marvel.com/universe/Spider-Man_(Peter_Parker)/”>Who is he? </a> 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

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 Tables are very useful on websites to help organise the appearance of the content you wish to display. Enter the code below into your website: 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 <table border="1">< tr>< td>Row 1, cell 1</td>< td>Row 1, cell 2</td>< /tr>< /table> 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 • What does HTML stand for? • What are the three main languages of the Web? • What is the purpose of the <body> tags? • Why do we indent different sections of our code?

Creating Web Pages (part 2)

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.

CSS(Cascading Style Sheet)~<div> tags~border~ RGB value

What is CSS? • One of the main languages of the Web: • HTML • CSS • JavaScript • 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: • Open up your index.html page in Notepad++ • Create a new file in Notepad++ called… style.css • Save this into the same folder as your web page. • Add the line of code in bold below to the <head> section of your own web page: <head><title>My Cool Website!</title> <linkrel="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{ } A CSS property can be assigned a value using the colon : This tells the CSS what part of the web page we are styling. color: rgb(251, 133, 195); Curly brackets are used to begin and end each section of CSS. All CSS statements must end with a semicolon ;

body{color:rgb(195,1,112);background-color: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> Each <div> needs an ID so the CSS know which one we are styling. <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.

<!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: • HTML • CSS • JavaScript • 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 • What does CSS stand for? • What are <div> tags used for? • Give an example of a type of border style that can be applied using CSS. • Who managed to successfully apply a font using Google Fonts?

Creating Web Pages (part 1)