 |
| Gambar latihan html |
untuk anda yang ingin belajar html, saya kira anda sedikit banyak sudah tau tentang dasar dari html itu sendiri, makanya disini sya akan membuat tentang Tutorial membuat satu halaman sederhana HTML, seperti gambar diatas sebagai bahan latihan.
Memang keliatannya masih belum rapih, karna ini ditampilkan hanya dalam bentuk format html sendiri, untuk merapihkannya kita membutukan CSS silahkan baca Tutorial Mempercantik Halaman HTML Dengan CSS.
langkahnya gampang, anda copas script yang sudah disediakan, dan nanti kita bahas satu persatu.
baik kita langsung aja ke penulisan scriptnya dari Tutorial membuat satu halaman sederhana HTML agar bisa menampilkan seperti gambar diatas.
silahkan sediakan text editornya kemudian copas script yang ada di bawah ini ke text editornya save dengan nama latihan.html
<!DOCTYPE HTML>
<HTML>
<head>
<title> Latihan </title>
</head>
<body>
<div id="wrapper">
<div id="header">
<img src="Desert.jpg" alt="logo"/>
<ul id= "menu-utama">
<li><a href="">Home</a></li>
<li><a href="">Tutorial</a></li>
<li><a href="">video</a></li>
</ul>
<form>
<input type="text" name="search"/>
</form>
</div><!--penutup div "header"-->
<div id="daftar-artikel">
<div class="artikel">
<img src="Chrysanthemum.jpg" alt="gambar artikel"/>
<h1> Billgate and steve job</h1>
<b> feb 12, 2007</b><b> View : 3,757,646</b>
<p>bill gastes and steve job square off in the clean white virtual world of the ironic clean the white virtual world of the iconoc Mac ads</p>
<a href="">wach this</a>
</div>
<div class="artikel">
<img src="Chrysanthemum.jpg" alt="gambar artikel"/>
<h1> Billgate and steve job</h1>
<b> feb 12, 2007</b><b> View : 3,757,646</b>
<p>bill gastes and steve job square off in the clean white virtual world of the ironic clean the white virtual world of the iconoc Mac ads</p>
<a href="">wach this</a>
</div>
<div class="artikel">
<img src="Chrysanthemum.jpg" alt="gambar artikel"/>
<h1> Billgate and steve job</h1>
<b> feb 12, 2007</b><b> View : 3,757,646</b>
<p>bill gastes and steve job square off in the clean white virtual world of the ironic clean the white virtual world of the iconoc Mac ads</p>
<a href="">wach this</a>
</div>
</div>
<div id="sidebar">
<h2>Who we are?</h2>
<p>disini adalah suatu tulisan yang menceritakan tentang deskripsi blog ini terimakasih</p>
<h2>artikel berdasarkan kategori</h2>
<ul>
<li><a href="">HTML dan CSS</a></li>
<li><a href="">javascript</a></li>
<li><a href="">photoshop</a></li>
<li><a href="">inspirasi</a></li>
<li><a href="">berita</a></li>
<li><a href="">off topik</a></li>
</ul>
</div><!-- penutup div "sidebar"-->
<div id="footer">
<p>testing.net copyright 2012 by Gue</p>
</div>
</div><!-- penutup div "wrapper" -->
</body>
</HTML>
<HTML>
<head>
<title> Latihan </title>
</head>
<body>
<div id="wrapper">
<div id="header">
<img src="Desert.jpg" alt="logo"/>
<ul id= "menu-utama">
<li><a href="">Home</a></li>
<li><a href="">Tutorial</a></li>
<li><a href="">video</a></li>
</ul>
<form>
<input type="text" name="search"/>
</form>
</div><!--penutup div "header"-->
<div id="daftar-artikel">
<div class="artikel">
<img src="Chrysanthemum.jpg" alt="gambar artikel"/>
<h1> Billgate and steve job</h1>
<b> feb 12, 2007</b><b> View : 3,757,646</b>
<p>bill gastes and steve job square off in the clean white virtual world of the ironic clean the white virtual world of the iconoc Mac ads</p>
<a href="">wach this</a>
</div>
<div class="artikel">
<img src="Chrysanthemum.jpg" alt="gambar artikel"/>
<h1> Billgate and steve job</h1>
<b> feb 12, 2007</b><b> View : 3,757,646</b>
<p>bill gastes and steve job square off in the clean white virtual world of the ironic clean the white virtual world of the iconoc Mac ads</p>
<a href="">wach this</a>
</div>
<div class="artikel">
<img src="Chrysanthemum.jpg" alt="gambar artikel"/>
<h1> Billgate and steve job</h1>
<b> feb 12, 2007</b><b> View : 3,757,646</b>
<p>bill gastes and steve job square off in the clean white virtual world of the ironic clean the white virtual world of the iconoc Mac ads</p>
<a href="">wach this</a>
</div>
</div>
<div id="sidebar">
<h2>Who we are?</h2>
<p>disini adalah suatu tulisan yang menceritakan tentang deskripsi blog ini terimakasih</p>
<h2>artikel berdasarkan kategori</h2>
<ul>
<li><a href="">HTML dan CSS</a></li>
<li><a href="">javascript</a></li>
<li><a href="">photoshop</a></li>
<li><a href="">inspirasi</a></li>
<li><a href="">berita</a></li>
<li><a href="">off topik</a></li>
</ul>
</div><!-- penutup div "sidebar"-->
<div id="footer">
<p>testing.net copyright 2012 by Gue</p>
</div>
</div><!-- penutup div "wrapper" -->
</body>
</HTML>
Penjelasnnya :
1. Tag <!DOCTYPE HTML>
adalah suatu intruksi kepada browser tentang versi keberapa dokumen html ditulis
2. Tag <HTML>
setiap dokumen HTML mempunyai aturan dalam penulisannya, dan ketentuan tag dalam penulisan scrpt html adalah sebagai berikut :
<!DOCTYPE HTML>
<HTML>
<head>
<title> Latihan </title>
</head>
<body>
website pertama saya
</body>
</HTML>
3. Tag <div>
Tag ini digunakan untuk membuat suatu grup. jika kita perhatikan script diatas ada beberapa tag div, tag ini berfungsi untuk mengelompokan menjadi beberapa bagian.
4. Tag <div id=""> dan tag <div class="">
kalau kita perhatikan script diatas ada beberapa tag div id dan tag div class, tag id digunakan untuk bagian elemen yang memiliki karakteristik/struktur yang berbeda, tidak boleh ada elemen yang mempunyai elemen yang sama, untuk cotoh diatas terdapat lima tag id diantaranya wrapper, header, daftar-artikel, sidebar dan fotter. fungsinya untuk mengelempokan menjadi beberapa bagian yang nantinya mempunyai karakteriistik yang berbeda-beda. Ini juga fungsinya untuk memberikan efek yang berbeda didalam penulisan CSSnya.
Dalam script diatas, terdapat tiga tag class yang mempunyai karakteristik yang sama, fungsinya jika kita memberikan efek pada tag class dalam CSS, berarti itu berlaku pada ketiga class tersebut.
5. Tag ul dan li
tag ul atau unordered list digunakan untuk membuat daftar berurutan dimana untuk setiap list nya menggunakan tag li, ini akan menghasilkan tanda list titik dibelakangnya. Untuk menghasilkan tanda nomor yang berurutan setiap listnya menggunakan tag ol.
6. Tag <a>
Tag ini digunakan untuk memberikan fungsi pada tulisan kita buat menjadi link, untuk mengaitkannya ke alamat link yang dituju menggunakan atribut href dengan contoh penulisannya sebagai berikut <a href"http://alamattujuan.com>disini</a> ketika tulisan "disini" di klik akan mengarah pada alamat yang dituju.
7. Tag <img src="">
Tag ini digunakan untuk memanggil gambar, contoh <img src="Chrysanthemum.jpg"/> ini akan memanggil gambar yang berada dalam folder yang sama, jika gambar berada di folder yang berbeda maka pemangggilan disertai dari dengan nama folder gambar tersebut contoh <img src="images/Chrysanthemum.jpg"/> . Kita juga bisa menambah teks alternatif ketika gambar tidak bisa dimuat dengan pembahan atribuut alt contoh <img src="Chrysanthemum.jpg" alt="teks alternatif>. selain itu juga anda bisa memanggil gambar yang ada di internet, adapun contoh penulisannya sebagai berikut <img src=‚http://situsgambar.net/images/gambar.jpg‛ alt="logo" />
Catatan untuk pemaggilan gambar, tipe file harus sesuai dengan gambar apakah jpg, png atau yang lainnya dan untuk nama gambar tidak boleh pakai spasi.
8. Tag <form>
Tag ini digunakan untuk membuat tabel, Jika text input yang akan ditampilkan ingin memiliki nilai, maka tuliskan nilai tersebut di dalam atribut value contoh <input type="text" name="nama" value="nama anda" />
9. Tag Headeing/ Penjudulan <h>
Tag ini digunakan untuk pemberian format judul di HTML, kita gunakan mulai dari <h1> untuk judul utama, dan untuk subbab-subbabnya anda bisa menggunakan <h2> sampai dengan <h6>, pemberian angka dibelakang h memberikan ukuran huruf yang berbeda-beda.
10. Tag paragraf <p>
ini digunakan untuk membuat suatu paragraf
Saya kira sudah terjelaskan semua tag-tag yang ada di dalam Tutorial membuat satu halaman sederhana HTML diatas, masih banyak tag-tag HTML yang lainnya yang tidak terdapat dalam contoh script diatas, Karna untuk pemberian tag dilakukan sesuai dengan kebutuhan dari halaman yang akan kita buat.
Untuk menyempurnakan tampilan halaman diiatas, diperlukannya penulisan CSS, silahkan baca artikel Tutorial Mempercantik Halaman HTML Dengan CSS
0 komentar:
Posting Komentar