HTML Tutorial 1: Membuat dokumen HTML sederhana

Rindi Putra
0 Komentar
Beranda
Blogging
HTML
Tutorial
HTML Tutorial 1: Membuat dokumen HTML sederhana

Hi..!! Assalamu’alaikum.. 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.

Tidak ada salahnya kalau saya posting apa yang saya pelajari tentang materi ini kedalam blog ini, 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.

HTML Tutorial 1: Membuat dokumen HTML sederhana

  1. Buka website apa saja dari browser kamu (Chrome, Mozilla, IE, Opera, dll)
  2. Klik kanan di dalam website itu.
  3. Pilih pada View Source/ View Page Source.
  4. 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>&copy;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.

  1. Klik File --> Save As
  2. Pilih lokasi untuk menyimpan data ini dimana saja, disarankan di letakan di desktop agar mudah di cari.
  3. 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.

tutorial+HTML

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.

Baca juga: HTML Tutorial 2: Struktur Dasar HTML

Postingan Lama
Postingan Lebih Baru

Penulis blog

Rindi Putra
Rindi Putra
Graphic Designer & Technology Junkie Graduated with 'International Trade Management' Major | 2 Years of Professional career on International Shipping Company & 3 Years career on Local Fashion Brand Company | 10 Years (and still counting) as Digital content creator. Feel free to connect with me on Social Media Twitter/Instagram: @rindiputra

Anda mungkin menyukai postingan ini

Tidak ada komentar

Mohon maaf komentar Anda tidak akan langsung muncul karena ada proses moderasi. Terpaksa harus dilakukan untuk menyaring komentar spam yang merugikan banyak pihak. Terima kasih atas pengertiannya. Selamat membaca!