WEB DESIGN
PENGERTIAN
Web Design 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 dan menekankan fitur fungsional dari
sebuah situs web, serta desain posisi web sebagai semacam desain grafis.
Web Designn ada
beberapa macam antara lain:
1.
HTML
2.
CSS
3.
PHP
4.
JAVA
FUNGSI
Sebelum men-design web , sebaiknya kita mngetahui dan
memahami beberapa fungsi situs web agar design yang dibuat sesuai dengan fungsi
situs web.Secara umum fungsi situs web adalah sebagai berikut:
1. Fungsi Komunikasi
Situs web berfungsi sebagai sarana komunikasi pada umumnya adalah web
dinamis.Karena dibuat menggunakan pemrograman web(server side) maka dilengkapi
dengan fasilitas yang memberikan fungsi-fungsi komunikasi seperti web mail
,formanthec,chatting,forum dll.
2. Fungsi Informasi
- Menekankan pada kualitas konten,karena tujuan situs ini mnyampaikan isinya
- Sebaiknya berisi teks dan grafik
- Fasilitas yang memberikan fungsi informasi,news,file,company,library,prefences dll.
3. Fungsi Entertainment
Sebagai sarana hiburan/penggunaan
animasi gambar dan element bergerak dapat meningkatkan mutu persentasi
design,meski tetap harus mempertimbangkan kecepatan downloadnya.Contoh
fungsi Entertaiment: game online,film online,music online dll.4.
4.Fungsi Transaksi
Situs web dapat dijadikan transaksi
bisnis baik barang jasa,dll.situs web menghubungkan perusahaan
konsumen dan komunitas tertentu melalui sarana elektronik.Pembayarannya bisa
memudahkan kartu kredit,transfer atauupun membayar langsung.
TUJUAN
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).
HTML
HTML
(HyperText Markup Language) adalahbahasapemrogramanstandar yang
digunkakanuntukmembuatsebuahhalaman web, yang
kemudiandapatdiaksesuntukmenampilkanberbagaiinformasididalamsebuahpenjelajah
web internet (browes). Bahasa penulisan HTML adalah TAG document
HTML disimpan dengan menambahkan .html dibelakangnya.
Contoh
Penyimpanan HTML latihan membuat web.html
Fungsidari HTMLadalah :
Ø Membuathalaman
web.
Ø Menampilkanberbagaiinformasididalamsebuahbrower
internet.
Ø
Membuat link menujukehalaman web lain
dengankoedtertentu (hypertext).
Pengaturan
Teks Pada HTML
ü HEADING digunakansebagaijudul.
o
Simbolnya
: <head> ……… </head>
ü TITLE
digunakanuntukjduuldialamatwebnya.
o
Simbolnya:
<title> ……………….</title>
ü BODY
digunakanuntuktempatmengeditteks
o
Simbolnya:<body>
………………….</body>
ü FONTSIZEdigunakanuntukmerubahukuranhuruf.
o
Simbolnya
:<h1> ………….. </h1>
ü ITALIC
digunakanuntukmembuatteksmenjadi miring.
o
Simbolnya:
<i>………….</i>
ü UNDERLINE
digunakanuntukmembuatgarisbawahdibawahteks.
o
Simbolnya:<u>…………………</u>
ü BOLD
digunakanuntukmembuattulisantenjaditebal.
o
Simbol: <b>……….</>
ü GARIS HORIZONTAL
digunakanuntukmembuatgarispanjangdibawahtulisan.
o
<hr>
ü ALIGHMENT
digunakanuntukmeratakanteks.
o
Simbol: <center>………….</center>
ü PARAGRAF
digunakanuntukmembuatparagrafbaru.
o
Simbol:
<p>…………….</p>
ü FONT STYLE
digunakanuntukmerubahjenishuruf.
o
Simbolny:a<p
style=”font-family:arial:> ………………</p>
ü SUPERSCRIPTS
digunakanuntukmembuatteksmenjadiseperti 52.
o
Simbolnya: <sup>…………</sup>
ü SUBSCRIPTS
digunakanuntukmembuattulisanletaknyadibawahseperti O2.
o
Simbolnya: <sub>…………</sub>
ü LIST/DAFTAR dugunakanuntukmembuatdaftar.
o
Simbolnya: < li>……</li>
ü FONTCOLOR
digunakanuntukmembuatteksberwarna
o
Simbolnya:
ü MARQUEE
digunakanuntukmembuattulisanbergerak
o
Simbolnya:
<marquee>……….</marque>
o
Tuliskanitusemua
di dalam notepad atau notepad++
Langkah
– Langkah Membuat Web Dengan HTML
1.
Buka aplikasi NOTEPAD atau NOTEPAD ++
2.
Tulis Struktur HTML seperti dibawah ini
<html>
<head>
<meta
http-equiv="content-type" content="text/html;
charset=windows-1252">
<title>Latihan Membuat
Web</title>
</head>
<body bgcolor="#ff00cc">
<h1><b><marquee><font
color="blue"><font face="ravie">HELLO
GUYS</font></font></marquee></b></h1><b><br>
<h2><font
face="ravie"><b><i>Selamat Datang Di Web
Saya</i></b></font></h2><font
face="ravie"><br>
<p><font
new="" roman="" face="times">Di web saya ini
saya akan sedikit menjelaskan tentang tingkatan
brainware</font></p><font new="" roman=""
face="times"><br>
<p
align="justify"><font new="" roman=""
face="times"><b><u></u></b></font></p><h3><font
new="" roman="" face="times"><b><u>TINGKATAN
PADA
BRAINWARE<p></p></u></b></font></h3><font
new="" roman="" face="times"><br>
<font new=""
roman="" face="times"
size="3"><p>Pengertian Brainware
Pengertian dari Brainware
adalah faktor pada komputer yang menangani sistem informasi.
Berdasarkan pengelompokannya
tingkatan braiware dibagi menjadi 6 yaitu:<br>
1. System Analyst</p>
2. Database Administrator
(DBA)<p></p>
3. Network
Specialist<p></p>
4.
Programmer<p></p>
5. Operator<p></p>
6. End User<p></p>
<br>
<p>25<sup>3</sup></p>
<p>O<sub>2</sub></p>
<br>
<center><p style="font
family=arial"><b>Daftar Belanja Mingguan</b><br>
<center><li>Mie Instan</li>
<center><li>Sabun Cuci</li>
<center><li>Sabun Mndi</li>
<center><li>Shampo</li>
<center><li>Saus Tomat & Saus
Sambal</li>
<center></li>Pasta Gigi</li>
<center><li>Beras</li><br>
<tdclospan="3" <
td=""></tdclospan="3" <><tdclospan="3"><h3>Silahkan
Masukkan Komentar Anda : </h3>
</tdclospan="3"><table>
<tbody><tr>
</tr><tr>
</tr>
<tr>
<td>Nama</td>
<td>:</td>
<td><input name="nama"
type="text"></td>
</tr>
<tr>
<td
align="top">Komentar</td>
<td
align="top">:</td>
<td><textarea
name="komentar" rows="7"
width="200"></textarea></td>
</tr>
<tr>
<td
colspan="3"><input name="submit"
value="submit" type="submit"></td></tr>
</tbody>
</table>
</font>
</font>
</font>
</font>
</b>
</body>
</html>
Contoh HTML pada NOTEPAD
Contoh Tampilan Web
Tidak ada komentar:
Posting Komentar