-
Notifications
You must be signed in to change notification settings - Fork 73
/
basics.html
120 lines (85 loc) · 2.83 KB
/
basics.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
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Title -->
<title>HTML in Action</title>
</head>
<body>
<!-- Main Header -->
<header>
<h1>HTML in Action</h1>
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/basics.html">Basics</a></li>
<li><a href="/lists.html">Lists</a></li>
<li><a href="/forms.html">Forms</a></li>
<li><a href="/tables.html">Tables</a></li>
</ul>
</nav>
</header>
<!-- Header -->
<header>
<h2>Header</h2>
<p>A header is used for introductions to further content and navigation</p>
<nav>
<ul>
<li><a href="#">Nav</a></li>
<li><a href="#">Elements</a></li>
<li><a href="#">Hold</a></li>
<li><a href="#">Links</a></li>
</ul>
</nav>
</header>
<!-- Div -->
<div>Div tags are generic containers</div>
<!-- Section -->
<section>
<h1>My Section</h1>
<p>A section is a piece of the document that can be clearly labeled and identified (usually with a heading)</p>
</section>
<!-- Article -->
<article>
Articles are self contained compositions that are usually posts, news or other independent items
</article>
<!-- Aside -->
<aside>
Asides are used for content that can be separated from the main focus of the page like a sidebar
</aside>
<!-- Footer -->
<footer>
A footer is the opposite of a header. It is used to close off the content of a section or the entire page
</footer>
<!-- Headings -->
<h1>Headings</h1>
<h2>Are</h2>
<h3>For</h3>
<h4>Adding</h4>
<h5>Titles</h5>
<h6>To Content</h6>
<!-- Paragraphs -->
<p>Paragraph tags are exactly what they sound like. Basically a text wrapper with an automatic line break</p>
<!-- Links -->
<a href="#">Anchor tags are links that take you to other pages or sites</a>
<a href="/basics.html">This link reloads this page!</a>
<!-- Pre and Code -->
<code>Code tags are good for inline code</code>
<pre>
Pre tags are good
for code that
spans across
multiple lines
</pre>
<!-- Escaping HTML -->
<p>If I want to write <code><p></code> in this paragraph tag I have to write <code>&lt;p&gt;</code> in my HTML file</p>
<!-- Meta -->
<p><code><!DOCTYPE html></code>The new HTML5 doctype is super simple. It tells the browser this is an HTML5 document. Done.</p>
<p>Always remember to include a <code>head</code> and <code>title</code> in your HTML document!</p>
<!-- Main Footer -->
<footer>
A demo by <a href="http://vikingcodeschool.com">Viking Code School</a>
</footer>
</body>
</html>