Dasar HTML

HTML merupakan akronim dari Hyper Text Markup Language. Html tidak termasuk dalam bahasa pemograman, melainkan bahasa markah (markup language). Bahasa markah adalah bahasa yang deklaratif dan menggunakan berbagai tags dan atribut untuk menggambarkan tampilan dari sebuah dokumen.

Misalkan saja terdapat dokumen dengan teks

contoh dokumen html

untuk membuat teks tersebut tampil dengan huruf yang tebal, maka ditambahkan tag <b> di antara teks yang akan ditebalkan. Misal

contoh <b>dokumen</b> html

akan tampil di browser menjadi

contoh dokumen html

teks ‘<b>’ disebut dengan opening tag, sedangkan ‘</b>’ disebut sebagai closing tag. Setiap end tag, selalu dimulai dengan garis miring (slash, / ). Namun ada juga jenis tag yang lain, yang disebut dengan self-closing tag. Yaitu tag yang berdiri sendiri dan tidak membutuh kan closing tag. Tag seperti langsung menggunakan slash di akhir kode tagnya. Misalkan ‘<br />’ untuk ganti baris, atau ‘<hr />’ untuk membuat garis horisontal.

Membuat Dokumen HTML Pertama

HTML merupakan bahasa yang berbasis pada teks. Kita dapat menggunakan berbagai teks editor untuk membuat dokumen HTML. Namun, saya menyarankan untuk menggunakan Bluefish. Selain karena open source, bluefish juga bersifat gratis dan multiplatform. Bluefish memang editor yang dirancang khusus untuk progammer dan web developer. Bluefish mendukung banyak bahasa pemograman dan bahasa markup.

Buat sebuah dokumen baru menggunakan bluefish, lalu copy paste baris kode berikut :

<!DOCTYPE html>

<html>

<body>

<h1>Hallo, HTML</h1>
<p>Ini adalah contoh halaman HTML</p>

</body>

</html>

Lalu simpan dokumen tersebut dengan format .html. Maka tampilan dari dokumen yang telah disimpan akan menjadi seperti ini :

Dengan menggunakan bluefish, file html yang telah disimpan dengan format .html, akan berwarna berbeda pada setiap tag nya. Hal ini karena secara otomatis bluefish bekerja dengan Language Mode Generic HTML.

Sekarang kita coba buka file HTML yang telah kita simpan dengan menggunakan browser. Dan inilah yang akan terlihat:

Teks yang muncul pada browser, memiliki ukuran yang berbeda. Tag ‘<h1>’ merupakan tag untuk style Header 1. Sedangakan tag ‘<p>’ merupakan tag untuk style Paragraf. Teks yang diapit dengan tag Header 1 akan berukuran sesuai dengan standar ukuran Header pada browser, begitupula dengan teks yang diapit tag Paragraf.

Baris pertama pada dokumen html kita menjelaskan tipe dari dokumen tersebut.

<!DOCTYPE html>

Browser yang digunakan untuk membuka dokumen kita membutuhkan informasi ini untuk mengetahui jenis dokumen yang dibuka.

Selanjutnya yaitu baris opening tag

<html>

Tag ini merupakan tag utama. Setiap dokumen html dimulai dengan tag ini, dan kemudian diakhiri dengan tag ‘</html>’.

Begitu pula dengan tag ‘<body>’. Setiap hal yang akan ditampilkan kedalam browser, diletakkan di dalam tag ini.

 

Salam,
Afief Yona Ramadhana

May 26, 2012 Comment

let’s start again from scratch

Wah, udah lama gak nulis di blog ini. Kalau ditanya alesan, da pasti banyak. 🙂

Oke, kali ini saya akan coba mulai tulisan berseri lagi. Berhubung akhir – akhir ini sering dapet kerjaan yang berhubungan dengan website, jadi saya akan mulai menulis tutorial – tutorial pemograman website. Dan akan saya mulai dari hal yang sangat sederhana. Ada beberapa bahasa yang akan digunakan ketika membuat website.

  1. HTML
  2. CSS
  3. Javascript
  4. PHP
  5. SQL

HTML (HyperText Markup Language) adalah sebuah bahasa markah yang digunakan untuk menampilkan informasi yang terkandung didalamnya yang juga telah di tambahkan kode – kode markah sehingga menciptakan tampilan yang dikehendaki. Bahasa Markah sendiri adalah bahasa yang mengkombinasikan kode dan informasi sehingga informasi yang ditampilan dapat mempunyai bentuk yang berbeda – beda sesuai dengan kode yang ditambahkan.

HTML merupakan bahasa Client Side, yang artinya, kode – kode HTML akan di terjemahkan langsung oleh browser dari komputer pengguna menjadi tampilan yang memuat informasi di dalamnya. Untuk melihat kode – kode HTML dari tampilan website kalian, tinggal klik kanan, lalu pilih ‘view page source‘.

CSS (Cascading Style Scheets) merupakan bahasa pemograman yang digunakan untuk mengatur komponen – komponen pada HTML sehingga tampil lebih rapi dan menarik. CSS tidak dapat dipisahkan dari HTML, meskipun HTML dapat berdiri sendiri tanpa CSS.  CSS bersifat melengkapi HTML.

Javascript merupakan bahasa pemograman client side yang dapat bekerja di hampir semua browser. Javascript di dalam web digunakan untuk membuat tampilan website menjadi lebih dinamis dan interaktif. Berbagai animasi interaktif yang menarik dapat dibuat dengan menggunakan javascript. Salah satu library (kumpulan fungsi) dari javascript yang paling terkenal adalah jQuery.

PHP (PHP Hypertext Prepocessor) adalah bahasa pemograman yang bersifat server side. Itu artinya, instruksi – instruksi dalam PHP akan dijalankan sepenuhnya di server lalu hasilkan akan dikirimkan ke browser. Karna bersifat server side, maka kita tidak dapat melihat kode sumber PHP dari sebuah halaman website.

SQL (Structured Query Language) merupakan bahasa yang digunakan untuk mengakses dan mengatur database. Perangkat lunak yang dimanage oleh bahasa ini adalah MySQL. Database sangat penting dalam pembuatan website, karna ini merupakan tempat menyimpan data – data yang diperlukan untuk website tersebut.

May 25, 2012 Comment

Membuat MiniFlashGame dengan Flixel – Part 4

Di bagian keempat ini, kita akan membuat peluru dan menembakkannya melalui meriam yang telah kita buat pada tutorial bagian sebelumnya.

Buka project game yang telah dibuat pada bagian sebelumnya. Siapkan 1 buah gambar dan suara peluru. Gambar yang saya gunakan berukuran 16×16 px.

Lalu siapkan pula 1 buah file suara peluru ketika ditembakkan. Sebaiknya berformat .mp3. File yang saya gunakan >> shoot. Masukkan kedua fle tersebut ke dalam folder ‘src’.

Buat class baru dengan nama “peluru.as“. Ganti baris – baris kode default dengan kode-kode di bawah ini

package  
{
	import org.flixel.*;

	public class Peluru extends FlxSprite
	{
		[Embed(source = "peluru.png")]protected var imgPeluru:Class;
		[Embed(source = "shoot.mp3")]protected var sndTembak:Class;

		public function Peluru()
		{
			loadGraphic(imgPeluru, true, true, 16, 16);
			width = 14;
			height = 14;
			offset.x = 1;
			offset.y = 1;
			acceleration.y = 400;
			maxVelocity.y = 550;
			health = 1;
		}
		public function tembak(Location:FlxPoint, Angle:Number):void {
			super.reset(Location.x-width/2,Location.y-height/2);
			FlxU.rotatePoint(0,-800,0,0,Angle,_point);
			velocity.x = 0- _point.x;
			velocity.y = 0 - _point.y;
			solid = true;
			FlxG.play(sndTembak);
		}
		override public function update():void {
			if (touching || !onScreen()) kill();
			super.update();
		}
	}
}

kita membuat fungsi baru yaitu fungsi tembak dengan parameter ‘Location’ dan ‘Angle’. Parameter ‘Location’ berfungsi untuk menentukan dari posisi mana peluru itu ditembakkan, sedangkan ‘Angle’ akan berisi sudut yang sesuai dengan sudut ”pemain” segingga peluru yang ditembakkan akan selaras dengan posisi pemain.

Kemudian buka kembali class ‘Arena.as’. Tambahkan sebuah variabel baru di dalam class

protected var _peluru:FlxGroup;

Lalu letakkan ke dalam stage. Agar kelihatan ketika ditembakkan, maka posisi peluru harus berada di atas background. letakkan baris-baris kode berikut di bawah kode “add(_bg);”

_peluru = new FlxGroup();
add(_peluru);

kemudian buat sebuat fungsi baru untuk mengoverride fungsi update

override public function update():void {
	if (FlxG.mouse.justPressed()) {
		(_peluru.recycle(Peluru) as Peluru).tembak(_pemain.getMidpoint(), _pemain.angle);
		_pemain.play("nembak");
	}
	super.update();
}

Sekarang coba jalankan game nya (F5), jika tidak ada error, maka ketika mouse di klik, pemain akan mengeluarkan tembakan.

download src

January 22, 2012 Comment

Membuat MiniFlashGame dengan Flixel – Part 3

Sampai di bagian ketiga tutorial membiat MiniFlashGame dengan Flixel. Kalau kalian baru membaca tutorial ini, maka sebaiknya membacanya dari bagian pertama, kemudian bagian kedua.

Dibagian ketiga ini kita akan membuat latar game dan pemain. Bersiaplah. Buka project yang telah dikerjakan pada bagian pertama dan bagian kedua.

Kita akan membuat latar game terlebih dahulu. Latar game yang akan kita gunakan berupa gambar statis. Siapkan gambar yang akan kita gunakan untuk latar. Atur ukurannya sehingga pas dengan ukuran game kita. Dalam hal ini game yang sedang kita buat berukuran 550×400 px. Format gambar bisa .jpg, atau bisa juga .png.

Gambar yang saya gunakan dalam membuat game ini

(more…)

January 18, 2012 Comments

Membuat MiniFlashGame dengan Flixel – Part 2

Ini lanjutan dari tutorial sebelumnya. Jadi, kalau ada yang baru membaca, ikuti tutorialnya dari http://code.afief.net/?p=104 🙂

Oke, di bagian kedua ini, kita akan membuat tampilan awal game, dan arena pada game. Pada bagian pertama kita sudah membuat project berisi file Main.as yang apabila dijalankan maka akan menghasilkan 1 error, yaitu “D:\x_periment\coba\MiniGame\src\Main.as(12): col: 20 Error: Access of undefined property Pembukaan.”

Error tersebut terjadi karena kita belum membuat class yang diisikan pada InitialState pada fungsi super(). Untuk membuatnya, klik kanan pada folder src pada Project Panel, pilih Add > New Class.

(more…)

January 17, 2012 Comment

Membuat MiniFlashGame dengan Flixel – Part 1

Seperti yang sudah saya tulis sebelumnya di http://code.afief.net/?p=98, bahwa flixel merupakan library actionnscript3 yang sangat membantu dalam pembuatan mini games. Saya akan mencoba untuk menulis tutorial pembuatan mini games dengan menggunakan flixel. Produk akhir dari tutorial ini nantinya yaitu game “ufogelo” yang coba saya buat di afief.net/ngulik/ufogelo1.x.

Yang harus disiapkan yaitu :

  1. Flash Develop / Flash Builder yang dapat di download secara gratis di http://www.flashdevelop.org/ atau di http://www.adobe.com/products/flex.html
  2. Flex SDK, dapat di download dengan gratis di website adobe, http://www.adobe.com/cfusion/entitlement/index.cfm?e=flexsdk
  3. Flixel, download secara gratis di http://flixel.org/download.html

(more…)

January 15, 2012 Comments

Flash Games dengan Flixel

Flixel merupakan library untuk bahasa Actionscript 3 yang di desain khusus untuk pembuatan game. Flixel dibuat oleh Adam Saltsman yang terkenal dengan mini game nya, Canabalt. Flixel banyak digunakan oleh orang – orang yang ingin membuat flash game dengan cepat dan mudah.

Flixel berisi fungsi-fungsi yang memudahkan pengguna untuk mengatur game nya. Fungsi yang menurut saya cukup menarik dalam library actionscript 3 ini yaitu ‘Collide’. Fungsi ini dapat mendeteksi objek yang bertabrakan, dan kita dapat menambahkan ‘function callback’ dari fungsi ini sendiri. Selain itu, kita juga dapat mendeteksi tabrakan dari banyak objek dengan 1 perintah collide saja dengan sebelumnya menggabungkan objek-objek tersebut menggunakan class ‘flxGroup’.

(more…)

January 14, 2012 Comment

View Based Application pada Flash Builder 4.5

Ketika kita membuat mobile project baru di Flash Builder 4.5. Kita akan diberikan 3 pilihan template tampilan aplikasi mobile. yaitu Blank, View-Based Application, dan Tabbed Application. Kalau blank, sudah jelas kita akan diberikan tampilan kosong. Sedangkan untuk View-Based Application, akan ada title bar di bagian atas yang juga bisa berfungsi sebagai navigator.  Sedangkan Tabbed Application lebih komplit lagi, ada menu ‘tab’ di bagian bawahnya untuk mempermudah navigasi.

(more…)

November 22, 2011 Comment

Accelerometer di Android dengan Flash CS5.5

Hai,, kemarin saya mencoba membuat video tutorial tentang bagaimana menggunakan fitur Accelerometer di Android. Saya menggunakan Flash CS5.5. Video tutorial ini masih amatir, jadi harap maklum ya. Berhubung videonya jadinya panjang, jadi saya bagi menjadi 2 video supaya bisa masuk ke YouTube.. Semoga bisa membantu .. 🙂

  (more…)

November 16, 2011 Comment