G053 Lecture 12 Introduction To HTML Mr C Johnston ICT Teacher

Part #1 Objectives Know what HTML is, Understand the typical layout for HTML, Knowledge of basic HTML tags, Create your first 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

Creating The Pages To create a web page you need to type the content and the tags into a text editor such as notepad, You must remember to save the documents with the.htm or.html extension. E.g. homepage.html Any graphics wish you wish to include should be saved in the SAME folder as the webpage in a separate folder called images.

Tag Listing Your teacher will provide you with a listing of tags you will be using, These will be enough to complete you assignment matching the E criteria which asks you to recognise basic tags, Today you will practice formatting text and inserting pictures.

Part #1 Exercise Using basic HTML code, create your own simple homepage similar to my example. Its should include text formatting and pictures taken off the internet. MyHomePage Example

Part #2 Objectives To look at the concept of hyperlinks, To understand the different types of hypertext and their associated coding, To know the basic colours available in html, To know how to create more advanced colours,

Hyperlinks Hyperlinks are one of the reasons why HTML is so useful, A hyperlink can be defined as: Underlined text within an electronic document. When clicked with the mouse, the viewer will be taken to another place. A graphic or part of a graphic that contains a link to another location. The process of creating a link that will take the viewer to another location.

Types of Hyperlinks There are three main types of Hyperlink within HTML, Links to different parts of a page, Links to different pages in a website, Links to other websites external from your own. The coding is very similar for each type of link, Each type can be applied to either text or a graphic. Click Here Textual HyperlinkGraphical Hyperlink

Coding For Hyperlinks (1) To create a link to another web page within your site use the following code: My Link e.g. My Hobbies To create a link to a website external to your site use the following code: 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

Coding For Hyperlinks (2) You can also create links within your html document so users can jump to different areas of the page. There are two steps to creating this: Firstly – mark up the different sections of the document using the Secondly – create an index at the top of the page so you can jump to the different sections ensure the headings have the My Heading Click To See Example

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 Advanced Colours 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, Once you have found the colour code, enter it into the html instead of the name. E.G. 33CC99 Is a green to make it the background colour

Colour Resources Your teacher will give you a copy a colour chart, This contains 216 “browser safe” colours, Other sources for colour codes are:

Part #2 Exercise Expand your website you started last week to include more colours – include at least two HEX colours, Create a second page in your website which gives details about your hobbies, Link the two pages together, Create links on your pages to external sites which you often visit include at least one hyperlink which has an image.

Part #3 Objectives Understand what tables are, Understand how tables can help layout your HTML documents, Knowledge of the HTML code for tables.

Table Overview So far we have just used the centre tag to align text and images, The table set of tags allows you not only to set data out in tables, but also to format the entire page.

Basic 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

Table Cells Within each and tag you can treat it as a normal html document and add: Links Images Format and add text Each cell however is independent - you will need to format text etc for each one.

Example: Page Design I have designed the following page on paper: My Home Page Links: Homepage My hobbies My family My pets My work My links Me Welcome to my homepage, Here you will find lots of information about me and my family. My name is Mr Johnston and I am 23 years old and live in Coventry in the UK

Example: Working Here is the finished page. Here is the finished page

Part #3 Exercise Incorporate tables into your website to improve the layout of text and graphics. Put a table into your sample page which will list the links down the left hand side, Finish off all the other pages and check that they link together.

Assignment Link #1 Task D requires you to annotate a page of HTML code. Use this exercise to practice annotation prior to tackling the first part of task D.exercise to practice annotation Print out the code from a page of your website and fully annotate each tag.

Assignment Link #2 Task D requires you to manually edit and add HTML tags. Use the notes in this lecture to do this whenever an opportunity presents its self – remember to include screen shots before, during and after as proof.