STMIK PPKIA Pradnya Paramita Pemrograman berbasis Web 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. 3
Penamaan Dokumen HTML Tidak ada aturan baku untuk penamaan dokumen HTML. File dokumen yang mempunyai ekstensi .htm atau .html maka akan dianggap file dokumen HTML Contoh : latih.htm = latih.html
Kerangka Dokumen HTML <html> <!—tag untuk memulai dokumen HTML--> <!—Bagian Header - -> <head> <title> Judul halaman </title> </head> <!—Bagian body--> <body> Informasi yang akan ditampilkan pada web browser harus ditulis dalam bagian ini </body> </html> <!—tag untuk memulai dokumen HTML--> Head body
Membuat Dokumen HTML Jalankan Aplikasi text Editor Tuliskan Kode html yang akan di keluarkan di browser Simpan dokumen dengan ekstensi .htm atau .html Buka file tersebut melalui browser atau running langsung lewat text editornya
Tag HTML Aturan pemakaian Tag : Tag HTML diapit dengan dua karakter sudut (< dan>) Tag HTML tidak case sensitive Tag html umumnya selalu berpasangan. Namun ada tag yang tidak berpasangan Tag bersarang
Atribut Tag Atribut tag harus ditulis di dalam tag bersangkutan Contoh : < body bgColor= “#fffeee” alink=“#cccccc”> Kerangka : <element (nama tag) atribut1=”value1” atribut2=”value2” …> atribut element value
I love taking my dog for a walk. Elemen bersarang parent child <p>I <em>love</em> taking my dog for a walk.</p> I love taking my dog for a walk.
Tag Umum HTML 2.HEAD 1. HTML - Tag yang ditulis setelah tag 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> 10
Tag Dasar HTML 3. TITLE 4. BODY Merupakan tag dalam head yang harus dituliskan untuk memberikan judul/informasi pada caption browser web Tentang topik/judul dari dokumen web yg ditampilkan dalam browser Contoh penulisannya : <head> <title> Judul….. </title> </head> 4. BODY - Merupakan sesi utama dalam dokumen web Semua isi dokumen akan ditampilkan di dalam browser harus dituliskan Contoh Penulisannya : <body> informasi yang akan ditampilkan </body>
Tag Body Body : Mempunyai atribut
Tag Body Contoh Penulisannya Hasilnya
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 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 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> <hr size = 25 , align = “center”, width = “75%”>
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 <strong> Italic<i>…</i> : untuk menampilkan huruf miring <em> 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) <small>
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
Karakter khusus pada HTML SPECIAL CHARACTER DESCRIPTION ENTITY NAME CODE © Copyright © © $ Dollar Sign $ $ % Percent Sign % % & Ampersand & &