Belajar webdesign
-
Upload
shinta-saptarini -
Category
Design
-
view
268 -
download
0
Transcript of Belajar webdesign
2
Belajar Webdesign
Apa yang akan dipelajari pada modul ini ?
1. Mempelajari dasar-dasar html.
2. Mempelajari dasar-dasar css.
4. Membuat layout sederhana.
Untuk mempelajari sesuatu kita harus tau dasar-dasarnya dahulu. Belajar webdesignpun
begitu, kita akan mempelajarinya dari dasarnya terlebih dahulu.
Susah nggak sih belajar Webdesign ?
Susah itu berarti sulit,sulit itu karena kita belum bisa, kalau belum bisa ngapain ???
makanya belajar biar bisa.. hehehe.. jadi belajar itu proses untuk bisa.. bukan masalah
sulit apa tidak..
Apa itu 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 atau programming.
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, iya kalo ada yang pesan ya ?? :D
3
Belajar Webdesign
mampu menempatkan komponen multimedia pada bagian tertentu sehingga
halaman web menjadi menarik.
PENGUASAAN TOOLS PENDUKUNG PERENCANAAN WEB seperti :
1. Aplikasi pengatur layout web, contohnya Macromedia Dreamweaver, Microsoft
Fontpage, Edit Plus, PHP Edit, dll
2. Aplikasi pembuat animasi seperti Macromedia Flash, Swish, dll
3. Aplikasi design grafis seperti Corel Draw, Photoshop, Gimp, dll
Ini akan kita pelajari setelah kita mampu memahami dasar-dasar html,css dan java
script.
————————————————————————————————————
JENIS-JENIS WEBSITE BERDASARKAN FUNGSINYA
Sebelum mendesain sebuah web, sebaiknya kita mengetahui dan memahami terlebih
dahulu beberapa fungsi dari sebuah situs web agar design yang dibuat sesuai dengan
fungsi yang dibuat. Secara umum, fungsi dari sebuah web adalah sebagai berikut :
Fungsi Komunikasi
Situs yang mempunyai fungsi ini pada umumnya adalah web dinamis. Karena dibuat
memakai pemrograman web (server side) maka dilengkapi dengan fasilitas yang
memberikan fungsi-fungsi komunikasi seperti web mail, form, contex, chat, forum,
dll. Facebook,kaskus,flickr dll merupakan salah satu situs web yang berfungsi
sebagai media komunikasi.
4
Belajar Webdesign
Fungsi Informasi
Web ini lebih menekankan pada kualitas konten karena tujuan situs ini adalah
menyampaikan isinya. Sebaiknya web jenis ini berisi teks dan grafik yang dapat di
download dengan cepat. Batasi penggunaan animasi gerak pada web jenis ini. Fasilitas
yang memberikan fungsi informasi adalah news, profile, company, library, reference,
dll. Contoh : detik, bbc news.
Fungsi Entertaiment
Web jenis ini merupakan sarana hiburan, sehingga animasi gambar dan elemen
gerak dapat meningkatkan mutu presentasi desain, meski harus tetap
mempertimbangkan kecepatan download. Beberapa fasilitas dari web yang memiliki
fungsi entertaiment antara lain game online, film online, music online, dll. Youtube
merupakan salah satu web dengan fungsi entertaiment.
5
Belajar Webdesign
Fungsi Transaksi
Situs web ini dapat dijadikan sarana transaksi bisnis, baik barang maupun jasa. Situs ini
menghubungkan perusahaan konsumen dan komunitas tertentu melalui transaksi
elektronik. Pembayarannya dapat menggunakan ATM, transfer, maupun langsung.
Contohnya adalah tokobagus.com.
Nah.. itu tadi sebagian dari fungsi sebuah website. Didunia ini masih banyak sekali jenis-
jenis website dan fungsinya.
6
Belajar Webdesign
Dasar-dasar HTML PERTEMUAN 1
APA SIH ITU 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 suatu 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).
EDITOR , WEB SERVER DAN WEB BROWSER
HTML dapat diedit dengan menggunakan editor HTML profesional seperti:
Adobe Dreamweaver
Microsoft Expresion Web
CoffeeCup HTML Editor
Textpad
Sebenarnya masih banyak lagi editor HTML freeware ataupun berbayar, kita juga bisa
menggunakan Notepad sebagai editor, tetapi untuk mempermudah kita dalam
mempelajarinya kali ini kita akan menggunakan Textpad.
MENGENAL TAG PADA HTML
Dibawah ini adalah daftar tag pada html.
No. TAG DESKRIPSI
1 <!--> Mendefinisikan komentar
2 <!DOCTYPE> Mendefinisikan tipe dokumen
3 <a> Mendefinisikan hyperlink
4 <abbr> Mendefinisikan singkatan
5 <acronym> Mendefinisikan akronim
6 <address> Mendefinisikan informasi kontak untuk penulis / pemilik dokumen
7 <applet> Mendefinisikan sebuah applet tertanam
8 <area> Mendefinisikan area dalam sebuah image-map
9 <b> Mendefinisikan teks tebal
10 <base> Menentukan basis URL / target untuk semua URL relatif dalam
dokumen
11 <basefont> Menentukan warna default, ukuran, dan font untuk semua teks
dalam dokumen
12 <bdo> Mengganti arah teks saat ini
13 <big> Mendefinisikan teks besar
14 <blockquote> Mendefinisikan sebuah bagian yang dikutip dari sumber lain
15 <body> Mendefinisikan tubuh dokumen
7
Belajar Webdesign
16 <br> Mendefinisikan garis break
17 <button> Mendefinisikan sebuah tombol diklik
18 <caption> Mendefinisikan judul tabel
19 <center> Mendefinisikan teks berpusat (perataan tengah)
20 <cite> Mendefinisikan judul karya
21 <code> Mendefinisikan sebuah bagian dari kode komputer
22 <col> Menentukan kolom properti untuk setiap kolom dalam elemen
23 <colgroup> Menentukan kelompok dari satu atau lebih kolom dalam sebuah
tabel untuk menentukan format
24 <dd> Mendefinisikan deskripsi / nilai istilah dalam daftar deskripsi
25 <del> Mendefinisikan yang telah dihapus dari dokumen
26 <dfn> Mendefinisikan sebuah istilah definisi
27 <dir> Mendefinisikan sebuah daftar direktori
28 <div> Mendefinisikan sebuah bagian dalam sebuah dokumen
29 <dl> Mendefinisikan daftar deskripsi
30 <dt> Mendefinisikan istilah / nama dalam daftar deskripsi
31 <em> Mendefinisikan teks menekankan
32 <fieldset> Elemen grup terkait dalam bentuk form
33 <font> Mendefinisikan font, warna, dan ukuran untuk teks
34 <form> Mendefinisikan sebuah form HTML untuk masukan dari pengguna
35 <frame> Mendefinisikan sebuah window (frame) dalam sebuah frameset
36 <frameset> Mendefinisikan satu set frame
37 <head> Mendefinisikan informasi tentang dokumen
38 <h1> - <h6> Mendefinisikan judul HTML
39 <hr> Mendefinisikan perubahan tematik dalam konten
40 <html> Mendefinisikan root dari suatu dokumen HTML
41 <i> Mendefinisikan sebuah bagian dari teks dengan suara alternatif
atau suasana hati
42 <iframe> Mendefinisikan frame inline
43 <img> Mendefinisikan sebuah image
44 <input> Mendefinisikan sebuah kontrol input
45 <ins> Mendefinisikan teks yang telah dimasukkan ke dalam dokumen
46 <kbd> Mendefinisikan input keyboard
47 <label> Mendefinisikan label untuk sebuah elemen <input>
48 <legend> Mendefinisikan keterangan untuk elemen <fieldset>
49 <li> Mendefinisikan item daftar
50 <link> Mendefinisikan hubungan antara dokumen dan sumber daya
eksternal (yang paling digunakan untuk link ke style sheet)
51 <map> Mendefinisikan client-side image-map
52 <menu> Mendefinisikan daftar / menu perintah
53 <meta> Mendefinisikan metadata tentang dokumen HTML
54 <noframes> Mendefinisikan sebuah alternate content untuk pengguna yang
tidak mendukung frame
55 <noscript> Mendefinisikan sebuah alternate content untuk pengguna yang
tidak mendukung script sisi klien
56 <object> Mendefinisikan obyek tertanam
8
Belajar Webdesign
57 <ol> Mendefinisikan ordered list
58 <optgroup> Mendefinisikan sekelompok opsi terkait dalam daftar drop-down
59 <option> Mendefinisikan pilihan dalam daftar drop-down
60 <p> Mendefinisikan paragraf
61 <param> Mendefinisikan parameter untuk sebuah objek
62 <pre> Mendefinisikan teks terformat
63 <q> Mendefinisikan sebuah kutipan pendek
64 <s> Mendefinisikan teks yang tidak lagi benar
65 <samp> Mendefinisikan contoh output dari program komputer
66 <script> Mendefinisikan sebuah script sisi klien
67 <select> Mendefinisikan daftar drop-down
68 <small> Mendefinisikan teks yang lebih kecil
69 <span> Mendefinisikan sebuah bagian dalam sebuah dokumen
70 <strike> Mendefinisikan teks strikethrough
71 <strong> Mendefinisikan teks penting
72 <style> Mendefinisikan informasi style untuk dokumen
73 <sub> Mendefinisikan teks subscript
74 <sup> Mendefinisikan teks yang super scripted
75 <table> Mendefinisikan tabel
76 <tbody> Grup isi tubuh dalam sebuah tabel
77 <td> Mendefinisikan sel dalam sebuah tabel
78 <textarea> Mendefinisikan input kontrol multiline (area teks)
79 <tfoot> Grup konten footer dalam sebuah tabel
80 <th> Mendefinisikan sel header tabel
81 <thead> Grup isi header dalam sebuah tabel
82 <title> Mendefinisikan judul untuk dokumen
83 <tr> Mendefinisikan baris dalam tabel
84 <tt> Mendefinisikan teks teletype
85 <u> Mendefinisikan teks yang harus Gaya yang berbeda dari teks
biasa
86 <ul> Mendefinisikan daftar unordered
87 <var> Mendefinisikan variable
HEAD,BODY DAN TITLE PADA HTML
Head, Titlle dan Body adalah tag utama pada html. Kenapa bisa begitu ?
karena tanpa ketiga tag diatas koding HTML yang kita buat akan sulit dikenali atau
dibuka oleh browser. Dalam koding yang sederhana mungkin bisa, tetapi ketika sudah
banyak koding, browser akan susah mengenalinya.
Dan dibawah ini adalah contoh sederhana dari penulisan html :
9
Belajar Webdesign
Hasil Output :
Catatan :
Bagian kepala dokumen html ditandai dengan tag <head> .... </head>. Bagian
kepala ini digunakan untuk membuat judul halaman web dengan menggunakan
tag berikut : <title>......</title>
Bagian badan dalam dokumen html ditandai dengan tag berikut :
<body>.....</body> . Nah, bagian badan akan berisikan content yang akan
ditampilkan dalam halaman web.
ELEMEN PADA HTML
Dalam penggunaannya sebagian besar kode HTML tersebut harus terletak di antara TAG
kontainer. Yaitu diawali dengan <namatag> dan diakhiri dengan </namatag> (terdapat
tanda "/").
Sintaks elemen HTML mempunyai ciri sebagai berikut:
Elemen HTML dimulai dengan start tag / opening tag
Elemen HTML diakhiri dengan end tag / closing tag
Isi Elemen / element content adalah semua yang terdapat diantara start tag dan
end tag
10
Belajar Webdesign
Beberapa elemen HTML tidak memiliki isi atau konten
Elemen yang tidak memiliki isi atau kosong ditutup pada awal tag
Sebagian besar elemen HTML dapat diberi atribut tertentu
Aturan dalam penulisan tag pada html :
Tag ditulis dengan format diawali tanda < dan diakhiri tanda >, seperti </HTML>
Tidak boleh ada spasi setelah tanda < . Contoh : <TITLE> tisak boleh dituliskan
dengan < TITLE>
Tag boleh ditulis dengan huruf kecil,huruf kapital, ataupun kombinasi keduanya.
Tetapi untuk memudahkan usahakan memakai huruf kecil saja.
ATRIBUT PADA HTML
Setelah kita mengenal apa itu elemen pada html, kita akan mempelajari atribut. Apakah
atribut itu ? Atribut html adalah informasi tambahan tentang elemen yang ditentukan
dalam tag awal dan akhir dalam pasangan nama/nilai.
Dibawah ini adalah sebagian daftar atribut pada html :
No ATRIBUT DESKRIPSI
1 accesskey Menentukan tombol shortcut untuk mengaktifkan / fokus elemen
2 Class Menentukan satu atau lebih classnames untuk elemen (mengacu pada kelas dalam style sheet)
3 Dir Menentukan arah teks untuk konten dalam elemen
4 Id Menentukan id unik untuk sebuah elemen
5 Lang Menentukan bahasa konten elemen
6 Style Menentukan sesuai gaya CSS untuk elemen
7 tabindex Menentukan urutan tabbing dari elemen
8 Title Menentukan informasi tambahan tentang elemen
Contoh penulisan atribut dalam elemen :
<html lang="en">
..................
</html>
Nah, pada script diatas elemenya adalah <html> dengan atribut lang.
PARAGRAF PADA HTML
Untuk membuat suatu paragraf dalam dokumen html adalah tag <P>. Untuk lebih
jelasnya kita lihat contoh dibawah ini :
11
Belajar Webdesign
Pada dokumen diatas tag <P> mendapatkan atribut align left, right, center yang berarti
paragraf itu memiliki perataan kiri,kanan dan tengah, hasilnya terlihat pada hasil output
dibawah ini.
Dalam paragraf ada Tag Break (<br/>) yaitu cara lain untuk memisahkan kedua
paragraf (br singkatan daribreak). Untuk mengetahui bagaimana tag <br/> bekerja,
coba kerjakan latihan dibawah ini.
Latihan :
1. Ketikan script berikut ini pada editor dan lihat hasilnya :
12
Belajar Webdesign
Tugas :
1. Buatlah sebuah cerita dalam halaman web menggunakan html ! dengan ketentuan 3
paragraf.
PERTEMUAN 2
MEMFORMAT TULISAN/TEKS
Pada halaman web, tentunya tidak lepas dari penampilan teks. Untuk mengetikan teks
didalam tag <body>...</body> ada cara untuk mengatur memformatan teks, dibawah
ini adalah daftar beberapa tag yang digunakan :
Tag Fungsi
Center mengatur posisi teks agar berbeda ditengah
DIV mengatur teks yang memiliki karakteristik yang sama
B menebalkan cetakan teks
SMALL menampilkan teks lebih kecil dari pada ukuran normal
BIG menampilkan teks lebih besar dari pada ukuran normal
U menambahkan garis bawah pada teks
I menampilkan teks dengan bentuk tulisan miring
SUB menampilkan teks sebagai subskrip
SUP menampilkan teks sebagai superskrip
TT menmpilkan teks seperti ketikan menggunakan mesin ketik
FONT mengatur jenis,ukuran,dan juga warna font.Dalam tag ini bisa mengandung banyak atribut , antara lain ace,colour.
STRONG Menandai teks penting.
13
Belajar Webdesign
Dibawah ini adalah contoh penulisan dari pemformatan teks pada dokumen html :
Hasil output pada browser :
WARNA
Selain pengaturan tataletak, kita juga bisa mengatur warna yang kita inginkan. Warna
ini bisa kita letakan pada tag BODY maupun tag FONT. Pemberian warna pada tag BODY
adalah untuk mengatur warna latar belakang dengan menggunakan atribut BGCOLOR.
Sedangkan pada tag FONT menggunakan atribut COLOR untuk mengatur warna teks.
Nama Warna RGB Nama Warna RGB
Aqua #00FFFF Navy #000080
Black #000000 Olive #808000
Blue #0000FF Purple #800080
Fuchsia #FF00FF Red #FF0000
Gray #808080 Silver #C0C0C0
Green #008000 Teal #008080
Lime #00FF00 Yellow #FFFF00
Maroon #800000 White #FFFFFF
UKURAN FONT
14
Belajar Webdesign
Selain mengatur warna, kita juga bisa mengatur besar kecil dari FONT dengan atribut
SIZE.
Contoh :
Dibawah ini adalah hasil outputnya :
HEADING PADA HTML
Heading adalah sekumpulan kata yang menjadi judul atau sub judul dalam dokumen
HTML, dengan berbagai ukuran yang berbeda. Untuk menyusun Heading dan sub-
heading dengan HTML, kita akan menggunakan format heading yang telah disediakan
seperti contoh. Heading level 1 sampai dengan heading level 6.
Pada dasarnya untuk menyatakan suatu Heading, digunakan tag <Hx> dimana x adalah
level 1 sampai 6. Tag Heading atau <Hx> adalah tag berpasangan, yaitu tag yang
mempunyai tag awal <Hx> dan tag penutup </Hx>
Format : <H1>...........</H1> sampai <H6>.......</H6>
Contoh :
Ketikanlah kode html dibawah ini :
15
Belajar Webdesign
Lalu simpan. Setelah itu buka file html yang kamu simpan tadi. Maka akan muncul
tampilan seperti dibawah ini.
PENGATURAN TATA LETAK DAN MEMBUAT GARIS HORISONTAL
Untuk mengatur tata letak atribut yang digunakan adalah ALIGN. Dibawah ini adalah
daftar nilai yang digunakan :
Atribut Deskripsi
CENTER Mengatur teks rata tengah terhadap halaman
LEFT Mengatur teks rata kiri terhadap halaman
16
Belajar Webdesign
RIGHT Mengatur teks rata kanan terhadap halaman
JUSTIFY Mengatur teks rata kiri dan kanan terhadap halaman
Dan untuk membuat garis horisontal dapat menggunakan tag <HR>. Berikut ini adalah
daftar atribut yang digunakan :
Atribut Fungsi
SIZE mengatur ketebalan garis
ALIGN mengatur posisi teks dalam baris
NOSHADE menghilangkan bayangan pada garis
WIDTH mengatur lebar garis
COLOR menentukan warna garis
Contoh :
Hasil Output :
KOMENTAR
Komentar atau Comment adalah bagian dari kode yang tidak dieksekusi/dijalankan.
Komentar dapat dimasukkan/disisipkan kedalam kode HTML. Komentar dibuat untuk
memperjelas atau memberi keterangan pada kode HTML. Untuk menulis komentar dapat
menggunakan tanda <!-- dan -->
Contoh :
Input :
<html>
<head>
<title>Komentar</title>
</head>
17
Belajar Webdesign
<body>
<h1>Heading Level 1</h1><! Tulisan ini tidak memiliki pengaruh-->
<h2>Heading Level 2</h2><! dan tidak akan muncul di browser-->
<h3>Heading Level 3</h3><! Manfaatnya hanya sebagai keterangan saja-->
<h4>Heading Level 4</h4>
<h5>Heading Level 5</h5>
<h6>Heading Level 6</h6>
</body>
</html>
Hasil Output :
MEMBUAT LIST
Dibawah ini adalah daftar tag list :
Tag list Keterangan
<ul> Mendefinisikan ordered list
<ol> Mendefinisikan daftar unordered
<li> Mendefinisikan item daftar
<dl> Mendefinisikan daftar deskripsi
<dt> Mendefinisikan istilah / nama dalam daftar deskripsi
<dd> Mendefinisikan deskripsi istilah / nama dalam daftar deskripsi
Coba ketikan script dibawah ini pada browser kamu :
<ul>
<li> ini item nomer 1
<li> ini item nomer 2
<li> ini item nomer 3
</ul>
<ol type=i>
<li> item nomer 1
<li> item nomer 2
<li> item nomer 3
</ol>
<dl>
<dt> item pertama.
<dd> penjelasan tentang item pertama.
<dt> item kedua.
18
Belajar Webdesign
<dd> penjelasan tentang item kedua.
</dl>
Ketika dijalankan akan muncul penampakan sperti dibawah ini :
Latihan :
1. Ketikan skript dibawah ini pada editor kamu.
<html>
<head>
<title>Membuat blog</title>
</head>
<body>
<font size="+1" color="#0033FF" >Langkah-Langkah membuat Blog</font>
<hr align="left" color="0000FF" noshade size="2"><br />
<ul><font color="#333333">
<li>Membuat Email di Gmail.com</li>
<li>Daftar di Blogger.com</li>
<li>Klik Buat Blog/Create Blog <br /><br />
1. Klik blog baru<br />
2. Isi judul blog anda<br />
3. isikan alam/domain blog anda<br />
4. pilih themes/tema blog yang anda sukai<br />
5. Klik Buat Blog</li>
</font></ul>
<br />
<font color="330033"><h4>
Ini adalah langkah-langkah membuat blogger, semoga bermanfaat.
</h4></font>
</body>
</html>
19
Belajar Webdesign
PERTEMUAN 3
LINK
Link adalah salah satu tag html yang berfungsi untuk menghubungkan suatu website ke
website lain atau halaman lain.
Untuk membuat link atau hyperlink, dapat menggunakan tag :
<a href>....</a>
Berikut atribut yang digunakan untuk mengatur link :
Atribut Fungsi
Link menentukan warna link
Alink menentukan warna link ketika diklik dan halaman link terbuka
Vlink menentukan warna link ketika diklik dan halaman link sudah pernahterbuka
Dan ini atribut-atribut yang digunakan dalam tag link <a> :
Atribut Fungsi
Tabindex menentukan urutan link pada halaman web dengan memanfaatkan tombol tab
Target menampilkan halaman link dengan membuka jendela browser yang baru.Nilai yang ada untuk target yaitu blank,parent,op,self
Berikut ini adalah contoh penggunaan link, coba ketikan pada editor dan simpan dengan
nama link.html.
Dan dibawah ini adalah halaman yang akan di link kan, pada tag <a href=”...”>, dititik-
titik itulah yang akan kita arahkan pada halaman yang kita tuju.
Simpan dengan nama link2.html, lalu jalankan link.html.
20
Belajar Webdesign
MENYISIPKAN GAMBAR
Sebuah web membolehkan kita untuk menampilkan gambar, baik sebagai content web
maupun sebagai gambar latar belakang web. Untuk menampilkan gambar sebagai
gambar latar belakang web dapat menambahkan atribut background pada tag <body>,
dan untuk menampilkan gambar dalam halaman web dapat menggunakan Tag <img>.
Dibawah ini adalah daftar tag dan atribut gambar pada html :
Dibawah ini adalah contoh untuk menyisipkan gambar pada html , coba ketikan pada
editor kamu:
Keterangan :
Pada script “src=......” sesuai dengan tempat menyimpan dimana kamu menyimpan
gambar yg akan kamu tampilkan dan nama filenya.
TAG DESKRIPSI
<img> Mendefinisikan sebuah image
<map> Mendefinisikan sebuah image-map
<area> Mendefinisikan daerah yang dapat diklik dalam sebuah
image-map
Atribut Nilai Keterangan
Align Top Menentukan alignment gambar sesuai dengan elemen sekitarnya
Alt Text Menentukan teks alternatif untuk gambar
Border Pixels Menentukan lebar perbatasan di sekitar gambar
Height Pixels Menentukan tinggi dari suatu gambar
Hspace Pixels Menentukan spasi di sisi kiri dan kanan gambar
Ismap Ismap Menentukan gambar sebagai server-side image-map
Longdesc URL Menentukan URL untuk dokumen yang berisi deskripsi panjang dari suatu gambar
Src URL Menentukan URL dari gambar
Usemap #mapname Menentukan gambar sebagai client-side image-map
Vspace Pixels Menentukan spasi di atas dan bawah gambar
Width Pixels Menentukan lebar dari suatu gambar
21
Belajar Webdesign
Hasil Output :
Dibawah ini adalah daftar atribut yang digubakan untuk mengatur gambar pada tag img.
MENYISIPKAN MULTIMEDIA
Multimedia merupakan teknologi yang memadukan antara teks , gambar diam,animasi
gambar,suara, dan bahkan video.Sebuah web juga dapat menyertakan multimedia
didalamnya. Tipe suara dan video yang dapat disertakan dalam halaman web antara
lain:
Format Kategori Ekstensi
AVI Video Avi
MPEG Video mpg,mpeg
Quick Time Video qt,mov
AIFF Audio aif,aiff
AU Audio Au
MIDI Audio mid,midi
WAV Audio Wav
Perlu diketahui bahwa tidak semua browser menyediakan fasilitas untuk memainkan
berkas-berkas yang disebutkan diatas.Sebagai gantinya,diperlukan perangkat lunak
eksternal, misalnya WinAmp untuk memainkan suara atau Windows Media Player untuk
memainkan film maupun suara.
Tag <BGSOUND>
Tag ini digunakan untuk memainkan suara sebagai latarbelakang. Atribut yang
digunakan didalamnya yaitu :
22
Belajar Webdesign
Atribut Fungsi
SRC Menentukan nama berkas yang akan dimainkan
LOOP Diisi dengan nilai yang menyatakan berapa kali berkas akan dimainkan.Jika diisi dengan nilai INFINITIVE maka suara akan dimainkan terus menerus.
Tag <EMBED>
Tag ini digunakan untuk memainkan berkas yang berupa suara atau film.Beberapa
atribut yang digunakan didalamnya adalah :
Atribut Fungsi
SRC menentukan sumber berkas suara atau video
WIDTH menentukan lebar video
HEIGHT menentukan tinggi video
UNITS menentukan satuan untuk video
HIDDEN menyembunyikan control
AUTOSTART diisi dengan nilai TRUE atau FALSE untuk menentukan berkas akan dimainkan secara otomatis atau tidak
LOOP Jika diisi dengan TRUE ,maka berkas akan dimainkan berulang-ulang.
Latihan :
1. Carilah file mp3 apa saja, copy satu folder dengan file html kamu, lalu ketikan kode
html dibawah ini pada editor :
Isikan pada atribut src=”....” sesuai dengan nama file ekstensi mp3 yang sudah kamu
copy tadi. Kemudian simpan dengan nama audio.html, lalu jalankan pada browser.
Output :
2. Untuk menyisipkan video carilah file video misal dengan format mp4, copy satu
folder dengan file html kamu, lalu ketikan kode html dibawah ini pada editor :
<!DOCTYPE html>
<html>
<body>
<video width="320" height="240" controls autoplay>
23
Belajar Webdesign
<source src="snsd.mp4" type="video/mp4">
<source src="snsd.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
</body>
</html>
Output :
PERTEMUAN 4
MEMBUAT TABEL
Tabel didefinisikan dengan table tag.
Sebuah tabel dibagi menjadi baris dengan <tr> tag. (Tr singkatan baris tabel)
Baris A dibagi ke dalam sel data dengan <td> tag. (Td singkatan dari data tabel)
Baris A juga dapat dibagi menjadi judul dengan <th> tag. (Th singkatan dari
table heading)
Unsur-unsur <td> adalah wadah data dalam tabel.
Unsur-unsur <td> dapat berisi segala macam elemen HTML seperti teks, gambar,
daftar, tabel lain, dll
Lebar tabel dapat didefinisikan dengan menggunakan CSS.
Apa kegunaan tabel sendiri ?
Tabel biasanya digunakan dalam halaman web untuk memperindah tampilan
ataupun mengatur agar informasi dapat disajikan dengan tampilan yang lebih
menarik untuk dilihat ataupun dibaca dan tertata dengan rapi.
Dibawah ini adalah daftar atribut-atribut yang ada pada tag <table> :
Atribut Default Digunakan pada
Penggunaan dan Value
Align Left seluruh tag Digunakan untuk menentukan posisi
24
Belajar Webdesign
Praktek :
1. ketikan script, lalu simpan dengan nama tabel.html
horizontal perataan tabel atau sel : left,right,center.
Bgcolor seluruh tag Warna background tabel atau cell. Gunakan kode hexadesimal.
Border 0 <table> Ketebalan garis tepi tabel(dalam pixels).
Cellpadding 0 <td>,<th> Jarak border dengan isi sel (dalam pixels).
Cellspacing 0 <td>,<th> Jarak antar sel(dalam pixels).
Colspan 1 <td>,<th> Jumlah kolom yang akan digabung(merge).
Rowspan 1 <td>,<th> Jumlah baris yang akan digabung(merge).
Valign center <td>,<tr>,<th> Perataan vertikal sel atau baris : top,bottom,center, or baseline.
Width to fit seluruh tag Lebar tabel atau sel (dalam pixel atau prosentase).
25
Belajar Webdesign
Hasil Output :
2. Setelah itu ubahlah tabel diatas menjadi tabel dengan 3 kolom dan 3 baris.
3. Isikan nama buah yang kalian ketahui didalam barisnya, kemudian tambahkan warna
latar menggunskan atribut bgcolor pada script <tabel> menjadi seperti berikut :
<table border=”1” bgcolor”blue”>
4. Ketikan script dibawah ini :
<html>
</head>
<body>
<table width="384" height="200" border="1" cellpadding="0"
cellspacing="0">
<tr>
<td width="130" bgcolor="#99CC99" align="center">Nama</td>
<td width="114" bgcolor="#99CC99" align="center">Berat badan</td>
<td width="140" bgcolor="#99CC99" align="center">Tinggi badan</td>
</tr>
<tr>
<td align="center">Ani</td>
<td align="center">45</td>
<td align="center">160</td>
</tr>
<tr>
<td align="center">Andi</td>
<td align="center">60</td>
<td align="center">170</td>
</tr>
<tr>
<td align="center">Siska</td>
<td align="center">55</td>
<td align="center">155</td>
</tr>
</table>
</body>
</html>
Lalu simpan dan jalankan. Apa perbedaannya dengan tabel pertama ?
Tugas :
1. Buatlah tabel seperti dibawah ini, isilah dengan data diri kamu.
26
Belajar Webdesign
Keterangan : border 1 , colour #999999 dan #ffffff
PERTEMUAN KE 5
MEMBUAT FORM
Apa sih form itu ?
Form biasanya digunakan untuk mengumpulkan informasi dari user, sehingga
memungkinkan suatu web server untuk menerima informasi dari pemakai melalui
sejumlah elemen yang disebut kontrol. Kontrol ini bisa berupa suatu textbox, checkbox,
radio button, push button, list menu dan lainnya.
Form juga bisa didefinisikan sebagai bentuk HTML yang digunakan untuk melewatkan
data ke server.
Nah, nggak usah pusing-pusing deh.. intinya form itu fungsinya untuk membuat formulir
yang ditampilkan dalam dokumen web. Sudah tau kan ?
Tag <form> digunakan untuk membuat bentuk HTML:
<form>
.
elemen input
.
</form>
Selain ada tag <form> ada tag input juga lho..
Tag <input> digunakan untuk melakukan pemasukan data dan letaknya berada dalam
pasangan tag <form>. Nah didalam tag input inilah yang nantinya tipe pemasukan apa
yang akan kita buat. Tag input ini juga mempunyai atribut. Ini dia daftar atribut pada
tag <input> :
27
Belajar Webdesign
Atribut Fungsi
Type menentukan tipe kota masukan
Name menentukan nama data
Size menentukan ukuran kotak masukan
Maxtlenght menentukan jumlah karakter yang dapat dimasukan dalam kotak isian
Value menentukan nilai awal untuk kotak masukan
Checked mengatur agar kotak cek dalam keadaan terpilih pada keadaan awal
Dan ini dia atribut yang umum digunakan pada tag <form> :
atribut Fungsi
action menentuksn URL yang akan dijalankan dan menerima semua masukkan dari formulir . Jika action tidak disebutkan, informasi akan dikirim ke URL yang sama dengan Web itu sendiri
method menentukan cara pengiriman informasi, yaitu dengan nilai GET dan POST. GET digunakan jika informasi yang dikirim menjadi saru dengan URL, sedangkan POST digunakan jika informasi dikirim secara terpisah dengan URL.
Langsung aja, ini dia macam-macam tipe masukan yang ada dalam atribut type :
1. Text Fields
Tipe text berfungsi untuk memasukan data seperti nama orang atau alamat
seseorang.
Contoh penulisan :
2. Password Field
Tipe password ini yang disebutkan pada atribut TYPE pada tag <input> akan
membuat setiap karakter yang diketikan oleh pemakai pada field ini disembunyikan
(misalnya dengan diganti tanda * untuk setiap karakter yang diketikkan pemakai).
Contoh penulisan :
Output :
28
Belajar Webdesign
3. Radio Button
Tombol radio ini digunakan dalam bentuk 2 tombol atau lebih yang memungkinkan
pemakai hanya memilih satu dari sekian tombol. Tombol radio diimplementasikan
dengan menggunakan tag <Input> dengan atribut type diberi nilai “radio”. Untuk
membentuk sekelompok radio yang menyatakan sebuah pilihan, atribut name perlu
diisi dengan nama yang sama. Seperti halnya kotak cek, salah satu tombol radio bisa
dilengkapi dengan atribut checked yang menyaakan bahwa tombol itulah yang
menjadi nilai bawaan. Atribut value untuk menentukan nilai terhadap nama data
sekiranya tombol tersebut diklik.
Contoh penulisan :
4. Checkboxes
Tombol ini berguna untuk membuat kotak cek. Kotak cek adalah suatu bentuk
masukan yang memungkinkan pemakai mencentang atau tidak mencentang kotak
tersebut dengan mengklik mouse pada saat penunjuk mouse menunjuk kotak cek.
Contoh penulisan :
5. Submit Button
Tipe submit pada tag <input> akan membentuk tombol submit, yaitu tombol yang
menyebabkan URL yang disebutkan pada Action pada tag <form> akan dimuat.
Contoh penulisan kode dengan tombol submit yang paling sederhana adalah sebagai
berikut :
29
Belajar Webdesign
6. Teks area
Menggunakan tag <textarea>.....</textarea>
Tag ini dibutuhkan untuk memasukan text yang panjang. Beberapa atribut yang
terdapat dalam tag <textarea>
Atribut Fungsi
name menentukan nama textarea
cols menentukan lebar textarea
wrap menentukan teks secara otomatis akan dilipat atau tidak pada are text dengan memberikan nilai Hard,off, atau soft
rows menentukan panjang teksarea
7. Select
Tag <select>.....</select> digunakan untuk menampilkan beberapa pilihan dengan
menggunakan kotak kombo (drop-down). Untuk menampilkan daftar pilihannya
dapat menggunakan tag <OPTION> dan menyertakan atribut VALUE untuk
menyatakan nilai-nilai pilihan.Sedangkan untuk menyatakan nilai default(nilai
bawaan pada saat halaman ditampilkan) dapat menggunakan atribut SELECTED.
Coba ketikan script dibawah ini :
30
Belajar Webdesign
Setelah itu simpan dengan nama aksi.html. Kemudian ketikan script dibawah ini dan
simpan dengan nama data.html (nama file ini disesuaikan dengan nama file yang ada
di bagian action pada form aksi.html).
31
Belajar Webdesign
Hasil Output :
PERTEMUAN 6
IFRAME
Cara Membuat Tag Iframe HTML. Bagi kamu yang belum tahu apa itu fungsi iframe,
iframe berfungsi untuk menampilkan isi dari file/alamat website lainya. yaitu <iframe>.
Tag <iframe> ini mempunyai beberapa atribut, yaitu:
ALIGN = Mengatur posisi iframe. Nilainya left atau right.
WIDTH = Menentukan lebar iframe dalam piksel atau persen.
HEIGHT = Mengatur tinggi iframe dalam piksel atau persen.
FRAMEBORDER = Mengatur pemberian garis pembatas.
SCROLLING = Menentukan apakah iframe dapat mempunyai scroll bar. Nilainya
yes, no, atau auto.
SRC = Alamat sumber yang ditampilkan dalam iframe.
32
Belajar Webdesign
Sintaks untuk menambahkan iframe:
<iframe src="URL"></iframe>
Contoh :
BLOK DENGAN MENGGUNAKAN TAG DIV
The HTML elemen <div> adalah elemen tingkat blok yang dapat digunakan sebagai
wadah untuk mengelompokkan elemen HTML lainnya.
Unsur <div> tidak memiliki arti khusus. Kecuali itu, karena merupakan elemen level
blok, browser akan menampilkan satu baris sebelum dan setelah.
Ketika digunakan bersama-sama dengan CSS, unsur <div> dapat digunakan untuk
mengatur gaya atribut untuk blok besar konten.
Kegunaan lainya dari unsur <div>, adalah untuk tata letak dokumen. Ini menggantikan
"cara lama" mendefinisikan tata letak menggunakan tabel. Menggunakan elemen table
untuk layout itu kadang tidak sesuai dengan yang kita inginkan. Tujuan dari elemen
<table> adalah untuk menampilkan data tabular.
Contoh :
<!DOCTYPE html>
<html>
<body>
<p>This is some text.</p>
<div style="color:#0000FF">
<h3>This is a heading in a div element</h3>
<p>This is some text in a div element.</p>
</div>
<p>This is some text.</p>
</body>
</html>
Hasil Output :
33
Belajar Webdesign
Dasar-dasar CSS
Styling HTML dengan CSS
Kalau kita sudah belajar HTML dan juga dasar-dasarnya, sekarang saatnya kita belajar
CSS. CSS diperkenalkan bersama dengan HTML 4, untuk menyediakan cara yang lebih
baik untuk gaya elemen HTML.
CSS adalah Cascading Style Sheets ( Bahasa lembar Gaya ). CSS merupakan bahasa
yang digunakan untuk mengatur tampilan suatu dokumen yang ditulis dalam bahasa
markup / markup language yaitu yang baru saja kita pelajari html. Jika kita berbicara
dalam konteks web, bisa di artikan secara bebas sebagai : CSS merupakan bahasa yang
digunakan untuk mengatur tampilan / desain suatu halaman HTML.
Keuntungan dengan CSS
Menghemat waktu : Anda bisa membuat CSS kemudian anda bisa menggunakannya
lagi untuk halaman-halaman web yang lain.
Halaman di akses lebih cepat : Ketika anda membuat CSS artinya anda bisa
membuatnya untuk mengatur style/gaya tag-tag di dalam dokumen seluruhnya, hal ini
berarti hanya sedikit kode yang dibutuhkan. Sedikit kode = lebih cepat aksesnya.
Mudah dimodifikasi : Untuk membuat perubahan global anda cukup mengganti di satu
tempat maka akan mempengaruhi semua dokumen HTML.
Superior di banding HTML : CSS memiliki pilihan yang lebih luas dibandingkan dengan
atribut HTML.
Standard Global : Saat ini atribut-atribut dalam HTML telah diperkecil fungsinya dan
penggunaan CSS sangat di anjurkan.
MENGENAL SYNTAX CSS
Aturan CSS memiliki dua bagian utama: pemilih, dan satu atau lebih deklarasi:
Sebuah deklarasi CSS selalu diakhiri dengan titik koma, dan kelompok deklarasi
dikelilingi oleh kurung keriting.
Contoh :
34
Belajar Webdesign
p {color:red;text-align:center;}
ID dan Kelas Selektor pada CSS
Selain menetapkan gaya untuk elemen HTML, CSS memungkinkan kamu buat
menentukan penyeleksi yang disebut "id" dan "class".
ID Selektor :
Pemilih id digunakan untuk menentukan gaya untuk satu, elemen yang unik.Pemilih id
menggunakan atribut id dari elemen HTML, dan didefinisikan dengan "#".Gaya aturan di
bawah ini akan diterapkan pada elemen dengan id = "para1":
Contoh :
Hasil Output :
Kelas Selector
Pemilih kelas digunakan untuk menentukan gaya untuk sekelompok elemen. Berbeda
dengan pemilih id, pemilih kelas yang paling sering digunakan pada beberapa elemen.
Hal ini memungkinkan Anda untuk menetapkan gaya tertentu untuk banyak elemen
HTML dengan kelas yang sama.
Pemilih kelas menggunakan atribut class HTML, dan didefinisikan dengan "."
Dalam contoh di bawah ini, semua elemen HTML dengan class = "center" akan pusat-
blok:
35
Belajar Webdesign
Contoh :
Hasil Output :
MENYISIPKAN CSS
Ada tiga cara untuk menyisipkan sebuah style sheet yaitu :
Style sheet eksternal : menggunakan CSS berkas eksternal
Sebuah style sheet eksternal sangat ideal bila gaya diterapkan pada banyak
halaman. Dengan style sheet eksternal, Anda dapat mengubah tampilan seluruh situs
Web dengan mengubah satu file. Setiap halaman harus link ke style sheet
menggunakan tag <link>. Tag <link> masuk ke dalam bagian <head>:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
Internal style sheet : menggunakan <style> elemen di bagian <head>
36
Belajar Webdesign
Sebuah internal style sheet dapat digunakan jika satu dokumen tunggal memiliki
gaya yang unik. Gaya internal didefinisikan dalam bagian <head> halaman HTML,
dengan menggunakan tag <style>, seperti ini:
<head>
<style>
body {background-color:yellow;}
p {color:blue;}
</style>
</head>
Gaya Inline : menggunakan gaya atribut dalam elemen HTML
Gaya inline dapat digunakan jika gaya yang unik yang akan diterapkan pada satu
kejadian tunggal dari suatu elemen.Untuk menggunakan gaya inline, gunakan atribut
style dalam tag yang relevan. Atribut style dapat berisi properti CSS.Contoh di bawah
ini menunjukkan bagaimana untuk mengubah warna teks dan margin kiri paragraf:
<p style="color:blue;margin-left:20px;">This is a paragraph.</p>
BACKGROUND PADA CSS
Latar belakang properti CSS digunakan untuk menentukan efek
latar belakang suatu elemen.
Properti CSS digunakan untuk efek latar belakang:
background-color
background-image
background-attachment
background-position
background-repeat
Contoh background dengan colour :
37
Belajar Webdesign
Hasil Output :
Mengatur Font dan Teks
Untuk pengaturan font dan teks, css mendukung sejumlah properti seperti font-size,
font-family,text-decoration
Properti font-size
Properti ini digunakan untuk menentukan ukuran font. Ada empat cara untuk
memberikan nilai ke properti ini, yaitu melalui nilai absolut,relatif,ukuran plus
satuan, dan presentase.
Properti font-family
Berguana untuk menentukan nama font. Contoh :
font-family:Arial;
Nama font yang disebutkan dalam properti ini bisa lebih dari satu nama.Dalam hal
ini, antar nama font perlu dipisahkan oleh tanda koma. Contoh :
font-family:Helvetica,Arial;
Maksud dari penulisan tersebut adalah font yang digunakan Helvetica,tetapi jika font
ini tidak ada pada sisi client, maka font Arial yang digunakan.
Mengatur Tepi ( Margin )
Untuk melakukan pengaturan tebal tepi (margin), bisa menggunakan properti bernama
margin. Ada dua cara yang bisa dilakukan.
Pertama, dengan memberikan suatu angka diikuti dengan satuan yang dapat berupa
em,ex,px,pt,pc,in,mm,cm.
Contoh :
margin:18px;
Keterangan : semua tepi diatur dengan ketebalan 18 piksel
Cara kedua, dengan memberikan 4 angka dengan satuan berupa
em,ex,px,pt,pc,in,mm,cm.
Contoh :
margin:20px 30px 40x 50px;
Keterangan :
ketebalan tepi atas 20 piksel
ketebalan tepi kanan 30 piksel
38
Belajar Webdesign
ketebalan tepi bawah 40 piksel
ketebalan tepi kiri 50 piksel
Memberi jarak (Padding)
Untuk memberikan jarak antara tepi dari suatu tag terhadap isi di dalam tag,anda bisa
menggunakan properti padding.
Contoh :
padding:18px;
Keterangan : semua jarak untuk semua sisi diatur dengan ketebalan 18 piksel
Contoh :
padding:20px 30px 40x 50px;
Keterangan :
Jarak dari tepi atas adalah 20 piksel
Jarak dari tepi kanan adalah 30 piksel
Jarak dari tepi bawah adalah 40 piksel
Jarak dari tepi kiri adalah 50 piksel
Link pada CSS
Link dapat ditata dengan properti CSS (misalnya warna, font -family, latar belakang, dll).
Selain itu, link dapat ditata secara berbeda tergantung pada statenya :
Keempat pengelompokan link adalah:
a: link - normal, yang belum dikunjungi
a: visited - link pengguna telah dikunjungi
a: hover - link ketika mouse pengguna di atasnya
a: active - link saat itu diklik.
39
Belajar Webdesign
Contoh :
Untuk mengetahui hasil outputnya, coba ketikan script diatas dan coba jalankan pada
browser kamu.
PERTEMUAN 7
Layout Sederhana
LAYOUT
Dalam dunia desain, Layout berbicara mengenai bagaimana penataan elemen-elemen
dalam sebuah halaman dengan benar. Sebuah dokumen web umumnya memiliki
elemen-elemen sebagai berikut:
Elemen Header
Seperti namanya, merupakan elemen yang berisi judul dan penjelasan lain
dokumen. Biasanya elemen ini diisikan dengan logo website, menu-menu global
(seperti login dan logout), maupun nama halaman yang sedang ditampilkan.
Elemen Navigation
Elemen navigasi, yang memberikan akses navigasi ke halaman-halaman lain
dalam web.
Elemen Sidebar
Elemen pendukung konten, dapat berupa pembantu navigasi konten, ataupun
berbagai hal lain seperti daftar konten lain, iklan, atau menu tambahan. Sidebar
40
Belajar Webdesign
dapat berada di kiri atau kanan konten, atau bahkan di kiri dan kanan konten,
sesuai dengan kreatifitas perancangnya.
Elemen Konten
Isi utama dari dokumen web. Pengguna biasanya datang ke web untuk melihat
teks yang berada pada bagian ini.
Elemen Footer
Bagian penutup dari website, yang dapat saja berisi informasi lain tentang
website, seperti lisensi pengunaan, sitemap, ataupun link ke website lain.
Layout sangat penting untuk membuat website terlihat rapi dan bagus. Ibarat rumah,
website adalah halamanya. Perkembangan website yang sangat pesat membuat
perkembangan layout pada websitepun semakin beragam.
Latihan 1 :
1. Untuk berlatih membuat layout sederhana, coba ketikan script dibawah ini pada editor
kamu, setelah itu buka pada browser.
<html>
<style type="text/css">
ul
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden; }
li
{
float:left; }
hi
{
font-size::30px;
color:#ffffff;
41
Belajar Webdesign
}
table
{
border:1px solid black;
}
td
{
text-align:left;
background-color:#9999ff;
}
td.atas
{
text-align:center;
background-position:center;
background-image:url('');
}
a:link,a:visited
{
display:block;
width:120px;
font-weight:bold;
color:#ffffff;
background-color:#9966ff;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
a:hover,a:active
{
background-color:#990099;
}
</style>
<head>
<center><table width="954">
<tr><td width="798" class="atas"><h1>MY WEBSITE</h1></td></tr>
<tr><td>
<ul>
<li><a href="home.html">Home</a></li>
<li><a href="profil.html">Profil</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="sitemap.html">Site Map</a></li>
</ul>
</tr></td>
<tr>
<td height="300" ><table width="946" border="2" cellspacing="0"
cellpadding="0" bordercolor="#FFFFFF">
<tr>
<td width="250" height="300" valign="top" bordercolor="#FFFFFF">SIDE
BAR</td>
<td valign="top" bordercolor="#FFFFFF">DISINI ADALAH ISI CONTENT</td>
42
Belajar Webdesign
</tr>
</table></td>
</tr>
<tr>
<td>Copyright by Belajarwebdesign @2014<br></td></tr>
</table></center>
</head>
</html>
Latihan 2 :
1. Buatlah sebuah layout seperti diatas, modifikasi sebaik mungkin, dengan
menambahkan link,multimedia, teks sebagai isi content, formulir dan lain
sebagainya. Kreasikan kreatifitasmu !