What is HTML:
A markup language used to structure text and multimedia documents and to set up hypertext links between documents, used extensively on the World Wide Web.
What is XHTML:
XHTML stands for EXtensible HyperText Markup Language. It is a stricter and cleaner version of HTML and recommended by the W3C
For the majority of this class, we will actually be using XHTML even though we will primarily calling it just HTML, you will see this throughout the industry as well
HTML Tags:
Tags are indicators in your code that let the browser know how to interpret elements on your website. These tags will always end with a closing tag, and will always be lowercase
Example of closing a tag: <p>The paragraph tag has just opened, but it is about to close</p> (Note the / inside the tag)
HTML Structure:
Your html structure will always appear as below:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
All your content will go here
</body>
</html>
So let’s take a quick look at this code:
<!DOCTYPE>: The doc type element tells the browser what version of HTML it will be using. It is essential to always use a doctype, if the element is not used your browser will go into “Quirks Mode”. This method will only allow the use of older layout techniques so some css techniques will not properly work. It seems complicated, but don’t worry too much about it. Just make sure this line is always at the top of your html code.
<html>: This is letting the browser know that everything inside is HTML code. The very end of your page will end in </html>. The xmlns attribute defines what is known as a namespace. It is going to the website w3.org to get the correct html tags for your file.
<head>: The head tag will contain any data not seen to the user on the page, things like keywords, descriptions, links to css and javascript files.
<meta>: The meta tag gives information about your document to the browser through various attributes. In the example you will see we are giving a charset attribute to let the browser know what language (utf-8) our document will be in. This way, all characters are encoded correctly
<title>: This content will show up in the title bar of your website
<body>: This is where your layout and content will go
When creating a new HTML page in Dreamweaver, this code will appear automatically however if you are working in a different program (ie: Notepad). You can copy this code as a guide and script just in that program.
More HTML tags Include:
<div>: Division. You will use this to be a container for content so you can later add styles to it.
<p>: Paragraph. The normal text paragraphs on your page
<a>: Anchor. The links on your website
<img>: Image. Images on your website
<br>: Break. Line breaks, use these sparingly . When you want to separate paragraphs of text, use the paragraph tag margins instead
Tags that close themselves:
A few tags will not end with a closing tag, but simply include a / before the tag ends
ie: <img />, <br />, <hr />
Depricated HTML:
While working with html you will eventually run into code that should not be used anymore. Be sure to avoid the following (Or convert it to newer code)
<i>: This is now replaced with the <em> tag to make text italic
<b>: This is now replaced with the <strong> tag to make text bold
<table>,<tr>,<td>: You can still use tables for tabular data (long lists and columns of information) but tables should not be used for layout. Use <div> instead
<font>: Fonts, sizes, and colors should all be applied through style sheets
<u>: The underline tag should be avoided and replaced by applying an underline style to an element
HTML Tag Attributes:
HTML attributes add values to specific HTML tags. This will look something like:
<tag attribute=”value” />
We use this when we set the hyperlink reference inside an anchor tag to make a link work:
<a href=http://www.google.com>Go to my website</a>
Nesting Tags:
It is important to understand how tag nesting works. We can have elements within other elements:
<div id="page">
<div id="header">
My Logo
</div>
<div id="content">
<div id="left_column">Left Content</div>
<div id="right_column">Right Content</div>
</div>
<div id="footer">
Copyright 2010 My Company
</div>
</div>
You should see that the div with an id of “page” is a container for the header, content, and footer divs. Assuming inside our content we would also like 2 columns of content, so you will see that the div “left_column” and “right_column” are placed inside the “content” div. The header and footer however are inside the page div but contain no other HTML elements
