Author & Copyright: Johan | Status: FREE tutorial
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:
<HTML>
</HTML>
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 <HTML> dan ada tag penutup yaitu
</HTML> 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 <HTML> atau <html> atau <Html> 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.
<HTML>
<BODY>
</BODY>
</HTML>
Isi dari dokumen HTML yang sesungguhnya adalah yang ditulis
diantara tag <BODY>. Coba tuliskan:
<HTML>
<BODY>
Tulisan ini akan tampak dalam browser by ilmugrafis.
</BODY>
</HTML>
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.
<HTML>
<BODY BGCOLOR="yellow" TEXT="red">
Tulisan ini akan tampak dalam browser by ilmugrafis.
</BODY>
</HTML>
Simpanlah kembali file ini (klik File lalu Save). Untuk
melihat bagaimana hasilnya tekan F12 atau klik tombolRefresh 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
<HEAD> dan tag <TITLE>. 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:
<HTML>
<HEAD>
<TITLE>WEBSITE BUATANKU</TITLE>
</HEAD>
<BODY BGCOLOR="yellow" TEXT="red">
Tulisan ini akan tampak dalam browser.
</BODY>
</HTML>
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
Sampai ketemu lagi di Tutorial berikutnya
Semoga Bermanfaat ^_^/
Tutorial membuat website belajar HTML, CSS, Javascript dan
mendesain mempercantik halaman website
Memasukkan Animasi Flash Ke Dalam Website
Publish: 24 Februari 2009 | Author & Copyright: Johan |
Status: FREE tutorial
Pada tutorial belajar Dreamweaver kali ini penulis akan
menjelaskan bagaimana cara memasukkan animasi flash berektension *.swf ke dalam
website dengan dreamweaver...
Langkah - langkahnya:
1. Buka Dreamweaver dan pilih File - New
Atau tekan CTRL + N = Untuk membuat project baru sebagai
latihan
2. Cara I : Pada Menu Utama
(help: untuk mengetahui letak menu utama bisa klik
Pengenalan Dreamweaver dan Layout ) lalu pilih:
Insert - Media - Flash -
atau
Cara II : tekan CTRL + ALT + F
Ket:
swf = adalah extensi file animasi hasil olahan flash, file
ini dapat dijalankan jika kita menginstal flash player ke dalam browser kita
Adobe Flash Player
for Browser
klik icon di atas untuk download adobe flash Player
3. Lalu pilih file berformat *.swf yang diinginkan
Disini penulis menggunakan contoh:
butterfly.swf yang dapat di download langsung disini
password: ilmugrafis
berbagai macam contoh animasi untuk kebutuhan website kamu:
Langsung download aja
download Bom | Pass: ilmugrafis
Download Bendera Indonesia | Pass: ilmugrafis
Download Jam Analog
Tunggu Tutorial Dreamweaver Berikutnya...
Semoga Bermanfaat
Share URL Share
the URL of this Tutorial in IM, Email or post in forums
* Klik Link, copy (ctrl + c) dan paste (ctrl + v)
<> Info dan Kontak Penulis
Johan Felisitas
Tentang Penulis : Lahir di Surabaya 1986, Lulusan D3. Sangat
menyukai Desain Grafis, Sepakbola, Bersepeda dan Wisata Kuliner
Motto : Mensyukuri nikmatNya adalah sumber kebahagiaan
Penulis dapat dihubungi via:
Google+ : johan felisitas
Gtalk : johan.felisitas
Email : johan.felisitas[at]gmail[dot]com
Blog : http://nexusgo.blogspot.com
Saya (Penulis) bersedia mematuhi ketentuan dan peraturan di
IG
- Tutorial / Artikel ini resmi saya diberikan untuk
dipublikasikan di www.ilmugrafis.com
- Kritik, Saran, maupun Pertanyaan seputar Tutorial bisa
menghubungi Penulis
Semoga Bermanfaat, Terima kasih
Rekomendasi Resmi ilmugrafis.com
Video Tutorial Metode Belajar Cepat dan Mudah:
- Dijamin Bagus dan Berkualitas Bagi Pemula Maupun Mahir
- Video Tutorial ini BAHASA INDONESIA
- Lebih Murah dan Praktis
- Keunggulan: Tinggal Lihat - Praktek - Mahir
- add by ilmugrafis.com -
Video Tutorial Web DESIGN Dreamweaver + Photoshop
Mendesain sebuah web ternyata tidak sulit seperti yang
dibayangkan. Anda tidak perlu lagi harus mempelajari bahasa-bahasa pemrograman
seperti yang dilakukan saat terdahulu...
Selengkapnya...
________________________________________
CD Tutorial PHP - Web Programming
Kabar gembira buat anda yang ingin membuat website dinamis
dengan cms buatan sendiri memakai Pemrograman PHP dan Aplikasi PHP karena kini
telah hadir CD tutorial Web Programing yang akan mengajarkan dari Pemula hingga
menjadi Mahir membuat Website dinamis...
Selengkapnya...
________________________________________
CD Video Tutorial ADOBE FLASH CS4
Membahas interface serta tool terbaru Flash CS4 Membuat
animasi 3 dimensi dengan 3D tool Flash CS4 , Tutorial teknik animasi motion
tween CS Menyimpan animasi sebagai presets melalui Motion Presets panel
Selengkapnya...
________________________________________
Tutorial Joomla 1.5.All
Joomla!kembali hadir dengan versi 1.5.x dilengkapi dengan
fitur - fitur yang lebih lengkap dan lebih dinamis...
Selengkapnya...
Tidak ada komentar:
Posting Komentar