Presentasi sedang didownload. Silahkan tunggu

Presentasi sedang didownload. Silahkan tunggu

STMIK PPKIA Pradnya Paramita Pemrograman berbasis Web

Presentasi serupa


Presentasi berjudul: "STMIK PPKIA Pradnya Paramita Pemrograman berbasis Web"— Transcript presentasi:

1 STMIK PPKIA Pradnya Paramita Pemrograman berbasis Web
Pengenalan HTML STMIK PPKIA Pradnya Paramita Pemrograman berbasis Web

2 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.

3 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

4 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>

5 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>

6 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

7 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>

8 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>

9 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

10 Tag Body Body : Mempunyai atribut

11 Tag Body Contoh Penulisannya Hasilnya

12 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

13 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>

14 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

15 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%”>

16 Tag Performat Tag Performat <pre> </pre>membuat tampilan dokumen HTML pada browser sama dengan tampilan pada teks editor Contoh penulisannya

17 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)

18 Contoh Penulisannya :

19 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)

20 Contoh Penulisannya :

21

22 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

23 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


Download ppt "STMIK PPKIA Pradnya Paramita Pemrograman berbasis Web"

Presentasi serupa


Iklan oleh Google