admin/clarkeis.com
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

week 4
All checks were successful
ClarkeIS Build / Build-Docker-Image (push) Successful in 26s
Details

Browse Source
This commit is contained in:
Tyler Clarke
2026-01-29 14:06:40 -05:00
parent 9ebbb99074
commit b5aa99b64a
6 changed files with 258 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
site/introwebdev/header-example.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.3 KiB

4
site/introwebdev/index.html
View File

@@ -50,7 +50,8 @@ TBD. Will post an announcement when this is worked out.
<ul>
<li><a href="week-1-homework.html">Week 1 Homework (short, no submission)</a></li>
<li><a href="week-2-homework.html">Week 2 Homework</a></li>
<li><a href="week-3-homework.html">Week 3 Homework (due on the 30th)</a></li>
<li><a href="week-3-homework.html">Week 3 Homework (due on January 30th)</a></li>
<li><a href="week-4-homework.html">Week 4 Homework (due on February 6th)</a></li>
</ul>
<h2>Lecture notes</h2>
<p>
@@ -60,6 +61,7 @@ I'll be posting these in advance of lectures, so you can review the material bef
<li>Week 1: <a href="week-1-setup.html">Getting Set Up</a></li>
<li>Week 2: <a href="week-2-doctypes.html">Doctypes</a>, <a href="week-2-html-head-body.html">The HTML, Head, and Body tags</a>, <a href="week-2-metadata.html">Metadata</a>, <a href="week-2-web-inspect.html">Web Inspector</a></li>
<li>Week 3: <a href="week-3-gh-pages.html">Github Pages Intro</a>, <a href="week-3-safety.html">Internet Safety</a>, <a href="week-3-link-style.html">Linked Styles</a></li>
<li>Week 4: <a href="week-4-style.html">Style</a>, <a href="week-4-id-class.html">ID and Class</a>, <a href="week-4-divs.html">The Div Tag</a></li>
</ul>
<h2>Generative AI policy</h2>
<p>

59
site/introwebdev/week-4-divs.html Normal file
View File

@@ -0,0 +1,59 @@
[!]
[=title "Week 4: The Div Tag"]
[=content-]
<p>
Finally, another tag! I haven't introduced this one yet, because it's frankly very boring without CSS - but now that we know some basic CSS,
it's time we get fancy with it, and for that we need <code>&lt;div&gt; &lt;/div&gt;</code>!
</p>
<p>
Divs are an extremely boring tag. They do not apply any style to their contents by default and mostly don't have any unexpected behavior (although you can't have a <code>div</code>
inside a <code>p</code> for Weird Reasons™). If you just put a div tag in your document, you won't see it at all!
</p>
<p>
This boringness makes divs extremely convenient for styling and layout control. For instance, if you want a huge magenta block in the middle of the screen,
a div is the right way to go:
</p>
<pre><code>&gt;style&lt;
.huge_block {
padding: 200px;
background-color: magenta;
}
&gt;/style&lt;
&gt;div class="huge_block"&lt;&gt;/div&lt;
</code></pre>
<p>
Because by default a div has no content, has no color, has no extra padding, etc, this code is very simple. And the result is thus:
</p>
<div style="padding: 200px;background-color: magenta;"></div>
<p>
Pretty terrible and unnecessary, but usefully so!
</p>
<p>
If your screen is wider than 800px, you may notice this div looks wider than it is tall, even though <code>padding</code> adds the same amount to every side.
This is because divs are a <i>block-level element</i> - they expand to fill empty horizontal space, and shrink to their content vertically.
</p>
<p>
You can put things in a div! For instance, if the huge magenta block is changed to
</p>
<pre><code>&gt;style&lt;
.huge_block {
padding: 50px;
height: 400px;
background-color: firebrick;
}
&gt;/style&lt;
&gt;div class="huge_block"&lt;
&gt;p&lt;Hello everyone!&gt;/p&lt;
&gt;/div&lt;
</code></pre>
<p>
(Note: <code>height: 400px</code> does exactly what it sounds like - it forces the div to be exactly 400px tall.)
</p>
<div style="height:400px;padding: 50px;background-color: firebrick;">
<p>Hello, everyone!</p>
</div>
<p>
Because the height is set, we can add however much content we want, and it will never grow - even if the content overflows outside of the div.
</p>
[/]
[#template.html]

64
site/introwebdev/week-4-homework.html Normal file
View File

@@ -0,0 +1,64 @@
[!]
[=title "Week 4 Homework"]
[=content-]
<p>
This homework is more focused on creativity and problem-solving than the previous ones. Don't be afraid to contact me if you get stuck.
</p>
<p>
Previous homeworks required you to use specific techniques; this homework will largely require you to figure out technique for yourself.
You won't have to teach yourself any new patterns to get full credit, but you may be able to get a better result by doing so - I will not deduct
points for using the "wrong" methods if the end result is good.
</p>
<p>
This assignment expects you to have a few pages on your website to style - just create new ones and fill them with Lorem Ipsum text
if you don't want to mess up the old ones.
</p>
<h2>Part 1: Universal Stylesheet</h2>
<p>
If you don't already have a universal stylesheet from Homework 3 Extra Credit, do that now. Set up a stylesheet shared between every page on your website.
By "shared" I mean that you should only have to edit a single CSS file to change the behavior of <i>every</i> page of your site - you'll have to use a <code>link</code> tag.
<span class="goal">Universal stylesheet</span>
</p>
<h2>Part 2: Layout</h2>
<p>
Create a new page on your website, and use whatever technique you can think of to set up a <i>layout</i> with reasonable
empty space on both sides of the main content to make reading easier. (Hint: use Lorem Ipsum text to demo it).
Think of the structure of this page as the "ideal" result - we haven't yet covered enough CSS to replicate it,
but it's a good example of a page with a central reading column.
<span class="goal">Readable layout</span>
</p>
<h2>Part 3: Header</h2>
<p>
Design a header with a centered horizontal list of evenly spaced links. Ensure the header shows up correctly on at least a few pages on your website.
Headers can be pretty diverse - you can be as creative as you want, but the end result should <i>generally</i> be a horizontal strip of color,
with appropriate padding, containing a bunch of normal links.
</p>
<p>
This is a decent minimal example:
</p>
<img src="header-example.png" />
<p>
Remember that this "header" is <i>actually content</i>, so it should go in the <code>body</code>, but should be above everything else. It should be easy to tell
that it's a header and not just part of your main body.
</p>
<p>
<span class="goal">Header at the top of the page</span> <span class="goal">Header links are centered</span> <span class="goal">Header links have space between them</span>
</p>
<h2>Self Study: Flexbox</h2>
<p>
One of the really cool things you can do with CSS is called <i>flexbox</i>. Flexboxes are single-dimensions (e.g. up/down OR left/right, not both) containers
that force each element within them into its own "cell", which will be resized based on a set of extremely configurable rules. Flexbox is ridiculously powerful,
but also quite complicated. I recommend reading about it on <a href="https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/CSS_layout/Flexbox">Mozilla's
web development docs</a>.
</p>
<h2>Extra Credit</h2>
<p>
If you can figure out how to add a single background image that covers the entire page (without stretching nastily),
I'll add 2 points to your homework 4 grade.
</p>
<h2>Submission</h2>
<p>
To submit homework 4 (before midnight on February 6th), email me the link to the appropriate page on your website.
</p>
[/]
[#template.html]

52
site/introwebdev/week-4-id-class.html Normal file
View File

@@ -0,0 +1,52 @@
[!]
[=title "Week 4: ID and Class"]
[=content-]
<p>
You might at this point have noticed that styling your elements "inline" with the <code>style</code> property is really annoying.
Fortunately, HTML saves the day with the <code>id</code> property! IDs are unique names for elements which can be <i>selected</i> by CSS.
For example:
</p>
<pre><code>&lt;style&gt;
#just_one_element {
color: blue;
}
&lt;/style&gt;
&lt;p id="just_one_element"&gt;
This text is blue!
&lt;/p&gt;
&lt;p id="another_element"&gt;
This text isn't changed at all!
&lt;/p&gt;
</code></pre>
<p>
Note that selecting an ID is done in CSS with the "#" symbol - this is so CSS knows you aren't trying to select a type of tag. IDs should never actually contain a "#"!
</p>
<p>
This is pretty convenient! However, we can go ever further, with <i>classes</i>. The class attribute allows you to select
arbitrary elements with one single selector. They don't even have to be the same type! For example:
</p>
<pre><code>&lt;style&gt;
.some_elements {
color: yellow;
}
&lt;/style&gt;
&lt;p class="some_elements"&gt;
This text is yellow!
&lt;/p&gt;
&lt;p class="some_elements"&gt;
This text is also yellow!
&lt;/p&gt;
&lt;p id="some_elements"&gt;
This text is not yellow.
&lt;/p&gt;
&lt;b class="some_elements"&gt;
This text is yellow and bold!
&lt;/b&gt;
</code></pre>
<p>
Note that classes are selected with <code>.</code> and ids are selected with <code>#</code>. If you mix them up (e.g. try to use <code>.some_element</code> to select
an element with <code>id="some_element"</code>), it will fail! Also consider that elements may have both an id and a class, and that works exactly as you would expect.
</p>
[/]
[#template.html]

80
site/introwebdev/week-4-style.html Normal file
View File

@@ -0,0 +1,80 @@
[!]
[=title "Week 4: Style"]
[=content-]
<p>
We've done some pretty cool stuff with HTML so far, but there's still a barrier between that and
all of the wonderful websites you know. We need styles!
</p>
<p>
Styling on the internet is done with something called <i>Cascading Style Sheets</i> - CSS.
CSS is a deceptively simple language responsible for color, size, shape, font, layout, etc - all of the things that make webpages beautiful!
</p>
<p>
The core of CSS is <i>properties</i> and <i>selectors</i>. All properties have a name, a colon, a value, and a semicolon. For instance,
a property to make text red would look like:
</p>
<pre><code>color: red;
</code></pre>
<p>
CSS can be written in a lot of places. The easiest way is <i>inline properties</i> - you put your CSS properties in the <code>style</code>
HTML attribute, and they apply automagically! For instance:
</p>
<pre><code>&lt;p style="color: red;"&gt;Red Text&lt;/p&gt;
</code></pre>
<p>
This will set the color of that one specific p element to red. It will not set the color of any other elements; for that, you need a selector!
A selector looks like this:
</p>
<pre><code>p {
color: red;
}
</code></pre>
<p>
Note the tag name <code>p</code>, the opening brace <code>{</code>,
the properties (each on their own line!), and the closing brace <code>}</code>. CSS is much pickier than HTML,
and if you write this wrong, it could break the entire stylesheet!
</p>
<p>
The effect is that this <i>selects</i> every <code>p</code> element on the page and sets its <code>color</code> to <code>red</code>.
</p>
<p>
You can't just throw this anywhere! It needs to go in one of a few specific places. The easiest place is a <code>&lt;style&gt;</code> tag. For instance:
</p>
<pre><code>&lt;style&gt;
p {
color: red;
}
&lt;/style&gt;
</code></pre>
<p>
This is considered <i>metadata</i>, so it must go in your <code>&lt;head&gt;</code>.
</p>
<p>
You can (and should!) also store your CSS in an external file with the ".css" extension - e.g., "style.css" is common.
This can then be referenced in your HTML document's header like this:
</p>
<pre><code>&lt;link rel="stylesheet" href="style.css" /&gt;
</code></pre>
<p>
Look familiar? This is another use of the elusive <code>link</code> tag!
</p>
<p>
There are very, very many CSS properties. I can't hope to exhaustively list them (and indeed I don't know all of them!)
but here are a few common ones:
</p>
<ul>
<li><code>color</code>: This sets the <i>text color</i>, and <i>only</i> the text color - other color-adjacent properties can be used for other things.</li>
<li><code>background-color</code>: This sets the color of the <i>background</i> - the full space "behind" an element's content including padding and empty space. Try it on a few different elements!</li>
<li><code>background-image</code>: Used like <code>background-image: url("path/to/image.png");</code> You have to use <code>url("")</code> because there are other more advanced
types of background image. This just sets the picture to show up behind content.</li>
<li><code>font-family</code>: Sets the <i>type of font</i> to be used. The actual font will be picked out from a set of default options installed in the user's browser. For instance,
<code>font-family: monospace;</code> produces robotic text <span style="font-family: monospace;">like this</span>. Most of this page uses <code>font-family: sans-serif;</code>.</li>
<li><code>padding</code>: Padding adds some spacing to an element. It makes the outside larger without changing where content is placed. For example, <code>padding: 10px;</code>
would add 10 pixels of space above, below, and to either side of the content in the element.</li>
<li><code>margin</code>: Margin is another layer outside padding. Rather than expanding the element, margin prevents <i>other</i> elements from getting too close.</li>
<li><code>border</code>: Border is a styled layer between padding and margin! It's usually thin and used to add highlighting. It's a fairly complicated property, with 3 terms instead of just 1:
a common example is <code>border: 1px solid white;</code>, which <span style="border: 1px solid white;">does this</span>.
<li><code>text-align</code>: This controls the alignment of content. It can be <code>left</code>, which is the default, <code>center</code>, or <code>right</code>.</li>
</ul>
[/]
[#template.html]