Tips Cara Menciptakan Website

Salah satu langkah dalam menentukan identitas digital Anda yakni dengan menciptakan website. Adanya kemajuan dalam pengembangan website memudahkan kita dalam menciptakan website: kita sanggup memakai sistem administrasi konten, atau memanfaatkan website builder, atau kita sanggup mengaplikasikan cara menciptakan website dari awal. Di tutorial ini, kami akan menjelaskan semua cara yang telah disebutkan di atas dan menampilkan langkah-langkah menciptakan situs.

Anda tidak perlu khawatir kalau belum pernah menciptakan dan membuatkan website. Tutorial ini siap membantu Anda memulai dari proses paling dasar.

Isi

Langkah 1 – Memilih Platform

Langkah 2 – Mencari Hosting dan Nama Domain

Langkah 3 – Cara Membuat Website

Kesimpulan

Langkah 1 – Memilih Platform

Menggunakan CMS: Sistem administrasi konten merupakan tool pengembangan tingkat lanjut yang sanggup dipakai untuk menciptakan dan mengelola website beserta kontennya. Terkait CMS, ada tiga pilihan terkemuka di pasaran, yaitu WordPress, Drupal, dan Joomla! Ketiga tool ini bersifat gratis dan open-source, tetapi WordPress-lah CMS yang paling sering digunakan.

Menggunakan website builder: otomatisasi semakin terwujud dengan adanya website builder. Pada awalnya, opsi kustomisasi terkait fungsionalitas dan desain sangatlah terbatas. Namun sekarang, ada banyak sekali yang sanggup Anda dapatkan dengan drag dan dropping memakai website builder modern.

Membuat kode untuk pembuatan website dari nol: Opsi ketiga yang tersedia yakni menciptakan website dari awal. Teknologi yang dipakai untuk menciptakan website statis yakni HTML dan CSS.

Langkah 2 – Mencari Hosting dan Nama Domain

Agar website tampil di internet, Anda harus membeli web hosting dan menciptakan domain semoga situs Anda sanggup dengan gampang diakses Anda juga sanggup mendapat web hoating yang gratis.

Memilih Web Hosting

Hosting Hostinger dioptimalkan untuk WordPress (misalnya,, WP CLI, WordPress caching, dan lain-lain).Website builder yang gampang dipakai sehingga Anda sanggup melaksanakan drag and drop untuk menciptakan website yang menarik.

Tak ada hambatan ketika hendak mengaktifkan dan menjalankan website PHP di hosting Hostinger. Anda sanggup menjalankan Laravel, CodeIgniter, mengintegrasikan dengan GIT Anda, dan memperoleh saluran SSH ke server Anda.

Sertifikat SSL juga disediakan oleh Hostinger.

Masa trial selama 30 hari bebas risiko menawarkan Anda kesempatan mencoba semua layanan sebelum kesannya Anda melaksanakan pembelian.

Apabila menentukan paket premium atau bisnis, maka Anda akan mendapat satu nama domain gratis.

Anda sanggup menciptakan sebanyak mungkin alamat email yang Anda inginkan (Benar sekali, tidak terbatas!).

Memilih Nama Domain

Sederhananya, domain yakni nama website Anda. Memilih nama domain yang baik dan sempurna juga merupakan salah satu hal fundamental dan terpenting. Domain berfungsi untuk mengarahkan pengguna mengunjungi website Anda. Oleh sebab itu, jangan hingga salah menciptakan nama domain.

Berikut ada beberapa tips yang sebaiknya Anda ketahui sebelum menentukan dan menciptakan nama domain:

Nama domain harus singkat: Siapa pun niscaya tidak ingin mengetik nama domain yang terlalu panjang, menyerupai Googletutorialmembuatwebsite.com.

Nama domain setidaknya memberi citra perihal website Anda kepada para pengunjung.

Pilih ekstensi domain yang benar: Ekstensi domain yakni pecahan dari domain yang letaknya sehabis tanda titik (.). Domain .com paling banyak dipilih. Namun, tentu saja, pemilihan ini menurut pada kebutuhan Anda atau isi website dan ada kemungkinan bagi Anda untuk menentukan ekstensi domain yang berbeda.

Cara pengucapan atau pengejaan nama domain: Nama domain Anda harus gampang diucap dan diingat.

Sama menyerupai layanan hosting lainnya, Hostinger juga menyediakan layanan registrasi nama domain. Anda sanggup memakai tool cek domain untuk menentukan nama domain yang diinginkan.

Langkah 3 – Cara Membuat Website

Setelah mendapat daerah hosting untuk situs Anda dan nama domain yang akan digunakan, Anda sudah sanggup memulai menciptakan website sendiri. bonbontutorial akan menjelaskan 3 cara menciptakan website pilih cara bikin website yang sesuai kebutuhan Anda.

Opsi 1 – Cara Membuat Website dengan WordPress

Menginstall WordPress

Menginstall WordPress benar-benar mudah, hanya dalam beberapa kali klik saja. Tool auto-installer melaksanakan semuanya untuk Anda; meskipun di bawah ini kami juga akan membahas cara menginstall WordPress memakai FTP secara manual.

Menginstall melalui auto-installer

Di kolom pencarian, ketik WordPress. Apabila yang Anda lihat di hasil pencarian yakni WordPress versi terbaru, jangan ragu untuk mengkliknya.

Masukkan URL (Alamat website Anda. Kosongkan saja kalau Anda ingin mengelola WordPress di root nama domain), Bahasa, username, kata sandi atau password, email, Judul WordPress, Tagline WordPress (slogan website Anda), dan klik tombol Install.

Selesai! WordPress telah berhasil diinstall. Auto-installer menawarkan Anda fasilitas yang diinginkan dalam menciptakan website di WordPress. Namun, kalau auto-installer tersebut bermasalah, atau Anda ingin menciptakan website dengan cara manual, maka Anda sanggup menginstall WordPress memakai FTP untuk mentransfer file. Ikuti beberapa langkah di bawah ini:

Menginstall melalui FTP

Mengonfigurasikan WordPress

Setelah menginstall WordPress, maka langkah selanjutnya yakni mengonfigurasikan website WordPress yang telah dibuat. Berikut beberapa konfigurasi yang sebaiknya Anda lakukan:

Coba Gratis Sekarang

Hapus halaman, post, dan komentar default

Post “Hello World” default dibentuk sehabis proses instalasi selesai. Sebaiknya hapus segera post ini. Untuk melakukannya. buka Post -> Semua post dan hapus.

Buka Laman -> Semua Laman dan hapus halaman contoh.

Terakhir, buka pecahan Komentar dan hapus komentar default.

Pengaturan zona waktu dan bahasa situs

Buka Pengaturan -> Umum dan atur zona waktu dan bahasa yang akan Anda gunakan.

Komentar WordPress

Semua pengaturan yang terkait dengan komentar sanggup ditemukan di Pengaturan -> Diskusi yang ada di admin panel WordPress. Berdasarkan kebutuhan, Anda bisa:

Tips:

Klik semua post/halaman melalui admin area WordPress.

Klik Edit Cepat pada halaman yang dimaksud.

Di bawah Tag, Anda akan melihat opsi Izinkan Komentar. Anda hanya perlu menonaktifkanya dan semua proses selesai.

Anda juga sanggup menonaktifkan kolom komentar di suatu post sehabis periode waktu tertentu.

Buka Pengaturan -> Media.

Di ukuran miniatur, masukkan 0 baik di lebar maupun tinggi. Jangan beri tanda centang pada opsi “Pangkas miniatur ke dimensi yang sama (biasanya miniatur bersifat proporsional).

Di ukuran sedang, masukkan 0 baik di lebar maupun tinggi.

Terakhir, di ukuran besar, masukkan 0 baik di lebar maupun tinggi.

Beri tanda centang pada opsi “Organisir unggahan saya dalam folder-folder menurut bulan dan tahun” dan klik Simpan Perubahan.

Menonaktifkan Browsing Direktori

Menonaktifkan browsing direktori merupakan salah satu konfigurasi yang lebih teknis dan akan dilakukan secara bersamaan pada ketika Anda hendak meningkatkan keamanan website. Untuk menonaktifkan browsing direktori, Anda harus mengedit file .htaccess. Ikuti beberapa langkah di bawah ini:

Buat koneksi ke akun hosting Anda memakai aplikasi file apa pun (misalnya FileZilla)

Cari dan unduh file .htaccess.

Buka file tersebut dan di pecahan akhir, tambahkan baris kode ini:

Options-Indexes

Klik simpan.

Upload kembali file memakai aplikasi FTP client.

Kustomisasi WordPress

Tampilan website Anda sama pentingnya dengan konten situs itu sendiri. Tema WordPress memungkinkan Anda mengubah desain dan tampilan website sesuai impian dan kebutuhan. Selain itu, plugin WordPress juga memberi Anda kesempatan untuk menciptakan website lebih profesional. Kami akan membahas kedua entitas ini, satu per satu.

Menginstall Tema WordPress

WordPress menawarkan kontribusi besar di komunitas sehingga banyak sekali tema, baik gratis maupun berbayar, yang tersedia. Berbagai tema WordPress gratis sanggup Anda temukan di sini. Website, menyerupai ThemeForest, juga merupakan situs yang sempurna apabila Anda mencari tema gratis dan berbayar. Jika Anda merasa sulit menentukan tema yang sempurna untuk website, silakan baca artikel yang memuat perihal tema WordPress gratis dan terbaik.

Menginstall tema di WordPress sangatlah mudah. Berikut langkah-langkahnya:

Klik pecahan Apperance di eksekutif area.

Klik tombol Add New.

Anda sanggup mencari tema yang tersedia, kemudian klik salah satu. Klik Install, kemudian Activate untuk melihat tema gres yang dipilih.Menginstall tema gres di website WordPress

Apabila Anda ingin menambahkan tema gres yang telah dibeli, ikuti langkah-langkah di bawah ini:

Buka Appearance dan klik tombol Add New.

File tema harus dalam bentuk zip. Setelah terbuka, cari dan unggah tema yang diinginkan.

Setelah proses upload tema selesai, klik tombol Activate dan tema Anda akan pribadi aktif.

Jika Anda menginginkan tutoial yang lebih mendalam terkait penginstallan tema, silakan baca artikel ini.

Kustomisasi Tema WordPress

Apabila Anda memahami cara mengedit kode dengan baik, maka sudah niscaya Anda akan menentukan cara manual dalam menginstall tema. Langkah ini melibatkan modifikasi kode yang tertulis dalam file CSS (cascading style sheet) yang berfungsi untuk enforce layout website Anda. Untuk melakukannya, ikutilah langkah-langkah berikut ini:

Buka Appearance di dashboard WP dan klik Editor.

Klik style.css dan editor file tersebut akan terbuka.

Anda sanggup menciptakan editan sebanyak mungkin, tergantung pada kebutuhan dan impian Anda. Simpan file tersebut dengan mengklik Update file.

Anda juga sanggup mengubah tema dengan memodifikasi konten file functions.php. Dengan demikian, Anda sanggup menambahkan/menghapus/mengubah aspek fitur, fungsionalitas, dan desain tema. File fungsi bertanggung jawab terhadap fungsi tema dan dengan menambahkan kode PHP, tema tersebut sanggup diganti atau diubah. Anda sanggup mengetahuinya lebih terang dengan membaca artikel functions.php di sini.

Menginstall Plugin WordPress

Plugin memudahkan si pemilik untuk mengelola websitenya. Selain itu, plugin juga bermanfaat secara jangka pendek dan panjang untuk kelangsungan website Anda. Dengan melaksanakan instalasi plugin melalui cara-cara yang sederhana, Anda sanggup menambahkan fungsionalitas ke website tanpa harus menuliskan kode atau mengubah file konfigurasi. Sama menyerupai tema, ada ribuan plugin WordPress yang gratis dan berbayar. Berikut beberapa plugin yang harus ada di website Anda:

Wordfence Security: Plugin ini akan mengamankan website Anda dari para hacker. Plugin ini pun mempunyai segalanya yang dibutuhkan, mulai dari proteksi terhadap bahaya hingga scan keamanan. Informasi selengkapnya sanggup Anda baca di sini.

Google XML Sitemaps: Plugin resmi Google untuk pembuatan site map XML otomatis yang akan menciptakan website Anda tampil lebih baik di meningkatkan secara optimal mesin pencari. Untuk gosip selengkapnya sanggup Anda baca di sini.

Yoast SEO: Sebagai salah satu plugin SEO terpopuler untuk WordPress, Yoast SEO mempunyai lebih dari 5 juta instalasi yang aktif. Apa pun itu, baik meta-tag atau page analysis, dengan Yoast SEO, Anda tidak perlu menginstall plugin lain untuk meningkatkan peringkat SEO. Informasi selengkapnya sanggup Anda baca di sini.

Contact Form 7: Plugin WordPress yang sederhana dan berfungsi untuk menciptakan formulir kontak. Plugin ini sangat gampang diinstall dan Anda sanggup menciptakan gosip kontak yang responsif dan menentukan formulir. Informasi selengkapnya sanggup Anda baca di sini.

Menginstall plugin WordPress sama mudahnya dengan menginstall tema. Ikutilah beberapa langkah di bawah ini:

Buka Plugin di hidangan utama.

Klik tombol Add new.Install plugin WordPress

Di kolom pencarian yang muncul, masukkan nama plugin yang Anda inginkan untuk diinstall.

Klik Install now.

Setelah proses instalasi selesai, klik tombol Activate.

Meskipun Anda telah membeli sebuah plugin premium, Anda tidak akan menemukannya di direktori resmi. Mau tidak mau, Anda harus mengupload file-nya secara manual. Untuk melakukannya. ikutilah beberapa langkah di bawah ini:

Arahkan mouse di sekitar plugin dan klik tombol Add New.

Klik tombol plugin Upload yang ada di pecahan atas.

Klik browse dan pilih file plugin yang diarsipkan.

Setelah proses upload selesai, install plugin terlebih dulu, kemudian aktifkan.

Tutorial mendalam mengenai cara menginstall plugin di WordPress sanggup ditemukan di sini.

Menambahkan Konten ke WordPress

Pada WordPress, konten sanggup ditambahkan dalam dua cara: Anda dipersilakan untuk menciptakan post gres atau laman baru. Perbedaan di kedua cara tersebut terletak pada fakta bahwa post dibagi ke dalam dua kategori dan sanggup di-tag dan/atau di-arsipkan. Umumnya, pos merupakan entri blog atau artikel yang akan ditampilkan secara berurutan di website Anda dan sanggup disebut sebagai konten yang dipublikasikan menurut waktu. Sementara itu, laman bersifat statis. Contoh laman yakni halaman perihal kami atau hubungi kami.

Menambahkan post atau laman gres di WordPress

Untuk menciptakan post gres di website WordPress, ikuti langkah-langkah berikut ini:

Arahkan most ke Pos atau Laman dan klik Tambah Baru.

Masukkan gosip yang diperlukan di pos/laman Anda. Konten pos dibentuk di kotak besar yang sanggup dilihat di gambar di bawah ini. Anda sanggup memformat teks atau menambahkan gambar memakai toolbar yang tersedia.

Terdapat meta-box di sebelah kanan layar yang sanggup Anda gunakan:

Terbitkan: Anda sanggup menyimpan pos sebagai konsep atau melaksanakan pratinjau sebelum menerbitkan pos. Anda juga sanggup mengatur Kenampakan dan status pos. Setelah mengklik Terbitkan, pos Anda akan pribadi online.

Tag: Di sini, Anda sanggup menambahkan tag ke pos. Sayangnya, opsi ini tidak tersedia di laman.

Gambar Unggulan: Anda sanggup menambahkan gambar unggulan ke pos. Letak gambar beragam, tergantung pada tema.

Kategori: Tentukan kategori pos Anda. Jika ingin menciptakan kategori baru, klik tombol + Tambah Kategori Baru. Sayangnya, opsi ini tidak tersedia di Laman.

Menambahkan halaman depan statis:

Ketika Anda menambahkan pos ke WordPress, secara default, halaman depan website Anda akan menampilkan pos terbaru dalam urutan kronologis yang terbalik. Hanya saja, akan lebih baik kalau ada halaman depan statis di website Anda yang menyapa para pengunjung, alih-alih deretan pos. Membuat halaman depan statis yang sederhana sangatlah mudah, cukup ikuti langkah-langkah berikut ini:

Buka laman Laman -> Tambah Baru.

Masukkan judul laman gres yang berfungsi sebagai halaman utama.

Apabila tema yang Anda pilih ketika ini memperbolehkan Anda untuk mengubah halaman depan, maka pilihlah tempate melalui panel box Atribut Laman.

Anda sanggup menambahkan konten yang diinginkan di kotak konten dan klik terbitkan.

Buka Pengaturan -> Membaca.

Pilih tombol radio Halaman statis dan di hidangan dropdown, pilih Beranda.

Klik Simpan Perubahan.

Masih banyak hal yang sanggup Anda lakukan dengan WordPress, dan kami berusaha untuk sebisa mungkin menliskan topk-topik fundamental yang sekiranya cukup bagi Anda semoga sanggup lebih familiar dengan CMS ini dan mengetahui cara menciptakan website. Untuk lebih jelasnya, kunjungi situs resmi WordPress codex atau baca tutorial WordPress ini.

Opsi 2 – Cara Membuat Website dengan Website Builder

Salah satu cara menciptakan web di Hostinger yakni dengan memakai website builder. Tool ini sangat sempurna bagi siapa pun yang tidak ingin direpotkan dengan kode atau proses penginstallan CMS.

Fitur drag and drop memudahkan proses instalasi WordPress – Anda sanggup memasukkan banyak sekali jenis informasi: teks, gambar, tabel, galeri, atau formulir di website Anda dengan mudah.

Site builder Hsotinger mempunyai lebih dari 100 template, search engine friendly, dan secara default bersifat responsif. Hal ini berarti tampilan website Anda akan terlihat profesional di perangkat desktop dan mobile tanpa ada masalah. Berikut cara menciptakan website mengunakan website builder.

Anda akan melihat daftar template. Di sebelah kiri, ada kategori template sehingga Anda sanggup lebih gampang menentukan template yang diinginkan.

Klik tombol Preview untuk melihat bagaimana website Anda akan terlihat kalau telah ditambahkan template atau klik Select untuk melaksanakan langkah berikutnya.

Apabila butuh bantuan, panel Steps to do ada di sebelah kanan layar. Anda sanggup mengikuti langkah pembuatan website yang disarankan. Anda juga sanggup mengklik tanda tanya berwarna hijau untuk melihat klarifikasi terhadap hidangan site builder.

Website Builder Legend

Biasanya terdapat konten standar template yang terload di website. Hal pertama yang harus Anda lakukan yakni mengubahnya sehingga tampilan perihal website Anda bahwasanya akan terlihat. Anda sanggup melakukannya dengan mengklik di mana saja di website di mana teks tersebut ditulis. Anda juga sanggup menggubah warna, memformat atau mengubah ukuran teks dengan memakai toolbar editing.

Untuk menambahkan teks baru, klik opsi Text di hidangan dan drag ke mana saja pada kolom yang tersedia.

Untuk menambahkan gambar baru, klik Picture dan drag pada kolom yang tersedia. Segera setelahnya, sebuah jendela (window) akan terbuka, di mana Anda sanggup menentukan gambar. Setelah di-upload, Anda sanggup drag ke cater sesuai keinginan.

Anda sanggup menambahkan hidangan gres memakai opsi Menu di toolbar. Setelah hidangan dibuat, Anda sanggup memodifikasi item hidangan yang berbeda-beda.

Anda juga sanggup menambahkan map atau mengintegrasikan media umum memakai tool drag and drop yang sederhana.

Di pecahan Advanced, Anda akan melihat opsi, menyerupai Skype, Music, HTML, Calendar, AdSense, dan lain-lain.

Bagian Commerce akan mencari tool dan sistem pembayaran terpopuler. Gunakan tool tersebut kalau Anda ingin menciptakan website e-commerce.

Tombol Auto-layout di pecahan atas halaman akan membantu Anda dalam mensejajarkan semua elemen pada kolom secara otomatis dan menghindarkan Anda dari desain dengan cara manual. Seandainya, Anda tidak menyukai hasilnya, Anda sanggup mengembalikannya ke tampilan semula dengan mengklik tombol Undo.

Ketika semua perubahan, penambahan, dan pergantian telah dilakukan sesuai keinginan, Anda sanggup mempublikasikan website dengan mengklik tombol Publish di pecahan atas sebelah kiri. Anda juga sanggup menyimpan website sebagai konsep dengan mengklik Save draft.

Opsi 3 – Cara Membuat Website dari Awal

Di subbab ini, kami akan memperlihatkan cara menciptakan website statis dari awal dengan memakai HTML dan CSS. Website statis merupakan web yang tidak berubah, tergantung pada pengguna yang mengakses dan juga mempunyai konten tetap. Website statis mempunyai kelebihan dan kekurangan.

Kelebihan:

Website statis mempunyai performa cepat.

Website statis tidak tertaut ke database apa pun.

Pembuatannya gampang kalau dibandingkan dengan cara menciptakan website lainnya.

Kekurangan:

Membutuhkan lebih banyak waktu untuk mengelola dan memperbarui konten.

Tak ada cara untuk menampilkan konten apa pun secara dinamis kepada user/pengguna.

Cara menciptakan website statis juga membutuhkan code editor. Beberapa code editor terbaik adalah:

Notepad++

TextWrangler

Sublime Text

Cara menciptakan website memakai laman dasar HTML

Hypertext Markup Language (HTML) yakni markup bahasa untuk menciptakan halaman website.

Buka code editor yang dipakai dan tempel (paste) ke file kosong berikut ini.

<html>

<head>

<title>Your website's title here<title>

</head>

<body>

<p>

This is where content comes.

</p>

</body>

</html>

Klik save as di code editor dan simpan file dengan ekstensi .html (misalnya, website.html).

Buka file yang telah disimpan di dalam browser Anda. Pada awalnya, halaman website tersebut terlihat tidak menarik dan tidak menyerupai yang ada di bayangan Anda. Namun, ini hanyalah permulaan kalau menciptakan website dari nol.

Menambahkan CSS untuk menciptakan tampilan lebih menarik

CSS merupakan abreviasi dari Cascading Style Sheets yang memungkinkan Anda untuk mendesain website dan menerapkan style secara konsisten. Dengan CSS, Anda sanggup menggnakan jenis aksara untuk area tertentu di website Anda, mengubah warna di beberapa pecahan atau mengubah background website, dan lain-lain,

Untuk menciptakan style sheet, buka file teks gres dan simpan dengan nama style.css. File ini sebaiknya disimpan di direktori yang sama di mana file HTML halaman beranda Anda tersimpan. Untuk menciptakan file index membaca kode desain dari file CSS, buat link atau tautan di antara keduanya dengan menambahkan baris berikut ini ke dalam tag <head>:

Sampai ketika ini, yang sudah kita lakukan yakni menautkan file CSS dan file HTML. Gunakan CSS untuk membagi website ke dalam 5 pecahan dan dua kolom. Masukkan kode di bawah ini ke dalam file CSS Anda:

body {background: #F6E7E7; margin: 0 auto; padding: 0;text-align: center;}

a {color: #310909;}

#container {width: 1000px; margin: 0 auto; padding: 0; background;}

#header {width: 1000px; height: 180px; margin: 0 auto; padding: 0; border: 0; background: #f346e1;}

#sidebar {width: 300px; height: 410px; margin: 0; padding: 0; border: 0; float: left; background: #E83535;}

#content {width: 700px; height: 410px; margin: 0; padding: 0; border: 0; float: left; background: #8be0ef;}

#footer {width: 1000px; height: 70px; margin: 0; padding: 0; border: 0; float: left; background: #000000; color:#eee; clear:both;}

Value background sanggup mengontrol warna pecahan yang berbeda-beda, dan Anda sanggup mengubahnya sesuai keinginan. Kini kita sudah mempunyai lima pecahan di halaman: container, header, sidebar, body, dan footer. Nama kelima pecahan tersebut mengindikasikan fungsinya; area container intinya meliput keseluruhan website dan lebarnya sanggup diubah ke 1000px kalau dibutuhkan. Hanya saja, Anda juga harus mengubah dimensi pecahan lainnya semoga semuanya sejajar. Anda sanggup mengonfigurasikan lebar, tinggi, dan warna dari semua pecahan sesuai keinginan. Setelah semuanya selesai, update file beranda utama dengan memasukkan kode berikut ini:

<html>

<head>

<title>Your website’s title here</title>

<link rel="stylesheet" type="text/css" href="style.css">

</head>

<body>

<div id="container">

<div id="header"><p>Header Goes Here</p></div>

<div id="sidebar"><p>Left Navigation Goes Here</p></div>

<div id="content"><p>Content Goes Here</p></div>

<div id="footer"><p>Footer Goes Here</p></div>

</div>

</body>

</html>

Seperti yang Anda lihat, kami memakai tag <div> untuk membagi website ke dalam pecahan yang berbeda, dan dengan mengatur id-nya, kami pun menetapkan desain khusus untuk bagian-bagian tersebut yang akan dibaca melalui file CSS.

Cara menciptakan website sederhana dengan HTML dan CSS

Masih ada banyak hal yang sanggup Anda lakukan hanya dengan memakai CSS dan HTML.

Mengatur jenis huruf

Apabila Anda tidak ingin menambahkan spesifikasi aksara di file CSS atau HTML, maka teks akan menampilkan jenis aksara default yang ada di komputer Anda (biasanya Times New Roman). Dengan memakai CSS, Anda sanggup mengubah jenis aksara sesuai impian dan kebutuhan Anda.

#content p {font-family: Open Sans; font-size: 18px}

Ketika Anda menambahkan baris kode di atas ke style sheet (setelah #content), maka teks di paragraf akan memakai jenis huurf Open-Sans dan ukuran teks akan diatur ke 18px.

Menambahkan hyperlink

Pada ketika menciptakan website, terkadang Anda harus terhubung ke website eksternal atau ke pecahan berbeda yang ada di website Anda. Link, ketika diklik, yang akan mengarahkan Anda ke pecahan berbeda yang ada di website Anda atau ke website eksternal disebut hyperlink. “Href” merujuk pada tujuan link dan tag <a> yakni link-nya. Berikut contohnya:

Tambahkan tag <a href=”https://www.google.com”>Go to Google</a> ini ke body website Anda. Link tersebut akan terlihat sebagai Go to Google dan ketika pengunjung mengkliknya. link itu akan mengarahkan mereka ke beranda utama Google.

Menambahkan gambar

Dengan HTML, sangatlah gampang memakai tag dan mengarahkannya ke gambar yang Anda miliki. Tag <img> memungkinkan Anda untuk menambahkan gambar.

Di antara tanda kutip, sehabis serc, Anda sanggup menambahkan lokasi gambar. Dalam hal ini, gambar harus tersimpan di dalam direktori yang sama dengan file indeks Anda. String sehabis alt akan muncul di browser kalau gambar tidak sanggup diload.

Membuat tabel

Pengelolaan gosip terkadang menjadi suatu keharusan yang fungsional dalam HTML. Anda sanggup melakukannya dengan memakai tabel. Tabel tersebut dibentuk memakai tag <table>. Untuk menentukan header di dalam tabel, gunakan tag <th> (table header), sedangkan untuk baris, gunakan tag <tr> (table row). Sementara itu, gunakan tag <td> untuk menciptakan data tabel.

<table>

<tr>

<th>My Header 1</th>

<th>My Header 2</th>

<th>My Header 3</th>

</tr>

<tr>

<td>Data 1 for header 1</td>

<td>Data 1 for header 2</td>

<td>Data 1 for header 3</td>

</tr>

<tr>

<td>Data 2 for header 1</td>

<td>Data 2 for header 2</td>

<td>Data 2 for header 3</td>

</tr>

<tr>

<td>Data 3 for header 1</td>

<td>Data 3 for header 2</td>

<td>Data 3 for header 3</td>

</tr>

</table>

Setelah kode di atas dimasukkan, tampilan website Anda akan menjadi menyerupai ini.

Hasil selesai dari cara menciptakan website dengan HTML dan CSS dari awal

Not Angka Lengkap

Tips Cara Menciptakan Website

Menu Halaman Statis