Skip to main content

Core Concepts of HTML & CSS + Studio

We've had a request to activate the Zoom today. Please remind me if I forget?

Work to have done:

Plan for the day:

  1. Upcoming workshops (5 min)
  2. Key Concepts and Practical Takeaways (20-30 min)
  3. Intro to studio (5 min)
  4. Studio (35-45 min)

0. Announcement: Accessible Web Design workshops

There’s a series of workshops this Friday (html) and next (css), right here in this room, from 2:30-3:30, aimed at ways to make the web more navigable by more people. They’re hosted by Lynn Priestley – who is, among other things, author of the Loose Leaf cafe website that I gave you as an example. She’s also the host of a podcast on this subject, Welcomed by Design.

If you can make the time, I highly encourage you to register using this link to get demo / practice files! Here’s a flyer with more information. And here’s a background image description for the flyer, which should otherwise have embedded text accessible: Abstract, color-block representation of a desktop computer screen, with the introductory text placed on the main web page. The event details are on a coding sidebar, with the who/what/where/preregister headings wrapped to look like HTML tags. End of image description.

There’s also a workshop this Friday morning, 11:00-1:00, on Alt-Text as Poetry, hosted by the artist, writer, and disability activist Bojana Coklyat. That’s across the street in 527 William Pitt Union. This workshop will be capped at 20 and is open to anyone at the university, though priority will be given to graduate and upper-level undergraduate students. You can register here.

1. Key Concepts and Practical Takeaways (20-30 min)

Start by answering each of the questions below on your own (skipping the EXTs for now). Write down your answers in your own space.

(Note that some of the True/False questions are actually a little subtler than that framing suggests: e.g. *mostly* true, except when ____.)

Then discuss your answers in groups at your tables, and be ready to discuss tricky ones with the whole class if time allows. Some you should be able to go through rather quickly, while others may require more discussion.

Please take turns within your group reading questions and proposing answers, so that everyone in the group bears responsibility. .

Speedy teams, note the EXTs at the end. Conversely, feel free to skip the EXTs in the middle if you’re running behind – we want to make sure you have enough working time in the second part of class.

Call me in if you can’t come to a resolution! I will share my answer key when your table is ready.

Organizing files

  1. True or False: filenames are not case sensitive, so it doesn’t matter if something is uppercase or lowercase.
  2. T / F: web browsers know how to handle spaces in filenames, so it doesn’t matter if you have spaces in a filename or not.
  3. T / F: all files referred to in an html document have to be in the same folder as that html document.
  4. What’s one advantage of using a relative link? What’s one risk?

EXT: What are some html elements can you use to refer to an external file? (Hint: you should know at least three already.) Where would you put the filename within each of those elements?

HTML basics

  1. What kind of information goes in the <head>?
  2. How do you mark up comments in HTML?
  3. T / F: every HTML element has an opening tag, some element content, and a closing tag.
  4. T / F: in rendering an HTML file, there’s no difference between a space, a blank line, or five blank lines.

EXT: What three tags should pretty much every published page’s <head> include?

Image basics

  1. T / F: every <img> tag should specify a source file.
  2. T / F: every <img> tag should specify a width and a height.
    • What happens if you only set one?
  3. T / F: every <img> tag should specify alternative text with alt.

EXT: What makes .jpg files better for photographs than .png files? What makes .png files better for simple diagrams?

CSS basics

  1. What do the curly brackets and semicolons in CSS rules do?
  2. How can you apply a single CSS rule to multiple selectors?
  3. How do you mark up comments in CSS?
    • EXT: what’s the shortcut in your text editor for (un)commenting out the current line?
  4. Name three different places you could store CSS rules.
  5. Why is it generally a bad idea to use inline styles?

EXT: Given the three locations in question 4, when would you want to use each? What are the pros and cons?

If your group finishes early, (a) let me know you're done, (b) download my answer key and confirm we're on the same page. If not, let me know that, too!

Then (c) try the EXT activities below while you wait for the other groups to catch up.

EXT: Talk through the example sites from last year (from HW reading before break, and pasted again below for convenience), looking at the HTML with either View Source or your browser’s inspector. How are the pages structured? Any surprises? Any changes you’d want to make? Anything you’d want to borrow for your own site?

Convenient links

2. Anything to discuss further? (5-8 min)

Let me know if you have any challenges or questions after reading my answer key!

3. Studio / Practice (45-60 min)

See below for options, then please go to bit.ly/cdm2023spring-notes and let me know what you're working on; this helps me figure out where I can be most helpful.

  1. If your tutorial pages aren’t looking like the examples, tell me now, so I can help you get there! You’ll get a lot more out of the later tutorials if you’ve got these first ones solidly under your belt.

  2. The assignment for Thursday includes another two chapters in the tutorial and a game to play (or a blog post to read) about more advanced CSS selectors. If you haven’t yet done so, why not start those homework assignments?

  3. If you’re feeling good about all that, start translating your website sketches – especially your website content – into HTML and then CSS. Begin by adapting the tutorials, once you know you’ve got them working, to include your own materials.
    • Use the docs folder for files you’ll eventually want to publish on the web.
    • Call the file for your landing/home page index.html. You can always change the <title>.
  4. Above all, call me over for help as needed.

EXT: If you’ve already done the above, and you’re good on what a CSS class is, and how to add it to an HTML element, read up on CSS frameworks on our course Resources page. They’re basically a bunch of pre-created CSS classes you can use to design your own layout from scratch: a little like Lego for web design. (I use the Bootstrap framework on this site.)

Homework for Next Time

  • Do more of the tutorial, getting through at least The Box Model (5) and CSS Selectors (6), if you haven’t yet.
    • Remember that I won’t assign all the sections of the tutorial; you can look ahead in the schedule to see which parts I expect you to read and do, and what’s beyond baseline. You can probably skip Floats, for example… and I’ll ask you to look at some Grid tutorials that aren’t part of the main series.
  • Please do, though read more about how CSS selectors work OR if you prefer game-based learning to straight-up reading, try loading and clearing plates at the delightful CSS Diner. (There’s still reading, in the sidebar, which tells you how to win the round.)
  • As you’re able to get the tutorials working, you can start adapting the files there to include your own content; save those more personalized files in the docs folder.
    • Save and commit as you go!

Pi Day bonus! https://www.youtube.com/watch?v=NmxPeBeX_38