Chapter 1: An Introduction to Web Design
- www.w3schools.com/browsers/browser_stats.asp is a good resource to check on current browser popularity
- know your audience, but don’t exclude lesser groups
- the use of standards encourages the ‘author once, work anywhere’ mentality
- at the least, a test suite should consist of
o IE/WIN (various versions)
o Mozilla/Firefox
o Opera (…)
o IE/MAC
o Safari
- <b> and <i> are physical elements, <strong> and <em> are logical elements. Use the latter
- inline styles are deprecated in xhtml1.1.
Chapter 2: Web Page Essentials
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en” lang=”en”>
<head>
<meta http-equic=”content-type” content=”text/html; charset=iso-889-1” />
<title>
</head>
<body>
</body>
</html>
- The DTD indicates to a web browser what markup you’re using, thereby enabling the brower to accurately display the document in question.
- the html start tag should contain both a namespace and a language declaration. The namespace is intended to reduce the ambiguity of defined elements within the web page. In XML, elements can mean different things, depending on what technology is being used. The following namespace therefore ensures a browser interprets elements as XHTML unless otherwise overwritten in the document:
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en” lang=”en”>
To pass validation types and ensure browsers correctly format content, you must always declare your content type.
-always use full DTDs. Some web design packages do not. The following incomplete DTD does not refer to the w2c standard, but rather to a DTD stored locally. Chances are, you don’t have one locally, do you?
<!DOCTYPE html PUBLUC “-//W#C/DTD XHTML 1.0 Transitional/EN” “/DTD/xhtml-transitional.dtd”>
Prior to the DOCTYPE declaration, you can include an XML Prolog. This tells the browser which version of XML you’re using and the character encoding.
<?xml version=”1.0” encoding=”ISO-8859-1”?>
However, IE6/WIN does not allow for anything before the DOCTYPE declaration, so it may be better to avoid. Using the meta tag to declare the character encoding is more safe. **note that some browsers may not get the encoding right unless it is the first element in the head section
–you can prevent the MS image toolbar from appearing on images by using the following: <meta http-equiv=”imagetoolbar” content=”false” /> it is debatable if you should do this, since it is changing default browser behaviour. **I believe this is being removed for IE7, anyway)
<script type=”text/javascript” src=”sourcefile.js”></script> — note that “language” is deprecated
– if you are using 0 as a css setting, there is no need to specify units
CSS shorthand fox boxes:
one value (margin: 10px) – applied to all edges
two values (margin: 10px 20px)– first set (10) to top and bottom, second set (20) to left and right
three values (margin: 10px 20px 30px) – the first setting (10) is applied to the top. The second (20) to the left and right, and the third (30) to the bottom;
four values (margin: 10px 20px 30px 25px) Settings are applied clockwise from top (top 10, right 20, bottom 30, left 25)
background position: the property values set the origin of the background by using two values that relate to the horizontal and vertical position. This is in relation to the content rather than the available browser window space. the default background position is 0,0 (top left corner) You can use keywords (center, left, right and center, top, bottom) as well as percentages and pixel values. You can mix percentages and pixels, but not keywords, so using percentages and pixels is preferred.
- the first value relates to the horizontal position and the second to the vertical.
CSS shorthand for backgrounds
- the shorthand generally overrides any previous settings for individual background properties (i.e. if you define a background image, and then use shorthand to specify a background color, the image will most likely not appear).
- You can set the values in any order. Anything you do not explicitly mention will use the default display properties
Quick checklist
1. Ensure that the relevant DOCTYPE declaration and namespace is in place
2. Remove the XML declaration if its lurking
3. Add a title tag and some content within it
4. Add a meta tag to define your character set
5. If required, add keywords and description meta tags
6. Attach a CSS file (or files)
7. Attach a Javascript file (or files)
8. If your web editor adds superflouois body attributes, delete them.
9. Ensure there are no characters prior to the DOCTYPE declaration and after the html end tag
10. Ensure no web page content occurs outside the body element.
Chapter 3: Working with Text
- some may argue that “semantic markup” is web designer fancy-talk for “using the appropriate tag at the relevant time”
- logical styles describe what the content is, physical styles define what the content looks like
- abbreviations and acronyms – assist with accessibility, enabling you to provide users with full forms of terms by way of the title attribute. This is useful for screen reader users as well as people with visual web browsers.
- To draw attention to this, style the tag using CSS to make it consistent across the website. The following is an example:
- abbr {
border-bttom: 1px dotted #000;
background-color: yellow;
}
-two other logical styles are del and ins. These can be used for online tracking (akin to Word change-tracking). However, the ins tag is underlined by default, which may cause users to think it is a link. It is advisable to style it differently as well:
ins {
text-decoration: none;
border-bottom: 1px solid red;
}
The border is slightly lower than an underlined link, so it is intuitive yet there is some differentiation
-test colors on both windows and MAC platforms; MAC is brighter, so If you use subtle dark tones on the MAC or very light ones on windows, it may be hard to view on the other platform
the difference between the font-size and line-height measurement sis the leading value. Half the value is applied above the text and half below. Should you use a number, rather than a length or percentage, the value is multiplied by the font-size to get the line-height.
Many web designers with no print experience ignore this property, but it can be useful. Increasing it can lead to increased legibility.
CSS Shorthand for font properties
- some browsers are more forgiving than others regarding required and optional values, but you should always specify font-size and font-family values, in that order
- the font-style, font-weight and font-variant values, if included, should be placed at the start of the rule, prior to font-size
- the font-size and line-height values can be combined using the syntax font-size/line-height (for example, 12px/16px)
A complete font declaration may look like this:
p {
font: italic small-caps bold 100%/1.3em Arial, Helvetica, sans-serif;
}
Chapter 4: Working with Images
Chapter 5: Creating Navigation
Chapter 6: Introduction to Layout
Chapter 7: Tables: How Nature (and the W3C) Intended
Chapter 8: Layouts with CSS
Chapter 9: Working with Frames
Chapter 10: Getting User Feedback
Chapter 11: Adding Multimedia
Chapter 12: Testing, Tweaking and Uploading
(Also includes an XHTML References, a Web Color Reference, and Entities Reference and a CSS Reference)
Like it? Share it!
These icons link to social bookmarking sites where readers can share and discover new web pages.
