Percabangan Case

1 BAB IV LAYOUT WEB DENGAN HTML5 & CSS 3

1.1 IDENTITAS
Kajian

Teori dasar HTML5 & CSS3 serta penerapannya.

Topik

1. Pengenalan HTML5 dan CSS3.

2. Pembuatan Responsive Webpage menggunakan media query pada CSS.
3. Implementasi HTML5 dan CSS3 dalam pembuatan halaman web statis dan dinamis.
4. Implementasi Flexbox dan Semantic Tag dalam pembuatan halaman web statis dan dinamis.

Referensi

1. https://www.w3schools.com/html/html5_intro.asp : HTML5 Introduction

2. https://www.w3schools.com/css/default.asp : CSS Tutorial
3. https://www.w3schools.com/css/css3_flexbox.asp : Flexbox

Kompetensi Utama

1. Membuat halaman website dengan HTML5 & CSS3

2. Menerapkan Flexbox dan Semantic Element pada pembuatan halaman website.

Lama Kegiatan Praktikum

1. Pertemuan Terbimbing : 1 x 120 menit

2. Kegiatan Mandiri : 2 x 120 menit

Parameter Penilaian

1. Tugas Pendahuluan
2. Tes Awal
3. Jurnal
4. Tes Akhir

Hal 1
 Percabangan Case

1.2 PENYELESAIAN

1. Pahami penggunaan CSS flexbox di video di bawah ini :

Link : https://www.youtube.com/watch?v=JJSoEo8JSnc

2. Pahami penggunaan CSS Poseudo Code di video di bawah ini :

Link : https://www.youtube.com/watch?v=W-YHT9xHBgA

3. Pertama kalian pahami terlebih dahulu Sematic Tag HTML.

Link : https://www.w3schools.com/html/html5_semantic_elements.asp

4. Buatlah Section untuk bagian Hero Section dibawah ini

Hal 2
 Percabangan Case

Kalian bisa lihat di : https://github.com/sammyfdl/static-webpage-computing-system

Buka index.html untuk melihat kode htmlnya, untuk melihat CSS silahkan buka
Style.css.

untuk pembuatan section seperti di atas kalian hanya perlu melihat codingan html yang
sudah saya beri komentar <!--Hero Section-->.

Untuk css nya kalian hanya perlu melihat bagian css yang sudah saya beri komentar
/*Hero-Section*/

5. Sesudah membuat Hero Section selanjut nya adalah membuat Section Container
seperti dibawah ini :

Kalian bisa lihat di : https://github.com/sammyfdl/static-webpage-computing-system

Buka index.html untuk melihat kode htmlnya, untuk melihat CSS silahkan buka
Style.css.

untuk pembuatan section seperti di atas kalian hanya perlu melihat codingan html yang
sudah saya beri komentar <!--Container-->.

Hal 3
 Percabangan Case

Untuk css nya kalian hanya perlu melihat bagian css yang sudah saya beri komentar
/*Container*/

Hal 4