Skip to content

Instantly share code, notes, and snippets.

@magmastonealex

magmastonealex/index.html

Created October 3, 2013 20:32
Show Gist options
  • Save magmastonealex/6816653 to your computer and use it in GitHub Desktop.
Save magmastonealex/6816653 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!-- saved from url=(0025)http://magmastone.net/CS/ -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Computer Science - Alex Roth</title>
<link href="./Computer Science - Alex Roth_files/css" rel="stylesheet" type="text/css">
<link href="./Computer Science - Alex Roth_files/index.css" rel="stylesheet" type="text/css">
<script src="./Computer Science - Alex Roth_files/jquery.min.js"></script>
<script src="./Computer Science - Alex Roth_files/index.js"></script>
<style type="text/css"></style></head>
<body style="background-color: rgb(204, 204, 204);">
<h1 style="text-align:center;font-family: &#39;Hanalei Fill&#39;, cursive;font-weight:normal;font-size:350%">Computer Science Assignments</h1>
<div class="collapser">
<h3>Assignment 1</h3><img class="cImg" src="./Computer Science - Alex Roth_files/triangle-up.png" width="20px" height="20px">
<div class="tocollapse" style="display: none;">
<ol>
<li><p>The four tags always required are
</p><ul>
<li><code>&lt;!doctype&gt;</code></li>
<li><code>&lt;html&gt;</code></li>
<li><code>&lt;head&gt;</code></li>
<li><code>&lt;body&gt;</code></li>
</ul><p></p></li>
<li><p><br>
a) <code>&lt;h3&gt;&lt;b&gt;We are Proud People&lt;/b&gt;&lt;/h3&gt;</code><br>
b) <code>&lt;hr&gt;</code><br>
c) <code>&lt;h1&gt;&lt;b&gt;Orbit&lt;/b&gt;&lt;/h1&gt;</code><br>
d) <code>&lt;h2&gt;The Geometric Shapes&lt;/h2&gt;</code><br>
e) <code>&lt;hr&gt;</code><br>
</p></li>
</ol>
<br><br>
<h2 style="margin-left:1em;">Task #1</h2>
<a style="margin-left:2em;" href="http://magmastone.net/CS/t1.html">Link to Task #1</a>
</div>
</div>
<div class="collapser">
<h3>Assignment 2</h3><img class="cImg" src="./Computer Science - Alex Roth_files/triangle-up.png" width="20px" height="20px">
<div class="tocollapse" style="display: none;">
<ol>
<li><p>Commented source of bawsi.css</p>
<div class="big">
<code>
body { /*SHow all fonts by default as 10pt, in<br> Verdana, Geneva, Ariel, Helvetica, whichever is avaiable.<br> Remove sarifs as well.<br> Default text color is black<br> The height of each line is 14pt (this adds padding on top and bottom of line.)<br> Put padding on all sides of body, this moves the content from the edges of the page.<br> */ <br>font-size: 10pt;<br>font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;<br>color: black;<br>line-height: 14pt;<br>padding-left: 5pt;<br>padding-right: 5pt;<br>padding-top: 5pt;<br>}<br>h1 { <br>/*On all large headers, use the fonts specified, whichever is available<br> Make the font bold, and make the line height 20 points.<br>*/<br>font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;<br>font-weight: bold;<br>line-height: 20pt;<br>}<br>p.subheader {<br> /*Make subheadings bold, and hex colour #593d87 */<br>font-weight: bold;<br>color: #593d87;<br>}<br>img { /* Add 3pt padding on all sides, <br> and make the image float right when possible.<br> */<br>padding: 3pt;<br>float: right;<br>}<br>a {<br> /* On links, (and other anchors), remove default underlines <br> Make them display on their own line. Also, they have a fixed width and height of 30px<br> */<br>text-decoration: none;<br>display: block;<br>width: 30;<br>height: 30;<br>}<br>a:link, a:visited { /* On links both visted and plain, <br> make them one color<br> */<br>color: #8094d6;<br>}<br>a:hover, a:active {<br> /* On links when hovering, make it one color<br> */<br>color: #FF9933;<br>}<br> /*<br> On footers, make the font size 9pt, italic, with a line spacing of 12pt.<br> Make it centered, and with a border of 30pt.<br> */<br>div.footer {<br>font-size: 9pt;<br>font-style: italic;<br>line-height: 12pt;<br>text-align: center;<br>padding-top: 30pt;<br>}
</code>
</div>
</li>
<li><p>These lines link in style.css as one stylesheet for the page. They also add an image, with a title, and text to show if the image is unavailable. Finally, they add a paragraph with the class "subheading"</p></li>
<li><p><a style="margin-left:2em;" href="http://magmastone.net/CS/t1.html">Link to Task #1(updated)</a></p></li>
<li><p><code>p.class1{<br>color:red;<br>}<br>&lt;p class=&quot;class1&quot;&gt;This is red!&lt;/p&gt;<br><br><br>p.id1{<br>color:blue;<br>}<br>&lt;p id=&quot;id1&quot;&gt;This is blue.&lt;/p&gt;<br></code></p></li>
<li><p>
</p></li>
</ol>
<br><br>
<h2 style="margin-left:1em;">Task #1</h2>
<a style="margin-left:2em;" href="http://magmastone.net/CS/t1.html">Link to Task #1</a>
</div>
</div>
</body></html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment