Tutorial Membuat Website Dengan Css
Beliau ingin belajar kaidah membuat website, tapi resah harus menginjak darimana? Enggak usah nanar lagi, Anda bisa memulainya dari HTML dan CSS! Karena bagi sendiri web developer, HTML dan CSS adalah pondasi nan wajib dipelajari untuk mengembangkan website.
Makanya karena itu, kata sandang boleh jadi ini akan membahas tentang cara membuat website dengan HTML dan CSS. Silakan, serampak saja simak panduan lengkapnya!
Cara Membuat Website dengan HTML dan CSS
Sebelum timbrung ke cara menciptakan menjadikan website dengan HTML dan CSS, Dia harus menyiagakan
Text Penyunting
dan
Web Browser
tambahan pula dahulu. Text editor digunakan sebagai tools untuk menulis kode, sementara itu web browser digunakan kerjakan mengakses website.
Pada tutorial ini, kami akan menggunakan
Visual Bengkel seni Code (VS Code)
andai teks editornya dan
Google Chrome
sebagai browsernya. Anda objektif menunggangi tool nomine Anda.
Website yang akan Anda bagi kali ini merupakan website portfolio keteter menunggangi HTML dan CSS belaka. Nantinya, tampilan website akan seperti ini :
Menariknya, bikin membuat website tersebut, Anda hanya mesti mengikuti 4 anju saja, yaitu :
- Membuat Struktur Project Web
- Menambahkan Kode pada File index.html
- Menambahkan Kode pada File style.css
- Mengakses Website di Web Browser
Tercantol mencobanya? Yuk, bersama-sama saja ikuti panduan lengkap mandu membentuk 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 arketipe ini, kami menggunakan cap “Web Portfolio”
Kemudian, buat folder baru dengan nama
images
. Folder ini adalah kancah kerjakan menyimpan gambar/assets
nan akan digunakan sreg website.
Selanjutnya, buatlah dua file baru bernama
index.html
dan
style.css
web portfolio tersebut.
Index.html
merupakan inti terbit halaman website nan dibuat, Dia dapat menambahkan konten website pada file ini.
Sementara itu file
style.css
yaitu file pelengkap HTML nan digunakan lakukan menyangkal dan mempercantik tampilan website.
2. Menambahkan Kode pada File index.html
File HTML berisi kode utama bakal membangun struktur website Beliau. Bak mobil, HTML di website sama seperti rencana mobil yang takhlik dan menopang body mobil. Oleh karena itu, file ini harus dibuat terlebih dahulu.
Pada dasarnya, struktur setiap pelataran HTML tersusun atas 4 bagian penting, yaitu :
-
Tag DTD/Doctype
:
Document Type Declaration
(DTD) harus ditulis pada semula dokumen. Tag ini berfungsi bakal mendeklarasikan macam dokumen dan versi HTML yang digunakan buat diproses pada web browser. -
Tag HTML
: Merupakan wadah dari semua atom 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 atom nan tampil di halaman web browser. Disinilah penggalan dimana semua konten ditulis.
Baca Lagi :
Belajar HTML Lengkap kerjakan Pemula
Bagaimana telah suka-suka gambaran?
Kalau begitu, pendirian membuat website tersisa dengan HTML bisa dimulai dengan menambahkan kode berikut ini plong file
index.html
Anda :
Mula-mula, di bagian tag head ini, Anda terbiasa mendeklarasikan embaran tentang
meta tag charset,
title
website, serta link atau path dari
external sources
(misal : CSS dan JavaScript) yang digunakan pada website.
Ambillah, yang perlu Anda perhatikan pada fragmen head ini yakni lokasi tempat menyimpan file CSS. Pastikan file CSS berada sreg folder yang seperti mana file HTML. Jika berbeda folder, pastikan Anda memasukkan path yang sesuai pada penggalan
href.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Personal Website</title> <link rel="stylesheet" type="text/css" href="style.css"/> <script src="https://kit.fontawesome.com/c8e4d183c2.js" crossorigin="anonymous"></script> </head>
Kedua, masuk ke tag body. Fragmen pertama puas body website portfolio ini adalah tampilan awal/welcome home yang terdiri dari
navigation kafetaria,
text container, dan lembaga.
Navigation kedai minum atau stereotip disebut navbar adalah komponen utama navigasi website yang aktual menu, biasanya terwalak pada bagian header website.
Sedangkan tag class
text container
pada kode di bawah ini merupakan adegan dimana Dia dapat menambahkan tulisan untuk tampilan awal website ketika diakses.
<body> <section> <!--- navigation ---> <nav> <!--- segel ---> <a href="#" class="cap">Portfolio Kursus</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> <!-- ideal --> <img alt="eksemplar" class="model" src="images/ilustrasi.jpg"> </section>
Ketiga, karena ini website portfolio, Sira dapat menambahkan bagian services maupun layanan. Pada bagian ini, Ia dapat menunjukkan layanan yang boleh Beliau bikin dan skill apa saja nan Anda miliki. Layanan tersebut dapat Engkau tuliskan pada tag
<div class="box-container">.
<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 kalimantang 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 duaja 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 tunggul dummy text ever since the 1500s.</p> <button>Read More</button> </div> </div> </div>
Keempat, jikalau Anda sudah lalu pernah mengerjakan maupun n kepunyaan kiriman, Anda dapat menambahkan pemeriksaan ulang puas website portfolio. Episode ini dapat Anda isi dengan review dan rating dari klien atas hasil kerja Anda.
Jangan lupa kerjakan menambahkan link script
fontawesome
pada adegan head. Karena seandainya tidak, ikon medali yang akan digunakan untuk menunjukkan rating kepuasan klien tidak akan muncul di halaman web Anda.
<!--testimonials--> <div class="testimoni"> <!--text--> <div class="testimoni-text "> <p>What Our Client Says..</p> </div> <div class="testimoni-col"> <div class="pembuktian-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 Mula-mula</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 pataka 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, penggalan footer. Ibarat penutup, kami menambahkan sosial media sebagai kontak yang dapat dihubungi. Kode HTML bikin keunggulan sosial media dapat Anda cari pada website fontawesome.
<!-- 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-kafe--> <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 ganar, Beliau dapat langsung mematamatai karenanya dengan menyalin keseluruhan kode berikut ini pada text editor yang Anda gunakan :
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Personal Website</title> <link rel="stylesheet" type="text/css" href="style.css"/> <script src="https://kit.fontawesome.com/c8e4d183c2.js" crossorigin="anonymous"></script> </head> <body> <section> <!--- navigation ---> <nav> <!--- cap ---> <a href="#" class="etiket">Portfolio Latihan</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 derita</button> <button class="down-cv">Download CV</button> </div> <!-- ideal --> <img alt="model" class="ideal" 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="pembuktian-col"> <div class="pemeriksaan ulang-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 pataka 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="konfirmasi-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 Kursus</p> </footer> <!--social-attach-kafetaria--> <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 Ia sudah kaprikornus. Namun, karena belum menggunakan CSS, tampilannya masih seperti ini :
Hmm masih agak membingungkan dan kurang menghirup ya, berbarengan saja tambahkan CSS-nya, yuk!
Baca Sekali lagi
: Membuat Aplikasi Web dengan Flutter
3. Menambahkan Kode pada File style.css
Sekarang, saatnya cara menciptakan menjadikan website dengan CSS agar tampilannya makin rapi dan menarik. Begitu juga yang sudah dibahas sebelumnya, tanpa CSS, tampilan website sekadar sebatas text saja.
Jika lagi pada analogi mobil sebelumnya, CSS di website seperti cat oto yang dapat diganti dan disesuaikan bagi membuat tampilan mobil terlihat makin keren. Meskipun rangka maupun strukturnya sekelas, Beliau dapat mengubah style tampilan sesuai selera Anda.
Struktur penulisan CSS terdiri terbit 3 adegan :
-
Selektor
: Merupakan kata kunci nan mengaduh style di file CSS dengan file HTML. Selektor dapat kasatmata tag, class, id, atau atribut yang terdapat pada file HTML. -
Blok Permakluman
: Merupakan ajang maupun tempat batik style CSS, ditandai dengan kurung kurawal {}. - Kepunyaan dan Nilai : Adalah sekumpulan aturan nan diberikan plong selektor yang dipilih.
Kamu dapat coba menunggangi kode di pangkal ini terlebih dulu sebelum mengubahnya menggunakan style Kamu sendiri :
@charset "utf-8"; /* CSS Document*/ body{ background-color:#ffffff; margin:0px; padding:0px; } ul{ list-style:none; } a{ text-decoration:none; } section{ width:100%; height:95vh; position: relative; } nav{ display: flex; justify-content: space-between; align-items:center; height:60px; background-color:#FFFFFF; box-shadow:2px 2px 12px rgba(0,0,0,0.2); padding:0px 5%; } nav ul{ display: flex; } nav ul li a{ margin:30px; font-family:myriad pro regular; color:#505050; font-size: 15px; font-weight:700; } .logo{ font-family:RoadTest; color:#000000; font-size: 22px; font-weight: bold; } .active{ color:#2d2a2a; font-weight:bold; } .text-container p:nth-child(1){ font-family: calibri; font-weight: bold; color: #6d6d6d; font-size: 22px; } .text-container p:nth-child(2){ font-family: calibri; font-weight: bold; letter-spacing: 2px; color: #1a1a1a; font-size: 60px; } .text-container p:nth-child(3){ font-family: myriad pro regular; color: #403e3e; font-size: 30px; line-height: 30px; } .text-container p:nth-child(4){ font-family: calibri; color: #403e3e; font-size: 17px; margin-top: 10px; line-height: 30px; } .text-container p{ line-height: 0px; margin: 55px 0px 25px; } .text-container{ position: absolute; left: 13%; top: 42%; transform: translate(-13%, -42%); } .text-container button{ width: 130px; height: 42px; border-radius: 10px; font-family: calibri; font-weight: bold; font-size: 14px; outline: none; margin: 0px 10px; } .hire-btn{ border: 2px solid #373636; color: #373636; } .down-cv{ background-color: #0b0b0b; color: #ffffff; border: none; } button:active{ transform: scale(1.1); } .transendental{ height: 560px; position: absolute; bottom: 60px; left: 80%; transform: translateX(-70%); } .services{ height:600px; background-color:#f6f5f5; padding: 2% 10% 0px 10%; } .services-text p:nth-child(1){ font-family: calibri; font-weight:bold; color:#1d1c1c; font-size:30px; line-height:0px; text-align: center; margin-bottom: 40px; } .services-text p:nth-child(2){ font-family:calibri; color:#7e7d7d; } .services-text{ margin:50px 0px; } .box-container{ display:flex; justify-content:space-between; } .box-1,.box-2,.box-3{ width: 300px; height:320px; background-repeat: no-repeat; background-size: cover; box-shadow:2px 2px 18px rgba(0,0,0,0.3); align-items: center; justify-content: center; display: flex; flex-direction: column; margin: 0px 4px; } .box-1{ background-image:url("images/services-1.png"); } .box-2{ background-image:url("images/services-2.png"); } .box-3{ background-image: url("images/servies-3.png"); } .box-1 span, .box-2 span, .box-3 span{ width:40px; height:40px; border-jangkauan:50%; background-color:#ffffff; display: flex; justify-content: center; align-items:center; font-family: calibri; font-weight: bold; } .box-1 p:nth-child(2), .box-2 p:nth-child(2), .box-3 p:nth-child(2){ color:#FFFFFF; font-family: calibri; font-size: 23px; line-height:0px; } .box-1 p:nth-child(3), .box-2 p:nth-child(3), .box-3 p:nth-child(3){ font-family: calibri; color:#8F8F8F; text-align:center; width: 230px; margin:0px 0px 20px 0px; } .box-1 button, .box-2 button, .box-3 button{ width:100px; height:30px; background-color:#FFFFFF; border:none; outline: none; border-skop:5px; } .pembuktian{ height:500px; background-color:#FFFFFF; padding: 2% 10% 0px 10%; text-align: center; margin: auto; } .pembuktian-text p:nth-child(1){ font-family: calibri; font-weight:bold; color:#1d1c1c; font-size:30px; line-height:0px; } .verifikasi-text{ margin:70px 0px; } .testimoni-col{ display:flex; justify-content:space-between; } .pengecekan-1,.testimoni-2{ flex-basis: 44%; border-skop: 10px; margin-bottom: 5%; text-align: left; background: #f4f2f4; padding: 25px; cursor: pointer; display: flex; width: 500px; box-shadow: 2px 2px 12px rgba(0,0,0,0.2); } .konfirmasi-col img{ height: 60px; margin-left: 5px; margin-right: 30px; margin-top: 20px; border-cak cakupan: 50%; } .testimoni-col p{ padding: 0; } .testimoni-col h3{ margin-top: 15px; text-align: left; } .tes-col .fas, .testimoni-col .far{ color: #f44336; } footer p{ font-family: calibri; } footer p:nth-child(1){ font-size: 30px; font-weight:bold; color:#FFFFFF; line-height:10px; } footer p:nth-child(2){ font-size: 16px; color:#7e7d7d; width:600px; text-align: center; } footer{ height:300px; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; background-color: #191919; } .social-icons a{ width:40px; height:40px; display: flex; justify-content: center; align-items: center; background-color:#e6e3e3; margin:20px 10px; border-radius:50%; } .social-icons{ display: flex; } .social-icons i,.social i{ color:#000000; } .social-icons a:hover{ background-color:#000000; box-shadow:2px 2px 12px rgba(0,0,0,0.2); transition:all ease 0.5s; } .social-icons a:hover i, .social a:hover i{ color:#FFFFFF; transition:all ease 0.5s; } .copyright{ color:#565555; font-size: 15px; position: absolute; left:50%; bottom:10px; transform: translateX(-50%); } .social{ position: fixed; top:50%; right:0px; transform:translateY(-50%); } .social a{ display: flex; justify-content: center; align-items: center; width:50px; height:50px; margin:0px; padding: 0px; line-height:0px; background-color:#FFFFFF; border:1px solid #CBCBCB; box-shadow:2px 2px 12px rgba(0,0,0,0.2); } .social a:hover{ background-color:#000000; transition:all ease 0.5s; } .social i{ font-size:20px; color:#2B2B2B; }
Jadi, semenjak kode tersebut, manakah yang dimaksud dengan selektor, blok deklarasi, properti dan ponten?
Seyogiannya bertambah jelas, mari perhatikan transendental berikut :
.logo{ font-family:RoadTest; color:#000000; font-size: 22px; font-weight: bold; } body{ background-color:#ffffff; margin:0px; padding:0px; }
Pada kode di atas,
.tera
dan
body
merupakan selektor. Takdirnya Beliau perhatikan, bisa jadi akan muncul cak bertanya kenapa ada selektor yang memakai tanda bintik di semula dan ada yang tidak.
Selektor
.logo
adalah selektor yang kasatmata class dan harus diawali dengan label titik, sedangkan
body
adalah selektor nan berupa tag dan lain memperalat tanda tutul pada awal penulisannya.
Blok deklarasi diawali dengan parentesis { dan diakhiri dengan tanda kurung }.
Kode
background-color:#ffffff;
merupakan paradigma properti dan kredit. Kode
background-color
plong kode yang diberikan adalah nasib baik nan artinya menata dandan background berusul selektor tag
body. Sedangkan kode
#ffffff
merupakan nilai nan berupa warna nirmala untuk background pada tag
body.
Baca Juga :
Daftar Kode Warna pada HTML dan CSS
Cak bagi memaklumi kode CSS lebih dalam, Anda dapat mencoba untuk mengubah kode di atas dan lihat bagaimana pengaruhnya terhadap tampilan website portfolio Anda.
4. Mengakses Website di Web Browser
Cara takhlik website dengan HTML dan CSS yang efektif adalah dengan membuka bacaan editor dan browser bersamaan.
Kenapa sedemikian itu?
Dengan membukanya secara bersamaan, setiap pertukaran yang Kamu lakukan pada file HTML maupun CSS dapat serempak tampak puas browser. Sehingga proses peluasan website akan berlantas lebih cepat dan mudah dimodifikasi.
Cak bagi menjalankan website, Anda saja perlu menyingkapkan file
index.html
pada browser kesayangan Anda. Kalau Ia mengerjakan persilihan pada kode, jangan lalai refresh halaman web untuk mengawasi perubahan.
Nah, sekarang ayo coba jalankan website portfolio yang mutakadim Anda buat sebelumnya!
Inilah cermin tampilan tadinya website dengan kode di atas. Wajar sekiranya tampilan website Anda agak berlainan, karena kerangka/assets nan Anda gunakan juga mungkin berbeda. Makara sesuaikan saja, ya?
Oh ya, jangan lupa cek jikalau ada buram nan tidak muncul. Pastikan path tempat menyimpan gambar dan variasi file image nan digunakan sudah bersusila.
Baca Kembali :
10+ Website Penyedia Gambar Gratis
Kesimpulan
Itulah cara membuat website dengan HTML dan CSS yang boleh Anda coba. Sangat mudah, kan? Sekadar dengan menggunakan file HTML dan CSS saja, Anda kini bisa membuat website portfolio Dia sendiri.
Sayangnya, website tersebut hanya bisa diakses offline sebab semua asetnya tersimpan di komputer Anda tetapi. Agar bisa dilihat banyak orang, Engkau perlu mengonline-kan dulu, ya!
Caranya, Ia memerlukan layanan web hosting kerjakan menyimpan aset Anda agar boleh diakses online. Namun, jangan sembarang memilih layanan hosting web, ya!
Layanan
Unlimited Web Hosting Niagahoster
kali pilihan yang tepat. Sebab, Niagahoster memberikan jaminan keamanan cak bagi website Kamu dengan berbagai fitur keamanan sama dengan Imunify360 yang mencegah gempuran malware.
Selain itu dengan uptime hingga 99,999%, website Sira dapat selalu online selama 24 jam penuh. Dengan begitu, Ia bisa mengonlinekan website minus rasa khawatir dengan downtime.
Menariknya, dengan harga mulai berpangkal
Rp27rb/rembulan
sahaja, Ia bisa mendapatkan domain gratis! Tak saja itu, Niagahoster juga menawarkan jasa pembuatan website dengan berbagai template menggelandang.
Yuk, serempak saja pilih layanan hosting Niagahoster untuk website Dia!
Demikianlah panduan cara membuat website dengan HTML dan CSS, sepatutnya artikel ini bermanfaat bagi Dia ya 🙂
Source: https://www.niagahoster.co.id/blog/cara-membuat-website-html-css/
