Pengenalan HTML

Pengenalan HTML

1.1 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.

1.2 Apa itu Dokumen 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, Edit Plus, 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 (misalnya Notepad)

1.3 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 , adalah 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)

1.4 Definisi Elemen

Sebuah dokumen HTML disusun oleh beberapa Elemen. Elemen merupakan istilah bagi komponen-komponen dasar pembentuk dokumen HTML. Elemen dapat berupa teks murni, atau bukan teks, atau keduanya. Beberapa contoh elemen adalah : head, body, table, paragraf, dan list.

1.5 Definisi Tag

Untuk menandai sebuah elemen dalam suatu dokumen HTML digunakan tag. Tag HTML terdiri dari [(<) (nama tag) (>)] contohnya <HTML>, tag pada umumnya berpasangan dalam tag HTML ada tag pembuka yaitu <HTML> dan ada tag penutup yaitu </HTML>,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.

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

-          Paragraf dengan tag <p>

-          Ganti baris/Line Break dengan tag <br>

-          Garis datar/Horizontal Rule dengan tag <hr>

-          List item dengan tag <li>

Secara umum penulisan sebuah tag adalah <nama tag> … </nama tag> selain itu dalam penamaan tag tidak menganut case sensitive,artinya huruf yang digunakan tidak sensitive antara huruf kapital dan tidaknya.Contoh tag <HTML> dengan </html>.

1.6 Elemen HTML yang Dibutuhkan

Elemen dasar yang harus dimiliki sebuah dokumen HTML untuk membuat dokumen tersebut dapat dibaca yaitu tag <html>, <head>, dan <body> berikut tag pasangannya.

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

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.

1.7 Pembuatan Web HTML sederhana

Hal yang dibutuhkan dalam pembuatan web HTML adalah sebagai berikut :

Ø  Sebuah computer yang bisa membuka web. Minimal dengan OS Windows 95/98/NT, Mac, atau Unix.

Ø  Editor Text, Notepad atau yang lainnya

Ø  Browser web, direkomendasikan Mozila Firefox atau Google Chrome

Ø  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.

Pertama yang harus anda lakukan adalah membuka Editor Text, misalnya Notepad.

Tuliskan kode berikut ke dalam Notepad :

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.

1.8 Petunjuk menggunakan Tag

Dalam pembuatan dokumen HTML, penulisan elemen diawali dan diakhri dengan tanda tag HTML memiliki syarat yaitu :

Ø  Tag HTML diapit dengan dua karakter kurung bersudut (angle bracket) [<] dan [>]

Ø  Tag HTML secara normal selalu berpasangan seperti <b> dan </b>

Ø  Tag pertama dalam suatu pasangan adalah tag awal, dan tag yang kedua merupakan tag akhir

Ø  Tag html tidak ‘case sensitive’. Seperti <b> sama dengan <B>

Ø  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>

Gunakan tag dengan huruf kecil (lowercase) karena untuk menyiapkan diri menggunakan HTML berikutnya (Rekomendasi W3C)

1.9 Atribut Tag

Tag dapat mempunyai atribut. Atribut menyatakan sesuatu tentang tag tersebut. Atribut digunakan untuk mengubah default pemformatan dokumen dengan tag yang bersangkutan.Atribut yang dipakai tidak memiliki urutan pendefinisian tertentu.

Tag berikut tidak mempunyai Atribut: <body>. Tag <body> ini tidak menggunakan atribut, sehingga dokumen HTML ditampilkan secara default dari tampilan HTML.

Tag <body bgcolor=”#FFF”. Maka tag <body> ini mempunyai atribut beruppa warna backbround Putih. Secara umum tag dengan atributnya adalah

1.10 Tips : Belajar HTML Lewat Source HTML lain

Belajar HTML akan lebih efektif jika kita sering berlatih dan melihat bagaimana programmer lain mendesain webnya.

Pernahkah anda meliha suatu web page dan terkagum melihatnya? Untuk mengetahui cara membuatnya, mudah saja. Klik kanan mouse pada Browser, kemudia pilih VIEW SOURCE.

Ini akan membuka sebuah Tab baru yang memperlihatkan kode HTML sebenarnya dari page tersebut. Dengan melihat source ini diharapkan anda dapat melihat dan mempelajari teknik untuk menghasilkan halaman web yang anda kagumi.

Komentar