Tyler Clarke
691974d96b
All checks were successful
ClarkeIS Build / Build-Docker-Image (push) Successful in 23s
114 lines
5.3 KiB
HTML
114 lines
5.3 KiB
HTML
[!]
|
|
[=title "Week 2 Homework"]
|
|
[=content-]
|
|
<p>
|
|
This homework will be done entirely as a single website file. Make sure that,
|
|
</p>
|
|
<ul>
|
|
<li>You are using a DOCTYPE and the html/head/body tags correctly - check out <a href="week-2-doctypes.html">Week 2: Doctypes</a> and <a href="week-2-html-head-body.html">Week 2: Html, Head, Body</a>.</li>
|
|
<li>You always close every tag correctly - use the <code> /></code> notation for tags that don't take content, and the closing tags (<code></tag_name></code>) for tags that do.</li>
|
|
<li>You always write properties correctly in the <code>property="content"</code> format - you always need the <code>=</code>, you always need the double quotes, you always need the space after the tag name.</li>
|
|
<li>Your code is decently readable with reasonable use of spaces and newlines - I won't be grading you on this yet, but it's a good habit.</li>
|
|
</ul>
|
|
<p>
|
|
Your grade will be the percentage of completed goals. Goals are highlighted like this: <span class="goal">Catch a bunny wabbit!</span>
|
|
</p>
|
|
<h2>Part 1: Warmup</h2>
|
|
<p>
|
|
Create a week-2-homework.html (not "index.html" this time!) and set it up in your web browser and text editor. Make sure you remember where it is so you can email the file to me at the end.
|
|
</p>
|
|
<p>
|
|
Set up a <b>correct</b> HTML file with doctype, html, head, body, etc. Add a title - make it something clear that contains your name, like "Albert's Week 2 Homework".
|
|
<span class="goal">HTML file with the correct standard layout</span>
|
|
</p>
|
|
<p>
|
|
Add a heading (h1) to the body of the page, and make it display the same thing as the title. <span class="goal">Correct heading</span>
|
|
</p>
|
|
<p>
|
|
Create a subheading (h2) named "Lorem" (or something like that) at the bottom of your page body. <span class="goal">Correct subheading</span>
|
|
</p>
|
|
<p>
|
|
Read up on the <a href="https://www.lipsum.com/">Lorem Ipsum</a> and generate some lorem ipsum text!
|
|
You don't have to use the boring default - there are a whole bunch of fun ones on the internet. A good list is <a href="https://github.com/templeman/awesome-ipsum">here</a>.
|
|
Paste the lorem ipsum into a new <b>paragraph</b> - use the p tag correctly. <span class="goal">Paragraph with Lorem Ipsum text</span>
|
|
</p>
|
|
<p>
|
|
Now add some emphasis! Add another paragraph of lorem, and use the b and i tags to emphasize specific words. Make sure there are a few words each in,
|
|
</p>
|
|
<ul>
|
|
<li><i>Italic</i></li>
|
|
<li><b>Bold</b></li>
|
|
<li><b>Bold Italic</b></li>
|
|
<li>Normal</li>
|
|
</ul>
|
|
<p>
|
|
No style should take up more than a few words and most of the words should be normal. <span class="goal">Styled lipsum with all 4 styles used correctly</span>
|
|
</p>
|
|
<h2>Part 2: Web Inspect</h2>
|
|
<p>
|
|
Use the web inspector to find the comment located in this section. It contains the rest of the instructions.
|
|
<!--
|
|
Hi! Good work finding this!
|
|
|
|
Using a single paragraph and line breaks (<br>), make a list of your favorite foods,
|
|
and explain why they're your favorite in invisible comments like this one.
|
|
-->
|
|
</p>
|
|
<h2>Part 3: Debugging</h2>
|
|
<p>
|
|
Copy the following HTML into your project, and find and fix the problems with it. These fixes will include <i>syntax</i> (spelling the code correctly),
|
|
<i>semantics</i> (using each tag's closing and properties right), and <i>appropriateness</i> (using the right tags for the job). Include comments briefly explaining each change you made.
|
|
<span class="goal">The HTML is correctly formed (correct patterns for tags, properties, etc)</span><br />
|
|
<span class="goal">Each tag is closed properly</span><br />
|
|
<span class="goal">Each tag has the right properties</span><br />
|
|
<span class="goal">Tags are semantically correct for their content</span><br />
|
|
</p>
|
|
<pre><code><DOCTYPE website>
|
|
|
|
<head>
|
|
<html>
|
|
>title< Web Page >/title<
|
|
</html>
|
|
<body></body>
|
|
<h1> Web Page </h1>
|
|
<p>
|
|
<img source=cute-cat.jpg></img>
|
|
<b>Bold Text!</b> <br />
|
|
<i Italic Text! /i>
|
|
<p>
|
|
</head>
|
|
</code></pre>
|
|
<h2>Part 4: Art Project</h2>
|
|
<p>
|
|
This is the more free-form part of the assignment.
|
|
Design a small, simple homepage for anything you want - you could pick for example your favorite movies, video games, animals, etc.
|
|
Get creative with it!
|
|
</p>
|
|
<p>
|
|
Make sure to use at least one link to another website, at least one image, several paragraphs with italic and bold text, and several headings of different sizes.
|
|
</p>
|
|
<p>
|
|
<span class="goal">At least one link</span><br />
|
|
<span class="goal">At least one image</span><br />
|
|
<span class="goal">Several paragraphs with the typical text-styling elements</span>
|
|
</p>
|
|
<h2>Extra Credit</h2>
|
|
<p>
|
|
There are bonus points amounting to 3% added to this assignment's grade broken up like so:
|
|
</p>
|
|
<ul>
|
|
<li>1% if you can make and add a favicon of the correct size (32x32)</li>
|
|
<li>1% if you can figure out on your own how to make lists like this one</li>
|
|
<li>1% if you can figure out how to set a background color</li>
|
|
</ul>
|
|
<h2>Submission</h2>
|
|
<p>
|
|
To submit your homework (no later than 2026-1-21), upload the HTML file as an <b>email attachment</b> and send it to plupy44@gmail.com. Include your name in the subject line.
|
|
</p>
|
|
<h2>Self-Study</h2>
|
|
<p>
|
|
For the self-study section, learn about the <code><style></code> tag - we'll be starting more advanced styling soon.
|
|
</p>
|
|
[/]
|
|
[#template.html]
|