Creating your first Webpage
Part 1: HTML
People who are new to building and publishing a website invariably ask me "Where do I start?". I'm always sympathetic to the question because a new user has a number of different concepts that they need to be able to understand before they can successfully publish a site. This month I will provide a basic overview of some of the jargon and processes. Part 2 (August Newsletter) will discuss some of the web authoring tools that are currently available for users.
The first piece of advice I'll give is:
Don't be daunted by the process. Once you have done it once or twice it all makes sense!
Let's start at the beginning
A web page is actually a very simple thing. If you can construct a document in say Microsoft Word, then constructing a good quality webpage is definitely not out of your technical reach. The process we need to follow and I'll try to not jump around too much is:
- Create a page in an authoring tool
- Transfer the page you've created to a server
- Test the result and perform any maintenance required
HTML Explained
The first thing we need to do is create a webpage. A webpage is created in a programming language called HTML, this is an acronym for Hyper Text Mark-up Language. Sounds complex, however not only is it relatively basic but most authoring tools available today don't actually require you to understand HTML at all, it all happens behind the scenes. Having said that understanding the basic principles of HTML can make your life much easier!
HTML is a 'client' side language. What that means is that a .html file (in other words, a webpage) is simply a plain text file. When accessed by a web browser, the browser interprets the file and the page is displayed according to the way it's interpreted. This explains why sometimes a page might look different in Internet Explorer than it does in Firefox or Safari. A HTML page comprises of the content you are publishing as well as a set of commands that the web browser uses to format the page's display. A simple example of this is shown below:
If this file were to be interpreted by a web browser, it would simply display "Hello World" on the screen. The first 'tags' html and body tell the browser firstly that the page is html and then where the content on the page begins. Remember, in all HTML you need to close each tag that you have opened. So html has a corresponding close tag /html.
In the above example if we wanted the "Hello World" to be displayed in bold we'd simply place some 'bold' tags around the word and the line would become:
The strong and /strong tag tells the browser to display in bold anything between the two tags.
So that's the basic part of HTML. The nice thing about using a web authoring tool is that you don't need to add those b and /b tags in, you simply highlight the text you want to bold, click the 'bold' button and the program will write the actual code in the background. At the same time displaying your text in bold on the screen.
You may have heard of a WYSIWYG editor. This is an acronym for What You See Is What You Get. It's a complex looking bit of jargon that simply means, how your webpage looks on the screen (during creation) is what it is going to look like when you publish it.
So what are these WYSIWYG editors or web authoring tools?
Broadly there are 2 different types available for customers. The first are the programs that just like Microsoft Word which are installed on your computer. The second are installed on the server that you access via a web page.
1) Self installed programs
a) Frontpage
Frontpage is a Microsoft program that is popular with many people due to the familiar look and feel of the user interface, which is very similar to the Office suite of programs.
The upside to Frontpage is the user interface and the comparative lower cost to either Dreamweaver or GoLive!. The downsides are more numerous. The primary is that Microsoft has ceased support for the product, with a new tool in production. Frontpage uses a number of non-standard methods to attempt to make the user experience as simple as possible. Rather than creating actions for a web page in code, it relies on 'Frontpage server extensions' being available on the server. These extensions are notoriously fragile and if they corrupt, a functional component of your site may simply cease to function until the extensions are re-installed by your hosting provider.
If you are a more experienced web programmer and are looking for a solution that lets you manage server side scripting or databases, then Frontpage will not fulfil your requirements and it's not the tool for you.
As a general rule NetRegistry actively encourages clients to (if at all possible) NOT use Frontpage.
b) Dreamweaver
Dreamweaver has been around the longest of the web authoring tools. Once a user has spent a few hours on it, the interface is quite intuitive. It is the choice of the majority of professionals. The downside is that it's twice the price of Frontpage. However, it has the capacity for managing complex code and is something that a user won't grow out of.
It doesn't use any non-standard technologies and accordingly requires no special installations on the web server. Dreamweaver is owned by Adobe and is well supported both by the company and a large number of online user forums.
As a general rule NetRegistry actively encourages client to use this tool (as opposed to Frontpage)!
c) Adobe GoLive!
This is another Adobe product and was their tool of choice before the purchase of Dreamweaver. The biggest question in the development community is now that Adobe own Dreamweaver, what does the future hold for GoLive.
As a tool, it's very professional and in many respects on par with Dreamweaver. It also offers seamless integration between other products in the Adobe suite. The downside is that much like Dreamweaver, it's a professional development tool and there is a premium price to be had with it.
d) Nvu
Nvu is a free open source tool that hits the spot for either new or beginner users or people who want to very quickly put something simple together in a WYSIWYG editor.
http://www.nvu.com/index.php
I personally use this tool from time to time, if I just need something quick and simple. It doesn't have the same depth as either Dreamweaver or GoLive, but did I mention it's free?
It's definitely worth a look and I usually recommend it to users who are graduating from an online website builder or having issues with Frontpage. As an added bonus it's cross platform and you can install it on Linux, Mac and Windows platforms.
2) Server installed programs
a) 'Website builder'
This is often a great way to get started. NetRegistry offers an 'Instant Website' product, which is a server-installed program that you access via a webpage. Once you are logged in, creating a website is only a few clicks away.
Like many technology solutions, what you gain in simplicity, you lose in flexibility. We often see clients who've created a nice starter site that they are in the process of building on. They invariably get to a point where they want to do something that is outside of the framework that is available in the site builder.
All in all it's a great starter tool (and it's included with all NetRegistry hosting packages), but depending on what your future needs are you may hit a ceiling where you end up needing to redo your site in an authoring tool.
b) Content management systems (CMS)
This is like a site builder that is user installed within the hosting space for a single domain. So in theory you install the software on the server, and then configure it. Once done it sets the framework and architecture for your site.
Common examples of software than NetRegistry clients use are Joomla, Mambo and Drupal. As a word to the wise, if you are a beginner, then these are not the right tools for you today. Typically we find that a developer might install one of these, create a great looking and functional site for a client. However, the client is then left with administration of the content going forward which is done via a secure login to a web page. One of the great things about CMS systems is that you can have different people responsible for the content on different sections of the website.
The examples I've listed here are all free, though there are non-free enterprise versions available depending on exactly what your requirements are.
So there you have it, the world of web site creation and publishing. A few last minute items.
Frequently Asked Questions
Q: How do I transfer my files from my computer to the server?
Once you've created a page or pages, you need to publish them to the server where they are viewable by the rest of the world. Of the four tools that I listed in the user installed programs section, all have a publishing function. You enter the address of the server, your username and password and make a connection. Once connected, you can publish new pages, or simply update the site for pages you've modified. You can also delete old pages. It's a very simple matter.
If you have pages you want to upload but don't have a web authoring program, then a simple FTP (File Transfer Protocol) program will do the job. Some are free others not however they all do the same basic job. Filezilla is a great free tool that I recommend to many clients.
Q: I've created my page and loaded it onto the server but all I see is the NetRegistry under construction page!
We see this one very regularly in the support team. A webserver needs to have a default file that it displays when someone visits the site. This is typically called 'index.html'. As an example if you have a site called www.abc.com.au and visit it with a web browser, it needs to show a file. By default this will be index.html. Very often clients leave the NetRegistry under construction page (index.html) on the server and publish their main page with a different name like mypage.html. The server doesn't know this is the page you actually want shown by default and simply continues to show the construction page. The fix is to delete the NetRegistry construction page and change the name of your file from mypage.html to index.html and like magic you'll be able to see your site.