MODUL 1 : HTML bag 1

GAT : Pada modul kali ini kita akan mempelajari bagaimana membuat file HTML dan perintah dasar atau tag-tag dasar untuk me

1. File html secara sederhana dapat dibuat dengan menggunakan notepad.

2. Buka notepad
3. Ketikkan kode html berikut :

html atau yang biasa disebut dengan TAG selalu diapit dengan kurung siku<>pada TAG pembuka dan TAG penutup ditambahkan g

4. Selanjutnya tambahkan tag untuk head dan body, tambahkan tag berikut pada notepad.

HEAD

BODY

5. Selanjutnya kita simpan file html terlebih dahulu.

6. Buat folder baru di drive D:\ atau E:\
7. Beri nama folder : HTML
8. Klik menu file pada notepad  save as arahkan ke folder yang telah dibuatubah Save as type
menjadi All Files berinama file html1.html tekan tombol save.
9. Selanjutnya kita coba buka file html yang telah kita simpan.
10. Buka folder HTML
11. Buka file html1 pada Internet Explorer atau browser lainnya.

HEAD

BODY

Perhatikan gambar di atas! Bagian title pada head terletak di bagian atas sendiri, dan bagian body
terletak pada halaman utama home page.
12. Selanjutnya kita belajar tag <br></br>. Tag inidigunakan untuk membuat tulisan pada baris baru.
13. Buka kembali file html1 pada notepad. Ketikkan perintah berikut pada notepad kalian!
14. Save notepad denganmenekanCtrl+S, selanjutnya lihat hasilnya dengan merefresh html pada
browser dengan menekan tombol F5.

Tag <br></br>membuat
tulisan terpisah kebaris
berikutnya.

15. Selanjutnya kita belajar bagaimana membuat paragraph di html. Untuk membuat paragraph pada
html kita menggunakan tag <p></p>.
Ketikkan perintah berikut pada notepad kalian!

16. Save notepad denganmenekanCtrl+S, selanjutnya lihat hasilnya dengan merefresh html pada
browser dengan menekan tombol F5.
17. Tag <p></p> memiliki beberapa atribut, salah satunya yang akan sering kita gunakan adalah align.
Setiap atribut tag diletakkan pada kurung pembuka tag. Selanjutnya ketikkan tulisan berikut pada
notepad kalian!

Untuk DIINGAT : Setiap atribut tag diletakkan pada kurung pembuka tag.

18. Save notepad denganmenekan Ctrl+S, selanjutnya lihat hasilnya dengan merefresh html pada
browser dengan menekan tombol F5. Perhatikan bahwa atribut align mengubah posisi paragraph!

align = “left”
align = “right”

align = “center”
align = “justify”
19. Selanjutnya kita belajar tag <hr></hr>. Tag ini kita gunakan untuk membuat garis pada html.
Atributnya adalah width, color, dan align. Atribut width digunakan untuk menentukan panjang
garis, color untuk menentukan warna garis, dan align untuk menentukan posisi garis pada halaman
web.
20. Selanjutnya ketikkan tulisan berikut pada notepad kalian!

21. Save notepad dengan menekan Ctrl+S, selanjutnya lihat hasilnya dengan merefresh html pada
browser dengan menekan tombol F5.
22. Selanjutnya kita akan belajar tag <font></font>. Tag ini digunakan untuk mengelola tulisan di dalam
paragraph. Atribut tag font antara lain : size, color, dan face. Atribut size digunakan untuk
menentukan ukuran tulisan, atribut color digunakan untuk menentukan warna tulisan, dan atribut
face digunakan untuk menentukan menentukan jenis font tulisan.
23. Selanjutnya ketikkan tulisan berikut pada notepad kalian

24. Save notepad dengan menekan Ctrl+S, selanjutnya lihat hasilnya dengan merefresh html pada
browser dengan menekan tombol F5.
 25. Selanjutnya kita akan belajar tentang tag <b></b>, <u></u>, dan<i></i>
- <b></b> : tag yang digunakan untuk mencetak huruf tebalBOLD
- <u></u> : tag yang digunakan untuk mencetak huruf bergaris bawahUNDERLINE
- <i></i> : tag yang digunakanuntuk mencetak huruf miring ITALIC

Selanjutnya ketikkan tulisan berikut pada notepad kalian!

rhatikanbahwauntukmembuattulisanmenjaditebal, bergarisbawah, atau miring, makatulisantersebutdiapitoleh tag yan

26. Selanjutnya kita akan belajar memasukkan gambar dalam html. Tag yang digunakan adalah
<img></img>.
Atribut dari tag ini antara lain :
- src: adalah atribut yang menunjukkan lokasi gambar
- weight : adalah atribut yang menunjukkan lebar gambar dalam persen atau pixel
- height : adalah atribut yang menunjukkan tinggi gambar dalam persen atau pixel
27. Untuk memasukkan gambar kedalam halaman html terlebih dahulu kita copy sebuah gambar
kedalam folder HTML tempat kita meyimpan file html kita. Sebagai contoh, kita copy gambar pada
Sample Pictures dan mem-paste-nya ke dalam folder HTML.
Paste gambarke folder HTML.
28. Selanjutnya ketikkan tulisan berikut pada notepad kalian!

29. Save notepad dengan menekan Ctrl+S, selanjutnya lihat hasilnya dengan merefresh html pada
browser dengan menekan tombol F5.

Gambar Hydrangeas.jpg di atas diletakkan rata kiri (align=”left”) dengan ukuran lebar = 100 px dan
panjang = 100 px. Sekarang coba perbesar ukuran gambar tersebut menjadi 300 x 300 px dan
diletakkan di tengah-tengah halaman.
 Tugas I

Buatlah sebuah halaman html yang berisi biodata kalian masing-masing. Gunakan tag-tag
yang telah kalian pelajari di atas. Berikan title Biodata_Nama_Kelas_Absen. Sertakan foto kalian,
jika tidak ada gunakan gambar bebas yang ada di computer dengan ukuran 100 x 100 pixel.
Perhatikan bahwa terdapat model penulisan yang berbeda di setiap baris biodata. Simpan html
biodata kalian dgn nama LATIHAN1_NAMA_KELAS_ABSEN. Kumpulkan file html beserta foto yang
tercantum pada halaman tersebut dalam satu folder dengan nama folder
PDK_NAMA_KELAS_ABSEN. Selamat Berkarya!
Contoh biodata :