Senin, 30 Januari 2017

[Review] W3CSS - Modern CSS Framework

    , , ,   No comments 
Halo sahabat framework ...
Kali ini kita tidak akan belajar tentang tag di HTML tapi kali ini saya akan meriview sebuah framework css. Framework css adalah sebuah kerangka kerja CSS yang mana memudahkan para web designer untuk membuat sebuah website dengan cepat dan responsive tentunya. Biasanya, fitur dalam framewor css adalah untuk membuat sebuah website menjadi responsive. 



Kali ini framework yang akan kita ulas adalah W3CSS. W3CSS adalah sebuah framework css yang diciptakan oleh W3Schools ( w3schools.com ) . Jika kita ingin menggunakan framework ini kalian dapat mendownloadnya langsung di website w3schools ( w3schools.com ). Di dalam W3CSS , terdapat fitur yang memungkinkan untuk membuat website yang responsive dan memiliki tampilan material seperti google MDL.

Fitur dan kelebihan yang terdapat dalam W3CSS antara lain:
  • Faster ( Cepat )
  • Responsive ( Dapat menyesuaikan dengan ukuran layar )
  • Modern ( Memiliki tampilan modern )
  • CSS Starndart Only ( Hanya menggunakan CSS Standar yang sekarang dipakai yaitu CSS3 )
  • Dapat membuat berbagai properti website ( seperti membuat button, input, slider, carousel, tooltip, modal dan lain - lain )
  • Ringan ( Ukurannya bahkan tidak sampai 1 mb )
  • Tampilan modern ( Terinspirasi dari Google MDL )
Cara menggunakan W3CSS seperti dibawah ini ~>

1. Download dulu filenya
Sesudah kalian membuka website w3schools , kalian pilih saja menu di sidebarnya yang bertuliskan w3css. lalu, kalian scroll ke bawah lalu cari tulisan w3css download. setelah kalian mengklik link tersebut kalian akan dialihkan ke halaman downloadnya. di halaman downloadnya terdapat sebuah link ( https://www.w3schools.com/lib/w3.css ) kalian klik saja link tersebut dan akan muncul source kode dari w3css.
Kalian copy saja kode tersebut dengan cara tekan CTRL + A lalu CTRL + C . Setelah itu kalian pastekan ke text editor seperti gambar dibawah ini ~>
lalu save ke folder kalian dengan cara tekan CTRL + S lalu ketikkan nama w3.css

Setelah kalian mendapatkan filenya , kalian dapat men-include-nya ke file HTML kalian seperti dibawah ini ~>
Oke, cukup sekian untuk hari ini. diartikel selanjutnya kita akan membahas lagi tentang w3css ini dan tentang tag HTML juga. Semoga bermanfaat dan sampai jumpa lagi ... :)


Share This:    Facebook Twitter Google+ Stumble Digg

Kamis, 26 Januari 2017

[Perkenalan] Tag awalan HTML

      No comments 
Halo sahabat framework ...
Masih meneruskan artikel yang sebelumnya, kita kali ini akan belajar tentang tag HTML. Kali ini kita akan belajar tag awal HTML <html> . Tag awal untuk HTML digunakan untuk mengidentifikasi bahasa pemrograman HTML. Tag awal HTML ada dua yaitu <html> & <!DOCTYPE html> . Keduanya mempunyai fungsi yang sama tapi memiliki arti yang berbeda.



Tag <html> digunakan untuk mengawali dokumen HTML sedangkan <!DOCTYPE html> digunakan untuk mengidentifikasi versi HTML ( HTML5 ). HTML5 adalah versi terbaru dari HTML dimana terdapat penambahan fungsi didalamnya seperti dapat menambahkan file audio dan video tanpa memerlukan Adobe flash maupun plugin lainnya.

Kalian dapat melihat kode dibawah ini..

Bisa dilihat dari kode diatas bahwa tag pertama yang diketikkan dalam file HTML adalah tag <!DOCTYPE html> dan <html>. Jadi, saat pertama kali kalian ingin membuat file HTML jangan lupa untuk menuliskan kedua tag tersebut dan juga didalam tag <html> berisi informasi dan konten yang akan ditampilkan di browser kalian.

Untuk artikel yang akan datang, kita akan belajar tentang tag link . Sampai jumpa lagi...
Share This:    Facebook Twitter Google+ Stumble Digg

Senin, 23 Januari 2017

[Perkenalan] Apa sih Tag HTML itu?

      No comments 
Halo sahabat Framework...
Seperti yang saya katakan di artikel kemarin, kali ini kita akan belajar tentang yang namanya TAG. Tag yang saya maksud bukan tag yang seperti di facebook lho ya. Tag, adalah sebuah elemen HTML yang mana fungsinya untuk membangun isi dari HTML tersebut. Penulisan tag adalah berbentuk pasangan. yang dimaksud pasangan, penulisanya diawali dengan tag awal dan diakhiri dengan tag akhir.


Contohnya bisa dillihat dibawah ini ...

Bisa dilihat dari kode diatas, perbedaan dari tag awal dan tag akhir. Tag awal penulisan nama tagnya diantara simbol < dan > sedangkan tag akhir penulisan nama tagnya diantara simbol </ dan > ( untuk tag akhir, penulisanya ditambahkan simbo ' / ' setelah < .

Sampai sini kalian sudah mempunyai gambaran apa itu tag dan bagaimana cara penulisanya di HTML. di artikel sebelumnya, kita sudah membahas bagaimana cara membuat sebuah file HTML sederhana. Nah, jika kalian memperhatikan, pasti kalian sudah tahu bagaimana penulisan struktur dari HTML tersebut. Sistem penulisan HTML diawali oleh tag <html> dan diakhiri dengan tag </html>.

Dan di dalam tag <html> ini lah yang akan berisi konten dan isi dari file HTML. seperti contoh di bawah ini...

Bisa dilihat dari contoh diatas, bahwa diantara tag HTML masih ada tag lagi dan begitu juga seterusnya. Di dalam kode HTML diatas, pasti kalian memperhatikan bahwa ada dua pasangan tag setelah tag HTML. yap benar, kedua pasangan tag tersebut adalah tag <head> ... </head> dan tag <body> ... </body> . dikedua pasang tag inilah konten dari file HTML kalian akan ditampilkan. Tapi, ada perbedaan dari kedua tag tadi. Perbedaanya bisa dilihat dibawah ini.

1. Tag <head> ... </head>
Tag <head> berisi informasi tentang file HTML kalian seperti meta (informasi dari file HTML) dan judul dari file HTML kalian. tag <head> penulisanya adalah <head> ... </head>. informasi yang berada di tag <head> tidaj akan ditampilkan atau dimunculkan di browser kalian kecuali tag <title> ... </title> yang berada diantara tag <head>. tag <title> berfungsi untuk memberikan judul pada file HTML kalian.

tag <title> akan muncul di tab browser kalian ( tab browser berada diatas kotak untuk memasukkan url / alamat website dan berfungsi untuk menampilkan judul dari sebuah file HTML ). Mungkin kalian bingung jika saya jelaskan seperti ini,untuk lebih jelasnya kalian bisa lihat kode dibawah ini...

Bisa dilihat diatas , bahwa tag <head> hanya berisi informasi tentang file HTML buka konten yang akan ditampilkan di Browser kalian. 

2. Tag <body> ... </body>
Tag <body> berisi konten yang akan ditampilkan di browser kalian seperti teks, gambar, audio, video, maps dan lain - lain. Jika kalian melihat kode source artikel blog ini dengan cara menekan tombol CTRL + U , kalian pasti menemukan bahwa konten yang ada diantara tag body ini ditampilkan dibrowser, seperti artikel yang kalian baca ini. Untuk lebih jelasnya, kalian bisa lihat kode dibawah ini...


Dari sini kita sudah mempunyai gambaran dari apa itu yang dinamakan TAG. Tag di HTML mempunyai fungsinya masing - masing seperti untuk membuat Heading , membuat paragraph, membuat link, memunculkan gambar, membuat form input dan lain - lain. Di artikel selanjutnya kita masih akan membicarakan seputar tag dan tag yang akan dibahas selanjutnya adalah tag heading.

Jika kalian mempunyai pertanyaan tentang HTML, CSS dan Framework CSS kalian bisa add facebook saya disini atau kalian bisa langsung berkomentar di kolom komentar. Sampai jumpa :)
Share This:    Facebook Twitter Google+ Stumble Digg

Minggu, 22 Januari 2017

[Perkenalan] Apa saja sih isi dari HTML?

      No comments 
Halo sahabat framework...
Sesuai dengan artikel kemarin, kali ini kita akan mengenal lebih jauh tentang "Bagian - bagian dari HTML". Dari kemarin, kita sudah berkenalan dengan Apa sih HTML dan CSS itu? dan kita sudah belajar Membuat halaman web sederhana menggunakan HTML dalam waktu singkat.  Nah, kali ini, saya akan memperkenalkan kepada kalian Apa saja sih bagian- bagian HTML itu?.


Oke langsung saja dari yang pertama...
1. Tag
Tag adalah elemen dari HTML itu sendiri. Jika file HTML di jalankan makan tag ini tidak akan ditampilkan di layar monitor kalian. Karena tag ini digunakan untuk membuat isi dari file HTML jadi tidak akan ditampilkan namun akan keluar hasilnya sesuai dengan fungsi tag tadi. contoh, saat kita menggunakan tag <b> text ini cuma contoh </b>, maka tag tersebut tidak akan ditampilkan namun  tulisan yang berada di antara tag <b> tadi akan berubah menjadi tebal / bold karena fungsi tag <b> adalah untuk menebalkan huruf.

Tag dinyatakan dalam bentuk pasangan. jadi tag ini mempunyai awalan dan mempunyai akhiran seperti tag <b> diatas, tag awalnya adalah <b> sedangkan tag akhirnya adalah </b> . namun ada beberapa tag di HTML tidak terdapat tag akhirnya seperti tag <input> ( untuk membuat form ) dan tag <br> ( untuk berpindah satu baris di bawah tag lain ).

kalian dapat melihat kode HTML di bawah ini
Jika dilihat sekasama, kode diatas berisi tag -  tag dari HTML yang mana nantinya semua tag diatas tidak akan ditampilkan yang ditampilkan cuma konten yang berada diantara tag - tag yang ada di HTML tadi. Jika kode diatas dijalankan maka akan menjadi seperti yang ada dibawah ini .

2. Komentar
Komentar berfungsi sebagai catatan atau pengingat. contoh, saat kita membuat sebuah kode HTML dan kita menyisipkan komentar didalamnya yang berisi fungsi dari kode HTML tersebut maka jika kita lupa fungsi dari kode HTML yang kita buat tadi, maka komentar ini akan mengingatkan kita apa fungsi dari kode yang kita buat tadi. sama dengan tag, komentar ini juga salah satu dari tag yang mana penulisanya seperti ini <!-- ini komentar --> , di awali dengan <!-- dan diakhiri dengan -->. Kalian dapat melihat contoh dari tag komentar di kode HTML di atas.


Dari sini kita sudah mengetahui bahwa HTML hanya berisi tag dan komentar saja. namun, Tag dalam html ini mempunyai fungsi yang cukup penting dalam pembuatan file HTML karena setiap tag mempunyai fungsinya masing - masing. Di artikel selanjutnya, kita akan belajar tentang tag HTML. Sampai jumpa ... :)
 
Share This:    Facebook Twitter Google+ Stumble Digg

Kamis, 19 Januari 2017

[Tutorial] Membuat halaman web menggunakan HTML dalam waktu singkat

    , ,   No comments 
Berjumpa lagi sahabat framework..
Sesuai dengan postingan yang kemarin, kali ini saya akan membagikan sebuah tutorial sederhana yaitu "Membuat halaman web menggunakan dalam waktu singkat". Jadi, hari ini kita akan berlajar tentang HTML dulu. Namun, sebelum kita membuat sebuah halaman web sederhana dengan HTML kita terlebih dahulu menyiapkan peralatanya terlebih dahulu. 

 
Logo HTML5

Yang pertama, kita membutuhkan yang namanya text editor . Text editor adalah tempat untuk menuliskan kode HTML kita. Di internet, sudah banyak aplikasi text editor yang dapat digunakan, Dari yang gratis sampai yang berbayar. Namun, karena kita baru akan mempelajari tentang HTML, maka saya sarankan menggunakan Notepad++ .

Dibawah ini adalah tampilan dari Notepad++


Oke, lanjut yang kedua, kita membutuhkan sebuah Browser. Browser / Penjelajah Intrenet adalah sebuah alat untuk menjelajah internet. Untuk menjalankan sebuah file HTML, Kita membutuhkan sebuah browser karena file HTML hanya dapat berjalan di browser. Untuk browser ini, terserah anda ingin menggunakan browser apa saja. Karena browser sekarang sudah support dengan versi HTML terbaru.

Oke, langsung saja menuju ke TKP ...

1. Buka dulu aplikasi Notepad++ nya
Cara membuka aplikasi adalah dengan cara tekan tombol WINDOWS + R -> Lalu ketikkan nama notepad++ -> tekan enter. Setelah itu, aplikasi notepad++ nya akan terbuka dan siap digunakan.

 

2. Copy kode yang ada dibawah ini

3. Pastekan kode diatas ke Aplikasi Notepad++
Jika kita mempastekan kode diatas, maka tampilan kodenya akan nampak seperti dibawah ini
4. Save / Simpan
Cara menyimpan kode yang ada di notepad++ tadi, dapat menekan tombol ctrl + s , lalu beri nama file tadi dengan nama index.html . ingat, bahwa file HTML berekstensi .html . Ilustrasinya dibawah ini.

 5. Jalankan file HTML tadi
Cara menjalankanya cukup mudah, yaitu dengan cara double click file HTML tadi dan akan secara otomatis akan berjalan di browser. Atau bisa dengan cara klik kanan file HTML tadi, lalu pilih menu open with dan pilih browser yang akan digunakan. File HTML tadi akan nampak seperti gambar dibawah ini.
Dari sini kita sudah bisa menggambarkan tentang bagaimana caranya kita dapat membuat sebuah halaman web sederhana menggunakan HTML. Ini adalah latihan dalam mempelajari bahasa pemrograman web. saya dulu juga seperti ini saat pertama kali mempelajari bahasa pemrograman web dan hanya diberi materi tentang HTML saja.


Terima kasih kalian telah membaca artikel ini dan semoga bermanfaat bagi kalian semua. Di artikel selanjutnya, kita akan belajar tentang Apa saja sih bagian - bagian dari HTML itu?.


Sampai jumpa lagi di artikel selanjutnya.. :)
Share This:    Facebook Twitter Google+ Stumble Digg

Rabu, 18 Januari 2017

[Perkenalan] Apa sih HTML dan CSS itu?

    ,   No comments 
Halo sahabat framework...
Ini adalah post pertama di blog ini dan kali ini kita akan membahas tentang dasar dari sebuah website yaitu HTML dan salah satu temanya  yaitu CSS. Mungkin, jika kalian yang masuk jurusan TKJ ( Teknik Komputer dan Jaringan ) atau RPL ( Rekayasa Perangkat Lunak ) pasti sudah tidak asing lagi mendengar nama HTML dan CSS. HTML dan CSS adalah salah satu dari sekian banyak bahasa pemrograman untuk web.



Yang pertama, kita akan berkenalan terlebih dahulu tentang "Apa sih HTML itu?". Kata HTML sendiri adalah sebuah singkat yang mana kepanjangaanya adalah "HyperText Markup Language". Jadi, HTML adalah sebuah bahasa pemrograman dasar untuk membuat sebuah halaman web. Bisa dibilang, bahwa HTML adalah dasar / kerangka untuk membuat sebuah halaman website. Jadi, jika saat kalian sedang mencari artikel di internet, semua halaman artikel tersebut dasarnya adalah HTML dan halaman yang sedang kalian baca ini dasarnya / kerangkanya juga adalah HTML. Versi dari HTML sekarang sudah mencapai versi ke lima yaitu HTML5.

Dibawah ini adalah contoh penulisan bahasa pemrograman HTML


Namun, kita tidak bisa membuat halaman web hanya dengan HTML saja. Karena, jika kita membuat halaman web dengan HTML saja, tampilanya cuma itu - itu doang dan tidak ada variasinya. dan karena sebab itulah adanya bahasa pemrograman untuk memperindah tampilan web tersebut, yaitu CSS ( Cascading Style Sheet ).

Jadi "Apa sih CSS itu?". CSS adalah sebuah bahasa pemrograman yang mana digunakan untuk menghias sebuah tampilan halaman web. jadi halaman webnya nggak terlihat monoton atau kaku. jika kita menggunakan CSS, kita dapat merubah warna font/huruf, warna latar belakang halaman web, memformat penulisan dan lain - lain. Versi dari CSS sekarang sudah mencapai versi ke tiga yaitu CSS3.

Dibawah ini adalah contoh penulisan bahasa pemrograman CSS

Oke, mungkin itu saja untuk pengenalan singkat tentang "Apa sih HTML itu?" dan "Apa sih CSS itu?". Terima kasih sudah membaca artikel ini dan semoga bermanfaat. Diartikel saya selanjutnya, saya akan membahas tentang Cara membuat halaman web sederhana menggunakan HTML. Lho kenapa kok HTML saja, kenapa nggak sekalian CSS nya saja. Ini karena untuk mempermudah belajar tentang HTML.
Oke, See you next time.. :)
Share This:    Facebook Twitter Google+ Stumble Digg
Langganan: Postingan (Atom)