Overview of HTML/XHTML

Two Different Approaches

Text editor like NotepadHTML editor such as:

– KompoZer – DreamWeaver – Microsoft Expression Web– iWeb (Mac)– Coffee Cup– Etc.

Why do it the hard way…

Web site development is much more sophisticated than HTML

JavaScript Java Cascading Style Sheets Ruby on Rails Flash PHP

XML E-commerce Perl Ajax jQuery ASP

Need to be able to tweak codes from web editors.

What is HTML?

HTML is a special language which tells the browser how to format text in a www document.

HTML stands for HyperText Markup Language.

An HTML file consists of text and tags. XHTML includes minor code changes, and

stricter rules for coding. Also, XHTML uses CSS for page layout and

design

Syntax

Contains tags that dictate how the content will appear, i.e. formatting.

Examples:

<b>Happy</b> Applies bold to the word

<br /> Breaks the line

Some tags include attributes that alter the basic command, for example:

<h1 align=“center”>Welcome</h1>

Other Characteristics

The format is text files, with .htm or .html extension.

Hard returns, tabs, and extra spaces are ignored. DO NOT use spaces in file names. File names ARE CASE SENSITIVE. For this

class, all file names must be lower case. This will prevent a lot of problems when trying to publish your site.

Tags are not case sensitive for HTML, but for XHTML, they should all be lowercase.

One More Thing…

The first page in a web site should be named index.htm or index.html.

Because it’s the default filename, it nicely shortens your URL

example:www.cofc.edu

instead of:www.cofc.edu/index.htm

Displaying an HTML File

Use any browser software – such as Firefox, Internet Explorer or Safari, etc.

Also, use any OS —such as Windows, MacOS, Linux, Android, etc.

Beginning Skills

•The basic tags for an HTML file •Heading tags •Paragraph tags •Use attributes (such as align) •Line breaks •Indent with blockquote

•We will also insert an image

In-Class PracticeWrite a webpage about a simple topic. See the handout.

We will simply use HTML, and that will be a good lead-in to differentiate between HTML and XHTML.

…For practice only; not to turn in.

…When creating web sites, it is extremely important to organize files in the proper folders …

…For practice only; not to turn in.

…When creating web sites, it is extremely important to organize files in the proper folders …

OBJECTIVE:

Get Started

Open My Computer Create a folder called “Practice” Find a picture and save it in “Practice”

(less than 500 width is best)Open Notepad Open any browser