Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Kids

Desain Web Untuk Anak-Anak: Bersiap Membangun Sebuah Website

by
Difficulty:BeginnerLength:ShortLanguages:
This post is part of a series called Web Design for Kids.
Web Design for Kids: Welcome to Tuts+ Town!
Web Design for Kids: HTML Structure

Indonesian (Bahasa Indonesia) translation by Yosef Andreas (you can also view the original English article)

Selamat datang dalam pelajaran kedua seri Desain Web Untuk Anak-Anak!

Di dalam pelajaran ini kita akan mempelajari beberapa hal yang perlu kita lakukan dan tool yang kita butuhkan sebelum mulai menuliskan code untuk website Kota Tuts+; kita akan mencapai sana, saya janji! Juga, jangan lupa untuk mengajukan pertanyaan di area komentar pada bagian bawah halaman ini.

Pertama-tama, mari kita lihat lebih dekat apa tepatnya yang akan kita buat bersama-sama!

Membuat Sketsa

Sangat super membantu untuk membuat sketsa ide apapun yang kita punya dalam benak kita sebelum mulai benar-benar membangunnya. Itu adalah latihan yang dapat menghemat banyak waktu ketika kita masuk ke bagian coding.

Mungkin apa yang ada dalam pikiran kita tidak kelihatan bagus setelah berada di atas kertas? Mungkin beberapa masalah dan pertanyaan baru muncul dalam sketsa kita? Mungkin desain kita terlalu ramai? Banyak permasalahan ini akan menunjukkannya sendiri dalam sketsa kita.

Tidak Masalah untuk tidak menyukai sketsa kita pada awalnya, itulah tepatnya apa yang kita inginkan terjadi! Kita ingin mendapatkan ini semua berkerja pada kertas terlebih dahulu.

Membuat Sketsa Website Kota Tuts+

Kita perlu sebuah website untuk dikunjungi turis dan mempelajari tentang toko dan bisnis apa yang ditawarkan kota kita. Kita akan mengelompokkan ini bersama-sama dalam sebuah cara yang masuk akal, seperti "hotel" di dalam satu group dan "restaurant" dalam group lainnya. Kita akan ingin memiliki tautan ke website bisnis kita sendiri, sehingga pengunjung dapat mengkliknya untuk mendapatkan lebih banyak detail.

Ada juga beberapa gambar yang akan kita gunakan untuk memberikan sebuah perasaan disambut dalam kota.

Berikut adalah tampilan sketsa yang membawa pada desain lengkap dan pratinjau warna situs:

Ini adalah persisnya website yang akan kita buat dari awal! Cukup rapi.

Editor

Utk menuliskan kode HTML (semua bahasa rahasia yang kita bicarakan dalam pelajaran pertama) kita memerlukan sebuah text editor untuk mengetikkannya.

Paling baik untuk tidak menggunakan sesuatu seperti Microsoft Word untuk hal ini, karena code text editor yang sesuai akan membuat pekerjaan jauh lebih mudah. Sebuah code editor akan memahami apa yang kita ketikkan dan membuat semua code memiliki warna yang benar, sementara Microsoft Word lebih baik untuk menuliskan laporan sekolah, sebagai contoh.

Ada beberapa editor bagus dan gratis yang dapat kamu download dari web. Jika kamu tidak yakin bagaimana mendownload sesuatu, atau tidak yakin apakah kamu harus, selalu paling baik menanyakannya pada orang dewasa.

Bluefish bagus untuk komputer yang menjalankan Windows, sementara Atom akan cocok untuk Mac.

Kita akan melompati ke dalam apa maksud teks ini dalam course berikutnya, namun berikut sekilas apa yang dapat untuk diketik.

File, File, File

Seperti yang telah sedikit kita bicarakan, sebuah website hanyalah kumpulan file. File-file ini harus semuanya berada dalam folder yang sama agar browser bisa mencapainya.

Website Kota Tuts+ akan memiliki sebuah file HTML (disimpan dengan ekstensi file .html di bagian akhir), sebuah file CSS (disimpan dengan ekstensi file .CSS di bagian akhir), dan empat gambar yang akan disimpan dalam sebuah folder bernama "images". Folder gambar akan berada dalam folder utama yang sama seperti file HTML dan CSS.

Sebuah ekstensi file adalah kelompok huruf yang berada setelah titik dalam sebuah nama file, yang memberitahu kita jenis file tersebut:

Seperti yang disebutkan, gambar kita akan disimpan dalam sebuah folder bernama "images" di dalam folder situs utama, seperti ini:

Di dalam gambar di atas kita memiliki sebuah gambar bernama town.svg (ekstensi .svg hanya jenis sebuah gambar) yang telah kita letakkan dalam folder ekstra bernama "images". Melakukan ini akan membantu membuatnya rapi:

Kedua cara ini benar, namun kita akan menggunakan folder ekstra, seperti gambar di kanan.

Browser

Kita akan melihat pekerjaan kita tepat di dalam browser, seperti yang kamu gunakan sekarang untuk melihat halaman Tuts+!

Ada beberapa browser yang tersedia untuk download gratis jika kamu belum mempunyainya, seperti Google Chrome dan Firefox. Jika kamu menggunakan komputer Mac kamu sudah memiliki Safari yang terinstal, bagus!

Belum Dalam Web

Kita akan membangun website kita secara langsung pada komputer dan bukan pada internet. Jika kamu mengingat dalam pelajaran pertama kita, kami menjelaskan bahwa kita tidak dapat melihat sebuah website pada internet jika itu tidak berada pada server.

Gambar di bawah menunjukkan tampilan website yang sudah selesai dan dilihat secara lokal (bukan pada internet) dalam sebuah browser. Alih-alih melihat alamat web seperti www.tutsplus.com, kita melihat alamat lokal situs, yang tampak sedikit berbeda.

Selesai!

Di dalam pelajaran ini kita melihat beberapa hal penting yang akan membantu siap menuliskan kode website kita. Kita melihat tentang bagaimana menyiapkan file dan beberapa tool seperti text editor dan browser.

Di dalam pelajaran berikutnya kita akan melompati tepat ke dalam bagian coding website kita! Kita akan mengelola (Saya tahu, begitu banyak pengelolaan!) dan menambahkan beberapa code pada file HTML kita. Ini dimana bagian menyenangkannya dimulai!

Sampai jumpa di sekitar kota!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.