itechqe
×

Teori Dasar HTML

Untuk membangun sebuah web page dibutuhkan sebuah Bahasa pemrograman yang lebih dikenal dengan sebutan web scripting. Dikatakan script karena perintah kode program tersebut akan di interpreter dan tidak ada kompilasi untuk menjadikannya executable . Berdasarkan letak proses interpreter maka web scripting dibagi menjadi dua kategori, yaitu bersifat client side dan server side.

Cliend side dilakukan oleh web browser seperti Internet Explorer, Netscape, Opera, dan Firefox. Untuk contoh Bahasa Client side adalah HTML, CSS, Javascript, VBscript, dan XML. Sedangkan server side dilakukan oleh web server seperti PWS (Personal Web Server), IIS, Apache, Tomcat, Xitami, dan ZOPE. Untuk contoh Bahasa server sode adalah ASP (.Net), PHP, JSP, CFM, dan CGI/PL.

Web Scripting yang bersifat client side akan menghasilkan web page yang bersifat statis artinya lebih menekankan pada desain format tampilan informasi dan informasi yang disajikan tidak dapat diupdate seketika, karena tidak dapat dilakukan request interaktif dari pengguna dan proses tidak terjadi di server sehingga tidak akan menghasilkan output apa pun. Sehingga sangatlah tidak mungkin untuk menciptakan aplikasi web yang bersifat dinamis dengan web scripting bersifat clien side ini, tetapi harus di kombinasikan juga dengan web scripting yang bersifat server side.

Pengertian HTML

HTML atau Hypertext Markup Language adalah Bahasa dasar untuk web scripting bersifat client side yang memungkinkan untuk menampilkan informasi dalam bentuk teks, grafik, serta multimedia dan juga menghubungkan antar tampilan web (Hyperlink).. HTML merupakan salah satu format yang digunakan dalam pembuatan dokumen dan aplikasi berjalan di halaman web. Dokumen ini dikenal sebagai web page. Dokumen HTML merupakan dokumen yang disajikan pada web browser.

Ada dua cara untuk membuat sebuah web page,yaitu dengan HTML editor yang berbasis GUI (Graphical User Interface) (misalnya Microsoft Frontpage, Macromedia Dreamweaver, Adobe Dreamweaver, dll) atau dengan editor teks biasa (misalnya Notepad, Notepad++, Atom, dll).Pada HTML editor berbasis GUI program-program ini anda tidak perlu mengetik kode HTMLnya, semua perintahnya di wujudkan secara icon base.Tetapi bagi seorang pengembang aplikasi web maka diperlukan kemampuan penguasaan terhadap kode-kode HTML sangatlah penting, sehingga sangatlah disarankan untuk menguasai kode peintah HTML pergunakanlah terlebih dahulu editor text.

Penamaan Dokumen

Dalam penamaan sebuah dokumen yang akan ditampilkan pada web browser maka nama yang digunakan harus diakhiri dengan ektensi (.html) atau (.htm), misalnya latihan.html

Ekstensi dokumen HTML awalnya 3 karakter untuk mengakomodasikan sistem penamaan dalam DOS. Nama dokumen pada beberappa system operasi bersifat case sensitive, artinya nama yang sama tetapi dituliskan dengan case berbeda akan dianggap sebagai dokumen berbeda,misalnya document.html akan dianggap berbeda dengan DOKUMEN.html kasus case sensitive sering dijumpai di server yang berbasis *nix (sistem operasi Unix)

Elemen HTML

Adalah nama tag atau isi dari tag yang berada diantara tag pembuka dan tag penutup. Sebuah dokumen HTML didefinisikan menggunakan Elemen-Elemen Html. Elemen HTML sendiri merupakan semua yang berada diantara start tag sampai end tag. Elemen Html dapat dibuat secara bersarang disebut Nested Html

Secara umum dokumen web dibagi menjadi dua section (bagian), yaitu section head dan section body, sehingga setiap dokumen harus mempunyai pola dasar sebagai berikut :

<html>
<head>
  <title> VuienDev </title>
</head>
<body>
-- Penulisan --
</body>
</html>

Setiap dokumen HTML harus diawali dengan menuliskan tag 

<html> dan tag </html> di akhir dokumen

Tag ini menandai elemen html, yang berarti dokumen ini adalah dokumen HTML. Dalam satu dokumen hanya ada satu elemen html

Section atau Elemen head ditandai dengan tag

<head> diawal, dan tag </head> di akhir

Elemen ini berisi informasi tentang dokumen HTMLnya. Minimal informasi yang dituliskan dalam elemen ini adalah judul dari dokumen, judul ni akan ditampilkan pada caption bar dari Browser, ditandai dengan menggunakan tag 

<title> dan di akhiri dengan </title>

Section atau Elemen body ditandai dengan tag

<body> diawal, dan tag </body> di akhr

Section ini merupakan elemen terbesar di dalam dokumen html. Elemen body berisi isi dokumen yang akan ditampilkan di Web Browser, meliputi paragraf, grafik, link, tabel, dll

Tag HTML

Untuk menandai sebuah elemen dalam suatu dokumen HTML digunakan Tag HTML, contohnya : 

<img src="img_vuiendev.jpg">

Tag pada umumnya berpasangan dalam tag HTML, contohnya : 

<h1> dan ada tag penutup yaitu </h1>

Ada beberapa elemen yang tidak mengharuskan tagnya dituliskan secara berpasangan, elemen tersebut diantaranya :

  1. Gambar dengan tag <img>
  2. Ganti baris/Line Break dengan tag <br>
  3. Garis datar/Horizontal Rule dengan tag <hr>

Karakteristik penulisan elemen yang diawali dan diakhri dengan tanda tag HTML yaitu :

  1. Tag HTML diapit dengan dua karakter kurung bersudut (angle bracket) [<] dan [>]
  2. Tag HTML secara normal selalu berpasangan seperti <b> dan </b>
  3. Tag pertama dalam suatu pasangan adalah tag awal, dan tag yang kedua merupakan tag akhir
  4. Tag html tidak ‘case sensitive’. Seperti <b> sama dengan <B>
  5. Jika dalam suatu tag ada tag lagi, maka penulisan tag akhir tidak boleh bersilang harus berurut, misalnya <b><i> Huruf tebal dab miring </i></b>

Tag penutup ditandai dengan tanda slash atau garis miring ( / ) di awal tulisannya, tag tersebut di atas memberikan kaidah bahwa yang akan ditulis di antara kedua tag tersebut adalah isi dari dokumen HTML.

Selain itu dalam penamaan tag tidak menganut case sensitive,artinya huruf yang digunakan tidak sensitive antara huruf kapital dan tidaknya, contoh tag : 

<HTML> sama dengan </html>

Persiapan Awal Pembuatan Web HTML

Hal yang dibutuhkan dalam pembuatan web HTML adalah sebagai berikut :

  1. Niat dan Doa
  2. Sebuah computer yang bisa membuka web. Minimal dengan OS Windows, Mac, dll
  3. Editor Text, Notepad atau yang lainnya
  4. Browser web, direkomendasikan Mozila Firefox atau Google Chrome
  5. Imajinasi untuk membangun website sendiri

Mencoba adalah kunci dari cara belajar HTML ini untuk mengetahui langsung apa yang dihasilkan dari setiap tag yang digunakan untuk membuat dan mudah diingat.

Catatan :
Biasakan pada saat menulis tag,tulis tag pembuka dan penutup secara berurutan karena pada sebuah kasus ada orang yang lupa memberi tag penutup.Biasakan juga pada saat menulis kode html tag pembuka dan penutup sejajar karena akan sangat memudahkan pada saat memeriksa kesalahan dan penulisan code-nya, sekian terima kasih