Hypertext Markup Language

1
Hypertext Markup Language
2
What is HTML?

• Key part of the original proposal for the Web
• Subset of SGML
• Standard Generalized Markup Language used to
  prepare computer generated documents for
  publishing on a printing press
• HTML documents are straight ASCII text documents.
  Not a proprietary document format
• Straight ASCII code to keep the size of the file
  down.

3
HTML, continued

• Can be read and created by simple text editors
• Notepad on Windows platform
• SimpleText on Macintosh platform
• vi on UNIX (or Linux) platform
• Not a programming language
• HTML is a markup language in the sense of
  printing and publishing
• You markup your document and a Web browser
  interprets your markup code.
• HTML is platform independent

4
HTML is a Client-Side Application

• Specifies the structural aspects of a document
• Leaves the question of how to display the
  different elements in the document entirely up to
  the Web browser
• So document might look different in different
  browsers.
• This keeps the HTML files relatively small.

5
Server Computer is only responsible for conveying
the structural components of the document.
The Client Computer determines the formatting
characteristics.
6
Factors that Can Influence the Display of Your
Web Page

• The users
• Browser
• Monitor Size
• Current Monitor Resolution
• Installed Fonts
• Browser Window Size
• Viewing Hardware laptop, palm device, etc.
• Operating System (Mac and PCs interpret colors
  differently to the screen)

7
XHTML

• HTML is being replaced by a new language ? XHTML
• Very similar to HTML
• STRICT coding standards, so that many different
  types of browsers can display the information.
• For this course we will follow those rules

8
XHTML Rules

• All tag and attribute names must be in lowercase
• Empty tags must be written with an extra slash at
  the end
• You can never omit an end tag
• Attributes must always have a value.
• Attribute values must always be quoted

9
Additional Good HTML Coding Practices

• Insert spaces in your HTML code to separate the
  different sections
• Spaces do not show up in the web page
• Horizontal and vertical space can really make the
  code much easier to read
• Type in end tags as soon as you type in the start
  tag
• Have a template set up with the basics, cut
  down on your typing
• Use CUT and PASTE

10
HTML Coding Practices, continued

• Sign and date all documents in your site, so that
  a user can form some impression of the authority
  of the document (how recent and how reliable the
  information is).
• Date should be given January 20, 2003 (vs.
  1/20/04)
• Provide a link to the home page
• Provide a link for email to you
• You could put all this information in the
  documents head

11
Editors

• Use Notepad or WordPad or Textpad
• Download Textpad ? textpad.com

12
Text Editors

• Advantages
• Gives full control over tagging Layout
• Gives access to all possible tags and all their
  possible attributes
• Allows for easier production of clean, easy to
  read edit HTML

• Disadvantages
• Requires greater knowledge understanding of the
  markup language and process
• Harder to edit content, since both content and
  markup displayed together

13
Web Authoring Packages (WYSIWYG)

• Advantages
• Simplifies complex markup tasks
• Allows for easier editing because the markup is
  not shown or at least not emphasized in the
  display

• Disadvantages
• User has less control over structure and layout
  of markup
• Limits or controls users choice of tags
  attributes
• Will rewrite or at a minimum reformat your markup

14
Why use HTML over a WYSIWYG Editor?

• Page 31 QA box
• Understanding HTML will allow you to edit the
  HTML code directly to make modifications not
  supported by the WYSIWYG editor.

15
Using Textpad
Save as an HTML type of file.
16
Using Textpad
After you save the file as an HTML type Textpad
will then add the color coding to the display.
17
HTML Elements

• Includes headings, paragraphs, hyperlinks, lists,
  images, etc.

ltpgtsample textlt/pgt
18
(No Transcript)
19
(No Transcript)
20
(No Transcript)
21
(No Transcript)
22
Saved as html file
23
This is how is looks in Windows Explorer.
24
This how it looks in Opera.
25
This is how it looks in Mozilla Firefox.
26
Explorer
27
Opera
28
Firefox