Cara Membuat struktur program HTML: khusus Pemula - HTML (hyper text markup langeuage) adalah bahasa standar dengan pengkodean khusus yang digunakan untuk menyusun halaman situs atau halaman aplikasi web, HTML akan diterjemahkan oleh browser menjadi sebuah tampilan dengan format-format tertentu bisa menjadi text, link, gambar dan lain sebagainya sesuai dengan perintah html yang digunakan. lantas apa itu browser?, browser adalah software yang memiliki kemampuan menterjemahkan kode-kode html untuk  ditampilkan menjadi  tampilan halaman situs.
ketika kita membuat kode html, maka file html harus disimpan dengan akhiran .htm atau .html, keduanya sama saja baik .htm ataupun .html keduanya dapat dikenali oleh browser dan kode-kode didalamnya akan diterjemahkan menjadi sebuah tampilan halaman situs.

Memahami Struktur HTML

Jika anda ingin mampu untuk membuat sebuah website, pertama kali yang harus anda pelajari dan harus anda fahami benar-benar adalah struktur perintah HTML silahkan anda bisa baca tentang bahasa pemrograman yang harus dikuasai untuk membuat aplikasi web. mengapa harus HTML?, itu karena html adalah  pondasi dasar pada sebuah situs, bahasa pemrograman utama yang menyusun tampilan situs adalah HTML .  Untuk mempelajari HTML tidaklah terlalu sulit yang penting kita mengetahui bagaimana struktur dasarnya, jika kita sudah mengetahui struktur dasarnya tugas kita selanjutnya adalah menguasai dan memahami kode-kode HTML lainnya yang jumlahnya cukup banyak, wah gimana menghapalnya?, untuk masalah kode itu tidak perlu kita sengaja hapalin, lantas bagaimana kita bisa hapal, semakin sering kita gunakan maka kita akan semakin hapal, lambat-laun perintah-perintah HTML tanpa kita sadari jika sering digunakan dan dipraktekan kode-kode tersebut akan tertanam di ingatan jangka panjang kita.

Struktur Dasar HTML

Struktur dasar html terdiri dari dua blok, yang pertama adalah blok header, dan yang kedua adalah blok body, blok header digunakan untuk meletakan title, mendeskripsikan CSS untuk dekorasi tampilan, mendeskripsikan JavaScript untuk membuat halaman situs interaktif, meletakan meta, title dan lainnya. sedangkan blok body adalah area untuk meletakan kode-kode yang nanti akan menjadi tampilan halaman situs atau web, apapun yang kita letakan di blok body itu akan muncul pada tampilan di browser (mozila, google croome, internet explorer dll), berikut struktur dasar HTML yang harus anda ketahui:

<html>

      <head>
            <title>contoh html</title>
                   ...
                   ...
                   perintah-perintah head lainnya...
                   ...
                   ...
      </head>

       <body>

              <p>ini adalah kontent html</p>
               .....
               ....
               perintah-perintah body lainnya, 
               yang diletakan diarea body ini akan ditampilkan oleh browser...
               ...
               ...
      </body>

</html>

struktur dasar html selalu dimulai dengan tag <html> dan diakhiri dengan tag penutup </html>, untuk blok head selalu dimulai dengan  perintah <head> dan diakhiri dengan perintah </head>, sedangkan untuk blok body selalu diwali dengan perintah <body> dan diakhiri dengan perintah </body>, adapun untuk karakter perintah-perintah kode HTML, kita bisa menggunakan huruf besar saja, huruf kecil saja atau kombinasinya, semuanya tidak dibedakan, masih bisa dibaca dan sama saja. ingat ketika kita membuat script HTML file harus kita simpan dengan akhiran .html atau .htm.

Editor HTML

Untuk membuat html banyak tool editor gratis yang yang bisa kita gunakan, untuk hanya sekedar latihan kita bisa menggunakan notpad atau notpad++, tetapi untuk tujuan profesional, sebaiknya kita menggunakan tool yang khusus, misal saya sendiri menggunakan NetBean sebagai editor untuk membuat web, atau tool lainnya yang memang handal, tool sekelas NetBean, sudah dilengkapi dengan code highlighter, membedakan warna text atau kode-kode html yang digunakan, juga sudah dilengkapi dengan autocompleter, kode saran ketika kita mengetikan perintah, autocompleter berguna sekali membantu kita mengingat kode yang lupa. 

Oh Ya bagaimana dengan editor yang drag n drop, yang memudahkan kita untuk membuat halaman web, seperi misal DreamWeaver, bolehkah digunakan?,  menurut hemat saya tergantung, jika kita sudah profesional sudah memahami secara mendalam struktur web, tool semacam dream weaver untuk urusan agar halaman lebih cepat dibuat itu tidak jadi masalah, tetapi khusus untuk PEMULA, tool semacam dream weaver harus dihindari, kenapa?, tools itu membuat anda tidak mau berfikir keras, padahal pemula sebaiknya memahami lebih dalam struktur dasar html atau bahasa pemrograman lainnya, agar faham yang paling dianjurkan adalah anda mengetikan program secara langsung tanpa bantuan tool instan yang membantu membuatkannya untuk anda, itu akan lebih baik, dan akan membuat anda menjadi programmer yang handal nantinya. jika anda sudah benar-benar paham mengenai pengkodean halaman situs terutama HTML, tidak jadi masalah kita menggunakan tool semacam dream weaver.


Contoh sederhana program HTML

untuk contoh program berikut anda bisa mengetiknya atau coba kopi paste perintah program html dibawah ini kedalam notepat:

<html>
<head>
<title>contoh html</title>
</head>
<body>
<i>ini contoh tulisan miring</i><br/>
<b>ini contoh tulisan ditebalkan</b><br/>
<u>ini contoh tulisan digarisbawahi</u><br/>
<i><b><u>ini contoh tulisan miring ditebalkan dan digarisbawahi</u></b></i>
</body>
</html>

silahkan anda kopi program diatas ke dalam notpad, kemudian simpan, sebelum disimpan pada kotak dialog simpan silahkan atur save as type:  pilih All Files (*.*), kemudian filename atau nama file anda bisa masukan apa saja, jangan lupa untuk memberi akhiran .html atau .htm, misal contoh.html kemudian sialahkan anda simpan.

Untuk melihat outputnya atau hasilnya, silahkan anda menuju lokasi penyipanan file anda tersebut, file berakhiran .htm atau .html, kemudain double klik file tersebut, biasanya file berektensi .htm atau .html itu akan terintegrasi dengan aplikasi browser default, jadi anda tinggal klik file html anda tersebut, nanti akan ditampilkan hasilnya pada browser default anda. misal mozila atau google croome atau bisa juga internet explorer, silahkan anda amati, bahwa kode yang diletakan diantara tag <body> dan</body> itu akan ditampilkan, jika anda sudah menguasai perintah-perintah lainnya, anda akan bisa menampilkanapapun sesuai dengan keinginan.


Demikian informasi yang bisa saya share mengenai Cara Membuat struktur program HTML: khusus Pemula, semoga bermanfaat.

6 komentar:

  1. Replies
    1. Silahkan, jangan lupa untuk menyertakan link sumbernya :D

      Delete
  2. terimakasih ilmunya, apa ini berlaku saat akan mengubah html saat mau memasukkan keyword/diskripsi untuk blog kita pada html. soalnya saya kesulitan memasukkan kata kunci ataupun diskripsi pada html blog saya,

    ReplyDelete
  3. mungkin saya bisa request untuk sesekali mengubah kode html untuk menyisipkan keyword/diskripsi agar lebih cepat dibaca oleh search engine

    ReplyDelete
    Replies
    1. keyword bisa kita masukan di mode editor artikel, tinggal kita ketikan secara otomatis kode html digenerate oleh blog.

      Delete
  4. wih keren ahh.. thankz gan..

    ReplyDelete

Silahkan berkomentar yang sesuai dengan topik, Mohon Maaf komentar dengan nama komentator dan isi komentar yang berbau P*RN*GRAFI, OB*T, H*CK, J*DI dan komentar yang mengandung link aktif, Tidak akan ditampilkan!