Week Four - Document Structure
HTML&CSS Week 4 - Document Structure
Hello Everyone,
Welcome to HTML & CSS from the beginning lesson four. This lesson is last our one on html; starting with the next lesson we'll be starting to incorporate CSS into our work, but before we can get there we need to make sure that everyone is happy to move forward.
The topic of this week's lesson is document structure. Over the past lessons you've explored the world around you experimenting with marking things up and where applicable adding classes and ids. This week you're going to finish off by working on the structure of your documents and ensuring that they pass through the W3C validator with zero errors ( though you'll get one warning about using anexperimental feature: HTML5 Conformance Checker, but you can ignore that)
From a technical point of view this is a chance to focus on writing clean markup and especially to focus on indentation of your markup. You'll also be working to further your knowledge of deciding how to markup content and asking yourself "is this the right tag for the job?"
As with all lessons there is associated reading and reflection. This week the reading comes from an article that is over ten years old and was authored by a chap called John Allsop. The article is from AListApart.com and is entitled "A Dao of Web Design". It's amazing that it remains as relevant today as it was when it was written. Especially when you consider that at the time of authoring Internet Explorer 5 and Netscape 4 were the two main browsers.
Recap
Before we get into the details of this week, here's a quick recap on lesson 3 and what you should have produced, done or read up to this point.
Dropbox
You were asked to install dropbox on your computers to make collaboration easier and so that you didn't have to divert your learning power to the many many ways of publishing content on the web.
Reading
You were asked to read four articles
- 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.
This task required you to produce a photograph (or sketch) and a html file for each of 12 tags. Many people didn't do this exercise in full, so I want you to tackle this again. There is a high quanity of work in this exercise because practice makes perfect.
Reflection.
As always you reflected on your progress and your experience of learning.
New Groups
Sadly we've had a few people dropout and this has created a imbalance in the groups so I've created a new group list. The groups are now larger so do make sure to stop by everyones blog and say hello, bonjour, ola, yasoo or whatever you use to greet new friends.
This week
The focus on this week is document structure and as with the previous weeks, we'll be taking our cues from the work you've done based on the world around you.
However now that you've had chance to get your hands dirty and experiment with tags, it's time to consider the document as a whole. Now you'll begin to refine your craftsmanship and technical ability whilst at still developing the "right tag for the job" mentality.
This week you have four tasks
The World Around You part III
Many people didn't complete this exercise in full ( if at all last week ) so we need to do it again this week but with a tweak. In marking up the world around part one you marked up things that were around and used what you considered to be the correct tags to markup what it was you were looking it.
In this exercise, you've got to go out into the world and find examples of the following tags
- <p>
- <div>
- <article>
- <header>
- <nav>
- <footer>
- <blockquote>
- <ol>
- <ul>
- <dl>
- <span>
- <time>
For each of those tags you're to take photograph (or sketch) of the item that you think best represents the tag and then author a html page based on the content of your photo/sketch.
- You should attempt to use id & classes where applicable, but remember that less is more.
- Use <!-- comments --> in your html file to state why you choose what you did and your logic for marking it up. A simple sentence will do.
- Each photograph and html page should be placed inside your Public dropbox folder - feel free to create a new folder inside your public folder. Tidy folders create tidy minds.
- Each html file should be ran through the W3C Validator to ensure that the code is correctly written.
Submission
To submit your work you create a blog post called "The World Around You Part III" and link to each of your photos and html files. Create a heading for each tag and write a small bit of text about the tag that you talking about. All of your html files should be ran through the W3C Validator to ensure that the code is correctly written.
Assets
- The world around you
- I've created an example on my site for you to look at containing all the photographs and html files.
- I've created a video of a workflow that should give you an idea as to how best to work in dropbox
- I've also created a video that shows you have to validate your code that you've got in dropbox with the w3c validator
Tables, Self-Assessment & Three Things
In this task you're going to more bang for your buck. You're going to learn about tables and also mark yourself on your current knowledge and undertstanding of html
If you cast your mind back to the application for this course you'll note that your first task was to give yourself a mark for a number of different questions that related to HTML & CSS. You're going to do this again, but this time answering only the following questions.
- I understand html
- I understand the concepts behind HTML
- I understand how to view the source of web pages
- I understand how to structure a HTML document correctly
- I understand the anatomy of a html tag
- I understand how to use the right tag for the right purpose
- I understand the difference between classes and id's
- I understand what makes a good class name and a good id
- I can 'think in html'
- I am able to bend spoons with my mind
- I understand the quirkiness of browsers
- I am motivated to learn
- I am enjoying myself
Here's the twist though, I want you to create a table to display this data and I want you to put your original scores alongside your new scores. The table should look like something this, but don't worry too much about making 'look' the same ( remember appearance is CSS and we haven't covered that yet), but focus on getting the table marked up correctly using thead, tbody and tfoot. Whilst w3schools is ok for small bits of info, you should use HTML Tables from the Opera dev curriculum as the reference material for this task.
Submission.
I want you to put your table into a html document, make sure it's valid by running it through the W3C Validator. Then I want you to place it into your public dropbox folder and create a new blog post entitled "Self Assesssment 2" and link to your html file in your dropbox folder.
Once you've linked to your html file, I then want you to use the blog to think of three things that you're having trouble with in html and that you'd like solve once and for all.
Assets
- There is a lot of information on tables out there on the web but I want you to focus on writing a solid well written table. HTML Tables from the opera dev curriculum is a fantastic resource. Don't get too hung up on the CSS side of things yet though - that comes next week.
- Reference Image
Reading : A Dao Of Web Design by John Allsop
Written over 11 years ago "A Dao of Web Design" is just as relevant today as it was when it was written. I've been saving this as a special treat for you all.
Submission
In with your reflection I want you to write a little bit about the thoughts that this article invoked in you.
Assets
Reflection
As with every week I want you to reflect on the tasks after you've done them and consider your strengths and weaknesses. Aim only to Impress yourself with your own honesty.
Submission
I want you to create a blog post called "lesson 4 reflections" and write about your learning so far taking into account the above points.
Summary
To summarise this week you have four tasks. At the end of the week you should have created three blog posts, one for the World Around You Part III exercise, one for the Self Assessmemt Exercise and one for your reflection.
You should have created a number of html files ( most from the World Around You exerise) all of which should saved into your public dropbox folder and be ran through [the W3C Validator].
You will have a number of photographs that served as the source for the html files in the the World Around.
Help & Guidance
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.
- Google is your best friend. Try searching for an answer.
- Ask the people in your group, but do remember they might in a different time zone
- Ask other people on the course, you can find a list of everyone's urls in the group list
- 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 post for week 4