Tutorial

BELAJAR Membuat WEBSITE - Basic HTML

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

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
Sampai ketemu lagi di Tutorial berikutnya
Semoga Bermanfaat ^_^/

TABEL

Tabel sangat penting artinya dalam desain web. Karena dengan menggunakan tag table Anda dapat membuat halaman web "terbagi" pada beberapa kolom atau baris. Contohnya seperti pada halaman web yang sedang Anda baca ini.

Terdapat tiga tag atau elemen utama yang digunakan dalam pembuatan table :
, , dan dan

. Yang perlu diingat adalah bahwa tab

harus terletak di antara tag dan  Terdiri dari atribut : • align  - perataan : rata kiri (left), tengah (center) atau kanan (right). • bgcolor  - warna latar belakang (background) dari tabel. •border  - ukuran lebar border tabel (dalam pixel). •cellpadding  - jarak antara isi cell dengan batas cell (dalam pixel). •cellspacing  - jarak antar cell (dalam pixel). •width  - ukuran tabel dalam pixel atau percent. Contoh : Tag ini digunakan untuk membuat baris baru (pada tabel). Terdiri dari atribut: •align  - perataan : rata kiri (left), tengah (center) atau kanan (right). •bgcolor  - warna latar belakang dari baris. •valign  - perataan vertikal : top, middle atau bottom. Contoh : Tag ini digunakan untuk membuat kolom baru pada tabel. •align  - perataan •background  - image yang digunakan sebagai latar belakang dari kolom. •bgcolor  - warna latar belakang •colspan  - lihat gambar contoh •height  - ukuran tinggi cell dalam pixels. •nowrap  - membuat supaya isi dari kolom tetap berada pada satu baris. •rowspan  - lihat gambar contoh •valign  - perataan vertikal :top, middle atau bottom. •width  - ukuran kolom dalam pixel atau percen.

Tutorial Photoshop

Adobe Photoshop mendukung plugin yang dikembangkan oleh pihak ketiga, dengan cara menginstall filter plugin. Penempatan plugin tersebut adalah pada folder Adobe/Photoshop/Plugin/Filter…. ketika menginstal plugin yang dimaksud. Ada beberapa contoh plugin yaitu: Kai Power Tools, KPT Bryce, KPT Power Goo, Alienskin Eyecandy, Andromeda, Extensis Photoframe, KPT Convolver, dan lain-lain.

Selain mendukung plugin filter, Adobe Photoshop juga mendukung pertukaran dokumen dari program lain, diantaranya: Adobe Illustrator, Macromedia Freehand, Macromedia Firework, Adobe PageMaker, Adobe After Effect, Corel PhotoPaint, CorelDraw, 3D Studio Max, dan lain-lain. Teknik pertukaran dokumen tersebut dengan cara menyimpan format file yang sesuai dan dapat diterima oleh program-program tersebut di atas. Berikut ini penjelasan beberapa format file untuk menyimpan dokumen pada Photoshop.

PSD (Photoshop Document)
Format file ini merupakan format asli dokumen Adobe Photoshop. Format ini mampu menyimpan informasi layer dan alpha channel yang terdapat pada sebuah gambar, sehingga suatu saat dapat dibuka dan diedit kembali. Format ini juga mampu menyimpan gambar dalam beberapa mode warna yang disediakan Photoshop. Anda dapat menyimpan dengan format file ini jika ingin mengeditnya kembali.

BMP (Bitmap Image)
Format file ini merupakan format grafis yang fleksibel untuk platform Windows sehingga dapat dibaca oleh program grafis manapun. Format ini mampu menyimpan informasi dengan kualitas tingkat 1 bit samapi 24 bit. Kelemahan format file ini adalah tidak mampu menyimpan alpha channel serta ada kendala dalam pertukaran platform. Untuk membuat sebuah objek sebagai desktop wallpaper, simpanlah dokumen Anda dengan format file ini. Anda dapat mengkompres format file ini dengan kompresi RLE.
Format file ini mampu menyimpan gambar dalam mode warna RGB, Grayscale, Indexed Color, dan Bitmap.

EPS (Encapsuled Postcript)
Format file ini merupakan format yang sering digunakan untuk keperluan pertukaran dokumen antar program grafis. Selain itu, format file ini sering pula digunakan ketika ingin mencetak gambar. Keunggulan format file ini menggunakan bahasa postscript sehingga format file ini dikenali oleh hampir semua program persiapan cetak.
Kelemahan format file ini adalah tidak mampu menyimpan alpha channel, sehingga banyak pengguna Adobe Photoshop menggunakan format file ini ketika gambar yang dikerjakan sudah final. Format file ini mampu menyimpan gambar dengan mode warna RGB, CMYK, Lab, Duotone, Grayscale, Indexed Color, serta Bitmap. Selain itu format file ini juga mampu menyimpan clipping path.

JPG/JPEG (Joint Photographic Expert Group)
Format file ini mampu mengkompres objek dengan tingkat kualitas sesuai dengan pilihan yang disediakan. Format file sering dimanfaatkan untuk menyimpan gambar yang akan digunakan untuk keperluan halaman web, multimedia, dan publikasi elektronik lainnya. Format file ini mampu menyimpan gambar dengan mode warna RGB, CMYK, dan Grayscale. Format file ini juga mampu menyimpan alpha channel, namun karena orientasinya ke publikasi elektronik maka format ini berukuran relatif lebih kecil dibandingkan dengan format file lainnya.

GIF (Graphic Interchange Format)
Format file ini hanya mampu menyimpan dalam 8 bit (hanya mendukung mode warna Grayscale, Bitmap dan Indexed Color). Format file ini merupakan format standar untuk publikasi elektronik dan internet. Format file mampu menyimpan animasi dua dimensi yang akan dipublikasikan pada internet, desain halaman web dan publikasi elektronik. Format file ini mampu mengkompres dengan ukuran kecil menggunakan kompresi LZW.

TIF (Tagged Image Format File)
Format file ini mampu menyimpan gambar dengan kualitas hingga 32 bit. Format file ini juga dapat digunakan untuk keperluan pertukaran antar platform (PC, Machintosh, dan Silicon Graphic). Format file ini merupakan salah satu format yang dipilih dan sangat disukai oleh para pengguna komputer grafis terutama yang berorientasi pada publikasi (cetak). Hampir semua program yang mampu membaca format file bitmap juga mampu membaca format file TIF.

PCX
Format file ini dikembangkan oleh perusahaan bernama Zoft Cooperation. Format file ini merupakan format yang fleksibel karena hampir semua program dalam PC mampu membaca gambar dengan format file ini. Format file ini mampu menyimpan informasi bit depth sebesar 1 hingga 24 bit namun tidak mampu menyimpan alpha channel. Format file ini mampu menyimpan gambar dengan mode warna RGB, Grayscale, Bitmpa dan Indexed Color.

PDF (Portable Document Format)
Format file ini digunakan oleh Adobe Acrobat, dan dapat digunakan oleh grafik berbasis pixel maupun vektor. Format file ini mampu menyimpan gambar dengan mode warna RGB, CMYK, Indexed Color, Lab Color, Grayscale dan Bitmap. Format file ini tidak mampu menyimpan alpha channel. Format file ini sering menggunakan kompresi JPG dan ZIP, kecuali untuk mode warna Bitmap yaitu menggunakan CCIT.

PNG (Portable Network Graphic)
Format file ini berfungsi sebagai alternatif lain dari format file GIF. Format file ini digunakan untuk menampilkan objek dalam halaman web. Kelebihan dari format file ini dibandingkan dengan GIF adalah kemampuannya menyimpan file dalam bit depth hingga 24 bit serta mampu menghasilkan latar belakang (background) yang transparan dengan pinggiran yang halus. Format file ini mampu menyimpan alpha channel.

PIC (Pict)
Format file ini merupakan standar dalam aplikasi grafis dalam Macintosh dan program pengolah teks dengan kualitas menengah untuk transfer dokumen antar aplikasi. Format file ini mampu menyimpan gambar dengan mode warna RGB dengan 1 alpha channel serta Indexed Color, Grayscale dan Bitmap tanpa alpha channel. Format file ini juga menyediakan pilihan bit antara 16 dan 32 bit dalam mode warna RGB.

TGA (Targa)
Format file ini didesain untuk platform yang menggunakan Targa True Vision Video Board. Format file ini mampu menyimpan gambar dengan mode warna RGB dalam 32 bit serta 1 alpha channel, juga Grayscale, Indexed Color, dan RGB dalam 16 atau 24 bit tanpa alpha channel. Format file ini berguna untuk menyimpan dokumen dari hasil render dari program animasi dengan hasil output berupa sequence seperti 3D Studio Max.

IFF (Interchange File Format)
Format file ini umumnya digunakan untuk bekerja dengan Video Toaster dan proses pertukaran dokumentasi dari dan ke Comodore Amiga System. Format file ini dikenali hampir semua program grafis yang terdapat dalam PC serta mampu menyimpan gambar dengan mode warna Bitmap. Format file ini tidak mampu menyimpan alpha channel.

SCT (Scitex Continous Tone)
Format file ini digunakan untuk menyimpan dokumen dengan kualitas tinggi pada komputer Scitex. Format file ini mampu menyimpan gambar dengan mode warna RGB, CMYK, dan Grayscale namun tidak mampu menyimpan alpha channel.

PXR (Pixar)
Format file ini khusus untuk pertukaran dokumen dengan Pixar Image Computer. Format file ini mampu menyimpan gambar dengan mode warna RGB dan Grayscale dengan 1 alpha channel.

RAW
Format file ini merupakan format file yang fleksibel untuk pertukaran dokumen antar aplikasi dan platform. Format file ini mampu menyimpan mode warna RGB, CMYK, dan Grayscale dengan 1 alpha channel serta mode warna Multichannel, Lab Color dan Duotone tanpa alpha channel.

DCS (Dekstop Color Separation)
Format file ini dikembangkan oleh Quark dan merupakan format standar untuk .eps. Format ini mampu menyimpan gambar dengan mode warna Multichannel dan CMYK dengan 1 alpha channel dan banyak spot channel. Format file ini mampu menyimpan clipping path dan sering digunakan untuk proses percetakan (publishing). Ketika menyimpan file dalam format ini maka yang akan tersimpan adalah 4 channel dari gambar tersebut dan 1 channel preview.

FORMAT KOMPRESI
Beberapa program terutama yang berorientasi pada publikasi elektronik dan multimedia selalu memerlukan format file yang berukuran kecil agar ketika dibuka tidak akan lambat. Untuk keperluan tersebut diperlukan kompresi.
Berikut ini format file yang berorientasi publikasi elektronik dan multimedia dengan kompresinya masing-masing.

RLE (Run Length Encoding)
Kompresi ini mampu mengkompres file tanpa menghilangkan detail. Digunakan oleh Adobe Photoshop, TIFF dan sebagian besar program yang terdapat dalam Windows.

LZW (Lemple-Zif-Welf)
Sama seperti kompresi RLE, kompresi ini juga mampu mengkompres file tanpa menghilangkan detail. Kompresi ini digunakan oleh TIFF, PDF, GIF, dan format yang mendukung bahasa postscript. Kompresi ini sangat baik untuk mengkompres gambar dengan area besar yang menggunakan 1 warna.

JPG (Joint Photographic Experts Group)
Format ini mengkompres file dengan menghilangkan detail. Format file ini sering digunakan oleh JPG, PDF, dan format yang menggunakan bahasa postscript. Kompresi ini sangat baik digunakan untuk gambar dengan continous tone seperti foto.

CCIT
CCIT merupakan singkatan dari bahasa Perancis yang dalam bahasa Inggris disebut International Telegraph and Telekeyed Consultive Commitee.
Kompresi ini digunakan untuk mengkompres gambar hitam putih, dan mampu mengkompres file tanpa menghilangkan detailnya. Kompresi ini sering digunakan oleh PDF dan format lain yang menggunakan bahasa postscript.

CATATAN

* Ketika menyimpan dokumen pada format file yang tidak dapat menyimpan informasi layer, maka Anda harus mengubah gambar tersebut menjadi flaten image terlebih dulu.
* Format file yang dapat menyimpan mode warna Duotone hanyalah EPS, RAW, dan PSD. Oleh karena itu, ketika ingin menyimpan dalam format lain maka Anda harus mengubah mode warnanya terlebih dulu, menjadi RGB bila dokumen tidak ingin dicetak, karena informasi Duotone-nya akan diuraikan menjadi RGB.
* Format file yan dapat menyimpan mode warna Lab Color hanyalah PSD, RAW, TIF, PDF, dan EPS. Format file yang dapat menyimpan mode warna CMYK hanyalah PSD, RAW, EPS, TIF, JPG, PDF, dam SCT.
* Mode warna Indexed Color dapat menyimpan beberapa format file sesuai seting indexed color-nya.
* Mode warna RGB dapatdisimpan pada semua format file yang ada di Adobe Photoshop.
* Format yang direkomendasikan oleh para desainer profesional adalah
o PSD = untuk dokumen yang masih ingin diedit kembali
o EPS = untuk dokumen yang sudah final untuk persiapan cetak
o JPG = untuk cetak dengan kompresi di atas 8 bit dan untuk foto dalam web dengan kompresi di bawah 5.
o GIF = untuk ilustrasi dan animasi pada halaman web.
o TIF = untuk cetak, pertukaran dokumen antar platform serta sequence animasi