Do You Need To Learn The Basics Of HTML And CSS?
What Makes A Good Programmer's HTML, CSS, PHP, SQL, JavaScript Editor
In the advent of FREE Blog and FREE Website Builder Software coming with your web hosting package you might think "All I need to do is click on the appropriate INSTALL button and that's that". And to some degree it is that simple. However, as you will find out, when it comes to tweaking the appearance of your blog or website and/or wanting a Contact Us form, Google Map or Slideshow inserting you have two choices. 1) Pay a website designer to do the work or 2) Do the work yourself.
The first option is easy. Just get your wallet out. The second option, which appears to be the cheapest, may initially cost you more money and time but should be cheaper in the long run; if you need a lot of initial tweaking and/or features adding. I say initially because if you just need a one-off job doing to your blog or website then it pays to hire a website designer. However, if you intend to have on-going work done on your blog or website it often pays to learn the basics of HTML and CSS - This does not mean you have to be a programmer though.
The D.I.Y Approach - Get A Good Programmer's Editor
WHAT'S A PROGAMMER'S EDITOR? - A PROGRAMMER's Editor is basically a glorified text editor that's been purposely designed/programmed with features to suit
a html, css, php, sql, javascript, etc programmer's needs. Meaning, it’s a tool for people who like to hand-code their website projects and for people who just
want to edit/insert pieces of code inside a html or css file for example. Hence why I say you don't necessarily need to be a, "proper", programmer.
One key feature of any programmer's editor has to be its ability to correctly identify the language used in the opened text file (i.e. html or css file) and to colour code
the commands, instructions, statements and functions of that language. In other words, it has to correctly identify your opened file as containing html, css and/or
javascript code for example and then assign a different colour to each command set, function set and so on; so that you as a website programmer can easily identify
matching pieces of code such as where a pair of division tags - <DIV> and </DIV> - begin and end. Or where a piece of visual/display text has been bolded
for the visitor with the <b> and </b> tags.
A follow on feature of this would be the ability to indent code/tags so that nested code (tags within tags) can easily be identified. Another key feature would have
to be the ability to open more than one file, side-by-side as Tabbed Windows, so you can quickly view your css code (file) and then your html code (file) for example.
This kind of feature just makes coding easier.
Other features would be a Spell Checker with support for many other languages, FTP Support (Direct file transfer to your webspace), Website Preview (using a web
browser), Command (Syntax/Text) Correction and Line Numbers but to name a few. It would also be nice if it was free.
Luckily there is at least one PROGRAMMER's Editor out there that does have the above features and specifications, and that is
PSPad. It’s the text editor I use all the time when programming my own websites
and others websites. And I know it’s a very popular tool amongst professional (high-end) website programmers too, and not just because it’s free – It’s because
it’s classed as a well thought out, well designed, website developer’s tool as opposed to being a beginners WYSIWYG (What You See Is What You Get) Editor/Tool.
Fig 1.0 PSPad allows you to click on an Open TAG so you can identify where its Closing TAG is located
WHAT IS A WYSIWYG EDITOR? - A WYSIWYG Editor is similar to a PROGRAMMER's Editor but is more graphical. You click on buttons to insert objects for example.
So if you wanted to insert a website link (HyperLink) you would click on a button marked INSERT HYPERLINK for example whereas with a programmer's editor you would
have to type in the raw hyperlink code (command) yourself.
At the end of the day the wysiwyg editor would produce roughly the same hyperlink code (command) but
with a programmer's editor, and basic knowledge of html and jquery for example, you could add more attributes and javascript code to the hyperlink and utilise the
html code to its full potential. Something that a common wysiwyg editor may fail to do.
A wysiwyg editor also normally combines itself with a built-in web browser whereby you can instantly view changes you have made for your website (or blog) from
within that built-in web browser. With a programmer's editor you need to view changes separately using one of your installed web browsers (i.e. Internet Explorer
or Google Chrome). The advantage of this is that you can preview your changes in any web browser you like, as long as you have it installed of course.
Do You Need A PROGRAMMER'S Editor Or WYSIWYG Editor?
WYSIWYG Editors and Website Builder Softwares have their place, mainly for the beginner who knows no programming and only wants to build a Drag N Drop website, but
there will come a point when you need to delve into the html code for example using a programmer's editor. This is because these days many features of a website
(i.e. shopping cart buttons, application forms, maps and search facilities) rely on JQuery code and/or JavaScript code being present in your html files. Code that
needs manually inserting by someone who understands the basics of programming.
WYSIWYG Editors are not meant for in-depth programming, hence why they can allow you to INSERT or COPY & PASTE code but cannot generate complex/in-depth code
or resolve the problems that arise from complex/in-depth code. It's not viable for them to be debuggers (code fixers). When you learn something like html for the
first time you will make mistakes, such as placing code the wrong way around and/or mis-spelling code, whereby a wysiwyg editor will be of no use because the
problems will need fixing by a human programmer.
Saying the above; You don't have to be a programmer per say. With many JQuery and JavaScript codes being snippets of code, as opposed to reams of complex/in-depth
code, that you COPY & PASTE into your html files it means these days you will be more of a COPY & PASTEr than a programmer. And this is becoming more and
more true with many code developers giving clear, step-by-step, COPY & PASTE instructions on their own websites. Obviously it helps if you understand what the
code is doing and does, in order to manipulate/tweak it later, but it’s not a must.
So in answer to the above question. You should use a programmer's editor if you want to programme or edit your own website (or blog) and insert slightly more complex pieces of jquery code for example, but equally if you just want to perform simple html coding there is nothing wrong with using a wysiwyg editor. Many programmers start off with a wysiwyg editor and then progress onto a programmer's editor. Either editor will be better than the editors found in the website builder softwares and blog softwares, hence why many people need help with them.....because they're not really designed for code manipulation.
EDITORS FOR WINDOWS, MAC AND LINUX
Here are the editors I use for the relevant operating systems.
PSPad for Windows - Read the above comments about this excellent, free, programmer's
editor.
SciTE for Linux - SciTE Editor is a great, free, text editor for
the Linux operating system per say, but it's equally great for editing website files such as HTML, CSS, PHP and JavaScript files.
Hyper Edit for Apple MAC - Hyper Edit is a WYSIWYG Editor, as
opposed to a PROGRAMMER'S Editor, that allows you to detach its actual Website Preview window so that you can work with its full screen text editor. Hyper
Edit 1.6 works with the Tiger 10.4 operating system. Price: £17.
There are plenty of other editors out there but the above are what a "proper" website programmer would use. In other words, they are better suited for a coder
and not for those wanting drag n drop cosmetics.
OTHER REASONS FOR TAKING THE D.I.Y APPROACH
Immediate Action Required - Imagine you just want one hyperlink adding to your web page but have to wait two weeks for your hired website programmer to come back from their holidays (or finish a more important cient's work!); It would be good if you could do that job yourself, straight away. And you could - a simple hyperlink, like the one below, can be created and inserted within seconds.....
<a href="http://www.websitecreationhelp.com/">Website Creation Help</a>
.....so why waste money paying someone for 10 seconds of work? Inserting a hyprlink into a html file is as simple as COPYing & PASTEing it or typing it in.
Fig 1.1 You can easily PASTE or hand type a hyperlink into your web page (html file) with PSPad
Fig 1.2 This is what the hyperlink looks like when Internet Explorer displays the web page (html file)
By learning the basics of HTML you would soon gather where hyperlinks can be placed inside a html file.
Save Time And Money - By learning website design for free via internet/youtube tutorials and library books for example, at your own pace, you could limit
or even avoid the costs of paying a website designer every time you needed something big or small doing to your website or blog. Not only that, you could be more
creative with your website or blog because you would have the knowledge to improve it. Meaning, your website designer might be great but are they really in tune
with the design and features you really want in your website? Or did they just see your website as "Another Job?".
Here are some free tutorial websites:
W3Schools HTML Tutorials - These are the internet standards for
creating html code. They have excellent step-by-step tutorials with examples. Here are their
CSS,
PHP and
JavaScript Tutorials.
About Us - HTML Tutorials - About
Us is a very well established source of information and tutorials.
Better Code - Learning the basics of html, css and even javascript for example means you will be in a better position to identify and implement JQuery code,
Contact Us Form code, Slideshow code, Google code and code from other people's websites. Identifying the structure of some code is the key to using it and modifying
it for your own purposes. Creating a custom contact us form for example is the difference between a standard looking form and a professional looking form.
Better Understanding - Even though you may not be able to programme every aspect of your website or blog to start off with, at least you would be in a better
position to tell your website designer what you require.....because you would be able to talk some of the lingo.
Conclusion
Although there are plenty of good website builder softwares out there, getting better and easier each year, computers will always be computers and websites will
always be websites. Meaning, there will always be a need to hand-programme certain parts of them.
The whole nature of programming means that there will never be a user interface that can accommodate the thousands of code sequences/combinations - It would need
to have so many buttons, dropdown menus and options on it that you would always be clicking in order to produce html code for example.