belajar webdesign

BELAJAR WEBDESIGN Disusun oleh : SHINTA SAPTARINI

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 

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>



</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



</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>


</tr>

<tr>

<td align="center">Andi</td>



</tr>

<tr>

<td align="center">Siska</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 !