Intro to Markup and Web Design
Work to have done: Finish Visual Argument / Rhetorical Collage
Plan for the day:
- Introduction to markup languages (30ish min)
- Web-design unit overview and assignment (10 min)
- Tour of unit resources (5-10 min)
- Start the homework during class
1. Introduction to Markup Languages (10-15 min)
Begin with a breath
Our next unit takes us into the world of hypertext, a more interactive medium. Before we dive in deep, come with me to the CSS Zen Garden.
Some things to notice:
- Responsive design: the same page can change appearance to suit the “viewscreen” (especially as the width changes).
- The visual hierarchy holds here, too – including uses of containment and alignment to form groups, and negative space to establish rhythm.
- So, too, are we retaining the importance of color schemes for both coherence and contrast.
- Oh, and also? Every page you’ve just seen has exactly the same underlying html.
Markup: separating content from display
How?
| acronym | stands for |
|---|---|
| HTML | HyperText Markup Language |
| CSS | Cascading Style Sheets |
What does that mean??
Per the tutorial I’m assigning you for homework,
- HTML is for adding meaning to raw content by marking it up.
- CSS is for formatting that marked up content.
In other words:
| acronym | stands for | used for |
|---|---|---|
| HTML | HyperText Markup Language | content, groupings |
| CSS | Cascading Style Sheets | display / presentation |
There are other languages that interact with these two, especially JavaScript, but also PHP and Python and Ruby: they can dynamically generate or change the HTML and CSS. And there are preprocessor languages that make it easier to write HTML and CSS in the first place: e.g. Markdown, the syntax you use in GitHub READMEs and forum posts, is essentially a shortcut form of HTML. But HTML and CSS are the core of what gets shown on the screen.
Let’s take Markdown as an example:
- If you want to make something bold, you…
- put
**asterisks**on either side of it.
- put
- If you want italics, you…
- put
_underscore_on either side (single asterisks will work, too).
- put
The same is true in HTML, but it looks a little different:
| what we’re marking | Markdown syntax | HTML syntax |
|---|---|---|
| strong text | **surrounding asterisks** |
<strong>opening and closing tags</strong> |
| emphasized text | _surrounding underscore_ |
<em>opening and closing tags</em> |
Unlike in Markdown, opening and closing tags in HTML aren't exactly the same. But they're almost the same: a closing tag in HTML just adds the slash after the first angle bracket.
You can think of them as being like parentheses: In general, every HTML tag you open should close. (You can nest a complete pair of tags inside another pair (like these parentheses), but you can't close the outer pair before closing the inner pair without causing problems.)
One nice thing about having the tags themselves marked by angle brackets is that you can add information to them:
| what we’re marking | Markdown syntax | HTML syntax |
|---|---|---|
| a basic hyperlink | [anchor text](http://destination) |
<a href="http://destination">anchor text</a> |
| a hyperlink with extra info | no default way to do it! | <a href="http://destination" class="dummylink external" title="Explanation of where link goes">anchor text</a> |
A Demo
Some of this is easier to understand with a live demo! Let’s head over to a CodePen where we can get some instant results from adding new HTML and CSS rules.
2. Web-design unit overview and assignment (10 min)
As I explained in the syllabus, your third project is to build a portfolio website using basic html and css files — as opposed to a site manager like WordPress or Wix — along with any media assets you wish to embed. In assigning this, I have two main goals for you:
- to learn how to manage a composite project made up of multiple interlinking files, and
- to explore the affordances of the web design stack as a medium, and especially its ability to flexibly render content for multiple audiences or reading priorities.
Let’s read through this together.
3. Tour of unit resources
I just want to give you a quick overview of the assets and advice I’ve compiled so far on the course site’s resources page.
Quick demo of key Atom features
- Split panes
- This is also covered in Part 1 of the homework tutorial, but somehow a few folks miss it: please don’t! It’s the best.
- Markdown preview
- Because Markdown includes HTML, you can also use this to preview pure HTML files! But it’s no substitute for a real browser, in the end.
- If there’s something you expect Atom to do, but it doesn’t, chances are someone’s already coded a Package to make Atom do it.
- To search for, install, or otherwise manage packages, go to Packages > Settings View and choose the option you need.
- Read the README inside an installed package for tips on how to use it.
- Close current tag (as mentioned earlier)
- Comment out current line (Edit > Toggle Comment)
Homework for Next Time
- Do as much of the Interneting is Hard (but it doesn’t have to be) tutorial as time and interest allow – but at least parts 1-4 (from “Introduction” through “Hello, CSS”)
- Heads up to fast workers: “float” layouts used to be a big deal, but aren’t as widely recommended any more: modern techniques like grid and flex are more flexible, and easier to get right. You can probably skip that chapter, at least for now.
- Show your work by pushing your tutorial code to GitHub.
- I’ve already created folders for parts 1-3 in the GH repo you just forked; clone it to your local computer, and you should be able to work in those folders and push.
- But note that you’ll need to add your own folders for part 4 and thereafter.