Rabu, 16 Februari 2011

STRUKTUR DASAR HTML

HTML singkatan dari Hypertext Markup Language merupakan script untuk menyusun dokumen-dokumen Web. Dokumen HTML disimpan dalam format teks regular dan mengandung teg-tag yang memerintahkan web browser untuk mengeksekusi peritah-perintah yang dispesifikasikan

Struktur dasar dokumen HTML adalah sebagai berikut :

Tag adalah teks khusus ( markup) berupa dua karakter “ < ”dan “ > ”, sebagai contoh adalah tag dengan nama body

Secara umum tag ditulis secara berpasangan yang terdiri dari tag pembuka dan tag penutup ( ditambahkan karakter “ / ” setelah karakter “ < ”)

Sebagai contoh , ini adalah tag pembuka isi dokumen HTML, dan adalah tag penutup isi dokumen HTML

Element

Element terdiri dari tiga bagian, yakni tag pembuka, isi dan tag penutup. Contohnya untuk menampilkan judul dokumen HTML pada web browser digunakan element title, dimana </b> ini adalah tag pembuka judul dokumen HTML</span></p> <p class="MsoNormalCxSpMiddle" style="text-align: justify;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgt7CS2YO3YmjTTawGzHbbKIbeMowElG6-oRvYhcT87QRQXA3qEYMJCAK4CRckKpVwtmRvWhkJ6tkgt2fX5UmMaJzhTEBD1nZ9ZtxhCAbaEl8h6mLcZpjFWhA68WpKz-x-LxpZjvt_IsJg/s1600/9.3.bmp"><img style="cursor: pointer; width: 386px; height: 145px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgt7CS2YO3YmjTTawGzHbbKIbeMowElG6-oRvYhcT87QRQXA3qEYMJCAK4CRckKpVwtmRvWhkJ6tkgt2fX5UmMaJzhTEBD1nZ9ZtxhCAbaEl8h6mLcZpjFWhA68WpKz-x-LxpZjvt_IsJg/s200/9.3.bmp" alt="" id="BLOGGER_PHOTO_ID_5574265257344992418" border="0" /></a><span style="font-family: "Century","serif";"></span></p> <p class="MsoNormalCxSpMiddle" style="text-align: justify;"><span style="font-family: "Century","serif";">Atribute</span></p> <p class="MsoNormalCxSpMiddle" style="text-align: justify;"><span style="font-family: "Century","serif";">Atribut mendefinisikan property dari suatu element HTML, yang terdiri atas nama dan nilai, penulisannya adalah sebagai berikut :</span></p> <p class="MsoNormalCxSpMiddle" style="text-align: justify;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHHSn3U9utu_FM5en5_um2P1uQ5A74QWFSOP1CrVmAB88TFUEwwZ8EHob0_Omy6MT6N3wPJZgd0uuabFAhyZSHFgJRuAAqIhgc2UYSJIwjNpnTri8L2SWjeRXw20TF8O5h1QvzgYLYbUk/s1600/9.4.bmp"><img style="cursor: pointer; width: 371px; height: 155px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHHSn3U9utu_FM5en5_um2P1uQ5A74QWFSOP1CrVmAB88TFUEwwZ8EHob0_Omy6MT6N3wPJZgd0uuabFAhyZSHFgJRuAAqIhgc2UYSJIwjNpnTri8L2SWjeRXw20TF8O5h1QvzgYLYbUk/s200/9.4.bmp" alt="" id="BLOGGER_PHOTO_ID_5574265260862933874" border="0" /></a><span style="font-family: "Century","serif";"></span></p> <p class="MsoNormalCxSpMiddle" style="text-align: justify;"><span style="font-family: "Century","serif";">Secara umum nilai attribute harus berada dalam tanda petik satu atau dua. Contohnya untuk membuat warna teks menjadi merah dan latar belakang halaman web menjadi hitam penulisannya adalah</span></p> <p class="MsoNormalCxSpMiddle" style="text-align: justify;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_amKDF9FizdMY4XCWkzqgQf9uiUE9d0qahES2P72gkJTQb4yUxt998ZII8kho4RcVymWW9M4TuAJ6MyTzlcAghCEh_g2w5gTqFKvu8ZEr9mwrXZcb4PQ8WKDMnrNcc_eJTYzLipTlaec/s1600/9.5.bmp"><img style="cursor: pointer; width: 279px; height: 117px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_amKDF9FizdMY4XCWkzqgQf9uiUE9d0qahES2P72gkJTQb4yUxt998ZII8kho4RcVymWW9M4TuAJ6MyTzlcAghCEh_g2w5gTqFKvu8ZEr9mwrXZcb4PQ8WKDMnrNcc_eJTYzLipTlaec/s200/9.5.bmp" alt="" id="BLOGGER_PHOTO_ID_5574265259987067842" border="0" /></a><span style="font-family: "Century","serif";"></span></p> <p class="MsoNormalCxSpMiddle" style="text-align: justify;"><span style="font-family: "Century","serif";">Element HTML menyatakan pada browser bahwa dokumen Web yang digunakan adalah HTML</span></p> <p class="MsoNormalCxSpMiddle" style="text-align: justify;"><span style="font-family: "Century","serif";">Sintaks :</span></p> <p class="MsoNormalCxSpMiddle" style="text-align: justify;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhC61guvWesF0xPjp1TfNTJdbwrsWw0UZHUqC-LpPI4JiuQ1YNsVSFk5sIMpRlViW5rlMpjO9YLkwZqtUCWb1AdTuMngKwkS86e3TrD7tkIwDjqFLXbJfFeWuyvTZvKSDCmClThtf2whLE/s1600/9.6.bmp"><img style="cursor: pointer; width: 308px; height: 175px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhC61guvWesF0xPjp1TfNTJdbwrsWw0UZHUqC-LpPI4JiuQ1YNsVSFk5sIMpRlViW5rlMpjO9YLkwZqtUCWb1AdTuMngKwkS86e3TrD7tkIwDjqFLXbJfFeWuyvTZvKSDCmClThtf2whLE/s200/9.6.bmp" alt="" id="BLOGGER_PHOTO_ID_5574266036254002738" border="0" /></a><span style="font-family: "Century","serif";"></span></p> <p class="MsoNormalCxSpMiddle" style="text-align: justify;"><span style="font-family: "Century","serif";">Element Head merupakan kepala dari dokumen HTML. Tag <head> dan </head> terletak di antara tag <html> dan tag </html></span></p> <p class="MsoNormalCxSpMiddle" style="text-align: justify;"><span style="font-family: "Century","serif";">Sintaks :</span></p> <p class="MsoNormalCxSpMiddle" style="text-align: justify;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhb-5_Fgm-qNpHr3D7SKp-bS5DQYzI4KnXnIX7gWSkBtx1HYuzi_fmQPAyWAarPyVQfAenNQLBmL33Yar2FN2fY3jsITTPt9VPtUfjzZrsYxj0yuXfrlbxe8_qVCkE-4BPwcTqmg_yqH6U/s1600/9.7.bmp"><img style="cursor: pointer; width: 250px; height: 146px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhb-5_Fgm-qNpHr3D7SKp-bS5DQYzI4KnXnIX7gWSkBtx1HYuzi_fmQPAyWAarPyVQfAenNQLBmL33Yar2FN2fY3jsITTPt9VPtUfjzZrsYxj0yuXfrlbxe8_qVCkE-4BPwcTqmg_yqH6U/s200/9.7.bmp" alt="" id="BLOGGER_PHOTO_ID_5574266040782097458" border="0" /></a><span style="font-family: "Century","serif";"></span></p> <p class="MsoNormalCxSpMiddle" style="text-align: justify;"><span style="font-family: "Century","serif";">Element title merupakan judul dari dokumen HTML yang ditampilkan pada judul jendela browser. Tag <title> dan tag terletak di antara tag dan tag

Element Body untuk menampilkan isi dokumen HTML. Tag dan tag terletak di bawah tag dan . Element body memiliki atribut –atribut yang menspesifikasikan khusus warna dan latar belakang dokumen yang akan ditampilkan pada browser

Sintaks :

Attribute text memberikan warna pada text, bgcolor memberikan warna pada latar belakang dokumen html, background memberikan latar belakang dokumen HTML dalam bentuk gambar, link memberikan nilai warna untuk link, alink memberikan warna untuk link yang sedang aktif, vlink memberikan warna untuk link yang telah dikunjungi.

Contoh

Keterangan:

Jika kode-kode tersebut kita ketik di notepad kemudian kita save as dengan ekstensi html misalnya kita beri nama “ latihan.html ” maka jika kita buka akan tampil seperti berikut :


Tidak ada komentar:

Posting Komentar