- Joined
- Nov 30, 2007
- Messages
- 511
- Reaction score
- 0
[HTML & CSS] Trying to learn, here's what I have so far (Critique & Advice please?)
Hey! I'm trying to seriously get into web design. I've tried in the past, but I've never really been able to figure out to morph a bunch of code into a serious website layout. I'm making a lot of progress, but I'm still really confused about a lot of what I'm doing.
Anyway, so far, I've managed to create something almost semi-decent (almost!). I'm posting it here in hopes of being able to get some critique & advice on coding practices and rules.
[CSS]
- styles.css
Hey! I'm trying to seriously get into web design. I've tried in the past, but I've never really been able to figure out to morph a bunch of code into a serious website layout. I'm making a lot of progress, but I'm still really confused about a lot of what I'm doing.
Anyway, so far, I've managed to create something almost semi-decent (almost!). I'm posting it here in hopes of being able to get some critique & advice on coding practices and rules.
[CSS]
- styles.css
Code:
body {
/*background-image: url('cloud_bg.png');*/
background-color: #003366;
text-align: center;
}
div#header{
position: absolute;
top: 0;
left: 0;
width: 100%;
}
div#sun {
position: absolute;
left: 10%;
right: 99%;
}
div#navigation {
position: relative;
background-color: #0066CC;
width: 20%;
top: 196px;
bottom: 0;
right: 890px;
float: right;
padding: 4px;
height: 400px;
border-width: thin;
border-color: white;
border-style: solid;
}
a {
text-decoration: none;
font-family: tahoma;
font-size: 20px;
}
a:hover {
color: #33CCFF;
}
div#content{
position: absolute;
top: 200px;
right: 300px;
bottom: 50px;
width: 550px;
background-color: #0066CC;
height: 500px;
border-width: thin;
border-style: solid;
border-color: white;
font-family: Verdana, Georgia;
text-align: Center;
margin: 3px;
}
div#content > p {
color: #000000;
}
hr {
width: 85%;
background-color: #000033;
height: 2px;
border: none;
}
HTML:
[/B] (The notes at the top are just ones that I took while reading a website)
- index.html
[code]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<!-- Notes
1. Be sure to define the dimensions of any image you post. It prevents image loading mess-ups and the client appears to be loading the page faster.
2. Use hspace (horizontal space) and vspace (vertical space) to add padding to an image. If text is near enough to the image, rather than going right up to its border, it will stay the specified amount of pixels away from it.
3. Usage of the "alt" attribute is mandatory for images according to the latest HTML standard.
4. When making thumbnails, you can attract interest in the image by cropping & resizing rather than simply resizing.
5. Avoid <embed>.
6. valign - top, middle, bottom
7. Tables can be made more accessible by using the <summary> & <caption> tags.
8. CSS Syntax: selector {property: value; property: value; property: value; }
9. Cascade Order:
* the style attribute overrides
* a style block, which overrides
* a linked stylesheet, which overrides
* an imported sheet.
Attributes:
Images:
target - For images; Control how the browser will react when an image linked to a URL is clicked.
Possible values: _blank - Opens a new window with the image.
Tables:
<table> - Holds table-related data. VALUES: border, align, width
<tr> - Starts a new table row.
<td> - Table data (A.K.A. Cells)
<th> - Use between <tr> tags to create table headers.
<colspan> - Spans across <value> cells.
<rowspan> - Same thing as above, just with rows.
-->
<head>
<title>Test Website</title>
<link rel="stylesheet" type="text/css" href="styles.css">
<div id="header">
<img src="header.png" alt="Emilio's ???">
</div>
</head>
<body>
<!-- Formatting Testing Starts Here -->
<div id="navigation">
<h2 style="font-size: 150%;font-family: Tahoma;color:#000033;">Navigation<h2>
<a href="index.html">Home</a> <br><br><br><br><br><br><br><br><br>
<p>
<a href="http://jigsaw.w3.org/css-validator/check/referer">
<img style="border:0;width:88px;height:31px"
src="http://jigsaw.w3.org/css-validator/images/vcss-blue"
alt="Valid CSS!" />
</a>
</p>
</div>
<!-- Navigation End -->
<!-- Content Start -->
<div id="content">
<p><h2>Title</h2></p>
<hr noshade>
<p>Content! Content! Content! Content! Content! </p>
</div>
<!-- Content End -->
</body>
</html>[/code]
Header:
<Attached>
:
