Links are a critical for effective design because they imply interaction as well as content. Links can be in multiple states, can be internal or external, and can be grouped into categories.
All of this information should be presented visually in your design.
Link States
a:link - a normal, unvisited link
a:visited - a link the user has visited
a:hover - a link when the user mouses over it
a:active - a link the moment it is clicked
Text Decoration
It's common practice on the web to underline link text as a means of indicating a link. To toggle between underlined and not underlined, we use the text-decoration CSS property:
Images can be used to create dominance, similarity, texture and contrast. We can use photos as content, icons as design embelishments on text, and anything in between; in the foreground or background.
Here are a number of ways to include images in your pages:
As a content element using the <img> tag: i.e. <img src="https://drive.google.com/uc?id=0B6Sg_ALpI1HFVnFYMlI0YS1LVXM" alt="robot image">
As a background style using the background-image CSS property: i.e. #main_header { background-image:url('https://drive.google.com/uc?id=0B6Sg_ALpI1HFVnFYMlI0YS1LVXM'); }
As a bullet style for a list item: ul.checked li { list-style-image: url('https://drive.google.com/uc?id=0B6Sg_ALpI1HFVDBlVEdsenV3ZHc'); }
Using Google Drive to Host Images
You can host your images on Google Drive and link them into your pages from there using the https://drive.google.com/uc?[your_file_id_here] URL pattern.
After you have completed the reading assignment, revisit your HTML pages and begin layering in some of the Design Principles discussed in class and in the book.
Create a horizontal navigation bar inside a <nav> element to navigate betwen your pages using a list styled with display:inline;
Create an <aside> element containing a verticle list with links to external sites, i.e. Yahoo, a favorite blog, ESPN, etc. Style it in such a way that it can be identified visually as an external link.
Inside and <article> element, add a headline and some paragraph text. Use padding to give the copy some space from the border of your <article> element.
Create gutters between your <nav>, <article> and <aside> elements using margins.