/OpenOffice.org%203/Basis/share/gallery/rulers/gryrulr3.gif){kind=small}
HTML – Basics 1
Mark-up Languages
Traditionally used to provide typesetting information to printers (people, not machines): where text should be indented, margin sizes, bold text, special font sizes and styles, etc.
Word processors like WordPerfect and Word, and typesetting systems like LaTex are also forms of mark-up languages.
rtf files are written in a mark-up text format.
HyperText Markup Language ( HTML )
Provides text and other formatting instructions to a viewer, such as a web browser, to tell the browser how to render the material.
Has undergone many changes since version 1.0.
WebSite: www.w3.org
Web Browser
A computer program which, when connected to the Internet, is able to access documents at other locations and display them locally to the user, in accordance with its interpretation of markup instructions in the document.
Examples: Internet Explorer, FireFox, Chrome, Opera, etc.
Individual browsers may have numerous other features.
HTML Files
Must be saved as text files, with extension htm or html. The extension tells the browser that the file is to be interpreted according to HTML standards.
Browsers will display other kinds of files as well, according to the file’s extension.
TXT - .txt - plain text file, no formatting.
PDF - .pdf -Postscript, a proprietary type owned by Adobe corporation (portable document format.
JPG - .jpg - JPEG image file.
HTML Extensions
There are proprietary extensions available for the html language, for special applications. These are NOT official parts of html.•
“mv” files are an example: “Miva” extensions to html provide one way of implementing inter-active web pages. This language extension is owned by the Miva Corporation. ( www.miva.com )
“asp” files also include HTML extensions. Active Server Pages is a server-side script engine by Microsoft.
“PHP” is a commonly used extension to html as well. PHP stands for “Personal Home Page: Hypertext Preprocessor”.
Extensions like Miva, asp, and PHP generally require the server to have a special handling package installed, for the extension.
XHTML Files
•eXtensible Hypertext Markup Language
•Introduced in late 1990s to help correct a number of problems with “standard” HTML.
•Sometimes casually referred to as “HTML 5.0” but HTML really goes to v. 4.01.
Case Restrictions
“ordinary” html is case-insensitive, meaning that either upper or lower case may be used. Example: < br /> = <BR /> = <bR />.
Xhtml requires lower case usage. Use Xhtml standard in this course !!
Basic Constructs
Tags
Text is placed in containers, which consist of a start tag and an end tag, also called elements.
<start tag>The text goes here.</end tag>
Empty Tags
Some containers have only one part.
<hr /> : draws a line across the document
<br /> : a line feed, or break
The final slash is not required in standard HTML, but is required in XHTML. It tells the browser not to look for a closing tag, and should be included.
Basic Constructs -
All tags must be nested where: <p> … </p> contains a paragraph and <em> … </em> contains emphasized text,
Wrong: <p>This <em> overlap is not nested. </p> So it is wrong. Illegal… Bad… Defective. </em>
Correct: <p><em>This is proper nesting.</em> It is good!</p>
The Header (Head) Section
<head> : begin the head section
<title> : a descriptive title of document
</title>
<! --- >Optional items such as script here</>
</head> : head of the head section
The Body Section
<body>
{ main text of document goes here }
</body>
Basic HTML Document Structure
<html> { Markup Language Type Declaration }
<head>
<title> { Descriptive Text Here }
</title>
</head>
<body> { or, frameset }
{ Main Document Here }
</body> { or, /frameset }
</html>
Commonly Applied HTML Tags
Text Element Tags
<p> … </p> : Paragraph
<b> … </b> : Bold
<i> … </i> : Italics
<u> … </u> : Underline
<em> … </em> : Emphasize (logical – exact effect depends on browser)
<br /> : Line feed or break
<hr /> : Horizontal Rule (line)
Headings – Six (6) Levels
<h1> … </h1> Heading.
<h2> … </h2> Heading.
<h3> … </h3> Heading.
…
<blockquote> … </blockquote> : Indents block of text one tab.
Lists
<ol> Begin an Ordered List
<li> … </li> A list element
<li> … </li> Another list element
</ol> End of Ordered List
<ul> … </ul> As above, but Unordered List
HTML Document
<html>
<! This is a comment line: Browser will ignore it.>
<head>
<title> Sample HTML document </title>
</head>
<body>
<h3> This be a heading.</h3>
<p>This is a sentence in this sample document.</p>
<p>This is another sentence.</p>
<blockquote>
<ol>
<li> List item number one </li>
<li> List item number two </li>
<li> List item number three </li>
</ol>
</blockquote>
</body>
</html>
DOCTYPE
It is good practice to tell the browser what kind of standards apply to the document. This is done with a pre-processor directive at the top of the document.
For HTML – optional
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/transitional.dtd">
For XHTML – required
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
HTML Extensions
Extensions use special tag coding to identify commands for that extension set.
ie: <?php echo “some text”; ?> would tell a PHP preprocessor to cause the words “some text” to appear in the html document.
ie: <mvif expr=“test”> </mvif> would tell a Miva preprocessor to evaluate “test” and do whatever is in the container if the result is true.
Extension language sets like PHP, asp, and Miva are detected by preprocessors on the server before the html code is sent to the user. The extension tags are removed from the page and not sent, but rather used to create a virtual script on the server.
Many people find the language extensions easier to use than a separate scripting language such as Perl.
Create A Template For Your Use
Create a blank html template.
Store the file as a text file with an “htm” extension with a readily recognizable name.
Example: “html-templ.html Use this template whenever your start a new HTML document.