Index·Lesson 1·Lesson 2·Lesson 3·Lesson 4·Lesson 5·Lesson 6

What We Learned in Build Your Website 1 XHTML/CSS

Since this is our last assignment, I thought I would review what we have learned in our Build 1 class. I am doing this for 2 reasons. First, we have learned so much, that I thought it would be a good review for me, and second I need enough text to do the assignment, have 3 headings and apply all that is required for this assignment. I think I may have heard once that web sites are a text driven medium.

Before this class I used DreamWeaver without really understanding all the fundamental principals of XHTML or CSS. I was confused, bewildered. Below is a shot of me before taking this class.

View me as I was and weep.

Now that I have taken this class, I understand much more. I look back at all those frustrating little problems I had when I couldn't make something work on a page and I understand what went wrong. I know having a great foundation will make constructing web pages a much more rewarding experience. This is me now.

View me as I am now.

A Nod to Deb

Deb has been our fearless leader in Build 1. She has been an excellent instructor and I mean that whole-heartedly. One thing I must say is that she misses nothing. If you have one thing wrong, no matter how small, our eagle-eyed Deb will catch it. I find it amazing how she has the patience and fortitude to go over our work and all those lines of code. It's not like going down a column with an answer key. She has to study each line and go back and forth from styles to body putting everything together. Deb, I don't know how you do it (but I'm glad you do).

On to the Lessons

Below I will give a brief overview of what we learned in each of our lessons.

Lesson 1

Lesson 1 was an introduction into the world of building websites using XHTML and CSS. We were given an explanation of many of the acronyms we would be using throughout the class and told to use Notepad to build our pages. We learned about naming Conventions. We then learned about a web page's structural components which include: DOCTYPE declaration, HTML tag, Namespace declaration, Head tag, Title tag, Content Type and Encoding declaration, and the Body tag.

We were then taught about block-level tags. Block-level tags are used to format elements in a page, they stand on their own, and add white space before and after their content.

The first block-level tag we learned about was the heading or <hx> tag. We learned how to code the tags, that there were six types of heading tags, and the rules and uses of each. Headings, as simple as they are, turned out to be a small nemesis for me, because I frequently forgot to put text under all of them. Quite a simple thing really, I don't know why I messed it up. But I did eventually learn, so it's all good. Next we learned about the <p> tag which is used for paragraphs.

Next we learned about text-level tags. The <em> tag shows that a small section of text is being emphasized. The <strong> tag is used for text with a high level of importance. We also learned how to create a hard break in a line using the break or <br ⁄> tag. Finally we learned how to insert a straight line in our page using the horizontal rule or <hr ⁄> tag.

Last, we were shown how to validate our page using the W3C Validation Service. Wow, no wonder I was exhausted after that lesson!

Back to Top

Lesson 2

Lesson 2 was fun. We learned about using Hexadecimal Color Coding to brighten up our pages. This is where we began using CSS. We were taught how to embed CSS in our page using the style tag. We then added color declarations to the body, paragraph and heading selectors. We also learned how to combine selectors and combine declarations. We were made aware that there was a coding order so that our styles would have proper inheritance and cascading. Then we validated our CSS.

We were then taught how to add XHTML and CSS comments to our page. These comments only show up in the coding. The browser doesn't render them. We also learned how to code special characters, such as © and ¼.

We covered how to construct links using the anchor tag. We created absolute links (links to other pages), relative links (a page inside our own site), email links and internal links (links within a page).

Lesson 3

Yeah fonts! I love fonts. I do have to say that doing fonts for print is much more satisfying than doing fonts for the web. That is because with the web, fonts that are displayed are dependent on each users computer. I could have a great font, but if someone doesn't have it on their computer it won't show. I just don't get that excited about sans serif fonts. What I would love to do some day is to create a great font and have it available for download on my site. Oh well, some day maybe. Common font properties are: font-family, font-style (normal, italic, oblique), font-weight (normal, bold, bolder, lighter, etc.), font-variant (normal, small-caps), and font-size.

Then we went into text properties. Text can be aligned to the left, right, center or be justified. Text can be decorated in the following ways: none, underline, overline, line-through. One can also create blinking text, although this should never be done. In addition to being silly, it can also have serious consequences for people with epilepsy. Text transformation is another text property. It includes none, capitalize, uppercase and lowercase.

Next we learned about pseudo-classes. A pseudo-classe is pre-defined in CSS. One can specify properties but, when using a pseudo-class, the selector responds in a predetermined way. We pracitced this by styling links. The order in which you specify pseudo-classes for links is important. It must go in this order: link, visited, hover, and active. This can be remembered by LoVe HAte.

Back to Top

Lesson 4

This was another lesson I loved- adding pictures. Deb stressed that image sizes should be kept low. We learned how to insert thumbnail images into our pages to keep the page size down. Thumbnails are smaller pictures that a visitor can click on to see the larger image. We were then given sites we could use to optimize our images. We were also told that from this point on, our pages would have to stay under a 50kb limit.

Next we learned about classes. Classes are great for styling. You create a class the way you want, name it, and then you can reuse with any element using the "class" attribute. Deb then went on to selectors vs classes. With selectors, the specified properties will style an element the same way each time the tag is used. A class styles only the content within the element to which it is applied. For example, I would use a selector to create a heading that is bold and red. If once in a while I wanted the heading to be red but not bold I would use a class. We also reviewed the concept of inhertiance, the style that is closest wins.

Oh no! The div tag. The divide tag is used to style several block-level tags. I had terrible problems with this, but again, it all worked out in the end. We also learned about the span tag. The span tag works the same way as the divide tag, but it is used for smaller elements and must be used inside a block-level tag.

This was a great lesson. You can do lots of styling this way.

Lesson 5

This was one of the few lesson I actually found easy. We applied margins (space surrounding the outside of an XHTML element) and padding (space inside the element's container) to our pages. Properties must be written in a specific order: top, right, bottom, left. We can remember this by using TRouBLle. Margins and padding can be applied to text, heading, and even images.

After that we created tables. Tables are used for data only. At one time web developers used tables to design web pages, but now with CSS that is no longer necessary.

Lesson 6

Finally, Lesson 6. It is so bitter-sweet to come to Lesson 6. It's nice to have accomplished something, but at least for me, I enjoy LVS classes and am sorry to see them end. The first thing discussed in this lesson was meta tags. We learned about some tags we hadn't gone over previously. These include the Description Tag, the Keywords Tag, and the Refresh Tag, as well as some others.

Then we were taught about directories and their structures. We arranged our directories and created folders. We also learned about paths.

Finally we learned about index pages. I will not discuss this here, since I have to create that page after this one. I really want to make that page cool, or at least really pretty.

In our assignment page we were given a cheat sheet with everything we learned set up in a very neat and tidy way. This, for me, is a great reference which I'm sure I will refer back to in future Build classes. It was very much appreciated!

Email Patty.

Back to Top

I used this tool from Dynamic Drive to optimize my images:
Free online tool- optimize your gifs, jpg, and png images

Valid XHTML 1.0 Transitional

Valid CSS!