Scribd
Unggah
16 tayangan

Membuat Website Dengan HTML Dan CSS

Diunggah oleh

juliasetianingsih180728
Hak Cipta
© © All Rights Reserved
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
16 tayangan

Membuat Website Dengan HTML Dan CSS

Diunggah oleh

juliasetianingsih180728
Hak Cipta
© © All Rights Reserved
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 32

Membuat Website dengan HTML dan CSS?

Agustus 8, 2022 13 min read

Anda ingin belajar cara 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!

Daftar isi tutup

Cara Membuat Website dengan HTML dan CSS

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

Kesimpulan

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 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

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 tutorial 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 adalah 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.

Baca Juga : Belajar HTML Lengkap untuk Pemula

Bagaimana sudah ada gambaran?


Kalau begitu, cara membuat website 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"/>

7 <script src="https://kit.fontawesome.com/c8e4d183c2.js" crossorigin="anonymous"></script>

8</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 <body>

2 <section>

3 <!--- navigation --->

4 <nav>

5 <!--- logo --->

6 <a href="#" class="logo">Portfolio Tutorial</a>

7 <!--- menu --->


8 <ul>

9 <li><a href="#" class="active">Home</a></li>

10 <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 <!--- text --->

17 <div class="text-container">

18 <p>Hello,</p>

19 <p>I&#8217;M NIDA</p>

20 <p>SEO Technical Writer & Developer</p>

21 <p>An aquarius girl who loves music, watching movies and

22 <br>of course writing.</p>

23 <button class="hire-btn">Hire me</button>

24 <button class="down-cv">Download CV</button>

25 </div>

26 <!-- model -->

27 <img alt="model" class="model" src="images/ilustrasi.jpg">

28 </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 <div class="box-container">.

3 <!-- services/layanan -->


4 <div class="services">

5 <!--text-->

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 h
an unknown printer took a galley of type and scrambled it to make a type specimen book. It has surv
9
remaining essentially unchanged.</p>
10
</div>
11

12
<div class="box-container">
13
<!--- 1 --->
14
<div class="box-1">
15
<span>1</span>
16
<p class="heading">Technical Writing</p>
17
<p class="details">Lorem Ipsum is simply dummy text of the printing and typesetting industr
18the 1500s.</p>

19 <button>Read More</button>

20 </div>

21 <!--- 2 --->

22 <div class="box-2">

23 <span>2</span>

24 <p class="heading">Web Design</p>

25 <p class="details">Lorem Ipsum is simply dummy text of the printing and typesetting industr
the 1500s.</p>
26
<button>Read More</button>
27
</div>
28
<!--- 3 --->
29
<div class="box-3">
30
<span>3</span>
31 <p class="heading">Web Development</p>

32 <p class="details">Lorem Ipsum is simply dummy text of the printing and typesetting industr
the 1500s.</p>
33
<button>Read More</button>
34
</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
<!--testimonials-->
2
<div class="testimoni">
3
<!--text-->
4
<div class="testimoni-text ">
5
<p>What Our Client Says..</p>
6
</div>
7

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 typesetting industry. Lorem Ipsu
131500s.</p>

14 <h3>Client Pertama</h3>

15 <i class="fas fa-star"></i>

16 <i class="fas fa-star"></i>


17 <i class="fas fa-star"></i>

18 <i class="fas fa-star"></i>

19 <i class="far fa-star"></i>

20 </div>

21 </div>

22

23 <div class="testimoni-2">

24 <img src="images/ava2.png">

25 <div>

26 <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsu
1500s.</p>
27
<h3>Client Kedua</h3>
28
<i class="fas fa-star"></i>
29
<i class="fas fa-star"></i>
30
<i class="fas fa-star"></i>
31
<i class="fas fa-star"></i>
32
<i class="fas fa-star"></i>
33
</div>
34
</div>
35
</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 <!-- footer -->

2 <footer>

3 <p>Interested In Using Our Services?</p>

4
5 <!--paragraph-->

6 <p>I try to work on your project as quickly as possible. Guarantee for revision until you are satisfi

7 <!--social-->

8 <div class="social-icons">

9 <a href="#"><i class="fab fa-whatsapp"></i></a>

10 <a href="#"><i class="fab fa-facebook-f"></i></a>

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 <!--copyright-->

17 <p class="copyright">Copyright by Niagahoster Tutorial</p>

18 </footer>

19

20 <!--social-attach-bar-->

21 <div class="social">

22 <a href="#"><i class="fab fa-whatsapp"></i></a>

23 <a href="#"><i class="fab fa-facebook-f"></i></a>

24 <a href="#"><i class="fab fa-twitter"></i></a>

25 <a href="#"><i class="fab fa-instagram"></i></a>

26 <a href="#"><i class="fab fa-youtube"></i></a>

27 </div>

28</body>

29

30</html>

Jika Anda masih bingung, Anda dapat langsung melihat hasilnya dengan menyalin
keseluruhan kode berikut ini pada text editor yang Anda gunakan :
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"/>

7 <script src="https://kit.fontawesome.com/c8e4d183c2.js" crossorigin="anonymous"></script>

8 </head>

10 <body>

11 <section>

12 <!--- navigation --->

13 <nav>

14 <!--- logo --->

15 <a href="#" class="logo">Portfolio Tutorial</a>

16 <!--- menu --->

17 <ul>

18 <li><a href="#" class="active">Home</a></li>

19 <li><a href="#">Services</a></li>

20 <li><a href="#">Testimonials</a></li>

21 <li><a href="#">Contact</a></li>

22 </ul>

23 </nav>

24

25 <!--- text --->

26 <div class="text-container">

27 <p>Hello,</p>
28 <p>I&#8217;M NIDA</p>

29 <p>SEO Technical Writer & Developer</p>

30 <p>An aquarius girl who loves music, watching movies and

31 <br>of course writing.</p>

32 <button class="hire-btn">Hire me</button>

33 <button class="down-cv">Download CV</button>

34 </div>

35 <!-- model -->

36 <img alt="model" class="model" src="images/ilustrasi.jpg">

37 </section>

38

39 <!-- services -->

40 <div class="services">

41 <!--text-->

42 <div class="services-text ">

43 <p>Services</p>

44 <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
an unknown printer took a galley of type and scrambled it to make a type specimen book. It has sur
45
remaining essentially unchanged.</p>
46
</div>
47

48
<div class="box-container">
49
<!--- 1 --->
50
<div class="box-1">
51
<span>1</span>
52
<p class="heading">Technical Writing</p>
53
<p class="details">Lorem Ipsum is simply dummy text of the printing and typesetting indus
54 the 1500s.</p>
55 <button>Read More</button>

56 </div>

57 <!--- 2 --->

58 <div class="box-2">

59 <span>2</span>

60 <p class="heading">Web Design</p>

61 <p class="details">Lorem Ipsum is simply dummy text of the printing and typesetting indus
the 1500s.</p>
62
<button>Read More</button>
63
</div>
64
<!--- 3 --->
65
<div class="box-3">
66
<span>3</span>
67
<p class="heading">Web Development</p>
68
<p class="details">Lorem Ipsum is simply dummy text of the printing and typesetting indus
69
the 1500s.</p>
70
<button>Read More</button>
71
</div>
72
</div>
73
</div>
74

75
<!--testimonials-->
76
<div class="testimoni">
77
<!--text-->
78
<div class="testimoni-text ">
79
<p>What Our Client Says..</p>
80
</div>
81
82 <div class="testimoni-col">

83 <div class="testimoni-1">

84 <img src="images/ava1.png">

85 <div>

86 <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ips
1500s.</p>
87
<h3>Client Pertama</h3>
88
<i class="fas fa-star"></i>
89
<i class="fas fa-star"></i>
90
<i class="fas fa-star"></i>
91
<i class="fas fa-star"></i>
92
<i class="far fa-star"></i>
93
</div>
94
</div>
95

96
<div class="testimoni-2">
97
<img src="images/ava2.png">
98
<div>
99
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ips
100
1500s.</p>
101
<h3>Client Kedua</h3>
102
<i class="fas fa-star"></i>
103
<i class="fas fa-star"></i>
104
<i class="fas fa-star"></i>
105
<i class="fas fa-star"></i>
106
<i class="fas fa-star"></i>
107
</div>
108
</div>
109 </div>

110 </div>

111

112 <!-- footer -->

113 <footer>

114 <p>Interested In Using Our Services?</p>

115

116 <!--paragraph-->

117 <p>I try to work on your project as quickly as possible. Guarantee for revision until you are satis

118 <!--social-->

119 <div class="social-icons">

120 <a href="#"><i class="fab fa-whatsapp"></i></a>

121 <a href="#"><i class="fab fa-facebook-f"></i></a>

122 <a href="#"><i class="fab fa-twitter"></i></a>

123 <a href="#"><i class="fab fa-instagram"></i></a>

124 <a href="#"><i class="fab fa-youtube"></i></a>

125 </div>

126

127 <!--copyright-->

128 <p class="copyright">Copyright by Niagahoster Tutorial</p>

129 </footer>

130

131 <!--social-attach-bar-->

132 <div class="social">

133 <a href="#"><i class="fab fa-whatsapp"></i></a>

134 <a href="#"><i class="fab fa-facebook-f"></i></a>

135 <a href="#"><i class="fab fa-twitter"></i></a>


136 <a href="#"><i class="fab fa-instagram"></i></a>

137 <a href="#"><i class="fab fa-youtube"></i></a>

</div>

</body>

</html>

Nah, sekarang website portfolio 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";

2 /* CSS Document*/

3 body{

4 background-color:#ffffff;

5 margin:0px;

6 padding:0px;

7 }

9 ul{

10 list-style:none;

11 }

12

13 a{

14 text-decoration:none;
15 }

16

17 section{

18 width:100%;

19 height:95vh;

20 position: relative;

21 }

22

23 nav{

24 display: flex;

25 justify-content: space-between;

26 align-items:center;

27 height:60px;

28 background-color:#FFFFFF;

29 box-shadow:2px 2px 12px rgba(0,0,0,0.2);

30 padding:0px 5%;

31

32 }

33 nav ul{

34 display: flex;

35 }

36

37 nav ul li a{

38 margin:30px;

39 font-family:myriad pro regular;

40 color:#505050;

41 font-size: 15px;
42 font-weight:700;

43 }

44

45 .logo{

46 font-family:RoadTest;

47 color:#000000;

48 font-size: 22px;

49 font-weight: bold;

50 }

51

52 .active{

53 color:#2d2a2a;

54 font-weight:bold;

55 }

56

57 .text-container p:nth-child(1){

58 font-family: calibri;

59 font-weight: bold;

60 color: #6d6d6d;

61 font-size: 22px;

62 }

63

64 .text-container p:nth-child(2){

65 font-family: calibri;

66 font-weight: bold;

67 letter-spacing: 2px;

68 color: #1a1a1a;
69 font-size: 60px;

70 }

71

72 .text-container p:nth-child(3){

73 font-family: myriad pro regular;

74 color: #403e3e;

75 font-size: 30px;

76 line-height: 30px;

77 }

78

79 .text-container p:nth-child(4){

80 font-family: calibri;

81 color: #403e3e;

82 font-size: 17px;

83 margin-top: 10px;

84 line-height: 30px;

85 }

86

87 .text-container p{

88 line-height: 0px;

89 margin: 55px 0px 25px;

90 }

91

92 .text-container{

93 position: absolute;

94 left: 13%;

95 top: 42%;
96 transform: translate(-13%, -42%);

97 }

98

99 .text-container button{

100 width: 130px;

101 height: 42px;

102 border-radius: 10px;

103 font-family: calibri;

104 font-weight: bold;

105 font-size: 14px;

106 outline: none;

107 margin: 0px 10px;

108 }

109

110 .hire-btn{

111 border: 2px solid #373636;

112 color: #373636;

113 }

114

115 .down-cv{

116 background-color: #0b0b0b;

117 color: #ffffff;

118 border: none;

119 }

120

121 button:active{

122 transform: scale(1.1);


123 }

124

125 .model{

126 height: 560px;

127 position: absolute;

128 bottom: 60px;

129 left: 80%;

130 transform: translateX(-70%);

131 }

132

133 .services{

134 height:600px;

135 background-color:#f6f5f5;

136 padding: 2% 10% 0px 10%;

137 }

138

139 .services-text p:nth-child(1){

140 font-family: calibri;

141 font-weight:bold;

142 color:#1d1c1c;

143 font-size:30px;

144 line-height:0px;

145 text-align: center;

146 margin-bottom: 40px;

147 }

148

149 .services-text p:nth-child(2){


150 font-family:calibri;

151 color:#7e7d7d;

152

153 }

154

155 .services-text{

156 margin:50px 0px;

157 }

158

159 .box-container{

160 display:flex;

161 justify-content:space-between;

162 }

163

164 .box-1,.box-2,.box-3{

165 width: 300px;

166 height:320px;

167 background-repeat: no-repeat;

168 background-size: cover;

169 box-shadow:2px 2px 18px rgba(0,0,0,0.3);

170 align-items: center;

171 justify-content: center;

172 display: flex;

173 flex-direction: column;

174 margin: 0px 4px;

175

176 }
177

178 .box-1{

179 background-image:url("images/services-1.png");

180 }

181

182 .box-2{

183 background-image:url("images/services-2.png");

184 }

185

186 .box-3{

187 background-image: url("images/servies-3.png");

188 }

189

190 .box-1 span,

191 .box-2 span,

192 .box-3 span{

193 width:40px;

194 height:40px;

195 border-radius:50%;

196 background-color:#ffffff;

197 display: flex;

198 justify-content: center;

199 align-items:center;

200 font-family: calibri;

201 font-weight: bold;

202 }

203
204 .box-1 p:nth-child(2),

205 .box-2 p:nth-child(2),

206 .box-3 p:nth-child(2){

207 color:#FFFFFF;

208 font-family: calibri;

209 font-size: 23px;

210 line-height:0px;

211 }

212

213 .box-1 p:nth-child(3),

214 .box-2 p:nth-child(3),

215 .box-3 p:nth-child(3){

216 font-family: calibri;

217 color:#8F8F8F;

218 text-align:center;

219 width: 230px;

220 margin:0px 0px 20px 0px;

221 }

222

223 .box-1 button,

224 .box-2 button,

225 .box-3 button{

226 width:100px;

227 height:30px;

228 background-color:#FFFFFF;

229 border:none;

230 outline: none;


231 border-radius:5px;

232 }

233

234 .testimoni{

235 height:500px;

236 background-color:#FFFFFF;

237 padding: 2% 10% 0px 10%;

238 text-align: center;

239 margin: auto;

240 }

241

242 .testimoni-text p:nth-child(1){

243 font-family: calibri;

244 font-weight:bold;

245 color:#1d1c1c;

246 font-size:30px;

247 line-height:0px;

248 }

249

250 .testimoni-text{

251 margin:70px 0px;

252 }

253

254 .testimoni-col{

255 display:flex;

256 justify-content:space-between;

257 }
258

259 .testimoni-1,.testimoni-2{

260 flex-basis: 44%;

261 border-radius: 10px;

262 margin-bottom: 5%;

263 text-align: left;

264 background: #f4f2f4;

265 padding: 25px;

266 cursor: pointer;

267 display: flex;

268 width: 500px;

269 box-shadow: 2px 2px 12px rgba(0,0,0,0.2);

270 }

271

272 .testimoni-col img{

273 height: 60px;

274 margin-left: 5px;

275 margin-right: 30px;

276 margin-top: 20px;

277 border-radius: 50%;

278 }

279

280 .testimoni-col p{

281 padding: 0;

282 }

283

284 .testimoni-col h3{


285 margin-top: 15px;

286 text-align: left;

287 }

288

289 .testimoni-col .fas, .testimoni-col .far{

290 color: #f44336;

291 }

292

293 footer p{

294 font-family: calibri;

295 }

296

297 footer p:nth-child(1){

298 font-size: 30px;

299 font-weight:bold;

300 color:#FFFFFF;

301 line-height:10px;

302 }

303

304 footer p:nth-child(2){

305 font-size: 16px;

306 color:#7e7d7d;

307 width:600px;

308 text-align: center;

309 }

310

311 footer{
312 height:300px;

313 display: flex;

314 flex-direction: column;

315 align-items: center;

316 justify-content: center;

317 position: relative;

318 background-color: #191919;

319 }

320

321 .social-icons a{

322 width:40px;

323 height:40px;

324 display: flex;

325 justify-content: center;

326 align-items: center;

327 background-color:#e6e3e3;

328 margin:20px 10px;

329 border-radius:50%;

330 }

331

332 .social-icons{

333 display: flex;

334

335 }

336

337 .social-icons i,.social i{

338 color:#000000;
339 }

340

341 .social-icons a:hover{

342 background-color:#000000;

343 box-shadow:2px 2px 12px rgba(0,0,0,0.2);

344 transition:all ease 0.5s;

345 }

346

347 .social-icons a:hover i,

348 .social a:hover i{

349 color:#FFFFFF;

350 transition:all ease 0.5s;

351 }

352

353 .copyright{

354 color:#565555;

355 font-size: 15px;

356 position: absolute;

357 left:50%;

358 bottom:10px;

359 transform: translateX(-50%);

360 }

361 .social{

362 position: fixed;

363 top:50%;

364 right:0px;

365 transform:translateY(-50%);
366 }

367

368 .social a{

369 display: flex;

370 justify-content: center;

371 align-items: center;

372 width:50px;

373 height:50px;

374 margin:0px;

375 padding: 0px;

376 line-height:0px;

377 background-color:#FFFFFF;

378 border:1px solid #CBCBCB;

379 box-shadow:2px 2px 12px rgba(0,0,0,0.2);

380 }

381

382 .social a:hover{

383 background-color:#000000;

384 transition:all ease 0.5s;

385 }

386

387 .social i{

388 font-size:20px;

389 color:#2B2B2B;

390 }

Jadi, dari kode tersebut, manakah yang dimaksud dengan selektor, blok deklarasi,
properti dan nilai?

Agar lebih jelas, mari perhatikan script berikut :


1 .logo{

2 font-family:RoadTest;

3 color:#000000;

4 font-size: 22px;

5 font-weight: bold;

6 }

8 body{

9 background-color:#ffffff;

10 margin:0px;

11 padding:0px;

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 sampel 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 : Kode Warna HTML

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 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.

Anda mungkin juga menyukai