| As mentioned in lesson one, the basic structure of HTML is the
same as a well built report. Where HTML leaves word processing
behind and becomes a mark-up language (HTML is not considered
a true programming language like Java or C++, but rather a subset
of SGML which stands for Standard Generalized Markup Language
) is when it applies specific attributes
to the tags it uses as "section headers".
The body tag defines the beginning and end of the visible part
of the web page. Since anything we see on-screen is part of the
body tag, it can set properties such as color for the background
or the visible text: <body bgcolor="blue"
text="white">
Pictures are almost universally present on web pages these days. The
tag for inserting an image within a web page is the <image> tag.
Not only does the tag declare that the upcoming code is the definition
of a digital picture, but it must also define where the web browser must
get this picture from. Specifically, it must instruct the web browser
to fetch the image from a specific directory on the web server.
If the image is placed in the same folder as the html file:
<img src="picture.jpg">
However, most web sites contain many pages and many pictures, so
organizing things so that they are easy to find (for updates or
finding corrupt files for example) is an important aspect of web
design. Placing similar things together is one basic technique
of file management. So, if we create a folder for all our images
and another for all our HTML files, we then have to instruct the
web browser how to get from the file to the image it has to display:
If the picture is in a folder called "images" in the
same folder as the html file:
<img src="images/picture.jpg">
Sometimes, you must place information in an directory
outside of the one you are in. The syntax for telling the browser to get
out of one folder to find another folder on another level of the hierarchy
is ../ which means "back up one
level from here".
Picture is in an "images" folder at the same level as
the folder that contains the current html file: <img
src="../images/picture.jpg">
Hyperlinks are the essential ingredient in web design. By using
them you can go from one topic of interest to another without
having to finish reading where you were at before. Unlike reading
books where you start at page one and go to the last in a specific
order, hyperlinks let you jump around at will. The essential tag
is the Anchor tag, hence the
use of the letter a. The href part stands for "hyperlink
reference". The cool thing about hyperlinks is that they
can be text or images. They can even be embedded in video.
Text Hyperlink: <a href="page2.html">click
here</a>
Image hyperlink: <a href="page2.html"><img
src="picture.jpg"></a>
| |
|
|
| |
The site map of the heliomedia.com/training
site. |
|
|
