Membuat Website Sederhana

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) atau
sublime textsebagai 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 :
1. Membuat Struktur Project Web

2. Menambahkan Kode pada File index.html
3. Menambahkan Kode pada File style.css
4. Mengakses Website di Web Browser
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
<!DOCTYPE html>
2<html>
3<head>
4 <meta charset="utf-8">
5 <title>Personal Website</title>
6 <link rel="stylesheet" type="text/css" href="style.css"/>
<script src="https://kit.fontawesome.com/c8e4d183c2.js" crossorigin="anonymous"></script>
7</head>
8
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 <body>
4 <section>
5 
6 <nav>

7 <a href="#" class="logo">Portfolio Tutorial</a>
8 
9 <ul>
10 <li><a href="#" class="active">Home</a></li>
<li><a href="#">Services</a></li>
11 <li><a href="#">Testimonials</a></li>
12 <li><a href="#">Contact</a></li>
13 </ul>
14 </nav>
15
16 
<div class="text-container">
17 <p>Hello,</p>
18 <p>I’M NIDA</p>
19 <p>SEO Technical Writer & Developer</p>
20 <p>An aquarius girl who loves music, watching movies and
<br>of course writing.</p>
21
<button class="hire-btn">Hire me</button>
22 <button class="down-cv">Download CV</button>
23 </div>
24 
25 <img alt="model" class="model" src="images/ilustrasi.jpg">
</section>
26
27
28
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 <div class="box-container">.
3

4 <div class="services">
5 
6 <div class="services-text ">
7 <p>Services</p>
8 <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
9 type specimen book. It has survived not only five centuries, but also the leap into electronic
10 </div>
11
12 <div class="box-container">

13 <div class="box-1">
14 <span>1</span>
15 <p class="heading">Technical Writing</p>
16 <p class="details">Lorem Ipsum is simply dummy text of the printing and typesett
17 dummy text ever since the 1500s.</p>
<button>Read More</button>
18 </div>
19 
21 <span>2</span>
22 <p class="heading">Web Design</p>
<p class="details">Lorem Ipsum is simply dummy text of the printing and typesett
24 <button>Read More</button>
25 </div>
26 
<div class="box-3">
27 <span>3</span>
28 <p class="heading">Web Development</p>
29 <p class="details">Lorem Ipsum is simply dummy text of the printing and typesett
</div>
32 </div>
33 </div>
34
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 
<div class="testimoni">
2

3
4
5 <div class="testimoni-text ">
6 <p>What Our Client Says..</p>
7 </div>
8
<div class="testimoni-col">
9 <div class="testimoni-1">
10 <img src="images/ava1.png">
11 <div>
12 <p>Lorem Ipsum is simply dummy text of the printing and typesett
<h3>Client Pertama</h3>
14 <i class="fas fa-star"></i>
18 <i class="far fa-star"></i>
</div>
19 </div>
20
23 <div>
<p>Lorem Ipsum is simply dummy text of the printing and typesett
25 <h3>Client Kedua</h3>
<i class="fas fa-star"></i>
30 </div>
31 </div>
32 </div>
</div>
33
34
35
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 
<footer>
2 <p>Interested In Using Our Services?</p>
3
4 
5 <p>I try to work on your project as quickly as possible. Guarantee for revis
6 
<div class="social-icons">
7 <a href="#"><i class="fab fa-whatsapp"></i></a>
8 <a href="#"><i class="fab fa-facebook-f"></i></a>
9
10
11 <a href="#"><i class="fab fa-twitter"></i></a>
12 <a href="#"><i class="fab fa-instagram"></i></a>
13 <a href="#"><i class="fab fa-youtube"></i></a>
14 </div>
15

16 <p class="copyright">Copyright by Niagahoster Tutorial</p>
17 </footer>
18
19 
20 <div class="social">
<a href="#"><i class="fab fa-whatsapp"></i></a>
21
<a href="#"><i class="fab fa-facebook-f"></i></a>
25 </div>
</body>
26
27 </html>
28
29
30
Jika Anda masih bingung, Anda dapat langsung melihat hasilnya dengan
menyalin keseluruhan kode berikut ini pada text editor yang Anda gunakan :
1 <!DOCTYPE html>
<html>
2
<head>
3 <meta charset="utf-8">
4 <title>Personal Website</title>
5 <link rel="stylesheet" type="text/css" href="style.css"/>
6 <script src="https://kit.fontawesome.com/c8e4d183c2.js" crossorigin="anonymous">
</head>
7
8 <body>
9 <section>
10 
11 <nav>
12 
<a href="#" class="logo">Portfolio Tutorial</a>
13 
14 <ul>
15 <li><a href="#" class="active">Home</a></li>
16 <li><a href="#">Services</a></li>
<li><a href="#">Testimonials</a></li>
17 <li><a href="#">Contact</a></li>
18 </ul>
19 </nav>
20
21 
<div class="text-container">
22
<p>Hello,</p>
23 <p>I’M NIDA</p>
24 <p>SEO Technical Writer & Developer</p>
25 <p>An aquarius girl who loves music, watching movies and
26 <br>of course writing.</p>
<button class="hire-btn">Hire me</button>
27 <button class="down-cv">Download CV</button>
28 </div>
29 
30 <img alt="model" class="model" src="images/ilustrasi.jpg">
31 </section>
32

33 <div class="services">
34 
35 <div class="services-text ">
36 <p>Services</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting i
37 text ever since the 1500s, when an unknown printer took a galley of type and scra
38 only five centuries, but also the leap into electronic typesetting, remaining essen
39 </div>
40
41 <div class="box-container">

43 <span>1</span>
44 <p class="heading">Technical Writing</p>
45 <p class="details">Lorem Ipsum is simply dummy text of the pri
46 industry's standard dummy text ever since the 1500s.</p>
47 </div>
48 
50 <span>2</span>
<p class="heading">Web Design</p>
54 </div>
55 
<div class="box-3">
56 <span>3</span>
57 <p class="heading">Web Development</p>
60
</div>
61 </div>
62 </div>
63
64 
<div class="testimoni">
65 
66 <div class="testimoni-text ">
67 <p>What Our Client Says..</p>
</div>
68
69
<div class="testimoni-col">
72 <div>
73 <p>Lorem Ipsum is simply dummy text of the printing and typese
dummy text ever since the 1500s.</p>
74 <h3>Client Pertama</h3>
<i class="far fa-star"></i>
79 </div>
80 </div>
81
<div>
84 <p>Lorem Ipsum is simply dummy text of the printing and typese
86 <h3>Client Kedua</h3>
<i class="fas fa-star"></i>
91 </div>
92 </div>
93 </div>
</div>
94
95 
96 <footer>
97 <p>Interested In Using Our Services?</p>
98

99 <p>I try to work on your project as quickly as possible. Guarantee for revi
100 
101 <div class="social-icons">
102 <a href="#"><i class="fab fa-whatsapp"></i></a>
<a href="#"><i class="fab fa-twitter"></i></a>
106 </div>
107

108
<p class="copyright">Copyright by Niagahoster Tutorial</p>
109 </footer>
110
111 
112 <div class="social">
<a href="#"><i class="fab fa-whatsapp"></i></a>
113
114
115
116
117
118
119
120
121
<a href="#"><i class="fab fa-instagram"></i></a>
125 </div>
126 </body>
127
128 </html>
129
130
131
132
133
134
135
136
137
Nah, sekarang website portfolio sederhana Anda sudah jadi. Namun, karena
belum menggunakan CSS, tampilannya masih seperti ini :
Hmm masih agak membingungkan dan kurang menarik ya, langsung saja
tambahkan CSS-nya, yuk!
Baca Juga : Membuat Aplikasi Web dengan Flutter
3. Menambahkan Kode pada File style.css
Sekarang, saatnya cara membuat website dengan CSS agar tampilannya lebih
rapi dan menarik. Seperti yang sudah dibahas sebelumnya, tanpa CSS, tampilan
website hanya sebatas text saja.
Jika kembali pada analogi mobil sebelumnya, CSS di website seperti cat mobil
yang dapat diganti dan disesuaikan untuk membuat tampilan mobil terlihat lebih
keren. Meskipun rangka atau strukturnya sama, Anda dapat mengubah style
tampilan sesuai selera Anda.
Struktur penulisan CSS terdiri dari 3 bagian :
 Selektor : Merupakan kata kunci yang menghubungkan style di file CSS

dengan file HTML. Selektor dapat berupa tag, class, id, maupun atribut
yang terdapat pada file HTML.
 Blok Deklarasi : Merupakan wadah atau tempat menulis style CSS,
ditandai dengan kurung kurawal {}.
 Properti dan Nilai : Merupakan sekumpulan aturan yang diberikan pada
selektor yang dipilih.
Anda dapat coba menggunakan kode di bawah ini terlebih dulu sebelum
mengubahnya menggunakan style Anda sendiri :
1 @charset "utf-8";
/* CSS Document*/
2 body{
3 background-color:#ffffff;
4 margin:0px;
5 padding:0px;
6 }
7
ul{
8 list-style:none;
9 }
10
11 a{
12 text-decoration:none;
13 }
14
15 section{
width:100%;
16
height:95vh;
17 position: relative;
18 }
19
20 nav{
21 display: flex;
justify-content: space-between;
22 align-items:center;
23 height:60px;
24 background-color:#FFFFFF;
25 box-shadow:2px 2px 12px rgba(0,0,0,0.2);
26 padding:0px 5%;
27 }
28 nav ul{
29 display: flex;
30 }
31 nav ul li a{
32 margin:30px;
33 font-family:myriad pro regular;
34 color:#505050;
35 font-size: 15px;
font-weight:700;
36 }
37
38 .logo{
39 font-family:RoadTest;
40 color:#000000;
41 font-size: 22px;
font-weight: bold;
42 }
43
44 .active{
45 color:#2d2a2a;
46 font-weight:bold;
}
47
48 .text-container p:nth-child(1){
49 font-family: calibri;
50 font-weight: bold;
51 color: #6d6d6d;
52 font-size: 22px;
}
53
57 letter-spacing: 2px;
color: #1a1a1a;
58
font-size: 60px;
59 }
60
font-family: myriad pro regular;
62
color: #403e3e;
63 font-size: 30px;
64 line-height: 30px;
65 }
66
font-family: calibri;
68 color: #403e3e;
69 font-size: 17px;
70 margin-top: 10px;
72 }
73
.text-container p{
75 margin: 55px 0px 25px;
76 }
77
78 .text-container{
position: absolute;
79 left: 13%;
80 top: 42%;
81 transform: translate(-13%, -42%);
82 }
83
84 .text-container button{
width: 130px;
85 height: 42px;
86 border-radius: 10px;
89 font-size: 14px;
outline: none;
90 margin: 0px 10px;
91 }
92
93 .hire-btn{
94 border: 2px solid #373636;
color: #373636;
95 }
96
97 .down-cv{
98 background-color: #0b0b0b;
99 color: #ffffff;
100 border: none;
}
101
102 button:active{
103 transform: scale(1.1);
104 }
105
.model{
106 height: 560px;
position: absolute;
107
bottom: 60px;
108 left: 80%;
109 transform: translateX(-70%);
110 }
111
112 .services{
height:600px;
113 background-color:#f6f5f5;
114 padding: 2% 10% 0px 10%;
115 }
116
117 .services-text p:nth-child(1){
font-weight:bold;
119 color:#1d1c1c;
120 font-size:30px;
121 line-height:0px;
122 text-align: center;
margin-bottom: 40px;
123 }
124
125 .services-text p:nth-child(2){
126 font-family:calibri;
127 color:#7e7d7d;
128
129 }
130
.services-text{
131 margin:50px 0px;
132 }
133
134 .box-container{
135 display:flex;
136 justify-content:space-between;
}
137
138 .box-1,.box-2,.box-3{
139 width: 300px;
140 height:320px;
141 background-repeat: no-repeat;
background-size: cover;
143 align-items: center;
144 justify-content: center;
145 display: flex;
146 flex-direction: column;
margin: 0px 4px;
147
148 }
149
150 .box-1{
background-image:url("images/services-1.png");
151
}
152
153 .box-2{
background-image:url("images/services-2.png");
154
}
155
156 .box-3{
157 background-image: url("images/servies-3.png");
158 }
159
160 .box-1 span,
.box-2 span,
161 .box-3 span{
162 width:40px;
163 height:40px;
164 border-radius:50%;
165 background-color:#ffffff;
display: flex;
167 align-items:center;
}
170
171 .box-1 p:nth-child(2),
173 .box-3 p:nth-child(2){
174 color:#FFFFFF;
font-size: 23px;
177 }
178
181 .box-3 p:nth-child(3){
182 color:#8F8F8F;
183 text-align:center;
184 width: 230px;
185 margin:0px 0px 20px 0px;
}
186
187 .box-1 button,
188 .box-2 button,
189 .box-3 button{
190 width:100px;
191 height:30px;
background-color:#FFFFFF;
192 border:none;
193 outline: none;
194 border-radius:5px;
195 }
196
.testimoni{
197
height:500px;
padding: 2% 10% 0px 10%;
199
text-align: center;
200 margin: auto;
201 }
202
203 .testimoni-text p:nth-child(1){
font-weight:bold;
205 color:#1d1c1c;
206 font-size:30px;
208 }
209
210 .testimoni-text{
margin:70px 0px;
211 }
212
213 .testimoni-col{
214 display:flex;
215 justify-content:space-between;
}
216
217 .testimoni-1,.testimoni-2{
218 flex-basis: 44%;
219 border-radius: 10px;
220 margin-bottom: 5%;
221 text-align: left;
background: #f4f2f4;
222 padding: 25px;
223 cursor: pointer;
224 display: flex;
225 width: 500px;
226 box-shadow: 2px 2px 12px rgba(0,0,0,0.2);
}
227
228 .testimoni-col img{
229 height: 60px;
230 margin-left: 5px;
231 margin-right: 30px;
margin-top: 20px;
232 border-radius: 50%;
233 }
234
235 .testimoni-col p{
236 padding: 0;
237 }
238
.testimoni-col h3{
239 margin-top: 15px;
240 text-align: left;
241 }
242
243 .testimoni-col .fas, .testimoni-col .far{
color: #f44336;
244 }
245
footer p{
246
247 }
248
249 footer p:nth-child(1){
250 font-size: 30px;
251 font-weight:bold;
color:#FFFFFF;
253 }
254
255 footer p:nth-child(2){
257 color:#7e7d7d;
width:600px;
258 text-align: center;
259 }
260
261 footer{
262 height:300px;
display: flex;
263 flex-direction: column;
266 position: relative;
267 background-color: #191919;
}
268
269 .social-icons a{
270 width:40px;
271 height:40px;
272 display: flex;
align-items: center;
274 background-color:#e6e3e3;
275 margin:20px 10px;
276 border-radius:50%;
277 }
278
.social-icons{
279 display: flex;
280
281 }
282
283 .social-icons i,.social i{
284 color:#000000;
}
285
286 .social-icons a:hover{
287 background-color:#000000;
289 transition:all ease 0.5s;
}
290
291 .social-icons a:hover i,
.social a:hover i{
292
color:#FFFFFF;
293 transition:all ease 0.5s;
294 }
295
296 .copyright{
color:#565555;
298 position: absolute;
299 left:50%;
300 bottom:10px;
301 transform: translateX(-50%);
}
302 .social{
303 position: fixed;
304 top:50%;
305 right:0px;
transform:translateY(-50%);
306 }
307
308 .social a{
309 display: flex;
width:50px;
312 height:50px;
313 margin:0px;
314 padding: 0px;
border:1px solid #CBCBCB;
318 }
319
320 .social a:hover{
321 background-color:#000000;
transition:all ease 0.5s;
322 }
323
324 .social i{
325 font-size:20px;
326 color:#2B2B2B;
327 }
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
Jadi, dari kode tersebut, manakah yang dimaksud dengan selektor, blok
deklarasi, properti dan nilai?
Agar lebih jelas, mari perhatikan contoh berikut :

1
2 .logo{
font-family:RoadTest;
3 color:#000000;
4 font-size: 22px;
6 }
7
8 body{
background-color:#ffffff;
9 margin:0px;
10 padding:0px;
11 }
12
Pada kode di atas, .logo dan body merupakan selektor. Jika Anda perhatikan,

mungkin akan muncul pertanyaan kenapa ada selektor yang memakai tanda titik
di awal dan ada yang tidak.
Selektor .logo adalah selektor yang berupa class dan harus diawali dengan

tanda titik, sedangkan body adalah selektor yang berupa tag dan tidak
menggunakan tanda titik pada awal penulisannya.
Blok deklarasi diawali dengan tanda kurung { dan diakhiri dengan tanda kurung
}.
Kode background-color:#ffffff; merupakan contoh properti dan nilai.

Kode background-color pada kode yang diberikan adalah properti yang artinya
mengatur warna background dari selektor tag body. Sedangkan
kode #ffffff merupakan nilai yang berupa warna putih untuk background pada
tag body.
Baca Juga : Daftar Kode Warna pada HTML dan CSS
Untuk memahami 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 membuat website dengan HTML dan CSS yang efektif adalah dengan
membuka teks editor dan browser bersamaan.
Kenapa begitu?
Dengan membukanya secara bersamaan, setiap perubahan yang Anda lakukan

pada file HTML maupun CSS dapat langsung terlihat pada browser. Sehingga
proses pengembangan website akan berlangsung lebih cepat dan mudah
dimodifikasi.
Untuk menjalankan website, Anda hanya perlu membuka file index.html pada

browser kesayangan Anda. Jika Anda melakukan perubahan pada kode, jangan
lupa refresh halaman web untuk melihat perubahan.
Nah, sekarang mari coba jalankan website portfolio yang sudah Anda buat
sebelumnya!
Inilah contoh tampilan awal website dengan kode di atas. Wajar jika tampilan
website Anda agak berbeda, karena gambar/assets yang Anda gunakan juga
mungkin berbeda. Jadi sesuaikan saja, ya?
Oh ya, jangan lupa cek kalau ada gambar yang tidak muncul. Pastikan path
tempat menyimpan gambar dan tipe file image yang digunakan sudah benar.
Baca Juga : 10+ Website Penyedia Gambar Gratis
Kesimpulan
Itulah cara membuat website dengan HTML dan CSS yang bisa Anda coba.
Sangat mudah, kan? Hanya dengan menggunakan file HTML dan CSS saja,
Anda sekarang bisa membuat website portfolio Anda sendiri.
Sayangnya, website tersebut hanya bisa diakses offline sebab semua asetnya
tersimpan di komputer Anda saja. Agar bisa dilihat banyak orang, Anda perlu
mengonline-kan dulu, ya!
Caranya, Anda memerlukan layanan web hosting untuk menyimpan aset Anda
agar bisa diakses online. Namun, jangan sembarang memilih layanan hosting
web, ya!
Layanan Unlimited Web Hosting Niagahoster bisa jadi pilihan yang tepat.

Sebab, Niagahoster memberikan jaminan keamanan untuk website Anda dengan
berbagai fitur keamanan seperti Imunify360 yang mencegah serangan malware.
Selain itu dengan uptime hingga 99,999%, website Anda bisa selalu online
selama 24 jam penuh. Dengan begitu, Anda bisa mengonlinekan website tanpa
rasa khawatir dengan downtime.

Membuat Website Sederhana

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Membuat Website Sederhana

Diunggah oleh

Hak Cipta:

Format Tersedia

Cara Membuat Website dengan HTML dan CSS

Menariknya, untuk membuat website tersebut, Anda hanya perlu mengikuti 4

1. Membuat Struktur Project Web

Pertama-tama, buatlah folder penyimpanan proyek website portfolio Anda dan

Selanjutnya, buatlah dua file baru bernama index.html dan style.css web

Index.html merupakan inti dari halaman website yang dibuat, Anda dapat

Sedangkan file style.css merupakan file pelengkap HTML yang digunakan

2. Menambahkan Kode pada File index.html

Bagaimana sudah ada gambaran?

Pertama, di bagian tag head ini, Anda perlu mendeklarasikan informasi

Jangan lupa untuk menambahkan link script fontawesome pada bagian head.

Kelima, bagian footer. Sebagai penutup, kami menambahkan sosial media

Baca Juga : Membuat Aplikasi Web dengan Flutter

3. Menambahkan Kode pada File style.css

Struktur penulisan CSS terdiri dari 3 bagian :

 Selektor : Merupakan kata kunci yang menghubungkan style di file CSS

Agar lebih jelas, mari perhatikan contoh berikut :

Pada kode di atas, .logo dan body merupakan selektor. Jika Anda perhatikan,

Selektor .logo adalah selektor yang berupa class dan harus diawali dengan

Kode background-color:#ffffff; merupakan contoh properti dan nilai.

Baca Juga : Daftar Kode Warna pada HTML dan CSS

4. Mengakses Website di Web Browser

Dengan membukanya secara bersamaan, setiap perubahan yang Anda lakukan

Untuk menjalankan website, Anda hanya perlu membuka file index.html pada

Baca Juga : 10+ Website Penyedia Gambar Gratis

Layanan Unlimited Web Hosting Niagahoster bisa jadi pilihan yang tepat.

Anda mungkin juga menyukai