Basic Navigational Html/css Website From Template: Download To Upload, A Step-by-Step Tutorial For The Novice

[zpcs]

BASIC PREPARATION AND UPLOADING OF A HTML/CSS WEBSITE FROM A TEMPLATE TO AN ZYMIC FREE AD-FREE HOSTED ACCOUNT
(An Illustrated Tutorial utilizing Notepad++ v5.6.4 And FileZilla v3.3.1)
This tutorial will cover only the basic's to provide a navagational web with only minor changes in the actual HTML Source Code, any additional HTML/CSS Source Coding will be the upon the individual(s) desiring a personalized contented Web.

This tutorial is not meant to diminish (whole or in part) a previously created FTP Tutorial in the Zymic Webmaster Forum Tutorials Section by Jack, as a matter of deemed neccessity the following is included:
Since August 2009, all zxq, zzl, 99k, zymichost and clanteam ftp users have changed in format, the required username follows these examples:
If your site is:
mysite.zxq.net; your ftp user is mysite_zxq (e.g.: zpcs.zxq.net; your ftp user is zpcs_zxq)
mysite.zzl.org; your ftp user is mysite_zzl (e.g.: zpcs.zzl.org; your ftp user is zpcs_zzl)
mysite.99k.org; your ftp user is mysite_99k (e.g.: zpcs.99k.org; your ftp user is zpcs_99k)
mysite.zymichost.com; your ftp user is mysite_zymichost (e.g.: zpcs.zymichost.com; your ftp user is zpcs_zymichost)
mysite.clanteam.com; your ftp user is mysite_clanteam (e.g.: zpcs.clanteam.com; your ftp user is zpcs_clanteam)
Unaffected Zymic Hosted Accounts are:
mysite.uuuq.com; your ftp user is username (e.g.: zpcs.uuuq.com; your ftp user is zpcs)
mysite.vndv.com; your ftp user is username (e.g.: zpcs.vndv.com; your ftp user is zpcs)

Quick Link to Zymics' Nameservers And Server IP Addresses & A Record current information provided by Ed

Downloading A Zymic Free Template

1) Let's say, the Zymic Web Hosted Account is: zpcs.zymichost.com and a template is going to be used. So ... off to Zymic Free Templates.
2) This tutorials' demonstrational choice is Zymic Free Template #72.
3) Download to the WINDOWS Desktop, "121.zip".
4) Extract to the WINDOWS Desktop the folder named "121".
It is deemed mentionable by this author that in the 121 Folder (and more than most likely - All Zymic Provided Templates Available), there is a folder named "Read Me, Instructions, License, etc" - the "Downloader" and/or "End User" of this #72 Zymic Template (and more than most likely - All Zymic Provided Templates Available) is strongly urged to have read in full, having knowledge and understanding of all therein, and urged to comply with all such therein.
This 121 Folder contains a necessary HTML file; "index.html" (Home page), an HTML complimentary CSS file named "css.css" (a Cascading Style Sheet) along with an "images" folder (to contain images that comprise, and are viewable on, the page) for the template to perform as designed once uploaded to the Web Hosted Account (these mentionables are the foundational base of the Zymic Free Template #72 Webpage, notice they are all in lowercase characters).
The entire contents of the 121 Folder are shown below:



Basic Manipulation Of An HTML/CSS Website From A Zymic Free Template

=>Fabrication Of A Templated WebSite
The Website that will be FTP Uploaded (later) here in this tutorial will be comprised of six (6), maybe seven (7), HTML/CSS pages derived from the "index.html" file above. The choice of the six (6), maybe seven (7), page HTML Web was chosen as the "index.html" file when viewed (simply "Left-mouse Doubleclick" the "index.html" file in the 121 Folder and it should open in the default Internet Browser) provided the answer, let me explain.
First, viewing the vertical navigation section of the "index.html" in the Internet Browser (shown below, shaded and highlighted) has provided seven (7) destinations: Home, About, Downloads, Cool Stuff, Pictures, Free Templates and Contact Me.
Secondly, the horizontal navigation bar in the shaded area above the highlighted vertical navigation section, provides only six (6) destinations - one could reasonably deduce: only six (6) Site Webpages might possibly be needed as the "Free Templates" in the vertical navigation section could be destinated to an External Webpage other than the immediate Website that is to be created from the template.
Should a seventh HTML page (for the "Free Templates") be needed later in this tutorial it made be created in the same manner as given above.



5) Open, if not already, the 121 Folder on the WINDOWS Desktop and "Copy" (a "[Ctrl] + [C]" keystroke) the "index.html" file and then "Paste" (a "[Ctrl] + [V]" keystroke) five (5) copies of the "index.html" file into the folder and "Rename", using lowercase characters one of the copies to be "about.html" and then "Rename" another remaining copy to be "downloads.html" and so on and so on until the following are used - "coolstuff.html", "pictures.html" and "contactme.html"; do not use the quotation marks in the names.
The 121 Folder should now look similar to the one below:



=> =>Editing Intro
Every HTML/CSS Webpage has a Source Code. The actual "HTML Source Code" (and CSS for that matter) is not edit-dependant upon whether produced by a Web Design application/program or by an individual that writes in HTML/CSS Code - as it is "text" based.
A "Source Code" generated by a Web Design Application/Program is far weighter in the file size of the HTML/CSS page that is produced and also is generally a poorer quality product in other important terms, like cross-browser compatability, maintainability, etc. when compared to the Individual Writing in Valid Code to create the same result.
The Web Account Host in general practice places a limitation to the amount of web space available to the Web Account Holder and you can pack more into a Hosted Web Account if the files are smaller - physics, you can't beat it with a stick ... so ... It is "What You See Is What You Get (WYSIWYG) Web Designer Applications/Programs" (big file size, chancing compatability) versus "Valid Coding of the necessities by a Code Writer" (small file size, compatabilty), enough of this - I felt the tangent coming and that's not what this tutorial is for.
The "HTML Source Code" as mentioned before is "text" based which means you could edit it in any text editing program - but it needs to be saved in an HTML file type format, hence the "html" extension after the "dot" (.) after the "filename" (e.g.: index.html).
A pretty much foolproof editing program is needed for the beginner (although you could use WINDOWS Notepad, WINDOWS Wordpad, MSWord or anything akin to those applications/programs).
In this tutorial the utilized "Text Editor" will be the Notepad++ Application/Program, as it will respect the filename extension and when it comes time to save the editing it will respect the "html" filename extension without you thinking about it (unlike other editors, including WINDOWS Notepad which will default to the application/program extension not the files original extension). An added benefit of Notepad++ is the color coding (OOOHHH, a nice feature and it looks better than black on white. The color coding will aid the user in locating various parts of the coding for editing purposes saving time and possible mistakes).

=> => =>Download Notepad++
6) At the Notepad++ website one can download for the WINDOWS Platform: Notepad Plus v 6.2.2, (File size:5.61MB). At the composing time of this tutorial, the current version was 5.6.4. (*note: 18NOV12: a new version has been released: 6.2.2)

=> => => =>Familiarization
7) Once downloaded: install and open Notepad ++ (don't be intimidated by the complexity of the look of the launched Notepad++ Application/Program). It basically appears as below:



The basic operations of Notepad++ are the "Open..." (OPEN FILE), "Save" (SAVE FILE). These operations can be accessed from the Icon Menu as shown below:



=> => => => =>Editing the HTML Source Code
8) Open, if not already, the Notepad++ Application/Program and then "Open..." the "index.html", "about.html", "downloads.html", "coolstuff.html", "pictures.html" and "contactme.html" files from the 121 Folder (notice how each file creates a "Tab" atop the "Editing Display Window" and additionally how each line of the HTML Text file is numbered - whoa! pretty cool huh? ... and remember the color coding mentioned before!).

Take a few minutes and look over the pages. If needed, use the scroll bar on the right and on the bottom of the "Editing Display Window".
All of the HTML files you've just opened are indentical, except for the filenames (as all the HTML files were created from the "index.html" file provided by Zymic Free Templates).

Any of the text appearing in the "Black" color code throughout this HTML template appears as the "Webpage Text Content" of the viewed "*.html" ("*.html" is synonymous of any of the six (6) HTML pages) page in an Internet Browser. In this Zymic Free Template #72 any of the text appearing in the "Black" color code throughout this HTML template may/can be re-written/edited by the user for published viewing, EXCEPT LINE 183 - ***WARNING *** THIS LINE CONTAINS THE ZYMIC COPYRIGHT - If Editing Or Removal Of This Line Without Express ZYMIC Authorization Occurs a Copyright Infringement Has Occurred - Please Refer To The Documentation Provided In The Folder Named "Read Me, Instructions, License, etc" In The Extracted 121 Folder Previously Mentioned (Other Zymic Free Templates may or may not have the Zymic Copyright on line 183, it is the responsibility of the individual(s) who edit such other templates to respect the Right(s) of ZYMIC).
The concentration of the editing in this tutorial is on lines 34, 35, 36, 37, 38, 39, 50, 53, 56, 59, 62 and 68 of this ZYMIC Free Template #72 on all six (6) HTML pages. (Navigational "Edits" for other templates most likely will appear on different lines than this template used here)
Line 65 of this HTML template contains the following HTML Code:

CODE

<td class="navoff" onmouseover="this.className='navon'" onmouseout="this.className='navoff'"><a href="http://www.zymic.com">Free Templates </a>

This line 65 contains an "External Webpage Destination" (http://www.zymic.com) along with an "Hyperlink Reference" (href=) that has an Internet Users "Webpage Text Content" reference (Free Templates) and is "Anchored" (<a .... > ... </a>), i.e., the seventh (7th) desination of the vertical navigation section. No seventh (7th) HTML page needs to be generated therefore of the six (6), maybe seven (7), page HTML Web mentioned in the "Basic Manipulation Of An HTML/CSS Website From A Zymic Free Template" - "Fabrication Of A Templated WebSite" section above.

Copying and using this portion of line 65;

CODE

<a href="http://www.zymic.com">Free Templates </a>

, one might create the other six (6) destinations of the vertical navigation section and the horizontal navigation bar, with some change(s) to the actual web address;

CODE

www.zymic.com

, and additionally change the Internet Users "Webpage Text Content" reference;

CODE

Free Templates

, to reflect a respective description of the destination the navigational link provides for the Internet User to "Click" to go to.
9) "Highlight" "<a href="http://www.zymic.com">Free Templates </a>" (Left-mouse click Hold and Dragfrom the beginning of "<a" through to the end of "</a>") and then "Copy" (a "[Ctrl] + [C]" keystroke).
The "Highlight" and "Copy" should be as the darkened gray area of line 65 shown similar as below:



10) "Highlight" "Home" (Left-mouse click Hold and Drag from the beginning of "H" through to the end of "e") and then "Paste" (a "[Ctrl] + [V]" keystroke) then "Copy" over "Home", the "Highlight" and "Paste".
"Highlight" position should be as the "green area" of Line 50 shown similar as below:



11) Edit the "Paste" to become:

CODE

<a href="http://zpcs.zymichost.com/index.html">Home</a>

(naturally, you will use your Zymic Free Ad-Free Hosted Account information instead of "zpcs.zymichost.com").
Line 50 edited:

CODE

<td class="navoff" onmouseover="this.className='navon'" onmouseout="this.className='navoff'"><a href="http://zpcs.zymichost.com/index.html">Home</a>

(shown similar as below)



12) Complete the remaining lines 53, 56, 59, 62, 68, 34, 35, 36, 37, 38, 39 in the same manner being respective of the navigation - including the "Home" (line 34), About, Downloads, Cool Stuff, Pictures and Contact Me.
For your conveinence the lines should appear as the following (save your Zymic Free Ad-Free Hosted Account instead of "zpcs.zymichost.com"):
"Complete the remaining lines" 53, ..., 68 edited:

CODE

<td class="navoff" onmouseover="this.className='navon'" onmouseout="this.className='navoff'"><a href="http://zpcs.zymichost.com/about.html">About</a>
<td class="navoff" onmouseover="this.className='navon'" onmouseout="this.className='navoff'"><a href="http://zpcs.zymichost.com/downloads.html">Downloads</a>
<td class="navoff" onmouseover="this.className='navon'" onmouseout="this.className='navoff'"><a href="http://zpcs.zymichost.com/coolstuff.html">Cool Stuff</a>
<td class="navoff" onmouseover="this.className='navon'" onmouseout="this.className='navoff'"><a href="http://zpcs.zymichost.com/pictures.html">Pictures</a>
<td class="navoff" onmouseover="this.className='navon'" onmouseout="this.className='navoff'"><a href="http://zpcs.zymichost.com/contactme.html">Contact Me</a>

13) From the Notepad++ "Main Menu Bar" select "File" and perform a "Save" on the "index.html" file.
Your completed vertical navigation section in the "index.html" file should appear similar as pictured below:



For your conveinence the lines should appear as the following (save your Zymic Free Ad-Free Hosted Account instead of "zpcs.zymichost.com"):
"Complete the remaining lines" 34, ..., 38 edited:

CODE

<td class="navt1"><a href="http://zpcs.zymichost.com/index.html">Home</a></td>
<td class="navt2"><a href="http://zpcs.zymichost.com/about.html">About</a></td>
<td colspan="2" class="navt3"><a href="http://zpcs.zymichost.com/downloads.html">Downloads</a></td>
<td class="navt4"><a href="http://zpcs.zymichost.com/coolstuff.html">Cool Stuff</a></td>
<td class="navt5"><a href="http://zpcs.zymichost.com/pictures.html">Pictures</a></td>
<td class="navt6"><a href="http://zpcs.zymichost.com/contactme.html">Contact Me</a></td>

14) From the Notepad++ "Main Menu Bar" select "File" and perform a "Save" on the "index.html" file.
Your completed horizontal navigation section in the "index.html" file should appear similar as pictured below:



15) "Right-mouse click" the "index.html" "Tab" and select the "Close ALL BUT this" option to close all the other files that are open.
16) From the "Main Menu Bar" select "File" and select the "Save As..." option. Once the "Save As Display" window appears save the file as "about" (without the quotation marks) to the 121 Folder and then click the "Save" button. A "Save As Warning Dialog" box appears with the following similar text: C:/Documents and Settings/User/Desktop/121/about.html already exists. Do you want to replace it? Select the "Yes".
Repeat this process until you have performed the "Save As..." on all the remaining pages of this Web (downloads.html, coolstuff.html, pictures.html and contactme.html)


Congratulations, You have just completed a functioning navigational six (6) page Web that has an additional hyperlink to an External Webpage. Well done! You can quit the Notepad++ Application/Program at this time.
You've come along way to get to this point ... so take a break, you know ... get a refreshment, stretch your legs, maybe have an organic smoke (not one of them chemically altered over the-counter store bought smokes that cause second hand smoke(ing) related illnesses), I am.


FTP Intro

As most webpages are uploaded from a computer to the webhosted account for the public to view, an FTP (File Transfer Protocol) Application/Program is the nicest way to accomplish the upload of your webpage(s). This tutorial will be utilizing the "Filezilla Client FTP Uploader" (FileZilla) when needed.

=>Download FileZilla
17) At the FileZilla Website one can download the WINDOWS 32-Bit Platform FileZilla_3.6.0.2_win32.zip, (File size: 6.71MB). At the composing time of this tutorial, the current version is 3.3.1. (*note: 29NOV12: a new version exists: 3.6.0.2)

=> =>Familiarization
Once downloaded: install and open FileZilla (don't be intimidated by the complexity of the look of the launched FileZilla application/program). It basically appears as below:


The basic operations of FileZilla are the "Refresh the files and folder lists" (REFRESH), "Disconnects from the currently visable server" (DISCONNECT), "Reconnects to the last used server" (RECONNECT), "Host:", "Username:", "Password:" (the "Port:" may be assigned to 21 - at the time of this writing the author does not assign the port) and "Quickconnect".
These operations can be accessed from the Icon Menu as shown below:



=> => =>Uploading the Web to the Zymic Free Ad-Free Hosted Account
18) Open the FileZilla Application/Program and in the "Host:" text entry field enter: zpcs.zymichost.com (naturally, you will enter yours, and, by your preference when you "Created New Web Host Account" with Zymic you may have selected to create and contain a "www" - if you did not: Do Not Enter the "www").
19) In the "Username:" text entry field enter: zpcs_zymichost (naturally, you will enter yours).
20) In the "Password:" text entry field enter the "password" of your "Web Host Account" (not your "Register with Zymic" password, unless they are identical).
21) In the "Port:" text entry field enter: 21.
22) In the "Local site:" display window locate the 121 Folder on your Desktop and then "Click" it. In the "Filename /" display window the contents of the 121 Folder will be displayed.
23) In the "Local site: Filename /" display window Hold the [Ctrl] key down and with your mouse select the following: the "images" folder, "about.html", "contactme.html", "css.css", "downloads.html", "index.html" and "pictures.html". Once selected Release the [Ctrl] key Hold.
FileZilla should be similar to the view below:



24) Now "Click" the "Quickconnect" button to connect to the Zymic Web Hosted Account. Once connected, you will see an "index.html" file in the "Remote site: Filename <" display window.
25) "Right-mouse click" the "index.html" file and select the "Rename" option and rename the file to be "index_OHF.html" (OHF stands for: Original Host File) and then press the [Enter] key.
26) Now return to the "Local site: Filename /" display window and "Left-mouse click and Hold while Dragging" any one of the highlighted files over into the "Remote site: Filename <" display window and then release the "Mouse Hold". Files will begin to "Copy Transfer" into the Web Hosted Account.
A successful file transfer should yeild "50 Successful Transfers".
FileZilla should be similar to the view below:



=> => => =>Failed Transfers
26a) If there are any failed transfers simply select the "Failed transfers" "Tab" (located at the bottom of the FileZilla Application/Program) and "Left-mouse click" it.
26b) "Highlight" (Hold the [Ctrl] Key down and "Left-mouse click") the failed transfer files and then "Right-mouse click" on any of the highlighted and select "Reset and requeue selected files".
26c) Select the "Queued files" "Tab" and "Right-mouse click" any one of the files and select the "Process Queue" option and the file transfer should begin again providing you are still connected to the account via FileZilla.


That's it! This six (6) HTML/CSS page navigational Web is done and the Web is now published. Time to go view your Website.
If you have simply seen this tutorial and want to see how it may function as a six (6) HTML/CSS page Web with an External Destination Click Here.

Please be at ease to use these links below to locate reference material for your want to learn more of the How To's of Valid Coding of HTML or CSS, the following links are provided to ease and enhance your learning experience.

Special Thanks to valuable knowledge and professional expertise of the Zymic Administration and Staff for the perusing critique and considerable input to make this tutorial a resource here in the Zymic Webmaster Forum, notwithstanding the resources made available to the author through Zymics' presence on the World Wide Web and the Zymic Members.
(Thank You IamShipon1988, Implemented Your Reply)


Provided by: ZARDOZ PERSONAL COMPUTING SOLUTIONS (ZPCS)

Copyright © 2010 - 2012 HALFWATT ILLUMINATIONS
All Right(s) Reserved (ARR) 2010 - 2012 HALFWATT ILLUMINATIONS
Last Modified 16DEC2012

[IamShipon1988]

Very nice tutorial. Thank you for taking the time to write it out. I would like to request that:

1. You wrap the HTML bit within code tags.
2. Add more space between texts. When it's too cluttered, people tend to ignore it.
3. Not use too many bright colors, as it hurts peoples eyes (especially if you spend most of the day on the computer).
4. If you talk about a keyboard button or a software button and/or a code bit, it's often better to wrap it in bold and italics font. Ex: index.php?get_id=5 or [ENTER]
5. As compared to the body content, your header or title font should be bigger. It makes it stand out more.

[edwar_mo]

Oh That is Great for the new web developer and all the new web developers must say thanks to the writer of this post.

Reason for edit: Posting random links is considered spamming. - Staff

[Pkalive]

good work

[jim253]

Thanks a great tutorial for us..

[lizon]

I'm almost tempted to break down the template used here and re-encode it properly. The tables make my head hurt.......

[zpcs]

I'm almost tempted to break down the template used here and re-encode it properly. The tables make my head hurt.......

So are you saying "Jack and Ch33F" (Authors of the Template) didn't encode it properly?

[lizon]

Any template that uses tables as the foundation of their design is outdated and obsolete. The principles may have been fine about 5 years ago but not today. The template is insanely easy to break. Go ahead, zoom into the template by only increasing text size. Watch how easily the text size breaks the entire design. Furthermore the template is unusable on a mobile browser.

Don't get me wrong the tutorial you did was fine, and is a good first step into a basic webpage. I just wish that the template that was used was more up to date.

[IamShipon1988]

It's not that the template is not coded properly, but it is coded using a quite old method. Lizon, this template was designed when the era of web development was still using tables. Yes it's true that XHTML and CSS are beautiful, but tables also have their own beauty. One of the things I like about the Zymic gallery is that the gallery itself is a timeline. You can see the transition of the different periods of design and coding methods. From using Tables and <b> tags to using CSS and <strong> tags; we see the evolution.

[lizon]

Actually this specific template was made 2 years ago. I dunno about you but I was well past table design by then. ^.^

The gallery is nice, that is true. But I believe it is a disservice to novices to toss them all of these old methods and expect them to understand what's going on when they encounter modern code and standards. I would rather introduce them to current practices and have them build up that way. I'm working on something that I hope will help these newer designers get into more modern design methods.

[John Migh]

Interesting ! i like it , thanks for sharing

[ssfdre38]

now you dont have to do

CODE

<a href="http://zpcs.zymichost.com/index.html">Home</a>

you can just do

CODE

<a href="/index.html">Home</a>

as this way will make it more portable and more easy to move from server to server with out editing any code

[zpcs]

now you dont have to do ... you can just do ... as this way will make it more portable and more easy to move from server to server with out editing any code

Yes ssfdre38, that is true and that method was pondered when I created this tutorial ... the reason it was placed in this (that) manner was to provide a "complete and absolutely hardy" URL link. Thanks ssfdre38 for making your addition to the original "Post" as I'm sure that the "novice" can and will make note of your contribution here. (... and as I'm here it's time to re-check my links and verify their integrity and any need for updating the information for them).
Thanks again everyone for your support of this "Post" and its' replies.

[APSPundits]

This was very useful thank you!