HTML
or hypertext mark up language is the code
underlying what you see on your computer screen when using the World Wide Web
(www). Although it is possible to create wonderful pages using WYSIWYG
programmes such as FrontPage or DreamWeaver knowing a little about the
source code can be very helpful and increase
your appreciation of the limitations and opportunities it holds for web design.
So take it easy, relax, remember your ComTech
notes are online so you can work at your own pace at school or home or at your
friends house so don't get tense, soon you will understand the basics of
HTML and be able to do some really interesting things.
Take a look at
HTML on any website by clicking on VIEW > SOURCE on your browser to see the
source code which is of course HTML. HTML tutorial
(another resource)
It’s not
a programming language and not word processing, think of it as a way of telling the browser
what to position or mark up on the screen page. One of the problems
created is that each browser type and each version interprets the markup often
in a different way.
Like programming however there is
however syntax that must be followed and this tutorial will help you get a
practical understanding of this language.
Brief Intro:
you will soon learn that html is all about using
<tags> to mark up the various components of your
webpage like text images and hyperlinks
The main tags are:
<HTML> this starts the page ,
</HTML> stops the page
<HEAD> starts the header (containing
the title etc.), </HEAD> stops the header
<BODY> contains the content of your
webpage, </BODY> is the other end of the content container called the body
there are hundreds of other tags that
work with in each of these tags, the browser uses them to layout the content of
your page
think of the above tags as the main
containers into which you will pour more tags
Open NOTEPAD and EXPLORER (now you have 2 browsers open) and begin
typing the following tutorial (or cut and
paste if you are lazy
but remember the hand can train the brain)
not the coloured type
<HTML> - NOTE HTML STARTS AND STOPS THE MARKUP
<HEAD>
<TITLE></TITLE> - THE HEADER CONTAINS THE TITLE WHICH SHOWS UP ON THE BROWSER NOT THE PAGE!
</HEAD>
<BODY> - THE BODY CONTAINS THE CONTENT OF YOUR WEBPAGE
</BODY>
</HTML>
Put something in theTitle
and
Body areas, like so.
<HTML>
<HEAD>
<TITLE>Welcome</TITLE>
</HEAD>
<BODY>
This my first webpage! NOTE THE DEFAULT JUSTIFICATION IS TO THE RIGHT AND FONT IS NEW TIMES ROMAN
</BODY>
</HTML>
Now save
it as an .html file.
To do
this, click file in the notepad window, then Save As.
Where it
says filename, name it ....
index.html.(the
first page of a website is always called the index.html)
Where it
says save as type: make sure it says All Files(*.*).
Hit
enter
and it's saved.
To view
your page,
open the saved
html file in your EXPLORER web
browser.
To see any changes you make to it, hit the refresh/reload
button at the top of your
browser.
Did you notice the
"
/ "
in the closing tag
this turns off the tag markup ?
Keep the tutorial window, your notepad, and your new webpage open
= 3 WINDOWS!
To make things easier I'm
only going to write what's in the
<BODY>
tags. I will omit the
<HTML>, <HEAD> & <TITLE>
tags. Needless to say, keep
these in your document. When you see tags with new stuff, make these changes in
your text document (notepad) SAVE and hit refresh/reload
in your BROWSER.
Again you should have 3 windows open.
Add any new tags in when I
do. Put them in the same place/way I do.
This is to
have an image as the background. Just type the image name (something like
image.jpg) where it says imagename. Other kinds of images are .jpeg, .gif and
.bmp. Be sure to put the full filename in. And make sure the image file is in
the same folder
<BODY BGPROPERTIES=FIXED>
</BODY>
This will
keep the background fixed. But this only works on explorer browsers.
<B>Bold</B>
Put these
tags around any words to make them bold. Put the starter tag in front of the
word/s you want bold, and the ending tag at the last word you want bold.
<I>Italics</I>
Put these tags around words to make them
appear in italics.
<U>Underlined</U>
Put these around words you want
underlined.
<I><B>Bold Italics</B></I>
You can combine tags if you want, go
ahead try it. Always make the tags nested, not overlapping.
<THIS><THAT></THIS></THAT>Overlapping
tags....
bad <THIS><THAT></THAT></THIS>Nested
tags……..... good!
<FONT SIZE=1>cool</FONT>
Fonts come in 7 sizes:
teeny
tiny
small
regular
extra
medium
large
real big
&
yelling!
1
2
3
4
5
6
7
Two things I want to discuss
now. First, a <TAG> tells the browser to do something. An
attribute goes inside the <TAG> and tells
the browser how to do it.
Second point is about defaults. As you probably know, the default value is a
value that the browser assumes if you have not told it otherwise. A good example
is the font size. The default font size is 3
(usually). If you say nothing it will be 3. If you make faces at your computer
it will still be 3.
Every browser has a default
font setting - font name, size and color. Unless you have messed with it the
default is probably Times New Roman 12pt (which translates into 3 for our
purposes) and it's black. Of course we can specify font names other than the
defaults. Like ARIAL
and COMIC SANS.
<FONT FACE="ARIAL"></FONT>
</BODY>
The font you
specify will only be displayed if the viewer has it installed on their computer.
If the font isn't installed, the browser reverts to the default. So, try not to
put rare fonts on your page. Safe fonts:
Andale MonoArialArial Black Comic Sans MSCourier NewGeorgiaImpact Times New RomanTrebuchet MSVerdana
Now I guess is a good time to
yap a bit about syntax. You notice here and there I use quotation marks, these
are important. Whenever you have an attribute="value", the value should really
be in quotes. It's a good habit to get into. I learned HTML as my first language
just to develop good habits.
Changing the <FONT COLOR="#FF0000"> red font</FONT>
</BODY>
You can also use the words red yellow orange green blue lime
instead of hexadecimal codes
You can use more than one attribute in a <FONT>
tag...
<BODY>
More changing the <FONT COLOR="#FF0000" FACE="ARIAL" SIZE="7">font</FONT>
</BODY>
<BODY BGCOLOR="#FFFFFF">
Pick up <U><I><B><FONT COLOR="#FF0000" FACE="ARIAL" SIZE="7">milk </FONT> </B></I></U>
</BODY>
P>I
feel the need to point out once again that multiple tags should be nested.
<TAG3><TAG2><TAG1>Hooha!</TAG1></TAG2></TAG3>
It doesn't matter which tag is first. It's not like if you
want to make something red and bold you
have to do one or the other first. You can do them in any order you want. Such
as.............. <TAG2><TAG1><TAG3>Hooha!</TAG3></TAG1></TAG2>
The fastest way to confuse
the browser, not to mention yourself is to overlap the tags...
<TAG3><TAG2><TAG1>Hooha!</TAG3></TAG1></TAG2>
(I
couldn't think of a way to explain it so I hope the use of examples makes it
clear.)
Here is an interesting kinetic addition to our collection of
attribute tags........ the Marquee tag .... it will cause your text that is
nested between <marquee> your text </marquee>
to scroll like a "marquee' across your screen. Try it its very cool but can
often be used inappropriately as are many other types of animated features in
web pages.
- left is the default movement
<marquee direction="right"> moves text to the
right
<H1>Heading 1</H1>
<H2>Heading 2</H2>
<H3>Heading 3</H3>
<H4>Heading 4</H4>
<H5>Heading 5</H5>
<H6>Heading 6</H6>
Here
is
a
really
small
heading
You may want to align your heading...
<H4
ALIGN="left">Left align your heading</H4>
<H3
ALIGN="center">Center your heading</H3>
<H2
ALIGN="right">Right align your heading</H2>
Left align your heading
Center align your heading
Right align your heading
Now, to start a new line (line break tags)
<BODY>
<BR>Start
<BR>a
<BR>new
<BR>line
</BODY>
If you don't do this, your
browser just makes everything go in a line, like this...
Start a new line
To avoid this use the line
break tags, OK.
<BODY>
<BR>Can
<BR>I
<BR>
<BR>Skip
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>a line?
</BODY>
<P>Hey dude!<P>
<P>What?<P>
This makes paragraphs. See? ayaa! dude! owhoa
You can align paragraphs too...
<P
ALIGN="right">Paragraph1.
<P
ALIGN="center">Another paragraph.
<P
ALIGN="left">Yet another paragraph.
When using the paragraph
tag, you don't need an ending tag.
When it comes to spaces, your text editor compresses all spaces into 1 space. So use this for heaps of spaces...
Here are
more special characters. Always lowercase)
non-breaking space
< < less-than symbol
> > greater-than symbol
& & ampersand
" " quotation mark
­ soft hyphen
But you want to center your work, you say? Ok then here...
<CENTER>I want to center my stuff</CENTER>
<BODY>
<UL>
<LI>Milk
<LI>Bread
<LI>Butter
</UL>
</BODY>
·Milk
·
·Bread
·
·Butter
·
Cool, huh? You
want an ordered list, you say? Ok then, here.
<BODY>
<OL>
<LI>More
milk
<LI>More
bread
<LI>But
no butter
</OL>
</BODY>
1.More milk
2.
3.More bread
4.
5.But no butter
6.
Still want more
lists? How about a definition list?
<BODY>
<DL>
<DT>Aardvark
<DD>A
burrowing, ant-eating African mammal. And, as everyone knows, the first word in
every self respecting dictionary. Did you know there's such a thing as an aardwolf?
</DL>
</BODY>
Aardvark
A burrowing, ant-eating African mammal. And, as everyone knows, the first word in every self-respecting dictionary.
Did you know there's such a thing as an aardwolf?
Block quotes will move your paragraph over (like Tab)
<BODY>
<BLOCKQUOTE>
Write a whole lot of stuff in here.
</BLOCKQUOTE>
</BODY>
Write a whole lot of stuff in here.
- this is a cool thing to include in emails
- open the source and work inside <PRE> </PRE> container tags
///\\
(@ @)
+----oOO----(_)-----------+
| Thanks again |
| MIKE |
| HARRIS |
+-----------------oOO-----+
|__|__|
|| ||
ooO Ooo
Normally It would look like this
///\\___ (@ @) +----oOO----(_)-----------+ | Thanks again |
As you can see, in order to
align the picture, you must use the paragraph tag as I have. You also don't
have to specify width and height, but it pays to. Otherwise, just remove them
from the tag.
The
alt tag is used when a person’s browser has
picture loading disabled or they are using a text only server.
It is a substitute for the
image.
Also, put the picture
you want in the same folder as your page folder.
If the picture is in another
folder, or another server, simply go to the picture.
Then copy what is in the
address bar into the part after
the SRC=" part of the tag. Also, make all file names lower case.
Here is a tag rarely used. Used to show where something notable is placed like the Google search applet
<!--The comment tag-->
What ever goes in here will not show up in your browser, only in your text editor.
Here is a tag used all the time……… horizontal line.
Example 2) below is the code for a drop down menu such as this
(cut and paste)
This one works because it is using a redirect script from another
site called IDOCS (where the CGI script is resident) and allows students to use
it as well!!! You have to make the custom changes to the script.
<OPTION VALUE="http://www.vangoghgallery.com/" > Van Gogh museum
<OPTION VALUE="http://www.artchive.com/artchive/C/cezanne.html" > Cezanne
<OPTION VALUE="http://www.ibiblio.org/wm/paint/auth/monet/" > Monet
</SELECT>
<INPUT TYPE=SUBMIT VALUE="Go">
</FORM>
SIMPLY CUT AND PASTE THE ABOVE CODE INTO YOUR
HTML DOCUMENT AND AND CHANGE THE OPTIONS TO SUIT YOUR NEEDS FOR THE SUBJECT IE)
Van Gogh and "http://www.vangoghgallery.com"
etc.
Example 3) yet another that can be cut and pasted change
the options to full URLs to suit your needs if you like
<form name="boogie">
<select name="surf" onChange="location=document.boogie.surf.options[document.boogie.surf.selectedIndex].value;"
value="GO">
<option selected>Choose Destination</option>
<option value="book.html">Web Site Design Made Easy</option>
<option value="magic.html">Background Magic</option>
<option value="news.html">Almost a Newsletter</option>
</select>
</form>
Go back through this tutorial several times and then use it as a
reference while you are making your own pages.
BELOW
ARE LOTS OF SEMI USEFUL HTML CODES TO USE AS REFERENCE AND TO ILLUSTRATE THAT WE
HAVE JUST SKIMMED THE TIP OF AND ICEBERG
Some
additional characters
which you may never ever use!
At least you
know now what html is and its importance often you can go
À À capital A, grave accent ï ï small i, diæresis/umlaut
à à small a, grave accent Ð Ð capital Eth, Icelandic
Á Á capital A, acute accent ð ð small eth, Icelandic
á á small a, acute accent Ñ Ñ capital N, tilde
  capital A, circumflex ñ ñ small n, tilde
â â small a, circumflex Ò Ò capital O, grave accent
à à capital A, tilde ò ò small o, grave accent
ã ã small a, tilde Ó Ó capital O, acute accent
Ä Ä capital A, diæresis/umlaut ó ó small o, acute accent
ä ä small a, diæresis/umlaut Ô Ô capital O, circumflex
Å Å capital A, ring ô ô small o, circumflex
å å small a, ring Õ Õ capital O, tilde
Æ Æ capital AE ligature õ õ small o, tilde
æ æ small ae ligature Ö Ö capital O, diæresis/umlaut
Ç Ç capital C, cedilla ö ö small o, diæresis/umlaut
ç ç small c, cedilla Ø Ø capital O, slash
È È capital E, grave accent ø ø small o, slash
è è small e, grave accent Ù Ù capital U, grave accent
É É capital E, acute accent ù ù small u, grave accent
é é small e, acute accent Ú Ú capital U, acute accent
Ê Ê capital E, circumflex ú ú small u, acute accent
ê ê small e, circumflex Û Û capital U, circumflex
Ë Ë capital E, diæresis/umlaut û û small u, circumflex
ë ë small e, diæresis/umlaut Ü Ü capital U, diæresis/umlaut
Ì Ì capital I, grave accent ü ü small u, diæresis/umlaut
ì ì small i, grave accent Ý Ý capital Y, acute accent
Í Í capital I, acute accent ý ý small y, acute accent
í í small i, acute accent Þ Þ capital Thorn, Icelandic
Î Î capital I, circumflex þ þ small thorn, Icelandic
î î small i, circumflex ß ß small sharp s, German sz
Ï Ï capital I, diæresis/umlaut ÿ ÿ small y, diæresis/umlaut
Additional characters from ISO 8859-1
  non-breaking space ± ± ± plus-or-minus sign
¡ ¡ ¡ inverted exclamation mark ² ² ² superscript two
¢ ¢ ¢ cent sign ³ ³ ³ superscript three
h notes are online so you can work at your own pace at school or home or at your friends house so don't get tense, soon you will understand the basics of HTML and be able to do some really interesting things.
