PENGENALAN HTML - 1 A. Pendahuluan HTML (Hyper Text Markup Language) sebagai bahasa pemrograman dasar dan wajib dikuasai oleh seorang webmaster. HTML terdiri dari tag-tag yang fungsinya untuk membuat dokumen menjadi dapat dibaca oleh browser. HTML merupakan skrip dimana kita bisa menampilkan informasi dan daya kreasi kita lewat internet. HTML sendiri adalah suatu dokumen teks biasa yang mudah untuk dimengerti dibanding bahasa pemrograman yang lainnya dan karena bentuknya itu maka HTML dapat dibaca oleh platform yang berlainan seperti windows, UNIX dan lain-lain. Walaupun berbentuk dokumen teks biasa, HTML memiliki perbedaan dengan dokumen lain seperti dokumen word, misalnya. Perbedaan yang paling mencolok adalah pada dokumen word, banyaknya karakter akan terbatasi oleh besarnya kertas sehingga jika teks yang ada didalamnya banyak, ia akan terdiri dari banyak halaman pula. Sedangkan HTML tak memiliki batasan teks sehingga tak ada pemisahan halaman 1,2 dan seterusnya. C. Tag-Tag Dasar HTML Dokumen HTML bisa di bagi mejadi tiga bagian utama: 1) HTML Setiap dokumen HTML harus di awali dan di tutup dengan tag HTML Tag HTML memberi tahu browser bahawa yang di dalam kedua tag tersebut adalah dokumen HTML. 2) HEAD Bagian header dari dokumen HTML di apit oleh tag <HEAD></HEAD> di dalam bagian ini biasanya dimuat tag TITLE yang menampilkan judul dari halaman pada titlenya browser.selain itu Bookmark juga megunakan tag TITLE untuk memberi mark suatu web site. Browser menyimpan title sebagai 1
bookmark dan juga untuk keperluan pencarian (searching) biasanya title di gunakan sebagai keyword. Header juga memuat tag META yang biasanya di gunakan untuk menentukan informasi tertentu mengenai dokumen HTML, anda bisa menentukan author name, keywords, dan lainya pada tag META. Contoh: <META name ="Pengarang" Contents="Batik Indonesia"> 3) BODY Dokumen body di gunakan untuk menampilkan text, image link dan semua yang akan di tampilkan pada web page.untuk lebih lanjutnya perhatikan skema elemen di bawah ini. <html> <head> <title> </head> <body> </body> </html> </title> Keterangan : - Dokumen HTML selalu diawali dengan tag pembuka <html> dan diakhiri dengan tag penutup </html> - Pada elemen head <head></head>, anda dapat memasukan kode-kode untuk menuliskan keterangan tentang dokumen HTML. - Elemen body <body></body> berisi tag-tag untuk isi atau layout tampilan situs anda. Command / perintah HTML disebut TAG, TAG digunakan untuk menentukan tampilan dari dokumen HTML. <Begin TAG > </End TAG> 2
Contoh: Setiap dokumen HTML di awali dan di akhiri dengan tag HTML. <HTML> </HTML> Tag tidak case sensitive, jadi anda bisa gunakan <HTML> atau <html>, keduanya akan menghasilkan output yang sama. Bentuk dari tag HTML sebagai berikut : <ELEMENT ATTRIBUTE = VALUE > Element - nama tag Attribute - atribut dari tag Value - nilai dari atribut. Contoh: <BODY bgcolor = lavender > BODY merupakan element, BGCOLOR(BackgroundColor) merupakan atribut yang memiliki nilai lavender. Menuliskan suatu komentar pada dokumen HTML seperti nama pengarang keterangan elemen dan tag dan lain-lain. Keterangan ini akan diabaikan oleh browser. Contoh: <!--komentar program di sini--> Untuk memulai bekerja dengan HTML anda bisa gunakan editor Notepad++ atau editor lainya. Caranya: 1. Ketikkan tag-tag berikut di notepad++ 3
2. Simpan dengan nama file latihan1.html dalam drive C:/XAMPP/HTDOCS/(FOLDER_ANDA) 3. Buka dengan browser dan ketikkan http://localhost/(folder_anda)/ maka outputnya akan sebagai berikut : C. Format Teks HTML Break Tag <BR> di gunakan untuk memulai baris baru pada dokumen HTML. Contoh: 4
Font Dengan tag <FONT> anda bisa menentukan format tampilan font dalam dokumen HTML seperti color, size, style dan lainya. Contoh: 5
6
Color Color merupakan atribut yang bisa ditambahkan pada beberapa elemen seperti body, font, link dan lainya. Color dibagi dalam tiga kategori warna primer yaitu red, green dan blue. Masing-masing color didefinisikan dalam dua digit hexadecimal number. #RRGGBB Physical Formatting 7
Logical Formatting D. Elemen-Elemen Dasar HTML Block Level Element Block level element yang sering digunakan ialah Heading (H1 sampai H6) Contoh: 8
Paragraf (P) Contoh: <html> <head> <title>formating Paragraf</title> </head> <body> <h3>puisi Ceria</h3> <p> Mawar berwarna merah, bibir kamu juga merah, bibir kamu semerah mawar </p> <h2>puisi sedih</h2> <p> melati harum baunya, kalau nggak wangi percuma namanya</p> </body> </html> Alignment Align atribut digunakan untuk menentukan perataan object dalam dokumen HTML baik berupa text, object, image, paragraph, division dan lain-lain. 9
List Item(LI) List item digunakan untuk mengelompokkan data baik berurutan (ordered list) maupun yang tidak berurutan (unordered list). Contoh: Kita mau mengelompokkan data-data berikut : Pisang Melati Jambu Mawar Anggrek Apel Anggur Dapat kita kelompokkan ke dalam dua kelompok: Buah-buahan : o Pisang o Jambu o Apel o Anggur Bunga : 1. Melati 2. Mawar 3. Angrek 10
Ada dua macam list yang umum dapat anda tambahkan ke dokumen HTML: 1. Unordered List (Bullet) : Contoh : <html> <head> <title>unordered List </title> </head> <body> <p>shedule for HTML Course</p> <ul> <li>sunday</li> <li>monday</li> <li>tuesday</li> <li>wednesday</li> </ul> </body> </html> Tag Attribute Value Description 2. Ordered List (Numbering) Contoh: 11
<html> <head> <title>ordered List</title> </head> <body> <P>Shedule for HTML Course</P> <ol start="1" type="i"> <li>sunday</li> <ol type="a"> <li>introduction to HTML</li> <li>creating List</li> </ol> <li>monday</li> <ol type="a"> <li>creating table</li> <li>inserting Image</li> </ol> <li>tuesday</li> <ol type="i"> <li>creating Link</li> <li>preparing Website</li> </ol> <li>wednesday</li> </ol> </body> </html> 12
Tag Attribute Value Description 13
E. Link HTML Anchor Anchor tag <A> untuk menentukan hyperlink dalam dokumen HTML. HREF properti digunakan untuk menentukan tujuan dari hyperlink tersebut. Ada beberapa macam hubungan antara satu form dengan obyek yang lain, hubungan-hubungan itu meliputi : a. Hubungan web dengan halaman lain / situs lain b. Hubungan web dengan email c. Hubungan web dengan file d. Hubungan web dengan gambar e. Hubungan Gambar dengan web atau email atau link yang lain f. Link ke Dokumen Lain g. Link ke Section tertentu dalam Dokumen h. Link Ke bagian tertentu Dokumen Lain Contoh-contoh a) Hubungan web dengan halaman atau situs lain <a href="latihan1.html">contoh_link</a> Pada tampilan adalah sebagai berikut : Contoh_link <a href="http://www.google.com ">www.google.com </a> <a href="../latihan/latihan1.html">contoh_link</a> 14
pada tampilan akan muncul sebagai berikut: www.google.com b) Hubungan web dengan email <a href="mailto:d5yanti@yahoo.com">d5yanti@yahoo.com</a> Pada Tampilan akan muncul sebagai berikut d5yanti@yahoo.com Jika aplikasi itu di klik maka akan mengarah ke email editor yang ada. c) Hubungan web dengan file <a href=" dki_kirim.zip ">File</a> Tampilan di browser adalah sebagai berikut : File Jika diklik akan muncul d) Hubungan web dengan gambar <a href="index.1.jpg">gambar</a> Atau yang tampak di browser adalah 15
Gambar Dan jika link ini di klik maka akan menuju ke halaman yang memuat gambar tersebut. e) Hubungan Gambar dengan web atau email atau link yang lain Sama halnya dengan hubungan link yang lain, perintah script dari link ini contohnya <a href="latihan1.html"> <img border="0" src="/index_r1_c1.png" width="166" height="108"></a> f) Link ke Dokumen Lain Misalkan ada dua dokumen html link1.htm dan link2.htm untuk membuat link dari link1.htm ke link2.htm : Link1.htm Link2.htm 16
g) Link ke Section tertentu dalam Dokumen Untuk membuat link ke section tertentu dalam satu dokumen digunakan property name untuk membuat nama tujuan dari link. Syntax name anchor: untuk membuat link ke nama : contoh: link3.htm 17
h) Link Ke bagian tertentu Dokumen Lain Untuk membuat link ke bagian tertentu dokumen lain anda bisa gunakan 18
anchor name di dokumen yang menjadi tujuan hyperlink. <a href= http://www.google.com target= _blank > www.google.com </a> F. Image HTML 1. Format Image Ada banyak format image, tetapi ada tiga jenis format yang paling sering digunakan : o GIF (Graphical Interchange Format) (.GIF) o JPEG (Joint Photographic Expert Image) (.JPG) o PNG (Portable Network Graphics) 2. Insert Image ke Dokumen Tag IMG di gunakan untuk meng-insertkan image ke dokumen HTML. Syntax-nya: Attribute Value Description 19
<html> <head> <title> Working with Image </title> </head> <body> <body> <p><img src="dog.gif" height="100" width="100"> Default alignment at the bottom</p> <p><img src="dog.gif" height="100" width="100" align="top">aligned at Top</p> <p><img src="dog.gif" height="100" width="100" align="middle">aligned at Middle</p> </body> </html> 3. Image Map Anda bisa menggunakan image yang ada pada website anda untuk membuat image map. Image map yaitu suatu area pada image yang bisa kita beri hyperlink area ini biasanya disebut hot spots. Coordinat dari hotspot ditentukan 20
menggunakan bidang geometry seperti rectangle, polygon dan lainya. Coordinat dari object relatif terhadap pojok kirai atas image. 4. Image Background 21
Untuk menyertakan suatu gambar sebgai latar belakang, anda bisa menggunakan atribut background pada tag <img>. Contoh : <body background = NamaFile Gambar > Contoh kode HTML yang menggunakan gambar latar belakang : <html> <head> <title> Latar Belakang Gambar </title> </head> <body background= images/back.gif > </body> </html> 5. Image Text Adakalanya pemakai mematikan fitur untuk mematikan penampilan gambar, ada kemungkinan pula pemakai menggunakan browser yang tidak mendukung gambar. Untuk mengatasi keadaan seperti itu, anda bisa menyediakan teks alternative sebagai pengganti gambar. Bisa dilakukan dengan menggunakan atribut ALT pada tag <img>. Sebagai contoh : <html> <head> <title>pemakaian ALT</title> </head> <body background= images/back.gif > <img src = images/logo.jpg alt = (gambar logo) align = middle > </body> </html> Pada kode diatas : Alt = (gambar logo) Browser tidak menampilkan gambar, maka tulisan (gambar logo) akan ditampilkan sebagai pengganti gambar. 6. Image Size Anda bisa mengaturnya melalui atribut pada tag <img> yang bernama HEIGHT dan WIDTH. 22
- HEIGHT untuk mengatur tinggi gambar. - WIDTH untuk mengatur lebar gambar. Dalam hal ini yang digunakan pada kedua atribut berupa nilai dansatuan pixel. Contoh dapat dilihat pada kode berikut : <html> <head> <title>mengatur ukuran gambar</title> </head> <body> <img src = /images/logo.jpg > <br> <img src = /images/logo.jpg height = 200 width = 150 > <br> <img src = /images/logo.jpg height = 100 width = 50 > </body> </html> ---0o0--- 23