@@ -60,6 +61,7 @@ I'll be posting these in advance of lectures, so you can review the material bef
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. +
+
+ 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
+
+ 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 +
++ 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 +
++ 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. +
++ 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. +
++ 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.
+
+ 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.