1 / 18

McAfee & Big Fish Games CoderDojo

McAfee & Big Fish Games CoderDojo. Week 1 – Beginners Content. Creating your first HTML page. HTML – H yper T ext M ark-up L anguage - 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:

krikor
Download Presentation

McAfee & Big Fish Games CoderDojo

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. McAfee & Big Fish GamesCoderDojo Week 1 – Beginners Content

  2. 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.

  3. 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:

  4. 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.

  5. 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.

  6. 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!!

  7. 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..

  8. 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.

  9. 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:

  10. Save & Run your web page...

  11. 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’.

  12. 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:

  13. 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

  14. 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:

  15. Adding video to our page • Now save and run your page!

  16. 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).

  17. 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:

  18. 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

More Related