Ngae Web - Belajar HTML dan CSS: Css

Ngaeweb - hari ini saya akan membagikan atau mensharing video mengenai css..
Saya minta maaf karna kemarin laptop saya rusak. dan untungnya file yang ada di harrdisk saya tidak hilang jadi saya bisa membagikan mareti ini.
Link download video materi css:

Sekian informasi dari saya, semoga bermanfaat bagi anda. Terimakasi telah berkunjung dan salam, NgaeWeb.. Inget di tonton yaaaaaa :D

Ngaeweb - yo semua... hari ini saya akan membagikan materi tentang Pengenalan HTML dan CSS. seperti artikel yang lama saya sudah menjelaskanya dengan text namun saat ini saya akan membagikan vidionya..
Kenapa vidio?? karna saya rasa artikel berupa text akan sulit di pahami.. Maka dari itu saya harapkan vidio ini membatu kalian yang ingin serius belajar mengenai Tag HTML dan CSS...
yoo saya tidak akan banyak menulis.. Biarkan Vidio yang mengungkapkan kebenaranya..

Klik disini untuk mendownload vidio Pengenalan HTML.
Klik disini untuk mendownload vidio Pengenalan CSS.

Sekian yang saya bagikan hari ini saya harap bermanfaat bagi anda.. Terimakasi telah berkunjung dan ingat praktek lebih indah di banding teori... Salam Ngaeweb :D.

Margin, Padding ,Float, Width, Height, Clear, dan Background-color.

NgaeWeb - halo halo.. maaf udah lama gak ngepost biasalah anak kuliahan gitu sibuk terus hehehe..

yoshh langsung saja materi yang saya upload hari ini mengenai MARGIN, PADDING ,FLOAT, WIDTH, HEIGHT, CLEAR, dan BACKGROUD-COLOR.

Margin : Kode Css yang di gunakan untuk memberi jarak di luar class atau id.

Padding : Kode Css yang di gunakan untuk memberi jarak ke dalam class.

Float : Kode Css yang di gunakan agar class atau id yang kalian buat dapat menempel satu sama lain.

Width : Kode Css yang di gunakan untuk menentukan lebar sebuah class.

Height : Kode Css yang di gunakan untuk menentukan tinggi sebuah class.

Backgroud-color : Kode Css yang di gunakan untuk menentukan atau memberi warna pada class.

Clear : Kode Css yang bersifat sebagai penetral agar kode float tidak meleber keluar fungsi. Clear adalah sebuah kode yang unik dan terus di gunakan agar halaman HTML dapat sesuai dengan apa yang di harapkan.

Hah dari pada pusing dengan penjelasan di atas mending lanngsung kita praktekkan.

Pertama – tama kita akan membuat 3 buah kotak.

Setelah membuat 3 kotak lalu panggilah kotak tersebut d dalam halaman html.

hasilnya akan seperti ini.

Kita bisa lihat jarak/ MARGIN dari kotak 1 dengan kotak yang lainnya berbeda – beda. Sedangkan tulisan yang ada di kotak 2 atau padding yang kita berikan di kotak 2 terlihat. Sudah mengerti kan bagaimana bedanya MARGIN dengan PADDING.

Setelah itu kita akan menambahkan CLEAR agar kotak 3 bisa berada di bawah. Pertama – tama buatlah class NETRAL.

Setelah itu pasangkan class netral di bawah class kotak2.

Dan lihat hasilnya.

Kita bisa lihat perbedaan margin dari kotak3 dan kotak1. Dan class netralpun sesuai dengan apa yang kita harapkan.

Klikdisini untuk download kodding di atas.

Sekian informasi dari saya jika ada pertanyaan sihlakan hubungi saya lewat form yang ada di contact us kami atau bisa juga langsung komen di bawah ini. Akhir kata saya ucapkan terimakasi telah berkunjung ke blog saya dan salam NgaeWeb ;).

Belajar Trasition CSS3

Ngaeweb – yosh akhirnya saya bisa ngepost lagi setelah tugas yang bertubi tubi menimpa saya.. maklumlah anak kampus memang nasibnya seperti ini X_X. Yo pagi ini saya akan membahas tentang trasition CSS3. Trasition adalah cara memberikan waktu ketika menu atau tombol atau apa saja yang di buat dengan css. cara yang pertama seperti biasa buka dreamweaver kalian lalu buat menu html. Berikan Css internal maupun external. kalau masi belum bisa membuat css ayo baca lagi artikel saya yang sebelumnya tinggal di search doang kok :D.

Buatlah seperti di bawah ini :

Code css trasition

untuk kode setiap browser dibedakan karena ini merupakan css 3, agar lebh efektif jika ingin mencoba ini sebaiknya adblocknya di matikan dulu yaa..

setelah itu pangil class Testa ke dalam halaman HTML

code html trasition

Setelah itu lansung di save.. Dan lihat hasilnya tadaaa akan berubah kan menjadi sesuatu yang lebih indah di pandang mata.

Trasition tidak hanya berpengaruh pada margin. Trasition juga berpengaruh pada Perubahan warna, perubahan besarnya tulisan dan yang lainya.

Klik disini untuk mendownload codding di atas.

sekian informasi yang saya berikan. terimakasi telah berkunjung, mohon maaf jika ada kekurangan dan salam NGAEWEB :D.

Ngaeweb - Yoshh hari ini kita langsung membahas tentang CSS3.

ngaeweb.blogspot.com belajar HTML dan css

Gambar : Css3

CSS3 adalah Cascading Style Sheet versi ke 3, yaitu pengatur dan pengendali tampilan sebuah halaman blog/ web.

CSS3 melakukan penataan terhadap komponen HTML maupun XHTML pada halaman web sehingga menghasilkan tampilan yang ramah dimata atau retina friendly.

CSS versi ketiga dapat melakukan berbagai pemutakhiran terhadap kemampuannya beradaptasi dengan teknologi multimedia yang semakin modern. Kemampuan yang di milki CSS3 antara lain:

CSS3 mampu membuat efek animasi secara independent tanpa membutuhkan software tambahan seperti Adobe Flash dan Microsoft Silverlight. Karena hanya menggukakan kode kode maka web tidak akan berat atau tidak lama dan tidak boros kuota untuk membukanya.
CSS3 mampu memberikan efek grafis terhadap teks, kolom, table serta penataan huruf.
CSS3 mampu menampilkan berbagai macam dan jenis huruf selain web-safe fonts.
CSS3 mampu merekonstruksi secara visual tampilan block, seperti merubah ukuran kotak, transformasi 2D/ 3D, memberikan efek sudut (radius) dan shadow (bayangan).
CSS3 mampu memanipulasi secara visual warna, desain maupun tekstur suatu halaman HTML atau XHTML.

Kelebihan dan Kekurangan CSS3,

Kelebihan :

Dapat Mengatur dan mempercantik interface website.

Jika ingin membuat file CSS3 sebaiknya menggunakan CSS external atau terpisah dari file html dan dapat dipanggil di file html. Hal ini dapat mempermudah kita jika terjadi pengeditan koding.

Dengan CSS3, situs website dapat berkembang dan lebih interaktif lagi.

Bisa mengurangi ukuran file yang akan di-load dan akan menjadi lebih ringan.

Lebih mudah dan simple serta dapat menghindari penggunaan tag yang berulang-ulang.

Banyak yang beranggapan bahwa peran jQuery sudah tidak dibutuhkan lagi setelah CSS3 semakin berkembang kedepannya. Apalagi dari segi size, jQuery jauh lebih besar. Tidak hanya jQuery saja, peran Flash saja sudah tergantikan dengan adanya CSS3.

Kekurangan :

Kodingnya berbeda dengan versi sebelumnya.

Koding dari setiapBrowser berbeda. karena kita harus membuat koding dari seluruh Browser satu persatu.

Dibutuhkan waktu lebih lama untuk membuatnya.

Sekian informasi dari saya. mulai besok saya akan mengupload artikel2 mengenai CSS3, dapat di ketahui bahwa Tag CSS ataupun HTML dapat di pakai untuk mengubah situs blog anda jadi jangan ragu2 untuk belajar. Mungkin saja apa yang kalian pelajari hari ini, bisa berguna di masa yang akan datang. Terimakasi telah berkunjung, tetaplah mencoba dan salam NGAEWEB.

Gambar 1 Cover Membuat List Dengan Simbol Hiragana dan Katakana Menggunakan CSS

Ngaeweb – Hari ini saya akan menjelaskan tentang cara membuat list dengan simbol hiragana menggunakan CSS. Pertama – tama buatlah class dengan nama hiragana dan buatlah seperti scrip di bawah ini,

Lalu di dalam kalian tinggal memanggil class hiragana seperti di bawah ini,

Dan jadinya akan seperti ini,

Sekarang kita mencoba dengan menggunakan katakana. Pertama – tama buatlah Class dengan nama katakana,

Lalu di dalam kalian tinggal memanggil class katakana seperti di bawah ini,

Lalu Hasilnya akan seperti ini,

Klik disini untuk mendownload scrip diatas

Hiragana

Katakana

Sekian informasi dari saya, Semoga berguna bagi ada terimakasi telah berkunjung dan salam ngaeweb :D.

Ngaeweb - Hari ini saya akan memberi tahu kalian mengenai cara membuat Bingkai menggunakan CSS.

Untuk membuat bingkai, kita bisa memakai properti seperti di bawah ini.

border, digunakan untuk membuat keseluruhan dari bingkai.
border-left, digunakan untuk membuat bingkai bagian kiri.
border-right, digunakan untuk membuat bingkai bagian kanan.
border-top, digunakan untuk membuat bingkai bagian atas.
border-bottom, digunakan untuk membuat bingkai bagian bawah.

Gambar 1.1 Ilustrasi Properti Bingkai Suatu Elemen

Properti tersebut bisa di isi dengan beberapa nilai.

Contoh

border: 4px solid #000;

Pada contoh tersebut,

4px menyatakan ukuran ketebalan bingkai.
solid menyatakan bentuk bingkai.
#000 menyatakan warna bingkai.

Gambar 1.2 contoh membuat bingkai

Menentukan Bentuk Bingkai

Ada beberapa jenis yang konstanta yang di pakai untuk menentukan bentuk bingkai seperti,

Gambar 1.3 Konstanta Penentu Bentuk Binkai

Mengatur Ketebalan Bingkai

Ketebalan bingkai juga bisa diatur melalui width entah itu border-width, border-left-width ataupun border-right-width. Nilai top, bottom, left ,dan right berfungsi untuk mengatur bagian bingkai sesuai dengan gambar “Ilustrasi Properti Binkai Suatu Element” nilai yang bisa di berikan berupa nilai: 2px atau menggunakam konstanta,

thin berarti tipis
medium berarti sedang
thick berarti tebal

Gambar 1.4 Mengatur Ketebalan Menggunakan Konstanta

Mengatur Warna Bingkai

selain menggunakan “color” kalian juga bisa mengubah warna bingkai melalui: border-color, border-right-color, border-left-color, border-top-color, dan border-bottom-color seperti ini,

Gambar 1.5 hasil koding pengaturan warna

klik disini untuk melihat atau mendownload Scrip membuat bingkai menggunakan css.

Sekian informasi dari saya, Semoga berguna untuk anda. Terimakasi telah berkunjung dan salam NgaeWeb :D.

NgaeWeb – Hari ini saya akan menjelaskan tentang Selector Pseudo Element.
Css menyediakan tiga Pseudo-elemen yaitu: first-letter, first line dan first child. Dinamakan pseudo-elemen karena sesungguhnya tidak ada elemen ekivalen di dalam HTML. Namun, selector ini di sediakan dengan tujuan untuk memberi efek yang menarik.

Pseudo-Elemen first-letter yang berarti karakter pertama.
Pseudo-Elemen first-line yang berarti baris pertama.
Pseudo-Elemen first-child yang berarti elemen anak pertama

Contoh cara menggunakan first-letter yang di sebut “Drop Cap”

Maka setiap huruf pertama pada tag <p> akan menjadi drop cap. Perhatikan hasil berikut.

Bagaimana kalau kita ingin agar Drop cap hanya ada di paragraf pertama saja?. kita bisa melakukanya dengan cara di bawah ini.

Coding untuk membuat Drop Cap

Dan hasilnya akan seperti ini.

Drop Cap

Sekarang kita akan mencoba menggunakan frist line dengan kode seperti ini.

Kode HTML Frist Line

Dan kita bisa melihat hasilnya seperti ini.

Frist Line

Kita bisa mengetahui bahwa baris pertama dalam paragraf yang terkena efectnya.

Sekarang kita akan belajar mengenai first child. kita hanya akan mengubahnya seperti dibawah ini.

Koding First Child

Dan kita akan melihat hasilnya seperti di bawah ini.

Frist line

Dari gambar di atas kita bisa mengetahui fungsi dari first-child yaitu semua isi paragraf akan terkena efeknya.

sekian informasi dari saya semoga bermanfaat bagi anda, Ingat satu hal yang saya sampaikan ini lebih baik mempraktekkanya langsung ketimbang hanya membacanya saja. Terimakasi telah berkunjung dan salam NgaeWeb :D.

NgaeWeb – Seperti yang saya janjikan kemarin hari ini saya akan berbagi ilmu mengenai cara membuat Css External. Dari pada berlama – lama mari kita langsung mulai saja.

Pertama – tama buka Adobe Dreamweaver kalian lalu buatlah 1 halaman Html dan 1 lagi halaman css external.

Jika kita sudah membuat 1 halaman CSS dan 1 halaman HTML, Selanjutnya kita akan menyimpannya / save di dalam folder yang sama.

Jika sudah d simpan di dalam 1 folder maka lahkah selanjutnya adalah menghubungkan antara halaman HTML dan halaman Style / CSS.

Untuk menghubungkan halaman Css dan HTML kalian bisa menambahkan scrip berikut di bawah tag

Atau kalian juga bisa melakukannya dengan instan. Pertama –tama lihatlah gambar rantai yang ada di menu kanan Adobe Dreamweaver kalian.

Lalu klik browse dan cari halaman css yang ingin kalian hubungkan ke dalam halaman html.

Lalu klik OK dan halaman CSS anda akan langsung terhubung dengan halaman HTML yang anda buat. Jika cara ini tidak berhasil maka kalian harus membuat crip dengan cara manual seperti yang sudah saya beritahukan di atas.

Sekian informasi dari saya, Semoga berguna untuk kalian, jika ada pertanyaan yang berhubungan dengan artikel ini jangan ragu untuk berkomentar. Terimakasi atas kunjunganya dan salam NgaeWeb ;).

NgaeWeb - Prinsip Dasar menggunakan CSS di dalam Dokumen html yaitu untuk Menyediakan style yangdi pakai untuk mengatur bagian – bagian dalam html sebagai contoh suatu style dapat mengatur jenis ukuran bahkan warna dari suatu text.

Css umumnya di bagi 2 yaitu Css Eksternal dan CSS Internal.

Css Eksternal : Adalah scrip css yang di dibuatkan halaman menyendiri dan tidak langsung berada di dalam scrip html. jadi untuk menghubungkan halaman css dan halaman html harus menggukanan scrip penghubung.
CSS Internal. : Adalah scrip css yang langsung menjadi satu di dalam html.

Seperti yang sudah saya beritahu sebelumnya pada artikel yang saya beri judul “Dasar dasar html dan cara membuat paragraf baru”. di dalam <head> berisi hal-hal tambahan seperti link untuk css external , css internal, link untuk jquery dll .

Dari pada binggung lebih baik saya akan langsung memberikan contoh :

Cara mengatur Ukuran font, warna font, dan Jenis font, menggunakan css internal.

Pertama tama buka adobe Dreamweaver kalian lalu cari html.

Di dalam head kita tuliskan scrip <style type="text/css"> </style> seperti gambar di bawah ini:

Kemudian d dalam style tersebut kita bisa menuliskan kode css yang kita akan gunakan. Kode yang kita pelajari hari ini adalah

Font : di gunakan untuk mengganti jenis font, jenis font juga dapat di ganti menggunakan Font-faimily.

Font-size : di gunakan untuk mengatur ukuran font biasanya satuan ukurnya memakai px (pixel).

Color : di gunakan untuk menganti warna font.

Pada gambar di atas saya membuat sebuah variabel baru yang di beri nama .paragraf dan variabel ini akan saya panggil dari dalam <body> dengan tag <div class: “paragraf”> sebenarnya ada 2 jenis Variabel yang ada di dalam CSS yaitu class dan id . jika di depan nama variabel berisi .(Titik) maka otomatis variabel itu akan bertipe class. Jika di depan variabel berisi #(pagar) maka variabel tersebut bertipe id.

Seperti gambar di atas seperti itulah cara memakai variabel di dalam css dan hasilnya akan seperti ini.

Untuk Css eksternal saya akan segera menguploadnya paling lambat hari senin lusa mendatang.

Sekian informasi yang saya berikan. Semoga informasi yang saya berikan dapat berguna untuk anda, kunjungi blog ini terus karena masih banyak sekali yang kalian harus pelajari. Salam – NgaeWeb ;).

CSS {Cascading Style Sheets}

Apa Itu CSS?
CSS adalah kepanjangan dari Cascading Style Sheets.
Jadi arti CSS adalah: kumpulan kode-kode yang berurutan dan saling berhubungan untuk mengatur format / tampilan suatu halaman HTML.

Kelebihan css

Memisahkan desain dengan konten halaman web.
Mengatur desain seefisien mungkin.
Jika kita ingin mengubah suatu tema halaman web, cukup modifikasi pada css saja.
Menghadirkan sesuatu yang tidak dapat dilakukan oleh HTML.
Lebih mudah didownload karena lebih ringan ukuran filenya.
Satu CSS dapat digunakan banyak halaman web.
dan masih banyak lagi

Kekurangan css

Tampilan pada browser berbeda-beda.
Kadang juga terdapat browser yang tidak support CSS (browser lama).
Harus tahu cara menggunakannya.
dibutuhkan waktu lebih lama dalam membuatnya.
Belum lagi ada bug/error dalam CSS

Facebook Page

Translate

Pengikut

Popular Posts