Oleh / Web Design

Cara Membuat Website dengan HTML dan CSS Desain Modern Kreatif

Cara membuat website dengan HTML adalah pengetahuan dasar yang perlu anda pelajari jika anda ingin terjun ke dalam dunia web desain dan web programming. Kenapa hal ini menjadi dasar atau pondasi untuk anda? Karena membuat website dengan HTML sangatlah mudah atau paling mudah (begitu saya katakan). Disini anda tidak memerlukan web server untuk menjalankan atau melihat hasil tampilan dari website HTML anda. Anda hanya memerlukan dua buah file, yaitu index.html dan style.css dimana file tersebut bisa dijalankan pada semua komputer pada umumnya tanpa harus memiliki atau mengatur web server atau localhost.

Untuk membuat website dengan HTML tentu anda membutuhkan pengetahuan dari HTML itu sendiri dan CSS. Anda harus familiar dengan elemen-elemen HTML.

Mengenal Struktur HTML dalam Membuat Website

Mudah sekali untuk mempelajari elemen-elemen tersebut, anda bisa belajar struktur penempatan elemen HTML. Misalnya sebagai contoh yang paling banyak dipakai adalah div, span, ul dan li (itu adalah elemen-elemen HTML).

Sekarang ini sudah populer dengan HTML5, dimana ada penambahan elemen-elemen baru yang lebih mengkhususkan pada suatu penggunaan kondisi. Misalnya <header>, <main>, <nav>, <article>, <section>, <aside> dan <footer>. Masing-masing elemen tersebut tidak sembarangan diletakkan pada berbagai kondisi atau tempat. Mereka memiliki tujuan masing-masing dalam penggunaannya. Tentu hal ini berbeda dengan <div> pada HTML biasa kita meletakkan <div> dimana saja.

Meskipun <div> adalah elemen yang umum yaitu kita bisa meletakkan dimana saja, <div> memiliki keterbatasan dalam hal penempatan. Misalnya div tidak boleh diletakkan di dalam span; <span><div></div></span> hal ini tidak boleh ya. Tidak boleh disini bukan berarti dilarang, namun lebih condong harus dihindari penempatan tersebut. Kita harus menstruktur elemen HTML sesuai dengan Semantic Web. Lihat penjelasan berikut.

Maka CSS selector "biru" mengatur sebuah <div> menjadi tampilan kotak dengan lebar 100px, tinggi 100px dan berwarna latar merah.

Untuk belajar lebih lanjut mengenai CSS Selector bisa mengunjungi website ini.

Apa Yang Perlu Anda Persiapkan Untuk Membuat Website HTML

  • Browser
  • Notepad

Browser untuk melihat tampilan HTML yang sudah didesain dengan CSS. Dan notepad kita gunakan untuk menulis struktur elemen HTML dan mengatur class selector dalam CSS.

Ok saya kira sudah cukup untuk pengatahuan struktur HTML dan CSSnya. Sekarang kita akan melanjutkan ke langkah-langkah selanjutnya dan langsung saja praktek ya.

Ohya, hampir saja lupa. Bahwa cara membuat website HMTL dan CSS kali ini kita akan menggunakan desain blog sederhana. Desain website sederhana yang saya maksud adalah seperti gambar di bawah ini.

Struktur Membuat Website dengan HTML5

Struktur Membuat Website dengan HTML5

Membuat Struktur File

Untuk membuat struktur file pada tentang cara membuat website agar file-file bisa ter-struktrur secara rapi. Bagian CSS kita akan buatkan folder tersendiri dan pada bagian gambar kita juga akan membuatkan folder. Di luar folder hanya akan berisi file HTML saja yaitu index.html

Silahkan lihat gambar berikut ini, bagaimana saya men-struktur file-file yang akan kita gunakan dalam tutorial pembuatan website kali ini.

Penempatan Struktur File dan Folder dalam HTML

Penempatan Struktur File dan Folder dalam HTML

Cara Membuat Website dengan HTML Desain Modern dan Kreatif yang Mudah

Silahkan langsung buat folder dan file seperti di atas. Pada folder img, terdapat beberapa gambar yang akan kita gunakan nanti. Ukuran file gambar logo.png saya menggunakan ukuran 200×90 pixel, sedangkan ukuran gambar lainnya yang akan kita masukkan ke dalam artikel menggunakan ukuran 640×426 pixel. Sekarang saya asumsikan anda telah membuat file index.html, folder css dan style.css di dalamnya, folder img dan memasukkan beberapa gambar di dalamnya.

Penulisan Struktur Elemen HTML <head>Langkah 1

Sebelum kita menulis struktur sebagaimana saya gambarkan di atas, kita akan menulis elemen <head> yang didalamnya bisa berisi title atau judul website, scripts, style (css), informasi meta dan link.

Elemen <head> di letakkan dalam <html> dan di atas <body>.

Apa Fungsi <head> dalam HTML

Fungsi elemen <head> adalah untuk menyediakan informasi umum yang berupa metadata tentang document (dalam hal ini suatu website) yang di dalamnya bisa berupa judul, scripts, style css, link dan meta sebagaimana sudah saya singgung pada paragraf di atas. Kepada siapa informasi tersebut diberikan? Tentunya kepada browser, karena browserlah yang akan menampilkan isi dari struktur elemen HTML.

Saya akan sedikit menjelaskan satu elemen yang ada dalam <head> di atas, yaitu <link rel="stylesheet" href="css/style.css">.

Link ini memanggil style.css yang isinya CSS Selector dan atribut yang berfungsi untuk mendesain struktur HTML. Saya menuliskan href="css/style.css", artinya file style.css saya letakkan di dalam folder bernama "css". Untuk lebih jelasnya silahkan lihat gambar di bawah ini.

Untuk <link href="css/normalize.css" rel="stylesheet">, saya akan menjelaskannya pada bagian cara memberikan style CSS di bawah.

Link ini untuk mengambil font yang kita gunakan dalam tutorial pembuatan website dengan HTML ini. Kita menggunakan Google Fonts secara online, untuk mempercantik tampilan dan desain font dalam website kita. Jika anda tidak terkoneksi dengan internet, maka sebaiknya link: google fonts di atas di hapus atau dimatikan saja dan gunakan font default seperti Arial atau Helvetica Neue.

Script tersebut akan membantu struktur HTML5 yang tidak bisa dibaca oleh Browser Internet Explorer 9 (IE 9). Namun untuk saya sendiri sebenarnya sudah tidak menggunakan script tersebut karena di Indonesia Browser IE 9 jarang ditemukan dan kita lebih banyak menggunakan browser Chrome dan Firefox. Seingat saya, IE 9 bisa ditemukan di OS Windows XP, dan sekarang sudah jamannya Windows 10 dengan IE 9 ke atas. Maaf saya tidak menjelaskan lebih detail mengenai Browser IE karena saya tidak menggunakan OS Windows.

Penulisan Struktur Elemen HTML <body>Langkah 2

Sebagaimana sudah saya gambarkan di atas, struktur HTML5 akan kita gunakan dalam artikel cara membuat website dengan HTML ini maka penulisannya akan seperti di bawah ini.

Baik, secara umum struktur HTMLnya sudah jadi. Selanjutnya tinggal kita melengkapi sesuai dengan ketentuan desain yang akan kita terapkan. Namun sebelum itu, akan saya jelaskan sedikit mengenai struktur HTML5 di atas agar anda tidak bingung dalam penerapan beberapa elemen HTML5 di atas dalam pembuatan website dengan HTML5.

Di dalam <body> kita membagi 3 block elemen yaitu <header>, <section> dan <footer>. Pada header mungkin sudah bisa ditangkap ya, bahwa kita akan mengisinya dengan Judul Website dan Navigasi atau Menu.

Sedangkan pada <section> akan kita split menjadi dua block atau kolom, yaitu <div class="post_list"> adalah kolom untuk artikel dan <aside> adalah kolom untuk sidebar. Maka harus ada pengelompokan supaya nanti kita bisa dengan mudah melakukan split kolom dengan style CSS. Pada setiap <article> kita akan mengisi dengan elemen-elemen yang mendukung untuk gambar dan text sebagai informasi ringkasan dari masing-masing artikel.

Pada <aside> yang akan kita jadikan sidebar, ini bisa diisi informasi-informasi menarik profil pemilik website dan atau juga bisa digunakan untuk memberikan informasi judul-judul artikel terbaru.

Selanjutnya kita akan masuk lebih dalam pada setiap elemen yang kita isi dengan informasi-informasi menarik melalui elemen HTML.

Melengkapi Struktur Elemen HTML <header>Langkah 3

Pada <header> kita akan memberikan informasi Logo website dan Navigasi/Menu. Untuk logo, kita menggunakan elemen div, yang mana akan kita berikan tag <h1> di dalamnya. H1 adalah bentuk penegasan atau penekanan dalam suatu konten atau dokumen. Pada halaman utama, kita butuh penegasan pada Logo atau Judul website agar mudah diingat oleh visitor atau mesin pencari. Dalam logo ini saya akan menggunakan gambar, maka kita akan memerlukan tag <img>.

Pada bagian <nav> yang akan kita berikan informasi Navigasi Menu, akan menggunakan tag <ul> dan <li> untuk mempermudah kita melakukan list/daftar menu website.

Di bagian list terakhir, saya menambahkan class=”search”. Ini nantinya akan kita jadikan sebagai tombol search, pemberian class agar lebih mudah untuk mengatur dalam style CSS.

Sesuai dengan penjelasan struktur header, berikut adalah penulisan lengkap pada <header>:

Melengkapi Struktur Elemen HTML <section>Langkah 4

Sekarang kita sudah sampai pada bagian section, mohon untuk lebih letili dalam hal penulisan elemen maupun tag HTML pada bagian ini. Karena disini lah suatu website mempunyai kompleksitas yang tinggi. Berikut adalah penulisan lengkap HTML section pada cara membuat website dengan HTML dan CSS ini. Penjelasan akan saya sampaikan di bawah.

Berdasarkan pada gambar Struktur cara Membuat Website dengan HTML5 dan penjelasan singkat di atas, dalam <section> ini mempunyai dua master elemen yaitu <div class="post_list"> dan <aside>. Masing-masing elemen master tersebut adalah sebagai pembungkus elemen-elemen lain di dalamnya.

Penjelasan pada Elemen HTML <article>

Pada elemen article kita memberi gambar dengan menggunakan <figure>, dalam pembuatan website menggunakan HTML5, <figure> bisa digunakan untuk gambar, grafik, ilustrasi dan code. Jadi penggunaan <figure> dalam hal ini dirasa tepat, selanjutnya di dalamnya kita masukkan <img>. Dalam hal gambar, perlu anda ingat bahwa masing-masing gambar yang akan dipakai harus mempunyai ukuran yang sama. Kenapa harus sama ukurannya? Hal ini untuk mempercantik gambar itu sendiri, karena kita akan mengatur lebar dan tinggi gambar melalui style CSS.

Di bawahnya, masih dalam <article> terdapat elemen section sebagai pembungkus tag H1 dan tag p. Karena dalam <article> kita akan membagi atau split dua kolom, maka elemen figure dan elemen section diperlukan. Elemen figure yang isinya adalah gambar akan kita letakkan di sebelah kiri sedangkan elemen section yang isinya tag H1 dan tag p akan kita letakkan di sebelah kanan.

Penjelasan pada Elemen HTML <aside>

Dalam elemen <aside> ada terdapat tiga bagian yaitu:

  1. Profil, kita masukkan profil seorang atau bisa menggunakan pemilik website itu sendiri untuk memberikan sedikit informasi pribadi.
  2. Artikel Pilihan, kita bisa ambil artikel-artikel dan memilihnya untuk dimasukkan pada bagian ini.

Penjelasan pada Elemen HTML <footer>

Pada penulisan HTML pada elemen <footer>, saya kira tidak lah terlalu penting untuk dijelaskan karena pada bagian ini saya yakin anda sudah faham. Karena anda bisa mengambil pada penjelasan-penjelasan di atas seperti pada elemen header, section maupun pada article.

Sekarang kita akan mencoba untuk membuka hasil dari struktur HTML yang telah kita buat. Lihat file index.html anda, klik kanan lalu pilih “Open With” akan ada pilihan, maka pilih browser yang ada pada daftar tersebut. Pada browser anda akan melihat hasilnya, hanya akan ada gambar dan berupa text yang nantinya akan kita atur desain satu persatu melalu style CSS.

Akhirnya penulisan cara membuat website dengan HTML sudah ditengah perjalanan dan hampir selesai secara keseluruhan. Sekarang tersisa untuk mendesain struktur HTML tersebut dengan style CSS.

Penulisan Style CSS dalam Membuat Website dengan HTMLLangkah 5

Pada style CSS saya menggunakan dua file .css untuk membantu mendesain tampilan seperti yang kita inginkan. Seperti janji saya di atas, kita akan membahas mengenai normalize.css yang saya pakai dalam pembuatan website dengan menggunakan HTML5.

Kenapa Memakasi dua file style CSS, style.css dan normalize.css ?

Sebelumnya saya ingin menjelaskan mengenai normalize.css, karena style.css sudah saya terangkan pada bagian atas. Apa itu normalize.css ? Adalah penggayaan code CSS yang membantu browser untuk me-render semua elemen lebih konsisten dan sesuai dengan standar modern. Selain itu Normalize CSS menyediakan konsistensi Cross-browser yang lebih baik.

Jika anda selanjutnya ingin membuat website yang lebih kompleks, maka saya menyarankan untuk memakai normalize.css tersebut untuk membantu meringankan penggayaan style CSS anda.

Ok kita skip di sini saja, selanjutnya kita akan melakukan penulisan atau penggayaan pada file style CSS. Dengan struktur cara membuat website dengan HTML yang sudah kita buat di atas, maka berikut adalah style CSS:

Akhirnya semua sudah jadi dan selamat anda sudah bisa mempraktekkan cara membuat website dengan HTML5 dan CSS, yang langsung mempunyai desain yang modern dan kreatif. Semangat untuk belajar terus, semoga artikel cara membuat website HTML modern dan kreatif ini bisa menjadi inspirasi pembelajan anda.

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *