Coding in HTML
The Basics:
1. The first step is defining the document type. This tells the browser how it should run the webpage (which standards it should use) – for us it will be an html document (there are many different types).
For Example:
| <!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”> |
2. The next step is creating the “head” of the document.
This is the area of the document that is hidden (it is NOT displayed), but typically contains information and links to other necessary files and documents that allow the web browser to properly display the latter parts of the document. It can also help search engines determine how to classify and rank the document.
For Example the “description” tells search engine how to describe your webpage.
| <meta name=”description” content=”something descriptive about your website” /> |
| <meta name=”keywords” content=”keywords of your website” /> |
“Language” tells the browser what language to use.
| <meta http-equiv=”content-language” content=”en”> |
“Script” tells the browser to load a script that can be used later to carry out some function.
| <script type=’text/javascript’ src=’http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js?ver=3.2.1> |
“Stylesheet” tells the browser to link to a css stylesheet. This is typically used to govern how different elements are displayed.
| <link rel=”stylesheet” type=”text/css” href=”http://www.yourwebsite.com/folder/css/style.css”> |
3. Now we move on to the “Body,” which is the part of the document that is displayed.
The “Body” can be very complex and the parts can be named differently depending on what the web developer decides.
The parts of the “Body” are defined as “divs”
For Example:
———————————————
<body>
<div id=”wrapper”>
<div class=”header”>
</div> <!– end of header –>
<div id=”content”>
</div> <!– end of content –>
</div> <!– end of wrapper –>
</body>
———————————————-
So each “div” is defined, which can either be by a “class” or an “id.” For our purposes they essentially mean the same thing, except a “class” can be used to describe multiple objects in the same document.
The descriptive name in quotes (e.g. “header” & “content”) will be defined in the css document and can be whatever the web developer wants…
In this case I have named a div “wrapper,” and inside this div sits two more divs names “header” and “content”
4. Now we need to define our CSS stylesheet so it can govern how our content is displayed.
So in a new document we would again have to define our document type (and we would also have to link this css document in our html document “head” (don’t confuse “head” with “header”).
So we would begin with
@charset "utf-8"; /* CSS Document */
And then make a few basic rules to configure our “divs” from earlier:
For Example:
body { background-color: #FFF; }
#wrapper { width: 960px; margin: 0 auto; }
.header { width: 100%; height: 200px; display: block; }
#content { width: 100%; height: 600px; display: block; }
Above I am telling the browser to make the background color white (#FFF).
Inside the body is the “wrapper” which has a width of 960 pixels and its margin is set to 0 for the top and bottom and “auto” for left and right – “auto” will center the “wrapper” in the middle of the screen. (The # symbol denotes its an “id”)
Inside the “wrapper” the “header” div is listed first in our html document, so it will display on the top. It will fill the entire width of the “wrapper” (hence 100%), but will only be 200 pixels high. It will display as if it is a “block.” (The . denotes it as a “class”)
Below the “header,” but still inside the “wrapper,” the “content” div will be nearly identical, but will be 600 pixels in height.
