JavaScript Input Output

Artikel ini merupakan salah satu artikel dari series Pembelajaran Javascript Fundamental. Pada kali ini, kita akan belajar bagaimana cara menampilkan output dan menerima input pada javaScript. Pada umumnya, javascript bisa menerima semua inputan dari berbagai elemen form HTML namun untuk saat ini, materi kita belum sampai kesana. jadi saat ini kita akan menggunakan script prompt() sebagai inputan dari javascript.

Continue reading “JavaScript Input Output”

Studi kasus pembuatan facebook registration page

Pada materi sebelumnya, kita sudah belajar mengenai bagaimana cara pembuatan style, table, form dan lain-lain. kali ini, untuk mengasah skill dan mengingat kembali materi yang sudah kita pelajari sebelumnya maka kita akan membuat facebook registration page, demonya bisa anda lihat disini  atau melalui url https://mangcoding.github.io/fb.

Dengan adanya tutorial ini, mudah-mudahan memberikan gambaran proses pembuatan layout yang terstuktur dan penyisipan style yang lebih tepat kedalam elemen yang telah kita buat. langsung saja simak dan ikuti tutorial dibawah ini

1. Menentukan Elemen layout

seperti halnya web-web pada umumnya, halaman web selalu terdiri dari header, content dan footer. sedangkan untuk navigasi, bisa kita sisipkan di bagian header, content atau bahkan footer. di beberapa website ada juga yang menyediakan sidebar untuk navigasi dan banner. Untuk membuat halaman registrasi seperti faceboo, navigasi menu diletakkan dibagian footer. secara garis besar layoutnya bisa kita gambarkan seperti dibawah ini.

2. Membuat Elemen sesuai dengan layout

Perhatikan gambar sebelumnya, tiap elemen HTML kita anggap sebagai sebuah kotak yang melingkar. lalu kita isi kotak itu dengan elemen-elemen yang kita butuhkan. dalam satu kotak besar terdapat sebuag kotak lain yang mungkin didalamnya ada kotak lagi yang lebih kecil.

dengan melihat layout diatas, kita akan buat elemen HTML sesuai dengan racangan yang telah kita buat.

Perhatikan rancangan elemen diatas. pada tiap elemen baik itu header, content dan footer kita sisipkan class container. class container disini berfungsi agar content yang kita buat dari atas ke bawah sejajar. Perhatikan gambar berikut ini.

Perlu diingat, kita bebas menulis nama class sesuai yang kita mau dan tentu saja masalah sejajar/simetris dari atas-kebawah tergantung dari layout yang kita buat. Untuk kasus kali ini kita akan buat sejajar biar lebih rapih dan elegan.

3. Membuat Header

Setelah memahami pembahasan diatas, mari kita buat rancangan header sesuai dengan facebook aslinya. kali ini, kita akan membuat logo facebook di sebelah kiri dengan membuat class leftContent dan form login disebalah kanan dengan membuat class rightContent (perhatikan kembali gambar acuan/sketsa yang kita buat diatas).

Untuk pembuatan logo, kita akan cukupkan dengan membuat heading, sedangkan untuk form login, kita akan menggunakan table agar layouting lebih mudah. (Materi layouting sesungguhnya akan kita bahas pada materi berikutnya).

dan untuk CSS nya akan kita buat sebagai berikut :

lengkapnya sebagai berikut :

Bagaimana kawan-kawan? Menarik bukan?
Saya harap jika ada pertanyaan seputar materi yang ada di artikel ini langsung tanyakan di kolom komentar, atau melalui facebook page saya di halaman ini.

demikian tutorial studi kasus pembuatan registration facebook bagian 1. untuk lanjutannya, akan kita bahas pada artikel selanjutnya.

keep Learning ^_^
Semangat

CSS Selector Lanjutan bagian 2

Setelah kita memahami dasar-dasar CSS pada bab sebelumnya, ternyata CSS Selector tidak hanya dibatasi oleh tag, id dan class saja. kita pun sudah membahas hal itu pada CSS Selector Lanjutan bagian 1. Untuk melengkapi pemahaman kita mengenai CSS Selector, perhatikan tabel penjelasan dibawah ini :

Selector Contoh Deskripsi Contoh Versi CSS
.[attribute] [target] Menyeleksi elemen yang memiliki attribute “target” 2
[attribute=value] [target=_blank] Menyeleksi elemen yang memiliki attribut target=”_blank” 2
[attribute~=value] [title~=css] Menyeleksi elemen yang memiliki attribut title yang mengandung kata “css” 2
[attribute|=value] [lang|=en] Menyeleksi elemen yang memiliki attribut lang yang memiliki value dengan awalan “en”.

catatan : berlaku jika value terdiri dari satu kata atau secara keseluruhan kata utamanya terdiri dari kata tersebut dan dihubungkan dengan –

2
[attribute^=value] a[href^=”https”] menyeleksi elemen <a> yang value/isi dari attribut hrefnya dimulai dengan “https” 3
[attribute$=value] a[href$=”.pdf”] menyeleksi elemen <a> yang value/isi dari attribut hrefnya diakhiri dengan “.pdf” 3
[attribute*=value] a[href*=”css”] menyeleksi elemen <a> yang value/isi dari attribut hrefnya mengandung huruf “css” 3

Perhatikan contoh dibawah ini :

Pada contoh diatas, kita lihat bahwa semua elemen terbuat dari tag <a>, namun yang memiliki attribut target adalah link 1, link 3 dan link 5. jadi, kita bisa atur langsung dengan menggunakan attribut selector [target].

jika, kita ingin lebih spesifik khusus untuk attribute dengan value tertentu, maka kita bisa menyeleksinya dengan cara [attribute=value] (lihat kembali contoh diatas, kita sudah implementasikan pada link 3 khusus untuk [target=”_self”]

Contoh Attribute lanjutan:

Silakan amati dan cermati contoh diatas, apabila ada yang kurang paham silakan kirim pertanyaan di kolom komentar. untuk case-case lainnya pada table diatas silakan di coba sendiri yah teman-teman.

Keep Learning and Good Luck ^_^
Semangat

Form

Pernahkah anda melakukan registrasi pada sebuah situs? misalnya kita melakukan pendaftaran untuk email, facebook, dan lain lain.

atau sekedar mengisi form tertentu untuk login ke suatu situs jejaring sosial?

Saya yakin kita semua sudah pernah melakukan semua itu. Sejumlah informasi yang kita masukkan ke dalam sebuah website melalu formulir yang disediakan bisa kita sebut sebagai suatu inputan.

Sejumlah inputan dapat kita kirim ke dalam sebuah sistem dengan menggunakan form. Inputan yang kita kirim digunakan oleh sistem untuk diolah dan di simpan sebelum di proses atau dicetak ke dalam suatu output.

Singkatnya, Form digunakan untuk mengoleksi inputan dari user. Sebuah form bisa terdiri dari sekelompok text, radio option, checkbox, submit button, dan masih banyak lagi yang lainnya.

Tabel Elemen Form

Elemen Pengertian
 <form></form> Membuka dan Menutup Form
 <input type=”text” /> Membuat Inputan berbentuk text (Single Line)
 <input type=”radio” /> Membuat Pilihan Inputan berbentuk radio (Single Choice)
 <input type=”checkbox” /> Membuat Pilihan Inputan berbentuk checkbox (Multiple Choice)
 <input type=”password” /> Membuat Pilihan Inputan berbentuk password (Hide Area)
 <input type=”date” /> Membuat inputan berbentuk tanggal
 <input type=”file” /> Membuat inputan berbentuk file (upload file)
 <input type=”submit” />
<button type=”submit”>
Membuat submit button
 <input type=”reset” />
<button type=”reset”>
Mereset form yang telah diisi
 <select>
<option></option>
</select>
Membuat pilihan inputan berbentuk select box
<textarea></textarea> Membuat Inputan berbentuk text (Multiple Line)
 <label> Untuk memberikan label pada inputan
 <fieldset> Mengelompokkan element-element pada form
 <legend> Memberikan caption (nama) pada fieldset
 <optgroup> Mengelompokkan/menggrupkan pilihan inputan pada selectbox

Contoh Form Sederhana

Contoh Penggunaan Form dan style

Attribut pada elemen Form

Seperti halnya attribut pada elemen lainnya attribut form juga digunakan untuk menambah informasi dan pengaturan tambahan pada elemen form yang kita buat, misalnya menambah size, jumlah rows, atau sekedar hint pada elemen yang kita buat. perhatikan contoh pada file sebelumnya, disana kita sudah menuliskan beberapa form attribute seperti placeholder, max, min dll. beberapa form attribut lain, yang akan kita pelajari diantaranya adalah :

Elemen Attribut Pengertian
Value Memberikan nilai value (hasil) pada inputan
Name Memberikan nama pada inputan
Readonly Digunakan agar inputan tidak bisa di rubah (hanya di baca)
Disabled Digunakan agar inputan tidak berfungsi
Size Menspesifikasikan jumlah (dalam karakter) untuk field inputan
Maxlength Jumlah maksimal karakter yang bisa di input
Required Digunakan agar inputan wajib diisi
Autofocus Digunakan agar ketika kita buka halaman langsung menuju inputan tersebut
Placeholder Text abu-abu sebagai hint atau petunjuk dari suatu inputan
Min and max Nilai(int) minimal dan maksimal dari suatu inputan
Height and width Merubah lebar dan tinggi suatu inputan

Table

Table sering kita gunakan untuk membuat suatu list data. misal Data Siswa, Data Mahasiswa, Data Karyawan, dll. jadi elemen table akan sering kita jumpai dan wajib kita kuasai bagaimana cara membuatnya.

Gel. SPP Reguler karyawan International Program
Diploma (D3) Sarjana (S1) Diploma (D3) Sarjana (S1)
I Rp 800.000,- Rp 1.920.000,-
(Per Semester)
Rp 2.280.000,-
(Per Semester)
Rp 2.420.000,-
(Per Semester)
Rp 2.780.000,-
(Per Semester)
USD 1.600,-/Semester
*Jaminan Kuliah + Magang di Inggris dan Singapore
II Rp 1.200.000,-
III Rp 1.700.000,-
IV Rp 2.200.000,-

Untuk membuat table seperti contoh diatas, perhatikan penjelasan dibawah ini.

  • Table di mulai dengan menggunakan tag <table>.
  • Table terdiri dari head table dan body table. header di gunakan untuk menspesifikasikan nama kolom yang akan kita buat, sedangkan body table digunakan untuk mengisi datanya.
  • Untuk membuat header table, gunakan struktur <thead><tr><td> atau <tr><th>, sedangkan untuk membuat body table kita bisa menggunakan struktur <tbody><tr><td> atau cukup <tr> <td> saja.
  • Tiap baris dalam sebuah table di mulai dengan menggunakan tag <tr>.
  • Jumlah kolom dalam setiap baris harus sama, dan didefinisikan dengan menggunakan tag <td>.
  • penggabungan cell dapat dilakukan dengan 2 cara :
    1. penggabungan baris dengan menggunakan rowspan=”n”
    2. Penggabungan kolom dengan menggunakan colspan=”n”
    3. n adalah jumlah cell yang akan digabungkan
  • table memiliki attribut khusus width, border, cellpadding, cellspacing, dll.

Contoh Table Sederhana

 

Contoh Table dengan penggabungan baris dan kolom

Catatan

  • Semua baris meskipun berada di tengah-tengah dianggap sebagai baris baru dan dimulai dengan tag <tr>.
  • Untuk membuat table yang terdiri dari beberapa penggabungan cell dan baris kita cukup menghitung jumlah kolomnya terlebih dahulu, kemudian buatlah tag <td>.
  • Jika dalam kolom tersebut terdapat penggabungan baris gunakan rowspan=”(sesuaikan dengan jumlah barisnya)”.
  • sedangkan untuk peggabungan kolom gunakan colspan=”(sesuaikan dengan jumlah kolomnya)”.

 

Contoh Table dengan warna rows yang berbeda-beda

Demikian penjelasan mengenai pembuatan table pada HTML. mudah-mudahan bermanfaat buat kita semua
Keep Learning ^_^
Semangat

CSS Selector Lanjutan Bagian 1

Seperti yang sudah kita pelajari sebelumnya, CSS Selector digunakan untuk menyeleksi elemen HTML yang akan kita sisipkan style.

Tabel dibawah ini saya ambil referensi dari W3schools/cssref. Jika anda punya kemampuan bahasa inggris yang cukup, saya sarankan anda merujuk ke sumber aslinya. dan untuk memahami lebih detail mengenai CSS Selector silakan anda baca artikel dibawah ini sampai selesai atau anda bisa langsung menuju ke halaman ini w3schools/trial

Selector Contoh Deskripsi Contoh Versi CSS
.class .intro Menyeleksi semua elemen yang memiliki class=”intro” 1
#id #firstname Menyeleksi elemen yang memiliki id=”firstname” 1
* * Menyeleksi Semua Elemen 2
element/tag p Menyeleksi semua elemen p(paragraf) 1
element,element (pisahkan dengan koma) div, p Menyeleksi semua elemen div dan p 1
element element div p Menyelesi semua elemen <p> yang ada didalam elemen <div> 1
element>element div > p Menyeleksi semua elemen <p> yang berada 1 tingkat dari elemen <div>. pada dasarnya hampir mirip dengan yang div p, namun dikhususkan untuk elemen yang berada 1 tingkat didalamnya tanpa terhalang elemen lain 2
element+element div + p Menyeleksi elemen <p> yang ditempatkan langsung setelah elemen <div> 2
element1~element2 p ~ ul Menyeleksi semua elemen <ul> yang secara hirarki sejajar dengan elemen <p> 3

Untuk memahami semua contoh diatas, perhatikan contoh dibawah ini.

Demikian materi untuk hari ini, untuk materi CSS Selector selanjutnya akan kita bahas di artikel selanjutnya. Sering-sering cek blog ini yah kawan-kawan, semoga rekan-rekan makin bersemangat untuk mempelajari CSS.

Keep Learning ^_^

CSS Box Model

Semua elemen HTML pada dasarnya bisa kita anggap sebagai sebuah box/kotak. dalam CSS, pengaturan dan pemahaman tentang “box model” sangat diperlukan dalam membangun sebuah design dan layout. tanpa memahami hal ini, kita akan kesulitan dalam membuat layout yang kompleks. misalnya kita akan membuat suatu halaman web yang terdiri dari 3 kolom, 4 kolom dan lain lain.

CSS Box model pada dasarnya adalah sebuah kotak yang melingkari elemen HTML yang terdiri dari sebuah margin, garis (border), padding dan ukuran sebenarnya dari elemen tersebut. perhatikan ilustrasi dibawah ini

lorem ipsum dolor sir amet

Penjelasan

  • Content : area dimana kita menempatkan text dan gambar
  • Padding : area bagian dalam yang mengelilingi content
  • Border : garis yang melingkari content
  • Margin : jarak content yang kita buat dengan content lain, areanya berada di luar baris.

Lebar dan Tinggi Suatu Elemen

Pernahkan kita mengharapkan lebar dari 2 buah elemen sebesar 50%, namun kedua elemen itu tidak saling bersebelahan dan tidak sesuai dengan yang kita harapkan? atau contoh lain pernahkah kita mengharapkan sebuah artikel dengan 3 buah kolom, namun yg terjadi malah 2 kolom dan 1 kolom lagi kebawah?
kasus-kasus demikian sering kita jumpai jika kita tidak mengetahui penjelasan dibawah ini.

Catatan :

Ketika kita mengatur lebar dan tinggi suatu elemen, kita hanya mengatur ukuran area content dari gambar yang sudah kita lihat diatas. untuk menghitung lebar atau tinggi sebenarnya kita harus menambahkan padding, margin dan border yang sudah kita set pada elemen tersebut.

Perhatikan contoh dibawah ini


jika kita lihat, kedua elemen diatas diset dengan ukuran berbeda. namun pas di render ternyata memiliki ukuran yang sama. mengapa demikian? ternyata lebar dan tinggi suatu elemen dipengaruhi oleh border dan paddingnya. untuk kasus diatas maka yang terjadi adalah :
Width = 270px + 34px (padding kanan dan kiri) + 6px (border kanan dan kiri) + 0px (margin kanan dan kiri).

  • Lebar sebenarnya dari suatu elemen : Lebar content + padding kanan dan kiri + border kanan dan kiri + margin kanan dan kiri
  • Tinggi sebenarnya dari suatu elemen : Tinggi content + padding atas dan bawah + border atas dan bawah + margin kanan dan kiri
  • Untuk IE versi 8 dan dibawahnya, secara default dia bertipe border-box yang artinya Tinggi sebenarnya sudah termasuk padding dan border didalamnya. untuk mengatasi masalah ini, tambahkan pada bagian atas document HTML

Box-sizing

Setelah kita memahami penjabaran diatas, untuk melengkapi pengetahuan kita dalam mempermudah pembuatan layout maka kita perlu mengetahui sintaks box-sizing pada CSS. box-sizing memiliki value (padding-box, content-box dan border-box). Pada umumnya, semua elemen HTML bertipe content-box yang perilakunya sudah kita jelaskan diatas. karena perilaku content-box, kadang kita kesulitan untuk membagi kolom terlebih lagi jika menggunakan persentase karena berapapun kita set maka akan di jumlahkan dengan padding, margin dan border pada elemen tersebut.

Box-sizing di perkenalkan pada CSS3 dan yang paling banyak digunakan saat ini adalah border-box. Mengapa border-box? border-box sifatnya berbanding terbalik dari content-box. Tipe ini mengambil jatah padding dan border dari lebar/tinggi yang kita berikan kepada elemen tersebut sehingga kita tidak usah khawatir lebar/tingginya bertambah. border-box mempermudah kita dalam pengaturan layout responsive. di beberapa framework kekinian, bootstrap misalnya melakukan reset untuk semua elemen html agar bernilai border-box dengan menggunakan sintaks dibawah ini :

atau dengan cara yang lebih elegen :
box-sizing pada elemen mengikuti pengaturan dari elemen diatasnya (inheritance), elemen paling induk adalah html.

Untuk memahami lebih lanjut tentang border-box, perhatikan contoh dibawah ini. (silakan bandingkan dengan contoh sebelumnya)

Pembagian kolom dengan memanfaatkan teknik box-sizing:border-box

Jika box-sizing dirubah jadi content-box atau dihilangkan

contoh pembagian layout dengan memanfaatkan floating dan box-sizing

Demikian penjelasan singkat mengenai Box Model pada CSS, jika ada pertanyaan seputar materi ini silakan tanyakan di kolom komentar.

Keep Learning
Semangat ^_^

Pengenalan CSS bagian 3 (CSS Sintaks & Selector)

Sebelum kita membahas CSS selector, pada materi sebelumnya kita sudah mengetahui bahwa aturan penulisan sintaks CSS adalah sebagai berikut


(source : https://www.w3schools.com/css/css_syntax.asp)

Dari gambar diatas, Selector berfungsi untuk memilih atau menyeleksi elemen mana yang akan kita atur, sedangkan declaration adalah sintaks CSS yang kita sisipkan yang terdiri dari nama properti dan value dari properti tersebut. Jika kita ingin menyisipkan beberapa deklarasi CSS, maka pisahkan dengan titik koma(;).

Jika kita masih belum paham fungsi selector, coba pahami analogi dibawah ini.
Ketika kita menyuruh tukang bangunan untuk mengecet dinding rumah kita, maka kita harus menjelaskan dinding sebelah mana yang mau dicat, karena dinding rumah itu bisa di dapur, di kamar, di bagian tengah, dll. begitu pula dengan elemen HTML. sebelum membuat CSS, kita dianjurkan untuk menyusun elemen HTML nya terlebih dahulu. lalu setelah itu satu persatu kita atur elemen mana yang akan kita rubah tampilannya, geser posisinya, sisipkan backgorund, dll dengan menggunakan CSS selector

CSS Selector digunakan untuk memilih atau menyeleksi elemen html yang akan kita atur CSS nya berdasarkan pada :

  • nama element (by Tag) contohnya h1, p, div, header, section, dll.
  • id dari suatu elemen (by ID) contohnya <section id=”home”>, <section id=”profil”>, dll.
  • class dari suatu elemen (by Class) contohnya <article class=”nobg”>, <article class=”no-padding”>, dll.
  • attribute dari suatu elemen selain id dan class (by Attribute name) contohnya <input type=”text” ../>, <input name=”phone” />
  • berdasarkan event tertentu misalnya pada saat tombol di hover (:hover) pada saat checbox di checked (:checked)
  • dan masih banyak lagi yang lainnya selama css masih dikembangkan dan disesuaikan dengan perkembangan teknologi

Untuk memahami semua selector diatas, mari kita praktekkan satu persatu.

Tag/Elemen Seletor

Selector ini menyeleksi suatu elemen berdasarkan nama tag yang kita pakai untuk menulis elemen tersebut. contohnya kita mengiginkan bahwa untuk setiap judul yang kita tulis ingin bergaris bawah, dan tulisannya huruf kapital. sedangkan untuk paragraf yang kita buat agak menjorok ke dalam.

Kadang-kadang, meskipun kita menggunakan elemen yang sama kita ingin memberikan pengaturan yang berbeda. Kita tidak mungkin untuk mengatur berdasarkan tag tersebut, dikarenakan tag tersebut digunakan ditempat yang lain dengan bentuk yeng berbeda. oleh karena itu, ada cara lain dalam menyeleksi suatu elemen yaitu dengan menggunakan ID atau Class pada elemen tersebut.

ID Selector

  • ID selector menggunakan attribut id pada elemen HTML untuk menyeleksi elemen tersebut.
  • ID pada tiap elemen harus unik, jadi ID Selector digunakan untuk menyeleksi elemen yang unik.
  • Untuk menyeleksi id pada suatu elemen gunakan karakter hash(#) lalu diikuti dengan nama id yang kita tulis pada elemen tersebut.

Class Selector

  • Class selector menggunakan attribut class pada elemen HTML untuk menyeleksi elemen tersebut.
  • Untuk menyeleksi class pada suatu elemen gunakan karakter dot(.) lalu diikuti dengan nama class yang kita tulis pada elemen tersebut.

Untuk memahami selector dengan ID dan Class perhatikan contoh dibawah ini

Perbedaan antara ID dan Class

  • ID seharusnya Unique
    • Dalam 1 elemen hanya boleh memiliki 1 ID
    • Dalam 1 document tidak boleh ada ID yang sama
    • Meskipun kita memakai id yang sama dan tetap ditoleransi oleh browser, namun jika kita menggunakan javascript, maka yang terbaca hanya satu elemen atau bahkan tidak sama sekali.
  • Class tidak Unique
    • Dalam 1 elemen boleh memiliki multi class
    • Class yang sama bisa digunakan di semua elemen meskipun dalam document yang sama

 

Selain menggunakan ke 3 selector diatas, kita pun bisa melakukan pengaturan berdasarkan nama attribut atau berdasarkan event tertentu. contohnya saya ingin merubah semua inputan bertipe text dan textarea. atau saya ingin merubah background button menu ketika di hover. Perhatikan contoh dibawah ini :

Demikian Penjelasan mengenai CSS Selector dan contoh implementasinya. mudah-mudahan bermanfaat bagi kita semua. jika ada pertanyaan terkait materi ini, atau ada yang tidak paham dengan sintaks-sintaks baru yang saya tulis diatas, silakan kirim komentar pada kolom dibawah artikel ini.

Keep Learning
Semangat ^_^

Pengenalan CSS bagian 2 (Internal dan External CSS)

Pada bab sebelumnya kita sudah mengetahui pengertian CSS dan bagaimana CSS disisipkan dengan teknik inline CSS. pada artikel kali ini , kita akan belajar bagaimana menyisipkan CSS dengan menggunakan internal/embeded CSS dan external CSS.

Internal CSS

Sebelumnya kita sudah mendapatkan gambaran bahwa Internal CSS adalah sintaks CSS yang ditulis bersamaan dengan file HTML yang kita buat dengan menggunakan elemen <style>… </style>. Internal CSS lazimnya ditulis didalam tag/elemen <head> yang berada pada bagian atas dokumen HTML, namun meskipun disimpan didalam body atau didalam elemen lainnya akan tetap terbaca selama elemen yang membutuhkannya berada di bawahnya.

Untuk menyeleksi elemen yang akan kita gunakan dalam Internal CSS kita akan mengenal istilah selector yang mana akan kita pelajari setelah memahami penggunaan External CSS.

 

berdasarkan contoh diatas, bandingkan pengunaan CSS internal dengan inline CSS, lebih rapih dan mudah bukan? ^_^. Meskipun demikian, penggunaan CSS internal sedikit sekali di gunakan untuk membangun sebuah web. CSS internal biasanya di generate bersamaan dengan tag HTML yang dihasilkan oleh server side scripting seperti PHP, nodeJS, Ruby, dll. CSS pada umumnya dibuat dengan menggunakan External CSS seperti yang akan kita bahas dibawah ini. masih semangat kan kawan-kawan?

External CSS

External CSS memisahkan antara file html dengan file CSS. file CSS berkestensi .css kemudian dihubungkan dengan menggunakan tag/elemen <link> yang biasanya di simpan di dalam tag <head>. penggunaanya mirip sekali dengan Internal CSS yang membutuhkan selector untuk menyeleksi elemen mana yang akan kita sisipkan CSS. untuk memahami penggunaan CSS External, ikuti langkah berikut ini :

  1. Buatlah halaman html yang terdiri dari header berisi text (seperti pada materi sebelumnya) kemudian berikan judul dan konten pada halaman web yang anda buat. (lihat contoh dibawah ini)
  2. pada tag <head> buatlah tag seperti dibawah ini, atau jika anda menggunakan sublime text cukup mengetikkan kata link lalu pencet tab, pastikan tampilan headnya jadi seperti ini.
  3. Buatlah file CSS seperti yang telah anda buat sebelumnya pada materi internal CSS (Lihat contoh dibawah ini)

Demikian penjelasan singkat mengenai CSS internal dan external. pada saat kita membuat CSS pada contoh diatas, secara tidak langsung kita sudah menyeleksi elemen mana yang akan kita beri CSS dengan menggunakan selector Tag/Elemen.

Apa itu Selector?
Berapa banyak tipe selector?
Pokok bahasan ini kita pelajari pada bagian selanjutnya.

Keep Learning ^_^
Semangat