Introduction to HTML

Introduction to Web Design Part 1: HTML

If You Know Nothing About HTML, This is Where You Begin.

HTML Issues for Organisations
Why the need to know HTML code?
WYSIWG (What You See Is What You Get) editors (like Front Page and Dreamweaver) create program-specific code that is incomprehensible to other programs and may not be displayed correctly on all browsers or all operating systems.
You cannot edit them if you don’t have the original software, OR know enough about HTML and how it works to be able to make small edits yourself.
Company Intranets mostly use HTML.
HTML is now also used in e-mail and in e-mail marketing.
HTML is increasingly used as the basis of stand-alone applications that use a GUI (Graphical User Interface). Eg., an online Calculator with input fields.

Advantages of knowing HTML Code
New technologies start out as code without tools
HTML (early days), JavaScript, Java, ASP, XML
Even if you use WYSIWYG eidtors, it helps to know HTML code to insert ASP or JavaScript into a HTML file
If you can read code, you can copy clever ideas from others (within reason and the law). Imitation is the best form of flattery.
Go to any web page, click on “View” “Page source” or “Source” and the HTML code used to create that web page can be studied, or just copied (within legal and copyright bounds)
Web authoring tools don’t give as much control.
Most web professional web designers use HTML .

What is HTML?
H yper T ext M arkup L anguage.
HTML is a computer language that is used to create documents on the World Wide Web.
HTML is very simple, and logical. It reads from left to right, top to bottom and uses plain text.
HTML is NOT a programming language, but a mark-up language that uses <Tags> like this.
The websites you view on the internet are actually text files that consist of HTML Tags.

What is Hypertext?
Documents with links to other documents.
A non-sequential, non-linear method for reading a document.
Textual data which is linked within itself or across multiple documents or locations
A nonlinear system of writing that allows users to access text or a narrative through multiple pathways.
T

Hypertext in History
The cross-referencing system in the Babylonian Talmud.

Hypertext through History
A Dictionary or Encyclopedia
A page from Dr. Samuel Johnson’s Dictionary with references to the usage of the words in literature.

Hypertext in Academe
Citations and Footnotes

Hypertext in Literature
A matrix of stories like the Arabian Nights where the One Thousand and One different stories are all interconnected and form a matrix or web of stories.

Macintosh in the 80s
A Hypercard enabled Macintosh to construct a series of on-screen `filing cards' that contained textual and graphical information. Users could navigate these by pressing on-screen buttons, taking themselves on a tour of the information in the process.
Hypertext jumps could only be made to files on the same computer. More like an on-screen filing system. Jumps made to computers on the other side of the world were still out of the question.

Now, what is a mark-up language?
A markup language identifies pieces of a document so that another person (or application) can do something with those pieces.
Before HTML After HTML

Do you recognise this?
Traditionally, “ markup men ” used to markup manuscripts before they were copied or printed. In modern publishing, they are called proofreaders .

A marked-up page (or proof)
“Markup men” and proofreaders only look at how the content is presented--they do not edit the content ; content is editors by copyeditors and manuscript editors.

The library science & archives students should recognise this model of a markup language?

The MIM, library science & archives students should recognise this?

The Encode Archival Description used in Archives’ Finding Aids.
The EAD or
The Encoded Archival Description,
a mark-up standard for encoding archival finding aids (based more on XML, but more on that later)

Recognise these old text formatters?

What do text-formatters do?
All formatters distinguish the text to be printed from the instructions about how to print; these instructions are called markup . In HTML, markup looks like markup 
Procedural markup tells the software what to do (space down, paragraph breaks); generic markup describes the thing to be printed (heading, cross-reference, etc.).

A very brief History of HTML
Tim Berners-Lee , a British physicist working at CERN labs in Switzerland at the time (1989) is the inventor of HTML, and is often also credited as the inventor of www.
HTML is based on SGML (Standard Generalized Markup Langauge), which existed since 1940s, but without the ability to link.
He proposed it as a way for of enabling researchers from remote sites in the world to organize and pool together information.
He suggested that you could actually link the text in the files themselves, through an agreed-upon mark-up language.

The W3C: A www Consortium
Today, the World Wide Web Consortium (W3C) is an international consortium where member organizations, a full-time staff, and the public work together to develop Web standards. Tim Berners-Lee is the Director of the W3C.

internet vs. www
The Internet, basically a network of networks , had existed in various other forms around the world, particularly in the US Military and in Scientific communities since 1940s: ARPANET
The www is a way of accessing the information over the Internet through a HyperText Transfer Protocol (HTTP). It is an information sharing model that is built on top of the Internet.
www is just a portion of the Internet.
Internet, and not the www, is what is mostly used for e-mail.

HTML is no different from any other formatting language.
HTML is NOT a computer programming language.
Neither is SQL or XML, although extensions to these languages can be computer languages.
Just as SQL is a data query language, HTML is simply a text-formatting language

HTML uses Tags to markup the text
Tags are instructions that tell your Web browser what to show on the page
All tags begin with a less-than sign < and end with a greater-than sign > . So anything inside of < > is a tag.
Each tag must be accompanied by a closing tag, which is exactly the same as the tag except it includes a slash after the less-than sign: </>

Getting Started
What you need:
A computer.
A web browser.
A place to house your page/s on the www
A program to uplaod the page to the home on the www
A word processor (preferably Windows Notepad or WordPad or MAC TextEdit or other text editing programs. NOT a text formatting program like Word.)
And you’re ready to make websites!
Everything from here on is provided in the practical exercises webpage at http://itbn362.10gbfreewebhost.com , but I will explain if we have time.

Open Notepad

Basic Document Structure
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> Your Title </title>
<!- container -you can write comments in here for yourself that the browser will not display >
</head>
<body>
This is where your content goes.
</body>
</html>

Elements
Elements are made up of two tags; a start
tag and an end tag. Between these tags is
the element content.
<title> Will Code in HTML for Food </title>

Start Tags
A start tag is a left angle bracket followed by
the name of the element and then a right
angle bracket. A tag is also referred to as a ‘wicket’ by some.
<title>

End Tags
End tags are a left angle bracket and a slash
followed by the name of the element and
then a right angle bracket. The slash allows
the computer to distinguish the end tag from
the start tag . Tags are case sensitive in the new XHTML standard but not in HTML.
</title>

Empty Elements
Certain elements are empty and are
designated by a slash before the right angle
bracket in the start tag.
 
The element is used to insert a line break into
the document. This tells the computer to stop the
text at that point and start a new line. As you may
have guessed the element does not have any
content so it does not need an end tag but is written as instead of

Content
Most elements will contain multiple
elements. This may sound confusing but it
is really very simple. An element that
contains another element looks like this:
<head>
<title> The document title </title>
</head>

Nesting
Nesting means the way in which elements
contain elements. When we say that
elements are properly nested we mean that
each element is completely contained within
the elements that contain it, and it
completely contains the elements it
contains.

Nesting, continued
 Alladin is a fantastic story.
^ That is perfect HTML
 Alladin is a fantastic story. 
^ That is not! Can you spot the error?
The starts outside the but finishes inside it. The tags are not properly nested.

Required Elements
There are four elements that all HTML
documents must contain.
They must have a <head> and they must
contain a <title> . They also must have
<html> and <body> elements.

<html>
The <html> element contains the whole
document. It starts first and finishes
last. It tells the computer that this is an
<html> document and must always be
present.

<head>
The <head> contains elements that are
about the document rather than elements
that are displayed in the page itself and
includes things like the document title.

<title>
The document you must have a <title>
which describes what the document is.
Without a <title> the document is not valid.

<body>
A last, but certainly not least, the document
must have a <body> . The <body> is the
Webpage itself. It comes after the <head>
and is the only other element that can go in
your <html> element. Anything that you want
to put in your page goes in here.

Put It All Together
<html>
<head>
<title>
yadda yadda yadda
</title>
</head>
<body>
blah blah blah blah
</body>
</html>

Beginning to Write
Basic HTML tags
Note: Better not to use underline as it may be confused as a link. Underline Underline U Underline Italic Italic I Italic Bold Bold B Bold What it Does Code Used Code Effect

Tags cont.
You can use as many tags at one time as you’d like.
Example:
 Text Text Text 
Looks like:
Text Text Text
Example:
 Text Text Text 
Looks like:
Text Text Text

Single Tags
These tags do not require that you close them (in HTML only).
This stands for P aragraph. It does the exact same thing as the above except this tag skips a line. BR just jumps to the next line, P skips a line before starting the text again. This BR eaks the text and starts it again on the next line. Remember you saved your document as TEXT so where you hit ENTER to jump to the next line was not saved. In an HTML document, you need to denote where you want every carriage return with a . This command gives you a line across the page. ( HR stands for Horizontal Reference.) <hr> What It Does Tag

Writing Your First Page Looks like this This… Example:

Manipulating Text
Heading Commands
<h1> This is Heading 1 </h1>
<h6> This is Heading 6< /h6>
Heading commands create nice, bold text and are quite easy to use. It's a simple command.

Font Size
There are twelve font size commands.
+6 through +1 and -1 through -6 .
+6 is the largest (it's huge); - 6 is the smallest.
 This is +1 
[These are deprecated in XHTML in favour of Style Sheets, but that is not within the scope of our class]

Font Color and Face
HTML uses Hex Codes for colors. A hex code is a 6 digit code that translates into a specific color.
 White Text 
To change the Font of your text, use the Face attribute.
 Arial Text 
[ NOTE: These are deprecated in XHTML in favour of Style Sheets, but that is not within the scope of our class. Once you’ve learned HTML, you can look up an XHTML reference sheet for the changes ]

Text Alignment
To center text, simply place <center> before the text, and </center> at the end of the text you want centered.
To move text to the left or the right, use the tag.
 Text is pushed to the right .
Note:
All HTML tags use American spelling: color, center etc.

Remember!
Write the page as you would any other text document.
When you SAVE the document always click ‘Save As…’ and ALWAYS save the file as TEXT DOCUMENT (.txt), but with an extension of .html
If you don’t save as a Text only document, your computer will save it as it’s default format.

The End
This is in fact not really the end, but it is the
end of the basics . We have seen that there
are rules to be followed when writing your
HTML documents, and we've looked at the
basic building blocks of HTML. As long as
you follow these rules, you are on your way
to creating HTML web pages and perhaps even learn XHTML!

http://ranjith.zfs.in	28
http://itbn362.10gbfreehost.com	20
http://smashingweb.ge6.org	19
http://www.itbn362.10gbfreehost.com	1

Introduction to HTML

by MayaLisa on May 02, 2008

Accessibility

Categories

Upload Details

Usage Rights

4 Embeds 68

Statistics

Introduction to HTML — Presentation Transcript