Week 7ART 239 Web Design I

Class Notes for Monday 10/15/18, Wednesday 10/17/18

Website Analyis Presentations


defines a link
defines the link address
defines where toped the linked document

Absolute links are referenced with a fully qualified URL and are typically on a site different than the referrer site. Also called “External” links. Typically use target=“_blank”.

<a href="http://google.com">Absolute Link</a>

Relative links are referenced in relation to the document itself. Also called “local” links. Rarely use target=“_blank”

Link target attribute

Opens the linked document in a new window or tab. Useful to keep users from permanently leaving your page
Opens the linked document in the same window/tab as it was clicked (this is default)
Opens the linked document in the parent frame. Useful for when you’ve created a new window with a link (_blank) and want to target the referrer page.
Opens the linked document in the full body of the window. Useful when used with frame sets (don't use framesets)
<a href="next-page.html">page in the same directory</a>
<a href=""/index.html">Will go to the root</a>
<a href=""../index.thml">will go 1 directory up</a>
<a href=""../../index.thml">will go 2 directories up</a>

Email links

Defines that the link should go to an email address
Add a “carbon copy” email address
Add a blind carbon copy email address
Add a subject line
Add content into the body of the email
<a href="mailto:someone@example.com?cc=someoneelse@example.com&bcc=andsomeoneelse@example.com &subject=Summer%20Party&body=You%20are%20invited%20to%20a%20big%20summer%20party!" target="_blank">Send mail!</a>

email screen

HTML Special Characters

Non-breaking space, allows you to use multiple spaces to separate words. Also prevents a word from breaking if used in place of an actual space.
Left single quote mark, or an apostrophe ( ‘ )
Right single quote mark ( ’ )
Left double quote mark ( “ )
Right double quote mark ( ” )
Em dash ( — )
En dash ( – )
Horizontal ellipsis ( … )
Copyright ( © )
Ampersand ( & )
Trademark ( ™ )

CSS Units

Absolute value in pixels
Relative to the font-size of the element (2em means 2 times the size of the current font)
Relative to font-size of the root element
Relative to 1% of the width of the viewport*
Relative to 1% of the height of the viewport*
Relative to 1% of viewport's* smaller dimension
Relative to 1% of viewport's* larger dimension
Relative to the parent element

Smooth Scroll

A good cross-browser solution that uses the JS library jQuery and utilizes anchor links, you can use the smooth scroll script to create a better user experience for long html pages.

Try it out