DESAIN WEB DENGAN HTML5 dan CSS3

A. Pengertian Desain Web

Desain Web adalah jenis desain grafis yang ditujukan untuk pengembangan
dan styling obyek lingkungan informasi Internet untuk menyediakan dengan fitur
konsumen high-end dan kualitas estetika. Definisi yang ditawarkan memisahkan
desain web dari pemrograman web, menekankan fitur fungsional dari sebuah
situs web, serta desain posisi web sebagai semacam desain grafis.

B. Tujuan Desain Web

Tujuan desain web adalah untuk membuat situs web atau dokumen
elektronik dan aplikasi yang berada pada web server dan menampilkan konten
dan fitur antarmuka interaktif kepada pengguna akhir dalam bentuk halaman
Web. Seperti unsur-unsur teks, gambar (gif, jpeg) untuk ditempatkan pada
halaman menggunakan HTML / XHTML / tag XML. Menampilkan media yang
lebih kompleks (vektor grafis, animasi, video, suara) membutuhkan plug-in seperti
Adobe Flash, QuickTime, Java run-time dan lain-lain. Plug-in juga dimasukkan
ke dalam halaman web dengan menggunakan HTML / tag XHTML.Perbaikan
sesuai browser dengan standar W3C diminta penerimaan luas dan penggunaan
XHTML / XML bersama dengan Cascading Style Sheets (CSS) untuk posisi dan
memanipulasi unsur-unsur halaman web dan objek. Kemampuan browser untuk
mengirimkan berbagai konten dan pilihan aksesibilitas kepada klien tanpa
menggunakan plug-in.Dengan spesialisasi yang tumbuh di bidang teknologi
informasi ada kecenderungan kuat untuk membedakan antara desain web (web
design) dan pengembangan web (web development).

C. Tahapan Mendesain Web

Desain suatu halaman web adalah salah satu elemen penting untuk menarik
perhatian pengunjung pada dunia web design, seperti misalnya pada dunia web
design Surabaya. Desain website yang bagus akan menarik perhatian pengunjung
untuk memasuki web tersebut. Berikut ini adalah langkah langkah untuk
membuat web design yang cukup menarik.
1. Membuat Sketsa Desain
Buatlah sketsa homepage pada kertas, sehingga terdapat gambaran mengenai
homepage yang sudah selesai dan bagaimana cara mengatur letaknya.
Pembuatan sketsa ini akan sangat membantu untuk membuat desain web
yang mempunyai daya saing pada dunia web design Surabaya.
2. Membuat Layout Desain
Pergunakanlah software seperti Adobe Photoshop, Adobe Illustrator,
Macromedia Fireworks dan Macromedia Freehand untuk memperhalus sketsa
desain yang telah selesai. Selain itu file gambar dengan ukuran yang cukup
besar juga perlu dipecah sehingga halaman web bisa dibuka dengan cepat.
Waktu loading website yang cepat juga merupakan kelebihan pada dunia web
design Surabaya.
3. Membuat Animasi
Pembuatan animasi dengan menggunakan Macromedia Flash dan Gif
Construction bisa menjadi salah satu nilai tambah website yang dibuat
sehingga dapat menarik pengunjung dan menjadi daya saing dari web
dibuat pada dunia web design Surabaya.

4. Membuat HTML
Pembuatan HTML meliputi melakukan proses edit pada script HTML dan
membuat layout form ke dalam fomat HTML . Pembuatan ke dalam format
HTML ini menggunakan HTML editor seperti Macromedia Dreamweaver,
Microsoft Frontpage dan Allaire Homesite. Penempatan tombol dan gambar
pada website sehingga mempunyai kualitas yang cukup menarik pada dunia
web design Surabaya juga dilakukan pada pembuatan format HTML.

5. Programming dan Script

ASP, Borland Delphy, CGI, PHP, Visual Basic, dan Java Script digunakan
untuk programming dan script pada web yang dibuat. Programming dan script
ini bisa digunakan untuk pembuatan animasi background, animasi text dan
lain – lain, sehingga halaman web yang ditampilkan menjadi lebih menarik.
Hal ini juga bisa dijadikan sebagai daya saing web yang dibuat pada dunia web
design Surabaya.

6. Upload HTML
Agar semua orang bisa mengakses website yang telah selesai dibuat, maka
diperlukan tempat yang disebut hosting.

7. memilih hosting
Pemilihan hosting yang akan dijadikan sebagai tempat untuk mengupload
website yang telah dibuat juga harus diperhatikan, sebab terdapat kelebihan
dan kekurangan dari penggunaan hosting gratis maupun hosting yang
berbayar dan mempunyai pengaruh cukup besar bagi daya saing website pada
dunia web design Surabaya.

Dalam membuat website ada bebrapa langkah yang harus dipelajari salah
satunya adalah belajar HTML Namun apabila anda kurang mengenal HTML dan
susah untuk belajar karena tidak mempunyai buku panduan, jangan kuatir
karena banyak yang menyediakn tutorial di berbagai situs.

A. Mengenal HTML
HTML (Hyper Text Markup Language) adalah sekumpulan simbol-simbol atau
tag-tag yang dituliskan dalam sebuah file yang dimaksudkan untuk
menampilkan halaman pada web Browser.Tag-tag tadi memberitahu browser
bagaimana menampilkan halaman web dengan lengkap kepada pengguna.
Seperti yang dijelaskan sebelumnya bahwa HTML (Hyper Text Markup
Language) adalah simbol-simbol atau tag-tag yang dituliskan dalam sebuah
 file yang dimaksudkan untuk menampilkan halaman pada web browser. Tag-
tag HTML selalu diawali dengan <x> dan diakhiri dengan </x> dimana x Tag
HTML seperti b,i,u dan sebagainya. Namun ada juga tag yang tidak diakhiri
dengan tanda </x> seperti tag <br>,<input> dan lainnya.
Sebuah halaman web akan diapit oleh tag <html>...</html>.File-file HTML
selalu berakhiran ekstensi *.html atau *.htm. jadi anda mengetik sebuah
naskah dan menyimpannya dengan ekstensi *.html maka anda membuat file
yang berformat HTML.

B. Struktur HTML5

C.