2 Pengenalan HTML
advertisement
MODUL KULIAH PROGRAM KULIAH KARYAWAN & PROFESIONAL STTI ITECH Mata kuliah Aplikasi Berbasis Web ( 3 sks ) Semester Kelas PKKP Dosen Jefri Rahmadian S.Kom Pertemuan : 2 (Dua) Waktu Modul 2 (Dua) Topik Pengenala HTML Sub Topik Dasar-dasar Penulisan HTML Materi Dokumen HTML Elemen HTML Atribut HTML Heading HTML Tujuan : Sabtu,…….. 2012 Mahasiswa memahami tentang HTML dan mengetahui penulisan HTML sebagai dasar pembuatan web Apa itu HTML? HTML adalah bahasa untuk mendeskripsikan halaman web. HTML singkatan Hyper Text Markup Language HTML bukan bahasa pemrograman, ini adalah bahasa markup Sebuah bahasa markup adalah serangkaian tag markup HTML menggunakan tag markup untuk menjelaskan halaman web Tag HTML Tag markup HTML biasanya disebut tag HTML Tag HTML adalah kata kunci dikelilingi oleh tanda kurung siku seperti <html> Tag HTML biasanya datang dalam pasangan seperti <b> dan </ b> Tag pertama dalam pasangan adalah tag pembuka, tag kedua adalah tag akhir Mulai dan tag akhir juga disebut tag pembuka dan tag penutup Dokumen HTML = Halaman Web dokumen HTML mendeskripsikan halaman web dokumen HTML berisi tag HTML dan teks biasa dokumen HTML juga disebut halaman web Tujuan dari sebuah web browser (seperti Internet Explorer atau Firefox) adalah untuk membaca dokumen HTML dan menampilkannya sebagai halaman web. Browser tidak menampilkan tag HTML, tapi menggunakan tag untuk menafsirkan isi halaman: <html> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html> Penjelasan dari contoh diatasa adalah Teks antara <html> dan </ html> menggambarkan halaman web Teks antara <body> dan </ body> adalah isi halaman yang terlihat Teks antara <h1> dan </ h1> menampilkan sebagai Heading Teks antara <p> dan </ p> ditampilkan sebagai sebuah paragraf Mengedit HTML HTML dapat ditulis dan diedit menggunakan berbagai editor seperti Dreamweaver dan Visual Studio. Namun, bisa juga menggunakan editor teks biasa (seperti Notepad) untuk mengedit HTML. Menggunakan editor teks biasa adalah cara terbaik untuk mempelajari HTML. Extension File HTM atau File HTML Bila Anda menyimpan file HTML, Anda dapat menggunakan baik htm atau ekstensi file. Html. Tidak ada perbedaan, itu sepenuhnya terserah Anda. Elemen HTML Elemen HTML adalah segalanya dari tag awal sampai akhir tag: Start tag * Kandungan unsur End tag * <p> Ini adalah paragraf </ P> <a href="default.htm"> Ini adalah sebuah link </ A> <br /> * Tag awal adalah sering disebut tag pembuka . Tag akhir ini sering disebut tag penutup . Elemen Sintax HTML Elemen HTML dimulai dengan start tag / opening tag Elemen HTML diakhiri dengan end tag / Closing tag Semua Isi elemen adalah antara tag awal dan tag akhir Elemen HTML Bersarang Kebanyakan HTML elemen dapat bersarang (dapat berisi elemen-elemen lain HTML). dokumen HTML terdiri dari elemen HTML bersarang Contoh dokumen HTML : <html> <body> <p>This is my first paragraph.</p> </body> </html> Contoh di atas mengandung 3 elemen HTML. Penjelasan Contoh HTML Unsur <p>: <p> Ini adalah paragraf pertama saya.</p> Elemen <p> mendefinisikan sebuah paragraf dalam dokumen HTML. elemen ini memiliki <p> tag awal dan tag akhir </p>. Isi elemen: Ini adalah paragraf pertama saya. Unsur <body>: <body> <p> Ini adalah paragraf pertama saya.</p> </body> Unsur <body> mendefinisikan tubuh dokumen HTML. elemen ini memiliki <body> tag awal dan tag akhir </ body>. Isi elemen adalah elemen lain HTML Unsur <html>: <html> <body> <p>This is my first paragraph.</p> </body> </html> Unsur <html> mendefinisikan dokumen HTML secara keseluruhan. elemen ini memiliki <html> tag pembuka dan tag penutup </ html>. Isi elemen elemen HTML lain (elemen body). Jangan Lupakan Tag Akhir Beberapa elemen HTML mungkin muncul dengan benar bahkan jika Anda lupa tag penutup: <p>This is a paragraph <p>This is a paragraph Contoh di atas bekerja di hampir semua browser, karena tag penutup dianggap opsional. Jangan bergantung pada ini. Banyak elemen HTML akan menghasilkan hasil yang tidak diharapkan dan / atau kesalahan jika Anda lupa tag akhir. Elemen HTML Kosong elemen HTML dengan tanpa konten disebut elemen kosong. <br> merupakan elemen kosong tanpa tag penutup (tag <br> mendefinisikan istirahat baris). Tip HTML : Gunakan huruf kecil untuk Tag tag HTML tidak case sensitif : <P> punya arti yang sama dengan <p>. Banyak situs web menggunakan tag HTML huruf besar. Tag disarankan menggunakan huruf kecil karena World Wide Web Consortium (W3C) merekomendasikan huruf kecil dalam HTML 4, dan tuntutan tag huruf kecil dalam XHTML. XHTML merupakan singkatan dari eXtensible Hyper Text Markup Language. World Wide Web Consortium (W3C) adalah suatu konsorsium yang bekerja untuk mengembangkan standar-standar untuk World Wide Web. Spesifikasi teknologi-teknologi utama yang dipakai sebagai basis utama web, seperti URL (Uniform Resource Locator), HTTP (Hypertext Transfer Protocol), dan HTML (HyperText Markup Language) dikembangkan dan diatur oleh badan ini. Atribut HTML Elemen HTML dapat memiliki atribut Atribut memberikan informasi tambahan tentang suatu elemen Atribut selalu ditentukan dalam start tag Atribut datang dalam pasangan nama / nilai seperti: name = "value" Contoh Atribut : Link HTML didefinisikan dengan tag <a>. Alamat link ditetapkan dalam atribut href : Contoh penulisan : <html> <body> <a href=" http://stti.i-tech.ac.id"> This is a link</a> </body> </html> Selalu beri tanda kutip pada Nilai Atribut Nilai Atribut harus selalu diapit tanda kutip. tanda kutip ganda yang paling umum, namun tanda kutip single style juga diperbolehkan. Dalam beberapa situasi, ketika nilai atribut itu sendiri berisi tanda kutip, perlu untuk menggunakan tanda kutip tunggal : name = 'John "Shotgun" Nelson' Contoh mengganti atribut warna <html> <body text="red"> <p>This is my first paragraph.</p> </body> </html> Referensi Atribut HTML Daftar latribut untuk setiap elemen HTML : Tag Deskripsi <!--...--> Mendefinisikan komentar <! DOCTYPE> Mendefinisikan jenis dokumen <a> Mendefinisikan anchor <abbr> Mendefinisikan singkatan <acronym> Mendefinisikan singkatan <address> Mendefinisikan informasi kontak untuk penulis / pemilik dokumen <area /> Mendefinisikan area dalam peta-image <b> Mendefinisikan teks tebal <base /> Mendefinisikan sebuah alamat default atau target standar untuk semua link pada halaman <bdo> Mendefinisikan arah teks <big> Mendefinisikan teks besar <blockquote> Mendefinisikan sebuah kutipan panjang <body> Mendefinisikan dokumen tubuh <br /> Mendefinisikan sebuah line break single <button> Mendefinisikan tombol push <caption> Mendefinisikan sebuah judul tabel <cite> Mendefinisikan kutipan <code> Mendefinisikan kode teks komputer <col /> Mendefinisikan nilai atribut untuk satu atau lebih kolom dalam tabel <colgroup> Mendefinisikan kelompok kolom dalam tabel untuk pemformatan <dd> Mendefinisikan deskripsi istilah dalam daftar definisi <del> Mendefinisikan teks yang dihapus <dfn> Mendefinisikan sebuah istilah definisi <div> Mendefinisikan sebuah bagian dalam dokumen <dl> Mendefinisikan sebuah daftar definisi <dt> Mendefinisikan sebuah istilah (item) dalam daftar definisi <em> Mendefinisikan teks menekankan <fieldset> Mendefinisikan sebuah perbatasan sekitar elemen dalam bentuk <form> Mendefinisikan HTML formulir untuk input pengguna <FRAME /> Mendefinisikan jendela (bingkai) dalam frameset <frameset> Mendefinisikan suatu set frame <h1> untuk <h6> Mendefinisikan HTML pos <head> Mendefinisikan informasi tentang dokumen <hr /> Mendefinisikan garis horizontal <html> Mendefinisikan HTML dokumen <i> Mendefinisikan teks miring <iframe> Mendefinisikan frame inline <img /> Mendefinisikan gambar <input /> Mendefinisikan input kontrol <ins> Mendefinisikan teks yang disisipkan <kbd> Mendefinisikan teks keyboard <label> Mendefinisikan label untuk suatu elemen input <legend> Mendefinisikan keterangan untuk elemen fieldset <li> Mendefinisikan item daftar <link /> Mendefinisikan hubungan antara dokumen dan sumber eksternal <map> Mendefinisikan gambar-map <meta /> Mendefinisikan metadata tentang dokumen HTML <noframes> Mendefinisikan kandungan alternatif untuk pengguna yang tidak mendukung frame <noscript> Mendefinisikan kandungan alternatif untuk pengguna yang tidak mendukung skrip-skrip sisi klien <object> Mendefinisikan sebuah objek tertanam <ol> Mendefinisikan ordered list <optgroup> Mendefinisikan kelompok opsi terkait dalam daftar pilih <option> Mendefinisikan pilihan dalam daftar pilih <p> Mendefinisikan paragraf <param /> Mendefinisikan parameter untuk objek <pre> Mendefinisikan teks terformat <q> Mendefinisikan kutipan pendek <samp> Mendefinisikan sampel kode komputer <script> Mendefinisikan sebuah script sisi klien <select> Mendefinisikan daftar pilih (daftar drop-down) <small> Mendefinisikan teks kecil <span> Mendefinisikan sebuah bagian dalam dokumen <strong> Mendefinisikan teks yang kuat <style> Mendefinisikan gaya informasi untuk dokumen <sub> Mendefinisikan teks subscript <sup> Mendefinisikan teks superscripted <table> Mendefinisikan tabel <tbody> Group isi tubuh dalam tabel <td> Mendefinisikan sebuah sel dalam tabel <textarea> Mendefinisikan teks multi-line input kontrol <tfoot> Groups isi footer dalam sebuah tabel <th> Mendefinisikan sebuah sel header dalam sebuah tabel <thead> Group isi header dalam sebuah tabel <title> Mendefinisikan judul dokumen <tr> Mendefinisikan sebuah baris dalam tabel <tt> Mendefinisikan teks teletype <ul> Mendefinisikan unordered list <var> Mendefinisikan bagian variabel teks HTML Heading Pentingnya Heading Gunakan HTML judul untuk judul saja. Jangan gunakan judul untuk membuat teks Besar atau Tebal .Mesin pencari menggunakan judul Anda ke indeks struktur dan isi dari halaman web Anda. Karena pengguna dapat menelusuri halaman yang ada dengan judul tersebut, adalah penting untuk menggunakan Heading untuk menunjukkan struktur dokumen. Heading H1 digunakan sebagai judul utama, diikuti dengan judul H2, demikian seterusnya. Heading atau pos HTML didefinisikan dengan tag <h1> sampai <h6>. Contoh Penulisan : <h1>This is a heading</h1> <h2>This is a heading</h2> <h3>This is a heading</h3> Contoh Penggunaan <html> <body> <h1>This is heading 1</h1> <h2>This is heading 2</h2> <h3>This is heading 3</h3> <h4>This is heading 4</h4> <h5>This is heading 5</h5> <h6>This is heading 6</h6> </body> </html> HTML Lines Tag <hr /> menciptakan garis horizontal dalam sebuah halaman HTML. Unsur hr dapat digunakan untuk konten terpisah: Contoh Penulisan : <p>This is a paragraph</p> <hr /> <p>This is a paragraph</p> <hr /> <p>This is a paragraph</p> Contoh Penggunaan : <html> <body> <p>The hr tag defines a horizontal rule:</p> <hr /> <p>This is a paragraph</p> <hr /> <p>This is a paragraph</p> <hr /> <p>This is a paragraph</p> </body> </html> HTML Paragraf paragraf HTML didefinisikan dengan tag <p>. Contoh Penulisan : <p>This is a paragraph.</p> <p>This is another paragraph.</p> Contoh Penggunaan <html> <body> <p>This is a paragraph.</p> <p>This is a paragraph.</p> <p>This is a paragraph.</p> </body> </html> HTML Line Breaks Gunakan tag <br/> jika ingin mebuat baris kosong (baris baru) tanpa perlu memulai sebuah paragraf baru Contoh Penulisan <p>ini adalah<br />a para<br />graph dengan line breaks</p> Contoh Penggunaan <html> <body> <p>ini adalah<br />a para<br />graph dengan line breaks</p> </body> </html> HTML Output Dengan HTML, Anda tidak dapat mengubah output dengan menambahkan spasi ekstra atau baris ekstra dalam kode HTML Anda. Browser akan menghapus spasi ekstra dan garis ekstra saat halaman ditampilkan. Setiap jumlah baris dihitung sebagai satu baris, dan sejumlah ruang dihitung sebagai satu spasi. Contoh : <html> <body> <p> My Bonnie lies over the ocean. My Bonnie lies over the sea. My Bonnie lies over the ocean. Oh, bring back my Bonnie to me. </p> <p>Note : tampilan browser tidak menampilkan seperti tertulis!</p> </body> </html> Untuk menampilkan teks yang apa adanya adalah dengan cara menggunakan atribut <pre> Tag <pre> mendefinisikan Preformatted text atau teks terformat. Teks dalam elemen <pre> ditampilkan dalam font fixed-width (biasanya Courier), dan menjaga baik spasi dan ganti baris. Contoh : <html> <body> <pre> Ini bentuk penulisan preformated text apapun bentuknya tulisan ini akan ditampilkan pada web browser seperti apa adanya, alias yang ditulis </pre> </body> </html> Memformat Teks HTML HTML menggunakan tag seperti <b> dan <i> untuk memformat output, seperti tebal atau teks miring. Tag ini disebut format HTML tag Contoh Penulisan : <html> <body> <p><b>This text is bold</b></p> <p><strong>This text is strong</strong></p> <p><big>This text is big</big></p> <p><i>This text is italic</i></p> <p><em>This text is emphasized</em></p> <p><code>This is computer output</code></p> <p>This is<sub> subscript</sub> and <sup>superscript</sup></p> </body> </html> Tag Deskripsi <b> Mendefinisikan teks tebal <big> Mendefinisikan teks besar <em> Mendefinisikan teks penekanan <i> Mendefinisikan teks miring <small> Mendefinisikan teks kecil <strong> Mendefinisikan teks yang kuat <sub> Mendefinisikan teks subscript <sup> Mendefinisikan teks superscripted <ins> Mendefinisikan teks yang disisipkan <del> Mendefinisikan teks yang dihapus HTML Link Link yang ditemukan di hampir semua halaman web. Link memungkinkan pengguna untuk mengklik sendiri agar bisa menuju dari satu halaman ke halaman yang lain. link pada HTML didefinisikan dengan tag <a>. HTML Hyperlink (Link) Sebuah hyperlink (atau link) adalah kata, kelompok kata, atau gambar yang dapat Anda klik untuk melompat ke dokumen baru atau bagian baru di dalam dokumen saat ini. Bila Anda memindahkan kursor di atas link di halaman Web, panah akan berubah menjadi tangan kecil. Link yang ditentukan dalam HTML menggunakan tag <a>. Tag <a> dapat digunakan dalam dua cara: 1. Untuk membuat link ke dokumen lain, dengan menggunakan atribut href 2. Untuk membuat bookmark dalam dokumen, dengan menggunakan atribut nama Contoh Penulisan : <a href=" http://stti.i-tech.ac.id/">Kunjungi Link Ini</a> Contoh Penggunaan <html> <body> <a href=" http://stti.i-tech.ac.id/"> Kunjungi Link Ini</a> </body> </html>
