RSS

Tag Archives: HTML

Week #4 reflection

I find that the more I’m learning, the more I realize I don’t know. I guess that’s not a bad thing; it just stimulates the desire to learn more.

“Learn By Doing” has always been one of the most effective learning methods for me. Once I make a certain mistake and learn how to correct it, I’m not likely to forget the right procedure the next time. One implementation of that this week is my attempt to use internal CSS stylesheets in some of my HTML documents (my elementary attempts at CSS in previous weeks were done with external style sheets). Jamie had said a few weeks back that I should comment more, so in an effort to do so, I had put some comments within the style tag (that’s where you put an internal style sheet). I found out putting comments inside the style tag is not a good idea!! Evidently, it can screw up the browsers’ reading the stylesheet, as I found out in my p, article, header, footer file. I had put a comment inside the style tag of that document and could not figure out for the longest time why my browser was formatting the #notable properly but ignoring the formatting for the #checklist (both were after the comment, but the comment seemed to affect them differently)!! And I found out in week #2 that you can’t leave a space between a number and its unit in CSS, because if you do, the CSS doesn’t work! So that is another mistake I won’t make again. Learn By Doing, it’s a mantra to live by 😉

I really like that HTML5 has tags that seem to be more descriptive of their contents than the “universal” div tag, like header, footer, article, nav, etc. I’m sure it will lead to code that’s easier to read, even if I don’t totally understand all the uses of the new tags yet.

Enjoying this learning journey very much, but not quite sure where I’m going with the final project…have to keep thinking. I’ve also learned a lot from my fellow classmates and enjoy reading their blogs; thanks to all of you for your help!

Antsy to start CSS!!

Advertisements
 
 

Tags: , ,

The World Around You Part III

I have a lot of photos and files, but in some photos/files I cover more than one of the tags assigned.

p, article, header and footer tags

(oops, I forgot the h5 tags around the two small-font colored blocks of text above (the yellow “The Checklist” and the black “Notable Quote”. Sorry.)

The p tag is for a paragraph or unit of text. As with most block elements, it starts on a new line and adds a blank line afterwards. However, I learned the hard way that you cannot nest lists (ul, ol or dl) inside p tags (I know this because your code doesn’t validate if you do that).

The article tag is for a page unit that can stand alone, like an article, blog post, etc. It’s new in HTML5.

The header and footer tags are just what they sound like–tags that allow you to group items in your header or footer together. They are sort of like specialized div tags, and they’re new in HTML5 (yay, HTML5)!

View the p, article, header, footer HTML file here.


div tag

The div tag is basically a container for a unit of content that you want to treat as one unit. Before HTML5, things you now place in nav, header, footer or article tags would have been in div tags.

View the div HTML file here.


nav tag

The nav tag is a way to group the navigational items on your page in one place. Yet another new tag in HTML5.

View the nav HTML file here.


dl and blockquote tags

The dl tag is for a definition list, where the terms to be defined have dt tags and their definitions have dd tags. Blockquote is used to set off a block of text from the surrounding text, such as a quotation.

View the dl, blockquote HTML here.


ol tag

The ol tag is for an ordered list, where the items need to be in sequential order.

View the ol HTML file here.


ul tag

The ul tag is for an unordered list, where the items don’t have to be in a particular order.

View the ul HTML file here.


span tag

The span tag is an inline element, useful when you just need a touch of CSS for a few words, etc. within a block element.
View the span HTML file here.


time tag
The time tag is used to indicate a specific date or time. As many of you know, I have struggled with the use of this element 😉 but my current understanding is that it enables people and computers to be sure they are referencing the same exact date and/or time, which is useful for example when you are dating a blog post or the computer is parsing HTML for an appointment to go into a calendar. It is a new tag in HTML5 and there probably will be uses for the tag in the future that haven’t been invented yet.
View the time HTML file here.


It took forever to get the text to “stay” with its relevant photo; what a nightmare 😦

 
 

Tags: , ,

Self-Assessment #2 (one of week 4’s assignments)

Here is my self-assessment table. Both the HTML and CSS validated.

Three things I’m having trouble with in HTML:

(1) I don’t know if “having trouble” is the right word, but I feel like I need to learn and experiment a lot with the img tag, since it’s pretty important in creating a web page;

(2) Still don’t totally understand the time tag. I can write a valid one, and understand how it is used to mark the date of, for example, a blog post, but someone on the Google list said “We use the time tag at my work to display our hours for that specific day and to display any events we have going on (ex- we have a charity ride leaving in 2 hours……1 hour….etc)”. I would like to know specifically how that works, and haven’t been able to find an explanation that makes sense to me on the web yet;

(3)I understand how to nest tags but am still learning about block-level vs. inline, and which tags can/cannot nest inside which other tags (the p tag in particular). I’ve had it explained to me but can’t always remember it when I’m actually writing HTML.

 
 

Tags: , ,

Reflections on week #3

I learned a lot with this assignment, because unlike the previous two assignments where the html tags were mostly familiar to me, this week’s had many tags that were new to me, such as <time>,<article>,<dl> and so on. When validating my html file, I learned that certain tags can’t be contained within certain other tags. For example, lists can’t be nested inside the <p> tag.

I understand the value in marking up pictures, but I find it frustrating to do the text on them; there’s never enough room!!

Even though we haven’t done CSS yet, I have a .css file with my .html file this week because I’ve been fooling around with CSS.

Looking forward to the next assignment, especially since things have been a bit hectic in my house the last few days, but now I’ll have more time.

 
 

Tags: , ,

Marking up the world around you part II

(Oops, I misunderstood the assignment, so I did a freestanding html file with no relation to the pictures below; that is “Week #3 assignment”. I went back and did html for each picture after getting feedback from Jamie, and those links are below.)

Please find my Week #3 assignment here: http://dl.dropbox.com/u/29984044/week3assignment.html

It validated in both HTML and CSS.

Here are some marked up pictures:

(the html to go with the bus picture: http://dl.dropbox.com/u/29984044/busmarkup.html

the html to go with the score picture: http://dl.dropbox.com/u/29984044/NoHitterDay.html )

Bus markup

nohitterday

 
 

Tags: , ,

Just out of curiosity, why “strong” tag instead of “b” tag?

I was wondering why, so thought this was interesting:

> I haven't quite figured out why <code><strong></code> came into use
 > instead of <code><b></code>.

For semantic reasons.  The general meaning of <b> is "stress this,"
which we display visually as enboldened print, but in a screen
reader it is spoken more loudly.  To reflect this semantic meaning
we now use <strong>.  And with CSS we can now display <strong> as,
for example red colored text rather than bold text if we wish.

Same argument goes for <i> / <em>.

(However, note that <b> and <i> are *not* deprecated and are fine
to use when we do not MEAN strong or emphasis.  For example it is
proper to use <i> for the title of a magazine article, or for
foreign terms.  In these cases we use italics not to suggest
stress, but just because that is the way Strunk and White tell us
to format them.  There is no semantic
meaning in these latter cases.)

Hope that clarifies a bit.

--

E. Michael Brandt

(terrytek)I have read in some places that <b> and <i> have been deprecated,
or are not yet but should be deprecated; I have had trouble find-
ing a clear answer on this.
 
1 Comment

Posted by on May 27, 2011 in HTML5

 

Tags: ,

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 http://www.html.net/tutorials/css/ and learned that there is a CSS property called

{

margin-left:

}

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.
</p>

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: , ,