HTML atau HyperText Markup Language merupakan salah satu format yang digunakan dalam pembuatan dokumen dan aplikasi yang berjalan dihalaman web. HTML adalah file text murni yang dapat dibuat dengan editor text apapun. Dokumen ini dikenal sebagai web page, dokumen HTML merupakan dokumen yang disajikan pada web browser. Ada dua cara dalam menulis sebuah dokumen HTMLyang nantinya mejadi sebuah halaman browser.Yang pertama menggunakan HTML editor atau Web editor, dan yang kedua menggunakan teks editor biasa seperti menggunakan notepad.Saat ini sudah banyak sekali paket aplikasi yang dapat digunakan untuk membuat halaman web secara WYSIWYG ( What You See Is What You Get ) seperti FrontPage,Dreamweaver dan lain sebagainya, Anda tetap harus menguasai tag-tag HTML terutama yang dipergunakan untuk membuat aplikasi di internet kerena mau tidak mau Anda akan bekerja dalam mode text editor bila mana hendak menyisipkan setiap script HTML.
Contoh Latihan1.html
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Dokumen HTML</title>
</head>
<body>
Isi dari dokumen
</body>
</html>
Definisi Elemen dan Tag HTML
Sebuah dokumen HTML disusun oleh beberapa Elemen atau lebih dikenal dengan komponen-komponen dasar. Untuk menandai sebuah elemen dalam suatu dokumen HTML digunakan tag. Tag HTML terdiri dari sebuah kurung sudut kiri (<,lebih kecil),nama tag, kurung sudut kanan(>,lebih besar), contoh <H1>, tag pada umumnya berpasangan (misalnya <H1> dengan </H1>), tanda / pada tag pasangan memberikan tanda bahwa tag tersebut merupakan pembatas akhir elemen yang dibuka oleh tag awal. Jadi secara umum penulisan sebuah tag adalah <nama tag> ...</nama tag> selain itu dalam penamaan tag tidak menganut case sensitive.Dalam pembuatan dokumen HTML elemen dasar yang harus dimiliki adalah tag html,tag body dan tag head. Elemen head berisi informasi tentang dokumen, sedangkan elemen body berisi teks dan atau elemen lainnya. Atau lebih jelasnya sebagai berikut:
<html>Penggunaan Tag dan Atribut Tag
<head>
....informasi dokumen....
</head>
Pengenalan HTML
4 | P a g e
<body>
....informasi yang di tampilkan
pada halaman browser.....
</body>
</html>
Dalam pembuatan dokumen HTML penulisan elemen yang diawali dan diakhiri tanda tag HTML, memiliki syarat penulisan yaitu:
- Tag HTML diapit dengan dua karakter kurung sudut ( < dan > )
- Tag HTML secara normal selalu berpasangan misal (<i>...</i>)
- Tag pertama dalam suatu pasangan adalah tag awal, dan tag yang kedua merupakan tag akhir.
- Tag html tidak ‘case sensitive’. <b> sama dengan <B>
- Jika dalam suatu tag ada tag lagi, maka penulisan tag akhir tidak boleh bersilang harus berurutan. Misalnya <b><I>..Tebal dan Miring..</I></b>
Tag dapat mempunyai atribut. Atribut menyatakan sesuatu tentang tag tersebut.Atribut digunakan untuk mengubah default pemformatan dokumen dengan tag yang bersangkutan.
Tag-tag Dasar HTML
1.Head
Merupakan tag berkutnya setelah tag html, digunakan untuk menuliskan keterangan tentang dokumen web yang akan ditampilkan. Penulisan tag seperti berikut ini :
<head> di awal setelah <html> dan </head> di akhir section head.
2.Title
Merupakan tag di dalam head yang digunakan untuk menuliskan judul dari dokumen html, yang akan muncul pada caption halaman browser jika halaman tersebut di akses. Penulisan tag seperti berikut ini :
<title> Judul Dokumen</title>
3.Body
Merupakan section utama dalam dokumen web. Pada section ini semua isi dokumen yang akan ditampilkan di dalam browser harus dituliskan.<body> di awal setelah </head> dan </body> di akhir sebelum </html>
Sebagai latihan, ketiklah script HTML berikut ini, kemudian simpan pada folder Anda masing-masing.Atribut elemen body :
- background : latar belakang image dokumen
- bgcolor : warna latar belakang dokumen, default putih
- text : warna teks dokumen, default hitam
- link : warna link dokumen, default biru
- vlink : warnavisited link dokumen, default ungu
- alink : warna active link dokumen, default merah
4.Heading
Tag heading(hx) digunakan untuk memformat heading (judul dan sub judul ) dari suatu halaman web. Heading ini akan memperbesar ukuran huruf untuk setiap jenis heading.Ada enam buah heading yang dikenal HTML, yaitu dari (h1) sampai dengan (h6).Sebagai latihan, ketiklah latihan berikut dan jalankan dibrowser Anda.
<html>
<head>
<title>Latihan 5</title>
</head>
<body>
<h1> Ini Heading 1 </h1>
<h2> Ini Heading 2 </h2>
<h3> Ini Heading 3 </h3>
<h4> Ini Heading 4 </h4>
<h5> Ini Heading 5 </h5>
<h6> Ini Heading 6 </h6>
</body>
</html>
5.Horizontal ruler
Tag Horisontal ruler <hr> berfungsi untuk menampilkan garis horizontal tiga
dimensi didalam halaman web Anda.Tag horizontal ruler juga tidak memerlukan
elemen penutup </hr>.
Atribut elemen horisontal ruler :
- align : [ left | center | right ] default center
- size : pixel ( tebal garis, default 2 )
- width : panjang ( lebar garis, pixel atau persen, default 100%)
noshade ( garis solid )
6.Paragraph
Tag paragraph <p> berfungsi layaknya untuk pengaturan antar paragraf dalam halaman web Anda. Dalam elemen paragraf terdapat atribut : align=[ left |center | right ] yang berfungsi sebagai pengatur perataan paragraf, jadi Anda cukup memilih salah satu dari ketiga pilihan tanpa harus memberi kurung buka dan tutup,Pengenalan HTML dan defaultnya adalah left. Anda dapat memilih perataan kiri, tengah dan kanan. Sebagai latihan bukalah Latihan 4.html yang sudah Anda buat, kemudian tambahkan script-script berikut dan simpan dengan nama Latihan 5.html.
<html>
<head>
<title>Latihan 3</title>
</head>
<body bgcolor="#8FCDF1" text="#FF0000" >
<h1>::- NATHAN BOOKSTORE ONLINE -::</h1>
<hr width="95%" align="left">
<h3> Kami menyediakan :</h3>
<h4> Alat Tulis </h4>
<p>Pensil</p>
</body>
</html>
7.Break
Tag Break <br> berfungsi untuk memberikan baris baru suatu paragraf dalam halaman web Anda. Tag break tidak memerlukan tag penutup break. Bukalah Latihan 5.html yang sudah Anda buat, kemudian tambahkan script-script berikut dan simpan dengan nama Latihan 7.html.
<html>
<head>
<title>Latihan 3</title>
</head>
<body bgcolor="#8FCDF1" text="#FF0000" >
<h1>::- NATHAN BOOKSTORE ONLINE -::</h1>
<hr width="95%" align="left">
<h3> Kami menyediakan :</h3>
<h4> Alat Tulis </h4>
<p>Pensil<br>Ballpaoint<br>Penggaris<br>Buku Gambar<br>Dan Lainlain</p>
<h4> Buku-Buku Pelajaran </h4>
<p>Ilmu Pengetahuan Alam<br>Ilmu Pengetahuan Sosial<br>Bahasa
Jawa<br>Bahasa Inggris<br>Dan Lain-lain</p>
</body>
</html>
Demikianlah Beberapa Turtorial untuk membuat web dasar,semoga dapat bermanfaat bagi kita semua. Semoga dapat bermanfaat bagi kita semua.
2 komentar:
keren infonya, sangat menarik sekali :)
Terima kasih gan,telah berkunjung :D
Posting Komentar
Tata cara berkomentar di blog ngampus doloe :
1.Dilarang promosi sebuah barang ataupun produk yang berbau pornografi
2.Berkomentarlah dengan baik dan benar,jangan sampai keluar dari materi yang dibahas.
3.jaga sopan santun dalam berbicara. Baik dengan admin maupun dengan pengunjung lainya.