Getting Started – a new web site

 

It took me just over a week to create my web site. While it is now live, it is still a work in progress. I am still working on the blog section. Even though it is not finished, I wanted to share my journey to this point with those who might have an interest.

 

I have been a Visual Basic programmer for 20 years. That experience wasn’t as helpful as you might think in creating my web site. When I began using HTML, I was a beginner again. This series of blog articles is intended for those who might want to try and create their own web site but might have been hesitant.

 

Things you must do.

Have your own domain and hosting service.

Type only in lower case. Avoid capitals letters at all costs. Yes, there are places where you can use/mix upper and lower case but don’t do it until you have a lot more experience.

 

Tools I used.

Some of these tools you probably already have. Others may be new to you (I am a Windows user and I don’t know the Mac equivalents)

 

ProShow Gold – To produce the slide show and create the code for the web site.

PSG produces a Flash slide show. Alternately, you could create a slide show of your images. I looked at ShowIt but since I already owned PSG, I just used it.

 

NoteTab Pro – This is just a text editor. There is a free version. The free version is equivalent to Notepad which can be found under Start>Programs>Accessories. The Pro version adds HTML and CSS support. It’s color coding of the code makes it a little easier to find your mistakes. With any version of NoteTab I suggest you go to View>Options>Documents and uncheck Word wrap. And View>Options>General and uncheck Reload open documents. Notetab is not the only HTML editor and the best editor will be a matter of personal choice.

 

Core FTP lite – You have to get your files from your computer up onto your web site. This process is called FTP. Core FTP lite is free and works great.

 

Windows Explorer is also a fine FTP client. Internet Explorer is not. Windows Explorer can be found at Start>Programs>Accessories or a keyboard shortcut of Windows key + E ( the Windows key is located between the Ctl and the Alt key on the bottom left of your keyboard. It looks like the Windows flag.)

 

InkScape – This is a free program similar to Illustrator. It is a Vector graphics editing program. I used this to generate all the variations of my logo. Lots of YouTube tutorials. Vector graphics make it possible to resize images without the jagged lines you get in a raster program like Photoshop.

 

CS3 – enough said.

 

Design

 

Stop and think about what you want to create. Sketch each page on paper. I wanted an auto starting slideshow with my logo on the main page. I knew I wanted a menu at the top of every page. I wanted to have a Contact form. And there would be some other pages, About, Packages/Pricing and a blog.

 

Creation

Search the web for the “Hello World” program. It is just five line of text. Follow the directions and save it to your hard drive to a known location, i.e. c:\website\hello.html (lower case!!).

 

For a more in depth tutorial see, http://www.pagetutor.com/html_tutor/lesson01.html.

I found it very helpful. Some of the advanced stuff is pay to view. But I found the free stuff very helpful.

 

While this is a far cry from your final web site, now is a good time to practice uploading files to your web site. Open your FTP program (Core FTP Lite unless otherwise noted). You will need to know the administrator user name and password for your site. Be sure to uncheck anonymous. The port is 21.

If your login is successful, you will probably see some directories on your web site and directories on your home computer. If you see a folder on your web site such as public_html, double click on it. Your web files should go inside that directory.

To do the same FTP function with Windows Explorer, open two copies of Windows Explorer. Browse in one copy to the directory where the website files are located on your computer, e.g. c:\website. In the other copy type ftp://yourdomainname.com. You will be prompted for your user name and password for your domain. Remember this is not your computer logon user name and pasword. It is the administrator user name and password which is associated with your domain. You can drag and drop files from the local Windows Explorer to the FTP copy of Windows Explorer.

Most host sites have a limited number of home page names such as home.html, index.html. So before uploading your hello.html file be sure to rename it to home.html. If you don’t rename it you will have to specify the file name in the web address. That’s a pain with a long web address like mine. It is easier just to rename the file before uploading.

http://www.patrickdillonphotography.com/blog/helloworld.html

vs.

http://www.patrickdillonphotography.com/blog

 

Once the file is uploaded, open your browser and enter your web address and it should display, “Hello World”. If not stop here retrace your steps and determine what was done incorrectly.

Next time we will create the main page, menu, logo, slideshow and footer. Stay tuned!!


Leave a Reply