HTML Introduction

HTML Intro

This page is based off the first handout I gave in class.

What is HTML?

You can use HTML (Hyper Text Markup Language) to create web pages. HTML is a language made up of tags to create elements in a web page. There are programs to help make Web Pages (Dreamweaver, Visual Studio, etc) but you can also use a simple text editor like Notepad to make a web page.

When we save the file we put the extension .html on the end of the filename. This lets the computer know that it’s a web page document.

Browsers

Programs that view web pages are called browsers. The major browsers are Internet Explorer, Mozilla Firefox, Netscape, and Opera. Sometimes these browsers display the same HTML file differently. The reason for these discrepancies come from the fact that browser makers may have not completely followed standards set forth by the wc3 consortium or these standards have left room on some of the finer details or perhaps certain browser defaults are different. If you have an intricate design its good to check your page on more than one browser.

What are Tags?

Tags are instruction codes to tell the browser what do when it displays the web page. The primary use of tags is to markup typed content within your web page document with starting and ending points so the browser knows what to do with a given section.

A tag can have none to many attributes. Attributes are used to set options on how the tag operates. The attributes are placed in the opening tag. The way to code an attribute is typically by typing the attribute name followed by an equal sign and the value for the attribute enclosed in quotes. Example: Cellpadding=”4”
* Page content may be text you want shown when browsing the page or it may be other markup tags with content between those tags. Some tags are only used inside other tags. If a tag is nested (placed inside another set of tags) it must be closed before its parent tag is closed. Example using a list: Ingredients<ul><li>flour</li><li>eggs</li></ul>
This example code when browsed would like like...
Ingredients

flour
eggs

The exception to this starting and ending tag markup premise is when the tag produces a replaced element (the tag is replaced by something else instead of operating on page text) like an image or a line break. In an example of an image, since the src attribute in the opening <img> tag defines what picture to display you have already accomplished your goal. There would be no page content to type and this also begs the need for a closing tag. The syntax for replaced elements is <tagname attributename="value" />. By putting the slash at the end of the opening tag we have virtually combined an opening and closing tag into one tag.
Example: <img src="somepicture.jpg" width="200" height="200" />

Tags Types

Opening Tag - Defines the start of marked up section
Closing Tag - Defines the end of a marked up section
Combination Tag - Starts and closes in one tag to do a special instruction (No page text is involved)

Basic Tag Syntax - A tag involves atleast a less than sign, a tag name, and a greater than sign. If the tag name is food think of a pair of hungry gators going after some <food>.
Think of the slash as a sword - When you see it you have killed or ended the tag. If its the first thing inside the gators, you know it's an eding tag. If you don't see the sword till the last gator you know its a combination tag (we waited to do some instruction before killing it).

No matter how many other things are inside a tag, look for the gators and the slash to really tell what type of tag it is.

Opening Tag	< >
Closing Tag	</ >
Combination Tag	< />

These are all opening tags
<a>
<a href="about.html">
<a href="http://www.google.com" target="_blank">

Parts of an HTML File

1st thing in an HTML file - Spec declaration (without a spec browser goes into quirk's mode).
HTML Tag (The rest of the file is enclosed in the html tag)
Head Tag (Container for other tags including <Title> to set browser titlebar caption, <Link:> to hookup a CSS file, or <style> to create document level style rules)
Body Tag (Container for all the content of the web page)