| Professor
Thomas Sakoulas State University of New York at Oneonta : Art : Courses |
HTML: A BRIEF HISTORY
The word Hypertext was coined by a philosopher in the 1960's named Ted Nelson.
It referred to text that was not read in a sequence but in a random order at
will. He developed a system called Xanadu, but the actual Hypertext as we know
it today was invented around 1990 by a scientist at the European Laboratory
for Particle Physics (CERN). His name was Tim Bernes-Lee, and he created the
foundation for the World Wide Web. He created the web server, and he came up
with the terms HTML, HTTP, and URL. In essence he created the document (HTML),
defined the protocol by which the document will travel over the internet, and
the system of addressing each page so it can be found.
HTML DOCUMENT
An HTML (Hyper Text Markup Language) document is a plain text document (ASCII)
that can be created with any text editor ("Notepad" on Windows, BBEdit
on a Mac). It contains the content of the page as well as instructions on the
structure of the document so a web browser can create it on the screen when
it is received over the internet.
NO, a word processor (like MS Word) is not a good choice because it formats
the text.
The World Wide Web Consortium
(w3c) develops the standards for HTML
ELEMENTS
An element is a basic component of an HTML document
Head, Body, Table, Paragraph, List, Anchors, etc. are examples of elements
TAGS
A tag is a text convention (or code) that define the various elements of an
HTML page
A tag has two brackets < > that enclose the name of the tag.
A tag usually looks like this: <name of tag> content </name of tag>
For example <TITLE>My web page</TITLE> tells the browser that the
"My web page" part is the title
One notable exception: the <P> tag does not need to be closed (no need
to type </P> at the end)
Here is a
comprehensive guide to HTML and Tags by Ian Graham at the University of
Toronto.
ATTRIBUTES
Some opening tags may contain attributes that further define the characteristics
of the content
It looks like this <TAGNAME ATTRIBUTE = VALUE>
For example: <P ALLIGN=CENTER> whatever you type here will be centered</P>
Some opening tags may contain more than one attribute
Like this: <TAGNAME ATTRIBUTE1 = VALUE1 ATTRIBUTE2 = VALUE2
AN HTML DOCUMENT MUST CONTAIN AT LEAST THE FOLLOWING ELEMENTS
<HTML>
<HEAD>
<TITLE> Title of the page </TITLE>
</HEAD>
<BODY>
<P>The main content of your web page will go here (text, links, and images).
You can type what you want and when you want the browser to go to the next line
you would type the next
<P>and this will start a new line on the browser. When done you would
tell the browser that this body of work is done by typing
</BODY>
</HTML>
<HTML>
It starts an html document and ends it with </html> at the end
<HEAD>
Contains information about the document. What is contained within the head tag
is invisible on the browser.
Information on the head can be the Title, Language, inline Style, Meta tags,
Scripts etc.
Main Attributes: Lang (language), Style (inline or linked), Title
<TITLE>
Defines the title of the page as it will appear on the browser's title bar and
in the bookmarks (or favorites)
<BODY>
Includes the visible content that will appear on a web browser
Main Attributes:
Scroll (yes or no), dictates the appearance of scrollbar or not
Topmargin, Leftmargin, Rightmargin, Bottommargin (number of pixels)
Style (inline style) indicates the style that formats the contentAttributes Deprecated:
Bgcolor indicates the background color of the page
(aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow).
Background defines the picture on the background of the HTML page indicated by a URL
Link defines the colors of the links on the page
Text defines the text color
WORKING WITH TEXT (some useful Tags)
Headings Tags: <H1>, <H2>, <H3>, <H4>, <H5>. <H6>.
Paragraph: <P> Jumps to a new paragraph skipping a line. End tag can be
omitted
Line Break <BR> Creates a new line. End tag can be omitted
<B> bold text
<I> Italics
<FONT> (deprecated) specify a font
Example: <FONT SIZE = 9 COLOR = red FACE = verdana> type content <FONT>
<CENTER> centers a paragraph
<HR> Creates a Horizontal Rule
Attributes
o Align = (left, right, center)
o Color
o Noshade
o Size sets the vertical size
o Width
<DIV> Defines a block text so you can format it with styles
IMAGES
<IMG> inserts an image by defining a link to it
Like this <IMG SRC="http://www.sakoulas.com/images/greece/hydra_donkey.jpg"
width=265 height=400>
LINKS
<A> Creates a hyperlink
HREF attribute defines the target of the hyperlink
Like this: <A HREF="http://www.sakoulas.com">the text that becomes the hyperlink here</A>
<A HREF="http://www.sakoulas.com"> <IMG width=5 height=5 SRC="image_to_be_the_hyperlink.jpg"></A>
an anchor tag like the above example that includes an image tag will create a hyperlink from an image.
RELATIVE and ABSOLUTE URLs
URLs which are located relative to a page's location.
Example of Relative URL: the image greece/hydra_donkey.jpg can be linked from
a page in the same directory with a link that looks like this: <IMG SRC=
"greece/hydra_donkey.jpg" width=265 height=400>
Example of Absolute URL: The same image can be linked like this: <IMG SRC="http://www.sakoulas.com/images/greece/hydra_donkey.jpg"
width=265 height=400>
TABLES
<TABLE> creates a table
<TR> creates a row
<TD> creates table data
Example of a simple table:
<TABLE border=1>
<TR>
<TD>one</TD>
<TD>two </TD>
<TR span=2>
<TD><A HREF="http://www.sakoulas.com">go there</A></TD>
<TD>three</TD>
</TR>
</TABLE>