Home | Lesson 01 | Lesson 02 | Lesson 03 | Lesson 04 | Lesson 05 | Lesson 06 | Lesson 07 | Presentation |
---|
- Peserta mengerti struktur website dibentuk dari HTML
div
, dibantu CSSfloat
. - Peserta mampu membuat baris dan kolom menggunakan HTML
div
dan CSSfloat
.
- HTML
index.html
<div class="parent"> Ini div 1 kolom </div>
- CSS
style.css
.parent { background-color: #ff0000; height: 200px; width: 100%; }
- HTML
index.html
<div class="parent"> <div class="child1">Ini section 1</div> <div class="child2">Ini section 2</div> </div>
- CSS
style.css
.parent { background-color: aqua; } .child1 { background-color: brown; float: left; width: 20%; } .child2 { background-color: cornflowerblue; float: right; width: 80%; }
- HTML
index.html
<div class="parent2"> <div class="childa">Ini section 1</div> <div class="childb">Ini section 2</div> <div class="childc">Ini section 3</div> </div>
- CSS
style.css
.parent2 { background-color: blueviolet; margin-top: 50px; } .childa { background-color: bisque; float: left; width: 33%; } .childb { background-color: chocolate; float: left; width: 34%; } .childc { background-color: cadetblue; float: left; width: 33%; }
Download file for this lesson: lesson-03.zip
- Peserta membuat 3 dan 4 kolom bagian website menggunakan HTML
<div>
dan CSSfloat
.
- Apa yang menjadi bottleneck dari lesson 03 ini?
- Apa yang sebaiknya ditambah dan ditiadakan dari materi lesson 03 ini?
Home | Lesson 01 | Lesson 02 | Lesson 03 | Lesson 04 | Lesson 05 | Lesson 06 | Lesson 07 | Presentation |
---|