5 Browser Terbaik Untuk PC

5 Browser Terbaik Untuk PC

Jumat, 21 Oktober 2016 / No Comments

       Hallo Sobat Coding :D Kali ini saya akan share 5 Browser Terbaik Untuk PC
Seperti yang kita tau Browser artinya menjelajah dengan mengikuti link di halaman web. Browser adalah software/aplikasi/perangkat lunak yang digunakan untuk mengakses/ menampilkan halaman web.
       Lebih jelasnya Web browser adalah aplikasi perangkat lunak digunakan untuk mencari, mengambil dan juga menampilkan informasi di WorldWide Web, termasuk halaman Web, gambar, video dan file lainnya.

       Browser yang baik menurut saya itu :

1 . Yang pasti Stabil

2 . Ringan (Karena PC saya low-end :v )

3 . Gratis (Biasa lahh kenapa cari yang bayar :D )

       Nahh setelah melihat kriteria tadi saya melakukan beberapa experiment :D dan mendapatkan beberapa web browser yang sesuai dengan kategori saya yaitu :

1 . UC browser 

Pengembang : UCweb

Lisensi : gratis

Link Download : Download Disini

2 . Opera Browser

Pengembang : Opera Software

Lisensi : Gratis

Link Download : Download Disini

3 . Maxthon Could Browser

Pengembang : Maxthon Ltd

Lisensi : Freeware

Link Download : Download Disini

4 . Avant Browser

Pengembang : Avant Force

Lisensi : Freeware Browser

Link Download : Download Disini

5 . Google Chrome

Pengembang : Google

Lisensi : Gratis

Link Download : Download Disini

Itulah Informasi yang dapat saya sampaikan jika ada yang ingin menyanggah pendapat saya silahkan commend di bawah :D Sekian dari saya

Salam Coding !

Apa Itu HTML ?

Apa Itu HTML ?

Kamis, 20 Oktober 2016 / No Comments

Apa Itu HTML

         Halo sobat koding , berjumpa lagi dengan kami .. kali ini kami akan menyuguhkan materi pemrograman berbasis web ... Nah sobat , ketika kalian melihat suatu website atau sejenisnya , pernahkah kalian terpikir bagaimana sih para programmer membuat website tersebut . Nah itu yang akan kita bahas hari ini . Untuk membuat suatu web , ada banyak berbagai type kode/script yg membangun web tersebut . salah satunya yaitu ada HTML , PHP , JAVASCRIPT , CSS , Jquery , dan lain” (ribet mau njelasin panjang lebar :v) . Nah sobat koding , Yg akan kita kupas terlebih dahulu adalah HTML .. tak usah panjang lebar , berikut penjelasannya.

Definisi HTML

          HTML yang akan dibahas meliputi beberapa tahap, yaitu level HTML, HTML Extension dan program Editor HTML. HTML adalah format data yang dipakai untuk membuat dokumen HyperText. Dokumen HTML disebut Mark Language, karena berisi tanda tanda tertentu yang digunakan untuk menentukan tampilan suatu teks dan tingkat kepentingan dari teks tersebut dalam suatu dokumen. Pada sistem HyperText pada dokumen HTML, Anda tidak harus membaca dokumen secara urut dari atas ke bawah, melainkan cukup menuju pada topik tertentu secara langsung dalam dokumen. Ini dikarenakan dokumen tersebut menggunakan teks penghubung ke suatu topik/ dokumen lain secara langsung.

          HTML kependekan dari Hyper Text Markup Language. Dokumen HTML adalah file teks murni yang dapat dibuat dengan teks editor. Dokumen ini dikenal sebagai web page. Dokumen HTML merupakan dokumen yang disajikan dalam web browser.

Penggunaan HTML

         Ada dua cara untuk membuat web page, denghan HTML editor atau editor text biasa (misal : notepad). Atau juga bisa memakai sublime text (sejenis text editor seperti notepad) tetapi dengan menggunakan sublime text , kita bisa tahu elemen – elemen yang ada di html karena setiap elemen diberi warna yang berbeda .. berbeda jauh dengan notepad karena notepad tak punya penanda untuk mengklarifikasikan elemen html tsb sehingga sulit untuk mencari kesalahan-kesalahan yang ada didalam web tsb .

Penamaan Dokumen

Dokumen HTML diberi nama sembarang kemudian diberi tambahan ekstensi ”.htm” atau ”.html”

Definisi Elemen

Dokumen HTML disusun elemen-elemen  atau komponen dasar pembentu HTML. Contoh dari elemen dokumen HTML adalah : head , body, table, paragraf, list.

Definisi Tag

Tag digunakan untuk menandai elemen dalam suatu dokumen HTML. Tag HTML terdiri atas sebuah sudut kiri (<, tanda lebih kecil), nama sebuah tag, dan sebuah tanda kurung sudut kanan (>, tanda lebih besar. Tag umumnya berpasangan, sebagai contoh <H1>

 Dengan </H1>. Secara umum suatu elemen dalam dokumen HTML yang dinyatakan dengan tagnya, dituliskan :
<namatag> - </namatag>

Elemen HTML yang diperlukan

Elemen yang dibutuhkan untuk membuat suatu dokumen HTML dinyatakan dengan tag <html>,<head>, dan <body>.Setiap dokumen terdiri atas tag head dan body. Elemn Head berisi informasi tentang dokumen tersebut, dan elemen body berisi teks yang akan ditampilkan di browser.

Berikut contoh penulisan HTML :

<html>

<head>

<title>Belajar Web Design</title>

</head>

<body>

ini adalah halaman HTML

</body>

</html>

     Setelah itu simpan dengan nama sesuai keinginan , dengan extensi .html / .htm , lalu coba di browser kalian , maka hasilnya seperti dibawah ini :

 Nah sekian materi pemahaman tentang apa itu html .. mohon maaf apabila kami ada salah kata dalam penyampaian .. and don’t forget to keep visit for more awesome articles .. stay tune XD .

Nb : Jangan lupa untuk kasih komentar :D

TUTORIAL MEMBUAT MENU NAVIGASI DENGAN HTML&CSS

TUTORIAL MEMBUAT MENU NAVIGASI DENGAN HTML&CSS

Rabu, 19 Oktober 2016 / No Comments

TUTORIAL MEMBUAT MENU NAVIGASI DENGAN HTML&CSS

     Halo sobat koding , Berjumpa lagi dengan kami .. sebelumnya kami sudah menerangkan tentang pengenalan CSS , sekarang kami akan memberi tutorial bagaimana membuat menu navigasi di dalam sebuah website dengan tampilan yang sangat dinamis . berikut dibawah ini contoh menu navigasi yang sudah dibuat .

Gambar di atas merupakan tampilan atau contoh dari menu navigasi yang akan kita buat. Seperti yang kita lihat terdapat tiga menu utama yaitu HOME, CONTACT, dan ABOUT. Kemudian pada menu contact terdapat tiga sub-menu atau  dropdown menu Facebook, Twitter dan Google+. Pada contoh di atas terdapat link atau perintah menuju halaman yang kita inginkan akan tetapi belum befungsi jika diklik karena link pada tujuan belum ada (masih menggunakan #).  Anda cukup mengganti tanda # dengan link halaman yang anda inginkan. Ok sekarang tinggal ngodingnya aja :v

Terdapat dua file yaitu file menu.html dan file style_menu.css, ketik dan simpan masing-masing  kode tersebut pada folder yang sama.

menu.html

<!doctype html>
<html>
<head>
 <title>Menu Navigasi</title>
 <link href="style_menu.css" rel="Stylesheet" type="text/css">
</head>

<body>
 <div id="menu">
  <ul>
   <li><a href="#">HOME</a></li>
   <li><a href="#">CONTACT</a>
    <ul>
     <li><a href="#">Facebook</a></li>
     <li><a href="#">Twitter</a></li>
     <li><a href="#">Google+</a></li>
    </ul>
   </li>
   <li><a href="#">ABOUT</a></li>
  </ul>
 </div>
</body>
</html>

style_menu.css

#menu li ul {
    display:none;
  position:absolute;
 }
 #menu li:hover > ul {
    display:block;
 }
 #menu ul{
  margin:0;
  padding:0;
  line-height:35px;
 }
 #menu li{
  float:left;
  list-style:none;
  position:relative;
  text-align:center;
  width:170px;
  background-color:#009900;
 }
 
 #menu li ul ul {
    left:100%;
    top:0px;
 }
 #menu li li{
  float:none;
  background-color:#007700;
 }
 #menu li li li{
  background-color:#005500;
 }
 #menu li li li li{
  background-color:#003300; 
 }
 #menu li a{
  color:#ffffff; 
  text-decoration:none;
  text-align:center;
  display:block;
 }
 #menu li a:hover{
  background-color:#555;
  text-decoration:none;
  color:#FFFF00;
 }

 Kalo sudah terpasang , sekarang kalian coba di browser masing-masing .

       

     Nah sobat koding , cukup sekian pengenalan CSS dari kami , artikel berikutnya akan membahas tentang Animasi didalam CSS . Stay Tune ... XD

Nb : Jangan lupa kasih komentar di bawah ..:D

Komponen CSS

Komponen CSS

Selasa, 18 Oktober 2016 / No Comments

KOMPONEN CSS

      

          Secara sekilas, setiap properti yang telah kita pelajari bahwa memberiakan nilai yang berbeda-beda pada setiap properti yang ada.

Nilai-nilai yang sering muncul pada properti-properti diatas adalah:

• length
• percentage
• color
• URL
• keyword 
• shape

          

        Setiap properti yang diberikan akan mampu mengambil nilai-nilai diatas sesuai dengan jenis properti-nya.Kadang, properti-properti tersebut tidak selalu dapat mengambil setiap jenis nilai yang diberikan nilai-nilai diatas, contohnya tidak semua properti dapat mengambil nilai yang negatif sama seperti properti tersebut mengambil nilai positif.

         Catat bahwa semua properti juga bisa mengambil yang inherit (dapat mewariskan nilai pada elemen turunnya). Ada beberapa niali yang 'memaksa' sebuah elemen yang terpilih untuk mewariskan nilai dari elemen induknya, meskipun biasanya properti tersebut tidak melakukan pewarisan atau mewarisi sebuah nilai kepada elemen lain.

Nilai Panjang

        Nilai panjang ini dapat berupa nilai positif atau negatif, mempunyai nilai bilangan dan harus diikuti dengan unit ukuran panjang.Catat bahwa nilai panjang ini dapat berupa nilai positif atau negatif, sedangkan beberapa properti yang telah kita pelajari diatas tidak dapat menerima ukuran nilai panjang yang negatif.

       Terdapat dua buah jenis dasar dari sebuah nilai panjang yaitu relatif dan absolut.Nilai panjang absolut sebaiknya hanya digunakan ketika kita telah mengetahuiukuran dari sebuah output halaman web tersebut. Karena disini absolut lebih bersifat statik sehingga jika ada perubahan pada resolusi atau pixel, maka dapat merusak keseluruhan halaman web.

       Sebaiknya anda menggunakan nilai panjang relatif, sehingga halaman web dapat ditampilkan dalam berbagai medium prantara output ketempat halaman web tersebut nanti akan ditampilkan meskipun resolusi maupun ukuran pixel dari outputnya berbeda-beda.

Beberapa unit pengukuran panjang dapat dilihat pada tabel berikut:

       Dengan mempelajari setiap ukuran panjang ini, kita akan mengetahui apa kekurangan dan kelebihan dari masing-masing ukuran panjang ini.

Nilai Presentase

      Selain menggunakan pengukuran banyak properti bisa juga mengambil nilai presentase.Anda dapat meningat bahwa sebuah elemen berada di dalam sebuah elemen induk(sebagai contoh sebuah<paragaf>akan berada di dalam <body>).Biasanya nilai presentase menentukan nilai presentase dari elemen induknya.

      Sebagai contohnya, menentukan lebar properti dengan menggunakan nilai presentase berarti lebar sebuah elemen akan tergantung dengan persentase yang diberikan kepada elemen itu yang akan mempengaruhi elemen induk dari elemen itu. Singkatnya seperti berikut:

   

    p {widht:75%}

       Kode diatas berarti elemen paragraf akan berukuran 75% lebar dari elemen induknya, biasanya elemen body.Nilai presentase sangat penting dalam memposisikan sebuah elemen, jika seorang user memperbesar atau memperkecil browser window mereka, maka ukuran lama tetap akan bertahan tanpa perubahan pada tampilan desingnya .

       Bentuk dari nilai presentase ini adalah positif dan tanda negatif (tidak ada tanda berarti positif)diikuti dengan bilangan di belakangnya, selanjutnya diikuti dengan simbol persen (%)Sebagai contohnya, -25%,+15% atau 15%.

Nilai Warna (Properti Color)

Nilai properti color ada tiga jenis diantaranya:

• Nama warna
• Warna dengan kode hexadecimal
• Warna RGB

Nilai Bentuk (Shape)

        Salah satu yang tidak bisa yaitu niali bentuk.Ini biasanya hanya digunakan pada properti clip,diperlukan sebagai bagian dari CSS2 yang mendefinisikansebuah bentuk. Sekarang terdapat bentuk persegi (rectangular) yang sederhana.

Bentuk dari persegi ini adalah:

rect (top left bottom right)

       Setiap bagian atas, bawah, kiri dan kanan bisa berupa nilai panjang atau menggunakan kata kunci auto.Auto berarti setidaknya pada cliping context, nilai dari posisi properti ini sama dengan elemen itu sendiri.

       Nilai ini akan didefinisikan ulang karena ini tidak mengikuti model CSS yang sama dengan CSS1, dimana posisi didefinisikan dengan menmasukan nilai sudut atas dan kiri halaman dengan dan tinggi.
      
       Nah sobat koding , cukup sekian pengenalan CSS dari kami , artikel berikutnya akan membahas tentang Tutorial Membuat Menu Navigasi dinamis dengan CSS . Stay Tune ... XD

Atau Kalian Bisa download e-book CSSnya disini -> DOWNLOAD (MediaFire)

Nb : Jangan lupa kasih komentar di bawah ..:D

Syntax Dasar CSS

Syntax Dasar CSS

/ No Comments

SYNTAX DASAR CSS

       Halo sobat koding , sebelumnya kami menjelaskan tentang Anatomi CSS , selanjutnya kami akan menjelaskan tentang Syntax Dasar CSS . Berikut Penjelasannya.

       CSS memiliki struktur yang hampir sama pada semua syntaxnya. Semua syntax CSS menggunakan 1 format dengan beberapa opsional tambahan yang akan saya bahas pada artikel selanjutnya. Format dari Syntax CSS adalah :

#selector { property: value; property: value; }

.class { property: value; property: value; }

           Harus anda pahami bahwa CSS akan memberikan perintah pada halaman xhtml, sehingga pastikan anda mengetahui tentang selector dan class. Selector merupakan tag xHTML yang diawali dengan <div id=header>, dan Class merupakan tag xHTML yang diawali dengan <div class=heading>. dari contoh diatas saya simpulkan bahwa header merupakan Selector dan Heading merupakan class.

           Selanjutnya kita membahas mengenai Property dan value. semua isi syntax yang berada diantara kurung kurawal ( { } ) dinamakan Deklarasi. isi dari deklarasi tersebut tidaklah lain adalah kumpulan property yang diberi nilai (Value), dan diantara 1 property dengan property lainnya harus diberi simbol semi-colon ( ; ) sebagai pemisah antar property. Silahkan perhatikan contoh Script CSS Berikut Ini.

#CssMastering { background: #000; border: 1px solid #333; margin: 1px;padding: 1px }

      Dari Contoh diatas saya simpulkan bahwa merah adalah selector, biru adalah property, hijau adalah value, semua text yang diberi garis bawah adalah Deklarasi dan deklarasi diapit oleh kurung kurawal. Begitulah syntax dasar Css, anda dapat mulai menuliskan sedikit syntax syntax diatas untuk berkreatifitas dengan imajinasi anda sendiri. Pembuatan Css memang dibutuhkan kesabaran dan keuletan. Karena 7000 Karakter merupakan jumlah Karakter yang sedikit dalam pembuatan Css.

       Nah sobat koding , cukup sekian penjelasan dari kami , artikel berikutnya akan membahas tentang Komponen CSS . Stay Tune ... XD

Atau Kalian Bisa download e-book CSSnya disini -> DOWNLOAD (MediaFire)

Nb : Jangan lupa kasih komentar di bawah ..:D

Anatomi CSS

Anatomi CSS

/ No Comments

ANATOMI CSS

          Halo sobat koding , kali ini kami akan melanjutkan pembahasan tentang "Anatomi CSS" , tak usah basa basi langsung mulai saja penjelasannya.

          

          

           Bagian – bagian utama dari sebuah CSS itu terdiri dari tiga bagian yaitu: selector, property, value. Jika dalam HTML dikenal ada tag-tag yang menyusun sebuah dokumen HTML maka dalam CSS juga dikenal dengan sebutan selector. Bagian CSS Keterangan

• Selector

  - nama-nama yang diberikan untuk style-style yang berbeda, baik itu style internal                 maupun eksternal

  - bagian elemen HTML yang akan ditunjuk untuk mengatur style

  - dapat berupa class dan ID

• Property

  - aturan dalam CSS untukmengubah selector yang dipilih

  - property mempunyai nilai yang disebut dengan value

  - properties di dalam tanda { } value.

  - Merupakan nilai dari property CSS

  

        CSS memiliki aturan tersendiri dalam penulisan sintaks. Penulisan sintaks tersebut terbagi ke dalam tiga bagian yaitu: selector, property, dan value. Format penulisan bagian-bagian dari CSS dapat dituliskan sebagai berikut :

Selector{ Property : value; }

Berikut ini sedikit contoh penggunaan selektor, property, dan value untuk mengatur style pada sebuah form

form{ margin-left:0; }

Dari contoh penggunaan selector, property, dan value di atas maka tiap bagian akan di jelaskan sebagai berikut :

- form : selector yang akan di atur stylenya

- margin-left : property yang digunakan untuk jarak fieldset dari batas kiri layout

- 0 : nilai dari property margin-left

    Dengan adanya CSS memungkinkan untuk menampilkan halaman yang sama dengan format yang berbeda.

   Nah sobat koding , cukup sekian penjelasan dari kami , artikel berikutnya akan membahas tentang Syntax Dasar CSS. Stay Tune ... XD

Atau Kalian Bisa download e-book CSSnya disini -> DOWNLOAD (MediaFire)

Nb : Jangan lupa kasih komentar di bawah ..:D