Saat berselancar di internet, Anda sebenarnya sedang mengakses atau membuka situs web (halaman web). Website itu sendiri adalah sebuah dokumen yang diakses melalui internet menggunakan web browser dengan mengetikkan URL atau mengklik link website tersebut. Ada dua teknologi utama untuk membuat website, yaitu HTML dan CSS. Keduanya memiliki peran yang berbeda namun tidak dapat dipisahkan dalam pembuatan website modern
Untuk sebuah website, HTML bertugas untuk menentukan struktur dan jenis konten seperti paragraf, heading, list dan gambar, sedangkan CSS lebih pada menyajikan struktur dan konten agar lebih menarik seperti tata letak, warna, margin, padding, font -keluarga dan keselarasan. Tanpa CSS, Anda tetap bisa menampilkan konten pada website namun dengan tampilan yang tidak menarik
Baca artikel Cara Menulis atau Sintaks CSS
CSS dirancang untuk digunakan dengan HTML. Ada tiga cara berbeda untuk menggunakan CSS dengan HTML, yaitu inline CSS, internal CSS, dan eksternal CSS. Tergantung kebutuhan, ketiga cara penggunaan CSS ini bisa digunakan dalam membuat website. Berikut penjelasan singkat masing-masing cara penggunaan CSS dengan HTML
Baca artikel
1. CSS sebaris
CSS sebaris digunakan untuk memberi gaya pada tag atau elemen HTML tertentu. Anda dapat menggunakan atribut style untuk memberi gaya pada tag HTML. Gaya hanya berlaku untuk tag HTML. Style pada inline css memiliki prioritas utama dan akan digunakan (rendering) walaupun tag html juga sudah di style melalui internal css atau external css
Penggunaan inline CSS sebenarnya tidak disarankan karena setiap tag HTML perlu diberi style tersendiri. Saat Anda mengubah gaya di salah satu tag, untuk mendapatkan gaya yang konsisten, Anda juga perlu mengubah gaya di tag lainnya. Misal semua h1 berwarna merah, ketika ingin mengubah h1 menjadi hijau, maka perlu mengubah style di semua h1 satu per satu menjadi hijau
Berikut ini adalah contoh kode sederhana
Menggunakan CSS Dengan HTML
Ada dua teknologi utama dalam pembuatan web modern yaitu CSS dan HTML. Keduanya mempunyai peran berbeda namun tidak terpisahkan. Secara umum, ada tiga cara menggunakan CSS dengan HTML yaitu inline CSS, internal CSS dan external CSS.
2. CSS dalam
CSS internal digunakan untuk memberikan gaya yang hanya berlaku untuk satu situs web. Gaya yang diberikan dikelilingi oleh tag
dan ditempatkan di elemen kepala atau tag situs web. Anda dapat menggunakan CSS internal saat gaya hanya ditujukan untuk satu situs web dan tidak untuk digunakan di situs web lain. Anda dapat menggunakan CSS internal jika kode untuk gaya tidak terlalu besar atau rumitBerikut ini adalah contoh kode sederhana
Menggunakan CSS Dengan HTML
Ada dua teknologi utama dalam pembuatan web modern yaitu CSS dan HTML. Keduanya mempunyai peran berbeda namun tidak terpisahkan. Secara umum, ada tiga cara menggunakan CSS dengan HTML yaitu inline CSS, internal CSS dan external CSS.
_3. CSS eksternal
CSS eksternal adalah ekstensi file. css yang hanya berisi kode gaya. Tujuan penggunaan CSS eksternal adalah untuk memisahkan kode gaya dari struktur dan tipe konten situs web. CSS eksternal dapat diterapkan pada lebih dari satu website sehingga semua website akan memiliki tampilan atau desain yang seragam
Misalnya, buat file CSS bernama cssexternal. css menggunakan editor teks biasa seperti Notepad atau Notepad++. Tulis kode CSS di bawah ini sebagai gaya yang akan diterapkan di situs web. Simpan file CSS di folder yang sama tempat Anda menyimpan file HTML
body {background-color:yellow;} h2 {color:red;} p {color:blue;}
Buat file HTML dan di bagian tag tambahkan tautan atau elemen tag. Tagini akan digunakan untuk merujuk ke file CSS yang dibuat sebelumnya. Perhatikan tulisan dan atributnya untuk merujuk ke file CSS
Berikut ini adalah contoh kode sederhana
Menggunakan CSS Dengan HTML
Ada dua teknologi utama dalam pembuatan web modern yaitu CSS dan HTML. Keduanya mempunyai peran berbeda namun tidak terpisahkan. Secara umum, ada tiga cara menggunakan CSS dengan HTML yaitu inline CSS, internal CSS dan external CSS.
Ketiga cara penggunaan CSS dengan HTML di atas menghasilkan tampilan website yang persis seperti gambar di bawah ini
dengan html dan css? . Karena pada artikel kali ini kami akan memberikan panduan cara membuat website dengan mudahSebelum membahas teknisnya, kita bahas sedikit pengertian html dan css.
HTML adalah Hypertext Markup Language, html merupakan salah satu bahasa standar yang berperan penting dalam mengatur dan memformat halaman suatu website dan dokumen lainnya di World Wide Web.
Sementara CSS singkatan dari Cascading Style Sheets, css digunakan untuk membuat tampilan dan biasanya digabungkan dengan html
Jika Anda sedang terburu-buru dan ingin segera memiliki situs web, Anda dapat menggunakan jasa pembuatan situs web profesional atau Anda dapat mempelajari < /a>5 cara membuat website dengan WordPress.
Mari mulai belajar cara membuat website dengan html dan css
Daftar isi
Cara Membuat Website dengan HTML dan CSS
Sebelum kita membahas teknis cara membuat website dengan html dan css, ada beberapa tools yang perlu anda siapkan terlebih dahulu seperti web browser dan text editor. Dalam tutorial ini kami menggunakan editor teks notepad ++ dan browser web chrome
Anda bisa menggunakan tools apapun selain notepad++ dan chrome, pada tutorial kali ini kita hanya akan membuat website html dan css sederhana. Kurang lebih seperti apa tampilan website jika sudah jadi adalah sebagai berikut
Dalam proses pembuatan website dengan html dan css, kita akan menggunakan Bootstrap. Bootstrap adalah tool open source berupa struktur dasar dokumen html dan css. Dengan Bootstrap Anda akan dengan mudah membuat struktur situs web yang siap untuk pengoptimalan lebih lanjut
Intinya dengan bantuan bootstrap anda tidak perlu mengimplementasikan cara membuat website dengan html dari awal. Menarik bukan dan menghemat waktu?
Unduh Template Bootstrap HTML dan CSS
Dalam panduan cara membuat website dengan html ini, kita akan menggunakan salah satu template dari Start Bootstrap. Tenang, template yang digunakan gratis dan mudah dioptimalkan serta didesain dengan sangat baik
Ayo download templatenya dulu
Langkah 1. Buka situs web startbootstrap. com untuk mendapatkan template Start Bootstrap html dan css secara gratis dan gratis untuk digunakan.
Langkah 2. Klik Telusuri Template & Tema.
Langkah 3. Pilih salah satu template sesuai dengan kebutuhan anda, pada demo kali ini kami memilih template Creative karena gratis dan cukup simple jika dilihat dari tampilannya.
Langkah 4. Kemudian klik Unduh Gratis dan simpan file di lokasi yang mudah ditemukan.
Langkah 5. Setelah unduhan selesai, buka file dan pindahkan isinya ke direktori utama akun hosting situs web Anda. Untuk memulainya, Anda bisa menggunakan web hosting murah untuk mencoba menerapkan cara membuat website dengan html ini.
Langkah 6. Setelah mentransfer, buka file. Caranya klik dua kali pada file Index. html dan nantinya akan terbuka di browser chrome yang anda gunakan.
Kemudian kita lanjutkan ke pembahasan berikutnya
Sesuaikan Desain Web HTML dan CSS
Setelah selesai mendownload template html dan css yang nantinya akan kita gunakan sebagai desain utama website, saatnya memodifikasi homepage terlebih dahulu. Karena nanti di template yang sudah kita download ada beberapa part yang akan kita hapus dan sesuaikan dengan sketch yang sudah kita buat di demo ini
Ikuti saja langkah-langkah di bawah ini untuk mengetahui cara membuat website dengan html dan css dengan mudah dan cepat
Langkah 1. Pertama kami sarankan untuk membuat sketsa kasar terlebih dahulu untuk desain website yang akan dibuat. Dalam demo ini, kami telah membuat sketsa seperti di bawah ini.
Dalam panduan ini, kami akan membuat halaman situs web sederhana dengan konten tentang profil Anda. Kurang lebih jika kita melihat sketsa di atas, setidaknya halaman website memiliki menu navigasi, headline lengkap di bawah menu, konten utama di tengah dan footer.
Sekarang mari kita sesuaikan template sesuai dengan sketsa yang telah kita buat
Langkah 2. Buka file indeks. html, kita tentukan bagian yang akan dihapus dan bagian yang akan kita gunakan. Sekarang mari pelajari setiap baris demi baris dalam file indeks. html dan hapus beberapa baris yang tidak perlu, lihat penjelasan di bawah ini sebagai indikasi baris mana yang perlu Anda hapus.
- Menu Navigasi. Kode ditandai dengan komentar kita akan tetap menggunakan bagian ini.
- bagian Masthead. Bagian ini ditandai dengan komentar kami akan menggunakannya dan membuat beberapa perubahan.
- Tentang Bagian. Bagian ini ditandai dengan komentar
- Bagian portofolio. Pada bagian ini ditandai dengan
- Bagian Footer yang ditandai dengan akan kami gunakan juga.
- Bagian Contact yang ditandai dengan comment akan kami gunakan dan memodifikasinya.
- Sementara bagian Layanan & Ajakan Bertindak kami tidak akan menggunakannya, jadi Anda dapat menghapusnya nanti.
Langkah 3. Sekarang kita akan sedikit mengubah kode di bagian komentar
Dua baris pertama diubah menjadi kode di bawah ini
Tag baris Get Started! juga dihapus karena tidak diperlukan, jadi kodenya akan berubah menjadi ini.
Langkah 4. Simpan perubahan dan cek menggunakan browser chrome, jika hasilnya seperti di bawah ini maka proses modifikasi sudah berhasil.
Langkah 5. Kita ubah warnanya menjadi putih, caranya hapus bagian bg-primary code di tag
Sekali lagi kodenya seperti ini
bg-primary” id=”main-content”>
Isi teks di sini
Setelah bagian bg-primary (ditandai dengan huruf tebal) dihapus, kodenya akan menjadi seperti di bawah ini
Isi teks di sini
Langkah 6. Sekarang kita akan menambahkan beberapa paragraf, karena halaman website yang kita buat adalah untuk halaman pribadi maka kita tambahkan paragraf yang sesuai dengan profil pribadi yang ingin kita perkenalkan melalui halaman ini.
Ganti Isi teks di sini dengan teks versi Anda sendiri.
Panjang teks yang bisa anda tambahkan sesuai dengan kebutuhan anda, teks diatas hanyalah contoh pada demo ini
Langkah 7. Setelah menambahkan teks, langkah selanjutnya adalah menambahkan gambar. Karena website yang kita buat bertujuan untuk memperkenalkan profil, maka perlu ditambahkan foto profil.
Caranya adalah dengan menambahkan kode di bawah ini.
Catatan . Nama file gambar, sesuaikan dengan file gambar yang anda gunakan.
Langkah 8. Selanjutnya kita akan memodifikasi bagian portfolio, karena website yang kita buat untuk SEO Content Writer Tech freelancer ini akan kita tambahkan link yang bisa di klik. Kode untuk bagian Portofolio adalah sebagai berikut.
Kategori dapat diubah menjadi nama klien.
Nama Proyek dapat diganti dengan nama proyek yang sudah dikerjakan. Contohnya adalah sebagai berikut.
Dan hasilnya akan seperti berikut
Anda juga dapat menyesuaikan bagian gambar dengan proyek yang sedang Anda kerjakan. Mengganti gambar sangat mudah, Anda hanya perlu menambahkan gambar ke direktori template assets/img/portfolio/fullsize dan untuk gambar thumbnail ke direktori assets/img/portfolio/thumbnails .
Selanjutnya pada bagian kode html, ganti nama gambar sebelumnya dengan nama file gambar yang baru, lihat gambar di bawah ini
Sekarang kita lanjutkan ke langkah 9 untuk memodifikasi bagian kontak
Langkah 9. Masih dalam file indeks. html, kami akan mengubah bagian kontak, yaitu menghapus bagian formulir kontak. Kami ingin pengunjung menghubungi langsung pemilik website melalui nomor telepon atau email yang tertera disana.
Di bagian contact yang ditandai dengan hapus semuanya dan ganti dengan kode di bawah ini:
Hubungi.
Siap memulai proyek Anda berikutnya bersama kami? .
Hasilnya akan seperti di bawah ini
Langkah 10. Kami tidak mengubah bagian Masthead, bagian ini adalah tajuk utama situs web. Oke kita lanjut ke langkah terakhir mengubah bagian Masthead, rubah terlebih dahulu teks "Tempat Favorit Anda untuk Tema Bootstrap Gratis" menjadi headline yang Anda inginkan.
Dalam demo ini kami mengubah teks “Tempat Favorit Anda untuk Tema Bootstrap Gratis” menjadi “ Saya Siap Menulis SEO Konten Teknologi Epik”. Sedangkan bagian sub konten berisi penjelasan singkat tentang layanan content writer teknologi.
Misalnya kita ubah menjadi seperti di bawah ini
Bagian terakhir merubah judul dan merk navbar, cara merubahnya bisa anda lihat pada gambar di bawah ini
Selesai, sekarang Anda sudah berhasil membuat halaman website sederhana dengan menggunakan template dari Bootstrap.
Kesimpulan
Itulah cara membuat website dengan html dan css yang bisa anda coba untuk membuat website impian anda. Hanya dengan menggunakan template gratis dari Bootstrap, Anda sudah bisa membuat website yang responsif
Namun, jika Anda tidak memiliki waktu untuk mempraktekkan cara membuat website ini, Anda dapat menggunakan jasa pembuatan website profesional atau membuat website menggunakan WordPress, cek artikel tentang cara membuat website dengan WordPress.
Oh ya, website yang anda buat pada demo ini masih statis karena hanya terdiri dari html dan css, tidak ada database atau yang lainnya. Selain itu, website tersebut hanya bisa diakses secara offline, karena semua asetnya tersimpan di komputer.
Lantas, bagaimana agar dilihat banyak orang? . Bagaimana Anda membutuhkan layanan hosting untuk menyimpan aset situs web Anda
Namun, Anda tidak bisa sembarangan membeli web hosting, karena nantinya akan mempengaruhi performa website. Sebagai salah satu pertimbangan, Anda bisa menggunakan salah satu layanan web hosting dari Exabytes Indonesia yang telah dilengkapi dengan fitur keamanan yang mumpuni.
Anda siap membangun website sendiri, tinggal pilih layanan hosting Anda dan miliki website impian Anda