Hyperlinks and anchor tags

Hyperlink: on text

To link text, use the code tag <a> ... </a> to input the URL to link to text, as shown in the template below.

Figure 1 shows how hyperlinked text would look when a user hovers over it. In this example, the presentation title turns to a gold color and when clicked, indicating the user is linked to the presentation slides that they can download. Also, note that the presentation title is a header, so it will be placed in the <h3> ... </h3> code as well.

Figure 1. Shows the way text is highlighted in gold when a user hovers over it indicating it is a hyperlink.

Code Template

<a href="URL of document/content linked to text">Text that is linked</a>

Example

<h3>
<a href="https://s3-us-west-2.amazonaws.com/uw-s3-cdn/wp-content/uploads/sites/
158/2018/08/23185657/How-Curriculum-Word-Redefines-Technical-Faculty-Roles-in-
the-Community-College.pdf">How Curriculum Word Redefines Technical Faculty
Roles in the Community College</a>
</h3>

Hyperlink: on image

Images can also be linked through a similar process. The only difference is that the code <img> would be placed right after the URL in the <a> ... </a> code, instead of linked text.

Hyperlinking an image should lead to a relevant document for the image or bigger version of the image to be seen or downloaded, and should not be used to link to external sites or pages within the site unless it is necessary. The example in Figure 2 links the presentation slide preview to the presentation document.

Figure 2. The image above is linked to the document for this content.

Code Template

<div>
<a href="URL of document/content linked to image and opens when image is
clicked">
<img class="Alignment position for image" src="Image source/location" alt=
"Description text of what the image is (for accessibility)" width="Image 
width" height="image height"/>
</a>
</div>

Example

<div>
<a href="https://s3-us-west-2.amazonaws.com/uw-s3-cdn/wp-content/uploads/sites/
158/2018/08/23185657/How-Curriculum-Word-Redefines-Technical-Faculty-Roles-in-
the-Community-College.pdf">
<img class="alignleft" src="https://s3-us-west-2.amazonaws.com/uw-s3-cdn/wp-
content/uploads/sites/158/2018/07/17194946/nsf_ccri_homepage_image.png" alt=
"Image of NSF presentation: Faculty development to obtain student success:
learning across national science foundation grant projects" width="300"
height="300"/>
</a>
</div>

Anchor Tags using ID

The first method is to assign an ID for the allocated content on a site page. The example code below labels the Research to Practice header using id="CCRI-research-to-practice", into the usual <h2>Research to Practice</h2> header code, as shown. This will allow the user the jump right into the Research to Practice section in the homepage.

Code Template

<h2 id="anchor tag name">header title</h2>

Example

<h2 id="CCRI-research-to-practice">Research to Practice</h2>

After the above code is implemented, links can be shared in the following format:

Template URL – www.sitename.com/#anchorTagName

Example URL – www.washington.edu/ccri/#CCRI-research-to-practice

Anchor Tags using a hyperlink tag

Another reason for implementing anchor tags in the CCRI site is for site pages that list many publication documents. The documents are sectioned into accordions, making the process a little more complex than the first method, but the following explanation will elaborate.

The example navigates the user to go directly to the “Briefs” section in the accordion, in the Coaching for Change page (Figure 4). To allow this, the code <a name="anchor tag name"></a> will be added into the accordion. The <a></a> tag is typically used to hyperlink URL’s into text, but in this case it will be used to link a section of a page.

Figure 4. Creating an anchor tag inside <a></a> tag will enable users to be directed straight to the designated accordion section.

Though the accordion will not open up, it will still enable users to go directly to the section they want to, and even create an opportunity for them to explore other publications.

Code Template

[accordion]
<a name="anchor tag name"></a>
[section title='Title of accordion section']
Accordion content
[/section]
[/accordion]

Example

[accordion]
<a name="briefs"></a>
[section title='Briefs']

<a title= "Evidence-based Coaching for Change Brief" href= "https://s3-us-we
st-2.amazonaws.com/uw-s3-cdn/wp-content/uploads/sites/158/2018/08/23173409/
cfc-Coaching-BRIEF_CCRI.pdf">Evidence-based Coaching for Change Brief<⁄a>
This brief provides theories, perspectives and insights into evidence-based 
coaching for 2-year colleges to implement, continuously improve, and sustain 
coaching that focuses on improving performance and results in more equitable 
outcomes for students.
<a title= "Equity-Minded Change Leadership" href= "https://s3-us-west-2.amaz
onaws.com/uw-s3-cdn/wp-content/uploads/sites/158/2018/08/23173407/cfc-equity
brief.pdf">Equity-Minded Change Leadership<⁄a>
There are many ways to think about change leadership and many theories to 
describe how it should work. Many promote the notion that leaders who 
readily adapt to new circumstances are most successful in changing their
organizations, but this is only part of the necessary skill set. This brief
discusses equity-minded change leadership that identifies institutional and 
systemic causes of inequities in student outcomes to bring about real change.

[/section]
[/accordion]

After the above code is implemented, links can be shared in the following format:

Template URL – www.sitename.com/path/#anchorTagName

Example URL – www.washington.edy/ccri/path/#briefs