�ݺ�ߣ

Dasar-dasar Web Design
Pengenalan website dan istilah-istilah internet
Fikri Reza

Web Design?
Asal
Design  hasil karya manusia yang harus dapat berfungsi untuk
memecahkan suatu masalah
(problem solving)
www (world wide web)
Merupakan kumpulan web server dari seluruh dunia yang berfungsi
menyediakan data dan informasi untuk digunakan bersama-sama
Web  Fasilitas hypertext yang mampu menampilkan data berupa
teks, gambar, suara, animasi, dan multimedia lainnya, di mana di antara
data-data tersebut saling terkait dan berhubungan satu dengan yang
lainnya
Website  Merupakan tempat penyimpanan data dan informasi
berdasarkan topik tertentu

Web Design?
Pengertian
Web design adalah Seni dalam membuat suatu halaman
website yang melibatkan keindahan dan mekanisme
dalam proses membuat sebuah halaman website.
Membuat suatu halaman website terlihat lebih menarik
dengan mengintegrasikan unsur gambar, animasi, text,
dan video

Yang harus dikuasai Web Designer
 Cita rasa seni
◦ Web designer harus mampu menciptakan keindahan di
dalam halaman web
◦ Web desainer mampu memilih warna yang baik dan
memadukannya dengan warna lain
◦ Web desainer mampu membuat bentuk atau sketsa yang
baik dari bentuk dasar halaman web
◦ Web designer harus mampu menggabungkan imajinasi
atau ide orisinil dengan ide dari pihak klien yang memesan
desain
◦ Web designer mampu menempatkan komponen
multimedia pada bagian-bagian
◦ tertentu, sehingga halaman web menjadi lebih menarik

 Tool pendukung perancangan web
◦ Mampu menggunakan program aplikasi untuk membuat
desain grafis, seperti photoshop, corel draw, Adobe
ilustrator,dsb
◦ Mampu menggunakan program aplikasi untuk mengatur
layout web, seperti macromedia dreamweaver, page maker,
notepad, dsb
◦ Mampu menggunakan program aplikasi untuk membuat
animasi web, seperti macromedia flash, swish, dsb
 Teknik membuat interface web
◦ Seorang Web designer harus memiliki wawasan dalam
bidang IMK (Interaksi Manusia dan Komputer), sehingga
dapat membuat desain web yang user friendly
◦ Seorang Web designer harus memahami setiap komponen-
komponen dasar pembentuk situs web, seperti bahasa
HTML, penggunaan image, multimedia
Yang harus dikuasai web designer

Prinsip-prinsip web design
1. Situs web dibuat untuk pengguna
 Seorang web designer harus mem-fokuskan desainnya
pada kepentingan pengguna
 Harus memertimbangkan karakter pengguna, baik dari
latar belakang, budaya, pendidikan dan kepentingan
yang berbeda
2. Utility dan Usability
 Utility adalah kegunaan atau fungsionalitas web
 Usability adalah sifat situs web yang mendukung
kemampuan pengguna dalam memanipulasi situs web,
sehingga pengguna memperoleh apa yang diperlukan

3. Correctness
 Tidak ada kesalahan dalam penulisan script HTML
 Gambar-gambar yang ditampilkan sesuai yang diharapkan
 Elemen-elemen yang interaktif (javascript, flash,dll) dapat
berfungsi dengan benar
 Tidak ada kesalahan dalam sistem navigasi (link yang
kosong atau broken link)
4. Struktur Link dan Navigasi
 Terdapat Link untuk menghubungkan satu halaman ke
halaman yang lain
 Perancangan Link agar menarik
5. Tampilan Visual
Tampilan visual website sesuai kebutuhan
Prinsip-prinsip web design

Unsur-unsur website
 Domain
alamat yang digunakan untuk menemukan situs kita pada dunia
internet.
 Hosting
ruangan yang terdapat dalam harddisk tempat menyimpan
berbagai data, file-file, gambar dan lain sebagainya yang akan
ditampilkan di situs. Diperoleh dengan menyewa
 Script/syntax/bahasa program
Adalah bahasa yang digunakan untuk menerjemahkan setiap
perintah dalam situs yang pada saat diakses

Yang harus diperhatikan
1. Kapasitas
perhatikan kapasitas yang dibutuhkan, hosting yang dipilih harus
sesuai kapasitas
2. Teknologi yang digunakan
perhatikan teknologi yang disediakan, apakah mendukung teknologi
dalam website yang dibuat (misal PHP, Java, dll)
3. Support
Periksa apakah perusahaan hosting yang ingin anda beli memiliki
layanan support yang baik selama 24jam
4. Database
Apabila anda membuat website dinamis, pastikan anda
memeriksa apakah mereka menyediakan database
Memilih Hosting

Memilih Hosting
5. Backup
pastikan hosting memiliki fasilitas back up setiap hari
6. Bandwidth
perhatikan kapasitas bandwidth yang disediakan

Bagian Website
Bagian umum yang biasa ada pada website
 Header
paket informasi yang sebelum data objek. Memberikan informasi awal atau data
yang berguna untuk transmisi tujuan. Umumnya terletak di bagian paling atas
halaman website
 Footer
dalam arti harafiah berarti sesuatu yang ada di bagian bawah. Dalam halaman
website biasa terdapat di bagian paling bawah halaman website, biasanya berisi
copyright atau pemilik website tersebut.
 Menu bar
sederatan menu yang biasanya berisi navigasi ke halaman lain, iklan,
social conect, animasi, dll.
 Content
isi website

Istilah-istilah internet
Bandwidth : besaran yang menunjukkan seberapa banyak data yang
dapat dilewatkan dalam koneksi melalui sebuah jaringan
Browser : sebutan untuk perangkat lunak yang digunakan untuk
mengakses www (world wide web)
Download : istilah untuk kegiatan menyalin data (biasanya berupa file)
dari sebuah komputer yang terhubung dalam sebuah jaringan ke
komputer lokal.
Email : Electronic mail. Pesan biasanya berupa teks, yang dikirim dari
satu alamat ke alamat lain di jaringan internet
Homepage : halaman muka dari sebuah situs web. Pengertian lain
adalah halaman default yang diset untuk sebuah browser.
HTML : Hypertext Markup Language. Bahasa yang digunakan
sistem/website untuk pertukaran dokumen/data secara elektronik
dalam bentuk hypertext
HTTP : Hyper Text Transfer Protocol. Protokol yang di desain untuk
mentransfer dokumen HTML yang digunakan dalam world wide web
Internet : Sejumlah besar jaringan(network) yang membentuk jaringan
inter-koneksi yang terhubung melalui protokol TCP/IP
ISP : Internet Service Provider, sebutan untuk penyedia layanan
internet

Istilah-istilah internet
IP Addres : Alamat IP (internet protokol), sistem pengalamatan di
jaringan yang direpresentasikan dengan sederetan angka berupa
kombinasi 4 deret bilangan antara 0 s/d 255 dan masing2 dipisah
dengan titik (.) mulai 0.0.0.1 sampai dengan 255.255.255.255
Network (Jaringan) : dalam terminologi komputer dan internet, network
adalah sekumpulan dua atau lebih sistem komputer yang
digandeng/dihubungkan dan membentuk sebuah jaringan. Internet
sebenarnya adalah kumpulan network dalam jumlah besar.
Protokol : seperangkat aturan yang mengatur secara tepat format
komunikasi antar sistem . Contoh protokol HTTP yang mengatur
format browser web dengan browser server
TCP/IP : Transmission Control Protocol/Internet Protocol. Satu set
protokol standar yang digunakan untuk menghubungkan jaringan
komputer dan mengalamati lalu lintas dalam jaringan . Protokol ini
mengatur format data yang diijinkan, penangan kesalahan (error
handling), lalu lintas pesan, dan standar komunikasi lainnya.
Upload : kegiatan pengiriman data (berupa file) dari komputer lokal ke
komputer lainnnya yang terhubung dalam sebuah network (jaringan).

PENGENALAN HTML
 Halaman website memiliki pola tersendiri
dalam pengisian teks dan gambar. Teks
yang digunakan merupakan Hypertext
Markup Language, sekaligus digunakan
sebagai ekstensi dari file tersebut. HTML
merupakan format yang disepakati untuk
penulisan halaman website. Sedangkan
gambar adalah yang berekstensi jpg,
bmp, dan gif
 Format HTML merupakan format yang
dapat diedit melalui Notepad dan
Frontpage yang ada pada Microsoft atau
program-program yang lain, misalnya
Dreamweaver.

ELEMEN HTML
 Elemen HTML terdiri dari :
◦ Head,
◦ Title
◦ Body,
◦ setiap elemen diapit tanda <> (delimiter).
 Teks yang ada pada delimiter disebut tag.
Dan untuk mengakhiri tag digunakan
tanda /

CONTOH PENULISAN DI NOTE
PAD
<html>
<head>
<title>judul web </title>
</head>
<body> Isi yang tampil di browser
</body>
</html>

LANGKAH MEMBUAT HTML
MELALUI NOTEPAD
 Buka program notepad yang ada di accesories
 ketik contoh html dibawah ini
<html>
<head>
<title> latihan </title>
</head>
<body> selamat datang
</body>
</html>
 simpan dokumen html dengan nama file
latihan1.html.
 pada menu save as type pilih All files
 klik save

 Maka setelah disimpan, dokumen tersebut
menjadi ikon “browser” yang lain, untuk
membukanya dapat dilakukan di windows
explore dengan cara doubel klik pada
dokumen tersebut atau ikuti langkah
berikut :
 aktifkan Browser
 klik open
 aktifkan folder tempat penyimpanan file
latihan
 klik atau ketik nama dokumen latihan
 klik ok

HEADING TEKS
 Tag heading memiliki 6 buah, dimulai dari
heading 1 yang berukuran besar hingga
heading 6 yang berukuran paling kecil.
 <H1> teks yang tampil di browser </H1>

CONTOH 2
<html>
<head>
<title>heading</title>
</head>
<body>
<H1> teks yang tampil di browser H SATU
</H1>
<H2> teks yang tampil di browser H
DUA</H2>
TIGA</H3>
EMPAT</H4>
LIMA</H5>

FORMAT TEKS
Pemformatan teks dilakukan pada bagian body, biasanya dengan diawali tag <font> dan
setelah pemformatan diakhiri dengan tag </font>
No Tag Fungsi
1 <b> teks </b> Huruf tebal
2 <i> teks </i> Huruf miring
3 <u> teks </u> Garis bawah
4 <strike> teks </strike> Huruf coret
5 <s> teks </s> Huruf coret
6 <sub> teks </sub> S
ubscript
7 <sup> teks </sup> S
uperscript
8 <TT> teks </TT> Huruf mesin ketik
9 <pre> teks <./pre> Menampilkan dengan jarak pra format
10 <pre width= ?
> teks </pre>
Mengatur jarak huruf
11 <center> teks
</center>
Rata tengah
12 <blink> teks </blink> Blinking
13 <Font size= >
teks</font>
Ukuran huruf , boleh diisi 1 -7
14 <font color=
>teks</font>
Warna huruf, bisa ditulis jenis warna
dalam bahasa Inggrisnya atau dengan
kode-kode warna tertentu

CONTOH 3
<html>
<head>
<title> format teks </title>
</head>
<body bgcolor=pink>
<H1><b> teks yang tampil </b>di browser H
SATU </H1>
<H2><font color= yellow> teks yang tampil di
browser</font> <i> H DUA</i></H2>
<H3> teks yang tampil di<u> browser </u> H
TIGA</H3>
<H4><center> teks yang tampil di browser H
EMPAT</center></H4>
<H5><tt> teks yang tampil di browser H
LIMA</tt></H5>
<H6> teks yang tampil di browser H ENAM</H6>
</body>

PENYISIPAN GAMBAR
 Tag yang digunakan untuk menyisipkan
gambar adalah :
<IMG SRC=/slideshow/dasar-dasar-tekhnis-web-designppt/258302736/”URL” ALIGN=”PERATAAN
GAMBAR, TOP/MIDDLE/BOTTOM.
LEFT,RIGHT>
Contoh :
<img src=gambar.jpg align=top>

CONTOH 4
<html>
<head>
<title> PENYISIPAN GAMBAR </title>
</head>
<body>
<H1><b> teks yang tampil </b>di browser H
SATU </H1>
<H2><font color= yellow> teks yang tampil di
browser</font> <i> H DUA</i></H2>
<H3> teks yang tampil di<u> browser </u> H
TIGA</H3>
<H4><center> teks yang tampil di browser H
EMPAT</center></H4>
<H5><tt> teks yang tampil di browser H
LIMA</tt></H5>
<H6> teks yang tampil di browser H ENAM</H6>
<img src=/slideshow/dasar-dasar-tekhnis-web-designppt/258302736/m2m1.jpg width=30%>
</body>

HYPERLINK
 Hyperlink digunakan agar halaman web
yang satu dengan yang lain dapat saling
terhubung. Tag yang digunakan yaitu :
 <a href=”halaman yang dituju.html”>
teks yang dilink</a>

 Contoh :
 <a href=”home.html”> kembali </a>

Contoh 5
<html>
<head>
<title> menggunakan link </title>
</head>
<body>
<H1><font size=7 color=red> MENGGUNAKAN LINK
</font></h1>
<font size=4><a href=”lat2.html”> ke latihan 2
</a></font><br>
</a></font><br>
</a></font><br>
</body>
</html>

Dasar Dasar Tekhnis Web Design.ppt

Membuat table
Digunakan untuk menampilkan informasi dalam bentuk sel
yang terdiri dari kolom dan baris.
Tag yang digunakan :
<table>
<tr>
<td> .... </td>
<td> .... </td>
</tr>
</table>
<table> .... </table> : tag awal untuk membuat tabel
<tr> .... </tr> : tag untuk membuat baris
<td> .... </td> : tag untuk membuat kolom

<html>
<head>
<title> tabel </title>
</head>
<body>
<table border=2>
<tr>
<td> nama </td>
<td> alamat </td>
<td> no telp </td>
</tr>
<tr>
<td> syaza naura </td>
<td> damaran no.25 </td>
<td> 081326003961 </td>
</tr>
<table>
</body>
</html>

<html>
<head>
<title> tabel 2</title>
</head>
<body>
<table border=1 bgcolor=green>
<tr width=150% height=20%>
<td><center><font size=7 color=red>WELCOME</font><center></td>
<td bgcolor=black><center><font size=6 color=red>
to CONCERT</font></center></td>
</tr>
<tr>
<td><img src=/slideshow/dasar-dasar-tekhnis-web-designppt/258302736/"/slideshow/dasar-dasar-tekhnis-web-designppt/258302736/m2m1.jpg"><br>m2m</td>
<td><font size=7 color=red>HAPPY WITH M2M</td>
</tr>
</table>
</body>
</html>

�ݺ�ߣ

Dasar Dasar Tekhnis Web Design.ppt

Recommended

More Related Content

Similar to Dasar Dasar Tekhnis Web Design.ppt (20)

Recently uploaded (8)

Dasar Dasar Tekhnis Web Design.ppt