Week 1 – Beginners Content McAfee & Big Fish Games CoderDojo

Creating your first HTML page HTML – Hyper Text Mark-up Language - one of the languages in which we can build web pages Open Notepad++ A new document will be automatically opened Let’s save it as a HTML document: Click File -> Save As.. Select ‘Desktop’ on the left hand side so that the file saves to your desktop. Select ‘Hyper Text Mark-up Language file’ from the ‘File Type’ drop down. Click Save.

Now we’ve got a HTML page HTML documents are built using HTML tags – let’s begin by adding some tags to our page. Make sure you still have the page we created open in Notepad++, and type the following text into your file:

Running our HTML page To run our HTML page, we just have to open it in a web browser (Internet Explorer, Chrome, Firefox) - Your PC will have one of these installed. Browse to the desktop where we saved our web page, and double click on it – it will open in your web browser.

A closer look... Let’s take a look at what we’ve created: The tag specifies the web page title. This must be within the tag. The tag specifies a level 1 header. The other tags are required in order for this to be a HTML document. Notice that every tag has an opening tag (e.g., and a closing tag, and can have other tags inside it.

The header tag As we saw in our example, the tag created a header for our web page. The header tag has 6 levels – levels1-6. Our header tag was a level 1 header,, the largest header. A level 6 header is the smallest. Try changing our tag to a tag, running your page and seeing what happens!!

Adding more content to our page We can use the tag to add paragraphs of text to our page, as with all other tags, it must be closed by a tag. Let’s try it out – add the following tag to your page – the text can be whatever you want..

Now we have a tag Now we have added a tag, and our text should be displayed. You can add as many tags as you wish to a page – try it out by adding some more, saving and re-opening your page.

Adding an image to our page Let’s add an image to our web page. Images can be added to a HTML page using the tag. Modify your HTML code to include the following image tag:

Save & Run your web page...

The tag Used to add pictures to our web page. First time we’ve seen a self closing tag – notice how we don’t need to have a tag. First time we’ve seen attributes in a tag: The src attribute points to the image file you want to display. This can be somewhere on the internet (like ours) or on your PC. The alt attribute specifies text to display if the image can’t display. ‘alt’ is short for ‘alternative’.

The tag – alt attribute Try this out – delete something from the src tag so the picture we’re loading can’t be found. Notice now how our alt text displays:

The tag – more attributes Our image looks a little big for our page! Let’s make our image a bit smaller... We can use two more attributes to give it a smaller size: height – the height of the image width – the width of the image

Adding video to our page Let’s add some video to our HTML page. We can easily add a YouTube video directly in our page. Add the following HTML code to your web page:

Adding video to our page Now save and run your page!

Examining our video code Notice our video is in a tag (when we saw it earlier it contained text, this time it contains a video) Notice the different attributes (like we saw in the tag).

Creating links to other pages We can create links from our page to other pages – these can be pages on our PC or pages on the Internet. Let’s create some links to a few pages on the internet. Add the following HTML code under our video:

Now our page is linked.. Now we have a link on our page to another site. Links are created using the tag. The href attribute specifies our link address. Try adding some more links by yourself