CIS 195 Web Authoring 1: HTML
Brian Bird

Web Sites and Hyperlinks

Topics by week
1. Intro to HTML 5 6. Page Layout with CSS
2. More HTML 5 7. HTML Tables
3. Developing a Web Site 8. HTML Forms
4. Design with CSS 9. Multimedia
5. Midterm 10. Review and Term Project



Main focus today

Website Structure

The organization of the code is determined by folders (directories).
The web site's structure is determined by hyperlinks.

Folders and Paths

Folders (called directories on Linux) can hold files or other folders. When folders hold other folders, we say they are nested. Look at some nested folders in the Windows file explorer, or in the Mac OS finder.

A path describes the hirerarchy of nested folders that leads to a particular folder or file. Here's an example of a path:


Hyperlink Navigation—Site maps

A sitemap shows how the web pages are linked together. It can be done as simply as by using an outline:

For a site with more complex navigation (hyperlinks) you would need a more complex map.
Look at The Highlands web site and draw a site map on the white board.

Base path for hyperlinks

The <base> tag sets a default path for all the href and src attributes on the page.
It should be put in the <head> element.


   <!-- other stuff left out -->
   <base href="Chennai/" target="_blank">

Further Reading

W3Schools tutorial on the <base> tag

Creative Commons License Web Authoring Lecture Notes by Brian Bird are licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.