An Introduction to HTML - Learning the Basics
In this article we are going to learn about how to use any WYSIWYG design software or text editor to create HTML with ease. I'd suggest just download a WYSIWYG application first so that you can practice what you are learning in this article. Most editors are somewhat like using a word processor. You should figure out how to create a new file, save your file, and view your file in a browser. When you can do those things, you can do this also.
OK friends! Fire up your design software and let's get started.
A note to users of WYSIWYG web page editors such as Dreamweaver:
Your editor will create HTML for you, and it will probably automatically create everything I teach how to manually do in this article. So you could skip all the stuff in this article about HTML. I mean, that's why you got a WYSIWYG editor, right?
Well, just imagine me as a 19th century schoolmarm in a tight-fitting black floor length dress sternly advising you that as a Proper Web Designer, it would certainly behoove you to learn HTML even if your editor is already creating it automatically for you.
Why? Three reasons. One, automatically generated HTML can be clunky or downright buggy. Two, it's good to know what exactly your automatic code generator is generating, in case you need to make edits that your editor just can't do (WYSIWYG editors can't do everything, though Dreamweaver comes very close). Three, knowing HTML is essential for efficient debugging.
THE TEMPLATE
Every website is made up of web pages, and each page initially starts out blank, yes?
In your text editor, type the following (and if you're using a WYSIWYG editor, go put another coal in the stove and pound these erasers together outside). Just kidding. Actually, if you're using a WYSIWYG editor, probably all you'll need to type into it is Hello, World. Text editor people type this in:
<html>
<head>
<title>Example One</title>
</head>
<body>
Hello, Jersey City!
</body>
</html>
Once you've typed this into your editor, save it as a file called hello.html
Now view this file in your browser. If you're using software that allows you to automatically view your work in a browser, do it the software's way. Otherwise, open your browser up and select File and then Open or Open Page. In Internet Explorer you'll then click on Browse to locate the hello.html file, and in Netscape you'll click on Choose File to locate the hello.html file.
You should see a mostly blank page in your browser with the words Hello, Jersey City! and the title bar of the browser should say Example One. Congratulations, you've taken your first baby step.
HTML TAGS
HTML codes, or tags, are enclosed by less than ( < ) and greater than
( > ) symbols. This allows the browser to differentiate between HTML codes and your text. For example, notice that in your code Hello, Jersey City! is not enclosed by less than or greater than symbols.
HTML tags come in pairs (this is not an absolute rule, as we'll see later, but it holds true 90% of the time). For example, the first tag is <html> and the last tag is </html>. There are two <head> tags, two <title> tags and two <body> tags. Notice that the second of the pair of tags always has a slash ( / ) after the less than symbol ( < ). This slash tells the browser that the tag is "finished".
A basic web page always begins with <html> and always ends with </html>. Within these <html> tags there are always two sections--the first is the <head> section and the second is the <body> section.
View the source on this tutorial page by right-clicking within the browser and selecting "View Source". Look at the HTML for this page. Notice that although there's a lot more code in there than in the Hello example above, it still begins with <html>, ends with </html> and has <head> and <body> sections within.
SAVE THE TEMPLATE FOR FUTURE PAGES:
You may want to save this hello.html document as a blank template for all your future webpages. In the future, just change the text within the <title> tags to the title of your new webpage, and then change Hello, Jersey City! to the content of your webpage. If all you wanted to do was create a webpage that said hi to Jersey City, stop reading. You are done.
0 Response to "An Introduction to HTML - Learning the Basics"
Post a Comment