1 / 17

HTML and Hypertext The workings of the web

Learn about HTML, the most widely used method of structuring a hypertext document, and how web pages are written in HTML. This lecture also covers the use of tags, document structure, including images, creating hyperlinks, and using styles.

harriettem
Download Presentation

HTML and Hypertext The workings of the web

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

  2. 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 CP2022 Multimedia Internet Communication

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

  4. A Simple Document • Simple HTML document: <html><head></head><body> This is my home page! </body></html> • 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 CP2022 Multimedia Internet Communication

  5. 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.: <b> Hello </b> • tags the word hello so that it will appear onscreen as bold • The bold <b> italic <i> tags are illustrated in this example I am <i>very</i> interested in <b> HTML</b>. • To give: I am very interested in HTML. CP2022 Multimedia Internet Communication

  6. 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 <p> tag signifies the start of a new paragraph (and </p> denotes end of paragraph) CP2022 Multimedia Internet Communication

  7. 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 ! CP2022 Multimedia Internet Communication

  8. HTML tags Tag Description NN IE <!--...--> Defines a comment 3.0 3.0 <!DOCTYPE>  Defines the document type     <a> Defines an anchor 3.0 3.0 <abbr> Defines an abbreviation 6.2   <acronym> Defines an acronym 6.2 4.0 <address> Defines an address element 4.0 4.0 <applet> Defines an applet 2.0 3.0 <area> Defines an area inside an image map 3.0 3.0 <b> Defines bold text 3.0 3.0 <base> Defines a base URL for all the links in a page 3.0 3.0 <basefont> Defines a base font 3.0 3.0 <bdo> Defines the direction of text display 6.2 5.0 <big> Defines big text 3.0 3.0 <blockquote> Defines a long quotation 3.0 3.0 <body> Defines the body element 3.0 3.0 CP2022 Multimedia Internet Communication

  9. 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 CP2022 Multimedia Internet Communication

  10. Pictures • Pictures can be included in web pages - using the <img> 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. <img src=“logo.gif” alt=“logo image”> this displays the ‘logo’ graphic or the text:- ‘logo image’ (if image not accessible) CP2022 Multimedia Internet Communication

  11. 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 <a href=“xyz”>text or picture </a> • the text / picture is now defined as a link (to the location specified by ‘xyz’ - usually a URL address of a page/file) CP2022 Multimedia Internet Communication

  12. Hyperlink example • Using text as the clickable link e.g. <a href=“http://www.scit.wlv.ac.uk/~cm1950/ CP2022/lect7v4.ppt"> Lecture 7 - HTML and hypertext</a> • Using an image as the clickable link e.g. <a href ="http://www.andysloane.com/"> <img src="picture.jpg"></a> CP2022 Multimedia Internet Communication

  13. Using style <?xml-stylesheet href= "http://www.w3.org/StyleSheets/ TR/W3C-REC.css" type="text/css"?> <?xml-stylesheet href="#internalStyle“ type="text/css"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>An internal stylesheet example</title> <style type="text/css" id="internalStyle"> code { color: green; font-family: monospace; font- weight: bold; } </style> </head> <body> <p> This is text that uses our <code>internal stylesheet</code>. </p> </body> </html> CP2022 Multimedia Internet Communication

  14. Style example – Screen output CP2022 Multimedia Internet Communication

  15. 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/ CP2022 Multimedia Internet Communication

  16. 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/ CP2022 Multimedia Internet Communication

  17. 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 CP2022 Multimedia Internet Communication

More Related