htmlCSS-tutorial1/index.html at master · tjqbzhu/htmlCSS-tutorial1 · GitHub

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
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
<!DOCTYPE html!>
<html>
<head>
	<title>Tutorial 1</title>

	<link rel="stylesheet" type="text/css" href="css/style.css" />

</head>
<body class="orange-bg">

	<div id="header" class="orange-bg">
		<h3>Header</h3>
	</div>

	<div id="main">
		<!-- This is a comment block. This text will not be displayed on the web page. -->
		<!-- <h4>MAIN</h4> -->
		<div id="sidebar">

			<h3>Sidebar</h3>
			<ol id="hello">
				<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element" target="_blank">
					<li>Home</li>
				</a>
				<li>About</li>
				<li>Pricing</li>
				<li>Blog</li>
				<li>Contact</li>
			</ol>


		</div>

		<div id="content">

			<h3>Content</h3>
			<h4>Top HTML tags you should be familiar with.</h4>

			<ul>
				<li>div</li>
				<li>p</li>
				<li>ul</li>
				<li>li</li>
				<li>a</li>
				<li>img</li>
				<li>h1, h2, ... , h6</li>
				<li>button</li>
				<li>form</li>
				<li>input</li>
				<li>link</li>
				<li>html</li>
				<li>head</li>
				<li>title</li>
			</ul>

			<h4>Helpful Links</h4>
			<p><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element" target="_blank">Mozilla Developer Network - Most reliable reference for HTML, CSS, JavaScript, etc.</a></p>
			<p><a href="http://www.w3schools.com/html/" target="_blank"> W3Schools - Most tell me not to, but I'm doing it anyway. Another resource to HTML, CSS, etc. that I use frequently. </a></p>
			<p><a href="http://webdesign.tutsplus.com/categories/html" target="_blank">Code.tutsplus - Execellent resource to learn how to develop a website the right way. This website helped define the way I code today.</a></p>
			<p><a href="http://www.smashingmagazine.com/" target="_blank">Smashing Magazine - Cool blog to how to do cool things.</a></p>

		</div>

		<div id="sidebar2">

			<h3>Sidebar 2</h3>
			<ul id="hello">
				<li>Other Stuff</li>
				<li>Pictures</li>
				<li>Categories</li>
				<li>Cheeseburgers</li>
			</ul>


		</div>

	</div>


	<div id="footer">
		<h3>Footer</h3>
	</div>


</body>
</html>