HTML BASICS

Here is the basic breakdown of how HTML works.

All HTML tags (code) is kept within these two characters “<” and “>”, which we refer to as an open carat and a closing carat.
example: <p>
Tags are used to define structure with an open tag and a closing tag – these are referred toas container tags.. Basically indicating when something starts and when it ends. In this example the HTML code indicates the start and end of a paragraph.
example: <p>This is a paragraph.</p>
The closing tag uses the “/” to indicate that it is a closing tag.
In rare cases a tag may close on it’s own (referred to as a standalone tag).
example <br />
HTML code must be written in lowercase.
In some cases an HTML tag may have an attribute with a value. Attributes are located with in the “<>” but following the tag.
example: <p align=”center”>
NOTE: align is the attribute, followed by an equal sign, center is the value. Values are always surrounded by quotes. And yes, American spelling.

BASIC HTML PAGE STRUCTURE

Here is the basic code for any HTML page.

<html>

<head>

<title>This is where the title of the page goes.</title>

</head>

<body>

<h1>This is the main heading of the page</h1>

<p>This is a paragraph.</p>

</body>

</html>

NOTE: pages might not necessarily contain a h1 or a paragraph - they are just used here in this example.

Everything is contained within the “<html>” tags”
The “<head>” area, other than the title, usually contains CSS, JavaScript, or meta tags. Basically code that tells the browser how to display the page.
The “body>” area contains all of the content of the page.
HTML is black and white – results aren;t. Meaning, write the code correctly even if you get unexpected results.If you start fudging the code – you are guaranteed inconsistencies between browsers and if not now, later once the browsers update.

Deprecated Tags

Deprecated tags are simply, tags that are no longer used. With each new version of HTML that comes out, some tags just are not necessary anymore as newer, and better methods are introduced. While not correct in current versions of HTML, they were at one time used. Therefore, browsers still understand their meaning and will usually display them.

File Naming

There are some very strict rules in regards to naming an HTML file.

every HTML document must have a file name extension of either .html or .htm
NEVER USE A SPACE IN A FILE NAME!!!
In cases where two words make up the file name use either an underscore (_) or capitalize the second word.
Examples: html_basics.html htmlBasics.html
File names are cases sensitive!
htmlbasics.html, HTML BASICS.HTML, and HtmlBasics.html are all considered to be different files.So when starting to use HTML it is recommended to use all lower case to avoid any confusion.
Avoid using special characters as they may part of a programming language. So stay away from $, %, &, #, etc.
Be particular in where you are saving your files and how you are naming them as the HTML linking system is very particular in referencing the file EXACTLY as it is described in the code. If you move files after they have been saved there is a good chance you will have to update your HTML coding as well to avoid broken links.

HTML Tag Reference

Basic code for an HTML page.

<html>
<head>
<title>Document name goes here</title>
</head>

<body>
Visible text goes here
</body>
</html>

Heading Elements

<h1>Largest Heading</h1>
<h2> . . . </h2>
<h3> . . . </h3>
<h4> . . . </h4>
<h5> . . . </h5>

<h6>Smallest Heading</h6>

Text Elements

<p>This is a paragraph</p>
<br /> (line break) – Standalone tag
<hr /> (horizontal rule) – Standalone tag

Logical Styles

<em>This text is emphasized which displays as italic</em>
<strong>This text is strong which displays as bold</strong>
<code>This is some computer code</code>

Physical Styles

<b>This text is bold</b>
<i>This text is italic</i>

Anchors / Links

A named anchor:

<a name=”tips”>Useful Tips Section</a>
<a href=”#tips”>Jump to the Useful Tips Section</a>

Unordered list

<ul>
<li>First item</li>
<li>Next item</li>
</ul>

Ordered list

<ol>
<li>First item</li>
<li>Next item</li>
</ol>

Tables

<table border=”1″>
<tr>
<th>someheader</th>
<th>someheader</th>
</tr>
<tr>
<td>sometext</td>
<td>sometext</td>
</tr>
</table>

Frames

HTML Character Entities

In order to display special characters properly in the browser, we use code. Some fonts, key commands work on the computer fine but do not translate well in HTML or on other computers, Code is the safe way!

< is the same as <
> is the same as >
© is the same as ©

Full LIst of HTML Character Entities >>>

Comments

Code can get confusing and convoluted – so to help us keep track of sections of a page, what certain pieces of code are, and just notes to ourselves – we use comments. A really basic way of embedding notes into our HTML which is not displayed in the browser. Comments start with “<!–” and end with “–>”. Anything inbetween does not display in the browser.

example: <!– This is a comment –>

CASCADING STYLE SHEETS – METHODS

Currently there are four ways to incorporate style sheets into an HTML page being viewed in a browser. Each way has it’s own advantages and disadvantages. With stylesheets, always test in all of the browsers that you are concerned with, including both platforms. Stylesheets are still finicky in most browsers so be careful.

Linked

Linked style sheets use an external file to define the styles to be used for an html document. The advantage of using an external file is that you can have all the html files from a site refering to one stylesheet – make one change and your whole site is updated.

The link to the style sheet is contained within the head tags of a document and looks something like this:

Embedded

Embedded stylesheets have the stylesheet information that you normally would find on an external file “embedded” into an html file. The information is contained within the head tags.

An embedded style sheet is contained within the head tags after the title of a document and looks something like this:

</title&gt
<style&gt
	<!--
	h1 {font:10pt;}
	-->
</style>
</head>

note: The comment tags are in place for browsers that do not recognize style sheet information.

Inline

Inline styles are defined at the tag level of an html document. This method is usually used to override predefined styles or for unique instances.

An inline style is defined within an html tag and looks something like this:

<P style="margin-left:0.5in;">

note: Using this method throughout a document can be tedious and will end up adding file size to the document. Use this method sparingly if possible.

Import

Importing a style sheet is very similar to linking to a stylesheet, the only real difference is that the import command goes into the style container found within the head tags. Other style commands can be added after the style sheet is imported.

An imported style is contained within the style tags contained within the head of an html document:

<style&gt
	<!--
	@import url(file.css);
	hi {color:grey;}
	-->
</style>

note: The import statement must go first before any style infomation. Also more than one import statement can be used to import multiple style sheets.

CASCADING STYLE SHEETS – SYNTAX

CSS – Syntax Rules

Each rule has two parts, the selector and the declaration. Each declaration is made up of properties and values.

h1 {color:purple; }

A selector is simply the part of the rule that selects the parts of the document to which the styles are to be applied. In this example, all h1 tags.

A property is similar to an attribute of an html tag. It determines what aspect of the selector is to be affected.

The value determines how the property is to be affected.

note: A declaration is always formatted as a property followed by a colon, and then a value. The declaration is terminated by a semi-colon. You can have multiple declarations in a rule as long as each declaration is terminated properly with a semi-colon. If an incorrect property is used, the entire declaration is ignored.

Comments

Stylesheet comments appear either on the external stylesheet or contained within the style tags. They are surrounded by /* and */

A style sheet comment looks something like this:

/* comments go here */

note: Comments can span multiple lines.

Resources

EXERCISES

Try online samples at w3schools.com

HTML Basics

Assignments

Start formatting your resume.
- Create a basic HTML page structure.
- Add an embedded styelsheet
- Start adding style to your document
- Upload to the server

Extra

Want to practice but don’t have content to work with? Use Lorum Ipsum – click the link below!

You can use an online Lorum Ipsum generator.

WEEK 2: XHTML / CSS Basics

HTML BASICS

BASIC HTML PAGE STRUCTURE

Deprecated Tags

File Naming

HTML Tag Reference

Heading Elements

Text Elements

Logical Styles

Physical Styles

Anchors / Links

A named anchor:

Unordered list

Ordered list

Tables

Frames

HTML Character Entities

Comments

CASCADING STYLE SHEETS – METHODS

Linked

Embedded

Inline

Import

CASCADING STYLE SHEETS – SYNTAX

CSS – Syntax Rules

Comments

Assignments

Extra