HTML Page Structure
Below is an example of the minimum needed code for a web page. This is also good code to start from.
|<div>||Document section (block)|
|<h1> to <h6>||Headings|
|<span>||Document section (inline)|
Create a Clean CSS Slate
In order to ease the process of making sure your site looks the same across the major modern browsers, using a CSS reset file will ease the process. Eric Meyer's CSS Reset is a very common one to use. I general place this in the following location:
lib/css/screen_reset.css and reference it in the head section of each page using:
<link rel="stylesheet" href="lib/css/screen_reset.css" type="text/css" media="screen, projection" />
The primary and most basic element for converting your design into sections is using a div tag. A div tag is a rectangular section that then can be set to specific sizing to contain each portion of your design. Div tags can also be nested. Your wireframe generally is a good starting off point on determining what divs your design will need to be converted to a web page.
Adding Custom Styles
Stylizing your document can be accomplished by applying CSS in one of 3 locations:
- In the document head section
- In an external file
Google Web Fonts
In the past web design has been limited to the use of just a few fonts. In recent years there have been major steps taken to allow a wider set of fonts to be used without the loss of search engines being able to read and index your text. One of the largest and easiest font collection to implement in your design is Google Fonts.
Adding a Google Font to your page is as simple as copying a line of code from thier site to the head section of your page and then referencing the font name in your CSS.