CIS195 Web Authoring 1: HTML

Site Design and More on Hyperlinks

Topics by Week for the Eight-Week Term
1. Intro to HTML	5. Layout with CSS
2. More HTML, file paths	6. HTML Tables
3. Site structure and navigation	7. HTML Forms
4. Formatting with CSS, Midterm	8. Multimedia, Final

Topics by Week for the Ten-Week Term
1. Intro to HTML	6. Layout with CSS
2. More HTML, file paths	7. CSS Flexbox and Grid
3. Site structure and navigation	8. HTML Forms
4. Formatting with CSS	9. Multimedia
5. Midterm, Project Propposal	10. Tables, Project Completion
	11. Final

Website StructureHyperlink Navigation—Site mapsNav element and navigation listsHow to open a link in a new tabBase path for hyperlinksCreating links to locations inside a pageMark the target with the id attributeUse the id as an hrefLinking to an id inside another pageImage LinksHyperlink for Sending an E-mailReference

Website Structure

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

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

Here's an example based on a market garden web site, Eaglewing Acres.

Navigation (on every page)
- Home
  - CSA Signup
  - About your farmers
- What's for sale
  - Request produce or information
  - Learn more
  - Contact page
- CSA
  - What's for sale
- Blog
- Contact
Footer navigation (at the bottom of every page)
- Join the CSA
- Follow us on Facebook (external)
- Contact Us
- Newsletter signup

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.

<nav> is a structural element. It can be used to identify a set of links to be used for navigating the web site.


<nav>
  <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="stories.html">Our stories</a></li>
    <li><a href="about.html">About us</a></li>
  </ul>
</nav>

How to open a link in a new tab

The anchor element, <a> , can have a target attribute that is used to control where the linked page opens. Here are the possible values:

Value	Where the linked document is opened
_blank	In a new window or tab
_self	In the same frame as the anchor that was clicked (default)
_parent	The parent frame
_top	The full body of the window
framename	A named frame

Example:


xxxxxxxxxx
<a href="https://lanecc.edu" target="_blank">LCC Web Site</a>

W3Schools tutorial on the anchor element

Base path for hyperlinks

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

Example:


<head>
   <!-- other stuff left out -->
   <base href="Chennai/" target="_blank">
</head>
<body>
  <!-- This link will open a page in the Chennai sub-folder -->
  <a href="chennai.htm">The city of Channai</a>
</body>

W3Schools tutorial on the base tag

Creating links to locations inside a page

Mark the target with the id attribute

To link to a location within a document, you first need to mark that location. You can do that with the id attribute.

The id names must be unique.
The id names are not case sensitive, but matching case is good practice.

Use the id as an `href`

Just prefix the id name with a # so the browser will know it's a link to an id.


<nav>
  On this page:<br>
  <a href="#intro">Introduction</a><br>
  <a href="#grow">Where the Beans are Grown</a><br>
  <a href="#roast">How the Beans are roasted</a><br>
</nav>

<h2 id="intro">Introduction</h2>
<!-- content omitted, could have been a large block of text -->
<h2 id="grow">Where the Beans are Grown</h2>
<!-- content omitted again -->
<h2 id="roast">How the Beans are Roasted</h2>

Linking to an id inside another page


<a href="https://theaviary.com/birds.html#pigeons">Our homing pigeons</a>

Image Links

Images can be used as links. Just enclose the <img> element in anchor tags.


<a href="https://lanecc.edu"><img src="LccLogo.png"></a>

Hyperlink for Sending an E-mail

You can use an e-mail address in a hypertext link so that when a user clicks the link, the user’s e-mail program opens and automatically inserts the address into the “To” field of the new outgoing message.


<a href="mailto:webmaster@example.com">Send an e-mail</a>

The mailto protocol allows you to add information to the e-mail, including the subject line and the text of the message. Spaces are replaced with the %20 character code since URLs cannot contain blank spaces


<a href="mailto:webmaster@example.com?Subject=Test&Message=This%20is%20a%20test">Send a test e-mail message</a>

More about the href attribute on W3Schools

Reference

Creating Hyperlinks—MDN Web Docs

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