NOTE – HTML
BASICS WHAT IS HTML? HTML stands
for HyperText Mark-up Language. It is a language that specifies how to
display objects (text, images, graphics, tables, ...) on the screen. Programs that are capable of reading HTML
files and displaying them on the screen are called web browsers. HTML is very
important because it can be understood by all computers. So even if two computers are different
(such as a MAC and PC), they can both still use HTML because they both have a
way to understand it (via a web browser). FILE EXTENSION An html
document is really just a text document with a different extension. This extension lets your computer know that
it should open the file with your internet browser. Note that
both html and htm extensions are the same. TAGS
HTML is
simply text that makes use of tags to specify how to display things on the
screen. Tags always start with a <
symbol and end with a > symbol. For example,
here are a three different tags: <body> <b> <font
color="blue"> Many tags
that affect a certain section of your text have an opening and a closing
version. The closing version simply
have a / symbol after the < symbol.
For example,
the <b> tag bolds text. Below,
the word Campeau would be bolded because it appears between the opening and
closing <b> tags. Mr.
<b>Campeau</b> is the best. ATTRIBUTES AND VALUES
Most tags have
specific attributes that you can use to customize them. Inside the
tag, you simply add the attribute name followed by an = symbol, followed by a
value for that attribute. The value is
always inside double quotes. For example,
the <font> tag has an attribute called color. Let’s consider the sentence. May the force be with you. Now, let’s
use the color attribute in <font> to make the word force be yellow. STEP 1 – Add an empty <font>
tag and closing tag. May the <font>force</font> be
with you. STEP 2 – Add color="yellow" to the
<font> tag May the <font color="yellow">force</font>
be with you. As another
example, let’s consider the <img> tag. It has the following attributes: src, height, width, border. So, you can use the tag in any of the
following ways: <img src="filename" height="200"
border="3"> <img src="filename"> <img src="filename" border="2"
width="400"> The
attributes available for any tag can easily be researched online. Simply search “the hr
tag” and you will get details about how to use the tag and all the attributes
that exist for that tag. HTML TEMPLATE
The following
sequence of tags is common in all simple html documents: <html> <head><title>This
appears in the blue section at the top.</title> </head> <body> </body> </html> COMMON
ERROR – THE <BODY> TAG There is only
one <body> and one </body> tag.
You should never add more. You
can only make changes to that one tag. VIEWING
SOURCE CODE When we are looking at the content of an HTML
document along with all the tags, it is called viewing the source code. One can do this for any website! In internet explorer, you simply go under
View and click on Source. ABSOLUTE
REFERENCE VS RELATIVE REFERENCE A
reference is simply a file name and location.
When you place an image on an html document, you must give a reference
to it. The same goes when you want to
make a link to another page. There are
two ways to make references. An
absolute reference is giving the file’s complete location and name on the internet. Here
is an example: http://www.lockerby.net/media/header.jpg A
relative reference is giving the file’s location with respect to the
location of the html document in which this file is referenced. EXAMPLES OF RELATIVE REFERENCING a) If the file is in the same folder as
the html document, you simply put the file name. <img src=″fun.jpg″> <a
href=″page2.html″>link text</a> b) A common approach in webdesign is to place all images in a subfolder called
images. To reference the images called
fun.jpg, we need to add the subfolder name to the reference. <img src=″images/fun.jpg″> c) Sometimes, instead of referencing a
file in a subfolder, you need to reference a file in a parent folder. To go up one level, we need to use the dot dot (..) reference.
To make a link to the file index.html that is in the parent folder, we
use: <a href=″../index.html″>link
text</a> RELATIVE BETTER THAN ABSOLUTE A
relative reference is usually better than an absolute reference because it
will continue to work even if the files are relocated to a new location (as
long as the folder structure is still together). TAG NAME,
TAG ATTRIBUTE, ATTRIBUTE VALUE All
tags have a name. The name is simply
the first work (no spaces) that appears in the tag. A
tag can have zero, one or more attributes.
In most cases, the attributes are optional. The attributes can always be placed in any
order. A simple space separates all
attributes. Each
attribute is given a value. The value
is usually placed inside quotes. EXAMPLES
The
font tag can have several different forms.
It all depends on which attribute of the font that we want to
change. All of these are examples of
the font tag being used: <font
size="6" color="blue"> ... </font> <font size="2"> ... </font> <font color="red"> ... </font> <font face="arial">
... </font> The
two following uses are identical: <font size="6"
color="blue"> ... </font> <font color="blue"
size="6"> ... </font> RESEARCHING A TAG You can
easily research any tag by simply typing its name and “html tag” in
google. You will immediately find
sites that give you examples and well as lists of attributes and possible
values for those attributes. |