Overview of HTML/XHTML

1
Overview of HTML/XHTML
2
Two Different Approaches

• Text editor like Notepad
• HTML editor such as
• KompoZer
• DreamWeaver
• Microsoft Expression Web
• iWeb (Mac)
• Coffee Cup
• Etc.

3
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.

4
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

5
Syntax

• Contains tags that dictate how the content will
  appear, i.e. formatting.
• Examples
• ltbgtHappylt/bgt Applies bold to the word
• ltbr /gt Breaks the line
• Some tags include attributes that alter the basic
  command, for example
• lth1 aligncentergtWelcomelt/h1gt

6
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.

7
One More Thing

• The first page in a web site should be named
  index.htm or index.html. Because its the
  default filename, it nicely shortens your URL
• example www.cofc.eduinstead of
• www.cofc.edu/index.htm

8
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.

9
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

10
In-Class Practice
Write 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.
OBJECTIVE
For practice only not to turn in. When
creating web sites, it is extremely important to
organize files in the proper folders
11
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