Post on 12-Mar-2023
Soal Latihan Adobe Dreamweaver CS6 dan HTML Wearnes Education Center
Informatika dan Teknik Komputer 2
CHAPTER 1 MENGENAL <TAG> HTML
STRUCTURE HTML TEXT ( PARAGRAF, BOLD, ITALIC,UNDERLINE, BREAK , LINE ) SEMANTIC MARKUP
Soal Latihan Adobe Dreamweaver CS6 dan HTML Wearnes Education Center
HTML adalah suatu bahasa yang dikenali oleh web browser untuk menampilkan informasi dengan lebih menarik dibandingkan dengan tulisan teks biasa ( plain text) .
1. Struktur HTML HTML mempunyai aturan dan struktur tertentu untuk menuliskan perintah yang biasa dinamakan <tag> . Aturan tersebut diawali dengan lambang <tag> dan dbiasanya akan diakhiri dengan lambang </tag>. Berikut gambaran setruktur HTML :
<html>
<head>
<title>Judul Latihan 1</title>
</head>
<body>
Disini content yang tampil di browser
</body>
</html>
Sekarang ketik kode diatas ke dalam sebuah notepad kemudian simpan dengan nama latih1.html. Kemudian Jalankan di browser .
Kemudian silahkan anda coba untuk mengganti judul dan isinya.
Informatika dan Teknik Komputer 3
Soal Latihan Adobe Dreamweaver CS6 dan HTML Wearnes Education Center
2. Mengenal Tag Tag adalah teks khusus (markup) berupa dua karakter "<" dan ">", sebagai contoh <body> adalah tag dengan nama body. Secara umum tag ditulis secara berpasangan, yang terdiri atas tag pembuka dan tag penutup (ditambahkan karakter "/" setelah karakter "<"), sebagai contoh <body> ini adalah tag pembuka isi dokumen HTML, dan </body> ini adalah tag penutup isi dokumen HTML. Sekarang praktekkan beberapa tag berikut ini : a. Tag <p> ( paragraph)
Tag ini digunakan untuk membuat paragraph di HTML
<p>Ini adalah paragraph pertama. Anda bisa mengetik teks
di dalam paragraph pertama ini sesuai dengan keinginan anda
</p>
<p>Ini adalah paragraph kedua . Merupakan paragraph
lanjutan dari paragraph sebelumnya . Anda juga bisa
melanjutkan untuk membuat paragraph selanjutnya</p>
HTML
HASIL
b. Tag Heading <h1>,<h2>,<h3>,<h4>,<h5>,<h6> Heading biasanya digunakan untuk membuat sebuah judul . Tag Heading dimulai dari 1 – 6 ( <h1> s/d <h6>). <h1> merupakan tingkatan heading yang paling besar dan <h6> merupakan tingkatan heading paling kecil.
Informatika dan Teknik Komputer 4
Soal Latihan Adobe Dreamweaver CS6 dan HTML Wearnes Education Center
<h1>Ini Heading 1 </h1>
<h2>Ini Heading 2 </h2>
<h3>Ini Heading 3 </h3>
<h4>Ini Heading 4 </h4>
<h5>Ini Heading 5 </h5>
<h6>Ini Heading 6 </h6>
HTML
HASIL
c. Tag <b> (bold), <i> (italic), <u> (underline) Tag <b> digunakan untuk membuat tulisan tebal, Tag <i> digunakan untuk membuat tulisan miring . Tag <u> digunakan untuk member garis bawah tulisan.
<p>Ini adalah contoh paragraph dengan kata
<b>Tebal</b></p>
<p>Ini adalah contoh paragraph dengan <i>kata
Miring</i></p>
<p>Ini adalah contoh paragraph dengan kata <u>Garis
bawah</u></p>
HTML
Informatika dan Teknik Komputer 5
Soal Latihan Adobe Dreamweaver CS6 dan HTML Wearnes Education Center
d. Tag <br/> dan <hr/> Tag <br/> digunakan untuk membuat baris baru (new line) Tag <hr/> digunakan untuk mebuat garis
HASIL
<p>Ini adalah kalimat di atas <br/> Sedangkan ini yang
ada dibawahnya tag break</p>
<p>Break<br/> adalah tag yang digunakan untuk membuat
baris baru</p>
HTML
HASIL
<p>Informatika dan Teknik Komputer</p>
<hr/>
<p>adalah jurusan yang mempelajari bahasa pemrograman</p>
HTML
Informatika dan Teknik Komputer 6
Soal LatWearnes
Inform
tihan Adobs Educati
matika da
be Dreamwon Center
an Teknik
weaver CS6r
k Kompute
6 dan HTM
er
L
HASIL
7
Soal Latihan Adobe Dreamweaver CS6 dan HTML Wearnes Education Center
Informatika dan Teknik Komputer 8
CHAPTER 2 MENGENAL ATTRIBUTE <TAG>
LINK ( ANCHOR ) LIST (NUMBER LIST , BULLET LIST, DEFINITION LIST) IMAGE IFRAME
Soal Latihan Adobe Dreamweaver CS6 dan HTML Wearnes Education Center
1. Mengenal Atribbute Tag HTML HTML Attributes atau atribut HTML adalah suatu informasi tambahan yang bisa disertakan pada suatu elemen HTML. Suatu elemen dapat memiliki atribut. Atribut ini memberikan informasi tambahan tentang elemen yang bersangkutan. Atribut selalu digunakan pada awal tag / start tag (<tag> bukan di </tag>). Cara mendefinisikan atribut dengan memberikan informasi name dan value dari suatu elemen, seperti name=”value”. Perhatikan gambar di bawah ini :
Dari Gambar di atas , tag <p> memiliki Attribute Name adalah lang dan Attribute Value adalah en‐us. Sekarang buatlah sebuah file html dengan nama Latih2.html dan praktekkan tag‐tag berikut ini : a. Tag <a>
Tag ini digunakan untuk membuat link di dalam html.
<a href=”http://www.google.com”> Google </a>
HTML
HASIL
Informatika dan Teknik Komputer 9
Soal Latihan Adobe Dreamweaver CS6 dan HTML Wearnes Education Center
Informatika dan Teknik Komputer 10
Keterangan : Jadi Attribut yang di gunakan tag <a> adalah href . Attribut href adalah alamat (halaman) yang akan dituju . Sedangkan kata google sebelum </a> adalah judul tag <a>. Ketika anda klik Google maka otomatis akan menuju ke alamat www.google.com . Sekarang tambahkan atribut target=”_blank” dan title=”GOOGLE”. di tag <a> yang tadi anda buat . Simpan dan jalankan kembali, apa yang terjadi ?. Sekarang buatlah sebuah link yang digunakan untuk mengirim email :
Kemudian silahkan anda jalankan . Jadi kalau link biasa akan membuka ( halaman / file html ) lain , sedangkan untuk mailto , ketika anda klik secara default akan membuka aplikasi MS. OUTLOOK
<a href=”mailto:wecmail@wearneseducation.com”> Contact Us
</a>
HTML
HASIL
Soal Latihan Adobe Dreamweaver CS6 dan HTML Wearnes Education Center
<h1 id="top">Top Movies 2013</h1>
<a href="#witch_hunters">Hansel and Gretel: Witch
Hunters</a><br/>
<a href="#die_hard">A Good Day to Die Hard</a><br/>
<a href="#iron_man">Iron Man 3</a><br/>
<a href="#fast">Fast anad Furious 6</a><br/>
<h2 id="witch_hunters">Hansel and Gretel: Witch Hunters</h2>
<p>Film ini mengisahkan tentang dua bersaudara dari negeri
dongeng, yaitu Hansel dan Gretel yang bekerja dalam satu tim
yang melacak serta memburu keberadaan penyihir-penyihir di
dunia.</p>
<h2 id="die_hard">A Good Day to Die Hard</h2>
<p>Bruce Willis akan kembali berperan sebagai John Mc Clane.
Tentu saja dengan misi baru, yakni ditugaskan untuk meringkus
penjahat kelas kakap di daerah Moscow, Rusia. </p>
<h2 id="iron_man">Iron Man 3</h2>
<p>Iron Man akan tampil lebih spektakuler. Dalam cerita film
terbaik ini, Tony Stark akan pergi ke negeri Tirai Bambu yaitu
Cina, yang kemudian bertemu musuh utamanya yang paling sulit,
yakni Mandarin.</p>
<h2 id="fast">Fast anad Furious 6</h2>
<p>Alur cerita untuk film terbaik Fast and Furious 6 masih belum
diketahui dengan jelas. Tapi Letty yang diperankan oleh Michelle
Rodriguez, akan kembali hadir dalam film ini. Dia akan bergabung
kembali dengan Dom (Vin Diesel) dan Bryan (Paul Walker). </p>
<a href="#top">Kembali Ke atas</a>
HTML
Buatlah satu file html dan isi kode di atas . Kemudian simpan dengan nama topmovie.html. Kemudian jalankan di browser (kecilkan ukuran browser sehingga muncul vertical scrollbar). Contoh diatas adalah link yang dapat menuju ke bagian tertentu dalam sebuah halaman html. Contoh penulisannya adalah <a href=”#fast”> , jadi ketika di klik akan menuju ke bagian <h2 id="fast">Fast anad Furious 6</h2>.
Informatika dan Teknik Komputer 11
Soal Latihan Adobe Dreamweaver CS6 dan HTML Wearnes Education Center
b. Membuat list dengan tag <ul> atau <ol> Di dalam html kita bias memebuat sebuah daftar / list dengan menggunakan tag <ul> ( Unordered Lists / List tidak berurutan ) dan <ol> ( Ordered Lists / List yang berurutan). Jadi tag <ul> atau <ol> merupakan tag untuk mengawali list , sedangkan <li> adalah item / listnya. Silahkan anda ganti type pada Unordered List (<ul>)dengan disc,circle,square. Dan Ordered List (<ol>) dengan A, a , i , 01.
<h2>Unordered Lists</h2>
<ul type="disc">
<li>Kabapexim</li>
<li>Inforkom</li>|
<li>Kasima-PR</li>
<li>Degrakom</li>
</ul>
<h2>Ordered Lists</h2>
<ol type="1">
<li>Kabapexim</li>
<li>Inforkom</li>|
<li>Kasima-PR</li>
<li>Degrakom</li>
</ol>
HTML
HASIL
Informatika dan Teknik Komputer 12
Soal LatWearnes
Inform
c. MJg
tihan Adobs Educati
matika da
MenampilkJika anda ingunakan ta
Gunakan a
<img src
<img src
be Dreamwon Center
an Teknik
kan gambangin menaag <img>.
atribut wid
c="images/
c="images/
weaver CS6r
k Kompute
ar dengan tmpilkan ga
dth dan he
/angsa.jpg
/angsa.jpg
6 dan HTM
er
tag <img>ambar ke d
Jadi bhtml beraddi sam
ight untuk
pg" />
pg" width=
L
dalam hala
bisa kita lihdi atas bahda di foldermping).
mengatur
=”300” hei
aman html
hat bahwa hwa url dar images (L
r ukuran ga
H
ight=”200
H
anda silah
src pada tari angsa.jpLihat gamb
ambar.
HTML
0” />
HTML
13
hkan
ag pg bar
Soal Latihan Adobe Dreamweaver CS6 dan HTML Wearnes Education Center
Cobalah penggunaan Gambar pada posisi text :
<img src="images/doraemon.png" />
<p>Doraemon adalah kartun anak anak yang sangat terkenal
di jamannya . Sangat lucu penuh imajinasi dengan alat-
alat yang sering membantu nobita.</p>
<hr/>
<p><img src="images/doraemon.png" />Doraemon adalah
kartun anak anak yang sangat terkenal di ja mannya .
Sangat lucu penuh imajinasi dengan alat-alat yang sering
membantu nobita.</p>
<hr />
<p>Doraemon adalah kartun anak anak <img
src="images/doraemon.png" />yang sangat terkenal di ja
mannya . Sangat lucu penuh imajinasi dengan alat-alat
yang sering membantu nobita.</p>
HTML
HASIL
Informatika dan Teknik Komputer 14
Soal Latihan Adobe Dreamweaver CS6 dan HTML Wearnes Education Center
Contoh penggunaan attribute align di images. Kemudian silahkan coba anda ganti attribute align dengan middle,top, bottom. Perhatikan perubahaannya.
<img src="images/doraemon.png" width="100" height="100"
align="left" />
<p>Doraemon adalah kartun anak anak yang sangat terkenal
di jamannya . Sangat lucu penuh imajinasi dengan alat-
alat yang sering membantu nobita. Setiap hari selalu
bertengkar karena nobita selalu meminta alat-alat yang
tidak sesuai manfaatnya</p>
<br/><hr/>
<p><img src="images/doraemon.png" width="100"
height="100" align="right" />Doraemon adalah kartun anak
anak yang sangat terkenal di ja mannya . Sangat lucu
penuh imajinasi dengan alat-alat yang sering membantu
nobita.</p>
HTML
HASIL
Informatika dan Teknik Komputer 15
Soal Latihan Adobe Dreamweaver CS6 dan HTML Wearnes Education Center
Memanfaatkan gambar di dalam link <a>.
HTML
Contoh lain :
<a href="index.html"><img src="images/home.png" /></a>
<a href="about.html"><img src="images/about.png" /></a>
<a href="products.html"><img src="images/products.png" /></a>
<a href="news.html"><img src="images/news.png" /></a>
<a href="contact.html"><img src="images/contact.png" /></a>
HTML
HTML
HASIL
<a href="buy.html"><img src="images/buy.png" /></a>
<br/><br/>
<a href="mailto:wecmail@wearneseducation.com"><img
src="images/email.gif" /></a><br/><br/>
<a href="pendaftaran.html"><img src="images/reg.png" />
HTML
Informatika dan Teknik Komputer 16
Soal Latihan Adobe Dreamweaver CS6 dan HTML Wearnes Education Center
d. Tag Iframe Tag <iframe> digunakan untuk menampilkan halaman web lain ke dalam sebuah page tertentu. Sebagai contoh penggunaan <iframe> adalah chatbox, youtube, google map, dll.
Buatlah sebuah file html yang mana nanti anda isi dengan tag <iframe>.
<iframe src="http://wearneseducation.com/" width="700"
height="400"></iframe>
HTML
HASIL
Informatika dan Teknik Komputer 17
Soal Latihan Adobe Dreamweaver CS6 dan HTML Wearnes Education Center
Menampilkan video youtube di halaman html.
Embed Google Maps
HASIL
<iframe width="425"
height="350" frameborder="0"
scrolling="no" marginheight="0"
marginwidth="0"
src="https://maps.google.com/ma
ps?f=q&source=s_q&hl=en
&geocode=+&q=wearnesmad
iun&ie=UTF8&hq=wearnes+
madiun&hnear=&ll=-
7.627108,111.532747&spn=0.8
2079,1.344452&t=m&z=10&
amp;iwloc=A&cid=14390588403
963132410&output=embed">
</iframe>
HTML
<iframe width="560" height="315"
src=”//www.youtube.com/embed/xYF8rZ0UDpI" frameborder="0"
allowfullscreen></iframe>
HTML
Informatika dan Teknik Komputer 18
Soal Latihan Adobe Dreamweaver CS6 dan HTML Wearnes Education Center
Informatika dan Teknik Komputer 19
MENGENAL FORM DAN TABLE
TABLE (Membuat Tampilan table dalam html ) FORM (Menggenal semua bagian‐bagian form )
Soal Latihan Adobe Dreamweaver CS6 dan HTML Wearnes Education Center
Buatlah sebuah file html baru !
Di dalam html kita juga bias membuat table . Cobalah beberapa kode html di bawah ini .
HTML <table>
<tr>
<td>Nim</td>
<td>Nama</td>
<td>Nilai</td>
</tr>
<tr>
<td>123</td>
<td>Sutopo</td>
<td>80</td>
</tr>
<tr>
<td>124</td>
<td>Paijo</td>
<td>90</td>
</tr>
</table>
HASIL
Keterangan :<table> : Tag pembuka untuk membuat table <tr> : Tag untuk membuat baris<td> : Tag untuk membuat kolom
Informatika dan Teknik Komputer 20
Soal Latihan Adobe Dreamweaver CS6 dan HTML Wearnes Education Center
Kemudian mari kita coba tambahkan beberapa attribute (width dan border )
HTML <table border=”1” width=”500”>
<tr>
<td>Nim</td>
<td>Nama</td>
<td>Nilai</td>
</tr>
<tr>
<td>123</td>
<td>Sutopo</td>
<td>80</td>
</tr>
<tr>
<td>124</td>
<td>Paijo</td>
<td>90</td>
</tr>
</table>
HASIL
Coba gunakan beberapa attribute di bawah ini di table anda ! border : Attribute yang digunakan untuk lebar border width : Untuk mengatur panjangnya table (ex: 100,50%) height : Untuk mengatur tinggi table (ex: 100,50%) align : Untuk mengatur posisi table (left,right,center)
cellspacing : Mengatur jarak text dengan batas tepi kolom (cell)rowspacing : Mengatur jarak antar kolom (cell)
Informatika dan Teknik Komputer 21
Soal Latihan Adobe Dreamweaver CS6 dan HTML Wearnes Education Center
Menggunakan attribute di tag tr dan td :
HTML <table width="700" border="1">
<tr>
<td rowspan="2" width="10%">Nim</td>
<td rowspan="2" width="40%">Nama</td>
<td colspan="3">Nilai</td>
</tr>
<tr>
<td width="16.67%">Utama</td>
<td width="16.67%">Ulang</td>
<td width="16.67%">Perbaikan</td>
</tr>
<tr>
<td>123</td>
<td>Sutopo</td>
<td>70</td>
<td>0</td>
<td>80</td>
</tr>
<tr>
<td>124</td>
<td>Paijo</td>
<td>80</td>
<td>0</td>
<td>0</td>
</tr>
</table>
HASIL
Informatika dan Teknik Komputer 22
Soal Latihan Adobe Dreamweaver CS6 dan HTML Wearnes Education Center
Mengenal Form di HTML
Form HTML fungsinya untuk meng‐input atau memasukan data yang akan dikirim dan di proses ke server. Tag <form>...</form> ini paling penting untuk pembuatan web dinamis. Di dalam tag form terdapat satu atau beberapa element seperti "<input>" "<label>" "<select>" "<textarea>" dan lain‐lain. Di sini kita akan membuat beberapa element yang sering dipakai di dalam form.
Input Text Data berupa text
Password Data bentuk password
Nama Depan: <input type="text" name="nama_depan"> Nama Belakang: <input type="text" name="nama_belakang">
CONTOH
CONTOH
Password <input type="password" name="pass">
Checkbox Membuat sebuah pilihan yang bisa dipilih lebih dari satu .
CONTOH
Hobi <input type="checkbox" value="Music"> Music <input type="checkbox" value="Masak"> Masak <input type="checkbox" value="Shoping"> Shoping
Informatika dan Teknik Komputer 23
Soal Latihan Adobe Dreamweaver CS6 dan HTML Wearnes Education Center
Radio Button Membuat sebuah pilihan yang hanya dapat dipilih salah satu. CONTOH
Jenis Kelamin <input type="radio" value="L"> Laki-laki <input type="radio" value="P"> Perempuan
Submit Button Untuk mengirim form yang telah di isi oleh user ke server.
Reset Button untuk menghapus atau membuat form yang telah di isi user kembali ke nilai default. Ada beberapa type input . Namun tidak semua browser support.
CONTOH
<input type="submit" value="Submit">
CONTOH
<input type="reset" value="Reset">
color email date range
datetime search datetime-local tel
month time number url
Informatika dan Teknik Komputer 24
Soal Latihan Adobe Dreamweaver CS6 dan HTML Wearnes Education Center
Label Tag <label> berfungsi untuk mendefinisikan sebuah label untuk element <input>. Untuk attribut "for" dari tag <label> harus sama dengan attribut id element terkait.
CONTOH
<label for="user">Username</label>
<input type="text" name="user" id="user"><br/>
<label for="pass">Password</label>
<input type="text" name="pass" id="pass">
Select Tag <select> digunakan untuk membuat list drop down (combo box) , biasanya di dalam tag tersebut terdapat element <option> sebagai list yang bisa dipilih oleh user.
<select name="agama">
<option value="Islam">Islam</option>
<option value="Kristen">Kristen</option>
<option value="Katolik">Katolik</option>
<option value="Hindu">Hindu</option>
<option value="Budha">Budha</option>
<option value="Kong Hu Cu">Kong Hu Cu</option>
</select>
CONTOH
Informatika dan Teknik Komputer 25
Soal Latihan Adobe Dreamweaver CS6 dan HTML Wearnes Education Center
Textarea Tag <textarea> berfungsi untuk menyimpan atau menampung karakter. Ukuran text area dapat kita tentukan dengan mengubah attribute cols (jumlah kolom) dan rows (jumlah baris).
Membuat Form Login
<textarea cols="50" rows="5">
CONTOH
<form method="POST" action="">
<h2>Login</h2>
<label for="user">Username</label>
<input type="text" name="user" id="user">
<br/>
<label for="user">Password</label>
<input type="text" name="pass" id="pass">
<br/>
<input type="checkbox" value="rm">Remember Me
<br/>
<input type="submit" value="LOG IN">
<input type="reset" value="RESET">
</form>
CONTOH
Informatika dan Teknik Komputer 26
Soal Latihan Adobe Dreamweaver CS6 dan HTML Wearnes Education Center
Informatika dan Teknik Komputer 27
MENGENAL STYLESHEET (CSS)
INTERNAL CSS INLINE CSS EXTERNAL CSS
Soal Latihan Adobe Dreamweaver CS6 dan HTML Wearnes Education Center
Cascading Style Sheet ( CSS ) adalah merupakan aturan untuk mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam. Ada tiga jenis cara dalam penggunaan CSS ini, yaitu: 1. Internal Style Sheet 2. External Style Sheet 3. Inline Style Sheet Sekarang mari kita buat satu persatu .
1. Internal Style Sheet Cara embeding css dengan menulis langsung di dalam file html yang ingin kita atur tampilannya.
<html>
<head>
<title>Belajar CSS</title>
<style>
body { background:black; font-family:Tahoma, Geneva, sans-serif; }
p { color:white; }
h2 { color:green; }
p b { color: yellow; font-size:24px; }
p i { color: pink; font-size: 22px; font-weight:bold; }
</style>
</head>
<body>
<h2>Belajar CSS</h2>
<p>Belajar <b>HTML</b> dengan <i>CSS</i> sangat menyenangkan,
apalagi jika bermain memadiukan beberapa warna</p>
</body>
</html>
HTML
HASIL
Informatika dan Teknik Komputer 28
Soal Latihan Adobe Dreamweaver CS6 dan HTML Wearnes Education Center
2. External Style Sheet CSS yang dibuat dalam file terpisah dengan ekstensi file .css . Untuk memanggilnya menggunakan script html yang disisipkan antara tag head sebagai berikut: Sekarang buatlah file css dengan nama style.css dan file html dengan nama index.html simpan jadi satu di folder yang sama.
<head>
<link rel="stylesheet" type="text/css" href="folder/filecss.css" />
</head>
HTML
body { background:#000; }
h1 { color:#FF0; margin: 0; padding: 0; font-family:Verdana, Geneva,
sans-serif; }
p { color:#F00; font-family:Arial, Helvetica, sans-serif; }
h3 { font-size: 16px;font-family: "Arial Black", Gadget, sans-serif;
color:#9F3; margin: 0; padding:0; }
ul { padding:0; list-style-type:armenian; }
li { padding-left:15px; color: #eee; font-weight:bold; }
CSS
<html>
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1>Rainbow Tech</h1>
<p>Merupakan sebuah perusahaan yang bergerak di bidang pembuatan
software. Software yang ditangani berbasis desktop,web, dan mobile.
</p>
<h3>Software Yang Pernah dikerjakan</h3>
<ul>
<li>Software Perpustakaan</li>
<li>E-Commerce</li>
<li>Akademic Mobile App</li>
</ul>
</body>
</html>
HTML
Informatika dan Teknik Komputer 29
Soal Latihan Adobe Dreamweaver CS6 dan HTML Wearnes Education Center
3. Inline Style Sheet Penulisan script css langsung pada tag html dengan menambahkan attribute style di dalamnya. Contoh:
<p style=”color: red; font-size: 16px;”>Saya belajar dengan
inline css</p>
<a href=”http://google.com” style=”color:
green;”>www.google.com</a>
HTML
Penggunaan selector di css Selain menggunakan element html sebagai selector pada css, kita bisa menggunakan selector yang kita buat sendiri. Selector ini selanjutnya bisa kita pakai pada elemen‐element dalam HTML dengan cara memanggilnya. Ada dua selector yang bisa kita buat yakni id dan class.
1. Selector ID Selector id digunakan untuk menentukan style bagian unik dari html. Unik disini artinya satu nama id hanya bisa digunakan satu kali pada sebuah halaman web. Apabila satu nama ID digunakan lebih dari satu kali pada sebuah halaman, maka style hanya akan berlaku pada id yang pertama saja. Selector ID pada syntax CSS ditandai dengan “#”.
CSS
#p1 { color: #fff; background: #000; }
#nama { font-size: 12px; color: red; }
HTML
<p id=”p1”>Ini adalah paragraph pertama</p>
<div id=”nama”>Ini area nama anda </div>
Informatika dan Teknik Komputer 30
Soal Latihan Adobe Dreamweaver CS6 dan HTML Wearnes Education Center
2. Selector Class Selector class digunakan untuk menentukan style dari sebuah group elemen. Berbeda dengan ID, selector class bisa dipakai berulangkali pada sebuah dokumen web. Artinya sebuah nama class dapat dipanggil beberapa kali pada elemen‐elemen yang ada pada sebuah halaman web. Selector class dituliskan dengan ditandai dengan tanda titik “.” .
.title { color: #fff; background: #000; }
.redbox { color: #fff; border: 1px solid red; background: red; }
CSS
HTML
<h2 class=”title”>Follow Us</h2>
<p class=”redbox”>Ini area merah</p>
Mengenal tag <div> Tag <div> adalah suatu element yang di gunakan untuk mengelompokan suatu element atau tag‐tag html agar menjadi suatu group.
.box { background: black; border: 2px solid red; width: 500px;
height: 200px; }
CSS
<div class=”box”> </div>
HTML
Informatika dan Teknik Komputer 31
Soal Latihan Adobe Dreamweaver CS6 dan HTML Wearnes Education Center
Contoh‐contoh penggunaan css
Merubah properti saat hover (disorot)
a { color: red; }
a:hover { color: black; font-size: 25px; }
.kotak { display: inline-block; background: black; border: 5px
solid red; width: 100px; height: 100px; margin-bottom: 5px; }
.kotak:hover { background: yellow; }
CSS
<a href="#">HOME</a>
<a href="#">ABOUT</a>
<a href="#">NEWS</a>
HTML
<div class="kotak"></div>
<div class="kotak"></div>
<div class="kotak"></div>
Informatika dan Teknik Komputer 32
Soal Latihan Adobe Dreamweaver CS6 dan HTML Wearnes Education Center
Menggunakan background gambar
<div class="gambar">
<h2>Kebun Anggur</h2>
<p>Kita berada dalam sebuah area anggur yang sangat luas.
Dengan warna ungu yang cantik menambah kesegaran kebun anggur
ini</p>
</div>
HTML
.gambar { background: url(anggur.png) no-repeat; background-
position: right bottom; background-color: #ccc; width: 500px;
height: 200px; border: 3px solid blue; }
CSS
Pada css di atas untuk menampilkan gambar menggunakan background: url(anggur.png) no-repeat; . Sedangkan no-repeat berfungsi untuk menampikan gambar sekali saja ( anda juga bias menggunakan repeat-x untuk mengulang gambar secara horizontal dan repeat-y untuk mengulang gambar secara horizontal ).Namun jika anda ingin menggunakan background secara full hilangkan property repeat . Properti background-position: right bottom; gambar tersebut berada diposisi kanan bawah.
Informatika dan Teknik Komputer 33
Soal LatWearnes
Inform
Me
Dari digu
Jadi uli {
untuk
ul
wi
li
5p
<u
</
ul
ul
he
fo
ul
cu
<u
</
tihan Adobs Educati
matika da
emberi css
data contonnakan un
untuk memb{ backgroun
k ul li:ho
l { list-
idth: 100p
i { margi
px; }
ul>
<li>K
<li>I
<li>K
<li>D
/ul>
l { list-s
l li { bac
eight: 45p
ont-family
l li:hover
ursor: poi
ul>
<li>H
<li>A
<li>N
<li>P
<li>C
/ul>
be Dreamwon Center
an Teknik
s tag <ul>
oh diatas fntuk menga
buat menu snd: url(bg
over { back
style-ima
0px; }
n-bottom:
Kabapexim<
Inforkom</
Kasima-PR<
Degrakom</
style-typ
ckground:
px; line-
y: Arial;
r { backg
inter; }
Home</li>
About</li>
News</li>
Product</l
Contact</l
weaver CS6r
k Kompute
fungsi propanti bullet
ederhana digmenu.png);
kground: u
age: url(a
: 2px; bor
</li>
</li>
</li>
</li>
pe: none;
url(bgme
height: 4
; }
ground: ur
}
>
li>
li>
6 dan HTM
er
perti listdari tag <
atas meme; dan ketikaurl(bgmenu
arrow.jpg
rder-bott
}
enu.png);
45px; colo
rl(bgmenu
L
t-style-im
ul> .
rlukan gamba di sorot(ho-hover.png
g); font-f
tom: 1px s
display:
or: #fff;
-hover.pn
mage: url
bar untukover ) menggg);
family: "T
solid navy
: inline-b
; padding:
ng); color
(arrow.jp
k backgroundgunakan
Tahoma";
y; paddin
CSS
HTML
block;
: 0 15px;
r: yellow;
CSS
HTML
34
pg);
d ul
ng:
L
w;
L
Soal Latihan Adobe Dreamweaver CS6 dan HTML Wearnes Education Center
Membuat CSS tag <table>
table { border: 1px solid #00ACE7; border-collapse: collapse; }
thead { background: #0078B2; color: yellow; }
td ,th { border: 1px solid #00ACE7; padding: 5px; }
CSS
HTML <table>
<thead>
<tr>
<th>Nim</th>
<th>Nama</th>
<th>Kelas</th>
<th>Nilai</th>
</tr>
</thead>
<tbody>
<tr>
<td>123</td>
<td>Paijo Idol</td>
<td>IK1</td>
<td>90</td>
</tr>
<tr>
<td>124</td>
<td>Joko Driyono</td>
<td>IK2</td>
<td>85</td>
</tr>
<tr>
<td>125</td>
<td>Siti
Similikiti</td>
<td>KS2</td>
<td>85</td>
</tr>
</tbody>
</table>
Informatika dan Teknik Komputer 35
Soal Latihan Adobe Dreamweaver CS6 dan HTML Wearnes Education Center
Informatika dan Teknik Komputer 36
Membuat CSS pada form
h2 { margin: 0; padding: 0 5px 15px 5px; color: #00B0EA; font-family:
Arial; }
form { background: #333; width: 400px; border: 2px solid #000; padding:
10px; font-family: Tahoma; }
table { color: yellow; }
input,textarea { background: #111; border: 1px solid #555555; padding:
5px; color: #fff; }
input:hover,textarea:hover { border: 1px solid #ccc; }
input[type="submit"],input[type="reset"] { background:
url(bgbutton.gif); height: 30px; color: #fff; padding: 5px 10px; font-
weight: bold; }
CSS
<form action="" method="post">
<h2>Hubungi Kami</h2>
<table>
<tr>
<td><b>Nama</b></td>
<td>:</td>
<td><input type="text" name="nama"></td>
</tr>
<tr>
<td><b>Email</b></td>
<td>:</td>
<td><input type="text" name="email"></td>
</tr>
<tr>
<td valign="top"><b>Pesan</b></td>
<td valign="top">:</td>
<td><textarea name="pesan" cols="30" rows="5"></textarea></td>
</tr>
<tr>
<td></td>
<td></td>
<td>
<input type="submit" value="KIRIM">
<input type="reset" value="RESET">
</td>
</table>
</form>
HTML
Soal Latihan Adobe Dreamweaver CS6 dan HTML Wearnes Education Center
BERKENALAN DENGAN CSS3
• Border Radius .box1 {
display: inline-block;
background: blue; border: 2px solid #000;
width: 120px; height: 120px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.box2 {
display: inline-block;
background: red; border: 2px solid #000;
width: 120px; height: 120px;
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
border-radius: 25px;
}
.box3 {
display: inline-block;
background: green; border: 2px solid #000;
width: 120px; height: 120px;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;
}
CSS
HTML <div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
Informatika dan Teknik Komputer 37
Soal Latihan Adobe Dreamweaver CS6 dan HTML Wearnes Education Center
• Box Shadow
.box { display: inline-block; width: 120px; height: 120px; margin-
right: 20px; margin-bottom:20px ; background: blue; border: 3px solid
red; }
#A {box-shadow: 10px 10px;}
#B {box-shadow: 10px 10px 10px;}
#C {box-shadow: 10px 10px 10px 5px;}
#D {box-shadow: 10px 10px 10px 5px rgba(127,127,127,0.7);}
#E {box-shadow: 10px 10px 10px;border-radius:10px;}
#F {box-shadow: 10px 10px 10px rgba(127,127,127,0.7); border-
radius:10px; }
CSS
<div id="A" class="box"></div>
<div id="B" class="box"></div>
<div id="C" class="box"></div>
<div id="D" class="box"></div>
<div id="E" class="box"></div>
<div id="F" class="box"></div>
HTML
Informatika dan Teknik Komputer 38
Soal Latihan Adobe Dreamweaver CS6 dan HTML Wearnes Education Center
• Gradient Struktur penggunaan gradasi
Untuk lebih mudah silahkan generate css di http://www.colorzilla.com/gradient‐editor/
HTML <div class="gradasi"></div>
.gradasi { width: 128px; height: 128px;
/* FireFox 3.6+ */
background: -moz-linear-gradient(top, #007984 0%, #042528 100%);
/* Chrome,Safari4+ */
background: -webkit-gradient(linear, left top, left bottom, color-
stop(0%,#007984), color-stop(100%,#042528));
/* Chrome10+,Safari5.1+ */
background: -webkit-linear-gradient(top, #007984 0%,#042528 100%);
/* Opera 11.10+ */
background: -o-linear-gradient(top, #007984 0%,#042528 100%);
/* IE10+ */
background: -ms-linear-gradient(top, #007984 0%,#042528 100%);
/* W3C */
background: linear-gradient(to bottom, #007984 0%,#042528 100%);
/* IE6-8 */
filter: progid:DXImageTransform.Microsoft.gradient(
startColorstr='#007984', endColorstr='#042528',GradientType=0 ); }
CSS
Informatika dan Teknik Komputer 39
Soal Latihan Adobe Dreamweaver CS6 dan HTML Wearnes Education Center
• Transition transition: [transition-property] [transition-duration] [transition-timing-function] [transition-delay];
transition Sebuah properti singkat untuk menetapkan sifat transisi empat ke sebuah properti tunggal
transition‐property Menentukan nama properti CSS untuk transisi yang diterapkan ( background, width, height ,all )
transition‐duration Mendefinisikan lamanya transisi yang diperlukan. Default 0 ( 2s,0.5s )
transition‐timing‐function Menjelaskan bagaimana kecepatan selama transisi akan dihitung. Default "ease"
Transition‐delay Mendefinisikan ketika transisi akan mulai. default 0
.xbox {
background: blue; width: 100px; height: 100px;
transition: width 1s ease 0.2s;
/* Chrome , safari */
-webkit-transition: width 1s ease 0.2s;
/* Firefox */
-moz-transition: width 1s ease 0.2s;
/* Opera */
-o-transition: width 1s ease 0.2s;
}
.xbox:hover { width: 500px; }
CSS
HTML <div class="gradasi"></div>
Informatika dan Teknik Komputer 40
Soal Latihan Adobe Dreamweaver CS6 dan HTML Wearnes Education Center
.box {
position: relative;
width: 500px; height: 30px;
border: 1px solid #111;
}
.fill {
background: #00A824;
width: 0; height: 30px;
transition: all 1s ease 0.2s;
-webkit-transition: all 1s ease 0.2s; /* Chrome , safari
-moz-transition: all 1s ease 0.2s; /* Firefox */
-o-transition: all 1s ease 0.2s; /* Opera */
}
.box:hover .fill { width: 500px; }
CSS
<div class="box">
<div class="fill"></div>
</div>
HTML
.img { width: 100px; height: 100px; margin: 15px;
transition: all 0.5s ease-in-out 0.2s;
-webkit-transition: all 0.5s ease-in-out 0.2s;
}
.img:hover { transform: rotate(45deg); }
<img src="image1.jpg" class="img">
<img src="image2.jpg" class="img">
<img src="image3.jpg" class="img">
HTML
CSS
Informatika dan Teknik Komputer 41
Soal Latihan Adobe Dreamweaver CS6 dan HTML Wearnes Education Center
Informatika dan Teknik Komputer 42
PLUGIN JQUERY LIBRARY JQUERY
JQUERY
Soal Latihan Adobe Dreamweaver CS6 dan HTML Wearnes Education Center
JQuery merupakan suatu framework (library) Javascript yang menekankan bagaimana interaksi antara Javascript dan HTML. Contoh penggunaan jquery :
Informatika dan Teknik Komputer 43
Soal Latihan Adobe Dreamweaver CS6 dan HTML Wearnes Education Center
Membuat Validasi Login Sederhana dengan jQuery
Informatika dan Teknik Komputer 44
Soal Latihan Adobe Dreamweaver CS6 dan HTML Wearnes Education Center
Informatika dan Teknik Komputer 45
LAYOUT PENGANTAR LAYOUT MEMBUAT WEB S TATIC
Soal LatWearnes
Inform
Dalam dmenerjemenjadmemilik
Setiap emenamnavigatSekaran
tihan Adobs Educati
matika da
dunia web emahkan hi element ki element‐
element wpung contion, sidebang kita mul
be Dreamwon Center
an Teknik
, sebagai phasil karya –element ‐element s
eb pastinytent yang iar, contentlai bagaima
weaver CS6r
k Kompute
programerseorang wHTML dansebagai be
ya akan mengin ditamt, footer dlana menci
6 dan HTM
er
r kita ditunwebdesignnn CSS. Seburikut:
emerlukan mpilkan. Sell. ptakan seb
L
ntut untuk ner yang muah dokum
sebuah boperti halny
buah layou
mampu masih berumen web um
ox yang maya bagian h
ut.
pa gambarmumnya
ampu header,
46
r
Soal Latihan Adobe Dreamweaver CS6 dan HTML Wearnes Education Center
Setelah anda menyiapkan box (<div>) setiap bagian dari web, selanjutnya kita atur <div> tersebut menggunakan css.
Header
dari css diatas bahwa <div id=”header”> … </div> mempunyai tinggi 100px (height: 100px ) Navigation
dari css diatas bahwa <div id=”nav”> … </div> mempunyai tinggi 45px ( height: 45px ) Sidebar
Untuk sidebar disini menggunakan width: 30% yang mana bertujuan agar ukurannya menyesuaikan lebar dari browser. Kemudian agar dapat berdampingan dengan <div id=”content”>… </div> maka kita menambahkan property float . Sedangkan tinggi yang di atur 400px. Sebenarnya jika ingin tingginya menyesuaikan dengan isi content maka tidak perlu menambahkan height. Content
Sama halnya dengan sidebar, disini untuk bagian content menggunakan width: 70% yang mana lebar (width) tersebut merupakan sisa yang digunakan sidebar sebesar 30% , karena sebuah layout full max 100% . Footer
Dan bagian paling bawah dari layout adalah footer. Disini bagian footer menggunakan property clear : both yang berfungsi untuk menghilangkan pengaruh floating yang berada di element sebelumnya yaitu <div id=”content”> … </div>. Ada tiga jenis clear yaitu both ( semua floating), right (float: right), left (float: left).
Informatika dan Teknik Komputer 47
Soal Latihan Adobe Dreamweaver CS6 dan HTML Wearnes Education Center
Informatika dan Teknik Komputer 48
Soal Latihan Adobe Dreamweaver CS6 dan HTML Wearnes Education Center
MEMBUAT WEB STATIC
Disini kita akan membuat layout website untuk MY COMPANY. Disini kita memerlukan 5 jenis halaman (page) yaitu Homepage, About , News, Portfolio dan Contact. Untuk yang pertama kita buat Homepage (lihat gambar di halaman sebelumnya ) terlebih dahulu .
Buatlah new site baru dan buatlah sebuah file html dengan nama index.html . Kemudian buatlah sebuah file css dengan nama style.css . Kemudian ketik css ini :
Jika anda perhatikan * { box‐sizing : ….} . Disini berfungsi untuk membantu pengaturan layout tertutama bagian padding pada semua tag html. Sedangkan class .wrap { max‐width: 980px; margin: 0 auto; } berfungsi untuk mengatur lebar maximal dari content ( ukuran layout ). Dan .clearfix { clear: both; } untuk menghilangkan pengaruh float:right ataupun float:left .
CSS
Kemudian embed file style.css ke index.html anda.
Informatika dan Teknik Komputer 49
Soal Latihan Adobe Dreamweaver CS6 dan HTML Wearnes Education Center
Membuat bagian Header
Disini kita akan membuat div untuk header <div id=”header”> … </div> membagi dua kolom yang pertama div dengan class .logo dan div dengan class .h_right .
Kemudian tambahkan css untuk area header di file style.css
Informatika dan Teknik Komputer 50
Soal Latihan Adobe Dreamweaver CS6 dan HTML Wearnes Education Center
Membuat bagian menu
Tambahkan <div id=”menu”> … </div> di bawah <div id=”header”> … </div>.
Kemudian buatlah css untuk menu tersebut.
Element yang digunakan adalah tag <ul> … </ul> dengan class nav‐menu dimana list (<li>) ditampilkan dalam satu baris bukan ke bawah dengan property css display:inline‐block;
Informatika dan Teknik Komputer 51
Soal Latihan Adobe Dreamweaver CS6 dan HTML Wearnes Education Center
Membuat bagian slider
Tambahkan <div id=”slider”> … </div> di bawah dari <div id=”menu”> … </div>
Kemudian buat css untuk bagian slider
Disini kita masih menggunakan satu gambar terlebih dahulu . Nanti kita bisa mengcostum kembali dengan menambahkan plugin jquery (flexslider, cycle, nivoslider dll) , agar slider tersebut berjalan seperti slideshow. Konten yang digunakan bisa berupa banner atau yang lainnya
Informatika dan Teknik Komputer 52
Soal Latihan Adobe Dreamweaver CS6 dan HTML Wearnes Education Center
Membuat bagian service
Buatlah <div id=”service”> … </div> di bawah <div id=”slider”> … </div>
Tambahkan css untuk bagian service
Disini kita akan membuat 3 buah box service yaitu desktop, website, mobile. Tambahkan 2 box service dengan kode di bawah ini . Kemudian anda ganti judulnya menjadi Website, Mobile beserta gambarnya.
Informatika dan Teknik Komputer 53
Soal Latihan Adobe Dreamweaver CS6 dan HTML Wearnes Education Center
Membuat bagian main content homepage
Pertama kali tambahkan <div id=”main‐content”> … </div> :
Kemudian tambahkan css berikut :
Informatika dan Teknik Komputer 54
Soal Latihan Adobe Dreamweaver CS6 dan HTML Wearnes Education Center
Selanjutnya kita tambahkan about di dalam <div class=”main‐content”> … </div>
Kemudian tambahkan css untuk <div class=”about”> …… </div> dibawah
CSS class about :
Informatika dan Teknik Komputer 55
Soal Latihan Adobe Dreamweaver CS6 dan HTML Wearnes Education Center
Selanjutnya kita akan membuat box untuk widget di <div class=”sidebar”> … </div> . Kita tambahkan dua widget lastest news dan testimonial . Setiap widget akan di bungkus oleh <div class=”widget”> contentnya </div> .Kemudian tambahkan css untuk widget berikut di style.css (di bawah .sidebar { … } ) :
Buatlah widget untuk news di dalam <div class=”sidebar”> …. </div> .
Kemudian tambahkan css untuk widget news .
Informatika dan Teknik Komputer 56
Soal Latihan Adobe Dreamweaver CS6 dan HTML Wearnes Education Center
Buat widget lagi untuk testimonial .
Tambahkan css untuk testimonial .
Membuat bagian client list
Disini akan menampilkan client dari MY COMPANY. Buat <div id=”client”> … </div> di bawah <div id=”content”> …. </div> .
Kemudian tambahkan css :
Informatika dan Teknik Komputer 57
Soal Latihan Adobe Dreamweaver CS6 dan HTML Wearnes Education Center
Membuat bagian footer
Bagian footer adalah bagian paling akhir dari proses ini. Buatlah <div id=”footer”> … </div>. di bawah <div id=”client”> … </div> .
Kemudian css :
Pastikan anda melakukan step by step agar tidak terjadi kesalahan. Setiap selesai membuat bagian per bagian , silahkan preview dengan firefox ataupun browser yang lain.
Anda bisa mengembangkan lagi untuk masalah gambar dan warna.
Anda juga bisa menambahkan lebih dari 2 widget yang di contohkan . Dan pastikan setiap membuat widget gunakan struktur ini:
Informatika dan Teknik Komputer 58
Soal Latihan Adobe Dreamweaver CS6 dan HTML Wearnes Education Center
Informatika dan Teknik Komputer 59
LAYOUT BOOTSTRAP RESPONSIVE WEB LAYOUT
Soal Latihan Adobe Dreamweaver CS6 dan HTML Wearnes Education Center
Bootstrap adalah platform baru yang dikembangkan tim twitter. Pertama kali muncul pada ajang hackweek dan kini sudah mulai penyempurnaan. Platform ini hanya menggunakan sedikit coding CSS dan JavaScript namun tetap bisa membuat website yang powerfull mengikuti perkembangan browser. Website yang menggunakan bootstrap akan menjadi website yang fleksibel, nyaman dan tentu saja cepat. Bootstrap sekarang sudah sampai v3. Untuk mendapatkan bootstrap silahkan masuk ke http://getbootstrap.com/getting‐started.
Setelah selesai download extract file bootstrap‐3.1.1‐dist.zip.
Gambar diatas meruapakan gambaran isi dari file bootstrap yang anda download tadi. Ada 3 folder yang dihasilkan yaitu css, js, fonts. Sedangkan file yang sering digunakan adalah bootstrap.css atau bootstrap.min.css dan bootstrap.js atau bootstrap.min.js.
Untuk contoh penggunaan component bootstrap bisa langsung masuk ke situs resmi http://getbootstrap.com.
Atau anda bisa menggunakan layout generator untuk bootstrap di http://www.layoutit.com
Informatika dan Teknik Komputer 60
Soal Latihan Adobe Dreamweaver CS6 dan HTML Wearnes Education Center
Sekarang kita akan membuat tampilan website MY COMPANY yang telah anda buat menjadi tampilan responsive.
Buatlah folder assets di directory web yang anda buat . Kemudian copykan semua folder (css, js dan fonts) yang telah anda extract dari file bootstrap‐3.1.1‐dist.zip.
Kemudian buka file index.html , embed file css bootstrap.css yang ada di folder assets/css ke index.html. Masukkan di bawah tag <title> … </title> . Dan tambahkan <meta name=”viewport” content=’width=device‐width, initial‐scale=1”> untuk mengatur ukuran web anda agar flexible menyesuaikan ukuran layar browser.
Informatika dan Teknik Komputer 61
Soal Latihan Adobe Dreamweaver CS6 dan HTML Wearnes Education Center
Dari bootstrap ini kita mengambil class dari grid system yang ada untuk mengatur lebar tiap bagian yang akan kita buat responsive. Di dalam Bootstrap v3 ini dipaparkan 4 macam class yang akan mendefinisikan Grid didalam HTML‐mu. Contoh class dalam Bootstrap 3
col‐xs‐* xs = extra small = terkecil
col‐sm‐* sm = small = kecil
col‐md‐* md = medium = sedang
col‐lg‐* lg = large = besar
Tanda * Adalah level grid ( 1‐12) . Contoh : col‐xs‐1 , col‐md‐6, col‐md‐8
Misalkan saya akan membagi bagian content menjadi dua kolom:
Informatika dan Teknik Komputer 62
Soal Latihan Adobe Dreamweaver CS6 dan HTML Wearnes Education Center
Ikuti langkah berikut : Header
Hapus property width dan float di css class .logo dan .h_right di style.css
Kemudian tambahkan col‐md‐4 di <div class=”logo”> … </div> .
Tambahkan juga col‐md‐8 di <div class=”h_right”> …. </div> .
Service
Hapus property width dan float di css class .serv‐item di style.css .
Informatika dan Teknik Komputer 63
Soal Latihan Adobe Dreamweaver CS6 dan HTML Wearnes Education Center
Tambahkan col‐xs‐12 col‐sm‐4 col‐md‐4 di <div class=”serv‐item”> … </div>
Main Content & Sidebar
Hapus property width dan float di css class .sidebar dan .main‐content di style.css
Informatika dan Teknik Komputer 64
Soal Latihan Adobe Dreamweaver CS6 dan HTML Wearnes Education Center
Kemudian tambahkan col‐md‐4 ke <div class=”sidebar”> … </div> dan col‐md‐8 ke <div class=”main‐content”> … </div> . Sidebar
main‐content
Kemudian coba jalankan di firefox . Kemudian coba tekan tombol CTRL +SHIFT + M . Untuk melihat ke tampilan design responsive. Kemudian tambahkan css berikut ke file style.css. Untuk menyesuaikan beberapa tampilan header dan footer . Disini kita akan menggunakan media query untuk menyesuaikan tampilan tersebut. Jadi ketika ukuran layar max‐width : 1000px (0‐1000) maka akan menerapkan css yang ada di dalamnya.
Informatika dan Teknik Komputer 65
Soal Latihan Adobe Dreamweaver CS6 dan HTML Wearnes Education Center
Informatika dan Teknik Komputer 66
Mengatur menu Mungkin ketika kita lihat dalam tampilan responsive layout (320px) / (CTRL
+SHIFT +M) menu tampak tidak beraturan. Agar tampilan menu bisa responsive juga maka kitamemerlukan plugin jquery yaitu slicknav menu
icknav menu bisa di download di
ownload slicknav menu kemudian extract file SlickNav‐master.zip kemudian
emudian embed kedua file tersebut di index.html (<head> ….. </head>).
Slhttp://slicknav.com/
Dcopy dua file jquery.slicknav.js dan slicknav.css ke folder assests dan buatkan folder dengan nama slicknav .
K
Soal Latihan Adobe Dreamweaver CS6 dan HTML Wearnes Education Center
Informatika dan Teknik Komputer 67
Karena slicknav merupakan plugin jquery maka kita perlu library dari jquery agar slicknav dapat berjalan. Download jquery di http://jquery.com/download/
Kemudian simpan dengan nama jquery.js dan masukkan ke dalam folder assets/js . Embed file jquery.js ke index.html ( <head> … </head> ) .
Tambahkan <div id=”mobilemenu”></div> di bawah <ul class=”nav‐menu”> … </ul>.
Class pull‐right merupakan class untuk mengatur <div id=”mobilemenu”> … </div> agar float:right , class ini merupakan css dari bootstrap .
Soal Latihan Adobe Dreamweaver CS6 dan HTML Wearnes Education Center
Informatika dan Teknik Komputer 68
Tambahkan script berikut di atas tag </head>
Untuk menyesuaikan tampilan menu tambahkan css berikut di style.css
an max‐width:800px . Gunakan css berikut ini :
Jalankan kembali pada firefox kemudian CTRL + SHIFT +M.
kemudian jika ingin slicknav menu agar muncul pada tampil
Soal Latihan Adobe Dreamweaver CS6 dan HTML Wearnes Education Center
Informatika dan Teknik Komputer 69
Membuat Slider dengan nivo slider
Untuk mempercantik tampilan website anda kita akan menambahkan slider di
tudios.com/plugins/nivo‐slider/
Download nivoslider dan extract . Kemudian copy folder themes , file jquery.nivo.slider.js , nivo‐slider.css ke dalam folder assets dan buatkan folder dengan nama nivoslider .
bagian <div id=”slider”> … </div> dengan plugin jquery novislider . Download nivoslider di http://dev7s
Download slider nivo
Soal LatWearnes
Inform
Kemudislicknav
Ganti :
Dengan
Anda bisrc=”im
Kemudi
tihan Adobs Educati
matika da
ian embedv :
n
isa menammages/slide
ian agar sli
be Dreamwon Center
an Teknik
ke dalam
mbahkan lee1.jpg”> ).
ider anda b
weaver CS6r
k Kompute
file index.
bih banyak
berjalan ta
6 dan HTM
er
.html di ba
k lagi gamb
ambahkan
Effec
slicesliceslice, slidboxRboxRboxR
L
awah embe
bar (<img
kode berik
ct :
eDown , sleUpLeft , seUpDownLdeInRight ,Random , RainReverRainGrowR
ed css dan
kut :
iceDownLesliceUpDowLeft, fold , f, slideInLeboxRain ,
rse , boxRaReverse
jquery
eft , sliceUwn , fade , randft ,
ainGrow ,
70
Up ,
dom
Soal Latihan Adobe Dreamweaver CS6 dan HTML Wearnes Education Center
Informatika dan Teknik Komputer 71
LAYOUT
NEWS CONTACT
MELENGKAPI PAGE TAMBAHAN ABOUT PAGE PORTFOLIO
Soal Latihan Adobe Dreamweaver CS6 dan HTML Wearnes Education Center
Informatika dan Teknik Komputer 72
Membuat interior page ( About Page)
Pada dasarnya untuk page pendukung memiliki struktur yang sama dengan header homepage(index.html) . Sebagai contoh about page :
Copy tag html di index.html mulai dari <!DOCTYPE html PUBLIC "‐//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1‐transitional.dtd"> sampai <div id=”menu”> …… </div> dan <div id=”footer”> sampai </html> ke dalam file baru about.html .
CSS Default :
Soal Latihan Adobe Dreamweaver CS6 dan HTML Wearnes Education Center
Informatika dan Teknik Komputer 73
ABOUT PAGE (about.html)
HTML:
Tambahkan lebih banyak lagi paragraf
Soal Latihan Adobe Dreamweaver CS6 dan HTML Wearnes Education Center
Informatika dan Teknik Komputer 74
PORTFOLIO PAGE (portfolio.html)
HTML:
CSS :
Soal Latihan Adobe Dreamweaver CS6 dan HTML Wearnes Education Center
Informatika dan Teknik Komputer 75
NEWS PAGE (news.html)
HTML:
CSS :
Soal Latihan Adobe Dreamweaver CS6 dan HTML Wearnes Education Center
Informatika dan Teknik Komputer 76
CONTACT PAGE (contact.html)
HTML:
SS :C
Soal Latihan Adobe Dreamweaver CS6 dan HTML Wearnes Education Center
Informatika dan Teknik Komputer 77
Lampiran 1
Berikut data taq html
Tag Description
<!--...--> Defines a comment
<!DOCTYPE> Defines the document type
<a> Defines a hyperlink
<abbr> Defines an abbreviation
<acronym> Not supported in HTML5. Use <abbr> instead. Defines an acronym
<address> Defines contact information for the author/owner of a document
<applet> Not supported in HTML5. Use <object> instead. Defines an embedded applet
<area> Defines an area inside an image-map
<article>New Defines an article
<aside>New Defines content aside from the page content
<audio>New Defines sound content
<b> Defines bold text
<base> Specifies the base URL/target for all relative URLs in a document
<basefont> Not supported in HTML5. Use CSS instead. Specifies a default color, size, and font for all text in a document
<bdi>New Isolates a part of text that might be formatted in a different direction from other text outside it
<bdo> Overrides the current text direction
<big> Not supported in HTML5. Use CSS instead. Defines big text
<blockquote> Defines a section that is quoted from another source
<body> Defines the document's body
<br> Defines a single line break
<button> Defines a clickable button
Soal Latihan Adobe Dreamweaver CS6 dan HTML Wearnes Education Center
Informatika dan Teknik Komputer 78
<canvas>New Used to draw graphics, on the fly, via scripting (usually JavaScript)
<caption> Defines a table caption
<center> Not supported in HTML5. Use CSS instead. Defines centered text
<cite> Defines the title of a work
<code> Defines a piece of computer code
<col> Specifies column properties for each column within a <colgroup> element
<colgroup> Specifies a group of one or more columns in a table for formatting
<command>New Defines a command button that a user can invoke
<datalist>New Specifies a list of pre-defined options for input controls
<dd> Defines a description/value of a term in a description list
<del> Defines text that has been deleted from a document
<details>New Defines additional details that the user can view or hide
<dfn> Defines a definition term
<dialog>New Defines a dialog box or window
<dir> Not supported in HTML5. Use <ul> instead. Defines a directory list
<div> Defines a section in a document
<dl> Defines a description list
<dt> Defines a term/name in a description list
<em> Defines emphasized text
<embed>New Defines a container for an external (non-HTML) application
<fieldset> Groups related elements in a form
<figcaption>New Defines a caption for a <figure> element
<figure>New Specifies self-contained content
<font> Not supported in HTML5. Use CSS instead. Defines font, color, and size for text
Soal Latihan Adobe Dreamweaver CS6 dan HTML Wearnes Education Center
Informatika dan Teknik Komputer 79
<footer>New Defines a footer for a document or section
<form> Defines an HTML form for user input
<frame> Not supported in HTML5. Defines a window (a frame) in a frameset
<frameset> Not supported in HTML5. Defines a set of frames
<h1> to <h6> Defines HTML headings
<head> Defines information about the document
<header>New Defines a header for a document or section
<hr> Defines a thematic change in the content
<html> Defines the root of an HTML document
<i> Defines a part of text in an alternate voice or mood
<iframe> Defines an inline frame
<img> Defines an image
<input> Defines an input control
<ins> Defines a text that has been inserted into a document
<kbd> Defines keyboard input
<keygen>New Defines a key-pair generator field (for forms)
<label> Defines a label for an <input> element
<legend> Defines a caption for a <fieldset> element
<li> Defines a list item
<link> Defines the relationship between a document and an external resource (most used to link to style sheets)
<map> Defines a client-side image-map
<mark>New Defines marked/highlighted text
<menu> Defines a list/menu of commands
<meta> Defines metadata about an HTML document
<meter>New Defines a scalar measurement within a known range (a gauge)
Soal Latihan Adobe Dreamweaver CS6 dan HTML Wearnes Education Center
Informatika dan Teknik Komputer 80
<nav>New Defines navigation links
<noframes> Not supported in HTML5. Defines an alternate content for users that do not support frames
<noscript> Defines an alternate content for users that do not support client-side scripts
<object> Defines an embedded object
<ol> Defines an ordered list
<optgroup> Defines a group of related options in a drop-down list
<option> Defines an option in a drop-down list
<output>New Defines the result of a calculation
<p> Defines a paragraph
<param> Defines a parameter for an object
<pre> Defines preformatted text
<progress>New Represents the progress of a task
<q> Defines a short quotation
<rp>New Defines what to show in browsers that do not support ruby annotations
<rt>New Defines an explanation/pronunciation of characters (for East Asian typography)
<ruby>New Defines a ruby annotation (for East Asian typography)
<s> Defines text that is no longer correct
<samp> Defines sample output from a computer program
<script> Defines a client-side script
<section>New Defines a section in a document
<select> Defines a drop-down list
<small> Defines smaller text
<source>New Defines multiple media resources for media elements (<video> and <audio>)
<span> Defines a section in a document
Soal Latihan Adobe Dreamweaver CS6 dan HTML Wearnes Education Center
Informatika dan Teknik Komputer 81
<strike> Not supported in HTML5. Use <del> instead. Defines strikethrough text
<strong> Defines important text
<style> Defines style information for a document
<sub> Defines subscripted text
<summary>New Defines a visible heading for a <details> element
<sup> Defines superscripted text
<table> Defines a table
<tbody> Groups the body content in a table
<td> Defines a cell in a table
<textarea> Defines a multiline input control (text area)
<tfoot> Groups the footer content in a table
<th> Defines a header cell in a table
<thead> Groups the header content in a table
<time>New Defines a date/time
<title> Defines a title for the document
<tr> Defines a row in a table
<track>New Defines text tracks for media elements (<video> and <audio>)
<tt> Not supported in HTML5. Use CSS instead. Defines teletype text
<u> Defines text that should be stylistically different from normal text
<ul> Defines an unordered list
<var> Defines a variable
<video>New Defines a video or movie
<wbr>New Defines a possible line-break