Web Design Fundamentals
Let's begin by explaining the HTML code that makes up the basic page structure of this web page.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Web Design Fundamentals</title>
<meta name="description" content="Let's begin by explaining the HTML code that...">
<link href="../craigkunce.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="header"></div>
<div id="navigation"></div>
<div id="content">
<div id="leftnav"></div>
<div id="leftColumn_middle"></div>
</div>
<div id="footer"></div>
</div>
</body>
</html>
Tags (or Elements)
A tag or element is a chunk of code that is contained within brackets that are less-than and greater-than signs, along with a forward slash (/) to close it. An opening head tag looks like this <head>. And a closing head tag like this </head>. The content would go between the two tags.
html5 seeks to reduce the amount of code needed and allows you to eliminate the closing tag altogether if there is no content between the opening and closing tags. The meta tag above would be an example of this. Instead of this:
<meta name="description" content="Let's begin by explaining the HTML code that..."></meta>
we can use this self-closing tag:
<meta name="description" content="Let's begin by explaining the HTML code that makes up...">
Attribute and value statement
The meta tag we just looked at has two attributes and values.
<ATTRIBUTE="VALUE" ATTRIBUTE="VALUE">
<meta name="description" content="Let's begin by explaining the HTML code that makes up...">
<div id="article_main"></div>
Coming soon… <article></article>, <aside></aside>
<!doctype html>
This tag (or element) defines this document type as html5. It is a short and efficient string.
Previous versions of html may have looked like this: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">. Which, of course, is a bit longer and less efficient.
<html lang="en">
This tag defines the primary language for this web page as english.
<head></head>
A web page is made up of two basic parts, the head and body. (We'll discuss the body a little later). The head contains instructions that tells the browser what information it needs to know (or where to go to get it) so it can display your web page properly.
The head contains a link to your css file. This most important file tells your browser what your web page should look like. Important stuff to a graphic designer!
The head also contains javascripts functions, title data, meta tag description, and more.
<meta charset="UTF-8">
Charset=utf-8
This meta tag in the head of our web page defines how the characters are encoded. Characer encoding takes all of those binary ones-and-zeros that computers use to talk to each other and displays them is an alphabet (character set) that the browsers, and us, can read. Character sets come on many different languages–so everyone can enjoy the Web.
Note that these tags aren't closed like we are used to. Since there is no content or text contained in the tag
<title>Web Design Fundamentals</title>
The title of your page serves a dual purpose. First it is a title, telling users what page they are on. But… the real power comes when the title intereacts with a search engine or a web spider or bot. A well written title states, succinctly, exactly what your web page offers to people viewing it. When your web page is categorized in a search engine (found by a spider or bot) your clear title helps place you at the top of a search engine's results list. This is referred to a SEO, or Search Engine Optimization.
<link href="../craigkunce.css" rel="stylesheet" type="text/css" />
This tag is the ever-powerful link to your web site's css file. The css file tells your browser how to display your web page—exactly what your type, art, photos, boxes, margins, white space, etc., should look like.
<body></body>
The body holds the content of your web page. This is where you add the viewable content to your web page (words, photos, art, lines, frames, etc.).