1. HTML HyperText Markup Language Constantly evolving - extra facilities being added regularly Java applets and JavaScript used to increase functionality of HTML A number of editors are available e.g. Microsoft Frontpage Different Web Browsers display information slightly differently

2. HTML A mark-up system that comprises of tags A tag is an instruction contained within angle brackets, e.g. A tag may be opened and closed e.g. – Information Technology Images Forms Frames Firms often employ graphic designers

3. Structure of Document HTML documents can be constructed using Notepad When saved they should have extension.htm or.html –defines the start of the HTML document –always on the first line –end of the document is defined by the tag

4. Tags –document title –Keywords for search engines –located at the beginning of the document –terminated with a tag My home page

5. More Tags Line Break Horizontal line Paragraph

6. and enclose the code which produces the visible web page Background colour may be defines Colour of Text Background Image My home page This document is under construction

7. Viewing Documents Type in HTML using Notepad View using Netscape This way the page can be constructed incrementally Changes can be easily made –graphics in wrong place –text too large –Background wrong colour Possible to view other pages source

8. Title Appears as title in window appears in bookmark list Web search engine Here is my title

9. Plain Text No tag is required when plain text is included Here is my title This is plain text information Text Usually requires formatting

10. Paragraphs We want to display 2 lines of text: Barry McCollum Lecturer The Browser does not recognise this unless a tag is added Paragraph –Inserts a blank line New Line

11. Browser will also ignore multiple spaces: Barry McCollum Lecturer The output will look like Barry McCollum A special entity for spacing characters is provided: – Barry McCollum

12. Highlighting Text Bold – Highlighted Text Highlighted Text Italic – Highlighted Text Highlighted Text

13. Underline – Highlighted Text Highlighted Text Blinking – Subscript – Superscript – Highlighting Text

14. Headings There are six levels of Headings, numbered 1 through 6 (1 being the largest) Each level is displayed using a different heading level number: – Introduction Introduction

15. Alignment Default Alignment is to the left Text may be centred – text to be centred Some tags can include attributes Used to provide additional information to the tag Introduction Introduction

16. Comments Good Practice Author’s name, date etc.. – comment

17. Text –Size range of 1 to 7 increased by using + decreased by using - –Color Colour Codes –Face Victorian Courier

18. Lists Unnumbered with bullet numbered Definition List Several Tags are required First tag determines type of list Each line in the list begins with the tag

19. Unnumbered List Type of bullet point can be changed by the TYPE attribute: first second

20. Numbered List Attributes –STYLE –START Definition List Definition term and subsequent description – start – each term is defined – each term is described

21. Floppy Disk A Floppy Disk contains 1.4 Mbytes of info. Compact Disk A CD contains 640 Mbytes of information. DVD A DVD contains much more!

22. The output looks like: Floppy Disk A Floppy Disk contains 1.4 Mbytes of info. Compact Disk A CD contains 640 Mbytes of information. DVD A DVD contains much more!

23. Nested List A lists can be nested: A few New England states: Vermont New Hampshire Maine Two Midwestern states: Michigan Indiana

24. The output looks like A few New England states: Vermont New Hampshire Maine Two Midwestern states: Michigan Indiana

25. Hyper Links Connect One Web page to another Web page The tag is used to provide a link within a Web Page. The “a” stands for anchor The general use of the tag is as follows: Click here! This will display the following: Click here!

26. href The attribute href is used to point to a Web Page. This is represented by “page to link to” and is the target page which the link is pointing to. There a number of forms which “page to link to” can take, depending on the type of link required.

27. Relative Links Usually the Web Site has an initial starting page (Home Page) which connects to the other pages in the Site e.g. The home page is created and the HTML document is called “index.html”. The secondary page is created and the HTML document is called “info.html”.

28. Creating the link from the home page to the secondary page involves adding an tag to the body section of “index.html”. Home Page Click for Information

29. Absolute Links Uniform Resource Locators (URLs) are used instead of relative links for linking to Web Pages on other Web Sites. The only difference between using absolute and relative links is that the target URL replaces the HTML document. For example, Link to QUB

30. An absolute link can also be used to allow electronic mail to be sent via a Web Page. The http is replaced with the word mailto followed by the email address. For example, Mail Us When clicked this link will open a blank mail window automatically addressed to the email address specified in the link. Note that the two forward slashes // are missing in this case.

31. Links to Specific Sections Anchors can also be used to move a reader to a particular section in a document (either the same or a different document) This type of an anchor is commonly called a named anchor This involves two procedures –Mark the section which the link will move to. –Add the link, specifying the section of the document to link to, using the mark.

32. Marking the appropriate section involves adding an tag to the HTML document with the name attribute. E.g. Bottom of the Page! This attribute is used to specify an identifier, which can be any sequence of letters. The tag is placed at the location to which the browser must scroll when the link is followed. In this case, the tag is placed somewhere at the bottom of the Web Page.

33. The link is then added to the top of the page, specifying the identifier: Click to scroll down The identifier is used by the href attribute and is used instead of specifying an HTML document filename or absolute link. The hash # must be inserted before the identifier.

34. An anchor can also be used to link to a specific section in another document. For example, a link can be made from “index.html” to a specified section within “info.html”. First, as before, the location to link to must be specified in “info.html”: Middle of Info Page! Then the link is added to “index.html”. It takes the form: – Click for some Info

35. Images –SRC –Align Top, middle, bottom –HSPACE –VSPACE Image Maps

36. Visual Basic/Java Brings animation and Interaction to the WWW Can add animation sounds to the web page Visual Basic for Applications (VBA) VBScript – smaller faster subset –Embedded in HTML

37. Java Applet –a program embedded in HTML Application –similar, does not require a browser to run it Beans –each program performs a very limited function Run on any computer which has a Java compatible Web Browser

38. Javascript Developed by Netscape included directly in HTML document Simple to add extra functionality