1. G053 Lecture 12 Introduction To HTML Mr C Johnston ICT Teacher www.computechedu.co.uk

2. Part #1 Objectives Know what HTML is, Understand the typical layout for HTML, Knowledge of basic HTML tags, Create your first html document.

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

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

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

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

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

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

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

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

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

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

13. 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 http://www.bbc.co.uk To use an image as a link use the tag between the link tags, e.g http://www.bbc.co.uk

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

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

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

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

18. Colour Resources Your teacher will give you a copy a colour chart, This contains 216 “browser safe” colours, Other sources for colour codes are: http://hotwired.lycos.com/webmonkey/reference/color_codes/ http://www.geocities.com/SouthBeach/Marina/3202/mycolors.html http://www.alphalink.com.au/~rhduncan/htmlguide/colours.html http://mediagods.com/tools/rgb2hex.html http://www.yvg.com/twrs/RGBConverter.html

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

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

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

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

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

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

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

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

27. 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 Complete this ready for “show and tell” next time

28. Homework PART 1 Complete your webpages ready for “show and tell” next time Remember we are not looking for works of art but an understanding of HTML Must include – fonts, images, colour, links and tables PART 2 Perhaps in a table identity and explain at least 6 tags which have been used to create your template – remember to fully explain each property of the tag Tag & Explanation This is the……

29. Assignment Link #1 Task D requires you to explain HTML tags Use the table produced for homework as a start – the more tags you can fully explain the better Use this exercise to practice explaining HTML tagsexercise to practice explaining

30. Assignment Link #2 Task D requires you to edit and add HTML tags EDIT = change the properties of tags in code view which Dreamweaver has inserted Add = insert tags in code view from scratch yourself Create a document now to record you edits and adds as you go along Include clear unambiguous evidence of the changes including screen shots before and after.

31. Suggestions…… Code EDITs Change href property of tag e.g. to Add the target property to the tag e.g. target=“_blank” Change src property of tag e.g. to Add the border property to the tag e.g. border=“0” Edit alt property of tag Add align property to the tag e.g. align=“centre” Change properties of the tag e.g. face=“” size=“” etc Change properties of the tag e.g. width=“” height=“” class=“” border=“” etc Change properties of the tag e.g. width=“” height=“” class=“” bgcolor=“” etc Change properties of the / tags e.g. type=“” Change properties of the tag e.g. method=“” action=“” Change properties of the tag e.g. type=“” Change properties of the tag e.g. rows=“” cols=“” Change tag for drop down lists e.g.

32. Example Layout