ServertoSite.com    Find our open source software below : ): )

Menu Below is for Instructions that Relate to Our Open Source, Low Maintenance Web Friendly Website Package

Getting into the Low Maintenance, Web Friendly Website Package

You have downloaded the Low Maintenance Web Friendly Website package from our website servertosite.com and have extracted the zip file on your computer. You have put the LMWFW folder that came out of the zip somewhere you like to work on things in one of the documents on your computer. Inside, you will see the folders and text files mentioned below immediately, in what order does not matter:

  • zv.php < You need to change password in this for admin panel, this is why it is separate from its 'atr' folder
  • Mivardia-Theme
  • public_html   << This is where your website is stored
  • public_html.zip << Same as the above but ready to upload
  • Instructions.html << What you are looking at right now
  • Worthwhile Additions for .Htaccess File.txt
  • Do-You-Not-Like-Editing-HTML.html
  • Admin-Panel-With-Images-Links-Files < Contains optional admin panel type two, which allows image files links

Notes on the above:

zv.php:

Take special note of the zv.php file as your admin panel that comes with this website package will not work without it, so if you want a web updatable panel for up to six places of your choice on your website. You must change the password to a secure password in the zv.php file, then you can upload it into the atr folder in your web space. What are you talking about atr folder, you may be thinking? The atr folder is what contains other files for your admin console and the atr folder can be found in the public_html folder of this web package as well as in the zip file that you upload.

Mivardia-Theme:

The Mivardia Theme folder contains the theme that comes with the website, which also happens to be available separately as the Mivardia Customizable CSS Theme. You can go into this folder where you will find some instructions and hints relating to the theme and a main style.css file and print.css styles sheets. The main difference to the style.css style sheet in the Mivardia-Theme folder in relation to the other style.css file in your public_html folder, is you can make customized changes to the design of your site and see them straight away by double clicking on one of the related web pages that are in the same folder named Mivardia-Theme, once you like your changes, you can replace the one that is already in the website root folder public_html, with the theme you modify in the Mivardia-Theme folder, so long as all modifications were only made to the style sheet itself not to the html files in the Mivardia-Theme folder.

public_html

The public_html file contains your website and needed related files. what is contained in public_html will pretty much be what you upload up to your web hosting or server, it is like a backup and work bench in one, new pages or modified pages you make will be uploaded into the public_html file that is already on your hosting account (Stop right there, your hosting account may have named the public_html folder something like 'www' instead of public_html, but it is the same thing so don't worry) or the pages may be uploaded into an appropriate categorized sub folder that matches a sub folder by the same name in the public_html folder on your computer (If you are going to have categories in your website, you will end up making new folders for each new category). Keep your back up in order, always use the public_html folder on your computer to make new pages that will later mirror your website online after you upload pages files and pictures to your website (so if you have an image you want on your site, save it into the same folder of your back up on your pc before uploading it). You may want to make a copy elsewhere of your web site as you add more pages to it, say like onto a DVD, CD, Flash Drive, External Hard Drive or other storage device.

Oh, but there is also a public_html.zip file?

Please notice that there is also a public_html zip file, this is for your convenience, so that you can upload the zip to your web hosting or server immediately and get things happening live on the web for you to see. Once you upload the public_html zip file to your web hosting or server you can use your control panels unzipping function to empty its contents into your web space. If you use web hosting and passes PHP through a CGI (Lots of web hosts do, you can always ask though) you will also need to make a file named php.ini to sit in the public_html folder of your web space and please take special note here, that you will need to make some identical php.ini files with the same things inside them to put in different folders for your web pages to function properly and you will need to do this each time you make a new folder (Please remember that). You can just upload the same php.ini file into each folder. Take special note to also upload a php.ini file into the folder named 'atr' which is a folder that sits within the main public_html folder of your website or your control panel will not work (I want to make sure you realise your web host may have named the folder that would normally have been named the public_html folder differently, they could have given the main folder the name of 'www' instead). You might be wondering what goes in your php.ini file? Well your web host should direct you to a bunch of code to copy and paste into your php.ini file or you may even find some necessary (When I say necessary I mean it won't work without it) code to copy and paste into your php.ini file in your web hosts faq section (Did I say one php.ini file? You are going to have multiple php.ini files with the exact same code in them, one will sit in your main public_html or the alternatively named 'www' file of your web space and the other exact replica ones must go in other folders, to begin with put one in the folder of this website package named 'atr' the 'atr' folder contains your websites updatable sections, login control panel and it must have a php.ini file if your webhost uses php.ini files (If the host runs PHP through CGI, which is a very common thing to do). The 'atr' folder and its contents should always sit in your main public_html/www or whatever named folder). In your php.ini file you will also need to put an include path to your includes folder, your includes folder is named 'clds', which can be found in the public_html of folder of this website package, it will need to also sit in the public_html or alternatively named 'www' folder of your web host (Take good note of the includes folder and the include path, because without them your website will not work)... When you read further below in these instructions and get to a part called 'Shared Hosting PHP ini file Method' you will find the instructions on putting an include path in your php.ini files. Don't panic, your web hosting should have support you can contact should you run into any problems with setting up your php.ini file... Take note that the folder named 'clds' (the includes folder) does not require a php.ini file in it, so please don't put one in, either does the folder named 'images' and a folder most web hosts already have sitting in your space named 'cgi_bin'. So please keep those three folders clear of php.ini files.

Instructions.html

The above file named instructions.html contains these very instructions you are reading right now (it is this file).

Worthwhile Additions for .Htaccess File.txt

This file contains two useful copy and pastable snippets that can be added directly into your .htaccess file for further increased SEO performance. Click here to open that file now and look at its contents (Will open in a new tab in your browser or in a new window)

Do-You-Not-Like-Editing-HTML.html

This file contains information on how to speed up editing HTML by using the open source Kompozer text editor. It also has some other general HTML tips for those new to HTML, including images. Here is a direct link to that file if you want to look at it now, click here.

Admin-Panel-With-Images-Links-Files

If you need to put in HTML image source files and HTML hyperlink references (clickable links) through the web updatable admin panel on any sections of your website that you have made web updatable, then you will need to change the password in the zv.php file located in the Admin-Panel-With-Images-Links-Files folder and upload both the zv.php and frm.php file contained in this folder into the 'atr' folder in your live web space. Remember again, you will need to open the zv.php and change the password in the zv.php before you upload it.

Getting Your Website Happening Good and Proper

Now you have probably checked out the contents of the public_html folder that comes with the Low Maintenance, Web Friendly Website Package and seen that it contains your website. I am going to talk about one of the files you will see within the public_html folder, that is the .htaccess file. This file makes your URL's end with .html instead of .php and close of what would otherwise be available on your site, that being duplicate .php files displaying the same content as files that show with the .html extension. The .php file extension is shut off from public and search engine access via a code snippet in the .htaccess file.

Apache Mod Rewrite:

The .htaccess file for your site is set up for having apache mod rewrite enabled. That said, your web host or server should have apache mod rewrite enabled, if not ask your web hosting or server administrator to turn it on, if they say no you are either with the wrong host or you are with a host that does not use Apache, but most mainstream Linux servers are usually set up with Apache, so you should be fine. If you are on a VPS or server then your include path will go in your .htaccess file instead of a bunch of php.ini files as is required by a lot of shared hosts (that means all hosts that run PHP through CGI will require php.ini files in multiple folders).

If You Are Going to Have Topics on Your Website Categorized Into Individual Topic Folders Read Below. If Not, I Have a Little Section You Will Find Bit Further Down.

If you are going to have more than say 10 pages on your website, I would very highly recommend, making individual folders for different topics. The pages you make for different topics or categories in your website will need to be uploaded into these folders individually, but everything will be neater more organized and more SEO friendly this way.

So How Do You Make Folders For Different Categories, That Work?

Well you can start by making folder names like my-category-name in your public_html file ready to be mirrored in your web host or servers public_html or www folder. But now onto the not so simple part...

You will need include paths to the folder named 'clds' that comes with this web package and sits in the public_html or www folder. Paths you may say, what am I talking about? Read on and learn, you will get to all about this a few paragraphs away, complete with snippets and examples, so read on. But first lets look at what is in and lives in the 'clds' folder I mentioned.

Below is the list of include files for your website (They are located in the folder named 'clds' that is within the main public_html folder of this web project):

Lets Start By Looking at the Website Assembly related PHP 'Include' Files

Website assembly includes are things like the header of your website. Please take note that the header is where your menu links are put for the drop down menu... The footer is where you will put in the copyright name for your website, you can also make the footer really tall like you see on some websites, if need to pack a bunch of stuff in the footer (If you do that, just be sure you know how to style the 'stuff').

Now onto the js.txt file. This file is where you put script tags to your JavaScript source or even some plain JavaScript, but it is recommended to keep your JavaScript (JQuery, Mootools etc) compressed in a remote file for website performance reasons, due to browser caching of external JavaScript files (Say What?, JavaScript What? Yes if you do not know what I am talking about or how to use JavaScript or JavaScript libraries, don't fret, you do not need to have any JavaScript at all for your website to work just fine, relax. If you learn about it and things like JQuery at a later date you can add it then or never, what ever suits you)

The Next Paragraph Could Be a Bit Off Putting to Those Who Not Know What I am on About... If that is You, Relax, You Will Be Happy to Know the Next Paragraph is Entirely Optional Information and Can Skipped Completely if You Want.

 ... If you are going to have lots of pictures and have fairly high traffic, some people may want to look into a JavaScript powered (usually a JQuery or Mootools plugin) delayed image loading method, so that an image loads as the user scrolls to it. If you want to do this you will also need to move (cut and paste) the related PHP include found low down the bottom of your web page, that being <?php include 'js.txt' ?> and move it  just under the CSS related things in the top of the page, ideally just before the closing </head> tag of your web page (Keep in mind this is not in your header include, you will find it in the web page itself). If you are going to do this (Please note that bit advanced for some people and it is not necessary for many websites anyhow, it was just a tip for those who no exactly want I was meaning)

Shown Below is the Website Assembly Related Include Files For Your Site.

  • header.txt <<< This Contains your drop down menu links. Note that on servertosite.com it also contains our website name in the top, It would suit the theme if you also put your website name up the top of the header, I have styled it ready to go or you can change the colors and style to your liking if you know how to do that.
  • rcolumn.txt <<< This is where you will have what ever you want to go in the right hand column of two column pages on your website. The same content will show on every right column in a two column page, unless you have multiple right columns.
  • footer.php <<< Where your copyright goes and some people if they know what they are doing can fill it with other things like HTML for CSS references. Also if you have any Javascript you want use, I would recommend putting the Javascript HTML source references in the top of this footer file, so it loads after the HTML/CSS has loaded.
  • doctype.txt <<< This define the document type for the XHTML of your web pages, I made this an include, so if you need to change it to a new doctype in the future for some reason, then you can do it to all your pages in your website in one quick and easy copy and paste (probably from w3.org).

Random File:

You will also find an index.php file in the clds, includes folder, but this is not an include, it remains blank, it just stops people seeing a list of your includes files if they enter the path to the includes folder in their web browser.

Website login panel, updatable section related 'include' files below. I have set it up for up to six different updatable sections on your website from the internet via login.

  • one.txt
  • two.txt
  • three.txt
  • four.txt
  • five.txt
  • six.txt

Main Body Files Below. These Are Not Include Files, But What the Include Files Attach Too, These Do Not Belong In The Includes Folder:

  • index.php  This is the main front page of your website also known as the 'Home Page'.
  • about-us.php  This is your about us page, which I hope that you will use.
  • contact-us.php  This is your contact us page. It has a form that is associated with the ec.php script file that is also located in the public_html folder.
  • page-not-found.php  This is the page visitors to your site are shown when people type in a mix up (mistake) of a page related to your website, like say a spelling mistake, typing error or something else wrong like try to locate a page that does not exist as a publically accessible file in your website.

If You Are Making a 'Really Small Website', Which is Likely to 'Always' Have Less Than 10 Pages 'Forever', Please Read the Below, Otherwise Skip to Where it Says 'Folder and File Permissions' Shown Below This Paragraph:

If you know 100% for certain your website is going to always have less than ten pages or you do not want to categorize anything (not recommended, but some people are ultra lazy), then please remove all of the files from the clds folder and put them directly in the public_html folder. next go into the folder named atr, located in the public_html folder and open a PHP file named zv.php, locate in it the paths to text files one through six and remove ../clds/ from before the path of each text file. Then you can skip setting up includes paths  as shown a little further below altogether and skip to the next subheading named 'Please have a look at the worthwhile additions for .htaccess file' and read on from there.

Folder and File Permissions:

All folders and files that sit within the public_html folder or the 'www' folder on your web host or web server will need to be checked individually to make sure they have the right file permissions set. All the folders sitting within the public_html (or 'www' folder or whatever) will need to have permissions set at 755, yes that is CHMOD 755 (NOT 775) Folders set to file permissions of 755 may also loo like this: drwxr-xr-x in a web hosting control panel or a ftp manager (Also if you do use an FTP manager, do not be happy in ignorance and just connect without using a secure connection, you must choose an option to connect over TLS/SSL to encrypt data flow or else your normal ftp connection is clear as day for any hacker paying attention, to do as they will. If you use an FTP manager without option to choose TLS/SSL do not use it, it is unsafe. If you can not figure out how to set a TLS/SSL ftp connection, then please use your web hosts control panel instead over https:// not http://). All files will need to be set to file permissions of 644, yes that is CHMOD 644, file permissions of 644 will also look like -rw-r--r-- in a control panel or ftp manager. Please note, that when you add new files or folders to your website at any time, make sure all folders are always set to 755 and all files are always every single time set to 644, that includes images, JavaScript, JQuery files, PDF's, zip files, text files and what ever else you decide to upload, if it is a file it is should be set at 644, no excuses, unless you want to be hacked. You never want to have your folders set at 777 or drwxrwxrwx or any other setting besides 755 for that matter. Having a file set at 777 or in a control panel this may show as -rwxrwxrwx and is terribly unsafe and just asking for a hacker or even a malicious bot to hack you at will (a malicious bot is an automatically spidering program that crawls over your site and is unleashed on the internet by an attacker).

The Low Maintenance Web Friendly Website Package public_html.zip should appear in your web space with file permissions already set at 755 for folders and files already set with permissions of 644. But please double check, including looking in the folders to check the files within them are still set at permissions of 644. Also remember when you upload new pages to your website to always make sure the file permissions are set at 644. Do not forget to scan files in your manager to see that permissions are set correctly, most control panels should have the permissions listed clearly to visually scan when you look over them. remember to also check in the images folder that images you upload are set to file permissions of 644. The same goes for any text files, PDF's, word documents or what ever else you decide to upload.

Right, Here We Go, Those Include Paths I Had Been Talking About. Lets Get Into Them. But First, If You Are Using Shared Hosting (Common General Linux Web hosting), You Will Want to Skip The Heading Titled '.Htaccess Method Below' and Jump a Little Further Under To 'Shared Hosting PHP ini file Method'.

.Htaccess Method:

If you are on a VPS server/server or on web hosting where you know PHP is installed as an Apache module (which means you know that your web hosting is not serving PHP through CGI). Then setting the route to an includes folder will be done in your .htaccess file which sits in your public_html folder :

Copy and paste the below into your live .htaccess file located on your web server or hosting in the public_html folder, but change your log in username in the path shown below first.

Note: If you are using Cpanel, then the username you use to log into Cpanel will completely replace where I have written your login username goes here in the include path. If you are not using Cpanel, find out the correct path you will need to put between the two " ". If this does not work then it is likely your Apache server needs AllowOveride Options or similar. Try contacting your web host or your server administrator about this. If you are not using Apache, but something like lighttpd then you are a Super Geek and probably need no instruction.

Advanced web developers may want to move the clds file above public_html, that is if you are going to have custom PHP scripts integrated as part of your website.

Shared Hosting PHP ini file Method:

If you are using a shared hosting account that serves PHP through CGI, you will need to make a file named php.ini and pop it in your public_html or 'www' folder or what ever your main folder is named, you will also need exact copies of the same php.ini file inside the folder named 'atr' that is part of this web project and take note here, also a php.ini file will need to go in all the category folders you make for all the different page categories you make for your site, even when you make new category folders months later (so don't forget that each time you make a new category folder for subjects on your site, you must upload a php.ini file with the exact same appropriate contents in the php.ini file as the php.ini files that you put in the other folders). You can try copy and pasting one of the include paths shown further below into a php.ini file. Your web host will very likely have a bunch of other code to copy and paste into the top of your php.ini file before it will work, don't forget I said that, because if you do not put the other code in your php.ini file (that you may need to ask for from your web hosts support or in their faq section), your site will not work properly trust me. Don't forget I said that right...

The include path to go into your php.ini files may be as follows, but please change your login username in the path first.

Your include path to go in your php.ini files may actually differ from the above, it could look similar to what is shown below, or even different again. If you can not see your include path in your web hosting control panel to match against, contact support at your host, the path will always go between the two ".:" but straight after the dot and double colon, do not wipe out the dot followed by a double colon from your include path, it should always look like include_path ".: pathgoeshere" in that format.

Note: If you are using Cpanel, then the username you use to log into Cpanel will completely replace where I have written your login username goes here in the include path. If you are not using Cpanel, find out the correct path you will need to go between the two " ", if you have some kind of control panel, the path will probably be show somewhere in your hosting control panel, if you get stuck, there should always be support available at your web host.

Please Have a Look at The Worthwhile Additions for .Htaccess File text file

You will notice a text file in your website package named Worthwhile Additions for your .htaccess File, this contains some other copy and pastable useful additions for your .htaccess file.

Making New Pages On Your Website and Changing Existing Ones

In the public_html file of this web package, you will find a file named about-us.php, you can use this file as to be your about us page if you are going to have one. If you want to make a new two column page, then please use the file named TEMPLATE-TWO-COLUMN.php (also found sitting in the public_html folder of the package) and then save as a different name, to match the name of the page you are making, you will find there is also a page named TEMPLATE-INDEX-STYLE.php that can be used as template to make pages with similar layout to the home page that is included in the web package. Please note that all the template pages I have put in this website package also contain valuable instructions in them that are really worth reading in regards to your website, I wrote some worthwhile tips in the templates themself, in the part you will replace with your content, so use them and read what I have written in them first please though.

If you wanted to make more contact form pages of the same or of different types and of varieties with the same or with different options, then please check out the template I have made named TEMPLATE-CUSTOM-CONTACT-FORM-SCRIPTS that is sitting in the public_html folder. It has some useful instructions in it, telling you how to go about making more contact pages for your website and contact forms of different varieties and how to rig them up so that they work.

If you go into the public_html folder of this website package and go into a sub folder named 'clds' (clds is your includes folder). You will find a file named rcolumn.txt and it becomes the right column on the two column pages of your website, for example the about-us.php page is a two column page. Fill your rcolumn.txt page with information you do not mind showing on all two column pages that are on your website (If you want to have some pages showing different information in the right column, you will need to make a copy of rcolumn.txt and rename the copy you make to some other name, then on the pages you want this secondary right column to display on, you would need to change the name in the PHP include snippet that pulls in the right column to match the name of the new right column on those pages it will be used, for example a new our new PHP snippet to do this may look like <?php include 'secondright.php' ?> and this would pull in the new file called secondright.php that you had made using the rcolumn.txt as template. This new file will sit in the includes folder (the folder named clds) along with the original rcolumn.txt file. You could even repeat that procedure for as many right columns as you wanted. For those wanting to have a bit of fun playing around, one could even use one of our random rotator PHP scripts found on our servertosite.com website to randomly display different right columns on pages on your website, by including them randomly each time someone loads one of your two column web pages provided the script is in that page.

The Main Index Page, The Home Page of Your Website:

You will also find an index.php page in the public_html folder, this is the home page of your website, fill it with the information you want on the home page of your website (if you would prefer a two columned home page, use the TEMPLATE-TWO-COLUMN.php file to make a two columned index page (An index page is the home page that you see on all websites). Also if you are going to make a two column home page, please also copy and paste the CSS snippet shown a little further below directly 'below' the other CSS related code which can be found in between the head tags in the XHTML <head> CSS related stuff here </head> of the XHTML source code in your two column file.

 

Where Abouts in Your Web Pages Do You Put Information and Content into Your Web Pages?

You will put information and content in your website, between where it says content start and content end on each page you make. You may want to make sure it is all clear between content start and content end before filling out a new page with information... Example of the Content Start and Content End HTML tags that are in your pages is shown below, these are your guides, so you don't accidently wipe out some needed structural XHTML or CSS tags.

<!-- Content Start -->

Put your website content in here!

<!-- Content End -->

Note that, in the right column, I have not put content start and content end as it is blank from the get go, you can fill it with what you want

What About Having a Copyright in The Footer? That's Taken Care Off, There is a Dynamic Copyright in The Footer, Lets See how to Fill Your Details Out in It.

When you want to change information in the footer.php, you will need to open it up from the includes folder (The includes folder is named 'clds' and sits in the public_html folder of the website package). Open your footer.php file in a PHP compatible text editor of choice, then scroll to the bottom of the file in the code view and you will see some php code followed by some writing which says: Replace This Writing With Your Name/Companies Name or Both&nbsp; And-Probably-Your-Domain-Name-Here.com. So do that please, replace it with your own name and either or your companies name or combination of both (one following the other), follow this by your websites domain name. Did you think it looked messy with Both&nbsp; followed by the &nbsp;? The &nbsp; is there for a reason it translated to a 'space' in HTML, so this will put a neater gap between your company name and your domain name, just remove the word 'both' and make your name or company name touch it instead of the word 'both'.

How Do All the Pages in Your Site Connect With the Site Menu?

Every time you make a new page for your website, you will need to also put the name that you gave the page, like for example about-us.php into the header.txt file (contains menu), you will find the unordered list and sub menu lists in the header.txt file between <div id="topm"> Unordered Menu Lists are Here <div> and the topm closing div. (You can learn about unordered lists soon in the HTML section of these instructions, the HTML section is shown a bit lower in these instructions if you just scroll down). You will need to make a link in your menu to the about-us.php page (What did I say PHP, important correction here, read on), but instead of writing down in the menu of your website the URi as about-us.php you will most definitely need to write the URi you link to as about-us.html (Did you read that, it means all links within the site go to .html not .php), as although all pages in the website should most definitely be named with the .php extension, The .htaccess file in your live website will automatically redirect them to a page of the same name as the .php file but with a new .html extension instead (This is how most modern websites that have neat URLs work), this is why when you make a link to a .php page you should keep the name of the actual page itself left as is with .php, but direct any links to this page by keeping the name of the page but ending it in the link with .html instead of dot php. Warning: I will say it again, this does not mean go and change the actual files in this site to literally have the .html extension, if you do you will mess everything up and your site will not work. The Apache server on your web host should automatically make the .php files show as .html is what I was meaning and your links should reflect that. Got it? I hope you have.

How To Write a Link:

Please start all the links you make from your menus (or anywhere you link within your website itself, that means not to other websites) to start with ../ yes double dot forward slash, if the page you make is in a category folder, then go something like ../folder name/page-name.html to make the link work, starting with  ../ will make sure that links can find your website pages in their folders properly. I have put more information actually in the menu file itself that being the header.txt file that should live in the 'clds' folder at all times on and off line. Please remove the instructional information I left in the header.txt file after you have understood it or it will clutter your source code, as I put quite a few comments in their regarding the drop down menu structure. Please keep in mind to not erase any of the website code itself, only delete anything shown in header.txt that starts with <!-- and ends with --> These are called HTML comments, the only ones worth keeping are the ones where I have written content start and content end in various places around your website, they are a guide, don't delete them.

Back Ups

The public_html file that you have on your computer is the actual back up of your website, everything that you have in your public_html file on your computer should be in the same order as the folders and files you upload to your webhosting or web server into the public_html or otherwise named 'www' folder or whatever on your web hosting or web server (you would have originally uploaded the included public_html.zip file of this web package and unzipped it in your web space, then deleted the zip file once you had done that). So back on track to backups. Your public_html folder on your personal computer is your back up ok... You can also copy backups of your website to electronic storage devices and discs such as flash drives, DVD's, CD's and external hard drives. Also please note, when you crop or edit a picture on your computer for your website, save your finished image into the images folder that is in the public_html folder of your website package, then upload the new pictures into the matching images folder on your web hosting or web server.

Do You Know Any HTML?

Even If you do happen to know HTML, I want you to still use the three copy an pastable image placement snippets shown below, because they contain, CSS positioning classes. Now for those of you who do not know any html or those of you that know only limited HTML/XHTML please read this entire section. It is important that you do...

Lets get started with placing and positioning images in a web page on the Low Maintenance Web Friendly Website package in HTML/XHTML:

To start with, put an image or multiple images in the folder which is named images (pretty obvious right), this folder can be found inside the public_html folder of this Low Maintenance Web Friendly Website Package and should also be sitting in your web hosts public_html/www folder if you have done the upload of the web package already, hopefully using the provided public_html.zip file. Next we will be doing some copy and pasting. Now before you get into doing this, please note in the snippets shown directly below, to please rename where it is says yourimagehere.jpg to your images actual name and whatever extension it has (for example does your images name end with the extension .jpg .png .gif or dot something else).

If you would like to have a centered image, please copy and paste the snippet below into where you want the image to show (Between your writing or wherever you want really). You can repeat this procedure as many times as you need to for as many images as you want:

 

If you would like an image sitting to the left of your web page use:

 

If you would prefer an image sitting on the right hand side of your web page use:

 

In the image positioning XHTML snippets above, you may have noticed I have written in them, class="center" or class="left" or class="right". These are CSS (Cascading Style Sheet) classes, an external style sheet controls the positioning of the images. Classes and ID's are major things you will need to learn to deal with in a CSS style sheet, if you want to learn tasteful web design you will most definitely need to learn CSS. But hey, in this website package I have already done that for you, you may just want to change some colors and some dimensions to customize the look of your site.

Right then... Lets Get Into learning Commonly Used and Useful XHTML for Your Website (Yes the correct name for the newer HTML is really XHTML not HTML):

To write on this new line here I created a new paragraph, which is something you will need to do all the time... How? Read on...

When you are entering written information into a web page, it will need to be written in XHTML, so to make a paragraph you would go:

<p>Hello I am a new paragraph, now lets close this paragraph properly with a closing paragraph XHTML tag, notice the forward slash before the /p to close this paragraph in between the <>. XHTML tags nearly always close with a forward slash before the name of the tag in the (end) closing bracket of each and every paragraph you make</p>

Ok then, what about if you wanted to put a main heading at the top of your writings. Then what you would need to use is a (heading one) h1 tag. For example a h1 tag that looks like as follows <h1>Main Heading Here</h1> should be used at the top every article, story or document that you write for your website.

What About Subheadings?

For sub headings I suggest using (heading two) h2 tags <h2>Sub heading here</h2> and for sub headings with less weight, I would suggest using <h3>put sub heading of lower weight between here</h3>

You can keep on going down to h6 (heading six) if you wish, but I personally do not see a need for this, I go down to h3 but I do not go lower. Please note you will also find in the .css file that styles the Low Maintenance Web Friendly Website Package that I have not styled below h3 deliberately, so any tags below h3 (like for example h4) would show up unstyled.

What About if You Need to Make a List, Like the One Shown Below:

  • List item one
  • List item two
  • List item three

Well you would first need to create an unordered list, by using the unordered list tags, <ul>Hello I am an unordered list</ul> This unordered list will only become useful with list items instead of just plain writing in between it. So what is a list item one may ask? A list item sits in between a 'ul' tag one after another for however many items or wordings there are in a list, for example, <li>Hello I am a list item and I belong between an unordered list</li>. Our completed list would look like as shown below in XHTML format:

<ul>

<li>List item one</li>

<li>List item two</li>

<li>List item three</li>

</ul>

Would You like to Know Another Thing Unordered Lists are Really Good For? Menus, Yes Website Navigational Menus:

to turn the unordered list in the previous example into a menu, we would put HTML active tags between each 'li' tag <li>and its closing bracket</li>, see our website navigational list (or menu) below, written in XHTML:

<ul>

<li><a href="../somepage.html">List item one, I am now a menu</a></li>

<li><a href="../somefolder/somepage.html">List item two, as am I</a></li>

<li><a href="../somefolder/differentpage.html">List item three, so am I</a></li>

</ul>

If you were wondering why I had the ../ before the backslash before each URI, it is to access this folder from a different folder that our page may be in, you will need to do this all the time or pages will not be able to be linked to properly within the Low Maintenance Web Friendly Website Package.

If you want to make an ordered list (these are not normally used for menus). Ordered lists are used for list items you want to number in order (showing numbers) starting at 1 and ending at what ever number you want. You would simply change 'ul' to 'ol' and you are done (ol stands for ordered list):

<ol>

<li>List item one</li>

<li>List item two</li>

<li>List item three</li>

</ol>

the results should normally look like the following, unless someone has messed up the ordered (ol) list style to override it in the CSS file:

  1. List item one
  2. List item two
  3. List item three

If you want to make a general break between something (a gap), you can use the break tag, which looks like this: <br />, (I know, it looks different to the HTML tags above, it ends with a forward slash after the letters 'br' and is complete in one neat little unit or snippet.) Sometimes you will find it will take more than one break tag after another to actually make any gap show at all.

Now Lets Move On... How Do You Make a Link?

To make a link you need to use the active tag with a 'href' inside of that active tag, the following is an example of a link, with a URL inside of it. please make sure to put the URL in this case the URL is http://servertosite.com/, between the " two " inverted commas.

<a href="http://servertosite.com/">Visit</a>

In the above, the word 'Visit' would be the part that is clickable by mouse, after clicking the word 'Visit' you would be taken to my website, servertosite.com which is also the website that is home to the Low Maintenance Web Friendly Website package that you are using right now and other open source web building projects.

I you wanted my servertosite.com website to open in a new window or tab on your browser you would need to make a 'target' with 'href' attribute of underscore blank '_blank'

<a href="http://servertosite.com/" target="_blank">Visit</a>

The above will now open the servertosite.com website in a new tab or window. Some may complain that using target="_blank" will not validate as valid XHTML, but it works with absolutely no issue in all browsers, the only place it is invalid is in places like the HTML validator at http://validator.w3.org/ (W3.org is the website for the people behind developing XHTML itself).

How Do You Put in an Image With XHTML?

Well lets show you below:

<img alt="description here"  src="../imagefolder/image.jpg"  />

In the above, the source (written in XHTML as 'src') is where your image is stored on your web hosting or server, in what file name the image is stored. The 'alt' is where you put a description of what the image is about. For things like a company logo that you do not need a description to show when someone hovers over the image with their mouse, you can remove the alt="" completely.

Do you want your image to also be a link if someone clicks on it?

If so you would wrap your image block with an active tag, like shown below, Note that I also put a target in it so the link would open in a new tab or window.

<a href="apage.html" target="_blank"><img alt="description here"  src="../imagefolder/image.jpg"  /></a>

If you do not like writing HTML please check out Kompozer.net open source HTML and CSS editor. Here is a link to the download page of this great project, click here. I have also given a write up on how to use Kompozer to edit your HTML in this web package and also here on the servertosite.com website click to see right now (The page will open in a new window). You will also come to that page in the menu, if you are progressing through it. If you have not looked at Kompozer already to speed up the process of making new web pages for this web package. I highly recommend doing this as you can also use Kompozer to edit the CSS style sheet to customize the look of the Low Maintenance Web Friendly Website Mivardia Theme or any website you are working on for that matter.

Personally Recommended Services and Products Below

KnownHost Quality Managed VPS/Hybrid and Dedicated Servers Click Here

KnowHost is a truly respected VPS/Hybrid & Dedicated server provider. Advantages of VPS over shared hosting: Dedicated RAM, Useable Bandwidth, Unlimited Websites, Shell, More Control.