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 EYWORDS 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:   This is my title  All the main content goes here  (one of a few tags to have no closing tag) 

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

This line tells the web browser to expect an HTML web page. 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.) 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 section.

My Hero Website! Welcome to my website! This is a website about me! 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 ?  is a paragraph, add some content about your Hero

Inserting an Image We’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) 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 tag i.e 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 Extended Challenge: Add additional properties & images to your hero site

Task 3 – HTML Colours HTML 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 tag and add the following: 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: _colorpicker.asp

Task 4 – Inserting a Hyperlink We’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. 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 Who is he?

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: Tag to place at the start of the table Tag to start a new row 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. Row 1, cell 1 Row 1, cell 2 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 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 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 EYWORDS CSS (Cascading Style Sheet) ~ 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: 1. Open up your index.html page in Notepad++ 2. Create a new file in Notepad++ called… style.css 3. Save this into the same folder as your web page. 4. Add the line of code in bold below to the section of your own web page: My Cool Website! 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.

Tags  tags define divisions (or sections) of our page so we can apply different styles to different parts.  In html this looks like… tags define the start and end of a section in the. Some content would go in here. For example, paragraphs of information, pictures etc. Each needs an ID so the CSS know which one we are styling.

My Cool Website! Welcome to my website! Some info you’ve written YOUR TASK  Add 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 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 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?