Real-Life HTML

This project proved to be an interesting one.  The assignment was to find real-life examples of the HTML codes:

• <div> or "HTML Document Division Element"
• <blockquote> or "HTML Block Quotation Element"
• <p> or "HTML Paragraph Element"
• <ol> or "HTML Ordered List Element"
• <ul> or "HTML Unordered List Element"
• <li> or "HTML List Element"
• <nav> or "HTML Navigation Element"
• <menu> or "HTML Menu Element"
• <span> or "HTML Span Element"
• <time> or "HTML Time Element"
• <q> or "HTML Quote Element"
• <img> or "HTML Image Element"

I've taken pictures that I took (except for one, which I am in), and assigned each an HTML element.  A number of the pictures could have been assigned multiple elements, some of which I have indicated - and many of which I am sure I have missed.  I went out this week to take pictures for the assignment, but didn't find everything I was looking for, so I had to go back through some of my old pictures to find what I needed.

 

This was a rather strange arrangement of items I found on a walk at a provincial park. I imagine a previous hiker put it together - perhaps as a home for small forest creatures ;-)  Anyhow, I felt it represented a division element fairly well.  It could also represent a span element, depending on the context of the surroundings.

 

The above picture is of my partner and I just before our first 5k race.  I had some difficulty finding quotes to take pictures of, so instead I found quotes to put on pictures I had.  I chose this quote to represent the blockquote element, because in a document setting, a quote this lengthy would likely be formatted as a blockquote.

  

I had a hard time finding an image to represent a paragraph, so I went the literal route with this one.  This is the introductory page to Madeline L'Engle's "A Wrinkle In Time", one of my favourite childhood novels.  This could also represent the quote or blockquote elements as well.

  

This was the first image from my collection that came to my mind when I thought of a real-life ordered list element.  In this context, the "items" in this list are more unordered than ordered, but as each player has a number on his jersey, ordering them would be easily done.

This is a series of children's novels we bought our niece last Christmas (don't ask me why I took a picture of them at the time, I can't remember).  They represent an ordered list, in the way they are packaged, and the way they are meant to be read.

 This was one I took this week specifically for the project.  The railway tracks made me think of an unordered list, in that they physically remind me of bullet points, and none is ranked differently from another.

  

A strange unordered list - my parents' cats eating their supper on their scratching post.  This was a few years ago, and sadly, not all of the cats are still with them - but I don't think I'd ever seen all of the cats in one spot like that before.

 

The sign in this picture just looked to me like it belonged on a bulleted list (and probably was somewhere else in the park, on a directory sign - although I didn't get a photo of it).

 

 The navigation element pictures that I used were ones that I felt represented a means of getting from one location to another.  This was from another park we went to visit (the same one as the funny little "animal home") 

 

Another journey.  This is a path we walk often when the weather is good.  There used to be railway tracks here, long before my time.  You can still find railway spikes along the edges if you look while you walk.

  

Another park picture, this one from a local conservation area that boasts caves - and these, which are called kettles.  I labelled it as a navigation element because it had a "Down the Rabbit Hole" feel to it.

  

 I chose this for the menu element because of the buttons on it, representing menu options - however it could easily represent the division element, or navigation, or an ordered list, or span...

 

I chose this to represent the span element, because of the in-line positioning of the sections.  Incidentally, this one is good for a smile, since no one put the cat in the box.  I was trying to sort through items in the kitchen, and turned around to find the cat in the "keep" box (I swear, we were going to keep her anyway).

 

A visual representation of the time element - do you know how hard it was to find a clock in my house that wasn't digital?  (Digital clocks just don't make for overly interesting photographs...).

  

A shorter quote, one that would likely be in line with text in a document - although in this case, it does resemble a blockquote.  This was my partner's cat growing up, and I got to know him well before he passed away a year ago at the age of 18.

My first image element representation - a picture I took of the front of a photograph album depicting my grandparents' lives together.  This was given to my grandfather by my aunt for his 94th birthday.

 Another image element.  This is a photo of an abstract painting I did back in high school.  Just something fun - and probably the only real painting I've ever done - lol.