McAfee & Big Fish Games CoderDojo

Week 1 Beginners ContentMcAfee & Big Fish GamesCoderDojoCreating your first HTML pageHTML Hyper Text Mark-up Language - one of the languages in which we can build web pages

Open Notepad++A new document will be automatically openedLets 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 weve got a HTML pageHTML documents are built using HTML tags lets 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 pageTo 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...Lets take a look at what weve 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 tagAs 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 pageWe can use the tag to add paragraphs of text to our page, as with all other tags, it must be closed by a tag.Lets try it out add the following tag to your page the text can be whatever you want..

Now we have a tagNow 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 pageLets 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 tagUsed to add pictures to our web page.First time weve seen a self closing tag notice how we dont need to have a tag.First time weve 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 cant display. alt is short for alternative.The tag alt attributeTry this out delete something from the src tag so the picture were loading cant be found.Notice now how our alt text displays:

The tag more attributesOur image looks a little big for our page!Lets make our image a bit smaller...We can use two more attributes to give it a smaller size:height the height of the imagewidth the width of the image

Adding video to our pageLets 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 pageNow 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 pagesWe can create links from our page to other pages these can be pages on our PC or pages on the Internet.Lets 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