Week 7ART 239 Web Design I

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

Website Analyis Presentations

Hyperlinks

<a>
defines a link
href
defines the link address
target
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

_blank
Opens the linked document in a new window or tab. Useful to keep users from permanently leaving your page
_self
Opens the linked document in the same window/tab as it was clicked (this is default)
_parent
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.
_top
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

mailto:
Defines that the link should go to an email address
cc
Add a “carbon copy” email address
bcc
Add a blind carbon copy email address
subject
Add a subject line
body
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

&nbsp;
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.
&lsquo;
Left single quote mark, or an apostrophe ( ‘ )
&rsquo;
Right single quote mark ( ’ )
&ldquo;
Left double quote mark ( “ )
&rdquo;
Right double quote mark ( ” )
&mdash;
Em dash ( — )
&ndash;
En dash ( – )
&hellip;
Horizontal ellipsis ( … )
&copy;
Copyright ( © )
&amp;
Ampersand ( & )
&trade;
Trademark ( ™ )

CSS Units

px
Absolute value in pixels
em
Relative to the font-size of the element (2em means 2 times the size of the current font)
rem
Relative to font-size of the root element
vw
Relative to 1% of the width of the viewport*
vh
Relative to 1% of the height of the viewport*
vmin
Relative to 1% of viewport's* smaller dimension
vmax
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