Tugas 5

 Tugas 5

Hai nama saya Farhan Ardiansyah dari XI RPL 1 SMKN 4 Bandung kali ini saya akan mengshare pengetahuan saya tentang CSS.

 Cascading Style Sheet merupakan aturan untuk mengatur beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam. CSS bukan bahasa Pemprograman.

Ini adalah contoh yang saya berikan dan ikuti penjelasan detail nya di bawah

source code html:

source code css:

Hasilnya:

1. Penulisan Inline CSS

Penulisan inline CSS adalah kita langsung memberikan property CSS dalam baris tag html langsung. 

Property pada yang saya gunakan :

    a.) Property Font-Family

Property Font-Family berfungsi untuk menggunakan sebuah font yang kita inginkan pada halaman website kita, contohnya disource code tersebut kita ingin Menggunakan Font Segoe UI, Tahoma, Geneva dsb.

    b.) Property Font-Size

Property Font-Size berfungsi untuk mengatur besar dari sebuah font tersebut. Kita bisa menggunakan satuan pixsel (px), point (pt), rem dsb.

    c.) Property Color

Property Color berfungsi untuk mengatur warna dari tulisan atau font yang kita gunakan dalam sebuah halaman website kita.

    d.) Property Background-image

Property Background-image berfungsi untuk menambahkan sebuah gambar kepada halaman website kita dengan menggunakan Cascading Style Sheets.

Cara menggunakannya tidak jauh berbeda dengan cara menambahkan gambar pada html, yaitu kita tinggal memberikan property Background-image lalu kita masukan sebuah value url("File Gambar yang kita inginkan).

2. Penulisan Internal/Embedded CSS

Cara menggunakan Embedded CSS Tidak jauh berbeda dengan metode Inline CSS, Perbedaanya adalah ketika kita ingin menggunakan metode Internal/Embedded CSS kita bisa menggunakannya didalam tag head atau sebelum penutup tag head. Sebelum kita menutup tag head, kita buat tag style lalu kita tuliskan property dan valuenya.  

Property yang saya gunakan:

    a. Property height

Property Height berfungsi untuk mengatur sebuah tinggi dari sebuah elemen dengan menggunakan Cascading Style Sheets.

    b. Property Background-color

Property Background-color berfungsi untuk mengatur sebuah background warna dari sebuah element html dengan menggunakan Cascading Style Sheets.

    c. Property border

Property Border Berfungsi untuk menambahkan sebuah border pada element html kita, value dari property Border banyak sekali. Jika kalian ingin mengetahui value apa saja yang dimiliki oleh property border kalian bisa mengunjungi halaman website w3school.

    d. Property text-align

Property text-align berfungsi untuk membuat sebuah tulisan atau element html berada ditengah, dipinggir sebelah kiri, dan dipinggir sebelah kanan. Kita tinggal menuliskan property text-align lalu kita tuliskan value right,left, atau center.

    e. Property cursor

Property cursor berfungsi untuk memgubah tanda panah pada komputer kita. kita tinggal menuliskan sebuah property cursor yang diberikan value pointer atau crosshair maka tanda panah pada komputer kita akan otomatis berubah ketika tanda panah itu mengunjungi area dari element yang diberikan property tersebut.

    f. Property text-shadow

Property text-shadow berfungsi untuk memberikan sebuah shadow atau bayangan pada sebuah text atau content yang berada dalam property tersebut. value property text-shadow sama dengah value property border. Jadi kalian bisa mempelajari value tersebut secara lengkap di website w3school.

    g. Property font-weight

Property font-weight berfungsi untuk mengatur ketebalan dari sebuah font element yang diberikan property tersebut.

3. Penulisan ExternalCSS

    Cara menggunakan Metode External CSS adalah membuat file css sendiri dengan menuliskan .css diakhir nama file tersebut. lalu setelah itu kita tinggal menghubungkan file css tersebut dengan file html kita dengan menggunakan tag link yang diberikan attribute rel dengan value stylesheets, lalu kita berikan attribute  href yang kita berikan value file CSS kita. 

Dari Source code tersebut kita menghubungkan file Style.css yang berada didalam folder Css, Lalu kita juga memberikan sebuah class duacm dan limapxl senti pada tag p.

Proverty yang saya gunakan adalah:

    a. text-decoration

Property text-decoration berfungsi untuk menghias font atau tulisan dari sebuah halaman website kita, value yang bisa digunakan dalam property tersebut cukup banyak, kalian bisa mempelajari semua value tersebut di website w3school.

    b. letter-spacing

Property letter-spacing berfungsi untuk memberikan jarak pada setiap kata yang berada dalam html. kita bisa memberikan value satuan pixsel(px), point(pt), centimeter(cm), dan rem.

    c. word-spacing 

Property word-spacing berfungsi untuk memberikan jarak pada sebuah kalimat html, value yang bisa kita gunakan sama dengan value property letter-spacing.

 

   d. text-indent

Property text-indent berfungsi untuk memberikan indentasi pada sebuah kalimat pada html, value yang bisa kita gunakan sama dengan value property word-spacing dan juga property letter-spacing.

  e.text-transform

Proverty text-transform berfungsi untuk menyesuaikan kapitalisasi, membesarkan dan mengecilkan huruf walaupunn huruf yang ditulis dalam html tidak sesuai.

 

Lalu Selanjutnya kita akan berlatih kemampuan kita terhadap materi-materi CSS. Mohon diperhatikan dengan baik, agar semuanya bisa memahami konsep dari CSS.

 

 

1. Latihan Image dengan menggunakan ExternalCSS    

 

Proverty yang saya gunakan adalah:

    a. Property Position

Property Position berguna untuk menjadikan element html kita naik 1 dimensi, dan ketika kita memberikan value absolute kita bisa menggerakan element html tersebut dengan sesuka hati kita dengan menggunakan property top, right, bottom, left.

 

    b. Property display

Pada umumnya setiap tag html mempunyai display defaultnya, ada yang display defaultnya block, dan ada juga yang display defaultnya block. Ketika kita menggunakan display block ketika kita ingin membuat element baru maka element tersebut akan berada dibawah element sebelumnya karna element tersebut sudah kita atur displaynya menjadi block,

    Dan sebaliknya jika kita menggunakan value inline maka ketika kita membuat element baru, element tersebut akan muncul di samping/sebelah element sebelumnya.

 

    c. Property margin

Property margin berfungsi untuk mengatur jarak luar dari sebuah element html. Kita bisa memberikan jarak atas, kanan, bawah, kiri dengan menggunakan margin. value yang bisa kita gunakan dari property margin adalah satuan pixsel (px), satuan persen (%), dan satuan rem.

 

    d. Property float

Property float berfungsi untuk mengatur sebuah posisi pada element. value yang bisa kita pakai dari property float adalah left, dan right.

 

    e. Property Clear

Property Clear berfungsi untuk membersihkan element yang sudah kita berikan float. value yang bisa gunakan adalah both.

 

    f. Property border-radius

Property border-radius berfungsi untuk mengatur lengkungan dari element html kita. value yang bisa kita gunakan adalah satuan pixsel(px), persen(%), dan rem.

 

    g. Property Padding

Property Padding berfungsi untuk mengatur jarak dalam dari sebuah element, konsep ini hampir mirip dengan konsep property margin dan satuan yang bisa kita gunakan pun sama dengan property margin.

 

    h. Property opacity

Property opacity berfungsi untuk mengatur ketebalan/pencerahan dari sebuah warna. value yang bisa kita gunakan adalah dimulai dari 0.1-1.

 

2. Latihan Table Menggunakan External CSS

 

Pada source code diatas, property yang ada pada gambar tersebut pernah kita pelajari pada saat beberapa waktu yang lalu. Jadi seharusnya kalian sudah paham dengan property pada gambar diatas. Maka dari itu kita bisa langsung lanjut ke hasil dari codingan diatas!

 

pada codingan diatas kita memberikan berbagai border pada bagian atas, kanan, bawah, dan kiri. Selengkapnya kalian bisa lihat kembali source code yang berada diatas halaman ini!

 

1. Challenge Table

 

 

 

2. Challenge Make Biography 

 

 

 

 

Sekian dan Terimakasih