CSS Background

Pengertian Background

Background adalah salah satu komponen desain yang merupakan salah satu komponen desain yang cukup penting guna memberi dekorasi visual terhadap sebuah elemen yang akan mengakibatkan peningkatan suatu konten.

Pada bagian ini kita akan membahas tentang penggunaan background image, background repeat, teknik sprite.

Contoh disini akan ada html namun hanya backgroundnya diganti

Apabila menginginkan background gambar maka perintahnya berikut

Dan hasilnya akan seperti ini

Apabila hanya mengingkan warna polosan maka perintahnya berikut:

Tampilan nya akan seperti ini

Sebenarnya masih bisa banyak lagi namun cukup sekian dari saya.

CSS Placement

Apa itu CSS Placement?
Placement artinya penempatan. Placement di Css digunakan untuk mengatur posisi sebuah elemen html. Biasanya kita dalam membuat website menginginkan penempatannya bisa diatur. Di property ini lah kita bisa menggunakannya.
Adapun beberapa property css yang digunakan untuk menentukan posisi sebuah elemen yaitu:
1. Static
Property ini merupakan property default semua elemen. Dengan ini elemen akan menempatkan posisi mengikuti alur halaman.
2. Relative
Property ini hampir sama dengan static namun jika kita tambahkan value akan tetap berfungsi. Di static tidak berfungsi. Property relative bergantung dengan elemen yang ada diatasnya. Namanya aja relative pasti akan tidak berkepastian.
3. Absolute
Property ini jika digunakan maka elemen akan tertimpa dengan elemen yang lain.

Untuk pemahaman yang Absolute penulis beri contoh

Hasilnya akan tertindih seperti diatas. Yang lain tidak saya beri contoh karena saya rasa cukup mudah dan hampir sama.


Meski merasa lelah janganlah anda menyerah
@enjie_press~

CSS Font Styling

Font merupakan desain untuk serangkaian karakter. Font adalah kombinasi dari jenis huruf dan kualitas lainnya. Misalnya, Times New Roman adalah jenis huruf yang menentukan bentuk setiap karakter. 

Di CSS dalam pengeditan font juga banyak variannya 

1. Font, berfungsi  menentukan metode untuk mengatur font pada suatu elemen. Tanda koma diberikan untuk mengatur font. Contoh {font: 12pt, arial}

2. Font-style, berfungsi menentukan model file yang akan digunakan ditampilkan dalam browser. font style yang sering digunakan normal, italic, dan oblique. Untuk italic dan oblique sebenarnya hampir sama hanya saja  oblique tidak terlalu miring.

3. Font-variant, berfungsi untuk menentukan apakah teks ditampilkan dalam small-capital atau tidak. Nilai yang dapat diberikan adalah normal dan small-caps

4. Font-synthesis, berfungsi untuk menyatukan dua atau lebih elemen yang ada untuk menghasilkan hasil baru.

5. Font-weight, berfungsi untuk memberikan efek ketebalan atau biasa dikenal dengan bold. 

6. Font-size, berfungsi untuk menentukan ukuran font dalam suatu elemen. 

7. Font-kerning, berfungsi untuk mengatur spasi karakter agar lebih seragam dan menarik untuk dibaca.

8. Font-family, berfungsi untuk menentukan jenis font pada suatu elemen.

9. Font-variant-caps, berfungsi untuk membuat suatu text menjadi huruf kapital semua tapi ukurannya tidak sebesar kapital biasanya.

10. Font-variant-position, berfungsi untuk menentukan apakah teks ditampilkan dalam small-capital atau tidak.

11. Font-variant-numeric, berfungsi untuk mengubah dalam wujud angka atau sistem angka

12. Font-size-adjust, berfungsi untuk menyesuaikan ukuran teks 

13. Font-variant-alternates, berfungsi untuk mengontrol penggunaan mesin terbang alternatif.

14. Font-variant-ligatures, berfungsi untuk mengatur property yang ligatures dan bentuk kontekstual elemen yang berlaku.

15. Font- feature- settings, berfungsi untuk mengontrol properrty css fitur canggih tipografi dalam font opentype.

Sebenarnya masih banyak lagi yang lainnya namun penulis hanya bisa menjabarkan itu saja. semoga bermanfaat

Jangan mengenal kata lelah dalam menuntul ilmu

@enjie_press~

BOX MODEL CSS

Margin
Property ini digunakan untuk memberikan jarak antar elemen html. misalnya jarak antar <div> dan tag-tag lainnya.
Supaya lebih memahami langsung ke contoh:

Lalu tambahkan tag style dalam tag head, dan ketikan kode css berikut:

Maka akan muncul tampilan seperti dibawah ini:

Jarak antar box agak berjauhan karena kita memberi margin-bottom sebesar 50 px. Namun bagaimana cara text yang ada dalam box berposisi di tengah? Dengan Padding kita bisa mengatur nya. Padding adalah sebuah elemen yang digunakan untuk mengatur atau memberikan jarak antara konten elemen dengan elemen trsebut. 

Pada koding anda sebelumnya tinggal diberi tambahan padding 

Dan hasilnya akan seperti ini

Setelah diberi padding maka ada perbedaan text dalam box gambar ke 1 dan kedua. Dan ukuran box yang  telah diberi padding juga akan berubah karena telah ketambahan besar padding nya. Misal anda membuat box dengan size 100 px dan anda beri padding sebesar 30 px maka besar box akan menjadi 130 px. 

Malaslah pada waktunya, dan Rajinlah pada waktunya

@enjie_press~

Form html

FORM HTML

Form biasanya digunakan untuk mengumpulkan data dari suatu data. Penggunaan form hanya menggunakan Html saja tidak akan terlalu berguna.Form biasanya hanya berupa interface yang disediakan untuk mengumpulkan data dari user, dan akan diproses dengan bahasa pemrograman web. 

Tag dasar yang digunakan untuk membuat  form di html adalah tag form, input, textrea, select dan option. Tag form dalam html harus berada didalam tag form, yang diawali dengan <form> dan diakhiri dengan </form>. Tag form akan membutuhkan beberapa atribut untuk dapat berfungsi dengan seharusnya.  

Atribut yang digunakan dalam tag form yaitu

1. action, berfungsi untuk menjelaskan kemana data form yang akan dikirimkan.

2. method, berfungsi untuk menjelaskan bagaimana data isian form akan dikirimkan oleh web browser.

Tag input merupakan tag yang paling banyak digunakan didalam form dan memiliki banyak bentuk, mulai dari isian texr biasa.

Atribut yang digunakan dalam tag input yaitu:

1. <input type="text"/>, textbox yang digunakan untuk menerima inputan berupa text.

2. <input type="password"/>, sama dengan text namun saja tidak akan terlihat dan muncul berupa bintang atau bulatan.

3. <input type="checkbox"/>, inputan yang berupa data yang bisa diceklist maupun dicentang oleh user.

4. <input type="radio"/>, hampir sama dengan checkbox hanya saja user hanya bisa memilih satu diantara pilihan.

5. <inptu type="submit"/>, menampilkan tombol untuk memproses form.

Tag textarea pada dasarnya sama dengan tag input namun lebih besar dan dapat berisi banyak baris. Elemen yang berada diantara tag textarea akan ditampilkan sebagai text awal dari form.

Tag select digunakan untuk inputan yang telah tersedia nilainya, dan user hanya dapat memilih dari nilai yang ada. Tag select digunakan bersama dengan tag option. Tag select memiliki atribut selected yang dapat digunakan untuk menambah nilai awal dari suatu form.

Supaya lebih paham langsung ke contoh berikut:

Sebenarnya membuat fomulir dengan html tidak lah sulit hanya saja membutuhkan kreatifitas dan kejelian dalam pengkodingannya.

Belajar tak mengenal waktu

@enjie_press~

Table Html

Table HTML

Dalam menampilkan data yang struktur atau tampilan dari database, biasanya akan membuat dalam bentuk tabel. Lantas bagaimana cara membuat tabel di html? Di Html menyediakan tabel tag yang dapat digunakan untuk menampilkan data dalam bentuk tabel.

Tabel terdiri dari 4 unsur utama yaitu :
1. baris
2. kolom
3. sel
4. garis

Untuk membuat tabel di Html, ada kurang lebih 3 tag yang digunakan, yaitu:

1. Tag <table> digunakan untuk memulai tabel.

2. Tag <tr> digunakan untuk membuat baris dari tabel. Tr singkatan dari table trow

3. Tag <td> digunakan untuk menginput data ke tabel. Td singkatan dari table data.

Supaya lebih bisa memahami langsung contoh

Sering-sering latihan dengan contoh kasus tertentu, jika mengalami kesulitan jangan pernah lelah untuk terus mengulang.

@enji_press~

Cara Menyisipkan audio di Html

Koniciwa minasan!!!!,
(Ehehehe jadi pake jepang gara" anime nih)
Hai semua, kemarin kan udah bahas cara menyisipkan gambar dan video. Kali ini kita bahas cara menyisipkan audio nya.
Sekarang banyak website-website yang menyediakan audio seperti lagu yang bisa didownload. Nah gimana sih caranya?

Html menyediakan tag audio yang bisa digunakan untuk memasukan audio seperti lagu ke dalam suatu website. Penggunaan elemen audio ditandai dengan pasangan tag <audio>...</audio>. Didalam tag tersebut terdapat elemen source dan dapat ditambahkan teks yang akan ditampilkan.

Pada elemen audio juga terdapat beberapa atribut yaitu:

1. autoplay : berfungsi untuk menentukan bahwa audio akan diputar langsung ketika halaman sudah diload secara otomatis.

2. controls : berfungsi untuk menunjukkan bahwa controls audio ditampilkan seperti player yang biasanya berisi tombol play/pause, slide, volume, dsb.

3. mute : berfungsi untuk mematikan atau mebisukan suara yang ada dalam audio.

4. loop : berfungsi untuk mengulang atau memutar ulang audio.

5. src : berfungsi untuk menunjukkan lokasi penyimpanan file audio atau url penunjuk tempat file.

Tapi pada kali ini penulis akan memberi contoh dengan menggunakan atribut src

Pada atribut src , penulis hanya menuliskan kalimba.mp3 saja karena lokasi file audio nya satu folder dengan file htmlnya. Jika anda menggunakan atribut src langsung pada tag <audio> maka hanya akan ada satu format audio yang digunakan. Dan perlu diketahui tidak semua format didukung oleh semua browser. Agar tetap berjalan makan gunakan format audio yang lebih dari satu dengan menggunakan elemen source.

Oke, saya rasa anda sekarang sudah mulai bisa memahami bagaimana cara menyisipkan audio ke html.

Lakukan apa yang membuat kamu senang

 @enjie_press~

Anatomy CSS

Css memiliki aturan tersendiri dalam penulisan sintaks. Penulisan sintaks terbagi menjadi 3 bagian yaitu:

1. Selector: bagian html yang digunakan untuk mengatur style. Nama-nama yang diberikan untuk style-style yang berbeda baik style internal maupun external. Berupa kelas dan ID. 

2. Property: aturan dalam css yang mengubah selector yang dipilih. Property yang mempunyai nilai disebut value.  Property ditandai dengan tanda { }.

3. Value: merupakan nilai yang ingin kita berikan pada property.

Format penulisan bagian-bagian dari Css dapat dituliskan
Selector{property : value; }
Contoh:
H1{colour : blue; }
↕️   ↕️       ↕️
Selector.      Value
      Property

Jika sesuatu dianggap penting maka tiada alasan yang bisa menghalanginya
@enjie_press~

Pengenalan CSS

Pengertian Css
Css adalah singkatan dari Cascading Style Sheet. Biasa digunakan untuk mengatur tampilan elemen yang tertulis dalam bahasa mark up. Css digunakan untuk mengontrol format tampilan sebuah halaman web yang dituliskan dengan menggunakan penanda (markah). Css juga memungkinkan sebuah halaman untuk ditampilkan dalam berbagai style dengan menggunakan metode pembawaan yang berbeda beda pula.

Tujuan Css
Css dikembangkan untuk membedakan antara konten dengan style/tampilan konten. Dengan adanya css maka design konten akan mudah dibedakan. Maka dari itu, waktu pembuatan konten dapat diminimalisir dan dapat dengan mudah melakukan pengulangan style yang sama pada konten tertentu.

Fungsi Css
Css digunakan untuk mendesain, merancang, merubah dan membentuk halaman web lebih menarik dan sederhana sesuai fungsinya.

Cara Kerja Css
Pembuatan Css ini sebenarnya mudah caranya. Ketika anda membuat halaman html tinggal klik new page dengan ekstensi .css dan pada htmlnya di beri link menuju halaman cssnya. Pada css kita dapat merubah style sesuai yang diinginkan.

Cara Menyisipkan Video di Website

Cara menyisipkan video di website

Bagaimana cara video diatas bisa ditampilkan??
Dengan menggunakan tag video dalam html kita bisa menampilkan video di website.
Perintah untuk menampilkan video diatas adalah sebagai berikut:

<div class="separator" style="clear: both; text-align: center;">

<iframe allowfullscreen="" class="YOUTUBE-iframe-video" data-thumbnail-src="https://i.ytimg.com/vi/pQgliz9zWL4/0.jpg" frameborder="0" height="266" src="https://www.youtube.com/embed/pQgliz9zWL4?feature=player_embedded" width="320"></iframe></div>

Cukup rumit dan sulit dipahami ya? Ya karena video yang diambil bukan dari folder yang sama melainkan diambil dari youtube. Makanya sourcenya panjang. Namun jika satu folder dengan htmlnya, maka tidak serumit itu. Contoh tag nya

<body>
<video width="...px" height="...px controls><source src="..... .mp4></video>
</body>
</html>

Width dan height nya untuk mengatur ukuran videonya. Dan source src untuk letak filenya.

Silahkan dicoba.
 Dan semoga bermanfaat.

Selagi bisa lakukan, agar tak menyesal nantinya
~@enjie_press

Cara Menampilkan Gambar di Html

Cara menampilkan gambar di website
Agar tampilan website lebih menarik dan mudah dipahami oleh pembacanya. Banyak blog yang menyisipkan gambar pada websitenya. Penambahan gambar dalam sebuah website tentunya akan menciptakan tampilan halaman web lebih menarik dan lebih informatif. Tapi bagaimana caranya?

Di html dalam nyisipkan gambar menggunakan tag <img src="..... .jpg>

Atribut src adalah singkatan dari source yang berisi alamat gambar yang akan disisipkan ke dalam website. Selain atribut src tag img juga mempunyai atribut alt.

Contoh penggunaan tag nya

Dan hasilnya seperti dibawah ini.

Weight dan height di atas digunakan untuk mengatur panjang dan lebar dari gambar. 

Dan perlu dipahami gambar bisa ditampilkan kalau html mendeteksi dimana letaknya. Jika anda menyimpan gambar harus sefolder dengan file htmlnya. Atau bisa juga pengambilan gambar dari google dengan cara mengcopy alamat gambarnya. Dan harus melihat apa jenis file nya. Jika jpg ya jpg jika png ya png jangan dibuat berbeda.

Saya rasa cukup sekian pembahasan kali ini kalo masih belum paham bisa tanya dengan comment dibawah. 

Jika anda satu kali belum paham coba dua kali jika tetap belum coba terus sampai anda benar-benar paham. Jangan pernah lelah untuk mencoba.

~@enjie_press

Hyperlink Html

Hyperlink html
Hyperlink dalam html digunakan untuk suatu halaman web ke halaman web lain. Adanya link biasanya diberi sorotan yang berbeda seperti garis bawah atau warna. Tag yang digunakan untuk memunculkan link yaitu <a> atau yang disebut tag anchor.

Contoh, saya ingin menuju halaman blog saya yang sebelumnya
Kita tinggal panggil dengan menggunakan link. Link di Html menggunakan tag <a>.

Contoh:

<a  href="https://catatanmateriayu.blogspot.com/2019/07/html-list.html">menujuhalamansebelumnya</a>


Maka hasilnya akan seperti dibawah dan ketika diklik maka akan menuju halaman yang dituju.

menujuhalamansebelumnya

contoh pengkodingannya yaitu:

Untuk pembahasan hyperlink ini saya rasa cukup. Bila masih belum paham bisa tanya di kolom comment insyaallah saya jawab.

Semoga bermanfaat!!!

Manfaatkan masa muda mu agar tiada rasa kecewa dimasa tuamu

~@enjie_press

Html List

List html
List adalah item yang digunakan untuk mengelompokan suatu  data baik secara berurutan maupun tidak berurutan.

List dalam html ada 3 yaitu:
1. Ordered list
2. Unordered list
3. Description list

Pasti bingung ya??? Apa arti dan maksud diatas, mari kita bahas satu per satu.

1. Ordered list : list yang berurutan. Tag yang digunakan adalah <ol>...</ol> dan setiap item nya menggunakan tag<li></li>. Oh iya ada yang belum tau apa itu tag <ol>dan tag<li>?? <ol>:oredered list dan <li>:list item. Contoh:

Dan hasilnya:

Selain angka bisa juga diubah yang lain seperti romawi dan abjad, tinggal ubah type olnya <ol type="...">

2. Unordered list : list ini kebalikan no 1 yaitu tidak berurutan. List ini menggunakan tag <ul></ul>. Contoh:

Hasilnya:

Sama seperti sebelumnya di list ini pun juga ada type bullet yang lain.

3. Description list : list yang digunakan untuk menampilkan penjelasan/deskripsi. Tag yang digunakan adalan <dl></dl> sedangkan untuk item isinya menggunakan tag <dt>...</dt> dan <dd>...</dd>.
Tag<dl>: description list
Tag<dt>: description term
Tag<dd>: description data
Contoh:

Hasilnya:

Oke, selesai sudah pembahasan kali ini. Semoga bermanfaat

Dalam menyelesaikan sesuatu  terkadang tidak sesuai harapan. Tetap sabar dan terus cobalagi. Yakinlah usaha pasti ada hasil.
@enjie_press

Html Heading

Html headings
Apa itu heading? Bagaimana penggunaannya? Apa fungsinya?
Tenang, semua akan dijabarkan penulis.

Heading merupakan tag khusus html yang digunakan untuk membuat ukuran huruf di halaman web. Biasanya tag heading judul diberi warna penegasan dengan ukuran lebih besar dan tebal dari isi kontennya.

Dalam html, tag heading ada 6 dimana semakin kecil tagnya maka akan semakin besar huruf/kata/kalimat yang dihasilkan.

6 tag heading diantaranya
<h1>...</h1>
<h2>...</h2>
<h3>...</h3>
<h4>...</h4>
<h5>...</h5>
<h6>...</h6>

H1 biasanya digunakan untuk judul, h2 dan seterusnya digunakan untuk subjudul dan isi konten.

Ada yang masih bingung ya? Ok, biar lebih paham penulis kasih contohnya.

Dan hasilnya:

 Untuk pembahasan heading saya rasa cukup sekian. Apabila masih ada yang belum paham bisa tanya di kolom comment

Sepandai-pandai katak melompat pasti jatuh pula. Tiada kesuksesan yang diraih tanpa rintangan.

~@enjie_press

Perkenalan Diri

Sedikit Penjabaran Tentang Penulis

Ayu Ratnaningsih adalah nama lengkap dari penulis yang merupakan seorang anak yang dilahirkan di Blitar, sebuah kota patria yang dimana makam Presiden Pertama dilahirkan dan dimakamkan. 

Saat ini hidup, tinggal dan bekerja sebagai pelajar karena usia saat ini masih 17 tahun. Terus belajar dan belajar adalah suatu tanggungjawab yang harus dilakukan semua pelajar tak terkecuali dengan saya sendiri. Penulis berkeinginan suatu saat nanti bisa menjadi web development. Saya sangat suka dalam hal pengcodingan. Meski banyak tantangan namun tetap saya lakukan demi meraih kegemerlapan dimasa depan. Suatu visi yang tetap saya pegang teguh yaitu 

"Ada tekad, berkemauan keras dan tujuan yang jelas."

Saya rasa sekian pengenalan diri dari saya. Semoga bermanfaat.