Membuat Website Menggunakan HTML dan CSS

Membuat Website Menggunakan HTML dan CSS

Apa itu website?

Website, adalah situs dalam internet yang dapat diakses secara luas dan berisi beberapa halaman yang menghubungkan seseorang dalam wilayah atau daerah yang berbeda. Website, juga sering kali dijadikan tempat untuk mempromosikan barang atau jasa yang tidak perlu langsung mendatangkan orang kesuatu wilayah atau daerah tersebut. Selain itu, website juga memiliki beberapa jenis yang memiliki fungsi yang berbeda-beda.

  1. Website pribadi atau Blog,
  2. Website toko online,
  3. Website perusahaan, dll.

Jenis-jenis website sangatlah beragam, tergantung fungsi dari website yang kita buat itu digunakan untuk apa. Namun, banyaknya jenis website yang ada yang sering kita temui adalah tiga jenis yang sudah disebutkan di atas. Membuat website ternyata ada beberapa cara yaitu dengan menggunakan coding dan juga ada yang menggunakan cara instant tanpa menggunakan coding. Nah, di masa sekarang ini cara yang sering dilakukan adalah membuat website dengan cara instant yang tanpa menggunakan coding, tetapi yang akan kita pelajari sekarang adalah cara membuat website menggunakan HTML dan CSS.

Apa itu HTML dan CSS?

Sebelum mempelajari cara membuat website HTML, ada baiknya kamu memahami arti dari HTML tersebut. HTML adalah singkatan dari Hyper Text Markup Language yang memiliki makna sebagai bahasa markup yang digunakan untuk membuat sebuah halaman web.

Buat kamu yang masih bingung apa itu bahasa markup, bahasa ini adalah bahasa pemrograman dalam komputer yang digunakan untuk memproses format teks dan juga berbagai media di dalamnya.

Dalam pembuatan website HTML, kamu juga membutuhkan bantuan dari CSS. CSS sendiri adalah Cascading Style Sheets yang digunakan untuk menyederhanakan format pembuatan website HTML dengan mengatur elemen yang terdapat dalam bahasa markup yang sudah terlampir.

CSS lebih mudah dipelajari tetapi tetap menjadi elemen yang penting dalam pembuatan website berbasis HTML karena bisa mengatur penyajian tampilan dari website yang akan kamu buat. Sehingga, website HTML dan CSS ini akan menghasilkan sesuatu yang lebih powerful.

Cara Membuat Website HTML dan CSS

Sebelum memulai cara membuat website HTML dan CSS, pastikan kamu sudah menyediakan Text Editor dan Web Browser agar proses pembuatan berjalan dengan lancar ya, Sob.

Text Editor akan digunakan sebagai tempat bagi kamu menulis kode HTML, sedangkan Web Browser digunakan untuk mengetes hasil coding. Kamu bisa pakai tool apa saja sesuai yang kamu suka, ya!

1. Menyusun struktur proyek web

Langkah awal dalam cara pembuatan website HTML dan CSS adalah membuat folder untuk menyimpan proyek website kamu. Kamu bisa menggunakan VSCode untuk mengerjakan langkah ini dan membuka folder yang kamu inginkan.

Selanjutnya, buatlah folder bernama images guna menyimpan berbagai gambar yang nantinya akan dimasukkan dalam website HTML milikmu. Jika sudah, kamu dapat melanjutkan langkah yang sama dengan membuat folder untuk index.html dan style.css. Dalam index.html akan berisi inti dari proyek website kamu, sedangkan style.css akan menjadi pembantu inti dalam pengerjaan website HTML milikmu.

2. Add kode pada file index.html

Cara membuat website HTML dan CSS berikutnya adalah menambahkan kode pada index.html. File ini merupakan pondasi utama dari website HTML dan CSS yang akan kamu buat, sehingga kamu harus membuatnya terlebih dahulu sebelum melanjutkan ke berbagai tahap berikutnya.

Pada dasarnya, dalam pembuatan Index HTML ini, kamu perlu mengetahui 4 bagian utama yang menyusun bagian tersebut, yaitu:

  • Tag HTML: tempat untuk menyimpan berbagai elemen HTML yang telah kamu buat
  • Tag DTD/Doctype: tag ini harus ditulis di awal bagian karena berfungsi mendeklarasikan tipe dokumen serta file HTML untuk diproses pada web browser
  • Tag Body: di sini kamu bisa mengisinya dengan berbagai konten yang ingin kamu tulis dalam website HTML-mu
  • Tag Head: ini akan memberimu ruang untuk menulis berbagai elemen website yang nantinya tidak akan muncul secara visual dalam websitemu. Bisa berupa source css, source js, dan lain-lain.

Dengan mengetahui hal-hal berikut, kamu sudah bisa memulai untuk membuat websitemu sendiri yang bisa pula digunakan untuk membuat portofolio. Kamu bisa menyesuaikannya dengan berbagai kebutuhanmu.

Kamu juga bisa menggunakan website HTML templates untuk memudahkanmu memproses berbagai index HTML yang harus kamu tulis sehingga terbentuk website yang menarik.

3. Add kode pada file Style.css

Tanpa adanya CSS, hasilnya akan kurang menarik karena hanya berupa tulisan-tulisan yang tertata ke bawah tanpa adanya berbagai bentuk dan pola. Oleh karena itu, kamu membutuhkan langkah yang ketiga agar website buatan kamu menjadi semakin keren.

CSS di sini akan berperan sebagai pemoles yang indah untuk website yang sedang kamu buat dan dapat kamu ganti di kemudian hari jika kamu merasa bosan dengan tampilan yang sudah ada.

Seperti halnya Index HTML, struktur penulisan dari CSS juga terbagi menjadi beberapa bagian, antara lain:

  • Blok Deklarasi, wadah untuk menuliskan kode style untuk CSS yang diawali dengan tanda kurung kurawal atau {}
  • Selektor, kata kunci yang menghubungkan style CSS dengan Index HTML. Biasanya berupa tag, class, id, dan elemen lainnya dalam HTML
  • Properti dan nilai, berbagai aturan yang akan diberikan pada selektor yang dipilih

4. Mengakses web dalam web browser

Langkah terakhir, setelah semua langkah selesai, kamu bisa langsung mengetikkan Index HTML kamu pada web browser. Kamu juga bisa membukanya sambil membuka text editor, agar semua perubahan yang ingin kamu lakukan bisa langsung terlihat hasilnya pada web browser.

Sekarang, website kamu sudah bisa digunakan, Sob!

Beberapa contoh website HTML biasanya dimulai dari yang simpel terlebih dahulu. Seperti pembuatan heading, lalu mengubah bentuk tulisan agar lebih estetik, menambahkan gambar, dan juga mengubah warna dari tulisan konten website kamu.

Sebagai contoh website HTML, untuk membuat heading kamu bisa menggunakan perintah “<h1> Heading 1 <h1>”. Sementara untuk angkanya dapat kamu sesuaikan dengan kebutuhanmu, mau Heading 2, 3, atau seterusnya. Cukup mudah kan, Sob?

Atau mungkin kamu butuh contoh website HTML untuk membuat paragraf? Bisa! Kamu cukup menuliskan <p> text </p> pada text editor di tempat yang kamu inginkan. Dijamin tulisan website mu makin rapi dan lebih enak dibaca.

oemahbeling

See all posts

Leave a Reply

Your email address will not be published. Required fields are makes.

Open chat
Halo
Ada Yang Bisa Dibantu