Membuat Website dengan Potoshop - Mark Up HTML Code Part 1

Sebelum anda membaca artikel ini lebih baik anda membaca postingan sebelumnya yaitu Membuat website Dengan Potoshop karena artikel kali ini adalah lanjutan dari artikel sebelumnya jadi artikel ini akan lebih bermakna jika anda terlebih dahulu membaca artikel sebelumnya. Dan bagi yang sudah membaca artikel Membuat website Dengan Potoshop sekarang ini adalah tahapan dimana kita akan melakukan mark up dari desain yang telah kita buat. Dengan melakukan mark up pada kode html kita dapat membuat sebuah website yang kita buat dengan potoshop akan benar-benar menjadi sebuah website karena kita akan menambahkan fungsi link yang dapat memanggil halaman lain.

Untuk yang sudah membuat design pada tutorial sebelumnya, langsung saja akan kita mulai. Yang pertama akan kita lakukan adalah melihat hasil desain yang sudah kita slice dengan menggunakan browser, anda dapat memakai mozila ataupun google chrome. Caranya adalah dengan mengetikan "localhost/coba" kemudian tekan enter. Jika berhasil maka website yang kita buat akan muncul pada halaman browser layaknya sebuah web yang kita buka di internet.

Dalam tampilan sekarang ini website yang kita buat masih ada sesuatu yang kurang yaitu kontennya belum ada. Dan tugas kita sekarang adalah mengisi konten pada website buatan kita ini dan tools yang akan kita gunakan adalah dreameaver, dan dreamweaver yang saya pakai adalah Dreamweaver CS6. Tapi anda tidak harus menggunakan versi yang sama dengan yang saya pakai karena pada dasarnya semua versi itu memiliki fungsi umum yang sama yaitu untuk membangun sebuah web.

Pertama, buka folder coba yang ada di dalam htdocs, didalam folder tersebut terdapat satu buah folder "images" dan satu buah file bernama "index.html" dan hal pertama yang akan kita lakukan adalah menghapus gambar "index7.png" . Nama gambar yang saya hapus mungkin saja berbeda dengan kepunyaan anda jika desain yang anda gunakan juga berbeda, namun anda tentu dapat menemukan mana yang harus dihapus . Yap benar , bagian isi konten yang harus dihapus karena bagian ini yang nantinya akan kita isi dengan artikel.

Kedua, buka file index.html dengan menggunakan dreamweaver , caranya dengan klik kanan kemudian pilih "open with -> Adobe Dreamweaver " . Setelah dreamweaver terbuka , sekarang kita mulai melakukan pengeditan. Lihat gambar diatas, bagian bertanda kotak merah adalah bagian yang akan kita ubah. Bagian yang akan kita ganti adalah bagian dengan kode

<img src="images/index_07.png" width="1366" height="617" alt="">

Kita ganti dengan :

<p>Belajar Web Programming di http://belajarwebprogramming69.blogspot.com .Belajar Web Programming di http://belajarwebprogramming69.blogspot.com .Belajar Web Programming di http://belajarwebprogramming69.blogspot.com .Belajar Web Programming di http://belajarwebprogramming69.blogspot.com .Belajar Web Programming di http://belajarwebprogramming69.blogspot.com .Belajar Web Programming di http://belajarwebprogramming69.blogspot.com .Belajar Web Programming di http://belajarwebprogramming69.blogspot.com .Belajar Web Programming di http://belajarwebprogramming69.blogspot.com .Belajar Web Programming di http://belajarwebprogramming69.blogspot.com .Belajar Web Programming di http://belajarwebprogramming69.blogspot.com .</p>

<p>Belajar Web Programming di http://belajarwebprogramming69.blogspot.com .Belajar Web Programming di http://belajarwebprogramming69.blogspot.com .Belajar Web Programming di http://belajarwebprogramming69.blogspot.com .Belajar Web Programming di http://belajarwebprogramming69.blogspot.com .Belajar Web Programming di http://belajarwebprogramming69.blogspot.com .Belajar Web Programming di http://belajarwebprogramming69.blogspot.com .Belajar Web Programming di http://belajarwebprogramming69.blogspot.com .Belajar Web Programming di http://belajarwebprogramming69.blogspot.com .Belajar Web Programming di http://belajarwebprogramming69.blogspot.com .Belajar Web Programming di http://belajarwebprogramming69.blogspot.com .</p>

Kemudian kita lihat lagi di browser dengan merefresh halaman yang tadi kita buka. Apakah tampilannya menjadi acak-acakan atau tidak teratur? Jika iya maka anda sukses mengikuti tutorial ini dan siap untuk lenjut ke tutorial selanjutnya "Membuat Website dengan Potoshop - Mark Up HTML Code Part 2"

Share :

Facebook Google+ Twitter