Cara Membuat Website Jual Beli

Pengertian CSS dan Fungsinya

Sedangkan CSS merupakan kependekan dari Cascading Style Sheets, yaitu bahasa yang dipakai untuk menentukan bagaimana halaman web akan ditampilkan, elemen-elemen di dalamnya seperti apa, serta style desain web akan bagaimana.

CSS lah yang membuat tampilan website jadi atraktif dan menarik. CSS ini bukan bahasa pemrograman, lebih tepatnya disebut dengan bahasa style sheet. Namun selain berfungsi mengatur tampilan halaman web yang berbasis HTML, CSS juga memiliki fungsi lain.

Mulai dari mempercepat waktu loading website, menawarkan banyak variasi tampilan web, mempermudah mengelola kode, dan membuat tampilan website rapi di ukuran layar yang berbeda.

Sebelumnya disebut mengenai mengelola kode, karena pada bahasa CSS ini yang dipakai memang sebuah kode.

Tidak seperti HTML yang menggunakan serangkaian tag dan ditulis berulang untuk halaman yang berbeda. Pada CSS Anda cukup menuliskan kode untuk mengubah tampilan web keseluruhan.

Dalam membuat website Anda perlu menguasai HTML dan CSS. Setelah memahami cara menggunakannya, Anda bisa membuat jenis website apapun, misalnya company profile, portofolio, ataupun blog pribadi.

Hal yang Perlu Dipersiapkan Sebelum Membuat Website Sekolah

Sebelum membuat website sekolah, ada 4 hal yang perlu kamu persiapkan terlebih dahulu.

Nama domain merupakan nama yang digunakan untuk mengidentifikasikan sebuah website di internet. Untuk membuat website sekolah, perhatikan tips berikut ini:

Misalnya nama sekolah kamu adalah SMA N 1 Pekanbaru, kamu bisa membuat nama domain “smansapku.sch.id”.

Hosting merupakan media penyimpanan file-file yang ada didalam website. Seperti gambar, video, audio dan sebagainya.

File-file tersebut akan disimpan dalam sebuah tempat yang dinamakan server hosting. Server hosting inilah nantinya yang akan menampilkan data-data tersebut pada web client (browser) seperti Chrome, Mozilla, Safari, dan Opera.

Untuk hosting website, kamu bisa menyewa salah satu jasa yang menyediakan layanan hosting. Jangan lupa lakukan diskusi terlebih dahulu dengan salah satu penyedia jasa hosting yang akan kamu gunakan.

Langkah selanjutnya kamu juga perlu memperhatikan keamanan website untuk melindungi privasi data yang ada di website. Pastikan website kamu memiliki SSL certificate.

Selain berfungsi sebagai pengaman, certificate ini juga meningkatkan citra website kamu. Tentukan website sekolah yang dilengkapi dengan SSL certificate akan memiliki kredibilitas yang lebih baik.

Berikut contoh website yang tidak menggunakan dan sudah menggunakan SSL certificate.

Dan untuk memasang SSL certificate, bisa dilakukan pada jasa layanan hosting yang kamu gunakan.

Pentingnya Memiliki Website

Sebelum tahu cara membuat website gratis, kita pahami dulu kenapa harus membuat website, geng. Seperti yang sudah Jaka sebutkan di prolog, website ini punya banyak manfaat untuk bisnis, komunitas hingga portofolio karya pribadi.

Untuk para pebisnis, kalian dapat memanfaatkan website sebagai media promosi yang efektif. Usaha kalian juga terlihat lebih profesional dan kredibel.

Untuk kalian yang memiliki komunitas, website dapat menjadi wadah informasi sekaligus media aktualisasi diri. Jadi kegiatan yang dilakukan, prestasi dan momen di komunitas dapar dibagikan ke banyak orang melalui website.

Untuk kebutuhan personal, kalian tentunya dapat mengasah kemampuan menulismu. Lalu websitemu bisa menjadi portfoliomu ketika melamar kerja. Kamu juga akan menjadi lebih produktif serta daya imajinasi dan kreativitasmu akan berkembang.

Apa itu Website Perusahaan

Sebelum masuk ke tahap inti yaitu cara membuat website perusahaan, kamu perlu mengenal terlebih dahulu apa itu website perusahaan. Website ini merupakan sebuah halaman yang berisikan informasi mengenai perusahaan. Tentu jika dibandingkan dengan website kampus, website kantor, dan website toko online, website perusahaan berbeda dengan semua website tersebut karena dalam website perusahaan tidak menyediakan transaksi dan konten yang tersedia relatif terbatas. Bisa dibilang, website perusahaan ini lebih bisa disamakan dan sebanding dengan website company profile.

Menggunakan WordPress

Cara membuat website perusahaan yang kedua adalah dengan menggunakan CMS WordPress. WordPress adalah Content Management System (CMS) yang open source. Ini adalah alat yang populer untuk individu tanpa pengalaman pengkodean yang ingin membangun situs web dan blog. Perangkat lunak ini tidak memerlukan biaya apa pun. Siapapun dapat menginstal, menggunakan, dan memodifikasinya secara gratis. Sebagai CMS paling populer di dunia, WordPress memiliki segudang plugin yang dapat kamu gunakan untuk menunjang pembuatan website.

Untuk mengetahui cara membuat website perusahaan menggunakan WordPress, kamu harus memiliki hosting dan domain terlebih dahulu. Beruntungnya, Domainesia memiliki hosting wordpress khusus perusahaan. Kamu harus beli hosting untuk perusahaan yang cocok dengan kebutuhan perusahaan.

Masuk ke dalam CPanel hosting kamu lalu cari aplikasi bernama Softaculous Apps installer. Apa itu Softaculous? Singkatnya, ini merupakan aplikasi yang membantumu untuk menginstal aplikasi di dalam hosting kamu.

Setelah itu silahkan cari aplikasi WordPress dan langsung saja lakukan instalasi sesuai urutan yang tersedia. Jika di dalam hosting kamu terdapat beberapa domain, jangan lupa untuk memilih tujuan instalasi WordPress-nya ya.

Jika telah berhasil instal, maka kamu sudah bisa mengakses halaman dashboard WordPress kamu. Biasanya kamu bisa mengaksesnya melalui url tambahan di belakang nama domainmu dengan /wp-admin/ (contoh: namadomain.com/wp-admin). Masuk menggunakan akun yang telah kamu daftarkan ketika melakukan instalasi WordPress sebelumnya. Jika berhasil login, maka akan tampil halaman seperti pada gambar diatas.

Lalu, bagaimana cara membuat website perusahaan agar memiliki tampilan yang profesional? Jika cara pertama membuat website perusahaan tadi menggunakan template maka sudah bisa dipastikan akan menghasilkan tampilan yang profesional (tergantung pemilihan template kamu). Nah, WordPress sebenarnya secara default memiliki beragam tema yang bisa kamu gunakan, namun biasanya halaman yang tersedia tidak lengkap.

Salah satu cara membuat website perusahaan dengan tampilan yang profesional adalah dengan menggunakan plugin Starter Template.

Kamu bisa mencarinya di menu Add new plugin, kemudian cara plugin sesuai nama dan lakukan instalasi sesuai petunjuk seperti pada gambar di atas. Jika sudah terinstall kamu bisa langsung aktifkan plugin tersebut.

Dengan menggunakan plugin ini, kamu bisa memilih template website dengan halaman yang lebih lengkap sehingga membuat website perusahaanmu terlihat lebih profesional.

Perbedaan Website Gratis dan Berbayar

Oke, geng, setelah mengetahui cara membuat website gratis tadi, Jaka yakin kalian pasti penasaran dengan website yang berbayar. Apakah fiturnya berbeda? Bagaimana desainnya?

Perlu diketahui, tentu ada perbedaan signifikan antara website gratis dan berbayar. Biasanya, website berbayar digunakan untuk kebutuhan yang lebih profesional, bisnis misalnya.

Tapi, untuk bisnis pemula atau individu yang ingin mulai menulis, biaya berlangganan mungkin akan cukup memberatkan kantong. Biasanya, biaya pembuatan website premium minimal menelan Rp 2,5 juta, tergantung spesifikasi website itu sendiri.

Jaka membuat tabel perbedaan website gratis dan berbayar di bawah ini agar kamu bisa lebih memahaminya. Simak, geng!

Kelebihan Membuat Website Dengan HTML dan CSS

Kebutuhan website baik untuk urusan bisnis maupun portofolio karya selalu tinggi. Anda sebetulnya bisa menggunakan desain template dari web builder.

Namun template dan fitur website-nya terbatas. Sehingga terkadang Anda bisa sangat menyukai tampilan desainnya, tetapi merasa fitur penunjangnya kurang sesuai.

Karena itulah membuat website sendiri menggunakan HTML dan CSS, bisa menjadi solusi alternatif. Di samping itu berikut ini 4 kelebih dari cara membuat website dengan HTML dan CSS:

Website dengan HTML dan CSS cocok bagi Anda yang masih pemula dan masih belajar cara membuat website.

Hal ini karena prosesnya tidak terlalu rumit dan mudah dipelajari setiap tahapannya. Selain itu bahasa HTML sendiri merupakan kemampuan dasar yang perlu dipahami calon web developer.

Jika Anda ingin membuat website tetapi ragu karena budget yang minim, maka Anda bisa membuat website HTML. Sehingga biaya yang perlu dikeluarkan untuk merancang website bisa lebih ditekan.

Dana yang perlu Anda keluarkan hanya untuk menyewa hosting dan domain. Selebihnya bisa gratis jika Anda menyusun sendiri websitenya.

Selain itu cara membuat website dengan HTML dan CSS lebih mudah. Dibandingkan dengan bahasa pemrograman yang menuntut Anda untuk memahami coding. Sedangn HTML dan CSS ini bisa Anda pelajar sendiri lalu praktikan.

Kelebihan lain dari website dengan HTML adalah kecepatan akses atau loading halaman.

Karena biasanya website dengan HTML dan CSS tidak menambahkan banyak fitur unik ke dalam website. Sehingga waktu untuk server merespon lebih singkat, yang membuat loading halaman web jadi lebih cepat.

Itu dia penjelasan mengenai pengertian, fungsi, dan cara membuat website dengan HTML dan CSS.

Teknik ini cocok bagi Anda yang ingin belajar cara membuat website (website development). Setelah menguasai kemampuan yang dasar ini, Anda dapat mulai mempelajari teknik yang lebih rumit.

Selain dipakai untuk jadi tempat praktikum merancang halaman web, kemampuan ini juga bisa kamu manfaatkan untuk membuat website sederhana. Misalnya untuk portofolio, blog pribadi, katalog produk, company profile, dan lainnya.

Semoga artikel ini bisa menambah wawasan dan pemahaman Anda terkait web development. Share seluas-luasnya agar tulisan ini tidak hanya berhenti di diri Anda!

Kamu pemilik perusahaan? Atau kamu adalah pegawai atau pengurus sebuah perusahaan dan ingin membuat perusahaan kamu itu tampil lebih profesional? Salah satu hal yang bisa kamu lakukan adalah dengan buat website company profile perusahaan. Cara membuat website perusahaan tidaklah sulit. Artikel ini akan membahas cara membuat website perusahaan yang cepat dan mudah serta memiliki tampilan yang profesional.

Hm, mungkin kamu pernah membuka website suatu perusahaan namun memiliki tampilan yang kurang menarik ya? Tentu kamu menghindari untuk memiliki website perusahaan seperti itu. Untuk dapat mengembangkan website perusahaan dengan tampilan yang profesional, berikut ini adalah beberapa tips dan trik yang bisa kamu lakukan.

Menggunakan Template Website

Cara membuat web perusahaan dengan cepat dan mudah yang pertama adalah dengan memanfaatkan template website yang tersedia di internet. Ada beberapa penyedia template website seperti Envato, Themeforest, dan Themewagon.

Dari beberapa penyedia tersebut ada penyedia yang berbayar dan ada yang gratis. Untuk yang berbayar, setelah kamu membelinya tentu template tersebut adalah milikmu dan kamu bebas menggunakannya. Namun untuk versi gratis, kamu perlu membaca syarat dan ketentuannya. Biasanya author dari template tersebut mengharuskan penggunanya untuk mencantumkan credit copyright pada website yang digunakan.

Setelah kamu berhasil mengunduh template website, jangan lupa untuk melakukan kustomisasi dan menyesuaikan konten dengan yang kamu harapkan. Mulailah memasukan informasi-informasi perusahaan yang telah kamu siapkan sebelumnya.

Jika website telah selesai kamu kustom, saatnya kamu mempublikasikannya ke internet. Select semua file penyusun website, lalu archive dalam bentuk .zip maupun .rar. Caranya seperti pada gambar diatas.

Masuk ke file manager hosting yang kamu miliki. Kemudian pilih domain dimana kamu akan mengakses website perusahaan yang telah kamu buat atau letakkan pada direktori public html jika di dalam hosting hanya terdapat satu domain saja. Lalu setelah itu pilih upload dan pilih file yang telah kamu archive sebelumnya.

Setelah berhasil, file archive .zip yang telah di upload perlu di extract kembali. Caranya adalah dengan klik kanan file dan pilih extract. Otomatis file tersebut akan kembali ke bentuk semula dam website kamu sudah bisa di akses. Jangan lupa untuk selalu memberi nama halaman depan file website dengan nama index agar website kamu bisa di akses.

Cara Membuat Website dengan HTML

Setelah mengetahui pengertian dan fungsi dari bahasa HTML dan juga CSS, sekarang Anda dapat mulai mencoba membuat website. Lakukan tahapan-tahapan di bawah ini:

Tahap pertama Anda perlu menginstal aplikasi Text Editor. Selain Notepad yang memang jadi bawaan Windows, ada banyak pilihan tools untuk Text Editor.

Seperti Visual Studio Code atau VSCode, Sublime Text, Vim, Komodo edit, dan Notepad ++.

Ketika memilih Text Editor pastikan dulu spesifikasi komputer Anda. Misalnya berapa besaran RAM komputer Anda. Hal ini dikarenakan bahwa untuk beberapa aplikasi Text Editor bisa dijalankan dengan baik pada komputer dengan spesifikasi tertentu. Serta pilih aplikasi yang tidak berbayar.

Karena Anda sedang belajar membuat website, sebagai pemula Anda dapat memilih Notepad ++. Aplikasi ini berbeda dengan Notepad sebelumnya karena menyediakan berbagai fitur pendukung.

Notepad ++ juga termasuk Text Editor gratis yang bisa dipakai untuk komputer dengan spesifikasi ram 2GB.

Selain Notepad ++ ada juga Text editor lain yang masih buatan Microsoft, yaitu VSCode. Meski begitu tools ini juga tersedia untuk sistem operasi Mac Os dan Linux.

Anda dapat menggunakan VSCode untuk membuat website dengan HTML dan CSS.

Setelah memilih aplikasi Text Editor, langkah selanjutnya adalah membuat file HTML untuk mulai menyusun tag. Misalnya buatlah file index.html. Pada file ini Anda akan merangkai struktur halaman website.

Secara garis besar, dalam setiap halaman tersusun atas 4 bagian yaitu:

Sehingga rangkaian tag yang Anda buat pada Text Editor, dimulai dengan mencantumkan tag DTD lalu tag HTML.

Setelah itu Anda menyusun bagian tag head untuk mengisi informasi mengenai meta tag charset, title, dan link dari file CSS yang nantinya akan dibahas lebih lanjut. Contoh penulisannya seperti ini:

Personal Blog

Baru kemudian lanjut ke tag body, untuk mengatur homepage website. Di mana biasanya berisi navigation bar, text container, paragraph, sampai bagian footer.

Selain itu jangan lupa menambahkan gambar yang sesuai. Sebelum itu pastikan Anda sudah mengumpulkan semua foto, gambar dan aset untuk membuat website dalam satu folder agar lebih mudah.

Berikut contoh penulisan pada bagian body untuk personal blog:

Hello,

I’M IndonesianWriter.com

A ONE STOP CONTENT MARKETING SOLUTION FOR YOUR BUSINESS’ GROWTH

Ready to get your content enhance with IndonesianWriter?

Cara membuat website dengan HTML Selanjutnya adalah dengan membuat file CSS untuk memberikan tampilan website yang lebih menarik. Pada text editor buat file dengan extension CSS misalnya style.css.

Kemudian mulailah memasukkan kode untuk menambahkan elemen pada halaman web. CSS ini akan sangat membantu karena bahasa HTML sendiri terbatas dan fokusnya lebih ke struktur isi website.

CSS terdiri dari 3 jenis jika melihat dari penempatan kode. Yaitu CSS Inline, Internal, serta External. Untuk Inline, kode CSS dicantumkan di bagian body dalam file HTML. Kode ini hanya memberikan perubahan pada satu baris saja.

Sedangkan Internal kode-kodenya diletakkan di bagian header pada file HTML. Berfungsi menentukan tampilan satu halaman website.

Terakhir ada External yaitu, kode CSS yang ditaruh di luar file HTML dalam bentuk file.css. Fungsinya yaitu mengatur tampilan untuk semua halaman website.

Sehingga bisa digunakan untuk menata beberapa halaman web sekaligus apa saja yang bisa diatur oleh CSS? Ada banyak, diantaranya yaitu menentukan bagaimana format paragraph, font, dan warna tulisan.

Kemudian membuat kotak teks, tombol link, mengubah warna link dan juga mengatur warna yang bisa berubah ketika diarahkan oleh kursor. Semua detail desain tersebut bisa dilakukan dengan menggunakan bahasa CSS.

Contoh penulisan kode CSS kurang lebih akan seperti ini:

@charset “utf-8”; /* CSS Document*/ body{ background-color:#a11111; margin:0px; padding:0px; }

ul{ list-style:none; }

a{ text-decoration:none; }

section{ width:100%; height:95vh; position: relative; }

nav{ display: flex; justify-content: space-between; align-items:center; height:60px; background-color:#FFFFFF; box-shadow:2px 2px 12px rgba(0,0,0,0.2); padding:0px 5%;

} nav ul{ display: flex; }

nav ul li a{ margin:30px; font-family:myriad pro regular; color:#505050; font-size: 15px; font-weight:700; }

.logo{ font-family:RoadTest; color:#000000; font-size: 22px; font-weight: bold; }

.active{ color:#2d2a2a; font-weight:bold; }

.text-container p:nth-child(1){ font-family: calibri; font-weight: bold; color: #ffffff; font-size: 22px; }

.text-container p:nth-child(2){ font-family: calibri; font-weight: bold; letter-spacing: 2px; color: #ffffff; font-size: 60px; }

.text-container p:nth-child(3){ font-family: myriad pro regular; color: #ffffff; font-size: 30px; line-height: 30px; }

.text-container p:nth-child(4){ font-family: calibri; color: #ffffff; font-size: 17px; margin-top: 10px; line-height: 30px; }

.text-container p{ line-height: 0px; margin: 55px 0px 25px; }

.text-container{ position: absolute; left: 13%; top: 42%; transform: translate(-13%, -42%); }

.text-container button{ width: 130px; height: 42px; border-radius: 10px; font-family: calibri; font-weight: bold; font-size: 14px; outline: none; margin: 0px 10px; }

.hire-btn{ border: 2px solid #373636; color: #373636; }

button:active{ transform: scale(1.1); }

.model{ height: 560px; position: absolute; bottom: 60px; left: 80%; transform: translateX(-70%); }

footer p{ font-family: calibri; }

footer p:nth-child(1){ font-size: 30px; font-weight:bold; color:#FFFFFF; line-height:10px; }

footer p:nth-child(2){ font-size: 16px; color:#7e7d7d; width:600px; text-align: center; }

footer{ height:300px; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; background-color: #191919; }

.social-icons a{ width:40px; height:40px; display: flex; justify-content: center; align-items: center; background-color:#e6e3e3; margin:20px 10px; border-radius:50%; }

.social-icons{ display: flex;

.social-icons i,.social i{ color:#000000; }

.social-icons a:hover{ background-color:#000000; box-shadow:2px 2px 12px rgba(0,0,0,0.2); transition:all ease 0.5s; }

.social-icons a:hover i, .social a:hover i{ color:#FFFFFF; transition:all ease 0.5s; }

.copyright{ color:#565555; font-size: 15px; position: absolute; left:50%; bottom:10px; transform: translateX(-50%); }

Setelah Anda membuat file HTML dan file CSS lengkap dengan tag dan kode yang sudah disusun, maka selanjutnya adalah menghubungkan kedua file tersebut.

Caranya cukup mudah. Anda tinggal memasukkan kode pada bagian head di file index.html. Dengan begitu kedua file akan langsung terintegrasi. Contohnya seperti ini:

Tahapan berikutnya Adalah membuka website Anda melalui web browser. Pada langkah ini bukan berarti halaman website sudah selesai.

Karena fungsi dari tahapan ini yaitu agar proses membuat website dengan HTML dan CSS bisa berjalan lebih efektif.

Buka kedua file bersamaan. Ketika Anda melakukan penambahan elemen baik pada file HTML dan juga CSS, perubahannya bisa langsung terlihat di web browser.

Namun sebelumnya Anda perlu memuat ulang halaman, setiap kali ada perubahan. Dengan begitu proses mengembangkan website jadi lebih mudah dan cepat.

Berikut ini merupakan hasil dari cara membuat website dengan HTML dan CSS secara sederhana.