Contoh programnya sudah tersedia pada Disket Latihan. Dengan adanya file-file ini maka diharapkan Anda dapat bekerja dan mencoba lebih praktis dan cepat.
File aslinya dibuat dengan extension “namafile.txt”, dengan maksud bila Anda melakukan perubahan, maka yang Anda ubah adalah pada file HTML.
Oleh sebab itu langkah pertama adalah Open file Asli dan Save menjadi file HTML dan kemudian Anda dapat melakukan perubahan.
Dokumen HTML yang sangat sederhana
Contoh ini adalah sebuah dokumen HTML yang sangat sederhana, dengan jumlah tag yang minimal.
Contoh ini mendemonstrasikan, bagaimana sebuah text yang diapit oleh elemen body ditampilkan pada browser.
(Buka file Latihan 4-1.txt dan simpan dengan nama latihan4_1.html, Open file “latihan4_1.html” lewat Browser, kemudian GO, perhatikan hasilnya pada window browser!).
<html> |
Contoh ini adalah sebuah dokumen HTML yang mendemonstrasikan, bagaimana tampilan sebuah tulisan yang diapit oleh elemen paragraph <p> </p>.
HTML akan secara otomatis menambahkan satu baris kosong sebelum dan sesudah heading.
(Buka file Latihan 4-2.txt dan simpan dengan nama latihan4_2.html, Open file “latihan4_2.html” lewat Browser, kemudian GO, perhatikan hasilnya pada window browser!).
<html> <p>Ini sebuah paragraph baris 1.</p> </body> |
Headings
Heading didefenisikan dengan tag <h1> sampai <h6>. <h1> mendefenisikan heading yang terbesar, dan <h6> mendefenisikan heading yang terkecil.
HTML akan secara otomatis menambahkan satu baris kosong sebelum dan sesudah heading.
(Buka file Latihan 4-3.txt dan simpan dengan nama latihan4_3.html, Open file “latihan4_3.html” lewat Browser, kemudian GO, perhatikan hasilnya pada window browser!).
<html> <h1> Ini contoh dari sebuah heading 1</h1> <p>Gunakan tag heading hanya untuk Heading, jangan gunakan untuk membuat tuliasan supaya menjadi besar. Gunakan tag yang lain untuk keperluan itu.</p> </body> |
Line Break
Tag <br> akan digunakan apabila Anda menginginkan mangakhiri baris, seperti layaknya menekan tombol Enter, tetapi tidak menginginkan sebuah paragraph yang baru. Tag <br> memaksa memutus baris bila Anda menempatkannya dimana saja diantara text.
Contoh:
<p>This <br> is a para<br>graph with line breaks</p> |
(Buka file Latihan 4-4.txt dan simpan dengan nama latihan4_4.html, Open file “latihan4_4.html” lewat Browser, kemudian GO, perhatikan hasilnya pada window browser!).
<html> <p> </body> |
Komentar atau Catatan dalam HTML
Tag komentar digunakan untuk memasukkan catatan-catatan programmer pada source code HTML. Sebuah komentar tidak akan diproses oleh browser. Anda dapat menggunakan catatan untuk menjelaskan arti dari sekelompok program, yang dapat membantu Anda untuk memahami seluruh isinya bila dikemudian hari diperlukan perbaikan atau pengembangan.Contoh:
<!--Ini contoh tag untuk komentar atau catatan --> |
Tips yang sangat berguna !
Bila Anda menulis text HTML, Anda tidak akan tahu persis bagaimana hasilnya bila ditampilkan dengan browser lain. Karena ada orang yang memiliki display yang besar, dan ada juga yang kecil. Apabila dilakukan pengubahan ukuran Window maka saat itu juga akan dilakukan format ulang tampilan. Jangan melakukan pengaturan pada layar komputer Anda dengan menambahkan baris kosong atau spasi dalam text.
HTML akan memotong spasi yang ada dalam text Anda. Banyak spasi diatara kata dianggab menjadi satu spasi kosong dan dalam satu baris kosong yang memiliki banyak spasi dianggab hanya satu spasi kosong.
Menggunakan paragraph kosong dengan tag <p></p> untuk menyisipkan baris kosong adalah cara yang kurang baik. Lebih baik Anda menggunakan tag <br>. (Tetapi jangan menggunakan tag <br> untuk membuat daftar atau list, tunggu sampai Anda belajar tentang list pada HTML.)
Mungkin sekarang Anda akan mempunyai catatan bahwa paragraph dapat ditulis tanpa menutup tag </p>.
Jangan mempercayai hal itu. Versi berikutnya dari HTML tidak akan mengijinkan Anda melompati atau mengabaikan tag penutup.
HTML akan secara otomatis menambahkan baris kosong sebelum dan sesudah elemen, seperti sebelum dan sesudah paragraph, dan sebelum dan sesudah sebuah heading.
Kita menggunakan penggaris (rule) horizontal ( tag <hr>), untuk memisahkan section pada latihan kita.
Contoh-Contoh yang perlu dicoba :
1. Paragraph dengan banyak spasi
Contoh ini mendemonstrasikan beberapa default untuk elemen paragraph. (Buka file Latihan 4-5.txt dan simpan dengan nama latihan4_5.html, Open file “latihan4_5.html” lewat Browser, kemudian GO, perhatikan hasilnya pada window browser!).
2. Sulitnya mengatur Penulisan Puisi
Contoh ini mendemonstrasikan beberapa problem dengan format HTML. (Buka file Latihan 4-6.txt dan simpan dengan nama latihan4_6.html, Open file “latihan4_6.html” lewat Browser, kemudian GO, perhatikan hasilnya pada window browser!).
3. Membuat posisi center untuk heading
Contoh ini mendemonstrasikan cara menempatkan Heading di posisi Center. . (Buka file Latihan 4-7.txt dan simpan dengan nama latihan4_7.html, Open file “latihan4_7.html” lewat Browser, kemudian GO, perhatikan hasilnya pada window browser!).
4. Horizontal Rule
Contoh ini mendemonstrasikan cara menempatkan garis horizontal diantara baris text. . (Buka file Latihan 4-8.txt dan simpan dengan nama latihan4_8.html, Open file “latihan4_8.html” lewat Browser, kemudian GO, perhatikan hasilnya pada window browser!).
5. Catatan atau Hidden Comment
Contoh ini mendemonstrasikan cara menempatkan catatan dalam Source code HTML. . (Buka file Latihan 4-9.txt dan simpan dengan nama latihan4_9.html, Open file “latihan4_9.html” lewat Browser, kemudian GO, perhatikan hasilnya pada window browser!).
6. Warna latar belakang (background)
Contoh ini mendemonstrasikan cara mengubah warna background dari sebuah page HTML. . (Buka file Latihan 4-10.txt dan simpan dengan nama latihan4_10.html, Open file “latihan4_10.html” lewat Browser, kemudian GO, perhatikan hasilnya pada window browser!).
Anda dapat mendownload Ebook Tutorialnya disini
Wah.. sip..
ReplyDeletesaya masih newbe nich.. mau belajar HTML..
Tolong di posting tentang HTML ea..
Terimakasih banyak...
sama2.... makasih juga atas waktunya untuk mampir ke blog yang seadanya ini...
ReplyDelete