Jumat, 06 Januari 2017

Belajar pemrograman web HTML

Belajar Pemrograman Web HTML Dasar

HTML adalah singkatan dari Hypertext Markup Language. Bahasa HTML digunakan untuk membangun halaman web. Selain itu, HTML adalah bahasa markup yang umum digunakan oleh para developer web. Karena kemudahan dalam menggunakannya, HTML menjadi bahasa pemrograman web yang populer dikalangan para developer.
HTML mempunyai fungsi di antaranya dapat menentukan format suatu teks, membuat list, membuat link ke dokumen lain, menyisipkan gambar, serta dapat menampilkan informasi dalam bentuk tabel. Selain itu, HTML juga berfungsi untuk mengatur tampilan dari halaman web dan isinya, menambahkan objek seperti gambar, video, audio, dan lain-lain.
Bagi pembaca yang baru mengenal HTML, untuk membuat dokumen web dengan HTML cukup mudah dilakukan. Namun sebelumnya, baiknya pembaca mengenal terlebih dahulu struktur yang dimiliki oleh HTML. Di bawah ini akan dijelaskan mengenai strukur dan bagaimana menggunakan HTML.
Untuk mulai memahami cara menggunakan HTML, silahkan lihat gambar struktur halaman HTML di bawah ini.
pemrograman web

Pada intinya halaman HTML terdiri dari tag, element, dan attribute atau halaman HTML itu disusun oleh element-element seperti body, paragraph, table, list, dan lain-lain. Penandaan setiap element menggunakan tag dengan format penulisan dengan menggunakan tanda baca “<”, “>”, “/” atau <tag>content</tag>. Pada contoh di atas <h1>Heading 1</h1> merupakan tag.
Untuk lebih jelasnya, mari kita praktekan dengan membuat sebuah halaman HTML menggunakan editor teks yang sudah pembaca miliki. Pada contoh ini saya menggunakan editor teks Visual Studio Code. Silahkan buat file baru kemudian salin kodingan HTML di bawah ini.

<html>
    <head>
        <title>Halaman HTML</title>
    </head>
    
    <body>
        <h1>
Hello World</h1>
<p>
Ini adalah paragraf pertama di halaman HTML</p>
</p>
</body>
</html>

<html>

<head>

<title>Halaman HTML</title>

</head>

<body>

<h1>Hello World</h1>

<p>Ini adalah paragraf pertama di halaman HTML</p>

</p>

</body>

</html>

Setelah itu, silahkan simpan file tersebut pada folder yang yang diinginkan serta berikan nama pada file tersebut dengan akhiran .html atau .htm . Pada contoh ini, saya berikan nama file tersebut adalah index.html. Silahkan klik file tersebut untuk melihat halaman HTML yang sudah dibuat.

pemrograman web

Contoh di atas memperlihatkan title, heading 1, dan paragraph. Untuk menambahkan informasi terhadap element atau tag, kita menggunakan attribute. Element HTML dapat memiliki attribute, hal ini yang memberikan informasi terhadap element tersebut. Selain itu, attribute selalu ditentukan dalam awal tag. Contoh di bawah ini merupakan kodingan HTML yang menampilkan gambar dengan attribute yang memberikan ukuran gambar atau width dan height.

<img src="teknojurnal.jpg" width="104" height="142">

1	<img src="teknojurnal.jpg" width="104" height="142">

Contoh lainnya adalah tag untuk menampilkan link yang mempunyai href attribute. Ini berfungsi untuk menampilkan halaman lain dengan cara melakukan klik pada kata “ini adalah link”. Pada contoh ini ketika di klik maka akan menampilkan halaman dari situs resminya teknojurnal.com

<a href="http://teknojurnal.com">ini adalah link</a>

1	<a href="http://teknojurnal.com">ini adalah link</a>

Jika kita gabungkan semua kodingan dalam satu halaman HTML, makan kodingannya akan seperti di bawah ini. Jangan lupa untuk menampatkan gambar pada folder yang sama dengan index.html agar gambar dapat ditampilkan.

<html>
    <head>
        <title>Halaman HTML</title>
    </head>
    
    <body>
        <h1>
Hello World</h1>
<p>
Ini adalah paragraf pertama di halaman HTML</p>
<img src="cake.jpg" width="140" height="140"> <br>
        <a href="http://teknojurnal.com">ini adalah link</a>
    </body>
</html>

<html>

<head>

<title>Halaman HTML</title>

</head>

<body>

<h1>Hello World</h1>

<p>Ini adalah paragraf pertama di halaman HTML</p>

<a href="http://teknojurnal.com">ini adalah link</a>

</body>

</html>

Untuk melihat hasilnya, silahkan jalankan file index.html yang sudah dibuat dengan cara diklik. Maka tampilan akhirnya akan seperti di bawah ini.
pemrograman web

javaScript

Pengertian Java Script
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 :

JavaScript	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>

dasar css

DASAR - DASAR CSS

Apa itu CSS?

CSS adalah singkatan dari Cascading Style Sheets. CSS adalah kode untuk mengatur bagaimana elemen HTML ditampilkan dalam suatu halaman website. Elemen HTML dimaksud di sini adalah tag-tag HTML misalnya, tag <body>, , <table>, <div>
tag tag atau kode HTML lainnya yang digunakan dalam mendesain HTML.
Di Mana dan Bagaimana Menulis Kode CSS

Di mana kita bisa menulis kode-kode CSS? sama halnya seperti HTML, kita menulis kode CSS di teks editor seperti notepad atau bisa langsung di aplikasi pembuat website seperti MS Frontpage atau Dreamweaver.

Kode CSS biasanya di tulis di file yang sama dengan file tempat kode-kode HTML kita, yang bisa saja ber-ekstensi .html, .php. .asp

Contoh, file : index.html, kalian ketik kode di bawah di Notepad, lalu save as index.html. Jangan lupa save as type: All File (*.*)

<html>
<head>
<style>
p{font-size:17pt;}
</style>
</head>
<body>
Ini adalah paragraf yang diformat menggunakan CSS
<br />

<div style="border: red 1px solid;">
Ini juga di atur menggunakan CSS, di mana kode CSS langsung ditulis di tag atau elemen HTML
</div>
</body>
</html>

Jika kita lihat kode di atas:
Kode CSS bisa ditulis di antara tag <style> dan <style>
Kode CSS juga bisa ditulis langsung di dalam element HTML yang ingin atur formatnya <div style="border:red 1px solid">

Output dari kode di atas adalah:

Belajar CSS

Kode CSS bisa juga di tulis di file terpisah, dengan menyimpannya ber-ekstensi .css

Contoh: ketiklah kode di bawah di notepad lalu simpan dengan nama gaya.css

p{font-size:17pt;}

Lalu bagaimana cara menyatukan file css di atas ke dalam kode HTML kita, cukup menulis kode berikut di dalam kode HTML kita:

<link rel="stylesheet" type="text/css" href="highlight.css">

Syntax CSS

Setelah kalian tahu di mana dan bagaimana cara menulis kode CSS, sekarang kita mulai belajar kode CSS. Aturan sintaks penulisan kode CSS adalah sebagai berikut:

selector {property: value}

Selector: adalah tag atau element HTML yang ingin diatur gaya atau formatnya, misalnya p, table, body, div dan lainnya
Property: adalah kode CSS untuk mengatur format element HTML. Misalnya font-size, border, background-color, dan lainnya.
Value: adalah nilai dari property CSS di atas, misalnya nilai font-size kita set 17pt
Lebih Lanjut dengan Selector CSS

Jika kita lihat sintaks CSS di atas, selector adalah tag atau elemen HTML yang akan di atur. Ada macam-macam cara memilih selector:

    Selector Normal
    Yaitu, kamu langsung menulis tag HTML apa yang akan diatur format CSS nya.
    Contoh:

    body {color: black}

    p {font-family: "sans serif"}

    p
    {
    text-align: center;
    color: black;
    font-family: arial
    }

    Selector Grouping
    Anda bisa menggroup-kan elemen-elemen HTML yang akan diformat CSS nya, mungkin karena formatnya sama. Contoh:

    h1,h2,h3,h4
    {
    color: blue;
    }

    Class Selector
    Biasanya kita ingin mengatur suatu paragraf atau div dengan format yang berbeda-beda, maka kita bisa buat kelas-kelas. Contoh:

    <html>
    <head>
    <style>
    a.menu{color:black;text-decoration:none}
    a.judul{color:blue;font-size:15pt}
    </style>
    </div>
</table>
</body>
    <body>
    <center>
    <a class="menu" href="http://www.blogger.com/index.php">Home</a> |
    <a class="menu" href="http://www.blogger.com/teknologi.php">Teknologi</a> |
    <a class="menu" href="http://www.blogger.com/ekonomi.php">Ekonomi</a>

    <a class="judul" href="http://www.blogger.com/artikel1.html">Ini adalah judul artikel</a>

    </center></body>

    Pada contoh di atas terlihat kita memilih selector a untuk tag <a href="http://www.blogger.com/blogger.g?blogID=1733603682017083721">, lalu kita buat kelas-kelas dengan cara memberi titik (.) diikuti nama kelas.

    Jika anda membuat kelas, jangan lupa di tag HTML ditambahkan properti class="nama kelas"

    ID Selector
    Selain menggunakan kelas, kita juga bisa menggunakan id selector, caranya: kode atau tag HTML yang akan diatur CSSnya kita kasih id, yaitu dengan menambahkan properti id="nama-id" pada tag HTMLnya.
    Contoh:

    <html>
    <head>
    <style>
    #biru {color:blue}
    #hijau {color:green}
    </style>
    </head>
    <body>
    <div id="biru">
Tulisan ini diformat berwarna biru
    </div>
<div id="hijau">
Tulisan ini difromat berwarna hijau
    </div>
</body>
    </html>

Property CSS
Setelah kita mengetahui bagaimana cara memilih elemen atau tag HTML mana yang akan diformat CSS, saatnya kita mengatur format dari HTML. Property CSS adalah kode css untuk mengatur format atau gaya dari elemen HTML yang ingin ditampilkan di halaman website kita.

Panduan pemrograman berbasis web

SELAMAT DATANG DI Panduan Pemrograman Berbasis Web dengan HTML, PHP,

1. Panduan PEMROGRAMAN BERBASIS WEB MENGGUNAKAN HTML, PHP,
2. Panduan Pemrograman Berbasis Web Mengenal HTML merupakan bahasa markup yang digunakan untuk pembuatan tampilan, layout atau tata letak suatu website. Sintak HTML selalu dibuka dengan kode <html> dan diakhiri dengan </html>. Berikut hierarki sintak HTML. <html> <head> <title>Ini Judul Website Kamu</title> </head> <body> Ini adalah tempat meletakkan isi website. </body> </html> Beberapa tag penting dalam HTML :  <b> Berfungsi untuk menebalkan tulisan. Contoh <b>Tulisanku</b>, akan menghasilkan Tulisanku.  <i> Berfungsi untuk cetak miring tulisan. Contoh <i>Tulisanku</i>, akan menghasilkan Tulisanku.  <u> Berfungsi untuk menggarisbawahi tulisan. Contoh <u>Tulisanku</u>, akan menghasilkan Tulisanku.  <p> Berfungsi membuat paragraph baru  <center> Berfungsi mengetengahkan tulisan.  <h1><h2><h3>.. Berfungsi membuat judul /headline dalam isi.  <br/> Berfungsi mengantarkan tulisan pada baris berikutnya
3. Panduan Pemrograman Berbasis Web Membuat Tabel dengan HTML Untuk membuat tabel digunakan perintah <table> Contoh : <table> <tr><td>Nama</td><td>Usia</td></tr> <tr><td>Budi</td><td>17</td></tr> <tr><td>Jono</td><td>18</td></tr> <tr><td>Agung</td><td>19</td></tr> </table> Akan Menghasilkan seperti berikut : Nama Usia Budi 17 Jono 18 Agung 19 Penjelasan 1. Perintah <table> berfungsi membuka tabel baru, yang ditutup dengan </table> 2. Perintah <tr> berfungsi membuka baris baru dan mengakhiri baris dengan </tr> 3. Perintah <td> diletakkan di dalam perintah <tr>, perintah <td> berfungsi membuka cell/blok, seperti kode <td>Nama</td>, maka kata “Nama” akan ditulis pada satu cell/blok. Sintak Dasar Yang Membedakan PHP dan HTML HTML dan PHP merupakan dua bahasa yang digunakan secara bersamaan , di mana dalam hal ini HTMl berfungsi sebagai perancang desain, layout atau tata letak yang menggambarkan suatu website. Sedangkan PHP merupakan bahasa pemrograman yang berisi algoritma untuk mengolah suatu proses dalam website., salah satunyai fungsi koneksi ke database. Sintak PHP selalu dimulai dengan <? Atau <?php dan diakhiri dengan ?>. dan di dalam sintak php juga dapat kita sisipkan kode html dengan menambahkan perintah echo “”; Sebagai contoh : <html> <head> <title>Contoh</title> </head>
4. Panduan Pemrograman Berbasis <body> <b>Ini Contoh Pertama</b> </body> </html> Selanjutnya perhatikan sintak berikut. <html> <head> <title>Contoh</title> </head> <body> <?php echo “ <b>Ini Contoh Pertama</b>”; ?> </body> </html> Perhatikan perbedaan kedua sintak tersebut, terlihat bahwa sintak HTML dapat dimasukkan ke dalam sintak PHP dengan penambahan echo. Kedua sintak di atas akan menghasilkan program yang sama yaitu: Ini Contoh Pertama Sintak Dasar PHP Untuk mengenal sintak dalam PHP, tentu saja kita juga harus sudah mengenal algoritma dalam pemrograman, karena pada dasarnya semua bahasa pemrograman menggunakan algoritma yang sam. Mulai dari pengenalan variable, proses pengulangan (looping), danmenghasilkan keluaran/output. Di dalam PHP, setiap variable diberi tanda dollar ($). Contoh pengenalan variable : <? $nama=”Budi”; $usia=”15”; Echo “Namaku $nama, dan usiaku $usia”; ?>
5. Panduan Pemrograman Berbasis Web Maka hasil keluaran yang tampil adalah : Namaku Budi, dan usiaku 15 Selanjutnya untuk proses matematika : <? $panjang=20; $lebar=15; $luas=$panjang*$lebar; Echo “ Luas Persegi Ini Adalah $luas”; ?> Maka hasil keluaran yang tampil adalah : Luas Persegi Ini Adalah 300 Menggunakan Looping/Pengulangan Dalam PHP Proses Looping/Pengulangan adalah salah satu proses yang sangat penting dalam pemrograman, karena dengan menggunakan fungsi loop ini kita dapat menampilkan beberapa data secara bersamaan. Dan dalam php sendiri fungsi loop berguna saat melakukan pemenggilan record dari database. Di sini kita fokus pada penggunaan loop dengan while. Contoh: <? $a=1; while($a<=5){ echo "Budi<br/>"; $a=$a+1; } ?> Akan menghasilkan kata Budi sebanyak 5 kali. Penjelasan : 1. $a=1; Memperkenalkan bahwa nilai variable a adalah 1; 2. Perintah while($a<=5), maksudnya selama nilai a kecil dari 5 maka perulangan akan dilakukan terus menerus. 3. Echo “Budi<br/>”; Perintah untuk menampilkan tulisan Budi di layar. Perintah tersebut diletakkan di dalam while, dengan tujuan untuk menampilkan kata Budi sebanyak perulangan yang terjadi.