There are many powerful WYSIWYG (What You See Is What You Get) web design applications available, like Adobe (formerly Macromedia) Dreamweaver or Microsoft Expression (successor to Frontpage). The problem with these applications is that you really do Get What You See (not what you want). Is "WYSIWYG" a disclaimer? And when you can't make your fancy WYSIWYG application do what you want, you have to break into the code that it generated and fix it yourself.
Unfortunately, these applications generate voluminous amounts of code, most of it doesn’t do anything (except cause problems) and is unnecessary. Not only do they generate a lot of extra unnecessary code, but they don't format the code in human readable form. In the fact, the main reason you're reading this eBook might be to learn how to break into the code created by your fancy WYSIWYG application and make it do what you want.
For the examples in this eBook, you're going to use a text editor, and not your big fancy WYSIWYG word processor application, just a basic ASCII text editor. You see, similar to how HTML adds formatting tags, word processor applications add their own formatting tags (usually RTF or XML tags). These tags will cause your HTML examples to not work. An example of the type of text editor you should use is Windows Notepad.
You'll find Windows Notepad in the Start menu Accessories group. make sure you choose Notepad, not WordPad. In fact, you may want to drag a Notepad shortcut to your desktop for the purpose of doing the exercises in this eBook. Now open Notepad and type in some text, any text. Next save the file with any name, except it must have the .htm file extension . Congratulations, you have just created your first webpage.
Too easy? You don't believe me? Just double-click on the file name and it will open in your default web browser and display the text you typed. (Assuming that you have your file associations configured correctly). If you don't have your file associations configured correctly you'll need to drag and drop your file on your web browser's desktop shortcut, or use the File | Open menu in your web browser.
You see, a web browser is not too picky, but technically a web page has a few more parts. Actually a webpage has two main parts, a HEAD section and a BODY section. Lets create another example, except this time type in the HTML tags as shown below.
<html> <head> </head> <body> your text </body> </html>
Not that the webpage document is enclosed between an opening <html> tag and closing </html> tag, and that the head section is enclosed between an opening <head> tag and closing </head> tag, and that the body section (containing your text) is enclosed between an opening <body> tag and closing </body> tag.
When you double click on the file name to open it in your web browser, you will not see the additional html tags. Remember html tags control the layout, they are not visible in the browser themselves.
You placed your text within the body section. The head section is for code that must be read by the browser before the body section is displayed. You might place CSS code and⁄or JavaScript code within the head section. Since this eBook is about Just HTML, you won't be putting any CSS or JavaScript in the head section.
But there is one thing you might want to put in the head section, and that's a title for the webpage. The webpage title goes within title opening and closing tags which are nested within the head opening and closing tags as shown below.
<html> <head> <title>Your Title</title> </head> <body> your text </body> </html>
When you double-click on the file name to open it in your web browser, you'll see your title text in the web browser's title bar.
This is how we'll do every example in this eBook. So you might want to create a folder on your desktop to hold all your example files. For each example, you'll open Notepad, type in the example html code, save the file with the .htm file extension, and then double-click on the file name to open it in your web browser.
When you've completed the examples in this eBook, you may wonder why the heck you ever used a fancy WYSIWYG web design application in the first place, when creating even complex page designs is so easy to do by just typing in Notepad. One thing is for sure, next time you have to break into that WYSIWYG application generated code, it will no longer be a blur. You'll have a better understanding of what you're looking at, and some possibility of making a fix.
More HTML Code:
• HTML Editors
• HTML Table Basics
• HTML5 Input Type - URL
• HTML abbr and acronym Tag
• Make an HTML Element Editable
• Web Page Template
• HTML Blockquote Basics
• Set Form Controls Tab Order With tabindex Attribute
• Code For a Basic 2-Column Fluid Webpage Layout
• What is HTML?