Jenis-jenis font family untuk CSS

Jenis-jenis font family untuk CSS

Berikut adalah contoh penulisan font-family:

selector {font-family: family-name, generic-family;}

Sebagai contoh untuk pengaturan font selector heading (h1) di dalam CSS:

h1 {font-family: ”Trebuchet MS”, Helvetica, sans-serif;}

family-name

family-name adalah nama dari kumpulan beberapa font yang sejenis, seperti contoh Trebuchet MS Normal, Trebuchet MS Bold, Trebuchet MS Italic, Trebuchet MS Bold Italic, jadi family-name untuk font-font tersebut adalah Trebuchet MS.

Di dalam “family-name” kita bisa memasukkan lebih dari satu pilihan family-name, seperti contoh diatas ada “Trebuchet MS” dan “Helvetica” kemudian pada urutan terakhir ada “sans-serif” ini yang disebut dengan generic-family. Sangat dianjurkan untuk selalu memasukkan generic-family pada setiap akhir dari properti font-family.

Untuk family-name yang menggunakan spasi atau lebih dari satu kata harus ditulis didalam tanda petik, ”Trebuchet MS”.

Ketika browser akan menampilkan konten yang berupa teks, font yang digunakan adalah yang berada di urutan pertama dari family-name, sebagai contoh diatas adalah Trebuchet MS jika font-font ini tidak ditemukan maka browser akan mencoba mencari font-font jenis Helvetica, jika font-font ini juga tidak ditemukan maka browser akan menggunakan standar font-nya masing-masing yang bertipe sans-serif sebagai alternatif terakhir.

Jadi untuk menghindari hal tersebut diatas maka dianjurkan bagi para pembuat website atau webmasters agar menggunakan font-font standar yang kemungkinan besar sudah tersedia di setiap komputer pengguna, klik link berikut ini untuk melihat list dari font-family standar.

generic-family

Terdiri dari 5 jenis type yaitu: serif, sans-serif, cursive, fantasy dan monospace.
Untuk lebih jelasnya perhatikan contoh berikut:

Tulisan dengan type serif
Tulisan dengan type sans-serif
Tulisan dengan type cursive
Tulisan dengan type fantasy
Tulisan dengan type monospace

Dari hasil percobaan di 5 web browser untuk font type “fantasy” hanya Internet Explorer yang benar-benar berfantasi, klik gambar untuk memperbesar.

Tipe Serif biasa digunakan untuk kebutuhan printer karena bentuknya yang lebih lembut dan halus, tipe sans-serif cocok digunakan untuk website karena lebih tebal dan jelas sehingga tulisan akan lebih mudah terbaca. Tipe cursive dan fantasy bisa digunakan untuk gambar maupun judul website dan tipe monospace adalah untuk kode dan membuat efek mesin ketik.

Font Families standar yang sering digunakan.

font-family: "Arial Black", Gadget, sans-serif;

Preview: "Arial Black", Gadget, sans-serif;

font-family: Arial, Helvetica, sans-serif;

Preview: Arial, Helvetica, sans-serif;

font-family: "Andale Mono", "Monotype.com", monospace;

Preview: "Andale Mono", "Monotype.com", monospace;

font-family: "Bookman Old Style", serif;

Preview: "Bookman Old Style", serif;

font-family: "Comic Sans MS", cursive;

Preview: "Comic Sans MS", cursive;

font-family: "Courier New", Courier, monospace;

Preview: "Courier New", Courier, monospace;

font-family: Courier, monospace;

Preview: Courier, monospace;

font-family: fixedsys, monospace;

Preview: fixedsys, monospace;

font-family: Georgia, serif;

Preview: Georgia, serif;

font-family: Garamond, serif;

Preview: Garamond, serif;

font-family: Impact, Charcoal, sans-serif;

Preview: Impact, Charcoal, sans-serif;

font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;

Preview: "Lucida Sans Unicode", "Lucida Grande", sans-serif;

font-family: "Lucida Console", Monaco, monospace;

Preview: "Lucida Console", Monaco, monospace;

font-family: "MS Gothic", monospace;

Preview: "MS Gothic", monospace;

font-family: "MS Sans Serif", Geneva, sans-serif;

Preview: "MS Sans Serif", Geneva, sans-serif;

font-family: "MS Serif", "New York", sans-serif;

Preview: "MS Serif", "New York", sans-serif;

font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;

Preview: "Palatino Linotype", "Book Antiqua", Palatino, serif;

font-family: Symbol, sans-serif;

Preview: Symbol, sans-serif;

font-family: System, sans-serif;

Preview: System, sans-serif;

font-family: Tahoma, Geneva, sans-serif;

Preview: Tahoma, Geneva, sans-serif;

font-family: Techno, Impact, sans-serif;

Preview: Techno, Impact, sans-serif;

font-family: "Times New Roman", Times, serif;

Preview: "Times New Roman", Times, serif;

font-family: "Trebuchet MS", Helvetica, sans-serif;

Preview: "Trebuchet MS", Helvetica, sans-serif;

font-family: Verdana, Geneva, sans-serif;

Preview: Verdana, Geneva, sans-serif;

font-family: Wingdings, "Zapf Dingbats", sans-serif;

Preview: Wingdings, "Zapf Dingbats", sans-serif;

font-family: Webdings, sans-serif;

Preview: Webdings, sans-serif;

Sumber : https://internet-teknologi-informasi.blogspot.com/2014/03/jenis-jenis-font-family-untuk-css.html

Link Stock rom/ Flash

https://firmwarefile.com/
https://blog.mediafire.co.id/

Elemen input pada HTML

Terdapat berbagai macam jenis elemen input di dalam form:

• text
• password
• textarea
• select
• select multiple
• checkbox
• radio
• file
• submit / button
• hidden

Dan beberapa tipe input baru pada HTML 5 yang masih belum seluruhnya didukung pada browser:

• email, url
• number
• date, month, week, time
• range
• color

Atribut elemen input HTML secara umum

Semua elemen input pada form bergantung dengan atribut name dalam pengiriman data. Saat data-data pada form dikirim ke server, nama yang tertera di dalam atribut name tersebut akan menjadi nama data yang dikirim.

Selain atribut name, setiap elemen input juga dapat ditambahkan atribut readonly dan disabled. Atribut readonly akan menyebabkan input tidak dapat diedit, sedangkan atribut disabled menyebabkan input tidak interaktif dan datanya tidak dikirim, hanya ditampilkan saja.

Input text pada HTML

Digunakan untuk menginput teks. Merupakan tipe default dari elemen input.

?

1	<input type="text" name="telepon" value="021-2020505" />

Output:

Elemen input tipe teks ini dapat dipakai untuk berbagai macam tipe data. Dapat berupa teks, nama, alamat, tanggal, nomor hp, email dan sebagainya. Akan tetapi sebaiknya dipakai untuk tipe data teks saja. Atribut value dapat digunakan untuk menentukan nilai awal pada input.

Input password pada HTML

Input ini sama dengan input tipe teks, hanya saja teksnya tersembunyi.

?

1	<input type="password" name="password" />

Output:

Input tipe password juga dapat diberi nilai awal dengan atribut value. Tapi juga dapat dikosongkan seperti di atas.

Input textarea pada HTML

Textarea dapat digunakan untuk input teks dengan banyak baris.

?

1	<textarea name="alamat">Jl. Suka sama senang</textarea>

Output:

Tidak seperti elemen input, nilai awal pada elemen textarea tidak diletakkan di atribut value, tapi diletakkan di antara tag pembuka dan penutup textarea. 

Input select pada HTML

Input select digunakan untuk memilih di antara beberapa pilihan.

?

1 2 3 4 5 6 7 8

<select name="hobi">   <option value="">--Pilih Hobi--</option>   <option value="1">1. Komputer</option>   <option value="2" selected>2. Otomotif</option>   <option value="3">3. Memasak</option>   <option value="4">4. Melukis</option>   <option value="5">5. Bernyanyi</option> </select>

Output:

--Pilih Hobi--1. Komputer2. Otomotif3. Memasak4. Melukis5. Bernyanyi 

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.

Kita juga dapat menentukan pilihan awal yang terpilih dengan atribut selected.

Input select multiple pada HTML

Dengan atribut multiple, elemen select akan berubah tampilannya dan dapat memilih lebih dari satu pilihan.

?

1 2 3 4 5 6 7 8

<select name="hobi" multiple>   <option value="">--Pilih Hobi--</option>   <option value="1">1. Komputer</option>   <option value="2">2. Otomotif</option>   <option value="3">3. Memasak</option>   <option value="4">4. Melukis</option>   <option value="5">5. Bernyanyi</option> </select>

Output:

--Pilih Hobi--1. Komputer2. Otomotif3. Memasak4. Melukis5. Bernyanyi 

Input checkbox pada HTML

Checkbox pada HTML menggunakan elemen input juga, hanya typenya yang diganti menjadi checkbox.

?

1 2 3 4 5

<input type="checkbox" name="hobi[]" value="1" checked/>1. Komputer<br /> <input type="checkbox" name="hobi[]" value="2"/>2. Otomotif<br /> <input type="checkbox" name="hobi[]" value="3"/>3. Memasak<br /> <input type="checkbox" name="hobi[]" value="4" checked/>4. Melukis<br /> <input type="checkbox" name="hobi[]" value="5"/>5. Bernyanyi<br />

Output:

1. Komputer
2. Otomotif
3. Memasak
4. Melukis
5. Bernyanyi

Jika mengirim data ke server dengan bahasa PHP, atribut name pada checkbox perlu diberi tanda kurung siku seperti di atas agar data hobi menjadi suatu array.

Nilai yang terkirim ke server adalah nilai di dalam atribut value. Sedangkan teks yang mendampingi checkbox dapat diketikkan setelah tag input checkbox.

Jika diperlukan, dapat menambahkan atribut checked sehingga checkbox tertentu dapat tercentang dari awal.

Input radiobutton pada HTML

Tipe input radio memiliki fungsi yang sama dengan input select. Memilih satu di antara banyak. Saya lebih menganjurkan menggunakan select karena tampilannya lebih ringkas.

?

1 2 3 4 5

<input type="radio" name="hobi" value="1"/>1. Komputer<br /> <input type="radio" name="hobi" value="2" checked/>2. Otomotif<br /> <input type="radio" name="hobi" value="3"/>3. Memasak<br /> <input type="radio" name="hobi" value="4"/>4. Melukis<br /> <input type="radio" name="hobi" value="5"/>5. Bernyanyi<br />

Output:

1. Komputer
2. Otomotif
3. Memasak
4. Melukis
5. Bernyanyi

Karena radio button bersifat pilihan, tidak perlu menggunakan array pada atribut name. Dan sama seperti checkbox, atribut checked pada radio button menentukan opsi yang terpilih sejak awal.

Input file pada HTML

Input file pada HTML berguna untuk memilih dan mengirimkan file.ke server. Agar dapat mengirimkan file, elemen form yang berisi input file harus ditambahkan atribut enctype="multipart/form-data".

?

1 2 3

<form method="post" action="" enctype="multipart/form-data">   <input type="file" name="foto_narsis" /> </form>

Output:

Input file memiliki tampilan yang berbeda-beda pada setiap browser.

Input submit pada HTML

Input submit berbentuk seperti tombol dan biasanya diletakkan di akhir form. Ketika diklik, input submit akan mengirimkan isi form ke server, ke alamat yang tertera pada atribut action pada elemen form.

?

1	<input type="submit" value="Daftar"/>

Output:

Nilai pada atribut value akan menjadi tulisan yang tampil pada tombol submit.

Input button pada HTML

Input button tampak sama seperti input submit. Akan tetapi input button lebih ditujukan untuk digunakan bersama-sama dengan javascript.

?

1 2	<input type="button" value="Tombol aneh" onclick="alert('test');"/> <button onclick="alert('bahaya'); return false;">Tombol bae</button>

Output:

onclick adalah salah satu event pada javascript. Di dalam atribut / event onclick tersebut dapat dimasukkan kode ataupun fungsi javascript.

Elemen button merupakan perkembangan pada HTML 5 yang memiliki tampilan dan fungsi yang sama dengan input button. Hanya penulisannya saja yang sedikit berbeda.

Input hidden pada HTML

Seperti namanya, input hidden tidak tampil pada halaman HTML. Biasanya digunakan untuk meneruskan atau menyimpan variabel dari server pada halaman client.

?

1	<input type="hidden" name="username" value="cecep" />

Karena digunakan untuk menyimpan nilai, biasanya tipe input ini selalu disertai atribut name dan value. Akan tetapi dengan teknologi ajax dan json, tipe input ini sudah agak jarang dipakai.

Tipe Input baru pada HTML 5

Terdapat banyak tipe input baru yang distandarkan pada HTML 5. Karena masih baru, terkadang tipe-tipe ini masih belum didukung oleh beberapa browser. Berikut tipe-tipe input baru tersebut:

Input email dan url pada HTML 5

Tipe input ini pada dasarnya sama seperti input teks, terkecuali bila digabung dengan atribut required, browser langsung memvalidasi apakah input tersebut valid atau tidak valid.

?

1 2	email: <input type="email" name="email" required /><br /> homepage: <input type="url" name="homepage" required />

Output:

email: 
homepage: 

Input number pada HTML 5

Tipe number juga sama dengan input text, kecuali input number hanya dapat diisi dengan angka.

?

1	<input type="number" name="qty" />

Output:

Input tanggal pada HTML 5

Terdapat beberapa tipe input tanggal, antara lain: date, month, week dan time. Akan tetapi tipe input ini baru didukung oleh chrome saja.

?

1 2 3 4

Tanggal: <input type="date" name="tanggal" /><br /> Bulan: <input type="month" name="bulan" /><br /> Minggu: <input type="week" name="minggu" /><br /> Waktu: <input type="time" name="jam" />

Output:

Tanggal: 
Bulan: 
Minggu: 
Waktu: 

Input range pada HTML 5

Input range digunakan untuk memilih angka dalam batasan nilai tertentu.

?

1	Pilih angka: <input type="range" name="angka" min="0" max="10" value="3" />

Output:

Pilih angka:

Input color pada HTML 5

Input color digunakan untuk memilih warna.

?

1	Pilih warna kesukaan: <input type="color" name="warna_favorit" value="#FFBB54" />

Output:

Pilih warna kesukaan: 

Penutup

Sampai di sini dulu pembahasan kali ini. Selanjutnya, untuk cara memproses data pada form dan input, dapat mempelajari bahasa pemrograman sisi server seperti PHP.

Sumber : https://icodeformoney.com/tuts/Elemen-input-pada-HTML