HTML Bagian 1 : Struktur Dasar HTML


Seiring perkembangan teknologi khususnya dibidang Teknologi Informasi, internet bukanlah hal yang tabu didalam masyarakat dewasa ini. Ditambah lagi dengan tersedianya paket akses internet dengan harga murah yang disediakan oleh perusahaan-perusahaan selular serta jaringan WiFi gratis yang tersedia  ditempat-tempat tongkrongan seperti warung kopi, kafe, kantor, kampus bahkan ke tingkat sekolah juga beberapa telah menyediakan akses internet untuk memudahkan proses pembelajaran, ini membuat masyarakat semakin mudah untuk mendapatkan akses internet dimanapun mereka berada. Informasi yang ada di internet pun selalu terperbaharui dengan cepatnya bahkan hanya dalam hitungan detik. 
Dalam melakukan aktifitas berselancar didunia maya ini sering kali kita menemukan website dengan tampilan serta konten yang ada didalamnya membuat kita bertanya bagaimana cara membuatnya. Untuk itu pada artikel ini saya akan membahas sedikit bahasa pemograman dasar yang digunakan dalam membuat sebuah website sederhana serta penggunaannya terhadap artikel yang akan kita buat nantinya.
Artikel yang saya tulis ini merupakan artikel yang saya khususkan kepada beginer atau masih dalam tahap pemula dan juga dapat digunakan oleh anda-anda yang memang telah mencapai tahap lanjut. intinya artikel ini tidak ada batasan untuk siapapun yang ingin mempelajarinya.

Sebelum saya melanjutkan lebih lanjut, ada baiknya bagi anda-anda yang masih tahap pemula memperhatikan beberapa tips dari saya berikut ini :
  • Susunan kode atau script yang anda lihat nanti bukan untuk dihafal tapi anda harus mengerti apa fungsi dari masing-masing sintak kode tersebut. jika memang ingin menggunakannya anda dapat melihat daftar kode yang akan saya berikan pada akhir pelajaran dasar ini. Sekali lagi saya tekankan kodenya bukan untuk dihafal tapi dipahami.
  • Jangan pernah mengkopi-paste kode yang telah saya berikan pada kolom tutorial tetapi cobalah untuk membiasakan menulis kembali kode yang telah saya berikan tersebut.
  • Didalam melakukan proses pembelajaran adakalanya hasil yang ditampilkan dari apa yang telah anda tulis tidak sesuai dengan tutorial yang saya berikan. Disinilah alasan saya mengapa anda harus menulis ulang kode tersebut agar anda tahu dimana letak kesalahannya. Dan disini dituntut kejelian serta keseriusan anda dalam mempelajari tutorial ini.
  • Dan yang terakhir belajarlah secara bertahap dan jangan rakus. Ini dimaksudkan agar anda benar-benar mengerti tentang html ini. Carilah waktu yang pas untuk mempelajarinya dan jangan lupa makan dan sholat !!! karena apapun yang kita pelajari kita harus menunaikan kewajiban kita !
Ok !! Mari kita mulai  proses belajar kita !

Beberapa Hal Yang Harus Anda Persiapkan
  • Editor yang digunakan untuk menuliskan sintak kode.. Untuk pemula cukup anda gunakan Notepad bawaan windows saja. Untuk membukanya :
    " klik 'Start' --> All Program --> Accessories --> Notepad".
    (pada tutorial ini saya menggunakan Windows XP jadi bagi anda pengguna Windows Vista, Windows 7, atau Windows 8 silahkan sesuaikan saja yang pasti letaknya pada folder Accessories)
  • Browser yang digunakan untuk melihat hasil kerja anda (pada tutorial ini saya menggunakan browser Mozilla Firefox. jika anda pengguna Internet Explorer, Opera atau yang lainnya juga tidak masalah)
  • Berdo'a sebelum belajar..
 Pelajaran Pertama : Mengenal Struktur Dasar HTML

Buka Editor Notepad terlebih dahulu. Caranya :
klik 'Start' --> All Program --> Accessories --> Notepad
Tampilannya seperti berikut :


Setelah itu tulislah kode berikut kedalamnya :





Simpanlah kode diatas kedalam folder yang anda inginkan dengan cara :
  • Klik "File--> Save as kemudian pada kolom "File name" isi dengan "percobaan.htm" tanpa tanda petik atau nama lain asalkan diakhiri dengan akhiran ( .htm ) dan pada kolom "Save as type" pilih "All files"


  • Langkah selanjutnya anda dapat melihat hasil dari sintak yang telah kita tulis tadi dengan membuka file yang telah anda simpan tadi seperti dibawah ini :


 Penjelasan dari sintak kode diatas :
  • Bagian HEAD berisi informasi mengenai dokumen tersebut, misalnya judul dokumen, menghubungkan antar dokumen, memberitahu browser untuk membuat form pencarian.
  • Bagian TITLE merupakan sub bagian dari bagian HEAD karena sintak kode ini terdapat diantara kode <HEAD>....dan... </HEAD> fungsi dari sintak ini sendiri yaitu untuk menampilkan judul dokumen, dan biasanya akan ditampilkan di title browser atau bagian atas dokumen.
  • bagian BODY berisi layout atau desain halaman web. Semua teks/gambar yang diketikkan diantara tag <BODY> ..... </BODY> akan ditampilkan oleh browser dijendela utamanya.
  • dan yang paling penting setiap kode yang diisi harus berada didalam tag <HTML> ....</HTML> ini berfungsi agar browser mengenali bahasa pemograman yang kita gunakan.
  • Setiap sintak kode selalu diawali dengan tanda <kode> dan diakhiri dengan tanda </kode>

Untuk lebih jelasnya perhatikan gambar dibawah ini :


 Note :
  • Jika ada yang kurang jelas silahkan bertanya pada kolom komentar....
  • Saya mengharapkan kritik dan saran untuk perkembangan selanjutnya...
  • Artikel ini saya tulis berdasarkan pengalaman pribadi dan dapat saya pertanggungjawabkan.. jika ada yang copas harap minta ijin terlebih dahulu dan jangan lupa cantumkan sumbernya...(hargailah hasil karya orang lain)
  • Gambar yang ada pada artikel ini juga merupakan hasil editing dari admin dan bukan hasil dari copas di google atau situs-situs lain.
  • Selamat belajar semoga sukses !

Comments
0 Comments

0 komentar:

Posting Komentar

Silahkan Tinggalkan komentar

Blogger Templates by x-cube