HTML Hunt

My self-education in coding continues: This posts shows the results of my efforts on Challenge #4 in P2PU School of Webcraft. This challenge required researching a list of basic HTML tags and then looking for examples that represented the tags in my neighbourhood.  A very clever way to get you thinking about what HTML tags mean and how to use them!  And actually in the ‘Text’ mode of drafting a post in WordPress, I see some tags I recognise and vaguely know the meaning of now.

I found this particular challenge interesting because it unearthed the complexity that underpins many of the things we do that require HTML, such as communicating with people and surfing the web for news and entertainment.

Here are my photos which represent the various HTML tags:

This section of wall which juts out seemed to say  to me, since it links two bits of wall.

This section of wall which juts out seemed to say <nav>to me, since it links two bits of wall.

An obvious choice for the tag time, which represents a time or date.

An obvious choice for the tag <time>, which represents a time or date.

This one's more interpretive, shall we say, since I saw the garage door as the extended quotation indicated by the tag blockquote.

This one’s more interpretive, shall we say.  I saw the garage door as the extended quotation enclosed by the brick, or an example of the tag <blockquote>.

Many examples of <ol> (ordered list):

IMG_3136 IMG_3137 IMG_3138IMG_3130

Finding example of  was easy.

Finding examples of <ol> was easy!

Here is my div. The paint marks where cars (the content) can be 'contained'.

Here is my <div> tag. The paint marks where cars (the content) can be ‘contained’.

Another interpretative one, the chain is the span which links two elements (gates) for security purposes.

Another interpretative one, the chain is the <span> which links two elements (gates) for security purposes.

q was easy enough.

<q> was easy enough. The text ‘SCHOOL’ is enclosed by the lines.

Not a great photo, but it is an img!

Not a great photo, but it is an <img>!

This one was tricky to find. I chose the post box because it was a stand alone item (though not in a line!).

<li> This one was tricky to find. I chose the post box because it was a stand alone item (though not in a list/line with others!).

The menu tag was another harder one. I chose the messy bins because they were both unordered and required some action (i.e. emptying!).

The <menu> tag was another harder one. I chose the messy bins because they were both unordered and required some action (i.e. emptying!).

Again p was fairly easy. This is a concert poster.

Again <p> was fairly easy. This is a concert poster.

My ul tag example. Trees growing in natural, unordered formation.

My <ul> tag example. Trees growing in natural, unordered formation.

 

My First webpage

I’ve just created my first webpage, Challenge #3 of P2PU School of Webcraft.  I use OS X and so when trying out text editors, I found VIM first since it was free and apparently awesome.  However!  I have no background knowledge of coding at all and I found VIM difficult- just as the challenge indicated!  I downloaded Text Wrangler next.  The difference was like night and day.  First of all, it opened with a blank doc.  I had to figure out how to start a new doc with VIM, but with Text Wrangler it was ready right off the bat.  As I said I’m a total beginner, so I really appreciate user friendliness!  I found the highlighted line in Text Wrangler helpful since you then know exactly which line you’re on.  The indent functions also were very intuitive, and the indents came out just like the example in Challenge #2.  I saved my html doc and it opened just fine in my browser!

Conclusion:  Text Wrangler works for me and I’d recommend for it for other people with no coding background.

My HTML code

My HTML code

This is a scan of task #2 from the Webmaking 101 challenge: my very own handwritten HTML code! I had done a few other efforts several weeks ago, but my scanner was broken. I took another stab at it today and only made one mistake. Previously I found the more times I did it the more mistakes I made.