Tutorial

3 Cara Membuat Website Sederhana Dengan HTML Dan CSS Yang Sangat Mudah

3 Cara Membuat Website Sederhana Dengan HTML Dan CSS Yang Sangat Mudah – Semakin pesat perkembangan teknologi internet, membuat banyak orang mulai mengonline-kan website atau bisnis yang dimilikinya. Jika Anda enggan menggunakan jasa pembuatan website, Anda pun bisa membuat sendiri website sederhana Anda hanya dengan menggunakan elemen HTML dan CSS.

HTML merupakan singkatan dari Hypertext Markup Language yaitu salah satu jenis bahasa pemrograman yang digunakan untuk membuat sebuah website yang untuk selanjutnya dapat diakses guna menampilkan berbagai informasi di dalam browser. Sedangkan CSS merupakan akronim dari Cascading Style Sheets yakni bahasa pemrograman yang digunakan untuk mengatur tata letak dan unsur elemen dalam suatu website. Simaklah cara membuat website whatsapp di instagram.

Dengan hanya bermodalkan HTML dan CSS, Anda pun sudah bisa membuat sebuah website sederhana yang bisa digunakan untuk solusi kebutuhan online Anda. Berikut adalah beberapa langkah mudah cara membuat website sederhana dengan html dan css yang perlu Anda ketahui.

cara membuat website sederhana dengan html dan css

cara membuat website sederhana dengan html dan css

Cara Membuat Website Sederhana Dengan HTML Dan CSS Desain Layout Anda

Sebelum membuat website dengan menggunakan html dan css, langkah pertama yang perlu Anda lakukan adalah membuat desain tampilan website yang ingin Anda buat. Untuk membuat desain layout ini, Anda bisa menggunakan beberapa perangkat lunak seperti Photoshop, paint, corel Drawi, dan ataupun yang lainnya. Lewat desain tampilan kasar ini, Anda bisa tentukan bagian-bagian seperti bagian header, main body, dan ataupun juga footer.

Mulai Coding Layout Website Anda

Cara membuat website sederhana dengan html dan css yang berikutnya adalah dengan melakukan coding lewat text editor. Ada cukup banyak text editor yang bisa Anda gunakan untuk melakukan coding. Beberapa diantaranya adalah notepad++, atom, sublime, VS Code, dan ataupun yang lainnya. Silakan pilih sesuai dengan yang Anda suka.

Cara Membuat Website Sederhana Dengan HTML Dan CSS Untuk File Index.html

File pertama yang harus Anda buat dari script coding adalah index.html untuk mulai membuat kerangka tampilan website Anda. Secara umum, sebuah file index.html akan memiliki struktur kode yang diawali dengan <html> dan diakhiri dengan </html>.

Diantara kedua tag <html> dan </html> tersebutlah Anda bisa meletakkan struktur kode untuk tampilan website Anda seperti meletakkan bagian header, main body, dan juga footer sesuai dengan tampilan website yang ingin Anda buat.

Berikut adalah contoh singkat penulisan script coding yang biasa digunakan untuk file index.html :

<html>

<head>

<!–Element-elemen tag <head> Silakan tulis di sini–>

<title>Uji Coba Web</title>

</head>

<body>

<!–Element-elemen tag <body> Silakan Tulis Di sini–>

</body>

</html>

Anda bisa menyesuaikan dengan desain tampilan layout yang telah Anda buat sebelumnya denngan menambahka tag yang sesuai misalnya untuk section Header, Main Body, dan Footer ke dalam tag di atas.

Mengatur Tampilan Dengan CSS

Setelah Anda membuat coding website lewat file index.html maka langkah berikutnya adalah dengan mengatur tata letak tersebut menggunakan Styling Layout CSS. Untuk melakukan hal ini, silakan Anda bisa membuat file baru pada text editor tersebut dengan nama ‘layout.css’ kemudian simpan file tersebut ke dalam folder yang sama dengan tempat Anda menyimpan file index.html yang telah dibuat sebelumnya.

Jika Anda sudah selesai membuat coding dalam format CSS tersebut, silakan Anda buka kembali file index.html yang telah  dibuat sebelumnya. Kemudian diantara tag <head> silakan Anda tambahkan kode berikut ini untuk ‘memanggil’ css yang telah Anda buat:

<link rel=”stylesheet” href=”layout.css”/>

Dengan menambahkan kode di atas, ketika membuka file index.html maka file pengaturan css yang telah Anda buat sebelumnya juga akan termuat sehingga website Anda akan memiliki tampilan sesuai dengan layout yang Anda coding sebelumnya. Perhatikan juga cara membuat website wa di instagram dengan mudah.

Demikianlah cara membuat website sederhana dengan html dan css yang sangat mudah dilakukan. Kini dengan hanya melakukan beberapa cara di atas, Anda pun sudah dapat membuat sebuah website sederhana untuk memenuhi kebutuhan situs online Anda.

 

About the author

Agus

Saya seorang pecinta literatur dan praktisi digital bisnis.

Leave a Comment