|
HTML (Tag) Primer
- Essential Tags
- Majority of webpages are built in htm (hypertext markup) language
- Employs tags to provide direction to computer/broswer so they
know how to display the information. Some tags stand on their
own while others are container tags.
- Certain tags are required so the browser software knows what
language you are using, and can identify the core components of
your webpage (file).
<html>
<head>
<title>
</title>
</head>
<body>
</body>
</html>
But they require content to make them useful. They are repeated
below, with sample content inserted:
<html>
<head>
<title>
Smith Family History
</title>
</head>
<body>
<p>Whatever
you want to say to the world about your family.
Say it in as many,
elaborate sentences as you want, but
be sure to break up
your text into small paragraphs. </p>
<p>Just as in newspapers, paragraphs
of more than 2-3 sentences
are often difficult
to read online.</p>
</body>
</html>
- Important Tags
The important tags are included below, with sample content inserted.
They control line breaks, links to other websites, and cataloguing
for search engines. They also control the appearance of some content.
<html>
<head>
<title>
Smith Family History
</title>
<meta name="keywords"
content="surname, other surname, other surname,
etc.">
</head>
<body>
<p>Whatever you
want to say to the world about your family.
Say it in as many, elaborate
sentences as you want, but
be sure to break up your
text into small paragraphs. </p>
<p>Just
as in newspapers, paragraphs of more than 2-3 sentences
are often difficult to
read online.</p>
<p>Then
tell your readers how to navigate your website, but going to your
listing of <a
href="surnames.htm">Surnames</a>,
and any other
points of interest, e.g.
a <a href="scrapbook.htm">Family
Scrapbook</a>
on your website. Don't forget to tell them about
<a href="other.htm">Other
Websites</a> that pertain to your
genealogical interests
(e.g. http://www.afhs.ab.ca!) </p>
<p>Don't
forget to close this (and all) pages, with a date and your e-mail
address. These are often
presented in a slightly smaller font. </p>
<p>
<font size="=1">
<br>Last
updated: 31 August 1998
<br>E-mail:
<a href="mailto:userid@cadvision.com">
Sarah Smith</a>
</font>
</p>
</body>
</html>
- Tag Recap
Apart from the required tags, we have used these very basic tags:
<title>xxxxxxx</title>
<meta name="xxxxxxx" content="xxxxxxx">
<p></p>
<br>
<a href="xxxxxxx.htm">xxxxxxx</a>
<font size=" ">xxxxxxx</font>
Most tags have options that allow greater precision, e.g.
<font size="-1" color="#cc0000">xxxxxxx</font>
<p align=center>xxxxxxx</p>
At times, you'll want to jazz up the appearance by adding depth
to the webpage. This can be done with background imgaes, photographs,
alternative fonts, image files (photos or graphics), etc.
- Other html commands:
-
&
- "
- <STRONG>xxxxxxx</STRONG>
- <EM>xxxxxxx
</EM>
- <HR>
- <UL>
<LI>xxxxxxx</li>
<LI>xxxxxxx</li>
</UL>
- Link to target:
- file in same directory:
<a href=" xxxxxxx.html">
xxxxxxx</a>
- file in another site:
<a href="http://www. xxxxxxx/xxx/xxxxx.xxx
html">highlighted text</a>
- in same file:
<a href="#xxxxx">highlighted
text</a>
- Where the target is identified as:
<a name="xxxxxx">xxx</a>
somewhere else on that page)
- <img src="photo.jpg"
width=w height=x
border=y hspace=y>
- Tables are helpful to organize data into columns and rows, to
position photos more precisely on a page, create margins on left
and right sides of page, etc. They are used more often than realized,
because the visibility of the borders can be turned off with a
border=0 option in the opening tag.
To represent
the following is needed:
- <TABLE>
- <TR> <TD>aaa</TD><TD>bbb
</TD>
- </TR>
- <TR> <TD>ccc</TD><TD>ddd
</TD>
- </TR>
- </TABLE>
- Using a wysiwyg editor - DreamWeaver
- See sample: www.afhs.ab.ca/simpsons/
- Gedcom to html editors
Prepare a gedcom using favourite software (recommend omitting living
kin details). Make a few basic selections regarding the look and feel
of your site Save and test the file.
|
