HTML (Hypertext Markup Language)
advertisement
Rangkuman Tugas Design Web Dirangkum oleh : Muhamad Harish NIM : 06502245001 HTML (HYPERTEXT MARKUP LANGUAGE) HTML merupakan Script dimana kita bisa menampilkan informasi dan daya kreasi kita lewat internet. HTML sendiri terdiri dari tag-tag yang fungsinya untuk membuat dokumen yang bisa dibaca oleh browser, HTML dapat dibaca oleh multiplatform OS misalnya Windows, Linux, Unix, Solaris, Open BSD dan yang lain-lainya. Walaupun berbentuk text biasa HTML mempunyai perbedaan lain dengan dokumen word. HTML versi terakhir adalah versi 4.0.1, HTML versi ini akan menjadi standarisasi untuk elemen dan atribut dari script XHTML 1.0 ELEMEN DAN TAG Elemen pada HTML dapat didefinisikan sebagai suatu kode tertentu yang akan menyediakan tempat untuk meletakkan beberapa kode didalamnya. Untuk lebih jelasnya dapat dilihat dalam contoh skema elemen berikut ini : <html> <head> <title> </title> </head> <body> </body> </html> Keterangan : Dokumen HTML selalu diawali dengan tag pembuka <html> dan diakhiri dengan tag penutup </html> Pada elemen head <head></head>, dapat disisipi kode-kode untuk menuliskan tentang dokumen HTML Elemen body <body></body> berisi tag-tag untuk isi atau layout tampilan situs. Dari keterangan diatas dapat dengan jelas diketahui bahwa elemen merupakan suatu bagian yang besar yang terdiri dari kode-kode yang disebut tag. 1 Rangkuman Tugas Design Web Dirangkum oleh : Muhamad Harish NIM : 06502245001 Sedangkan tag hanyalah merupakan bagian dari elemen. Tag adalah kode-kode yang digunakan untuk men-setting dokumen HTML. Secara garis besar bentuk umumnya tag adalah : <tag-awal> TEKS </tag-akhir> Namun ada beberapa tag yang tidak perlu penutup, seperti <br>, <img>, <p> dan yang lain-lain. MENULIS KOMENTAR Untuk menulis komentar pada dokumen HTML seperti nama pengarang, keterangan elemen dan tag-tag yang lain, kodenya adalah seperti berikut ini : <!----- komentarnya ada disini --------> MENULIS DAFTAR ITEM TANPA NOMER URUT Jika ingin menampilkan data dalam bentuk daftar (list) yang tidak diberi nomer, tag yang digunakan adalah <ul> (unordered list) sedangkan untuk mengakhirinya dengan perintah </ul> MENULIS DAFTAR ITEM DENGAN NOMER URUT Dengan menggunakan <ol> (ordered list), pemberian nomer dapat diotomatiskan tanpa harus menuliskannya. MENGATUR GAMBAR LATAR BELAKANG Untuk menyertakan gambar sebagai latar belakang, attribut yang digunakan adalah ‘background’ pada tag <img>. Contohnya : <body background = “NamaFileGambar”> 2 Rangkuman Tugas Design Web Dirangkum oleh : Muhamad Harish NIM : 06502245001 MENAMPILKAN GAMBAR Tag yang digunakan adalah <img>, tag ini mempunyai banyak attribut, tapi hanya satu yang harus disertakan yaitu attribut src. Attribut-attribut lainya bersifat operasional. Bentuk yang paling sederhana dari tag <img> adalah seperti berikut ini : <img src = “nama_gambar”> Mengatur Ukuran Gambar Untuk mengatur gambar caranya adalah melalui attribut pada tag <img> yang bernama height (mengatur tinggi gambar) dan widht (mengatur lebar gambar). DASAR PENGUNAAN TABEL Tabel bisa digunakan untuk tampilan web untuk mengatur agar informasi dapat disajikan dengan bagus dan enak dibaca. Tag-tag yang terkait dalam pembuatan tabel dapat dilihat seperti dibawah ini <TABLE>….<.TABLE> = mengawali dan mengakhiri sebuah tabel <CAPTION>…</CAPTION> = menentukan judul dalam tabel. <TR>……</TR> = menentukan sebuah baris dalam tabel <TH>……</TH> = membuat judul kolom <TD>……</TD> = membuat sebuah sel data MEMBERI GARIS PADA TABEL Tabel dapat dilengkapi dengan garis untuk kolom maupun baris. Attribut yang digunakan adalah BORDER pada tag <TABLE>, contoh kodenya adalah seperti berikut ini : <TABLE BORDER = “bilangan”> Menentukan warna belakang tabel : Untuk menentukan warna tabel attribut yang digunakan adalah bgcolor pata tag <table> 3 Rangkuman Tugas Design Web Dirangkum oleh : Muhamad Harish NIM : 06502245001 XML (EXTENSIBLE MARKUP LANGUAGE) XML merupakan meta-language seperti tag HTML yang digunakan untuk mendiskripsikan data-data. Tag-tag XML dapat dibuat sendiri tidak ada tag-tag yang pasti seperti halnya pada tag HTML. Beberapa hal yang harus harus diperhatikan mengenai kegunaan XML adalah sebagai berikut : a. XML dapat memisahkan data dari tag HTML b. XML digunakan untuk pertukaran data meskipun berbeda platform. c. Data pada XML berupa text d. XML dapat membuat data menjadi lebih berguna e. XML digunakan untuk membuat bahasa baru ATRIBUT PADA XML XML memiliki beberapa bagian didalam dokumennya, antara lain : a. Root node yaitu node yang melingkupi keseluruhan dokumen. Dalam satu dokumen hanya ada satu root node. Node-node lainnya berada dalam root node. b. Element node yaitu bagian dari dokumen XML yang ditandai dengan tag pembuka dan tag penutup, atau bisa juga sebuah tag tunggal elemen kosong seperti <anggota nama=”henky”>. Root node biasa juga disebut root elemen. c. Attribute node termasuk nama dan nilai atribut yang ditulis pada tag awal sebuah elemen atau pada tag tunggal. d. Text node adalah teks yang merupakan isi dari sebuah elemen, ditulis di antara tag pembuka dan penutup. e. Comment node adalah baris yang tidak dieksekusi oleh parser f. Processing instruction node adalah perintah pengolahan dalam dokumen XML. Node ini diawali dengan karakter <! Dan diakhiri dengan !>. Namun perlu diingat bahwa header standar XML <!XML version=”1.0” encoding 4 Rangkuman Tugas Design Web Dirangkum oleh : Muhamad Harish NIM : 06502245001 =”iso=8859-l”!> bukanlah processing instruction node header standar bukanlah bagian dari hierarki pohon dokumen XML g. NameSpace node, node ini mewakili deklarasi namaspace. ATURAN PENULISAN SINTAKS XML Terdapat beberapa peraturan yang harus diikuti dalam membuat XML. Diantaranya adalah : 1. Semua elemen XML harus ada tag penutupnya 2. Tag XML case sensitive. 3. Semua elemen XML yang dibuat harus berkarang dengan benar. 4. Dokumen XML harus mempunyai root. 5. Nilai atribut harus diberikan tanda petik dua 6. Penggunaan karakter spasi pada XML akan dihitung. ATURAN PENAMAAN ELEMEN XML Aturan untuk memberi nama elemen pada XML. a. Nama elemen dapat terdiri dari huruf, angka dan karakter lainya. b. Nama elemen tidak boleh dimulai dengan angka atau tanda baca. c. Nama elemen juga tidak boleh diawali dengan kata xml (termasuk kombinasi huruf besar dan kecil, seperti XML) d. Pemberian nama pada elemen tidak boleh terdapat spasi 5 Rangkuman Tugas Design Web Dirangkum oleh : Muhamad Harish NIM : 06502245001 XHTML ( EXTENSIBLE HIPER TEXT MARKUP LANGUAGE ) XTML merupakan bahasa yang digunakan untuk membuat dokumen web. XHTML merupakan bahasa yang akan menggantikan HTML yang dapat dikatakan sebagai HTML versi 4.01 dan dikombinasikan dengan XML. XHTML dibuat untuk memperketat dan memperjelas versi dari HTML. XHTML merupakan kombinasi dari HTML dan XML sehingga pengaturan elemen tagtagnya sama seperti HTML 4.01 dengan peraturan penulisan seperti XML PERBEDAAN ANTARA HTML DAN XHTML Terdapat beberapa perbedaan antara XHTML dan HTML, sebenarnya perbedaan ini merupakan penyempurnaan dari kelemahan HTML, yang pada saat ini tidak terjadi pada XHTML. Perbedaannya adalah : a. Elemen XHTML harus dibuat bersarang dengan benar Penyaringan pada XHTML harus berurut dengan benar, hal ini tidak terjadi pada HTML yang penyarangan tag-tagnya dapat bersarang dengan tidak berurut. Pada HTML penyarangan tag boleh dilakukan seperti ini : <b><i> teks ini tebal dan miring </b></i> Namun pada XHTML hal tersbut tidak dapat dilakukan karena penyarangan yang demikian akan menyebabkan tidak didukungnya oleh browser yang lain. Pada XHTML penyarangan tag akan dilakukan dengan urutan yang benar : <b><i> teks tebal dan miring </i></b> b. Dokumen XHTML harus dibuat dengan baik. Semua elemen XHTML yang membentuk dokumen XHTML harus dilakukan dengan penyusunan dengan yang baik. Artinya penggunaan tag-tag pembentuk dokumen harus dengan susunan dan penyarangan yang benar dan terurut. Contohnya : 6 Rangkuman Tugas Design Web Dirangkum oleh : Muhamad Harish NIM : 06502245001 <html> <head>…..</head> <body>….</body> </html> c. Penamaan pada tag menggunakan huruf kecil Penamaan pada tag harus menggunakan huruf kecil. Hal ini disebabkan karena XHTML merupakan sebuah aplikasi XML, yang peraturan penamaan tag-nya menyerupai aturan penamaan tag pada XML. Hal ini tentu berbeda dengan HTML yang diperbolehkan menggunakan huruf kapital untu menamakan tag yang digunakan. Sebagai contoh pada penamaan tag HTMl : <BODY> <P>ini adalah tag paragraf</p> </BODY> Sedangkan ketika menggunakan XHTML maka penamaanya seperti ini : <body> <p>iki text paragraf </p> </body> d. Semua elemen text XHTML harus menggunakan penutup Elemen pada XHTML harus terdapat tag penutup. Hal ini bertolak belakang dengan HTML yang elemenya boleh dibuat tanpa tag penutup. Contohnya saja : Pada tag HTML <p>paragraf pertama </p>paragraf kedua Pada tag XHTML <p>paragraf pertama </p> <p>paragraf kedua </p> e. Elemen kosong juga harus diberi penutup. Maksud elemen kosong adalah pada HTML, tag yang tidak memiliki penutup pada XHTML harus diberikan penutup. 7 Rangkuman Tugas Design Web Dirangkum oleh : Muhamad Harish NIM : 06502245001 SINTAK XHTML Pada XHTML terdapat sedikit perubahan apabila dibandingkan dengan HTML, diantaranya adalah : 1. Nama dari attribut menggunakan huruf kecil. Penulisan nama atribut pada XHTML menggunakan huruf kecil, tidak seperti pada HTML yang dapat menggunakan huruf besar maupun kecil. Contohnya penulisan atribut pada XHTML Atribut yang salah <table WIDHT=”100%> Atribut yang benar <table widht=”100%> 2. Nilai dari suatu atribut berada dalam tanda petik dua. Pada XHTML pemberian nilai pada suatu atribut harus menggunakan tada petik dua. Contohnya saja : Pemberian nilai yang salah : <img src=tes.gif> Pemberian nilai yang benar : <img src=”tes.gif”> 3. Penyingkatan dalam menuliskan atribut tidak diperbolehkan. Hindari menulis suatu atribut dengan menyingkatnya, karena pada XHTML penulisanya harus lengkap dan menggunakan tag penutup. Contoh penulisan atribut yang disingkat <input checked> <option selected> <frame noresize> Pada XHTML penulisanya akan menjadi <input checked=”checked” /> <option selected=”selected” /> <frame noresize=”noresize” /> 8 Rangkuman Tugas Design Web Dirangkum oleh : Muhamad Harish NIM : 06502245001 4. Atribut id digunakan untuk menggunakan atribut name. Pada XHTML atribut name pada elemen a, applet, frame, iframe, img, dan map akan digantikan dengan atribut id. Sebagai contoh dalam HTML penggunaan atribut name : <img src=”cuba.jpg” name=”gambar satu “ /> Sedangkan pada XHTML penulisanya adalah sebagai berikut : <img src=”cuba.jpg” id=”gambar satu” /> 5. penggunaan deklarasi dokumen XHTML semua dokumen XHTML harus menggunakan deklarai DOCTYPE, sebagai deklarasi dokumen XHTML. Tag html, head, title, dan body harus ada pada dokumen XHTML. Ada tiga deklarasi dokumen XHTML yaitu a. XHTML 1.0 Strict Deklarasi strict adalah sebagai berikut : <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd> b. XHTML 1.0 Transitional Deklarasi transitional adalah sebagai berikut : <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” http://www.w3.org/TR/xhtml1/DTD/xhtml1-Transitional.dtd> Deklarasi tansitional digunakan untuk memanfaatkan fitur HTML pada dokumen XHTML dan juga dapat digunakan untuk browser yang tidak mendukun CSS. c. XHTML 1.0 Frameset Deklarasi frameset adalah sebagai berikut : <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Frameset/EN” http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd> 9 Rangkuman Tugas Design Web Dirangkum oleh : Muhamad Harish NIM : 06502245001 Kumpulan Tag HTML <!-- --> <a href> Memberi komentar atau keterangan. Kalimat yang terletak pada tag kontiner ini tidak akan terlihat pada browser Membuat link ke halaman lain atau ke bagian lain dari halaman tersebut <a name> Membuat nama bagian yang didefinisikan pada link pada halaman yang sama <applet> Sebagai awal dari Java applets <area> <b> Mendefinisikan daerah yang dapat diklik (link) pada image map Membuat teks tebal <basefont> Membuat atribut teks default seperti jenis, ukuran dan warna font <bgsound> Memberi (suara latar) background sound pada halaman web <big> Memperbesar ukuran teks sebesar satu point dari defaultnya <blink> Membuat teks berkedip <body> Tag awal untuk melakukan berbagai pengaturan terhadap text, warna link & visited link <br> Pindah baris <caption> Membuat caption pada tabel <center> Untuk perataan tengah terhadap teks atau gambar <comment> Meletakkan komentar pada halaman web tidak tidak akan nampak pada browser <dd> Indents teks <div> Represents different sections of text. <embed> <fn> Menambahkan sound or file avi ke halaman web Seperti tag <a name> <font> Mengganti jenis, ukuran, warna huruf yang akan digunakan utk teks <form> Mendefinisikan input form <frame> Mendefinisikan frame <frameset> Mendefinisikan attribut halaman yang akan menggunakan frame <h1> ... <h6> Ukuran font <head> Mendefinisikan head document. <hr> <html> Membuat garis horizontal Bararti dokumen html 10 Rangkuman Tugas Design Web Dirangkum oleh : Muhamad Harish NIM : 06502245001 <i> Membuat teks miring <img> Image, imagemap atau an animation <input> Mendefinisikan input field pada form <li> <map> Membuat bullet point atau baris baru pada list (berpasangan dengan tag <dir>, <menu>, <ol> and <ul> ) Mendefinisikan client-side map <marquee> Membuat scrolling teks (teks berjalan) - hanya pada MS IE <nobr> Mencegah ganti baris pada teks atau images <noframes> Jika browser user tidak mendukung frame <ol> Mendefinisikan awal dan akhir list <p> Ganti paragraf <pre> Membuat teks dengan ukuran huruf yg sama <script> Mendefinisikan awal script <table> Membuat tabel <td> <title> Kolom pada tabel Mendefinisikan title <tr> Baris pada tabel <u> Membuat teks bergaris bawah 11
