HTML & CSS from the beginning.

This course will become read-only in the near future. Tell us at community.p2pu.org if that is a problem.

Task Navigation 

Week Two - Anatomy of Tags & The World as HTML

HTML&CSS Week 2 - Anatomy of Tags

Hello Everyone,

Welcome to HTML & CSS from the beginning week two. This week is all about tags — how they're structured, their names and what they're for. Before we get into that though, let's recap what we covered last week.

Recap on Week 1

Last week was the first week and you were given five tasks to complete.

Your Groups

You were asked to introduce yourself to the people in your groups and start leaving comments on each others work — You should now know everyone in your group and be familiar with their blogs and interacting with each other.

Hello World

In this task you were asked to be learn (by repetition) to write a basic "Hello World" page until you could do it from memory. You should be able to do this now in under two mins.

View Source

Looking at the source code of a website is one of the best ways to get a feeling on how things are put together on the web. It'll also show you how the quality of the code varies from one site to the next. You should now be forming your own opinions about the importance and impact of quality clean source code.

Reading

A lot of people have taken the time to write some very good articles on the basics of html and last week I asked you all to look at one written by a fine chap called Mark Norman Francis on the basics of html. It did go a little bit further than we are, but it should have given you some stuff to think about.

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 six 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. Anatomy of HTML tags.
  2. The World Around You.
  3. Final Projects.
  4. Reading.
  5. Reflection.

As usual if you get stuck help is available :)

Finally, I've been a little bit busy over the weekend and I've yet to get around everyone's blogs. Don't worry, I will get round everyone's blogs and leave feedback. If you have access the internet during the day and you can get on IRC, the do hang out in the HTML&CSS From The beginning IRC channel. If I can't answer a question there right away someone is bound to be available to help.

Anatomy of HTML tags ( Headings, Paragraphs, Unordered Lists and ordered lists)

Overview

In designing for the web there is a trinity. HTML is referred to as the structure, CSS is referred to as the aesthetic or appearance and JavaScript is referred to as the behaviour. Generally speaking you'll always want to keep structure, appearance and behaviour separate. Although this course is only concerned with the structure and appearance, you should remember this trinity and the fact that it makes your life easier to keep them separate. For the next few weeks we're going to start with the first item of the trinity - structure.

HTML is made up of elements, and the elements are made up of tags. It is the tags used to create the elements that give an html document it's structure. There are many HTML tags and they each have their own usage and separate attributes and (with a few exceptions) they all share the same anatomy. Tags are a lot are a lot like Russian Dolls in that they 'nest' together.

The structure of an html document should be informed by the content that it contains. To put it another way, you should always use the right tag for the job. To give you a hint, you'll be using Paragraphs, Unordered Lists and ordered list tags.

Source Material

Submission

Using Template 1 as the content, I want you to turn this plain text file into a valid HTML document. Remember to start off with the hello world template that you should have memorised last week.

You can check the validity of your HTML file by uploading it to the W3C Markup Validation Service which will tell you if your file has any errors in it. I want you to put the correct tags around the content, but don't worry, I've left some pretty strong hints about what tags to use in the document.

Remember to pay attention to the indentation of your code as good indentation will earn you bonus points when working with others. When I give you feedback on this task I want to see perfect valid code :)

  • If you're able to, upload your document somewhere and link to it. If you can't do this, don't worry about it.
  • Take a screenshot of the source code of your document and add the screenshot into your blog post
  • If you can't do that then print it out add write the HTML by hand, photograph it and put that into your blog post. Here's one that I made earlier

The World Around You.

Overview

Writing good HTML markup is about using the right tag for the right purpose. The hard part is deciding what tag best suits the content that you'll be marking up. In this task you're going to look at the world around you as if it was one big html document. Try looking at things and deciding what tag would best be used to markup the thing you're looking at. What you'll be developing here is your skill at identifying different kinds of content. There is no wrong answer here because it's all based on what you believe to be the right.

Source Material

The world.

Submission

Post a blog post on your blog explaining what you've looked at and what tags you'd use to mark it up. I've put some examples on my site and I've used photoshop to overlay the tag names onto the photos. If you haven't got photoshop don't worry about it, I've also put a hand drawn one together.

  • If you're able to, take photographs of the things you've looked at. If you can't do this, don't worry about it.
  • Draw it on paper by hand Here's one that I made earlier
  • If you can do neither then just explain it as best you can. Perhaps via the power of modern interprative dance?

Final Projects

Overview

By the end of the course you're going to create something. What that something is entirely up to you. I want you to start thinking about what it is you're going to create.

Source Material

Your imagination and personal goals.

Submission

Nothing just yet, but do start thinking about it.

Reading

Overview

This week I want you read the opening chapter from the truly splendid "Dive Into HTML5" by Mark Pligrim. I've also listed a great page from HTML Dog on the subject of Tags, Attributes, and Elements. I also want you to start sharing links to interesting things that you've found in your groups, or in the HTML&CSS From The beginning IRC channel.

 

Source Material

  1. HTML5: how did we get here?
  2. Tags, Attributes, and Elements
  3. ??? You tell me!

Submission

None, as with last week, keep reading it and referring back to it.

  • If you're able to, take photographs of the things you've looked at. If you can't do this, don't worry about it.
  • Draw it on paper by hand Here's one that I made earlier
  • If you can do neither then just explain it as best you can. Perhaps via the power of modern interprative dance?

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. Drop by the IRC chat room for the course. I'll try and be in there whenever I'm at a computer. I may be working however, so be patient for a reply
  5. If you've tried all of the above, you can always email me@jamiecurle.com and I'll do my very best to answer you as quickly as I can.

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@jamiecurle.com, or leave a comment on my blog on the post for week 2.

Task Discussion