√ Dasar-dasar Belajar HTML - AdityaTekno

Social Items

Dasar Belajar HTML


Sebelum masuk kedalam inti pembahasan saya akan menyinggung sedikit beberapa kesalahan orang-rang yang baru belajar web development. Hal ini dijelaskan tidak untuk menjatuhkan, melainkan sebagai koreksi diri kita masing-masing untuk memotivasi agar lebih maju lagi dalam membangun sebuah web, sehingga nantinya jadi tahu arah ketika akan belajar web development.


Banyak orang yang menggeluti dalam bidang web development yang awalnya tidak melewati pembelajaran HTML terlebih dahulu, sebagian besar menggunakan CMS (Content Management System), ataupun karena kemudahan penggunaan software seperti Macromedia Dreamweaver, Adobe Dreamweaver, dan sebagainya. 

Sehingga dari sinilah orang menyangka untuk bisa membuat website atau mahir dalam web development itu harus menggunakan Macromedia Dreamweaver atau sejenisnya, jadi ngapain harus repot-repot belajar HTML? Sebenarnya pernyataan itu tidak 100% benar, dan tidak pula 100% salah.

Orang yang ketika pertama kali menggunakan Dreamweaver akan merasa kesusahan ketika belajar sendiri tanpa bantuan buku atau tutorial. Bahkan walau sudah ada buku atau tutorialnya juga masih saja kesulitan menggunakan Dreamweaver. 


Sehingga koreksi dari saya, agar dapat dengan mudah mengerti dalam menggunakan software web development para web developer haruslah memiliki basic HTML yang kuat, sehingga ketika memakai aplikasi sperti Macromedia Dreamweaver atau Adobe Dreamweaver itu menjadi sangat mudah. Seperti kalau kita mau belajar bela diri, pasti waktu pertama latihan kita harus tahu gerakan dasar-dasar nya atau basicnya.

Tapi, sebelum kita mempelajari HTML, ada beberapa persiapan yang harus dilakukan. Seperti penginstallan aplikasi-aplikasi yang dibutuhkan dan aplikasi pendukung dalam mempelajari HTML. 

Pertama, kalian harus mempunyai Aplikasi Text Editor. Sebagaimana kita akan membuat script di dalam aplikasi tersebut seperti Notepad++, Sublime Text, Gedit dan sebagainya. Kedua, kalian juga harus mempunyai Aplikasi Web Browser untuk menampilkan hasil script yang kita buat. Bisa menggunakan aplikasi Mozilla Firefox, Google Chrome, Safari, Internet Explorer atau sejenisnya.


Pengertian HTML

HTML (Hypertext Markup Languange) adalah bahasa dasar untuk menampilkan halaman web pada web browser. HTML merupakan script yang digunakan untuk menyusun atau membuat dokumen web yang apabila kita melakukan desain terhadap html berarti kita telah melakukan tindakan pemrograman. 

Baca Juga: Sejarah Singkat Web Desain

Akan tetapi, HTML bukanlah sebuah bahasa pemrograman karena hanya berisikan perintah-perintah tertentu agar dapat diakses atau diterjemahkan oleh browser. Jika kita ingin membuat suatu website atau blog maka pengetahuan tentang HTML ini sangat penting sebagai dasar utama. Lalu apa Fungsi HTML itu sendiri? Kurang lebih seperti ini Fungsi HTML:


  1. Membuat, mendesain dan mengontrol tampilan dari Halaman Web dan isinya.
  2. Mempublikasikan dokumen secara online sehingga bisa diakses dan dilihat oleh seluruh dunia.
  3. Membuat online form yang bisa digunakan untuk menangani pendaftaran dan transaksi secara online
  4. Menambahkan objek-objek seperti gambar, audio, video dan sebaginya dalam dokument HTML

Secara mendasar, dokumen html mempunyai susunan seperti dibawah ini:

<HTML>
<head>
     <title>Judul Halaman Saya</title>
</head>
<body>
     Ini adalah halaman web pertama saya
</body>
</HTML> 

Anda masih bingung? Tenang saja, saya jelaskan tiap baris kode tersebut.


<HTML>…</HTML>


Adalah awal dari isi dokumen HTML dimulai dari sini, semua kode HTML yang anda buat akan ditulis di dalam tag ini, jangan lupa perhatikan juga setiap tag harus memiliki tag penutup.


<head>…</head>


Tag head akan digunakan untuk menyimpan bebrbagai informasi tentang dokumen HTML, lebih detailnya akan kita bahas pada artikel selanjutnya. Apa yang terdapat didalam tag ini, tidak akan ditampilkan secara langsung di web browser.


<title>…</title>


Salah satu contoh informasi yang terdapat didalam tag head adalah title. Title akan menampilkan teks pada judul browser atau pada tab browser.


<body>…</body>


Nah selanjutnya, apa yang akan anda ditampilkan pada browser akan ditulis di tag ini, tag body merupakan tag pembuka dari badan dokumen HTML.


Mudah difahami bukan? Kemudian apakah penulisan tag-tag HTML tersebut harus seperti contoh di atas? Seperti penambahan tab/indentasi pada setiap tag? Sebenarnya anda bisa saja menuliskan kode HTML seperti ini:


<HTML><head><title>Judul Halaman Saya</title></head><body>Ini adalah halaman web pertama saya</body></HTML> 

Dan yang anda dapatkan dalam browser pun tetap sama, namun anda akan kesulitan membaca dokumen HTML tersebut. Kalau saja dokumen HTML yang anda buat hanya 10 atau 20 baris mungkin hal ini tidak akan menjadi masalah, namun bagaimana jika mencapai ribuan baris? Nah lohhh? Susah kan? Hehe…


Untuk itu kita menambahkan indentasi, disetiap isi konten dari suatu tag, Contohnya:


<head>
     <title>Judul Halaman Saya</title>
</head>

Ini menandakan bahwa tag title berada didalam tag head . Selain itu kita juga bisa mengontrol, apakah suatu tag sudah ditutup atau belum.


Mengenal Atribut HTML


Setelah anda mengetahui struktur dari file HTML dan apa saja yang harus ditulis pertama kali. Selanjutnya saya akan membagikan cara untuk memuat atau menampilkan sebuah gambar dan memahami apa itu atribut HTML. Untuk memuat sebuah gambar pada dokumen HTML, kita akan menggunakan tag <img>. Kemudian dimana kita meletakkan gambar tersebut? Didalam tag <img> kah?



Pada tag <img> kita akan menggunakan atribut src untuk menyimpan lokasi gambar:

<img src>

Selanjutnya untuk memasukkan nilai pada atribut, kita gunakan operator sama dengan (=) diikuti dengan lokasi gambar yang diapit oleh tanda kutip.


<img src=”gambar.jpg”>

Tag <img> termasuk ke dalam tag sepesial dan tidak memiliki tag penutup (disebut juga sebagai Self Closed Tag ), seperti tag-tag lainnya. Dikarenakan tag ini tidak memiliki konten seperti:

<title>Ini adalah halaman konten tag saya</title>

Sebagai pengganti, kita tambahkan tanda slash atau garis miring (/) sebelum kurung tutup:

<img src=”gambar.jpg” />

Setiap tag <img>, selain memiliki atribut src untuk menyimpan lokasi gambar, anda juga harus menyertakan  atribult alt yang akan digunakan sebagai teks alternatif ketika gambar tidak berhasil dimuat atau gambar hilang.


<img src=”gambar.jpg” alt=”nama alternatif gambar” />

Dan atribut lainnya adalah atribut width dan height, yang berfungsi untuk menentukan lebar dan tinggi dari gambar tersebut. Memang hal ini tidak perlu dilakukan karena gambar secara otomatis akan ter-load dengan ukuran sebenarnya, tetapi hal ini sangat dianjurkan untuk mempercepat proses pemuatan gambar.


<img src=”gambar.jpg” alt=”nama alternatif gambar” width=350 height=120 />

Dengan penambahan atribut alt, ketika gambar yang dimaksud hilang/tidak/gagal termuat maka akan muncul sebuah icon broken file, dan isi dari atribut alt akan ditampilkan disana.


Baca Juga : Belajar Membuat Heading, List, dan Memahami Tag Div

Penulisan Lokasi File

Apabila anda hendak menyimpan gambar atau file pada sebuah folder, maka yang perlu anda lakukan adalah menambahkan nama folder tersebut lalu diikuti dengan tanda (/) slash dan nama file gambar atau file yang akan dimuat:

<img src=”folder/gambar.jpg” alt=”nama alternatif gambar” />

Jika didalam folder tersebut terdapat folder lagi, dan gambar yang ingin anda muat ada didalamnya maka penulisannya menjadi seperti ini:

<img src=”folder/folder2/gambar.jpg” alt=”nama alternatif gambar” />


Membuat Link

Yang sering kita temui dalam sebuah website adalah link. Link ini akan membuat konten atau element HTML dapat di klik dan akan mengarahkan kita ke halamn web lainnya. Biasanya suatu link ditampilkan berwarna biru dan bergaris bawah (sebelum diberi style).

Link atau anchor (pengait) dapat dibuat dengan menambahkan tag <a> pada teks yang ingin kita buat link. Namun anda tidak akan melihat perubahan pada teks yang sudah diberi tag <a> karena kita belum mengaitkannya ke halaman web lain. Untuk itu kita akan menggunakan atribut href untuk meyimpan  alamat web yang akan kita tuju ketika link di klik. Contohnya seperti berikut:


Klik <a href=http://alamat_tujuan.com>disini</a> untuk ke halaman selanjutnya 

Bagaimana? Apakah anda sudah siap menulis HTML? Susah kah? Mudah kok, kalau kita fakus pada tiap-tiap kode yang kita tulis pasti tidak akan ada kesalahan. Tapi, jika masih ada kesalahan ya anda coba cek lagi bagian mana yang salah, lalu dicoba lagi. Karena kalau kita mau belajar dari kesalahan pasti akan lebih baik lagi, dijamin deh pokoknya jangan sampe menyerah ya! Hehe…

Kurasa sampe disini dulu ya, semoga bisa bermanfaat bagi kalian semua yang membacanya. Jangan lupa untuk klik tombol like dibawah, dan juga share ke teman kalian semua. Bukannya berbagi itu indah ya, hehe… 


Terima kasih atas kunjungannya, dan maaf bila ada salah dalam penulisan, baik itu typo atau tulisan yang kurang baik. Good Luck! Sampai jumpa di postingan selanjutnya. Salamat Belajar Membuat Heading, List, dan Memahami Tag Div. Salam AdityaTekno.com




Referensi dari:

Buku Belajar HTML dan CSS oleh Rian Ariona
Buku HTML & CSS Fundamental dari Akar menuju Daun oleh Adi Hadisaputra + Tim Kaffah.biz

Dasar-dasar Belajar HTML

Dasar Belajar HTML


Sebelum masuk kedalam inti pembahasan saya akan menyinggung sedikit beberapa kesalahan orang-rang yang baru belajar web development. Hal ini dijelaskan tidak untuk menjatuhkan, melainkan sebagai koreksi diri kita masing-masing untuk memotivasi agar lebih maju lagi dalam membangun sebuah web, sehingga nantinya jadi tahu arah ketika akan belajar web development.


Banyak orang yang menggeluti dalam bidang web development yang awalnya tidak melewati pembelajaran HTML terlebih dahulu, sebagian besar menggunakan CMS (Content Management System), ataupun karena kemudahan penggunaan software seperti Macromedia Dreamweaver, Adobe Dreamweaver, dan sebagainya. 

Sehingga dari sinilah orang menyangka untuk bisa membuat website atau mahir dalam web development itu harus menggunakan Macromedia Dreamweaver atau sejenisnya, jadi ngapain harus repot-repot belajar HTML? Sebenarnya pernyataan itu tidak 100% benar, dan tidak pula 100% salah.

Orang yang ketika pertama kali menggunakan Dreamweaver akan merasa kesusahan ketika belajar sendiri tanpa bantuan buku atau tutorial. Bahkan walau sudah ada buku atau tutorialnya juga masih saja kesulitan menggunakan Dreamweaver. 


Sehingga koreksi dari saya, agar dapat dengan mudah mengerti dalam menggunakan software web development para web developer haruslah memiliki basic HTML yang kuat, sehingga ketika memakai aplikasi sperti Macromedia Dreamweaver atau Adobe Dreamweaver itu menjadi sangat mudah. Seperti kalau kita mau belajar bela diri, pasti waktu pertama latihan kita harus tahu gerakan dasar-dasar nya atau basicnya.

Tapi, sebelum kita mempelajari HTML, ada beberapa persiapan yang harus dilakukan. Seperti penginstallan aplikasi-aplikasi yang dibutuhkan dan aplikasi pendukung dalam mempelajari HTML. 

Pertama, kalian harus mempunyai Aplikasi Text Editor. Sebagaimana kita akan membuat script di dalam aplikasi tersebut seperti Notepad++, Sublime Text, Gedit dan sebagainya. Kedua, kalian juga harus mempunyai Aplikasi Web Browser untuk menampilkan hasil script yang kita buat. Bisa menggunakan aplikasi Mozilla Firefox, Google Chrome, Safari, Internet Explorer atau sejenisnya.


Pengertian HTML

HTML (Hypertext Markup Languange) adalah bahasa dasar untuk menampilkan halaman web pada web browser. HTML merupakan script yang digunakan untuk menyusun atau membuat dokumen web yang apabila kita melakukan desain terhadap html berarti kita telah melakukan tindakan pemrograman. 

Baca Juga: Sejarah Singkat Web Desain

Akan tetapi, HTML bukanlah sebuah bahasa pemrograman karena hanya berisikan perintah-perintah tertentu agar dapat diakses atau diterjemahkan oleh browser. Jika kita ingin membuat suatu website atau blog maka pengetahuan tentang HTML ini sangat penting sebagai dasar utama. Lalu apa Fungsi HTML itu sendiri? Kurang lebih seperti ini Fungsi HTML:


  1. Membuat, mendesain dan mengontrol tampilan dari Halaman Web dan isinya.
  2. Mempublikasikan dokumen secara online sehingga bisa diakses dan dilihat oleh seluruh dunia.
  3. Membuat online form yang bisa digunakan untuk menangani pendaftaran dan transaksi secara online
  4. Menambahkan objek-objek seperti gambar, audio, video dan sebaginya dalam dokument HTML

Secara mendasar, dokumen html mempunyai susunan seperti dibawah ini:

<HTML>
<head>
     <title>Judul Halaman Saya</title>
</head>
<body>
     Ini adalah halaman web pertama saya
</body>
</HTML> 

Anda masih bingung? Tenang saja, saya jelaskan tiap baris kode tersebut.


<HTML>…</HTML>


Adalah awal dari isi dokumen HTML dimulai dari sini, semua kode HTML yang anda buat akan ditulis di dalam tag ini, jangan lupa perhatikan juga setiap tag harus memiliki tag penutup.


<head>…</head>


Tag head akan digunakan untuk menyimpan bebrbagai informasi tentang dokumen HTML, lebih detailnya akan kita bahas pada artikel selanjutnya. Apa yang terdapat didalam tag ini, tidak akan ditampilkan secara langsung di web browser.


<title>…</title>


Salah satu contoh informasi yang terdapat didalam tag head adalah title. Title akan menampilkan teks pada judul browser atau pada tab browser.


<body>…</body>


Nah selanjutnya, apa yang akan anda ditampilkan pada browser akan ditulis di tag ini, tag body merupakan tag pembuka dari badan dokumen HTML.


Mudah difahami bukan? Kemudian apakah penulisan tag-tag HTML tersebut harus seperti contoh di atas? Seperti penambahan tab/indentasi pada setiap tag? Sebenarnya anda bisa saja menuliskan kode HTML seperti ini:


<HTML><head><title>Judul Halaman Saya</title></head><body>Ini adalah halaman web pertama saya</body></HTML> 

Dan yang anda dapatkan dalam browser pun tetap sama, namun anda akan kesulitan membaca dokumen HTML tersebut. Kalau saja dokumen HTML yang anda buat hanya 10 atau 20 baris mungkin hal ini tidak akan menjadi masalah, namun bagaimana jika mencapai ribuan baris? Nah lohhh? Susah kan? Hehe…


Untuk itu kita menambahkan indentasi, disetiap isi konten dari suatu tag, Contohnya:


<head>
     <title>Judul Halaman Saya</title>
</head>

Ini menandakan bahwa tag title berada didalam tag head . Selain itu kita juga bisa mengontrol, apakah suatu tag sudah ditutup atau belum.


Mengenal Atribut HTML


Setelah anda mengetahui struktur dari file HTML dan apa saja yang harus ditulis pertama kali. Selanjutnya saya akan membagikan cara untuk memuat atau menampilkan sebuah gambar dan memahami apa itu atribut HTML. Untuk memuat sebuah gambar pada dokumen HTML, kita akan menggunakan tag <img>. Kemudian dimana kita meletakkan gambar tersebut? Didalam tag <img> kah?



Pada tag <img> kita akan menggunakan atribut src untuk menyimpan lokasi gambar:

<img src>

Selanjutnya untuk memasukkan nilai pada atribut, kita gunakan operator sama dengan (=) diikuti dengan lokasi gambar yang diapit oleh tanda kutip.


<img src=”gambar.jpg”>

Tag <img> termasuk ke dalam tag sepesial dan tidak memiliki tag penutup (disebut juga sebagai Self Closed Tag ), seperti tag-tag lainnya. Dikarenakan tag ini tidak memiliki konten seperti:

<title>Ini adalah halaman konten tag saya</title>

Sebagai pengganti, kita tambahkan tanda slash atau garis miring (/) sebelum kurung tutup:

<img src=”gambar.jpg” />

Setiap tag <img>, selain memiliki atribut src untuk menyimpan lokasi gambar, anda juga harus menyertakan  atribult alt yang akan digunakan sebagai teks alternatif ketika gambar tidak berhasil dimuat atau gambar hilang.


<img src=”gambar.jpg” alt=”nama alternatif gambar” />

Dan atribut lainnya adalah atribut width dan height, yang berfungsi untuk menentukan lebar dan tinggi dari gambar tersebut. Memang hal ini tidak perlu dilakukan karena gambar secara otomatis akan ter-load dengan ukuran sebenarnya, tetapi hal ini sangat dianjurkan untuk mempercepat proses pemuatan gambar.


<img src=”gambar.jpg” alt=”nama alternatif gambar” width=350 height=120 />

Dengan penambahan atribut alt, ketika gambar yang dimaksud hilang/tidak/gagal termuat maka akan muncul sebuah icon broken file, dan isi dari atribut alt akan ditampilkan disana.


Baca Juga : Belajar Membuat Heading, List, dan Memahami Tag Div

Penulisan Lokasi File

Apabila anda hendak menyimpan gambar atau file pada sebuah folder, maka yang perlu anda lakukan adalah menambahkan nama folder tersebut lalu diikuti dengan tanda (/) slash dan nama file gambar atau file yang akan dimuat:

<img src=”folder/gambar.jpg” alt=”nama alternatif gambar” />

Jika didalam folder tersebut terdapat folder lagi, dan gambar yang ingin anda muat ada didalamnya maka penulisannya menjadi seperti ini:

<img src=”folder/folder2/gambar.jpg” alt=”nama alternatif gambar” />


Membuat Link

Yang sering kita temui dalam sebuah website adalah link. Link ini akan membuat konten atau element HTML dapat di klik dan akan mengarahkan kita ke halamn web lainnya. Biasanya suatu link ditampilkan berwarna biru dan bergaris bawah (sebelum diberi style).

Link atau anchor (pengait) dapat dibuat dengan menambahkan tag <a> pada teks yang ingin kita buat link. Namun anda tidak akan melihat perubahan pada teks yang sudah diberi tag <a> karena kita belum mengaitkannya ke halaman web lain. Untuk itu kita akan menggunakan atribut href untuk meyimpan  alamat web yang akan kita tuju ketika link di klik. Contohnya seperti berikut:


Klik <a href=http://alamat_tujuan.com>disini</a> untuk ke halaman selanjutnya 

Bagaimana? Apakah anda sudah siap menulis HTML? Susah kah? Mudah kok, kalau kita fakus pada tiap-tiap kode yang kita tulis pasti tidak akan ada kesalahan. Tapi, jika masih ada kesalahan ya anda coba cek lagi bagian mana yang salah, lalu dicoba lagi. Karena kalau kita mau belajar dari kesalahan pasti akan lebih baik lagi, dijamin deh pokoknya jangan sampe menyerah ya! Hehe…

Kurasa sampe disini dulu ya, semoga bisa bermanfaat bagi kalian semua yang membacanya. Jangan lupa untuk klik tombol like dibawah, dan juga share ke teman kalian semua. Bukannya berbagi itu indah ya, hehe… 


Terima kasih atas kunjungannya, dan maaf bila ada salah dalam penulisan, baik itu typo atau tulisan yang kurang baik. Good Luck! Sampai jumpa di postingan selanjutnya. Salamat Belajar Membuat Heading, List, dan Memahami Tag Div. Salam AdityaTekno.com




Referensi dari:

Buku Belajar HTML dan CSS oleh Rian Ariona
Buku HTML & CSS Fundamental dari Akar menuju Daun oleh Adi Hadisaputra + Tim Kaffah.biz

Load Comments

Dapatkan Artikel Tips AdSense, Blogging, SEO setiap harinya.

Notifications

Disqus Logo