CreateaFreeWebsite

 with HTML and CSS

🔗 Intradocument Linking

Intradocument linking is linking to a location on the same page and to specific locations on another web page.

To link to a specific location on a web page, use an anchor tag and the id attribute.

<a href="#destination"></a>

<h1 id="destination">Heading Text</h1>

The id attribute must be a unique value and can not contain spaces.

UNIQUE means it can only be used once on the same page.

The id can be added to any web page element that accepts global attributes.

The name specified in the id is preceded by a pound sign in the href and must match exactly.

Use ID Attribute for Linking

The id attribute provides the proper way for linking to specific locations.

👉 Click This Link Please!

Did you try it?

Here's the code for conventional web pages. We place a unique id in the h2 heading tag or other element:
<h2 id="intradocument">Intradocument Linking</h2>

The link that jumps to that location looks like this:
<a href="#intradocument">Click this Link</a>

You can also use the id attribute on paragraph tags and other page elements to use for jumping to locations on a page.

Designate Location on Another Page

The id attribute can be used to go to a specific location on another page.

The id is placed on the page at the desired location.

To link to that page and location the code would be:

<a href="samesite.htm#destination_name">Another Page</a>

If the link is in a sub folder and the destination is in the main folder you can use:

<a href="../samesite.htm#destination_name">Web Page in Main Folder</a>

 

👉See: Id Attribute

More Examples of Intradocument Links and Ids

Link: <a href="#destination">Go To Top</a>
Id attribute: <header class="toppage" id="destination">Site Heading Text</header>

Link: <a href="#namelist">See Name List</a>
Id attribute: <ul id="namelist">

Link: <a href="#pagebottom">See Credits</a>
Id attribute: <footer id="pagebottom">footer information</footer>

 

Top Button as an Intradocument Link

👉 Used to Be Here👈

We made it sticky. See bottom right.

While we're at it: How do you make a Top Button?

Very Basic HTML

<p><a href="#heading" class="top-button">Top</a></p>

Specify the location you want to jump to like so:

<header id="heading">

💡 Time Out for a teaching Moment

In CSS, the !important declaration is used to give a specific style rule the highest priority, overriding any other conflicting rules, regardless of specificity or source order. It ensures that the style is applied no matter what.(From Copilot)

We use it in the CSS on the right (once again because I'm LAZY) to override the settings for the anchor tags in the main division.

The CSS


p a.top-button {
/*Button*/
position: fixed; /*Make it Sticky*/
bottom: 2rem;
right: 1.5rem;
width: 2rem;
height: 1.75rem;
padding: .75rem ;
background: #0066cc;
border: solid 4px #ffff00;
border-radius: 50%;
box-shadow: 1px 1px 4px #000;
/*Button Text*/
font-family: arial, serif;
color: #fff !important;
font-size: 1rem;
font-weight: bold;
text-decoration: none;
text-indent:0;
text-shadow : 1px 1px 2px #000;
}


p a:hover.top-button {
color: #000 !important;
background-color: #fff;
box-shadow: 1px 1px 4px #000 inset !important;
text-shadow:none;
border: solid 1px #000;
}

Top