Ahmad Fahmi AnwariMakatabahabdillah.esy.esPemrograman WEBFormat Teks Halaman WebKompetensi Dasar:1. Memahami format teks pada halaman web2. Menyajikan teks dalam format tertentu pada halaman web

Materi Pokok: Format Teks Halaman Web1. Anatomi dokumen web2. Pemformatan teks dan paragrap3. Pembuatan list minimal4. Pembuatan list kombinasi

Pembahasan Elemen-elemen dasar HTML1. Atribut Tag Pada HTML1.
Untuk membuat baris baru gunakan
, spasi lebih dari satu akan diabaikan.

2. Digunakan untuk membuat paragraf, jika tanpa tag penutup hasilnya seperti menggunakan 2 kali
Di dalam tag bisa disertakan atribut ALIGN yang berguna untuk mengatur peletakan teks di dalam masing-masing baris. Salah satu nilai yang dapat diberikan pada ALIGN adalah CENTER, yang menempatkan teks berada di tengah-tengah layar pada baris yang bersangkutan. Selain CENTER, nilai lain yang dapat diisikan pada ALIGN yaitu : LEFT, mengatur teks rata kiri terhadap halaman RIGHT, mengatur teks rata kanan terhadap halaman JUSTIFY, mengatur teks rata kiri dan rata kanan. Efeknya terlihat untuk teks yang sangat panjang.

3. Tag Judul, HTML menyediakan 6 buah tag yang digunakan untuk mengatur ukuran teks yang dijadikan sebagai judul dalam badan dokumen. Tag-tag judul ini berupa : ... ... ... ... ... ... Contoh :

Seperti halnya pada tag , tag judul atau heading ini juga memiliki atribut ALIGN. Nilai yang dapat diberikan pada ALIGN adalah : LEFT (default), mengatur teks rata kiri terhadap halaman RIGHT, mengatur teks rata kanan terhadap halaman CENTER, menempatkan judul di tengah-tengah layar pada baris yang bersangkutan JUSTIFY, mengatur teks rata kiri dan rata kanan. Efeknya terlihat untuk teks yang sangat panjang. Atribut ALIGN Pesona Tanaman Hias Pesona Tanaman Hias Pesona Tanaman Hias Pesona Tanaman Hias

4. Tag Horizontal Line, Untuk mempercantik halaman, seringkali pembuat dokumen Web menambahkan garis horisontal. Garis ini sebenarnya dapat dibuat dengan mudah, yakni dengan menyertakan tag . Contoh :

Atribut yang terdapat pada tag , diantaranya :1. Size: Menentukan ketebalan garis2. Width : Menentukan lebar garis3. Noshade: Menghilangkan bayangan pada garis4. Align : Menetukan letak teks dalam barisContoh penggunaan atribut Size : Atribut SIZE pada Tag HR KEBUN PESONA Jl. Solo Km 14
Yogyakarta
Indonesia

Contoh penggunaan atribut width : Atribut WIDTH dan ALIGN pada Tag HR

Contoh penggunaan atribut Noshade : Atribut NOSHADE pada Tag HR KEBUN PESONA Jl. Solo Km 14
Yogyakarta
Indonesia

5. Tag , Untuk menengahkan suatu teks, bisa juga digunakan tag . Tentu saja, untuk mengakhiri penengahan teks (yakni agar teks berikutnya tidak ditengahkan), perlu disertakan . Contoh :

Tag CENTER Berbagai Jenis Keladi yang mempesona: Red Flash
Red Fire
Fannie Munson
Pink Beauty
Hilo Beauty
Jackie Suthers
*****

2. Mengatur Teks

1. Mengatur Teks Secara Fisik

Tag Untuk Mengatur Secara FisikTagDeskripsi

TeksTeks ditampilkan dalam keadaan ditebalkan

TeksTeks ditampilkan dengan ukuran lebih besar dari ukuran normal

TeksTeks ditampilkan dalam keadaan miring

TeksTeks ditampilkan dengan ukuran lebih kecil dari ukuran normal

TeksTeks ditampilkan sebagai subskrip

TeksTeks ditampilkan sebagai superskrip

TeksTeks ditampilkan dalam bentuk seperti ketikan mesin tik

TeksTeks ditampilkan dengan diberi garis bawah

Contoh tag atau :

Contoh tag atau :Contoh tag :Contoh tag keseluruhan :2. Mengatur Teks Secara LogisTag Untuk Mengatur Secara LogisTagDeskripsiTeks Menyatakan teks adalah kutipan Teks Menyatakan bahwa teks adalah kode atau program komputer. Umumnya teks ditampilkan dengan font monoskrip. Teks Menyatakan penekanan pada teks. Umumnya teks ditampilkan miring. Teks Menyatakan teks adalah masukan dari keyboard. Teks seperti ini umumnya ditampilkan dengan font monospasi. Teks Menyatakan bahwa teks adalah suatu konstanta sederetan karakter. Biasanya ditampilkan dengan font monospasi. Teks Menyatakan bahwa teks yang sangat penting untuk diperhatikan orang. Biasanya disajikan dengan ditebalkan. Teks Menyatakan teks adalah variabel atau ekspresi matematika atau program komputer. Teks akan disajikan dalam bentuk miring. 3. Mengatur FontTag berguna untuk mengatur jenis, ukuran, maupun warna font. Tag .. terdiri dari beberapa atribut : Size Color Face Contoh Tag Size :Contoh Tag Face :Contoh atribut color :Atribut pada tag yang berkaitan dengan warna teks yaitu COLOR, yang berguna untuk menentukan warna . Jika warna latar belakang yang akan diatur, pengaturan perlu dilakukan melalui tag dengan properti berupa BGCOLOR. Tag BODY juga memiliki atribut bernama TEXT yang dapat digunakan untuk mengatur warna teks pada keseluruhan tubuh dokumen.Daftar nama warna pada atribut penentu warnaNama WarnaRGBNama WarnaRGBaqua 00FFFF navy 000080 black 000000 olive 808000 blue 0000FF purple 800080 fuchsia FF00FF red FF0000 gray 808080 silver C0C0C0 green 008000 teal 008080 lime 00FF00 yellow FFFF00 maroon 800000 white FFFFFF Contoh :Contoh atribut BGCOLOR dan TEXT pada Tag BODY :4. Mengatur Default Font HTML menyediakan tag bernama yang berfungsi untuk menentukan ukuran default font untuk seluruh halaman. Contoh :5. Entitas Karakter dan NumerikKode HTML untuk menuliskan karakter-karakter khususSimbolHTMLSimbolHTML Spasi && > x Contoh :6. Pembuatan Daftar Item (List)Tag .. Unorder List, biasa kita kenal dengan Bullet ,memiliki antribut : Type (jenis bullet), nilai: disc, square, circle Tag ... Penggunaan tag untuk menampilkan daftar item dengan nomor urut. Atribut Type (jenis numbering), nilai: 1, A, a, I, i Contoh :Latihan 1. Buatlah dan tulislah kode HTML dari tampilan halaman WEB dibawah ini :Format Tabel Halaman WebKompetensi Dasar:1. Memahami format tabel pada halaman web2. Menyajikan tabel pada halaman webMateri Pokok:1. Anatomi tabel minimal2. Tabel dengan spanning3. Tabel di dalam tabel4. Desain halaman web dengan konsep tabelPembahasan Dalam membuat tampilan sebuah tabel pada perintah HTML memiliki 3 komponen perintah antara lain:1. Berfungsi untuk memulai perintah mendefinisikan tampilan tabel.2. Berfungsi untuk mendefinisikan baris dalam tabel.3. atau Berfungsi untuk mendefinisikan kolom dalam baris tabel.Contoh Pendefinisian Tampilan Tabel : Judulkolom1 Judulkolom2 Judulkolom3 judulkolom4 baris2,kolom1 baris2,kolom2 baris2,kolom3 baris2,kolom4 baris3,kolom1 baris3,kolom2 baris3,kolom3 baris3,kolom4Hasilnya :Dari contoh diatas dapat dipahami bahwa dalam membuat sebuah tampilan tabel pada HTML dengan cara mendefinisikan baris tabel dengan perintah terlebih dahulu kemudian baru mendefinisikan cell isi dari baris tabel yang bersangkutan dengan perintah atau . Catatan :Untuk mendefinisikan tabel dengan tampilan 1 baris dan 1 kolom, ketiga komponen perintah HTML wajib didefinisikan.I. Perbedaan dari perintah dengan :Gunakan perintah jika akan mendefinisikan cell yang berfungsi sebagai judul kolom tabel (biasanya cell-cell isi baris pertama pada tabel). Kelebihannaya adalah jika isi kolom diapit dengan perintah maka isi kolom tersebut ditampilkan dengan huruf tebal dan rata tengah. Sedangkan digunakan untuk mendefinisikan isi kolom biasa dimana nanti akan ditampilkan dengan huruf tidak ditebalkan dan rata kiri.II. Atribut pada komponen-komponen perintah tabel: Border = Angka, Atribut pada perintah TABLE untuk mengatur ketebalan bingkai tabel. Semakin besar angkanya maka garis bingkai akan semakin besar pula. Bordercolor = warna, Atribut pada perintah TABLE untuk mengatur warna bingkai tabel. Bgcolor= warna, Atribut untuk mengatur warna latar belakang. Atribut ini bisa diletakkan pada ketiga komponen perintah tabel. berpengaruh pada satu tabel. berpengaruh pada satu baris tabel. berpengaruh pada satu cell tabel saja. Background= filegambar, Atribut untuk mengatur warna latar belakang dengan tampilan gambar. Atribut ini bisa diletakkan pada ketiga komponen perintah tabel CellSpacing=angka, Jarak antar cell dalam tabelCellspacing CellPadding=angka, Jarak antara isi cell dengan bingkai cellCellpaddingisi cellBingkai tabelKotak cell Width = angka atau persen, menentukan lebar tabel. Jika didefinisikan dengan angka berarti mendefinisikan lebar tabel dengan menggunakan satuan pixel dan jika menggunakan persen berarti lebar tabel adalah sebanding dengan persentase lebar windows browser penampil. Atribut ini juga bisa digunakan pada perintah atau untuk menentukan lebar kolom pada tabel. Jika atribut ini tidak didefinisikan maka lebar tabel mengikuti lebar cell yang bergantung pada panjangnya isi pada masing-masing cell. Height = angka atau persen, menentukan tinggi tabel. Pendefinisiannya sama dengan penggunaan atribut Width.III. Menggabung CellPada pemrograman HTML hanya mengenal perintah menggabung cell (merge cell) tetapi tidak mengenal perintah memecah cell. Perintah pendefinisiannya adalah sebagai atribut perintah atau . menggabung cell beda kolom menggabung cell beda barisContoh penggunaan perintah menggabung cell:Baris 1 Judulkolom1 Judulkolom2 Judulkolom3 judulkolom4 baris2,kolom1Baris 2 baris2&3,kolom2 baris2&3,kolom3&4 Baris 3 baris3,kolom1 baris4,kolom1&2 baris4,kolom2 baris4,kolom3Baris 4 WidthHasilnya:Judulkolom1Judulkolom2Judulkolom3judulkolom4baris2,kolom1baris2&3,kolom2baris2&3,kolom3&4baris3,kolom1baris4,kolom1&2baris4,kolom2baris4,kolom3Contoh Listing Membuat Tampilan Tabel :Tabel.html1. 2. 3. 4. 5. 6. 7. 8. 9. Harga Komoditas Beras
10. di Kota Surakarta11. 12. 13. 14. 15. 16. Komoditas 17. 18. 19. Satuan 20. 21. 22. Harga 23. 24. 25. Beras C4 Super26. 1 kg27. Rp. 4.600,- 28. 29. Beras C4 Biasa30. 1 kg31. Rp. 4.400,- 32. 33. Mentik Wangi34. 1 kg35. Rp. 4.500,- 36. 37. 38. 39. 40. Hasilnya :s/d no.13Harga Komoditas Beras di Kota Surakarta Komoditas Satuan Baris no.24 s/d no.28Harga Beras C4 Super1 kgBaris no.29 s/d no.32Rp. 4.600,- Beras C4 Biasa1 kgBaris no.33 s/d no.36Rp. 4.400,- Mentik Wangi1 kgRp. 4.500,-Pemrograman WEBAhmad Fahmi AnwariSMK Karya Guna Bhakti 2maktabahabdillah.esy.es