Visitor

Game

WELCOME

Selamat datang di blog yang sederhana ini :D semoga anda betah menjelajah di blog ini.. silahkan baca - baca di artikel terbaru saya.. terima kasih telah berkunjung ^_^
Selengkapnya tentang saya

Tentang Saya.

Ghonhey Alvieroputra

Ghonhey Alvieroputra
Perkenalkan, saya Ghonhey seorang pendatang baru dunia blogger.. saya masih dalam tahap pembelajaran, jadi mohon maaf jika ada banyak kesalahan di blog ini.. jangan dihina ya bro :D

FIND ME ON..

RSS twitter facebook HOME
Info

Sunday 11 November 2012

Membuat Bayangan Objek dengan CorelDRAW



Membuat Bayangan Objek dengan CorelDRAW
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrdcfUOQQqf3GMmSPRXfaa8L7KItuKvsfHsEBW6W0zvDpwPr5HCi59CPzCxN_o1dp-d2pIlwuDjthEXNbJhCon8v4k708eHTUCBznGiZDQdK-P5pJF60jJEtBwNeTJW7WVZCBM4Juv69E/s1600/01.png
Pada tutorial ini kita membuat bayangan pada objek dengan menggunakan fasilitas Transparency tool;
Sebagai contoh kita ketik tulisan "CorelDRAW" dengan Text tool pada Toolbox, selanjutnya pada Menu Bar > Arrange >  pilih Transformations > Scale and mirror;

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi62WXKUnJIPzJoXhprEmlMEJyxhqkgkTbGLFS-DKGwXFHHljbF9xG2fBr4-JDDEZ4MF3s5QbNXVJ5u3nMiefgqBJtYeuZLeOwJNke_uZ6DuNdkAkwkApdEnbsY2aKsA3PXWVm6UQpx6AI/s1600/02.png

Setelah tampil menu Transformations, objek masih keadaan terseleksi klik sesuai urut nomor;

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmDq5yGpSu0XUKC9ItG6RAp2Oh3tJ-8qhhTj9kdCCYsvhnyuX2b4UUcv-m8ebcRNo3WWBthlhnYeCkLFvFK56lf7AoK6or_MijZxy4i5eJLUJv4QCc3mqqRLihFcmhPoRC-6Pa1YOmrbw/s1600/03.png

Sehingga hasilnya akan seperti gambar dibawah ini, objek yang bawah terseleksi;

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyrHnu_ZV_GK-FNypp0dudbrL4OKVigiqusKF7BU8C8ZVgTDTnqSKfpFv78hfgody5-qabm760heJBd1Vnj8kzGY7NlZfnVbuLgTYRg6FQSxAEV0OegfHreyhWLM0uELkOJRzSKS-9570/s1600/04.png

Selanjutnya pada Toolbox klik Transparency tool dan arahkan mouse pada objek tulisan yang bawah;

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCaprEzwbxZhqXzL-qkZD4xhjhNQiHg_XANMRQNagKPJAoKQ9PMplMx3LGLsi8NWQg7IttsOKjkwCF03J_lFinB1E9huHaWu181EqLsOsGZAY3iXBnH0GV0vuz2H8SaN5ne_nFgaZqwEE/s1600/05.png

Atur sedemikian rupa sampai terlihat pantes, kira-kira seperti gambar dibawah ini;
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXBTrHNP4Xs05uG_oSUe6m6jHGjWgqesshZhxZZwO_fRUvqqz3PDnFvvOT21DZLNCkZySxrr2835FC4t03P9L_Dqq9Wl-eOptWFbNF-gvD5wCjCl3F6jfY7JJkRvXEt089_Ve60_huPLg/s1600/06.png

Selesai, mudah-mudahan mudah dimengerti; 


Baca Selengkapnya »

Saturday 10 November 2012

Belajar Elemen Video HTML5

Belajar Elemen Video HTML5
Dari artikel yang saya jelaskan sebelumnya, mungkin anda sudah sedikit mengerti tentang html5 kan? Nah, untuk kali ini langsung saja kita akan membahas struktur elemennya. Yang pertama kali akan saya bahas adalah video html5.
Buat kamu yang baru masuk ke sini, coba pelajari dulu tutorial tentang belajar HTML5  dan Belajar Elemen HTML5 ini.
Video html5 elemen diperkenalkan dalam spesifikasi rancangan HTML5 dengan tujuan memutar video atau film. Sebagian fungsinya adalah menggantikan elemen objek (yang isinya skrip yang rumit). Video HTML5 dimaksudkan untuk menjadi standar baru dalam menampilkan video di web tanpa plugin. Intinya sih supaya lebih cepat loading ketimbang harus dengan plugin flash atau yang lain.
Standar HTML5 mencakup banyak fitur baru untuk aplikasi web dan antarmuka yang lebih dinamis. Salah satu komponen seperti disebut di atas yakni <video>. Dengan menggunakan Javascript HTML5 video kita dapat diputar pada perangkat-perangkat mobile terbaru dan bahkan di browser lama tanpa Flash. Youtube juga telah mencoba fitur baru ini tapi masih dalam taraf percobaan.
Untuk menampilkan video menggunakan html5, perhatikan script HTML5 berikut ini :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE HTML>
<html>
<body>
<video width="320" height="240" controls="controls">
<source src="movie.mp4" type="video/mp4" />
<source src="movie.ogg" type="video/ogg" />
Your browser does not support the video tag.
</video>
</body>
</html>
Baca Selengkapnya »

Friday 9 November 2012

Animasi Masking

Animasi Masking

Animasi masking adalah animasi yang pada intinya menampilkan objek yang semula kita sembunyikan. Animasi masking mempunyai 2 metode dasar yaitu :
1. Area masking yang bergerak, objek yang di mask diam.
2. Area masking yang diam dan objek yang di mask yang bergerak.
Kedua teknik tersebut akan menampilkan hasil animasi yang berbeda.. Selain itu area masking hanya boleh berupa fill. Jadi untuk outline (garis) tidak diperbolehkan.

Membuat animasi masking
Di bawah ini akan ditunjukkan proses pembuatan animasi masking :
1. Buka file baru atau Ctrl+N.
2. Disini kita akan berkerja dengan area background berwarna hitam, jadi pada properties.kita ubah dulu warna background menjadi warna hitam.
3. Kemudian buat dua buah layer.dengan nama layer “text” yaitu layer yang di mask dan layer “masked” yaitu layer masking.
4. Pada layer text frame ke-1 buat sebuah tulisan “ANIMASI MASKING” dengan warna putih seperti pada gambar.
5. Kemudian klik kanan frame 50 pada layer text dan pilih Insert Frame.
6. Pada layer masked frame ke-1, buat sebuah lingkaran berbentuk elips berwarna hitam, letakkan di samping kiri dari stage.
7. Pada layer masked frame ke-50 klik kanan pilih Insert Keyframe. Lalu ubah posisi lingkaran elips ke samping kanan stage.
8. Pada layer masked frame ke-1 klik kanan pilih Create Motion Tween.
9. Pada layer masked, klik kanan pilih mask .
10. Kemudian tekan Enter untuk melihat hasilnya.
Baca Selengkapnya »

VARIABEL TEKS : Membuat aplikasi perhitungan sederhana

VARIABEL TEKS : Membuat aplikasi perhitungan sederhana

Disini kita akan membuat aplikasi sederhana yang berhubungan dengan Matematika yaitu aplikasi perkalian. Ini merupakan aplikasi standar yang dasar banget. Nantinya dengan dasar ini dapat kita kembangkan untuk aplikasi yang macem-maem. So….jangan ampek ketinggalan tutorialnya key…Khususnya bagi yang pengan belajar dari awal tentang Flash dan juga yang pengen mbuat aplikasi pembelajaran interaktif dengan menggunakan Macromeia Flash 8.0.

1. Pertama siapkan dokumen baru.
2. Buat dua buah field teks dengan tipe input text dan satu buah dengan tipe Dynamic text dengan menggunakan Text Tool dan atur propertisnya seperti pada gambar di bawah ini.


3. Dan hasilnya akan seperti dibawah ini.

4. Beri nama variabel pada ketiga field text tersebut, dengan variabel namanya a untuk input text pertama, b untuk input text yang kedua dan c untuk dynamic text.
5. Buat static text bertuliskan X sebagai lambang perkalian, tempatkan di antara text Input text pertama dan kedua. Setelah itu buat lagi = dan tempatkan di antara input text yang kedua dan dynamic text. Seperti tampak pada gambar.

6. Seleksi objek sama dengan (=) konversi menjadi button dengan mengklik kanan>Convert to Symbol.

7. Beri nama symbol button dengan nama samadengan dan dengan type button.

8. Kemudian klik kanan lagi pada tombol (=) yang kita buat tadi lalu pilih action.

9. Tulis kode dibawah ini.

Kodenya ketik sendiri yah biar biar terbiasa gak copy paste.

10. Kemudian tinggal tekan Ctrl+Enter untuk melihat hasilnya.
Baca Selengkapnya »

Animasi Motion Guide

Animasi Motion Guide

Animasi motion guide adalah animasi yang mempunyai gerakan sesuai dengan
jalur yang kita buat. Animasi ini merupakan lanjutan dari animasi motion tween.
Animasi ini sangat cocok digunakan untuk jenis animasi yang membutuhkan
ketelitian dalam pergerakan yang dikehendaki atau sesuai keinginan pembuat
animasi.

Membuat animasi motion guide


Di bawah ini akan ditunjukkanproses pembuatan animasi motion guide :

  1. Buka file baru atau Ctrl+N
  2. Kemudian kita pilih Oval tool (O) pada toolbox dan kita mulai membuat
    objek lingkaran pada stage dengan mengklik dan drag, jangan lupa warna
    fiil objek balok harus berbeda dari warna background stage.
  3. Kemudian klik kanan di frame ke-1, pilih Create motion tween

  4. Pada frame ke-10 klik kanan kita pilih Keyframe,, kemudian kita
    geser lingkaran ke kanan sehingga tampak seperti pada gambar
  5. Kemudian klik kanan layer 1 kemudian pilih Add Motion Guide
    maka akan muncul layer baru seperti tampak pada gambar.


  6. Kemudian dengan layer guide masih terseleksi kita pilih Pencil Tool untuk
    membuat jalur yang akan menjadi lintasan animasi dari lingkaran.

  7. Agar objek lingkaran dapat bergerak sesuai jalur, maka tengah objek
    haruslah berada di tengah jalur.
  8. Oleh karena itu, klik frame 1 layer 1, Kemudian pilih Free Transform
    Tool
    agar bulatan tengah objek terlihat. Kemudian pindahkan objek
    sampai lingkaran tengah objek berada di ujung awal jalur.
  9. Kemudian klik frame 40 layer 1, Kemudian pilih Free Transform Tool
    agar bulatan tengah objek terlihat. Kemudian pindahkan objek sampai
    lingkaran tengah objek berada di ujung akhir jalur.
    Kemudian tekan Enter untuk melihat hasilnya
Baca Selengkapnya »

Manfaat flash dalam Dunia Pendidikan

Manfaat flash dalam Dunia Pendidikan

Kemajuan teknologi informasi dan komunikasi mempengaruhi banyak sektor kehidupan. Guru yang bergelut di bidang pendidikan dan pengajaran juga tidak luput dari pengaruh tersebut. Guru dituntut untuk mengikuti perkembangan teknologi, terutama sekali teknologi informasi dan komunikasi (TIK) yang berkembang sangat pesat dalam beberapa tahun terakhir. Apabila guru tidak mampu mengikuti kecepatan perubahan teknologi, maka dikhawatirkan guru akan gagal menjalankan fungsinya sebagai pengajar dan pendidik.

Seiring dengan kemajuan teknologi, ada banyak sarana dan prasarana yang membuat proses belajar mengajar (PBM) jauh lebih menyenangkan bagi peserta didik. Ini mengakibatkan PBM yang mengandalkan kapur dan papan tulis nampaknya akan semakin ditinggalkan tergilas oleh kemajuan teknologi.

Guru dalam kegiatan pengajarannya dapat memanfaatkan laptop (komputer jinjing) dan LCD proyektor dalam memberi materi pelajaran kepada para siswanya. Melalui kecanggihan teknologi ini PBM pastinya akan menjadi jauh lebih menarik. Dan, semakin kreatif guru dalam memanfaatkan teknologi, maka akan semakin baik pula daya serap siswa terhadap materi pelajaran.

Pertanyaan yang muncul adalah sudah maksimalkah guru memanfaatkan kemajuan teknologi dalam kegiatan belajar mengajarnya. Tidak dapat kita pungkiri bahwa masih banyak guru yang masih gagap teknologi (gaptek). Contoh sederhananya adalah dalam hal pengoperasian komputer. Tidak sedikit guru yang tidak dapat mengoperasikan komputer. Padahal kemampuan mengoperasikan komputer adalah langkah awal dalam memanfaatkan kemajuan teknologi lainnya. Jadi dapat dikatakan bahwa guru belum secara optimal memanfaatkan kemajuan teknologi dalam fungsinya sebagai tenaga pengajar dan pendidik.
Dari sebagian latar belakang tersebut flash merupakan salah satu jawabannya.
Kenapa begitu? iya karena dengan flash para guru bisa meningkatkan motivasi belajar siswa, dengan menggunakan media tentunya. dan media tersebut dibuat dengan menggunakan flash. Kenapa harus flash? kenapa tidak yang lain saja?
Mungkin bagi sebagian orang yang belum pernah mempelajari flash, flash merupakan program yang sulit dipelajari. itu merupakan hal yang sangat salah sekali. flash sangat cocok sekali bila digunakan untuk membuat media ajar yang interaktif dan animatif dari segi tampilan dan juga mengena dalam segi tujuan karena dengan adanya media yang menarik akan membuat minat belajar siswa menjadi meningkat. Amin
Baca Selengkapnya »

Animasi Motion Tween


Animasi Motion Tween

Animasi motion tween digunakan apabila kita ingin membuat gerakan animasi yang teratur. Animasi ini sangat mengurangi waktu karena kita tidak perlu membuat animasi secara frame per frame. Sebaliknya Anda hanya membuat frame awal dan frame akhir saja. Dua alasan utama mengapa Animasi motion tween sangat baik yaitu karena mengurangi pekerjaan mengambar dan meminimalkan ukuran file karena isi dari setiap frame tidak perlu disimpan.

Membuat animasi motion tween

Di bawah ini akan ditunjukkanproses pembuatan animasi motion tween :
  1. Buka file baru atau Ctrl+N
  2. Kemudian kita pilih Oval tool (O) pada toolbox dan kita mulai membuat objek lingkaran pada stage dengan mengklik dan drag, jangan lupa warna fiil objek balok harus berbeda dari warna background stage.
  3. Kemudian klik kanan di frame ke-1, pilih Create motion tween
  4. Pada frame ke-10 klik kanan kita pilih Keyframe,, kemudian kita geser lingkaran ke kanan sehingga tampak seperti pada gambar
  5. Kemudian pada frame ke-20 klik kanan kita pilih Insert Keyframe kemudian kita geser lingkaran ke bawah sehingga tampak seperti pada gambar.
  6. Kemudian pada frame ke-30 klik kanan kita pilih Insert Keyframe, kemudian kita geser lingkaran ke kiri sehingga tampak seperti pada gambar.
  7. Kemudian tekan Enter untuk melihat hasilnya
Baca Selengkapnya »

Animasi Motion Shape

Animasi Motion Shape

Animasi jenis ini adalah animasi dimana kita dapat merubah bentuk atau memecah bentuk dari objek yang kita animasikan.

Membuat animasi Motion Shape

Disini akan ditunjukkan bagaimana carapembuatan animasi Motion Shape

  1. Buka file baru atau Ctrl+N
  2. Pada drame pertama kita buat sebuah objek lingkaran dengan menggunakan Oval Tool.
  3. Kemudian pada frame 20 buatlah sebuah keyframe.
  4. Setelah itu pada frame 20 yang telah kita buat sebuah key frame, kita hapus dengan cara klik frame 20 kemudian tekan Delete pada keyboard.
  5. Setelah keyframenya kosong kita buat sebuah objek persegi pada frame 20 tersebut.

  6. Klik frame 1 kemudian buka panel properties, pada pilihan animasi tween pilih shape.

  7. Kemudian tekan Enter untuk melihat hasilnya
Baca Selengkapnya »

Area Perkenalan Flash

Cara meletakan action script pada Button

Pemrograman Flash sangat sensitif sekali akan kesalahan Salah tanda petik saja pada script akan terjadi error, dan tidak akan bekerja. Karena itu pada kesempata ini akan diberikan dasar-dasar yang sebenarnya sangat sepele, tetapi apabila diabaikan, akan berakibat fatal, apalagi buat para orang yang baru belajar flash. Untuk meletkan action script pada button adalah :


  1. Pastikan button (tombol) baik yang kita buat sendiri ataupun yang mengambilnya dari panel library sudah terseleksi. Cara menyeleksinya yaitu dengan selection tool dan kita klik satu kali pada button yang ingin kita beri action.
    Add caption
  2. Untuk memastikannya kita bisa melihat pada property inspector setelah button kita seleksi maka akan muncul keterangan seperti pada gambar di bawah.
  3. Setelah button yang ingin kita beri scipt sudah terselaksi, langkah selanjutnya adalah membuka panel action. Disini ada beberapa cara yang bisa digunakan, pertama bisa degan lagsun tekan f9, yang kedua adalah adalah klik kanan lalu pilih action, kemudian cara yang ketiga adalah langsung membukanya pada panel action.
  4. Yang harus di ingat di sini untuk mecegah terjadinya kesalahan adalah pada panel action yang telah terbuka terdapat keterangan yang menyebutkan bahwa action adalah milik dari button yang telah diseleksi, karena setiap action berbeda-beda antara penempatan pada button, movie clip, ataupun pada frame.
  5. Setelah langkah-langkah tersebut barulah kita bisa menuliskan scipt yang kita ingin Inginkan
By ILMU MULTIMEDIA
Baca Selengkapnya »

Thursday 8 November 2012

Effect Tulisan Api

Effect Tulisan Api


Tutorial ini gratis untuk semua untuk melihat! Jika Anda ingin akses ke file sumber klik di sini.
Berikut adalah tutorial dibangun dalam Adobe Photoshop CS3 yang dapat Anda gunakan untuk memberikan teks Anda menjadi kenyataan terik. Hal ini juga dapat diterapkan untuk bentuk lainnya. Kami pikir mungkin ide yang keren untuk bahkan menerapkan efek ini untuk gambar seorang pelari cepat, kita mungkin melakukan ini di tutorial di jalan tetapi untuk sekarang kita akan tetap pada teks. Juga, kita baru-baru ini menghubungi melalui orang-orang di 10steps.sg dan mereka memiliki tutorial yang sangat mirip dengan ini. Check it out di sini. Pikiran besar berpikir sama.
Kita akan menggunakan gambar pencampuran api menyala dengan filter dan metode lapisan lainnya pencampuran Photoshop untuk datang dengan sesuatu yang licin!
Pratinjau Gambar Final:

http://photoshop.kingtutz.com/2009/10/22/files/2009/10/Picture-18.png
Buat dokumen dengan 300dpi dengan dimensi 17 x 11 dengan latar belakang hitam. Menggunakan Type tool (T), pilih font "Billboard" dan ketik apa pun yang Anda ingin mengetik teks api Anda. Kami ingin memastikan bahwa kita tahu bagaimana tipe kami akan terlihat selesai jadi kita hanya mengetik dan mengatur seluruh hal. Seperti yang Anda lihat di bawah. Setelah ini, meratakan lapisan teks dengan mengklik mereka berdua di palet layer (kita memiliki "raja" pada satu lapisan dan "tutz" yang lain) dan mendorong Command + E. Ini akan meratakan mereka. Ini adalah apa langkah ini terlihat seperti:
Alpha
Sekarang kita akan menggunakan alat tenda (M) untuk memotong lapisan teks diratakan sehingga kita dapat menerapkan efek api yang berbeda untuk setiap huruf dari teks. Cukup pilih alat tenda (M), menyeret kotak di sekitar huruf "K", klik kanan, dan pilih layer via cut. Lakukan ini untuk setiap surat itu sehingga mereka sekarang semua pada lapisan mereka sendiri.
Kita akan mulai membuat "K" terlihat seperti itu terbakar. Klik kanan pada layer tipe K diratakan dalam palet layer dan pilih Blending Options. Periksa pada Drop Shadow dan kunci dalam pengaturan berikut:
http://photoshop.kingtutz.com/files/2009/10/Picture-4.png
Check on Color Overlay and key in the following settings.
http://photoshop.kingtutz.com/files/2009/10/Picture-5.jpg
Check on Satin and key in the following settings.
http://photoshop.kingtutz.com/files/2009/10/Picture-6.jpg
Periksa pada Inner Glow dan ketik pengaturan berikut ... memilih kuning yang suite terbaik yang ... di sini kita digunakan # e3bd29http://photoshop.kingtutz.com/files/2009/10/Picture-7.png
Alpha
Kami sekarang akan rasterize / meratakan lapisan jenis tapi sebelum kita melakukannya kita akan klik kanan pada layer dipipihkan "k" dalam palet layer dan pilih Copy Style Layer. Kemudian kita akan klik kanan pada setiap lapisan surat lain dan pilih Style Paste Layer. Ini akan memungkinkan kami untuk mentransfer semua pengaturan untuk setiap huruf. Setelah ini dilakukan membuat salinan dari setiap lapisan dan menyembunyikannya (cara ini kita memiliki cadangan). Setelah cadangan masing-masing telah dibuat, meratakan setiap lapisan jenis individu.
Menggunakan Eraser tool dengan ukuran yang bervariasi dan memudar opacity dari bagian atas setiap huruf.
http://photoshop.kingtutz.com/2009/10/22/files/2009/10/Picture-18.png
Pergi ke Filter Liquify>. Pilih Tool Warp Forward dan kunci dalam pengaturan berikut. Menggunakan alat Forward Warp, membuat beberapa gelombang di perbatasan jenis.http://photoshop.kingtutz.com/files/2009/10/Picture-10.png

Baca Selengkapnya »

Saturday 3 November 2012

Mengenal & Belajar HTML

Mengenal & Belajar HTML

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTuR4WDqwd0KKXeLoHgxCdFn9IkQEhyphenhyphenLQhBmT9txBzCbmhGHTw82c1hIjPEzz6C9MGRFlCPv1KJW9gcbEFWHKzQMV8o_hw8uJecF5xzwKumvFNQAxmvt0f9MUydmUw8HQBGQKbTWOKz8PA/s320/HTML+5.png

Mari belajar HTML.
Jika anda baru terjun di dunia maya alias pemula (newbie) dan tertarik ingin belajar HTML untuk membuat website sendiri maka anda tidak salah datang ke blog ini, karena disini anda akan mendapatkan tutorial, tips, triks dan artikel-artikel tentang bagaimana cara belajar HTML untuk membuat website.
Di Internet sebenarnya kita bisa saja mendapatkan banyak template baik yang gratis maupun yang berbayar, namun kadang tidak sesuai dengan keinginan (selera) kita. Maka kita harus meng-edit dan melakukan perubahan-perubahan. Di dalam mengedit dan melakukan perubahan inilah kita harus mengerti dan memahami bahasa HTML.
Di blog ini anda akan mendapatkan tutorial belajar HTML yang disertai dengan contoh-contoh mulai dari dasar, sehingga akan mudah dipahami dan sangat cocok bagi anda yang masih pemula. Dan bagi anda yang mengedit atau membuat suatu halaman web bisa melangkah ke halaman-halaman berikutnya sesuai dengan topik yang anda inginkan.
Untuk belajar anda dapat menggunakan program HTML seperti Ms FrontPage, Dreamweaver atau Text Editor (Notepad), sesuai dengan selera anda masing-masing. Namun untuk tutorial ini akan diajarkan dengan menggunakan teks editor yang simpel yaitu Notepad, jika anda ingin teks editor yang lebih interaktif anda bisa menggunakan Notepad++.
Dalam belajar sebaiknya anda langsung praktek di program HTML anda, sehingga akan lebih mudah untuk dipahami, anda ketik atau copy/paste contoh-contoh HTML-nya di program HTML anda dan preview di browser untuk melihat hasilnya.
Saya sangat berterimakasih jika anda bersedia memberikan kritik, saran maupun komentar atas kekurangan, error, broken links dan lainnya, masukan dari anda sangat membantu untuk perbaikan tutorial maupun blog ini.
Akhir kata saya mengucapkan terimakasih banyak atas kunjungan anda dan selamat belajar.


Pengenalan HTML

Pengertian singkat tentang HTML
HTML (Hyper Text Markup Language) merupakan bahasa standar untuk membuat suatu dokumen HTML (halaman web) yang terdiri dari kode-kode singkat tertentu, dimana dengan kode-kode tersebut akan memerintahkan Web browser bagaimana untuk menampilkan halaman Web yang terdiri dari berbagai macam format file seperti teks, grafik, animasi, link maupun audio-video.
Sedangkan Web browser adalah sebuah progam yang dapat menterjemahkan kode perintah dari dokumen HTML tersebut sehingga dapat kita lihat, baca dan dengar. Contoh dari Web Browser adalah Internet Explorer, Netscape Navigator, Mozilla Firefox, Opera, Safari dll.
HTML mempunyai file perluasan (extention) htm atau html. Dimana kedua perluasan tersebut adalah sama, jadi anda boleh menyimpan file dokumen HTML dengan extention ".htm" atau ".html".
Untuk mulai belajar HTML kita akan menggunakan Texs Editor, Notepad. Di bawah ini adalah contoh suatu dokumen HTML yang sangat sederhana. Buka Notepad, silahkan mulai dengan mengetikkan (copy/paste) kode di bawah ini:
<html>
<head>
<title>Titel Websiteku</title>
</head>
<body>
Ini adalah dokumen HTML pertamaku
</body>
</html>
Preview
Simpan file tersebut ke C:\My Documents dengan nama "websiteku.htm." Ketika menyimpan file tersebut dengan Notepad ganti "save as type"-nya dengan "all files". Kemudian buka browser, dari menu File klik Open dan tujukan ke C:\My Documents\websiteku.htm "klik Ok" maka halaman website pertama anda akan ditampilkan.
*Lakukan hal yang sama untuk contoh-contoh selanjutnya.
Perintah didalam dokumen HTML terdiri dari berbagai struktur penyusun seperti tag, elemen, atribut dan nilai. Tag terdiri dari lambang-lambang khusus seperti: " <", " >" dan "/", untuk menuliskannya di dalam dokumen HTML dimulai dengan tag pembuka " <…>"dan diakhiri dengan tag penutup " </…>". Kemudian di dalam tag tersebut terdapat teks seperti contoh diatas :html, head, title,body dan yang lainnya ini disebut dengan Elemen HTML.
Elemen HTML kemudian ada yang memiliki atribut dan nilai tertentu, seperti contoh untuk membuat warna latar belakang (background): <body bgcolor="0000ff">, body merupakan elemen, bgcolor adalah atribut dan 0000ff merupakan nilai (value).
Elemen HTML mempunyai tiga hal penting yaitu: tag pembuka, isi, dan tag penutup. Sebagai contoh: Elemen html mempunyai tag pembuka " <html>" dan tag penutup " </html>" dan yang berada diantaranya merupakan isi atau konten dari elemen html tersebut. Untuk menuliskan Elemen HTML bisa menggunakan huruf besar maupun huruf kecil. Contoh: <HTML>, <HtMl>, <HTml>, <html>, semuanya adalah sama.

Tag Dasar HTML

Komponen dasar dari suatu dokumen HTML terdiri dari tag elemen HTML, HEAD dan BODY. Berikut ini adalah penjelasan dari Tag Elemen tersebut:
<html>
<head>
<title>Disini titel websiteku</title>
</head>
<body>
Disini adalah konten yang tampil di browser
</body>
</html>
Preview
Tag pertama pada dokumen HTML diatas adalah: " <html>" tag ini merupakan awal dari suatu dokumen HTML, dan tag " </html>" merupakan akhir dari dokumen HTML. Isi keseluruhan dari suatu dokumen HTML selalu berada diantara tag <html>…</html>.
Kemudian tag " <head>…</head>" (header) adalah informasi dari dokumen HTML. Informasi di dalam header meliputi: title, meta, style, script dll. Selain Title informasi di dalam header ini nantinya tidak akan di tampilkan di web browser.
Tag berikutnya adalah " <title>…</title>" merupakan bagian dari Head, tag ini adalah sebagai Titel dari dokumen HTML, titel ini akan tampil di titel dan tab browser. Sebagai contoh sewaktu anda membuka file contoh diatas perhatikan akan muncul tulisan "Disini titel websiteku".
Titel Websiteku
Tag "<body>…</body>" merupakan isi dari suatu dokumen HTML yang akan ditampilkan di web browser, yang terdiri dari berbagai macam format file berupa teks, grafik, link, animasi maupun audio-video (multimedia).

Format Font HTML

Tag HTML untuk font adalah <font>…</font>, dengan tag ini kita bisa menentukan jenis font (face), warna (color), dan ukuran (size), untuk lebih jelasnya mari kita perhatikan contoh berikut ini:
<html>
<head></head>
<body>
Untuk membuat jenis font (face):
<h1><font face="Verdana">Judul dengan font Verdana</font></h1>
<p><font face="Times">Konten dengan font Times</font></p>
Untuk membuat ukuran (size):
<h1><font size="5">Judul dengan size 5</font></h1>
<p><font size="3">Konten dengan size 3</font></p>
Untuk membuat warna font (color):
<h1><font color="blue">Judul dengan warna biru</font></h1>
<p><font color="red">Konten dengan warna merah</font></p>
Contoh komplit untuk membuat jenis font (face),size dan color:
<h1><font face="Verdana" size="4" color="green">Judulnya Tentang Font</font></h1>
<p><font face="Arial" size="3" color="#660000">Ini adalah contoh tulisan dengan <i>pengaturan font</i> yang menggunakan<br>
tag HTML elemen <b>font</b> dengan atribut face, size dan color...</font></p>
</body>
</html>
Preview
Berikut adalah sebagai referensi bagi anda untuk memanipulasi atribut face, color dan size:
Atribut
face="Jenis font yang digunakan", contoh: face="Tahoma"
size="Ukuran dari font (1-7)", contoh: size="3"
size="Memperbesar ukuran font", contoh: size="+1"
size="Memperkecil ukuran font", contoh: size="-1"
color="Warna dari font", contoh: color="blue"
color="Warna dari font", contoh: color="#FF0000"
Sesuai dengan recomendasi dari World Web Consortium (W3C), Untuk HTML 4.0 keatas, tag <font> tidak dipergunakan lagi, sebagai gantinya dibuat tag <style> atau disebut dengan Cassading Style Sheets (CSS). Dengan CSS penggunaannya akan lebih kompleks dan lebih luas lagi karena dapat dikombinasikan dengan tag elemen-elemen lainnya di dalam dokumen HTML. Berikut adalah contoh penggunaan tag style sheets:
<html>
<head></head>
<body>
Untuk membuat jenis font (face):
<h1 style="font-family:verdana">Judul Menggunakan font verdana</h1>
<p style="font-family:tahoma">Konten menggunakan font tahoma</p>
Untuk membuat ukuran (size):
<h1 style="font-size:150%">Judul dengan ukuran 150%</h1>
<p style="font-size:80%">Konten dengan ukuran 80%</p>
Untuk membuat warna font (color):
<h1 style="color:blue">Judul dengan warna Biru</h1>
<p style="color:red">Konten dengan warna merah</p>
Contoh komplit untuk membuat jenis font (face),size dan color:
<p style="font-family:verdana;font-size:80%;color:green">
Ini adalah contoh tulisan pengaturan font dengan <i>Cassading Style Sheets</i> (CSS) yang<br>
menggunakan tag HTML elemen <b>style:</b> font-family, font-size dan color...</p>
</body>
</html>
Preview

Format text HTML

Untuk menulis biasanya ada paragraf dan baris baru, lantas bagaiman cara menuliskannya di dokumen HTML?. Dari contoh yang sudah kita buat sebelumnya, coba tambahkan dengan tag-tag berikut ini:
<html>
<head>
<title>Selamat Datang di Websiteku</title>
</head>
<body>
Ini adalah halaman HTML pertamaku.
<p>Aku sedang membuat paragraf dan ini contohnya.</p>
<p>Ini contoh paragraf yang lainnya.</p>
<p>Ini juga paragraf mm...tapi de-<br>
ngan baris baru.<br>
Ini baris baru yang lain.</p>
</body>
</html>
Preview
Untuk membuat suatu paragraf, tag elemennya adalah <p>…</p>, dan untuk baris baru adalah <br>, perlu diketahui bahwa sebagian tag elemen HTML tidak memerlukan tag penutup, sebagai contoh adalah <br> ada juga <hr>, apa itu <hr>?, coba lanjutkan lagi dengan contoh berikut ini:
<html>
<head>
<title>Selamat Datang di Websiteku</title>
</head>
<body>
<hr>
<h1>Ini adalah halaman HTML pertamaku.</h1>
Dikerjakan oleh: <!-- Tolong isikan dengan nama anda -->
<hr>
<p>Aku sedang membuat paragraf dan ini contohnya.</p>
<p>Ini contoh paragraf yang lainnya.</p>
<p>Ini juga paragraf mm...tapi de-<br>
ngan baris baru.<br>
Ini baris baru yang lain.</p>
</body>
</html>
Preview
Nah..udah tau kan apa itu <hr>. Garis Horizontal <hr> juga tidak menggunakan tag penutup. Untuk melihat tag-tag apa saja yang tidak memerlukan tag penutup dapat dilihat di artikel tentang tag-tag html tanpa tag penutup.
Selanjutnya tag <h1>…</h1> disebut dengan Heading, merupakan ukuran teks yang biasa di pakai untuk judul, bab, maupun sub-bab lainnya. Ukurannya ada 6 jenis mulai dari <h1> sampai <h6>, ukuran yang paling besar adalah h1 dan yang terkecil adalah h6.
Preview
Selanjutnya tag <!--…--> adalah Comments digunakan untuk memasukkan (menyisipkan) suatu komentar di dalam HTML. Suatu comments akan diabaikan oleh browser. Kamu dapat menggunakan komentar untuk menjelaskan sesuatu hal.
Dibawah ini adalah contoh format teks yang sering digunakan di dalam dokumen HTML :
<html>
<head></head>
<body>
<hr>
<h1>Ini adalah halaman HTML pertamaku.</h1>
Dikerjakan oleh: <!-- Tolong isikan dengan nama anda -->
<hr>
<p>Aku sedang mempelajari format-format teks.<br>
Contoh-contohnya adalah sebagai berikut:</p>
<p>Teks Normal<br>
<tt>Teks mesin ketik</tt><br>
<b>Teks tebal (bold)</b><br>
<strong>Teks tebal dengan perintah Strong</strong><br>
<i>Teks dengan italic (miring)</i><br>
<em>Teks miring dengan perintah Emphasized</em><br>
<u>Teks bergaris bawah (underline)</u><br>
<strike>Teks tercoret (strike)</strike><br>
<big>Teks lebih besar dari normal</big><br>
<small>Teks lebih kecil dari normal</small><br>
Teks menggunakan Subscript: Molekul Air adalah H<sub>2</sub>O<br>
Teks menggunakan Superscript: Hasil dari 10<sup>2</sup>=100<br></p>
</body>
</html>
Preview
Kemudian untuk menampilkan teks sesuai dengan yang tertulis kita gunakan tag <pre>…</pre>, misalnya jika anda menuliskan syair sebuah lagu atau puisi:

<html>
<body>
<pre>
   <b>PUITUIS ASA</b>
   Hari ini...
   Aku sedang belajar...
   Belajar tentang HTML.
      Sulit 'ntuk dimengerti,
      Karena banyaknya teks-teks aneh.
      Tapi biarlah...
   Akan kucoba...
   Sampai berhasil.
</pre>
</body>
</html>
Preview



Hyperlink digunakan untuk menghubungkan antar dokumen di dalam web. Tag HTML Hyperlink biasa disebut dengan anchor (a) kemudian diikuti dengan href sebagai alamat tujuan dari link tersebut. Berikut kita akan membuat suatu Hyperlink ke suatu alamat url:
<html>
<head></head>
<body>
<p>Aku sekarang sedang membuat hyperlink</p>
Jika anda ingin mengunjungi Microsoft
<a href="http://www.microsoft.com/">Klik disini</a><br>
<a href="http://www.yahoo.com/">Link ini</a> akan membawa anda ke Yahoo.com
<p>Untuk membuat hyperlink url agar dibuka pada jendela browser yang baru:<p>
<a href="http://www.mp3.com/" target="_blank">Website Musik</a>
<p>Agar hyperlink tidak bergaris bawah:<p>
<a href="http://www.mp3.com/"target="_blank" style="text-decoration: none">Website Musik</a>
<p>Hyperlink ke suatu halaman tertentu dalam web:<p>
<!--dengan catatan anda harus tau nama halaman tujuan tersebut-->
<a href="http://htmlcssguides.com/belajar-css/">Link ini</a> akan membawa anda ke halaman belajar css.
</body>
</html>
Preview
Untuk membuat hyperlink dengan menggunakan gambar (image). Pastikan gambar tersebut berada pada folder yang sama dengan dokumen html anda dan harus tahu nama dan ektensinya, kemudian ganti ke atribut yang bertuliskan scr, misalkan jika nama gambar tersebut adalah yahoo.gif, maka :
<a href="http://www.yahoo.com"> <img src="yahoo.gif" border="0" width="147" height="31"></a>

Img merupakan atribut untuk suatu image (gambar), border adalah garis yang mengelilingi sisi image, width dan height merupakan lebar dan tinggi dari image. Kreatiflah untuk menganti nilai yang ada diantar tanda "…"sehingga anda akan lebih mengerti. Untuk memposisikan gambar, tambahkan dengan atribut align="…", left= kiri, center= tengah dan right= kanan.
<a href="http://www.yahoo.com"> <img src="yahoo.gif" border="0" width="147" height="31" align="left"></a>
Sekarang coba geser mouse anda ke gambar di atas, jangan di-klik, perhatikan akan ditampilkan suata tulisan singkat mengenai gambar tesebut, ini disebut dengan screen tips, cara membuatnya adalah menambahkan title pada tag anchor (a) sehingga menjadi:
<a href="http://www.yahoo.com" title="Hai... klik gambar ini maka anda akan dibawa ke Yahoo.com"><img src="contoh.jpg" border="0" width="147" height="31" align="left" alt="yahoo"></a>
Agar cepat mengakses internet kita boleh mengatur browser untuk tidak menampilkan image (gambar). Dan semua gambar akan ditampilkan dengan teks alternatif (alt), jika gambar tesebut tidak memiliki alternatif teks maka hanya akan dilambangkan dengan lambang x.
<a href="http://www.yahoo.com"> <img border="0" src="contoh.jpg" width="120" height="30" align="left" alt="Text Alternatif Yahoo.com"></a>

Background HTML
Dengan menggunakan latar belakang (background) maka website kita akan nampak semakin menarik. Untuk memasukkan latar belakang kita bisa menggunakan pilihan warna maupun grafik (gambar).
Sekarang kita mulai dengan menggunakan pilihan warna:
<html>
<head></head>
<body bgcolor="#FF99FF">
<p>Hai.. Saat ini saya sedang belajar membuat latar belakang dengan warna</p>
<p>Kalau anda kurang suka dengan warnanya... ganti aja deh... kode warnanya... </p>
</body>
</html>
Preview
Untuk nilai dari atribut bgcolor diatas anda bisa menggunakan Kode hexadecimal, Nilai RGB atau Nama dari warna tersebut.
Coba anda ganti nilai dari atribut bgcolor dengan contoh dibawah ini:
<body bgcolor="#FFFF00">
<body bgcolor="rgb(250,250,0)">
<body bgcolor="yellow">
Selanjutnya membuat latar belakang dengan grafik atau gambar.
Pertama anda harus punya gambar yang ber-extention .gif, .jpg atau .png yang akan dijadikan background, masukkan (copy) gambar tersebut ke folder tempat file dokumen HTML anda berada, dan harus tahu nama dan perluasan (extention) dari file tersebut, misalkan nama filenya adalah: background.jpg
<html>
<head></head>
<body background="background.jpg">
<font color="blue"><h1 color="red">Selamat datang di Websiteku</h1></font><hr color="#ff0000" size="2">
<p><font face="Verdana" size="4" color="black">Hai... Saat ini saya sedang belajar membuat latar belakang dengan gambar,<br>
Biar bagaimanapun anda diwajibkan harus menyukainya...</font></p>
</body>
</html>
Preview
Kemudian latar belakang dapat juga menggunakan gambar yang ada di website orang lain, tapi dengan catatan anda harus sedang terhubung ke internet (online) dan harus tahu alamat url dari gambar tersebut di internet. Untuk mengetahui alamat suatu gambar klik kanan gambar tersebut kemudian pilih properties dan lihat image location, copy alamat tersebut dan ganti ke contoh dibawah ini diawali dari http:
<html>
<head></head>
<body background="http://i52.tinypic.com/nmm2cz.jpg">
<p>Hai.. Saat ini saya sedang belajar membuat latarbelakang dengan menggunakan gambar dari website orang lain! hua ha..ha..ha..</p>
<p>Mudah-mudahan yang punya website ngamuk sekalian deh...siapa takut!!</p>
</body>
</html>
Preview
Baca Selengkapnya »