Pengenalan HTML - Teknologi Informasi Kesehatan 7
advertisement
PENGANTAR TEKNOLOGI INFORMASI 7 Yessy Asri, ST, MMSI Pertemuan 6 Pengenalan HTML Pengenalan HTML Dokumen HTML HTML adalah singkatan dari HyperText Markup Language. HTML merupakan file teks yang ditulis menggunakan aturan-aturan kode tertentu untuk kemudian disajikan ke pengguna melalui suatu aplikasi web browser. Setiap informasi yang tampil di web selalu dibuat menggunakan kode HTML. Oleh karena itu, dokumen HTML sering disebut juga sebagai web page (halaman web). Untuk membuat dokumen HTML, kita tidak tergantung pada aplikasi Text Editor apapun, bisa menggunakan Notepad, Emacs atau VI editor dan editor lain pada umumnya. Agar mempermudah dalam pembuatan dokumen HTML, sekarang telah banyak tersedia aplikasi HTML Editor, yaitu suatu aplikasi Text Editor yang dikhususkan untuk membuat kodekode HTML. Kode HTML dari suatu halaman web dapat kita lihat dari aplikasi web browser yang kita gunakan, yaitu dengan cara memilih menu View-Source (untuk pengguna Internet Explorer) atau View-Page-Source (untuk pengguna Mozilla Firefox). Penamaan Dokumen HTML Tidak ada aturan yang baku untuk penamaan suatu dokumen HTML. Artinya, kita bebas memilih nama untuk dokumen tersebut. Hanya ekstensinya saja yang perlu untuk diperhatikan. 6 XCADEILlFEtFAEDECE0iD:1J DSEMFEal aE0R■PP FCE- 70 / EjN&DEP FP LaNEFMAFnME“.htm 'E1t1u E . html '.E0 CIDE0DUEIIX,ENFRAOSEP FP BEIE0RNDP FIE- 70 / ,ENIMEErusEP Fa LP SEXn DENFE030P E 3 ❑ salah satu ekstensi tersebut. Kerangka Dokumen HTML Secara umum, dokumen HTML terbagi atas dua bagian, yaitu bagian header (kepala) dan body (badan). Bagian header diawali dengan tag <head> dan diakhiri dengan tag </head>, sedangkan bagian body diawali dengan tag <body> dan diakhiri dengan 1 PENGANTAR TEKNOLOGI INFORMASI 7 Yessy Asri, ST, MMSI menggunakan tag </body>. Kedua bagian tersebut diapit oleh tag <html> dan </html>, yang digunakan untuk menandai bahwa dokumen yang kita buat adalah dokumen HTML. Untuk lebih jelasnya, berikut ini kerangka dari dokumen HTML. Seperti yang tampak di atas, tag-tag dalam dokumen HTML dibuat secara berpasangan (meskipun tidak semua). Sebagai contoh, dokumen HTML diawali dengan tag <html> dan ditutup atau diakhiri dengan tag </html>. Begitu juga dengan tag <head>, yang juga ditutup dengan menggunakan tag </head>, serta tag <body> yang ditutup dengan menggunakan tag </body>. Bagian teks yang diapit oleh tanda <!-- dan --> merupakan komentar, yaitu bagian teks yang tidak ikut ditampilkan ke dalam web browser. Membuat Dokumen HTML Agar anda bias lebih jelas dalam memahami kerangka dokumen di atas, pada bagian ini kita akan mencoba untuk membuat dokumen HTML sederhana. Silahkan ikuti langkah-langkah berikut ini: 1. Jalankan suatu aplikasi Text Editor, misalnya Notepad, EditPlus atau yang dicontohkan sekarang adalah menggunakan Eclipse Luna PHP Developper. 2. Tuliskan kode berikut ke dalam Text Editor bersangkutan. 2 2014 7 PENGANTAR Sertifikasi TEKNOLOGI (OOP PHP) INFORMASI Yessy Asri, ST, MMSI 3. Simpan dokumen tersebut dengan nama Welcome.html 4. Buka file Welcome.html dengan cara klik dua kali. 5. Tampilan hasilnya seperti pada gambar di bawah ini. Sekilas tentang Tag HTML Seperti yang telah anda pelajari sekilas di atas bahwa dokumen HTML dibuat menggunakan tag-tag khusus, dan dengan aturan yang khusus pula. Terdapat beberapa hal yang perlu diperhatikan dalam penggunaan tag di dalam dokumen HTML, yaitu: Tag HTML selalu diapit oleh tanda kurung runcing, < dan >. Meskipun kode HTML tidak bersifat case-sensitive (tidak berpengaruh pada penggunaan huruf besar atau huruf kecil), namun tag HTML sebaiknya ditulis menggunakan huruf kecil., misalnya <html>, <head>, </head>, <title>, dan sebagainya. Ini merupakan cara yang direkomendasikan oleh W3C. Tag HTML pada umumnya berpasangan, seperti tag <html> berpasangan dengan tag </html>, tag <head> berpasangan dengan tag </head>, dan masih banyak lagi contoh tag berpasangan lainnya. Namun ada juga tag yang tidak memiliki pasangan, misalnya tag <br>, <hr>, <input>, <meta>, dan lain-lain. Untuk menandai bahwa 3 PENGANTAR TEKNOLOGI INFORMASI 7 Yessy Asri, ST, MMSI tag tersebut tidak memiliki pasangan, maka sebaiknya kita membubuhkan tanda slash (garis miring) di belakang tag tersebut, misalnya pada tag <br />, <hr />. Untuk penggunaan tag bersarang, maka penulisannya harus terurut. Sebagai contoh, perhatikan kode berikut: <b> Anda harus <i> belajar </i> dengan giat. </b> Pada contoh di atas, di dalam tag <b> terdapat penggunaan tag lain lagi, yaitu tag <i>. Dalam kasus seperti ini, tag <i> harus ditutup terlebih dahulu menggunakan tag </i> terlebih dahulu sebelum kita menutup tag <b> menggunakan </b>. Atribut Tag Pada umumnya, tag-tag dalam HTML memiliki beberapa atribut yang nilainya bias ditentukan sesuai dengan keperluan. Atribut suatu tag harus ditulis dalam tag yang bersangkutan (sebelum tanda >). Berikut ini contoh tag dengan beberapa atribut di dalamnya. <body bgColor=“#fffeee” alink=”#cccccc”> Pada contoh di atas, kita menentukan atribut bgColor dan alink dari tag <body>. Atribut bgColor digunakan untuk menentukan warna layar (background) dari suatu halaman web, sedangkan #fffeee dan #cccccc merupakan nilai dari atribut tersebut. Dari contoh yang ditampilkan di atas, kita bisa simpulkan bahwa bentuk umum penulisan atribut dari suatu tag adalah sebagai berikut: <namaTag atribut1=”NilaiAtribut1” atribut2=”NilaiAtribut2” ... > Berikut ini contoh kode yang akan menunjukkan penggunaan atribut bgColor di dalam tag <body>. Hasil dari kode program di atas dapat dilihat pada gambar di bawah ini 4 4 2014 Sertifikasi Sertifikasi (OOP(OOP PHP)PHP)2014 Yessy Asri, ST, MMSI Tag Umum dalam HTML Setelah memahami secara umum tentang pembuatan dokumen HTML, pada bagian ini kita akan melanjutkan pembahasan tentang penggunaan tag-tag umum (tag-tag yang sering digunakan) secara lebih detail. Tag <html> Seperti yang telah dijelaskan sebelumnya, dokumen HTML selalu diawali dengan tag <html> dan diakhiri dengan tag </html>. Tag inilah berperan sebagai penanda bahwa suatu dokumen dapat dikatakan sebagai dokumen HTML. Tag <head> Tag <head> berfungsi untuk menentukan informasi-informasi di bagian header dokumen. Satu yang bersifat umum adalah judul dokumen, yang dibuat dengan menggunakan tag <title>, yang berpasangan dengan tag </title>. Karena judul berada dalam bagian header, maka penulisan tag <title> pun harus berada di dalam tag <head> dan tag penutup <head> <title>Contoh Judul</title> </head> <body> </body> 5 untuk header, </head>, harus ditulis sebelum tag <body>, seperti contoh berikut: 6 Sertifikasi (OOP PHP)2014 Yessy Asri, ST, MMSI Bagian header dalam dokumen HTML tidak hanya terdiri atas judul saja. T erdapat beberapa tag lain yang dapat dijadikan header seperti <meta>, <link>, dan lain-lain. Tag <body> Tag <body> merupakan awal bagian badan dokumen. Artinya, semua informasi yang ditulis setelah tag <body> akan tampil sebagai halaman web (akan ditampilkan di halaman web browser). Setelah selesai menuliskan badan dokumen, programmer harus menutupnya dengan tag </body>. Kode program di atas akan menghasilkan tampilan seperti pada gambar di bawah ini. Membuat Heading dan Judul Teks HTML menyediakan enam jenis judul teks. Jenis-jenis tersebut dibedakan berdasarkan ukuran hurufnya. Tag yang digunakan untuk membuat judul adalah <hn>, berpasangan dengan </hn>, di mana n adalah bilangan 1 sampai 6, yang merupakan jenis dari judul bersangkutan. Jenis pertama, <h1>, merupakan jenis judul yang memiliki ukuran huruf paling besar, disusul dengan jenis kedua, ketiga, dan seterusnya. Berikut ini contoh kode yang akan menunjukkan perbedaan jenis judul yang dimaksud. 6 7 Sertifikasi (OOP PHP) 2014 Yessy Asri, ST, MMSI Kode program di atas akan menghasilkan tampilan seperti gambar di bawah ini. 8 PENGANTAR TEKNOLOGI INFORMASI 7 Yessy Asri, ST, MMSI Membuat Paragraf dalam Dokumen HTML Paragraf dalam dokumen HTML dibuat dengan menggunakan pasangan tag <p> dan </p>. Dalam dokumen HTML, sebuah paragraf dimulai dengan baris baru dengan jarak satu spasi. Berikut ini potongan kode untuk membuat paragraph dalam HTML. Dari contoh kode di atas, maka akan menampilkan hasil seperti gambar di bawah ini Text Alignment Dalam membuat dokumen HTML, kita dapat menentukan letak dari teks atau gambar yang terdapat pada halaman web; apakah kita ingin rata kiri, rata kanan, rata kiri dan kanan, ataukah berada di tengah-tengah layar. Untuk melakukan hal ini, kita dapat mengisi atribut ALIGN dengan nilai-nilai berikut: Nilai Atribut ALIGN Keterangan Left Right Menentukan teks rata kiri Menentukan teks rata kanan Justify Menentukan teks rata kiri dan kanan Center Menentukan teks agar berada di tengah-tengah layar (secara horizontal) Atribut ALIGN dapat disisipkan ke dalam tag-tag yang akan diatur posisi teksnya. Sebagai contoh, ALIGN dapat disisipkan ke dalam tag <h>, yang berarti bahwa kita akan 9 PENGANTAR TEKNOLOGI INFORMASI 7 Yessy Asri, ST, MMSI mengatur posisi dari suatu judul. Begitu juga jika ingin mengatur posisi teks dalam suatu paragraf maka kita perlu menyisipkan ALIGN ke dalam tag <p>. Berikut ini contoh kode yang akan menunjukkan cara mengatur posisi teks dalam dokumen HTML. Dari contoh kode di atas, maka akan menghasilkan tampilan seperti gambar di bawah ini Membuat Baris Baru Baris baru yang ditulis dalam kode HTML tidak akan berpengaruh terhadap hasil yang akan ditampilkan pada layar web browser. Sebagai contoh, perhatikan terlebih dahulu kode HTML berikut. 9 10 PENGANTAR TEKNOLOGI INFORMASI 7 Yessy Asri, ST, MMSI Dari contoh kode di atas, maka akan menghasilkan tampilan seperti gambar bawah ini Gambar hasil di atas menunjukkan bahwa penulisan baris baru di dalam kode tidak ada pengaruhnya terhadap tampilan dokumen. Oleh karena itu, HTML menyediakan tag khusus untuk melakukan pembuatan baris baru di dalam dokumen, yaitu dengan menggunakan tag <br />. Tag ini tidak memiliki pasangan, sehingga kita perlu menyisipkan tanda garis miring di akhir tag yang bermaksud untuk menunjukkan bahwa tag tersebut tidak memiliki pasangan penutup. Contohnya: Dari contoh kode diatas, akan menghasilkan tampilan seperti gambar di bawah ini 11 PENGANTAR TEKNOLOGI INFORMASI 7 Yessy Asri, ST, MMSI Memformat Teks Format teks yang terdapat dalam dokumen web dapat kita atur sesuai dengan kebutuhan. Format yang sering digunakan adalah penebalan teks (bold), teks miring (italic), teks bergaris bawah (underline). Membuat teks tebal (bold) Untuk menebalkan teks atau karakter dalam suatu dokumen HTML, kita dapat menggunakan tag <b> yang berpasangan dengan </b>. setiap teks atau karakter yang diapit oleh pasangan teks tersebut akan ditampilkan sebagai teks dengan format tebal. Membuat teks miring (italic) Untuk membuat teks atau karakter dalam suatu dokumen HTML menjadi miring (italic), kita dapat menggunakan tag <i> yang berpasangan dengan </i>. Setiap teks atau karakter yang diapit oleh pasangan teks tersebut akan ditampilkan sebagai teks dengan format miring (italic). Membuat teks bergaris bawah (underline) Untuk membuat teks atau karakter dalam suatu dokumen HTML memiliki garis bawah, kita dapat menggunakan tag <u> yang berpasangan dengan </u>. Setiap teks atau karakter yang diapit oleh pasangan teks tersebut akan ditampilkan sebagai teks bergaris bawah (underline). Contoh penggunaan format teks dalam dokumen HTML adalah sebagai berikut: 11 12 PENGANTAR TEKNOLOGI INFORMASI 7 Yessy Asri, ST, MMSI Hasil dari contoh kode di atas adalah seperti tampilan gambar di bawah ini Tugas Praktikum 1. Setiap contoh yang ada dalam modul, lakukan percobaan dengan menggunakan computer, lalu catat kembali perintah-perintah setiap contoh dalam buku tulis dan kumpulkan hari ini. 13 PENGANTAR TEKNOLOGI INFORMASI 7 Yessy Asri, ST, MMSI Daftar Pustaka Raharjo, B., Heryanto, I., & Rosdiana K, E. (2014). Modul Pemrograman Web HTML, PHP & MySQL Revisi Kedua. Bandung: Modula. 13 14
