MENGENAL HTML

MENGENAL HTML

Sebelumnya saya berterima kasih atas kunjungannya. Jadi disini kita akan membahas mengenai pengenalan html atau mengenal html dan apa saja yang kita butuhkan untuk memulai belajar membuat suatu web atau belajar script html. Jadi script html merupakan dasar dalam membuat suatu web. Kenapa dasar ? karena bahasa html-lah yang akan menampilkan web yang kita rancang di browser, yang telah diterjemahkan sehingga html dikatakan merupakan dasar dalam pembuatan web.

Penemuan www atau world wide web sangat berdampak besar terhadap perkembangan internet. Dengan adanya www sebuah situs dapat berisi sekumpulan informasi berupa teks, gambar dan video. www merupakan url atau alamat web yang ingin ditampilkan. Web didesain dengan menggunakan bahasa html. Html merupakan singkatan dari Hyper Text Markup Language atau merupakan bahasa pemprograman yang digunakan untuk membuat sebuah website. HTML adalah sebuah standar yang digunakan secara luas untuk menampilkan halaman web. Menggunakan tag-tag tertentu untuk menyatakan kode-kode yang harus ditafsirkan oleh browser agar halaman tersebut dapat ditampilkan di web browser.

Sampai saat ini HTML merupakan standar Internet yang dikendalikan dan didefinisikan pemakaiannya oleh World Wide Web Consortium (W3C). Pada tahun 1989, HTML dibuat oleh kolaborasi Berners-lee Robert dengan Caillau TIM pada saat mereka bekerja di CERN (CERN merupakan lembaga penelitian fisika energi tinggi di Jenewa). Tim Berners Lee lahir di inggris tepatnya dikota London, 8 juni 1955. Kedua orang tuanya merupakan ahli matematika. Tim burners Lee adalah seorang lulusan dari Queen's College di Universitas Oxford pada tahun 1976. Kontribusi terbesar Berners Lee terhadap perkembangan internet adalah dengan tidak menpatenkan world wide web sehingga www dapat digunakan secara bebas.

SEKILAS TENTANG HTML

HTML adalah bahasa dari World Wide Web yang dipergunakan untuk menyusun dan membentuk dokumen agar dapat ditampilkan pada program browser. Html terdiri dari kode-kode tertentu yang akan memerintahkan web browser untuk menampilkan informasi. baik itu berupa teks, gambar, suara dan lain-lain. Disebut markup language karena mengandung tanda-tanda tertentu yang digunakan untuk menentukan tampilan teks dan tingkat kepentingan dari teks tersebut dalam suatu dokumen. Tiap kali kita mengakses dokumen web, maka sesungguhnya kita mengakses dokumen seseorang yang ditulis dengan menggunakan format HTML. Pada Html dipergunakan hypertext link atau hubungan antara teks dan dokumen lain. Dengan demikian pembaca dokumen bisa melompat dari satu dokumen ke dokumen yang lain dengan mudah.

BELAJAR HTML

Untuk memulai belajar html dibutuhkan dua software (Aplikasi) yaitu Html editor dan web browser. Html editor digunakan untuk mengetikkan script/ kode-kode html. Beberapa contoh aplikasi html editor : Dreamweaver, Notepad, Notepad ++, Sublime Text, dan lain-lain. Sedangkan, Web browser merupakan aplikasi yang digunakan untuk mengakses suatu halaman website dan berfungsi menerjemahkan kode (Script) Html yang biasanya ditambahkan JavaScript menjadi sebuah Informasi yang sudah tertata dan menarik secara visual. Beberapa contoh dari aplikasi web browser adalah Internet Explorer, Opera, google Chrome, Mozilla, Firefox, dan lain-lain. Kita hanya membutuhkan salah satu saja. Karena setiap computer yang menggunakan sistem operasi windows telah memiliki aplikasi Internet Explorer.

Buat teman-teman yang ingin belajar web jangan menyerah, jika ada sesuatu yang belum dipahami silahkan berkomentar. Insya allah kami siap membantu sampai teman dapat memahami html dan lanjut ke materi selanjutnya. Selamat Berjuang !!!

Sekian dan semoga Bermanfaat ...

Pengertian URL

Memahami URL

URL atau Uniform Resource Locator menetapkan tempat dimana anda dapat menemukan resource padL sebagai alamat web. Ketika anda menjelajah situs web, anda akan melihat URL dari tiap halaman web pada address bar pada browser anda.

Ada 3 bagian kunci pada URL : skema, alamat host dan filepath.

SKEMA mengidentifikasi cara sebuah file ditransmisikan. Hampir semua web menggunakan apa yang dinamakan hypertext Transfer Protocol (HTTPS) untuk melewatkan informasi kepada anda, inilah mengapa hampir semua web diawali dengan http://, meskipun anda mungkin menemukan prefiks lain seperti https:// ketika melakukan layanan perbankan atau ftp:// ketika melakukan penunduhan file besar.

ALAMAT HOST biasanya merupakan nama domain untuk sebuah situs, seperti time.com. alamat host dapat pula berupa sebuah angka yang sering dikenal dengan nama alamat IP. Semua komputer yang terhubung ke internet dapat ditemukan menggunakan alamat IP. Alamat IP merupakan sebuah konstruksi 12 digit yang dipisahkan dengan simbol titik. Ketika anda memasukkan sebuah nama domain ke dalam browser, dibalik layar nama tersebut dikonversi menjadi alamat IP untuk komputer yang menyimpan situs web tersebut. Ini dilakukan dengan menjejak DNS (Domain name server), yang memuat nama-nama direktori dan alamat-alamat IP.

FILEPATH selalu diawali dengan karakter slash maju (/) dan dapat memuat satu atau lebih nama direktori (ingat bahwa sebuah direktori merupakan nama lain dari folder pada web server). Filepath diakhiri dengan nama file.

URL ABSOLUT DAN URL RELATIF URL

absolut memuat segala sesuatu yang anda butuhkan untuk mengidentifikasi secara unik file tertentu pada internet. Ini merupakan apa yang anda ketikkanke dalam address bar pada browser untuk mencari sebuah halaman. Sebagai contoh, untuk mendapatkan halaman tentang film fiksi pada situs berita sebelumnnya, anda dapat mengetikkan URL berikut :

http://www.ContohSitus.com/Hiburan/Film/indeks.html

Seperti yang anda lihat, URL absolut bisa menjadi panjang, dan setiap halaman pada sebuah situs web dapat memuat banyak link. Ketika melakukan link ke sebuah halaman pada situs anda, anda dapat menggunakan format pendek: URL relatif.

URL relatif mengidentifikasi tempat dimana resource yang berkaitan pada halaman berbeda. Beberapa contoh sebelumnya pada bab ini, yang menghubungkan ke halaman lain pada direktori yang sama, merupakan contoh-contoh dari URL relatif. Anda dapat pula menggunakan URL relatif untuk file-file pada direktori yang berbeda. Sebagai contoh bayangkan anda sedang melihat halaman beranda dari bagian hiburan pada situs berikut :

http://www.ContohSitus.com/Hiburan/indeks.html

anda ingin menambahkan sebuah link ke halaman-halaman indeks dari tiap subbagian: Film, TV, Artis dan Musik. Dari pada menggunakan URL penuh untuk setiap halaman, anda dapat menggunakan URL relatif. Sebagai contoh :

Film/indeks.html
TV/indeks.html
Artis/indeks.html
Musik/indeks.html

Anda tentu setuju, hal ini lebih cepat dari pada harus menuliskan berikut :

http://www.ContohSitus.com/Hiburan/Film/indeks.html
http://www.ContohSitus.com/Hiburan/TV/indeks.html
http://www.ContohSitus.com/Hiburan/Artis/indeks.html
http://www.ContohSitus.com/Hiburan/Musik/indeks.html

SUBDIREKTORI

direktori Film, TV, Artis, dan musik adalah semua sub direktori dari direktori Hiburan. Jika anda menuliskan sebuah halaman pada direktori Hiburan, anda dapat menciptakan link ke setiap halaman indeks dari sub-subdirektori tersebut.

Film/indeks.html
TV/indeks.html
Artis/indeks.html
Musik/indeks.html

Anda harus mencamtumkannama dari subdirektori, yang diikuti dengan karakter slash maju (/), dan nama dari halaman yang ingin dituju.

Untuk setiap subdirektori lainnya, anda hanya perlu menambahkan nama direktori yang diikuti dengan karakter slash maju. Jadi, jika nada menciptakan sebuah link dari halaman pada folder akar darisitus (halaman beranda dari situs), anda menggunakan URL relatif berikut :

Hiburan/Film/indeks.html
Hiburan/TV/indeks.html
Hiburan/Artis/indeks.html
Hiburan/Musik/indeks.html

DIREKTORI INDUK

Jika anda ingin menciptakan sebuah link dari satu direktori ke direktori induknya, anda menggunakan notasi ../, dua simbol titik yang diikuti dengan karakter slash maju. Sebagai contoh, dari sebuah halaman padadirektori Musik ke sebuah halaman pada direktori Hiburan, URL relatif yang anda gunakan menjadi seperti berikut :

../indeks.html

Jika anda ingin menambahkan link dari direktori Musik ke direktori akar, anda perlu mengulangi notasi berikut :

../../indeks.html

Sekian artikel kali ini, silahkan lanjut ke materi selanjutnya dan budayakan berbagi dan semoga Bermanfaat ...

ATRIBUT DAN TAG PADA HTML

ATRIBUT DAN TAG PADA HTML

Okey. Sebelumnya saya berterima kasih telah mampir diblog ini. Saya harap teman-teman telah paham mengenai materi yang sebelumnya kita bahas dasar html, dimana di dalamnya terdapat materi mengenai html dan apa saya yang kita butuhkan dalam belajar html atau membuat suatu web. Okey, langsung saja kita ke pembahasan materi.

Perintah dalam dokumen html terdiri dari berbagai struktur penyusunan seperti : Tag, atribut dan nilai.
Elemen html ada yang memiliki atribut dan nilai tertentu. Atribut bersifat optional. Sebuah atribut bisa digunakan oleh beberapa perintah. Ada perintah html yang dapat digunakan bila ditulis atributnya, namun ada pula perintah html yang memang tidak memiliki atribut.
Format penulisannya adalah sebagai berikut :

<Perintah atribut 1="nilai" atribut 2="nilai" ... atribut 3="nilai"> ... Objek yang diatur ... </Perintah >

Contoh mendefinisikan atribut pada sebuah perintah html :

Tag	Fungsi
<html>	Untuk memulai sebuah html
<head>	Bagian header atau diatas
<title>	Untuk memberi judul dan akan muncul di tab browser
</title>	Untuk penutup title yang di awali garing miring
</head>	Untuk penutup header yang di awali garing miring
<body>	Untuk Bagian Body atau Isi dalam HTML
</body>	Untuk Penutup menutup Body dan diawali dengan garis miring
</html>	Untuk menutup html yang diawali garis miring

Disini ada beberapa tag dasar yang akan kita gunakan dalam penulisan :

Tag	Keterangan
<h1> - <h6>	ini adalah Tag Heading, yang berlevel 1, selain <h1> ada juga <h2>, <h3>, <h4>, <h5>, <h6>.
<b>	(Bold) Perenannya untuk membuat Huruf menjadi lebih Tebal
<br>	untuk Membuat sebuah baris baru atau enter
<body-bgcolor="black">	Peranannya untuk memberi warna untuk background atau latar belakang dan "red" bisa diganti sesuai keinginan anda, misalnya "blue".
<font-color="red">	Untuk mengatur warna Text dan ditutup dengan tag </font>
<font-size="12">	untuk mengatur Ukuran Sebuah Text dan ditutup dengan </font>
<font-face="arial">	Untuk mengatur jenis Font atau Text yang akan digunakan
<i>	(Italic) Fungsinya untuk membuat Huruf menjadi Miring
<p>	Untuk membuat sebuah Paragraf baru
<u>	(Underline) Fungsinya untuk membuat dibawah huruf berisi garis
<hr>	untuk membuat sebuah garis Horizontal
<center>	untuk menciptakan tulisan atau gambar berada di tengah-tengah
<strong>	Tebal penekanan
<em>	Miring Penekanan
<img src="nama gambar.format atau Url gambar anda">	fungsinya untuk memasukan sebuah gambar
<marquee>	untuk membuat sebuah text ataupun gambar agar bergerak.
<sub>	Subscript-tampilan pangkat bawah.
<sup>	Subscript-tampilan pangkat atas.
<small>	Mengecilkan ukuran tulisan.
<big>	Membesarkan ukuran tulisan.
<tt>	Menampilkan tulisan seperti huruf mesin ketik manual.

Karakter - karakter khusus :

Entitas	Keterangan
©	Copyright
®	Registered
©	Copyright
™	Trade mark
&	Ampersand
«	Anggle quotation mark (left)
»	Anggle quotation mark (right)
£	Poundsterling
€	Euro
¥	Yen
<	Lebih kecil
>	Lebih besar
	Non Breaking space

Okey, buat teman-teman klau ada yang kurang dipahami silahkan komentar baik mengenai artikel ini atau mengenai masalah web. Insya allah kami siap membantu. Selamat berjuang dan semoga ilmunya tersampaikan ...
Sekian dan semoga Bermanfaat ...

APA YANG DI MAKSUD DENGAN PHP DAN MENGAPA MENGGUNAKAN PHP ???

APA YANG DI MAKSUD DENGAN PHP DAN MENGAPA MENGGUNAKAN PHP ???

PHP, merupakan singkatan rekursif dari PHP: Hypertext preprocessor adalah bahasa pemprograman yang dapat digunakan untuk tujuan umum, sama seperti bahasa pemprograman lainnya, seperti: C, C++, Pascal, Phyton, Perl, Ruby dan sebagainya. Meskipun demikian, PHP lebih popular digunakan untuk pengembangan aplikasi web. Dalam proses pembuatan halaman web, PHP tidak memerlukan kode yang panjang seperti pada Perl dan Phyton (misalnya) karena kode PHP dapat disisipkan di dalam kode HTML. Sebagai gambaran bagi anda, perhatikan terlebih dahulu kode Phyton di bawah ini:

#!C:\Python27\python From __future__ import print_function Print (“Content-type: text/html\r\n\r\n”) Print (“<html>”) Print (“<head>”) Print (“<title>>Welcome </title>”) Print (“</head>”) Print (“<body>”) Print (“<h1>Selamat Datang! </h1>”) Print (“</body>”) Print (“</html>”)

Dalam kode Python di atas, kode HTML harus dibungkus sebagai teks (string) yang selanjutnya perlu ditampilkan menggunakan perintah print. Dalam PHP, kode di atas dapat dibuat jauh lebih mudah karena kita dapat memisahkan bagian kode HTML dan kode PHP, seperti berikut:

<html> <head> <title>>Welcome </title> </head> <body> <h1>Selamat Datang! </h1> </body> </html>

Pada contoh di atas, teksyang dicetak tebal merupakankode PHP dan sisanya adalah kode HTML. Kode PHP selalu diawali dengan tanda . kita bisa saja menggunakan tanda lain, misalnya tanda yang digunakan oleh ASP, <% dan %> untuk mengawali dan mengakhiri kode PHP denganmelakukan konfigurasi pada file php.ini.

PHP dapat dijalankan dalam sebagian besar sistem operasi, termasuk Linux, varian-varian UNIX (HP-UX, Solaris, OpenBSD), Windos dan Mac OS X. selain itu, PHP juga mendukung sebagian besar server web yang ada saat ini, seperti: Apache, IIS, nginx dan lighttpd. Dengan demikian, dengan menggunakan PHP kita dapat bebas memilih sistem operasi dan server web yang digunakan.

Dalam proses penulisan kode program, PHP juga mengijinkan kita untuk menggunakan dua gaya pemprograman, yaitu gaya procedural dan gaya berorientasi objek dan bisa juga gabungan dari keduanya.

PHP merupakan bahasa pemprograman open-source dan bersifat bebas (free). Ini berarti bahwa kita bebas menggunakan PHP untuk membangun aplikasi yang bersifat non-komersil maupun komersil.

Sekian dan semoga Bermanfaat ...

DAFTAR TAG PADA HTML

Sebelumnya saya berterima kasih atas kunjungannya. Jadi disini kita akan membahas mengenai daftar tag pada html. Tag pada html ini cukup penting, karena kita akan membuat desain yang lebih menarik dengan memanfaatkan atribut-atribut yang disesuaikan dengan nilai padasetiap atribut yang kita terapkan.

Berikut ini adalah tabel tag-tag pada HTML dan fungsinya untuk melengkapi kkekurangan dari artikel atribut dan tag pada html sebelumnya :

1. Tag Font

   Tag	Atribut	Deskripsi
   <font></font>	color Size name	Mengubah gaya suatu huruf

2. Link

   Tag	Atribut	Deskripsi
   <a></a>	Href Target Style Class Name Id	Membuat link ke dokumen lain atau situs lainnya.

3. Gambar

   Tag	Atribut	Deskripsi
   <img>	Src Alt Name Border Height Width	Menampilkan sebuah gambar

4. Formatting

   Tag	Deskripsi
   <blockquote></blockquote>	Digunakan untuk mengatur teks dan gambar dalam suatu tag
   <ol></ol>	Ordered List (digunakan dengan <li<)
   <ul></ul>	Unordered List (digunakan dengan <li<)
   <li></li>	Digunakan untuk mengatur teks dan gambar dalam suatu tag
   <blockquote></blockquote>	Elemen List
   <dd></dd>	Definition List
   <dt>	Definition Term Definition Description
   <br>	Baris Baru
   <hr>	Garis Horisontal
   <center></center>	Menengahkan Elemen

5. Tabel

   Tag	Atribut	Deskripsi
   <table></table>	Border cellpadding cellspacing width height name id title bgcolor background align valign	Mengubah semua elemen tabel
   <tr></tr>	height title bgcolor background align valign	Membuat baris baru
   <td></td>	height width bgcolor background align valign title colspan rowspan	Membuat kolom
   <th></th>	height width bgcolor background align valign title colspan rowspan	Header(kepala tabel). Otomatis ke tengah dan tebal.
   <tbody></tbody>	height width align valign bgcolor background	Format yang berlaku bagi cell yang diapit tag.
   <colgroup></colgroup>	height width align valign bgcolor background colspan	Format yang berlaku bagi kolom

6. Form

   Tag	Atribut	Deskripsi
   <form></form>	method action name	Mengatur elemen dari form
   <input type=>	text password hidden radio checkbox submit image reset	Variasi dari tipe elemen form
   <font></font>	color	Mengubah gaya suatu huruf
   text	name value width maxlength
   password	name value width maxlength
   hidden	name value	Digunakan untuk membuat variable hidden.
   radio	name value	-
   checkbox	name value checked	-
   submit	value	-
   image	src height width alt name border	-
   reset	value	-
   <select></select>	name size	Membuat combobox. Digunakan bersama dengan option
   <option>	selected name value	-
   <textarea></textarea>	name rows cols wrap	-
   wrap	off virtual physical	no wrap word wrap, sent as one line word wrap, sent with breaks

Anda tidak perlu menghafal semua tag tersebut, nanti malah kepala anda malah pecah!. Cukup hafalkan yang penting-penting saja seperti <table> <input> <ul>. Tidak hafal pun tidak apa-apa kan kita bisa melihat daftar kalau lupa, yang penting kita paham, BETUL?.

Okey, buat teman-teman klau ada yang kurang dipahami silahkan komentar baik mengenai artikel ini atau mengenai masalah web. Insya allah kami siap membantu. Selamat berjuang dan semoga ilmunya tersampaikan ...

Sekian dan semoga Bermanfaat ...

PERSIAPAN DALAM MENJALANKAN PHP

Jadi buat teman-teman yang ingin memulai bekerja dengan PHP, ada beberapa hal yang sebelumnya harus terpenuhi sebelum kita mulai. Jadi beberapa hal tersebut merupakan aplikasi yang harus terpasang sebelum kita memulai dan kita sudah paham sebelumnya mengenai HTML. Jadi buat teman-teman yang belum atau tidak melengkapi syarat-syarat di atas, saya sarankan silahkan lengkapi dulu. Buat teman yang belum paham HTML kami menyiapkan artikelnya, silahkan masuki link HTML & CSS. Disana kami memberikan materi yang lumayan singkat namun cepat untuk di pahami karena pembahasannya terstruktur. Jhahahahaa, jadi bahas yang lain.

Okey, kita fokus lagi. Mungkin ada yang bertanya, aplikasi yang harus terpasang sebelumnya itu apa dan apa apalagi yang dibutuhkan untuk belajar PHP ??? (lumayan panjang ya jahahaha) jadi, aplikasi tersebut adalah aplikasi DBMS (XAMPP) karena disini kita akan menggunakan XAMPP dalam mengelolah database kita. Hal yang lain teman-teman juga bisa membedakan perbedaan antara file (data) dan direktori (folder). Setelah menginstall XAMPP pastikan Apache, PHP, MYSQL sudah terpasang. Sama seperti pembahasan yang lain mengenai HTML, gunakan juga aplikasi browser (IE, Mozilla, Goggle Chrome, Opera, dsb.) untuk menampilkan web kita.

Dalam pembuatan file PHP, kita tidak boleh menyimpannya di sembarang tempat, atau kata lain file kita harus berada di dalam Aplikasi XAMPP (didalam system). Jadi lokasi penyimpanan tersebut : masuk di Drive C, kemudian pilih XAMPP, kemudian htdocs. Didalam disini kita akan menyimpan file tersebut. Buatlah suatu folder sesuai dengan apa yang ingin kita buat. Kalau kurang paham lihat pada gambar berikut ini :

Untuk menampilkan file PHP yang telah kita buat. Kita membuka web browser dan masuk melalui localhost dan menunjukkan lokasi penyimpanan kita. Jadi cara menampilkan file PHP memang berbeda dengan cara menampilkan file HTML. Letak perbedaannya karena PHP merupakan bahasa server. Jadi maksudnya bahasa server yaitu PHP ini yang akan menghubungkan database dengan user, sehingga aktifitas yang dilakukan user (baik itu menyimpan data, mengubah ataupun menghapus) terhadap database semuaakan tereksekusi, karena bahasa server PHP ini yang telah terhubung. Bukan hanya itu PHP juga mendukung banyak aplikasi DBMS, jadi tidak hanya berjalan di XAMPP yang saat ini kita gunakan. Serta mampu berjalan diberbagai Sistem Operasi baik itu Windows, Linux, Mac Os, dll. Sehingga netcraft mengumumkan PHP sebagai bahasa web populer didunia.

Sekian artikel kali ini, silahkan lanjut ke materi selanjutnya dan budayakan berbagi dan semoga Bermanfaat ...

MENGENAL FRAMEWORK BOOTSTRAP

Pada pemebahasan sebelumnya, kita telah mengenal macam-macam framework. Salah satu framework adalah bootstrap. Bootstrap sendiri adalah sebuah framework CSS dari twitter yang menyediakan komponen-komponen antar muka siap pakai dan telah dirancang sedemikian rupa untuk keperluan desain halaman website yang artistic.

Selain komponen-komponen dasar untuk membangun antar muka. Bootstrap juga menyediakan grid 12 kolom yang dapat menunjang kinerja anda dalam mendesain layout yang rapi. Sebagai CSS Framework, bootstrap tergolong paket lengkap.Tekhnologi Html, Css dan JavaScript yang ada pada Bootstrap. Kita tidak hanya dapat melakukan styling dengan CSS saja, akan tetapianda juga dapat menggunakan komponen-komponen seperti icon, tombol dan navigasidengan desain unik khas bootstrap. Selain itu, tersedia banyak Plugin JQuery yang dapat membantu kita untuk membuat tampilan website yang lebih atraktif.

Framework Bootstrap dibangun menggunakan Less, yaitu sebuah preprocessor dengan fungsi tambahan seperti variable, mixin, dan fungsi untuk mengompilasi CSS. Fitur-fitur yang ditawarkan bootstrap dapat membuat sang developer Bootstrap kaya jika dia berorientasi dengan uang. Framework ini seharusnya layak untuk menjadi framework berbayar, mengingat fitur-fitur yang ditawarkan sangat lengkap. Kenyataanya, framework ini justru tersedia gratis, yaitu dengan menggunakan lisensi MIT. MIT merupaan lisensi open source, dimana semua kalangan bebas menggunakan framework ini secara gratis tanpa takut terkena masalah legalitas.

Baca juga artikel lainnya : Mengenal Framework Bootstrap Cara Menerapkan Bootstrap Pada Website Grid / Pembagian kolom Pada Bootstrap

MENDOWNLOAD BOOTSTRAP

Framework Bootstrap dapat anda download secara gratis di alamat http://getbootstrap.com/, saat anda mengklik tombol download, maka anda akan diberikan 3 pilihan metode download seperti berikut :

• Download Bootstrap : berisi file CSS, JavaScript, dan font yang telah dikompilasi. Tidak ada dokumen atau file asli yang disertakan.
• Download Source : pilihan ini berisi JavaScript, Font, Dokumen asli Bootstrap dan Source dari Less yang merupakan preprocessor untuk membangun framework bootstrap. Tetapipillihan ini membutuhkan sebuah Less compiler dan beberapa pengaturan.
• Download Sass : berisi file bootstrap yang telah di-porting dari Less ke Sass supaya mudah dimasukkan ke dalam rails, Compass, atau Sass itu sendiri.

Berdasarkan ketiga pilihan download, anda pilih Download Bootstrap, karena file tersebut telah dikompilasi dan siap untuk digunakan. Pilihan ini membuat anda tidak perlu ragu lagi memikirkan apa itu Preprocessor CSS, cara mengompilasi, dan lain sebagainya. Anda cukup mengerti sedikit tentang CSS dan anda dapat memulai menggunakan Bootstrap.

Bootstrap termasuk Framework yang rajiin update. Saat penulisan, Bootstrap yang didownload pada awal Januari 2017, Bootstrap telah merilis versi 3.3.7. untuk mengikuti perkembangan Bootstrap, anda dapat men-follow Twitternya di @twbootstrap.

FITUR

Pada Bootstrap versi 3 terdapat banyak perubahanyang menarik, fitur baru dan telahsepenunhya diperbarui untuk memenuhi tren webterbaru dan kebutuhan pengguna.

MOBILE-FIRST APPROACH

Pada versi 3, bootstrap mengikuti pendekatan mobiledan membuat situs anda selalu responsive secara default. Bootstrap didesain ulang dan dibangun kembali mulai dari perangkat mobile anda dan perangkat dengan skala diatasnya. File CSS responsive tidak lagi terpisah dan semua fitur responsive sekarang termasuk kedalam file utama. Jika anda tidak menginginkan situs responsive, anda dapat mematikan fitur ini dengan menambahkan beberapa CSS ekstra. Anda dapat menemukan cara untuk melakukan hal ini di dokumentasi bootstrap yang disertai contoh untuk menonaktifkan fitur adaptif atau responsive.

STRUKTUR FILE BOOTSTRAP

Jka Bootstrap telah selesai di download, anda eksstrak file tersebut. Berikut ini susunan atau struktur file pada bootstrap :

Pada folder CSS terdapat empat file CSS sebagai berikut :

• Boostrap.css, adalah file CSS utamayang harus dissertakan dalam halaman HTML yang anda buat. Banyaknya komentar/ keterangan di dalam baris kode pada file tersebut membuat Bootstrap sangat tepat digunakan untuk keperluan development.
• Boostrap.min.css, adalah hasil minify/kompres dari boostrap.css. ukuran file ini lebih kecil. File ini digunakan jika desain situs yang anda buat untuk online.
• Bootstrap-theme.css; diibaratkan sebuah kebutuhan sekunder. Anda boleh tidak menyertakan pada file HTML. Fungsi file ini untuk memberikan efek 3D pada tombol dan beberapa elemen lainnya.
• Bootstrap-theme.min.css, adalah file CSS hasil minify dari Bootstrap.css. file ini digunakan jika desain situs yang anda buat untuk online.

Di dalam folder js, terdapat dua file sebagai berikut :

• Bootstrap.js, adalah library JavaScript untuk memberikan efek seperti modal, dropdown, scrollspy, dan lain sebagainya.
• Bootstrap.min.js, digunakan sebagai pengganti bootstrap.js jika situs yang anda buat untuk online.

Terakhir, yang menjadi pembeda pada versi sebelumnya adalah folder fonts. Folder ini berisi ikon gambar/glyphicon. Beralihnya ikon dari gambar datar ke font ini akan mempercepat performa website, karena karakter font memakan bandwidth yang lebih sedikit jika dibandingkan gambar datar.

Artikel Terkait : Penggunaan Grid Untuk Perangkat handphone Penggunaan Grid Untuk Perangkat Tablet dan desktop Penggunaan Grid Untuk Perangkat handphone, Tablet dan Desktop Membuat Nesting Column/ Kolom di dalam kolom

Sekian dan semoga Bermanfaat ...

Sejarah Php

Selamat datang teman-teman. Disini kita akan membahas sedikit mengenai awal mula munculnya PHP dan apa saja keunggulan dari PHP ini.
Okey, kita langsung saja ke pembahasan.

Rasmus Lerdrof seorang Software Developer merupakan sosok yang pertama kali yang menemukan PHP pada 1995. Ide awal PHP adalah ketika itu Radmus ingin mengetahui jumlah pengunjung yang membaca resume onlinenya. script yang dikembangkan baru dapat melakukan dua pekerjaan, yakni merekam informasi visitor, dan menampilkan jumlah pengunjung dari suatu website. Dan sampai sekarang kedua tugas tersebut masih tetap populer digunakan oleh dunia web saat ini. Kemudian, dari situ banyak orang di milis mendiskusikan script buatan Rasmus Lerdrof, hingga akhirnya rasmus mulai membuat sebuah tool/script, bernama Personal Home Page (PHP).

Kebutuhan PHP sebagai tool yang serba guna membuat Lerdorf melanjutkan untuk mengembangkan PHP hingga menjadi suatu bahasa tersendiri yang mungkin dapat mengkonversikan data yang di inputkan melalui Form HTML menjadi suatu variable, yang dapat dimanfaatkan oleh sistem lainnya. Untuk merealisasikannya, akhirnya Lerdrof mencoba mengembangkan PHP menggunakan bahasa C ketimbang menggunakan Perl. Tahun 1997, PHP versi 2.0 di rilis, dengan nama Personal Home Page Form Interpreter (PHP-FI). PHP Semakin popular, dan semakin diminati oleh programmer web dunia. Rasmus Lerdrof benar-benar menjadikan PHP sangat populer, dan banyak sekali Team Developer yang ikut bergabung dengan Lerdrof untuk mengembangkan PHP hingga menjadi seperti sekarang, Hingga akhirnya dirilis versi ke 3-nya, pada Juni 1998, dan tercatat lebih dari 50.000 programmer menggunakan PHP dalam membuat website dinamis.

Pengembangan demi pengembangan terus berlanjut, ratusan fungsi ditambahkan sebagai fitur dari bahasa PHP, dan di awaal tahun 1999, netcraft mencatat, ditemukan 1.000.000 situs di dunia telah menggunakan PHP. Ini membuktikan bahwa PHP merupakan bahasa yang paling populer digunakan oleh dunia web development. Hal ini mengagetkan para developernya termasuk Rasmus sendiri, dan tentunya sangat diluar dugaan sang pembuatnya. Kemudian Zeev Suraski dan Andi Gutsman selaku core developer (programmer inti) mencoba untuk menulis ulang PHP Parser, dan diintegrasikan dengan menggunakan Zend scripting engine, dan mengubah jalan alur operasi PHP. Dan semua fitur baru tersebut di rilis dalam PHP 4.

13 Juli 2004, evolusi PHP, PHP telah mengalami banyak sekali perbaikan disegala sisi, dan wajar jika netcraft mengumumkan PHP sebagai bahasa web populer didunia, karena tercatat 19 juta domain telah menggunakan PHP sebagai server side scriptingnya. PHP saat ini telah Mendukung XML dan Web Services, Mendukung SQLite. Tercatat lebih dari 19 juta domain telah menggunakan PHP sebagai server scriptingnya. Benar benar PHP sangat mengejutkan.

Yang menjadikan PHP berbeda dengan HTML adalah proses dari PHP itu sendiri. HTML merupakan bahasa statis yang apabila kita ingin merubah konten/isinya maka yang harus dilakukan pertama kali nya adalah, membuka file-nya terlebih dahulu, kemudian menambahkan isi kedalam file tersebut. Beda hal nya dengan PHP. Bagi anda yang pernah menggunakan CMS seperti wordpress atau joomla yang dibangun dengan PHP tentunya, ketika akan menambahkan konten kedalam website, anda tinggal masuk kedalam halaman admin, kemudian pilih new artikel untuk membuat halaman/content baru. Artinya hal ini, seorang user tidak berhubungan langsung dengan scriptnya. Sehingga seorang pemula sekalipun dapat menggunakan aplikasi seperti itu.

Keunggulan PHP :

1. Gratis
   Apa yang membuat PHP begitu berkembang sangat pesat?? hingga jutaan domain menggunakan PHP, begitu populernya PHP?? Jawabannya adalah karena PHP itu gratis. Saya sendiri menyukai bahasa yang satu ini selain mudah juga karena gratis.
2. Cross platform
   Artinya dapat di gunakan di berbagai sistem operasi, mulai dari linux, windows, mac os dan os yang lain.
3. Mendukung banyak database
   PHP telah mendukung banyak database, ini mengapa banyak developer web menggunakan PHP Adabas D Adabas D, dBase dBase, Empress Empress, FilePro (read-only) FilePro (read-only) Hyperwave, IBM DB2, Informix, Ingres, InterBase, FrontBase mSQL, Direct MS-SQL, MySQL MySQL, ODBC, Oracle (OCI7 and OCI8), Ovrimos, PostgreSQL SQLite, Solid, Sybase, Velocis, Unix dbm.
4. On The Fly
   PHP sudah mendukung on the fly, artinya dengan php anda dapat membuat document text, Word, Excel, PDF, menciptakan image dan flash, juga menciptakan file-file seperti zip, XML, dan banyak lagi.

Sekian artikel kali ini, silahkan lanjut ke materi selanjutnya dan budayakan berbagi dan semoga Bermanfaat ...

TIPOGRAFI PADA BOOSTRAP - HEADING

Pada HTML, anda mengenal elemen <h> yang mendefinisikan judul atau heading. Tag yang dituliskan untuk mendefinisikan heading adalah <h1> sampai <h6>. Tag <h1> menunjukkan judulutama pada halaman HTML, dan untuk sub-sub judul bisa menggunakan <h2>, <h3>, dan seterusnya, sampai <h6>. Brikut ini merupakan contoh penggunaan Heading:

Baca juga artikel Terkait: Penggunaan Heading Pada Bootstrap Penerapan Body Copy Leadbody Copy Text Formating Mengatur Aligment Transformasi Text Memberi keterangan pada text Menuliskan alamat Menuliskan kode Penerapan Blockquote Membuat List

Simpan sebagai berkas HTML. Jika anda lihat pada browser, akan terlihat seperti gambar di bawah ini:

Selain format tulisan heading. Anda juga dapat membuat secondary text pada heading dengan menambahkan tag <small></small> ke dalam tag heading. Untuk jebih jelas, tulis contoh kode berikut ini:

Artikel Terkait : Penggunaan Grid Untuk Perangkat handphone Penggunaan Grid Untuk Perangkat Tablet dan desktop Penggunaan Grid Untuk Perangkat handphone, Tablet dan Desktop Membuat Nesting Column/ Kolom di dalam kolom Offset Kolom (Menggeser Kolom) Nesting Kolom (Kolom Di dalam Kolom) Mengurutkan Kolom

Sekian artikel kali ini, silahkan lanjut ke materi selanjutnya dan budayakan berbagi dan semoga Bermanfaat ...

TIPOGRAFI PADA BOOSTRAP - MEMBERI KETERANGAN PADA TEXT

Pada HTML, anda telah mengenal tag abreviasi <abbr>. fungsi daritag tersebut adalah menunjukkan keterangan/informasi lebih lanjut dari sebuah singkatan atau akronim saat kursor melintasi elemen abservasi seperti pada gambar di bawah ini:

Markup <abbr> tidak hanya berguna untuk memberikan uraian dari suatu singkatan, akan tetapi juga berguna untuk memberikan informasi yang bermanfaat kepada browser, translator dan mesin pencari.

Penggunaan Bootstrap dapat membuat elemen abreviasi menjadi lebih bergaya. Selain titik-titik kecil yang berada di bawah singkatan, juga terdapat kursor Help saat mouse anda melintas di atasnya. Contoh penggunaan tag dapat dilakukan dengan menulis kode berikut:

Baca juga artikel Terkait: Penggunaan Heading Pada Bootstrap Penerapan Body Copy Leadbody Copy Text Formating Mengatur Aligment Transformasi Text Memberi keterangan pada text Menuliskan alamat Menuliskan kode Penerapan Blockquote Membuat List

Jika anda lihat pada kode di atas, tag <abbr> membuat atribut title yang berfungsi untuk memberikan uraian dari sebuah singkatan. Saat anda jalankan pada browser, hasilnya akan seperti gambar di bawah ini:

Untuk uraian singkatan dengan style dan ukuran yang lebih kecil, anda dapat menggunakan class .initialism. contoh penggunaan class adalah <abbr title="Hypertext Markup Language" class="initialism">HTML</abbr>

Baca lainnya, beberapa penggunaan atau penerapan tipografi pada bootstrap:

Artikel Terkait : Penggunaan Grid Untuk Perangkat handphone Penggunaan Grid Untuk Perangkat Tablet dan desktop Penggunaan Grid Untuk Perangkat handphone, Tablet dan Desktop Membuat Nesting Column/ Kolom di dalam kolom Offset Kolom (Menggeser Kolom) Nesting Kolom (Kolom Di dalam Kolom) Mengurutkan Kolom

Sekian artikel kali ini, silahkan lanjut ke materi selanjutnya dan budayakan berbagi dan semoga Bermanfaat ...

CARA MENGGUNAKAN BOOTSTRAP

Selamat datang buat teman-teman dan terima kasih. Disini kita akan membahas bagaimana cara mengimplementasikan bootstrap ke dalam suatu website. Dengan menggunakan berbagai fitur atau properti class yang telah disediakan di dalam bootstrap baik itu CSS ataupun JavaScirptnya.

Pada pembahasan sebelumnya, kita diarahkan untuk mendownload Bootstrap, kemudian anda ekstrak file Bootstrap, yaitu bootstrap-3.3.7. Salin folder tersebut dan masukkan ke dalam folder proyek yangakan kita buat. Sebagai contoh, masukkan folder tersebut ke dalam direktori C:/xampp/htdoct/latihan. Susunan folder akan seperti gambar di bawah :

Untuk percobaan, anda buat dokumen HTML sederhana seperti gambar dibawah ini :

Baca juga artikel lainnya : Mengenal Framework Bootstrap Cara Menerapkan Bootstrap Pada Website Grid / Pembagian kolom Pada Bootstrap

Jika anda tampilkan pada browser, hasilnya akan seperti gambar berikut :

Anda panggil style CSS Bootstrap dan ketikkan '<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">' diantara tag '<head> & </head>'. Jika susunan direktori dan markup HTML yang akan diketikkan benar, hasilnya akan seperti gambar di bawah :

Silahkan lanjutkan dengan materi selanjutnya :

• Grid pada Bootstrap
• Tipografi pada Bootstrap
• Penggunaan Bootstrap untuk Tabel
• Penggunaan Bootstrap untuk Form
• Penggunaan Bootstrap untuk Button
• Penggunaan Bootstrap untuk Image
• Helper Class dan Komponen Dasar Bootstrap
• Plugin JavaScript pada Bootstrap

Artikel Terkait : Penggunaan Grid Untuk Perangkat handphone Penggunaan Grid Untuk Perangkat Tablet dan desktop Penggunaan Grid Untuk Perangkat handphone, Tablet dan Desktop Membuat Nesting Column/ Kolom di dalam kolom

Sekian artikel kali ini, silahkan lanjut ke materi selanjutnya dan budayakan berbagi dan semoga Bermanfaat ...

TIPOGRAFI PADA BOOSTRAP - BLOCKQUOTE

Style tipografi ini berfungsi untuk mendefinisikan sebuah kutipan panjang. Bootstrap untuk versi 3 memiliki 2 jenis style blockquote, yaitu default blockquote dan blockquote reverse. Untuk lebih jelas mengenai implementasi blockquote dengan CSS bootstrap.

DEFAULT BLOCKQUOTE

Pada pembahasan ini, style default blockqoute tidak ada penambahan class. Cara penggunaan default blockquote sama seperti perintah HTML biasa, yaitu menggunakan tag <blockquote>. Berikut contoh penulisan kode HTML default blockquote:

Script Blockquote Default

Script Blockquote Default

Baca juga artikel Terkait: Penggunaan Heading Pada Bootstrap Penerapan Body Copy Leadbody Copy Text Formating Mengatur Aligment Transformasi Text Memberi keterangan pada text Menuliskan alamat Menuliskan kode Penerapan Blockquote Membuat List

BLOCKQUOTE REVERSE

Pada Bootstrap, tidak hanya teks biasa atau elemen paragraph saja yang dapat diatur aligment-nya. Class .blockquote-reverse akan memberikan efek terbalik pada blockquote. Blockquote yang secara default rata kiri, dengan class ini, akan berubah menjadi rata kanan. Berikut contoh penggunaan blockquote reverse:

Script Blockquote Reserve

Tampilan Blockquote Reserve

Memberi Source pada Blockquote

Sebuah Quote biasanya memuat sebuah keterangan mengenai pengarang dan judul karyanya. Untuk memberikan keterangan mengenai pengarang, anda dapat menggunakan tag . Berikut contoh pemberian source pada blockquote:

Script Memberi Source Pada Blockquote

Tampilan Source Pada Blockquote

Artikel Terkait : Penggunaan Grid Untuk Perangkat handphone Penggunaan Grid Untuk Perangkat Tablet dan desktop Penggunaan Grid Untuk Perangkat handphone, Tablet dan Desktop Membuat Nesting Column/ Kolom di dalam kolom Offset Kolom (Menggeser Kolom) Nesting Kolom (Kolom Di dalam Kolom) Mengurutkan Kolom

Sekian artikel kali ini, silahkan lanjut ke materi selanjutnya dan budayakan berbagi dan semoga Bermanfaat ...