Assalamualaikum semua
Semoga di hari ini. Kita diberi kelancaran oleh Allah SWT
dalam menjalankan berbagai aktivitas ya. Yang penting harus tetap semangat
dalam berbagai hal. Kalau kata Ceisar sih “Keep Smile”, hehehe. Oke deh, tanpa
menunggu lebih lama lagi mari kita mulai.
Kali ini aku lagi tertarik dengan materi TKJ yang satu ini.
Web Design. Udah dari dulu lo ditunggu –tunggu. Akhirnya kesampaian juga nih,
di kelas 3 . Meskipun memang belum terlalu ngerti juga sih.
Pengertian Web Design
Web design adalah seni dan proses dalam menciptakan halaman
web tunggal maupun keseluruhan, dan bisa melibatkan estetika serta seluk beluk
mekanis dari suatu operasi situs web, walaupun yang utama adalah memusatkan
look dan feel (apa yang dilihat dan dirasakan dari situs tersebut).
Sebagian aspek yang tercakup dalam web design antara lain :
Menciptakan animasi dan grafik
Pemilihan warna
Pemilihan font
Design navigasi
Menciptakan animasi html atau xml,
java script, programming, dan pengembangan e-commerce
Menciptakan isi
Apa saja yang harus dikuasai oleh seorang web designer?
Hal-hal yang harus dikuasai oleh seorang web designer adalah sebagai berikut.
PENGUASAAN CITA RASA SENI seperti :
mengeksplorasi imajinasi dan
menggali cita rasa seni yang dituangkan dalam halaman web
mampu memilih warna yang baik dan
memadukannya dengan warna lain sehingga tercipta perpaduan warna yang serasi
mampu membuat sketsa yang baik dari
bentuk halaman web
mampu menggabungkan imajinasi atau
ide orisinil dengan ide dari pihak client yang memesan desain web
mampu menempatkan komponen multimedia pada bagian tertentu
sehingga halaman web menjadi menarik
PENGUASAAN TOOLS PENDUKUNG PERENCANAAN WEB seperti :
Aplikasi pengatur layout web,
contohnya Macromedia Dreamweaver, Microsoft Fontpage, Edit Plus, PHP Edit, dll
Aplikasi pembuat animasi seperti
Macromedia Flash, Swish, dll
Aplikasi design grafis seperti
Corel Draw, Photoshop, Gimp, dll
PENGUASAAN TEKNIK MEMBUAT INTERFACES WEB
PENGUASAAN BAHASA PEMROGRAMAN
Dalam Web Design diharuskan pula untuk memperdalam pemahaman
tentang HTML, di sini pengertian HTML
Mengenal HTML
HTML adalah singkatan dari Hyper Text Markup Language. HTML
merupakan file teks yang ditulis menggunakan aturan-aturan kode tertentu
kemudian disajikan kepada user melalui suati aplikasi web browser. Setiap
informasi yang tampil di web selalu dibuat menggunakan kode HTML. Oleh karena
itu dokumen HTML sering juga disebut sebagai web page (halaman web). Untuk
membuat dokumen HTML, yang diperlukan hanya bahan sederhana yaitu Notepad
(untuk keluarga Windows), Vi Editorataupun Gedit (untuk keluarga Linux), dan
lain sebagainya. Namun saat ini sudah banyak aplikasi untuk membuat dokumen
HTML maupun mengedit kode-kode HTML.
Kode HTML adalah bahasa pemrograman yang dapat digunakan
untuk membuat dokumen HTML. Jika anda berkunjung ke sebuah situs web, anda akan
mengetahui kode HTML tersebut melalui web browser dengan cara memilih menu View
Source pada browser Internet Explorer, dan juga View Page Source pada Mozilla
Firefox.
Cara membuat sebuah dokumen HTML yang perlu anda lakukan
adalah
memahami kode-kode HTML atau bahasa pemrograman yang
digunakan untuk HTML (saya akan membahas mengenai kode-kode HTML pada postingan
selanjutnya) kemudian menuangkannya pada sebuah dokumen HTML. Untuk membuat
sebuah dokumen HTML tidak memerlukan alat dan bahan yang rumit karena HTML
dapat dibuat hanya dengan teks editor seperti notepad (pada windows), gedit
(pada Linux), dan lain-lain (walaupun saat ini sudah banyak aplikasi khusus
dalam pembuatan dokumen HTML). Setelah dokumen HTML selesai dibuat, lalu anda
simpan (save) dengan nama tertentu. Tidak ada aturan yang baku untuk penamaan
suatu dokumen HTML. Artinya, kita bebas memilih nama untuk dokumen tersebut.
Hanya ekstensinya saja yang perlu diperhatikan. Suatu file teks akan dianggap
sebagai dokumen HTML jika berekstensi .htm maupun .html. Oleh karena itu
pembuatan sebuah dokumen HTML harus di-save dengan ekstensi tersebut. Tetapi,
dalam membuat design web yang utuh dan merupakan satu-kesatuan dari sebuah
situs, biasanya orang menggunakan nama home.html untuk halaman utama (main
page) pada situs tersebut.
Dasar-dasar Perintah HTML
(untuk digunakan dalam file <body>):
<p>Teks Yang Anda Ketik</ p>
» Membuat paragraf (satu spasi antar baris dibuat)
<i>Teks Yang Anda Ketik</i>
» Perintah untuk membuat font menjadi miring
<b>Teks Yang Anda Ketik</b>
» Perintah untuk membuat font menjadi tebal
<blockquote>Teks Yang Anda Ketik</blockquote>
» Menempatkan teks yang Anda mengutip ke dalam dokumen web -
teks akan indentasi
<pre>Teks Yang Anda Ketik</pre>
» Mempertahankan format/lekukan dari teks yang dimasukkan
<strong>Teks Yang Anda Ketik</strong>
» Juga membuat teks seperti bold
<center>Teks Yang Anda Ketik</center>
» Perintah untuk membuat teks menjadi rata tengah
<blink>Teks Yang Anda Ketik</ Blink>
» Perintah untuk membuat teks berkedip-kedip
<font size=7>Teks Yang Anda Ketik</ font>
» Perubahan ukuran teks -7 adalah font yang terbesar yang
tersedia dan 1 adalah yang terkecil (satu spasi)
<h1>Teks Yang Anda Ketik</h1>
» Teks muncul dalam font terbesar yang tersedia (dua spasi)
<h6>Teks Yang Anda Ketik</h6>
» Teks muncul dalam font terkecil yang tersedia
Ada <h2> melalui tag <h5> tersedia untuk ukuran
font antara <h1> dan <h6> - percobaan dengan ukuran yang paling
cocok untuk Anda.
<body bgcolor="#FFFFFF">
» Untuk membuat pola latar belakang.
Ada web/blog di mana Anda dapat menemukan kode (misalnya,
#FF0000=red) untuk latar belakang/text warna: Backgrounds
<body background="small.gif">
Sebagai URL sering diperbarui/berubah, cek alamat ini secara
berkala untuk memastikan mereka masih ada!
Anda juga dapat menyalin gambar latar belakang yang Anda
lihat digunakan pada halaman web/blog - tetapi hanya jika Anda menggunakan PC
(Anda menekan ke bawah pada sisi kanan mouse dan menyimpan gambar latar
belakang di tempat yang tepat)
<body text="#FF0000">
» Ini akan mengubah warna semua teks dalam dokumen menjadi
merah
<font color="#FF00FF">
» Ini akan mengubah warna apa yang Anda ketik menjadi
magenta
Membuat Daftar
Unordered list
<ul> <li> Ini adalah tag untuk membuat daftar
unordered <li> Setiap hal yang Anda ketik setelah tag <li> akan
muncul di samping peluru pada halaman web <li> Teks ini akan muncul di
sebelah peluru ketiga - peluru yang menjorok </ul>
Perintahkan DAFTAR
<ol> <li> Ini adalah tag untuk membuat daftar
memerintahkan <li> Setiap hal yang Anda ketik setelah tag <li> akan
muncul di samping nomor di web Halaman <li> Teks ini akan muncul di
sebelah nomor "3" pada halaman web </ol>
Deskriptif Daftar (berguna untuk membuat bibliografi,
misalnya)
<dl> <dt> Tag untuk menciptakan judul pertama
dari daftar deskriptif Anda <dd> Ini adalah item pertama di bawah judul
pertama dari daftar - akan menjorok <dd> item lain dalam daftar di bawah
judul yang sama - juga akan menjorok <dt> Ini adalah gelar kedua dalam
Anda Daftar deskriptif <dd> ini adalah item menjorok pertama di bawah
judul kedua dalam daftar deskriptif Anda </dl>
Perhatikan bahwa Anda mungkin "sarang" daftar -
yaitu, membuat daftar unordered dalam ordered list, dll
Membuat Tabel
Anda mungkin menemukan itu berguna untuk memasukkan tabel
pada halaman web/blog Anda. Berikut adalah beberapa tag yang sangat dasar untuk
membuat tabel.
<table border> Ini adalah tag untuk membuat tabel
<tr> ini adalah tag untuk baris tabel <td> ini adalah tag untuk sel
(kotak) dalam baris </ td> <td> Anda mungkin ingin memiliki dua
atau lebih sel dalam setiap baris tabel </ td>. </ tr> <tr>
Ini adalah tag untuk baris tabel kedua <td> ini adalah tag untuk pertama
sel (kotak) di baris kedua </ td> <td> Ini adalah sel kedua (box)
di baris kedua </ td> </ tr></ table>
Tag HTML lainnya dapat digunakan dalam setiap sel untuk
memformat teks Anda. Pada titik tertentu Anda mungkin ingin memiliki kontrol
lebih besar atas perbatasan atau jarak meja Anda. Lihat salah satu tutorial
banyak di Web. Melakukan pencarian dan masukkan kata kunci "Tutorial
HTML."
Menempatkan <hr> "bayangan" garis pada
halaman web
<br>Tipe pada akhir garis untuk memulai istirahat
baris (yaitu, ini seperti carriage return)
Perhatikan bahwa tidak ada "end" tag (yaitu, tidak
ada </hr> atau </br>) dengan tag.
Membuat Link
<a href="Masukkan URL">Nama tag Yang
Diinginkan</ a>
Contoh: <a
href="http://www.mtholyoke.edu">Mount Holyoke perguruan</a>
Maka, teks yang akan muncul dengan warna biru pada halaman
web adalah: "Mount Holyoke College"
Jika Anda klik di atasnya, Anda secara otomatis akan dikirim
ke homepage Mount Holyoke College
Untuk membuat link ke alamat E-mail:
<a href="mailto:
dvanhand@mhc.mtholyoke.edu">Donna Van Menangani</ a>
(Jika Anda klik pada Handle Van Donna, bentuk E-mail muncul)
Baiklah sampai di sini dulu ya kawan, sebenarnya masih
banyak hal tentang web design yang belum dipelajari. Yang di atas pun masih
sebatas hanya aku baca belum kupelajari, hehehehe, males sangat nih. Oke Insya
Allah untuk postingan berikut aku akan belajar tentang dreamwefer 8 yang
disarankan oleh guruku.
See you next time . Bye bye
0 komentar:
Posting Komentar