Memahami Anatomi dan Cara Kerja Cascading Style Sheet | Nassya Putri R.

Hallo teman teman dimanapun kalian berada! Pada kesempatan kali ini saya akan memberi tahu kalian mengenai Anatomi dan Cara Kerja Cascading Style Sheet. Ohya, seperti biasa, disini saya menggunakan aplikasi sublime text ya, tapi teman-teman bisa juga menggunakan notepad++ atau HTML editor yang lain. Disimak baik baik yaa!

Cascading Style Sheet atau lebih sering disebut dengan istilah CSS merupakan salah satu dokumen website yang bertujuan untuk mengatur gaya (style) tampilan website.

 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 hampir semua jenis web browser.

Anatomi CSS

Pengcodingan CSS

• Inline : Di dalam file html yang sama, dalam masing-masing tag
• Embedded : Di dalam file html yang sama, hanya dalam satu file html saja
• External : Di luar file html, bisa digunakan di berbagai file html, dengan format file.css

Beberapa Properti pada CSS Text Format 

a

b

Hal hal yang akan saya tampilkan meliputi :

1. Inline CSS
2. Embedded with Class dan id1
3. Embedded with Class dan id2
4. External with Class dan id
5. Embedded Heading Color
6. Format Character Spacing
7. Text Deco and Spacing
8. Embedded Indent Align Upper

Disimak baik-baik ya teman teman!!

Inline CSS

1 (a)

1 (b)

Embedded with Class dan id1

2 (a)

2 (b)

Fungsi Tag dan Atribut :
- <style> ... </style> = Digunakan untuk menyisipkan kode style atau CSS ke dalam sebuah dokumen web (HTML).
- <div> ... </div> = Digunakan untuk menampung beberapa element menjadi satu kelompok.
- id="..." : Id digunakan untuk menentukan style bagian unik dari html. Unik disini artinya satu nama id hanya bisa digunakan satu kali pada sebuah halaman web. Apabila satu nama ID digunakan lebih dari satu kali pada sebuah halaman, maka style hanya akan berlaku pada id yang pertama saja. Selector ID pada syntax CSS ditandai dengan “#”.
- class="..." : Digunakan untuk menentukan style dari sebuah group elemen. Berbeda dengan ID, selector class bisa dipakai berulangkali pada sebuah dokumen web. Artinya sebuah nama class dapat dipanggil beberapa kali pada elemen-elemen yang ada pada sebuah halaman web. Selector class dituliskan dengan ditandai dengan tanda titik “.”
- border = Untuk membuat bingkai disekitar elemen.
- padding = Untuk memberikan spasi pada sisi dalam sebuah element.
- font-family = Untuk memilih jenis font.

Embedded with Class dan id2

3 (a)

3 (b)

Fungsi Tag dan Atribut :
- <label> ... </label> = Untuk merepresentasikan sebuah judul atau penamaan untuk item control (<input>, <select> dan lainnya) yang biasanya berkaitan dengan sebuah form.
<label> element dapat diasosiasikan dengan control tertentu dalam sebuah form dengan menggunakan dua cara. Pertama, dengan menggunakan for attribute, adapun value dari attribute tersebut adalah nama id dari control yang ingin dituju.
- for="..." : Menentukkan id dari form control (element yang berkaitan dengan sebuah form) yang hendak diasosiasikan.
- font-size:...; = Untuk menentukan ukuran font.

External with Class dan Id

4 (a)

4 (b)

4 (c)

Fungsi Tag Dan Atribut :
- <link> = Untuk menunjukkan sebuah hubungan (link) antara dokumen (HTML) yang bersangkutan dengan sumber file dari luar (eksternal). Dapat ditulis lebih dari satu kali, tergantung kebutuhan file CSS yang ingin dirujuk dan dipergunakan.
- float = Untuk menentukan apakah sebuah elemen box harus mengapung (float) atau tidak.
- background-color = Untuk menentukan warna latar belakang element html.

Embedded Heading Color

5 (a)

5 (b)

Format Character Spacing

6 (a)

6 (b)

6 (c)

Fungsi Tag dan Atribut :

- letter-spacing = Untuk memberikan tambahan space antara huruf.

Text Deco and Spacing

7 (a)

7 (b)

7 (c)

Fungsi Tag dan Atribut :

- text-decoration = Digunakan untuk mendekorasi teks.

- word-spacing = Digunakan untuk memberikan tambahan space antara kata.

Embedded Indent Align Upper

8 (a)

8 (b)

Fungsi Tag dan Atribut :

- text-align = Untuk mengatur posisi text pada element secara horizontal.

- text-indent = Untuk mengatur indent baris pertama.

- text-transform = Untuk menentukan besar kecilnya huruf.

Tugas 9

a

b

Fungsi Tag dan Atribut :
- margin-top = untuk memberikan jarak dalam bagian atas.
- margin-left = Untuk memberikan jarak dalam bagian kiri.
- margin-right = Untuk memberikan jarak dalam bagian kanan.

Sekian saja informasi yang dapat saya berikan. Mohon maaf apabila masih banyak kesalahan kata kata yang sifatnya disengaja atau tidak. Selamat belajar dan sehat selalu teman teman!😘

Menyajikan Komponen Entri Teks | Nassya Putri R

Assalamualaikum wr.wb teman-teman, kali ini saya kembali untuk membagikan beberapa informasi mengenai penyajian komponen entri teks pada html.
Berikut hal hal yang akan saya jelaskan :

1. Pengkodean Text Area A
2. Pengkodean Text Area dengan Atribut Cols (kolom)
3. Pengkodean Text Area dengan Atribut READONLY
4. Pengkodean Text Area dengan Atribut Disabled
5. Pengkodean Textfield dengan Atribut Password
6. Text Area Hidden 1
7. Text Area Hidden 2
8. Upload File
9. Radio Button
10. Checkbox and Image Button
11. Option Value and Data List
12. Tugas Membuat Halaman Web

Jangan lupa untuk menyimpan file dengan eksistensi .html menggunakan aplikasi editor html. Saya menggunakan sublime text.

Pengkodean Text Area A

1 (a)

1 (b)

Fungsi tag dan atribut :
1. <textarea> ... </textarea> : Digunakan untuk membuat text inputan yang bisa menampung lebih dari 1 baris inputan. Biasanya digunakan untuk inputan yang panjang, seperti komentar, keterangan, atau catatan.
2. NAME="" : Berfungsi sebagai identitas dari tag textarea tersebut.
3. cols & rows : Berfungsi untuk membatasi tampilan lebar kolom (cols) dan tinggi baris (rows).

Pengkodean Text Area dengan Atribut Cols (kolom)

2 (a)

2 (b)

Atribut dan tag yang digunakan, sama dengan no 1.

Pengkodean Text Area dengan Atribut READONLY dan DISABLED

3 (a)

3 (b)

4 (a)

4 (b)

Atribut disabled dan readonly digunakan untuk membuat textarea tidak bisa digunakan. Penggunaan atribut ini biasanya di kombinasikan dengan javascript agar berfungsi maksimal.  Kedua atribut ini hanya memiliki 1 nilai, yaitu dirinya sendiri. Walaupun kedua textarea yang memiliki atribut ini tidak bisa digunakan, namun keduanya akan memiliki tampilan yang berbeda. Atribut disabled akan membuat kotak text berwarna abu-abu, sedangkan atribut readonly tampak seperti kotak text biasa.

Pengkodean Textfield dengan Atribut Password

5 (a)

5 (b)

- type=password, text isian tidak akan ditampilkan, namun diganti dengan karakter khusus.

Text Area Hidden 1

6 (a)

6 (b)

Fungsi Tag dan Atribut :
- type="hidden" : Input hidden tidak tampil pada halaman HTML. Biasanya digunakan untuk meneruskan atau menyimpan variabel dari server pada halaman client. Karena digunakan untuk menyimpan nilai, biasanya tipe input ini selalu disertai atribut name dan value.- type="submit" : Input submit akan mengirimkan isi form ke server, ke alamat yang tertera pada atribut action pada elemen form. Nilai pada atribut value akan menjadi tulisan yang tampil pada tombol submit.

Text Area Hidden 2

7 (a)

7 (b)

Upload File

8 (a)

8 (b)

Fungsi Tag dan Atribut :
- type="file" : Berguna untuk memilih dan mengirimkan file ke server.

Radio Button

9 (a)

9 (b)

Fungsi Tag dan Atribut :
- type="radio" :  Berfungsi untuk memilih satu di antara banyak.

Checkbox and Image Button

10 (a)

10 (b)

Fungsi Tag dan Atribut :
- type="checkbox" : Berfungsi untuk membuat kotak isian yang diisi dengan cara mencentang kotak tersebut. Checkbox biasanya  digunakan untuk pilihan yang dapat dipilih dengan lebih dari 1 pilihan.- type="image" : Fungsi utamanya adalah memasukkan gambar ke dalam form. Gambar tersebut akan berfungsi sebagai objek form yang bisa di-klik oleh user. Ketika user men-klik gambar tersebut, web browser akan mengirimkan koordinat titik dimana gambar di-klik.

Option Value and Data List

11 (a)

11 (b)

Fungsi Tag dan Atribut :- <select>...</select> = Digunakan untuk memilih di antara beberapa pilihan. Pilihan di dalam elemen select dinyatakan dengan elemen option. Teks yang tampil diapit oleh tag option, sedangkan nilai yang dikirim ke server dinyatakan dalam atribut value pada elemen option.

- <datalist>...</datalist> : Digunakan untuk merepresentasikan daftar opsi (pilihan) yang diberikan pada sebuah input control dengan daftar pilihan (masukkan) yang sebelumnya sudah terdefinisikan 

HTML element <datalist> merupakan element tersembunyi yang tidak ditampilkan secara langsung pada jendela browser.

<datalist> element ditulis bersamaan dengan element <input> sebagai pilihan masukkan yang diberikan dari daftar option di dalam <datalist> tersebut. Sehingga, pada <input> control tersebut tersedia daftar pilihan otomatis yang dapat dipilih tanpa mengetik ulang.

Dalam penggunaannya, <datalist> element harus ditulis dengan nama id tertentu yang nantinya nama id tersebut digunakan sebagai value dari attribute list di dalam <input>

Berikut merupakan penjelasan dari bagian bagian textarea

Tugas Membuat Halaman Web

12 (a)

12 (b)

12 (c)

12 (d)

Fungsi Tag dan Atribut :
- <pre>...</pre> : Digunakan untuk merepresentasikan sebuah blok teks preformat (preformatted text). Teks yang ditulis didalam <pre> elemen memiliki struktur berdasarkan ketetapan tifografi, artinya teks ditulis apa adanya sesuai format yang ditulis didalam file (dokumen HTML).

Nah, sekian informasi yang dapat saya sampaikan. Tunggu post terbaru dari saya ya teman-teman! Mohon maaf apabila ada kata kata yang tidak enak, ataupun sulit dimengerti. Terima kasih, Wassalamualaikum wr wb.🌸❤