Harjoitus 1
1. Kopioi itsellesi seuraava html-sivu:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Typography Rules Every Designer Should Know</title>
</head>
<body>
<h1>Typography Rules Every Designer Should Know </h1>
<h2>Show a clear hierarchy</h2>
<p>Every site needs a well developed hierarchy: indicators of where to start to start reading and how to proceed. Your typography can provide that hierarchy as long as you know your hierarchical order ahead of time. By thinking about size and typefaces, you can highlight a piece of text as a headline in a way that different placement in the design just can't provide.</p>
<p> Your design's hierarchy goes beyond just the typography you employ, of course, but since users almost always start with the text, it makes sense for designers to do the same.</p>
<h2>Pay attention to both macro and micro typography</h2>
<p>Macro typography is the overall structure of your type, how it appears in the context of your design and its aesthetic when you consider your text as a block on its own.<p>
<p>Micro typography is more concerned with the details of spacing, the issues that determine whether words are easy to read. Micro typography is an absolute necessity when it comes to putting together a block of text: if it isn't legible, there's no point in proceeding. Crowley Webb and Associates addressed this question through both careful writing and spacing out those words that the site would highlight.</p>
<p>But macro-typography provides you with the opportunity to make your text more than well-spaced: it's the chance to make it look appealing and a part of your whole design. The choice of typefaces and colors on this website create a viable whole. Ignoring either facet of typography is detrimental.</p>
<h2>Take care with type colors</h2>
<p>When a web designer works with colored type, care is absolutely necessary, there's no guarantee that a red on red combination, or even a yellow on red combination will be visible. After all, everyone has visited a website where the text seemed to be only one shade off from the background color and gotten a case of eye strain when they tried to read it.</p>
<p>The easiest fix for this situation is to make sure that the color of your type is drastically different from that of your background. Black and white work so well because they are as drastically different as you can get, but there are some color combos that work well: something along the lines of a dark blue on a light pink will get the job done. Reversed out text is pretty tricky... while you can work with light pink text on a dark blue background, you're more likely to get a complaint about it.</p>
</body>
</html>
2. Tee sille ulkoinen css-tiedosto ja linkitä se html-sivulle
3. Luo jokaisen otsikon alla oleville elementeille lohko, jonka pituus on 300px ja korkeus 80px. Muotoile myös otsikot, sivun taustaväri ja leipäteksti, jotta sivu on helppolukuinen
4. Tee jokaiselle lohkolle vierityspalkki
5. Muuta vierityspalkin värit mieleiseksesi
6. Tallenna ja esikatsele IE ja Firefox-selaimissa
Harjoitus 2.
1. Lisää tyylitiedostoon printtiominaisuudet
- muuta fontit päätteelliseksi
- tarkasta lohkojen leveydet
2. Esikatsele ja tulosta