Belajar HTML part 1 : Dokumen HTML Dasar

Yuk mari belajar HTML. World Wide Web menggunakan 3 (tiga) teknologi baru yaitu :
  • HTML (HyperText Markup Language) digunakan untuk menulis halaman web, atau untuk membuat suatu template web.
  • HTTP (HyperText Transfer Protocol) protokol yang digunakan untuk menstransmisikan halaman-halaman web. Biasanya menggunakan port 80 atau 8080.
  • Web Browser (ada banyak jenisnya seperti : Safari, ie, firefox. opera, sea monkey, chrome dll), merupakan program yang berada pada client atau pengguna untuk menerima data, menginterpretasikan dan menampilkan hasilnya. Nah apa yang kita lihat pada web browser itu sebenarnya adalah markup yang berantakan tapi web browser menginterpretasikannya membentuk sebuah template yang indah.
Jika kamu punya keinginan mendalami world wide web maka hal pertama yang kudu dipelajari adalah "html".
Sebuah markup sederhana dalam dokumen html disebut dengan nama "tag". Dan sebuah dokument html akan terdiri dari tag berikut :
<html>
<head>
</head>
<body>
</body>
</html>
Sebuah dokumen html selalu dibuka dengan tag <html> dan diakhiri dengan tag </html>. Diantara kedua tag tersebut terdapat dua bagian utama dari sebuah dokumen html yaitu "header" dan "body" yang masing-masing tagnya adalah <header> </header> dan </body>.
Header : merupakan salah satu dari 2 bagian utama dalam halaman html. Pada bagian ini title halaman web ditempatkan dan juga advanced command lain yang akan dijelaskan berikutnya.
Body : merupakan bagian dimana text, link, gambar dan isi web lainnya berada. Merupakan bagian yang lebih banyak ditampilkan saat diakses melalui web browser.
Sehingga sebuah dokumen html sederhana akan seperti ini :
<html>
<head>
<title>contoh dokumen html</title>
</head>
<body>
Hello World!
</body>
</html>
Copy lalu paste kode di atas ke web editor dan simpan dengan nama "helloworld.html" (tanpa tanda petik). Lalu aktifkan "xampp control panel" dan pastikan dokumen html disimpan ke direktori xampp. Baca tulisan ini jika lupa cara menyimpan dokumen html dan cara mengaktifkan xampp.
Nah tampilan dokumen html sederhana tampak seperti gambar di atas.

<p> tag.
Selanjutnya kita akan menggunakan tag <p> merupakan tag paragraf. Apa fungsinya? Daripada sibuk dengan teori mari kita coba langsung.
Copas (copy paste) kode di bawah lalu simpan dokumen html tersebut dengan nama tesparagraf.html :
<html>
<head>
<title>contoh dokumen html</title>
</head>
<body>
Hello World! Ini contoh dokumen html saya.
Saya seorang new bie.
Mohon bantuannya.
</body>
</html> 
Jika dilihat menggunakan web browser maka hasilnya akan menjadi berikut :
Kalimat pertama, kedua dan ketiga menyatu menjadi satu. baris saja. Lalu coba copas kode berikut dan simpan dengan nama tesparagraf2:
<html>
<head>
<title>contoh dokumen html</title>
</head>
<body>
<p>Hello World! Ini contoh dokumen html saya.</p>
<p>Saya seorang new bie.</p>
<p>Mohon bantuannya.</p>
</body>
</html>

Hasil priview kode di atas pada web browser akan tampak beda jika dibandingkan dengan tesparagraf.html. Dengan menggunakan tag <p> maka 3 (tiga) baris kalimat tadi tidak menyatu seperti terlihat pada gambar berikut :
Untuk sementara sekian dulu nanti kita lanjutkan lagi belajarnya.

0 komentar:

Post a Comment