Bagaimana
cara membuat website? Ada beberapa tahapan dan langkah yang harus kita lalui untuk membuat sebuah
Website
yang baik. Lain halnya dengan instan CMS maupun instan blog yang kita
tinggal mendaftar saja di penyedia layanan blog seperti Blogspot,
Wordpress, dll. Maupun CMS seperti Joomla, Mambo, dll yang tinggal
instal saja seperti. Disini kita belajar manual web (membuat website
secara manual) walaupun masih sederhana dan statis. Untuk membuat
website pertama-tama kita harus belajar
bahasa HTML
yaitu sebuah "bahasa program" yang memungkinkan kita membuat halaman
web yang bisa ditampilkan dalam browser (Chrome, Firefox, Internet
Explorer, Netscape, Opera, dll).
Nah, kini kita mulai dari langkah awal yaitu belajar bahasa HTML.
BELAJAR WEBSITE
Dewasa ini, hampir semua dokumen web dibuat dengan bahasa HTML
(Hypertext Mark-up Language). Meskipun anda bisa saja membuat web page
(halaman web) tanpa mengerti sedikitpun HTML, Sangat disarankan
bahkan nyaris diharuskan, agar anda mengerti bahasa HTML. Untuk itu
langkah pertama bagi Anda yang bercita-cita memiliki website sendiri
adalah
belajar HTML.
HTML (Hypertext Markup Language) adalah bahasa program
yang digunakan untuk menulis format dokumen yang dapat digunakan dalam
Web. Dengan HTML, teks ASCII (file
*.txt) dapat dipoles (di-
mark-up) dengan kode-kode tertentu yang disebut tag untuk menjadi dokumen HTML (file
*.htm atau
*.html).
Oleh karena itu, untuk membuat dokumen HTML, anda bisa menggunakan
semua program teks editor biasa, mulai dari Notepad hingga Dreamweaver.
Untuk mudahnya, kita gunakan program Dreamweaver.
Apa yang dimkasud dengan file HTML?
- HTML merupakan kependekan dari Hyper Text markup Language
- Sebuah file HTML merupakan sebuah file teks yang berisi tag-tag markup
- Tag markup memberitahukan browser bagaimana harus menampilkan sebuah halaman
- File HTML harus memiliki ekstensi htm atau html
- File HTML dapat dibuat menggunakan editor teks yang biasa kamu pakai.
PENGENALAN KODE HTML
>>New >> Basic Page >> HTML , setelah itu atur ke mode
Code

disini anda akan menemui tag - tag semacam ini:
Penjelasan:
Masing-masing baris di atas disebut
tag. Tag adalah kode yang
digunakan untuk me-mark-up (memoles) teks ASCII menjadi file HTML. Setiap tag
diapit dengan tanda kurung runcing.
Ada tag pembuka yaitu dan
ada tag penutup yaitu yang ditandai dengan tanda
slash (garis miring) di depan awal tulisannya.
Tag di atas memberikan faidah bahwa
yang akan ditulis diantara kedua tag tersebut adalah isi dari dokumen HTML.
Perlu anda ketahui bahwa tag-tag html dapat ditulis dengan huruf besar ataupun
huruf kecil. Artinya, penulisan atau atau
sama saja hasilnya.
Namun perlu selalu diingat bahwa penulisan tag yang salah
meskipun hanya satu karakter akan berpengaruh terhadap dokumen HTML anda, bahkan
bisa berakibat dokumen HTML anda tidak bisa ditampilkan dalam browser.
Sekarang kita akan beralih pada tag selanjutnya.
Isi dari dokumen HTML yang sesungguhnya adalah yang ditulis diantara tag
. Coba tuliskan:
Tulisan ini akan tampak dalam
browser by ilmugrafis.
|
Sekarang simpanlah file ini dengan meng-klik menu
File lalu
Save. Nah, lihatlah hasil karya anda yang pertama dengan menekan
F12
disitu akan muncul tulisan "Tulisan ini akan tampak dalam
browser by ilmugrafis." tanpa tag HTML. Sekarang anda mungkin mulai
mengerti cara kerja HTML dan markup tag, begitulah cara kerjanya, jadi
yg muncul di broser hanya tulisan saja sedangkan tagnya hanya merupakan
suatu perintah bagi browser untuk menampilkan perintah kita.
Apakah tag BODY fungsinya sekedar penanda tubuh atau isi dari dokumen web?
Tidak, dalam tag BODY ini bisa kita sisipkan bermacam-macam atribut yang akan
berpengaruh terhadap format atau tampilan halaman web secara keseluruhan. Pada
kesempatan ini kita mengambil contoh bagaimana mengubah warna latar belakang dan
warna tulisan dari halaman web dengan penambahan atribut ke dalam tag BODY.
Tulisan ini akan tampak dalam
browser by ilmugrafis.
|
Simpanlah kembali file ini (klik
File lalu
Save). Untuk melihat
bagaimana hasilnya tekan F12
atau klik
tombol
Refresh pada browser atau bisa juga dengan menekan tombol
F5 pada keyboard. Dengan demikian, browser akan memanggil ulang file
yang kini sudah mengalami perubahan. Maka akan tampaklah hasilnya:

Perlu diketahui bahwa penentuan warna pada HTML bisa dengan nama warna (dalam
bahasa Inggris) dan bisa pula dengan kode warna. Kode warna ditulis dalam
format
heksa contohnya seperti #rrggbb.
Ok setelah menguasai tag di atas maka kita lanjutkan ke inspeksi tag
HEAD dan TITLE. Di sini terlihat bahwa kita mempunyai tag dan tag
.
Tag HEAD berfungsi untuk mengapit berbagai macam fungsi dan informasi yang
berkenan dengan halaman web yang bersangkutan. Pada latihan kali ini, kita
memasukkan tag TITLE diantara tag HEAD. Sesuai namanya, tag TITLE ini berfungsi
untuk mengapit kalimat yang menjadi judul dari halaman web tersebut. Sekarang
mari kita tuliskan judul halaman web ini:
WEBSITE BUATANKU
Tulisan ini akan tampak dalam
browser.
Simpan lagi file ini dengan meng-klik File lalu Save. Sekarang
kita akan melihat bagaimana perubahannya dalam browser. Lakukan lagi Refresh seperti di atas. Maka anda akan melihat di baris teratas (yang dinamakan Title Bar) dari program browser akan menampilkan judul atau titel dari
halaman web anda yaitu: WEBSITE BUATANKU
previewnya kurang lebih seperti ini, disini saya menggunakan browser Firefox:

Alhamdulillah, selesailah latihan pertama Belajar Membuat Website - HTML.
Selamat belajar HTML di Dreamweaver
Seperti kata Pak Patah eh salah itu nama tetangga saya :) maksudnya Kata
PEPATAH "Tak kenal maka tak sayang" oleh karena itu alangkah baiknya
bila kita menilik apa itu Dreamweaver?
DREAMWEAVER (dulu milik dari macromedia namun sekarang
menjadi milik dari Adobe) adalah software aplikasi desain web visual
yang biasa dikenal dengan istilah WYSIWYG — What You See Is What You Get
— dalam bahasa sansekerta artinya ( Apa yang kamu lihat akan menjadi
seperti apa yang kamu inginkan) masih bingung ya intinya Kita tidak
harus berurusan dengan tag-tag HTML untuk membuat sebuah situs karena
sudah disiapkan secara instant seperti membuat Table, Membuat Hyperlink,
Memasukkan Gambar, termasuk memasukkan Flash Animasi, dll.
Dreamweaver tidak hanya dapat digunakan oleh para desainer web, namun
juga dapat digunakan oleh programer untuk membangun halaman
internaktif karena Dreamweaver mendukung pula PHP, ColdFusion, ASP.NET
dan lain-lain. Mantab Bukan!!!
Gambar 1 . Tampilan LogoDreamweaver
Gambar 2 . Tampilan / Layout Dreamweaver
Berikut ini penjelasan untuk elemen-elemen workspace seperti telah tertera pada gambar.
- LEMBAR KERJA DREAMWEAVER adalah tempat di mana Anda dapat membuat halaman web secara visual, kode, atau keduanya.
- INSERT TOOLBAR adalah tempat Anda dapat memasukan image, Flash movie, table, atau elemen lain. Untuk memunculkan panel ini, klik Windows > Insert atau tekan Ctrl-F2.
- PENGATURAN HALAMAN berguna untuk melakukan pengeditan pada suatu elemen di Document Window.
- PANEL GROUP merupakan kumpulan dari panel-panel Dreamweaver.
Tutorial kali ini adalah Tutorial Membuat ombak di flash, disini saya menggunakan Macromedia Flash 8...
1. Buka program flash 8
Ubah ukuran stage menjadi 768 x 576 pixels.
Ganti warna bacground menjadi warna hitam
2. Ganti warna fill color menjadi #336699  dan warna stroke dijadikan none
3. Klik rectangle tool  untuk membuat airnya dengan mendragnya ke stage seperti gambar dibawah ini.
4.
Klik kanan di frame 15 lalu klik insert keyframe, Ubah gambar airnya dengan cara tarik ke atas menggunakan selection tool yang sebelah kiri
Gambarnya :
7. Klik di frame 1 lalu pilih tween shape

gambarnya
Di frame 35 klik kanan insert keyframe, Ubah gambarnya seperti ini>>
8. Klik Di frame 15 pilih tween shape
9. Lalu copy frame 1
caranya : klik kanan pada frame 1 dan pilih Copy Frames
kemudian Pastekan di frame 60
10. Klik Di frame 35 pilih tween shape
Seperti gambar dibawah ini:
Selamat mencoba...(@_@)
Jika semua sudah selesai tinggal kita menekan ctrl + enter dan nikmati hasilnya
Selamat mencoba Tutorial Flash
Semoga berhasil…
SEMOGA BERMANFAAT
Pada Tutorial kali ini kita akan mempelajari cara membuat gradien di
Flash, membuat gradien di flash agak sedikit berbeda dengan gradien di photoshop karena di flash kita bukan memakai fill tapi cenderung memakai pengaturan color (Shift + Alt + F9)
Ok, mari kita praktekkan dengan Tutorial:
1. Buka Program Adobe Flash, Disini Bisa menggunakan Adobe Flash CS3,CS4,CS5
2. Pada Lembar kerja buatlah gambar terserah tapi disini saya akan
mencontohkan dengan menggambar kotak, pada pengaturan sudut (Rectangle
Option) gunakan angka 15
Gunakan Free Transform Tool (Q) untuk mengatur besar kecilnya kotak yang anda buat
3. Seperti penjelasan saya di awal, kita tidak bisa merubah fill karena
fill hanya terdiri dari 1 Warna, untuk itu kita harus masuk ke
pengaturan color dengan Window - color (Shift + Alt + F9) nanti akan muncul Color Setting seperti ini

Pilih Linear Gradien atau Radial Gradien, namun disini saya mencontohkan dengan linear gradien
, Anda bisa memilih Flow: Extend Color

Untuk pengaturan Warna yang diinginkan bisa klik kedua panel di bawah
yang ada tanda 2 panah caranya klik kotak tersebut dan pilih warna yang
anda inginkan
Contohnya:
Kombinasi hitam dan biru
4. Ok sekarang pasti anda bertanya-tanya.... bagaimana cara mengubah
posisi gradien agar tidak kaku seperti gambar di atas, ahaaa.... caranya
gunakan Gradient Transform Tool (F)

Anda bisa mengatur bentuk gradien yang anda inginkan

dan juga memberikan hiasan text
Hasilnya kira-kira seperti ini

Gradien di Flash
Selamat Belajar Flash,
SEMOGA BERMANFAAT
|