From b5aa99b64a0e4fd216c33a54df44f9ea9631a9a9 Mon Sep 17 00:00:00 2001 From: Tyler Clarke Date: Thu, 29 Jan 2026 14:06:40 -0500 Subject: [PATCH] week 4 --- site/introwebdev/header-example.png | Bin 0 -> 3420 bytes site/introwebdev/index.html | 4 +- site/introwebdev/week-4-divs.html | 59 +++++++++++++++++++ site/introwebdev/week-4-homework.html | 64 +++++++++++++++++++++ site/introwebdev/week-4-id-class.html | 52 +++++++++++++++++ site/introwebdev/week-4-style.html | 80 ++++++++++++++++++++++++++ 6 files changed, 258 insertions(+), 1 deletion(-) create mode 100644 site/introwebdev/header-example.png create mode 100644 site/introwebdev/week-4-divs.html create mode 100644 site/introwebdev/week-4-homework.html create mode 100644 site/introwebdev/week-4-id-class.html create mode 100644 site/introwebdev/week-4-style.html diff --git a/site/introwebdev/header-example.png b/site/introwebdev/header-example.png new file mode 100644 index 0000000000000000000000000000000000000000..2d2c82e5df52d7031889e4dca92252fb7fe0d513 GIT binary patch literal 3420 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
  • Week 1 Homework (short, no submission)
  • Week 2 Homework
    • -
  • Week 3 Homework (due on the 30th)
    • +
  • Week 3 Homework (due on January 30th)
    • +
  • Week 4 Homework (due on February 6th)

    • Lecture notes

    @@ -60,6 +61,7 @@ I'll be posting these in advance of lectures, so you can review the material bef

  • Week 1: Getting Set Up
  • Week 2: Doctypes, The HTML, Head, and Body tags, Metadata, Web Inspector
  • Week 3: Github Pages Intro, Internet Safety, Linked Styles
    • +
  • Week 4: Style, ID and Class, The Div Tag

    • Generative AI policy

    diff --git a/site/introwebdev/week-4-divs.html b/site/introwebdev/week-4-divs.html new file mode 100644 index 0000000..8a26e90 --- /dev/null +++ b/site/introwebdev/week-4-divs.html @@ -0,0 +1,59 @@ +[!] +[=title "Week 4: The Div Tag"] +[=content-] +

    + 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 <div> </div>! +

    +

    + 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 div + inside a p for Weird Reasons™). If you just put a div tag in your document, you won't see it at all! +

    +

    + 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: +

    +
    >style<
+.huge_block {
+	padding: 200px;
+	background-color: magenta;
+}
+>/style<
+>div class="huge_block"<>/div<
+
    +

    + 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: +

    +
    +

    + Pretty terrible and unnecessary, but usefully so! +

    +

    + If your screen is wider than 800px, you may notice this div looks wider than it is tall, even though padding adds the same amount to every side. + This is because divs are a block-level element - they expand to fill empty horizontal space, and shrink to their content vertically. +

    +

    + You can put things in a div! For instance, if the huge magenta block is changed to +

    +
    >style<
+.huge_block {
+	padding: 50px;
+	height: 400px;
+	background-color: firebrick;
+}
+>/style<
+>div class="huge_block"<
+	>p<Hello everyone!>/p<
+>/div<
+
    +

    + (Note: height: 400px does exactly what it sounds like - it forces the div to be exactly 400px tall.) +

    +
    +

    Hello, everyone!

    +
    +

    + 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. +

    +[/] +[#template.html] diff --git a/site/introwebdev/week-4-homework.html b/site/introwebdev/week-4-homework.html new file mode 100644 index 0000000..9f51e17 --- /dev/null +++ b/site/introwebdev/week-4-homework.html @@ -0,0 +1,64 @@ +[!] +[=title "Week 4 Homework"] +[=content-] +

    + 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. +

    +

    + 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. +

    +

    + 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. +

    +

    Part 1: Universal Stylesheet

    +

    + 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 every page of your site - you'll have to use a link tag. + Universal stylesheet +

    +

    Part 2: Layout

    +

    + Create a new page on your website, and use whatever technique you can think of to set up a layout 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. + Readable layout +

    +

    Part 3: Header

    +

    + 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 generally be a horizontal strip of color, + with appropriate padding, containing a bunch of normal links. +

    +

    + This is a decent minimal example: +

    + +

    + Remember that this "header" is actually content, so it should go in the body, 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. +

    +

    + Header at the top of the page Header links are centered Header links have space between them +

    +

    Self Study: Flexbox

    +

    + One of the really cool things you can do with CSS is called flexbox. 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 Mozilla's + web development docs. +

    +

    Extra Credit

    +

    + 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. +

    +

    Submission

    +

    + To submit homework 4 (before midnight on February 6th), email me the link to the appropriate page on your website. +

    +[/] +[#template.html] diff --git a/site/introwebdev/week-4-id-class.html b/site/introwebdev/week-4-id-class.html new file mode 100644 index 0000000..f18b818 --- /dev/null +++ b/site/introwebdev/week-4-id-class.html @@ -0,0 +1,52 @@ +[!] +[=title "Week 4: ID and Class"] +[=content-] +

    + You might at this point have noticed that styling your elements "inline" with the style property is really annoying. + Fortunately, HTML saves the day with the id property! IDs are unique names for elements which can be selected by CSS. + For example: +

    +
    <style>
+#just_one_element {
+	color: blue;
+}
+</style>
+
+<p id="just_one_element">
+	This text is blue!
+</p>
+<p id="another_element">
+	This text isn't changed at all!
+</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 "#"! +

    +

    + This is pretty convenient! However, we can go ever further, with classes. 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: +

    +
    <style>
+.some_elements {
+	color: yellow;
+}
+</style>
+<p class="some_elements">
+	This text is yellow!
+</p>
+<p class="some_elements">
+	This text is also yellow!
+</p>
+<p id="some_elements">
+	This text is not yellow.
+</p>
+<b class="some_elements">
+	This text is yellow and bold!
+</b>
+
    +

    + Note that classes are selected with . and ids are selected with #. If you mix them up (e.g. try to use .some_element to select + an element with id="some_element"), it will fail! Also consider that elements may have both an id and a class, and that works exactly as you would expect. +

    +[/] +[#template.html] diff --git a/site/introwebdev/week-4-style.html b/site/introwebdev/week-4-style.html new file mode 100644 index 0000000..c9de739 --- /dev/null +++ b/site/introwebdev/week-4-style.html @@ -0,0 +1,80 @@ +[!] +[=title "Week 4: Style"] +[=content-] +

    + 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! +

    +

    + Styling on the internet is done with something called Cascading Style Sheets - CSS. + CSS is a deceptively simple language responsible for color, size, shape, font, layout, etc - all of the things that make webpages beautiful! +

    +

    + The core of CSS is properties and selectors. All properties have a name, a colon, a value, and a semicolon. For instance, + a property to make text red would look like: +

    +
    color: red;
+
    +

    + CSS can be written in a lot of places. The easiest way is inline properties - you put your CSS properties in the style + HTML attribute, and they apply automagically! For instance: +

    +
    <p style="color: red;">Red Text</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 {
+	color: red;
+}
+
    +

    + Note the tag name p, the opening brace {, + the properties (each on their own line!), and the closing brace }. CSS is much pickier than HTML, + and if you write this wrong, it could break the entire stylesheet! +

    +

    + The effect is that this selects every p element on the page and sets its color to red. +

    +

    + You can't just throw this anywhere! It needs to go in one of a few specific places. The easiest place is a <style> tag. For instance: +

    +
    <style>
+p {
+	color: red;
+}
+</style>
+
    +

    + This is considered metadata, so it must go in your <head>. +

    +

    + 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: +

    +
    <link rel="stylesheet" href="style.css" />
+
    +

    + Look familiar? This is another use of the elusive link tag! +

    +

    + 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: +

    +
      +
    • color: This sets the text color, and only the text color - other color-adjacent properties can be used for other things.
      • +
    • background-color: This sets the color of the background - the full space "behind" an element's content including padding and empty space. Try it on a few different elements!
      • +
    • background-image: Used like background-image: url("path/to/image.png"); You have to use url("") because there are other more advanced + types of background image. This just sets the picture to show up behind content.
      • +
    • font-family: Sets the type of font to be used. The actual font will be picked out from a set of default options installed in the user's browser. For instance, + font-family: monospace; produces robotic text like this. Most of this page uses font-family: sans-serif;.
      • +
    • padding: Padding adds some spacing to an element. It makes the outside larger without changing where content is placed. For example, padding: 10px; + would add 10 pixels of space above, below, and to either side of the content in the element.
      • +
    • margin: Margin is another layer outside padding. Rather than expanding the element, margin prevents other elements from getting too close.
      • +
    • border: 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 border: 1px solid white;, which does this. +
    • text-align: This controls the alignment of content. It can be left, which is the default, center, or right.
      • +
    +[/] +[#template.html]