Cara Membuat Website Gratis Dengan Html

Saatnya Buat Website Lebih Fleksibel dengan HTML dan CSS

Sudah paham kan cara membuat website dengan HTML dan CSS? Ini adalah pekerjaan yang tidak sulit asalkan kamu paham konsep dari HTML dan CSS. HTML adalah kode utama yang harus kamu buat untuk meletakkan konten website yang telah kamu siapkan sedangkan CSS nantinya akan berperan sebagai kode yang akan membuat tampilan website semakin estetik dan menarik. Yuk, terapkan cara membuat website sederhana dengan HTML dan CSS! Ini saatnya buat website lebih fleksibel dan full custom!

Kamu harus tahu, DomaiNesia ada promo domain .id paling murah

Pengertian HTML dan Fungsinya

Namun sebelum membahas cara membuat website dengan HTML dan CSS, Anda perlu tahu dulu apa pengertiannya.

HTML merupakan singkatan dari Hypertext Markup Language, yaitu bahasa standar yang digunakan untuk menyusun struktur dan isi konten dari halaman website.

Apa saja yang ada pada halaman web, bagaimana setiap komponen ditata, dan kemana pengunjung akan pergi ketika mereka mengklik sesuatu.

Untuk menyusun HTML Anda membutuhkan tools khusus untuk bahasa pemrograman, yang biasa disebut dengan nama Text Editor. Apabila Anda pengguna Windows pasti sudah tidak asing dengan aplikasi Notepad.

Notepad termasuk salah satu aplikasi Text Editor yang sederhana. Sekarang ini sudah muncul tools yang lebih beragam dengan fitur yang lebih lengkap.

Ketika Anda merangkai HTML di Text Editor, terdapat berbagai jenis tag yang disusun untuk membuat satu halaman website. Tag terdiri dari tag pembuka dan tag penutup, sedangkan di bagian tengah merupakan isi konten yang akan ditampilkan pada halaman web.

Ada tag untuk heading,

untuk paragraph, dan masih banyak lagi jenis tag yang lain. C

INI CONTOH H1

Terdapat dua tipe tag utama yaitu block-level dan inline tags. Block-level digunakan ketika ingin memakai ruang yang ada pada text editor dan membuat line baru dalam dokumen. Misalnya saat membuat heading atau paragraph.

Sedangkan tag inline dipakai untuk memformat konten yang masih bagian dari block level. Sehingga tidak membuat line baru.

Contoh tag yang termasuk inline yaitu untuk membuat tulisan jadi bold. Atau untuk format teks Italic.

Menambahkan Formulir Interaktif

Kalau kamu ingin pengunjung website bisa mengirimkan informasi seperti nama atau alamat email, kamu bisa menambahkan formulir. Formulir di HTML dibuat menggunakan elemen

.

Contoh sederhana formulir HTML adalah:

Nama:

Dengan formulir, pengunjung bisa berinteraksi langsung dengan websitemu, misalnya untuk mendaftar newsletter atau mengirimkan komentar.

Hosting Gratis, hosting murah, yang fiturnya lengkap banget!

Mengenal Apa itu HTML dan CSS

Pada bagian ini kamu akan berkenalan lebih “akrab” dengan HTML dan CSS yang akan memudahkan kamu dalam membuat dan mengelola website. Dengan mengetahui pengertian dan cara kerjanya, ini akan memudahkan kamu dalam mempelajari cara membuat website dengan HTML dan CSS.

HTML adalah singkatan dari HyperText Markup Language. Ini adalah bahasa markup standar untuk pembuatan halaman website atau web page. Dengan HTML memungkinkanmu untuk melakukan pembuatan website meliputi struktur bagian, paragraf, tautan, dan sebagainya menggunakan elemen HTML seperti tag dan atribut. HTML memiliki banyak kasus penggunaan seperti:

Perlu juga dicatat bahwa HTML tidak dianggap sebagai bahasa pemrograman karena tidak dapat membuat fungsionalitas dinamis. Saat ini HTML “hanya” dianggap sebagai standar pengkodean resmi untuk website. World Wide Web Consortium (W3C) adalah organisasi yang memelihara dan mengembangkan spesifikasi HTML, bersama dengan menyediakan pembaruan rutin.

Website biasanya mencakup beberapa halaman HTML yang berbeda misalnya halaman beranda, halaman tentang, dan halaman kontak. Semuanya akan memiliki file HTML terpisah. File HTML adalah dokumen yang diakhiri dengan ekstensi .html atau .htm. Browser website membaca akan file HTML dan menampilkan kontennya sehingga pengguna internet dapat melihatnya.

Semua halaman HTML memiliki serangkaian elemen HTML yang terdiri dari sekumpulan tag dan atribut. Elemen HTML adalah penyusun utama “bangunan” halaman web. Tag memberi tahu browser tempat elemen dimulai dan diakhiri, sedangkan atribut menjelaskan karakteristik elemen. Tiga bagian utama dari suatu elemen adalah:

Contoh dari HTML ini adalah sebagai berikut:

ini adalah sebuah paragraf

Kode HTML ini akan menampilkan visual seperti berikut ini:

Lalu bagaimana cara membuat website dengan HTML dan CSS? Eits, sabar dulu, kamu perlu memahami apa itu CSS terlebih dulu.

CSS adalah singkatan dari Cascading Style Sheets dan digunakan untuk menyesuaikan gaya elemen yang ditulis dalam bahasa markup seperti HTML. Ini memisahkan konten dari representasi visual website. Jika HTML tadi berfungsi untuk membuat struktur konten website maka CSS ini merupakan sarana untuk melakukan editing secara lebih lanjut file HTML yang telah dibuat. Hubungan antara HTML dan CSS sangat erat karena HTML adalah dasar dari sebuah website dan CSS adalah bagian estetika dari keseluruhan website.

CSS menggunakan sintaks berbasis bahasa Inggris sederhana dengan seperangkat aturan yang mengaturnya. Seperti yang telah dijelaskan sebelumnya bahwa CSS adalah sarana untuk melakukan editing lebih dari HTML, maka CSS ini bekerja dengan cara menambahkan atribut gaya dalam sebuah tag yang ada atau pada class dan id tertentu. Misalkan kamu bisa memberi atribut gaya pada tag

secara keseluruhan atau membuat sebuah class  untuk diterapkan pada tag

yang dituju.

Sebagai contoh, paragraf yang telah dibuat tadi akan ditambahkan gaya atau style yang dibuat dengan css. Misalkan saja membuat ketebalan huruf semakin tebal dan bergaris bawah. Berikut ini cara untuk membuat seluruh tag p memiliki gaya yang sama:

text-decoration: underline;

Atau kamu bisa membuat class untuk gaya ini dan membuatnya hanya berlaku pada tag

yang kamu kehendaki. Class ditunjukan dengan awalan . (titik). Berikut ini adalah contohnya:

text-decoration: underline;

Setelah itu, panggil nama class tersebut ke kode HTML yang kamu buat tadi seperti berikut ini:

ini adalah sebuah paragraf

Dengan menambahkan CSS tersebut maka konten yang kamu buat tadi telah memiliki gaya atau style yang kamu kehendaki seperti pada gambar dibawah ini:

Semua konsep yang telah dijelaskan diatas akan memudahkanmu memahami cara membuat website dengan HTML dan CSS.

Baca Juga: Padding dalam CSS: Pengertian, Fungsi, dan Contohnya

Langkah-Langkah Membuat Website dengan HTML dan CSS

Buat Struktur File Website

Cara membuat website dengan HTML dan CSS selanjutnya adalah dengan membuat struktur file yang diperlukan. Pertama, tentu kamu harus membuat file dengan ekstensi .html untuk membuat kode HTML. untuk halaman utama, agar dapat terbaca oleh browser, beri nama index.html. Setelah itu, buat pada folder yang sama juga sebuah file dengan ekstensi .css misalkan style.css.

Lalu jika diperlukan, buat folder lagi. Untuk kasus ini akan dibuat folder bernama image untuk menampung file-file gambar yang digunakan. Hasilnya seperti pada gambar dibawah ini:

Cara membuat website dengan HTML dan CSS setelah ini adalah mulai menuliskan kode HTML sesuai dengan struktur dan tata letak yang telah disiapkan. Cara membuat website dengan HTML dan CSS ini tentu mengikuti konsep yang telah dijelaskan sebelumnya pada poin-poin diatas. Berikut ini adalah cara membuat website sederhana dengan html dan css:

Pada dasarnya, struktur HTML ini akan terbagi menjadi dua bagian besar yaitu: head dan body yang ditulis di dalam tag . Pada bagian head, tulis judul website dan import atau masukan nama file css yang telah kamu buat sebelumnya dan pada bagian body masukkan konten website yang telah kamu siapkan seperti berikut:

Simple web Development Template