Unlimited Powerpoint templates, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Business
  2. HTML5
Business

Bagaimana Cara Membuat Template Website Restoran Dengan HTML5

by
Difficulty:BeginnerLength:MediumLanguages:
This post is part of a series called How to Make Great Restaurant Websites (Ultimate Guide).
23 Best Responsive Restaurant & Food Website HTML Templates for 2020
25+ Best Restaurant & Cafe Website Designs (For Visual Ideas)

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

Membuat website untuk restoran anda sangat penting jika anda ingin untuk menarik pelanggan baru. Untungnya, saat ini lebih mudah daripada sebelumnya untuk mendapatkan website restoran dan menjalankannya dengan cepat. Terima kasih banyak kepada HTML templates for restaurants, Anda tidak perlu menghabiskan waktu mencari seorang desainer atau belajar bagaimana untuk membuat website r estoran dari awal.

Template HTML yang sangat mudah untuk memodifikasi dan mengupload ke hosting server. Manfaat lain dari sebuah template HTML adalah fakta bahwa ia menggunakan kode yang tidak begitu rumit, yangmana membuat situs restoran yang dibangun dengan template HTML untuk memuat lebih cepat daripada yang dibangun pada CMS seperti WordPress.

Jika Anda sudah bertanya-tanya bagaimana membuat sebuah website untuk Restoran, posting ini adalah untuk anda. Kami akan menunjukkan kepada anda apa yang anda perlukan untuk memulai, cara menggunakan template yang restoran HTML5, menyesuaikan, dan akhirnya bagaimana untuk meng-upload ke server hosting anda sehingga anda dapat menunjukkan restoran seperti apa yang anda ditawarkan.

Alat dan sumber daya yang anda butuhkan untuk memulai sebuah Website Restoran

Langkah pertama dalam menciptakan website restoran adalah mengumpulkan semua alat dan sumber daya yang anda butuhkan. Ini termasuk nama domain, hosting perusahaan, sebuah program FTP, konten yang akan pergi di situs Anda, dan sebuah restoran template. Mari kita mengambil melihat lebih dekat pada masing-masing di bawah ini.

1. domain Name

Sebuah nama domain adalah bagaimana Anda pelanggan akan menemukan Anda online. Pilihan yang paling jelas adalah menggunakan nama restoran Anda sebagai nama domain yang dipasangkan dengan ekstensi .COM. Namun, nama domain terbaik sudah sering diklaim, jadi jangan terkejut jika nama domain yang diinginkan yang diambil.

Jika ini terjadi, Anda dapat mencoba menghubungi pemilik domain dan bertanya tentang kemungkinan membeli nama domain dari mereka. Pilihan lain adalah untuk bereksperimen dengan ekstensi yang berbeda atau menambahkan Restoran kata-kata atau nama kota Anda.

2. perusahaan hosting

Selain nama domain, Anda juga akan memerlukan server hosting yang akan rumah semua file website restoran untuk Anda. It's worth menyebutkan bahwa Anda dapat membeli nama domain pada waktu yang sama seperti Anda membeli rencana hosting. Pada kenyataannya, sebagian besar perusahaan hosting akan menawarkan domain gratis sebagai insentif untuk sign up rencana hosting mereka.

Sebelum Anda menetap di sebuah perusahaan hosting, pastikan untuk melakukan due diligence dan membaca ulasan pihak ketiga pada situs Restoran independen. Ini akan memberi Anda gambaran yang lebih akurat dari host kualitas dan kepuasan pelanggan.

3. sebuah klien FTP

Tugas berikutnya pada daftar Anda men-download klien FTP sehingga Anda dapat mentransfer file template Anda dari komputer Anda ke server Anda. Tergantung pada sistem operasi Anda, Anda akan menemukan banyak program FTP untuk Windows, Mac, dan Linux. Anda juga dapat mempertimbangkan FileZilla karena lintas-platform klien yang bebas untuk download dan digunakan.

4. Kode Editor

Anda akan memerlukan kode editor untuk mengedit file untuk template Anda. Editor kode yang mirip dengan editor teks seperti Notepad, tetapi menggunakan sintaks penyorotan untuk kejelasan lebih jauh.

Saya lebih suka teks luhur, yang dapat digunakan di Mac, Windows, dan Linux--percobaan gratis juga tersedia--tapi editor kode apapun akan cukup.

5. HTML Template dan konten

Akhirnya, Anda akan memerlukan Restoran website template dan konten yang akan pergi di situs web Anda. Meskipun Anda mungkin berharap untuk mendapatkan Restoran HTML template gratis, Anda akan menemukan bahwa template premium yang menawarkan lebih banyak fitur. Anda dapat memulai dengan melihat koleksi situs template untuk restoran untuk menemukan satu yang tepat untuk bisnis Anda. Untuk tujuan dari tutorial ini, saya akan menggunakan Resta template. Template ini memiliki desain yang sederhana dan bersih dengan slider-lebar penuh yang menarik. Ini juga mencakup formulir reservasi bekerja, sehingga Anda akan dapat mengambil reservasi online.

Resta template

Ketika datang ke konten, mengumpulkan semua salinan yang ingin dimasukkan, seperti ketika Anda Restoran dibuka untuk bisnis, apa jenis masakan Anda tawaran, daftar menu Anda, staf bios, headshots, dan hal lain yang relevan dengan restoran Anda.

Sekarang, itu adalah waktu untuk membiasakan diri dengan template dan menyesuaikannya dengan kebutuhan Anda. Mari kita lanjutkan!

Bagaimana untuk mengedit konten Template Restoran Anda

Sekali Anda telah menemukan HTML5 Restoran template yang Anda suka, membeli kemudian simpan folder zip ke komputer Anda. Unzip ke lokasi yang mudah diakses seperti Desktop Anda atau map unduhan.

1. memahami struktur Template Restoran

Sebelum Anda dapat mulai memodifikasi file, itu adalah ide yang baik untuk memiliki setidaknya pemahaman sepintas struktur template. Perlu diingat bahwa beberapa folder dan file mungkin berbeda dari apa yang ditampilkan di bawah ini. Namun, dalam kebanyakan kasus, Anda akan menemukan folder yang berisi template dokumentasi dan satu dengan template yang sebenarnya.

Template structure

Di dalam folder template yang sebenarnya, Anda biasanya akan menemukan subfolder dan file berikut:

  • CSS. Folder ini akan berisi semua stylesheet yang mengontrol font, warna, kolom, margin, paddings, dan lain-gaya visual dari template Anda.
  • JS. JavaScript folder akan berisi file JavaScript yang digunakan untuk memvalidasi bentuk, mengendalikan slider, berbagai animasi dan efek lainnya.
  • File HTML. Anda juga akan menemukan beberapa HTML file yang mewakili halaman template situs Restoran Anda seperti home page, tentang, Layanan, dan sebagainya.
  • Gambar. Dalam folder ini, Anda akan menemukan semua gambar latar belakang sebagai pengganti lain gambar yang digunakan dalam template Anda.

Anda juga dapat menemukan file-file berikut dan folder seperti dalam Resta template:

  • Audio. Folder ini berisi file audio yang dimainkan sebagai musik latar belakang ketika seseorang tanah website Restoran Anda.
  • Font. Folder font memegang semua ikon font yang digunakan di seluruh template.
  • Mail.php. file ini digunakan untuk mengatur formulir kontak dan reservasi.

Dengan struktur keluar dari jalan, mari kita mulai memodifikasi template.

2. menggantikan informasi Default

Kita akan mulai dengan mengedit index.html file. Klik kanan file dan pilih terbuka di browser. Ini akan membuka file tersebut di browser default Anda dan memungkinkan Anda untuk melihat apa yang bagian perlu diganti.

Seperti yang Anda lihat dari gambar di bawah, ada beberapa hal untuk mengedit, termasuk:

  • teks header di tayangan slide
  • tentang informasi
  • hidangan populer bagian
  • Bagian daftar menu

Untuk membuatnya lebih mudah untuk menemukan bahwa informasi dalam template Anda, klik kanan pada teks header dan klik memeriksa.

Panel akan muncul di bagian bawah yang menunjukkan kode HTML yang membuat template kami.

Inspecting code

Di panel itu, Anda akan melihat baris teks kami memilih untuk memeriksa disorot dengan warna biru di sisi kiri panel inspektur. Jika Anda melihat ke kanan, Anda akan melihat bahwa kode sedikit berbeda ditampilkan, yang mengontrol gaya visual baris teks.

Seperti yang Anda lihat dari gambar, teks header kami memilih adalah antara<h2>Tag, yang mewakili judul dalam HTML.</h2>

Untuk mengedit template, mencari tag yang berisi konten yang Anda ingin mengubah, menemukan mereka dalam kode editor dan swap keluar untuk info Anda.

Dengan pengetahuan itu, pergi kembali ke template folder, klik kanan pada index.html dan pilih terbuka dengan luhur teks atau editor kode yang Anda download sebelumnya.

Editing HTML

Sekarang, Anda ingin menemukan kode yang sama yang Anda lihat di panel inspektur browser Anda.

Gulir ke bawah sampai Anda menemukan jalur 298. Kemudian, klik di antara<h4>Tag dan menambahkan pesan pembuka.</h4>

Kemudian, pada baris 301, klik di antara<h1>Tag dan ganti yang kalimat dengan Anda sendiri.</h1>

Dengan cara yang sama, Anda dapat terus melakukan langkah-langkah ini berulang-ulang: memeriksa informasi yang Anda inginkan untuk mengubah, mengidentifikasi tag yang berisi teks itu, menemukan mereka di kode editor dan menggantinya dengan teks Anda.

Untuk mengubah logo dan gambar lain di situs, luangkan waktu sejenak untuk melihat nama gambar yang digunakan dalam folder img template Anda. Kemudian, mengubah nama gambar Anda menggunakan nama-nama, pilih semua gambar pengganti, menghapusnya, kemudian Tempatkan gambar Anda dalam img folder.

Akhirnya, untuk memodifikasi formulir reservasi sehingga pemesanan Anda datang ke alamat yang tepat, pergi ke template Anda folder, klik kanan mail.php file dan buka dengan editor kode Anda. Pada baris kode yang memiliki alamat dummy email, klik di antara tanda petik, Sorot Alamat email, dan menggantinya dengan Anda sendiri.

Editing the email address

Bagaimana untuk menyesuaikan tampilan Template Anda

Setelah Anda telah diganti semua informasi, saatnya untuk gaya template yang sesuai dengan keinginan Anda. Kembali dalam folder template Anda, klik kanan pada berkas style.css dan membukanya dalam editor kode Anda.

Editing CSS

Untuk mengedit CSS, ikuti langkah yang sama yang digunakan untuk mengedit HTML. Klik kanan elemen Anda ingin gaya dan klik memeriksa, tapi kali ini mencari kode pada sisi kanan tab Inspektur dan kemudian menemukan kode yang sama dalam kode editor. Tab Inspektur akan menunjukkan baris mana CSS Anda perlu mengedit.

Sebagai contoh, mari kita mengubah header teal warna dengan memasukkan kode HEX seperti:

warna: #65b5c1;

Mari kita juga perubahan teks ayat warna gelap seperti:

warna: #222222;

Bagaimana untuk meng-upload file ke Server

Sekarang bahwa Anda sudah disesuaikan template, semua yang tersisa untuk lakukan adalah meng-upload file ke hosting server. Login rincian harus memiliki telah dikirim ke email Anda melalui host Anda Jadi mencari email dan mencatat nama server, nama pengguna, dan sandi.

Meluncurkan program FTP Anda. Masukkan informasi yang diberikan oleh tuan rumah di bidang yang sesuai, dan kemudian klik Connect.

Uploading files

Sisi kiri layar akan memungkinkan Anda untuk menemukan folder yang berisi file template pada komputer Anda. Klik untuk mengembangkannya. Pilih semua file dan folder, menyeret mereka atas di sisi kanan layar, dan menjatuhkan mereka ke public_html folder.

Menunggu file untuk meng-upload kemudian buka browser Anda dan masukkan nama domain Anda. Selamat, Anda situs ini sekarang hidup!

5 tips untuk membuat situs web Restoran mengagumkan

Setelah situs Anda hidup, ada beberapa tambahan tweak yang dapat Anda lakukan untuk membuat kesan pertama yang hebat pada audiens Anda.

  1. Tambahkan situs Anda ke profil Media sosial. Sekarang bahwa Anda punya website Restoran, saatnya untuk memperbarui bagian bio dan situs web di semua profil media sosial. Biarkan pengikut Anda tahu mereka dapat memeriksa menu Anda online serta pesanan. Berbagi screenshot website restoran dan mendorong mereka untuk pesan dengan menawarkan mereka kode diskon atau kupon promo.

  2. Termasuk Tinjauan dari pelanggan masa lalu. Pelanggan masa lalu Anda mungkin tahu seberapa baik makanan Anda dan menyediakan restoran Anda suasana yang hebat. Menampilkan testimonial dan ulasan di situs web Restoran mereka. Ini akan membantu mendorong baru pengunjung datang memeriksa Anda.

  3. Daftar Restoran Anda dengan bisnis Google. Daftar Restoran Anda dengan bisnis Google akan membuat website Restoran Anda lebih mungkin untuk muncul dalam hasil pencarian, dan jika Anda memasukkan situs web Anda, itu akan memungkinkan pencari untuk berhubungan dengan Anda secara langsung.

  4. Kompres gambar Anda. Foto besar adalah suatu keharusan untuk Restoran, tapi pastikan Anda kompres ukuran gambar Anda. Ini akan membuat situs Anda lebih cepat untuk memuat dan meningkatkan pengalaman pengguna pengunjung.

  5. Embed peta Google. Menambahkan peta Google ke situs web Restoran akan membuatnya lebih mudah bagi calon pelanggan untuk menemukan Anda dan Dapatkan Arah sementara mereka berada di mana saja.

Pelajari lebih lanjut tentang restoran website

Dalam tutorial ini kami telah mengeksplorasi bagaimana membuat sebuah situs web untuk sebuah restoran. Untuk mempelajari lebih lanjut tentang restoran website review satu tutorial di bawah ini:

Mulai Website Restoran Anda Dengan sebuah Template HTML

Berkat berbagai template HTML5 untuk situs web Restoran, Anda tidak harus memecah tabungan untuk membuat sebuah situs restoran yang indah milik anda Sekarang kami telah memperlihatkan kepaa anda bagaimana cara untuk membuat sebuah website restoran, anda telah siap. Telusuri koleksi template restoran dan gunakan panduan kami untuk meluncurkan website restoran anda hari ini.

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.