iWeb FAQ - Basic web knowledge base

iWebFAQ.org

 

Here you will find all the basic informations you must know if you want to start building a website or are already building one...

La stessa pagina in italiano                             Die gleiche Seite auf Deutsch
 


What do I need to build and have a website?


To build a website you need four things:


1. You need an application to build the website and manage its content (example: RapidWeaver, iWeb, WordPress, PhpBB, or any full text editor like TextWrangler for Mac or Notepad for Windows...).

2. You need a hosting account

3. You need a domain name

4. You need an FTP application



What is the root of a server/website? How do I upload a file which is not added directly to iWeb? What will its URL be? (images, .mp3 files, flash files, .html files, .zip files or any other file...)


The root of a server (as it is used on this website and in my E-Book!) is the main location on your server.


If you have an image named picture.jpg and you uploaded it to the root of your server the image will display if you enter http://www.yourdomain.com/picture.jpg in your browser. If it doesn't display you didn't upload it to the root. Try it out to find the root of your server! Every hosting is a bit different. To upload a file to your server you need an FTP application like Cyberduck.


Sometimes you have to upload a file or a folder to your server without going through iWeb (perhaps a slideshow you made, flash content files, pictures, music, ...) for these files I think it’s best to make a folder called media, put all the files which don’t go directly into iWeb to this folder and upload the media folder to the root of your website. The web address (or URL) of this folder will be


http://yourdomain.com/media/


and if you put a file into it, let’s call it filename.extension, its URL will be


http://yourdomain.com/media/filename.extension


Having a media folder helps you to keep things organized and makes it easy to determine the URL of a file you want to upload.


Important note: When you upload a file replace spaces with underscores _ (eg. “happy new year.jpg” gets “happy_new_year.jpg") this makes it much easier to find the URL. Spaces in filenames cause quite some troubles on the web. Also avoid special characters like ä, ö, è, ... and any punctuation in the filenames.



Absolute paths and relative paths (or links)


Instead of using the full URL to a file as seen in the previous subchapter http://yourdomain.com/media/filename.extension you could also use an absolute path or a relative path.


Absolute paths (or links)


All the codes you find in my E-Book were written or adapted to work once you uploaded the files to the server. Instead of using the entire URL http://yourdomain.com/FolderName/picture.jpg in the codes you will often find that the addresses to files are specified like this:


/FolderName/picture.jpg


hence without http://yourdomain.com in front of it. When it starts with a slash "/” like in the example above this is called an absolute path. This indicates the position of a file on a server starting from the domain http://yourdomain.com, which, as we've seen earlier, points to the root of your server. So basically you just type in what comes after your domain http://yourdomain.com without typing in http://yourdomain.com just starting with / so for a picture you uploaded to the root instead of writing http://yourdomain.com/picture.jpg you just write /picture.jpg


The good thing about using /FolderName/picture.jpg instead of http://yourdomain.com/FolderName/picture.jpg is that the first one is universally applicable. No matter what your domain is the picture.jpg file will be searched in the folder FolderName which is uploaded to the root of your server. This allows you to use the code I provide you without you needing to edit the code first or with less need to edit it.


If you want to use absolute paths in local (publishing to a folder) drop the files and folders you would otherwise have to upload to the root of your server into Macintosh HD for them to work. Macintosh HD is the root on your computer which equals the root on your server. You may also want to publish your site to Macintosh HD but actually it makes no difference where you publish the site to. It's just to have everything in the same location.



As a last note on absolute paths it may be helpful to keep in mind that they are built "forward" or in a "top down" process. They start from the most top (the root http://yourdomain.com) and you just type in what comes after the root after the initial slash (/).


Relative paths (or links)


I never use relative paths however you may find them elsewhere on the web so here I will try to explain the difference between absolute paths and relative paths and how to use relative paths in case you would ever want to do that (I wouldn't since to me it's more complicated). If absolute paths are built forward in a top down process relative paths are built backwards in a bottom up process.


If you have a page under http://yourdomain.com/sitename/pagename.html while building a relative paths the question to answer is where do I go from here? If the file you're wanting to refer to is in the sitename folder too let's take again picture.jpg then all you have to do is type in picture.jpg like <img src="picture.jpg"> easy. If the file isn't in the sitename folder but in the root then you have to go a step backward first (or a step bottom up) which is done by adding ../ which equals a step backward <img src="../picture.jpg">.


The URL of an HTML Snippet looks like http://yourdomain.com/sitename/Pagename_files/widgetX_markup.html so to refer to picture.jpg uploaded to the root from an HTML Snippet you would need to go two levels up (backward) hence <img src="../../picture.jpg"> however iWeb is really not that perfect so the URL of an HTML Snippet really looks like this: http://yourdomain.com/sitename//Pagename_files/widgetX_markup.html note the unnecessary double slash (//) in front of Pagename this has you going one more step backwards hence <img src="../../../picture.jpg">


What if I have a page published under http://yourdomain.com/site/page.html and a picture published in a folder called “media” which is uploaded to the root? Then you would have to go back to the root level and add to search in the "media” folder like this:

<img src=”../media/picture.jpg”> or from an HTML Snippet <img src="../../../media/picture.jpg">


To have relative paths working in local (publishing to a folder and viewing the site from your computer without uploading to a server) you have to add the files you would otherwise upload to the root of your server to the location where you publish to from iWeb (hence where the main index.html file and your sitename folder are).



Again I wouldn't recommend you to use relative paths. To me absolute paths are easier. If you have a code using relative paths you may want to convert the relative paths into absolute paths.




You will find more Basic web knowledge in the free sample of my iWebFAQ.org E-Book which you can download here for free.




iWebFAQ.org - Tutorials, Tips & Tricks is made with iWeb and for iWeb.

It’s an EBookStoreToday.com company. It’s presented by Cédric Giger and hosted by HostGator.


Thank you for visiting and supporting my website,

- Cédric -


 

 

Share/Bookmark

Share/Bookmark