dasar - dasar html

Struktur Dasar dari Dokumen HTML terdiri dari 4 elemen penting. Elemen – elemen tersebut wajib dan harus di hafal, karena skrip dasar ini sangat fatal untuk ke tahap – tahap selanjutnya. Berikut ini adalah 4 elemen penting dari struktur dasar dokumen HTML, beserta dengan penjelasan singkatnya :

è Tag ini merupakan Elemen Pertama pada struktur HTML sebagai tag pembuka / mengawali bahasa pemrograman HTML.

è Tag penutup elemen pertama HTML.

è Tag pembuka ini merupakan elemen Kedua, fungsinya sebagai header untuk dokument HTML.

è Tag penutup elemen Kedua / header HTML

è Tag ini merupakan elemen Ketiga, penempatanya berada tepat diantara tag pembuka header dan tag penutup header . Fungsinya untuk memberikan nama judul halaman website yang nanti hasilnya akan di tampilkan pada sudut kiri atas setelah icon browser.

è Tag pembuka body ini adalah elemen terakhir atau elemen Keempat dari struktur HTML. Dalam tag pembuka ini nanti akan memiliki beberapa attribute. Attribute adalah sebuah properti dari elemen tersebut, nanti akan dijelaskan. Hal yang perlu diperhatikan di sini adalah untuk penulisan pada struktur HTML ditulis sekali saja ! 

Kemudian diantara tag pembuka body dan tag penutup body

è Tag penutup body / isi dokument HTML

Contoh penerapan di dalam notepad sebagai berikut :

1. Buatlah tag elemen pertama terlebih dahulu,
2. Kemudian, taruhlah cursor setelah kurung tutup tag pembuka HTML
3. Buatlah tag elemen yang kedua,
4. Lalu, taruhlah cursor pada bagian belakang setelah kurung penutup tag pembuka HEAD
5. Buatlah tag elemen ketiga, yaitu TITLE. Pada bagian ini, silahkan Anda tambahkan teks berikut “Judul Website” diantara kurung penutup pada tag pembuka TITLE dengan kurung buka pada tag penutup TITLE.
6. Kemudian buatlah tag elemen terakhir yaitu tag pembuka BODY yang ditaruh setelah kurung penutup tag penutup elemen HEAD dan tag penutup BODY ditaruh sebelum kurung pembuka tag penutup elemen HTML.
7. Berikan isian tek berikut :

“Disini ini nanti, apapun isinya akan ditampilkan di layar browser”

ditaruh diantara tag pembuka dan penutup BODY

Gambar pada Notepad :

Gambar 2.1 Struktur Dasar HTML

2.5  Menyimpan Dokumen HTML

Setelah kita menuliskan skrip pada notepad ( gambar 2.1 ), langkah selanjutnya adalah melakukan penyimpanan untuk file data tersebut sebelum dieksekusi. Adapun langkahnya sebagai berikut :

1.      Pilih Menu File à Save As atau dengan tombol CTRL + S

Gambar 2.2 Kotak Dialog Save As

2.      Tentukan dimana letak penyimpanan untuk menyimpan file tersebut, dan buatlah sebuah folder baru, misal : Web1 pada Drive D://

3.      Tuliskan nama filenya misal : index , setelah memberikan nama filenya, silahkan anda tambahkan pada bagian akhir nama file untuk diberikan sebuah ekstensi .htm atau .html.

4.      Kemudian rubah Save As Type : All File, dan Tekan Tombol Save atau Enter.

2.5  Mengeksekusi Dokumen HTML

 Untuk menjalankan skrip program dokumen HTML yang telah kita buat tadi langkah – langkahnya sebagai berikut :

1. Cara Pertama :
1. Buka Browser ( Internet Explore, Mozilla, atau Opera, dll )
2. Pilih Menu File à Pilih Open atau tekan tombol CTRL + O pada keyboard

Gambar 2.3 Membuka File pada Browser

Gambar 2.4 Kotak Dialog Open File pada Browser

3. Anda cari dimana letak file tersebut disimpan, kemudian pilih file yang akan di buka ( misal : index.htm )
1. Cara Kedua :

a.       Silahkan buka Windows Explore atau tekan tombol Window + E

b.      Cari dimana letak Anda menyimpan file notepad tadi, kemudian pilih filenya

c.       Double klik file tersebut.

Gambar 2.5 Hasil Tampilan Eksekusi File

1   

1.1   

1.2   

1.3   

1.4   

1.5   

1.6  Attribut dari pada Struktur HTML

Masih ingatkah Anda akan tag BODY ? Merupakan elemen yang keberapakah dalam Struktur HTML ?

Seperti yang telah dijelaskan pada Bab sebelumnya, bahwa di dalam tag pembuka BODY memiliki beberapa attribute diantaranya :

1.      Latar belakang / background warna

Adalah membuat latar belakang halaman website dengan warna saja. Untuk sintak bakunya :

Di dalam tanda petik pada BGCOLOR berikanlah nilai warna, seperti : Red, Yellow, Green, dll atau juga bisa menggunakan kode warna pada Corel atau Photoshop,namun dalam penulisannya di awali tanda # ( Pagar ) misal : untuk hijau muda =”#00ff00”

Contoh pada Notepad :

Gambar 2.6  Attribute Body Bgcolor

Gambar 2.7 Hasil Tampilan Body Bgcolor

2.      Latar belakang / background gambar

Adalah membuat sebuah latar belakang halaman website dengan menggunakan gambar. Untuk tipe gambarnya dapat berupa : jpg, jpeg, gif, bmp, dsb. Untuk Sintak Bakunya sebagai berikut :

Di dalam tanda petik pada BACKGROUND berikanlah sumber gambarnya, seperti :

Yang perlu menjadi perhatian disini antara lain :

a.       Sumber gambar yang saya berikan didapat dengan cara :

1)      Mencari gambar di my picture, kemudian di Copy

2)      Taruh / Paste dalam satu folder dengan script program berada.

b.      Dalam memberikan / menuliskan nama file gambar sesuaikan huruf besar kecilnya, spasi, dan tanda bacanya.

c.       Perhatikan ekstensi gambar tersebut, bilamana berekstensikan .JPEG maka cobalah anda ketikkan ekstensi tersebut dibelakang nama file. Jika tidak bisa tampil pada browser, silahkan dirubah dengan ekstensi .JPG

Contoh Notepad :

                        Gambar 2.8 Attribute Body Background

           

            Gambar selanjutnya akan menjelaskan bagaimana sumber background diperoleh, mulai dari pengkopian gambar hingga penimpaan gambar ke dalam satu folder dengan script program.

                        

                                Gambar 2.9 Sumber Gambar Attribute Background

                               

                        Gambar 2.10 Menaruh Gambar Satu Folder

Gambar 2.11 Tampilan Body Background

3.      Margin

Adalah untuk mengatur jarak antara tepi ( atas, kiri, kanan, maupun bawah ) dengan obyek pada halaman website tersebut. Di sini margin ada 4 bagian seperti layaknya margin pada sebuah paper Ms. Word, yaitu : Topmargin untuk batas tepi atas, Bottommargin untuk batas tepi bawah, Leftmargin untuk batas tepi kiri, dan Rightmargin untuk batas tepi kanan. Untuk Sintak Bakunya sebagai berikut :

           

Contoh Notepad :

Gambar 2.12 Attribute Body Margin

Gambar 2.13 Tampilan Body Margin

4.      Warna Link

Adalah membuat warna link, dimana warna link ini berbeda – beda pada saat sebelum di klik, dan pada saat setelah diklik. Sintak baku dalam HTML :

5.      Warna Teks

Adalah untuk memberikan warna teks secara default yang akan ditampilkan pada halaman website.  Kesimpulannya apapun obyek teks yang ada di antara tag BODY akan berwarna sesuai dengan yang dipinta. Sintak bakunya seperti ini :

Contoh Notepad :

Gambar 2.14 Attribute Body Text

Gambar 2.15 Tampilan Body Text