HTML and CSS: Difference between revisions

Revision as of 20:16, 19 October 2012

Overview

This document covers HTML 4.01 and CSS 2.

General Rules for Web Development

Separate content (HTML), layout (CSS), and logic (javascript/php/etc)

HTML is for content
CSS is for layout
Keep styles/CSS out of the HTML
Keep javascript out of the HTML

Sticking to these rules will make code easier to read, easier to reuse, and easier to maintain.

HTML

The basic structure of an HTML 4.01 document

Example Basic Document

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
	"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
	<title>Title</title>
	<meta http-equiv="content-type" content="text/html; charset=utf-8">
	<link href="mystyle.css" rel="stylesheet" type="text/css">
</head>
<body>

<div id="header">
This is my site!
</div><!-- #header -->

<div id="content">

<h1>Heading</h1>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pellentesque, orci ultrices aliquam 
tempor, sapien leo dignissim ante, pharetra rutrum diam augue a mauris.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pellentesque, orci ultrices aliquam 
tempor, sapien leo dignissim ante, pharetra rutrum diam augue a mauris.</p>
</div><!-- #content -->

<h1>Another heading</h1>

<table>
<thead>
<th>
	<td>r1c1</td>
	<td>r1c2</td>
</th>
</thead>
<tbody>
<tr>
	<td>r1c1</td>
	<td>r1c2</td>
</tr>
<tr>
	<td>r2c1</td>
	<td>r2c2</td>
</tr>
</tbody>
</table>

<div id="footer">
© 2012. Me.
</div><!-- #footer -->

<script type="txt/javascript">
// some javascript
</script>
</body>
</html>

An outline for a basic static Genome Browser page can be found here:

Important points

Links to external style sheets should always be in the <head></head>
Use <div> tags to divide up the page into logical "divisions"
Unless needed for the function of a page/application, JavaScripts should be included at the bottom of a page, just before the </body> tag. This is so the content of the page appears to the user as fast as possible. Once the content is loaded, by the time the user has scanned the page, the JavaScript will have loaded. This speeds up the whole process.
When closing tags that are opened much further up in a page, it's a good idea to comment them:
- Closing by id: </div>
- Closing by class: </div>

Block level elements vs. inline

Block

For blocks of content
Automatically fill entire with of parent element
Usually have default top and bottom margins
Examples: p, div, table, ul, blockquote, fieldset, form ...

Inline

For defining text or data
Examples: span, i, b, a ...
Block level elements can not reside inside inline elements, e.g.
```
<span><p></p></span>
```

Which tags do/don’t require end tags

Required: most html elements require an end tag.
No end tag allowed; Void Elements:
, <meta>, <input>, <link>, <img> ….
- HTML 4 does not allow self-closing tags, e.g.
  or <img ….. />. Do not use them.
End tag optional: <p>, <li>, <tbody>, <head>, <tr>, <td> …
- HOWEVER! Including end tags on ALL elements:
  - Is recommended by the W3C
  - Makes for more readable, less error-prone markup
  - In just good practice :)

Special characters in HTML

Some characters should not be directly typed in HTML documents, but an ASCII character equivalent should be used.

Examples: & • © ü < > (“&” is especially important in URLs)
Reference for character equivalents: http://www.degraeve.com/reference/specialcharacters.php

Deprecated tags (HTML you shouldn’t use)

Many tags that are deprecated are so because css does a better job
<font>
<center>
CSS replacements: font-family:, align: center, etc.

The W3C has an Index of HTML Elements with deprecated tags marked.

TIP!

To horizontally center a block-level element inside another block give it the CSS attribute margin: 0 auto;:

.centerMe {
    margin: 0 auto;
}

The 0 gives it no top or bottom margin, and the "auto" makes the browser put and even amount of margin on both the left and right side of the element, thus centering it.

Code style

HTML is case insensitive, but it has become the universal standard to use lowercase tags and attributes (xhtml requires lowercase).
All attribute names must be in quotes if they contain any non-numeric characters
- OK: class=”mainContent”
- OK: cellpadding=0
- Not OK: width=100% (correct: width=”100%”)
- Not OK: target=_blank (correct: target=”_blank”)
- Not OK: border=1px (correct: border=”1px”)
- Always using quotes recommended for consistency and maintainability.
Indent code for easier reading
Use comments, and properly format them
Two spaces not needed after a period, and in fact the second space will be ignored
Code should not be wider than average screen size
- Easier to edit
- Easier to debug

Oh, bloody semantics! They may default to look the same, but they don’t mean the same

<em> vs. <i>

<em> is for “emphasis”. E.g.,
- “No, my <em>name</em> is Paris! I live in <em>Troy</em>.”
<i> is for writing things that require “italics” - so to speak... “[...] a span of text in an alternate voice or mood, or is otherwise offset from normal prose.” E.g.,
- The name of a ship (The <i>Titanic</i>), an idiomatic phrase from another language (<i lang=”fr”>ooh la la</i>) or a species’ names (<i>Homo erectus</i>).

<strong> vs. <b>

<strong> represents strong importance for it’s content, but unlike <em>, does not change sentence meaning. E.g.,
- <strong>Warning! This banana is dangerous!</strong>
<b> represents “a span of text to which attention is being drawn for utilitarian purposes without conveying any extra importance an with no implication of an alternate voice or mood.” …. sure..... E.g.,
- “....never forgot the joy of her fifth birthday - feasting on <b>powdered toast</p> and opening her gift: a <b>Log from Blammo!</b>.”

id vs. class attributes

class

General, general rules for styling
Use very generic, reusable names

id

Unique to each page, for styling and scripting (and testing with Selenium)
Use very specific, descriptive names

Give (almost) everything an id - anything that is a unique item:

All <div>, <form>, <fieldset>, <input>, <textarea>, <table>, <img>, <ul>, <ol>
- Using only a name attribute won’t cut it
If you don’t need it now, chances are, you will later

Common tag usage errors

<blockquote>

Strictly for content that is quoted from another source.
For an indent, best use
with style margin-left: 10px;

<table>

Strictly to be used for displaying tabular data
Not for layout

<br>

To force a line break in a sentence or force proper formatting of things like mailing addresses
Not for adding space between content (we have CSS for that)

Missing alt text in <img> tags

Required as of HTML 4.01
Helps disabled users, and this text appears if the link to the image breaks

CSS

CSS Best Practices

Use a CSS reset for better cross-browser compatibility
- Eric Meyer's CSS reset
- normalize.css
Condense verbose statements
- Use commas for redundant declarations, E.g.,

Before

.experiment a {
    text-decoration: none;
}
.axisType a {
    text-decoration: none;
}

.elementType a {
    text-decoration: none;
}

After

.experiment a, .axisType a, .elementType a {
    text-decoration: none;
}

Declare font size for body in % (62.5%), then use em to set font sizes (font-size: 1.5em;). This is preferred over px or pt.

Cascading Order: the C in CSS

The order, starting with highest priority:

User styles (styles set by the user in their browser)
Inline styles (styles set in the HTML document - not recommended)
Media type
Importance (!important)
Specificity
Order within the style sheet (items lower in the sheet over ride styles higher up)
Parent inherited styles
Browser default styles

Inheritance

The family tree: DOM
Most tags inherit the styles of their parents
Styles not inherited: margin, width, border, etc.
- It's usually logical which ones wouldn't be auto-inherited

Defining styles through context

Examples:

.copy h1 em {...}
.copy * em {...}
div.copy * {...}

So, for the first one, ".copy h1 em" means that each em element inside an h1 element that is inside and element with the class "copy" will get these styles. This is very useful and more flexible that styling everything using specific classes and ids.

Child and Sibling electors

Child: .copy > em (styles children em of .copy class but not the grandchildren)
Sibling selector reference

Pseudo-classes

Link and dynamic pseudo-classes, :link, :hover, :active, etc

Explanation of psuedo-classes on the Mozilla Developers Network.

Revision as of 20:15, 19 October 2012 (view source) Greg (talk \| contribs) (→‎Child and Sibling electors) ← Older edit		Revision as of 20:16, 19 October 2012 (view source) Greg (talk \| contribs) (→‎Pseudo-classes) Newer edit →
Line 273:		Line 273:
	Link and dynamic pseudo-classes, :link, :hover, :active, etc		Link and dynamic pseudo-classes, :link, :hover, :active, etc

	[~~https~~://developer.mozilla.org/en-US/docs/CSS/Pseudo-classes Explanation of psuedo-classes] on the [Mozilla Developers Network.		[http://developer.mozilla.org/en-US/docs/CSS/Pseudo-classes Explanation of psuedo-classes] on the Mozilla Developers Network.