HTML and CSS
From Genecats
Jump to navigationJump to search
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 101
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><!-- #header -->
- Closing by class: </div><!-- .article -->
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.
- HTML 4 does not allow self-closing tags, e.g.
- 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 :)
- HOWEVER! Including end tags on ALL elements:
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
