HTML & CSS Week 3: Marking Up The World Around You – Part 2

Looking at the other students’ post for this week I can already tell I will need to do a few iterations.  Here is iteration 1.  You can find the file in dropbox by clicking on this link.  I am still perplexed by this week’s lesson and I just don’t really understand why you need to create the divs, attributes, I did read the weeks reading but maybe a good analogy would help?   I know the code is probably not accurate but not sure where I need to update?  Would appreciate LOTS of guidance on this!!!

Summer Concert

Advertisements
Comments
5 Responses to “HTML & CSS Week 3: Marking Up The World Around You – Part 2”
  1. terrytek says:

    Hi Roberta–Here is how I think of the div tag (and I am by no means an expert, but I’ll try to help)…The div tag is sort of like a container for something. Think of a simple web page. You might need such “containers” as a div for the main content, a div for the secondary content, a div for the header, a div for the footer, and a div for the navigation. In HTML5, they have made specific tags for header, footer, and nav, so those are taken care of (in previous iterations of html, you would have used divs for those things and called them, for example, div id=”header”, etc.) You might have a div with an id=”main_content” and another div with an id=”secondary_content”. That way, when you are doing the appearance of the page with CSS, each “container” of related content can be styled together.

    Another way that I’ve heard block-level elements such as p and div described is that they are “hooks” to attach your CSS to. You may find the following reference helpful, as well as its corresponding inline elements list:

    http://www.tutorialchip.com/tutorials/html5-block-level-elements-complete-list/

    The p tag is used when you (usually) have blocks of text. You don’t have to put your div tags within p tags, because both tags are block-level tags, which means they will put a line break and a blank line after themselves.

    You can’t put other block-level elements in p tags (for example, you can’t put lists like ol, ul, or dl within p tags, or the code doesn’t validate). I found that out the hard way 😉

    I hope this hasn’t confused you!

    Terese

  2. terrytek says:

    I looked at your html file after I posted my earlier comment (didn’t see the link earlier, oops!) Most html tags have a corresponding closing tag that is necessary, for example, every <p> needs a corresponding </p>, every <div> needs a corresponding &lt/;div>.

    Your dropbox file has the extension .txt; if you save your file with the extension .html, you will be able to run it in a browser such as Internet Explorer or Firefox, and also you will be able to validate it at http://validator.w3.org/ . This can help find errors like unclosed tags and the like.

    Let me know if you have any questions.

    Terese

Trackbacks
Check out what others are saying...
  1. […] omitted closing the </div> tags in the previous post.  I made sure my ids had no spaces <div id=”idshavenospaces>.  Please click on the […]



Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: