Html coding and WYSIWYG editors

Have a WYSIWYG editor which means you can paste and click your way to a web page ? Thats great, but do you know code ? I'm sure your asking ... I have a WYSIWYG editor, What do I need to know code for ?

Two reasons, one the editor is limited and two what happens if it makes a mistake ?


So how to figure out when it messed up and where. There are many good tools that will help you do this but often you can find it yourself . Just so you know I use a WYSIWYG myself so not downgrading them here, but they do have limitations. All these codes are disabled or they will not show here.

What is a web page ? It is a text document that tells a computer browser what to do and how.

It looks like this:

!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

This tells it what kind of web format , there are many different kinds, if this is incorrect it will not display right, as the formats wrong. Check me first is what it tells it. This is one of the most common for text display pages. There are many others.

<html>
Where the hyper text mark up language, starts, the directions to the browsers display. If this is missing, it can't even get started.

<head>
Meaning me first.
This is where the metas live, see my page on meta tags, no head means no place to begin. Search engines get real froggy if this one is empty.
</head> means the head stops here.

body text = #000000, bgcolor = #ffffff, link =#222222 vlink =#333333, alink =#444444.
Here are the colors, internal links, external links and basic text colors for the entire page.

Links or text are not showing up in the right colors ? Look here.

<center>
Just like it says ... center on the page for whatever it is in between the start and
</center> ..... = Stop centering.

Something not centered that should be, check this. There are a dozen or more ways to center anything on a web page, this is just the oldest and simplest.

img= SRC drgntonguebarred.gif height =5 width= 6
A call for an image , its file name , type and sizing to be displayed. Image not showing up or the size is all wrong, check here.

<b> font face = Papyrus font color = #000000, font size =5 </b> stop doing bold.
Words, in bold, what font , what color, in this case white, sizing' then the word. Seems like a lot :) ? And it is, but the directions have to be very literal. You are talking to a computer, they only can do what they are told, in exacts. Font or color not what you expected, ? Check the coding for it

table border =0, cols =3, width =6 bgcolor =#000000
<tr>
<td > whatever goes in the cell </td>
</tr>

Same thing happening here, for a table. What size, what colors for the background, how wide, where to start and when to stop. Between the td /.......td is where you would put what you want inside the table. Any part of this missing can make major havoc. In a multi cell table, hint, if you must have an empty cell, put something in it ,like a transparent tiny .gif or line of .......... the same color as your background, to force it to stay open. Table doing really weird things ? Check this.

<a href = http:where img src"whatever", alt ="whatver"
border =0 , height e=6, width=7.

Here it is again in a link, a href, which just tells it that its a link and go out on the web and fetch. .If the link is an image, which one , what size, and the alt statement, for people who surf with images off, for speed or are persons with visual impairments.

The border what it says, you want a band of color or empty space around the button? How much etc. etc., then /.......stop doing that. Links not working, check the http reference. Spacing not right, border not right ? You get the idea here.

<br> or < li>
If things are jammed together you did not intent to be, you need to separate them these are one way how it just means a line, just like a carriage return on a typewriter. Or use another transparent gif to force them apart.

To sum up:

< means start here ... doing whatever you tell it to do
/> means stop doing it
= just like it seems, equals whatever size, font color or call to action.
# means number, as in font colors called hex numbers , each possible color as its own number, for example Number sign and 000000 would equal black, Number sign and ffffff equals white and all the variations in-between that are possible grades and mixes of color, just like the color wheels you had in grade school. The quote marks define out what the directions are, as in, equals I want you to do this, with whatever is in the quote marks.

This is it, other than scripts, which are just a short cut way of telling it to do something with out a long drawn out explanation in html, which is why they are so popular, they have gone beyond basic html, but they still must work within its parameters, because its on Html's playground. Scripts have there own requirements which I will go into details later.

Other languages like php, cgi, perl, java etc. all have to be able to play by the browsers rules. But they are much the same, they are a language.

Now you don't have to learn every nitpicky little bit of this to build with an editor, but if there are problems and you don't know what its "supposed" to do then you can't fix it. So boning up on the basic language that you are using makes sense. Editors are great, but they can only take the task so far and can't help a bit when it goes wonky on you.

Happy coding
Esta


Return to how to design a website

or

Home