Category Archives: HTML5

Reflections on week #2, or how I jumped the gun with CSS…

I learned quite a bit from this week’s assignment where we had to put tags on Jamie’s text file. Being the type A that I am 🙂 I wanted to make my text file look exactly like Jamie’s, even though I knew the indents were there to make the code read easily. But how do you indent something on a web page in this day and age? That’s right, CSS! I sort of knew this organically but wasn’t too sure; help from Jamie and sedmikrasky in the IRC chat room confirmed what I already knew and had found by googling. (Here’s the mantra, say it with me, “HTML for structure, CSS for appearance, JavaScript for behavior”). Being the curious person that I am, I then wanted to know how to indent using CSS, because I needed to indent IMMEDIATELY!! I followed a CSS tutorial at and learned that there is a CSS property called




that lets you indent. Now here’s where the major learning came in (I learn best by actually applying things I’ve learned to something I’m working on, rather than knowing it theoretically)….I read in the tutorial that the value of the margin-left property consists of a number and a unit (pixels, centimeters, inches, what have you). So I made a class “.tab” and put a value in my CSS sheet (thank you, Jamie, for showing me how to read the source code for CSS sheets):

.tab {

margin-left:60 px;


(Apologies; I can’t get the previous statement to format (indent) the way I want. I need a CSS sheet for this post!!)

and called the class in my html

<p class=”tab”>
Paragraph paragraph paragraph paragraph paragraph<br />
paragraph paragraph paragraph paragraph paragraph<br />
paragraph paragraph paragraph paragraph paragraph.

but it didn’t work!! I was so disappointed! I put other properties in my .tab class that did work, like colors, so I knew my .tab class and calling the class were okay; the problem was somewhere in my margin-left statement. Here was the problem (which took me a while to figure out): you cannot leave a space between the number and unit values in the value statement. It must read 60px, NOT 60 px.

I know we haven’t done the CSS portion of the course yet, but all you CSS newbies, don’t be frustrated by leaving a space and having your properties not be applied!! You can bet I’ll never make that mistake again 🙂 — that’s what I mean by my learning better when I actually have a problem to solve.

I thought the part of our assignment where we tag photographs of the world around us was fun, and an interesting way to look at HTML. It was especially interesting to me because I tend to see things very literally and don’t consider myself too creative, so the assignment took me out of my “comfort zone” and helped me to see HTML in a more creative light.

Looking forward to more fun learning in week 3! I really do love learning new things…


Tags: , ,

Week #2 assignments


Tags: ,

Reflections on week #1–HTML and CSS from the beginning

Hello World screen capture

Hello World screen capture, week 1 assignment

(BTW, you probably all know this already, but I didn’t :)–to make the image larger and therefore viewable, double-click on it). Very excited to start the course.  Even though this week’s “Hello World” assignment was simple for someone who has had experience with HTML, I still learned something: I didn’t have any idea how to write the head of an HTML document! Even though I used Dreamweaver in the past, I still learned a fair amount of HTML because I enjoy learning new computer things, so I would “hand-write” some of the HTML in my documents so I could learn. However, Dreamweaver and other such programs insert most if not all of the stuff in the <head> of a document for you, so that was mostly new to me. I also didn’t know that <h1> tags and the like automatically insert a carriage return into your document (good to know).  Doing this simple “Hello World” document just whets my appetite for doing more complicated stuff. And the CSS stuff we’ll be learning later will be almost totally new to me, so I hope we start that section off as simply as the HTML section :=) !!


Tags: ,