Langsung ke konten utama

Haikal PG - XI RPL 1 - PWPB Sesi 9

Assalamualaikum Warahmatullahi Wabarokatuh
Dipertemuan kali ini Kita akan masuk ke CSS. Apa itu CSS?, CSS (Cascading Style Sheet) Merupakan salah satu dokumen webstire yang bertujuan untuk mengatur gaya (style) tampilan website. CSS ini ada untuk mempermudah kita mengedit tampilan. Jika di analogikan CSS ini merupakan tampilan luar/ dan HTML kita analogikan sebagai kerangka.

Manfaat CSS

  1. Kode HTML menjadi lebih sederhana dan lebih mudah diatur
  2. Ukuran file menjadi lebih kecil sehingga load file lebih cepat.
  3. Mudah untuk mengubah tampilan hanya dengan mengubah file CSS saja
  4. Dapat berkolaborasi dengan javascript.
  5. dapat digunakan dalam hampit semua jenis web browser.
Anatomi CSS

Anatomi CSS
























Pengkodingan CSS
CSS memiliki 3 cara pengkodingan yaitu :
Inline : Didalam tag html kita bisa menambahkan atribut "style"
Embbeded : Didalam satu file yang sama
External : Dengan membuat file CSS dan di dalam file html kita hubungkan dengan tag "link"


Beberapa Properti di CSS


Property Text Formatting
Sebenarnya ada banyak property text format, saya tidak bisa menyebutkannya satu-satu ya karena banyak:v. Teman-teman bisa explor lagi property CSS text format di gugel ya..

Langsung saja kita ke study kasus kali ini, kita akan membuat html dan css dengan materi yang sudah saya sampaikan tadi. Kita mulai :

Inlinecss.html

Inlinecss adalah salah satu teknik pengkodean didalam tag html misal kita ingin menginlinekan text format "text-align : center";  misalkan kita memasukkannya di dalam tag <p> maka untuk memasukan CSS tadi kita tulis menjadi <p style="text-align : center;">Tulisan ini akan berada di center</p>
Untuk lebih jelasnya : 




EmbeddedWithClassdanId1.html

Kita disini menggunakan attribut class dan id. Class Selector merupakan salah satu selector yang paling umum dan paling sering digunakan. Class Selector akan ‘mencari’ seluruh tag yang memiliki atribut class dengan nilai yang sesuai. ID Selector bersama-sama dengan class selector merupakan selector paling umum dan juga sering dipakai (walau tidak sesering class selector). Penggunaan ID selector hampir sama dengan class selector, dengan perbedaan jika pada Class Selector kita menggunakan atribut class untuk tag HTML, untuk ID selector, kita menggunakan atribut id. Pemanggilan class di CSS menggunakan '.'  sedangkan ID menggunakan '#'
untuk lebih jelasnya lihat code berikut : 


EmbeddedWithClassdanId2.html

Kita akan coba buat form login dengan tampilanya kita edit agar lebih menarik dengan CSS. Yang kita butuhkan adalah tag html berikut : <input> <label> dan attributnya menggunakan class dan id
Untuk lebih jelasnya lihat code berikut :


ExternalWithClassdanId.html

Kita akan menggunakan cara pengkodean secara external. Yang kita butuhkan adalah file html (.html) dan file css (.css). Untuk menghubungkannya kita akan menggunakan tag <link rel="stylesheet" type="text/css" href="nama.css"> Untuk lebih jelas kita lihat code berikut :




EmbHeadingColor.html

Kita akan coba mewarnai heading dengan CSS di embed dan warna-warna paragraf. Ini source codenya :




FormatCharacterSpacing.html
ExtFormatKarakter.css

Kita akan menggunakan cara pengkodean External dan di dalam css nya kita akan menggunakan property 'letter-spacing'. Untuk lebih jelasnya silahkan teman-teman bisa copy code berikut :




TextDecoAndSpacing.html
ExtDecoAndSpacing.css

Kita akan menggunakan property 'text-decoration' dan mempelajari value dari property tersebut dan kita akan mengatur spacing nya dan text-deconya di css. Ini dia codenya :




EmbIndentAlignUpper.html

Seperti judul kita akan mengindernt, align , upper sebuah text dengan css dengan pengkodingan secara Embedded. Ini dia codenya dan penjelasannya :



Biodata.html

Kita akan membuat biodata dan pengeditan tampilanya kita akan menggunakan CSS dan akan menggunakan property 'margin' margin ini digunakan untuk menggeser si kontennya. Untuk lebih jelasnya kita lihat codenya :



Sekian saja yang bisa saya sampaikan pada sesi kali ini, Wassalamualaikum Warahmatullahi Wabarokatuh

Komentar

Posting Komentar

Postingan populer dari blog ini

Haikal PG - XI RPL 1 - PWPB Sesi 36

Assalamualaikum Warahmatullahi Wabarokatuh Halo teman-teman gimana kabarya? semoga sehat selalu ya.. . Pada sesi kali ini kita akan membahas tentang OOP (Object Oriented Programming) pada php. OOP merupakan konsep/metode programming berorientasi pada objek. Jadi didalam OOP semua digambarkan sebagai objek yang di representasikan. Terdiri dari 3 struktur diantaranya : Class, property, dan method/function. Ok kita langsung saja ke materinya. Coba teman-teman buat sebuah file bernama dan berekstensi seperti ini : HewanPeliharaan.php  nah disini kita akan membuat struktur class yang dimana hewan ini memiliki 3 property diantaranya nama, jenis, dan makanan. Untuk lebih jelasnya seperti ini: nama = $nama; $this->jenis = $jenis; $this->makanan = $makanan; } } Tag phpnya tidak perlu ditutup karena ini merupakan class dan kita tidak akan menambahkan code seperti html/js disini. __construct merupakan function yang ada di php, construct ini merupakan bagian code yang akan pertama...
Posting Komentar
Baca selengkapnya

Haikal PG - XI RPL 1 - PWPB Sesi 25

Assalamualaikum Warahmatullahi Wabarokatuh Kembali lagi dengan saya Haikal Putra Gustiansyah yang dimana pada sesi kali ini kita akan membahas array assosiatif dan media query. Array assosiatif merupakan sebuah tipe data yang memungkinkan kita menyimpan data yang memiliki tipe data yang berbeda bisa berupa string,numerik, dll. Media Query merupakan salah satu fitur CSS3 yang memungkinkan kita agar membuat halaman yang web yang responsif. Simak materi pada sesi kali ini. Array Asosiatif Array Asos iatif ad alah  array yang tidak menggunakan angka sebagai kunci di setiap nilainya. Jika tidak ditentukan kunci dari sebuah elemen di array, PHP akan otomatis memberikan kuncinya berupa angka. Perbedaanya hanya bagaimana kita mengakses data/elemen-elemen tersebut. Copykan code berikut: LatArrayAsosiatif.php 'Haikal', '1819117580' => 'Milyardin', '1819117581' => 'Steph~~'); echo $siswa['1819117579'] . ' '; ec...
Posting Komentar
Baca selengkapnya

Haikal PG - XI RPL 1 - PWPB Sesi 7

Assalamualaikum Warahmatullahi Wabarokatuh Kembali lagi dengan saya, disini saya akan membahas kembali tag-tag pada HTML. Pada HTML juga kita bisa menambahkan seperti audio, video, flash dengan tag yang akan saya bahas kali ini. Kita langsung saja mulai tutorialnya : Menambahkan Audio Di HTML kita bisa menambakan audio dengan tag <audio> </audio>. Seperti pada tag img kita juga harus memsukkan sumber lagu dengan attribut src="lagu.mp3". Ada juga attribut untuk memulai musik secara otomatis yaitu autoplay, Attribut untuk controls untuk menampilkan sebuah control spesifik audio, Attribut loop ini untuk mengulang lagu jika lagu sudah selesai. Berikut tampilannya jika di jalankan di browser : Tag audio html Codenya : Haikal Putra Gustiansyah XI RPL 1 Audio Menambahkan Video Selain menambahkan audio kita juga bisa menambahkan video dengan tag <video> </video> dan jangan lupa masukkan sumber video dengan src="". Attribut n...
Posting Komentar
Baca selengkapnya