Apa itu HTML ? Perangkat lunak yang digunakan untuk membuat atau mengetikkan kode file HTML Perangkat lunak yang digunakan untuk menjalankan atau menampilkan.

Presentasi berjudul: "Apa itu HTML ? Perangkat lunak yang digunakan untuk membuat atau mengetikkan kode file HTML Perangkat lunak yang digunakan untuk menjalankan atau menampilkan."— Transcript presentasi:

1

2 Apa itu HTML ?

3 Perangkat lunak yang digunakan untuk membuat atau mengetikkan kode file HTML Perangkat lunak yang digunakan untuk menjalankan atau menampilkan file HTML

4

5 Latihan 1 Latihan 1 Hello world Tag pembuka / penutup Tag tubuhTag judul Tag kepala Struktur dasar sebuah file HTML isi

6 Ketik pada Notepad lalu Simpan : File->Save As dengan tipe.html Setelah tersimpan klik dua kali file html tersebut untuk menjalankannya (biasanya memiliki gambar icon seperti gambar browser internet)

7 Latihan 2 Latihan 2 HTML 1 HTML 2 HTML 3 HTML 4 HTML 5 HTML 6 Ukuran Normal Latihan 2 HTML 1 HTML 2 HTML 3 HTML 4 HTML 5 HTML 6 Ukuran Normal Tag Heading untuk memformat ukuran huruf dalam ukuran point

8 Latihan 3 Latihan 3 Saya lagi belajar membuat website Saya membuat website dengan bahasa HTML Saya bercita-cita menjadi seorang pengembang web. Latihan 3 Saya lagi belajar membuat website Saya membuat website dengan bahasa HTML Saya bercita-cita menjadi seorang pengembang web. Tag digunakan untuk baris baru Tag digunakan untuk awal paragraf baru Tag digunakan untuk membuat garis horizontal

9 Latihan 4 Latihan 4 huruf ukuran 2 huruf ukuran 3 huruf ukuran 4 huruf ukuran 5 huruf ukuran 6 huruf ukuran 7 Latihan 4 huruf ukuran 2 huruf ukuran 3 huruf ukuran 4 huruf ukuran 5 huruf ukuran 6 huruf ukuran 7 Tag untuk mengatur ukuran huruf seperti tag heading

10 Latihan 5 Latihan 5 Teks rata tengah Atur paragraf ketengah layar. Semua kalimat akan berada ditengah layar. Kembali teks berada dikiri Ke kanan lagi Latihan 5 Teks rata tengah Atur paragraf ketengah layar. Semua kalimat akan berada ditengah layar. Kembali teks berada dikiri Ke kanan lagi Tag align untuk mengatur posisi teks

11 Latihan 6 Tag untuk memberi komentar pada kode html Latihan 6 Yang ini tampil di monitor

12 Latihan 7 Latihan 7 huruf tebal huruf miring underline huruf di atas garis subperscript huruf di bawah garis subscript Latihan 7 huruf tebal huruf miring underline huruf di atas garis subperscript huruf di bawah garis subscript Membuat huruf tebal, miring, garis bawah, superscript, subscript

13 Latihan 8 Tag dan untuk memformat warna background dan huruf Latihan 8 Ini background warna merah dan huruf warna putih, tapi ini warna kuning dan ini aqua Latihan 8 Ini background warna merah dan huruf warna putih, tapi ini warna kuning dan ini aqua

14 Latihan 9 Latihan 9 Merah Hijau muda Biru Merah tua Hijau tua Biru tua Kuning Coklat Magenta Nila Cyan Turquoise Abu-abu Latihan 9 Merah Hijau muda Biru Merah tua Hijau tua Biru tua Kuning Coklat Magenta Nila Cyan Turquoise Abu-abu Tag untuk memformat warna huruf

15 Latihan 10 Buat gambar di mspaint dengan tipe.JPG lalu letakkan di folder yang sama dengan file latihan 10. Beri nama file gambar dengan gambar.jpg. Latihan 10 Gambar Latihan 10 Gambar

16 Latihan 11 VSPACE dan HSPACE digunakan untuk menciptakan spasi pada gambar. ALIGN digunakan untuk meletakkan gambar dibagian tertentu teks. Align=top, Align=middle, Align=bottom. Height dan Weight digunakan untuk memperbesar atau memperkecil ukuran gambar dalam persen. Latihan 11 Tulisan terletak sebelum gambar <IMG SRC=‘gambar.JPG’ ALIGN=middle VSPACE=50 HSPACE=50 height=50% width=10%> Tulisan terletak sesudah gambar Latihan 11 Tulisan terletak sebelum gambar <IMG SRC=‘gambar.JPG’ ALIGN=middle VSPACE=50 HSPACE=50 height=50% width=10%> Tulisan terletak sesudah gambar

17 Latihan 12 Membuat background di browser dari gambar. Buat dulu gambar kecil di mspaint beri nama misalnya gambar.jpg. Latihan 12 Latihan 12

18

19 Tag HREF digunakan untuk menghubungkan halaman satu dengan lain antara satu website Latihan 1 Buat dua buah file dengan nama: file1.html dan file 2.html Lihat slide berikut

20 file2.html File 2 Ini halaman kedua Klik disini untuk ke file1.html File 2 Ini halaman kedua Klik disini untuk ke file1.html File1 Ini halaman pertama Klik disini untuk ke file2.html File1 Ini halaman pertama Klik disini untuk ke file2.html file1.html

21 Latihan 2 Membuat warna garis Latihan 2 Latihan 2

22 Latihan 3 Latihan 3 cell 1 cell 2 cell 3 cell 4 cell 5 cell 6 cell 7 cell 8 Latihan 3 cell 1 cell 2 cell 3 cell 4 cell 5 cell 6 cell 7 cell 8 Membuat tabel

23 border cellpadding cellspacing Border=tebal garis tabel; cellspacing=spasi antar cell; cellpadding=jarak antara teks dengan sisi cell

24 Latihan 4 NAMA MURID No Nama Alamat 1 Andi Jl.Jati No.8 2 Susi Jl.Jambu No.10 Latihan 4 NAMA MURID No Nama Alamat 1 Andi Jl.Jati No.8 2 Susi Jl.Jambu No.10 Membuat tabel berwarna Latihan 4

25 Latihan 5 Latihan 5 NAMA MURID 1 2 3 4 --> 5 6 --> Latihan 5 NAMA MURID 1 2 3 4 --> 5 6 --> Membuat cell pada tabel tidak beraturan ROWSPAN COLSPAN

26 Latihan 6 Menyisipkan gambar dan text ke tabel Latihan 6 Memasukkan gambar ke dalam tabel Latihan 6 Memasukkan gambar ke dalam tabel

27 Latihan 7 Membuat daftar penomoran dengan bullet Latihan 7 satu dua tiga satu dua tiga satu dua tiga Latihan 7 satu dua tiga satu dua tiga satu dua tiga

28 Latihan 8 Membuat daftar penomoran bullet bersarang Latihan 8 satu dua tiga satu dua tiga Latihan 8 satu dua tiga satu dua tiga

29 Latihan 9 Membuat daftar bernomor Latihan 9 satu dua tiga Latihan 9 satu dua tiga

30 Latihan 10 Variasi daftar bernomor i = angka romawi kecil, I = angka romawi kapital, a = huruf kecil, A= huruf besar Latihan 10 Nama-nama buah Jambu Pisang Nama-nama hewan anjing kucing Latihan 10 Nama-nama buah Jambu Pisang Nama-nama hewan anjing kucing