-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathHTML_elements_lecture.html
More file actions
138 lines (108 loc) · 3.62 KB
/
HTML_elements_lecture.html
File metadata and controls
138 lines (108 loc) · 3.62 KB
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
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML elements lecture</title>
</head>
<body>
<!--<!– the <div></div> element is a block element takes up whole width and height (can style the whole block) –>-->
<!-- <div id="wrapper" class="content">-->
<!--<!– the <p></p> tag element is the 'child' element of the parent element (<body></body>) (can style the whole paragraph) –>-->
<!-- <p> content </p>-->
<!-- <h1> heading </h1>-->
<!-- </div>-->
<!--<div class="content">-->
<!--<!– inline element gets put inside another element to share the space (can style just the span) –>-->
<!--<p> this is a example of-->
<!-- <br>-->
<!-- <span> inline </span> element </p>-->
<!--</div>-->
<!-- src (put in image link) alt (put in image description) -->
<!--<img src="https://media.springernature.com/full/springer-static/image/art%3A10.1038%2Fs41477-019-0374-3/MediaObjects/41477_2019_374_Figa_HTML.jpg" alt="Forest">-->
<!--<h1>I am the biggest header</h1>-->
<!--<h2>the second biggest</h2>-->
<!--<h3>one level smaller</h3>-->
<!--<h4>smaller than h3</h4>-->
<!--<h5>smaller than h4</h5>-->
<!--<h6>smallest header</h6>-->
<nav>
<ul>
<li>Codeup Java</li>
<li>Introduction</li>
<li>HTML and CSS</li>
<li>JavaScript</li>
<li>JQuery</li>
</ul>
</nav>
<main>
<h1>Common HTML Elements</h1>
<p>While not an exhaustive list, below are some of the most common HTML elements you will use.</p>
<h3>Heading</h3>
<!--------------------- Lists ------------------>
<ul>
<li><h1>I am the main heading for the page.<h1></li>
<hr>
<li>I am another heading, but less important</li>
<li>I am the least important heading</li>
</ul>
<ul>
<li>Block level element</li>
</ul>
<ul>
<li>6 levels designating importance, h1 through h6</li>
</ul>
<!---------------- anchor to link webpage <a>"put link title here"</a> --------------->
<a href="https://www.google.com/">Google</a>
<!-- anchor to jump to top of page #top -->
<a href="#top">Top of the page</a>
<!------------------ Tables ------------------>
<section>
<table>
<tr>
<th>Products</th>
<th>Price</th>
<th>Ingredients</th>
</tr>
<tr>
<td>Iced Tea</td>
<td>$2.99</td>
</tr>
<tr>
<td>Hamburger</td>
<td>$11.99</td>
</tr>
<td>
<img src="" alt="image">
<a href="#">Cole Usher</a>
</td>
</table>
</section>
</main>
</body>
</html>
<!---------------------- HTML elements ------------------------->
<!-- header elements -->
<!--<h1>I am the biggest header</h1>-->
<!--<h2>the second biggest</h2>-->
<!--<h3>one level smaller</h3>-->
<!--<h4>smaller than h3</h4>-->
<!--<h5>smaller than h4</h5>-->
<!--<h6>smallest header</h6>-->
<!-- paragraph element -->
<!-- <p></p> -->
<!-- inline element -->
<!-- <span></span> -->
<!-- block element -->
<!-- <div></div> -->
<!-- void elements dont need closing -->
<!-- <br> 'break' creates a white space -->
<!-- <img> 'image' tag to input image link -->
<!-- <input> tag to -->
<!-- Attributes -->
<!-- <div (--id="wrapper"--) (--class="content"--) cant have same id in other <div> but can have same class (can call the class to change style for multiple <div>)-->
<!-- to call id = #idname -- to call class = .classname -->
<!-- Tables -->
<!-- <table></table> -->
<!-- <th> table heading </th> -->
<!-- <tr> table row </tr> -->
<!-- <td> table data </td> -->