Materi 7. Smart School CSS Framework Fundamentals (Bootstrap)

TAK KENAL MAKA TAK SAYANG?
YUUKK KENALAN DENGAN SAYA….


© 2018 Slidefabric.com All rights reserved. P A G E 1

STEVEN JOE
IT ENGINERR AT SMK MUTUHARJO
Heeem nama saya joko endriyanto, kalau di SMK saya biasa dipanggil
mas steven, lahir pada tanggal 19 April 1998 di Kota Makmur. Saya
adalah TIM Pengembangan Sistem Informasi di SMK MUTUHARJO
bersama pak Nurrohman 

KAMP KREATIF SMK INDONESIA
(KKSI) 2019
“Menyiapkan Keunggulan Masa Depan”
PENGANTAR
CSS Framework Fundamentals
© 2018 Slidefabric.com All rights reserved. SMK Muhammadiyah 1 Sukoharjo

PRESENTATION MAP
1 2 3
Reviews CSS Framework Ayooo Kita
Materi Frontend Fundamentals Live Coding


ANALOGI FRONT END & BACK END
TAK KENAL MAKA TAK SAYANG?

YUUKK KITA KENALAN DENGAN “ Front End dan Back End”


Apa Itu
Front End Developer
???

Front-End merupakan istilah yang mengacu pada
developer yang bekerja dibagian desain layout suatu
website atau aplikasi, dimana seorang developer akan
mengerjakan user interface agar desain terlihat menarik
dan tidak terlihat membosankan untuk dilihat.

Apa Yang Harus Dikuasi
Front End Developer???

Apa sih…
Keuntungan Menjadi
Front End Developer
Berpenghasilan Tinggi
( MENGOLAH DATA )
( Gaji Mu Tinggi Jhoon…. )
Sumber  Glassdorr
Bekerja Secara
Remote
( Kamu Bisa Bekerja Sambil Santai Dan Ngopi Di rumah Jhoon… )

Banyak Dicari
Perusahaan Startup
( Banyak Perusahaan Yang Jatuh Hati Dengan mu Jhoon… )

Berfikir Kreatif
( Akan Banyak Pelangi Di Kepalamu Jhoon… )

KAMU BISA
BUAT LAYOUT
WEBSITEMU SENDIRI
JHOON….

BELAJAR
CSS FRAMEWORK
FUNDAMETALS

APA YANG AKAN KITA
PELAJARI???
Apa Itu CSS Ayoo Kita Bekerja Dengan
Framework Bootstrap 
???
Live
1 3 Coding
2 4
HTML Reviews
Mari Berkenalan Dengan Bootstrap

HTML REVIEW
YUUKK KITA FLASH BACK SEBENTAR

© 2018 Slidefabric.com All rights reserved. ( JANGAN FLASH BACK DENGAN MANTAN YAAA… ) P A G E 17
Apa Itu
<HTML>
APA ITU HTML?
Dia Adalah Penemu HTML =>
HTMLtahun
Pada adalah kepanjangan
1989, Tim Berners dari Lee
HyperText Markup
dari organisasi
Language,Organization
European merupakan bahasa interpretasi
for Nuclear yang digunakan
Research (CERN)
pada sebuahide
mencetuskan halaman web. HTML suatu
untuk menciptakan itu sendiri
script bukanlah
bahasa
sebuah bahasa
pemrograman padapemrograman
suatu dokumenpadayang umumnya, seperti
kemudian dikenal
Java, C,
sebagai HTML.C++,Timvisual
Bernersbasic dan sejenisnya.
Lee diketaui HTML
sebagai penemu
mendeskripsikan
HTML. struktur halaman
Saat ini penggunaan dan web yang ditulis dengan
pengembangan HTML
element
diatur olehatau tagWide
World yangWeb
yangConsortium
mengapit (W3C)
konten dan
atauversi
teks
didalamnya
terakhir dari yang
HTML akan ditampilkan
yang sekarang pada sebuah halaman
digunakan adalah
web oleh browser. Jadi apapun website yang kita lihat pasti
HTML5.
awalnya dibangun menggunakan HTML.

Struktur Dasar <HTML>
Kegunaan <HTML>
HTML berguna untuk menampilkan konten,
menghubungkan (link) antar halaman, memberi struktur
dan informasi terkait dengan sebuah halaman web. Konten
sebuah web tidak hanya terbatas pada teks saja, melainkan
konten interaktif lainnya seperti video, audio, gambar dan
animasi dapat disisipkan dan ditampilkan pada halaman
web.

Konsep Struktur
Struktur HTML terdiri dari 3 konsep dasar yaitu tag, elemen dan atribut.

TAG HTML
Tag HTML adalah suatu penanda untuk menandai elemen-elemen dalam
suatu dokumen HTML. Fungsi tag adalah untuk memberikan instruksi
atau memberitahu kepada browser bagaimana suatu objek di tampilkan
berdasarkan tag yang di gunakan, objek disini bisa berupa teks, video,
audio dan gambar.
**Catatan** : Tidak semua tag itu berpasangan, missal ,

© 2018 Slidefabric.com All rights reserved. <embed>, <hr> dll, ada sekitar 15 tag yang tidak berpasangan P A G E 22
TAG HTML
Tag pembuka ditulis seperti ini:
Struktur Dasar
<tag_pembuka>objek yang dikenai perintah tag</tag_penutup>
<nama_tag>
Sebagai contoh, perhatikan kode HTML berikut :
Halooo,,, Aku adalah TAG HTML……..
 Ini adalah sebuah paragraf 
dan tag penutup ditulis seperti ini:
• adalah tag pembuka, dalam contoh ini p adalah tag untuk
paragraf.
</nama_tag>
• adalah tag penutup paragraf. Perbedaannya dengan tag
pembuka terletak
**Catatan** dari tanda
: Perbedaan forward
antara tag slash
pembuka (/)penutup adalah tag
dan tag
penutup memiliki karakter garis miring sebelum nama tagnya. HTML Tidak
case
© 2018 Slidefabric.com All rights sensitive
reserved. P A G E 23
Referensi TAG
KLIK SAYA 

ELEMEN HTML
Rangkaian atau Gabungan dari tag pembuka, konten dan tag penutup disebut
dengan elemen HTML.
HTML tidak hanya memiliki 4 ELEMEN jhon, tapi HTML memiliki banyak ELEMEN
ELEMEN HTML
Contoh Elemen HTML
**Catatan** : Dalam pembahasan tentang HTML, tidak jarang istilah “tag” dan
“element”
**Catatan** : Penulisan elemen harussaling dipertukarkan.
Penulisan elemen harus lengkap, mulai dari tag
pembuka, konten dan tag penutup. Apa yang sudah dibuka wajib ditutup kembali!
TAG ( tanda/fungsi ), ELEMEN ( gabungan dari <tag pembuka>Konten </tagpenutup>
ELEMEN HTML
Contoh Elemen HTML
**Catatan** : Dalam pembahasan tentang HTML, tidak jarang istilah “tag” dan
“element”
**Catatan** : Penulisan elemen harussaling dipertukarkan.
Penulisan elemen harus lengkap, mulai dari tag
pembuka, konten dan tag penutup. Apa yang sudah dibuka wajib ditutup kembali!
TAG ( tanda/fungsi ), ELEMEN ( gabungan dari <tag pembuka>Konten </tagpenutup>
ATRIBUT HTML
Atribut adalah informasi tambahan yang diberikan kepada tag. Informasi ini bisa
berupa instruksi untuk warna dari text, besar huruf dari text, dll. Setiap atribut
memiliki pasangan nama dan nilai (value) yang ditulis dengan name=”value”. Value
diapit tanda kutip, boleh menggunakan tanda kutip satu (‘) atau dua (“).
Struktur dasar Atribut HTML :

ATRIBUT HTML
Contoh Atribut HTML :
Halooo,,,, aku adalah attribut

HTML, aku terdiri dari nama tag
dan value ( name=“value” )

Apa Itu
CSS Framework
???

KOMPONEN
APA ITU
CSS FRAMEWORK
CSS FRAMEWORK
• CSS framework pada umumnya akan memiliki komponen yang
berbeda beda, tetapi pada umumnya akan memiliki komponen
dasar seperti berikut didalamnya :
FRAMEWORK bisa disebut adalah sebagai sebuah set yang terdiri
• CSS source code untuk menciptakan basis grid untuk
dari konsep, pelatihan dan kriteria untuk menghadapi masalah
menempatkan elemen
tertentu dengan sebuah standar yang ditentukan. Dalam bahasa
• Tipografi yang telah didefinisikan untuk HTML elemen
praktis CSS framework dapat diartikan sebagai sebuah paket yang
• Pilihan untuk mengatasi kompatibilitas browser dalam berbagai
terdiri dari struktur file dan folder berisi kode kode yang memiliki
platform dan resolusi
standar tersendiri (HTML, CSS, JS dsb), yang dapat digunakan
Beberapa CSS Framework yang sering digunakan antara lain
sebagai basis pengembangan dari sebuah website.
• Bootstrap
• Sematic UI
• Materialize UI
MARI KITA BERKENALAN DENGAN
BOOTSTRAP
YUKK BERKENALAN DENGAN
SAYA 
© 2018 Slidefabric.com All rights reserved. ( JANGAN BERKENALAN DENGAN YANG LAIN YAAA…. ) P A G E 32
APA ITU Bootstrap?
Bootstrap adalah framework HTML, CSS, dan

JavaScript paling populer untuk
mengembangkan situs web yang responsif.
Sesuai dengan informasi pada halaman resmi

bootstrap yaitu One framework Every Device ,
bootstrap menyediakan Desain web yang
responsif yaitu tampilan halaman secara
otomatis menyesuaikan diri agar terlihat bagus
di semua perangkat, dari ponsel kecil hingga
desktop besar.

SEJARAH BOOTSTRAP
Bootstrap awalnya dibuat dan dikembangkan

oleh pekerja / programmer Twitter, yaitu Mark
Octo dan Jacob Thornton sejak tahun 2011.
Sejak diluncurkan pada bulan agustus 2011,
bootstrap telah berevolusi dari proyek yang
hanya basis css menjadi sebuah framework
yang lebih lengkap yang juga berisi javascript
plugin, icon, Forms, dan button.

AYOO KITA BEKERJA
DENGAN
SAYA 

MARI KITA SIAPKAN
Bootstrap nya


AYOO…
KITA
LIVE CODING

PROJECT KITA
HARI INI


THANKS

Materi 7. Smart School CSS Framework Fundamentals (Bootstrap)

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

Materi 7. Smart School CSS Framework Fundamentals (Bootstrap)

Diunggah oleh

Hak Cipta:

Format Tersedia

TAK KENAL MAKA TAK SAYANG?

YUUKK KENALAN DENGAN SAYA….

© 2018 Slidefabric.com All rights reserved. P A G E 1

© 2018 Slidefabric.com All rights reserved. P A G E 2

© 2018 Slidefabric.com All rights reserved. SMK Muhammadiyah 1 Sukoharjo

© 2018 Slidefabric.com All rights reserved. P A G E 4

TAK KENAL MAKA TAK SAYANG?

© 2018 Slidefabric.com All rights reserved. P A G E 5

© 2018 Slidefabric.com All rights reserved. P A G E 6

© 2018 Slidefabric.com All rights reserved. P A G E 7

© 2018 Slidefabric.com All rights reserved. P A G E 8

( Gaji Mu Tinggi Jhoon…. )

© 2018 Slidefabric.com All rights reserved. P A G E 11

© 2018 Slidefabric.com All rights reserved. P A G E 12

( Akan Banyak Pelangi Di Kepalamu Jhoon… )

© 2018 Slidefabric.com All rights reserved. P A G E 13

© 2018 Slidefabric.com All rights reserved. P A G E 14

© 2018 Slidefabric.com All rights reserved. P A G E 15

© 2018 Slidefabric.com All rights reserved. P A G E 16

© 2018 Slidefabric.com All rights reserved. P A G E 19

© 2018 Slidefabric.com All rights reserved. P A G E 20

© 2018 Slidefabric.com All rights reserved. P A G E 21

**Catatan** : Tidak semua tag itu berpasangan, missal <br> ,

© 2018 Slidefabric.com All rights reserved. P A G E 24

Struktur dasar Atribut HTML :

© 2018 Slidefabric.com All rights reserved. P A G E 28

Halooo,,,, aku adalah attribut

© 2018 Slidefabric.com All rights reserved. P A G E 29

© 2018 Slidefabric.com All rights reserved. P A G E 30

Bootstrap adalah framework HTML, CSS, dan

Sesuai dengan informasi pada halaman resmi

© 2018 Slidefabric.com All rights reserved. P A G E 33

Bootstrap awalnya dibuat dan dikembangkan

© 2018 Slidefabric.com All rights reserved. P A G E 34

© 2018 Slidefabric.com All rights reserved. P A G E 35

© 2018 Slidefabric.com All rights reserved. P A G E 36

© 2018 Slidefabric.com All rights reserved. P A G E 37

© 2018 Slidefabric.com All rights reserved. P A G E 38

© 2018 Slidefabric.com All rights reserved. P A G E 39

Anda mungkin juga menyukai

Catatan : Tidak semua tag itu berpasangan, missal <br> ,