BSBEBU401A Review and Maintain a Website HTML Teacher: Alison Roberts Northern Sydney Institute of TAFE
Creating HTML Basics Create a new folder to keep your files in. Open Notepad, type in your name and then save the file as “home.html” into your folder. Drag and drop the file into the Internet Explorer browser.
What is a hyperlink? They are what users click on to go somewhere else on your website, to access a document, or to go somewhere else on the internet. Hyperlinks are the backbone of website navigation, both within the site and to external sites.
Why do hyperlinks cause problems… The files and websites hyperlinks refer to can be become broken over time. PAGE GONE - The website being referred to may no longer exist or the specific page being referred to may have been removed or re-located. FILE NAME CHANGED - File names for documents, webpages, images change and the links to these content types are not updated WRONG FILE TYPE - A common error is referring to a document that has an extension of ".html" when its extension is ".htm". This also happens with images - .gif instead of .jpg. MISSPELLING - In other cases it can be something as simple as a misspelt link.
Hyperlinks & pages A large number of change requests focus on: new content remove old content Build skills in adding, deleting and modifying both web pages and hyperlinks then you will be able to fix many of the change requests your website will receive.
What is a hyperlink? A basic hyperlink will appear as follows: <a href=”aboutus.html”>About us</a> A hyperlink is based on the ‘a’ or anchor tag. In this case the anchor is a ‘href’ or hyperlink reference to a page in the website called ‘aboutus.html’. The actual hyperlink text will appear as About us.
Absolute v’s relative links Domain - http: The ‘folder you created represents the root folder of the site. In the folder you have placed the home page (home.html)
Absolute v’s relative links In the html folder you will place the remaining high level html files as shown below.
Absolute v’s relative links You could create links in the home page that link to the other pages by using the absolute link. <a href="http://www.mysite.com.au/html/aboutus.html">About us</a>. Or you could create links in the home page that link to the other pages by using relative links. <a href=“html/aboutus.html”>About us</a>
Relative Linking SAME FOLDER: When the page being linked to is in the same folder just use the pages file name e.g. “aboutus.htm”. SUBFOLDER: If the page being linked to is within a subfolder add “foldername/” in front of the page name. From the example site on page 8, to link from ‘index.htm’ to ‘aboutus.htm’ the relative link would be “html/aboutus.htm” FOLDER ABOVE: If the page being linked to is in a folder one level above the current pages folder add “../” in front of the page name. From the example site on page 8, to link from ‘aboutus.htm’ to ‘index.htm’ the relative link would be “../index.htm”.
Basic HTML Syntax <html> <head> <title>Homepage</title> </head> <body> <p>Hello this is the Homepage</p> <p>Click here for the About Us <a href="aboutus.html">About Us</a></p> </body> </html>
Help on HTML Basic HTML Tutorial How to make a website from scratch - http://www.youtube.com/watch?v=GwQMnpUsj8I (first 7 ½ minutes only). Go to: http://www.w3schools.com/html/html_intro.asp .Read the HTML tutorial. Look at the other tutorials available.