Why learn HTML when there are so many editors out there that let you design
web sites without having to look at the code? Because it'll make you a better
developer! I've long been a believer that you should learn some background on
why you should do things a certain way, in order to help you do them
correctly and efficiently. I recently heard someone who learned how to develop
using a WYSIWYG (what you see is what you get) visual web editor as how
to remove a border from an image since the editor put a border on them all as
a default. I told the user to just add border=0 to the image code. I
was floored to find out that the user didn't understand my answer. He didn't
know how to view the underlying code and didn't know what an image tag
looked like. This after saying he'd just graduated from a 6 month course to learn to use the program!
Sure! I'd prefer someone else change my tire if my car gets a flat. But I do
know how to do it so I won't be stranded! If you're the type who prefers not
to be stranded in the world of WYSIWYG web editors, I strongly suggest
you learn basic HTML. And if you plan to become professional at web development,
then you have to learn it. This will be a series of article explaining
how to use some of the basic HTML codes. Along with some other technologies
that go hand-in-hand with HTML, such as Cascading Style Sheets (CSS).
Getting Started
The first thing you need is an HTML editor. And guess what? Notepad is one!
Granted, there are many good editors on the market that allow you to work directly
with the code. They have shortcut buttons and keys for applying codes. This
saves time. And would you believe a few years ago you were hard-pressed to find
an editor that had WYSIWYG capabilities? Now you're hard-pressed to find one
that allows you to easily work directly with the code! If you already have an
HTML editor program that allows you to easily edit HTML code directly, use it.
If not, click Window's Start key. Click Run and type NOTEPAD.EXE
and hit the enter key. If your computer is properly configured, this will bring
up Notepad and you're ready to go. If you don't have an editor, but would prefer
to use one, search the Internet because there are still a lot of shareware editors
that you can use for a limited time while you're learning, before you have to
pay for a license to continue using them. Most have 30-day trials.
A Coding We Will Boldly Go
So let's get started! We'll start with the basics and move into better ways
of doing things along the way. Anyone who has used Word Perfect will have a
head start on learning HTML because you're already familiar with reading <bold>
and </bold> codes. Which in Word Perfect are the opening and closing bold
formatting code. HTML is very similar to how Word Perfect applies formatting.
In HTML, that same start/end coding would be typed as <b> and </b>.
All codes are wrapped inside the less than and greater than
symbols. The closing symbol also includes a forward slash to represent
stopping the particular formatting code.
Open a blank page in Notepad or your chosen editor. Type this sentence:
This is my first HTML lesson.
Now save this page. But don't save it as a default TXT file format...which
is what Notepad will attempt to save the file under. Rather, save the file with
the name LessonOne and manually add the .html extension. So LessonOne.html
will be the full name of this file.
Let's view the file. Open your Windows's Explorer and ferret to the folder
where you saved this file. Once you locate it, double click it. If your computer
is configured properly, your web browser should open and this, your first,
HTML web page. Congratulations!
Although you can close your browser at this point, why bother? Since
we're going to continue editing this file and your browser has already located
it, just leave the browser open. We'll move back to the editor to make more
changes. When it's time to view the revised file, you can switch to the browser
and just click the Refresh button (or hit the F5 key to refresh). This will pull up the newly revised
version of the file so you can quickly see your changes. NOTE: To quickly
switch between open applications in Windows, you can hold down the ALT
key and hit the Tab key to cycle through your open apps. When you see
the one you want...in this case Notepad...release the ALT key and that
application will be brought to the forefront. Use the same moves to bring your
browser back into view.
We'll make modifications to the code, so you should now be viewing your editor.
Add the bold codes to the word first by modifying the code to
look like the sample below:
This is my <b>first</b> HTML lesson.
When you're finished, resave the file, Alt/Tab over to your browser, click
Refresh (or hit F5) and you should now see the new version with the word first in
bold text.
Alt/Tab back to your code. The italic code in HTML is
as simple as the bold code, except you use an "i" rather than
a "b". Add code to make the sentence display in italic, as
per the sample below.
<i>This is my <b>first</b> HTML lesson.</i>
Save the file and view it in your browser. Remember to click the Refresh
button (or you can hit the F5 key to refresh).
The Rules
There is a consortium of company executives who are interested in or have
a stake in the development of the Word Wide Web. Years ago as people were discovering
the web and learning to write web pages, many up and coming companies would
create HTML editors. Some of them provided their own interpretation of
how the rules for writing code should be handled. Thing were getting a little
out of hand because everyone was doing their own thing with code. And since
many new browsers were also being built, the browser developers weren't always
paying attention to what the web page developers were doing and vice versa.
This meant that you couldn't always view all the pages the way they were originally
coded to be seen. Enter the World Wide Web Consortium. They started to set standards
for how code should be written and what browser features would be standards...as
well as how the web should be used and regulated, or not regulated as
the case may be. You can learn everything you want to know about the W3C (as
it's called) by visiting their web site at http://www.w3c.org.
So standards were set and rules were meant to be follow. But then, I was never
much for rules!<g> So I don't always follow them, at least not in my coding
practices. Sure...I get in trouble down the road when the rules are set in stone
and my way of doing it no longer works. So eventually we'll get to the
hard/fast rules about formatting standards and styles. For now, we're just having
fun and learning a little new code. Just wanted to add that disclaimer so the
zealots don't come knocking at my email inbasket with complaints!<smirk>
Back to Our Regularly Schedule Program
Let's get back to our code and add another sentence to our page. Hit the
Enter key twice to leave a space and type the second sentence so the
code looks like this:
<i>This is my <b>first</b> HTML lesson.</i>
And I can't wait to learn more!
Save the file and view it. Humm...doesn't look quite right now, does
it?
There seems to be a little spacing problem! The reason is because HTML doesn't
recognize a hard return in an editor. Yup! You can hit the Enter key till you're
blue in the face and that page is still going to be smashed up like that.
We need to tell the web page that we want the first sentence separated from
the second. To do that, we need to set the first sentence off as a paragraph
by adding a paragraph code. Change the code to look like this:
<p><i>This is my <b>first</b> HTML lesson.</i></p>
And I can't wait to learn more!
Now when you view this revised page, you'll see that it looks more like what
we wanted.
If you didn't want a space between the lines and just wanted the line to start
wrapping after the first sentence to start the second sentence on the next line,
you would remove the <p></p> coding and add <br> at
the end of the first sentence. The break code is one of the few codes
that are a single code. Meaning that you don't start the code with <br>
and end it with </br>. There's just one code to represent a line
break and that's simply <br>. Change the code and see the difference.
<i>This is my <b>first</b> HTML lesson.</i><br>
And I can't wait to learn more!
Headings
You can set heading levels by using one of the Heading codes. The largest
heading is # 1. As the heading numbers get larger, the size goes down. Let's
add the largest heading to our document. Add the code below to your page.
<h1>This is Document Heading one.</h1>
<I>This is my <b>first</b> HTML lesson.</i><br>
And I can't wait to learn more!
In future articles, we'll discuss how and why you'd want to use a style sheet
to set up your formatting. For now, we'll apply the formatting directly. We
used Heading 1 for this top level heading. So if you need to add a subheading
to this document, you'd use Heading 2 or 3 to set a lower level heading. In
the image below, I've added another line using <h3> and </h3>
as the starting and ending codes for my sub heading.
Adding Rules
Another code you can use to add some nice formatting to your page is to add
a rule to your page. A ruled line can be added by using the <hr>
code. This code is one of those that don't have an ending code! Like
the break <br> code, you only add the <hr> code to add a rule. However,
there are some optional properties you can add, such as width to set
the length of the rule or size to change the height. For now, we'll just
use the defaults of the rule, which is the full length of the page. Add a rule
after the page heading by add <hr> on the next line, so your code
now looks like this:
<h1>This is Document Heading one.</h1>
<hr>
<h3>This is my sub heading.</h3>
<I>This is my <b>first</b> HTML lesson.</i><br>
And I can't wait to learn more!
A words of warning about using rules. Remember, too much of a good thing can
be a bad thing! Some folks like to section off too much text on a page with
too many rules and this can make your page look boxed up. A true sign of an
amateur. So use them sparingly.
Creating Lists
Another very useful code are the list codes. There are three types of list,
the ordered, unordered and definition. Here we'll just concentrate on the
ordered and unordered lists and we'll discuss the definition code in a later
article. Unordered lists are simply bullet lists. An ordered list uses numbers
rather than bullets. The list itself does need an opening and closing code
such as <ol> and </ol> for an ordered list (with
numbers) and <ul> and </ul> for the unordered list
(bullets). However, the individual items in the list also need to be coded.
But this code is another one of those open only codes. Although some HTML
editors will add the closing code. The list item code is <li>.
But if your editor adds the closing code of </li> at the end of the
item line, that's fine. Let's add a bullet list to our page. Add the following
code:
<ul>
<li>Bullet lists are unordered
<li>Numbered lists are ordered
</ul>
Notice how I've indented the items so that the opening and closing codes
line up and are more easily recognized. This type of indenting is a common
code writing method for developers. It allows you to more easily see the
matching codes. This helps you match up the code so you'll be less likely
to miss a closing code.
Adding Comments
And while we're discussing common methods of code writing, I'll mention comment
here. It's a good idea to write yourself notes in your code so you won't forget
why you did something. Or to leave yourself reminders of things you need to
add to your code. It's also a good way to leave markers that you can later
search out when you need to easily find locations in your code. Now it may
not seem necessary on our little page here. But if you had pages and pages
filled with lots of formatting code, you can see how leaving yourself notes
throughout your code would be a good idea. Comments are coded so that they
won't show up on your page. You'll be able to see the text in the code page,
but once you view the page, the comments are hidden. However, any visitor
to your page can view these comments if they should click View/Souce
to view your raw HTML code. So don't leave yourself any nasty notes!<g>
To add a comment, you encode it like this:
<!-- don't forget to update the links each month -->
Try adding a comment to your HTML page and you'll see that it won't show
up in the browser.
Linking Pages
The final code we'll discuss in this article is how to link pages together so
you can create a hyperlink that, when clicked, will take you to a different
page. Hyperlinks codes are anchor codes. Create a second sample page
and name this one LessonOneLink.html. Add some sample text on that page.
Now we'll link the two pages so you can click on the link in the first page
to have the second page appear. Add the following code to your first page:
<a href="LessonOneLink.html">Click here to go to page
two.</a>
The link will be underlined. When you click the link, you'll be taken to the
new page.
Practice working with your new coding skills. Next month well discuss inserting
images and building tables to display information. But, if you want to skip
head and learn more on your own, the World Wide Web Consortium has a great learning
site at http://www.w3schools.com/
where you can learn all types of web development, including HTML...FREE!
|
