Ingin Membuat Website dengan HTML dan CSS. Kenali Dulu Keduanya!

Sumber: www.freepik.com

Ingin belajar cara membuat website dengan HTML dan CSS? Anda berada di tempat yang tepat. Kami akan memperkenalkan apa itu HTML dan CSS serta penggunaan dasar dari keduanya. Simak penjelasannya berikut ini.

Jika Anda adalah seorang web developer, Anda pasti sudah memahami bahwa HTML dan CSS memiliki peran penting dalam pembuatan website. HTML adalah bahasa markup yang digunakan untuk mengembangkan halaman web, sedangkan CSS merupakan bahasa yang digunakan untuk mendefinisikan presentasi dokumen yang sudah ditulis dalam HTML.

Jika Anda dapat memahami bagaimana kedua bahasa tersebut bekerja bersama, maka Anda akan jauh lebih mudah ketika harus membuat website dengan HTML dan CCS. Oleh karena itu sebelum kami informasikan bagaimana cara membuat website, berikut kami sediakan sedikit gambaran mengenai apa itu HTML dan CSS terlebih dahulu.

Apa itu HTML dan CSS?

Secara garis besar, HTML (Hypertext Markup Language) dan CSS (Cascading Style Sheets) merupakan dua teknologi inti yang dipergunakan untuk membangun halaman Web. Berikut penjelasan untuk masing-masing teknologi tersebut:

  • Pengertian HTML

HTML adalah bahasa markup untuk menggambarkan struktur halaman Web. Para web developer web akan menggunakan HTML keywords atau tags untuk menginstruksikan web browser bagaimana cara memformat dan menampilkan konten halaman website. Jadi, HTML akan memberitahu web browser bagian mana dari halaman web yang menjadi header, bagian mana yang merupakan footer, di mana  letak paragraf berada, di mana video ditempatkan, dan lain-lain. 

CSS adalah bahasa style sheet yang dipergunakan untuk menggambarkan tampilan dan format dokumen yang sudah ditulis dalam bahasa markup seperti HTML (HyperText Markup Language). Dengan CSS, Anda dapat menggambarkan presentasi atau tampilan halaman website seperti warna teks, gaya font, layout, dan masih banyak lagi.

Baca Juga: 9 Tips Membuat Web E-commerce yang Sukses untuk Bisnis

Cara Membuat Website dengan HTML dan CSS

1. Pelajari dasar-dasar HTML

Cara membuat website dengan HTML dan CSS adalah belajar dasar-dasar HTML. Ini perlu Anda lakukan karena pemahaman yang baik tentang HTML akan berpengaruh pada kesuksesan Anda saat membuat website.

Perlu Anda ketahui elemen utama dari struktur HTML adalah HTML tag dan dalam proses pembuatan website terdapat beragam HTML tag yang akan dipergunakan. Sebagai contoh, HTML tag akan terlihat sebagai berikut:

< b > EXAMPLE < /b >

Pada contoh di atas, HTML tag yang dipergunakan adalah <b>. Tag tersebut berfungsi untuk menebalkan sepotong text “example” yang berada di antara tag pembuka  ( <b>)  dan tag penutup ( </b>). Beberapa contoh HTML tag sederhana yang sering dipergunakan yaitu:

<i>…</i> digunakan untuk membuat teks miring antara tag pembuka dan penutup

<u>…</u> akan menggarisbawahi teks

<p>…</p> menentukan paragraf teks

<h1>…</h1> membuat tajuk utama pada halaman

Selain itu, Anda juga perlu mempelajari HTML tag lain seperti HTML tag untuk membuat daftar/list, menambahkan link ke halaman web yang lain, dan masih banyak lagi. Jadi, pelajari terlebih dahulu dasar-dasar HTML agar Anda dapat mengembangkan website sesuai dengan apa yang Anda harapkan.

2.  Pelajari struktur dokumen HTML

Halaman HTML dapat diibaratkan seperti permainan lego. Ketika ingin membangun sebuah model benda, Anda perlu meletakkan susunan lego brick satu persatu. Sama seperti halaman HTML, ketika Anda ingin membuat website dengan HTML dan CSS maka terlebih dahulu Anda harus menyusun HTML tag satu persatu menjadi struktur dokumen HTML yang baik. Karena alasan tersebut, maka Anda harus memahami struktur dokumen HTML yang baik.  

Berikut adalah contoh struktur dokumen HTML sederhana

<!doctype html>

<html lang="id">

  <head>

    <meta charset="utf-8">

    <title>Tentang Kami</title>

  </head>

  <body>

    <h1>Profil Perusahaan</h1>

    <p>Contoh paragraf</p>

  </body>

</html>

Penjelasan:

<!doctype html> : deklarasi awal dokumen HTML

<html lang=”id”> : dipergunakan untuk menjelaskan bahasa apa yang Anda pergunakan. Di sini kami memberi contoh “id” untuk Bahasa Indonesia.

<head> : untuk menandai bagian yang menjadi “head” di halaman :  

<meta charset=”utf-8″> : untuk mendefinisikan set karakter apa yang digunakan untuk menulis dokumen

<title>Tentang Kami</title> : judul halaman website yang Anda gunakan

<body> : untuk menandai bagian yang menjadi awal “body” halaman website. Sedangkan </body> untuk menutup “body” halaman.

<h1>Profil Perusahaan</h1> : heading 1 atau tajuk utama pada halaman website. 

<p>Contoh paragraf</p> : tempat Anda menulis paragraf.

</html> : tag untuk menutup seluruh dokumen HTML yang sudah Anda buat.

Untuk memudahkan Anda dalam menyusun struktur HTML, Anda dapat mempergunakan HTML editor seperti Notepad++, VSCode, Sublime Text, atau yang lain.

Setelah Anda selesai membuat struktur dokumen HTML, Anda dap mengambil index.html file tersebut dan menyalinnya ke direktori utama web server Anda. Perlu Anda ingat, pada tahap ini tampilan we masih sangat sederhana.

3. Pelajari CSS Selectors

Jika HTML memiliki tags, maka CSS memiliki selectors. Pada dasarnya, selectores dipergunakan untuk menggambarkan bagaimana elemen tertentu harus berperilaku pada sebuah tampilan website. Sebagai contoh:

p {

  text-align: center;

  color: red;

}

Pada contoh di atas,  semua elemen <p> pada halaman akan diratakan ke tengah dengan warna teks merah.

Agar lebih mudah, Anda juga bisa menggunakan CSS class selectors untuk menerapkan gaya untuk masing-masing unsur yang cocok dengan memilih semua elemen yang ditentukan class name. Untuk memilih elemen dengan kelas tertentu, tulis karakter titik (.), diikuti dengan class name. Sebagai contoh:

.center {

  text-align: center;

  color: red;

}

Pada contoh di atas, semua elemen HTML dengan class=”center” akan berwarna merah dan rata tengah.

Agar Anda dapat membuat tampilan website yang menarik, Anda dapat mempelajari beragam properti CSS. 

MEMBUAT WEBSITE DENNGAN HTML DAN CSS
Sumber: www.pixabay.com/vectorjuice

Baca Juga: Belajar CSS : Memahami Pengertian dan Jenisnya

4. Kumpulkan dokumen CSS atau CSS stylesheet

Dokumen CSS atau stylesheet, pada dasarnya merupakan daftar dari semua definisi kelas yang digunakan dalam dokumen HTML. Cara untuk menyatukan CSS stylesheet adalah dengan mendefinisikan satu per satu setiap kelas dan mengujinya untuk melihat apakah hasil yang ditampilkan sesuai dengan apa yang Anda inginkan.

Untuk memudahkan proses ini saat Anda membuat website dengan HTML dan CSS, maka  Anda bisa menggunakan Bootstrap yang akan kami jelaskan pada point selanjutnya.

5. Gunakan Bootstrap 

Bootstrap adalah tool open-source yang dipergunakan untuk membuat situs website dengan HTML dan CSS. Tool ini dapat menangani struktur dasar dokumen HTML dan CSS stylesheet untuk Anda.

Cara membuat website dengan HTML dan CSS menggunakan Bootstrap dinilai lebih mudah. Ketika Anda memutuskan menggunakan Bootstrap, Anda dapat menggunakan starter pack Bootstrap dengan desain yang menarik dan  halaman web demo yang sudah dibuat. Jadi, Anda bebas menggunakan template Bootstrap apapun yang Anda suka.

Pada panduan kali ini, kami akan memberikan contoh untuk menggunakan template dari startbootstrap.com. Di halaman web ini, Anda akan menemukan berbagai tema website yang bisa Anda gunakan. Di sini, Anda dapat memilih salah satu tema yang paling Anda sukai. Setelah itu, klik tombol download yang sudah disediakan.

Setelah itu, Anda dapat membuka zip paket tema yang sudah Anda download dan memindahkan isinya ke direktori utama server web lokal Anda atau akun hosting website. Sekarang Anda dapat membuka file tersebut melalui web browser Anda dan mengaturnya kembali menggunakan HTML dan CSS untuk membuat tampilan web seperti yang Anda inginkan.

7.  Menyesuaikan tampilan website dengan HTML dan CSS

Anda dapat menyesuaikan tampilan halaman saat membuat website dengan HTML dan CSS. Anda membuka file index.html dari Bootstrap Anda di HTML editor untuk mengubah tampilan halaman web Anda. Jika Anda sudah memahami HTML tags dan CSS selectors dengan baik, Anda akan sangat terbantu dalam proses ini.

Sebagai contoh, saat Anda ingin mengubah title halaman website, maka Anda dapat mencari title tag di bagian head dan ganti teks di antara tag dengan teks atau judul yang Anda inginkan. Selain memodifikasi teks, Anda juga dapat mengubah warna dan jenis font halaman web Anda. Mengubah warna atau font sangat mudah dilakukan di HTML dan CSS. Hal paling sederhana yang dapat Anda lakukan adalah menetapkan beberapa gaya in-line ke tag HTML. Contohnya seperti berikut:

<p style="color: #FF0000;">Red text</p>

Perlu Anda ketahui, dalam HTML, warna akan diwakili oleh nilai heksanya. Untuk warna merah, nilai heksa yang dipergunakan adalah “#FF0000” untuk warna merah. Anda juga bisa mengubah warna melalui CSS stylesheet. Misalnya, untuk mendapatkan efek yang sama seperti kode di atas, Anda bisa memasukkan perintah ini ke dalam stylesheet CSS Anda:

p.red {

color: #FF0000;

}

Setelah itu, kemudian gunakan potongan kode HTML berikut di dokumen utama:

<p class="red">Red text</p>

Pada dasarnya, untuk mengubah warna teks maka hal pertama yang perlu Anda lakukan adalah menemukan  tag yang bertanggung jawab untuk mengatur style teks tersebut. Setelah itu, buka stylesheet dan modifikasi class yang sesuai atau buat class baru. Berikut kami sediakan contoh lain untuk Anda:

Terdapat heading bertuliskan “Layanan Perusahaan” yang saat ini berwarna hitam. Kode yang ditampilkan adalah sebagai berikut:

<h2 class="text-center">Layanan Perusahaan</h2>

Pada kasus ini, Anda ingin mengubah teks tersebut menjadi berwarna orange. Untuk mengatur ulang warna teks, Anda dapat membuat kelas baru .text-orange dan atur nilai warna tersebut:

.text-orange {

  color: #f4623a !important;

}

Sebagai informasi, !important yang digunakan pada contoh diatas dipergunakan untuk memastikan bahwa pengaturan warna ini akan menimpa pengaturan warna sebelumnya. Sekarang, Anda dapat kembali membuka header halaman dan mengubah kode yang digunakan menjadi:

<h2 class="text-center text-orange">At Your Service</h2>

8. Membuat halaman baru

Jika Anda ingin membuat halaman baru, cara termudah yang bisa Anda lakukan adalah dengan menduplikasi halaman yang sudah ada kemudian menggunakannya sebagai template. Sebagai contoh, Anda ingin membuat halaman “tentang kami. Jadi, Anda dapat membuat salinan file index.html dan mengubah nama file tersebut menjadi nama lain, contohnya seperti about.html. Setelah itu, Anda dapat menelusuri isi file tersebut dan menyesuaikan kembali tampilan / isi website sesuai dengan apa yang Anda inginkan.

Baca Juga: Tips dan Cara Membuat Website Menggunakan WordPress

Kesimpulan

Dengan tips cara membuat website dengan HTML dan CSS di atas, Anda dapat memiliki halaman website sederhana. Seperti yang kami jelaskan di awal, agar website Anda memiliki tampilan dan susunan konten yang sesuai dengan apa yang Anda inginkan, maka Anda perlu memahami dasar-dasar HTML dan CSS dengan baik.

Jika saat ini Anda membutuhkan bantuan untuk pembuatan website perusahaan, e-commerce, ataupun aplikasi mobile, Anda dapat memanfaatkan jasa pembuatan website LOGIQUE. Kami memiliki tim developer profesional yang sudah berpengalaman untuk mengembangkan web dan aplikasi berskala besar.

Untuk informasi lebih lanjut, silakan hubungi LOGIQUE. Anda juga dapat melihat klien-klien yang sudah pernah kami handle di halaman portofolio LOGIQUE

Feradhita NKD
Feradhita NKD

https://www.logique.co.id/blog/author/feradhita/

Hai! Saya adalah content writer berpengalaman dengan minat mendalam di dunia teknologi. Saya senang menjelajahi tren terbaru di dunia IT, pentest, keamanan siber, dan menerjemahkan informasi teknis menjadi tulisan yang menarik. Dengan fokus pada kebutuhan audiens dan penggunaan bahasa sederhana, saya berusaha menyajikan informasi kompleks dengan cara yang mudah dipahami.

Related Posts