Differences

This shows you the differences between two versions of the page.

--- web:site_organization [2011/07/19 08:49]
cedwards
+++ web:site_organization [2013/03/05 09:46]
cedwards
@@ Line 38: / Line 38: @@
 a **%20** in place of the space or another sequence in the form of
 **%<number>**.  For this reason, I recommend **not** using spaces or
-special charactersin filenames.  Instead, I recommend using an
+special characters (other than _ or -) in filenames.  Instead, I recommend
-underscore or a dash.  This keeps the URL still somewhat readable.
+using an underscore or a dash in place of a space.  This keeps the URL still
-One other important distinction is the use of uppercase characters.  When you
+somewhat readable.  One other important distinction is the use of uppercase
-use uppercase characters in folder, file, and thus URLs, you create an
+characters.  When you use uppercase characters in folder, file, and thus
-"ugly" URL.  Be consistent in your naming.  In the interest of not confusing
+URLs, you create an "ugly" URL.  Be consistent in your naming.  In the
-people with different cases in URLs, I recommend strongly that you keep all
+interest of not confusing people with different cases in URLs, I
-file and folder names lowercase.  It will save you on headache relief down
+** strongly recommend** that you keep all file and folder names
-the road.
+lowercase.  It will save you on headache relief down the road.
 I recommend using folders to help you organize your site. Below is a
@@ Line 138: / Line 138: @@
 expect.  I recommend that you use index.html.
+===== Linking =====
+Linking can be a frustrating topic and I am going to try and make it as simple
+as I can.  You have two types of links -- absolute links and relative links.
+An absolute link looks just like a URL.  These types of links should be
+external to your own web page.  Relative links, on the other hand, are
+trickier, but just as important.  Lets assume that you have a structure for
+your website as I listed in
+[[site_organization#the_url_and_folders|The URL and Folders]].  Lets also
+assume that you have a page down in /sports/football called index.html and
+an images folder in /sports/football and you need to
+link to an image in the /images folder and the images folder in football.
+I've also added an images folder to crosscountry as well.
+<code>
+/
+|--images
+|
+|--sports
+|  |--football
+|  |  |--index.html
+|  |  |--images
+|  |
+|  |--crosscountry
+|  |  |--index.html
+|  |  |--images
+|  |
+|  |--images
+|  |  |--sports-header.jpg
+|  |
+|  |--index.html
+</code>
+In order to link to an image in the sports folder images from index.html
+in the football folder, you should use a relative link.  Here is how you
+would link it (the same relative link could be used in
+crosscountry/index.html as well):
+<code>
+<img src="../images/sports-header.jpg" alt="Sports">
+</code>
+The **../** tells the web browser to look in the folder just above this
+one (sports) and in the images folder below it and then for a file called
+sports-heading.jpg.  You could extend the chain of **..**'s in the
+relative link to reference an image in the /images folder as well:
+<code>
+<img src="../../images/site-header.jpg" alt="School">
+</code>
+This time, the browser is looking two levels up and into the images
+folder for a file called site-header.jpg.
 ===== Moving Forward =====
@@ Line 158: / Line 208: @@
   - Type in **cd %userprofile%\desktop** and then press the **Enter** key.
   - Type in **wget -m http://school.wcs.k12.va.us** and press the **Enter** key. Obviously, replace school with your school's initials (e.g. vies.wcs.k12.va.us).
-  - Sit back and relax until it is finished and returns to the **C:\Documents and Settings\username\Desktop** prompt.
+  - Sit back and relax until it is finished and returns to the **C:\Documents and Settings\username\Desktop**  (for Windows XP) or **C:\users\username\desktop** (for Windows Vista or Windows 7) prompt.
   - Type **exit** and press **Enter**.  The Command Prompt will go away.

Knowledge Base

User Tools

Site Tools

Differences

Page Tools