Intro to Markup and Web Design
Work to have done: Try and relax!
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 generate HTML and CSS on your own: 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.
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”)
- 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 folder for part 4, and thereafter.