Scribd Logo
Unggah

Selamat datang di Scribd!

  • 1.pengenalan HTML

    Diunggah oleh

    Mohammad Fadly Syahputra
    3K tayangan15 halaman

    Judul Asli

    1.Pengenalan HTML

    Hak Cipta

    © Attribution Non-Commercial (BY-NC)

    Format Tersedia

    DOCX, PDF, TXT atau baca online dari Scribd

    Apakah menurut Anda dokumen ini bermanfaat?

    Apakah konten ini tidak pantas?

    Laporkan Dokumen Ini

    Hak Cipta:

    Attribution Non-Commercial (BY-NC)
    Unduh sebagai DOCX, PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    3K tayangan15 halaman

    1.pengenalan HTML

    Diunggah oleh

    Mohammad Fadly Syahputra

    Hak Cipta:

    Attribution Non-Commercial (BY-NC)
    Unduh sebagai DOCX, PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    dari 15

    Pengenalan HTML

    2.1.

    DASAR-DASAR HTML

    HTML kepanjang dari Hypertext Markup Language. HTML adalah suatu format data yang digunakan untuk membuat dokumen hypertext yang dapat dibaca dari satu platform komputer ke platform komputer lain tanpa perlu melakukan perubahan apapun. Dokumen HTML disebut markup language karena mengandung tandatanda tertentu yang digunakan untuk menentukan tampilan suatu teks dan tingkat kepentingan dari teks tersebut dalam suatu dokumen. Anda dapat menentukan baris-baris mana yang merupakan judul, menentukan gambar yang harus tampil dan pengaturan format pada teks dan lain sebagainya.

    Dengan sistem hypertext pada dokumen HTML, Anda tidak harus membaca suatu dokumen secara urut dari atas ke bawah. Anda dapat langsung menuju pada topik-topik yang Anda inginkan. Dokumen HTML bisa mengandung teks, gambar, suara, flash, dan video. Yang membedakan HTML dengan dokumen lain adalah adanya Tag-Tag HTML beserta tag-tagnya. Tag dan tag HTML berfungsi untuk memformat atau menandai suatu bagian tertentu dari dokumen HTML dan juga menentukan struktur bagian tersebut dalam dokumen HTML. Dokumen HTML disusun oleh tiga bagian yaitu:

    1. Baris yang berisi informasi versi HTML yang digunakan 2. Deklarasi bagian header dengan Tag HEAD 3. Deklarasi bagian body dengan Tag BODY atau FRAMESET

    Contoh dokumen HTML sederhana


    <!DOCTYPE HTML PUBLIC -//W#C//DTD HTML 4.01//EN http://www.w3.org/TR/html4/strict.dtd> <html> <head> <title>dokumen html saya yang pertama</title> </head> <body> <p>halo semua, saya orang baru ...! </body> </html>

    2.2.

    HTML 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. Tag berikut yang dapat ditambahkan pada bagian tag <HEAD> :

    1. <TITLE> 2. <BASE> 3. <LINK> 4. <META> 5. <SCRIPT> 6. <STYLE>

    Di dalam tag <HEAD> terdapat tag <TITLE> ... </TITLE> yang digunakan untuk membuat judul pada suatu dokumen HTML. 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 labael untuk jendela dari browser tersebut.

    Contoh Tag TITLE


    <html> <head> <title>Dokumen html saya yang pertama</title> </head> <body> </body> </html>

    Tag BASE. Tag ini dapat digunakan untuk mempersingkat penulisan URL, dengan memberikan hubungan relatif pada link dari dokumen. BASE menyediakan suatu jalur pencarian bagi dokumen-dokumen yang mempunyai hubungan dengan dokumen pengguna tag BASE. Dengan menggunakan BASE, seorang dapat mengikuti link dari dokumen Anda sekalipun dokumen telah berpindah tempat. Hal ini terjadi jika seseorang mengambil suatu file untuk membaca secara lokal pada komputernya. Tanpa menggunakan BASE referensi yang menuju dokumen lain akan menjadi kacau karena dokumen yang direferensikan berada di komputer Anda, bukan pada komputer mereka.

    Contoh Tag BASE


    <html> <head> <title>Dokumen html saya yang pertama</title> <base href="http://www.w3schools.com/images/" /> </head> <body> </body> </html>

    Tag LINK. Tag <LINK> menyatakan hubungan antara dokumen, karena itu LINK berada di bagian HEAD. Suatu dokumen dapat banyak mempunyai LINK dengan berbagai atributnya untuk menyatakan semua hubungan yang memungkinkan antara dokumen tersebut dengan dokumen lain yang berhubungan. Lihat Tabel 2.1 yang berisi atribut LINK beserta fungsinya.

    Tabel 2.1 Atribut LINK dan fungsinya

    Atribut HREF

    Fungsi Menunjukkan pada dokumen atau bagian dokumen yang dituju oleh LINK tersebut.

    REL REV

    Menyatakan hubungan antar dokumen saat ini dengan nilai pada HREF Menyatakan hubungan antara dokumen saat ini dengan nilai HREF, hanya saja hubungan yang berlawanan dengan REL

    TYPE

    Spesifikasi tipe dan parameter untuk link style shhet

    Contoh Tag LINK


    <html> <head> <title>Penggunaan tag link</title> <link rev=made href=mailto:usu@usu.ac.id> <link rel=index href=index.htm> </head> <body> </body> </html>

    Untuk tag <META>, <SCRIPT>, dan <STYLE> akan dibahas pada sub-bab/bab berikutnya.

    2.3.

    HTML META

    Tag Meta digunakan untuk memberikan informasi tentang suatu dokumen. Tag ini tidak dimaksudkan untuk menggantikan Tag TITLE yang memberikan informasi tentang judul suatu dokumen tetapi untuk memberikan informasi lain yang bermanfaat bagi browser atau server

    Tabel 2.2 Atribut META dan fungsinya

    Atribut HTTP-EQUIV NAME

    Fungsi Atribut ini menghubungkan tag META ke respon protokol tertentu Unutk menambahkan keterangan elemen. Jika atribut ini tidak ada diasumsikan sama dengan HTTP-EQUIV

    URL CONTENT

    Mendefenisikan target dokumen Menunjukkan respon nilai dari properti

    META dengan HTTP Header. Atribut HTTP-EQUIV digunakan sebagai pengganti atribut name untuk menampilkan dokumen yang ditunjuk lewat Hypertext Transfer Protocol (HTTP). Lihat potongan program berikut: <META HTTP-EQUIV=Expires content=Tue, 20 Aug 2010 14:25:27>

    dan menghasilkan dalam header HTTP yang demikian bisa digunakan untuk menentukan salinan yang baru untuk dokumen.

    Expires: Tue, 20 Aug 2010 14:25:27

    META dan 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 potongan program berikut: META name=keywords lang=id content=university, usu, medan>

    META dan Data Profile. Atribute profile dalam HEAD menunjukkan lokasi profile meta data. Nilai atribute profile adalah URL. Browser menggunakan URL untuk dua hal, yaitu sebagai nama unik dan sebagai link. Berikut contoh META dengan author, copyright, keywords, dan date.

    Contoh Tag META


    <html> <head profile=http://itopensource.blog.usu.ac.id/profiles> <title>meta dan profile</title> <meta name=author content=muhammad fadhly sani> <meta name=copyright content=&copy; 2010 it> <meta name=keywords content=it, psi, usu> <meta name=date content=2010-09-06t23:49:37+07:00> </head> <body> <h1> TAG META </h1> </body> </html>

    2.4.

    HTML LINKS

    Untuk membuat suatu link dalam HTML dopergunakan elemen anchor yang dinyatakan dengan tag berpasangan <A> ... </A>. Dalam browser, link biasanya dinyatakan dalam teks dengan garis bawah. Jika seorang pemakai mengklik teks pada suatu link, browser akan membawa pemakai ke path dari link tersebut. Atribut yang boleh menyertai tag <a> adalah:

    Tabel 2.3 Atribut dari tag <A>

    Atribut Name Href Hreflang Type Rel

    Fungsi Menyatakan titik anchor dalam suatu dokumen HTML Menunjukkan lokasi dokumen web. Menunjukkan bahasa yang digunakan, hanya digunakan bersama dengan href. Stribut ini memberi catatan tipe isi dari dokumen tujuan Menggambarkan hubungan dari dokumen asal dengan dokumen tujuan yang ditunjuk dengan atribut href

    Rev

    Menggambarkan hubungan antara dokumen tujuan yang ditunjuk oleh atribut href dengan dokumen asal.

    Charset

    Untuk menspesifikasikan karakter encoding dokumen web.

    Contoh Tag META


    <html> <head> <title>tag a</title> </head> <body> <a href=www.google.com>google</a> </body> </html>

    ATRIBUT NAME DAN ID. Atribut href untuk menyatakan suatu file tujuan. Server mencari ke dalam direktori di mana dokumen saat ini berada untuk mencari file tersebut. File dokumen tujuan HTML yang menggunakan tag <A> bisa diikuti atribut name atau id. Untuk membuat link yang membawa pembaca ke suatu bagian tertentu dalam dokumen, cukup sertakan tanda # setelah nama bagian.

    Contoh menggunakan tag <a> dan atribut name dan id


    <html> <head> <title>Tag A</title> </head> <body> <a href=#PSI>PSI</a> <a href=#informasi>informasi</a> <br> Pusat Sistem Informasi <a name=PSI>(PSI)</a> USU memberikan cenderamata kepada Bapak Prof. Chairuddin P.Lubis sebagai ucapan terimakasih atas dukungannya yang sangat besar terhadap pengembangan di bidang Teknologi Informasi selama ini. Penyerahan cenderamata tersebut dilakukan di sela-sela acara peresmian gedung Teknologi dan <a name=informasi> Sistem Informasi </a> Sabtu (4/9) kemarin. </body> </html>

    JUDUL LINK. Atribut title bisa digunakan dalam tag <A> untuk menambahkan informasi tentang link. Informasi ini akan ditampilkan berupa tooltip oleh browser. Lihat contoh program berikut:

    Contoh Judul LINK


    <html> <head> <title>tag a</title> </head> <body> <a href=www.google.com title=website google>google</a> </body> </html>

    2.5.

    HTML URLS

    URL singkatan dari Uniform Resource Locator (diterjemahkan: Pelokasi Sumber Daya Seragam), adalah rangkaian karakter menurut suatu format standar tertentu, yang digunakan untuk menunjukkan alamat suatu sumber seperti dokumen dan gambar di Internet. URL merupakan suatu inovasi dasar bagi perkembangan sejarah Internet. URL pertama kali diciptakan oleh Tim Berners-Lee pada tahun 1991 agar penulis-penulis dokumen-dokumen dapat merujuk pranala ke Jejaring Jagat Jembar atau World Wide Web. Sejak 1994, konsep URL telah dikembangkan menjadi istilah Uniform Resource Identifier (URI) yang lebih umum sifatnya. Walaupun demikian, istilah URL masih tetap digunakan secara luas.

    Syntax URL:

    protocol:// hostname:port/path/anchor

    Setiap URL memiliki penamaan yang sama, yaitu:

    1. Protocol. Protocol mengindikasikan namespace atau tujuan sebagai tambahan untuk syntax dari bagian yang tersisa dari URL. Sebagai contoh, http://www.usu.ac.id 2. A colon / titik dua 3. Hostname atau alamat IP. Hostname atau alamat IP menjelaskan tujuan lokasi untuk URL. Sebagai contoh google.com adalah nama domain dan 72.14.207.99 adalah alamat IP nya. Lebih mudah untuk mengingat nama domain dibanding mengingat alamat IP. 4. Nomor port. Nomor port bersifat pilihan dan apabila dikosongkan maka secara default yang digunakan adalah 80. Dengan memberikan port secara spesifik akan memberitahukan pada web browser untuk terhubung ke port tertentu pada server. 5. Path untuk diakses. Path untuk diakses digunakan untuk menemukan sumber spesifik yanng dibutuhkan. Dikarenakan penulisannya berformat case sensitive, apabila ditulis dengan huruf besar, maka akan didapati HTML 404 error. 6. Sebuah pilihan anchor (untuk HTML) atau query string (untuk CGI). Pilihan anchor untuk HTML mengacu pada lokasi pada sebuah halaman website yang sebenarnya. Disisi lain, query string yang digunakan untuk website CGI menyimpan data untuk diteruskan pada aplikasi web tertentu seperti program CGI. Query string secara umum dipisahkan dengan ampersands (&) ketika nama dan nilai terpisah oleh tangda yang sama.

    Tabel 2.4 Protocol yang digunakan di URL

    Protocol http

    Kepanjangan Hypertext Transfer Protocol

    Keterangan Halaman web umum dimulai dengan http://. Tidak dienkripsi.

    https

    Secure Hypertext Transefer

    Halaman

    web

    yang

    aman.

    Semua

    yang

    dipertukarkan/ditransfer akan dienkripsi, tidak dapat dibaca hacker. ftp File Transfer Protocol Untuk mendownload atau upload file ke sebuah situs web. Berguna untuk pemeliharaan domain File gopher Sebuah file di komputer Anda Protocol yang digunakan untuk mengakses server gopher news WAIS Wide Area Information Search Protocol untuk mendistribusikan berita di Usenet Protocol yang digunakan untuk mengakses database atau dokumen pada database WAIS

    2.6.

    HTML URL ENCODE

    URL hanya dapat dikirim melalui Internet dengan menggunakan karakter ASCII-set. Sejak URL sering mengandung karakter diluar ASCII set, URL harus diubah menjadi format ASCII yang valid. Untuk menggantikan URL yang mengandung karakter diluar ASCII dilakukan dengan cara penulisan persen % dan diikuti oleh dua digit heksadesimal yang sesuai dengan nilai-nilai karakter di --8859-1 set karakter ISO . URL tidak boleh berisi spasi. URL encoding biasanya menggantikan spasi dengan tanda +.

    Tabel 2.5 URL ENCODING

    Karakter

    URL-Encoding %80 %A3 %A9 %AE %C0 %C1 %C2 %C3 %C4 %C5

    2.7.

    HTML CSS

    Style sheet dihadirkan para desainer web untuk mengoptimalkan kemampuannya dalam merancang halaman web. Style sheet memungkinkan para desainer untuk mengatur format dan layout halaman secara

    lebih efisien. Style sheet dapat memisahkan style dan layout dokumen HTML dari isi sebenarnya. Style sheet dapat diletakkan pada bagian atas dokumen HTML atau pada file tersendiri. Kedua cara ini dapat digunakan bersama-sama pada suatu dokumen. Dengan adanya style sheet, setiap baris HTML tidak perlu disentuh jika ingin melakukan layout pada dokumen, cukup mengubah defenisi style sheet atau membuat style sheet baru. Untuk membuat defenisi suatu style, Anda perlu menyertakan suatu elemen HTML diikuti dengan daftar atribut untuk elemen tersebut yang berada dalam tanda { ......}. Setiap atribut dinyatakan suatu nama khusus yang diikuti dengan titik dua ( : ) dan nilai atribut tersebut . sedangkan untuk memisahkan setiap atribut digunakan tanda titik koma ( ; ).

    Contoh Penggunaan CSS


    <html> <head> <title>Menggunakan CSS</title> <style type="text/css"> body {background-color:yellow} p {color:blue} </style> </head> <body> <p>hello world</p> </body> </html>

    Untuk pembahasan mengenai elemen-elemen, atribut, dan pengunaan style sheet akan dibahas pada bab 6 8.

    2.8.

    HTML SCRIPT

    JavaScript adalah bahasa skrip (bahasa yang kodenya ditulis menggunakan teks biasa) yang ditempelkan pada dokumen HTML dan diproses pada sisi klien. Dengan adanya bahasa ini, kemampuan dokumen HTML menjadi semakin luas. Sebagai contoh, dengan menggunakan JavaScript dimungkinkan untuk memvalidasi masukan-masukan pada formulir sebelum formulir dikirim ke server. Selain itu, dengan menggunakan JavaScript juga dimungkinkan untuk mengimplementasikan tugas yang bersifat interaktif tanpa berhubungan dengan server. Beberapa contoh yang bisa dilakukan melalui JavaScript:

    1. Menampilkan jam lokal pada halaman web. 2. Mengatur warna latar belakang halaman web. 3. Mengganti gambar ketika pemakai menempatkan penunjuk mouse ke suatu gambar. 4. Memvalidasi keabsahan data yang dimasukkan oleh pemakai. 5. Menandai semua data yang akan dihapus dengan cara memberi tanda centang pada kotak cek. Hal seperti ini biasa disediakan pada pembaca e-mail yang berbasis web.

    Yang lebih penting lagi, JavaScript dapat memanfaatkan DOM untuk mengakses elemen-elemen dalam halaman web dan dapat berinteraksi dengan server. Untuk menambahkan fungsi JavaScript di dokumen HTML dapat menggunakan tag <script> yang digunakan untuk mendefenisikan client-side script (JavaScript) dan tag <noscript> yang digunakan untuk menyatakan bahwa browser tidak mendukung client-side script. Kedua tag tersebut diletakkan pada bagian tag <head> .... </head>.

    Contoh Penggunaan JavaScript


    <html> <head> <title>Menggunakan JavaScript</title> <script language=javascript> document.write(Saya belajar JavaScript); </script> <noscript>Maaf, Browser Anda tidak mendukung JavaScript</noscript> </head> <body> </body> </html>

    Untuk pembahasan lebih lanjut mengenai JavaScript akan dibahas pada bab 9

    2.9.

    HTML ENTITIES

    Karakter spesial atau entity adalah karakter-karakter yang penggunaanya dalam HTML harus menggunakan kode-kode tertentu. Karakter-karakter ini merupakan karakter khusus yang digunakan untuk mewakili simbol-simbol tertentu seperti simbol matematika atau yang lain.

    Tabel 2.6 Karakter Khusus

    Simbol &nbsp; < > & &lt; &gt; &amp; &cent;

    Entity

    Simbol 1/2 1/4 3/4 &copy; &reg; &trade;

    Entity

    &frac12; &frac14; &frac34; &pi; &divide; &plusmn;

    &pound; &yen; &euro; &sect;

    2.10.

    HTML ELEMENTS

    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 </ ... >. Format umum pasangan tag adalah sebagai berikut:

    <nama tag> teks yang ditampilkan </nama tag>

    Sintaks Elemen HTML:

    1. 2. 3. 4. 5. 6.

    Sebuah elemen HTML dimulai dengan tag awal / pembuka tag Sebuah elemen HTML diakhiri dengan tag akhir / tag penutup Isi elemen adalah segalanya antara awal dan tag akhir Beberapa elemen HTML memiliki konten kosong Elemen kosong ditutup pada tag awal Sebagian besar elemen HTML dapat memiliki atribut.

    Kebanyakan browser akan menampilkan HTML dengan benar bahkan jika Anda lupa dengan tag akhir dapat menghasilkan hasil yang tidak diharapkan. Elemen HTML yang tidak memiliki konten disebut dengan element kosong. Elemen kosong dapat ditutup di tag awal. Contohnya adalah tag <br>. Tag <br> adalah sebuah element kosong tanpa tag penutup, tag <br> didefenisikan sebagai satu baris. Tag HTML tidak case sensitive, berarti <P> sama dengan <p>. Banyak situs web menggunakan tag HTML berhuruf besar. Tetapi sebaiknya Anda menggunakan tag HTML yang berhuruf kecil karena World Wide Consortium (W3C) mrekomendasikan penggunaan huruf kecil pada tag HTML.

    2.11.

    HTML ATTRIBUTES

    Setiap elemen HTML dapat memiliki atribut. Atribut menyediakan informasi tertentu tentang elemen HTML tersebut. Penulisan atribut diletakkan pada tag pembuka. Bentuk penulisan atribut pada HTML adalah seperti berikut ini :

    nama_atribut = "nilai_atribut"

    Contoh penggunaan atribut, misalnya pada tag <a>. Link/url target dituliskan dalam sebuah atribut. Contoh : <a href=http://usu.ac.id> Universitas Sumatera Utara </a>

    10

    Nilai atribut harus selalu ditulis diantara sepasang tanda petik. Umumnya digunakan tanda petik ganda, tetapi menggunakan tanda petik tunggal juga diijinkan. Dalam situasi tertentu, ketika nilai atribut tersebut mengandung tanda petik ganda maka diperlukan penggunaan tanda petik tunggal. Misalnya :

    name='Made "bagus" Wirautama'

    2.12.

    HTML EVENTS

    HTML menambahkan kemampuan untuk melakukan event yang akan dilakukan oleh browser, contohnya adalah javascript yang akan menjalankan event saat penggunan mengklik elemen. Berikut ini adalah atribut standar yang dapat disisipkan ke dalam HTML / XHTML elemen untuk mendefenisikan tindakan event.

    Tabel 2.7 Event di tag <body> dan <frameset>

    Atribut onload onunload script Script

    Nilai

    Keterangan Script berjalan ketika dokumen diload Script berjalan ketika dokumen tidak diload

    Tabel 2.8 Event di FORM

    Atribut onblur onchange onfocus onselect onreset Onsubmit Script Script Script Script Script Script

    Nilai

    Keterangan Script berjalan ketika ketika sebuah element tidak disorot lagi Script berjalan ketika ketika isi sebuah element berubah Script berjalan ketika sebuah elemen menjadi focus Script berjalan ketika sebuah elemen dipilih (diblok) Script berjalan ketika tombol reset diklik Script berjalan ketika tombol submit diklik

    Tabel 2.9 Event di mouse

    Atribut Onclick ondblclick Script Script

    Nilai

    Keterangan Script berjalan ketika tombol kiri mouse diklik pada suatu objek Script berjalan ketika tombol kiri mouse diklik dua kali pada suatu objek

    onmousedown onmouseup onmouseover

    Script Script Script

    Script berjalan ketika pemakai menekan tombol mouse Script berjalan ketika pemakai melepas tombol mouse Scrip berjalan ketika meninggalkan suatu objek

    11

    Contoh Penggunaan JavaScript


    <html> <head> <title>Menggunakan Event</title> <script language=javascript> function infoJam() { var waktu_sekarang = new Date(); var jam = waktu_sekarang.getHours(); var menit = waktu_sekarang.getMinutes(); var detik = waktu_sekarang.getSeconds(); var info_jam = Jam Sekarang: + jam + : + menit + : + detik; alert(info_jam); } </script> </head> <body onmousedown=infoJam()> <h1>Tes Alert</h1> </body> </html>

    2.13.

    HTML STYLES

    Style diperkenalkan pada HTML 4, sebagai pilihan dan cara baru untuk style elemen HTML. Dengan HTML style, style dapat ditambahkan ke elemen HTML secara langsung dengan menggunakan atribut style atau menggunakan style sheet yang terpisah (CSS file). Dalam HTML 4 ada beberapa tag dan atribut yang tidak akan didukung dalam versi HTML dan XHTML yang terbaru.

    Tabel 2.10 Tag dan Atribut yang harus dihindari

    Tag <center> <font> dan <basefont> <s> dan strike> <u> Atribut align bgcolor color

    Keterangan Mendefenisikan menengahkan konten Mendefenisikan font HTML Mendefenisikan strikethrought teks Mendefenisikan garis bawah Keterangan Mendefenisikan perataan teks Mendefenisikan warna latar belakang Mendefenisikan warna teks

    12

    Contoh penggunaan style:


    <html> <head> <title>Menggunakan style</title> </head> <body> <h1 style=text-align:center>Mario Teguh</h1> <p style:background-color:blue; font-family:arial; font-size:20px;> Jika orang berhati legam menyakiti hatimu, wajarlah jika engkau bersedih-hati, tetapi tetaplah berlaku baik. Itu yang menjadikanmu kekasih Tuhan dan mutiara di hati sesama. Besarnya penistaan yang tak kau ijinkan untuk merendahkan dirimu, adalah tanda tingginya keberserahanmu kepada Tuhan. Keburukan yang terjadi, tetapi yang menjadikanmu lebih baik, adalah sebetulnya kebaikan. Mario Teguh </p> </body> </html>

    2.14.

    HTML IMAGES

    Gambar bisa membuat dokumen HTML lebih bagus. Gambar tidak saja memperbagus dokumen tetapi juga mempunyai fungsi memperjelas. Gambar sering lebih bisa menyampaikan pesan daripada teks. Namun demikian penempatan gambar yang tidak sesuai dengan isi teks tentu akan menyulitkan pembaca. Sebelum menambahkan gambar ke dalam dokumen HTML, Anda perlu mengetahui pokok persoalannya terlebih dahulu. Dengan mengetahui masalah maka Anda dapat lebih baik dalam menentukan prioritas gambar yang harus ditampilkan.yang harus diketahui adalah:

    1. Ukuran file gambar 2. Beberapa search engine tidak bisa menampilkan gambar 3. Pengguna tidak memakai browser grafik/gambar 4. Gambar tidak selalu dikenal secara internasional 5. Warna gambar mungkin tidak ditampilkan seperti aslinya

    Ada beberapa macam format gambar, seperti PICT, GIF, TIFF, EPS, BMP, PCX, JPEG, dan sebagiannya. Namun demikian hanya beberapa format gambar saja yang sering digunakan dalam Web misalnya GIF dan JPEG. Untuk menempatkan gambar pada dokumen HTML sangat mudah, dengan menggunakan tag <IMG> beserta atribut SRC untuk menampilkan gambar.

    Contoh Penggunaan Tag IMG


    <html> <head> <title>Menggunakan IMG</title> </head> <body> <h1>Penggunaan Tag IMG</h1> <img src=logo_usu.gif> </body> </html>

    13

    Secara default, ketika Anda menyisipkan image inline dengan teks, teks ditampilkan rata bawah dengan gambar dan di sebelah kiri teks. Untuk melakukan pengaturan perataan ini menggunakan atribut ALIGN dalam tag <IMG>.

    Tabel 2.11 Nilai Atribut ALIGN pada Tag IMG

    Nilai top middle bottom left right

    Fungsi Meratakan teks dengan bagian atas gambar Meratakan teks dengan bagian tengah gambar Meratakan teks dengan bagian bawah teks Meletakkan gambar di sebelah kiri teks Meletakkan gambar di sebelah kanan teks

    Contoh Penggunaan Atribut ALIGN pada Tag IMG


    <html> <head> <title>Menggunakan Atribut ALIGN pada Tag IMG</title> </head> <body> <h1>Penggunaan Tag IMG</h1> <p><img src=logo_usu.gif align=top>Rata Atas</p> <p><img src=logo_usu.gif align=middle>Rata Tengah</p> <p><img src=logo_usu.gif align=bottom>Rata Bawah</p> <p><img src=logo_usu.gif align=left>Rata kiri</p> <p><img src=logo_usu.gif align=right>Rata kanan</p> </body> </html>

    Anda dapat mengatur ukuran tinggi dan lebar pada tag <IMG>, dengan cara menambahkan atribut HEIGHT dan WIDTH . kedua atribut ini mengatur ukuran gambar dengan ukuran pixel. Anda dapat menambahkan keterangan tambahan pada gambar yang ditampilkan secara inline. Jika penunjuk mouse diletakkan di atas gambar, maka teks keterangan akan ditampilkan. Gunakan atribut ALT dalam tag <IMG>. Gambar yang ditampilkan oleh browser tanpa border. Atribut BORDER memberikan suatu border atau batas pada suatu inline gambar tidak mempunyai border kecuali berfungsi sebagai link. Nilai untuk BORDER menggunakan satuan pixel.

    Contoh Penggunaan Atribut HEIGHT, WIDTH, ALT, dan BORDER pada Tag IMG
    <html> <head> <title>Menggunakan Atribut, HEIGHT, WIDTH, ALT, BORDER</title> </head> <body> <h1> Menggunakan Atribut, HEIGHT, WIDTH, ALT, BORDER </h1> <img src=logo_usu.gif weight=100px width=60px><br> <img src=logo_usu.gif alt=Logo USU><br> <img src=logo_usu.gif border=5> </body> </html>

    14

    LATIHAN

    Desain sebuah halaman website yang berisikan tulisan seperti di bawah ini:

    Secara umum dapat dikatakan bahwa e-government adalah sebuah system dari teknologi informasi yang memberikan kesempatan bagi masyarakat luas agar dapat mengakses segala informasi dan layanan yang dapat diberikan oleh pemerintah dengan cepat dan kesempatan untuk meningkatkan efisiensi dan efektifitas dari segala aspek pelaksanaan pemerintahan. Pada intinya egovernment adalah penggunaan teknologi informasi yang dapat

    meningkatkan hubungan antara pemerintah dan pihak-pihak lainnya termasuk terhadap masyarakat, bisnis dan unsur pemerintahan lainnya. Penggunaan teknologi informasi ini kemudian menghasilkan hubungan bentuk baru seperti: G2C (Government to Citizen), G2B (Government to Business Enterprises), B2G (Business to Government), G2G (inter-agency relationship) dan G2E (Government to Employees).

    Halaman tersebut telah menggunakan seluruh tag-tag utama yang berada di HTML HEAD Pada halaman tersebut juga telah menggunakan seluruh tag-tag yang berhubungan dengan HTML LINKS yang disesuaikan dengan seluruh informasi diatas. Gunakan style untuk mengatur seluruh tulisan diatas dengan ketentuan sebagai berikut: o o o o o

    Huruf: arial Font: 10 Text bold Justify align Seluruhnya berwarna hitam (#000000), khusus untuk link: berwarna #008000

    Letakkan sebuah image seperti pada contoh diatas (anda dapat menggunakan image apa saja) dengan ketentuan sebagai berikut: o o o

    Ukuran: tinggi: 150 px, lebar: 100 px Border: 3 px berwarna hitam Diletakkan di sudut kiri atas dengan jarak antara gambar dan tulisan sebesar 5 px

    15

    Anda mungkin juga menyukai