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.

My Text Editor of Choice

I chose Notepad++ as my text editor of choice, although perhaps not for as scientific a reason as some may have used.

I tried Notepad++ and ConTEXT - both free programs for Windows, which was my original incentive for trying them.  ConTEXT was my first try, and I liked it, but found it a little cluttered.  I was concerned at first about the lack of line numbers - which I find appealing, however I then found the option in settings to give it line numbers, so that concern was no longer relevant.  I tried Notepad++ next, and immediately liked it.  I can't really even explain what the draw was, other than to say I just liked the feel of it.  It's more streamlined, and I found it to be more visually appealing.  Both editors used colour-coding, which I love, and both are fairly highly-customizable - especially for free programs. 

Since trying the programs, I have read several comparisons of the two, and I would have to say that I believe I made the right choice.  The idea of being able to compare two documents side-by-side, or using a find-and-replace feature is a definite draw, and only available in Notepad++.

I think that at some point, if cost isn't such a concern, I may try out some of the more expensive editors.  At this point I didn't want to download a free trial, start to get used to it, and then either have to switch or pay a significant amount of money to keep it.

 All in all, I'm happy for now - Notepad++ seems to be a more-than-adequate program to handle my current needs.

Hello World - HTML by Hand

So for Webmaking 101 at P2PU's second challenge, I had to write out a few short lines of code by hand.  I wrote this (Ignore the writing on the first few lines, I was just setting it up in the notebook I'm keeping for the course):

 

We had some code to work from, and it only took me one try to get the code written from the sample - however I'm still working on trying to be able to do it from memory.

Introduction

Hi!  I'm Steph. Funny way to start a blog post, but anyway...
I'm a 30-something woman living in Canada, with my spouse "J", our three cats, our dog, and our turtle.  I have a degree and a diploma, and am currently working in an office environment, but I would like to start my own web design, development and content writing business so that I can work from home.
I did some web design back in elementary and high school, before WYSIWYG editors and free online templates, when it was all html - but I haven't done much of it since - save for minor changes to blog layouts.  I've always been interested in graphic design, but I also have a passion for writing and photography - two things that I think would tie in well with a career in web development and design.
I'm taking the P2PU program to teach myself web design over from the beginning, and I am also planning on taking a certificate program in web development.