THIS is an HTML page. You can put whatever you want on it, as long as it's between the <body> and </body> tags. Don't know what I mean? Look at the source code. Open this file up in Notepad or Simpletext and look at the code. Look for the <!--text between these marks-->, those are comments. They'll help you understand the code. I hope. Everything between a set of these things: "< >" and "</ >" is a tag, and it modifies everything between them. You'll probably only want to add or change anything between the body tags. If you want to know more about HTML there are thousands of books and online references that can help you...this is just the basics!
first off: MAKE A BACKUP COPY OF EVERYTHING FIRST! Don't change things unless you have a backup! You will inevitably do something horrendous (accidentally, of course) to the code (everyone does) and bless this silly little rule.
A note on the code: the examples show you the tag, and the code shows you the tag. Don't get confused and think you need both! You'll see a lot of amersands ('&') in the code, but most of them can be ignored. That's the way the browser knows diacritical marks, like accents and the tilde symbol, from actual code. Otherwise those marks can make the browser think it's looking at some weird code and give you those horrifying screens of html babble. More on this later.
<a href="http://yourlink.com">this is a link</a> put the link you want inside the quotes, add your link text, and close the tag with the </a> tag.<b>this is bold text</b> anything you put between <b> and </b> will be bolded.
<i>and this is italic text</i> anything you put between <i> and </i> will be italicized.
<u>this will underline your text</u> but nobody usually uses this anymore.
You can also make text different sizes and colors. <font color="red">this is red text</font> and <font size="5">this text is big</font>.
<big><big><big>this text is also big</big></big></big> but uses a different tag to do it (<small> works the same way). Each <big> tag makes the font one size bigger than the previous font size. The effect is cumulative, so the three <big> tags make the sentence really big.there are many types of tags, like <strike>, <sub> and <sup>,
which, when closed, will make the text striked out, subscripted,
or superscripted, respectively. This is the point where you should
visit webmonkey.com and learn
more about tags. HTMLbasix.com
is also a good source.
you can also combine tags, (this sentence is bold, italicized, and red, be sure to look at the code for that) as long as you nest the tags. aka order of the tags is first the <font> tag, then the <i> tag, then the <b> tag before the sentence, then vice versa at the end. If you don't do this all the time it's usually ok, but some browsers can't figure it out, so it's best to do it right and be consistent. And it doesn't always have to be <font><i><b>, it can be <i><b><font>, as long as the closing tag (</font>, etc) is in a mirror position at the end of the text you're modifying.
did you see how in the <font color> tag above , the color is some funny six digit number? That's called a hex code, and it's just a fancy way of telling the computer how much red, blue, and green is in the color. There's a list of colors at my site (http://etoiline.com/colorchart.html) or just google "hexidecimal code." But if you don't want to mess with hex codes, you can usually get away with just using "red" or "green" or "blue", any of your basic color names.
Some more basic tags:
<p>all of this text is in a new paragraph (and size "2"): Vi fait heent — doie en qu'adés ou doie me met. Haste bel tanz mon sovient sanz damoisele en amer, au me, qu'il ou bone quant et en. Roncin lors, s'entremet ensi loer bruit laira les rossignolet cuillir quel au. Refuser deporter maint en a; chantent matinet me, le m'esveillerent, a m'esveillerent on, sanz tel donrai, adès m'estuet, qu'il s'alai qu'adés de et vuet demander. Refuser d'un la saucelet les tot maint por cure ne si... adès saucelet fausser porter la. En ovrer et trover s'entremet ne aimme</p> (P for paragraph, get it?)
this text: et fait endeter covient, joliet
qu'il lasser veuil ensi. Tient, un muser quel laira et honiz, de et saucelet
li por ou quel ne mai? Regret je guiler... eschaper un mauvais et haste si chaponet
bon chaponet. <br />
Ovrer quant faintise en pas en maint aimme roncin. Selon lor cuer tanz de qui
adonc lasser sanz, demander lor puet veuil un — je selon et cler m'estuet
rossignolet blondet. Et par flajolet vis, a bel en damoisele? Qu'il cuer et
nuls cler, puis boissonet bien faintise flajoler et ai covient le en li por
— et veuil, sovient bel. <br />
is inside a <p> tag, but it's got line breaks (<br />)
between the text. A paragraph break is bigger than a line break, ok? Put the
<p> tag around large blocks of text, use the <br /> tag to break
them up.
And now I bet you were wondering what those funny —, &eacute; etc things were. If it's written in the code, that — will show up as a "—" and the &eacute; as a "é" in the text of a page. As mentioned at the beginning, that's how you would put an accent in a word. There's a whole list of them somewhere...google it and I'm sure you'll find it.
And you can put a picture on a webpage. Fun!
Putting <img src="http://jannoltalab.com/images/nolta.jpg"> in the code (a direct link) will give you the picture of Dr. Nolta, pulled directly from the site:
Since this primer is actually on the jannoltalab.com site, you could also use <img src="../images/nolta.jpg"> (a relative link) as long as the page you're working on is also on the site.
the "../" tells the browser to go back one directory (to jannoltalab.com) and then into the images folder, then get "nolta.jpg", the same as the first command, just takes less time to do it. If you needed to move up two directories (say you were in /images/fun/funpage.html and you needed a picture from the pictures directory in the jannoltalab.com directory, you'd just use two "../", like this: <img src="../../pictures/yourpic.html"> Got it? If you're confused just use the direct link like the first example. That will always work. Direct linking is fine if there aren't many pictures on a page, but if you're displaying lots of pictures all those direct links will slow a site down. Relative linking is faster, but make sure you're going to the right directory!
If you have questions you can always ask. My email is etoiline@etoiline.com (btw, an email link is the same as a regular link, but instead of a URL in the quotes, you put mailto:theemail@somehost.com, check out the code) and there are many sites available to help you learn more about HTML (listed above, or google it).
Thus ends the primer. I hope you learned something.
Jennifer