Index
Latest
Notes
Profile
Other Diaries
Recommend This Diary
HTML 101
I've
been using Diaryland for a while now, and I've heard enough folks
bemoaning their lack of knowledge about how to write HTML and CSS that
I figured I'd dust off my credentials (haven't got any) and lay it out
here in simple, step-by-step instructions.
For the truly
uninitiated, HTML is the coding language that creates web pages. Using
HTML (which stands for Hyper-Text Markup Language,) you can tell your
page to post text XYZ and picture ABC, where to put them and whether or
not your title should be set aside and written in great big letters..
Add CSS into the mix and you can put a flowery wallpaper in the
background or in just one box, choose your font color, even change the
color of a font or a link whenever someone's mouse is hovering over it.
Presumably the mouse has time to hover because there are no cats around.
*Ahem* Where was I?
Ah
yes - page one, if you will, of how to use HTML. I'll focus primarily
on HTML for Diaryland, though the principles will apply to other sites,
too.
Step 1 - Understanding How HTML Talks
Chances
are you've seen coding at some point or another in your time online.
HTML is written with words inside a set of brackets, a "<" to open
the directions and "/>" to close them. The brackets tell your
browser (like Internet Explorer or Firefox - whatever program lets you
go online) that whatever words and symbols are inside those brackets,
they need to be parsed (interpreted) as instructions.
A very basic HTML page is written like this:
<html>
<head>
<title>My Page</title>
</head>
<body>
My, but this is easy!
</body>
</html>
Notice
above that there's not a whole lot of information; but of what's there,
most of it is in those brackets we were talking about. And for every
set of instructions, it's echoed a little further down the line with
the same thing inside the same brackets, only with a slash before the
word(s). That slash means, "STOP! You're done. Quit now. Okay, cut it
out." When you use the closing slash, it tells the browser to stop
doing whatever the opening set of instructions said, step by step. Also
notice that you close things out in the opposite order to which you
opened them. So you start and end with .
I want you to do an
exercise now. Open Notepad on your desktop and paste the above
information into Notepad. Where you see red lettering, above, Write
whatever you like instead of my short message. Just keep in mind, if
you write very much it will come out as one big paragraph! Then you'll
save as an HTML file using Notepad, by choosing Save and where it asks you to choose a name for your file, write in "flamingo.html" - and when you write it in, be sure to include the quotation marks, as shown below:
They're important because they tell Notepad to actually convert your document to an HTML file. Otherwise you'll end up with a text file called flamingo.html.txt. If you upload it to the Internet all you'll get is the text of your coding - not the page you designed.
While technically you can safe the file to wherever you want, I recommend saving it to your desktop.It's easier to access and change as you go.
After saving your file, double click on it. It should open up in a new window and show only the text you entered - except at the top of the browser, where it'll echo whatever title you typed into the "title" area.. (What?? You didn't change the title? Well, go change it and look at the top of the browser when you open your page. It'll be there.)
That's the end of Lesson 1 for today. The next step just expands on this, don't worry.
Next: Lesson 2 - Line Breaks, Paragraphs and Bold, Oh my!*
*coming soon to a browser near you