Anda ingin belajar membuat website, tapi bingung harus mulai darimana? Tidak usah bingung lagi, Anda bisa memulainya dari HTML dan CSS! Karena bagi seorang web developer, HTML dan CSS adalah pondasi yang wajib dipelajari untuk mengembangkan website.
Oleh karena itu, artikel kali ini akan membahas mengenai cara membuat website dengan HTML dan CSS. Yuk, langsung saja simak panduan lengkapnya!
Cara Membuat Website dengan HTML dan CSS
Sebelum masuk ke cara membuat website dengan HTML dan CSS, Anda harus menyiapkan Text Editor dan Web Browser terlebih dahulu. Text editor digunakan sebagai tools untuk menulis kode, sedangkan web browser digunakan untuk mengakses website.
Pada tutorial ini, 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 ini adalah website portfolio sederhana menggunakan HTML dan CSS saja. Nantinya, tampilan website akan seperti ini :
Menariknya, untuk membuat website tersebut, Anda hanya perlu mengikuti 4 langkah saja, yaitu :
- Membuat Struktur Project Web
- Menambahkan Kode pada File index.html
- Menambahkan Kode pada File style.css
- Mengakses Website di Web Browser
Tertarik mencobanya? Yuk, langsung saja ikuti panduan lengkap cara membuat website dengan HTML dan CSS berikut ini!
1. Membuat Struktur Project Web
Pertama-tama, buatlah folder penyimpanan proyek website portfolio Anda dan bukalah folder tersebut pada VS Code. Pada contoh ini, kami menggunakan nama “Web Portfolio”
Kemudian, buat folder baru dengan nama images. Folder ini merupakan tempat untuk menyimpan gambar/assets yang akan digunakan pada website.
Selanjutnya, buatlah dua file baru bernama index.html dan style.css web portfolio tersebut.
Index.html merupakan inti dari halaman website yang dibuat, Anda dapat menambahkan konten website pada file ini.
Sedangkan file style.css merupakan file pelengkap HTML yang digunakan untuk mengubah dan mempercantik tampilan website.
2. Menambahkan Kode pada File index.html
File HTML berisi kode utama untuk membangun struktur website Anda. Ibarat mobil, HTML di website sama seperti rangka mobil yang membentuk dan menopang body mobil. Oleh karena itu, file ini harus dibuat terlebih dahulu.
Pada dasarnya, struktur setiap halaman HTML tersusun atas 4 bagian utama, yaitu :
- Tag DTD/Doctype : Document Type Declaration (DTD) harus ditulis pada awal dokumen. Tag ini berfungsi untuk mendeklarasikan tipe dokumen dan versi HTML yang digunakan untuk diproses pada web browser.
- Tag HTML : Merupakan wadah 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. Disinilah bagian dimana semua konten ditulis.
Bagaimana sudah ada gambaran?
Kalau begitu, cara membuat website sederhana dengan HTML bisa dimulai dengan menambahkan kode berikut ini pada file index.html Anda :
Pertama, di bagian tag head ini, Anda perlu mendeklarasikan informasi mengenai meta tag charset, title website, serta link atau path dari external sources (misal : CSS dan JavaScript) yang digunakan pada website.
Nah, yang perlu Anda perhatikan pada bagian head ini adalah lokasi tempat menyimpan file CSS. Pastikan file CSS berada pada folder yang sama dengan file HTML. Jika berbeda folder, pastikan Anda memasukkan path yang sesuai pada bagian href.
1 2 3 4 5 6 7 8 | <!DOCTYPE html><html><head> <meta charset="utf-8"> <title>Personal Website</title> <link rel="stylesheet" type="text/css" href="style.css"/></head> |
Kedua, masuk ke tag body. Bagian pertama pada body website portfolio ini adalah tampilan awal/welcome home yang terdiri dari navigation bar, text container, dan gambar.
Navigation bar atau biasa disebut navbar merupakan komponen utama navigasi website yang berupa menu, biasanya terletak pada bagian header website.
Sedangkan tag class text container pada kode di bawah ini merupakan bagian dimana Anda dapat menambahkan tulisan untuk tampilan awal website ketika diakses.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | <body> <section> <!--- navigation ---> <nav> <!--- logo ---> <a href="#" class="logo">Portfolio Tutorial</a> <!--- menu ---> <ul> <li><a href="#" class="active">Home</a></li> <li><a href="#">Services</a></li> <li><a href="#">Testimonials</a></li> <li><a href="#">Contact</a></li> </ul> </nav> <!--- text ---> <div class="text-container"> <p>Hello,</p> <p>I’M NIDA</p> <p>SEO Technical Writer & Developer</p> <p>An aquarius girl who loves music, watching movies and <br>of course writing.</p> <button class="hire-btn">Hire me</button> <button class="down-cv">Download CV</button> </div> <!-- model --> <img alt="model" class="model" src="images/ilustrasi.jpg"> </section> |
Ketiga, karena ini website portfolio, Anda dapat menambahkan bagian services atau layanan. Pada bagian ini, Anda dapat menunjukkan layanan yang dapat Anda kerjakan dan skill apa saja yang Anda miliki. Layanan tersebut dapat Anda tuliskan pada tag <div class="box-container">.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | <div class="box-container">.<!-- services/layanan --> <div class="services"> <!--text--> <div class="services-text "> <p>Services</p> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p> </div> <div class="box-container"> <!--- 1 ---> <div class="box-1"> <span>1</span> <p class="heading">Technical Writing</p> <p class="details">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p> <button>Read More</button> </div> <!--- 2 ---> <div class="box-2"> <span>2</span> <p class="heading">Web Design</p> <p class="details">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p> <button>Read More</button> </div> <!--- 3 ---> <div class="box-3"> <span>3</span> <p class="heading">Web Development</p> <p class="details">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p> <button>Read More</button> </div> </div> </div> |
Keempat, jika Anda sudah pernah mengerjakan atau memiliki proyek, Anda dapat menambahkan testimoni pada website portfolio. Bagian ini dapat Anda isi dengan review dan rating dari klien atas hasil kerja Anda.
Jangan lupa untuk menambahkan link script fontawesome pada bagian head. Karena jika tidak, ikon bintang yang akan digunakan untuk menunjukkan rating kepuasan klien tidak akan muncul di halaman web Anda.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | <!--testimonials--> <div class="testimoni"> <!--text--> <div class="testimoni-text "> <p>What Our Client Says..</p> </div> <div class="testimoni-col"> <div class="testimoni-1"> <img src="images/ava1.png"> <div> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p> <h3>Client Pertama</h3> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="far fa-star"></i> </div> </div> <div class="testimoni-2"> <img src="images/ava2.png"> <div> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p> <h3>Client Kedua</h3> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> </div> </div> </div> </div> |
Kelima, bagian footer. Sebagai penutup, kami menambahkan sosial media sebagai kontak yang bisa dihubungi. Kode HTML untuk logo sosial media dapat Anda cari pada website fontawesome.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | <!-- footer --> <footer> <p>Interested In Using Our Services?</p> <!--paragraph--> <p>I try to work on your project as quickly as possible. Guarantee for revision until you are satisfied with my work.</p> <!--social--> <div class="social-icons"> <a href="#"><i class="fab fa-whatsapp"></i></a> <a href="#"><i class="fab fa-facebook-f"></i></a> <a href="#"><i class="fab fa-twitter"></i></a> <a href="#"><i class="fab fa-instagram"></i></a> <a href="#"><i class="fab fa-youtube"></i></a> </div> <!--copyright--> <p class="copyright">Copyright by Niagahoster Tutorial</p> </footer> <!--social-attach-bar--> <div class="social"> <a href="#"><i class="fab fa-whatsapp"></i></a> <a href="#"><i class="fab fa-facebook-f"></i></a> <a href="#"><i class="fab fa-twitter"></i></a> <a href="#"><i class="fab fa-instagram"></i></a> <a href="#"><i class="fab fa-youtube"></i></a> </div></body></html> |
Jika Anda masih bingung, Anda dapat langsung melihat hasilnya dengan menyalin keseluruhan kode berikut ini pada text editor yang Anda gunakan :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 | <!DOCTYPE html><html><head> <meta charset="utf-8"> <title>Personal Website</title> <link rel="stylesheet" type="text/css" href="style.css"/></head><body> <section> <!--- navigation ---> <nav> <!--- logo ---> <a href="#" class="logo">Portfolio Tutorial</a> <!--- menu ---> <ul> <li><a href="#" class="active">Home</a></li> <li><a href="#">Services</a></li> <li><a href="#">Testimonials</a></li> <li><a href="#">Contact</a></li> </ul> </nav> <!--- text ---> <div class="text-container"> <p>Hello,</p> <p>I’M NIDA</p> <p>SEO Technical Writer & Developer</p> <p>An aquarius girl who loves music, watching movies and <br>of course writing.</p> <button class="hire-btn">Hire me</button> <button class="down-cv">Download CV</button> </div> <!-- model --> <img alt="model" class="model" src="images/ilustrasi.jpg"> </section> <!-- services --> <div class="services"> <!--text--> <div class="services-text "> <p>Services</p> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p> </div> <div class="box-container"> <!--- 1 ---> <div class="box-1"> <span>1</span> <p class="heading">Technical Writing</p> <p class="details">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p> <button>Read More</button> </div> <!--- 2 ---> <div class="box-2"> <span>2</span> <p class="heading">Web Design</p> <p class="details">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p> <button>Read More</button> </div> <!--- 3 ---> <div class="box-3"> <span>3</span> <p class="heading">Web Development</p> <p class="details">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p> <button>Read More</button> </div> </div> </div> <!--testimonials--> <div class="testimoni"> <!--text--> <div class="testimoni-text "> <p>What Our Client Says..</p> </div> <div class="testimoni-col"> <div class="testimoni-1"> <img src="images/ava1.png"> <div> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p> <h3>Client Pertama</h3> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="far fa-star"></i> </div> </div> <div class="testimoni-2"> <img src="images/ava2.png"> <div> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p> <h3>Client Kedua</h3> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> </div> </div> </div> </div> <!-- footer --> <footer> <p>Interested In Using Our Services?</p> <!--paragraph--> <p>I try to work on your project as quickly as possible. Guarantee for revision until you are satisfied with my work.</p> <!--social--> <div class="social-icons"> <a href="#"><i class="fab fa-whatsapp"></i></a> <a href="#"><i class="fab fa-facebook-f"></i></a> <a href="#"><i class="fab fa-twitter"></i></a> <a href="#"><i class="fab fa-instagram"></i></a> <a href="#"><i class="fab fa-youtube"></i></a> </div> <!--copyright--> <p class="copyright">Copyright by Niagahoster Tutorial</p> </footer> <!--social-attach-bar--> <div class="social"> <a href="#"><i class="fab fa-whatsapp"></i></a> <a href="#"><i class="fab fa-facebook-f"></i></a> <a href="#"><i class="fab fa-twitter"></i></a> <a href="#"><i class="fab fa-instagram"></i></a> <a href="#"><i class="fab fa-youtube"></i></a> </div></body></html> |
Nah, sekarang website portfolio sederhana Anda sudah jadi. Namun, karena belum menggunakan CSS, tampilannya masih seperti ini :
No comments:
Post a Comment