CIS 195 - Web Authoring 1

CIS195 Web Authoring 1: HTML

Site Design and More on Hyperlinks

Contents

[TOC]

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 small farm web site, Ezer Grace Farm.

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>

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:

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

W3Schools tutorial on the anchor element

The tag sets a default path for all the href and src attributes on the page. It should be put in the <head> 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.

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>

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

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

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

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

This site is open source. Improve this page.