Contents Chapter 15 â&#x20AC;&#x201C; Website Authoring ............................................................................................................ 2 Basic layout of a page <html> <head> <title> <h1> <p> <body> ................................................... 2 The <head> tag ................................................................................................................................... 2 Basic Formatting ..................................................................................................................................... 2 Basic formatting tags <b> <u> <i> <sup> <sub> .............................................................................. 2 Hyperlinks ............................................................................................................................................... 2 Hyperlink to an external page ............................................................................................................. 2 Choosing the target window to open a link ........................................................................................ 2 Using an image as a hyperlink to another page.................................................................................. 2 Creating a link to send an email .......................................................................................................... 2 Anchors ................................................................................................................................................... 3 Creating a bookmark / anchor on a page ........................................................................................... 3 Link to a bookmark / anchor from within the same page .................................................................. 3 Link to a bookmark / anchor from an external page .......................................................................... 3 Lists ......................................................................................................................................................... 3 Ordered (Numbered) List .................................................................................................................... 3 Unordered (bulleted) list .................................................................................................................... 3 Combined List ..................................................................................................................................... 3 Tables ...................................................................................................................................................... 4 Adding a caption to a table ................................................................................................................. 4 Using Table Headers / Table Footers / Table Body ............................................................................. 4 Aligning cells in a column .................................................................................................................... 5 Stylesheets .............................................................................................................................................. 5 Attaching a stylesheet to a page (CSS)................................................................................................ 5 Alternative to attaching a stylesheet. ................................................................................................. 5
Chapter 15 – Website Authoring Basic layout of a page <html> <head> <title> <h1> <p> <body>
If you are asked to create a webpage, the image above gives you the fundamental layout. Remember that formatting of a page (e.g. text size, style, and colour) should be done using CSS.
The <head> tag Only the following tags are allowed inside the <head> </head> tags. It is unlikely that you will be asked to use any more than the title tag but you should still be aware of the others just in case. <title> Defines a title for the page (appears on the browser tab) <link> Defines the relationship between a document and an external resource (e.g. link to CSS) <meta> Defines metadata about an HTML document <style> Defines style information for a document
Basic Formatting Basic formatting tags <b> <u> <i> <sup> <sub> It is still best to do your general formatting using CSS; however, if you need to apply formatting to individual words you could do the following: <b> bold </b> <u> underline </u> <i> italic </i> <sup> Superscript </sup> <sub> Subscript </sub>
Hyperlinks Hyperlink to an external page <a href=”url”>Link text</a>
Choosing the target window to open a link <a href="http://www.w3schools.com/" target="_blank">Visit W3Schools!</a>
Using an image as a hyperlink to another page <a href="url"><img src="image url" alt="text" width="32" height="32"></a>
Creating a link to send an email <a href="mailto:someone@example.com?Subject=Hello%20again">Send Mail</a>
Spaces between words should be replaced by %20 to ensure that the browser will display the text properly.
Anchors Creating a bookmark / anchor on a page <a id="tips">Useful Tips Section</a>
Link to a bookmark / anchor from within the same page <a href="#tips">Visit the Useful Tips Section</a>
Link to a bookmark / anchor from an external page <a href="http://www.w3schools.com/html_links.htm#tips">Visit the Useful Tips Section</a>
Lists Ordered (Numbered) List
Unordered (bulleted) list
Combined List
Tables Adding a caption to a table This means displaying some text above the table, maybe to explain what the table is about. It should come immediately after the <table> tag
Using Table Headers / Table Footers / Table Body <thead> defines the section of the table to be used as a header in the table <tbody> defines the section of the table to be used as the main part of the table <tfoot> defines the section of the table to be used as the footer in the table
See example code on next page.
Aligning cells in a column This should be done below the <table> tag using colgroup. Each colgroup refers the columns from right to left. To align column one to the left and column two to the right follow this code:
Stylesheets Attaching a stylesheet to a page (CSS)
Remember that the stylesheet and the webpage must both be in the same folder. You will get marked down if the stylesheet location contains a path. The reference must be relative as shown above.
Alternative to attaching a stylesheet. It is possible to add styles in the header but it is almost certain that you will be asked to do this in the CSS.