McAfee & Big Fish Games CoderDojo

McAfee & Big Fish GamesCoderDojo Week 1 – Beginners Content

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 <title> tag specifies the web page title. This must be within the <head> tag. • The <h1> 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. <html>,and a closing tag </html>, and can have other tags inside it.

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

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

Now we have a <p> tag • Now we have added a <p> tag, and our text should be displayed. • You can add as many <p> 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 <img> tag. • Modify your HTML code to include the following image tag:

Save & Run your web page...

The <img> 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 </img> tag. • First time we’ve seen attributes in a tag: • <imgsrc="https://www.cia.gov/library/publications/the-world-factbook/graphics/flags/large/ei-lgflag.gif" alt="Ireland Flag" /> • 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 <img> 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 <img> 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 <p> tag (when we saw it earlier it contained text, this time it contains a video) • Notice the different attributes (like we saw in the <img> 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 <a> tag. • The hrefattribute specifies our link address. • Try adding some more links by yourself

McAfee & Big Fish Games CoderDojo