Sabtu, 27 Juni 2015

Website Friendly

Ini dia Contoh Website yg Friendly atau sudah bagus untuk interfacenya, dan nyaman dipandang mata user.
ini skripnya :

<html>
    <head>
     <title> Tugas </title>
    <head>
  <body>
    <body background="00.png">
<center>
   <marquee> <h1> Tutorial Photoshop </h1> </marquee>
                <hr width=100% align=center size=5% color="white">
    <h2><b>Lolipop Love Candy Text Efek</b></h2>
    
    <h3>1. Buka Photoshop dan buat lembar kerja baru ( file > new ). Buat dengan ukuran :
Widht 100 pixels 
dan Height 100 pixels 
dengan Resolution 72 
dan Background contents Transparent.</h3>
<img src="1.jpg" alt="1" style="width:400px;height:300px;">
    <h3>2. Klik Rectangle Tool, kemudian warnai Seperti Dibawah, lalu Buat 4 object kotak sehingga hasilnya seperti ini :</h3>
<img src="2.jpg" alt="2" style="width:400px;height:300px;">
    <h3>kemudian kita pilih semua layer lalu tekan CTRL + E , hal ini fungsinya untuk menggabungkan layer.</h3>
<img src="3.jpg" alt ="3" style ="width:170px;height:190;">
     <h3>Hasil setelah digabungkan layernya</h3>
<img src="4.jpg" alt ="4" style ="width:170px;height:180;">
     <h3>Nah sekarang jadikan sebagai pattern, Klik menu utama : edit > define pattern, akhiri dengan menekan tombol OK.</h3>
<img src="5.jpg" alt="5" style="width:400px;height:300px;">
<h5>Selamat anda telah membuat pattern lolipop.</h5>
<h2> Membuat Teks Efek Permen Lolipop Love Candy </h2>
<h3>1. Setelah mempunyai pattern lolipop maka Siapkan lembar kerja baru </h3>
<img src="6.jpg" alt="6" style="width:400px;height:300px;">
<h3>lalu klik text tool dan tulis pada worksheet, kemudian beri warna tulisan pink muda (# fdebe9).</h3>
<img src="7.jpg" alt="7" style="width:400px;height:300px;">
<h3>2. Buat layer baru diatas teks dengan menekan (ctrl + shift + alt + n) pada keyboard secara bersamaan. Lalu pilih paint bucket tool (lihat gambar) pada toolbox photoshop dan atur menjadi pattern (lihat gambar) seperti berikut, pilih pattern yang anda buat tadi sebelumnya. lalu klik ke lembar kerja untuk menambahkan patternnya.</h3>
<img src="8.jpg" alt="8" style="width:400px;height:300px;">
<h3>3. Klik kanan pada layer 1 pattern, lalu pilih Create Clipping Mask </h3>
<img src="9.jpg" alt ="9" style ="width:170px;height:180;">
<h4>Kemudian tekan ctrl + T untuk merotasi (memutar posisi) </h4>
<img src="10.jpg" alt="10" style="width:400px;height:300px;">
<h3>4. Ok, langkah terakhir yaitu: Tambahkan Layer style pada layer 1 pattern lolipop
caranya : klik kanan layer 1 lalu pilih Blending Options...</h3>
<img src="11.jpg" alt ="11" style ="width:170px;height:180;">
<h4>Atur seperti ini :</h4>
<img src="12.jpg" alt="12" style="width:400px;height:300px;"><br>
<img src="13.jpg" alt="13" style="width:400px;height:300px;">
<h3>5. Sekarang atur blending option pada layer textnya.</h3>
<img src="14.jpg" alt="14" style="width:400px;height:300px;"><br>
<img src="15.jpg" alt="15" style="width:400px;height:300px;">
<h3>Setelah semua diatur kurang lebih hasilnya akan seperti ini</h3>
<img src="16.jpg" alt="16" style="width:600px;height:400px;">

                <p>Contoh Tutorial Teks Edit sederhana di Photoshop semoga dapat membantu anda</p>
</center>
  </body>

 </html>



saya membuat header dengan menggunakan marquee yaitu membuat efek tulisan berjalan, font sudah saya ubah, dan gambar saya pindahkan ke tengah atau center agar lebih jelas dan nyaman dilihat

Website Unfriendly

saya akan mencontohkan website yang unfriendly, atau sangat buruk interfacenya untuk dilihat user.
ini dia skrip nya
<html>
    <head>
     <title> Tugas </title>
    <head>
  <body>
    <body bgcolor="#ffff00">
    <h1> Tutorial Photoshop </h1>
                <hr width=100% align=center size=5% color="white">
    <h2 style="font:bold 30px Jokerman ;color:white"><b>Lolipop Love Candy Text Efek</b></h2>
   
    <h3 style="font:bold 20px Jokerman ;color:white">1. Buka Photoshop dan buat lembar kerja baru ( file > new ). Buat dengan ukuran :
Widht 100 pixels
dan Height 100 pixels
dengan Resolution 72
dan Background contents Transparent.</h3>
<img src="1.jpg" alt="1" style="width:400px;height:300px;">
    <h3 style="font:bold 20px Jokerman ;color:white">2. Klik Rectangle Tool, kemudian warnai Seperti Dibawah, lalu Buat 4 object kotak sehingga hasilnya seperti ini :</h3>
<img src="2.jpg" alt="2" style="width:400px;height:300px;">
    <h3 style="font:bold 20px Jokerman ;color:white">kemudian kita pilih semua layer lalu tekan CTRL + E , hal ini fungsinya untuk menggabungkan layer.</h3>
<img src="3.jpg" alt ="3" style ="width:170px;height:190;">
     <h3 style="font:bold 20px Jokerman ;color:white">Hasil setelah digabungkan layernya</h3>
<img src="4.jpg" alt ="4" style ="width:170px;height:180;">
     <h3 style="font:bold 20px Jokerman ;color:white">Nah sekarang jadikan sebagai pattern, Klik menu utama : edit > define pattern, akhiri dengan menekan tombol OK.</h3>
<img src="5.jpg" alt="5" style="width:400px;height:300px;">
<h5 style="font:bold 20px Jokerman ;color:white">Selamat anda telah membuat pattern lolipop.</h5>
<h2 style="font:bold 20px Jokerman ;color:white"> Membuat Teks Efek Permen Lolipop Love Candy </h2>
<h3 style="font:bold 20px Jokerman ;color:white">1. Setelah mempunyai pattern lolipop maka Siapkan lembar kerja baru </h3>
<img src="6.jpg" alt="6" style="width:400px;height:300px;">
<h3 style="font:bold 20px Jokerman ;color:white">lalu klik text tool dan tulis pada worksheet, kemudian beri warna tulisan pink muda (# fdebe9).</h3>
<img src="7.jpg" alt="7" style="width:400px;height:300px;">
<h3 style="font:bold 20px Jokerman ;color:white">2. Buat layer baru diatas teks dengan menekan (ctrl + shift + alt + n) pada keyboard secara bersamaan. Lalu pilih paint bucket tool (lihat gambar) pada toolbox photoshop dan atur menjadi pattern (lihat gambar) seperti berikut, pilih pattern yang anda buat tadi sebelumnya. lalu klik ke lembar kerja untuk menambahkan patternnya.</h3>
<img src="8.jpg" alt="8" style="width:400px;height:300px;">
<h3 style="font:bold 20px Jokerman ;color:white">3. Klik kanan pada layer 1 pattern, lalu pilih Create Clipping Mask </h3>
<img src="9.jpg" alt ="9" style ="width:170px;height:180;">
<h4 style="font:bold 20px Jokerman ;color:white">Kemudian tekan ctrl + T untuk merotasi (memutar posisi) </h4>
<img src="10.jpg" alt="10" style="width:400px;height:300px;">
<h3 style="font:bold 20px Jokerman ;color:white">4. Ok, langkah terakhir yaitu: Tambahkan Layer style pada layer 1 pattern lolipop
caranya : klik kanan layer 1 lalu pilih Blending Options...</h3>
<img src="11.jpg" alt ="11" style ="width:170px;height:180;">
<h4 style="font:bold 20px Jokerman ;color:white">Atur seperti ini :</h4>
<img src="12.jpg" alt="12" style="width:400px;height:300px;"><br>
<img src="13.jpg" alt="13" style="width:400px;height:300px;">
<h3 style="font:bold 20px Jokerman ;color:white">5. Sekarang atur blending option pada layer textnya.</h3>
<img src="14.jpg" alt="14" style="width:400px;height:300px;"><br>
<img src="15.jpg" alt="15" style="width:400px;height:300px;">
<h3 style="font:bold 20px Jokerman ;color:white">Setelah semua diatur kurang lebih hasilnya akan seperti ini</h3>
<img src="16.jpg" alt="16" style="width:600px;height:400px;">

                <p>Contoh Tutorial Teks Edit sederhana di Photoshop semoga dapat membantu anda</p>
  </body>

 </html>


warna sangat amat tajam, dan font atau tulisan pada websitenya tidak jelas.