dasar html.docx

18
BELAJAR HTML Referensi : http://www.w3schools.com/ 1. Dasar HTML Struktur dasar dokumen HTML <!DOCTYPE html> <html> <head> <title>Judul Halaman</title> </head> <body> <h1>Belajar Dasar HTML</h1> <p>Mulailah dengan niat :D</p> </body> </html> DOCTYPE : Deklarasi yang mendefinisikan sebuah dokumen bertipe HTML. Teks antara <html> and </html> : Tempat menulis dokumen HTML. Teks antara <head> and </head> : Berisi informasi tentang dokumen. Teks antara <title> and </title> : Tempat menuliskan judul halaman yang akan tampil pada tab. Teks antara <body> and </body> : Tempat menuliskan konten/isi halaman. Teks antara <h1> and </h1> : Judul konten. Teks antara <p> and </p> : Paragraf.

Upload: nurul-izza-rahmaniya

Post on 12-Nov-2015

13 views

Category:

Documents


0 download

TRANSCRIPT

BELAJAR HTMLReferensi : http://www.w3schools.com/

1. Dasar HTMLStruktur dasar dokumen HTML

Judul Halaman

Belajar Dasar HTMLMulailah dengan niat :D

DOCTYPE: Deklarasi yang mendefinisikan sebuah dokumen bertipe HTML.Teks antara and: Tempat menulis dokumen HTML.Teks antara and: Berisi informasi tentang dokumen.Teks antara and: Tempat menuliskan judul halaman yang akan tampil pada tab.Teks antara and: Tempat menuliskan konten/isi halaman.Teks antara and: Judul konten.Teks antaraand: Paragraf.

1.1 Heading

Pakai h1 paling besarPakai h2 lebih kecil dari h1Pakai h3 lebih kecil dari h2Pakai h4 lebih kecil dari h3Pakai h5 lebih kecil dari h4Cuma sampai h6, gak ada h7

1.2 Paragraf

Ini namanya paragraf.Ini namanya paragraf.Ini namanya paragraf.

1.3 Links

Menuju puddak Klik disini

Tag : Atribut : href

1.4 Images

Tag : imgAtribut : src (source file/nama file image), alt (alternatif teks), width height (ukuran)Catatan : file image harus diletakkan dalam satu folder dengan dokumen html nya.

2. Element HTML HTML element ditulis dengan struktur : konten Namun ada beberapa element yang tidak memerlukan closing tag, ex : tag line break
Berikut ini beberapa element HTML :START TAGISI KONTENCLOSING TAG

Whole dokumen HTML

Tubuh dokumen

Heading

Paragraf

Empty html element (Tidak perlu konten dan closing tag) HTML element tidak bersifat case sensitive, sehingga sama artinya dengan Sebuah HTML element dapat dituliskan didalam element yang lain (nested element). Misalkan pada contoh dibawah ini, terdapat 4 elemen HTML.
Pakai h1 paling besar
Ini memakai h2ini memakai h2
Ini memakai h2ini memakai h2ini memakai h23. Atribut HTML Elemen HTML dapat memiliki atribut. Atribut memberikan informasi tambahan tentang elemen. Atribut selalu ditentukan dalam tag awal. Penulisan atribut | nama atribut = value.3.1 Atribut Lang Atribut untuk mendeklarasikan bahasa. Kegunaan atribut ini penting bagi aplikasi pembaca layar maupun search engine.My First HeadingMy first paragraph.3.2 Atribut Title Atribut untuk mendeklarasikan judulPuddak GresikPudak adalah makanan atau kue Kabupaten Gresik-Jawa Timur. Makanan ini terbuat dari bahan tepung beras, gula pasir/gula jawa dan santan kelapa yang dimasukkan kemasan yang disebut "Ope" yaitu pelepah daun pinang.
Coba arahkan mouse nya ke paragraf. Value dari atribut tittle akan muncul sebagai tooltip.3.3 Atribut HrefMenuju puddak Klik disini Bisa juga ditulis :href=http://puddak.blogspot.com (Tanpa Petik)3.4 Atribut Size Atribut : src (source file/nama file image) , width height (ukuran)3.5 Atribut Alt Atribut alt menentukan sebuah teks alternatif yang akan digunakan ketika sebuah elemen HTML tidak dapat ditampilkan. (Agar dapat dibaca oleh Screen Reader)4. Style HTML Setiap elemen HTML memiliki gaya standar (warna latar belakang putih dan warna teks hitam). Mengubah gaya standar elemen HTML dapat dilakukan dengan atribut style.4.1 Background Color Contoh ini mengubah warna background standar dari putih ke biru.Judul HalamanBelajar Dasar HTMLMulailah dengan niat :D4.2 Text Color Contoh ini mengubah warna text dari hitam ke hijau dan merahJudul HalamanBelajar Dasar HTMLMulailah dengan niat :D4.3 Font Color Digunakan untuk mengubah style font dengan properti font-familyBelajar Dasar HTMLMulailah dengan niat :D4.4 Font Size Digunakan untuk mengubah ukuran font dengan atribut font-sizeBelajar Dasar HTMLMulailah dengan niat :D4.5 Text Alignment Untuk perataan teks, digunakan property text-alignBelajar Dasar HTMLMulailah dengan niat :D5. HTML Formatting Berikut ini adalah element formatting pada HTML :NamaKegunaanElementBold textTulisan tebal (tanpa tambahan).Important textTulisan tebal yang ditekankan.Italic textTulisan miring.Emphasized textTulisan miring yang ditekankan.Marked textMarked / highlight pada tulisan.Small textTulisan menjadi kecil.Deleted textTulisan menjadi strikethrough / Tulisan yang tengahnya dicoret.Inserted textUnderline pada tulisan.SubscriptsEfek subscripts pada tulisan.SuperscriptsEfek superscripts pada tulisan. Lihat perbedaannya pada contoh berikut :Aku Tulisan NormalAku Memakai BoldAku Memakai StrongAku Memakai ItalicAku Memakai EmphasizedAku Memakai MarkedAku Memakai Small, Jadi kecil kan?Aku Memakai Deleted, Lihat garis di tengahkuAku Memakai Inserted, Untuk membuat efek garis bawahAku Memakai Subscripts, Lihat bedanya ?Aku Memakai Superscripts, Betapa supernya aku