![\"Image](\"https:\/\/miriamposner.com\/blog\/wp-content\/uploads\/2011\/11\/Basic-HTML.png\" "\\"Basic")
<\/p>\n<\/p>\n
This week I twice taught a two-hour workshop introducing Emory people (students, faculty, and staff) to the very basics of HTML & CSS. The workshop was called How a Website is Born: The Very Basics of HTML & CSS, and here’s how I described it:<\/p>\n
\nEver wondered how a website goes from an idea to the Internet? In this workshop, designed for absolute beginners, we\u2019ll explain what HTML and CSS are and show you how you can get started making your own website.<\/p>\n<\/blockquote>\n
I’d initially thought I might be a little crazy to try to teach introductory HTML and CSS in two hours, but in the event, things went relatively smoothly, and both times we ended up with about a half-hour to spare. I wanted very much to teach the workshop because HTML and CSS were my own first experience looking under the hood of any kind of interface, and it was quite powerful for me. I was excited to show others that coding isn’t as hard as they might think.<\/p>\n
<\/p>\n
A lot of people suggested that it would be more useful for students to learn how to modify other people’s code (a WordPress theme, for example), but like Jarah Moesch<\/a>, I was adamant about making my students start from scratch. I wanted them to feel they had a grasp on every aspect of building a website, and to see that none of it is too mysterious to comprehend. Plus, I’ve noticed that many people who learned HTML & CSS by modifying WordPress themes have some residual confusion about basic principles of CSS, like the fact that one style overrides another if it occurs farther down on the page. So I wanted to make sure my students got this stuff. And anyway, we’re hacking WordPress themes next week<\/a>.<\/p>\n
Here’s my lesson plan, in case it’s useful to you. You can also download my handouts: Basic HTML<\/a>, Basic CSS<\/a>, and Useful CSS<\/a>.<\/p>\n
[A note on semantic markup: A couple of people have expressed surprised that I used <b> and <i> instead of <em> and <cite>. I know that the latter are more correct, but I wanted to stick with tags that made immediate sense to students.]<\/p>\n
Introduction<\/span><\/strong><\/h3>\n
I started by telling students that this class was for very beginners, and if they weren’t very beginners, they were in the wrong place. I copied this from Eric Grimson at MIT, who opens his course Introduction to Computer Science and Programming<\/a> by explaining that non-beginners should excuse themselves not just because they’ll be bored but because they’ll make beginners uncomfortable.<\/p>\n
I explained that different people have trouble with different things, and asked them to be patient, especially in the first part of the class, if other students needed help that they didn’t need. I told them that if they were stumped, it wasn’t because they were doing something wrong \u2014 it was because I needed to explain something better.<\/p>\n
Finally, I showed students\u00a0this<\/a> HTML document, which I had open in a text editor. I then showed them how I put the document on a server, using FileZilla.<\/p>\n
Viewing Source Code and Downloading a Document<\/span><\/strong><\/h3>\n
Once the document was on the server, students navigated to http:\/\/www.miriamposner.com\/html and I showed them how to view the source code. Then I asked them to save a copy of the page to their desktops.<\/p>\n
Opening an HTML Document<\/span><\/strong><\/h3>\n
I asked them to open one copy of the HTML document in a text editor (explaining the need to right-click and “Open With”) and one copy in a browser window.<\/p>\n
Very Basic HTML (Handout 1<\/a>)<\/span><\/strong><\/h3>\n
I explained the header information \u2014 taking care to say that no one has this memorized \u2014 and then told them how HTML tags work: they “hug” the content they’re modifying. We edited the HTML to make things bold, italicize them, added headers, added links, and added an image, each time saving the HTML document and refreshing the browser display.<\/p>\n
Creating and Linking a CSS Stylesheet<\/span><\/strong><\/h3>\n
I told my students that they now knew enough to create a basic webpage. But what if you had 300 individual webpages and wanted to modify one thing about every page? Wouldn’t be easier if you could make all those changes in one place? I used the analogy of taking advantage of styles in a word processor rather than individually modifying every heading.<\/p>\n
We opened a new text document and saved it as practicestyle.css. Then I showed them how to link their HTML documents to their CSS documents by adding a line of code to their HTML headers.<\/p>\n
Writing Basic CSS (Handout 2<\/a>)<\/span><\/strong><\/h3>\n
We started by modifying the paragraph tag, changing the font color and size. Then we modified links, headers, and images. Putting a border around the image provided me with an opportunity to explain the CSS box model, including the difference between margins and padding.<\/p>\n
Div Tags and Classes (Handout 3<\/a>)<\/strong><\/span><\/h3>\n
I explained that while it’s nice to be able to modify tags that are already on the page, there are often times when you want to add divisions that don’t yet exist. I showed them how to use div tags and classes to create these new divisions.<\/p>\n
Conclusion<\/strong><\/span><\/h3>\n
I reminded the students that their pages weren’t actually on the Internet yet \u2014 to do that, you need a server \u2014 and showed them how they could find a hosting provider. I encouraged them to keep looking at source code. Then I answered a lot of questions.<\/p>\n
What Worked, What Didn’t Work<\/span><\/strong><\/h3>\n
All my students were up and running with HTML and CSS by the end of the class, so I counted that a major success. The evaluations were pretty positive, which was nice. It was extremely helpful to have helpers in the room \u2014 other people who knew HTML and CSS and could circulate around to help students who were struggling. They were also helpful in alerting me to when my explanations were unclear. I learned from Jeremy Boggs the habit of zooming in on my code so that it’s easier to see, and students seemed to like that. They also commented that they appreciated being able to ask questions at any point during the class.<\/p>\n
Surprisingly enough, by far the most troublesome part for students was downloading the HTML file and opening it in a text editor. Some accidentally downloaded the “View Source Code” page, some downloaded the page to the wrong place and couldn’t find it later. For Mac users, Text Edit’s occasional habit of displaying rich text rather than raw HTML caused some major confusion. Other people had trouble getting the file to open in a text editor rather than a browser. This part of the workshop was actually the only place we had attrition \u2014 we lost one man who had trouble following along.<\/p>\n
During the first workshop, I didn’t pay attention to where students were sitting, and some chose to sit next to the wall, which made it difficult for my helpers and me to peek over their shoulders. I corrected this during the second workshop by asking everyone to take a seat at a table. Still, some people are uncomfortable getting help, which I try to be sensitive to.<\/p>\n
It was hard to make some people wait while we fixed someone else’s problem, but I was reassured by the fact that we had an extra half-hour of leeway at the end.<\/p>\n
Both workshops had about a dozen students, which was about right. If I’d had more than, say, 20, with no more helpers, I would expect some people to be lost.<\/p>\n
A couple of students requested a series of workshops on HTML and CSS, which I agree would be more helpful than stand-alone classes.<\/p>\n","protected":false},"excerpt":{"rendered":"
This week I twice taught a two-hour workshop introducing Emory people (students, faculty, and staff) to the very basics of HTML & CSS. The workshop was called How a Website is Born: The Very Basics of HTML & CSS, and here’s how I described it: Ever wondered how a website goes from an idea to […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11,95],"tags":[193,191,123,194,200,198,197,195,199,196],"class_list":["post-947","post","type-post","status-publish","format-standard","hentry","category-teaching","category-web-design","tag-cascading-style-sheets","tag-computing","tag-education","tag-html","tag-markup-language","tag-style-sheet","tag-technologyinternet","tag-web-development","tag-web-page","tag-world-wide-web"],"_links":{"self":[{"href":"https:\/\/miriamposner.com\/blog\/wp-json\/wp\/v2\/posts\/947","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/miriamposner.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/miriamposner.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/miriamposner.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/miriamposner.com\/blog\/wp-json\/wp\/v2\/comments?post=947"}],"version-history":[{"count":11,"href":"https:\/\/miriamposner.com\/blog\/wp-json\/wp\/v2\/posts\/947\/revisions"}],"predecessor-version":[{"id":949,"href":"https:\/\/miriamposner.com\/blog\/wp-json\/wp\/v2\/posts\/947\/revisions\/949"}],"wp:attachment":[{"href":"https:\/\/miriamposner.com\/blog\/wp-json\/wp\/v2\/media?parent=947"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/miriamposner.com\/blog\/wp-json\/wp\/v2\/categories?post=947"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/miriamposner.com\/blog\/wp-json\/wp\/v2\/tags?post=947"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}