G046 Lecture 03 Introduction To HTML Mr C Johnston ICT Teacher

Objectives Know what HTML is and the structure of a standard HTML document, Knowledge of basic HTML tags, Annotate a html document.

What is HTML?? HTML stands for Hypertext Mark-up Language, It was invented in 1990 by Tim Burners-Lee a scientist who worked for CERN in Switzerland. HTML uses tags to instruct browsers on how to format and display the information on a web page. The main advantage of HTML is that you can link between pages.

Tags HTML tags are English words which act as instructions on how the content should be formatted, Command must be enclosed within <> for them to be recognised and ended with. The content you wish to format goes between them. My Homepage will make text appear bold. My Homepage

Document Structure HTML documents all need to following structure: Place title of page here – it will be displayed in the top blue bar or browser. This is where the main content of the site will appear

Images To use an image on your page it needs to be saved as a jpeg or gif file, in a folder called images (to keep things tidy). You then use the to insert it into the page. e.g

Coding For Hyperlinks Code for a link to another page in the site My Link e.g. My Hobbies Code for a link to another site on the internet My Link e.g. BBC Website To use an image as a link use the tag between the link tags, e.g

Example Two Page Website Web Page 1 This is web page 1 Here is a link to web page 2 Saved as page1.html Web Page 2 This is web page 2 Here is a link back to web page 1 Saved as page2.html

Using Basic Colours Unless your are using an image on your website, text and backgrounds need to be formatted using the or tag. HTML recognises 16 basic colours by entering their name: Black Navy Green Maroon Gray Blue Lime Red Silver Teal Olive Purple White Aqua Yellow Fuchsia

Using Colour Codes HTML supports about 16 million colours, Advanced colours use Hexadecimal to record the amount of red, green and blue to be used, Hexadecimal is a numbering system to base 16 and is difficult – luckily there are many resources on the internet to help – if you see a colour code you can convert on the internet, Once you have found the colour code, enter it into the html instead of the name. E.G. 33CC99 is a green colour so this tag make the background of the site green

Basic Table Tags - starts and finishes a new table - starts and finishes a new table row - starts and finishes a new table cell. Mr Johnston Mr Dowey MrJohnston MrDowey

Widths / Borders Include a border=“x” statement in the tag to show the lines around the cells, Include a width=“x%” statement in the tag to set the %age of the screen the table should use, Mr Johnston Mr Dowey MrJohnston MrDowey

Assignment Link Task bii requires you to show code snippets, annotate them and then have graphical evidence of what the tag does on screen, Your teacher go through the “practice annotation exercise” in preparation, You will also get a list of basic tags to use as a reference guide – however if you get stuck there are loads of resources on the internet,