Tunggu Sebentar...

10/02/2017

Style Pada Multimedia

Style Pada Multimedia
Style CSS dan HTML Pada Multimedia

AA Sciences, Style Pada Multimedia
- Usai kalian telah mengetahuinya kalian telah mempelajari terkait style pada teks, alhamdulillah di kali ini kalian akan diarahkan yakni metode pembelajaran tentang style pada multimedia yang akan AA Sciences kupas tuntas kali ini.

Telah tahu bukan tentunya kalian para sobat AA Sciences dari cascading style sheet (CSS) dapat juga dijabarkan pada elemen-elemen dari HTML multimedia, yang mana bagian dari elemen multimedia yakni seperti, diantaranya video, gambar, audio dan jenis file lainnya.

Agar kalian ingin lebih mengetahui serta memperdalam ilmu pengetahuan terkait style-style apa saja dalam multimedia elemen, mari simak penjelasan style pada multimedia macam-macamnya di bawah ini:

1. Penggunaan Cascading Style Sheet (CSS) pada Tampilan Gambar


Cascading Style Sheet (CSS) tentunya berperan penting dalam bertugas untuk menyajikan suatu informasi dalam bentuk visual agar menjadi kerap terlihat lebih baik, lebih optimal dibanding agar dari segi sisi penulisan dan kerap lebih disukai oleh mesin pencari (search engine).

Cascading Style Sheet (CSS) tentunya dapat diterapkan dalam kurun yang hampir tertuju pada semua objek yang ingin disisipkan dalam bentuk tag HTML baik dalam bentuk tulisan, tabel serta gambar maupun objek lainnya sekalipun.

Untuk memberi pengaturan dalam penggunaan gambar pada umumnya dapat diterapkan secara inline, contoh dari pemanggilan gambar dalam bentuk sederhananya adakah seperti berikut:

<img src='nama-file-gambar-disini' width='lebar-gambar-disini' height='tinggi-gambar-disini' alt='kata-kunci-gambar-disini' title='judul-gambar-disini' border='garis-tebal-disini' />

Selain dengan cara simpel/inline diatas dalam HTML sederhana, dapat pula tentunya untuk penambahan CSS nya yang dapat diterapkan secara embed ataupun diluar/eksternal dalam CSS.

Sebagai contoh, berikut AA Sciences akan memberikan contoh yang mana terdapat 3 gambar yang hendak diberi style/gaya yang mana ketiga gambar kali ini akan dibuat serupa yakni 200 x 200 serta jarak nargin atas dari gambarnya adalah berukuran 20px, sehingga antar gambar tersebut akan terlihat dibantu dengan jarak.

Penerapan atau penulisan dalam bentuk HTML serta CSS terkait 3 gambar yang akan di tampilkan, dalam bentuk HTML dan CSS nya adalah sebagai berikut:

<! DOCTYPE HTML>
<html>
<head>
<title> Contoh Judul Gambar CSS </title>
<style>
 Img {Margin-top: 20px;
 Float: left;
 Clear: both:
 width: 200px;
 height: 200px;

</style>
</head>
<body>
Contoh Gambar CSS pada Image (Gambar) </br>
<img src='brokoli.jpg'>
<img src='tomat.jpg'>
<img src='paprika.jpg'>

</body>
</html>

2. Penggunaan Cascading Style Sheet (CSS) pada Tampilan Gambar untuk Latar Belakang/Background


Seperti dalam penambahan dari warna latar, penambahan gambar pada background/latar belakang pun dapat pula dilakukan terkait menggunakan dua macam jenis properti, yakni background/latar belakang atau background-image/gambar latar belakang.

Nilai yang hendak diisikan untuk properti-properti ini adalah URL dari gambar, yang mana relatif lebih dalam suatu file Cascading Style Sheet (CSS), yang mana serupa ketika dalam penambahan suatu font. Sebagai contoh, scriptnya seperti berikut ini.

div { background: url ('latar.png');
background-image: url ('latar.png');}

Kesalahan tersebut telah bekerja, lalu simpan serta jalankan kode. Namun, dari penambahan gambar tersebut dengan cara diatas tentunya akan memberikan masalah jika ketika ukuran gambar tersebut tidak serupa dengan ukuran-ukuran elemen.

Gambar juga akan ditampilkan berulangkali, dengan secara horizontal bahkan secara vertikal sekalipun, jika ukuran elemen tersebut lebih besar dari ukuran gambar.

Jika kalian ingin menerapkan gambar dalam bentuk campuran dala HTML serta CSS, maka kalian dapat ikuti seperti scriptnya dibawah ini:

<html>
<head>
<title> Latar Belakang Gambar </title>
<style type='text/css'>
#awal {background-image:url (kiwi.jpg);height:600px;width:800px;}
</style>
</head>
<body>
<div id='awal'>
</div>

</body>
</html>

Gambar sebenarnya yang ingin kali ini AA Sciences terapkan ialah sebagai backgroundnya berukuran dengan 60px x 60px:

Lantaran gambar sebenarnya dalam gambar tersebut adalah 60px x 60px sedangkan ukuran dalam background yang diinginkannya adalah 600px x 800px maka hasil dari gambar akan ditampilkan berulang-ulang sampai tercukupi dalam ukuran latar belakang 600px x 800px adalah seperti ini hasilnya.

Adakalanya pula dalam perulangan tampilan dari gambar otomatis tersebut tidak diinginkan. Maka dari itu, agar untuk terlihat dapat menggunakan properti dalam background-repeat dalam mengatur bagaimana cara agar perulangan kode ingin diberlakukan.

Tercakup 4 nilai yang umumnya yang dapat dimasukan dalam properti background-repeat, yakni no-repeat, repeat, repeat-y, dan repeat-x.

Seperti yang tertera dalam jenis namanya yakni no-repeat yang mana berarti menghilangkan perulangan, jika repeat adalah memberikan perulangan, lalu jika repeat-x yakni memberikan perulangan hanya pada sumbu x saja (horizontal), dan yang terakhir yakni repeat-y adalah atribut yang memberikan perulangan tetapi hanya pada sumbu y nya saja (vertikal).

Listing dalam kode CSS nya dalam hendak menghilangkan perulangan pada sumbu x serta sumbu y, sehingga atribut nama dari (kiwi.jpg) diatas, jika ingin ditampilkan hanya akan ditampilkan satu kali saja, maka penggunaaan nya adalah sebagai berikut:

#awal {background-image:url (kiwi.jpg);
background-repeat: no-repeat;
height:600px;width:800px;}

3. Penggunaan Cascading Style Sheet (CSS) pada Tampilan untuk Menyisipkan Gambar


Biasanya ketika hendak membuat halaman website, tentunya bukan kalian melihat pasti adanya suatu artikel yang mana dalam artikel tersebut pasti terdapat suatu gambar, yang mana gambar ini bekerja sebagai pemberi keindahan dalam suatu artikel untuk thumbnail nya.

Pada umumnya gambar dapat dipasang langsung dengan mode HTML, tetapi jika terlihat agar sedikit rapih, maka penggunaan CSS dalam gambar agar selalu terlihat menarik, maka script yang digunakan adalah sebagai berikut.

<html>
<head>
<title> Menyisipkan Gambar dalam bentuk CSS </title>
<style>
 #garisatas1 {background-image: url(kiwi.jpg);
                 background-repeat: no-repeat;
                 background-position: left top;
                 padding-top: 70px;
                 margin-bottom: 50px;}
 #garisatas2 {background-image: url(kiwi.jpg);
                 background-repeat: no-repeat;
                 background-position: left top;
                 padding-top: 70px;

</style>
</head>
<body>
<div id='garisatas1'> Cascading Style Sheet (CSS) yang kerap umum digunakan pada masa sekarang ini yakni adalah CSS3 yang mana ramai dilibatkan dalam suatu dokumen halaman website. Kegunaanya nya pun beragam yakni untuk memformat suatu halaman dokumen, yang mana sebagai contoh dalam pemberian warna teks atau bahkan warna dari latar belakang pun dapat diatur melalui Cascading Style Sheet (CSS) sekalipun. </div>
<div id='garisatas2'> Namun, kegunaan dari Cascading Style Sheet (CSS) tentu saja tidaklah hanya itu saja, melainkan banyak hal lainnya lagi. </div>

Maka dari hasil penerapan gambar yang telah diketik diatas akan menjadi hasil seperti berikut.

Menyisipkan Gambar dalam bentuk CSS
Cascading Style Sheet (CSS) yang kerap umum digunakan pada masa sekarang ini yakni adalah CSS3 yang mana ramai dilibatkan dalam suatu dokumen halaman website. Kegunaanya nya pun beragam yakni untuk memformat suatu halaman dokumen, yang mana sebagai contoh dalam pemberian warna teks atau bahkan warna dari latar belakang pun dapat diatur melalui Cascading Style Sheet (CSS) sekalipun.
Namun, kegunaan dari Cascading Style Sheet (CSS) tentu saja tidaklah hanya itu saja, melainkan banyak hal lainnya lagi.

4. Penggunaan Cascading Style Sheet (CSS) pada Tampilan Video


Sementara untuk penerapan Cascading Style Sheet (CSS) dalam elemen video dapat juga diterapkan, terutama kali ini secara inline terlebih dahulu, berikut contoh scriptnya.

<html>
<head>
<title> Menyisipkan Video Inline dalam bentuk HTML dan CSS </title>
</head>
<body>
<video controls='controls' style='display:block; margin:0 auto; width:400px; height:400;>
<source src='movie.mp4' type='video/mp4' />
 Browser kalian sedang OFFLINE jadi tidak dapat bekerja videonya atau servernya.
</video>
</body>

Jika Listing program seperti diatas dijalankan, maka otomatis akan menghasilkan video yang akan ditampilkan yang mana tampil pada posisi tengah ('center') dengan tercakup atribut dari width:400px dan height:400px yang serupa, maka hasilnya seperti gambar dibawah ini.
Menyisipkan Video Inline dalam bentuk HTML dan CSS

5. Penggunaan Cascading Style Sheet (CSS) pada Tampilan Video Embed dari Youtube


Bahkan tidak hanya dari kinerja OFFLINE saja loh sobat AA Sciences, ternyata kalian pun dapat menerapkan dalam video langsung dari fitur ONLINE yang di iframe/embed kan pada link youtube.com, dan web video lainnya.

Sebagai contoh, berikut AA Sciences akan memberikan penerapan spekulasi dalam CSS video secara embed nya agar video langsung dari youtube.com dapat dikelola. Berikut scriptnya.

<html>
<head>
<title> Menyisipkan Video dari YOUTUBE dalam bentuk HTML dan CSS </title>
<style>
.videoWrapper {position: relative;
                    padding-bottom: 56.25%;
                    padding-top: 25px;
                    height: 0;
.videoWrapper iframe {position: absolute;
                              top: 0;
                              left: 0;
                              width: 100%;
                              height: 100%; }

</style>
</head>
<body>
<div class='videoWrapper'>
<!-- COPAS LINKNYA DARI VIDEO YOUTUBE --!>
<iframe width='560' height='349' src='https://youtu.be/ZsTwm-77UCM' frameborder='0' allowfullscreen></iframe>
</div>
</body>
</html>

Maka jika listing kode HTML dan CSS diatas dijalankan dalam keadaan terhubung pada koneksi data internet maka secara otomatis video dari youtube yang telah dimasukkan dalam link nya telah menghasilkan videonya sebagai berikut.

Menyisipkan Video dari YOUTUBE dalam bentuk HTML dan CSS
<!-- COPAS LINKNYA DARI VIDEO YOUTUBE --!>

8/05/2017

Istriku Engkau Ratu Di Hatiku - Syubbanul Muslimin (Lirik)

AA Sciences - Istriku Engkau Ratu Di Hatiku  Syubbanul Muslimin (Lirik)Syubbanul Muslimin merupakan sosok suatu Majelis Ta'lim yang terkenal dengan mana kerap tampil  dengan membawakan lantunan sholawatnya nya yang kerap membuat para pendengar umumnya turut merindung bilamana MT. Syubbanul Muslimin telah melantunkan acara ratib, dzikir dan sholawat yang dilantunkan.

Majelis Ta'alim Syubbanul Muslimin pun memilki memiliki ramai member dalam membern tersebut diantaranya yang kerap viral yakni sosok GUS AZMI. Ya Gus Azmi adalah sosok pria dari ponpes yang biasa kerap melantunkan sholawat dari Majelis Ta'alim Syubbanul Muslimin.

Bersama Majelis Ta'alim Syubbanul Muslimin lah yang kerap Gus Azmi dalam acara-acara dalam bersholawat.

Oke langsung saja di kali ini AA Sciences akan memberikan lirik, yang mana lirik sholawat ini yang dibawakan oleh Majelis Ta'alim Syubbanul Muslimin ft. GUS AZMI, DKK yang berjudul Istriku Engkau Ratu Di Hatiku. Berikut Lirik Sholawat Istriku Engkau Ratu Di Hatiku - Syubbanul Muslimin (mp3 & video).



Zaujati/Engkau Ratu Di Hatiku Versi Indonesia Syubbanul Muslimin

#Cinta ini padamu suci.. Bagai embun di pagi hari
Tak peduli apa yang kan terjadi.. Engkau Tetap ku cintai
Istriku.. Engkau Ratu di hatiku..

#

Engkau istriku Tercinta.. Semoga Di Panjangkan Umur
Tetap Dalam Satu Cinta.. Bersama Selalu Bersyukur

Harapan ku Hanya satu.. Setia mu kepadaku
Dukunglah Setiap Langkahku.. Bahagia Disampingku

Engkau Istri Yang Sholehah.. Yang Selalu Banggakan
Kemana Kaki Melangkah.. Doamu Engkau Sertakan
Istriku.. Engkau Ratu di hatiku..

#

Resah dan gelisah di hati.. Bercampur jadi satu
Pabila dirimu sedang.. Tak lagi ada di samping ku

Ku hanya bisa berdoa.. Kepada Allah ta'ala
Semoga dirimu tetap.. Didalam perlindungan-Nya

Keringatku demi cinta.. Kasihku Untukmu Saja
Bersamamu ku bahagia.. Walau hidup sederhana
2x

#

Engkau istri yang halal.. Janganlah tergoda syaitan
Walaupun banyak rayuan.. Yang s'lalu jadi rintangan

Harapan ku Hanya satu.. Setia mu kepadaku
Susah senang ku kan selalu.. Bersama dengan dirimu

Engkaulah seorang Istri.. Yang selalu aku banggakan
Hariku siang dan malam.. Hanyalah untukmu sayang

#

Resah dan gelisah di hati.. Bercampur jadi satu
Pabila dirimu sedang.. Tak lagi ada di samping ku

Ku hanya bisa berdoa.. Kepada Allah ta'ala
Semoga dirimu tetap.. Didalam perlindungan-Nya

Keringatku demi cinta.. Kasihku Untukmu Saja
Bersamamu ku bahagia.. Walau hidup sederhana
2x

#
DEMO   DOWNLOAD  
FACEBOOK UNDUHKUY

Habib Syech - Allahu Allah Lirik Sholawat

AA Sciences, LIRIK TEKS SHOLAWAT ALLAHU ALLAH | HABIB SYECH BIN ABDUL QODIR ASSEGAF VOLUME 1 - Habib Syech merupakan sosok Habaib yang terkenal dengan lantunan sholawatnya nya yang kerap membuat para pendengar umumnya turut merundung bilamana Habib Syech melantunkan sholawat yang dilantunkannya.

Habib Syech pun memilki nama lengkap yakni Habib Syech bin Abdul Qadir Assegaf, beliau bertempatan tinggal di kota Solo.

Bersama Majelis Ta'lim Ahbabul Musthofa lah yang kerap Habib Syech bersholawat dalam acara-acara dalam bersholawat.

Oke langsung saja di kali ini AA Sciences akan memberikan lirik, yang mana lirik sholawat ini yang dibawakan oleh Habib Syech bin Abdul Qadir Assegaf ft. Ahbabul Musthofa yang berjudul Allahu Allah. Berikut Lirik Sholawat Habib Syech - Allahu Allah


Qod kafani ilmu robbi
min su-aali wakhtiyaari 

fadu’aii wabtihaali
syahidullil biftiqoori

Allahu Allahu Allah (3x)
Yaa Robbi Yaa Khoiro muunii

falihaadzaassirri ad’uu
fi yasaari wa ‘asaari
ana ‘abduu shoro fakhri
dhimna faqri wadhthiroori

Allahu Allahu Allah (3x)
Yaa Robbi Yaa Khoiro muunii

yaa ilaahi wa maliiki
anta ta’lam kaifa haali 

wa bima qod halla qolbi
minhumu min wasytigholi

Allahu Allahu Allah (3x)
Yaa Robbi Yaa Khoiro muunii

yaa sarii’al ghoutsi ghoutsan
minka yudrikna sarii’an 

yahzimul ‘usro wa ya’tii
billadzi arju jumii’an

Allahu Allahu Allah (3x)
Yaa Robbi Yaa Khoiro muunii

ya qoriiban ya mujiiban
yaa ‘aliiman yaa samii’an 

qod tahaqqoqtu bi’ajzi
wa khudhu’ii wal kisaari

Allahu Allahu Allah (3x)
Yaa Robbi Yaa Khoiro muunii

lam azal bilbaabi waqfi
farhamna robbi wuquufi 

wabiwaadil fadhli ‘aakif
fa-adim robbi ‘ukuufi

Allahu Allahu Allah (3x)
Yaa Robbi Yaa Khoiro muunii

haajatan finnafsi yaa rob
faqdhiha yaa khoiro qoodhii 

wa arrih sirri wa qolbii
min nadzhoohaa wasy-syiiwadzhii

Allahu Allahu Allah (3x)
Yaa Robbi Yaa Khoiro muunii

walhana walbasytu haalii
wasyi'aarii wa diisyaarii 

qod kafani i’lmu robbii
min su-aali wakhtiyaari


Allahu Allahu Allah (3x)
Yaa Robbi Yaa Khoiro muunii

8/02/2017

8 Pengaturan CSS Pada Style Teks

AA Sciences, CSS, Style Pada Teks, 8 Penggunaan CSS Pada Style Teks, 8 Pengaturan CSS Pada Style Teks
 - Alhamdulillah sebelumnya kalian terutama sobat AA Sciences telah mengetahui tentunya yakni Anatomi dan Cara Kerja Cascading Style Sheet. Lalu kembali lagi Alhamdulillah AA Sciences akan membagikan sedikit ilmu yang mana kalian akan di bimbing pembelajaran dari style pada teks/script yang mana di dalam nya fitur dari CSS akan bertanggung jawab penuh.

Tentunya jika kalian terutama sobat AA Sciences ingin memahami pengetahuan terkait style pada teks, berikut AA Sciences akan berbaginya.

Pada umumnya agar hendak membuat website yang ingin tampil terlihat lebih menarik, mudah mengubah mengubah tampilan website, tentunya kinerja tersebut harus didasarkan pada pemahaman CSS nya terlebih dahulu dalam kemasan CSS.

Dalam pengaturan style teks tersebut umumnya meliputi beragam rangkaian property, diantaranya yakni perwarnaan, spasi, jenis font, style font, color font, dan hal lain sebagainya yang tentunya dapat dikondisikan dalam kemasan CSS.

Agar kalian ingin mengetahui nya lebih detail disini AA Sciences akan menjelaskan dari properti dan keterangan nya dari kemasan CSS dalam bentuk tabel, berikut di bawah ini.

Agar kalian ingin mengetahui nya lebih detail disini AA Sciences akan menjelaskan dari properti dan keterangan nya dari kemasan CSS dalam bentuk tabel, berikut di bawah ini.


Properti Keterangan
Color  Mengatur Warna pada teks/script yang hendak dituju.
Direction  Menentukan arah ingin ditentukannya dalam tulisan/teks/script terkait.
Letter-spacing Menambah atau mengurangi property dari spasi antar karakter dalam suatu teks.
Line-height Mengatur tinggi barisnya suatu teks.
Text-align Bertugas memberi rata atau batas teks secara horizontal.
Text-decoration Menentukan hiasan/dekorasi pada teks.
Text-indent Bertugas mengatur jarak inden dalam baris pertama dalam teks-blok.
Text-shadow Bertugas menentukan efek dari bayangan pada suatu teks.
Text-transform Bertugas mengatur dari teks kecil hingga besar.
Unicode-bidi  Bertugas mengeset unicode.
Vertical-align Mengatur dari batas teks secara horizontal.
White-space Mengatur dari penulisan white-space pada suatu element.
Word-spacing Menambahkan atau mengurangi spasi antar kata-kata dalam suatu teks.

Agar kalian ingin mengetahui nya lebih detail disini AA Sciences akan menjelaskan dari properti dan keterangan nya dari kemasan CSS dalam bentuk tabel, berikut di bawah ini.

Agar kalian ingin mengetahui nya lebih detail disini AA Sciences akan menjelaskan dari properti dan keterangan nya dari kemasan CSS dalam bentuk tabel, berikut di bawah ini.


Properti Keterangan
Color  Mengatur Warna pada teks/script yang hendak dituju.
Direction  Menentukan arah ingin ditentukannya dalam tulisan/teks/script terkait.
Letter-spacing Menambah atau mengurangi property dari spasi antar karakter dalam suatu teks.
Line-height Mengatur tinggi barisnya suatu teks.
Text-align Bertugas memberi rata atau batas teks secara horizontal.
Text-decoration Menentukan hiasan/dekorasi pada teks.
Text-indent Bertugas mengatur jarak inden dalam baris pertama dalam teks-blok.
Text-shadow Bertugas menentukan efek dari bayangan pada suatu teks.
Text-transform Bertugas mengatur dari teks kecil hingga besar.
Unicode-bidi  Bertugas mengeset unicode.
Vertical-align Mengatur dari batas teks secara horizontal.
White-space Mengatur dari penulisan white-space pada suatu element.
Word-spacing Menambahkan atau mengurangi spasi antar kata-kata dalam suatu teks.


Berikut 8 Pengaturan Style pada teks dalam dokumen CSS :


1. Pengaturan Color/Warna Pada Teks


Dalam dokumen CSS tentunya dapat menerapkan dalam mengatur warna/color dalam suatu teks/script. Pengaturan warna dalam teks dengan CSS bisa dimulai dengan menggunakan beberapa nilai jenis warna dimana tercakup 3 jenis penerapan nya, seperti berikut.

- Nilai HEX -> Contoh, "#30cc91"
- Nilai RGB -> Contoh, "rgb(251,55)"
- Nilai WARNA LIVE/LANGSUNG -> Contoh, "blue/red/black/white"

Format dalam penulisan untuk pemberian warna pada teks tersebut, didefinisikan menggunakan CSS seperti contoh berikut:

Selector {color:nilai warna diletakan disini"}

atau agar lebih jelas lagi contoh penerapan nya sebagai berikut untuk 3 jenis style diatas tadi:

- .kotak {color:"#30cc91"}
- .kotak {color:"rgb(250,55)"}
- .kotak {color:"pink"}

2. Pengaturan Spasi Word Letter Spacing/Antar Karakter


Salah satu definisi gaya dari style CSS yakni komponen letter-spacing nya, yang mana letter-spacing berfungsi sebagai alat yang dipergunakan untuk memberikan suatu jarak (spasi) dalam karakter atau huruf terkait.

Pada umumnya format dari penulisan CSS untuk memberi settingan jarak (spasi) antar karakternya atau hurufnya adalah seperti berikut ini :

Selector: {letter-spacing: nilai spasi;}

atau agar lebih jelas lagi contoh penerapan nya sebagai berikut untuk penerapan dari letter-spacing nya :

selector: {letter-spacing: 12px;}

3. Pengaturan Bentuk-bentuk dalam Teks Decoration/Dekorasi


Pengaturan dalam bentuk teks yang menggunakan property teks dekorasi atau text-decoration bertujuan untuk membatu mengatur atau menghapusnya suatu dekorasi dalam suatu teks.

Format penerapan dari dekorasi teks atau text-decoration pada umumnya adalah seperti berikut :

selector {text-decoration: nilai text-decoration}

atau agar lebih jelas lagi contoh penerapan nya sebagai berikut untuk penerapan dari text-decoration nya :

.kotak {text-decoration: 20px text-decoration}

4. Pengaturan Spasi Word Spacing/Antar Kata


Salah satu style pada CSS yakni adalah word-spacing yang mana umum dipergunakan dalam rangka memberikan spasi (jarak) pada beberapa kata-kata atau huruf.

Format penerapan dari antar kata atau word spacing pada umumnya adalah seperti berikut :

selector: {word-spacing: nilai spasi;}

atau agar lebih jelas lagi contoh penerapan nya sebagai berikut untuk penerapan dari word spacing nya :

selector: {word-spacing: 20px spasi;}

5. Pengaturan Jarak Text Indent/Indentasi Paragraf


Text-indent bertugas sebagai alat yang mengatur dari segi jarak indent dari baris awal dalam suatu teks blok, sehingga teks pada baris-baris awal itu nampak terlihat lebih menjorok ke dalam, dibandingkan teks baris yang lainnya.

Format penerapan dari Indentasi Paragraf atau Text Indent pada umumnya adalah seperti berikut :

selector: {text-indent: nilai indent}

Format penerapan dari Indentasi Paragraf atau Text Indent pada umumnya adalah seperti berikut :

.kotak: {text-indent: 20px indent}

6. Pengaturan dari Huruf Besar dan Huruf Kecil dalam Sebuah Teks Transfrom/Text Transform


Teks Transform atau Text Transform bertugas sebagai alat yang dipergunakan untuk menentukan suatu huruf baik itu besar dan huruf yang kecil dala suatu teks/text.

Format penerapan dari Teks Transfrom atau Text Transform pada umumnya adalah seperti berikut :

selector: {text-transform: nilai text-transform}

atau agar lebih jelas lagi contoh penerapan nya sebagai berikut untuk penerapan dari Teks Transfrom atau Text Transform nya:

selector: {text-transform: 20px text-transform}

7. Pengaturan Efek Bayangan/Shadow dalam Text Bayangan/Shadow


Teks bayangan atau Text Shadow berfungsi sebagai alat yang dipergunakan untuk memberikan suatu bayangan pada sebuah teks.

Format penerapan dari Efek Bayangan atau Text Bayangan pada umumnya adalah seperti berikut :

selector {text-shadow: koordinatx koordinatY nilaiwarnateksbayangandisini;}

atau agar lebih jelas lagi contoh penerapan nya sebagai berikut untuk penerapan dari Text Bayangan :

selector {text-shadow: koordinatx koordinatY #30cc91;}

8. Pengaturan Teks Rata/Text Alignment


Dan yang terakhir yakni text-alignment, property dari text-align ini berfungsi sebagai alat yang mengatur dari jenis rata pada suatu teks terutama teks bertype horizontal.

Teks rata dianataranya dapat ditulis seperti rata kanan, rata kiri, rata tengah, rata sejajar, dan bahkan rata kanan kiri seklaipun.

Format penerapan dari Teks Rata/Text Alignment pada umumnya adalah seperti berikut :

selector {text-align: nilai text-align;}

atau agar lebih jelas lagi contoh penerapan nya sebagai berikut untuk penerapan dari Teks Rata/Text Alignment :

.kotak {text-align: 20px text-align;}

Tag :

CSS, Style CSS, Style Pada Teks, Style Pada CSS, Gaya CSS, Gaya Teks, Style Pada Teks, Style Pada CSS, Style Teks, Style CSS, pengaturan teks gaya style, penggunaan style teks, penggunaan style teks css, 8 pengaturan CSS, 8 Penggunaan css, kegunaan css

7/30/2017

Cara Kerja dan Anatomi Cascading Style Sheet (CSS)

AA Scienes, Cara Kerja dan Anatomi Cascading Style Sheet (CSS)Tahukah kalian wahai para sobat setia AA Sciences apa itu sebenarnya yang dimaksud dengan Cascading Style Sheet (CSS). Dikali ini Alhamdulillah AA Sciences akan berbagi tentang cara kerja dan anatomi dari Cascading Style Sheet atau biasa yang kerap disebut dengan CSS.

Berikut AA Sciences akan share sedikit materi yakni cara kerja dari anatomi cascading style sheet atau CSS, tentunya hal ini akan menambah sedikit pengetahuan kalian dalam membenah suatu website dalam bentuk style-style nya.

1. Definisi dan Fungsi Cascading Style Sheet (CSS)


Cascading Style Sheet atau yang umum kita dengar dengan istilah CSS adalah salah satu style/gaya bentuk dalam dokumen website yang mana bertujuan dalam rangka mengatur gaya dalam suatu tampilan website.

CSS bukanlah hanya sekedar bahasa pemrograman saja, melainkan sebuah sekelompok aturan yang mana berpotensi dalam mengendalikan beberapa suatu komponen dalam website sehingga akan terlihat suatu website semakin lengkap di dalam kerangka nya, baik itu seperti seragamnya, serta mudahnya dalam memberi settingan ketika hendak mendesain suatu halaman website.

Cascading Style Sheet (CSS) pula merupakan dokumen yang merinci dalam gaya sekitar pembuatan serta pegaturan dalam dokumen website diantaranya seperti: style font, jarak, warna, jenis font, bentuk, type dan hal style lainnya yang mana pada jenis HTML tidak work bila digunakan.

Sehingga, Cascading Style Sheet (CSS) dapat dinyatakan bahwa CSS adalah suatu dokumen yang berjalan dalam pengembangan dari dokumen HTML dalam hal format halaman website tentunya.

Terciptanya dokumen CSS, tentunya memiliki tugas penting untuk membantu kita dalam mempermudah mengatur serta memilih suatu type website sehingga agar website tersebut tampil maksimal dengan bertujuan memikatnya para konsumen yang hijrah pada website kalian dengan adanya style dokumen CSS.

Lantas, mengapa CSS pada umumnya membuat suatu website selalu tampil terlihat lebih terkemuka atau lebih mudah penerapannya?

Semua ini dikarenakan Cascading Style Sheet atau CSS dapat memisahkan antara bagian mana saja yakni presentasi dan isi dalam suatu website yang hendak dibuat tersebut.

Tidak hanya itu juga tentunya, bahkan penggunaan dari CSS dalam penerapan suatu website akan memberikan beberapa manfaat CSS seperti berikut ini :

- Kode/Script HTML akan menjadi lebih ringan serta sederhana dan akan lebih mudah diatur.
-  Ukuran file akan menjadi lebih ringan sehingga proses/loading suatu file atau halaman menjadi cepat.
- Mudah dalam mengubah suatu tampilan, hanya dengan mengubah file CSS saja.
- Dapat berkolaborasi dengan dokumen berbasis Javascript serta merupakan pasangan setia dari dokumen HTML.
- Dapat digunakan dalam hampir seluruh jenis website yang online maupun offline.

2.  Anatomi dari Cascading Style Sheet (CSS)


Bagian-bagian yang paling utama dalam sebuah CSS itu terdapat tiga bagian yakni: selector, value dan property. Jika dalam dokumen HTML biasa dikenal terdapat tag-tag yang mana menyusun suatu dokumen HTML, maka dalam dokumen CSS pun serupa pula dikenal dengan sebutan selector.

Berikut AA Sciences akan memberikan Bagian CSS serta keterangan nya dalam bentuk tabel.

Bagian CSS
Keterangan
Selector 
- Nama-nama yang dinamakan dalam style-style yang berbeda, baik itu jenis style internal bahkan style eksternal.
- Bagian elemen HTML yang akan ditunjuki dalam rangka untuk mengatur jenis style.
- Dapat berupa atribut pemanggil class dan ID.
Property 
- Aturan dalam CSS bertugas untuk merubah selector yang hendak dipilih
- Property yang memiliki value yang diartikan juga dengan value
- Properties yang didalamnya tanda { }
Value 
- Merupakan nilai dari property dokumen Cascading Style Sheet (CSS) atau dokumen lainnya,


Cascading Style Sheet (CSS) tentunya memiliki aturan tersendiri terutama dalam pengunaan penulisan sintaks. Penulisan sintaks tercakup 3 bagian jenisnya yakni: selector, value dan property.

Sebagai contoh serta penulisan dari format penulisan CSS nya biasa kerap dituliskan sebagai berikut:

Selector{ Property : value;}

Sebagai contoh agar lebih jelas lagi, berikut sedikit penggunaan dari selector, property serta value untuk mengatur gaya/style dalam suatu form atau dokumen website (HTML/CSS):

Form{ align-left:10}

Dari example penggunaan selector, property serta value diatas tentunya terdapat keterangan-keterangan dalam form atribut CSS diatas, berikut keterangan nya:

- Form: Selector yang hendak disesuaikan dalam penggunaan gaya/style nya
- align-left: property yang bertugas sebagai jarak rata, yang mana sebuah teks diawali dengan rata kiri (align left)
- 10: nilai property dari align-left (rata kiri) yang usai dibuat tersebut.

Tentunya dengan adanya Cascading Style Sheet (CSS) hal itu memungkinkan kita agar lebih untuk menampilkan suatu halaman yang serupa dalam format yang berbeda-beda.

3. Cara Kerja Cascading Style Sheet (CSS)


Cara kerja Cascading Style Sheet (CSS) diawali ketika hendak deklarasi style yang ingin digunakan dengan menulis style/gaya (selector, ID, serta class), maka secara auto pengguna dari style tersebut akan berjalan pada dokumen HTML.

Dengan mengaturnya atribut dari CSS (selector, id dan class), lalu kemudian id dan class tersebut ketika hendak disesuaikan juga diterapkan dalam kode HTML. Dan pada pemrosesan tersebut pula CSS pun dapat bekerja bersamaan dibarengi dalam dokumen HTML untuk menyempurnakan atribut dari dokumen HTML.

Penggunaan style dapat diterapkan pada tag <style>. Pada dalam pasangan tag tersebut, penggunaan style diterapkan dengan dalam bentuk Selector { jenis atribut yang ingin diisi }.

Dalam hal ini, atribut dari selector pun dapat berisi berupa selector berbasis HTML, property, selector ID, atau selector class.

Selector HTML bertugas untuk mendefinisikan style dalam suatu tag HTML. Sebagai contoh dibawah ini akan mencoba menggunakan selectornya yakni berupa selector HTML untuk memunculkan gambar/img, pada umumnya adalah sebagai berikut:

Nama-elemen { jenis atribut yang ingin diisi }: 

Jadi, salah satu contoh penggunaan agar sedikit jelasnya seperti dibawah ini:

Img {Margin-right: 10px; float: center;}

Selektor Class bertugas sebagai atribut kelas yang dapat berlaku dalam sembarang tag HTML, sebagai contoh bentuknya sebagai berikut:

.nama-class { jenis atribut yang ingin diisi }

Jadi, salah satu contoh penggunaan agar sedikit jelasnya seperti dibawah ini:

.kotak { border: 2px; solid: 3px;}

Dan untuk Selector ID bertugas sebagai tools dari CSS yang mendefinisikan style dalam elemen yang memiliki ID yang telah tercantum dalam selector. pemunculan dari Selector ID penulisannya yakni diawali dengan pagar/hashtag (#), contohnya sebagai berikut:

#nama-id { jenis atribut yang ingin diisi }

Jadi, salah satu contoh penggunaan agar sedikit jelasnya seperti dibawah ini:

#aasciences { font-weight: italic; font-size: 2.5em;}

7/28/2017

Text Component Form Web Page

AA Sciences, Text Entry Components (Input Text and Multiline Input Password) on the form Web page  - HTML form usually has a function, which is used as tools for selecting the various types of input that has been provided. The data usually can be inputed in the form of some type of form tags including forms such as text input, textarea, radio button, checbox etc. Of the input forms must have packed in element tags a specific form.

Thank God on this occasion AA Sciences will give enough information related details the components of the existing text on the form page of a website, let's see his comments below in related the components of the page text form in a website.

1. Input Text Component Password


Password Text Input components are fully responsible for entering data in the framework of a type of password/password. Seen from the attribute-attribute, which is set to be the main disesuiakan or was about to given criteria in accordance with which the name of the item to the inherent attribute ' name ', inasmuch as the destination of the file attribute of the form tag, action on which generally is a file server side scripting (PHP) which will serve as an input from taking a form that is based on the attributes of the tag name (attribute ' name ') of the input form related components.

Beside that, in addition to the type of the name attribute, type the attribute of the text input type text, password with attribute ' retype ' which attribute of the password this function in the form tag to insert a key word secrets or a secret password from the user in the form-the form to login/enter in a website/page. Usually also provide password attribute table results with the input with the notation ' o'.

On the use of the format types of umunya element HTML password input text attributes are as follows:
<input type=password name=name>
<input type=password name=name size=size>
<input type=password name=name value=value>
<input type=password name=name maxlength=maxlength>
And how if you want to input the password attribute of the form, in order for the form to work, then the usual given name = pwd with character size in length usually there are 6 characters (maximal).

<!doctype html>
<html>
<head>
<title> Input Your Password </title>
</head>
<body>
<form>
  Password: <input type='password' name='pwd' maxlength='6'>
</form>
</body>
</html>

Following the results of the application of the above atrbut script 6 password:

2. Multiline Text Area Component


Multiline Text Area Component is the area which have in order for a text or writing a new one or it can also be said to be an HTML component, which is used to display some text in the form of a text format.

To accommodate the input text that has a size that is long enough or even plastered with more than a few lines down, of course we try to use the input attribute i.e. a component attribute ' textarea '.

Attribute of a TEXTAREA can usually be put together with form tags in which to make an input that would like to be processed by a file that is served as pemproses as explained in the form tags.

In General, the writing of the General format of a multiline textarea IE like so: < textarea attribute = ' attribute ' >. There are also several attributes of the textarea, i.e. attributes rows, cols, and many other attributes. Similarly, in the document valid HTML5 has provided 6 types of new attributes of the textarea, among them:



AtributeValueDescription
Autofocus
(NEW)
autofocusThe specific area in the text area, where the cursor will automatically set the y leads towards the area when the web page is being processed.
ColsnumberSpecifies The Width Of The Text Area.
DisableddisabledText area that can be changed.
Formform_idSet up a form on an even more text in the area.  
NEW HTML5-Determine the length of the text area.
Maxlength
(NEW)
NumberDetermine the length of characters in the text area.
Placeholder
(NEW)
textGive a brief description about the value in a text area.
ReadonlytextGive a brief description about the value in a text area.
Required
(NEW)
readonlyShould diisinya the text or not.
RowsnumberSpecify the height in text area.
Wrap
(NEW)
hard softDetermines how the text is packaged before the text is submitted.

Description:

NAME = Atribut NAME This is used in order to give it a name in TEXTAREA. Usually these attributes will also be working as an attribute of the tag is very useful if TEXTAREA about to coupled with tag FORM.
COLS Atribut COLS It functions as a was used to determine the width of the TEXTAREA in tag FORM.
READONLY Atribut READONLY function used as writing in order to be listed in the TEXTAREA which usually can only be read and copied but cannot be contested (in the change-change).
DISABLED Atribut DISABLED in order to be used as a functional text that is present on the inside TEXTAREA can't be bother to sue, not to be copied and modified even though.

7/27/2017

Komponen Lengkap Form Input File, Radio, Checkbox, Select dan Datalist

AA Sciences, Komponen Entri Pilihan (Input File, Radio, Checkbox, Select dan Datalist) pada Formulir Halaman Website - Form HTML berfungsi sebagai alat untuk memiliki berbagai macam suatu inputan yang hendak disediakan. Data pun dapat di inputkan/masukkan dalam suatu komponen entri pilihan tertentu.

Diantaranya yakni seperti, input file, radio button, datalist, select serta checxbox. Pada umumnya komponen diatas sering sekali kerap digunakan untuk membuat suatu dokumen dalam jenis form HTML, karena pembuatan nya pun mudah, kalian hanya butuh memasukkan input HTML nya dari form-form terkait.

Nah di kali ini Alhamdulillah AA Sciences akan mengulas apa saja jenis dan macam-macam yang berisi komponen-komponen entri pilihan pada formulir halaman website, yang tentunya mesti kalian ketahui untuk memperdalam ilmu IT kalian.

1. Komponen Input File


Komponen Input File berfungsi sebagai tools yang bertugas sebagai memasukkan suatu data file yang ingin dibutuhkan kedalam suatu sistem website yang ingin dikehendaki

Pada umumnya penerapan penulisan dari komponen input file dalam format tag HTML-nya adalah sebagai berikut.

<input type=file name=nama accept=mime type=list>

Tag dari name ('name=') merupakan tag yang bertugas utama dalam penerapan sebuah nama dalam komponen inputan dari suatu komponen yang diinginkan tersebut.

Karena ketika hendaknya sistem website diproses maka data yang ingin diolah pada dalam pemrogaraman merupakan pengaruh dari suatu berdasarkan nilai (value) dalam nama komponen input nama tersebut.

2. Komponen Radio Button


Pada Form input komponen radio button umumnya hanya terdapat satu jenis pilihan yang terseleksi, tidak dapat digunakan untuk multiple answer atau lebih dari satu.

Pada umumnya penerapan penulisan dari Komponen Radio Button dalam format tag HTML-nya adalah sebagai berikut.

<input type=radio name=nama value=nilai>
<input type=radio name=nama value=nilai checked>

Tag dari name ('name=') merupakan tag yang bertugas utama dalam penerapan sebuah nama dalam komponen inputan dari suatu komponen yang diinginkan tersebut.

Karena ketika hendaknya sistem website diproses maka data yang ingin diolah pada dalam pemrogaraman merupakan pengaruh dari suatu berdasarkan nilai (value) dalam nama komponen input nama tersebut.

3. Komponen Checkbox


Komponen Checkbox bertugas sebagi fungsi yang hampir sama serupa dengan komponen radio button, yakni sama-sama berfungsi sebagai menentukan pilihan. Namun, jika pada checkbox bisa dipergunakan sebagai alat untuk memilih jenis yang digunakan untuk menjawab atau memilih lebih dari satu jawaban (multi answer).

Sehingga dapat pula dkatakan bahwasanya komponen input dari checkbox ini bisa digunakan sebagai masukkan untuk data atau bahkan nilai suatu pilihan dengan memiliki alternatif jawaban yang lebih dari satu jawaban opsi pilihan yang diinginkan.

Pada umunya yang tertera, tampilan dari komponen input checkbox ini memilki suatu ruang kotak dan didalamnya berisi suatu jenis tulisan yakni tulisan centang/contreng.

Komponen Checkbox pun biasa digunakan sebagai alat untuk turut memasukkan data suatu pilihan yang pilihannya beragam baik itu jenis hobby, makanan kesukaan, dan jenis pemilihan lainnya yang ingin dicentang sesuai kemauan.

Pada umumnya penerapan penulisan dari Komponen Checkbox dalam format tag HTML-nya adalah sebagai berikut.

<input type=checkbox name=nama value=nilai>
<input type=checkbox name=nama value=nilai checked>

Biasanya setiap komponen dalam checkbox harus diberikan atribut pemberian nama (name=) yang biasanya mesti berbeda lantaran data yang hendak diolah dalam pemrograman merupakan berdasarkan nilai (value) dari jenis nama komponen terkait input tersebut.

Komponen Checkbox biasanya memiliki nilainya, yakni nilai boolean, yakni true yang berarti benar dalam ingin mencentang atau memilih dan false yang berarti input terkait tidak ingin diipilih atau dicentang.

4. Komponen Select


Komponen Select dengan memiliki type masukkan 'select' adalah  komponen input yang memiliki banyak jenis pilihan beragam nilai dan hanya dapat memungkinkan untuk memilih 1 alternatif opsi entri pilihan saja.

Komponen Select pun memilki istilah lain dari bentuk komponen-komponen yakni adalah combo box atau list (daftar) box. Contoh penggunaan komponen select ini biasanya untuk pemilihan diantaranya memilih jurusan, agama, pekerjaan dan lain sebagainya.

Pada umumnya penerapan penulisan dari Komponen Select format tag HTML-nya adalah sebagai berikut.

<select name='nama'>
  <option value='nilai 1'> nilai 1 </option>
  <option value='nilai 2'> nilai 2 </option>
  <option value='nilai 3'> nilai 3 </option>
  <option value='nilai 4'> nilai 4 </option>
  <option value='nilai 5'> nilai 5 </option>
</select>

Tag dari name ('name=') merupakan tag yang bertugas utama dalam penerapan sebuah nama dalam komponen inputan dari suatu komponen yang diinginkan tersebut.

Karena ketika hendaknya sistem website diproses maka data yang ingin diolah pada dalam pemrogaraman merupakan pengaruh dari suatu berdasarkan nilai (value) dalam nama komponen input nama tersebut.

5. Komponen Datalist


Komponen Datalist adalah elemen tag form yang baru pada jenis dokumen web valid akan HTML5. Datalist berfungsi digunakan untuk membuat daftar list.

Komponen Datalist bekerja aktual dalam memberikan dukungan autocomplete dasar untuk memilih pilihan pada suatu input field. Komponen Datalist merupakan penggabungan antara list serta field input dengan atribut autocomplete.

Ketika hendak membuat pilihan pada datalist, jika terdapat item (huruf) yang serupa dengan data-data pada datalist maka disitu akan muncul item yang pas (fungsi dari autocomplet sebenarnya telah bekerja).

Pada umumnya penerapan penulisan dari Komponen Datalist HTML-nya adalah sebagai berikut.

<input list='daftar'>
<datalist id='ID'>
 <option value='nilai 1'> nilai 1 </option>
  <option value='nilai 2'> nilai 2 </option>
  <option value='nilai 3'> nilai 3 </option>
  <option value='nilai 4'> nilai 4 </option>
  <option value='nilai 5'> nilai 5 </option>
</datalist>