PENGENALAN HTML Diktat pemrograman Web 1

≈ Halaman 10 ≈

BAB II PENGENALAN HTML

HTML kependekan dari HyperText Markup Language. Yaitu suatu format data yang digunakan untuk membuat dokumen hypertext yang dapat dibaca dari satu platform komputer ke platform komputer lainnya,tanpa perlu melakukan suatu perubahan apapun. HTML tidak hanya mampu menampilkan teks tapi juga dapat menampilkan format- format lain dari teks tersebut, misalnya tabel, list, form, frame serta dapat digabungkan dengan obyek suara, gambar, video maupun Java. Dokumen HTML : Dokumen HTML adalah adalah file teks murni yang dapat dibuat dengan sembarang teks editor. Disebut juga sebagai web page. Dokumen HTMLweb page adalah dokumen yang disajikan dalam browser,umunya berisi informasi ataupun interface aplikasi dalam internet. Dokumen ini mempunyai ekstensi file “htm” atau “html”. Dokumen HTML disebut markup language karena mengandung tanda-tanda tertentu yang digunakan untuk menentukan tampilan suatu teks dan tingkat kepentingan dari teks tersebut dalam suatu dokumen. Kita dapat menentukan baris-baris mana yang merupakan judul, menentukan gambar yang harus tampil dan pengaturan format teks dan lain sebagainya. Cara membuat dokumen HTML : 1. dengan text editor notepad,editplus,dll 2. HTML editor frontpage,dreamweaver, publisher, webpagemaker,dll Elemen HTML Suatu elemen HTML terdiri dari tag-tag dan atributnya. Tag : Sewaktu browser menampilkan halaman web. Browser akan membaca teks pada dokumen HTML dan mencari kode khusus yang disebut tag. Tag biasanya merupakan suatu pasangan tag awal … dan tag akhir …. Tag yang mengandung tag lain didalamnya disebut sebagai nested tag. Sebagai catatan,tidak semua tag didukung oleh semua browser. Jika suatu browser tidak mengenali suatu tag tertentu, browser tersebut akan mengabaikan tag yang tidak dikenalinya dan menampilkan isi tag sebagai teks biasa. ≈ Halaman 11 ≈ Atribut : Tag awal biasanya memiliki beberapa buah atribut yang menyatakan karakteristiknya. Misal : p align =”left” digunakan untuk membuat rata kiri suatu paragraph. Tag yang digunakan adalah p dan atribut yang menyertainya adalah align dengan nilai left. Dalam HTML nilai atribut dalam pasangan tanda petik ganda kecuali jika : Nilai merupakan suatu kumpulan dari nilai tertentu misal dalam P ALIGN=”left”, tanda petik ganda boleh dihilangkan. Maka penulisannya boleh P ALIGN=left. Nilai hanya berisi angka,h uruf,dan titik dalam IMG SRC=”Picturealam.gif” ALT=”menampilkan gambar pemandangan alam”, kedua nilai tersebut memerlukan tanda petik ganda karena SRC mengandung tanda “”, dan ALT mengandung spasi. Atribut yang menyertai elemen HTML adalah : Version = cdata data adalah urutan karakter termasuk karakter khusus. Nilai atribut ini sudah dispesifikasi oleh HTML DTD yaitu HTML Document Type Definition,yang berupa definisi tipe dokumen. Atribut lain yang boleh disertakan : Lang language information = language kode,digunakan untuk mengontrol browser dalam menampilkan karakter khusus. Atribut ini dangat membantu mencari alamat web,karakter khusus,dan lainnya. Format dokumen HTML : Dokumen HTML disusun oleh elemen-elemenkomponen dasar pembentuk dokumen HTML. Elemen tersebut dapat berupa teks murni atau bukan teks,atau kombinasinya. Beberapa elemen yang tidak mengharuskan tag berpasangan : 1. paragraph p 2. line break br 3. horisontal rule hr 4. list item li Aturan penulisan tag : 1. tag HTML diapit dengan dua karakter kurung bersudut dan 2. tag HTML secara normal selalu berpasangan seperti b dan b 3. tag pertama dalam suatu pasangan adalah tag awal,dan tag yang kedua merupakan tag akhir. ≈ Halaman 12 ≈ 4. Bebas huruf kapital atau kecil atau campuran huruf besar –kecil dan tidak sensitif case artinya tag b berarti sama dengan B. 5. jika dalam suatu tag ada tag lagi,maka penulisan tag akhir tidak boleh bersilang,harus berurut. Misalnya bI maka akhirnya harus Ib. Pola dasar penulisan dokumen HTML : HTML HEAD …….informasi tentang dokumen HTML HEAD BODY ……Informasi yang ditampilkan dalam browser web BODY HTML ≈ Halaman 13 ≈ Penjelasan : Bagian Head : Kepala dokumen dinyatakan dengan pasangan tag HEAD…HEAD yang merupakan pembuka dari dokumen HTML. HEAD berisi informasi-informasi yang menjelaskan tentang dokumen HTML,seperti judul dokumen, basis URL suatu dokumen, hubungan antar dokumen dalam HTML, dan indeks suatu dokumen. Informasi yang ada di bagian HEAD tidak akan terlihat ketika dokumen tersebut dibuka pada suatu browser. Elemen-elemen pada bagian Head bertugas mengerjakan hal-hal berikut : 1. menyediakan judul dokumen 2. menjadi jembatan antar dokumen 3. memberi tahu browser untuk membuat form pencarian 4. menyediakan metode untuk mengirim pesan. Elemen-elemen yang ada pada head : Elemen Title Untuk membuat judul pada suatu dokumen HTML digunakan pasangan tag TITLE….TITLE. Tag TITLE hanya boleh berada di bagian HEAD dan setiap dokumen hanya boleh memiliki satu judul. TITLE bukan bagian dari teks dokumen dan tidak boleh mengandung tag-tag lain. TITLE biasanya ditampilkan oleh browser pada title bar dari jendela browser dan berfungsi sebagai label untuk jendela dari browser tersebut. Listing program 2.1 contoh penggunaan elemen title HTML HEAD TITLE Judul Dokumen HTMLTITLE HEAD BODY BODY HTML ≈ Halaman 14 ≈ Hasilnya dapat dilihat pada gambar berikut : Gambar 2.1 menampilkan judul dokumen HTML Elemen Base Elemen ini dapat digunakan untuk mempersingkat penulisan URL dengan memberikan hubungan relatif pada link dari dokumen. BASE merupakan suatu elemen pada HTML yang berfungsi menyediakan suatu jalur pencarian bagi dokumen-dokumen yang mempunyai hubungan dengan dokumen pengguna tag BASE. Dengan menggunakan BASE, user dapat mengikuti link dari dokumen HTML yang kita buat,meskipun dokumen telah berpindah tempat. Hal ini terjadi jika user mengambil suatu file dan membacanya secara local di komputernya. Tanpa menggunakan BASE referensi yang menuju dokumen lain akan menjadi kacau karena dokumen yang direferensikan berada di komputer kita, bukan di komputer user. ≈ Halaman 15 ≈ Listing program 2.2 : penggunaan tag base HTML HEAD TITLE Link BeritaTITLE BASE HREF=”www.ia.net~rmeegantara” HEAD BODY IMG SRC=GambarActual.Gif ALT=”Kantor Berita” UL A HREF=HTTP:www.cnn.comCNN TodayA BRA HREF=HTTP:www.voa.comVOA on FocusA UL BODY HTML Elemen Link Tag LINK menyatakan hubungan antara dokumen saat ini dengan dokumen lain. LINK juga digunakan untuk menyatakan pengarang, indeks dan istilah. LINK berpengaruh pada keseluruhan isi dokumen,karena itu LINK berada di bagian kepala. Suatu dokumen dapat banyak mempunyai LINK dengan berbagai atributnya untuk menyatakan semua hubungan yang mungkin antara dokumen tersebut dengan dokumen lain yang berhubungan. Lihat tabel berikut : Atribut Fungsi HREF Menunjuk pada dokumen atau bagian dokumen yang dituju oleh LINK tersebut. REL Menyatakan hubungan antar dokumen saat ini dengan nilai pada HREF REV Menyatakan hubungan antara dokumen saat ini dengan nilai HREF,hanya saja dalam hubungan yang berlawanan dengan REL. TYPE Spesifikasi tipe dan parameter untuk link style sheet. Tabel 2.1 : atribut link dan fungsinya. ≈ Halaman 16 ≈ Listing program 2.3 : penggunaan tag LINK HTML HEAD TITLE penggunaan tag LINKTITLE LINK REV=”made” HREF=”mailto:vegie_2506yahoo.co.id” LINK REL=”toc” HREF=”contents.htm” LINK REL=”index” HREF=”index.htm” LINK REL=”copyright” HREF=”copyright.htm” META NAME=”description” CONTENT=” penggunaan tag LINK” HEAD BODY BODY HTML Elemen Meta Elemem META digunakan untuk memberikan informasi tentang suatu dokumen. Elemen ini tidak dimaksudkan untuk menggantikan elemen TITLE yang memberikan informsi tentang judul suatu dokumen tetapi untuk memberikan informasi lain yang ber manfaat bagi browser ataupun server. Berikut ini contoh penggunaan tag meta : META HTTP-EQUIV=”refresh” CONTENT=”60” URL=”www.friendster.comasihwinantu” elemen META diatas dimaksudkan untuk menginstruksikan browser untuk menunggu 60 detik untuk kemudian memanggil dokumen baru. Instruksi semacam ini digunakan jika dokumen pindah ke lokasi lain. Atribut Fungsi HTTP-EQUIV Atribut ini menghubungkan elemen META ke respon protokol tertentu. NAME Untuk menambahkan keterangan elemen. Jika atribut ini tidak ada diasumsikan sama dengan HTTP-EQUIV. URL Mendefinisikan target dokumen. CONTENT Menunjukkan respon nilai dari properti. Tabel 2.2 : Atribut META dan fungsinya. ≈ Halaman 17 ≈ META dengan HTTP Header Atribut HTTP-EQUIV digunakan sebagai pengganti atribut name untuk menampilkan dokumen yang ditunjuk lewat HTTP . Lihat kode berikut : META HTTP-EQUIV=”Expires” CONTENT=”tue,23 Jul 2006 17:10:50 GMT” dan menghasilkan dalam header HTTP : Expires : tue,23 Jul 2006 17:10:50 GMT Dengan demikian,bisa digunakan untuk menentukan slainan yang baru untuk dokumen. META dengan search engine Digunakan untuk spesifikasi keyword kata kunci oleh search engine. Jika beberapa META menggunakan atribut “lang” untuk menampilkan hasil pencarian oleh atribut “lang”, lihat contoh berikut : -- for speakers of US english -- META NAME=”keywords” lang=”en-us” content=”vacation,Greece,Water” -- for speakers of British english -- META NAME=”keywords” lang=”en-us” content=”holiday,Greece,Water” META dan PICS PICS adalah Platform for Internet Content Selection, merupakan infrastruktur untuk mengelompokkan label meta data dengan isi internet, digunakan untuk membantu orangtua dan guru mengontrol apa yang bisa diakses anak-anak diinternet. Listing program 2.4 : deklarasi META untuk menyisipkan PICS HEAD META HTTP-EQUIV=”pics-Label” Content=’ PICS-1.1 “http:www.yahooligans.comv2.5” labels on “2006.11.05T08:15-0500” until “2007.12.31T23:59-00:00” for http:w3.orgPICSoverview.html ratings suds 0.5 density 0 colorhue 1 ‘ ≈ Halaman 18 ≈ TITLE …. CHILDREN’S EDUCATION….TITLE HEAD META dan data profile Atribut profile dalam HEAD menunjukkan lokasi profile meta data. Nilai atribut profile adalah URL. Browser menggunakan URL untuk 2 hal,yaitu sebagai nama unik dan sebagai link. Berikut contoh META dengan “author”, “copyright”, “keywords” dan “date”. Listing program 2.5 : deklarasi META Data Profile HEAD profile=”http:www.stmikelrahma.ac.idprofilescore” TITLESTMIK El RahmaTITLE META name=”author” content=”Uunboy” META name=”copyright” content=”copy;2006 STMIK El Rahma” META name=”keywords” content=”Komputer, visi-misi, sejarah, jurusan” META name=”date” content” 2006.11.05T08:15:30+00:00” HEAD Bagian Body : Section BODY yang dinyatakan dengan tag BODY…BODY merupakan elemen terbesar di dalam dokumen HTML. Bagian ini bukan hanya untuk memasukkan informasi atau isi dokumen tetapi juga bisa memberikan format tertentu pada suatu kelompok teks, membuat tabel, form dan lain sebagainya. Listing program 2.6 : contoh dokumen dasar HTML HTML HEAD TITLE Judul Dokumen HTMLTITLE HEAD BODY masukkan teks dan isi tampilan halaman HTML disini BODY HTML Simpan dokumen tersebut dengan ekstensi .htm atau .html. dan buka dengan program web browser yang ada, Internet Explorer, mozzila, opera atau konqueror. Browser akan mengenali ≈ Halaman 19 ≈ file teks tersebut sebagai suatu dokumen HTML dan akan menampilkan isinya sebagai suatu halaman web. Gambar 2.2 tampilan dokumen html Atribut Elemen Body Elemen BODY mempunyai banyak atribut. Berikut ini adalah atribut-atribut yang menyertai elemen BODY. Atribut Fungsi ALINK Menyatakan warna link yang sedang aktif BACKGROUND Menyatakan file gambaryang akan digunakan sebagai gambar latar belakang dari halaman HTML. BGCOLOR Menyatakan warna yang digunakan sebagai latar belakang halaman web. BGPROPERTIES Jika diset FIXED, membuat suatu watermark yaitu background tetap tidak ikut menggulung jika halaman di scrooling LEFTMARGIN Mengatur margin kiri dari isi dokumen dengan ukuran pixel. LINK Menyatakan warna dari link yang belum pernah dikunjungi. TEXT Mengatur warna teks dokumen web. TOPMARGIN Mengatur margin atas dari isi dokumen dengan ukuran pixel. VLINK Menyatakan warna dari link yang pernah dikunjungi. Tabel 2.3 : Atribut BODY dan fungsinya Warna yang digunakan dalam dokumen HTML menggunakan kode heksadesimal atau nama dari RGB. Berikut ini adalah tabel nama warna dan nomor hexadesimalnya. Warna Nomor Hexadesimal Black 000000 Maroon 800000 Elemen body Judul ≈ Halaman 20 ≈ Green 008000 Olive 808000 Navy 000080 Purple 800080 Teal 008080 Grey 808080 Silver C0C0C0 Red FF0000 Lime 00FF00 Yellow FFFF00 Blue 0000FF Fuchsia FF00FF Aqua 00FFFF White FFFFF Tabel 2.4 : Tabel warna dan Nomor Hexadecimal Tag-tag Dasar HTML : 1. HTML Merupakan tag dasar yang mendefinisikan bahwa dokumen ini adalah dokumen HTML. Tag ini harus dituliskan oleh pemrogram web sebagai tag pertama dalam dokumen HTML. Sintaks: Tag awal : HTML Tag akhir : HTML 2. Head Merupakan tag setelah HTML,digunakan untuk menuliskan keterangan tentang dokumen web yang akan ditampilkan. Sintaks: Tag awal : HEAD Tag akhir : HEAD 3. Title Merupakan tag dalam head yang harus dituliskan untuk memberi judulinformasi pada caption browser web tentang topik atau judul dari dokumen web yang ditampilkan dalam browser. Sintaks: Tag awal : TITLE Tag akhir : TITLE ≈ Halaman 21 ≈ 4. Body Merupakan section utama dalam dokumen web. Di bagian body inilah semua bagian dokumen yang akan ditampilkan dalam browser harus dituliskandidefinisikan. 5. Paragraph Dalam web,informasi yang merupakan satu pikiran utama disimpan dalam 1 paragraf. Setiap paragraf dimulai dengan tag P, tidak harus dituliskan P sebagai akhir paragraf,karena tag P tidak didefinisikan mempunyai tag akhir. Setiap pergantian paragraf harus dimulai dengan P. 6. Line break Menyisipkan satu baris baru dalam satu paragraf. 7. Heading Heading = judul topik dalam dokumen Heading akan ditampilkan dengan huruf yang lebih besar atau ditebalkan. Heading juga dimanfaatkan untuk menunjukkan tingkatan kepentingan dari teks yang akan ditampilkan. Dalam HTML terdapat enam tingkatan heading,yang diberi nomor dari 1-6,dimana heading nomor 1 merupakan heading terbesar. Sintaks : Hy teks yang menjadi heading Hy dimana y merupakan nilainomor dari heading. 8. Garis mendatarhorisontal rule Garis pada umumnya digunakan sebagai pemisah antar bagian atau paragraf. Tag hr disisipkan pada bagian yang akan diberi garis. Lebar dan ukuran garis dapat diatur dalam bentuk poit atau dalam bentuk ukuran relatif dalam window browser. Sintaks : hr width=”x” size=”x” dimana x berupa angkanilai. 9. Komentar Dalam dokumen web ada sebagian teks yang berfungsi sebagai catatan atau komentar terhadap dokumen itu sendiri, yang tidak ditampilkan dalam browser. Komentar bisa disisipkan di bagian mana saja di seluruh dokumen web,diletakkan pada bagian-bagian teks dokumen yang memang perlu dikomentari. Teks komentar ditandai dengan tanda tag sebagai awal, dan tag -- sebagai akhir. ≈ Halaman 22 ≈ Listing program 2.7 : Contoh penyisipan komentar dalam dokumen HTML DOCTYPE HTML PUBLIC “ -W3CDTD HTML 4.0 FramesetEN” saved from url=0024http:www.webgaul.com -- HTMLHEADTITLE ::: Web gaul ::: TITLE Listing program 2.8 : Contoh dokumen HTML HTML HEAD TITLE World Wide WebTITLE BODY CENTERH1Definisi World Wide WebH1CENTER P ALIGN=”LEFT” WWW adalah layanan yang paling sering digunakan dan memiliki perkembangan yang sangat cepat karena dengan layanan ini kita bisa menerima informasi dalam berbagai format multimedia. Untuk mengakses layanan WWW dari sebuah komputer yang disebut WWW server atau web server digunakan program web client yang disebut web browser atau browser saja. Jenis-jenis browser yang sering digunakan adalah: Netscape NavigatorComunicator, Internet Explorer, NCSA Mosaic, Arena, Lynx, dan lain-lain. P ALIGN=”RIGHT” Surfing merupakan istilah umum yang digunakan bila menjelajahi dunia maya atau web. Tampilan web yang sangat artistik yang tidak hanya menampilkan teks tapi juga gambar- gambar yang di tata sedemikian rupa sehingga selalu membuat betah netter untuk surfing berjam-jam. Karena itu para netter harus sangat memperhitungkan rencana web mana saja yang akan dikunjungi atau batasi informasi yang ingin diakses, karena bila tidak netter akan tersesat kedalam rimba informasi yang maha luas. BODY HTML Hasilnya di browser : ≈ Halaman 23 ≈ gambar 2.3 : tampilan dokumen HTML di browser ≈ Halaman 24 ≈

BAB III TEKS DALAM PARAGRAF