STMIK PPKIA Pradnya Paramita Pemrograman berbasis Web Pengenalan HTML STMIK PPKIA Pradnya Paramita Pemrograman berbasis Web
Setelah menyelesaikan bab ini, anda diharapkan dapat: 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
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 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> 6
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>
Isi…Teks,Tabel,Audio, Video, dll. Struktur Dasar HTML Homepage Kepala <head> 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> <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 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