1 / 45

Skill Area 215.2

Basic HTML. `. Skill Area 215.2. Lecture Overview. HTML Body Elements Linking techniques HyperText references Linking images Linking to locations on a page Linking to a fragment on another page Linking to mail software Ordering links to a new window Image maps List Table.

milica
Télécharger la présentation

Skill Area 215.2

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. Basic HTML ` Skill Area 215.2

  2. Lecture Overview • HTML Body Elements • Linking techniques • HyperText references • Linking images • Linking to locations on a page • Linking to a fragment on another page • Linking to mail software • Ordering links to a new window • Image maps • List • Table

  3. HTML Body Element • The <body> element encloses all page contents. • Example web page contents: • Text • List • Image • Etc.

  4. HTML Body Element - TEXT There are two categories of text element: • Block elements • For marking up large blocks of content such as headings and paragraphs • Inline elements • For marking up individual words or phrases or to emphasize words in a sentence.

  5. HTML Body Element - TEXT <h1>This is heading 1</h1> Headings • There are six different levels of heading: • <h1> • <h2> • <h3> • <h4> • <h5> • <h6> <h1> is the top level heading content, e.g. site or page title <h6> is the for the least important heading, e.g. a sub-section

  6. HTML Body Element - TEXT Paragraph • The <p> element defines a paragraph. • When a browser displays a paragraph, it adds a new line before the paragraph. • Paragraphs should not be nested inside other paragraphs. <p>The purpose of this page is to demonstrate a basic XHTML document.</p>

  7. HTML Body Element - TEXT Inline element • Inline elements are used to markup small portions of text. • Inline elements must always be nested inside a block level element. <p>The purpose of this page is to demonstrate a basic <b>XHTML</b> document.</p>

  8. HTML Body Element - TEXT Styling your text • HTML used to feature many ‘physical style’ tags • Tags such as <font> can be join with several attributes to specify the colour, typeface and size of text. <font face="verdana" size="6" color="red">This is so red</font>

  9. HTML Body Element - IMAGE <imgsrc=“Koala.jpg" width="400" height="523" alt=“Koala"/> • An image can be specified using <img>as shown below. src is use to specify the location of the image width is use to specify the width of the image height is use to specify the height of the image alt is use to specify alternative text in case the image is corrupted. ** Picture should be saved in similar directory with HTML document

  10. Linking Techniques • Links on a website can be created using an attribute called a HyperText reference (href) which is applied to an anchor element <a>. • For example:

  11. Linking Techniques • Two ways of linking: Text based & Image based. Text based

  12. Linking Techniques Image based

  13. HyperText References • HyperText references provides the path of the link for the browser to follow. • The path can be: • Linking to a page within the site • Linking to a page outside of the site • The link can be: • (X)HTML documents • Images • Documents • Multimedia elements

  14. HyperText References • Linking to a page within the site. • When linking to a page within your site server, relative URLs are used. • For example if linking to page2.html of your site just use the pathname: • Linking to a page outside of the site. • When linking to pages or sites external to your site, server absolute URLs are used • For example, when linking to www.w3c.org include the full protocol and path to the page:

  15. HyperText References • If the (X)HTML page is within the same directory, use: • If the (X)HTML page is within a lower directory, use: • Some rules when linking to pages within the site:

  16. HyperText References If the (X)HTML page is within a higher directory, use the Unix pathname convention “../” • If the (X)HTML page is within an even lower directory, use: • Some rules when linking to pages within the site:

  17. HyperText References If the (X)HTML page is within an even higher directory, use: • Some rules when linking to pages within the site: Do not use backslashes - instead use forward slashes “/” for web programming to separate directory and file components of a path

  18. Linking Images If you are in page2.html as shown in structure below and would like to use picture.gif, use: • Linking images also has several rules:

  19. Linking Images If you are in page2.html as shown in structure below and would like to use picture.gif: • Linking images also has several rules:

  20. Linking to Locations on A Page • Known as linking to a document fragment. • Allows you to link to specific points on a page. • Clicking on a subject in the contents at the top of the page allows the user to be directed to the desired heading further down the page.

  21. Linking to Locations on A Page • To do linking to locations on a page, two features are needed: • Name the destination using the id attribute • Link to the destination using the octothorpe symbol (#) The id attribute • The actual headings in the body of the page need to be marked with the id attribute. This uniquely identifies an element within the contents for the browser to find. • For example, in the main body of text, Heading 1 would read:

  22. Linking to Locations on A Page The octothorpe symbol (#) • Each heading is linked to the corresponding text by including the # value in the href attribute. • The destination is given a name, in this case “hereisH1” for the first heading:

  23. Linking to A Fragment on Another Page • Add the fragment name to the end of the page URL in the hreflink. • For example if the headings were all contained within “page4.html”, a page in the same directory, the link would read:

  24. Linking to Mail Software • Use the mailtoprotocol. • This allows users to send emails to the specified address from client-side email software. • For example, linking to an email address myemail@address.comcan be write as the following:

  25. Opening Links in A New Window • Use the target attribute in the anchor <a> element. • This will tell the browser in which window the linked content should be displayed • For example: • This will open all links with this target in a window called “display1”

  26. Image Maps • An imagemap is a defined region of an image that is given a link. • For a client-side imagemap, the browser is required to match the location of the user’s mouse to the coded coordinates of the linked area.

  27. Image Maps • To produce an imagemap you will need: • An image file within an <img> element • A usemap attribute within the <img> element that defines the map in use • A <map> element that contains the definitions of each of the required <area> elements to be applied to the image

  28. Image Maps • For example, an image split into 2 coloured regions that link to 2 separate pages: The “usemap” attribute tells the browser to use the “2pages” map with the image.

  29. Image Maps Shape Values • In this example the shape values chosen are a circle and square. • The values are based on the coords.

  30. HTML Elements - LIST • List of items can be specify using <ul>, <ol> and <li>. • The <ul> tags specify an unordered (bullet pointed) list. • The <ol> tags specify an ordered list. • The <li> elements define each item in the list. <ul> <li>Triangle</li> <li>Quadrilateral</li> <li>Pentagon</li> <li>Hexagon</li> </ul> <ol> <li>Triangle</li> <li>Quadrilateral</li> <li>Pentagon</li> <li>Hexagon</li> </ol>

  31. HTML – Table’s Structure • In (X)HTML the structure of the same table is: • Tables are constructed from cells • Cells contain the content of the table • A cell can contain any content, from graphics to multimedia content to even other tables

  32. HTML – TABLE – Element Definition • <table> is a block level element that always starts on a new line. • (X)HTML tables are “row-centric” as there are no column elements. • The number of cells in each row determines the number of columns.

  33. HTML – TABLE – Element Definition • The (X)HTML elements would appear like this: • If the <tr> elements don’t match up, the browser will not display the table correctly

  34. HTML – TABLE – Element Definition • Shown left is the (X)HTML source for this table as it would be written within the main body of the page. • The convention is to stack the <td> elements to make them easier to locate in the code.

  35. HTML – TABLE – Columns & Rows • Column spans are generated with the colspanattribute within the <td> or <th> elements. • These resize a cell to the right to make it span over the preceding columns. • For example:

  36. HTML – TABLE – Columns & Rows • (X)HTML for merging columns:

  37. HTML – TABLE – Columns & Rows • Row spans are similar to column spans but merge rows instead. • For example:

  38. HTML – TABLE – Columns & Rows • (X)HTML for merging row:

  39. HTML – TABLE – Cell Padding • Cell Padding is the amount of space between the cell content and the edge of the cell containing it. • The default value for cell padding is 1 pixel

  40. HTML – TABLE – Cell Padding • The cellpadding attribute can only be applied to the <table> element. This means that all cells within the table are affected by it. • The value of cellpadding can be defined. For example: • If cell by cell values are required, CSS can be used to fine tune the padding.

  41. HTML – TABLE – Cell Spacing • Cell Spacing is the amount of space between the cells. • The browser default is 2 pixels. • To change this value, use the cellspacingattribute in the <table> element:

  42. HTML – TABLE – Caption • To give the table a brief title or description, use the <caption> element. • The caption is displayed above the table by default. • The caption must be the first thing in the <table> element.

  43. HTML – TABLE – Caption

  44. References Robbins, J.N. (2007) Learning Web Design – A Beginners Guide to (X)HTML, Style Sheets, and Web Graphics. 2nd edition. Galatea Training Services Ltd.. Singapore

  45. END

More Related