www.bambangherlandi.web.id BELAJAR HTML Hyper Text Markup Language 1
HTML INTRODUCTION HTML Example <!DOCTYPE html> <html> <body> <h1>my First Heading</h1> <p>my first paragraph.</p> </body> </html> 2
EXAMPLE EXPLAINED DOCTYPE merupakan deklarasi mendefinisikan tipe dokumen Teks antara <html> and </html> menjelaskan halaman web Teks antara <body> and </body> adalah isi halaman yang terlihat Teks antara <h1> and </h1> ditampilkan sebagai judul Teks antara <p> and </p> ditampilkan sebagai paragraf KETERANGAN: <!DOCTYPE html> dideklarasikan pada doctype untuk HTML5. 3
WHAT IS HTML? HTML adalah bahasa untuk mendeskripsikan halaman web HTML singkatan dari Hyper Text Markup Language HTML adalah bahasa pengkodean Sebuah bahasa kode adalah seperangkat tag kode Tags menggambarkan isi dokumen Dokumen HTML berisi tag HTML dan teks biasa Dokumen HTML juga disebut halaman web 4
HTML TAGS HTML tag markup biasanya disebut tag HTML Tag HTML adalah kata kunci (nama tag) dikelilingi oleh kurung sudut seperti <html> Tag HTML biasanya datang dalam pasangan seperti <b> dan </ b> Tag pertama dalam pasangan adalah tag awal, tag kedua adalah tag akhir Tag akhir ditulis seperti tag awal, dengan garis miring sebelum nama tag Mulai dan tag akhir juga disebut tag pembuka dan tag penutup PENULISAN <tagname>content</tagname> 5
HTML ELEMENTS "HTML tag" dan "elemen HTML" sering digunakan untuk menggambarkan hal yang sama. Tapi tegasnya, elemen HTML adalah segalanya antara tag awal dan tag akhir, termasuk tag: HTML Element: <p>this is a paragraph.</p> 6
WEB BROWSERS Tujuan dari web browser (seperti Google Chrome, Internet Explorer, Firefox, Safari) adalah untuk membaca dokumen HTML dan menampilkan mereka sebagai halaman web. Browser tidak menampilkan tag HTML, tapi menggunakan tag untuk menentukan bagaimana isi dari halaman HTML yang akan disajikan / ditampilkan kepada pengguna: 7
8
HTML PAGE STRUCTURE Di bawah ini adalah visualisasi dari struktur halaman HTML: 9
HTML VERSIONS Sejak awal web diluncurkan, ada banyak versi HTML: Version Year HTML 1991 HTML+ 1993 HTML 2.0 1995 HTML 3.2 1997 HTML 4.01 1999 XHTML 1.0 2000 HTML5 2012 XHTML5 2013 10
THE <!DOCTYPE> DECLARATION Deklarasi <!DOCTYPE> membantu browser untuk menampilkan halaman web dengan benar. Ada banyak dokumen yang berbeda di web, dan browser hanya dapat menampilkan halaman HTML 100% benar jika ia tahu tipe HTML dan versi yang digunakan. 11
Deklarasi umum HTML5 <!DOCTYPE html> HTML 4.01 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/tr/html4/loose.dtd"> XHTML 1.0 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1transitional.dtd"> 12
WRITING HTML USING NOTEPAD OR TEXTEDIT HTML dapat diedit dengan menggunakan editor HTML profesional seperti: Adobe Dreamweaver Microsoft Expression Web CoffeeCup HTML Editor Notepad++ Namun, untuk belajar HTML sebaiknya editor teks seperti Notepad (PC) atau TextEdit (Mac). Kami percaya menggunakan editor teks sederhana adalah cara yang baik untuk belajar HTML. Ikuti 4 langkah berikut untuk membuat halaman web pertama Anda dengan Notepad. 13
STEP 1: START NOTEPAD Buka aplikasi Notepad dengan cara: Start All Programs Accessories Notepad 14
STEP 2: EDIT YOUR HTML WITH NOTEPAD Ketik kode HTML Anda ke Notepad Anda: 15
STEP 3: SAVE YOUR HTML Pilih Simpan sebagai.. dalam menu file Notepad ini. Bila Anda menyimpan file HTML, Anda dapat menggunakan salah satu. Htm atau ekstensi file html.. Tidak ada perbedaan, itu sepenuhnya terserah Anda. Simpan file dalam folder yang mudah diingat, seperti W3Schools. 16
STEP 4: RUN THE HTML IN YOUR BROWSER Memulai browser web Anda dan buka file html Anda dari File, Open menu, atau hanya menelusuri folder dan double-klik file HTML Anda. Hasilnya akan terlihat seperti ini: 17
HTML BASIC - 4 EXAMPLES Jangan khawatir jika contoh menggunakan tag Anda belum belajar. Anda akan belajar tentang mereka dalam babbab berikutnya. 18
HTML HEADINGS HTML judul didefinisikan dengan <h1> sampai <h6> tags. Example <h1>this is a heading</h1> <h2>this is a heading</h2> <h3>this is a heading</h3> 19
HTML PARAGRAPHS Paragraf HTML didefinisikan dengan tag <p> Example <p>this is a paragraph.</p> <p>this is another paragraph.</p> 20
HTML LINKS HTML link didefinisikan dengan tag <a>. Example <a href="http://www.w3schools.com">this is a link</a> Catatan: Alamat link ditentukan dalam atribut href. 21
HTML IMAGES Gambar HTML didefinisikan dengan tag <img>. Example <img src="w3schools.jpg" width="104" height="142 title= W3 Schools /> Catatan: Nama file dan ukuran gambar disediakan sebagai atribut. 22
REFERENSI http://www.w3schools.com 23