Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
  • 6 commits
  • 7 files changed
  • 0 comments
  • 1 contributor
36  dev1.html
... ...
@@ -1,18 +1,18 @@
1  
-<!doctype html>
2  
-<html>
3  
-<head>
4  
-	<title>OPRF Tech | The OPRF HS Technology Club</title>
5  
-	<link href='http://fonts.googleapis.com/css?family=Droid+Serif:regular,bold' rel='stylesheet' type='text/css'>
6  
-	<link rel=stylesheet href=style.css />
7  
-</head>
8  
-<body>
9  
-	<div id=wrapper>
10  
-		<img src="oprftech.png" alt="OPRF Tech | The OPRF HS Technology Club" id=oprftech />
11  
-		<article>
12  
-			<div id=big>
13  
-				
14  
-			</div>
15  
-		</article>
16  
-	</div>
17  
-</body>
18  
-<html>
  1
+<!doctype html>
  2
+<html>
  3
+<head>
  4
+	<title>OPRF Tech | The OPRF HS Technology Club</title>
  5
+	<link href='http://fonts.googleapis.com/css?family=Droid+Serif:regular,bold' rel='stylesheet' type='text/css'>
  6
+	<link rel=stylesheet href=style.css />
  7
+</head>
  8
+<body>
  9
+	<div id=wrapper>
  10
+		<img src="oprftech.png" alt="OPRF Tech | The OPRF HS Technology Club" id=oprftech />
  11
+		<article>
  12
+			<div id=big>
  13
+				
  14
+			</div>
  15
+		</article>
  16
+	</div>
  17
+</body>
  18
+<html>
105  index.html
... ...
@@ -1,51 +1,54 @@
1  
-<!doctype html>
2  
-<html>
3  
-<head>
4  
-	<title>OPRF Tech | The OPRF HS Technology Club</title>
5  
-	<link href='http://fonts.googleapis.com/css?family=Droid+Serif:regular,bold' rel='stylesheet' type='text/css'>
6  
-	<link rel=stylesheet href=style.css />
7  
-</head>
8  
-<body>
9  
-	<div id=wrapper>
10  
-		<img src="oprftech.png" alt="OPRF Tech | The OPRF HS Technology Club" id=oprftech />
11  
-		<article>
12  
-			<div id=big>
13  
-				<p>We are the Oak Park and River Forest High School Technology Club 
14  
-				(or as we prefer to call ourselves, OPRF Tech). We are a student run 
15  
-				organization interested in computers, specifically software 
16  
-				<span class=noshow>abigstringoftextthatshouldnotdisplayeverandifitdoessomethingbroke</span></p>
17  
-			</div>
18  
-			<div id=normal>
19  
-				<p>development, website development, and various pieces of hardware.</p>
20  
-				
21  
-				<p>Our current administrative board consists of a President 
22  
-				(<a href=http://dkuntz2.com>Don Kuntz</a>), a Vice-President 
23  
-				(<a href=http://tddesign.co.cc>Tony Phelps</a>), a Systems Administrator 
24  
-				(<a href=http://g-hub.co.cc>Germain McDaniel</a>), and a Robotics Chair 
25  
-				(<a href=http://tinyworkshop.org>Jeremy Bloyd-Peshkin</a>). Our Sponsor
26  
-				for the 2011 school year is Mr. Michalek of the Applied Technolgy
27  
-				Department</p>
28  
-				
29  
-				<p>One of the programs we have setup is a system for putting websites made 
30  
-				by our members on our website, some of those websites are (name) (name) and (name).</p>
31  
-				
32  
-				<p>Another program we have setup is a google apps account for our members, 
33  
-				they can access the following features: 
34  
-				<a href=http://mail.oprftech.co.cc>Mail</a>, 
35  
-				<a href=http://cals.oprftech.co.cc>Calendars</a>, and 
36  
-				<a href=http://docs.oprftech.co.cc>Docs</a>.</p>
37  
-				
38  
-				<p>We also have some instructional pages for our members, and anyone else
39  
-				who happnes to wonder upon our page, such as 
40  
-				<a href=localamp.html>Setting up a local *AMP server</a>, or 
41  
-				<a href=siteonline.html>Getting your own website online</a>.
42  
-			</div>
43  
-		</article>
44  
-		<footer>
45  
-			<p>This site was designed and developed by 
46  
-			<a href=http://dkuntz2.com>Don Kuntz</a> for the OPRF Technology Club.
47  
-			It was developed using html5 and css3.</p>
48  
-		</footer>
49  
-	</div>
50  
-</body>
51  
-</html>
  1
+<!DOCTYPE html>
  2
+<html>
  3
+<head>
  4
+	<title>OPRF Tech | The OPRF HS Technology Club</title>
  5
+	<link href='http://fonts.googleapis.com/css?family=Droid+Serif:regular,bold' rel='stylesheet' type='text/css' />
  6
+	<link rel="stylesheet" href="style.css" type="text/css" />
  7
+
  8
+	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
  9
+</head>
  10
+<body>
  11
+
  12
+<div id="container">
  13
+
  14
+</div>
  15
+
  16
+<script>
  17
+	loadPage();
  18
+
  19
+	function loadPage () {
  20
+		var h = $(location).attr('hash').replace("#", "");
  21
+		
  22
+		if (h == "") {
  23
+			h = "main";
  24
+		}
  25
+
  26
+		h = h + ".html";
  27
+		$.get(h, function (data) {
  28
+			$("#container").html(data);
  29
+		});
  30
+	}
  31
+
  32
+	$('#main').click(function () {
  33
+		$.get("main.html", function (data) {
  34
+			$("#container").html(data);
  35
+		})
  36
+	});
  37
+	
  38
+	$('#localamp').click(function () {
  39
+		alert("clicked localamp");
  40
+		$('#container').load("localamp.html");
  41
+		//$("#container").hide();
  42
+	});
  43
+
  44
+	$('#siteonline').click(function () {
  45
+		$('#container').load("siteonline.html");
  46
+	});
  47
+
  48
+	$("a").click(function(event) {
  49
+		loadPage();
  50
+	})
  51
+
  52
+</script>
  53
+</body>
  54
+</html>
317  localamp.html
... ...
@@ -1,153 +1,164 @@
1  
-<!doctype html>
2  
-<html>
3  
-<head>
4  
-	<title>A Local *AMP Server | OPRF Tech | The OPRF HS Technology Club</title>
5  
-	<link href='http://fonts.googleapis.com/css?family=Droid+Serif:regular,bold' rel='stylesheet' type='text/css'>
6  
-	<link href='http://fonts.googleapis.com/css?family=Droid+Sans+Mono' rel='stylesheet' type='text/css'>
7  
-	<link rel=stylesheet href=style.css type=css />
8  
-</head>
9  
-<body>
10  
-	<div id=wrapper>
11  
-		<a href=index.html>
12  
-			<img src="oprftech.png" alt="OPRF Tech | The OPRF HS Technology Club" id=oprftech />
13  
-		</a>
14  
-		<br />
15  
-		
16  
-		<article>
17  
-			<div id=big2>
18  
-				<h1>A Local *AMP Server</h1>
19  
-				
20  
-				<em>LAMP - Linux</em><br />
21  
-				<small>
22  
-					Most Linux distros use either apt-get/aptitude or yum. Ubuntu, the distro 
23  
-					we use uses apt-get. This guide is written for an apt-get/aptitude distro (if 
24  
-					you’re using an aptitude distro, replace all instances of apt-get with aptitude
25  
-				</small>
26  
-				<ul>
27  
-					<li>
28  
-						Open your terminal and type the following:
29  
-						<blockquote><code>
30  
-							sudo apt-get install apache2 php5 php5-gd mysql-server mysql-client 
31  
-							php5-mysql libapache2-mod-php5 php5-curl php5-xmlrpc php5-pear
32  
-						</code></blockquote>
33  
-					</li>
34  
-					<li>
35  
-						Bravo, you’ve now got a LAMP server installed. Your www folder (the 
36  
-						directory that contains your web files) is in /var/www, I suggest running 
37  
-						a second terminal command that unlocks that directory perminantly
38  
-						<blockquote><code>
39  
-							sudo chmod -r 0777 /var/www
40  
-						</code></blockquote>
41  
-					</li>
42  
-				</ul>
43  
-				
44  
-				<em>MAMP - Mac</em><br />
45  
-				<small>
46  
-					You need to be running 10.4.0 or higher to use MAMP<br />
47  
-					<strong>MAMP does not load on login</strong>
48  
-				</small>
49  
-				<ul>
50  
-					<li>
51  
-						Head over to <a href=http://mamp.info>http://mamp.info</a>, and download 
52  
-						just the standard mamp (not mamp pro).
53  
-					</li>
54  
-					<li>
55  
-						Drag the MAMP file out of the dmg and put it in your applications folder.
56  
-					</li>
57  
-					<li>
58  
-						Start MAMP, Start Apache and MySQL
59  
-					</li>
60  
-					<li>
61  
-						Open the Preferences, choose the Ports tab, and change the Apache port to 
62  
-						80 (this is the default port looked at when visiting 127.0.0.1)
63  
-					</li>
64  
-					<li>
65  
-						Now open the Apache tab, change the Document root to something else 
66  
-						(unless you like where it is). I suggest /users/[name]/www (or htdocs 
67  
-						instead of www).
68  
-					</li>
69  
-				</ul>
70  
-								
71  
-				<em>WAMP - Windows</em><br />
72  
-				<small>
73  
-					There are lots of options for windows, however EasyPHP, the one shown here is 
74  
-					the easiest to setup and use. You can also use EasyPHP on a flash drive.<br />
75  
-					<strong>EasyPHP does not load on login - you can tell it to do so if you want through the
76  
-					control panel</strong>
77  
-				</small>
78  
-				<ul>
79  
-					<li>
80  
-						Head over to <a href=http://www.easyphp.org>http://www.easyphp.org</a> and 
81  
-						download EasyPHP (not a module pack).
82  
-					</li>
83  
-					<li>
84  
-						Run the installer when it’s done downloading.
85  
-					</li>
86  
-					<li>
87  
-						Choose a directory you want for it to be installed in (I use 
88  
-						c:\users\[name]\localhost. If you want to do that, after you choose the 
89  
-						localhost folder (which you have to make) remove the \easyphp[version] from 
90  
-						the install location string)
91  
-					</li>
92  
-					<li>
93  
-						I personally change the start menu text from easyphp[version] to just 
94  
-						easyphp, but you can choose whatever you want.
95  
-					</li>
96  
-					<li>
97  
-						Now head over to your chosen directory and run EasyPHP[version].exe
98  
-						
99  
-						<ul>
100  
-							<li>
101  
-								If you go to 127.0.0.1 and don’t see anything or get an error, 
102  
-								open easyphpdir\conf_files and open httpd.conf in your text editor
103  
-							</li>
104  
-							<li>
105  
-								Now search for 127.0.0.1. If you find any instances that aren’t 
106  
-								commented out (that don’t have a # before them) and aren’t 127.0.0.1:80, 
107  
-								replace them to be 127.0.0.1:80
108  
-							</li>
109  
-							<li>
110  
-								Now try going to 127.0.0.1 in your browser again
111  
-							</li>
112  
-						</ul>
113  
-					</li>
114  
-				</ul>
115  
-				
116  
-			
117  
-			
118  
-			
119  
-			</div>
120  
-			
121  
-			<div id=normal2>
122  
-				<h1>FAQ</h1>	
123  
-				<ol>
124  
-					<li>
125  
-						What is *AMP?
126  
-						<blockquote>
127  
-							*AMP is * (variable placeholder) Apache MySQL PHP server. The variable 
128  
-							placeholder is for your computer’s operating system, L for Linux (LAMP), 
129  
-							M for Mac (MAMP) and W for Windows (WAMP)
130  
-						</blockquote>
131  
-					</li>
132  
-					<li>
133  
-						Why do I want One?
134  
-						<blockquote>
135  
-							An *AMP server is useful for local development of php/mysql or higher level 
136  
-							web development projects. I essentially gives you a server to play with 
137  
-							that’s only accessible on your computer, so it’s just for you.
138  
-						</blockquote>
139  
-					</li>
140  
-					<li>
141  
-						How will I know it's working?
142  
-						<blockquote>
143  
-							Open a web browser and head over to 127.0.0.1, if you get any sort of It 
144  
-							Works page, you’re golden (though some may have different pages shown)
145  
-						</blockquote>
146  
-					</li>
147  
-				</ol>
148  
-				
149  
-			</div>
150  
-		</article>
151  
-	</div>
152  
-</body>
153  
-</html>
  1
+		<a href="#main">
  2
+			<img src="oprftech.png" alt="OPRF Tech | The OPRF HS Technology Club" id="oprftech" />
  3
+		</a>
  4
+		<br />
  5
+		
  6
+		<article>
  7
+			<div id="big">
  8
+				There are nigh unlimited reasons to want to have your own local server,
  9
+				one of the biggest ones is simply so that you can create websites using
  10
+				PHP and MySQL without your own web server. Whatever
  11
+
  12
+				<span class="noshow">
  13
+					abiglongstringtobehiddenfromsightandsite
  14
+				</span>
  15
+			</div>
  16
+
  17
+			<div id="normal">
  18
+				<p>your reasons, they're yours, and they're probably good ones, and that's
  19
+				why this guide is here, to get you and your good reasons a local server
  20
+				to test on.</p>
  21
+
  22
+				<div class="lfloat">
  23
+					<small>
  24
+						<p><em>Some Answers to Questions:</em><br />
  25
+						You may have some questions, there might be some terminology you
  26
+						don't understand, and this section might have your answers</p>
  27
+
  28
+						<ul>
  29
+							<li>
  30
+								<strong>What does *AMP stand for?</strong><br />
  31
+								AMP stands for <em><strong>A</strong>pache</em> (the actual
  32
+								server software), <em><strong>M</strong>ySQL</em> (database
  33
+								software that's used by many sites and web based programs) and
  34
+								<em><strong>P</strong>HP</em> (a programming language for the web).
  35
+								The * is used because we don't know what operating system you're
  36
+								running, but the options are L (Linux), M (Mac OS X), 
  37
+								or W (Windows).
  38
+							</li>
  39
+							<li>
  40
+								<strong>What is a stack?</strong><br />
  41
+								A stack is a way of describing all of the software together,
  42
+								generally people have a LAMP stack, which is all of the software
  43
+								described above, just with a fancy word after it.
  44
+							</li>
  45
+							<li>
  46
+								<strong>What is different about a LAMP a MAMP or a WAMP stack?</strong><br />
  47
+								Nothing, other than the operating system they're running on, you
  48
+								can run the same software on each stack. Some configuations may
  49
+								be different (but those are set by both the user and the software
  50
+								being run to host the stack).
  51
+							</li>
  52
+							<li>
  53
+								<strong>Why would I want a *AMP stack?</strong><br />
  54
+								An *AMP server is useful for local development of php/mysql or 
  55
+								higher level web development projects. I essentially gives you a 
  56
+								server to play with that’s only accessible on your computer, so it’s
  57
+								just for you.
  58
+							</li>
  59
+							<li>
  60
+								<strong>How do I know if it works?</strong><br />
  61
+								Open a web browser and head over to 127.0.0.1, if you get any sort 
  62
+								of It Works page, you’re golden (though some may have different 
  63
+								pages shown)
  64
+							</li>
  65
+						</ul>
  66
+					</small>
  67
+				</div><!-- end of lfloat for FAQ -->
  68
+
  69
+				<p><em>LAMP - Linux (Debian Baesd)</em><br />
  70
+				<small>
  71
+					The distribution used by OPRF Tech is Ubuntu, which is based on Debian,
  72
+					and has apt-get. Other distributions may use a different program to fetch
  73
+					new applications (like yum or pacman), in which case, try substituting 
  74
+					apt-get with one of those.
  75
+				</small></p>
  76
+				<ul>
  77
+					<li>Open your terminal and type the following:<br />
  78
+						<blockquote><code>
  79
+							sudo apt-get install apache2 php5 php5-gd mysql-server mysql-client
  80
+							php5-mysql libapache2-mod-php5 php5-curl php5-xmlrpc php-pear
  81
+						</code></blockquote>
  82
+					</li>
  83
+					<li>
  84
+						Bravo! You've now got a LAMP server installed, your <code>www</code>
  85
+						directory (the one that holds all of the files for your local server)
  86
+						is located at <code>/var/www</code>. You may want to run another command
  87
+						to change the premissions to let you modify files inside of it<br />
  88
+						<blockquote><code>
  89
+							sudo chmod -R 0777 /var/www
  90
+						</code></blockquote>
  91
+					</li>
  92
+				</ul>
  93
+
  94
+				<p><em>MAMP - Mac OS X</em><br />
  95
+				<small>
  96
+					You need to be running Tiger (10.4.0) or higher to use MAMP. <br />
  97
+					<em>MAMP does not load at startup/login</em>
  98
+				</small></p>
  99
+				<ul>
  100
+					<li>
  101
+						You'll need to first grab the MAMP app, over at 
  102
+						<a href="http://mamp.info">http://mamp.info</a>, and download just
  103
+						the standard MAMP (you don't need MAMP Pro, unless you want to pay
  104
+						for it).
  105
+					</li>
  106
+					<li>
  107
+						Drag the MAMP.app file out of the DMG and place it in your applications
  108
+						directory.
  109
+					</li>
  110
+					<li>
  111
+						Now you need to tweak a few settings, so open up MAMP and head into
  112
+						the preferenecs.<br /><br />
  113
+						<ul>
  114
+							<li>Under the Ports tab, change the Apache port to 80. 80 is the default
  115
+							port that web browsers look for when visiting a website.</li>
  116
+							<li>Under the Apache tab, change the Document Root to the directory
  117
+							that you'll be using to keep the files for your local server. I
  118
+							suggest using /users/[your name]/www.</li>
  119
+						</ul>
  120
+					</li>
  121
+					<li>
  122
+						Awesome! You've got the server setup, now just open up MAMP and start
  123
+						Apache and MySQL and you're good to go.
  124
+					</li>
  125
+				</ul>
  126
+				
  127
+				<p><em>WAMP - Windows</em><br />
  128
+				<small>
  129
+					Windows has loads of options, however the easiest (and the one that we're
  130
+					going to ues) is called EasyPHP. If you want to, you can install EasyPHP
  131
+					on a flash drive and take it with you.<br />
  132
+					<em>EasyPHP does not start at startup/login</em>
  133
+				</small></p>
  134
+
  135
+				<ul>
  136
+					<li>
  137
+						You're going to need to nab a copy of EasyPHP. You can get the newest copy 
  138
+						through thier website, 
  139
+						<a href="http://www.easyphp.org">http://www.easyphp.org</a>, but it doesn't
  140
+						work as well as some of the legacy versions. The version I use and suggest 
  141
+						you use is 5.3.2i, which can be 
  142
+						<a href="http://sourceforge.net/projects/quickeasyphp/files/EasyPHP/5.3.2i/">
  143
+						downloaded from the archives</a>.
  144
+					</li>
  145
+					<li>
  146
+						Run the installer, pick whatever directory you want to install it in
  147
+						(this is both where you're going to keep your files and where the 
  148
+						server files are located), I suggest using C:\Users\[your name]\localhost.
  149
+					</li>
  150
+				</ul>
  151
+			</div>
  152
+		</article>
  153
+		<footer>
  154
+			<p>This site was designed and developed by 
  155
+			<a href="http://dkuntz2.com">Don Kuntz</a>
  156
+			for the OPRF Technology Club. It was developed using html5 and css3.</p>
  157
+
  158
+			<p>All code used on this site (and the accompanying photoshop document) are
  159
+			licensed under the <a href="http://www.gnu.org/copyleft/gpl.html">GNU GPL v3</a>.</p>
  160
+
  161
+			<p>This site, in it's entirety, is available on 
  162
+			<a href="http://github.com/OPRF-Tech/TechWeb">GitHub</a>, for all to use and remix as
  163
+			wanted.</p>
  164
+		</footer>
49  main.html
... ...
@@ -0,0 +1,49 @@
  1
+		<a href="#main" id="main">
  2
+			<img src="oprftech.png" alt="OPRF Tech | The OPRF HS Technology Club" id="oprftech" />
  3
+		</a>
  4
+		<article>
  5
+			<div id="big">
  6
+				<p>We are the Oak Park and River Forest High School Technology Club 
  7
+				(OPRF Tech). We are an organization interested in learning and sharing knowledge about all aspects of technology, from computers to robots.
  8
+
  9
+				<span class="noshow">
  10
+					abigstringoftextthatshouldnotdisplayeverandifitdoessomethingbroke
  11
+				</span>
  12
+				</p>
  13
+			</div>
  14
+			<div id="normal">
  15
+				<p>This section is filler, but important filler. The blurb that goes here is the thid thing that a visitor reads, following the title and giant blurb.</p>
  16
+
  17
+				<p><strong>Our Board:</strong><br />
  18
+				Co-Presidents: <a href="http://greenguygames.co.cc/">Tom Jozefowicz</a>
  19
+				and <a href="http://tinyworkshop.org">Jeremy Bloyd-Peshkin</a><br /> 
  20
+				Systems Administrator: <a href="http://tinyworkshop.org">Jeremy Bloyd-Peshkin</a></p>
  21
+
  22
+				<p>Our Sponsor for the 2011 school year is Mr. Michalek of the Applied Technolgy 
  23
+				Department</p> 
  24
+
  25
+				<p>One of the programs we have setup for members is free website hosting, You can see some of out members' sites once they make them.</p> 
  26
+				
  27
+				<p>Another program we have setup is complementary google apps. Members can access  
  28
+				<a href="http://mail.oprftech.co.cc">Mail</a>, 
  29
+				<a href="http://cals.oprftech.co.cc">Calendars</a>, and 
  30
+				<a href="http://docs.oprftech.co.cc">Docs</a> 
  31
+				with <a href="http://google.com">Google's</a> power and precision.</p> 
  32
+				
  33
+				<p>We also have some instructional pages to whet your appetite:
  34
+				<a href="#localamp" id="localamp">Setting up a local *AMP server</a>, or
  35
+				<a href="#siteonline" id="siteonline">Getting your own website online</a>.
  36
+			</div> <!-- end normal -->
  37
+		</article>
  38
+		<footer>
  39
+			<p>This site was designed and developed by 
  40
+			<a href="http://dkuntz2.com">Don Kuntz</a> <!-- Hey, that's me! -->
  41
+			for the OPRF Technology Club. It was developed using html5 and css3.</p>
  42
+
  43
+			<p>All code used on this site (and the accompanying photoshop document) are
  44
+			licensed under the <a href="http://www.gnu.org/copyleft/gpl.html">GNU GPL v3</a>.</p>
  45
+
  46
+			<p>This site, in it's entirety, is available on 
  47
+			<a href="http://github.com/OPRF-Tech/TechWeb">GitHub</a>, for all to use and remix as
  48
+			wanted.</p>
  49
+		</footer>
13  readme.md
Source Rendered
... ...
@@ -0,0 +1,13 @@
  1
+# TechWeb
  2
+## Now as a learning resource
  3
+
  4
+This is a copy of the 2011 edition of the OPRF Tech website, but with lots of comments for beginners
  5
+to see how the site was built.
  6
+
  7
+## Reading and Learning
  8
+
  9
+The suggested method for using this resource for learning is to have an html file and the css flie open at the same time in two windows, with a web browser pointing to your html file. This way you can see how different pieces of the files affect each other.
  10
+
  11
+It is suggested that you use Chrome or Safari while learning because of Webkit (the rendering engine)'s developer tools ([Turn on Safari's developer tools](http://www.apple.com/safari/features.html#developer)). You can use the Developers Tool to play around with the site inside of the browser (the css sidebar is especially nice).
  12
+
  13
+For new comers to website development, remember that you need to refresh your browser to see your changes (unless you're using the developer tools, in which case you need to transfer your changes from the tools to your files, otherwise the changes won't be saved).
250  siteonline.html
... ...
@@ -1,123 +1,127 @@
1  
-<!doctype html>
2  
-<html>
3  
-<head>
4  
-	<title>Get Your Website Online | OPRF Tech | The OPRF HS Technology Club</title>
5  
-	<link href='http://fonts.googleapis.com/css?family=Droid+Serif:regular,bold,italic' rel='stylesheet' type='text/css'>
6  
-	<link href='http://fonts.googleapis.com/css?family=Droid+Sans+Mono' rel='stylesheet' type='text/css'>
7  
-	<link rel=stylesheet href=style.css type=css />
8  
-</head>
9  
-<body>
10  
-	<div id=wrapper>
11  
-		<a href=index.html>
12  
-			<img src="oprftech.png" alt="OPRF Tech | The OPRF HS Technology Club" id=oprftech />
13  
-		</a>
14  
-		
15  
-		<article>
16  
-			<div id=big>
17  
-				<p>There are many reasons why you might want to get your own website online,
18  
-				but regardless of the reason, you want it online. We at the OPRF Technology
19  
-				Club understand, and are here to help you
20  
-				somethingreallylongthatshouldntshowupeverandifitdoessomethingbroke</p>
21  
-			</div>
22  
-			
23  
-			<div id=normal>
24  
-				<p>achieve that goal, using only free services. The reason we've written this
25  
-				guide is simply so that if our members (or former members) forget how they did 
26  
-				it during our 'online setup days' they've got the instructions laid out in 
27  
-				front of them.</p>
28  
-				
29  
-				<div class=lfloat>
30  
-					<p><em>Before you get started</em><br />
31  
-					You're going to need a few tools:</p>
32  
-					
33  
-					<ul class=none>
34  
-						<li>
35  
-							<a href=http://filezilla-project.org/download.php?type=client>FileZilla</a>
36  
-							or another ftp client<br />
37  
-							<small>FileZilla is an open source ftp (file transfer protocol) client that
38  
-							you can use to move files from your computer to your server.</small>
39  
-						</li>
40  
-						<li>
41  
-							<a href=http://jedit.org>jEdit</a> or another text editor<br />
42  
-							<small>jEdit is going to be used before you even start the hosting
43  
-							process, because you need to make a website before you can host a website.
44  
-							If you already have a website made you can ignore this requirement.</small>
45  
-						</li>
46  
-						<li>
47  
-							A Website<br />
48  
-							<small>While it may seem self-explanatory, but you do need a website before
49  
-							you can put a website online.</small>
50  
-						</li>
51  
-					</ul>
52  
-				</div>
53  
-				
54  
-				<p><em>Hosting with <strong>
55  
-				<a href=http://000webhost.com>000webhost</a></strong></em><br />
56  
-				<small>The reason we use 000freehosting is simply because their <em>free</em>. If you
57  
-				happen to be willing to spend money or want professional hosting, do so. I can
58  
-				suggest <a href=http://mediatemple.net>MediaTemple</a> and 
59  
-				<a href=http://stuzzhosting.com>StuzzHosting</a> to anyone looking for professional
60  
-				hosting.</small></p>
61  
-				
62  
-				<ol>
63  
-					<li>
64  
-						Go to <a href=http://000webhost.com>000's site</a> and sign up for an account and hosting.
65  
-						It make take a minute or two to be processed and ready to go<br />
66  
-						<small>Right now you don't have a domain (unless you set one up separately), so
67  
-						just use one of their second level domains.</small>
68  
-					</li>
69  
-					<li>
70  
-						Once you've been processed, enter your control panel, the important things are all
71  
-						either in your head or in the sidebar.<br />Copy the Username (it's a followed by a
72  
-						string of numbers), you're going to use this in FileZilla.
73  
-					</li>
74  
-					<li>
75  
-						Open FileZilla if you don't already have it open, and click on the site's icon (the
76  
-						first icon in the toolbar). You should see the Site Manager.<br />
77  
-						<small>You can come back to this later for other sites you setup too. It also has
78  
-						the ability to change FileZilla settings just for one site.</small>
79  
-					</li>
80  
-					<li>
81  
-						<div class=lfloat>
82  
-							The <strong>Host</strong> is <em>your site's address</em><br /> 
83  
-							Leave the <strong>Port</strong> blank<br />
84  
-							The <strong>Server Type</strong> is <em>FTP - File Transfer Protocol</em><br />
85  
-							The <strong>Logon Type</strong> is <em>Normal</em><br />
86  
-							The <strong>User</strong> is the <em>username you copied earlier</em><br />
87  
-							And the <strong>Password</strong> is <em>your chosen password</em>
88  
-						</div>
89  
-						Click on the "New Site" button.<br />
90  
-						<small>The settings are to the left.</small><br />
91  
-					</li>
92  
-					<li>
93  
-						Don't close out of the Site Manager, but click Connect down at the bottom. This will
94  
-						connect you to your site.<br />
95  
-						<small>To connect to your site again, click on the same icon, choose your site, and
96  
-						click connect. If you're on windows (I don't know about OSX), you'll have a drop down
97  
-						button next to the icon, click it and your site to connect, sorry Linux users.</small>
98  
-					</li>
99  
-					<li>
100  
-						<div class=lfloat>
101  
-							<p>You can, if you want, set FileZilla to automatically open the publicftp directory
102  
-							open the site manager, choose the current site, and open the Advanced tab.</p>
103  
-							
104  
-							<p>In the Advanced tab there's a &ldquo;Default remote directory&rdquo; field,
105  
-							change that to <code>/publicftp</code>, and you'll now automatically connect to the
106  
-							publicftp directory</p>
107  
-						</div>
108  
-						
109  
-						The default directory for 000 sites isn't where you're supposed to upload files (in 
110  
-						fact they even put a file called .DONOTUPLOAD in the directory. You need to upload to
111  
-						the publicftp directory. As such, open the publicftp directory, and drag your files from
112  
-						your file browser of choice into the publicftp directory.<br />
113  
-					</li>
114  
-					<li>
115  
-						Now navigate to your site, you should see the site you just uploaded (unless you don't
116  
-						have your home page named index.html, index.php, index.htm, or default in place of index).
117  
-					</li>
118  
-				</ol>
119  
-			</div>
120  
-		</article>
121  
-	</div>
122  
-</body>
123  
-</html>
  1
+		<a href="#main" rel="ajax">
  2
+			<img src="oprftech.png" alt="OPRF Tech | The OPRF HS Technology Club" id="oprftech" />
  3
+		</a>
  4
+		
  5
+		<article>
  6
+			<div id="big">
  7
+				<p>There are many reasons why you might want to get your own website online,
  8
+				but regardless of the reason, you want it online. We at the OPRF Technology
  9
+				Club understand, and are here to help you
  10
+				<span class="noshow">
  11
+					abigstringoftextthatshouldnotdisplayeverandifitdoessomethingbroke
  12
+				</span>
  13
+				</p>
  14
+			</div>
  15
+			
  16
+			<div id="normal">
  17
+				<p>achieve that goal, using only free services. The reason we've written this
  18
+				guide is simply so that if our members (or former members) forget how they did 
  19
+				it during our 'online setup days' they've got the instructions laid out in 
  20
+				front of them.</p>
  21
+				
  22
+				<div class="lfloat">
  23
+					<p><em>Before you get started</em><br />
  24
+					You're going to need a few tools:</p>
  25
+					
  26
+					<ul class="none">
  27
+						<li>
  28
+							<strong><a href="http://filezilla-project.org/download.php?type=client">FileZilla</a></strong>
  29
+							or another ftp client<br />
  30
+							<small>FileZilla is an open source ftp (file transfer protocol) client that
  31
+							you can use to move files from your computer to your server.</small>
  32
+						</li>
  33
+						<li>
  34
+							<strong><a href="http://jedit.org">jEdit</a></strong> or another text editor<br />
  35
+							<small>jEdit is going to be used before you even start the hosting
  36
+							process, because you need to make a website before you can host a website.
  37
+							If you already have a website made you can ignore this requirement.</small>
  38
+						</li>
  39
+						<li>
  40
+							<strong>A Website</strong><br />
  41
+							<small>While it may seem self-explanatory, but you do need a website before
  42
+							you can put a website online.</small>
  43
+						</li>
  44
+					</ul>
  45
+				</div>
  46
+				
  47
+				<p><em>Hosting with
  48
+				<a href="http://000webhost.com">000webhost</a></em><br />
  49
+				<small>The reason we use 000freehosting is simply because they're <em>free</em>. 
  50
+				If you happen to be willing to spend money or want professional hosting, do so. I can
  51
+				suggest <a href="http://mediatemple.net">MediaTemple</a> and 
  52
+				<a href="http://stuzzhosting.com">StuzzHosting</a> to anyone looking for professional
  53
+				hosting.</small></p>
  54
+				
  55
+				<ol>
  56
+				<!--
  57
+					I'm fairly certain that this is the only new thing.
  58
+
  59
+					The ol tag (for ordered list) is used to make numbered lists. It works exactly
  60
+					the same as the ul tag, just with numbers instead.
  61
+				-->
  62
+
  63
+					<li>
  64
+						Go to <a href="http://000webhost.com">000's site</a> and sign up for an 
  65
+						account and hosting. It make take a minute or two to be processed and ready 
  66
+						to go<br />
  67
+						<small>Right now you don't have a domain (unless you set one up separately), 
  68
+						so just use one of their second level domains.</small>
  69
+					</li>
  70
+					<li>
  71
+						Once you've been processed, enter your control panel, the important things are all
  72
+						either in your head or in the sidebar.<br />Copy the Username (it's 
  73
+						<code>a</code> followed by a string of numbers).
  74
+					</li>
  75
+					<li>
  76
+						Open FileZilla if you don't already have it open, and click on the site's icon (the
  77
+						first icon in the toolbar). You should see the Site Manager.<br />
  78
+						<small>You can come back to this later for other sites you setup too. 
  79
+						It also has the ability to change FileZilla settings just for one site.
  80
+						</small>
  81
+					</li>
  82
+					<li>
  83
+						<div class="lfloat">
  84
+							The <strong>Host</strong> is <em>your site's address</em><br /> 
  85
+							Leave the <strong>Port</strong> blank<br />
  86
+							The <strong>Server Type</strong> is <em>FTP - File Transfer Protocol</em><br />
  87
+							The <strong>Logon Type</strong> is <em>Normal</em><br />
  88
+							The <strong>User</strong> is the <em>username you copied earlier</em><br />
  89
+							And the <strong>Password</strong> is <em>your chosen password</em>
  90
+						</div>
  91
+						Click on the "New Site" button.<br />
  92
+						<small>The settings are to the left.</small><br />
  93
+						After you fill in those settings, go into the Advanced tab, and find the
  94
+						<code>Default Remote Directory</code> option, and set it to 
  95
+						<code>/publicftp</code>. You're doing this because it will make sure 
  96
+						that when you connect to the site, you're in the right remote directory
  97
+						(the one which holds the files for your site).
  98
+					</li>
  99
+					<li>
  100
+						Don't close out of the Site Manager, but click Connect down at the bottom. This will
  101
+						connect you to your site.<br />
  102
+						<small>To connect to your site again, click on the same icon, choose your site, and
  103
+						click connect. If you're on windows (I don't know about OSX), you'll have a drop down
  104
+						button next to the icon, click it and your site to connect, sorry Linux users.</small>
  105
+					</li>
  106
+					<li>
  107
+						Now navigate to your site, you should see the site you just uploaded (unless you don't
  108
+						have your home page named index.html, index.php, index.htm, or default in place of index).
  109
+					</li>
  110
+				</ol>
  111
+			</div>
  112
+		</article>
  113
+		<footer>
  114
+			<p>This site was designed and developed by 
  115
+			<a href="http://dkuntz2.com">Don Kuntz</a>
  116
+			for the OPRF Technology Club. It was developed using html5 and css3.</p>
  117
+
  118
+			<p>All code used on this site (and the accompanying photoshop document) are
  119
+			licensed under the <a href="http://www.gnu.org/copyleft/gpl.html">GNU GPL v3</a>.</p>
  120
+
  121
+			<p>This site, in it's entirety, is available on 
  122
+			<a href="http://github.com/OPRF-Tech/TechWeb">GitHub</a>, for all to use and remix as
  123
+			wanted.</p>
  124
+		</footer>
  125
+	</div>
  126
+</body>
  127
+</html>
540  style.css
... ...
@@ -1,172 +1,368 @@
1  
-body {
2  
-	font-family: "Droid Serif", serif;
3  
-	background:url(background.jpg);
4  
-}
5  
-
6  
-#wrapper {
7  
-	width:920px;
8  
-	margin:50px auto 0;
9  
-	padding:0 20px;
10  
-}
11  
-
12  
-#oprftech {
13  
-	height:77px;
14  
-	margin:26px 0 36px;
15  
-	float:right;
16  
-	clear:both;
17  
-}
18  
-
19  
-#big {
20  
-	width:500px;
21  
-	font-size:18pt;
22  
-	float:left;
23  
-	margin:0 20px 0px 0;
24  
-	color:rgb(255,255,255);
25  
-	text-align:justify;
26  
-	text-justify:right;
27  
-	font-family: "Droid Serif", serif;
28  
-	line-height:1.4em;
29  
-	max-height:8em;
30  
-	overflow:hidden;
31  
-	display:inline;
32  
-}
33  
-
34  
-.noshow {
35  
-	visibility:hidden;
36  
-}
37  
-
38  
-#normal {
39  
-	width:500px;
40  
-	color:rgb(255,255,255);
41  
-	margin-left:390px;
42  
-	padding-top:100px;
43  
-	line-height:1.5em;
44  
-	margin-bottom:0;
45  
-	padding-bottom:0;
46  
-}
47  
-#normal p {
48  
-	padding-bottom:1em;
49  
-	margin:0;
50  
-}
51  
-
52  
-p a, a:visited {
53  
-	font-weight:bold;
54  
-	color:rgb(150,200,255);
55  
-	text-decoration:none;
56  
-}
57  
-p a:hover, p a:visited:hover {
58  
-	border-bottom:rgb(120,220,200) 2px solid;
59  
-	color:rgb(120,220,200);
60  
-}
61  
-p a:active, p a:visited:active {
62  
-	border-bottom:rgb(220,180,180) 2px solid;
63  
-	color:rgb(220,180,180);
64  
-}
65  
-
66  
-footer {
67  
-	width:330px;
68  
-	margin-top:-4.95em;
69  
-	color:rgb(255,255,255);
70  
-	font-size:.8em;
71  
-	line-height:1.9em;
72  
-	margin-left:40px;
73  
-	text-align:justify;
74  
-}
75  
-footer p {
76  
-	padding:0;
77  
-	margin:0;
78  
-}
79  
-
80  
-/* *amp server page */
81  
-#big2 {
82  
-	width:500px;
83  
-	font-size:18pt;
84  
-	float:left;
85  
-	margin:5px 20px 0px 0;
86  
-	color:rgb(255,255,255);
87  
-	text-align:justify;
88  
-	text-justify:right;
89  
-	font-family: "Droid Serif", serif;
90  
-	line-height:1.4em;
91  
-	overflow:hidden;
92  
-	display:inline;
93  
-}
94  
-
95  
-#big2 blockquote {
96  
-	font-size:12pt;
97  
-	word-spacing:-.1em;
98  
-	margin:.5em 0 .5em 3em;
99  
-}
100  
-#big2 li {
101  
-	font-size:12pt;
102  
-	line-height:1.5em;
103  
-	padding-bottom:1em;
104  
-}
105  
-#big2 small {
106  
-	font-size:9.6pt;
107  
-	line-height:1.9em;
108  
-}
109  
-#big2 ul {margin-bottom:0;}
110  
-
111  
-h1 {
112  
-	font-size:1.3em;
113  
-	line-height:1em;
114  
-	margin-top:0;
115  
-	padding-top:0;
116  
-}
117  
-
118  
-#normal2 {
119  
-	width:370px;
120  
-	color:rgb(255,255,255);
121  
-	margin-left:520px;
122  
-	padding-top:100px;
123  
-	line-height:1.5em;
124  
-	margin-bottom:0;
125  
-	padding-bottom:0;
126  
-	text-align:justify;
127  
-}
128  
-#normal2 p {
129  
-	padding-bottom:1em;
130  
-	margin:0;
131  
-}
132  
-#normal2 blockquote {
133  
-	margin:0;
134  
-	padding:.5em 0em .5em 2em;
135  
-}
136  
-#normal2 li {
137  
-	padding-bottom:1em;
138  
-}
139  
-code {
140  
-	font-family:"Droid Sans Mono", monospace;
141  
-	font-size:.9em;
142  
-}
143  
-
144  
-ul, ol {
145  
-	margin:0 0 auto;
146  
-}
147  
-
148  
-li {
149  
-	padding-bottom:.8em;
150  
-}
151  
-
152  
-.lfloat {
153  
-	width:340px;
154  
-	float:left;
155  
-	margin-left:-360px;
156  
-	margin-top:-50px;
157  
-	font-size:.95em;
158  
-	text-align:justify;
159  
-}
160  
-.lfloat ul.none {
161  
-	list-style:none;
162  
-	margin:0;
163  
-	padding:0em 0 .5em 0em;
164  
-}
165  
-.lfloat li {
166  
-	padding-bottom:.8em;
167  
-}
168  
-
169  
-li .lfloat {
170  
-	margin-left:-400px;
171  
-	margin-top:0;
172  
-}
  1
+/*
  2
+	This is the CSS file that manages the whole site (you can have multiple css files
  3
+	for a single site, but this one doesn't).
  4
+
  5
+	CSS stands for Cascading StyleSheets, which means it's a sheet of styles that reads
  6
+	from top to bottom.
  7
+
  8
+	A difference here from html, comments are not encapsulated by the <!-- comment --> tag,
  9
+	but instead by the slahs (/) star (*) -comment- star (*) slash (/) as seen on lines
  10
+	1 and 11.
  11
+*/
  12
+
  13
+body {
  14
+/*
  15
+	body defines what is being styled, the curly brace "{" tells the browser that
  16
+	it's the beginning of the styles for the thing being styled. (a matching curly
  17
+	brace "}" is used to tell the browser that we're done styling the element).
  18
+*/
  19
+
  20
+	font-family: "Droid Serif", serif;
  21
+	/*
  22
+		font-family is the thing being styled here. The colon is used after the
  23
+		type of stying being done (in this case, we're defining what the font-face
  24
+		for the body is going to be, or in simpler terms, changing the font used
  25
+		on the whole page). Everything after the colon, but before the semicolon
  26
+		is the value of the element.
  27
+
  28
+		What the above line (20) does is tell the browser that the entire page
  29
+		should be rendered in the font "Droid Serif", and if that font can't be
  30
+		found, use the default serifed font for the system.
  31
+
  32
+		The way font-face works is that you can't just use any font you want, but
  33
+		only fonts that are installed on the viewer's computer. You can define any
  34
+		font you want, but the only way for it to be rendered on the visitor's 
  35
+		screen is for them to either have the font installed or to ues a web service
  36
+		or other method (I'm not going to get into those here).
  37
+
  38
+		After you define which specific fonts you want, you can (and should) also
  39
+		define their family, serif (the ones with little lines coming off of the ends,
  40
+		like Droid Serif, Times New Roman or Garamond), sans-serif (they don't have
  41
+		the lines, like Helvetica, Arial and Droid Sans) or monospaced (fonts that
  42
+		are fixed width (each character takes up the exact same space, like a 
  43
+		typewriter), like Courier Nueue, Monaco or Droid Sans Mono).
  44
+
  45
+		The way this page is able to display Droid Serif to everybody is by using
  46
+		the Google Web Fonts service (http://google.com/webfonts), which is providing
  47
+		the font for any visitor.
  48
+	*/
  49
+
  50
+	background: url(background.jpg);
  51
+	/*
  52
+		background defines the background image. There are more options for the 
  53
+		background element, but only one is used here because the defaults for them
  54
+		are fine.
  55
+
  56
+		This definition is telling the browser that we want to use the file 
  57
+		'background.jpg' (which is relative to the css document, see the index file
  58
+		for more information on relative vs absolute file addresses) to be used as
  59
+		the background of the entire page, and we want it to repeat both accross the
  60
+		x- and y-axis.
  61
+	*/
  62
+
  63
+}
  64
+
  65
+#container {
  66
+/*
  67
+	The pound ( # ) before the word container tells us that we're styling
  68
+	the ID container (or in html, we're styling <div id="container">).
  69
+*/
  70
+
  71
+	width:920px;
  72
+	/*
  73
+		This sets the width of the container to 920 pixels. One pixel is the
  74
+		smallest unit of measurement you can use on a web page. By setting the
  75
+		width of the page, we're saying that all of the content has to fit inside
  76
+		of that width.
  77
+	*/
  78
+
  79
+	margin:50px auto 0;
  80
+	/*
  81
+		margin sets the amount of space between different sides of the box
  82
+		(read up on the css box-model at http://css-tricks.com/2841-the-css-box-model/).
  83
+
  84
+		Margin and Padding are similar in that they can take the same inputs, in the same
  85
+		order. They can have one, two, three, or four values.
  86
+
  87
+		If only one value is given, every side gets the same margin (the value).
  88
+			example: margin:50px; - that gives every side a 50 pixel margin
  89
+		
  90
+		If two values are given, the first is the top and bottom, and the second is
  91
+		the left and right.
  92
+			margin:50px 100px; - the top and bottom of the box get a margin of 50 pixels
  93
+				and the left and right get a margin of 100 pixels
  94
+		
  95
+		If three values are given (like here), the first value is the top, the second value
  96
+		is the left and right, and the third value is the bottom.
  97
+			margin:50px auto 0; - the top of the box has a margin of 50 pixels, the left
  98
+				and right get an auto margin (see below), and the bottom has a margin of
  99
+				zero pixels.
  100
+		
  101
+		If four values are given, the values start at the top and go clockwise.
  102
+			margin:10px 20px 30px 40px; - the top has a margin of 10 pixels, the right
  103
+				has a margin of 20 pixels, the bottom has a margin of 30 pixels, and the
  104
+				left has a value of 40 pixels.
  105
+
  106
+		Using the auto value:
  107
+			left and right set to auto : Centers the box insdie of it's parent
  108
+			left : places the right edge of the box along the right side of the screen
  109
+			right : places the left edge of the box along the left side of the screen
  110
+	*/
  111
+
  112
+	padding:0 20px;
  113
+	/*
  114
+		Read on the margin, above. It's the same, but for the padding
  115
+		(see the link in the margin's explaination for information on the
  116
+		box-model).
  117
+	*/
  118
+
  119
+}
  120
+
  121
+#oprftech {
  122
+/*
  123
+	This is used to define the oprftech id's object (or the image that
  124
+	says OPRF Tech on it).
  125
+*/
  126
+
  127
+	height:77px;
  128
+	/*
  129
+		This sets the height of the item to 77 pixels, meaning that it can't take up
  130
+		more space than that. It's specified for this item because it floats (see below).
  131
+	*/
  132
+
  133
+	margin:26px 0 36px;
  134
+	float:right;
  135
+	/*
  136
+		Floats are fairly common nowadays in css. Floating an item is similar to, in
  137
+		Microsoft Word or LibreOffice, making an image squared with the text. It makes
  138
+		the box of the item being floated either set to be left or right of the content
  139
+		that follows. See how it's done on the pages.
  140
+
  141
+		Float has three options, the default is none (which is the same as not even putting
  142
+		in the float option), right or left, depending on which side of the following content
  143
+		you want it to be on.
  144
+	*/
  145
+
  146
+	clear:both;
  147
+	/*
  148
+		Clearning means that nothing that follows it in the html can go to the specified
  149
+		value (the three options for the value are right, left, or both). In this case, it
  150
+		means that anything that comes after it can't be to the right or left of it on the
  151
+		screen.
  152
+
  153
+		If you used left or right instead of both, content could appear on the opposite
  154
+		side as you've specified.
  155
+	*/
  156
+}
  157
+
  158
+#big {
  159
+/*
  160
+	This is the definition for the larger sized text seen at the beginning of pages.
  161
+*/
  162
+
  163
+	width:500px;
  164
+	font-size:18pt;
  165
+	/*
  166
+		font-size specifies the size of the text, the units you can use are pixels,
  167
+		points (1 point = 1/72 inches) or em (a scalable unit based on the parent's
  168
+		size, where 1em is equal to the same size as the parent).
  169
+	*/
  170
+
  171
+	float:left;
  172
+	margin:0 20px 0px 0;
  173
+	color:rgb(255,255,255);
  174
+	/*
  175
+		color specifies the font color. You can use hex (#000000 - #ffffff), words
  176
+		(like black, white, green, aqua, blue, red, ect) or rgb (a better method for 
  177
+		trying to mix colors - rgb(0-255,0-255,0-255)).
  178
+	*/
  179
+	
  180
+	text-align:justify;
  181
+	/*
  182
+		text-align is just like the alignment in a word processor, your options are
  183
+		left (default), right, centered or justified. Justified means that the text
  184
+		takes up all of the available space by dynamically changing the amount of 
  185
+		space between words, creating a distinct left and right edge of the text
  186
+		(instead of the jagged text of left/right/centered).
  187
+	*/
  188
+
  189
+	font-family: "Droid Serif", serif;
  190
+	line-height:1.4em;
  191
+	/*
  192
+		line-height is used to set the height of each line (like in a word processor).
  193
+		It can use the same units as font-size, in this case it uses em, making it 
  194
+		1.4 times the height of the font size (or 1.4*18 = 25.2pt).
  195
+	*/
  196
+
  197
+	max-height:8em;
  198
+	/*
  199
+		This sets a maximum height. Similar to setting the height, but instead of
  200
+		making it exactly a certain height, it can't get bigger than this height.
  201
+		
  202
+		It's used here to make sure you don't have too many lines of text in the
  203
+		bigtext area.
  204
+	*/
  205
+
  206
+	overflow:hidden;
  207
+	/*
  208
+		overflow controls what happens to the content that goes outside of the specified
  209
+		box. The options are visible (default - it still shows it and nothing happes), 
  210
+		hidden (it just isn't shown at all, it disappears), or scroll (which adds in a
  211
+		scrollbar to the box).
  212
+
  213
+		It's used here to make sure that any text that goes over the box doesn't show up
  214
+		on the page and force only a few lines in the bigtext div.
  215
+	*/
  216
+
  217
+}
  218
+
  219
+.noshow {
  220
+/*
  221
+	A period ( . ) before a word means that you're defining a class, or in html
  222
+	<span class="noshow"> (you could use a different element than span, but it's 
  223
+	used here because it's also used in the html the same way).
  224
+*/
  225
+
  226
+	visibility:hidden;
  227
+	/*
  228
+		visibility controls if the item is shown on the page, read by a screen-reader,
  229
+		copied when the sections before and after it are selected and pretty much
  230
+		just says whether or not the content means anything to the page.
  231
+
  232
+		If something is wrapped in noshow, that means it doesn't exist anywhere but the
  233
+		html code for all intents and purposes.
  234
+
  235
+		The only other option for visibility is the default of visible.
  236
+	*/
  237
+
  238
+}
  239
+
  240
+#normal {
  241
+	width:500px;
  242
+	color:rgb(255,255,255);
  243
+	margin-left:390px;
  244
+	/*
  245
+		Just like how you can use margin: value1 value2 value3 value4; you can also use
  246
+		margin-(top/right/bottom/left) to control a specific margin, same with padding.
  247
+
  248
+		Again, if you haven't yet, read up on the box model, see the link on line 82
  249
+	*/
  250
+
  251
+	margin-bottom:0;
  252
+	padding-bottom:0;
  253
+	padding-top:100px;
  254
+	line-height:1.5em;
  255
+}
  256
+#normal p {
  257
+/*
  258
+	When you have two items in your selector, it means that the second (or third, or
  259
+	fourth, and so on down however far) must be inside of the item before it (in this
  260
+	case, we're selecting paragraphs inside of the normal div).
  261
+*/
  262
+
  263
+	padding-bottom:1em;
  264
+	margin:0;
  265
+}
  266
+
  267
+p a, p a:visited, li a, li a:visited {
  268
+/*
  269
+	Using a comma in a selector is akin to defining each value between commas as
  270
+	their own definition, but making them all the same (that doesn't sound very
  271
+	good but it was the best I could do).
  272
+
  273
+	In this case, we're styling all anchors inside of a paragraph, all 
  274
+	visited anchors inside of a paragraph, and the same two before, but inside of
  275
+	a list item instead of a paragraph (four items are being styled with one defintion).
  276
+
  277
+	Things after a colon in a selector are called psuedo-classes. The big ones are
  278
+	all for anchors (links), and they're :visited (for a link that you've visited 
  279
+	previously), :hover (for when your cursor is over it (it can be used on non-links
  280
+	too)) and :active (for when you're clicking on the link (can also be used on
  281
+	non-links)).
  282
+*/
  283
+
  284
+	font-weight:bold;
  285
+	/*
  286
+		The font weight is generally either normal or bold. If you get more advanced
  287
+		and start importing your own fonts (I'm not getting into it here), you may
  288
+		use a numbering system, but don't worry about it.
  289
+	*/
  290
+
  291
+	color:rgb(150,200,255);
  292
+	text-decoration:none;
  293
+	/*
  294
+		text-decoration is just decorating the text, the main options are none, underline,
  295
+		overline (a line over the text) or line-through (a strikeout). There are some
  296
+		other ones, but most people don't use them frequently, if at all.
  297
+	*/
  298
+}
  299
+
  300
+p a:hover, p a:visited:hover, li a:hover, li a:visited:hover {
  301
+	border-bottom:rgb(120,220,200) 2px solid;
  302
+	/*
  303
+		Borders are like margins and padding, you can define a global one (for all
  304
+		sides of your box) or individual ones. In this case, it's just a border 
  305
+		underneath the item.
  306
+
  307
+		borders accept the following options: color size type.
  308
+
  309
+		The color and size are self-explainitory, the types available are solid (for
  310
+		a solid line), dashed (for a dashed line) or none (which would be slightly
  311
+		useless, and exactly like not defining a border).
  312
+	*/
  313
+
  314
+	color:rgb(120,220,200);
  315
+}
  316
+p a:active, p a:visited:active, li a:active, li a:visited:active {
  317
+	border-bottom:rgb(220,180,180) 2px solid;
  318
+	color:rgb(220,180,180);
  319
+}
  320
+
  321
+footer {
  322
+	width:330px;
  323
+	margin-top:-14.3em;
  324
+	color:rgb(255,255,255);
  325
+	font-size:.8em;
  326
+	line-height:1.9em;
  327
+	margin-left:40px;
  328
+	text-align:justify;
  329
+}
  330
+footer p {
  331
+	padding:0;
  332
+	margin:0;
  333
+}
  334
+
  335
+code {
  336
+	font-family:"Droid Sans Mono", monospace;
  337
+	font-size:.9em;
  338
+}
  339
+
  340
+ul, ol {
  341
+	margin:0 0 auto;
  342
+}
  343
+
  344
+li {
  345
+	padding-bottom:.8em;
  346
+}
  347
+
  348
+.lfloat {
  349
+	width:340px;
  350
+	float:left;
  351
+	margin-left:-360px;
  352
+	margin-top:-50px;
  353
+	font-size:.95em;
  354
+	text-align:justify;
  355
+}
  356
+.lfloat ul.none {
  357
+	list-style:none;
  358
+	margin:0;
  359
+	padding:0em 0 .5em 0em;
  360
+}
  361
+.lfloat li {
  362
+	padding-bottom:.8em;
  363
+}
  364
+
  365
+li .lfloat {
  366
+	margin-left:-400px;
  367
+	margin-top:0;
  368
+}

No commit comments for this range

Something went wrong with that request. Please try again.