LAPORAN PRAKTIKUM MODUL 1 PEMROGRAMAN WEB DASAR-DASAR HTML

Disusun Oleh:Ananda Putri Syaviri (130533608243) PTI OFF B UNIVERSITAS NEGERI MALANG FAKULTAS TEKNIK JURUSAN TEKNIK ELEKTRO PROGRAM STUDI S1 PENDIDIKAN TEKNIKINFORMATIKA Januari-2014

MODUL IDASAR-DASAR HTML A. KOMPETENSI DASAR Memahami struktur dasar dokumen HTML dan HTML5. Mampu membuat dokumen HTML yang baik dan benar. Mampu memanfaatkan elemen- elemen dasar untuk menampilkan informasi. B. PETUNJUK Awali setiap aktivitas dengan doa, semoga berkah dan bermanfaat. Pahami tujuan, dasar teori, dan latihan-latihan praktikum dengan baik dan benar. Kerjakan tugas- tugas praktikum dengan baik, sabar dan jujur. Tanyakan kepada asisten/ dosen apabila ada hal-hal yang kurang jelas. C. DASAR TEORI 1. HTML dan XHTML HTML (HyperText Markup Language) merupakan sebuah bahasa markup, bukan bahasa pemrograman. Bahasa markup (Indonesia: markah) adalah bahasa yang mengombinasikan teks dan informasi tambahan mengenai teks tersebut. HTML merupakan dokumen standar yang digunakan untuk mendesain halaman web. Pada awal tahun 2000, konsorsium W3C (World Wide Web Consortium) membuat perubahan besar melalui XHTML (eXtensible Hypertext Markup Language). Ide dasarnya, dalam upaya meningkatkan kompatibilitas dokumen HTML, W3C menambahkan struktur dan ekstensibilitas XML (eXtensible Markup Language) ke HTML. Perkembangan HTML semakin pesat seiring diperkenalkannya HTML5 pada tahun 2009.HTML5 dibangun oleh konsorsium W3C untuk dimasukkan sebagai perubahan besar berikutnya pada standar HTML. Atas dasar ini, maka penting sekali untuk mengenal dan memahami HTML5 dengan baik.2. Struktur Dokumen HTMLSetiap dokumen HTML harus diawali dengan tag dan diakhiri dengan komplemennya, yakni tag tag. Dokumen HTML juga menyertakan tiga pasang tag. Tag dan : digunakan untuk menyatakan informasi mengenai dokumen HTML. Tag dan : digunakan untuk menambahkan title di title bar browser. Tag dan : digunakan untuk melingkupi semua teks yang terdapat di halaman HTML. Bentuk struktur dokumen HTML yang standar sebelum versi HTML5 diperlihatkan sebagai berikut:

Pada HTML5, struktur penulisan diringkas menjadi seperti ini :

Di samping elemen utama di atas, masih terdapat berbagai jenis elemen yang dapat digunakan di dalam dokumen HTML. Salah satu elemen yang perlu diperhatikan adalah untuk penulisan komentar. Di HTML, komentar dinyatakan dengan tag .3. Persiapan Kebutuhan.Pada praktikum awal ini, meskipun dokumen HTML bisa ditampilkan tanpa menggunakan web server, namun di sini diwajibkan tetap menggunakan. Selain itu, praktikum ini juga menuntut pembuatan kode-kode yang baik, benar, dan valid.Berikut ini adalah kebutuhan-kebutuhan yang minimal diperlukan: a. XAMPP/WampServer Paket web server Apache, PHP, dan MySQL. Alasan pemilihan paket bundel seperti ini dikarenakan praktis sehingga tinggal memfokuskan pada pemrograman. b. Web Browser Sangat disarankan menggunakan browser utama Mozilla Firefox. Adapun untuk pembanding, sebaiknya juga memanfaatkan browser lain. c. Editor Teks Editor teks untuk menuliskan kode-kode HTML pembentuk halaman aplikasi web (tidak diperkenankan menggunakan IDE seperti Dreamweaver dan sebagainya).

D. LATIHAN 1. Membuat Dokumen HTML Secara garis besar, struktur dokumen HTML terdiri dari dua bagian: header dan bodi. Di mana header mendefinisikan informasi mengenai dokumen, sedangkan bodi mendefinisikan tubuh atau isi dokumen. Langkah-langkah pembuatan dokumen HTML diperlihatkan sebagai berikut: 1. Buka editor teks. 2. Ketikkan teks (kode-kode HTML) berikut:

Ini judul dokumen

Ini adalah teks di body

Gambar 1.1 kode HTML

Gambar 1.2 Tampilan hasil halaman web

Penjelasan : pada script diatas , untuk baris komentar berwarna hijau , menggunakan struktur penulisan < !-- -->. Kemudian DOCTYPE sebagai deklarasi, sangat disarankan untuk ditulis , jika tidak maka menyebabkan penafsiran berbeda saat script html diterjemahkan. Struktur dari html adalah head yang berisi title, kemudian body yang berisi isi dokumen, kemudian untuk menutup atau mengakhiri jangan lupa menyertakan tag penutup , sesuai dengan tag pembuka yang dituliskan . script diatas menunjukkan bahwa tittle dokumen tersebut berjudul ini judul dokumen dan isi dari dokumen tersebut adalah ini adalah teks di body.

2. Publikasi halaman Web Untuk menguji aplikasi web, kita mempublikasikannya ke web server, baik secara lokal maupun Internet. Lingkungan lokal tentu merupakan pilihan yang efisien, khususnya ketika aplikasi masih dalam tahap pengembangan. Langkah yang diperlukan untuk publikasi ini sangat sederhana. 1. Pastikan bahwafile dokumen sudah diletakkan di direktori web, misalnya untuk WampServer lokasi defaultnya adalah www. Untuk paket web server lainnya, termasuk Apache (versi tunggal) adalah htdocs. 2. Pastikan bahwa web server sudah dijalankan. 3. Buka web browser, kemudian ketikkan alamat URL yang merujuk ke lokasi dokumen.

Ini judul dokumen

Ini adalah teks di body

Gambar 1.3 kode HTML

Gambar 1.4 Tampilan hasil halaman web Penjelasan : script diatas sama dengan script sebelumnya , hanya saja cara membuka atau meload dokumen yang berbeda. Bedanya adalah, scrip sebelumnya diload langsung pada file html yang tersimpan pada direktori computer, sedangkan script diatas diload pada localhost yang tersimpan pada xampp. Sebelumnya file html disimpan pada satu folder yang terletak pada folder htdocs pada program file xampp yang terletak pada direktori C.3. Format Teks HTML menyediakan beragam elemen yang dapat dimanfaatkan untuk pemformatan teks. Heading .Heading merupakan salah satu elemen penting di dalam dokumen HTML. Heading didefinisikan menggunakan tag dan diakhiri dengan , di mana n menyatakan tipe dengan nilai 1-6. Untuk mengetahui bentuk semua jenis heading, buat kode HTML seperti di bawah ini. Perhatikan, kode HTML ini sengaja diringkas guna memudahkan penulisan. Jadi, dalam implementasinya harus mendeklarasikan semua elemen-elemen dasar.

Heading 1Heading 2Heading 3Heading 4Heading 5Heading 6

Gambar 1.5Kode HTML

Gambar 1.7 Tampilan hasil halaman web

Penjelasan : script diatas merupakan struktur penulisan script untuk heading pada html. Heading 1 hingga heading 6. Script diatas menunjukkan perbedaan hasil penulisan heading 1, 2, 3, 4, 5 dan 6. Dari heading 1 sampai 6 penulisan mengecil. Heading digunakan untuk memilih ukuran font untuk pengaturan penulisan judul.

Heading 1Heading 2Heading 3

Gambar 1.8 kode HTML Gambar 1.9 Tampilan hasil halaman web

Penjelasan : script diatas merupakan struktur penulisan script untuk pengaturan penulisan judul rata kiri, tengah atauh kanan pada html. Pengaturan untuk penulisan rata kiri, tengah, kanan menggunakan keyword align. Pada script diatas dituliskan Heading 1 ini berarti penulisan judul menggunakan ukuran font heading 1 dengan posisi rata kanan. Heading 2 artinya penulisan judul menggunakan ukuran font heading 2 dengan posisi rata kiri. Heading 3 artinya penulisan judul menggunakan ukuran font heading 3 dengan posisi rata tengah ( berada di tengah). Paragraf

Ini paragraf pertama

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore er dolore magnaaliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamcolaboris nisi ut aliiquip ex ea commod consequat.

Ini paragraf ketiga

Gambar 2.0 kode HTML Gambar 2.1 Tampilan hasil halaman web

Penjelasan : script diatas menggunakan tag yang berfungsi untuk pindah paragraph.Script diatas menunjukkan cara penulisan pargraf dengan hanya menggunakan tag pembuka. Tag bersifat opsional yang artinya boleh ditulis atau tidak, namun sangat disarankan sebaiknya setiap akhir pargraf tag disertakan untuk kemudahan dan sebagai penanda akhir dari paragraph. Script diatas menunjukkan isi dokumen yang terdiri dari 3 paragraf.

Demo Paragraf

Ini paragraf rata tengah

Lorem ipsum dolor sit amet, consectetur adipicising elit, sed do eiusmod tempor incididunt ut labore et dolore magnaaliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamcolaboris nisi ut aliquip ex ea commodo consequat.

Ini paragraf rata kanan

Gambar 2.2Kode HTML Gambar 2.3 Tampilan hasil halaman web

Penjelasan : script diatas sama dengan script sebelumnya hanya saja , pada script ini menggunakan keyword align untuk pengaturan posisi paragraf. Paragraf pertama menggunkan align center yang artinya berada pada posisi tengah, pargarf kedua yang berisi beberapa kalimat berada pada posisi rata kiri-kanan (justify), dan kemudian paragraf ketiga menggunakan align right yang artinya berada pada posisi rata kanan.

Membuat baris baru
Membuat baris baru

Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore er dolore magnaaliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamcolaboris nisi ut aliiquip ex ea commod consequat.

Gambar 2.4Kode HTML Gambar 2.5 Hasil Tampilan Web

Penjelasan : pada script diatas menggunakan tag
untuk memasukkan fungsi enter atau diguakan untuk pindah ke baris baru tanpa menekan tombol enter. Script diatas terdiri dari 5 baris dengan 1 spasi.

Menggunakan tag ,,,
Menggunakan tag...
Menggunakan tag ,,,
Menggunakan tag ...
Menggunakan tag ...
Menggunakan tag...

Gambar 2.6 Kode HTML Gambar 2.7 Tampilan hasil webPenjelasan : script diatas adalah cara penulisan atau keyword untuk menggunakan bebebrapa font seperti huruf tebal, miring, garis bawah, dll. Tag dan berfungsi untuk mencetak tebal font, tag dan untuk mencetak miring, tag untuk mencetak garis bawah pada tulisan, tag untuk mencetak garis yang melewati tulisan. Karakter Khusus Demo Karakter Khusus Pound
Euro
Copyright
Registered
Trademark
Gambar 2.8 Kode HTMLGambar 2.9 Tampilan Hasil WebPenjelasan : script diatas menggunakan atribut lang yang fungsinya untuk mengontrol browser dalam menampilkan karakter khusus yang sangat membantu untuk mencari alamat web dan karakter khusus lainnya. Script diatas menunjukkan karakter khusus untuk penulisan pound, euro, copyright, registered dan trademark. Untuk penulisan nama karakter khusus diawali dengan tanda & dan diakhiri dengan ; misalnya untuk penulisan copyright adalah . tidak hanya menggunkan tanda tetapi masing- masing karakter memiliki nama karakter yang berbeda. Seperti yang dicontohkan pada scrip diatas. 4. Garis Horizontal Membuat garis horizontal Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore er dolore magnaaliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamcolaboris nisi ut aliiquip ex ea commod consequat. Gambar 3.0 Kode HTML Gambar 3.1 Tampilan hasil halaman webPenjelasan : script diatas menggunakan tag untuk membuat garis horizontal secara penuh pada dokumen html. Satu perintah menunjukkan satu garis lurus. Penulisannya diletakkan sebagai tag penutup. 5. Menggunakan list Ordered ListSatuDua Unordered ListSatuDua Definiton ListSatuSatu SatuDuaDua Dua Gambar 3.2 Kode HTML Gambar 3.3 Tampilan hasil halaman webPenjelasan : script diatas menggunakan tag untuk penulisan list. Penulisan list ada 3 macam yaitu ordered list yang menggunakan tag , unordered list menggunakan tag dan definition list menggunakan tag . Kemudian menggunakan tag yang fungsinya untuk membuat teks sebuah paragraph yang masuk ke dalam. Dd merupakan kepanjangan dari definition description. Tag untuk membuat tem list dengan tanda bullet. Ul sering disebut dengan bulleted list. Ol untuk membuat item list dengan numbering ( angka arab atau romawi), dan Dl untuk membuat item list dengan kalimat terdefinisi.6. Pewarnaan Heading 3Font berwarna merah
Font berwarna merah (menggunakan nilai heksa) Gambar 3.4 kode HTMLGambar 3.5 Tampilan hasil halaman webPenjelasan : scrit diatas menggunakan pewarnaan pada font dan body. Menggunakan kode warna html. Script diatas juga menerapkan align dan heading 3 untuk ukuran font. Script diatas adalah contoh dari gabungan beberapa aspek yang telah dibahas pada script sebelum- sebelumnya. Pada dokumen ini menggunakan 2 warna. Untuk pewarnaan ada beberapa warbna yang kodenya dituliskan dengan huruf biasa da nada juga yang menggunakan perpaduan imbol, huruf dan angka. Untuk warna merah kode htmlnya adalah ="#FF0000. Masih banyak lagi kode kode warna dalam html, dapat diatur sesuai keinginan untuk pewarnaan dalam html karena sudah banyak tersedia daftar list kode- kode warna yang bisa digunakan. 7. Bekerja dengan Gambar Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore er dolore magnaaliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore er dolore magnaaliqua.Gambar 3.6 kode HTML Gambar 3.7 Tampilan hasil halaman webPenjelasan : pada script diatas disisipkan gambar pada masing- masing paragraph. Script diatas terdiri dari 2 paragraf yang didalamnya terdapat sebuah gambar. Untuk menyisipkan gambar sesudah atau setelah paragraph dapat diatur sesuai yang diinginkan. Jika ingin mennampilkan gambar terlebih dahulu maka script gambar dituliskan terlbeih dahulu baru script paragraph, dan begitu sebaliknya. Untuk pengaturan posisi gambar juga dapat menggunakan align. Untuk menyisipkan gambar jangan lupa format penulisan file direktori tempat penyimpanan dan nama file harus benar. Kemudian untuk mengubah lebar dan panjang gambar dapat diatur dengan menambahkan width=100 misalnya ingin mengubah gambar menjadi 100px. 8. Menggunakan Link Link 1 :Demo Linkklik disiniLink 2: Demo Link 2 Untuk kembali ke halaman pertamaklik disiniGambar 3.8 Kode HTMLGambar 3.9 Tampilan hasil halaman webPenjelasan : script diatas menunjukkan cara untuk link antar dokumen. Setiap teks adalah link, ditunjukkan dengan teks bergaris bawah dan bergambar tangan ketika kursor mouse menunjuk teks tersebut. Menggunakan atribut href yang fungsinya untuk menunjuk pada dokumen atau bagian dokumen yang dituju oleh LINK tersebut.9. Atribut LinkDemo Atribut Linkklik disiniGambar 4.0 Kode HTMLGambar 4.1 Tampilan hasil webPenjelasan : script diatas menunjukkan cara untuk link antar dokumen. Setiap teks adalah link, ditunjukkan dengan teks bergaris bawah dan bergambar tangan ketika kursor mouse menunjuk teks tersebut. Menggunakan atribut href yang fungsinya untuk menunjuk pada dokumen atau bagian dokumen yang dituju oleh LINK tersebut. Sama seperti script sebelumnya, namun pada script ini tidak menggunakan 2 file html, dijadikan satu dalam 1 file html kemudian nantinya ketika diload tetap menuju file html yang dituju. Perbedaannya pada script html diatas dituliskan target file yang akan dituju. 10. Link InternalDemo Link Internal MenuPendahuluanPembahasanKesimpulanPendahuluan Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore er dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliiquip ex ea commod consequat. Pembahasan Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore er dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliiquip ex ea commod consequat. Gambar 4.2 Kode HTMLGambar 4.3 Tampilan hasil webPenjelasan : script diatas menggunakan atribut id untuk membuat link atau melakukan navigasi pada satu dokumen. Untuk penggunaan atribut id harus memiliki nilai yang berbeda, tidak boleh sama. Seperti pada script diatas, ada id dengan nilai pendahuluan dan nilai pembahasan. Pada script diatas juga menggunakan atribut li untuk pembuatan item list dengan tanda bullet. Serta penggunaan ukuran font heading 3. 11. Link EmailDemo Link Emaildidik at um dot ac dot id Gambar 4.4 Kode HTMLGambar 4.5 Tampilah hasil webPenjelasan : script diatas menunjukkan cara untuk link email yaitu melakukan satu pesan mail. Untuk link email memanfaatkan atribut mailt. Untuk dapat menghubungkan harus dengan catatan bahwa web client harus dalam kondisi terpasang. 12. Link GambarDemo Link GambarGambar 4.6 Kode HTMLGambar 4.7 Tampilan hasil webPenjelasan : script diatas menunjukkan cara untuk link gambar. Script diatas menggunakan gambar google, dengan tittle search with google, yang nantinya apabila kursor diarahkan ke gambar maka akan muncul tulisan tittle tersebut. Jika diklik maka akan diarahkan ke laman google. 13. TabelDemo TableLabel dari tabelNoNamaAlamat1IbnuJl.JombangGambar 4.8 Kode HTMLGambar 4.9 Tampilan hasil webPenjelasan : script diatas adalah script untuk membuat table pada dokumen html. Elemen- elemen yang diperlukan untuk membuat table adalah .... adalah tag pembentuk tabel, jika border disertakan, maka tabel akan tampil disertai border. Nilai border 0-30. adalah pembentuk sel header tabel. adalah pembentuk judul tabel yang dapat diberi tag apa saja. adalah penjelasan baris tabel. atribut yang dipakai adalah align atau valign. adalah pembentuk sel data dalam tabel. Jadi pada atribut berisi data yang akan diisi pada atribut . 14. Pemformatan TabelDemo Spasi TableNoNamaAlamat1IbnuJl.JombangGambar 5.0 Kode HTMLGambar 5.1 Tampilan hasil webPenjelasan : sama seperti script sebelumnya namun pada script ini terdapat perubahan cellspacing (jarak spasi antar sel) sehingga bentuk table berbeda dengan table yang sebelumnya . script diatas adalah script untuk membuat table pada dokumen html. Elemen- elemen yang diperlukan untuk membuat table adalah .... adalah tag pembentuk tabel, jika border disertakan, maka tabel akan tampil disertai border. Nilai border 0-30. adalah pembentuk sel header tabel. adalah pembentuk judul tabel yang dapat diberi tag apa saja. adalah penjelasan baris tabel. atribut yang dipakai adalah align atau valign. adalah pembentuk sel data dalam tabel. Jadi pada atribut berisi data yang akan diisi pada atribut . Demo Ukuran TableNoNamaAlamat1IbnuJl.JombangGambar 5.2 Kode HTMLGambar 5.3 Tampilan hasil webPenjelasan : sama dengan scrip sebelumnya namun pada script diatas terdapat modifikasi table, terletak pada lebar table dan jarak spasi antar sel yang berbeda dari sebelumnya. Pada script, untuk mengatur lebar table dapat diatur per kolom. Untuk mengatur lebar kolom dapat disisipkan atribut width dengan penulisan No. Artinya semakin banyak angka yang digunakan maka akan semakin lebar kolom tersebut. 15. Desain TabelDemo Span/Merge SelNoSpan Nama dan AlamatSpan baris 1 dan 2IbnuJl.JombangVitaJl.JakartaGambar 5.4 Kode HTMLGambar 5.5 Tampilan hasil webPenjelasan : pada script diatas terdapat atribut rowspan dan colspan , yang fungsinya untuk menggabungkan beberapa kolom dan baris . Script diatas menggabungkan kolom nama dan alamat dengan atribut colspan , dan baris 1 -2 dengan atribut rowspan. Dengan aturan penulisan, rowspan= 2 yang artinya , pada awalnya row berjumlah 3 dan kemudian dengan menggunakan rowspan maka diganti jumlahnya menjadi 2 karena baris no , 1 dan 2 diubah menjadi no dan baris 1. Begitu juga dengan colspan. E. STUDI KASUS 1. Membuat halaman web yang sederhana melibatkkan elemen teks, garis, warna, dan gambar. Dan minimal terdapat sebuah heading dan garis berwarna, gambar dengan garis tepi atau border. Source Code HTML Ananda Putri Syaviri Nama saya : Ananda Putri Syaviri, sering dipanggil putri dan saya berasal dari Lombok, Nusa Tenggara Barat
Saya sekolah dan besar di lombok, saat ini saya sedang menempuh perkuliahan disalah satu universitas di Malang, Jawa Timur. Jawa Timur bukanlah wilayah asing bagi saya karena kedua orang tua saya berasal dari Jawa Timur.
Saat ini saya sudah menempuh 3 semester di universitas ini. saat ini saya sedang menjalani semester ke-4. Saya masuk di Universitas Negeri Malang tahun 2013 dan diterima di fakultas teknik, jurusan teknik elektro prodi S1 Pendidikan Teknik Informatika.
Saya bertemu dengan beragam suku , bangsa dan budaya di universitas ini. Saya mulai beradaptasi dengan budaya disini.
Di universitas ini saya juga menjalani kegiatan UKM sebagai anggota paduan suara mahasiswa "Swara Satata Ciakti", sebagai kegiatan lain selain kuliah.Hasil Tampilan Web Penjelasan : script diatas adalah dokumen yang didesain dengan menggunakan atribut heading1 sebagai judul/ tittle yang diposisikan pada center/tengah. Kemudian, dibuat garis horizontal dengan size 7 , artinya garis horizontal ini menggunakan ketebalan nomer 7 disertai noshade. Noshade disini berarti memberikan warna dalam garis sehingga menjadi lebih tebal. Jika tanpa noshade maka akan tampak seperti garis dengan bentuk persegi panjang tanpa warna yang mengisi bagian dalam garis. Kemudian, menggunakan background colour untuk body dengan warna navy yang memiliki kode ="#000080. Lalu tag menandakan pargraf baru, lalu berisikan tulisan yang diatur dengan warna silver =#C0C0C0. Setiap akhir kalimat diberi tag
untuk pindah ke baris baru. Kemudian setelah selesai menulis isi , membuat garis horizontal dengan size 4 (ketebalan nomer 4 ) dan garis horizontal dengan size 7 (ketebalan 7 ) tepat dibawahnya dengan posisi rata kanan dan panjang garis sebesar 350. Terakhir menyisipkan gambar dengan format penulisan script, letak file dan nama file dengan posisi rata kanan. F. Kesimpulan Untuk pengaturan ukuran judul/ tittle terdapat 6 ukuran mulai dari heading 1 sampai 6. Tag digunakan untuk pindah ke paragraph selanjutnya. Tag
digunakan untuk pindah ke baris selanjutnya. Tag item list yang digunakan ada 3 yaitu ordered list, unordered list dan definition list. Untuk mengubah warna background, font atau garis terdapat kode- kode warna html yang sudah tersedia tentunya dengan format penulisan script yang benar agar hasilnya benar. Elemen- elemen dalam pembuatan table terdiri dari .... adalah tag pembentuk tabel, jika border disertakan, maka tabel akan tampil disertai border. Nilai border 0-30. adalah pembentuk sel header tabel. adalah pembentuk judul tabel yang dapat diberi tag apa saja. adalah penjelasan baris tabel. atribut yang dipakai adalah align atau valign. adalah pembentuk sel data dalam tabel. Untuk membuat sebuah dokumen pada html maka perlu mengetahui struktur penyusunan dokumen, yaitu : head, body, dan tag penutup. Sangat disarankan menyertakan deklarasi DOCTYPE dalam penulisan script HTML. G. Daftar Pustaka Modul Praktikum.2012 . Dasar-dasar HTML. Universitas Negeri Malang Fakultas Teknik Jurusan Teknik Elektro. 2 25