Rindi Putra
Hi..!! Assalamu’alaikum..
Untuk kali ini saya akan coba
membuat postingan yang membahas tentang HTML (Hyper Text Markup Language).
Sebelum membahas ke materi, perlu diketahui bahwa saya bukan lah seorang
programmer ataupun ahli di bidang system computer tetapi saya tertarik mempelajari tentang HTML dan
tidak ada salahnya kalau saya posting apa yang saya pelajari tentang materi ini
kedalam blog, siapa tau ada yang sedang ingin belajar juga ataupun hanya sekedar
menambah pengetahuan dasar tentang HTML. Begitu saya mendapat ilmu baru akan
saya tulis disini juga.
Website apapun yang kita
kunjungi, browser kita akan membaca HTML-nya dari website tersebut dan
memunculkan tampilan seperti yang dilihat langsung oleh pengguna. Kita bisa
lihat HTML dari sebuah website dengan cara yang mudah seperti dibawah ini.
- Buka website apa saja dari browser kamu (Chrome, Mozilla, IE, Opera, dll)
- Klik kanan di dalam website itu.
- Pilih pada View Source/ View Page Source.
- Browser akan membuka halaman baru dan akan menunjukan HTML dari website tersebut. Kita akan melihat ribuan kode HTML dari website tersebut, dan tampilan itulah yang sebenarnya di baca oleh browser kita.
Untuk Pembahasan pertama ini kita
akan membuat dokumen HTML sederhana dan mudah2an bisa dipelajari struktur dasar
dari HTML ini. Here we goo…
Untuk membuat HTML ini kita hanya
perlu membuka program Notepad dari
computer kita, yups! Notepad, program sederhana yang pasti ada di setiap
computer yang berbasis Windows,, untuk shortcut (jalan pintas) nya bisa dengan
cara memencet tombol Windows +R
kemudian ketik notepad à Enter.
Copy struktur kode HTML di bawah
ini ke dalam notepad. Tetapi disarankan agar kita menulis ulang kode ini secara
manual agar kita terbiasa dan tidak lupa dengan struktur basic dari HTML ini.
<html>
<head>
<title>HTML Tutorial oleh Rindi Tech.</title>
</head>
<body>
<h2>Dokumen HTML Sederhana</h2>
HTML- <i>Hyper Text Markup Language</i>
<p>
Salam:<br> <a href=http://rinditech.blogspot.com> RindiTech</a>
<p>
Oleh: <b>Rindi A Putra</b>
<br>©2013 Rindi Tech
<br>Protected by: copyscape
</body>
</html>
<head>
<title>HTML Tutorial oleh Rindi Tech.</title>
</head>
<body>
<h2>Dokumen HTML Sederhana</h2>
HTML- <i>Hyper Text Markup Language</i>
<p>
Salam:<br> <a href=http://rinditech.blogspot.com> RindiTech</a>
<p>
Oleh: <b>Rindi A Putra</b>
<br>©2013 Rindi Tech
<br>Protected by: copyscape
</body>
</html>
Naahhh,, setelah di paste pada
notepad tahap selanjutnya adalah melakukan save
yang menentukan agar kode ini dapat dibaca oleh ‘para’ browser. Bisa ikuti
langkah dibawah ini.
- Klik File --> Save As
- Pilih lokasi untuk menyimpan data ini dimana saja, disarankan di letakan di desktop agar mudah di cari.
- Beri nama dari data ini ‘bebas’ yang penting pada akhir dari nama tersebut kita tambahkan .htm atau .html contoh: belajar html tutorial.html
Setelah data berhasil di save,
data hasil save tersebut akan berupa hamalan web yang dapat di baca oleh
browser default kita. Bisa di lihat langsung dengan cara double klik pada file
tersebut. Dan akan muncul hasilnya seperti gambar di bawah ini.
Setiap jarak ataupun ukuran yang
ada di dalam website semuanya diatur menggunakan kode seperti ketika kita klik
Enter pada notepad (untuk membuat baris baru), tidak akan berpengaruh pada hasil
di website. Jika pada contoh kode yang ada di atas ada hasil enter itu hanya
untuk memisahkan kumpulan kode agar kita dapat mudah dalam memahami. untuk
postingan selanjutnya kita akan coba membahas tentang bagian-bagian pada kode
HTML. Di tunggu ya…
Terima kasih sudah baca, mohon
saran dan kritik ataupun pertanyaan agar postingan selanjutnya bisa lebih mudah
dipahami dan sesuai harapan.
