Alright, i've got some time and i don't feel like designing so i'll do part 2 right now.
Let's learn some things we need to always keep in mind when it comes to web design:
-Logical Order
-Commenting
-CSS intro
Logical Order
tags
When designing it's best to use logical order, it makes more sense to have your headings in heading tags, and your content in paragraph tags, versus putting headings in div tags, and content in heading1 tags.
So when designing, always think about the logical order of things, put information in the relative tags, don't put them in the illogical tags.
information position
When sorting your information in the HTML document it makes sense to show it in the HTML as it is shown to the user, have it flow from top down in the HTML and have it flow from top down on the page.
Commenting
Comment your work, this is extremely vital, it will definately help you in your work, commenting in xHTML is [HTML]<!-- comment goes inside here -->[/HTML] use comments for things like the closing of div tags, if you have a div tag open, comment where it closes, for example, you've got:
[HTML]<div id="hello">
</div><!-- end of hello -->[/HTML]
you now know that that close tag is for that specific div "hello".
when commenting in CSS, you comment like this:
[HTML]/* Comment goes here */[/HTML]
it's also useful to use comments to explain things you might forget later, a html comment can be as long as you want, just remmember to close it, and to not put tags inside of it, they will be ignored by the browser.
__________________________________________________ __________________________________________________ _____________________________________
CSS Introduction
CSS - Cascading Style Sheet
The point of CSS is to seperate the styling (look) from the content in a xHTML document, it is a valuable tool and allows us to make some very beautiful designs.
How to declare CSS in xHTML
First of all, we have to tell the xHTML document that we'll be using an external css document, so we put the following code inside the <head> area:
[HTML]<link rel="stylesheet" href="style.css" media="screen, projection" />[/HTML]
Basically, it says it's a stylesheet, it's location (href) is the same place as the document, but it's called 'style.css' and the media it is to be shown for is a monitor and projections.
so now we've done that, we'll make a new document, called style.css, in the place of the HTML document. You can do this by just renaming a notepad text file to "style.css" instead of "whatever.txt", from this file we can control the layout of the HTML document.
CSS Basics
in your CSS is a completely different markup style from the xHTML document, we not longer have TAGs but RULES, which go as follows:
identifier {
style: value;
}
so if we want to style every single <p> tag in a xHTML document to have the text color white, we could use this:
p {
color: #ffffff; /* #ffffff is the hex color for white */
}
that would set all the <p> tags to have white text, but what if we want to have ONLY the <p> tags inside a <div id="hi"> to have that color text? well we can use hierarchy inside the css:
#hi p {
color: #ffffff;
}
only the <p> that are INSIDE a <div id="hi"> will be affected by that CSS rule. also note the # in the front of the hi, this is the CSS way to declare an id, <div id="hi"> is div#hi in the CSS, or just #hi. the same is for <div class="hello"> the css would be div.hello or .hello
next lesson will be an explanation of css styling options, and how CSS and Divs work together.
TDD's Web Design Series - Part 2, Thought behind it
TDD's Web Design Series - Part 2, Thought behind it
Linear Mode
