Publikasi halaman Web Format Teks

2 5

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: DOCTYPE html html lang = en head -- Ini baris komentar, tidak diproses -- title Ini judul dokumen title head body Ini adalah teks di body body html 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 “ body” , “html” 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. 2 5 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. DOCTYPE html html lang = en head -- Ini baris komentar, tidak diproses -- title Ini judul dokumen title head body Ini adalah teks di body body html 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 hn dan diakhiri dengan hn, 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. body 2 5 h1 Heading 1 h1 h2 Heading 2 h2 h3 Heading 3 h3 h4 Heading 4 h4 h5 Heading 5 h5 h6 Heading 6 h6 body 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. body h1 align = right Heading 1 h1 h2 align = left Heading 2 h2 h3 align = center Heading 3 h3 body Gambar 1.8 kode HTML 2 5 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 “ h1 align=rightHeading 1h1 ” ini berarti penulisan judul menggunakan ukuran font heading 1 dengan posisi rata kanan. “ h2 align=leftHeading 2h2 ” artinya penulisan judul menggunakan ukuran font heading 2 dengan posisi rata kiri. “ h3 align=centerHeading 3h3 ” artinya penulisan judul menggunakan ukuran font heading 3 dengan posisi rata tengah berada di tengah.  Paragraf body p Ini paragraf pertama p 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. p Ini paragraf ketiga body Gambar 2.0 kode HTML Gambar 2.1 Tampilan hasil halaman web 2 5 Penjelasan : script diatas menggunakan tag p yang berfungsi untuk pindah paragraph. Script diatas menunjukkan cara penulisan pargraf dengan hanya menggunakan tag pembuka. Tag p bersifat opsional yang artinya boleh ditulis atau tidak, namun sangat disarankan sebaiknya setiap akhir pargraf tag p disertakan untuk kemudahan dan sebagai penanda akhir dari paragraph. Script diatas menunjukkan isi dokumen yang terdiri dari 3 paragraf. DOCTYPE html html lang = en head title Demo Paragraf title head body p align = center Ini paragraf rata tengah p align = justify Lorem ipsum dolor sit amet, consectetur adipicising elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. p align = right Ini paragraf rata kanan body html 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. 2 5 body Membuat baris baru br Membuat baris baru br p --break di dalam paragraf -- Lorem ipsum dolor sit amet, consectetur adipisicing elit, br sed do eiusmod tempor incididunt ut labore er dolore magna aliqua. br Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliiquip ex ea commod consequat. body Gambar 2.4Kode HTML Gambar 2.5 Hasil Tampilan Web Penjelasan : pada script diatas menggunakan tag br untuk memasukkan fungsi enter atau diguakan untuk pindah ke baris baru tanpa menekan tombol enter. Script diatas terdiri dari 5 baris dengan 1 spasi. body b Menggunakan tag lt;bgt;,,,lt;bgt; bbr strong Menggunakan tag lt;stronggt;...lt;stronggt; strong br i Menggunakan tag lt;igt;,,,lt;igt; ibr em Menggunakan tag lt;emgt;...lt;emgt; embr u Menggunakan tag lt;ugt;...lt;ugt; ubr strike Menggunakan tag lt;strikegt;...lt;strikegt; strikebr body Gambar 2.6 Kode HTML 2 5 Gambar 2.7 Tampilan hasil web Penjelasan : script diatas adalah cara penulisan atau keyword untuk menggunakan bebebrapa font seperti huruf tebal, miring, garis bawah, dll. Tag b dan strong berfungsi untuk mencetak tebal font, tag i dan em untuk mencetak miring, tag u untuk mencetak garis bawah pada tulisan, tag strike untuk mencetak garis yang melewati tulisan.  Karakter Khusus DOCTYPE html html lang = en head title Demo Karakter Khusus title head body pound; Pound br euro; Euro br copy; Copyright br reg; Registered br trade; Trademark br body html Gambar 2.8 Kode HTML 2 5 Gambar 2.9 Tampilan Hasil Web Penjelasan : 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 “copy;” . tidak hanya menggunkan tanda tetapi masing- masing karakter memiliki nama karakter yang berbeda. Seperti yang dicontohkan pada scrip diatas.

4. Garis Horizontal