Tyler Clarke
691974d96b
All checks were successful
ClarkeIS Build / Build-Docker-Image (push) Successful in 23s
60 lines
2.5 KiB
HTML
60 lines
2.5 KiB
HTML
[!]
|
|
[=title "Week 1 Homework"]
|
|
[=content-]
|
|
<p>
|
|
I didn't actually expect to get as far as we did in the first week, so homework is pretty short and spur-of-the-moment. Later homeworks will be much longer.
|
|
</p>
|
|
<p>
|
|
This homework is optional. You won't be graded on it, and there's nothing to submit. Future homeworks will <i>not</i> be optional.
|
|
</p>
|
|
<h2>Part 1</h2>
|
|
<p>
|
|
If you didn't get an image working, try to do that! Remember the image tag has peculiar behavior, and looks like this:
|
|
</p>
|
|
<pre><code><img src="/path/to/image.extension"></code></pre>
|
|
<p>
|
|
If your image is in <b>Downloads</b>, for instance, your image tag might look like <code><img src="Downloads/image.png"></code>.
|
|
</p>
|
|
<p>
|
|
Be aware that this is <i>relative</i> to your <code>index.html</code> file. This means that, if your <code>index.html</code> file is in
|
|
<b>Documents</b>, trying to access "Downloads/image.png" will actually try to access <i>Documents/Downloads/image.png</i>, which usually won't exist.
|
|
</p>
|
|
<p>
|
|
To fix this, either make sure your image and your index.html are in the same directory (e.g. one of Downloads, Documents, etc) and don't use a directory name (like <code><img src="image.png"></code>)
|
|
or use the "../" path to <i>break out</i> of a directory (like <code><img src="../Downloads/image.png"></code>).
|
|
</p>
|
|
<h2>Part 2</h2>
|
|
<p>
|
|
Remember a link looks like:
|
|
</p>
|
|
<pre><code><a href="https://example.com/">Link Text</a></code></pre>
|
|
<p>
|
|
Links are pretty cool - for instance, you can actually put most tags inside them. Try making a website with a clickable image!
|
|
</p>
|
|
<h2>Self-Study</h3>
|
|
<p>
|
|
We're going to be introducing some more advanced tags and techniques in class on Friday. Get a head start by learning on your own about,
|
|
</p>
|
|
<ul>
|
|
<li>The <code>html</code> tag</li>
|
|
<li>The <code>head</code> tag</li>
|
|
<li>The <code>body</code> tag</li>
|
|
<li>The Web Inspector</li>
|
|
</ul>
|
|
<p>
|
|
You'll have to Google these on your own - remember to write concise queries, like "<tag> in HTML" or "how to use [some tool]".
|
|
And don't worry if you don't find anything; we'll go over it in class.
|
|
</p>
|
|
<p>
|
|
If you can get the web inspector working, try using it to read the source-code of <i>this page</i> - there are some cool basic tags in here that you can play with!
|
|
</p>
|
|
<h2>Bonus Points</h2>
|
|
<p>
|
|
I will give you bonus points (0.5% to your final grade) if you bring in an HTML tag you learned on your own and a quick demonstration of how it works on Friday!
|
|
</p>
|
|
<p>
|
|
I'll make it 2% if you can bring in a tag <i>I haven't heard of</i>.
|
|
</p>
|
|
[/]
|
|
[#template.html]
|