Dokumentasi Latihan HTML

DOKUMENTASI
LATIHAN DASAR HTML
Oleh
Adha Dont Differatama
Dibuat sebagai dokumentasi atas selesainya Latihan Dasar HTML dengan

sumber belajar dari youtube
https://www.youtube.com/channel/UCkXmLjEr95LVtGuIm3l2dPg
KATA PENGANTAR
Assalamu’aikum Warahmatullahi Wabarakaatuh
Puji syukur saya ucapkan atas kehadirat Allah SWT yang telah memberikan rahmat
serta hidayah-Nya. Sehingga dokumentasi Dasar HTML ini dapat diselesaikan dalam waktu
yang sesingkat-singkatnya.
Dokumentasi Dasar HTML ini saya susun untuk dapat dipergunakan dikemudian hari
sebagaimana mestinya. Semoga, dokumentasi ini bisa membantu pembaca untuk lebih
memahami tentang Dasar HTML serta dapat memperlancar proses pemahaman dalam
pembelajaran.
Apabila dalam penyusunan dokumentasi ini masih terdapat banyak kekurangan baik
dalam penulisan maupun pemilihan kata yang kurang tepat, saya memohon maaf atas
kurangnya kesempurnaan dalam pembuatan dokumentasi Dasar HTML ini. Kurang lebihnya
saya ucapkan terimakasih.
Wassalamu’alaikum. Warahmatullahi Wabarakaatuh.
Bengkulu, 09 Desember 2020
Penyusun
1
DAFTAR ISI
KATA PENGANTAR....................................................................................................... 1
DAFTAR ISI...................................................................................................................... 2
BAB I
PENDAHULUAN
A. Latar Belakang............................................................................................................ 3
B. Tujuan........................................................................................................................... 3
C. Manfaat......................................................................................................................... 3
BAB II
ISI
A. Struktur HTML........................................................................................................... 4
B. Paragraf........................................................................................................................ 4
C. Heading......................................................................................................................... 5
D. List................................................................................................................................. 6
E. Hyperlink...................................................................................................................... 6
F. Image............................................................................................................................. 9
G. Table............................................................................................................................. 10
H. Form.............................................................................................................................. 12
BAB III
PENUTUP
a. Simpulan........................................................................................................................ 15
b. Saran.............................................................................................................................. 15
2
BAB I
PENDAHULUAN
A. Latar Belakang
Hypertext Markup Language (HTML) adalah bahasa markah standar untuk dokumen
yang dirancang untuk ditampilkan di peramban internet. Ini dapat dibantu oleh teknologi
seperti Cascading Style Sheets (CSS) dan bahasa scripting seperti JavaScript dan
VBScript.
B. Tujuan
Dokumentasi ini dibuat bertujuan umum untuk menjelaskan tentang Dasar HTML.
C. Manfaat
1. Secara Teoretis
Mengembangkan pengetahuan pembaca, ilmu dibidang Dasar HTML.
2. Secara Praktis
Sebagai bahan pelatihan dalam mempelajari Dasar HTML.
3
BAB II
ISI
Atribut Html, ex: class=””

Sumber referensi lengkap : www.w3school.com/tags
A. Struktur Html
1. 
2.
3. <!DOCTYPE html>
4. <html lang="en">
5. <head>
6.
7. 
8. <meta charset="UTF-8">
9. <meta name="description" content="kuliah pemrograman web">
10. <meta name="keywords" content="html,css,javascript">
11. <meta name="authoe" content="Adha Dont Differatama">
12.
13. 
14. <title>Struktur_Html</title>
15.</head>
16.
17.
18.<body>
19.
20.</body>
21.</html>
B. Paragraf
1. 
2.
3. <!DOCTYPE html>
4. <html lang="en">
5. <head>
6.
7. 
8. <meta charset="UTF-8">
9. <meta name="description" content="kuliah pemrograman web">
10. <meta name="keywords" content="html,css,javascript">
11. <meta name="authoe" content="Adha Dont Differatama">
12.
13. 
14. <title>Paragraf</title>
4
15.</head>
16.
17.
18.<body>
19.
20. 
21. <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus ad tene
tur, veniam dignissimos magni dolores alias, voluptas consequatur dolore archite
cto, illum quam nesciunt. Laborum corporis atque aut deserunt dolorum nesciunt.<
/p>
22.
23. 
24. <br>
25.
26. 
27. <p>ini Baris Awal <br> ini Baris Baru</p>
28.
29. 
30. <hr>
31.
32. 
33. <p><b>Bold </b><i>Italic </i><u>Underline</u></p>
34.
35. 
36. <p><strong>Pengumuman.</strong> Hari senin <em>kuliah kosong</em></p>
37.
38.</body>
39.</html>
C. Heading
1. 
2.
3. <!DOCTYPE html>
4. <html lang="en">
5. <head>
6.
7. 
8. <title>Heading</title>
9.
10.</head>
11.
12.<body>
13.
14. 
15. <h1>Heading 1</h1>
5
21.</body>
22.</html>
D. List
1. <!DOCTYPE html>
2. <html lang="en">
3.
4. <head>
5. <title>Document</title>
6. </head>
7.
8. <body>
9. 
10.
11. 
12. <h3>To Do List</h3>
13. 
14. <ol type="A">
15. 
16. <li>Bangun Pagi</li>
17. <li>Sarapan</li>
18. <li>Tidur Lagi</li>
19. </ol>
20.
21. 
22. 
23. <ul type="circle">
24. <li>Bangun Pagi</li>
25. <li>Sarapan</li>
26. <li>Tidur Lagi</li>
27. </ul>
28.
29. 
30. 
31. <dl>
32. 
33. <dt>HTML</dt>
34. <dd>Hypertext Markup Language</dd>
35. <dt>CSS</dt>
36. <dd>Cascading Style Sheet</dd>
37. </dl>
38.</body>
39.</html>
E. Hyperlink
Link adalah sebuah sumber koneksi dari sebuah sumber web ke sumber lain.
6
1. <!DOCTYPE html>
2. <html lang="en">
3. <head>
4. <title>Hyperlink_1</title>
5. </head>
6. <body>
7. 
8. 
9. <p>Klik <a href="https://www.google.com">disini</a> untuk mengetahui informa
si lebih lanjut.</p>
10.
11. 
12. <p>Klik <a href="coba1/coba.html">disini</a></p>
13.</body>
14.</html>
15.
16.
17.
18.
19.
20.
21.<!DOCTYPE html>
22.<html lang="en">
23.<head>
24. <title>Hyperlink_2</title>
25.</head>
26.<body>
27. <h1>Ini adalah Hyperlink_2.html</h1>
28.
29. <ul>
30. <li><a href="#bagian1">Ke Bagian 1</a></li>
31. <li><a href="#bagian2">Ke Bagian 2</a></li>
32. <li><a href="#bagian3">Ke Bagian 3</a></li><br>
33. <li>Menuju ke Link Untuk membuka <a href="#jendela_baru">Jendela Baru</a
></li>
34. </ul>
35.
36. <h2 id="bagian1">Bagian 1</h2>
37. <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae null
a,
38. ex exercitationem illum neque maiores, sequi quia velit aut quasi,
39. natus eum mollitia earum sint. Neque dolorem commodi reprehenderit fuga!
</p>
40.
41. <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit voluptate
illo
42. veniam voluptatibus blanditiis veritatis expedita perspiciatis. Quas ear
um similique,
7
43. voluptas eaque fugiat odit dolor omnis voluptatibus a. Sit, reiciendis.<
/p>
44.
45. <br><br><br><br><br><br><br><br><br><br>
46.
48. <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
49. Voluptatibus consequuntur optio architecto, perspiciatis provident,
50. totam deleniti accusamus odit placeat ratione recusandae itaque nostrum
quo! Maiores omnis
51. aliquid culpa incidunt laboriosam?</p>
52.
53. <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex cumque neque
natus omnis laboriosam,
54. a reiciendis modi beatae, ipsam at quibusdam? Ipsam deleniti suscipit re
rum doloribus amet voluptate
55. ad consequuntur?</p>
56.
57. <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ea odio labore
assumenda in dolorum
58. praesentium dignissimos quos minima sunt? Accusamus at recusandae itaque
, neque maiores ipsam
59. beatae hic maxime quasi.</p>
60.
62.
64. <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed eum, cum ver
itatis obcaecati
65. atque architecto dignissimos eveniet harum ipsam cupiditate cumque, maio
res et rem nam.
66. Voluptatem perspiciatis debitis sint porro!</p>
67.
71.</body>
72.</html>
73.
74.
75.
76.
77.
78.
80.
81.<p id="jendela_baru">Klik <a href="coba1/coba.html" target="_blank">disini</a> u
ntuk membuka Halaman
8
82. 2 Hyperlink pada jendela baru</p>
83.
87. <br><br><br>
88.
Buat folder baru dan file baru didalam folder sekarang dengan nama folder “Hyperlink2” dan
nama file “coba.html” lalu isi syntax berikut didalam file “coba.html”
1. <title>Halaman 2 Hyperlink</title>
2.
3. <p>Ini Halaman 2 Hyperlink</p>
4. <a href="../Hyperlink_1.html">Balik ke Hal 1</a>
F. Image
1. <!DOCTYPE html>
2. <html lang="en">
3. <head>
4. <title>Image</title>
5. </head>
6. <body>
7. 
8. 
10.
11. 
12. <img src="logo.jpg" alt="kain background" width="100"><br>
13.
14. 
18. 
19. 
20. <img src="logo.jpg" alt="kain backgroud" width="50%" height="100px" title="g
ambar backgroud"><br><br>
21.
22. 
23. <a href="gambar.html"><img src="logo.jpg" alt="kain backgroud"></a>
24.</body>
25.</html>
9
Buat file baru dengan folder yang sama dan beri nama file “gambar.html” lalu masukkan
sourcecode berikut:
1. <!DOCTYPE html>
2. <html lang="en">
3. <head>
4. <title>Gambar</title>
5. </head>
6. <body>
7. <a href="Image.html"><img src="gambar.png" alt="gambar SI" width="70%"></a>
8. </body>
9. </html>
G. Table
1. <!DOCTYPE html>
2. <html lang="en">
3. <head>
4. <title>Table</title>
5. </head>
6. <body>
7. 
8. 
9. 
11. <table>
12. <tr>
13. <td>baris1, kolom1</td>
15. </tr>
16.
17. <tr>
20. </tr>
21. </table><br><br>
22.
23. 
24. <table>
25. <thead>
26. <tr>
27. <th></th>
28. <th>Kolom 1</th>
30. </tr>
31. </thead>
32. <tbody>
33. <tr>
34. <th>Kolom1</th>
10
37. </tr>
38. <tr>
39. <th>Kolom2</th>
42. </tr>
43. </tbody>
44. </table><br><br>
45.
46. 
50. <table border="1" cellspacing="0" cellpadding="5">
51. <thead>
52. <tr>
53. <th></th>
56. </tr>
57. </thead>
58. <tbody>
59. <tr>
60. <th>Kolom1</th>
63. </tr>
64. <tr>
65. <th>Kolom2</th>
68. </tr>
69. </tbody>
70. </table><br><br><br>
71.
72. 
73. <table border="1" cellspacing=0 cellpadding=5>
74. <tr>
75. <td rowspan="3">rowspan</td>
76. <td colspan="2">colspan 2</td>
77. </tr>
78.
79. <tr>
80. <td>2,2</td>
81. <td>2,3</td>
82. </tr>
83.
11
84. <tr>
85. <td>3,2</td>
86. <td>3,3</td>
87. </tr>
88. </table><br><br><br>
89.
90. 
91. <table border="1" cellspacing=0 cellpadding=5>
92. <tr>
93. <td>1,1</td>
94. <td>1,2</td>
95. <td>1,3</td>
96. <td>1,4</td>
97. </tr>
98.
99. <tr>
100. <td>2,1</td>
101. <td colspan="2" rowspan="2"></td>
102. <td>2,4</td>
103. </tr>
104.
105. <tr>
106. <td>3,1</td>
107. <td>3,4</td>
108. </tr>
109.
110. <tr>
111. <td>1,1</td>
112. <td>1,2</td>
113. <td>1,3</td>
114. <td>1,4</td>
115. </tr>
116. </table>
117. </body>
118. </html>
H. Form
1. <!DOCTYPE html>
2. <html lang="en">
3. <head>
4. <title>Form</title>
5. </head>
6.
7. <body>
8. 
10. 
12.
13. 
14. <form>
15. 
16. <label for="Username">Username : <input type="text" id="Username"></labe
l>
17. <br><br>
18. 
19. <label for="Password">Password : <input type="password" id="Password"></
label>
20. <br><br>
21. 
22. <label><b>Jenis Kelamin</b></label>
23. <br>
24. <label for="Pria"><input type="radio" id="Pria" name="jenis_kelamin"> Pr
ia</label>
25. <br>
26. <label for="Wanita"><input type="radio" id="Wanita" name="jenis_kelamin"
> Wanita</label>
27. <br><br>
28.
29. 
30. <label><b>Hobby</b></label>
31. <br>
32. <label for="Menyanyi"><input type="checkbox" id="Menyanyi"> Menyanyi</la
bel>
33. <br>
34. <label for="Olahraga"><input type="checkbox" id="Olahraga"> Olahraga</la
bel>
35. <br>
36. <label for="Ngoding"><input type="checkbox" id="Ngoding"> Ngoding</label
>
37. <br><br>
38.
39. 
40. <textarea name="" id="" cols="30" rows="5"></textarea>
41. <br><br>
42.
43. 
44. <select name="" id="">
45. <option value="">Bengkulu</option>
46. <option value="">Jambi</option>
47. <option value="">Padang</option>
48. </select>
49. <br><br>
50.
51. 
52. <input type="submit" value="Kirim">
13
53. <br><br>
54.
55. 
56. <button type="submit">Kirim</button>
57. </form>
58.</body>
59.</html>
14
BAB III
PENUTUP
a. Simpulan
HTML dan CSS sendiri belum bisa dikatakan bahasa pemrograman, tapi lebih ke
bahasa kode. Pembuatan aplikasi web, dapat menggunakan Bahasa pemrograman PHP.
b. Saran
Sebelum kita dapat membuat sebuah aplikasi web, kita harus paham terlebih dahulu
bagaimana struktur dari HTML, dan kenapa kita perlu belajar HTML untuk membuat
sebuah aplikasi website atau hal lainnya.
15

Dokumentasi Latihan HTML

Diunggah oleh

Informasi Dokumen

Deskripsi Asli:

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Dokumentasi Latihan HTML

Diunggah oleh

Hak Cipta:

Format Tersedia

DOKUMENTASI

LATIHAN DASAR HTML

Dibuat sebagai dokumentasi atas selesainya Latihan Dasar HTML dengan

Assalamu’aikum Warahmatullahi Wabarakaatuh

Wassalamu’alaikum. Warahmatullahi Wabarakaatuh.

Bengkulu, 09 Desember 2020

Atribut Html, ex: class=””

Anda mungkin juga menyukai