Novietasarie blog: CSS

Tampilkan postingan dengan label CSS. Tampilkan semua postingan

Selasa, 04 September 2018

CSS: CSS3 TRANSISI

Assalamu'alaikum Wr.Wb

A. PENDAHULUAN
      Kali ini saya akan membahas tentang CSS3 TRANSISI apa si yang di maksud dengan CSS3 TRANSISI .

B. LATAR BELAKANG
   Dalam tutorial ini kita akan mengeksplorasi transformasi dan transisi CSS dengan menciptakan sesuatu yang lebih berguna.

C. TUJUAN dan MAKSUD
   Akan membangun satu HTML statis yang akan memanfaatkan transformasi dan transisi dalam slider, ditambah beberapa efek hover menarik.

D. PEMBAHASAN
   Ada dua hal yang harus kita perhatikan agar CSS3 Transisi dapat bekerja dengan baik, yaitu kita harus menentukan properti css dan menentukan durasi efek. Jika nilai durasi tidak ditentukan, maka efek transisi tidak akan berpengaruh atau tidak bekerja, karena nilainya masih default yaitu "0".
Dan cara kerjanya kita menggunakan fitur mouse-over, yaitu transisi bekerja dengan kata lain elemen berubah atau bergerak ketika pointer mouse terletak pada elemen yang kita buat. Dan ketika pointer mouse keluar dari atas elemen, maka bentuk elemen kembali seperti semula.

Elemen yang menggunakan CSS3 Transisi

Berikut kode CSS3 dari contoh diatas :

Kita bisa menambahkan efek transisi menjadi lebih dari satu gaya, misalnya efek transisi kesamping sekaligus kebawah.

Berikut hasilnya :

Efek transisi melebar kesamping sekaligus kebawah

berikut hasilnya :

Efek transisi melebar kesamping sekaligus tinggi menyempit

Berikut contoh lain :

Berikut hasilnya :

Efek transisi membesar dan berputar

Selamat mencoba dan Semoga bermanfaat....

E. KESIMPULAN
Hasilnya bisa di lihat sendiri dengan memcoba membuat CSS3 TRANSISI sendiri, Semoga berhasil.

F. PENUTUP
Jangan lupa luangkan waktu untuk beri komentar ya......Terima kasih.

Wassalamu'alaikm Wr.Wb

Sabtu, 01 September 2018

CSS Desain Web Responsif

Assaamu'alaikum Wr.Wb

A. PENDAHULUAN
Kali ini saya akan shering tentang Desain Web Responsif Viewport.

B. LATAR BELAKANG
Desain Web akan lebih kecil pada ponsel daripada di layar komputer.

C. TUJUAN
Untuk memperbaiki browser pada perangkat-perangkat diperkecil seluruh halaman web agar sesuai layar.

D. PEMBAHASAN
Apa itu Viewport?

viewport adalah daerah terlihat pengguna dari halaman web.

Sebelum tablet dan ponsel, halaman web yang dirancang hanya untuk layar komputer, dan hal itu biasa untuk halaman web memiliki desain statis dan ukuran tetap.

Kemudian, ketika kita mulai berselancar di internet menggunakan tablet dan ponsel, ukuran tetap halaman web terlalu besar untuk muat viewport. Untuk memperbaiki ini, browser pada perangkat-perangkat diperkecil seluruh halaman web agar sesuai layar.

Setting Viewport

Adalah metode untuk membiarkan web desainer mengambil kendali atas viewport, melalui `<meta>`tag.

Kita harus mencakup sebagai berikut <meta> elemen viewport di semua halaman web Anda:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Sebuah <meta> elemen viewport memberikan petunjuk browser pada bagaimana mengontrol dimensi halaman dan scaling.

The width=device-width bagian set lebar halaman untuk mengikuti layar-lebar perangkat (yang akan bervariasi tergantung pada perangkat).

The initial-scale=1.0 bagian menetapkan tingkat zoom awal saat halaman pertama dimuat oleh browser.

Berikut adalah contoh dari halaman web tanpa meta tag viewport, dan halaman web yang sama dengan meta tag viewport:

Tip: Jika Anda browsing halaman ini dengan ponsel atau tablet, Anda dapat mengklik dua link untuk melihat perbedaannya.

Ukuran Konten untuk Viewport The

Pengguna digunakan untuk menggulir situs vertikal pada kedua desktop dan perangkat mobile - tapi tidak horizontal!

Jadi, jika pengguna dipaksa untuk menggulir secara horizontal, atau zoom out, untuk melihat halaman web secara keseluruhan itu menghasilkan pengalaman pengguna yang buruk.

Beberapa aturan tambahan untuk mengikuti:

1. Jangan menggunakan elemen lebar tetap besar - Sebagai contoh, jika gambar ditampilkan pada lebar lebar dari viewport dapat menyebabkan viewport untuk menggulir secara horizontal. Ingatlah untuk menyesuaikan konten ini cocok dalam lebar viewport.

2. Jangan biarkan konten mengandalkan lebar viewport tertentu untuk membuat baik - Sejak dimensi layar dan lebar dalam pixel CSS bervariasi antara perangkat, konten tidak harus bergantung pada lebar viewport tertentu untuk membuat baik.

3. Gunakan CSS permintaan media untuk menerapkan gaya yang berbeda untuk layar kecil dan besar - Mengatur lebar CSS besar mutlak untuk elemen halaman, akan menyebabkan elemen yang terlalu lebar untuk viewport pada perangkat yang lebih kecil. Sebaliknya, pertimbangkan untuk menggunakan nilai lebar relatif, seperti lebar: 100%. Juga, hati-hati menggunakan nilai positioning besar mutlak. Hal itu dapat menyebabkan elemen yang berada di luar viewport pada perangkat kecil.

E. KESIMPULAN
Semoga materi di atas teman-teman bisa memahaminya.

F. REFERENSI
   http://www.w3im.com/id/css/css_rwd_viewport.html

G. PENUTUP
  Sekian dari saya semoga bermanfaat dan sampai jumpa lagi di postingan selanjutnya (",")

   Wassalamu'alaikum Wr.Wb

Jumat, 31 Agustus 2018

Tutorial CSS Tampilan dan Visibilitas

Assalamu'alaikum Wr.Wb

A. PENDAHULUAN

Saya akan membahas tentang Tutorial CSS Tampilan dan Visibilitas.

B. LATAR BELAKANG

Ingin bisa memahaminya lebih jauh lagi tentang Tutorial CSS Tampilan dan Visibilitas.

C. TUJUAN

Agar bisa memahami CSS.

D. PEMBAHASAN

Properti menentukan tampilan dari atau bagaimana elemen ditampilkan, dan properti visibilitas menentukan jika suatu elemen akan terlihat atau disembunyikan.

Menyembunyikan sebuah Elemen – display: none atau visibility: hidden

Menyembunyikan elemen dapat dilakukan dengan menyetel properti layar untuk “none” atau properti visibilitas untuk “tersembunyi”. Namun, perhatikan bahwa kedua metode menghasilkan hasil yang berbeda:

visibility: hidden menyembunyikan elemen, tetapi masih akan mengambil ruang yang sama seperti sebelumnya. Unsur akan disembunyikan, tapi masih mempengaruhi tata letak.

h1.hidden {visibility:hidden;}

display: none menyembunyikan elemen, dan tidak akan mengambil ruang apapun. Unsur akan disembunyikan, dan halaman akan ditampilkan sebagai elemen yang tidak ada:

h1.hidden {display:none;}

Tampilan CSS – Blok dan Elemen Inline

Sebuah elemen blok merupakan elemen yang mengambil lebar penuh yang tersedia, dan memiliki satu baris sebelum dan setelah itu.

Contoh unsur-unsur blok:

<h1>
<p>
<div>

Sebuah elemen inline hanya membutuhkan sebagai lebar sebanyak yang diperlukan, dan tidak memaksa jeda baris.

Contoh elemen inline:

<span>
<a>

Bagaimana Mengubah sebuah Elemen Tampilkan ?

Mengubah elemen inline untuk suatu elemen blok, atau sebaliknya, dapat berguna untuk membuat halaman terlihat dengan cara tertentu, dan masih mengikuti standar web.

Contoh berikut menampilkan daftar item sebagai elemen inline:

li {display:inline;}

Contoh berikut akan menampilkan rentang unsur sebagai unsur-unsur blok:

span {display:block;}

Catatan: Mengubah jenis tampilan elemen perubahan hanya bagaimana elemen ditampilkan, BUKAN apa jenis elemen itu. Sebagai contoh: Sebuah elemen inline diatur untuk menampilkan: blok tidak diperbolehkan untuk memiliki elemen blok bersarang di dalamnya.

Bagaimana untuk menampilkan elemen sebagai elemen inline ?
Contoh ini menunjukkan bagaimana menampilkan elemen sebagai elemen inline.Bagaimana untuk menampilkan elemen sebagai elemen blok ?
Contoh ini menunjukkan bagaimana menampilkan elemen sebagai elemen blok.Cara membuat jatuhnya elemen tabel
Contoh ini menunjukkan bagaimana membuat sebuah keruntuhan elemen tabel.

E. REFERENSI
http://tutorial.belajarweb.net/css/css-tampilan-dan-visibilitas.

E. KESIMPULAN

Semoga teman-teman bisa memahaminya.

F. PENUTUP

Sekian dari saya ma'af kalau penjelasan di atas masih ada yang kurang.

Wassalamu'alaikum Wr.Wb

Kamis, 30 Agustus 2018

PENGERTIAN ID, TAG, DAN CLASS PADA CSS

Assalamu'alaikum Wr.Wb

A. PENDAHULUAN
Malam gays, malam ini saya akan shering tetang ID, TAG, DAN CLASS PADA CSS.

B. LATAR BELAKANG
Ingin mengetahui ID, TAG, DAN CLASS PADA CSS secara langsung.

C. TUJUAN
Agar bisa membuat yang terkait dengan ID, TAG, DAN CLASS PADA CSS.

D. PEMBAHASAN
ID ADALAH:

ID=UNIK,seperti identitas.Dalam satu halaman web tidak boleh ada kode id yang sama.Ingat ID dilambangkan dengan tanda (#)

contoh :

(CSS nya)#header { ISI CSS }
htmlnya<div id='header'>---ISI KONTEN---</div>

Selector ID

Untuk selector ID pada Tag HTML yang akan diberi selector akan diberi nama ID berikut contohnya:

<html>
<head>
<title>Pemakaian Selector ID dan Selector Class pada CSS</title>
<link href=”css/style.css” type=”text/css” rel=”stylesheet”/>
</head>
<body>
<p>
Pemakaian Selector ID dan Selector Class pada CSS
</p>
<p id=”namaid”>Pemakain Selector ID pada CSS akan memakai Atribut #
</p>
</body>
</html>

Setelah menentukan ID nya semisal “namaid” (anda bebas menentukannya) , maka pada file CSS anda menggunakan selector # berikut contohnya :

Pada file CSS :

#namaid{
font-family:Verdana;
color:#3300FF;
font-size:16px;
font-weight:bold;
}

Selector ID

Selector ID mirip dengan class, kita menggunakannya untuk membuat style pada setiap tag html. Untuk membuat id, kita memakai tanda pagar (#) sebelum nama id-nya, berbeda dengan class yang memakai tanda titik (.) sebelum nama class-nya

format :

#nama_id {property:value}

Secara teori ID hanya bisa digunakan sekali saja dalam tag html, artinya jika suatu ID sudah dipakai dalam tag <div> (misal) maka pemakaian ID yang sama dalam tag html yang berikutnya akan diabaikan. Namun pada kenyataannya ID bisa digunakan berulang-ulang dalam tag html yang berbeda maupun yang sama, mirip dengan class generic.

Saya rasa cukup sampai di sini. Saya sengaja tidak akan membuat contoh untuk bahasan ID ini, karena untuk latihan dan untuk mengukur pemahaman sobat semua, maka saya serahkan pembuatan contoh style memakai ID kepada sobat semua… Ayo buat aplikasinya sendiri-sendiri, terserah sobat saja

Semua elemen HTML yang memiliki id sama dengan nama style id yang anda deklarasikan akan memiliki style yang sama sesuai dengan id tersebut.
Id selector didefinisikan dengan tanda "#".
Misalkan pada contoh kode CSS berikut;

#idku{color:red;}

Maka semua elemen HTML yang memiliki id = "idku" akan memiliki style yang sama, yaitu color:red.

Codingku HTML Editori

<!DOCTYPE html>
<html>
<head>
<style>
#idku{ color:red;} /* ini adalah definisi id css */
</style>
</head>
<body>
<p id="idku">Paragraf ini ber-id : idku </p>
<p>Paragraf ini paragraf tanpa id </p>
<p id="idloe">Paragraf ini ber-id : idloe </p>
</body>
</html>

Bila anda perhatikan pada contoh di atas, paragraf dengan id="idloe" tidak memiliki perubahan atau sama dengan paragraf tanpa id karena "idloe" belum di atur di CSS.

dalam penggunaanya, ID (disimbolkan => #) hanya bisa dipanggil/dipakai 1 kali dalam 1

TAG ADALAH:

Tag CSS juga dikenal sebagai elemen atau penyeleksi. Mereka memiliki tata letak dasar yang sangat mirip dengan tag HTML biasa.

Regular HTML tag <tag property="value">
CSS perintah elemen tag {properti: value;}

Salah satu perbedaan utama adalah penggunaan} kurung {bukan <> kurung.

ELEMEN dapat menjadi banderol normal HTML, id, atau kelas.

The PROPERTI dan NILAI adalah bentuk yang sama dengan tag HTML.

tag Elemen
Elemen tag sangat mirip dengan tag HTML biasa. Berikut adalah contoh yang menunjukkan beberapa teks biasa yang diformat dalam warna merah:

Lebih Red Teks

Hasilnya adalah sama. Contoh di atas menunjukkan bagaimana menggunakan inline CSS style, di mana perintah sebenarnya adalah bagian dari tag HTML biasa. Itu akan membantu pada kasus individu, tetapi ketika Anda ingin SEMUA teks di semua wilayah <p> menjadi merah, Anda dapat menggunakan style CSS tertanam. Ini menempatkan perintah CSS ke daerah KEPALA kode.

KEPALA daerah <style type="text/css">
<- P {color: # ff0000;} ->
</ style>
BODY daerah <p> Namun lagi </ p>
tidak di sini
<p> dan lagi </ p> Namun lagi
tidak di sini
dan lagi
Semua teks dalam tag <p> pada halaman tersebut akan terpengaruh oleh perintah CSS, membuat mereka merah. Setiap teks di luar area <p> tidak akan terpengaruh.

Tag <li> adalah awal dari “List Item (Item dari daftar).” Tag <p> adalah untuk “Paragraph (alinea/paragraf).” Dan <a> adalah untuk jangkar “Anchor (jangkar),” yang merupakan hal yang membuat sebuah hyperlink.

 Tag “ul” adalah sebuah daftar dengan sebuah hyperlink per item. Ini akan kita pergunakan sebagai “menu navigasi situs,” yang me-link ke halaman-halaman lain dari halaman Web kita. Sebagai anggapan, seluruh halaman dari situs kita mempunya menu yang serupa.

dalam satu tag html bisa kita tambahkan 2 css selector

contohnya adalah :<li id="comment" class="item">

CLASS ADALAH:

class itu adalah kebalikan dari ID,penggunaannya suka suka/seperlunya.Dalam satu web diperbolehkan ada kode "." yang sama,Class dilambangkan dengan tanda (.)

contohnya

(css nya)

.descriptionwrapper {isi css }

htmlnya

<div class='descriptionwrapper'>isi konten</div>

Selector Class
Selector 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 “.” .
Contoh selector class

komentar

{

text-align:left;

color:red;

}

Pada bagian dokumen web, misalnya akan diterapkan pada paragraph dan pada sebuh div dalam sebuah dokumen web yang sama, dapat dituliskan

<p class="komentar"> Ini adalah paragraph komentar </p>

<div class="komentar">Ini bagian komentar</p>

Bagian mana saja dari sebuah dokumen html yang memanggil class ini, akan memiliki style yang sama, yakni sesuai aturan tersebut, maka tulisan akan berada di tengah dan berwarna merah. Pada kondisi lain, kita menginginkan apabila sebuah class hanya berlaku pada sebuah paragraph saja. Untuk bagian div tidak berlaku. Aturan tersebut bisa kita tuliskan sebagai berikut:

p.komentar {text-align:center;}

Aturan ini akan berlaku bagi setiap paragraph <p> yang memiliki class=”komentar” saja.

Cukup sampai disini tulisan kali ini, berikutnya akan dilanjutkan dengan 3 cara memasukkan dokumen css ke dalam halaman web anda. Kalau boleh mengingatkan, silahkan langsung dicoba yang anda baca hari ini, biar tidak menguap entah kemana dikemudian hari…

Setelah sebelumnya saya telah menulis mengenai tutorial Css : Cara Memasukan Sript CSS ke Dalam HTML , kali ini saya akan menulis mengenai tutorial Css mengenal Calass dan Id. Class dan Id merupakan sebuah selector yang lebih selektif lagi karena anda dapat mengatur tag Html yang sama ditampilkan secara berbeda tergantung dari Class dan Id yang di gunakan.
agar anda dapat lebih mengetahui Class dan Id pada CSS silahkan perhatikan contoh berikut :

<html>

<head>

<title>tutorial CSS : Mengenal Class dan Id</title>

<style>

#header {background-color: blue; padding: 1 em}

.intro {color : red; font-weight:blod}

</style>

</head>

<body>

<h1>Latihan CSS</h1>

<p class="intro">Saya sedang belajar CSS</p>

<p class="intro">Saya sedang belajar Class dan Id</p>

</div>

</body>

</html>

Keterangan :
Untuk penggunaan Id maka setiap menuliskan code CSS wajib didahului oleh tanda paga (#)
Untuk penggunaan Class maka setiap menuliskan code CSS wajib didahului oleh tanda titik (.)
Seperti contoh di atas
#header : Id
.intro : Class
Untuk memunculkan Id gunakan <div id="nama id">
untuk memunculkan class gunakan <p class="nama class">

biasanya id dan class digunakan untuk membagi-bagi bagian antara header footer dan juga sidebar, agar lebih spesifik.

Sama seperti pemakaian selector ID, selector class juga meminta tanda pada Tag HTML dengan nama class berikut ini contohnya:

<html>
<head>
<title>Pemakaian Selector ID dan Selector Class pada CSS</title>
<link href=”css/style.css” type=”text/css” rel=”stylesheet”/>
</head>
<body>
<p>
Pemakaian Selector ID dan Selector Class pada CSS
</p>
<p class=”namaclass”>Pemakain Selector CLASS pada CSS akan memakai Atribut (.)
</p>
</body>
</html>

Setelah menentukan CLASS nya semisal “namaclass” (anda bebas menentukannya) , maka pada file CSS anda menggunakan selector (.) atau titik/dot berikut contohnya :

Pada file CSS :

.namaclass{
font-family:Verdana;
color:#3300FF;
font-size:16px;
font-weight:bold;
}

Class dalam css digunakan jika kita ingin memberikan lebih dari satu jenis style pada suatu tag html. Dalam hal ini, terdapat 3 jenis class yang bisa digunakan yaitu :

class, adanya selector yang diikuti dengan tanda titik (.) dan nama class-nya, lalu pendefinisian property dsan value nya.

format :

selector.nama_class {property:value}

Untuk nama_class kita dibebaskan untuk menentukannya sendiri.

Generic class, tidak terdapat selector dan langsung diawali dengan tanda titik (.) dan nama class nya.

format :

.nama_lass {property:value}

Sama halnya dengan tipe pertama, kita dibebaskan untuk menentukan nama kelasnya. Nah dari dua jenis class di atas, apakah sobat dapat menangkap perbedaan fungsi dalam penggunaanya? Supaya lebih jelas, kita buat contoh terlebih dahulu.

<html>

<head>

<title>Perbedaan jenis class</title>

<style>

p.merah {color:red}

.warnabiru {color:blue}

</style>

</head>

<body>

Warna tulisan dalam paragraf ini akan mengikuti aturan style class yang telah ditentukan di atas, yaitu merah.

</p>

Warna tulisan dalam paragraf ini akan mengikuti aturan style class yang telah ditentukan di atas, yaitu biru.

</p>

Warna tulisan heading ini akan berwana biru.

</h3>

</body>

</html>

Jika sobat jeli, tipe pertama style class nya hanya bisa digunakan untuk tag paragraf (p) saja, sedangkan tipe kedua–generic class– bisa digunakan untuk setiap tag html oleh karena itu class ‘.warnabiru‘ bisa digunakan dalam tag paragraf (p) dan tag heading (h3). Dapat dipahami?

Pseudo class, merupakan style built in yang telah ada pada aturan css dan didukung oleh beberapa browser. Nama class dari tipe ini sudah ditentukan jadi kita tidak bisa merubah-rubah nama class nya secara sembarangan.

format :

selector:nama_c lass {property:value}

contohnya adalah style untuk link,

a:link{color:blue}

a:visited{color:purple}

a:hover(color:red}

Perbedaan utama dengan id selector adalah bila id selector digunakan untuk mendefinisikan satu elemen HTML sedangkan class selector umumnya digunakan untuk mendefinisikan style satu kelompok dari banya elemen.
Class selector didefinisikan dengan tanda titik ".".

.kelasku{color:green;}

Dari contoh kode CSS di atas :

.kelasku adalah nama dari kelas.
Semua elemen HTML dengan class "kelasku" akan berwarna green/hijau.

Codingku HTML Editori

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.kelasku { color:green; }
</style>
</head>
<body>
<h2 class="kelasku">Ini adalah heading dengan CSS class "kelasku"</h2>
</body>
</html>

bagi para pemula, mungkin mengira tidak ada perbedaan yang jauh antara ID dan Class dalam pemakainnya. tapi sebenarnya, terdapat perbedaan yang cukup jauh antara ID dan Class.

dalam penggunaanya, ID (disimbolkan => #) hanya bisa dipanggil/dipakai 1 kali dalam 1 halaman. sedangkan Class {disimbolkan => . (baca:dot)} bisa dipanggil/dipakai lebih dari 1 kali (beberapa kali) dalam 1 halaman.

Contoh Peng-aplikasian:
Selector ID :

#main-wrapper {width:600px}

hanya bisa dipanggil 1 kali dalam 1 halaman

Selector Class :

.kotak-item {background: #000;color:#fff;text-align:center;font-size:40px;}

Bisa dipanggil beberapa kali dalam 1 halaman

<div class='kotak-item'>Belajar HTML</div>
<div class='kotak-item'>Bersama Platorial</div>

E. KESIMPULAN
Itulah Perbedaan Selector ID dan Class Pada CSS.

F. REFERENSI
http://rifkayora182.blogspot.com/2013/05/pengertian-id-tag-dan-class-pada-css.html

F. PENUTUP
jika ada yang mau bertanya, kritik dan serta saran. Silahkan tinggalkan komentar dibawah post ini :-bd.
Trima Kasih.

Wassalamu'alaikum Wr.Wb

Rabu, 29 Agustus 2018

Pengenalan ID dan Class Pada CSS

Pengenalan ID dan Class Pada CSS

Hasil gambar untuk Tutorial CSS Tampilan dan Visibilitas

Assalamu'alaikm Wr.Wb

A. PENDAHULUAN
Bertemu lagi dengan blog yang sederhana ini, kali ini saya membahas tentang ID dan Class Pada CSS.

B. LATAR BELAKANG
ID didefinisikan dengan menggunakan tanda ” # ” dan CLASS didefinisikan dengan menggunakan tanda titik ” . ” .

Read more at www.spiderbeat.com: ID dan CLASS dalam CSS

C. TUJUAN
Pada tulisan kali ini targetnya anda akan mampu memahami dan selanjutnya menggunakan ID dan Class pada CSS.

D. PEMBAHASAN
ID dan CLASS dalam pemrograman CSS Adalah selector yang dibuat oleh seorang webmaster dalam memanipulasi pada satu elemen pada halaman HTML / web.
Selain menggunakan element html sebagai selector pada css, kita bisa menggunakan selector yang kita buat sendiri. Selector ini selanjutnya bisa kita pakai pada elemen-element dalam HTML dengan cara memanggilnya. Ada dua selector yang bisa kita buat yakni id dan class.
Selector ID
Selector 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 “#”.
Contoh selector ID

1#par1

2{

3     text-align:center;

4     color:red;

5}

Pada bagian dokumen HTML, untuk menggunakan style tersebut, misalnya pada sebuah paragraph, bisa dituliskan:

`1`	`<p` `id="par1">Ini adalah sebuah paragraph</p>`

Penulisan nama id sebaiknya tidak diawali dengan nomor, karena tidak akan dikenali pada browser Mozilla Firefox.

Selector Class
Selector 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 “.” .
Contoh selector class

1.komentar 

2{

3     text-align:left;

4     color:red;

5}

Pada bagian dokumen web, misalnya akan diterapkan pada paragraph dan pada sebuh div dalam sebuah dokumen web yang sama, dapat dituliskan

`1`	`<p` `class="komentar"> Ini adalah paragraph komentar </p>`

`1`	`<div` `class="komentar">Ini bagian komentar</p>`

`1`	`p.komentar {text-align:center;}`

Aturan ini akan berlaku bagi setiap paragraph <p> yang memiliki class=”komentar” saja.

Read more at www.spiderbeat.com: ID dan CLASS dalam CSS

E. KESIMPULAN
Kalau boleh mengingatkan, silahkan langsung dicoba yang anda baca hari ini, biar tidak menguap entah kemana dikemudian hari…

F. PENUTUP
Cukup sampai disini tulisan kali ini, dan sampai jumpa lagi.

Wassalamu'alaikum Wr.Wb

Selasa, 28 Agustus 2018

Tutorial Cascading Stye Sheet (CSS)

Assalamu'alaikum Wr.Wb.

A. PENDAHULUAN
Hay gays, kali ini saya akan membahas tentang Tutorial Cascading Stye Sheet (CSS).

B. LATAR BELAKANG
Karena saya ingin mengetahui apa sih yang yang dimaksud Tutorial Cascading Stye Sheet (CSS).

C. TUJUAN
Ingin memahami apa yang dimaksud dengan Tutorial Cascading Stye Sheet (CSS).

D. PEMBAHASAAN
CSS adalah singkatan dari Cascading Style Sheets. Kalau baca di kamus, cascading itu artinya air terjun. Tapi dalam hal ini, yang di maksud adalah, aliran dari suatu kode ke kode lain yang saling berhubungan.
Jadi kalau di tulis lengkap dalam bahasa Indonesia kira-kira arti CSS adalah: kumpulan kode-kode yang berurutan dan saling berhubungan untuk mengatur format / tampilan suatu halaman HTML.

Keuntungan Penggunaan CSS

Jika anda memiliki beberapa halaman website dimana anda menggunakan font arial untuk tulisannya, lalu suatu hari anda bosan dengan arial dan ingin mengganti ke trebuchet, anda harus merubah satu per satu halaman website anda dan merubah tipe font dari arial menjadi trebuchet.
Dengan menggunakan css, dimana semua halaman web memakai css yang sama, anda cukup merubah satu baris kode css untuk merubah font di semua halaman web dari arial ke trebuchet.
Jadi, keuntungan menggunakan CSS, lebih praktis!

Kekuranagan Penggunaan CSS
Tidak semua browser mengartikan kode CSS dengan cara yang sama. Jadi kadang-kadang, tampilan web dengan CSS terlihat baik di browser yang satu, tapi berantakan di browser yang lain. Jadi anda harus memeriksa tampilan supaya terlihat baik di semua browser dan menambahkan kode-kode khusus browser tertentu jika memang dibutuhkan agar tampilan web anda terlihat baik di semua browser.

E. KESIMPUMPULAN
Kesimpulannya yaitu dengan menggunakan Tutorial Cascading Stye Sheet (CSS). Kita jadi bisa lebih mudah untuk memanipulasi maupun mengubah tampilan web tersebut.

F. PENUTUP

Sekian dari saya semoga bermanfaat untuk kalian semua, dan sampai jumpa lagi dengan saya.

Wassalamu'alaikum Wr.Wb.

Senin, 27 Agustus 2018

Membuat Drop Cap

Drop Cap

Assalamu'alaikum Wr.Wb

A. PENDAHULUAN
Kali ini saya akan membahas cara membuat Drop Cap.

B. LATAR BELAKANG
Konsumen pada zaman sekarang sebagian besar bergantung pada teknologi.

C. TUJUAN
Bisa dimanfaatkan untuk surat kabar, undangan, atau untuk menampakkan huruf suatu bagian teks di awal bab atau awal lembaran kerja.

D. PEMBAHASAN
Cara Menggunakan Drop Cap - Drop Cap merupakan suatu paragraf yang dimulai dengan huruf yang lebih besar dibandingkan dengan huruf yang dipakai pada keseluruhan paragraf. Umumnya dalam pengetikan artikel, huruf awal dibuat tampak supaya lebih besar dan menarik.
Microsoft word mempunyai fasilitas untuk menangani hal ini dinamakan dengan Drop Cap. Tak hanya untuk artikel, Drop Cap juga bisa dimanfaatkan untuk surat kabar, undangan, atau untuk menampakkan huruf suatu bagian teks di awal bab atau awal lembaran kerja.

Contoh paragraf yang menggunakan drop cap.

Cara Membuat Drop Cap

- Sorot huruf yang akan dijadikan drop cap
- Klik tab Insert
- Pada kelompok Text, klik tool Drop Cap.

Pilih salah satu pilihan berikut :

None, digunakan untuk megembalikan teks ke kondisi awal
Dropped, digunakan untuk mengubah huruf pertama lebih besar berada dalam satu margin dibanding teks yang lainnya.
In margin, digunakan untuk mengubah huruf pertama tercetak lebih besar berada di luar margin.
Jika pilihan yang dipilih adalah Drop Cap Options,

Pada kotak pilihan Position, pilih misal Dropped
Klik OK.

E. KESIMPULAN
Semoga dapat di pahami dan di mengerti oleh teman-teman semua.

F. PENUTUP
Sekian dari saya mohon ma'af kalau matri yang saya jelaskan di atas masih ada yang kurang.

Wasalamu'alaikum Wr.Wb

Selasa, 04 September 2018

Sabtu, 01 September 2018

Setting Viewport

Adalah metode untuk membiarkan web desainer mengambil kendali atas viewport, melalui <meta>tag.

Ukuran Konten untuk Viewport The

Jumat, 31 Agustus 2018

Kamis, 30 Agustus 2018

Rabu, 29 Agustus 2018

Selasa, 28 Agustus 2018

Assalamu'alaikum Wr.Wb.

Wassalamu'alaikum Wr.Wb.

Senin, 27 Agustus 2018

Cara Membuat Drop Cap

Adalah metode untuk membiarkan web desainer mengambil kendali atas viewport, melalui `<meta>`tag.