-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathlayout.html
68 lines (56 loc) · 1.82 KB
/
layout.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<html>
<body>
<h1>HTML Layout</h1>
<p>
Web page layout is very important to make your website look good. Design your webpage layout very carefully.
</p>
<p>
DO NOT USE HTML TO MAKE THE LAYOUT ON THE WEBPAGE USE CSS. THIS IS FOR DEMONSTRATION ONLY
</p>
<h4>Using tables to make html layout (very bad practice)</h4>
<table width="500" border="0">
<tr>
<td colspan="2" style="background-color:#FFA500;">
<h1>Main Title of Web Page</h1>
</td>
</tr>
<tr valign="top">
<td style="background-color:#FFD700;width:100px;text-align:top;">
<b>Menu</b><br />
HTML<br />
CSS<br />
JavaScript
</td>
<td style="background-color:#EEEEEE;height:200px;width:400px;text-align:top;">
Content goes here
</td>
</tr>
<tr>
<td colspan="2" style="background-color:#FFA500;text-align:center;">
The copyright would go here
</td>
</tr>
</table>
<h4>The same thing as before using div elements</h4>
<div id="container" style="width:500px">
<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">Main Title of Web Page</h1>
</div>
<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
<b>Menu</b><br />
HTML<br />
CSS<br />
JavaScript
</div>
<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
content goes here
</div>
<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
A copyright could go here
</div>
</div>
<p>
The biggest advantage of using CSS is that, if you place the CSS code in an external style sheet, your site becomes MUCH EASIER to maintain. You can change the layout of all your pages by editing one file.
</p>
</body>
</html>