Lecture Notes - HTML and XHTML

What is HTML?

HTML is the language of the internet. It's what web pages are written in. HTML stands for "hypertext mark-up language". HTML and XHTML are the languages used to construct Web pages. They are really the same language, except that XHTML is more formal. A good analogy to understand these is that they are basically like the difference between using slang English and proper English. Slang English is like HTML, whereas XHTML is the more proper, structured version of the language.

In the future, it is likely that Web browsers will expect that your Web pages are designed with the proper grammar and not alternative versions of that language.

In your Required Reading for this week, you should have read the Wikipedia article with an overview of HTML. If you haven't read it yet, stop what you're doing - and read it now: http://en.wikipedia.org/wiki/HTML

We will be using HTML5 throughout this course. HTML5 is the new HTML standard. However, it is still being developed and not all browsers support the new features consistently. For the purposes of this class, and as beginners, we shouldn't bump into too many of these variations. Here's an interesting article on why you should use HTML5: Top 10 Reasons to use HTML5 Right Now.

HTML5 will:

Provide better error handling
Provide new elements and attributes
Allow your code to be device independent
Have a much simpler doctype
Reduce the need for plugins - like Flash

Do You Need to Know HTML to Create a Website?

No - there are many website-building programs on the market that don't require knowledge of HTML at all. You tell the program what you want, and the program creates the HTML for you. This is one of the nice features of Dreamweaver. You can click a few buttons to make some formatting choices, and all the coding will be done for you.
However, it is definitely to your benefit to understand how HTML works, so you can take full advantage of everything possible in web design. And, no matter how good the program is, there will be times where you will need to "tweak the code" to get it to do exactly what you want to do. Throughout our class, we will be examining the code of our pages so it is essential that you can at least recognize HTML.

What Do You Need to Write HTML?

Technically, you just need a browser and a text-editing program. It's best to avoid word processing programs when writing HTML because they will often add additional "stuff" to your code. If you are working on a PC, Notepad or Notepad++ work well and are most likely already on your computer. If you are working on a MAC, TextWrangler is a program that works well. TextWrangler can be downloaded for free: http://www.barebones.com/products/textwrangler/download.html.

Home Pages - index.html

When you type a web address into your browser's address bar, you are asking for a server to show you a web page. For example, if you type mcmenamins.com into your browser, the server must decide which page from the McMenamins directory it should display. By default, servers are typically configured to display the file "index.html" (or "index.htm" or "index.php", etc.). This means that the home page or main HTML file for any directory should be named "index.html" (without the quotes, of course!)

You will be creating several sites this term. Some will be set up with home pages, and others will simply be stand alone files that have a specific filename other than index.html. Be sure to follow the instructions for each assignment and always name your files as instructed.

Instructor Note:
Remember, home pages should always be saved as index.html - NOT home.html.

Tags

In HTML you work with tags, which are identified with angle brackets <>. Each tag has an opener and a closer. For example, if you want to format a paragraph, you use a <p> tag at the start of the new paragraph and a </p> tag at the end of the paragraph. Notice, the closing tag is the same as the opening tag with the addition of the forward slash /.

The basic structure of an HTML document includes tags, which surround content and apply meaning to it. ALL HTML tags should be closed. Although older versions of HTML lazily allowed some tags not to be closed, latest standards require all tags to be closed. This is a good habit to get into anyway.

<p>This is a sentence formatted with the HTML paragraph tags.</p>

All HTML5 tags have an opening tag and a closing tag which are indicated with brackets <>, such as <html> and need to have a closing tag, such as </html>. They indicate where things start and end on the code. The first tag we see is the <html> tag which kicks things off and tells the browser that everything between that and the </html> closing tag is an HTML document. The stuff between <body> and </body> is the main content of the document that will appear in the browser window.

All you need to remember is that all tags must be closed and most (those with content between them) are in the format of opening tag → content → closing tag.

Empty Tags

Not all tags have closing tags like this (<html></html>). Some tags, which do not wrap around content will close themselves or is called empty tags. The horizontal rule tag for example, looks like this : <hr />. Empty tags are tags that does not have a closing tag </ >, they are the only exception of the tag rules. There are 5 empty tags that you should at least know:

<br /> --- break tag. If you hit shift-enter, it will create a <br /> tag for single line. If you hit enter, it will create a <p> tag for double-space line.
<img /> --- image tag.
<link /> --- used to link to an external stylesheet file.
<hr /> --- horizontal rule tag.
<meta /> --- used to display information about the webpage. It can contain what language or description or keyword about the webpage for the search engine.

Attributes

Some tags can have attributes, which are extra bits of information that appear inside the opening tag, separated by a space after the tag. Attributes usually followed by value, which is always inside quotation marks. They may look like this: <opening-tag attribute="value">Element</closing-tag>.

Example of HTML code: <a href="http://www.pcc.edu">PCC Home</a>

That code is described as the anchor tag <a> followed by the attribute -- href, then the value inside the quote -- http://www.pcc.edu. PCC Home is the element, what actually shows up on the browser. Don't forget to close the tag with </a>.

Elements

Elements are not tags, but represented by tags in the code as a presentation on the web page.

For example: <title>Calisthenics 1 | Your Name</title>

Elements of the code above would be: Calisthenics 1 | Your Name, everything that is in between the opening and closing tags.

Since this is a class focused on using Dreamweaver to create web pages, we will not be spending a lot of time learning how to hand-code websites. We'll leave that for CAS 206 (which you should definitely take next!). However, there are certain tags that you NEED TO KNOW now - or at least be able to recognize them when looking at the code of your web page.

HTML vs. XHTML

The main differences between XHTML and HTML are that in XHTML (not necessarily in this order):

Tags must be closed. If you start with a <p> tag, then at the end of that paragraph there should be a </p> tag.
Tags must be properly nested, such as when used in lists or inline style.
Tags and attribute names must be in lower case letters.
All attribute values must be in quotes.
A Doctype declaration should appear in the first line to clarify which version of the markup language you are using.
Empty tags like <hr /> and <br /> should contain a slash at the end.

Basic Web page elements normally consist of things shown below. The mandatory minimum tags (in Bold) are what you must include in an XHTML Web page.

<html> --- marks the beginning of the Web page

<head> --- contains elements that are not part of the main Web page, such as title and meta elements

<title> --- specifies text that appears in the title bar of the Web browser opening the page
</title>

</head>

<body> --- includes contents that are visible in the main window of a Web browser

<h1></h1> --- represents the highest-level heading on the page. Headings go from largest (h1) to smallest (h6)

<p></p> --- marks a paragraph of text

<strong></strong> --- bolds text

<em></em> --- italicizes text

<br /> --- inserts a line break

<ul></ul> --- Creates an unordered (bulleted) list

<ol></ol> --- Creates an ordered (numbered) list

<li></li> --- Surrounds a list item in either an ordered list or an unordered list

<a href="URL"></a> --- Creates a hyperlink

<img></img> --- Surrounds a file location where an image file is located - and displays the image!

</body> --- marks the end of the content

</html> --- marks the end of the Web page

When you start a new Web page in Dreamweaver, it gives you these tags along with a Doctype, <meta> tag and <title> tag.

While not absolutely required, the <title> tag should be embedded within the head section and is important to most Web designers.

Read more from this XHTML tutorial. You can follow the direction, but do not need to turn it in.

Instructor Note:
I know that these are all new terminology and language that you will have to learn and swallow for now. However, once we do more exercises, you will gradually understand the tags and how they make up the design and structure of the web page.

If you have any questions, please ask me!

Common HTML Tags you should know about

Div <div> </div> tag --> divides a page into a series of blocks.
Paragraph <p> </p> tag --> creates a double-space break on a page.
Break <br /> tag --> forces a single-space break on a page.
Nonbreaking space   --> insert a space that will be displayed by the browser. Often used as a temporary text placeholder.
Blockquote <blockquote> </blockquote> tag --> indents text from both left and right margins, and can be nested for deeper indents.
Ordered list <ol> <li>list item</li> </ol> --> creates a list of numbered items.
Unordered list <ul> <li>list item</li> </ul> --> creates a list of bulleted items.
Strong <strong> </strong> tag --> replacing the <b> tag or bold style to text.
Emphasis <em> </em> tag --> replacing the <i> tag or italic style to text.