`

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

HTML Body Element The element encloses all page contents. Example web page contents: –Text –List –Image –Etc.

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.

HTML Body Element - TEXT Headings There are six different levels of heading: – is the top level heading content, e.g. site or page title is the for the least important heading, e.g. a sub-section This is heading 1

HTML Body Element - TEXT Paragraph The 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. The purpose of this page is to demonstrate a basic XHTML document.

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. The purpose of this page is to demonstrate a basic XHTML document.

HTML Body Element - TEXT Styling your text HTML used to feature many ‘physical style’ tags Tags such as can be join with several attributes to specify the colour, typeface and size of text. This is so red

HTML Body Element - IMAGE An image can be specified using 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

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

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

Linking Techniques Image based

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

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 include the full protocol and path to the page:

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

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

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

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

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

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.

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:

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:

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

Linking to Mail Software mailtoUse the mailto protocol. This allows users to send s to the specified address from client-side software. example, linking to an address can be write as the following:

Opening Links in A New Window Use the target attribute in the anchor 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”

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.

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

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.

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

HTML Elements - LIST List of items can be specify using, and. –The tags specify an unordered (bullet pointed) list. –The tags specify an ordered list. –The elements define each item in the list. Triangle Quadrilateral Pentagon Hexagon Triangle Quadrilateral Pentagon Hexagon

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

HTML – TABLE – Element Definition 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.

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

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 elements to make them easier to locate in the code.

HTML – TABLE – Columns & Rows Column spans are generated with the colspan attribute within the or elements. These resize a cell to the right to make it span over the preceding columns. For example:

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

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

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

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

HTML – TABLE – Cell Padding The cellpadding attribute can only be applied to the 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.

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 cellspacing attribute in the element:

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

HTML – TABLE – Caption

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