Langsung ke konten utama

CSS WEB || Praktikum 9

CSS DI WEB

Assalamualaiikum..
 
Hallo Selamat Datang Di Web Praktikum.

Kali ini Saya Akan Menjelaskan kegunaan dan bagai mana penggunaan CSS pada web site.
Berikut adalah caranya..

Pertama pengertian Css
CSS itu apa ? Css adalah CaseCading Style Sheet berguna atau berfungsi sebagai mengatur gaya tampilan di WebSite.

Manfaat Dari Css
manfaat utama dari css adalah
kode html lebih sederhana dan lebih mudah diatur.
ukuran file menjdai lebih kecil  menjadikan load file lebih cepat.
mudah untuk mengubah tampilan .
dapan berkolaborasi dengan Js Java Script.
Dan dapat digunakan Hampir Di semua jenis Web Browser. 

Demikianlah Pnegrtian Singkat dari CSS.

Selanjutnya adalah Beberapa Praktikum Dari CSS Berikut ini..




1.Inline Css

 

Ya ini adalah Inline Di css tag <style> css di atas digunakan untuk memberikan langsung pada tag html kita.

ini adlah hasil preview nya



 Bisa kita lihat  hasil nya ,, pada tulisan di atas ada bayangan pada textnya warna pink ,, bayangan tersebut bisa kita gunakan dengan menambah atribut Text-Shadow: di  dalam tag <p> secara langsung dengan ukuran yang kita bisa sesuaikan.


2.Embede dengan Class Dan Id 1



Class dan id bisa di bilang sebagai penanda pada html, maksud penanda di sini adalah element-element html dapat di beri tanda dengan class atau id.

Seperti kita lihat kodingan di atas pada tag <style> ada #BhsIndo dan di dalam nya ada Declaration yang berfungsi sebagai pengatur style dari #BhsIndo seperti contoh di atas dan  sebagai pembeda  supaya ketika kita mengubah Style nya itu tidak akan salah.
Css ini adalah secara internal Atau di gabung langsung dengan html kode nya.

Hasil Previwnya



dan ini adalah hasil previewnya.

3.Embeded Dengan Class dan Id 2





Pada Embeded 2 Ini  Adalah pengimplementasian dari Embeded 1

ini adalah Hasil preview nya

 4.External Css Dengan Class Dan Id

Berkut ini adalah Penggunaan Class id, dan Css secara file terpisah atau tidak tergabung dengan html code nya

berikut contoh code nya


yang di atas ini adalah hmtl nya saja



Dan ini adalah Css nya Secara External atau yang tadi yaitu Beda file dengan Html nya

Ini Previewnya



5.Embede Heading Color

 Fungsi utama dai Embed ini adalah sebagai Pemberi warna Pada Heading yang ingin kita buat

 Berikut contohnya



Dan ini Previewnya
6.Format Text Di css

Selanjutnya Adalah penggunaan Css untuk Format Text yaitu text bisa kita rumah posisi dan texk bisa kita rumah menjadi huruf  kapital, besar dan kecil  dengan penggunaan tag tag html dan Css Berikut contoh nya







 ini preview nya









 7.Format Karakter & Spacing With Css External

Yang berikut ini adalah format Karakter dan Spacing , jadi kegunaan Spacing Kita bisa mengubah Jarak antar Huruf  atau mengubah ukuran spacing menjadi jauh atau denkat dengan keinignan kita sendiri.
Saya menggunakan External Css Atau Css nya Beda file
untuk Beda File kita bsa menggunakan tag <link> di dalam  bagian Head atau Tag <head>

Berikut adalah contoh nya 

 
ini adalah html nya, bisa kita lihat bahwa di bagian tag <head> ada tag <link> nah fungsi ling nya adalah penghubung ke style Css yang kita buat.


dan ini Css yang tadi di simpan secara External.

Dan ini Previewnya


8.Teks Decoring Pada Css
Teks decoring pada Css ini digunakan untuk memberikan gaya pada paragraph atau text yang ingin kita buat di web berikut adalah contohnya




 ini adlah kode html nya


Dan ini Css nya.


 ini Previewnya




9.Membuat Sebuah Halaman Web dengan menggunakan Styling Utama  Css

dan yang terakhir adalah pembuatan  sebuah halam web dengan Styling utama Css
berikut adalah hasil dan code nya




Dan Ini Hasiil Previewnya




Demikian Lah Pembahasan CSS Dan Penggunaan Tag Tag yang ada di Css

Sekian dan Terimakasih :)..




Komentar

Posting Komentar

Postingan populer dari blog ini

Create Read Update Delete with Relation Tabel || Praktikum 4

Hallo Berjumpa Lagi di Blog Praktiku... Kali ini saya akan membahas tentang bagai mana dan apa itu cara untuk meralasikan 2 tabel pada data base. Contoh kasus yang diberikan adalah ketika akan menambahkan Data Siswa yang telah di buat pada postingan postingan sebelum nya, maka pilihan Kelas berasal dari tabel t_kelas yang bersifat dinamis. Artinya kita juga akan membuat CRUD sebagai data master Kelas nah jadi ketika kita memilih sebuah opsi maka opsi tersebut langsung berasal dari tabel yang kita buat di data base nya. contoh nya seperti ini : maka pada option diatas langsung berasal dari databse... untuk itu saya akan bahas.. Pertama buatlah tabel di data base dengan new tabel sebagi berikut ini dengan nama t_kelas : selanjutnya pada tabel siswa kosongkan lah datanya terlebih dahulu karena pada tabel siswa dengan tabel t_kelas kita akan mengjoinkan nya atau merelasikanya untuk mengkosongkan data agar lebih mudah tinggal masuk ke option>truncate. ...
Posting Komentar
Baca selengkapnya

Array Asosiatif & CSS Media Query Diphp || Praktikum 25

Hallo berjumpa lagi di Blog Praktikum.. pada postingan kali ini saya akan menjelaskan dari apa itu array Asosiatif dan CSS Media Query di PHP. Pengertian Array Asosiatif kumpulan data abstrak yang berpasang pasangan sehingga setiap kunci yang mungkin muncul paling banyak satu kali dalam koleksi. contoh penggunaan nya : Praktikum nya.. ada dua yaitu : 1. LatArrayAsosiatif.php 2. Array Asosiatif Feat looping 3. Studi kasus penggunaan array Asosiatif berikut contoh kodingan dan hasil nya 1. LatArrayAsosiatif.php ini kodingan nya ini hasil nya 2. Array Asosiatif Feat looping ini kodingan nya ini hasil nya 3. Studi kasus penggunaan array Asosiatif ini kodingan nya ini hasil nya =========== selanjutnya ada Css media query fungsi fungsi utama dari css media query ini adalh memungkinkan tampilan konten web akan sesuai dengan ukuran alat yang digunakan CSS Media Query menangani perbedaan tampilan pada beberapa resolu...
Posting Komentar
Baca selengkapnya

JAVA SCRIPT : PERULANGAN DAN FUNGSI || Praktikum 15

Assalamualaikum wr wb.. Selamat datang di blog Praktikum.. kali ini saya akan menjelaskan  bagai mana penggunaan Perulangan dan Fungsi Di java Script. Berikut ini adalah Penjelasanya Struktur Kontrol Perulangan Perulangn merupakan struktur yang memungkinkan menjalankan kode  program yang sama beberapa kali perulang di java script memiliki 3 bentuk yaitu : for while do-while a. perulangn for for(inisialisai; kondisi; peubah;){ baris program } b. perulangan while (kondisi){ kode program yang inigin di jalankan beberapa kali } c. perulangan Do-While do{ kode program yang ingin di jalan kan bebebrpa kali;  }while(kondisi); contoh programnya 1.Buat perulangan ini kodinganya : ini hasilnya : 2.Perulangan For ini kodinganya : ini hasil nya : seperti yang di lihat di kodingan bahwa  kodisinya menunjukan <=5 maka kata atau kalimat yang ingin kita ulang akan di ulang sebanyak 5x; 3.perulangan While ini kodin...
Posting Komentar
Baca selengkapnya