HTML&CSS Week 3 - Attributes & Values

Hello Everyone,

Welcome to HTML & CSS from the beginning week three. This week we're doing more work on tags — we'll be discovering some new tags, but also focusing on two important attributes that can be given to any tag - class and id. We're going to be focusing on the values that these attributes can have and you'll be discovering the principles of choosing good values to give to the class and id attributes.

Last lesson we looked at the world around us and applied markup to it. This week you'll do this again, but now you'll be asked to mark it up in a different way and where applicable assign values to the class or id attribute.

Finally as usual you'll be given some reading to consume that supports the broader aims of the course and also the scope of this weeks tasks.

p.s - You may have noticed that I'm still to go around everyones work from week two and that this weeks tasks are three days late. To give myself time to catch up on everyones work, the next lesson will be posted on Wednesday June 15th. Apologies to every one about the delay in posting the next lesson.

Recap on Lesson 2

You were given five tasks to complete.

Anatomy of HTML tags.

Working on the trinity concept (HTML - Structure, CSS - Appearance, JavaScript - Behaviour) you worked with a plain text template to add in markup that created a structure that you felt best described the content of the plain text template.

World Around You

To begin your transition to markup craftsmen, you looked at the world around you and applied HTML markup to the items and objects that you encountered. HTML is not just about dull on a computer - it's about creating a contextual structure that represents content.

Final Projects

You're each going to produce something - what that something is will be entirely your choice. You should have started thinking about what it is that you want to create. If you've chosen something - great. If you haven't, that's fine, but do start to generate possibilities for yourself. You can always change your mind later on. If you're unsure about what to do post to the HTML & CSS from the Beginning Google Group

Reading

You were asked to read a chapter from the wonderful Dive Into HTML5 by Mark Pilgrim and also to digest a page from HTML Dog on Tags, Attributes, and Elements.

Reflection

I asked you to think about what you've learned and to reflect on the experience of acquiring new knowledge over the week. You'll be doing this every week.

This Week Tasks

This week you have four more tasks that build on what you've covered last week and starting from this week I'm going to leave a little bit of the 'discovery' of information to you :)

1. Dropbox
2. Reading
3. The World Around You II - A different perspective.
4. Reflection.

Dropbox

Overview

This weeks tasks are going to require you to author a number of html documents. In many courses involving html you'd be shown how to put files onto a web server via FTP/SFTP/SSH so that they can be accessed online. If you already know how to do this then great, but I don't want to burden those that don't know how to do this with configuring network based clients and the inevitable troubleshooting that you'd have to do to get everything working. This is why for this weeks task I want you all to use dropbox.

Dropbox a free service that gives you a super simple way to store files remotely without having to use FTP/SFTP/SSH to upload files. All you do to upload files is put your file into a the dropbox folder and it gets securely stored online.

What's even cooler is that you can effectively use dropbox as a webhost by placing files into the Dropbox/public folder. This is where I want you to store your html files to make it easy for your group members and myself to view your files in a browser, just like any other web page.

Source Material

Dropbox

Submission

I want you to go to Dropbox and create an account, install the application and get to know it. It will not cost you anything because the free service will be more than adequate for our needs.

When you've created your account and installed the application I want you to put the helloworld file from week 1 into the public folder and create a new blog post called "Dropbox test" and I want you to link to the helloworld file from your blog. You should get your team mates to verify that they can view the html file using your link.

Reading

Overview

This week is all about attributes (specifically class and id attributes) and the values that they can have. Class & id can have anything as there value. For instance you could quite happily give something an id of "super-happy-monkey-kung-fu-power", but that wouldn't be very helpful unless the item you'd marked up in someway referred to a jolly hominoid with strong kung fu.

Your reading this week contains topics on classes and ids, history of markup and how to add commenting your html markup.

Source Material

• A Brief History of Markup by Jeremy Keith
• The Difference Between ID & Class by Chris Coyier
• Best Practice for ID and Class Names by Jens O. Meiert
• Adding comments to HTML by W3 Schools

The World Around You II - A different perspective.

Overview

Last week you all looked at the world around you and attempted to markup the items and objects around you. The challenge was to match the essence of the item or object with the most suitable markup.

This week you're going to repeat this exercise using your newly acquired knowledge of classes and id to provide additional context to your markup. You're also going to be challenged further because I want you to hunt out items and objects that match specific tags.

You're also going to explain your thinking and choices inside the html document using your new knowledge of html comments.

Source Material

The world around you.

Submission

Produce a…

1. Photograph (example) or Drawing (example)
2. html file - validated through the w3c validator

… for each of the following block level tags …

• <p>
• <div>
• <article>
• <header>
• <nav>
• <footer>
• <blockquote>
• <ol>
• <li>
• <dl>

… and each of the following inline tags…

• <span>
• <time>

… and consider and apply the application of a class and/or an id based on what you've learned about the rules about classes and ids. You should also use your new knowledge of comments to provide a little explanation outlining your thought process and choices.

Your html files should be placed in your Dropbox public folder. You should create a new blog post called "Marking Up The World Around You - Part 2" and link to the files from your blog post.

I've created an example on my blog that you can use to get an idea of what is expected. Remember to do a view source on the html file so you can view the comments to understand my thought process.

Reflection

Source Material

Your learning this week.

Overview

Reflection might sound a little bit cheesy, but it is a powerful force in your learning. Each week you'll reflect on what you've learned and explored noting any thoughts, ideas or feedback you have about your experience. It's also important to feedback to those in your group to help solidify your learning experience.

Don't worry if it seems hard at first, it is, but it does get easier.

Submission

I want you to create a blog post on your blogs called "Week 2 Reflection" or something equally creative and write about your experience this week. Focus on what you've learned, what you've not learned, how you've found it, what else you'd like to learn and anything else that pops to mind.

Try and do your blog post on Friday or Saturday after you've spent the week doing your tasks and when you've done your blog post, drop by the people in your group and leave comments on each others blog posts.

Notes & Guidance

I'm stuck, where can I go for help?

We all get stuck from time to time, it's part of learning. If you do get stuck don't worry about it, you're surrounded by a support network. Here's what to do.

1. Google is your best friend.. Try searching for an answer.
2. Ask the people in your group, but do remember they might in a different time zone
3. Ask other people on the course, you can find a list of everyone's urls in the group list
4. Post a message to the HTML & CSS From The Beginning Google Group for the course. I'll try answer as swiftly as I can, but you may find that others on the course are able to help you as well.

Why are there no video lectures?

I honestly don't believe lectures work and there is a lot of teaching theory to back this up (Rodgers, Schon). The best way to learn is by doing and that's what this course is all about - doing and taking responsibility for your own learning. P2PU is all about addressing a new form of education free from the constraints of 'old style' academia.

Also there would be no time that suits everyone because of time zone differences.

How can I give Jamie Feedback

You can email me at jamiecurle dot com, or leave a comment on my blog on the post for week 3.