pengantar dasar pemrograman
advertisement
Pengenalan HTML STMIK PPKIA Pradnya Paramita Pemrograman berbasis Web Objectivitas Setelah menyelesaikan bab ini, anda diharapkan dapat: • Mengerti tag-tag dasar HTML • Membuat halaman web dengan HTML sederhana. PENELASAN UMUM • HTML standard bahasa yang digunakan untuk menampilkan document web. – Mengontrol tampilan dari web page dan contentnya. – Mempublikasikan document secara online sehingga bisa di akses. – Membuat online form yang bisa di gunakan untuk menangani pendaftaran, transaksi secara online. – Menambahkan object-object seperti image, audio, video dan juga java applet dalam document HTML. Tag – Tag HTML • Kalo pada bahasa pemrograman kita mengenal code, maka pada HTML kita mengenal yang namanya tag (Coment HTML). • Contoh tag html adalah <head>, <title>, <body>, <html>, <img>, dan lain-lain. • Tag html tidak bersifat case sensitive <body> sama dengan <BODY> Tag – Tag HTML Tanda tag HTML, memiliki syarat penulisan yaitu: • Tag HTML diapit dengan dua karakter kurung sudut ( < dan > ) • Tag HTML secara normal selalu berpasangan misal (<i>...</i>) • Tag pertama dalam suatu pasangan adalah tag awal, dan tag yang kedua merupakan tag akhir. • Jika dalam suatu tag terdapat tag lain, maka penulisan tag akhir tidak boleh bersilang dan harus berurutan. Misalnya <b><I>..Tebal dan Miring..</I></b> Tag Dasar HTML 1. HTML Tag yang mendefnisikan bahwa dokumen ini adalah dokumen HTML. Contoh Penulisannya <html> …. … </html> 2.HEAD - Tag yang ditulis setelah tag HTML -Untuk menuliskan keterangan tentang web yang akan ditampilkan Contoh Penulisannya : <head> ….. </head> Tag Dasar HTML 3. TITLE 4. BODY • Merupakan tag dalam head - Merupakan sesi utama dalam yang harus dituliskan untuk dokumen web memberikan -Semua isi dokumen akan judul/informasi pada caption ditampilkan di dalam browser browser web harus dituliskan • Tentang topik/judul dari dokumen web yg ditampilkan Contoh Penulisannya : dalam <body> browser informasi yang akan ditampilkan Contoh penulisannya : </body> <head> <title> Judul….. </title> </head> Struktur Dasar HTML Kepala <head> Homepage Tubuh <body> <Head> <Title> Judul Homepage </Title> </Head> <Body> Isi…Teks,Tabel,Audio, Video, dll. </Body> Struktur Tag (Elemet) HTML Contoh: <BODY BGCOLOR=red> BODY merupakan element, BGCOLOR(Background) merupakan atribut yang digunakan untuk memberikan suatu warna pada background HTML, red merupakan nilai Tag Body •Body : Mempunyai atribut Tag Body •Contoh Penulisannya •Hasilnya Tag Paragraf Paragraf <p> Setiap paragraf harus dimulai dengan tag <p> Akhir paragraf tidak diharuskan menulis </p> Setiap pergantian paragraf harus dimulai dg <p> Contoh Penulisannya : <body> <p align = “right”> isi tulisan paragraf pertama</p> </body> Paragraf mempunyai atribut Align dan mempunyai value : left untuk kiri, right untuk kanan, dan center untuk tengah, justify : rata kanan dan kiri Tag Break • Line Break <br> : Untuk memaksa berpindah baris, tidak berganti paragraf • Contoh penulisannya : • <body> • Selamat Datang<br>pada<br>Perkuliahan Pemrograman Internet 1 • </body> Tag Heading • • • • • • • • • • • • Heading : Tulisan ditampilkan dalam bentuk lebih besar dan ditebalkan Mempunyai 6 tingkat heading dalam HTML dari 1 s.d. 6 Contoh penulisannya : <body> <h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> <h4>Heading 4</h4> <h5>Heading 5</h5> <h6>Heading 6</h6> </body> Untuk pengaturan letak heading diberikan fasilitas attribut , heading mempunyai attribut sama dengan paragraph kecuali justify Tag Horizontal • • • • • • • • • • • • • Tag Horizontal ruler <HR> untuk membuat garis mendatar (penggaris) , sebuah garis yang bisa disisipkan dalam dokumen web, pemisah antar bagian atau paragraf, Contoh penulisannya : <body> <p>Selamat Datang </p> <hr> <p>pada perkuliahan PI 1 </p> </body> Tag ini juga mempunyai atttribut yaitu align perataan (left, center, right), size untuk mengatur ketebalan garis (dalam pixel), attribute width untuk mengatur lebarnya garis (dalam persen atau pixel), tag ini tidak mempunyai penutup Contoh penulisannya : <body> <p>Selamat Datang </p> <hr size = 25 , align = “center”, width = “75%”> <p>pada perkuliahan PI 1 </p> </body> Tag Performat • Tag Performat <pre> </pre>membuat tampilan dokumen HTML pada browser sama dengan tampilan pada teks editor • Contoh penulisannya Tag • Tag Bold <b>…</b>: untuk menampilkan huruf tebal • Italic<i>…</i> : untuk menampilkan huruf miring • Underline <u>…</u> : menampilkan garis bawah pada teks • <tt>…</tt> : untuk menampilkan huruf seperti mesin ketik • <strike> : menampilkan garis horizontal pada tengah huruf • Subscript <sub> : menampilkan subscript (lebih bawah) • Superscript <sup> : menampilkan super script (lebih atas) • Contoh Penulisannya : Tag List • List Item (LI) : digunakan untuk mengelompokkan data baik berurutan (ordered list) maupun yang tidak berurutan (unordered list) • 1. Ordered List (Numbering) • 2. Unordered List (Bullet) • Contoh Penulisannya : Tag Komentar • untuk mempermudah pembacaan kembali kode – kode HTML, kadang – kadang ditambahkan komentar ke dalam sebuah dokumen, agar komentar tidak dapat dibaca oleh browser, maka harus digunakan tanda khusus , yaitu <!—dan diakhiri dengan tanda --> • Cara Penulisannya TUGAS • Buatlah Sebuah Cerita tentang Biografi Anda Sendiri berupa narasi, dengan Ketentuan : • 1. memakai rangkaian tag – tag HTML yang sudah dipaparkan • 2. minimal 3 paragraf • 3. dalam 1 paragraf minimal 50 Kata
