Selasa, 06 November 2018

MATERI BOOTSTRAP

Blog

Mengenal Framework Twitter Bootstrap dan Penggunaannya Pada Website

Pada kesempatan ini saya akan membahas tentang pengertian bootstrap juga sejarahnya yang merupakan framework dari CSS dimana sangat membantu para pembuat dan pengembang website dalam malasah komponen dan tampilan website. Saat ini ada salah satu framework css yang sangat banyak digunakan yaitu Twitter Bootstrap.

Perkembangannya website saat ini dari tahun-ketahun mengalami peningkatan. Pengembangan dari mulai hanya teks saja hingga sekarang website sudah dipadukan dengan berbagai multimedia dan animasi lainnya. Sehingga lebih tampak menarik dan enak dilihat oleh para setiap pengunjungnya.

Klik Disini Untuk Mngetahui Pengertian Website

Bagaimana Website Dibuat?

Para pengembang website dari dahulu hingga saat ini pastinya memiliki ruang kerja atau biasa disebut framework dalam membuat sebuah website. Sehingga pengerjaan terbagi menjadi dua yaitu desainer dan programmer. Pada bagian desain para desainer pastinya mengkompinasikan antara Bahasa pemograman (HTML) dan aturan dalam komponen-komponen (CSS) website yang dimana akan membuat suatu tampilan yang lebih menarik dan rapih. Setelah desain selesai maka diberikan kepada programmer untuk dibuatkan fungsi dari hasil desain tersebut. Itu lah merupakan suatu ruang kerja dalam pembuatan website. Sehingga framework dalam membuat website terbagi menjadi 2 yaitu framework PHP

Apa Yang Dimaksud Pengertian Bootstrap?

Pengertian Bootstrap adalah library (pustaka / kumpulan fungsi-fungsi) dari Framework CSS yang dibuat khusus untuk bagian pengembangan fontend dari suatu website. Didalam library tersebut terdapat berbagai jenis file yang diantaranya HTML, CSS, dan Javascript. Hampir semua developer website menggunakan framework bootstrap agar memudahkan dan mempercepat pembuatan website. Karena semuanya sudah ada dalam frameworknya sehingga para develop / pengembang hanya tinggal membuat / menyisipkan class nya yang ingin dipakai seperti membuat tombol, grid navigasi dan lain sebagainya.

Bootstrap telah menyediakan kompulan aturan dan komponen class interface dasar sebagai modal dalam pembuatan web yang telah dirancang sangat baik untuk memberikan tampilan yang sangat menarik, bersih, ringan dan memudahkan bagi penggunanya. Dan penggunaan bootstrap ini kita juga diberikan keleluasan salama pengembangan website, anda bisa merubah dan menambah class sesuai dengan keinginan.

Sejarah dan Perkembangan Bootstrap

Bootstrap awalnya dibuat dan dikembangkan oleh pekerja / programmer Twitter, yaitu Mark Octo dan Jacob Thornton sejak tahun 2011. Saat itu memang para programmer di Twitter menggunakan berbagai macam tools dan library yang mereka kuasai dan disukai untuk melakukan pekerjaannya, sehingga tidak ada standarisasi dalam penamaan suatu class. Akibatnya sulit untuk dikelola, maka dari itu keduanya membuat suatu tools ataupun framework yang digunakan bersama dilingkukan internal twitter.

Sejak diluncurkan pada bulan agustus 2011, bootstrap telah berevolusi dari proyek yang hanya basis css menjadi sebuah framework yang lebih lengkap yang juga berisi javascript plugin, icon, Forms, dan button.

Pada januari 2012, Bootstrap merealease Versi 2.0 yang didalamnya sudah memasukan fitur responsive layout, dan sejak itu penggunaan Bootstrap sangat banyak sekali sehingga menjadi proyek Github yang sangan banyak di copy hingga 20.000 kali.

Dua tahun setelah itu tepatnya pada bulan agustus 2014 bootstrap kembali mengeluarkan versi terbaru yaitu versi 3.0 yang didalamnya sudah mengakomodasi konsep Mobile first artinya didalam pembuatan dan pengembangan mulai dari layar yang terkecil dahulu (mobile / handphone/ smartphone) dan secara bertahap pada tampilan yang paling besar.

Pelajari Disini Tentang Mobile First Indexing

Dan baru-baru ini bootstrap merilis versi 4.0 (sebelumnya pada tahun 2017 sudah dirilis versi betanya) sebagai penyempurnaan dokumentasi dan menambah beberapa fitur tambahan yang saat ini sedang booming yaitu dengan memberikan tampilan lebih baik bagi para pengembang ecommerce , dan tampak lebih stabil dan dengan ini maka versi 2.0 dan 3.0 tidak akan ada lagi support atau update dalam penggunaannya.

Cara Menggunakan Bootstrap

Untuk menggunakan bootstrap yang pertama kali harus dipersiapkan adalah data atau framework bootstrap itu sendiri. Anda bisa dapatkan di sini

bootstrap/

├── css/

│ ├── bootstrap.css

│ ├── bootstrap.css.map

│ ├── bootstrap.min.css

│ ├── bootstrap.min.css.map

│ ├── bootstrap-theme.css

│ ├── bootstrap-theme.css.map

│ ├── bootstrap-theme.min.css

│ └── bootstrap-theme.min.css.map

├── js/

│ ├── bootstrap.js

│ └── bootstrap.min.js

└── fonts/

├── glyphicons-halflings-regular.eot

├── glyphicons-halflings-regular.svg

├── glyphicons-halflings-regular.ttf

├── glyphicons-halflings-regular.woff

└── glyphicons-halflings-regular.woff2

Cara menginstal bootstrap

Cara menginstall bootstrap ada beberapa cara, anda bisa mengunakan beberapa cara seperti menggunakan composer, bower, menggunakan npm, secara offline dan online. Berikut ini contoh perintah untuk menginstall boostrap menggunakan cara tersebut.

Install Bootstrap dengan Bower-> Bower install bootstrap
Install Bootstrap dengan npm-> npm install bootstrap
Install Bootstrap dengan composer-> composer require twbs/bootstrap

Cara Menginstall Bootstrap

Terdapat dua cara menginstal bootstrap, dengan cara online dan offline. Kedua cara ini sama baiknya, namun dalam prosesnya lebih mudah menginstal secara online.

Cara Menginstall bootstrap secara online

Cara menginstall secara online adalah yang paling mudah dan jarang terjadi error jika bukan karena koneksi yang terputus. Untuk install online ini hanya memasukan beberapa script pada tag <Head> pada HTML dengan menghubungkan pada data css dan javascript nya secara online. Script nya seperti berikut

<!– Optional theme –>

<!– Latest compiled and minified JavaScript –>

Cara Menginstall bootstrap secara Offline

Cara menginstall secara offline ini adalah cara yang paling banyak digunakan oleh para developer karena semua file bootstrap sudah ada dalam komputer mereka sehingga tidak tergantung pada koneksi internet dalam pemakaiannya. Lain dengan penggunaan / installasi secara online yang ditunjukan kepada server luar, pada penginstallan offline ditujukan pada server sendiri atau secara lokal pada perangkat masing-masing developer.

Kemudian untuk menghubungkan atau menginstall bootstrapnya, buat sebuah file baik HTML atau PHP yang akan dihubungkan dengan bootstap nya. Dan sebaiknya dibuat sebagai autoload atau diberi nama index.php .

Contohnya seperti dibawah ini

<html>

<head>

<title>Bootstrap Part 1 : Pengertian dan Cara Menggunakan Bootstrap</title>

</head>

<body>

<h1>Cara Menggunakan Bootstrap | www.malasngoding.com</h1>

<button class=”btn btn-danger”>TOMBOL MERAH</button>

<button class=”btn btn-primary”>TOMBOL BIRU</button>

</body>

</html>

Manfaat & Keuntungan Menggunakan Bootstrap

Tentu anda yang awam tentang framework css boostrap bertanya-tanya apa istimewa jika menggunakan bootstrap sehingga banyak developer menggunakannya, berikut ini beberapa keuntungan jika menggukan bootstrap .

Penggunaan bootstrap sangat menghemat waktu pengerjaan.
Tampilan yang cukup menarik clean dan modern
Tampilan sudah bisa dikatakan mobile friendly karena sudah bisa responsive, karena bootstrap sudah mendukung segala jenis resolusi.
Sangat ringan dan terstruktur
Dan masih banyak lagi keuntungan yang didapat jika sudah membuat suatu website.

Bootstrap memberikan kemudahan bagi anda, dengan menggunakannya dapat memangkas waktu, tenaga dalam proses pengerjaan suatu website. Kita selalu dituntut melakukan pekerjaan apapun dengan efisien dan efektif, dengan demikian penggunaan framework twitter bootstrap ini bisa anda pilih ketika membuat suatu website bagi anda maupun klien anda.

Senin, 05 November 2018

MATERI CSS

Ringkasan Materi CSS dan HTML

Oke kawan, jumpa lagi dengan saya. Kali ini saya akan memberikan materi tentang CSS dan HTML. Pertama akan saya jelaskan tentang css.
Penjelasan tentang CSS
Cascanding Style Sheet (CSS) adalah style yang digunakan untuk mengatur tampilan dari halaman web. Dengan menggunakan css maka untuk menghasilkan tampilan web yang indah dan menarik. Bahasa pemrograman ini lebih mudah dan ringkas dari pada menggunakan atribud ditiap tag html.
Selian bisa membuat indah, css juga bisa digunakan untuk menciptakan web dengan tampilan yang dinamis dan fleksibel. Baik itu untuk tampilan web di browser ataupun ketika halaman web dicetak lewat printer.
SCC juga disusun dengan struktur tertentu berikut contoh dan penjelasan dari strukturnya :
css

Selector dan Declaration adalah Perintah css
Selector berfungsi untuk memberi tahu web browser bahwa pada elemen mana aturan css akan diterapkan
Selector dapat berupa nama tag, selector class atau selector id
Declaration merupakan aturan css yang diterapkan yang mana terdiri atas property dan value.

Kelebihan dari CSS

Dapat memisahkan desain dengan konten halaman web
Dapat mengatur desain seefisien mungkin
Jika ingin mengedit suau tema halaman web dapat dilakukan dengan mudah,yaitu cukup dengan memodifikasi pada cssnya saja
Satu css dapat diakses oleh banyak web

Kekurangan dari CSS

Tampilan pada setiap browser yang berbeda
Ada juga browser yang tidak dapat menyuport css
Membutuhkan waktu yang lama dalam pembuatanya
Sering terjadi bug atau eror

MATERI JAVA SCRIPT

Materi Tentang JAVASCRIPT

JAVASCRIPT

Pengertian Java Sript
JavaScript adalah bahasa yang berbentuk kumpulan skrip yang pada fungsinya berjalan pada suatu dokumen HTML, bahasa ini adalah bahasa pemrograman untuk memberikan kemampuan tambahan terhadap bahasa HTML dengan mengijinkan pengeksekusian perintah-perintah di sisi user, yang artinya di sisi browser bukan di sisi server web. Secara fungsional, JavaScript digunakan untuk menyediakan akses script pada objek yang dibenamkan ( embedded ). Contoh sederhana dari penggunaan JavaScript adalah membuka halaman pop up, fungsi validasi pada form sebelum data dikirimkan ke server, merubah image kursor ketika melewati objek tertentu.
perbedaan java sript dan java :

JavaSript	Java
Bahasa yang diintepresentasikan langsung oleh browsser	Bahasa yang setengah kompilasi dan memerlukan java virtual Machine untuk menterjemahkannya
Kode integrasi dangan HTML	Kode(applet) terpisah dari dokumen HTML, dipanggil pada saat membuka dokumen HTML
Bahasa dengan karakteristik yang terbatas	Bahasa dengan karakteristik yang luas (pendeklararian jenis variable)
Hubungan dinamis, referensi dari obyek diverivikasi pada saat loading	Hubungan statis, obyek harus ada pada saat program di loading (di kompilasi)
Kode program bisa diakses	Kode program tersembunyi

Bentuk skrip dari JavaScript
Skrip dari JavaScript terletak di dalam dokumen HTML. Kode tersebut tidak akan terlihat dari dalam jendela navigator anda, karena diantara tag tertentu yang memerintahkan navigator untuk memperlakukan bahwa skrip tersebut adalah skrip dari JavaScript.Contoh dari skrip yang menunjukkan bahwa skrip tersebut adalah skrip dari JavaScript adalah sebagai berikut:
<SRIPT language=”Javasript”>
Letakkan sript anda disini
</SRIPT>
<HTML>
<HEAD>
<TITLE>Skrip Javascript</TITLE>
</HEAD>
<BODY>
Percobaan memakai javaScript:<BR>
<SCRIPTLANGUAGE=”JavaScrip”>
<!–
document.write(“Sealamat Mencoba JavaScript<BR>”);
dokumen.write(“Semoga Sukses”);
//à
</SCRIPT>
</BODY>
</HTML>

Memberikan Komentar Dalam JavaScript
Agar script tidak dibaca sebagai skrip, akan tetapi dibaca sebagai komentar dan tidak akan dieksekusi sebagai program. Contohnya adalah sebagai berikut :
<SCRIPT language=”JavaSrcipt”>
<!–
Letakkan script anda disini
//à
</SCRIPT>
Kegunaannya antara lain adalah :

Mengingatkan kita akan bagian-bagian khusus didalam skrip tersebut, jika kita ingin merubah sesuatu di dalamnya.
Membuat orang yang tidak mengerti skrip anda, menjadi mengerti dengan petunjuk-petunjuk yang anda buat melalui komentar, kecuali anda tidak mau mensharing program yang anda miliki.

JavaScript Sebagai Bahasa Berorientasi Objek
Sebuah objek tersusun atas properti, metode, dan penanganan kejadian.

Properti

Adalah atribut dari sebuah objek.
Contoh objek dalam JavaScript yaitu window.Objek ini memiliki banyak property. Salah satu diantaranya adalah defaultStatus. Properti ini menyatakan baris status yang terdapat pada jendela browser.
Untuk mengakses sebuah property, perlu penulisan dengan bentuk sebagai berikut; nama_objek.nama_properti,
Contoh : Nama objek Nama properti

Windows.defaultStatus
Properti dapat diberi nilai melalui bentuk penugasan berikut:
Objek.properti=nilai
Contoh : window.dafaultStatus=”Selamat belajar JavaScript”;
<HTML>
<HAED>
<TITLE>Properti defaultStatus</TITLE>
</HEAD>
<BODY>
<H1>Tes defaultStatus</H1>
<SCRIPT LANGUAGE=”JavaScript”>
<!–
Window.defaultStatus=”Selamat belajat JavaScript”;
//à
</SCRIPT>
</BODY>
</HTML>
Window.defaultStatus

Metode

Adalah suatu kumpulan kode yang digunakan untuk melakukan sesuatu tindakan terhadap objek. Sebagai contoh, write() pada objek document adalah metode yang digunakan untuk menuliskan tulisan ke jendela browser.
Contoh : : Nama objek Nama properti
Document.write(“Halo”)
parameter
Jika sebuah kode tidak melibatkan parameter, tanda kurung buka dan tutup harus disertakan. Contoh : window.focus()

Penanganan Kejadian (Event handler)

Adalah sekumpulan kode yang akan dijal;ankan manakala pemakai melakukan suatu tindakan. Contoh kejadian adalah ketika pemakai meng-klik tombol mouse atau ketika menutup jendela browser. Bentuk penanganan kejadian adalah sebagai berikut :
Nama_kejadian=”kumpulan kode”
Kumpulan kode berisi sebuah pernyataan, antar pernyataan dipisah dengan ;.
Contoh kejadian adalah onMouseOver (ketika penunjuk mouse menunjuk ke link) dan onMouse Out (ketika penunjuk mouse tidak lagi menyorot link).

Contoh Penanganan Kejadian
<HTML>
<HEAD>
<TITLE>Kejadian</TITLE>
</HEAD>
<BODY>
<H1>Tes Kejadian</H1>
<P>Cobalah letakkan penunjuk mouse ke link berikutdan perhatikan isi baris status. Kemudian pindahkan penunjuk mouse dari link berikut dan perhatikan isi baris status
</P>
<A HREF=”www.fujitsu.com”
onMouseOver=”window.status=’Anda menyorot link, lho’;return true”
onMouseOut=”window.status=”;return true”>fujitsu</A>
</BODY>
</HTML>

a. Menangani Pemasukan Data
<HTML>
<HEAD>
<TITLE>Pemasukan Data</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE=”JavaScript”>
<!–
var nama=prompt(“Siapa nama anda?”);
Document.write(“Hai,”+nama);
//– >
</SCRIPT>
</BODY>
</HTML>

b. Mengenal Jendela Peringatan
Jika karena sesuatu hal anda ingin memberikan pesan kepada pemakai, anda bisa menyajikannya dalam bentuk kotak dialog yang disebut Alert Box.
<HTML>
<HEAD>
<TITLE>Alert Box</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE=”JavaScript”>
<!–
Window.alert(“Ini merupakan pesan untuk anda”);
//– >
</SCRIPT>
</BODY>
</HTML>

c. Mengenal Jendela Konfirmasi
<HTML>
<HEAD>
<TITLE>Konfirmasi</TITLE>
</HEAD>
</BODY>
<SCRIPT LANGUAGE=”JavaScript”>
<!–
Var jawaban=window.comfirm(“anda ingin meneruskan?”);
Document.write(“Jawaban Anda:”+jawaban);
//– >
</SCRIPT>
</BODY>
</HTML>

d. Mengenal Hirarki Objek
Salah satu objek yang mempunyai kedudukan tertinggi dalam JavaScript adalah window. Objek ini sendiri memiliki objek lain; antara lain yaitu statusbar dan document. Dengan demikian untuk mengakses document diperlukan penulisan sebagai berikut :
Nama objek objek ini merupakan properti bagi window
Window.document.write(“halo”)
Metode milik objek document

window

statusbar

document

Konsep Variabel Dalam JavaScript
Variabel adalah suatu objek yang berisi data-data, yang mana dapat dimodifikasiselam pengeksekusian program. Di JavaScript kita bias memberikan nama variable dengan criteria berikut ini :

Nama variable harus dimulai oleh satu huruf (huruf besar maupun kecil) atau satu karakter”_”.
Nama variable bias terdiri dari huruf-huruf, angka-angka atau karakter_dan & (spasi kosong tidak diperbolehkan).
Nama variable tidak boleh memakai reserved word.

Pada JavaScript kita menggunakan system case sensitive yang artinya membedakan nama variable dengan huruf besar dan huruf kecil.

Nama variable yang benar	Nama variable yang tidak benar	Alasan
Variabel	Nama Dari Variabel	Ada spasi kosong
Nama_Dari_Variabel	123Nama_Dari_Variabel	Dimulai dengan angka
nama_dari_variabel	andry@yahoo.com	Karakter @
Nama_dari_variabel 123	Nama-Dari-Variabel	Karakter -
_707	Transient	Reserved word

Mendeklarasikan Variabel
Deklarasi variabel di JavaScript dapat kita lakukan dengan dua cara :

Eksplisit : dengan menuliskan kata kunci var kemudian diikuti dengan nama variable dan nilai dari variable : var test=”halo”.
Implisit : dengan menuliskan secara langsung nama dari variable dan diikuti nilai dari variabel : test=”halo”.

Navigator secara otomatis akan memperlukan pernyataan itu sebagai deklarasi dari sebuah variable. Pengaksesan variable bergantung lokasi dimana dia dideklarasikan :
Jika dia didelkarasikan di bagian awal dari skrip program, yang artinya sebelum pendeklarasian semua fungsi, maka semua fungsi di dalam program bias mengakses variabel ini, dan variable ini menjadi variabel global.
Jika dia dideklarasikan dengan menggunakan kata kunci var di dalam suatu fungsi tertentu, maka variable itu hanya bias diakses dari dalam fungsi tersebut, dan artinya variable ini tidak berguna bagi fungsi-fungsi yang lain, dan kita sebut variabel ini menjadi variabel local.
Contoh Mendeklarasikan Variabel
<HTML>
<HEAD>
<TITLE>Contoh deklarasi variabel</TITLE>
</HEAD>
<BODY>
<SCRIPT language=”JavaScript”>
<!–
Var VariabelKu;
Var VariabelKu2=3;
VariabelKu=2;
Document.write(VariabelKu*variabelKu2);
//à
</SCRIPT>
</BODY>
</HTML>
Contoh Variabel Lokal dan Global
<HTML>
<HEAD>
<TITLE>Contoh variabel Lokal dan Global</TITLE>
</HEAD>
<BOBY>
<SCRIPT language=”Javascript”>
<!–
var a=12;
var b=4;
Function Perkalian Dengan2(b)
{var a=b*2;return a;}
Document.write(“Dua kali dari”,b,” adalah”,Perkalian Dengan2(b));
document.write(“Nilai dari a adalah “,a);
//à
</SCRIPT>
</BODY>
</HTML>

Konversi jenis variabel
Meskipun JavaScript memungkinkan pengaturan perubahan jenis variabel secara transparan, kadang-kadang kita perlu juga untuk melakukan konversi jenis variabel secara paksa. Ada 2 Fungsi dasar yang memungkinkan merubah jenis variabel yang dilewatkan dengan parameter tertentu :

Parselnt()

Fungsi ini memungkinkan merubah satu variabel yang dilewatkan dengan parameter tertentumenjadi bilangan bulat. Sintaksnya adalah :
Parselnt(string[,basis]);
Contoh :
Var a=”123”; var b=”456”;
Document.write(a+b,”<BR>”);//hasil6
Document.write(parselnt(a)+parselnt(b),”<BR;// hasil 579

parseFloat()

Adalah satu fungsi inti dari JavaScript yang memungkinkan merubah variabel yang dilewatkan dengan parameter tertentu menjadi bilangan desimal, sintaks dari fungsi parseFloat adalah :
parseFloat(string);
tabel contoh tentang penggunaan fungsi parseFloat()

Contoh	Hasil
parseFloat(“128.34”);	128.34
parseFloat(“128,34”);	128
parseFloat(“12.3E-6”);	0.0000123
parseFloat(“halo”);	NaN
parseFloat(“24.568Halo38”);	24.568
parseFloat(“halo38.24”);	NaN
parseFloat(“AFBBEF”);	NaN
parseFloat(“0284”);	284
parseFloat(“0xAB882F”);	11241519

Struktur Kondisional
Adalah intruksi-insruksi yang memungkinkan kita untuk melakukan test apakah satu kondisi benar atau tidak, dan memungkinkan juga terjadinya proses iterasi didalam skrip yang kita buat.

Pernyataan if

Instruksi ini memungkinkan kita untuk mengeksekusi satu blokinstrukdi jika kondisi syaratnya terpenuhi. Sintaks dari intruksi ini adalah : if (kondisi syarat terpenuhi)
{daftar intruksi atau blok intruksi}
Beberapa catatan penting tentang intruksi ini :

Kondisi harus terletak diantara dua tanda kurung.
Kita bias meletakkan beberapa kondisi dengan menggunakan operator AND atau OR

Pernyataan if..else

Instruksi if adalah intruksi dasar yang hanya memungkunkan kita untuk melakukan pemeriksaan apakah satu kondisi terpenuhi atau tidak. Pada kenyataanya kita menginginkan lebih dari satu kondisi syarat untuk menjalankan program, untuk kebutuhan itu kita bias menggunakann instruksi if…else…
Sintaks lengkap dari instruksi ini adalah :
If(kondisi syarat1 terpenuhi) {
Daftar instruksi atau blok instruksi
}
Else {
Daftar instruksi/blok instruksi yang lain
}

Pernyataan While

Sintaks dari intruksi ini adalah :
While (kondisi syarat terpenuhi) {
daftar instruksi-instruksi atau blok instruksi
}
Contoh pernyataan while
<HTML>
<HEAD>
<TITLE>Contoh while</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE=”JavaScript”>
<!–
Var bilangan=0;
While (bilangan <5) {
document.write(“JavaScript<BR;
bilangan++;
}
//à
</SCRIPT>
</BODY>
</HTML>

Pernyatan do…while

Bentuk pernyataan do…while :
do {
blok pernyataan
} while (kondisi);
Contoh pernyataan do .. while
<HTML>
<HEAD>
<TITLE>Contoh do while</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE=”JavaScript”>
<!–
Var bilangan=1;
do {
document.write(bilangan +”<BR>”);
bilangan++;
} while (bilangan <6);
//à
</SCRIPT>
</BODY>
</HTML>

Pernyataan For

For adalah salah satu intruksi yang menggunakan fasilitas Loop. Dalam sintaksnya kita hanya perlu memasukkan nama variabel sebagai penghitung (dan juga nilai awalnya, serta kondisi dimana loop akan berhanti(pada dasarnya, kondisi dimana nilai penghitung melewati angka tertentu)), dan yang terakhir intruksimodifikasi penghitung, increment (naik per unit) atau decrement (turun par unit).sintaks lengkap dari intruksi ini adalah :
for (penghitung; kondisi loop berhenti; modifikasi penghitung){
daftar intruksi-instruksi atau blok instruksi
}
Contoh pernyataan For
<HTML>
<HEAD>
<TITLE>Contoh for</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE=”JavaScript”>
<!–
var bilangan=0;
for (bilangan=1; bilangan <=5;
bilangan++)
document.write(bilangan + “<BR>”);
//à
</SCRIPT>
</BODY></HTML>

MATERI HTML

HTML

Hypertext Markup Language (HTML) adalah sebuah bahasa markah yang digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi di dalam sebuah penjelajah web Internet dan pemformatan hiperteks sederhana yang ditulis dalam berkas format ASCII agar dapat menghasilkan tampilan wujud yang terintegerasi. Dengan kata lain, berkas yang dibuat dalam perangkat lunak pengolah kata dan disimpan dalam format ASCII normal sehingga menjadi halaman web dengan perintah-perintah HTML. Bermula dari sebuah bahasa yang sebelumnya banyak digunakan di dunia penerbitan dan percetakan yang disebut dengan SGML (Standard Generalized Markup Language), HTML adalah sebuah standar yang digunakan secara luas untuk menampilkan halaman web. HTML saat ini merupakan standar Internet yang didefinisikan dan dikendalikan penggunaannya oleh World Wide Web Consortium (W3C). HTML dibuat oleh kolaborasi Caillau TIM dengan Berners-lee Robert ketika mereka bekerja di CERN pada tahun 1989 (CERN adalah lembaga penelitian fisika energi tinggi di Jenewa).^[1]

Daftar isi

Sejarah

Pada tahun 1980 seorang ahli fisika, Tim Berners-Lee, dan juga seorang kontraktor di CERN (Organisasi Eropa untuk Riset Nuklir) mengusulkan dan menyusun ENQUIRE, sebuah sistem untuk ilmuwan CERN dalam membagi dokumen. Sembilan tahun kemudian, Berners-Lee mengusulkan adanya sistem markah berbasis internet.^[2] Berners-Lee menspesifikasikan HTML dan menulis jaringan beserta perangkat lunaknya di akhir 1990. Pada tahun yang sama, Berners-Lee dan Robert Cailliau, insinyur sistem data CERN berkolaborasi dalam sebuah permintaan untuk pendanaan, namun tidak diterima secara resmi oleh CERN. Di catatan pribadinya^[3] sejak 1990 dia mendaftar^[4] "beberapa dari banyak daerah yang menggunakan hypertext" dan pertama-tama menempatkan sebuah ensiklopedia.
Penjelasan pertama yang dibagi untuk umum dari HTML adalah sebuah dokumen yang disebut "Tanda HTML", pertama kali disebutkan di Internet oleh Tim Berners-Lee pada akhir 1991.^[5]^[6] Tanda ini menggambarkan 18 elemen awal mula, versi sederhana dari HTML. Kecuali untuk tag hyperlink, yang sangat dipengaruhi oleh SGMLguid, in-house Standard Generalized Markup Language (SGML) berbasis format dokumen di CERN. Sebelas elemen ini masih ada di HTML 4.^[7]
HTML adalah bahasa markah yang digunakan peramban untuk menafsirkan dan menulis teks, gambar dan bahan lainnya ke dalam halaman web secara visual maupun suara. Karakteristik dasar untuk setiap item dari markah HTML didefinisikan di dalam peramban, dan karakteristik ini dapat diubah atau ditingkatkan dengan menggunakan tambahan halaman web desainer CSS. Banyak elemen teks ditemukan di laporan teknis ISO pada tahun 1988 TR 9537 Teknik untuk menggunakan SGML, yang pada gilirannya meliputi fitur bahasa format teks awal seperti yang digunakan oleh komandan RUNOFF dikembangkan pada awal 1960-an untuk sistem operasi: perintah-perintah format ini berasal dari perintah yang digunakan oleh pengetik untuk memformat dokumen CTSS secara manual. Namun, konsep SGML dari markah umum didasarkan pada unsur-unsur daripada hanya efek cetak, dengan pemisahan struktur dan markah juga; HTML telah semakin bergerak ke arah ini dengan CSS.

Sejarah versi HTML

24 November 1995

HTML 2.0 dipublikasikan sebagai IETF RFC 1866. Penambahan RFC memperbanyak kemampuan untuk:

November 25, 1995: RFC 1867 (mengunggah file berdasarkan bentuk)
Mei 1996: RFC 1942 (tabel)
Agustus 1996: RFC 1980 (peta gambar berbasis klien)
Januari 1997: RFC 2070 (internasionalisasi)

14 Januari 1997

HTML 3.2^[8] dipublikasikan sebagai Konsorsium World Wide Web. Versi ini merupakan versi pertama yang dikembangkan dan distandarisasi secara khusus oleh Konsorsium World Wide Web, sebagaimana IETF sudah menutup kelompok kerja HTMLnya pada 12 September, 1996.^[9]

Pada awalnya disebut "Wilbur",^[10] HTML 3.2 menghilangkan rumus matematika sama sekali yang sedang berkonsiliasi atas kasus tumpang tindih antara berbagai kepemilikan dan mengadopsi sebagian besar tanda markah visual dari Netscape. Elemen kedip dari Netscape dan elemen marquee besutan Microsoft dihilangkan karena kesepakatan bersama antara kedua perusahaan.^[11] Sebuah markup untuk rumus matematika serupa dengan yang ada dalam HTML tidak memiliki standar sampai 14 bulan kemudian di MathML.

18 December 1997

HTML 4.0^[12] dipublikasikan sebagai rekomendasi W3C. Versi ini memiliki 3 variasi, yaitu:

Ketat, di mana elemen terdeprekasi dilarang.
Transisional, di mana elemen terdeprekasi diperbolehkan.
Frameset, di mana sebagian besar hanya elemen yang berkaitan dengan frame diperbolehkan.

Dulunya memiliki kode nama "Cougar",^[10] HTML 4.0 mengadopsi banyak tipe elemen dan atribut yang spesifik untuk peramban.HTML 4 adalah sebuah aplikasi SGML sesuai dengan ISO 8879 – SGML.^[13]

HTML 2.0—(RFC 1866) disetujui sebagai standar 22 September 1995,
HTML 3.2—14 Januari 1996,
HTML 4.0—18 Desember 1997,
HTML 4.01 (minor fixes)—24 Desember 1999,
ISO/IEC 15445:2000 ("ISO HTML", berdasar pada HTML 4.01 Strict)—15 Mei 2000.
HTML 5 (stabil) rekomendasi W3C—28 Oktober 2014.

Kegunaan

Dokumen HTML mirip dengan dokumen tulisan biasa, hanya dalam dokumen ini sebuah tulisan bisa memuat instruksi yang ditandai dengan kode atau lebih dikenal dengan TAG tertentu. Sebagai contoh jika ingin membuat tulisan ditampilkan menjadi tebal seperti: TAMPIL TEBAL, maka penulisannya dilakukan dengan cara: <b> TAMPIL TEBAL</b>. Tanda <b> digunakan untuk mengaktifkan instruksi cetak tebal, diikuti oleh tulisan yang ingin ditebalkan, dan diakhiri dengan tanda </b> untuk menonaktifkan cetak tebal tersebut. HTML lebih menekankan pada penggambaran komponen-komponen struktur dan format di dalam halaman web daripada menentukan penampilannya. Sedangkan penjelajah web digunakan untuk menginterpretasikan susunan halaman ke gaya built-in penjelajah web dengan menggunakan jenis tulisan, tab, warna, garis, dan perataan text yang dikehendaki ke komputer yang menampilkan halaman web. Salah satu hal Penting tentang eksistensi HTML adalah tersedianya Lingua franca (bahasa Komunikasi) antar komputer dengan kemampuan berbeda. Pengguna Macintosh tidak dapat melihat tampilan yang sama sebagaimana tampilan yang terlihat dalam pc berbasis Windows. Pengguna Microsoft Windows pun tidak akan dapat melihat tampilan yang sama sebagaimana tampilan yang terlihat pada pengguna yang menggunakan Produk-produk Sun Microsystems. namun demikian pengguna-pengguna tersebut dapat melihat semua halaman web yang telah diformat dan berisi Grafika dan Pranala.^[14]

Kegunaan lain

Mengintegerasikan gambar dengan tulisan.
Membuat Pranala.
Mengintegerasikan berkas suara dan rekaman gambar hidup.
Membuat form interaktif.^[15]

Menyunting format tulisan

HTML memungkinkan seseorang untuk menyunting tampilan atau format berkas yang akan dikirimkan melalui media daring. Beberapa hal yang dapat dilakukan dalam menentukan format berkas adalah:

Menampilkan suatu kelompok kata dalam beberapa ukuran yang dapat digunakan untuk judul, heading dan sebagainya.
Menampilkan tulisan dalam bentuk cetakan tebal
Menampilkan sekelompok kata dalam bentuk miring
Menampilkan naskah dalam bentuk huruf yang mirip dengan hasil ketikan mesin ketik
Mengubah-ubah ukuran tulisan untuk suatu karakter tertentu.

Markah/Tanda

Secara garis besar, terdapat 4 jenis elemen dari HTML:

Struktural. Tanda yang menentukan level atau tingkatan dari sebuah tulisan (contoh, <h1>Golf</h1> akan memerintahkan peramban untuk menampilkan "Golf" sebagai tulisan tebal besar yang menunjukkan sebagai Heading 1
Presentasional. Tanda yang menentukan tampilan dari sebuah tulisan tidak peduli dengan level dari tulisan tersebut (contoh, <b>boldface</b> akan menampilkan bold. Tanda presentasional saat ini sudah mulai digantikan oleh CSS dan tidak direkomendasikan untuk mengatur tampilan tulisan,
Hiperteks. Tanda yang menunjukkan pranala ke bagian dari dokumen tersebut atau pranala ke dokumen lain (contoh, <a href="http://www.wikipedia.org/"> Wikipedia</a> akan menampilkan Wikipedia sebagai sebuah hyperlink ke URL tertentu),
Elemen widget yang membuat objek-objek lain seperti tombol (<button>), daftar (<li>), dan garis horizontal (<hr>). Konsep hiperteks pada HTML memungkinkan pembuatan tautan pada suatu kelompok kata atau frasa untuk menuju ke bagian manapun dalam World Wide Web,

Ada tiga macam pranala (link) yang dapat digunakan:

Pranala menuju bagian lain dari page.
Pranala menuju page lain dalam satu web site.
Pranala menuju resource atau web site yang berbeda.^[16]

Selain markup presentasional, markup yang lain tidak menentukan bagaimana tampilan dari sebuah tulisan. Namun untuk saat ini, penggunaan tag HTML untuk menentukan tampilan telah dianjurkan untuk mulai ditinggalkan, dan sebagai gantinya digunakan Cascading Style Sheets.

Contoh dokumen HTML sederhana

Untuk HTML 4 Strict ^[17]

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head bgcolor=black text=white>
  <title>Selamat Datang HTML</title>
 </head>
 <body>
  <p>Halo dunia!</p>
 </body>
</html>

Untuk HTML 5 ^[18]

<!DOCTYPE HTML>
<html>
 <head style="background-color: black; color: white;">
  <title>Selamat Datang HTML</title>
 </head>
 <body>
  <p>Halo dunia!</p>
 </body>
</html>

Head

Dokumen HTML diapit oleh tag <HEAD></HEAD>. Di dalam bagian ini biasanya dimuat tag TITLE yang menampilkan judul halaman pada titlenya browser. Selain itu Bookmark juga menggunakan tag TITLE untuk memberi mark suatu web site. Browser menyimpan “title” sebagai bookmark dan juga untuk keperluan pencarian (searching) biasanya title digunakan sebagai keyword. Header juga memuat tag META yang biasanya dapat digunakan untuk menentukan informasi tertentu mengenai dokumen HTML. Anda bisa menentukan author name, keywords, dan lainnya pada tag META.
Contoh:

<meta name="author" content="ubuntu-online">

Body

Bagian BODY, yang dinyatakan dengan tag <BODY>…</BODY>, merupakan tubuh atau isi dari dokumen HTML di mana anda meletakan informasi yang akan ditampilkan pada browser.

Tag

HTML tidak membedakan penggunaan huruf besar ataupun huruf kecil dari suatu elemen. Suatu elemen HTML terdiri dari tag-tag beserta teks yang ada dalam tag-tag tersebut. Tag ini dinyatakan dengan tanda lebih kecil (<) dan tanda lebih besar (>).
Tag biasanya merupakan suatu pasangan yang disebut dengan:

Tag awal, dinyatakan dalam bentuk <nama tag>
Tag akhir, dinyatakan dalam bentuk </nama tag>

Formatnya: <nama tag> teks yang ditampilkan </nama tag>.
Contoh: untuk menampilkan teks dalam format teks miring Teks ini terlihat miring di browser anda dengan perintah HTML <i>Teks ini terlihat miring di browser Anda</i>

Atribut

Tag awal bisa memiliki beberapa buah atribut yang menyatakan karakteristik dari tag tersebut. Misalnya, <P STYLE="text-align:left"> digunakan untuk membuat rata kiri suatu paragraf. Tag yang digunakan adalah <P> dan atribut yang menyertainya adalah STYLE dengan nilai "text-align:left". Nilai atribut STYLE ditulis dalam bahasa CSS.