-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
169 lines (169 loc) · 6.56 KB
/
Copy pathindex.html
File metadata and controls
169 lines (169 loc) · 6.56 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
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML & CSS Elements</title>
<link rel="Stylesheet" href="style.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
A Heading:
<h1><i><strong>A Heading:</strong></i></h1>
<!-- We can create headings using h1 through h6 as tags. -->
<h1>A Large Heading</h1>
<h2>A Smaller Heading</h2>
<h6>The Smallest Heading</h6>
<br><hr><br>
<!-- The strong and i tags give us bold and italics respectively. -->
<h1><i><strong>A Bold & Italicized:</strong></i></h1>
A <strong>bold</strong> word and an <i>italicized</i> word!
<br><hr><br>
<!-- We can link to another page (such as cs50's page) using a. -->
An Anocher tag:
View the <a href="https://cs50.harvard.edu/">CS50 Website</a>!
<br><hr><br>
<!-- We used ul for an unordered list and ol for an ordered one.
both ordered and unordered lists contain li, or list items. -->
<h1><i><strong>An unordered list:</strong></i></h1>
<ul>
<li>foo</li>
<li>bar</li>
<li>baz</li>
</ul>
An ordered list:
<ol>
<li>foo</li>
<li>bar</li>
<li>baz</li>
</ol>
<br><hr><br>
<!-- Images require a src attribute, which can be either the path to a file on your computer or the link to an image online. It also includes an alt attribute, which gives a description in case the image can't be loaded. -->
<h1><i><strong>An image:</strong></i></h1>
<img src="./IMAGE/HTML-CSS.jpg" alt="HTML CSS Picture" width="300">
<!-- We can also see above that for some elements that don't contain other ones, closing tags are not necessary. -->
<br><hr><br>
<!-- Here, we use a br tag to add white space to the page. -->
<br/> <br/>
<h1><i><strong>Table:</strong></i></h1>
<!-- A few different tags are necessary to create a table. -->
<table>
<thead>
<th>Ocean</th>
<th>Average Depth</th>
<th>Maximum Depth</th>
</thead>
<tbody>
<tr>
<td>Pacific</td>
<td>4280 m</td>
<td>10911 m</td>
</tr>
<tr>
<td>Atlantic</td>
<td>3646 m</td>
<td>8486 m</td>
</tr>
</tbody>
</table>
<br><hr><br>
<h1><i><strong>Form:</strong></i></h1>
<form>
<input type="text" placeholder="First Name" name="first">
<input type="password" placeholder="Password" name="password">
<div>
Favorite Color:
<input name="color" type="radio" value="blue"> Blue
<input name="color" type="radio" value="green"> Green
<input name="color" type="radio" value="yellow"> Yellow
<input name="color" type="radio" value="red"> Red
</div>
<input type="submit">
</form>
<br><hr><br>
<button>Button 1</button>
<button>Button 2</button>
<button>Button 3</button>
<br><hr><br>
<h1><i><strong>A Flexbox:</strong></i></h1>
<div id="container">
<div>Some text 1!</div>
<div>Some text 2!</div>
<div>Some text 3!</div>
<div>Some text 4!</div>
<div>Some text 5!</div>
<div>Some text 6!</div>
<div>Some text 7!</div>
<div>Some text 8!</div>
<div>Some text 9!</div>
<div>Some text 10!</div>
<div>Some text 11!</div>
<div>Some text 12!</div>
</div>
<br><hr><br>
<h1><i><strong>An HTML Grid:</strong></i></h1>
<div class="grid">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
<div class="grid-item">7</div>
<div class="grid-item">8</div>
<div class="grid-item">9</div>
<div class="grid-item">10</div>
<div class="grid-item">11</div>
<div class="grid-item">12</div>
</div>
<br><hr><br>
<h1><i><strong>Bootstrap:</strong></i></h1>
<div class="container">
<div class="row">
<div class="col-4">
This is a section.
</div>
<div class="col-4">
This is another section.
</div>
<div class="col-4">
This is a third section.
</div>
</div>
</div>
<br/>
<div class="container">
<div class="row">
<!-- One popular bootstrap feature is their grid system. Bootstrap automatically splits a page into 12 columns,
and we can decide how many columns an element takes up by adding the class col-x
where x is a number between 1 and 12. -->
<div class="col-3">
This is a section.
</div>
<div class="col-6">
This is another section.
</div>
<div class="col-3">
This is a third section.
</div>
</div>
</div>
<div class="container">
<div class="row">
<!-- we use col-lg-3 to show that an element should take up 3 columns on a large screen,
and col-sm-6 to show an element should take up 6 columns when the screen is small -->
<div class="col-lg-3 col-sm-6">
This is a section.
</div>
<div class="col-lg-3 col-sm-6">
This is another section.
</div>
<div class="col-lg-3 col-sm-6">
This is a third section.
</div>
<div class="col-lg-3 col-sm-6">
This is a fourth section.
</div>
</div>
</div>
</body>
<html>