So now that we have our web design sectioned off and the dimensions and styles written down from yesterday, we’ll now move on to HTML coding. I decided to split the HTML in 2 sections, since there’s so much to explain. I’ll explain the code line by line, including the head information, and show you how each looks with the previous lines (so you’ll get a sense of what a full document looks like). If you have any questions, don’t hesitate to ask them in the comments! To get started you need to open a new file in your code or text editor.
The Basic HTML Tags Every Site Needs
Before you can begin your actual HTML coding, you need to tell the browser how to read the code. This is done by use of a doctype, beginning HTML tags, and the head section. These items are essential to your web site, and often will not work, or will display very poorly if left out. The head section also contains necessary meta information (we’ll explain this later). If you’re using Dreamweaver (code view only please), when you open a new document, it will put most of this information in there for you, which is helpful so you don’t have to memorize or type this in every time you start a new site.
Also, every open, or beginning tag, needs to have a closing tag somewhere or you’ll have never ending problems. Tags like <div>, <body>, <html> or other tags that have content in them, will use a closing tag such as </div>, </body>, or </html>. Tags like images, meta and links, will “self close” Example:
<img src="image.jpg" />
The “/” closes the tag. Get it?
Declare Your Doctype
The first line of code we need to write is the doctype. The doctype tells the browser specifically how to read the following HTML code and in what W3C standards (the people who take care of HTML) to display this in and how it will be validated. There are several doctypes you could technically use, but I prefer the XHTML Strict 1.0. It’s one of the newest standards to use, and it’s a lot cleaner to go this route (although some claim it’s difficult to validate in, it really isn’t). Here’s what you’ll need to write:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Start Your HTML
Every web page has to have <html> tags at the beginning (after the doctype) and end of the document. This tells your browser to begin reading the proceeding text as HTML and not as anything else.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br /> <span style="color: #ff0000;"><html ></span>
So far this is all pretty simple right?
The Head Section
As I started to explain before, the head section contains basic information about your website. It holds the title tag, which is the information displayed on the top of your browser (normally the website title) and also tells search engines what to call your website. It also contains meta data that help search engines rank and categorize your site based on keywords. This is also the section that links to your CSS and Javascript files. First you’ll need to open your head tag.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br /> <html ><br /> <span style="color: #ff0000;"><head></span>
Now you’ll need to tell your browser how to read the characters, or character encoding. Most often, you’ll never need to change this. (There’s a problem with copying/pasting from Word Documents into HTML that might cause you to need to change this)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br /> <html ><br /> <head><br /> <span style="color: #ff0000;"><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /></span>
From here we’ll jump to the page’s title. For SEO purposes, you always wanted to include the title of the website, along with the name of the page and/or a few keywords that explain what your page is about:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br /> <html ><br /> <head><br /> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><br /> <span style="color: #ff0000;"><title>Amber's Really Cool HTML-Lovin' Website</title></span>
Meta tags come next. There are two basic meta tags: one for description and one for keywords. The description meta tag contains a small paragraph explaining the existence of your site, and is normally what search engines display underneath your title in search results. The keywords meta tag contain short phrases or single words that “categorize” your website. Without getting into too much SEO, they also help you rank on search engines:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br /> <html ><br /> <head><br /> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><br /> <title>Amber's Really Cool HTML-Lovin' Website</title><br /> <span style="color: #ff0000;"><meta name="description" content="Amber's Really Cool HTML-Lovin' Website is a website dedicated to geeks who really love HTML and it's superness."/><br /> <meta name="keywords" content="love HTML, HTML rocks, HTML is cool, Joomla sucks"/></span>
Last but not least, we need to include a link to our future CSS page and then close our head tag. This would also be where you would link to javascript, but we’re not going to add any on this site.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br /> <html ><br /> <head><br /> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><br /> <title>Amber's Really Cool HTML-Lovin' Website</title><br /> <meta name="description" content="Amber's Really Cool HTML-Lovin' Website is a website dedicated to geeks who really love HTML and it's superness."/><br /> <meta name="keywords" content="love HTML, HTML rocks, HTML is cool, Joomla sucks"/><br /> <span style="color: #ff0000;"><link rel="stylesheet" href="main.css"/></span>
The Body Section
Now it’s time to actually begin coding our site. Before you start the actual HTML, or layout of the site, you must put it under a body tag. The body tag tells the browser to display everything in between.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br /> <html ><br /> <head><br /> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><br /> <title>Amber's Really Cool HTML-Lovin' Website</title><br /> <meta name="description" content="Amber's Really Cool HTML-Lovin' Website is a website dedicated to geeks who really love HTML and it's superness."/><br /> <meta name="keywords" content="love HTML, HTML rocks, HTML is cool, Joomla sucks"/><br /> <link rel="stylesheet" href="main.css"/>
<span style="color: #ff0000;"><body></span>
Figure Out What Sections You Need & Divs
Now do you remember all of our “sections” from yesterday? They were:
- Header
- Navigation
- Left Column
- Right Column
- Footer
We’ll take each of these secti
on
s and turn them into a “div”. A <div> is a “division” (sort of like the <td> tag in tables) that wraps around the information contained within each div. Each div is given an id (# in CSS) or a class (. in CSS). If you’re using the element only once, give it an ID; if you’re going to use it multiple times, give it a class. For each section we’ll be using an ID, because we only have 1 header, footer, etc.
Tomorrow we’ll jump into the layout HTML in How To Code A Simple Website From Scratch Part 3: HTML Layouts
All “How To Code A Simple Website From Scratch” steps:
How To Code A Simple Website From Scratch Part 1: Preparing the Design
How To Code A Simple Website From Scratch Part 2: Beginning the HTML
How To Code A Simple Website From Scratch Part 3: HTML Layouts
How To Code A Simple Website From Scratch Part 4: Fancy CSS