Pengertian E-Commerce dan Contohnya, Komponen, Jenis, dan Manfaat E-Commerce

Pengertian E-Commerce

Arti E-commerce (Electronic Commerce) dapat juga didefinisikan sebagai aktivitas penggunaan teknologi informasi dan komunikasi pengolahan digital dalam melakukan transaksi bisnis untuk menciptakan, mengubah, dan mendefenisikan kembali hubungan antara penjual dan pembeli.

Secara sederhana pengertian E-commerce dapat diartikan sebagai aktivitas transaksi jual-beli barang, servis atau transmisi dana atau data dengan menggunakan elektronik yang terhubung dengan internet. Transaksi e-commerce ini bukan lagi hal baru di tanah air, bahkan perkembangannya terbilang sangat pesat.

Sejarah E-Commerce

Awal kemunculan e-commerce dimulai dari tahun 1960 an saat bisnis menggunakan EDI  (Electronic Data Interchange) populer. Kemudian tahun 1979, American Standars Institute mengembangkan ASC X12.

ASC X12 kerap digunakan untuk saling share dokumen menggunakan perangkat elektronik dan terus berkembang di tahun 1980 an dan 1990 an sampai lahirnya salah satu perusahaan terbesar, eBay dan Amazon yang membuat revolusi dunia e-commerce.

Sekarang konsumen bisa membeli produk apapun dengan jumlah tak terbatas secara online.

Jenis-Jenis E-commerce

Ada beberapa jenis transaksi di dalam e-commerce ini, antara lain bisnis ke bisnis, bisnis ke konsumen, konsumen ke konsumen atau konsumen ke bisnis. Karena itu, istilah e-commerce dan e-business selalu dikaitkan.

1. E-Commerce Business to Business (B2B)

Transaksi e-commerce ini dilakukan oleh dua belah pihak yang sama-sama memiliki kepentingan bisnis. Dua belah pihak ini saling mengerti dan mengetahui bisnis yang dijalankan.

Umumnya bisnis tersebut dilaksanakan secara berkesinambungan, atau secara sederhana berlangganan. Contoh sederhana dari B2B ini yaitu produsen dan suplier yang saling bertransaksi secara online baik untuk konsultasi kebutuhan barang, hingga proses pembayarannya.

2. E-commerce Business to Consumer (B2C)

Business to consumer dilakukan oleh pelaku bisnis dan konsumen. Transaksi e-commerce ini terjadi layaknya jual-beli biasa. Konsumen mendapatkan penawaran produk dan melakukan pembelian secara online.

3. E-commerce C2C (Konsumen Ke Konsumen)

Untuk C2C, traksaksi dilakukan oleh konsumen ke konsumen. Kalau Anda sering menggunakan Tokopedia, Bukalapak, OLXdan sejenisnya, maka inilah yang dinamakan B2C e-commerce.

Transaksi jual beli di lakukan secara online melalui marketplace. Jadi C2C disini menjadi perantara antara penjual dan pembeli.

4. Consumen to Busines (C2B)

C2B adalah kebalikan B2C yang mana konsumen terakhir bertindak sebagai penjual dan perusahaan bertindak sebagai pembeli.

5. Media atau Aplikasi E-commerce

Seperti yang dijelaskan dalam pengertian e-commerce diatas, transaksi bisnis ini bergantung pada sejumlah aplikasi dan media online  lainnya, misalnya katalog, email, shopping carts, eb service, EDI dan file transfer protocol. Hal ini tentunya melibatkan kegiatan B2B (business to business).

Baca juga:

Contoh E-Commerce di Indonesia

Sebenarnya bisnis e-commerce di Indonesia sudah berlangsung sejak lama. Beberapa contoh e-commerce di Indonesia antara lain:

1. Jual Beli Online di Marketplace

Transaksi jual-beli online di Marketplace lokal sudah sangat marak saat ini. Beberapa marketplace terkenal di Indonesia seperti; Bukalapak.com, Tokopedia.com, Blibli.com, Kaskus.co.id, Traveloka, dan lain sebagainya.

2. Internet Banking dan SMS Banking

Transaksi pembayaran melalui internet dan jaringan telekomunikasi juga merupakan bagian yang tak terpisahkan dari kegiatan e-commerce.

3. TV Kabel dan Internet Provider

Berlangganan TV Kabel dan internet juga merupakan salah satu bentuk e-commerce yang sudah cukup lama berlangsung di Indonesia. Beberapa perusahaan yang ada di bisnis TV kabel dan internet provider diantaranya; Indovision, Big TV, Indihome, MyRepublic, dan Firstmedia.

Komponen E-Commerce

Pada praktiknya, di dalam e-commerce terdapat beberapa komponen standar yang mendukung proses operasionalnya, diantaranya adalah:

1. Produk

E-commerce mendukung penjualan berbagai jenis produk, mulai dari produk fisik hingga produk digital

• Produk digital: ebook , membership, software, musik, dan lain-lain
• Produk fisik: buku, pakaian, gadget, makanan, dan lain-lain

2. Tempat Menjual Produk

Kegiatan e-commerce dilakukan di internet, maka dibutuhkan domain dan hosting untuk membuat website sebagai media pemasaran (baca: pengertian pemasaran)

3. Cara Menerima Pesanan

Ada banyak cara yang bisa dilakukan untuk meneriman pesanan. Diantaranya adalah dengan memanfaatkan email, telepon, SMS, Chatting (baca pengertian chatting), dan lain-lain.

4. Metode Pembayaran

Beberapa metode pembayaran e-commerce pada umumnya menggunakan transfer via ATM, kartu kredit, COD, e-payment

5. Metode Pengiriman

Cara pengiriman barang e-commerce di Indonesia biasanya menggunakan jasa pengiriman barang (JNE, TIKI, Pos Indonesia, dan lain-lain). Namun, ada juga yang menggunakan jasa antar dari Ojek Online.

6. Customer Service

Layanan pelanggan merupakan komponen yang sangat penting dalam operasional e-commerce. Aktivitas ini umumnya dilakukan melalui email, formulir online, FAQ, telepon, chatting, dan social media.

Manfaat E-Commerce Bagi Bisnis dan Konsumen

Dari sudut pandang bisnis, E-Commerce memberikan banyak sekali manfaat bagi para pengusaha. Beberapa manfaat e-commerce dalam dunia bisnis diantaranya:

1. Manfaat E-Commerce Bagi Pelaku Bisnis

• Kemudahan dalam aktivitas jual beli
• Memangkas biaya pemasaran
• Kemudahan dalam berkomunikasi dengan konsumen dan produsen
• Dapat menjangkau target market yang lebih luas
• Penyebaran informasi lebih mudah dan cepat
• Proses pembayaran menjadi lebih mudah dan cepat

2. Manfaat E-Commerce Bagi Konsumen

• Konsumen dapat berbelanja dengan lebih mudah selama 24 jam sehari sepanjang tahun
• Konsumen dapat melihat berbagai pilihan produk yang dianggap terbaik dengan harga yang paling sesuai
• Konsumen dapat membeli produk dan jasa dengan biaya yang lebih mudah setelah melakukan perbandingan dengan berbagai e-commerce

Dampak Positif dan Negatif E-commerce

E-commerce memberikan keuntungan tersendiri bagi mereka yang memanfaatkannya. Namun, di sisi lain ternyata e-commerce juga punya dampak negatif.

1. Dampak Positif E-commerce

• Munculnya aliran penghasilan baru yang mungkin lebih menjanjikan yang tidak ada pada sistem jual-beli dengan cara tradisional
• E-commerce memberikan peluang untuk meningkatkan market exposure
• Berpotensi untuk memperluas jangkauan secara global (global reach)
• Kesempatan untuk mengurangi biaya operasional (operating cost)
• Kemudahan dalam membangun dan meningkatkan customer loyality
• Meningkatkan mata rantai pendapatan (value chain)
• Membantu mempersingkat waktu produksi
• Dapat meningkatkan supplier management

2. Dampak Negatif E-commerce

• Potensi terjadinya penipuan dimana seseorang kehilangan dari segi finansial karena kecurangan pihak lain.
• Kemungkinan terjadinya pencurian data dan informasi rahasia dan berharga yang dapat mengakibatkan kerugian besar kepada korban
• Potensi terjadinya kehilangan kesempatan bisnis atau kerugian pelanggan yang diakibatkan oleh gangguan sistem, misalnya human error dan gangguan listrik tiba-tiba.
• Kemungkinan terjadinya akses yang dilakukan orang lain tanpa autorisasi, misalnya hacker yang membobol sistem perbankan.
• Kampanye negatif via internet yang dilakukan kompetitor yang dapat berakibat buruk bagi sebuah bisnis
• Potensi kerugian yang bisa terjadi akibat kesalahan manusia baik itu sengaja atau tidak sengaja, dan juga kerusakan sistem elektronik

E-Commerce di Indonesia Semakin Menjanjikan

Diakui atau tidak, perkembangan e-commerce sekarang sudah jauh melampau ekspektasi dan membentuk selera konsumen dalam berbelanja. kecepatan akses, stok yang lebih banyak pilihan, hemat waktu dan uang menjadikan hal ini kebutuhan utama.

Hanya saja ada sedikit gangguan dengan minimnya customer service yang tidak bisa bersentuhan langsung dengan produk real (untuk produk tertentu). Juga, kekurangan e-commerce akan selalu terkendala dengan jangka waktu pengiriman barang.

Saat ini, E-commerce adalah bidang yang paling empuk untuk digeluti. Perubahan konsumen dalam negeri sudah semakin mengeliat dilihat dari kegemaran belanja online dan juga lahirnya startup di berbagai bidang.

 

 

DEFINISI ALGORITMA

Pengertian Algoritma

Pengertian algoritma adalah suatu urutan dari beberapa langkah yang logis guna menyelesaikan masalah. Pada saat kita memiliki masalah, maka kita harus dapat untuk menyelesaikan masalah tersebut dengan menggunakan langkah-langkah yang logis. Contoh dari algoritma sederhana dalam kehidupan nyata adalah pada saat memasak air. Hal-hal yang perlu dilakukan untuk memasak air seperti berikut : siapkan panci, masukkan air secukupnya ke dalam panci, tutup panci tersebut, letakkan panci tersebut di atas kompor, hidupkan kompor dengan api sedang, apabila air sudah mendidih, matikan kompor, setelah itu angkat panci tersebut dari kompor. Langkah-langkah untuk memasak air tersebut merupakan algoritma memasak air. Sehingga memiliki urutan langkah-langkah yang logis.

Dalam ilmu matematika dan komputer, pengertian algoritma merupakan prosedur dari beberapa langkah demi langkah untuk penghitungan. Algoritma dipakai untuk penghitungan, penalaran otomatis, dan pemrosesan data. Pengertian algoritma ialah suatu metode yang efektif diekspresikan sebagai rangkaian yang terbatas dari beberapa instruksi yang telah dijelaskan dengan baik guna menghitung sebuah fungsi. Susunan algoritma dimulai dari kondisi awal dan input awal, instruksi tersebut mendeskripsikan komputasi yang apabila itu dieksekusi serta diproses dengan melewati urutan-urutan kondisi terbatas yang terdefinisi dengan baik, sehingga dapat menghasilkan output atau keluaran dan berhenti di kondisi akhir yang telah ditentukan.

Algoritma sangat diperlukan untuk mengolah data yang ada di komputer. Dalam sistem komputer, pengertian algoritma ialah logika yang dibuat dengan memakai software oleh para pembuat perangkat lunak untuk membuat software tersebut menjadi lebih bagus. Algoritma berbeda dengan Logaritma. Perlu diketahui juga bahwa logaritma adalah sebuah operasi di ilmu matematika guna menghitung kebalikan eksponen dari sebuah perpangkatan.

Kata Algoritma ditemukan oleh Abu Abdullah Muhammad Ibnu Musa Al-Khwarizmi, beliau merupakan matematikawan yang berasal dari Persia yang ditemukan pada Abad Ke 9. Dari masa ke masa, kata algoritma mulai berkembang di abad ke 18.

Untuk lebih jelasnya lagi, berikut salah satu contoh algoritma :
Algoritma untuk menghitung nilai x dari persamaan x = 17y + 9 :
1) Memulai
2) Menentukan nilai y
3) Menghitung nilai x = 17y + 9
4) Menyelesaikan

Bentuk Dasar Algoritma

Algoritma sendiri mempunyai tiga 3 bentuk dasar, antara lain :

1. Algoritma Sekuensial (Sequence Algorithm)
Sequence algorithm atau algoritma sekuensial merupakan algoritma yang langkah-langkahnya secara urut dari awal hingga akhir. Bentuk dari algoritma sekuensial ini salah satu contohnya seperti algoritma memasak air. Langkah demi langkah yang dijalankan harus urut dari atas sampai bawah.
2. Algoritma Perulangan (Looping Algorithm)
Looping algorithm atau algoritma perulangan merupakan suatu algoritma yang menjalankan beberapa langkah tertentu secara berulang-ulang atau looping. Pada masalah yang kita hadapi, ada pula sebuah langkah yang harus kita lakukan secara berulang-ulang. Contoh dari algoritma looping ini adalah algoritma menjemur pakaian:
1) Siapkan jemuran.
2) Ambil satu pakaian yang nantinya akan dijemur.
3) Peras pakaian tersebut terlebih dahulu.
4) Letakkan pakaian tersebut pada tiang jemuran.
5) Ulangi langkah dari 2 sampai 4 hingga pakaian habis.
Dari algoritma di atas, dapat diketahui bahwa dari langkah 2 sampai 4 harus dilakukan secara berulang-ulang hingga pakaian habis.

3. Algoritma Percabangan atau Bersyarat (Conditional Algorithm)
Conditional algorithm atau algoritma bersyarat merupakan algoritma yang menjalankan langkah berikutnya apabila terdapat syarat yang sudah dapat dipenuhi. Berikut salah satu contoh dari algoritma bersyarat :
1) Siapkan panci.
2) Masukkan air secukupnya ke dalam panci.
3) tutup panci tersebut.
4) letakkan panci tersebut di atas kompor.
5) Hidupkan kompor.
6) Apabila air sudah mendidih, lalu matikan kompor.
7) Angkat panci tersebut dari kompor.
Algoritma bersyarat atau contional algorithm terdapat pada langkah ke 6. Apabila air sudah mendidih, lalu matikan kompor. Sehingga apabila air tersebut belum mendidih, maka kompor tidak dimatikan.

Merancang Algoritma yang Baik

Menurut Donald E. Knuth, dari pengertian algoritma diatas dapat diketahui bahwa sebuah algoritma yang baik yaitu algoritma yang mempunyai kriteria sebagai berikut :

1. Masukan (Input)
Algoritma mempunyai input 0 (nol) atau lebih
2. Keluaran (Output)
Algoritma harus menghasilkan atau mengeluarkan minimal 1 output.
3. Terbatas (Finite)
Algoritma harus berhenti setelah melakukan langkah-langkah yang diperlukan.
4. Pasti (Definite)
Algoritma harus jelas kapan dimulai dan berakhir. Tujuan dari algoritma harus jelas. Setiap langkah-langkah harus dijelaskan dengan jelas.
5. Efisien
Membuat sebuah algoritma haruslah efisien. Adanya langkah seperti mencari hasil 1 + 0 tidak efisien. Hal ini karena bilangan apapun itu jika ditambah dengan nol maka hasilnya ialah bilangan itu sendiri. Sehingga adanya langkah seperti itu tidak perlu dimasukkan ke dalam sebuah algoritma. 

Algoritma dapat disajikan ke dalam 2 bentuk, yaitu bentuk tulisan atau bahasa dan bentuk gambar. Penyajian algoritma dalam bentuk bahasa atau tulisan harus memakai sebuah bahasa yang dapat untuk dimengerti manusia dalam membuat langkah-langkah dari algoritma itu sendiri. Penyajian algoritma dalam bentuk tulisan/bahasa dapat dilakukan dengan memakai pseudocode. Pseudocode berasal dari "pseudo" aritnya "menyerupai atau mirip" dan "code" yaitu "kode program". Contoh dari beberapa bahasa pemrograman yang sering digunakan untuk menyatakan pseudocode antara lain : pascal, BASIC, Pascal, C, dan lain sebagainya. Terdapat juga penyajian algoritma yang dalam bentuk gambar disebut flow chart.

Klasifikasi Algoritma

Salah satu cara untuk mengklasifikasikan algoritma yaitu dengan menggunakan cara implementasi.

1. Rekursi atau iterasi
Algoritma rekursi ialah suatu algoritma yang memanggil dirinya sendiri secara berulang kali (looping) hingga pada kondisi tertentu dapat tercapai. Rekursi merupakan suatu metode umum dalam pemrograman fungsional. Algoritma iteratif memakai konstruksi berulang seperti pada pengulangan dan terkadang terdapat struktur data tambahan. Beberapa permasalahan secara alami dapat cocok dengan 1 implementasi atau yang lainnya. Contohnya : Menara Hanoi yang dikenal dengan implementasi rekursif. Pada setiap versi rekursif mempunyai adanya kesamaan (bisa lebih ataupun kurang kompleks) dengan versi iteratif, ataupun sebaliknya.
2. Logical
Algoritma dapat dilihat sebagai sebuah logika deduksi terkontrol. Pernyataan ini dapat diekspresikan sebagai: Algoritma = kontrol + logika. Komponen logika yang mengekspresikan aksioma dapat digunakan dalam komputasi serta komponen kontrol dalam menentukan cara-cara deduksi yang digunakan pada aksioma. Hal tersebut adalah dasar dari paradigma pemrograman logika. Dalam pemrograman, logika murni komponen kontrol ialah tetap serta algoritma yang ditentukan dengan memberikan hanya ada komponen logikanya. Daya tarik dari pendekatan logical ialah semantik elegan, sebuah perubahan yang ada dalam aksioma mempunyai perubahan dalam algoritma.
3. Serial, paralel atau terdistribusi
Pada umumnya, suatu algoritma menjalankan satu instruksi algoritma setiap waktu. Komputer tersebut dapat disebut dengan komputer serial. Rancangan algoritma yang digunakan bagi lingkungan tersebut ialah algoritma serial, terbalik dengan algoritma terdistribusi atau algoritma paralel. Algoritma paralel menggunakan arsitektur komputer yang mana terdapat prosesor-prosesor dapat mengerjakan masalah pada waktu yang sama. Sedangkan algoritma terdistribusi menggunakan banyak mesin yang terhubung ke jaringan. Algoritma terdistribusi atau paralel membagi permasalahan ke banyak submasalah simetris maupun asimetris dan mengumpulkan hasil yang didapat kembali. Konsumsi dari sumber pada algoritma tersebut tidak hanya ada perputaran prosesor tapi juga terdapat daya komunikasi antara prosesor. Algoritma pengurutan dapat untuk diparalelkan secara efisien, namun terdapat biaya komunikasi yang sangat mahal. Algoritma iteratif pada umumnya dapat untuk diparalelkan. Ada juga permasalah yang tidak ada algoritma paralelnya, disebut dengan permasalahan serial lahiriah.
4. Deterministik atau non-deterministik
Terdapat juga algoritma determministik dan non-determenistik. Algoritma deterministik dapat menyelesaikan masalah-masalah dengan keputusan tepat disetiap langkah-langkah dari sebuah algoritma. Algoritma non-deterministik dapat menyelesaikan masalah-masalah lewat adanya penerkaan walaupun penerkaan tersebut pada umumnya lebih akurat dengan memakai heuristik.
5. Tepat atau perkiraan
Jika terdapat banyak algoritma dapat sampai ke solusi yang tepat, ada juga algoritma perkiraan yang mencari perkiraan terdekat dengan solusi benarnya. Perkiraan tersebut dapat memakai strategi deterministik ataupun acak. Algoritma yang seperti itu dapat mempunyai nilai lebih untuk banyak permasalahan yang sulit.
6. Algoritma quantum
Berjalan pada model realistik dari komputasi quantum. Istilah tersebut pada umumnya dipakai bagi algoritma yang pada dasarnya quantum, ataupun memakai fitur-fitur penting dari komputasi quantum seperti belitan quantum atau superposisi quantum.

Contoh Algoritma

1. Menentukan Apakah Bilangan Tersebut Ganjil atau Genap
Terdapat bilangan yang bernama bilang bulat yaitu 0, 1, -1, 2, dst serta bilangan asli 1, 2, 3, 4, 5, dst. Kedua jenis bilangan tersebut sering digunakan dalam berhitung. Himpunan bilangan-bilangan bulat dalam buku teks aljabar pada umumnya dinyatakan dengan lambang "Z" dan himpunan bilangan-bilangan asli dinyatakan dengan lambang "N". Algoritma guna menentukan apakah bilangan tersebut ganjil atau genap dapat disajikan dengan flowchart seperti dibawah ini :

Bilangan genap merupakan sebuah bilangan bulat yang akan habis atau tidak memiliki sisa jika dibagi 2 (dua). Bilangan ganjil merupakan sebuah bilangan bulat yang tidak akan habis apabila dibagi 2 (dua).
2. Menghitung Keliling dan Luas Lingkaran
Lingkaran merupakan suatu himpunan dari semua titik-titik pada bidang dalam jarak yang tertentu dan disebut dengan jari-jari dari titik tertentu dan dapat disebut titik pusat. Lingkaran merupakan contoh dari kurva tertutup sederhana, lingkaran membagi bidang menjadi bagian luar dan dalam. Algoritma menghitung keliling serta luas lingkaran dapat disajikan dengan flowchart seperti dibawah ini :

3. Menampilkan Bilangan Ganjil Diantara 10 sampai 30
Bilangan ganjil yang terletak diantara 10 dan 30 11,13,15, dan seterusnya. Namun, yang akan ditampilkan kecuali bilangan 21 dan 27. Jadi output yang diharapkan dari algoritma tersebut adalah bilangan ganjil 10 sampai 30 kecuali bilangan 21 dan 27. Algoritma untuk menampilkan bilangan ganjil antara 10 hingga 30 kecuali bilangan 21 dan 27 disajikan dengan flowchart dibawah ini :

4. Algoritma tahun Kabisat
Terdapat juga algoritma tahun kabisat. Tahun kabisat merupakan sebuah tahun yang memiliki tambahan 1 hari dan bertujuan agar kalender dapat sinkron dengan musim tahunan dan keadaan astronomi. Bulan Februari memiliki 29 hari pada saat tahun kabisat. Tahun yang dapat untuk dibagi dengan 4 adalah tahun kabisat. Algoritma guna menentukan tahun kabisat jika disajikan dengan flowchart seperti dibawah ini :

5. Menampilkan Bilangan Genap Mullai dari Angka 2 sampai n, Kecuali Bilangan Genap yang Kelipatan 4
Bilangan genap merupakan sebuah bilangan-bilangan bulat yang habis jika dibagi 2. Deret yang ditampilkan dari algoritma kali ini merupakan deret dari bilangan genap dari 2 hingga ke n kecuali bilangan yang merupakan kelipatan 4. Algoritma tersebut dapat digambarkan dengan flowchart seperti dibawah ini :

6. Menghitung Harga yang Dibayar Setelah Mendapatkan Sebuah Diskon
Ada juga algoritma yang dapat menghitung jumlah dari biaya yang harus dibayar oleh sang pembeli setelah mendapatkan sebuah diskon 10% dengan syarat jumlah dari total pembelian tersebut Rp.1.500.000,- Algoritma guna menghitung besaran biaya tersebut dapat digambarkan dengan flowchart seperti dibawah ini :

Jumlah barang memiliki sifat yang dinamik sesuai dengan input atau masukkan dari user. Apabila jumlah total dari harga tersebut kurang 1500000 maka tidak mendapatkan sebuah diskon.
7. Mencari Maks dan Min dari suatu Deret Bilangan
Terdapat juga sebuah algoritma guna mencari nilai maks serta min dari suatu n deret bilangan yang dimasukkan atau diinput oleh user. Algoritma tersebut dapat disajikan dengan flowchart seperti dibawah ini :

8. Kalkulator Sederhana dari 2 Bilangan
Terdapat sebuah algoritma sebagai kalkulator sederhana untuk operasi penjumlahan, perkalian, pembagian, dan pengurangan. Kalkulator sederhana ini hanya dapat melakukan perhitungan dari 2 bilangan yang diinput oleh user. Algoritma guna menghitung 2 bilangan dapat digambarkan dengan flowchart seperti dibawah ini :

9. Menghitung Beberapa Angka dari Suatu Bilangan
Pada flowchart kali ini mengenai sebuah algoritma untuk menghitung beberapa angka dari suatu bilangan yang dimasukkan atau diinput oleh user. Berikut flowchart algoritma tersebut :

10. Membalik Sebuah Kalimat
Seperti yang kita ketahui sebelumnya tentang pengertian algoritma, bahwa algoritma juga dapat untuk menampilkan sebuah kalimat namun dengan urutan yang terbalik. Misalkan "woocara" dibalik menjadi "aracoow". Struktur data yang digunakan ialah Stack. Untuk membalik sebuah bilangan, huruf dari kalimat kita input dalam stack dengan menggunakan metode Push. Setelah stack tersebut sudah terisi, maka output kembali dengan memakai metode Pop. Pada algoritma membalik sebuah kalimat, adanya penggunaan struktur data stack diimplementasikan ke array. Dalam implementasinya ke array tersebut, kita harus terlebih dahulu menyiapkan sebuah array dengan memiliki panjang yang sama dengan jumlah huruf yang ada dalam kalimat yang akan dibalik tersebut. Pada gambar flowchart dibawah ini, terdapat tiap huruf dari kalimat yang diinput pada array dengan index ke-0 hingga ke-n dengan memakai metode push.

Kemudian huruf tersebut akan mengeluarkan kata mulai dari index ke-n hingga index ke-0.

Read more: http://woocara.blogspot.com/2016/02/pengertian-algoritma-contoh-algoritma.html#ixzz5jNeWxV8L

 

Membuat Desain Website Berbasis HTML Dengan Notepad++

Membuat Desain Website Berbasis HTML Dengan Notepad++

 Pengenalan Tag Pada HTML

Dalam HTML tag merupakan code sekaligus perintah dimana kita dapat mengatur tampilan yang kita inginkan. Tag pada HTML selalu diawali dengan <x> dan ditutup dengan </x> dimana x adalah perintah dari apa yang kita inginkan.

·         Daftar Tag Pada HTML

ELEMEN DASAR
Jenis Dokumen	<HTML></HTML>	(terdapat pada awal dan akhir dari file HTML)
Judul	<TITLE></TITLE>	(harus selalu terdapat pada mukadimah)
Mukadimah (Header)	<HEAD></HEAD>	(keterangan umum, seperti judul dsb.)
Batang Tubuh	<BODY></BODY>	(isi dari halaman HTML)

FORMAT TAMPILAN
Huruf Tebal	<B></B>	(Bold)
Huruf Miring	<I></I>	(Italic)
Garis Bawah	<U></U>	(Underline - jarang digunakan)
Rata Tengah	<CENTER></CENTER>	(Center - berlaku untuk teks maupun gambar)
Huruf Kedip	<BLINK></BLINK>	(Blinking - tag terlucu sampai kini)
Ukuran Huruf	<FONT SIZE=?></FONT>	(Font Size - boleh diisi dari 1 sampai 7)
Warna Huruf	<FONT COLOR="#$$$$$$"></FONT>
Pilih Jenis Huruf	<FONT FACE="***"></FONT>

PEMISAH
Paragraf	<P></P>	(tag penutup seringkali tak diperlukan)
Align Text	<P ALIGN=LEFT|CENTER|RIGHT></P>
Pndah Baris	<BR>	(pindah ke baris berikut)
Garis Datar	<HR>	(Horizontal Rule)
Penataan Letak Garis	<HR ALIGN=LEFT|RIGHT|CENTER>
Tebal Garis	<HR SIZE=?>	(dalam satuan pixel)
Lebar Garis	<HR WIDTH=?>	(dalam satuan pixel)
Lebar Garis Persentasi	<HR WIDTH="%">	(dalam persentasi terhadap lebar halaman)

LATAR BELAKANG DAN WARNA
Latar Belakang Gambar	<BODY BACKGROUND="URL">	(Tiled Background)
Warna Latar Belakang	<BODY BGCOLOR="#$$$$$$"	(Background Color - urutan: merah/hijau/biru)
Warna Huruf Teks	<BODY TEXT="#$$$$$$">

TABEL
Rancangan Tabel	<TABLE></TABLE>
Garis Batas Tabel	<TABLE BORDER=?></TABLE>
Lebar Tabel	<TABLE WIDTH=?>	(dalam satuan pixel)
Lebar Tabel Persentasi	<TABLE WIDTH="%">	(dalam satuan persen terhadap lebar halaman)
Baris dalam Tabel	<TR></TR>
Penataan Letak Baris	<TR ALIGN=LEFT|RIGHT| CENTER|MIDDLE|BOTTOM VALIGN=TOP|BOTTOM|MIDDLE>
Sel dalam Tabel	<TD></TD>	(harus ada dalam setiap baris tabel)
Penataan Letak Sel	<TD ALIGN=LEFT|RIGHT| CENTER|MIDDLE|BOTTOM VALIGN=TOP|BOTTOM|MIDDLE>
Kepala Tabel	<TH></TH>	(Table Header - seperti data dengan Bold dan Center)
Penataan Letak Kepala Tabel	<TH ALIGN=LEFT|RIGHT| CENTER|MIDDLE|BOTTOM VALIGN=TOP|BOTTOM|MIDDLE>
Warna Kepala Tabel	<TH BGCOLOR="#$$$$$$">

A.    Dasar dasar HTML

1.      Membuat judul tab dalam halaman web, buka notepad++ terlebih dahulu, kemudian ketikan code dibawah ini:

<html>

<head>

  <title> My First HTML Project </title>

</head>

  <body BGCOLOR=“Green” TEXT=“Red”>

     WELCOME TO MY WEBSITE

</body>

<body bgcolor=”#00ff00”>

</html>

Langkah selanjutnya simpan dalam format HTML dan buka file dengan firefox atau sejenisnya, maka hasilnya akan seperti pada gambar 1 berikut:

 

Gambar 1.  Judul Tab Halaman

2.      Mengatur paragraf texs, buka notepad++ kemudin ketikan code dibawah ini:

<html>

<head>

 <title> Tag P, Br dan Hr </title>

</head>

<body>

 <p>Ini adalah paragraf pertama, yang berisi 3 baris.  Baris satu, dua dan tiga. <br><br></p>

 <p>Ini adalah paragraf kerdua, yang berisi garis horizontal</p>

<hr> Ini adalah garis horizontal.

</body>

<body bgcolor=”#00ff00”>

</html>

Langkah selanjutnya simpan dalam format HTML dan buka file dengan firefox atau sejenisnya, maka hasilnya akan seperti pada gambar 2 berikut:

 

Gambar 2. Mengatur Paragraf

3.      Mengatur ukuran huruf, buka notepad++,  kemudian ketikan code dibawah ini:

<html>

<head>

<title> Tag Heading </title>

</head>

<body>

<h1> Heading 1 </h1>

<h2> Heading 2 </h2>

<h3> Heading 3 </h3>

<h4> Heading 4 </h4>

<h5> Heading 5 </h5>

<h6> Heading 6 </h6>

</body>

<body bgcolor=”#00ff00”>

</html>

Langkah selanjutnya simpan dalam format HTML dan buka file dengan firefox atau sejenisnya, maka hasilnya akan seperti pada gambar 3 berikut:

 

Gambar 3.  Ukuran Huruf

4.      Mengatur format texs, Buka notepad++, kemudian ketikan code dibawah ini:

<html>

<head>

<title>format tulisan</titele>

</head>

<body>

teks normal <br>

<small> teks small </small><br>

<big> teks big</big><br>

<b> teks tebal </b><br>

<i> teks miring </i><br>

<u> teks bergaris bawah </u><br>

Contoh superscript : x ²<br>

Contoh subscript : H₂O<br>

<strike> Ini teks tercoret </strike><br>

<font size = 5 face = verdana>

menggunakan tag font

</font>

</body>

<body BGCOLOR ="#00FF00">

</html>

Langkah selanjutnya simpan dalam format HTML dan buka file dengan firefox atau sejenisnya, maka hasilnya akan seperti pada gambar 4 berikut:

 

Gambar 4. Format tulisan

5.      Membuat from komentar, buka notepad++, kemudian ketikan code dibawah ini:

<html>

<head>

      <title> From komentar </title>

</head>

<body>

<table>

<tr>

<tdcolspan="3">&nbsp;</td></tr><tr>
  <td colspan="3"><h3>Silahkan Berkomentar : </h3></td>

</tr>

<tr>

<td>Nama</td>

<td>:</td>

<td><input type=text name="nama"></td>

</tr>

<tr>

<td>Email</td>

<td>:</td>

<td><input type=text name="email"></td>

</tr>

<tr>

<td valign=top>Komentar</td>

<td valign=top>:</td>

<td><textarea name="komentar" rows=6 width=200></textarea></td>

</tr>

<tr>

<td colspan="3"><input type=submit name="submit"

value=submit></td>

</tr>
</table>

</body>

<body BGCOLOR ="#00FF00">

</html>

Langkah selanjutnya simpan dalam format HTML dan buka file dengan firefox atau sejenisnya, maka hasilnya akan seperti pada gambar 5 berikut:

 

Gambar 5. From komentar

6.      Mengatur kolom, buka notepad++ kemudian ketikan code dibawah ini:

<html>

<head>

<title>warna-warna</title>

</head>

<body>

<table width="300" border="1">

<tr>

    <td colspan="3" align="center">warna-warna </td>

</tr>

<tr>

    <td bgcolor="#00FF00">Hijau</td>

    <td bgcolor="#FFFF00">Kuning</td>

    <td bgcolor="#FF0000">Merah </td>

</tr>

<tr>

    <td bgcolor="#999999">Abu-abu</td>

    <td bgcolor="#0000FF">Biru</td>

    <td bgcolor="#FF9900">Orange</td>

</tr>

<tr>

    <td bgcolor="#663300">Cokelat</td>

    <td bgcolor="#3399CC">Biru muda</td>

    <td bgcolor="#FF00FF">Merah muda</td>

</tr>

</table>

</body>

<body BGCOLOR ="#00FF00">

</html>

Langkah selanjutnya simpan dalam format HTML dan buka file dengan firefox atau sejenisnya, maka hasilnya akan seperti pada gambar 6 berikut:

 

Gambar 6. Tabel

B.     Hyperlink

1.      Membuat hyperlink kehalaman web lain, buka notepad++, kemudian ketikan atau copy saja code dibawah ini:

<html>

<head>

      <title> Judul tab </title>

      </head>

<body>

      Ini hyperlink ke wordpress

      <a href="http://www.wordpress.com/" title="Masuwordpress"> Wordpress </a>

      <br>Klik dan masuk ke yahoo<a href="http://www.yahoo.com/" title="Masuk yahoo"> Yahoo </a>

      <br>Masuk ke facebook anda

<a href="http://http://www.facebook.com/" title="Masuk ke facebook"> Facebook </a>

</body>

<body BGCOLOR ="#00FF00">

</html>

Langkah selanjutnya simpan dalam format HTML dan buka file dengan firefox atau sejenisnya, maka hasilnya akan seperti pada gambar 7 berikut:

 

Gambar 7 link halaman web lain

2.      Membuat hyperlink antar bagian dalam web, buka notepad++, kemudian ketikan atau copy saja code dibawah ini:

<html>

<head>

      <title> Judul tab </title>

      </head>

<body>

<ahref="file:///C:/Users/COMPAQ/Documents/HTML.1/desain%20web/home.html" title="ke Rumah"><img src="file:///C:/Users/COMPAQ/Documents/HTML.1/gambar/Graphic1.jpg" border="0" width="80" height="30"/></a>

<ahref="file:///C:/Users/COMPAQ/Documents/HTML.1/desain%20web/profil.html" title="Profilku"><img src="file:///C:/Users/COMPAQ/Documents/HTML.1/gambar/profil.jpg" border="0" width="100" height="30"/></a>

<ahref="file:///C:/Users/COMPAQ/Documents/HTML.1/html_colors.html" title="Kode Warna Pada HTML"><img src="file:///C:/Users/COMPAQ/Documents/HTML.1/gambar/Kode%20Warna.jpg" border="0" width="150" height="30"/></a>

<a href="file:///C:/Users/COMPAQ/Documents/HTML.1/kumpulan%20puisi.html" title="kumpulan Kata-kata Mutiara"><img src="file:///C:/Users/COMPAQ/Documents/HTML.1/gambar/kata%20kata.jpg" border="0" width="100" height="30"/></a>

</body>

<body BGCOLOR ="#00FF00">

</html>

Langkah selanjutnya simpan dalam format HTML dan buka file dengan firefox atau sejenisnya, maka hasilnya akan seperti pada gambar 8 berikut:

 

Gambar 8. Link Antar Bagian Dalam Web

C.    Membuat Website Sederhana

1.      Membuat halaman login pada website, buka notepad++, kemudin ketikan atau copy saja code dibawah ini:

<html>

<head>

<title>login web</title><link rel='icon' href='gambar/B.png'>

</head>

<body>

<p align="center"> <font  size="6" color="#FF6600" >

Silahkan mengisi data yang ada di bawah untuk masuk ke website saya :)</font>

</p>

<table align="center">

<td><form method="post" action="home.html"><label><font color="#FF6600">Nama Anda:</label>

<br>

<input type="text" name="nama" value=""></br>

<label><font color="#FF6600">Email Atau telepon:</label>

<br>

<input type="text" name="Email" value=""></br><label><font color="#FF6600">Alamat:</label>

<br>

<input type="text" name="Alamat" Value=""></br>

<label><font color="#FF6600">Tanggal Lahir </label>

<br>

<select name="select">

<option value="1">1</option>

<option value="2">2</option>

<option value="3">3</option>

<option value="4">4</option>

<option value="5">5</option>

<option value="6">6</option>

<option value="7">7</option>

<option value="8">8</option>

<option value="9">9</option>

<option value="10">10</option>

<option value="11">11</option>

<option value="12">12</option>

<option value="13">13</option>

<option value="14">14</option>

<option value="15">15</option>

<option value="16">16</option>

<option value="17">17</option>

<option value="18">18</option>

<option value="19">19</option>

<option value="20">20</option>

<option value="21">21</option>

<option value="22">22</option>

<option value="23">23</option>

<option value="24">24</option>

<option value="25">25</option>

<option value="26">26</option>

<option value="27">27</option>

<option value="28">28</option>

<option value="29">29</option>

<option value="30">30</option>

<option value="31">31</option>

</select>

<select name="select2">

<option value="1">Januari</option>

<option value="2">Februari</option>

<option value="3">Maret</option>

<option value="4">April</option>

<option value="5">Mei</option>

<option value="6">Juni</option>

<option value="7">Juli</option>

<option value="8">Agustus</option>

<option value="9">September</option>

<option value="10">Oktober</option>

<option value="11">Nopember</option>

<option value="12">Desember</option>

</select>

<select name="select3">

<option value="2001">1988</option>

<option value="2002">1989</option>

<option value="2003">1990</option>

<option value="2004">1991</option>

<option value="2005">1992</option>

<option value="2006">1993</option>

<option value="2007">1994</option>

<option value="2008">1995</option>

<option value="2009">1996</option>

</select></br>

<label><font color="#FF6600">Jenis Kelamin </label>

<br><font color="red">Pria

<font color="#CCFF00">Wanita</br>

<input type="submit" Value="Masuk">

</td>

</table>

<body background="gambar/aaa.png">

<EMBED SRC="MP3/Greenday%20-%20I%20walk%20Alone.swf" AUTOSTART="TRUE" LOOP="TRUE" WIDTH="1" HEIGHT="1" ALIGN="CENTER"></EMBED>

<p align="center"> <font  size="1" color="#FF6600" ><BLINK>..... Dalam penggisiannya harus jujur yaa, jangan bo'onk  :) ......

</body>

</html>

Langkah selanjutnya simpan dalam format HTML dan buka file dengan firefox atau sejenisnya, background dapat anda ganti sendiri sesuai dengan kesukaan anda.

Hasilnya seperti pada gambar 9 berikut:

 

Gambar 9. Halaman login

2.      Membuat halaman awal, buka notepad++, kemudian ketikan atau copy saja code dibawah ini:

<html>

<head>

      <title>Home</title>

<link rel='icon' href='gambar/alien.ico'>

</head>

<body>

      <center><table width='1000' height='400' border="0" background='gambar/xx.jpg' cellpadding="0" cellspacing="<tr>

<td colspan="2" color="white" align='center'>

<img src="gambar/1.png" width="1000" height="400">

</td>

</tr>

<tr height="50"><td colspan='2' background='gambar/zz.jpg' align='left' height="20">

<p><ul><ul><left><BLINK><b><font color="#00CCFF" size="5"><img src='gambar/halo.gif' border='0' width='40' height='40'>~ Selamat datang di website pertama saya ~ <img src='gambar/halo.gif' border='0' width='40' height='40'></font></BLINK></b></ul></ul></p></left>

<left>      <ul><a href="home.html" title="ke Rumah"><img src='gambar/HOME.jpg' BORDER='0' width='80' height='30'></a>

<a href="http://mp3skull.com/"  title="MP3"><img src='gambar/MP3.jpg' BORDER='0' width='80' height='30'></font></a>

<a href="profilku.html" title="Profilku"><img src='gambar/PROFIL.jpg' BORDER='0' width='90' height='30'></a>

<a href="html_colors.html" title="Kode Warna Pada HTML"><img src='gambar/KODE WARNA.jpg' BORDER='0' width='120' height='30'></a>

<a href="http://www.gametop.com/" title="Tempat Game"><img src='gambar/GAME.jpg' BORDER='0' width='80' height='30'></a>

<a href="http://www.w3schools.com/html/html_intro.asp" title="Tutorial HTML.w3schools.com"><img src='gambar/TUTORIAL.jpg' BORDER='0' width='90' height='30'></a>

<a href="kumpulan%20puisi.html" title="kumpulan Kata-kata Mutiara"><img src='gambar/KATA.jpg' BORDER='0' width='100' height='30'></a>

</ul></left>

</td>

</tr>

<tr>

<td width='796' height='700' background='gambar/zz.jpg' valign='top' >

<p><font color="yellow" size="5">~Dasar-dasar Membuat Website Berbasis HTML~</font>

<p align="lift"><font  color="white">Nah, anda pasti sudah banyak melihat tutorial tutorial HTML yang ada di ilmuwebsite.com. Tapi, masih ada 1 kekurangan, tutorial HTML untuk tingkat pemula???

<br />

Nggak ada kan??? nah, maka dari itu, saya, Rian hidayat, akan menjelaskan bagaimana website di bangun menggunakan tag-tag HTML, dan ini penulis sediakan untuk pemula. Tapi sebelum itu,? ada yang perlu diketahui.<br />

<br />

<a name='more'></a><br />

<span id="more-712"></span><br />

<b>tag &lt;&gt;</b><br />

digunakan untuk menuliskan sintak, ada dua jenis, yaitu tag container dan tag biasa.<br />

Tag container adalah tag yang berisi text yang akan ditampilkan

setelah tag ditutup. Contoh: &lt;td&gt; text yang ditampilkan

&lt;/td&gt;.<br />

Tag biasa, yahh&#8230;tag aja, contoh &lt;BR&gt; (break). &lt;br&gt; kaga perlu ditutup oleh tag &lt;/br&gt;, tapi jika sintak yang digunakan tag container, contoh: &lt;h1&gt;, yah mesti ditutup dengan &lt;/h1&gt;.<br />

Tag yang digunakan untuk mengakhiri sintak punya karakter /(slash) sebelum sintaknya, contohnya: &lt;td&gt; &lt;/td&gt;<br />

Kita juga dapat mengetik attribut di dalam sebuah tag, contoh: &lt;body bgcolor=&#8221;red&#8221;&gt; &lt;/body&gt;. atau &lt;input type=&#8221;text&#8221;&gt;.<br />

<b>LANGKAH 1</b><br />

<ul>

<li>MEMBUKA NOTEPAD.</li>

</ul>

<b>LANGKAH 2</b> <br />

<ul>

<li>MENGETIKKAN SINTAK/SYNTAX.</li>

</ul>

Berikut ini adalah syntax dasar yang membentuk suatu HTML.<br />

pertama, ketikkan<br />&lt;html&gt;<br />

tekan enter, kemudian ketik<br />&lt;head&gt;<br />Dalam container head, kita bisa mengetikan beberapa sintak, tapi yangpaling penting jangan lupa mengetikan sintak &lt;title&gt; judul halaman web &lt;/title&gt;. Untuk sintak lain nanti saja.<br />Sekarang ketikkan sintak title tadi, jadi seperti ini:<br />&lt;head&gt; &lt;title&gt; judul halaman web &lt;/title&gt; &lt;/head&gt;<br />

Kemudian ketikkan &lt;body&gt;. Tag body merupakan badan/tubuh/inti dari halaman web, tampilan web yang kita lihat itu berasal dari &lt;body&gt;.<br />Body tuh tag container, jadi mesti ditutup. Hasil sampai sekarang:<br />

&lt;html&gt;<br />&lt;head&gt;<br />&lt;title&gt; Judul Halaman Web &lt;/title&gt;<br />

&lt;/head&gt;<br />

&lt;body&gt;<br />

&lt;/body&gt;<br />?<br />

&nbsp; <br />

<br />Selanjutnya bagaimana cara menampilkan tulisan ke dalam HTML??? Ketikan sembarang text ke dalam tag body, contohnya seperti ini :<br />&lt;body&gt;<br />Contoh text yang ditampilin di halaman web, By: Rian Hidayat<br />&lt;/body&gt;<br />terus, jika sudah, ketikkan &lt;/html&gt;, script lengkapnya seperti ini :<br />&lt;html&gt;<br />&lt;head&gt;<br />

&lt;title&gt; Judul Halaman Web &lt;/title&gt;<br />

&lt;/head&gt;<br />&lt;body&gt;<br />Contoh text yang ditampilkan di halaman web, By: Rian Hidayat<br />

&lt;/body&gt;<br />

&lt;/html&gt;<br />

kalo udah, sekarang save dengan nama dasarHTML.<br />

kalo udah disave, buka data yang tadi di save.<br />?<br />Pada bagian ini, kalian mungkin akan bingun,g karena html yang tadi disave dan cape cape diketikkan, ternyata gagal. Malah yang terbuka adalah file di notepad/wordpad. tau kenapa???<br />Karena ketika men-save, file tersebut di save dalem bentuk TXT, bukan HTML. Nah cara men-save dalem bentuk HTML yaitu: ketika mensave, ada satu tempat di bawah tempat kita menulis nama file,? yakni Save As Type. Silahkan ubah dari text document(*.txt) menjadi all files, ketika menulis nama, di akhir di berikan extensi .html, contoh: dasarHTML.html.

<div style='clear: both;'></div>

</textarea>

<font="left" form method="post" action="file:///C:/Users/COMPAQ/Documents/HTML.1/new%204.html">

<input type="hidden" name="friendID" value="123456">

<textarea name="f_comments" cols="40" rows="5"">

Enter your comments here...

</textarea><br>

<input type="submit" value="coments" />

<input type="reset" value="Reset" />

</form>

</td>

<td width='200' height='700' bgcolor='' valign='top'>

<table align="left" width='200' border='0' bgcolor='' bordercolor='green'>

<tr align='center'>

<td><p><a href="http://www.facebook.com/" target="_blank" title="Masuk ke Facebook"> <img src="gambar/facebook.ico" border="0" width="90" height="70"/></a></td>

<td><p><a href="http://www.youtube.com/" target="_blank" title="Masuk ke youtube"> <img src="gambar/youtube.ico" border="0" width="90" height="70"/></a><td>

</p>

</tr>

</table>

<table align='left' width='200' border='0' bgcolor='' bordercolor='green'>                            

<center>

<td width="200" valign="top"><font color="#FFFF00" face="Cooper Std Black">

<b>TUTORIAL HTML</b>

<ul>

<li><a href="buat%20ayat%20bergerak.html" title='membuat tulisan bergerak'><font color='#0000FF' face='Times New Roman'>Cara membuat tulisan bergerak</a></font></li>

<li><a href='Menbuat%20from%20komentar.html' title='membuat from komentar'><font color='#0000FF' face='Times New Roman'>Cara membuat from komentar</a></font></li>

<li><a href='Membuat%20login.html' title='membuat halaman login'><font color='#0000FF' face='Times New Roman'>Cara membuat halaman login</a></font></li>

</ul></font></table></td>

</tr>

<tr height="50">

s<td colspan='2'background='gambar/zz.jpg'><center><b><marquee><font face="Cooper Std Black" color="#00CCFF" size="7">~ Meskipun banyak kendala dalam pembuatan desain web, tapi tetap berusaha untuk mencapai hasil yang terbaik ~</font></b></marquee></center></td></tr>

</table><div style="position: fixed; bottom: 0px; left: 10px;width:130px;height:160px;">

<img border="0" src="gambar/twitter.ico" title="follow my twitter" alt="animasi bergerak gif" /></a><small><center></div>

<div style="position: fixed; bottom: 0px; right: 0px;width:100px;height:100px;"><a href='#top'>

<img border="0" src="gambar/top.png" width='50' height='50' title="Kembali ke atas" alt="animasi bergerak gif" /></a><small><center>

</div>

<div style="position: fixed; TOP: 0px; right: 10px;width:130px;height:160px;"><a href='login.html'>

<img border="0" src="gambar/c.png" width='40' height='40' title="Kembali ke login" alt="animasi bergerak gif" /></a><small><center></div>

<body background='gambar/yy.jpg'></body>

<EMBED SRC="MP3/I%20Won%27t%20See%20You%20Tonight%28Part1%29.swf" AUTOSTART="TRUE" LOOP="TRUE" WIDTH="1" HEIGHT="1" ALIGN="CENTER"></EMBED></html>

Langkah selanjutnya simpan dalam format HTML dan buka file dengan firefox atau sejenisnya, anda bisa menganti gambar-gambarnya sesuai yang anda inginkan, dan anda juga dapat menganti background dan animasi yang sesuai dengan anda.

Hasilnya akan seperti pada gambar 10 berikut:

 

Gambar 10. Halaman awal

3.      Membuat data pribadi atau profil, buka notepad++, kemudian ketikan atau copy saja code dibawah ini:

<html>

<head>

      <title>Profilku</title>

<link rel='icon' href='gambar/alien.ico'>

</head>

<body>

      <center><table width='1000' height='400' border="0" background='gambar/xx.jpg' cellpadding="0" cellspacing="20" >

<tr>

  <td colspan="2" color="white" align='center'>

<img src="gambar/1.png" width="1000" height="400">

</td>

</tr>

 <tr height="50">

<td colspan='2' background='gambar/zz.jpg' align='left' height="20">

<p><ul><ul><left><BLINK><b><font color="#00CCFF" size="5"><img src='gambar/halo.gif' border='0' width='40' height='40'>~ Selamat datang di website pertama saya ~ <img src='gambar/halo.gif' border='0' width='40' height='40'></font></BLINK></b></ul></ul></p></left>

      <left><ul><a href="home.html" title="ke Rumah"><img src='gambar/HOME.jpg' BORDER='0' width='80' height='30'></a>

<a href="http://mp3skull.com/"  title="MP3"><img src='gambar/MP3.jpg' BORDER='0' width='80' height='30'></font></a>

<a href="profilku.html" title="Profilku"><img src='gambar/PROFIL.jpg' BORDER='0' width='90' height='30'></a>

      <a href="html_colors.html" title="Kode Warna Pada HTML"><img src='gambar/KODE WARNA.jpg' BORDER='0' width='120' height='30'></a>

      <a href="http://www.gametop.com/" title="Tempat Game"><img src='gambar/GAME.jpg' BORDER='0' width='80' height='30'></a>

      <a href="http://www.w3schools.com/html/html_intro.asp" title="Tutorial HTML.w3schools.com"><img src='gambar/TUTORIAL.jpg' BORDER='0' width='90' height='30'></a>

      <a href="kumpulan%20puisi.html" title="kumpulan Kata-kata Mutiara"><img src='gambar/KATA.jpg' BORDER='0' width='100' height='30'></a></ul></left></td></tr>

<tr><td width='796' height='700' background='gambar/zz.jpg' valign='top' >

      <p><table align="center" border="0" bgcolor="" cellpadding="0" cellspacing="8" >

      <td><tr><td colspan="2" align="center"><font face="Bauhaus 93" size="8" color="#0066FF"><b>PROFILKU</b></td></tr>

      <tr><br><table>

<P align="center"><font color="#00FFFF">

      <img src="gambar/rian.JPG" border="7" width="250" height="300">

<tr><td align="right"><font size="5" color="#00FFFF"><b><p align='left'>NAMA</p></b></td>

      <td><font size="5"color="#00FFFF">: Rian Hidayat</p></td></tr>

      <td align="right"><font size="5" color="#00FFFF"><b><p align='left'>ALAMAT</p></b></td>

<td><font size="4"color="#00FFFF">: Weru, Sukoharjo</td></tr>

      <td align="right"><font size="5" color="#00FFFF"><b><p align='left'>TTL</p></b></td>

      <td><font size="5"color="#00FFFF">: Sukoharjo, 09-November-1993</td></tr>

      <td align="right"><font size="5" color="#00FFFF"><b><p align='left'>PEKERJAAN</p></b></td>

      <td><font size="5"color="#00FFFF">: Mahasiswa</td></tr>

      <td align="right"><font size="5" color="#00FFFF"><b><p align='left'>HOBY</p></b></td>

      <td><font size="5"color="#00FFFF">: Tidur</td></tr>

      <td align="right"><font size="5" color="#00FFFF"><b><p align='left'>NO.TELPONE</p></b></td>

      <td><font size="5"color="#00FFFF">: 085728282066</td></tr>

      <td align="right"><font size="5" color="#00FFFF"><b><p align='left'>EMAIL</p></b></td>

      <td><font size="5"color="#00FFFF">: hrian89@gmail.com</td>

      </tr></table>

<table><P align="center"><font color="#00FFFF"><img src="gambar/bram.JPG" border="7" width="250" height="300"></p>

      <tr><td align="right"><font size="5" color="#00FFFF"><b><p align='left'>NAMA</p></b></td>

            <td><font size="5"color="#00FFFF">: Bram Putra P.</p></td></tr>

            <td align="right"><font size="5" color="#00FFFF"><b><p align='left'>ALAMAT</p></b></td>

            <td><font size="4"color="#00FFFF">: Laweyan, Surakarta</td></tr>

            <td align="right"><font size="5" color="#00FFFF"><b><p align='left'>TTL</p></b></td>

            <td><font size="5"color="#00FFFF">: Surakarta, 13-April-1992</td></tr>

            <td align="right"><font size="5" color="#00FFFF"><b><p align='left'>PEKERJAAN</p></b></td>

            <td><font size="5"color="#00FFFF">: Mahasiswa</td></tr>

            <td align="right"><font size="5" color="#00FFFF"><b><p align='left'>NO.TELPONE</p></b></td>

            <td><font size="5"color="#00FFFF">: XXXXXXXXXXXXXX </td>

      </tr></table></td>

      <td width='200' height='700' bgcolor='' valign='top'>

<table align="left" width='200' border='0' bgcolor='' bordercolor='green'>

<tr align='center'><td><p><a href="http://www.facebook.com/" target="_blank" title="Masuk ke Facebook"> <img src="gambar/facebook.ico" border="0" width="90" height="70"/></a></td>

<td><p><a href="http://www.youtube.com/" target="_blank" title="Masuk ke youtube"> <img src="gambar/youtube.ico" border="0" width="90" height="70"/></a><td>

      </p></tr>

      </table>

<table align='left' width='200' border='0' bgcolor='' bordercolor='green'>

            <center>

      <td width="200" valign="top"><font color="#FFFF00" face="Cooper Std Black">

      <b>TUTORIAL HTML</b>

      <ul><li><a href="buat%20ayat%20bergerak.html" title='membuat tulisan bergerak'><font color='#0000FF' face='Times New Roman'>Cara membuat tulisan bergerak</a></font></li>

      <li><a href='Menbuat%20from%20komentar.html' title='membuat from komentar'><font color='#0000FF' face='Times New Roman'>Cara membuat from komentar</a></font></li>

      <li><a href='Membuat%20login.html' title='membuat halaman login'><font color='#0000FF' face='Times New Roman'>Cara membuat halaman login</a></font></li>

      </ul></font></table></td></tr>

      <tr height="50"><td colspan='2' background='gambar/zz.jpg'><center><b><marquee><font face="Cooper Std Black" color="#00CCFF" size="7">~ Meskipun banyak kendala dalam pembuatan desain web, tapi tetap berusaha untuk mencapai hasil yang terbaik ~</font></b></marquee></center></td>

      </tr></table><div style="position: fixed; bottom: 0px; left: 10px;width:130px;height:160px;">

<img border="0" src="gambar/twitter.ico" title="follow my twitter" alt="animasi bergerak gif" /></a><small><center>

</div>

      <div style="position: fixed; bottom: 0px; right: 0px;width:100px;height:100px;"><a href='#top'>

<img border="0" src="gambar/top.png" width='50' height='50' title="Kembali ke atas" alt="animasi bergerak gif" /></a><small><center></div>

      <div style="position: fixed; TOP: 0px; right: 10px;width:130px;height:160px;"><a href='login.html'>

      <img border="0" src="gambar/c.png" width='40' height='40' title="Kembali ke login" alt="animasi bergerak gif" /></a><small><center>

      </div>

      <body background='gambar/yy.jpg'>

</body>

<EMBED SRC="MP3/I%20Won%27t%20See%20You%20Tonight%28Part1%29.swf" AUTOSTART="TRUE" LOOP="TRUE" WIDTH="1" HEIGHT="1" ALIGN="CENTER"></EMBED>

</html>

Langkah selanjutnya simpan dalam format HTML dan buka file dengan firefox atau sejenisnya, anda bisa menganti gambar-gambarnya sesuai yang anda inginkan, dan anda juga dapat menganti background dan animasi yang sesuai dengan anda.

Hasilnya akan seperti pada gambar 11 berikut:

Gambar 11. Membuat data pribadi

4.      Membuat album galery, buka notepad++, kemudian ketikan atau bisa copy saja code dibawah ini:

<html>

<head>

      <title>Profilku</title>

<link rel='icon' href='gambar/alien.ico'>

</head>

<body>

      <center>

<table width='1000' height='400' border="0" background='gambar/xx.jpg' cellpadding="0" cellspacing="20" >

      <tr>

<td colspan="2" color="white" align='center'>

<img src="gambar/1.png" width="1000" height="400">

</td>

</tr>

<tr height="50">

<td colspan='2' background='gambar/zz.jpg' align='left' height="20">

<p><ul><ul><left><BLINK><b><font color="#00CCFF" size="5"><img src='gambar/halo.gif' border='0' width='40' height='40'>~ Selamat datang di website pertama saya ~ <img src='gambar/halo.gif' border='0' width='40' height='40'></font></BLINK></b></ul></ul></p></left>

      <left>

      <ul><a href="home.html" title="ke Rumah"><img src='gambar/HOME.jpg' BORDER='0' width='80' height='30'></a>

      <a href="http://mp3skull.com/"  title="MP3"><img src='gambar/MP3.jpg' BORDER='0' width='80' height='30'></font></a>

      <a href="profilku.html" title="Profilku"><img src='gambar/PROFIL.jpg' BORDER='0' width='90' height='30'></a>   <a href="html_colors.html" title="Kode Warna Pada HTML"><img src='gambar/KODE WARNA.jpg' BORDER='0' width='120' height='30'></a>

      <a href="http://www.gametop.com/" title="Tempat Game"><img src='gambar/GAME.jpg' BORDER='0' width='80' height='30'></a>    <a href="http://www.w3schools.com/html/html_intro.asp" title="Tutorial HTML.w3schools.com"><img src='gambar/TUTORIAL.jpg' BORDER='0' width='90' height='30'></a>  <a href="kumpulan%20puisi.html" title="kumpulan Kata-kata Mutiara"><img src='gambar/KATA.jpg' BORDER='0' width='100' height='30'></a>

      </ul></left>

      </td></tr>

      <tr>

<td width='796' height='700' background='gambar/zz.jpg' valign='top' >

      <p><table align="center" border="0" bgcolor="" cellpadding="0" cellspacing="8" >

      <td>

<p><b><center><font face="Bauhaus 93" size="7" color='#0000FF'>Galery</font></center></b></p><b>

<table color="blue" align="center" border="9px">

<tr><p align="center"><font color="#00FFFF" size='6'>Album Kegiatan Teknisi</font>

      <td><img src="file:///D:/Tugas%20HTML/Gambar/a.png" border="3" width="300" height="300" /></td>

      <td><img src="file:///D:/Tugas%20HTML/Gambar/b.png" border="3" width="300" height="300" /></td>

      <tr><td><img src="file:///D:/Tugas%20HTML/Gambar/c.png" border="3" width="300" height="300" /></td>

      <td><img src="file:///D:/Tugas%20HTML/Gambar/d.png" border="3" width="300" height="300" /></td>

      <tr><td><img src="file:///D:/Tugas%20HTML/Gambar/e.png" border="2" width="300" height="300" /></td>

      <td><img src="file:///D:/Tugas%20HTML/Gambar/f.png" border="3" width="300" height="300" /></td></p></tr>

</table>

      </td>

<td width='200' height='700' bgcolor='' valign='top'>

      <table align="left" width='200' border='0' bgcolor='' bordercolor='green'><tr align='center'>

      <td><p><a href="http://www.facebook.com/" target="_blank" title="Masuk ke Facebook"> <img src="gambar/facebook.ico" border="0" width="90" height="70"/></a></td>

      <td><p><a href="http://www.youtube.com/" target="_blank" title="Masuk ke youtube"> <img src="gambar/youtube.ico" border="0" width="90" height="70"/></a><td>

      </p></tr></table>

<table align='left' width='200' border='0' bgcolor='' bordercolor='green'>

            <center>

<td width="200" valign="top"><font color="#FFFF00" face="Cooper Std Black">

      <b>TUTORIAL HTML</b><ul>

      <li><a href="buat%20ayat%20bergerak.html" title='membuat tulisan bergerak'><font color='#0000FF' face='Times New Roman'>Cara membuat tulisan bergerak</a></font></li>

      <li><a href='Menbuat%20from%20komentar.html' title='membuat from komentar'><font color='#0000FF' face='Times New Roman'>Cara membuat from komentar</a></font></li>

      <li><a href='Membuat%20login.html' title='membuat halaman login'><font color='#0000FF' face='Times New Roman'>Cara membuat halaman login</a></font></li>

      </ul></font></table></td></tr>

<tr height="50">

<td colspan='2' background='gambar/zz.jpg'><center><b><marquee><font face="Cooper Std Black" color="#00CCFF" size="7">~ Meskipun banyak kendala dalam pembuatan desain web, tapi tetap berusaha untuk mencapai hasil yang terbaik ~</font></b></marquee></center></td>

      </tr></table>

<div style="position: fixed; bottom: 0px; left: 10px;width:130px;height:160px;">

<img border="0" src="gambar/twitter.ico" title="follow my twitter" alt="animasi bergerak gif" /></a><small><center></div> <div style="position: fixed; bottom: 0px; right: 0px;width:100px;height:100px;"><a href='#top'>

      <img border="0" src="gambar/top.png" width='50' height='50' title="Kembali ke atas" alt="animasi bergerak gif" /></a><small><center></div>

<div style="position: fixed; TOP: 0px; right: 10px;width:130px;height:160px;"><a href='login.html'><img border="0" src="gambar/c.png" width='40' height='40' title="Kembali ke login" alt="animasi bergerak gif" /></a><small><center></div>

<body background='gambar/yy.jpg'>

</body>

<EMBED SRC="MP3/I%20Won%27t%20See%20You%20Tonight%28Part1%29.swf" AUTOSTART="TRUE" LOOP="TRUE" WIDTH="1" HEIGHT="1" ALIGN="CENTER"></EMBED>

</html>

Langkah selanjutnya simpan dalam format HTML dan buka file dengan firefox atau sejenisnya, anda bisa menganti gambar-gambarnya sesuai yang anda inginkan, dan anda juga dapat menganti background dan animasi yang sesuai dengan anda.

Hasilnya akan seperti pada gambar 12 berikut:

Gambar 12. Galery

5.      Membuat artikel html tentang cara membuat tulisan bergerak, buka notepad++, kemudian ketikan atau copy saja code dibawah ini:

<html>

<head>

      <title>Cara membuat tulisan bergerak</title>

<link rel='icon' href='gambar/alien.ico'>

</head>

<body>

      <center>

<table width='1000' height='400' border="0" background='gambar/xx.jpg' cellpadding="0" cellspacing="20" >

<tr>

<td colspan="2" color="white" align='center'>

<img src="gambar/1.png" width="1000" height="400">

</td>

</tr>

<tr height="50">

<td colspan='2' background='gambar/zz.jpg' align='left' height="20">

<p><ul><ul><left><BLINK><b><font color="#00CCFF" size="5"><img src='gambar/halo.gif' border='0' width='40' height='40'>~ Selamat datang di website pertama saya ~ <img src='gambar/halo.gif' border='0' width='40' height='40'></font></BLINK></b></ul></ul></p></left>

<left>

                  <ul><a href="home.html" title="ke Rumah"><img src='gambar/HOME.jpg' BORDER='0' width='80' height='30'></a>

                  <a href="http://mp3skull.com/"  title="MP3"><img src='gambar/MP3.jpg' BORDER='0' width='80' height='30'></font></a>

                  <a href="profilku.html" title="Profilku"><img src='gambar/PROFIL.jpg' BORDER='0' width='90' height='30'></a>

                  <a href="html_colors.html" title="Kode Warna Pada HTML"><img src='gambar/KODE WARNA.jpg' BORDER='0' width='120' height='30'></a>

                  <a href="http://www.gametop.com/" title="Tempat Game"><img src='gambar/GAME.jpg' BORDER='0' width='80' height='30'></a>

                  <a href="http://www.w3schools.com/html/html_intro.asp" title="Tutorial HTML.w3schools.com"><img src='gambar/TUTORIAL.jpg' BORDER='0' width='90' height='30'></a>

                  <a href="kumpulan%20puisi.html" title="kumpulan Kata-kata Mutiara"><img src='gambar/KATA.jpg' BORDER='0' width='100' height='30'></a>

                  </ul></left>

                  </td>

</tr>

<tr>

<td width='796' height='700' background='gambar/zz.jpg' valign='top' >

<b><center><span style="font-size: large;" align='center'><font color='#0066FF' size='5'>Tutorial Membuat Tulisan Menjadi Bergerak</font></span></center></b>

<br />

<br /><font color='#00FFFF'>Marquee tag digunakan untuk menggerakkan sama ada perkataan ataupun gambar. Dalam contoh ini, saya akan tunjukkan beberapa cara untuk menggunakan Marquee tag ini untuk menggerakkan tulisan anda.</font><br />

<br />

<div style="color: #FFFF00;">

<marquee direction="down" height="50"><center>

<b>Teks Bergerak Ke Bawah...</b></center>

</marquee>

</div>

<div style="color: #FFFF00;"><marquee direction="right"><b>Teks Bergerak Ke Kanan...</b></marquee>

</div>

<div style="color: #FFFF00;"><marquee direction="left"><b>Teks Bergerak Ke Kiri...</b></marquee>

</div>

<br />

<div style="color: #FFFF00;">

<marquee direction="up" height="50"><center>

<b>Teks Bergerak Ke Atas...</b></center>

</marquee>

</div>

<br />

<a name='more'></a><br /><br /><span style="font-size: large;"><font color='#00FFFF'><b>1.</b></span> Seperti yang anda lihat di atas, Teks ini bergerak ke kiri dan ke kanan. Anda boleh gunakan kode dibawah ini untuk melakukan tricks tersebut.</font><br />

<br />

<div class="code"><br /><span style="color: white;">&lt;marquee direction="</span>

<b><span style="color: #FFFF00;">right</span></b><span style="color: white;">"&gt;This text scrolls right...&lt;/marquee&gt;</span></div><br />

<br /><font color='#00FFFF'>Apa yang anda perlukan, gantikan teks yang bewarna <b><span style="color:#FFFF00;">kuning</span></b> kepada arah mana anda akan teks tu Scroll. Anda boleh pilih sama ada - up, down, right, left.</font><br /><br />

<div style="color: #FF0000;"><marquee scrollamount="30"><b>Teks ini Macam Ferari..</b></marquee></div><br /><span style="font-size: large;"><font color='#00FFFF'><b>2.</b></span> Anda boleh mengubah kelajuan teks dengan menggunakan kod di bawah ni.</font>

<br /><br />

<div class="code"><br /><span style="color: white;">&lt;marquee scrollamount="</span><b><span style="color:#FF6600;">30</span></b><span style="color: white;">"&gt;</span><span style="color: #FF0000;">Teks ni Macam Ferari..</span><span style="color: white;">&lt;/marquee&gt;

</span></div><br /><br /><font color='#00FFFF'>Ubah nomer yang bewarna <b><span style="color:#FF6600;">Oren</span></b> untuk mengubah kelajuan.</font>

<br /><br />

<div style="color: #f1c232;"><marquee scrolldelay="300"><b>Teks ini seperti Siput..</b></marquee></div><br />

<div class="code"><br/><span style="color: white;">&lt;marquee scrolldelay="</span><b><span style="color:#00FF00;">300</span></b><span style="color: white;">"&gt;Teks ini seperti Siput..&lt;/marquee&gt;

</span></div><br /><br /><b><span style="font-size: large;"><font color='#00FFFF'>3.</span></b> Ubah nomer yang bewarna <b><span style="color:#00FF00;">hijau</span></b> untuk mengubah kelajuan.

</font><br /><br /><div style="color: #6600CC;"><marquee behavior="alternate"><b>Teks ini Melantun</b></marquee>

</div><br /><font color='#00FFFF'>Untuk membuatkan teks anda melantun seperti di atas ini. Gunakan kode di bawah.

</font><br /><br />

<div class="code"><br /><span style="color: white;">&lt;marquee behavior="alternate"&gt;</span><b style="color: #6600CC;">Teks ini Melantun</b><span style="color: white;">&lt;/marquee&gt;

</span></div><br /><br /><b><font color='#00FFFF'>4.</b> Ok. Seterusnya cara untuk menetapkan ruangan untuk Marquee bergerak

</font><br /><br /><div style="color: #0066FF;">

<marquee width="200"><b>Teks ini bergerak dalam kelebaran 200 width</b></marquee></div><br /><div class="code"><br />

<span style="color: white;">&lt;marquee width="</span><span style="color: #00FF00;">200</span><span style="color: white;">"&gt;Teks ini bergerak dalam kelebaran 200 width&lt;/marquee&gt;</span></div>

<br /><font color='#00FFFF'>Anda boleh tentukan width mengikut kesukaan anda dengan menukarkan nomer yang bewarna <b><span style="color: #00FF00;">hijau</span></b>.

</font><br /><br /><span style="font-size: large;"><b><font color='#00FFFF'>5.</b></span> Seterusnya saya akan menggabungkan beberapa kode Marquee ini bersama.

</font><br /><br />

<div style="color: #33FF33;"><marquee behavior=”alternate” scrollamount=”30” width=”400”><b>Teks Paling Awesome</b></marquee></div>

<br /><font color='#00FFFF'>Ini merupakan kode yang saya gunakan untuk membuat teks bergerak seperti yang di atas.

</font><br /><br />

<div class="code">

<br />

<span style="color: white;">&lt;marquee behavior="alternate" width="400" scrollamount="30"&gt;</span><b style="color: #33FF33;">Teks Paling Awesome</b><span style="color: white;">&lt;/marquee&gt;

</span></div>

<br />

<br /><font color='#00FFFF'>Sekarang, anda boleh coba dalam blog anda, anda juga boleh gabungkan kode-kode marquee ini mengikut kesukaan anda masing-masing.<br /></font><br /></td>

<td width='200' height='700' bgcolor='' valign='top'>

      <table align="left" width='200' border='0' bgcolor='' bordercolor='green'>

      <tr align='center'>

      <td><p><a href="http://www.facebook.com/" target="_blank" title="Masuk ke Facebook"> <img src="gambar/facebook.ico" border="0" width="90" height="70"/></a></td><td><p><a href="http://www.youtube.com/" target="_blank" title="Masuk ke youtube"> <img src="gambar/youtube.ico" border="0" width="90" height="70"/></a><td>

      </p></tr></table>

     <table align='left' width='200' border='0' bgcolor='' bordercolor='green'>

          <center>

<td width="200" valign="top"><font color="#FFFF00" face="Cooper Std Black">

      <b>TUTORIAL HTML</b>

      <ul><li><a href="buat%20ayat%20bergerak.html" title='membuat tulisan bergerak'><font color='#0000FF' face='Times New Roman'>Cara membuat tulisan bergerak</a></font></li>

      <li><a href='Menbuat%20from%20komentar.html' title='membuat from komentar'><font color='#0000FF' face='Times New Roman'>Cara membuat from komentar</a></font></li>

      <li><a href='Membuat%20login.html' title='membuat halaman login'><font color='#0000FF' face='Times New Roman'>Cara membuat halaman login</a></font></li>

      </ul></font></table></td></tr><tr height="50"><td colspan='2' background='gambar/zz.jpg'><center><b><marquee><font face="Cooper Std Black" color="#00CCFF" size="7">~ Meskipun banyak kendala dalam pembuatan desain web, tapi tetap berusaha untuk mencapai hasil yang terbaik ~</font></b></marquee></center></td>

</tr>

</table>

<div style="position: fixed; bottom: 0px; left: 10px;width:130px;height:160px;">

<img border="0" src="gambar/twitter.ico" title="follow my twitter" alt="animasi bergerak gif" /></a><small><center>

</div>

<div style="position: fixed; bottom: 0px; right: 0px;width:100px;height:100px;"><a href='#top'>

<img border="0" src="gambar/top.png" width='50' height='50' title="Kembali ke atas" alt="animasi bergerak gif" /></a><small><center></div>

<div style="position: fixed; TOP: 0px; right: 10px;width:130px;height:160px;"><a href='login.html'>

<img border="0" src="gambar/c.png" width='40' height='40' title="Kembali ke login" alt="animasi bergerak gif" /></a><small><center></div><body background='gambar/yy.jpg'>

</body>

<EMBED SRC="MP3/A7x_Afterlife.swf" AUTOSTART="TRUE" LOOP="TRUE" WIDTH="1" HEIGHT="1" ALIGN="CENTER"></EMBED>

</html>

Langkah selanjutnya simpan dalam format HTML dan buka file dengan firefox atau sejenisnya, anda bisa menganti gambar-gambarnya sesuai yang anda inginkan, dan anda juga dapat menganti background dan animasi yang sesuai dengan anda.

Hasilnya akan seperti pada gambar 12 berikut: