In the Big Inning
<tags> - Basic webpage
building blocks
Syntax:
a connected or orderly system: a harmonious arrangment of parts or
elements. In the infancy of computers the structure and order of commands
to computer were very rigid and well-defined. As computers have matured
and programmers become more sophisicated, greater flexibility has
become more commonplace.
However, syntax remains highly critical
in almost all programming and markup languages.
While there are many programs or procedures
for authoring and defining webpages, the basic language is HTML,
hypertext markup langauage. HTML is actually not a programming language;
it is a markup language. This means that tags will
be intermingled with text to insert images and multimedia, to support
interaction and to define the layout.
All tags come have the <
and > characters around them. This is the first
and very important syntax criteria of HTML. All tags also fit into
one of two forms: a) tags that have a beginning or opening
tag and a similar ending or closing tag,
for example <html> and </html>; and single tags
that had no ending or closing tag, such as <img>.
All webpage will have some very basic
tags. They are so universal to all webpages that typically an authoring
program will automatically give the designer these tags. All webpages
start and end with <html> and </html>. Within those
tags are <head> and </head>, and <body> and </body>.
With these to sets of tags the webpage will contain information
about the webpage and the contents of the webpage. A fourth set
of tags is <title> and </title> which are within the
<head> secion of the webpage and between which is recorded
the title of the webpage which will appear at the top of the webpage
when displayed in a browser.
The basic framework of a webpage will
basically look like this:
<html>
<head>
<title>Webpage Title</title>
All other heading information
</head>
<body>
Contents of the webpage, such as text, images, interactions
</body>
</html>
Formatting the code
With
the convenience of authoring program formatting coding is nearly a
mute point, however as advanced coders it is important to understand.
Note in the above example the indentations and how opening and closing
tags are indented the same amount and tags within other tags are indented
further. This is only for ease of reading by human beings. The computer
reads the following:
<html><head><title>Webpage
Title</title>All other heading information</head><body>
Contents of the webpage, such as text, images, interactions</body></html>
Placing one set of tags within another
set of tags is called nesting and it is critical
to the computer as well as the humans that the nesting be precise
and accurate. No overlapping.
We will discover that different authoring
programs use different hints in their formats to make reading easier.
Some authoring programs, such as Dreamweaver, will offer color coding
of text code for ease of reading. This will be particularly true as
the coding becomes more advanced.
Attributes of tags
Tags can be modified
to provide additional information to the webpage. While the <img>
tag may appear very simple in that it doesn't even require a closing
tag, its purpose is to insert an image into the webpage and within
some additional information, the webpage has no idea what image.
So at a minimal the <img> tag must include the source of the
image. So a basic image code may be more like <img src="tree.jpg">.
A little more elaboration might be <img src="tree.jpg"
width="100">. These additional qualifiers are called
attributes and after you've mastered html coding
you will be placing attributes in many tags. Another example is
<body background="images/tree.jpg" text="#000000"
link="#666666" leftmargin="1">
Assignment and Activity
Our journey in
this course is long and the opportunities for creativity are endless
so we're going to quickly and thoroughly understand the basic tags.
We could list all tags and their functions on this webpage but the
options and opportunities with the multitude of attritudes is impractical.
Besides there are many websites already on the Internet offering
this information.
Therefore, we will start a notebook,
electronic or hardcopy, where we will identify the most commonly
used basic tags, their function and the attributes that apply to
that tag. We will organize the tags according to their function,
their similarities and how they relate to other tags. We will also
record URL addresses of useful websites that provide information
about HTML coding.
Several ways to complete this task
are do a web search, such as with Google.com, on terms such as "html
tutorial," and to apply the tags in Dreamweaver to see their
effect and the available attributes.
There will be a quiz during the second
class period, including a short practical application.
