1. CP2022 Multimedia Internet Communication1 HTML and Hypertext The workings of the web Lecture 7

2. CP2022 Multimedia Internet Communication2 HTML : Hypertext mark-up language HTML is the most widely used method of structuring a hypertext document Web pages are written in HTML and use URL’s (universal/uniform resource locators) to form links to documents and/or files e.g http://www.andysloane.com HTML document A simple text based document with tags Can be created with simple text editors Notepad in Windows via tools which generate HTML Word, Dreamweaver, etc

3. CP2022 Multimedia Internet Communication3 Document Structure Simple HTML documents can start with and finish with In between and is where the document title /main heading info is placed the main detail content of the page is placed in between and

4. CP2022 Multimedia Internet Communication4 A Simple Document Simple HTML document: This is my home page! It will appear on screen as This is my home page! HTML can specify graphics, video, and audio content as well as simple text for the web page

5. CP2022 Multimedia Internet Communication5 HTML Tags HTML tags are always in angled brackets and usually tag the start and finish of a section of text - to specify attributes e.g.: Hello tags the word hello so that it will appear onscreen as bold The bold italic tags are illustrated in this example I am very interested in HTML. To give: I am very interested in HTML.

6. CP2022 Multimedia Internet Communication6 More about Tags …. Apart from the bold and italic tags there are tags to change the font size and colour as well as to underline your text When Web browsers read HTML files they always ignore ‘usual’ paragraphs and line endings in the document You have to use special tags to declare paragraphs The tag signifies the start of a new paragraph (and denotes end of paragraph)

7. CP2022 Multimedia Internet Communication7 Paragraphs and lists There are special tags which operate on whole paragraphs at a time These tags allow you to give instructions for displaying paragraphs, such as whether they should be centred, left justified or right justified HTML has a range of special tags to allow you to set up lists The list styles include numbered lists and bulleted lists …….. experiment !

8. CP2022 Multimedia Internet Communication8 HTML tags TagDescriptionNNIE Defines a comment3.03.0 Defines the document type Defines an anchor3.03.0 Defines an abbreviation6.2 Defines an acronym6.24.0 Defines an address element4.04.0 Defines an applet2.03.0 Defines an area inside an image map3.03.0 Defines bold text3.03.0 Defines a base URL for all the links in a page3.03.0 Defines a base font3.03.0 Defines the direction of text display6.25.0 Defines big text3.03.0 Defines a long quotation3.03.0 Defines the body element3.03.0

9. CP2022 Multimedia Internet Communication9 HTML Tags - sources There are good examples/tutorials at http://www.w3schools.com/tags/default.asp Full definitions at http://www.w3.org/TR/REC-html40/ HTML 4 is now given as XHTML 1.0

10. CP2022 Multimedia Internet Communication10 Pictures Pictures can be included in web pages - using the tag Important - the pictures themselves are not stored in the HTML document ; just the mark-up language image is stored in separate file e.g. this displays the ‘logo’ graphic or the text:- ‘logo image’ (if image not accessible)

11. CP2022 Multimedia Internet Communication11 Hyperlinks You can include links in your document (formed using tags) Links are words or pictures which when ‘clicked on’ take you to another web page or open up a file (audio/video for example) There is a special tag text or picture the text / picture is now defined as a link (to the location specified by ‘xyz’ - usually a URL address of a page/file)

12. CP2022 Multimedia Internet Communication12 Hyperlink example Using text as the clickable link e.g. Lecture 7 - HTML and hypertext Using an image as the clickable link e.g.

13. CP2022 Multimedia Internet Communication13 Using style An internal stylesheet example code { color: green; font-family: monospace; font- weight: bold; } This is text that uses our internal stylesheet.

14. CP2022 Multimedia Internet Communication14 Style example – Screen output

15. CP2022 Multimedia Internet Communication15 Cascading Style Sheets Often used by software to create web pages Allows full control of page display Definitions available from http://www.w3.org/Style/CSS/

16. CP2022 Multimedia Internet Communication16 Evolving techniques The Web is evolving…… Research into semantic web Intelligent use of web-based resources allowing Re-use of information by different applications organisations and users Uses resource description framework (RDF) http://www.w3.org/RDF/

17. CP2022 Multimedia Internet Communication17 Summary Basic HTML is used to specify the content and layout of web pages HTML documents contain text plus tags to tell the web browser how to format the text The documents can also contain tags for links to other pages and files (such as audio/video), and to display still images as part of the page Web page creation and management techniques are evolving rapidly