-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
105 lines (90 loc) · 3.42 KB
/
index.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
<!DOCTYPE html>
<!-- bahasa yang digunakan -->
<html lang="en">
<head>
<meta charset="UTF-8"> <!-- tipe karakter-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- agar responsif-->
<title>Document</title> <!-- judul website-->
<link rel="icon" href="/↳ ❏ hori x miyamura ┊@x_bubba.jpg"> <!-- icon website-->
</head>
<body>
<!-- untuk judul di dalam body website -->
<h1>ini header</h1>
<h2>ini header</h2>
<h3>ini header</h3>
<h4>ini header</h4>
<h5>ini header</h5>
<h6>ini header</h6>
<!-- semakin besar angka, maka semakin kseil ukurannya -->
<!-- untuk menulis paragraf -->
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates ratione nam quis excepturi numquam? <br> <!--untuk membuat baris baru-->
Sunt eos quasi atque est explicabo, iste laboriosam error voluptatem animi quia corrupti possimus perspiciatis placeat.
</p>
<ol> <!-- list urut-->
<li> Isi list</li>
<li> Isi list</li>
</ol>
<ul> <!--list tidak urut-->
<li>isi list</li>
<li>isi list</li>
</ul>
<!-- ini adalah tag anchor untuk membuka link -->
<a href="https://www.google.com/" target="_blank">Ke google</a>
<!-- target _blank untuk membuka link di halaman baru -->
<!-- letakkan link tujuan di atribut href -->
<img src="/↳ ❏ hori x miyamura ┊@x_bubba.jpg" alt="horimiya" title="horimiya">
<!-- memasukkan gambar di halaman body web -->
<!--atribut title digunakan untuk menampilkan teks apabila gamber tidak muncul-->
<!-- untuk membuat struktur website lebih rapi -->
<section>
<p>paragraf ini berada di dalam section</p>
</section>
<!-- biasanya digunakan untuk menavigasi ke halaman lain -->
<!-- atau bagian menu dari website -->
<!-- juga untuk merapikan struktur website -->
<nav>
<a href="#"></a>
</nav>
<!-- untuk merapikan, mengelompokkan, dan memudahakan pengeditan -->
<div class="kelompok">
<p>Ini div</p>
<p>Digunakan untuk mengelompokkan beberapa elment</p>
</div>
<table>
<tr> <!-- table row-->
<th> <!-- table header-->
Yahaha
</th>
<th>
Wayhu
</th>
<td> <!--table data-->
Null
</td>
<td>
Null
</td>
</tr>
</table>
<div>
<form action="#"> <!--mendifinisikan form--> <!--atribut action untuk mengeksekusi kemana setelah user submit data-->
<p>Username:</p> <br>
<input type="text" name="username"> <!-- mengambil input dari user-->
<br>
<br>
<button type="submit">Login</button> <!-- membuat tombol dengan tipe submit untuk mengirim data user yang sudah diketikan di dalam form-->
</form>
</div>
<!--untuk membuat progress bar-->
<progress value="20" max="100"></progress>
<!-- atribut valeu adalah proses yang sedang berjalan-->
<!-- atribut max adalah maksimal progres yang harus dicapai -->
<!-- digunakan untuk catatan kaki -->
<!-- biasanya diisi watermark, kontak, dll -->
<footer>
<p>ini adalah footer</p>
</footer>
</body>
</html>