Desain Grafis Indonesia

Selasa, 17 Januari 2017

Bagian 2. Struktur dasar html

Secara garis besar html memiliki struktur dasar seperti berikut :

A. Tag

Tag merupakan teks khusus (markup) berupa dua karakter "<" dan ">", sebagai contoh <body> adalah tag dengan nama body. Tag ditulis secara berpasangan, yang terdiri atas tag pembuka dan tag penutup (ditambahkan karakter "/" setelah karakter "<"), sebagai contoh <body> ini adalah tag pembuka isi dokumen HTML, dan </body>ini adalah tag penutup isi dokumen HTML. Yang merupakan tag-tag dasar dalam HTML adalah:

1. <html> </html>
Tag <html> dan </html> digunakan untuk menandai awal dan akhir dari suatu file

HTML.
2. <title> </title>
Tulisan yang berada diantara tag <title> dan </title> akan ditampilkan oleh browser pada bagian title dan merupakan title dari jendela browser.
3. <head> </head>
Berisi keterangan informasi, seperti title dan jenis dokumen, ditulis diantara <head>

</head>.
4. <body> </body>
Bagian tag <body> </body> menandai awal dan akhir dari badan dokumen HTML. Tag ini memiliki sejumlah attribut yang dapat ditentukan.

B.Elemen

Elemen terdiri atas tiga bagian, yaitu tag pembuka, isi, dan tag penutup.Contonya untuk menampilkan judul dokumen HTML pada web browser digunakan element title, dimana: <title> ini adalah tag pembuka judul dokumen HTML.

C. Atribut

Atribut terdapat di dalam script sebuah elemen dan memberikan informasitambahan tentang elemen. Atribut selalu ditentukan dalam tag awal Atribut ditulis dalam pasangan nama / nilai.

Nilai dari atribut harus selalu tertutup dalam tanda kutip. Tanda kutip ganda adalah yang paling umum, tapi gaya tanda kutip tunggal juga diperbolehkan. Dalam beberapa situasi, ketika nilai atribut itu sendiri berisi tanda kutip, maka perlu menggunakan tanda kutip tunggal Misalnya: name = 'John "shotgun" Nelson'.

Di bawah ini adalah daftar dari beberapa atribut yang dapat digunakan pada setiap elemen HTML :

Atribut	Deskripsi
Class	Menentukan satu atau lebih classnames untuk sebuah elemen(mengacu pada kelas dalam style sheet).
Id	Menentukan id unik untuk sebuah elemen.
Style	Menentukan inline CSS style untuk elemen.
Title	Menentukan informasi tambahan mengenai elemen (ditampilkan sebagai tool tip).

Sumber : http://computertoons.blogspot.co.id/2013/10/struktur-dasar-html-dalam-pembuatan-web.html

Cukup sekian, untuk sesi ini, silakan lanjukan ke sesi berikutnya.

Bagian 1. Pengantar HTML

Apakah itu HTML?

Hyper Text Markup Language (HTML) adalah sebuah bahasa pemrograman yang digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi di dalam sebuah penjelajah web Internet dan pemformatan hiperteks sederhana yang ditulis dalam berkas format ASCII agar dapat menghasilkan tampilan wujud yang terintegerasi.

Sumber : https://id.wikipedia.org/wiki/HTML

Bagaimana cara menjalankan HTML ?

Untuk Memulai menjalankan file HTML, sebelumnya kita memerlukan perangkat pengolah kata (Text editor) yang sederhana seperti Notepad, dan sebuah Web browser seperti Mozilla Firefox, Google Chrome, Internet Explorer, dll.

Notepad digunakan untuk menuliskan teks html, yang selanjutnya akan disimpan dengan ekstensi ".html" atau ".htm", kemudian file yang telah disimpan tersebut akan dibuka menggunakan web browser.

Untuk lebih jelasnya, mari kita ikuti langkah - langkah berikut:

1. Buka Aplikasi Notepad :

kemudian copy paste script berikut ke dalam aplikasi notepad :

<html>

<head>

<title>Contoh Document HTML</title>

</head>

<body>

Apakabar, ini Web Pertamaku.

</body>

</html>

2. Kemudian Simpan dalam ekstensi ".html" (contoh : satu.html)

3. Setelah tersimpan, buka lokasi penyimpanan file tersebut, kemudian eksekusi file tersebut (double click).

4. Maka otomatis file tersebut akan terbuka melalui Web Browser anda.

Cukup sekian, untuk sesi pengenalan html, silakan lanjukan ke sesi berikutnya.

Selasa, 22 April 2014

Game Tembak-Tembakan Ironman VS Droid (Bagian 2)

III. Mempersiapkan MovieClip Musuh
Setelah selesai membuat movieclip tokoh yang bisa menembak bagian1 sekarang kita akan mempersiapkan Movieclip musuhnya.Caranya :
1. Movieclip droid
Buka file ironman.fla, kemudian buatlah gambar droid seperti di bawah ini (Tanpa Tangan dan boost):

Kemudian blok semua objek droid lalu klik kanan-->convert to symbol--> pilih opsi Movieclip, lalu buatlah tangan dan boost bergerak seperti tampilan timeline berikut:

2. Movieclip Meledak
Movieclip Meledak digunakan untuk membuat efek ledakan ketika peluru bertabrakan dengan droid, atau ironman bertabrakan dengan droid. berikut tampilan timelinenya :

IV. Membuat SKOR dan HEALTHBAR
Pada bagian bawah stage, tambahkan tulisan berikut :

Pada bagian yang dilingkari adadah jenis dynamic text, yang nantinya akan menjadi perhitungan skor, atur propertiesnya seperti berikut :

Untuk healthbarnya buat seperti ini :

Kemudian convert ke symbol dengan propertis seperti berikut :

Buat Juga movieclip untuk menampilkan tulisan Game Over jika selesai

V. Action Script Untuk Memanggil Musuh

Sisipkan Skrip berikut untuk memanggil musuh,skor, dan healthbar :

// menambahkan background engan nama yang dikenali oleh stage yaitu iron_mc
_root.attachMovie("Background", "background_mc", 0);
// menambahkan iron dengan nama yang dikenali oleh stage yaitu iron_mc
_root.attachMovie("iron","iron_mc",1);
//menambahkan bar untuk nyawa dengan nama yang dikenali oleh stage yaitu health_mc
//di sini lokasi dari healthbar ditentukan dengan x = 380 dan y = 385
_root.attachMovie("HealthBar", "health_mc", 2, {_x:380, _y:385});
//Menyiapkan skor awal = 0;
skor = 0;
//inisialisasi nyawa sebesar 100
var nyawa = 100;
//memberikan timer
var idInterval = setInterval(panggilMusuh, 1000);
_root.onEnterFrame = function() {

    //memberikan status game over

if (nyawa<=0) {
    // nyawa = 0;

    var depth = _root.getNextHighestDepth();
    {
    _root.getInstanceAtDepth(depth).removeMovieClip();
    }
    //Memunculkan tulisan Game Over
        _root.attachMovie("OVER","OVER1",depth,{_x:0,_y:0});
        clearInterval(idInterval);
        _root.onMouseMove = function() {
    // menghilangkan mouse
    Mouse.hide();
    // menggerakkan iron_mc
    end_mc._x += (_xmouse-end_mc._x);
    end_mc._y += (_ymouse-end_mc._y);
};

     }
    //mengeset agar ukuran dari health_mc menyesuaikan dengan health
    health_mc._width = (nyawa/100)*150;

};
// memberikan event ketika mouse bergerak
_root.onMouseMove = function() {
    // menghilangkan mouse    Mouse.hide();
    // menggerakkan iron_mc
    iron_mc._x += (_xmouse-iron_mc._x);
    iron_mc._y += (_ymouse-iron_mc._y);
};
// memberikan event ketika mouse ditekan
_root.onMouseDown = function() {
    // mendapatkan kedalaman, kedalaman digunakan karena pada 1 depth hanya memiliki 1 objek
    var depth = _root.getNextHighestDepth();
    // menambahkan peluru ke stage
    var peluru = _root.attachMovie("Peluru", "peluru_"+depth, depth, {_x:iron_mc._x, _y:iron_mc._y});
    // memberikan event enterframe pada peluru
    peluru.onEnterFrame = function() {
        // menggerakkan peluru
        this._x += 10;
        // memberikan kondisi jika letaknya melebihi batas
        if (this._x>550) {
            // menghapus peluru (yang melebihi batas)
            removeMovieClip(this);

}

    //melakukan perulangan terhadap musuh
        var kedalamanMusuhSekarang = _root.getNextHighestDepth()-1;

            for (var i = kedalamanMusuhSekarang; i>kedalamanMusuhSekarang-10; i--) {
            if (_root["musuh_"+i].hitTest(this)) {
                removeMovieClip(_root["musuh_"+i]);
                _root.attachMovie("meledak","meledak1",5,{_x:this._x,_y:this._y});

                    skor +=10;
                    removeMovieClip(this);


                }
        }
    };
};
function panggilMusuh() {
//mendapatkan angka random yaitu 0 dan 1
    var angkaRandom = random(2);
//mendapatkan kedalaman, kedalaman digunakan karena pada 1 depth hanya memiliki 1 objek
   var depth = _root.getNextHighestDepth();
   if (angkaRandom == 0) {
      //memanggil musuh
     var musuh = _root.attachMovie("Musuh", "musuh_"+depth, depth, {_x:550, _y:random(400)});
     musuh.onEnterFrame = function() {
         //menggerakkan musuh ke kiri sebanyak 3 piksel
           this._x -= 3;
                //memberikan kondisi jika posisi x berada kurang dari 0, maka objek akan dihapus
                if (this._x<0) {
             removeMovieClip(this);

         }
         //memberikan kondisi jika musuh bertabrakan dengan iron,
           //maka objek akan hilang dan iron akan berkurang darahnya
            if (this.hitTest(_root.iron_mc)) {
               nyawa -= 10;
               _root.attachMovie("meledak","meledak1",5,{_x:this._x,_y:this._y});
               removeMovieClip(this);
            }

        };
    }
    }

Untuk melihat Hasilnya klik link berikut :
Game Ironman

Desain Grafis Indonesia

Laman

Selasa, 17 Januari 2017

Bagian 2. Struktur dasar html

Bagian 1. Pengantar HTML

Selasa, 22 April 2014

Game Tembak-Tembakan Ironman VS Droid (Bagian 2)

Mengenai Saya

Arsip