Cara membuat website dengan HTML mudah dan simple, sebelum masuk ke cara membuat wesite dengan HTML dan CSS, anda perlu menyiapkan Text Editor dan Web Browser terlebih dahulu. Text editor berfungsi sebagai alat untuk menulis kode, sementara web browser digunakan untuk mengunjungi situs web.
Cara Membuat Website dengan HTML
Terdapat tutorial tersebut, kami akan menggunakan Visual Studio Code (VS Code) sebagai teks editornya dan Google Chrome sebagai browsernya. Anda bebas menggunakan tool favorit Anda.
Website yang akan Anda buat kali tersebut terdapatlah website portfolio menggunakan HTML dan CSS saja. Nantinya, tampilan website akan seperti tersebut :
Menariknya, untuk membuat website tersebut, Anda cuma perlu mengikuti 4 langkah saja, yaitu :
- Membuat Struktur Project Web
- Menambahkan Kode terdapat File index.html
- Menambahkan Kode terdapat File style.css
- Mengakses Website di Web Browser
- Membuat Struktur Project Web
Langkah pertama
- Buat folder untuk menyimpan proyek portofolio website Anda dan buka folder tersebut dengan menggunakan VS Code. Terdapat tutorial tersebut, kami menggunakan nama “Web Portfolio”
- Kemudian, buat folder baru dengan nama images. Folder tersebut yaitu tempat untuk menyimpan gambar/assets yang akan digunakan terdapat website.
- Selanjutnya, buatlah dua file baru bernama index.html dan style.css web portfolio tersebut.
- Index.html yaitu inti dari halaman website yang dibuat, Anda dapat menambahkan konten website terdapat file tersebut.
- Sedangkan file style.css yaitu file pelengkap HTML yang digunakan untuk mengubah dan mempercantik tampilan website.
Menambahkan Kode terdapat File index.html
HTML, seperti rangka mobil, adalah fondasi utama yang membentuk dan mendukung struktur badan website Anda. Oleh karena itu, file tersebut harus dibuat terlebih dahulu.
Terdapat dasarnya, struktur setiap halaman HTML terdapatlah tersusun atas 4 bagian utama, yaitu :
Tag DTD/Doctype
Document Type Declaration (DTD) harus ditulis terdapat awal dokumen. Tag tersebut berfungsi untuk mendeklarasikan tipe dokumen dan versi HTML yang digunakan untuk diproses terdapat web browser.
Tag HTML
Yaitu wterdapath dari semua elemen html.
Tag Head
Berisi informasi website yang tidak tampil di halaman web browser. Misalnya, source css, source js, title, meta charset.
Tag Body
Berisi semua elemen yang tampil di halaman web browser. Distersebutlah bagian dimana semua konten ditulis.
cara membuat website HTML dapat dimulai dengan menambahkan kode berikut tersebut terdapat file index.html Anda :
Pertama
di bagian tag head tersebut, Anda perlu mendeklarasikan informasi mengenai meta tag charset, title website, serta link atau path dari external sources (misal : CSS dan JavaScript) yang digunakan terdapat website.
Nah, yang perlu Anda perhatikan terdapat bagian head tersebut terdapatlah lokasi tempat menyimpan file CSS. Pastikan file CSS berterdapat terdapat folder yang sama dengan file HTML. Jika berbeda folder, pastikan Anda memasukkan path yang sesuai terdapat bagian href.
Kedua
masuk ke tag body. Bagian pertama terdapat body website portfolio tersebut terdapatlah tampilan awal/welcome home yang terdiri dari navigation bar, text container, dan gambar.
Navigation bar atau biasa disebut navbar yaitu komponen utama navigasi website yang berupa menu, biasanya terletak terdapat bagian header website.
Sedangkan tag class text container terdapat kode di bawah tersebut yaitu bagian dimana Anda dapat menambahkan tulisan untuk tampilan awal website ketika diakses.
Selanjutnya
karena ini merupakan portofolio situs web, Anda dapat menambahkan bagian tentang layanan yang Anda tawarkan. Di sana, Anda dapat menunjukkan layanan yang dapat Anda berikan dan keterampilan apa yang Anda kuasai. Layanan tersebut dapat Anda tuliskan terdapat tag <div class=”box-container”>.
Keempat
jika Anda sudah pernah mengerjakan atau mempunyai proyek, Anda dapat menambahkan testimoni terdapat website portfolio. Bagian tersebut dapat Anda isi dengan review dan rating dari klien atas hasil kerja Anda. Anda juga dapat membaca lebih lengkapnya di puncatraining
Jangan lupa untuk menambahkan link script fontawesome terdapat bagian head. Karena itu, apabila tidak, ikon bintang yang menandakan penilaian kepuasan pelanggan tidak akan terlihat di halaman web Anda.
Kelima
bagian footer. Sebagai penutup, kami mencantumkan sosial media sebagai alat komunikasi yang bisa diakses. Kode HTML untuk logo sosial media dapat Anda cari terdapat website fontawesome.
Menambahkan Kode terdapat File style.css
Sekarang, langkahnya adalah bagaimana membuat tampilan website lebih teratur dan menarik dengan menggunakan CSS. Seperti yang sudah dibahas sebelumnya, tidak CSS, tampilan website cuma sebatas text saja.
“Sebagai perumpamaan dengan mobil sebelumnya, CSS di website adalah seperti warna cat mobil yang dapat dimodifikasi dan disesuaikan untuk memperindah penampilan mobil. Walaupun rangka atau strukturnya tetap sama, Anda dapat memodifikasi gaya tampilannya sesuai dengan preferensi Anda.
Struktur penulisan CSS dibagi menjadi tiga bagian:
- Selektor : Yaitu kata kunci yang menghubungkan style di file CSS dengan file HTML. Selektor dapat berupa tag, class, id, maupun atribut yang terdapat terdapat file HTML.
- Blok Deklarasi : Yaitu wterdapath atau tempat menulis style CSS, ditandai dengan kurung kurawal {}.
- Properti dan Nilai : Yaitu sekumpulan aturan yang diberikan terdapat selektor yang dipilih.
Mengakses Website di Web Browser
Cara membuat website dengan HTML dan CSS yang efektif terdapatlah dengan membuka teks editor dan browser bersamaan.
Dengan membukanya secara bersamaan, setiap perubahan yang Anda lakukan terdapat file HTML atau CSS dapat langsung terlihat terdapat browser. Oleh karena itu, pembangunan website akan berjalan lebih cepat dan dapat dimodifikasi dengan mudah.
Untuk menjalankan website, Anda cuma perlu membuka file index.html terdapat browser kesayangan Anda. Jika Anda melakukan perubahan terdapat kode, jangan lupa refresh halaman web untuk melihat perubahan.
Kesimpulan
Maka itulah cara membuat website dengan HTML dan CSS yang dapat Anda coba. Sangat mudah, kan? Cuma dengan menggunakan file HTML dan CSS saja, Anda sekarang dapat membuat website portfolio Anda sendiri.
Dan dapat juga anda baca di kursus web jogja
Sayangnya, website tersebut cuma dapat diakses offline karena semua asetnya tersimpan di komputer Anda saja. Agar dapat dilihat banyak orang, Anda perlu mengonline-kan dulu, ya!
Anda perlu memiliki layanan web hosting untuk menyimpan aset Anda agar bisa diakses secara online. Namun, jangan sembarang memilih layanan hosting web, ya!
Layanan Unlimited Web Hosting Niagahoster dapat jadi pilihan yang tepat. Karena, Niagahoster memberikan jaminan keamanan untuk website Anda dengan berbagai fitur keamanan seperti Imunify360 yang mencegah serangan malware.
Selanjutnya selain itu dengan uptime sampai 99,999%, website Anda dapat sekemudian online selama 24 jam penuh. Dengan begitu, Anda dapat mengonlinekan website tidak rasa khawatir dengan downtime.
