tips cara membuat website


Salah satu langkah dalam menentukan identitas digital Anda adalah dengan membuat website. Adanya kemajuan dalam pengembangan website memudahkan kita dalam membuat website: kita dapat menggunakan sistem manajemen konten, atau memanfaatkan website builder, atau kita bisa mengaplikasikan cara membuat website dari awal. Di tutorial ini, kami akan menjelaskan semua cara yang telah disebutkan di atas dan menampilkan langkah-langkah membuat situs.

Anda tidak perlu khawatir jika belum pernah membuat dan mengembangkan 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 manajemen konten merupakan tool pengembangan tingkat lanjut yang dapat digunakan untuk membuat 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 bisa Anda dapatkan dengan drag dan dropping menggunakan website builder modern.
Membuat kode untuk pembuatan website dari nol: Opsi ketiga yang tersedia adalah membuat website dari awal. Teknologi yang digunakan untuk membuat website statis adalah HTML dan CSS.

Langkah 2 – Mencari Hosting dan Nama Domain
Agar website tampil di internet, Anda harus membeli web hosting dan membuat domain agar situs Anda dapat dengan mudah diakses Anda juga dapat mendapatkan web hoating yang gratis.

Memilih Web Hosting

Hosting Hostinger dioptimalkan untuk WordPress (misalnya,, WP CLI, WordPress caching, dan lain-lain).Website builder yang mudah digunakan sehingga Anda dapat melakukan drag and drop untuk membuat website yang menarik.
Tak ada kendala saat hendak mengaktifkan dan menjalankan website PHP di hosting Hostinger. Anda dapat menjalankan Laravel, CodeIgniter, mengintegrasikan dengan GIT Anda, dan memperoleh akses SSH ke server Anda.
Sertifikat SSL juga disediakan oleh Hostinger.
Masa trial selama 30 hari bebas risiko memberikan Anda kesempatan mencoba semua layanan sebelum akhirnya Anda melakukan pembelian.
Apabila memilih paket premium atau bisnis, maka Anda akan mendapatkan satu nama domain gratis.
Anda dapat membuat sebanyak mungkin alamat email yang Anda inginkan (Benar sekali, tidak terbatas!).

Memilih Nama Domain
Sederhananya, domain adalah nama website Anda. Memilih nama domain yang baik dan tepat juga merupakan salah satu hal mendasar dan terpenting. Domain berfungsi untuk mengarahkan pengguna mengunjungi website Anda. Oleh karena itu, jangan sampai salah membuat nama domain.

Berikut ada beberapa tips yang sebaiknya Anda ketahui sebelum memilih dan membuat nama domain:

Nama domain harus singkat: Siapa pun pasti tidak ingin mengetik nama domain yang terlalu panjang, seperti Googletutorialmembuatwebsite.com.
Nama domain setidaknya memberi gambaran tentang website Anda kepada para pengunjung.
Pilih ekstensi domain yang benar: Ekstensi domain adalah bagian dari domain yang letaknya setelah tanda titik (.). Domain .com paling banyak dipilih. Namun, tentu saja, pemilihan ini berdasarkan pada kebutuhan Anda atau isi website dan ada kemungkinan bagi Anda untuk memilih ekstensi domain yang berbeda.
Cara pengucapan atau pengejaan nama domain: Nama domain Anda harus mudah diucap dan diingat.
Sama seperti layanan hosting lainnya, Hostinger juga menyediakan layanan pendaftaran nama domain. Anda dapat menggunakan tool cek domain untuk memilih nama domain yang diinginkan.



Langkah 3 – Cara Membuat Website
Setelah mendapat tempat hosting untuk situs Anda dan nama domain yang akan digunakan, Anda sudah bisa memulai membuat website sendiri. bonbontutorial akan menjelaskan 3 cara membuat 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 melakukan semuanya untuk Anda; meskipun di bawah ini kami juga akan membahas cara menginstall WordPress menggunakan FTP secara manual.

Menginstall melalui auto-installer
Login ke akun hosting Anda dan di control panel, klik ikon auto-installer.
Di kolom pencarian, ketik WordPress. Apabila yang Anda lihat di hasil pencarian adalah WordPress versi terbaru, jangan ragu untuk mengkliknya.
Masukkan URL (Alamat website Anda. Kosongkan saja jika 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 memberikan Anda kemudahan yang diinginkan dalam membuat website di WordPress. Namun, jika auto-installer tersebut bermasalah, atau Anda ingin membuat website dengan cara manual, maka Anda bisa menginstall WordPress menggunakan FTP untuk mentransfer file. Ikuti beberapa langkah di bawah ini:

Menginstall melalui FTP
Mengonfigurasikan WordPress
Setelah menginstall WordPress, maka langkah selanjutnya adalah 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 dibuat setelah 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 bagian 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 dapat 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 bisa menonaktifkan kolom komentar di suatu post setelah 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 berdasarkan 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 saat 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 menggunakan aplikasi file apa pun (misalnya FileZilla)
Cari dan unduh file .htaccess.
Buka file tersebut dan di bagian akhir, tambahkan baris kode ini:
Options-Indexes
Klik simpan.
Upload kembali file menggunakan 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 keinginan dan kebutuhan. Selain itu, plugin WordPress juga memberi Anda kesempatan untuk membuat website lebih profesional. Kami akan membahas kedua entitas ini, satu per satu.

Menginstall Tema WordPress
WordPress memberikan kontribusi besar di komunitas sehingga banyak sekali tema, baik gratis maupun berbayar, yang tersedia. Berbagai tema WordPress gratis bisa Anda temukan di sini. Website, seperti ThemeForest, juga merupakan situs yang tepat apabila Anda mencari tema gratis dan berbayar. Jika Anda merasa sulit memilih tema yang tepat untuk website, silakan baca artikel yang memuat tentang tema WordPress gratis dan terbaik.

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

Klik bagian Apperance di administrator area.
Klik tombol Add New.
Anda bisa mencari tema yang tersedia, lalu klik salah satu. Klik Install, lalu Activate untuk melihat tema baru yang dipilih.Menginstall tema baru di website WordPress
Apabila Anda ingin menambahkan tema baru 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 langsung 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 pasti Anda akan memilih 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 bisa membuat editan sebanyak mungkin, tergantung pada kebutuhan dan keinginan Anda. Simpan file tersebut dengan mengklik Update file.
Anda juga dapat mengubah tema dengan memodifikasi konten file functions.php. Dengan demikian, Anda bisa menambahkan/menghapus/mengubah aspek fitur, fungsionalitas, dan desain tema. File fungsi bertanggung jawab terhadap fungsi tema dan dengan menambahkan kode PHP, tema tersebut dapat diganti atau diubah. Anda bisa mengetahuinya lebih jelas 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 melakukan instalasi plugin melalui cara-cara yang sederhana, Anda dapat menambahkan fungsionalitas ke website tanpa harus menuliskan kode atau mengubah file konfigurasi. Sama seperti 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 memiliki segalanya yang dibutuhkan, mulai dari perlindungan terhadap ancaman hingga scan keamanan. Informasi selengkapnya dapat Anda baca di sini.
Google XML Sitemaps: Plugin resmi Google untuk pembuatan site map XML otomatis yang akan membuat website Anda tampil lebih baik di optimasi mesin pencari. Untuk informasi selengkapnya dapat Anda baca di sini.
Yoast SEO: Sebagai salah satu plugin SEO terpopuler untuk WordPress, Yoast SEO memiliki 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 dapat Anda baca di sini.
Contact Form 7: Plugin WordPress yang sederhana dan berfungsi untuk membuat formulir kontak. Plugin ini sangat mudah diinstall dan Anda dapat membuat informasi kontak yang responsif dan menentukan formulir. Informasi selengkapnya dapat Anda baca di sini.
Menginstall plugin WordPress sama mudahnya dengan menginstall tema. Ikutilah beberapa langkah di bawah ini:

Buka Plugin di menu 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 bagian atas.
Klik browse dan pilih file plugin yang diarsipkan.
Setelah proses upload selesai, install plugin terlebih dulu, lalu aktifkan.
Tutorial mendalam mengenai cara menginstall plugin di WordPress dapat ditemukan di sini.

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

Menambahkan post atau laman baru di WordPress
Untuk membuat post baru di website WordPress, ikuti langkah-langkah berikut ini:

Arahkan most ke Pos atau Laman dan klik Tambah Baru.
Masukkan informasi yang dibutuhkan di pos/laman Anda. Konten pos dibuat di kotak besar yang dapat dilihat di gambar di bawah ini. Anda dapat memformat teks atau menambahkan gambar menggunakan toolbar yang tersedia.
Terdapat meta-box di sebelah kanan layar yang bisa Anda gunakan:
Terbitkan: Anda dapat menyimpan pos sebagai konsep atau melakukan pratinjau sebelum menerbitkan pos. Anda juga dapat mengatur Kenampakan dan status pos. Setelah mengklik Terbitkan, pos Anda akan langsung online.
Tag: Di sini, Anda dapat menambahkan tag ke pos. Sayangnya, opsi ini tidak tersedia di laman.
Gambar Unggulan: Anda dapat menambahkan gambar unggulan ke pos. Letak gambar beragam, tergantung pada tema.
Kategori: Tentukan kategori pos Anda. Jika ingin membuat 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 jika 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:

Login ke administrator area WordPress Anda.
Buka laman Laman -> Tambah Baru.
Masukkan judul laman baru yang berfungsi sebagai halaman utama.
Apabila tema yang Anda pilih saat ini memperbolehkan Anda untuk mengubah halaman depan, maka pilihlah tempate melalui panel box Atribut Laman.
Anda dapat menambahkan konten yang diinginkan di kotak konten dan klik terbitkan.
Buka Pengaturan -> Membaca.
Pilih tombol radio Halaman statis dan di menu dropdown, pilih Beranda.
Klik Simpan Perubahan.
Masih banyak hal yang bisa Anda lakukan dengan WordPress, dan kami berusaha untuk sebisa mungkin menliskan topk-topik mendasar yang sekiranya cukup bagi Anda agar bisa lebih familiar dengan CMS ini dan mengetahui cara membuat 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 membuat web di Hostinger adalah dengan menggunakan website builder. Tool ini sangat tepat bagi siapa pun yang tidak ingin direpotkan dengan kode atau proses penginstallan CMS.

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

Site builder Hsotinger memiliki 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 membuat website mengunakan website builder.

Login ke control panel Hostinger. Pada dashboard, scroll ke bawah ke bagian website dan klik Website Builder.

Anda akan melihat daftar template. Di sebelah kiri, ada kategori template sehingga Anda bisa lebih mudah memilih template yang diinginkan.



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

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

Website Builder Legend

Biasanya terdapat konten standar template yang terload di website. Hal pertama yang harus Anda lakukan adalah mengubahnya sehingga tampilan tentang website Anda sesungguhnya akan terlihat. Anda dapat melakukannya dengan mengklik di mana saja di website di mana teks tersebut ditulis. Anda juga dapat menggubah warna, memformat atau mengubah ukuran teks dengan menggunakan toolbar editing.



Untuk menambahkan teks baru, klik opsi Text di menu 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 dapat memilih gambar. Setelah di-upload, Anda bisa drag ke cater sesuai keinginan.

Anda dapat menambahkan menu baru menggunakan opsi Menu di toolbar. Setelah menu dibuat, Anda bisa memodifikasi item menu yang berbeda-beda.

Anda juga dapat menambahkan map atau mengintegrasikan media sosial menggunakan tool drag and drop yang sederhana.

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

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

Tombol Auto-layout di bagian 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 bisa mengembalikannya ke tampilan semula dengan mengklik tombol Undo.

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

Opsi 3 – Cara Membuat Website dari Awal
Di subbab ini, kami akan menunjukkan cara membuat website statis dari awal dengan menggunakan HTML dan CSS. Website statis merupakan web yang tidak berubah, tergantung pada pengguna yang mengakses dan juga memiliki konten tetap. Website statis memiliki kelebihan dan kekurangan.

Kelebihan:

Website statis memiliki performa cepat.
Website statis tidak tertaut ke database apa pun.
Pembuatannya mudah jika dibandingkan dengan cara membuat 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 membuat website statis juga membutuhkan code editor. Beberapa code editor terbaik adalah:

Notepad++
TextWrangler
Sublime Text
Cara membuat website menggunakan laman dasar HTML
Hypertext Markup Language (HTML) adalah markup bahasa untuk membuat halaman website.

Buka code editor yang digunakan 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 seperti yang ada di bayangan Anda. Namun, ini hanyalah permulaan jika membuat website dari nol.

Menambahkan CSS untuk membuat tampilan lebih menarik
CSS merupakan singkatan dari Cascading Style Sheets yang memungkinkan Anda untuk mendesain website dan menerapkan style secara konsisten. Dengan CSS, Anda dapat menggnakan jenis huruf untuk area tertentu di website Anda, mengubah warna di beberapa bagian atau mengubah background website, dan lain-lain,

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

<link rel="stylesheet" type="text/css" href="style.css">
Sampai saat ini, yang sudah kita lakukan adalah menautkan file CSS dan file HTML. Gunakan CSS untuk membagi website ke dalam 5 bagian 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 dapat mengontrol warna bagian yang berbeda-beda, dan Anda dapat mengubahnya sesuai keinginan. Kini kita sudah memiliki lima bagian di halaman: container, header, sidebar, body, dan footer. Nama kelima bagian tersebut mengindikasikan fungsinya; area container pada dasarnya meliput keseluruhan website dan lebarnya dapat diubah ke 1000px jika dibutuhkan. Hanya saja, Anda juga harus mengubah dimensi bagian lainnya agar semuanya sejajar. Anda dapat mengonfigurasikan lebar, tinggi, dan warna dari semua bagian 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 menggunakan tag <div> untuk membagi website ke dalam bagian yang berbeda, dan dengan mengatur id-nya, kami pun menetapkan desain khusus untuk bagian-bagian tersebut yang akan dibaca melalui file CSS.

Cara membuat website sederhana dengan HTML dan CSS

Masih ada banyak hal yang bisa Anda lakukan hanya dengan menggunakan CSS dan HTML.

Mengatur jenis huruf
Apabila Anda tidak ingin menambahkan spesifikasi huruf di file CSS atau HTML, maka teks akan menampilkan jenis huruf default yang ada di komputer Anda (biasanya Times New Roman). Dengan menggunakan CSS, Anda dapat mengubah jenis huruf sesuai keinginan 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 menggunakan jenis huurf Open-Sans dan ukuran teks akan diatur ke 18px.

Menambahkan hyperlink
Pada saat membuat website, terkadang Anda harus terhubung ke website eksternal atau ke bagian berbeda yang ada di website Anda. Link, ketika diklik, yang akan mengarahkan Anda ke bagian berbeda yang ada di website Anda atau ke website eksternal disebut hyperlink. “Href” merujuk pada tujuan link dan tag <a> adalah 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 mudah menggunakan tag dan mengarahkannya ke gambar yang Anda miliki. Tag <img> memungkinkan Anda untuk menambahkan gambar.

<img src="cat.jpg" alt="Cute Cat">
Di antara tanda kutip, setelah serc, Anda dapat menambahkan lokasi gambar. Dalam hal ini, gambar harus tersimpan di dalam direktori yang sama dengan file indeks Anda. String setelah alt akan muncul di browser jika gambar tidak bisa diload.

Membuat tabel
Pengelolaan informasi terkadang menjadi suatu keharusan yang fungsional dalam HTML. Anda dapat melakukannya dengan menggunakan tabel. Tabel tersebut dibuat menggunakan 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 membuat 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 seperti ini.

Hasil akhir dari cara membuat website dengan HTML dan CSS dari awal



EmoticonEmoticon