HTML (Hyper Text Markup Language)

Definisi HTML
HTML (Hyper Text Markup Languange) adalah bahasa pengkodeaan untuk menghasilkan dokumen-dokumen hypertext untuk digunakan di World Wide Web. HTML terlihat seperti bahasa pengkodean lama, yang di awali dan diakhiri dengan kode-kode html dimana menunjukkan bagaimana keluarannya pada saat di jalankan pada sebuah web browser.

Program Editor HTML
Untuk membuat aplikasi web, dalam hal ini menggunakan HTML, maka kita membutuhkan suatu editor guna mengetikkan,mengedit atau menyimpan dokumen dokumen HTML. Editor untuk memdesain suatu web dibagi 2 yaitu yang bersifat text murni dan yang WYSIWYG (Graphic) Editor untuk text, anatara lain Notepad dan Ultra Edit. Sedang editor WYSIWYG adalah Netscape dan Front Page.

Struktur Dasar HTML
Seperti umumnya dokumen lain, dokumen HTML terdiri dari teks-teks dan bahkan lebih dari dari itu. Dokumen HTML juga dapat mengandung suatu gambar, suara, ataupun video. Satu hal yang membedakan dokumen HTML dengan dokumendokumen lainnya adalah adanya elemen-elemen HTML beserta tag-tagnya. Elemen dan tag HTML berfungsi untuk menformat atau menandai suatu bagian tertentu dari
dokumen HTML dan juga untuk menentukan struktur bagian tersebut dalam dokumen HTML. Elemen dan Tag inilah yang merupakan ciri utama dari suatu dokumen HTML. Secara garis besar, untuk menulisakn sebuah dokumen HTML dibutuhkan kerangka penulisan dengan tag-tag dasar sebagai berikut HTML, HEAD,TITLE dan BODY.
Sebagai contoh berikut ini adalah penulisan HTML minimal yang menggunakan tag tag dasar tersebut

<HTML>
<HEAD>
<TITLE> Judul dokumen </TITLE>
</HEAD>
<BODY>
data-data yang akan di tampilkan
</BODY>
</HTML>

Elemen dan Tag HTML
Dua komponen utama pembentuk dokumen HTML adalah Elemen dan Tag Dengan adanya dua komponen ini, maka kita dapat membuat dokumen HTML dengan baik

Elemen
Dalam dokumen HTML, elemen dibagi menjadi dua kategori utama, yaitu elemen-elemen <HEAD> yang berikan informasi tentang dokumen tersebut, seperti judul dokumen astau hubungannya dengan dokumen lain. Elemen-elemen <BODY> yang menentukan bagaimana isi suatu dokumen ditampilkan oleh browser, seperti paragraf, list (daftra), tabel dan lain-lain. Di dalam elemen HTML terdiri dari tag-tag beserta teks yang ada dalam tag-tag tersebut.

Tag
Pada saat web browser menampilkan suatu web page, browser tersebut akan membaca teks-teks pada dokumen HTML, dan mencari kode khusus yang disebut tag. Tag diapit oleh tanda <>. Tag biasanya merupakan pasangan, yang disebut tag awal dan tag akhir. Tag awal dinyatakan dalam bentuk <nama tag> sedang tag akhir dinyatakan dalam bentuk </nama tag>. Format umum suatu tag berpasangan adalah :
<nama tag> Teks yang akan ditampilkan </nama tag>
Sebagai contoh untuk menampilkan teks dalam format miring digunakan elemen I (italic), seperti contoh di bawah ini:
<i> Teks ini akan tercetak miring bila dilihat di browser </i>
Penulisan program yang baik adalah secara terstruktur. Artinya antara tag pertama dan tag berikutnya tidak saling tumpang tindih.

Kemungkinan kesalahan yang terjadi adalah lupa memberi tag awal atau tag akhir sehingga web page yang dihasilkan akan terlihat lain dari yang diinginkan. Tidak semua tag mengikuti aturan seperti diatas, terdapat beberapa macam bentuk tag yang dikenal oleh HTML, di mana umumnya tag-tag dalam HTML muncul dalam bentuk seperti berikut :

<nama tag>teks</nama tag>
<nama tag>
<nama tag atribut1=argumen atribut2=argumen dst>
<nama tag antribut=argumen>teks</nama tag>

Sebagai contoh :
<Title> Home Page Irawan </Title>
<BR>
<HR Width=10 color=”red”>
<A Href=http://www.andiharmin.ga/>WebSite ANDI HARMIN </a>

Desain HTML
Untuk mempermudah pemahaman diberikan contoh dalam bentuk file HTML
<html>
<head>
<title>Modul Pengantar Ilmu Komputer</title>
</head>
<body>
<h1>Klasifikasi dan Kegunaan Komputer</h1>
Komputer berasal dari kata <i>to compute</i> yaitu menghitung.Jadi
pada awalnya komputer hanya digunakan sebagai alat hitung, namun
perbedaan yang mendasar dengan kalkulator adalah bahwa komputer
mempunyai perkembangan zaman, komputer digunakan manusia untuk
memproses pemecahan masalah.
<hr>
Untuk lebih jelas tentang kegunaan komputer, komputer dibagi dalam
beberapa klasifikasi, yaitu :
<h5>
<ol>
<li><a href="jenis_data.html">Berdasarkan Jenis Data Yang Diolah
</a> </li>
<li><a href="kemampuan.html">Berdasarkan Kemampuan Komputer </a>
</li>
<li><a href="ukuran_fisik.html>Berdasarkan Ukuran Fisik</a></li>
<li><a href="bidang_masalah.html> Berdasarkan Bidang Masalah </a>
</li>
</ol>
</h5>
</body>
</html>

Untuk menampilkan hasilnya, kita buka internet explorer dan buka file html tersebut.

Untuk lebih memahami tentang pemrograman web HTML...silahkan download disini

Pemrograman web menggunakan JAVASCRIPT

A. Sekilas tentang JavaScript
Javascript adalah bahasa skrip yang ditempelkan pada kode HTML dan diproses di sisi klien. Dengan adanya bahasa ini, kemampuan dokumen HTML menjadi semakin luas. Sebagai contoh, dengan menggunakan JavaScript dimungkinkan untuk memvalidasi masukanmasukan pada formulir sebelum formulir dikirimkan ke server. Javascript bukanlah bahasa Java dan merupakan dua bahasa yang berbeda. Javascript diinterpretasikan oleh klien (kodenya bisa dilihat pada sisi klien), sedangkan kode Java dikompilasi oleh pemrogram dan hasil kompilasinyalah yang dijalankan oleh klien.
B. Struktur JavaScript 
Struktur dari JavaScript adalah sbb :

Keterangan : Kode <!- - // - - > umumnya disertakan dengan tujuan agar sekiranya browser tidak mengenali JavaScript maka browser akan memperlakukannya sebagai komentar sehingga tidak ditampilkan pada jendela browser.
C. JavaScript sebagai bahasa 
Pada obyek Properti Properti adalah atribut dari sebuah objek. Contoh, objek mobil punya properti warna mobil. Penulisan :
Nama_objek.nama_properti = nilai
window.defaultStatus = ”Selamat Belajar JavaScript”;
Metode Metode adalah suatu kumpulan kode yang digunakan untuk melakukan sesuatu tindakan terhadap objek. Penulisan : Nama_objek.nama_metode(parameter) document.write (”Hallo”)
D. Letak JavaScript dalam HTML
 Skrip Javascript dalam dokumen HTML dapat diletakkan pada :
1. Bagian Head
2. Bagian Body (jarang digunakan).
 Modul lengkap dapat didownload pada kategori Materi dan modul belajar atau bisa juga disni

CSS (CASCADING STYLE SHEET)

Tentang CSS CSS (Cascading Style Sheet) adalah standard pembuatan dan pemakaian style untuk dokumen terstruktur , CSS digunakan untuk mempersingkat penulisan tag HTML seperti font,color,text, dan table menjadi lebih ringkas sehingga tidak terjadi pengulangan tulisan. Keuntungan menggunakan CSS • Memisahkan presentastion sebuah dokumen dari content document itu sendiri. • Mempermudah dan Mempersingkat pembuatan dan pemeliharaan dokumen web • Mempercepat proses rendering/pembacaan HTML. Cara penulisan CSS Inline style sheet Penulisan didalam elemen HTML.

Untuk lebih lengkap silahkan download modul-modul belajar CSS diblog ini pada kategori Materi dan modul belajar

HTML 5

Penulisan HTML 5
Deklarasi awal agar kita menggunakan HTML 5 ialah hanya menulis "" pada awal halaman yang kita buat. Hal tersebut untuk membedakan HTML 5 dan HTML 4.

Pengenalan HTML 5 Dalam HTML 5 ada beberapa bagianyang membedakan tiap jenisnya, yaitu :
• Graphics / Multimedia
 • Semantics & Markup
• Offline / Storage
• Realtime / Communication
• File / Hardware Access
• CSS3
• Nuts & Bolts HTML5 Multimedia Pada HTML 5, kita dapat memutar suatu video maupun lagu hanya dengan scipt saja, tidak membutuhkan bantuan dari player. Ada dua jenis HTML 5 multimedia, yaitu :
 • HTML5-video
• HTML5-audio HTML 5 video
Terdapat tiga jenis format video yang dapat di putar di HTML 5 ini, Ogg, mp4 dan Webm. Setiap browser support berbeda-beda browser. Penulisannya : Script :



Contoh : Your browser does not support the video tag. *anda tidak dapat memplay vidio ini karena file audio di atas hanya sebagai contoh. HTML 5 audio Terdapat tiga jenis format video yang dapat di putar di HTML 5 ini, Ogg, mp4 dan Waw. Setiap browser support berbeda-beda browser. Penulisannya : ''
download http://uploadboy.me/cxscxf7a61zs/html5_tutorial.pdf untuk dapatkan materi ini selengkapnya atau disini juga boleh tentang materi html 5 video

Tutorial Desain web menggunakan macromedia dream weaver

Cara membuat website menggunakan Dreamweaver ternyata mudah dipelajari lho, yuk kita lihat tutorial nya.
Setelah semua bahan untuk design dan content web sudah siap, langkah membuat website berikutnya adalah menerjemahkan design yang telah kita buat kedalam bahasa pemrograman. Ada 2 cara untuk membuat script website, yaitu :

• Dengan cara Instant, Instan disini kita bisa dengan mudah menerjemahkan design kita kedalam bahasa pemrograman dengan bantuan software – software semacam dreamweaver, frontpage dan lain – lain.
• Dengan cara manual, Apabila anda lebih prefer membangun website anda secara manual, maka baca ulasan berikut ini: untuk text Anda harus merubahnya ke dalam file yang berformat HTML (umumnya berakhiran .htm atau .html) agar dapat dibaca oleh program Internet Explorer/Firefox (browser Anda). Apabila Anda belum mempelajari bahasa HTML, CSS, Javascript dan lain –lain anda bisa baca – baca artikel yang sudah kami sediakan di web prothelon.com. Untuk pembuatan web secara manual hanya membutuhkan notepad atau notepad++

Nah, untuk kali ini yang akan kita bahas adalah cara membuat website menggunakan dreamweaver. Adobe Dreamweaver memberi kemudahan untuk merancang dan menata halaman demi halaman website, dengan menyediakan berbagai Tools yang siap pakai. Sangat mudah untuk menyisipkan elemen-elemen apapun yang kita perlukan, seperti Text, Gambar, atau Media lain sekalipun (suara, film, animasi flash, dll.)
Dengan cara ini kita bisa membuat halaman website yang canggih dan dilengkapi dengan berbagai media masa kini, tanpa harus tahu sedikitpun pemrograman di dalamnya. Adobe Dreamweaver telah menyiapkan berbagai perangkat siap pakai dan akan menuliskan kode-kode yang diperlukan ketika kita menggunakan perangkat tersebut.

Nah, berikut ini kita akan latihan cara membuat website sederhana dengan bantuan macromedia dreamweaver :

• Buka aplikasi dreamweaver, klik html.
• Membuat table, dengan cara insert – Table – Isikan Rows = 1, Columns = 1, Table Width = 100 %
• Setelah membuat table, arahkan Kursor ke dalam tabel yang kita buat tadi.
• Buat table yang kedua yang nantinya akan digunakan sebagai layout website kita, seperti contoh : Rows = 4, Columns=2 dan Table Width = 900 Pixel, Tabel ini bisa anda atur sesuai dengan kebutuhan anda
• Atur table mulai dari Header, Footer dll
• Membuat menu dengan cara, Insert – Spry – Spry Menu Bar
• Menu ini bisa kita pilih, apakah akan horizontal atau vertical.
• Save!

untuk tutorial belajar dreamweaver, agan-agan bisa download disini