Pemrograman Sederhana

Saturday, October 18, 2014

Kumpulan Atirbut HTML di Pemrograman Web Dasar

Atribut di HTML mendefinisikan properti-properti dari suatu elemen html, yaitu terdiri dari nama dan nilai. Fungsi dari atribut ini adalah untuk memodifikasi tag HTML yang dideklarasikan. Penulisan atribut berada di dalam tag pembuka setelah penulisan tag itu sendiri, Setiap tag bisa jadi mempunyai beberapa atribut. Dan satu atribut bisa jadi digunakan oleh beberapa tag. Formula penulisan atribut pada tag adalah sebagai berikut :

Satu atribut dalam satu tag
<tag atribut="nilai">...</tag>
Beberapa atribut dalam satu tag

<tag atribut1="nilai" atribut2="nilai" atribut3="nilai">...</tag>
Satu atribut dalam beberapa tag

<tag1 atribut="nilai">...</tag1>
<tag2 atribut="nilai">...</tag1>
Beberapa atribut dalam beberapa tag

<tag1 atribut1="nilai" atribut2="nilai">...<tag1>
<tag2 atribut1="nilai" atribut2="nilai">...<tag2>

Dalam satu tag sebenarnya mempunyai beberapa atribut miliknya sendiri. Tetapi ada beberapa atribut yang sama yang bisa dipakai di tag lain. Begitu juga sebaliknya, ada beberapa atribut yang tidak bisa dipakai oleh atribut lain. Daftar atribut sederhana yang sering dipakai adalah sebagai berikut :

No	Tag	Atribut	Keterangan Atribut
1	<body>	bgcolor text background link alink vlink topmargin leftmargin marginheight marginwidth	Mengatur warna halaman Mengatur warna teks di dalam body Memberikan background gambar di halaman Mengatur warna link Mengatur warna link yang sedang aktif Mengatur warna link yang sudah dikunjungi Mengatur besar margin atas halaman Mengatur besar margin kiri halaman Mengatur berapa persen tinggi margin halaman Mnegatur berapa persen lebar margin halaman
2	<p>	align	Mengatur rata paragraf
3	<font>	color size align face	Mengatur warna font Mengatur ukuran font Mengatur rata font Mengatur jenis font
4	<a>	href name target	Membuat link ke URL tertentu Menetapkan nama anchor Menetapkan dimana halaman akan dibuka
5	<img>	src alt border height width	Menetapkan URL dari gambar Menetapkan alternatif teks pada gambar Mengatur ketebalan border disekeliling gambar Mengatur ukuran tinggi gambar Mengatur ukuran lebar gambar

Note : Penulisan atribut harus sesuai dengan pasangan tag nya masing-masing.

Saya akan memberikan beberapa contoh penggunaan atribut-atribut di atas. Saya menggunakan aplikasi Adobe Dream Weaver CS6 untuk memudahkan dalam belajar. Silahkan sobat download dan instal terlebih dahulu jika belum punya. Atau jika sobat ingin menggunakan Notepad atau Notepad+ juga tidak masalah.

Misal, kita ingin membuat sebuah halaman dengan warna backgroundnya biru muda dan teks di dalamnya berwarna merah. Bagaimana menulis scriptnya ?

<html>

<head>

<title>Latihan1</title>

</head>

Belajat HTML sangat menyenangkan

</body>

</html>

Keterangan :

Nilai dari atribut bgcolor dan text adalah nilai hexadecimal dari warna. Silahkan sobat mencari nilai hexadecimal dari warna yang diinginkan. Silahkan sobat bisa cek nilai hexadecimal dari berbagai warna di SINI. Sebenarnya ada cara lain dalam memasukkan nilai warna dalam atribut color, yaitu dengan menulis bahasa inggris dari warna tersebut. Misalnya red, blue, green, yellow, black, white, purple, dan lain-lain.

Hasil dari contoh di atas adalah sebagai berikut :

Contoh selanjutnya, kita ingin membuat sebuah halaman dengan background putih (default). Besar margin atas adalah 20px dan besar margin kiri adalah 20px. Kemudian kita akan membuat sebuah link ke suatu URL dengan warna link yang aktif adalah biru dan warna link yang sudah dikunjungi adalah ungu. Kemudian format font dari teks yang ditulis adalah jenis verdana, warna hitam (default), ukuran h2, dan rata kiri (default). Dibawah teks, kita akan menyisipkan sebuah gambar dengan boder 1, tinggi 400 dan lebar 300.

Bagaimana cara membuat script dengan kondisi di atas ?

<html>

<head>

<title>Latihan2</title>

</head>

<h2>

Salah satu sosial media terpopuler adalah <a href= "www.facebook.com">Facebook</a>

Selain facebook, ada juga <a href="www.twitter.com">Twitter</a>

</h2>

</body>

</html>

Keterangan :

Untuk URL gambar, sobat bisa mengisi langsung nama dan ekstensinya dengan syarat gambar tersebut harus berada di dalam satu directory/folder dimana file html yang sobat buat. Jika gambar berada di luar folder, silahkan sobat membuat URLnya dengan cara misalnya "Photos/SosMed/facebook.jpg".

Hasil dari contoh di atas adalah sebagai berikut :

Note :

Pada link Twitter masih berwarna biru karena script tersebut belum di jalankan di web browser dan belum dikunjungi. Jadi link tersebut masih kategori link aktif, setelah dikunjungi maka link tersebut akan berubah menjadi warna ungu.

Demikian materi tentang Kumpulan Atirbut HTML di Pemrograman Web Dasar. Sobat bisa latihan sendiri dengan atribut-atribut lain yang belum saya gunakan pada contoh di atas. Dan coba untuk memberikan nilai lain dalam atribut tersebutl. Silahkan sobat menuliskan komentar di bawah jika ada materi yang kurang dipahami. Terimakasih :)

Kumpulan Tag HTML Sederhana di Pemrograman Web Dasar

Joni HTML ,

Kita telah mempelajari definisi dasar dari HTML pada postingan sebelumnya. Kita juga telah mempelajari struktur dasar, elemen, dan atribut HTML. Setelah mempelajari materi tersebut, saya berharap sobat sudah mengerti maksud dari tag-tag dasar yang menyusun sebuah halaman website. Tag-tag dasar tersebut terdiri dari tag <html>, <head>, <title>, dan <body>.

Penulisan tag yang berpasangan tidak boleh saling bertumpang tindih dengan pasangan tag lain. Contoh penulisan tag yang benar :



........



Contoh penulisan tag yang saling bertumpang tindih atau tidak benar :



........

Pada materi ini sobat akan belajar tentang fungsi tag-tag tambahan yang ada di HTML, tentunya selain tag-tag dasar yang telah saya sebutkan di atas. Tag ini adalah tag sederhana yang secara umum digunakan oleh seorang pemula atau newbie untuk belajar HTML. Perhatikan tag-tag di bawah ini :

Tag	Fungsi	Contoh
<b> . . . </b>	Teks Bold/ Cetak tebal	<b>Contoh kalimat bold</b>
<i> . . . </i>	Teks Italic/ Ctak miring	<i>Contoh kalimat italic</i>
<u> . . . </u>	Teks Underline/ Garis bawah	<u>Contoh kalimat underline</u>
<br>	Enter/ Ganti baris	<br>
<p>	2 enter/ Paragraf baru	<p>
<hr>	Membuat garis horizontal	<hr>

Sobat telah melihat perbedaan setiap hasil tulisan dari setiap tag yang ditulis. Mulai dari format bold, italic, dan underline. Kemudian tag <hr> untuk membuat sebuah garis horizontal. Sedangkan tag   adalah untuk enter satu baris dan tag  untuk enter dua baris. Kita bisa menyimpulkan bahwa tag  sama dengan dua kali tag .

Tag	Fungsi	Contoh
<big>. . . . </big>	Membuat text lebih besar	<big>Contoh kalimat big</big>
<small>. . . </small>	Membuat text lebih kecil	<small>Contoh kalimat small</small>
<strike>. . </strike>	Membuat text strike/ tercoret	<strike>Contoh kalimat strike</strike>
<pre>. . . . .</pre>	Menampilkan text seperti apa adanya	<pre>Contoh kalimat preformated</pre>
<sup>. . . . .</sup>	Membuat text superscript	<sup>Contoh kalimat superscript</sup>
<sub>. . . . .</sub>	Membuat text subscript	<sub>Contoh kalimat sub script</sub>

Selain tag <big> dan tag yang menampilkan ukuran besar atau kecil pada text, terdapat pula tag header yang menampilkan berbagai ukuran text. Silahkan sobat lihat tabel di bawah ini :

Tag	Fungsi	Contoh
<h1>. . . .</h1>	Membuat heading h1	<h1>Contoh heading-1</h1>
<h2>. . . .</h2>	Membuat heading h2	<h2>Contoh heading-2</h2>
<h3>. . . .</h3>	Membuat heading h3	<h3>Contoh heading-3</h3>
<h4>. . . .</h4>	Membuat heading h4	<h4>Contoh heading-4</h4>
<h5>. . . .</h5>	Membuat heading h5	<h5>Contoh heading-5</h5>
<h6>. . . .</h6>	Membuat heading h6	<h6>Contoh heading-6</h6>

Sobat telah mengetahui perbedaan ukuran antara heading 1 sampai heading 6. Perlu sobat ketahui bahwa ukuran text normal yang sering kita pakai adalah sama dengan heading 4. Sedangkan ukuran heading 5 dan heading 6 adalah ukuran text normal dikurang 1 dan 2. Dan ukuran heading 3, 2, dan 1 adalah ukuran text normal ditambah 1, 2, dan 3. Untuk lebih detailnya, saya akan membahas materi ini pada postingan selanjutnya karena materi ini termasuk kedalam materi atribut lanjut HTML.

Sekian materi yang saya sampaikan hari ini. Silahkan sobat pelajari semua materi dasar HTML supaya lebih mudah nantinya dalam mempelajari materi yang lebih mendalam. Saya akan mencoba menulis materi-materi ringan terlebih dahulu kepada sobat. Silahkan tulis pertanyaan jika ada materi yang kurang jelas di kolom komentar. Terimakasih :)

Pengertian, Tag, Elemen, dan Atribut HTML di Pemrograman Web Dasar

Joni HTML ,

Pengertian

HTML (HyperText Markup Language) adalah salah satu pemrograman web desain atau bisa juga disebut script-script yang menyusun sebuah dokumen web. HTML adalah materi yang paling basik untuk menjadi seorang webmaster. Sebenarnya untuk menjadi webmaster, tidak hanya menggunakan HTML saja, banyak yang harus dikuasai mulai dari CSS, PHP, MySql, Javascipt, dan lain-lain.

Penulisan script HTML menggunakan text editor bawaan windows yaitu Notepad. Tapi kebanyakan webmaster lebih menyukai menggunakan Notepad++ atau dreamweaver. Silahkan sobat ingin menggunakan compiler yang mana. Jika sobat ingin yang lebih advanced, saya sarankan sobat menggunakan dreamweaver karena banyak feature yang disediakan sehingga memudahkan untuk belajar. Untuk penyimpanan file script html adalah menggunakan ekstensi ".htm" atau ".html"
Tag-tag HTML

HTML mengandung tag-tag yang membangun sebuah page website. Setiap tag yang dibuat harus terdiri dari tag pembuka dan tag penutup. Misalnya tag pembuka "<html>" , di tengahnya berisi tag-tag lain atau konten, kemudian di akhiri dengan tag penutup "</html>". Struktur dasar HTML adalah terdiri dari beberapa tag yaitu :

<html>
<head>
<title>Judul Dokumen</title>
</head>
<body>
Isi atau konten halaman di dalam dokumen yang dibuat.
</body>
</html>
Elemen-elemen HTML

Dari struktur dasar HTML yang terdiri atas tag-tag di atas dibagi menjadi tiga elemen, yaitu elemen pembuka, elemen isi, dan elemen penutup. Pembagian elemen tersebut dapat dikelompokkan menjadi :

<html> . . . . </html>
Sebagai elemen pembuka sekaligus elemen penutup.

<head>
<title> . . . . </title>
</head>
Sebagai elemen isi dengan tag <head> mendefinisikan bagian kepala dokumen dari suatu halaman website. Sedangkan tag <title> untuk mendeklarasikan bagian judul halaman website.

<body> . . . . </body>
Sebagai elemen isi dengan tag <body> mendefinisikan isi halaman website.
Atribut.

Atribut di HTML mendefinisikan properti-properti dari suatu elemen html, yaitu terdiri dari nama dan nilai. Bagaimana penulisan atribut dalam HTML ? Perhatikan penulisan berikut :

<tag namaAtribut1="nilaiAtribut1" namaAtribut2="nilaiAtribut2"> . . . . </tag>
Contoh :

Contoh di bawah ini adalah pembuatan script sederhana menggunakan HTML untuk membuat halaman website. Saya menggunakan Notepad++ dalam pembuatan script ini :

Setelah menulis script di atas, silahkan sobat menyimpan dengan nama terserah sobat akan tetapi berekstensi ".htm" atau ".html". Misalnya halaman.htm atau halaman.html. Setelah itu, buka file html yang telah disimpan tadi :

Setelah membuka file tersebut, sobat akan diarahkan ke web browser default sobat. Dan lihat apa yang ditampilkan di dalam halaman tersebut :

Demikian materi HTML yang saya sampaikan hari ini. Saya akan membahas materi HTML lebih lanjut pada postingan saya selanjutnya. Semoga bermanfaat untuk sobat yang memulai belajar HTML, Terimakasih :)

Pengertian Algoritma dan Flowchart di Bahasa Pemrograman Python

Joni Python ,

Di bidang matematika, algoritma adalah prosedur dalam perhitungan, penalaran, atau pemrosesan suatu data. Algoritma adalah hal terpenting dalam bahasa pemrograman karena dalam pembuatan program harus mengerti terlebih dahulu step jalannya program. Jika kita tidak mengetahui algortima bagaimana program dibuat, sama saja kita berjalan tanpa tujuan,

Dengan penjelsan sedikit tentang algoritma di atas, saya yakin sobat sudah mempunyai gambaran tentang apa itu algoritma. Algoritma di Bahasa Pemrograman biasanya digambarkan dengan Flowchart. Apa itu flowchart ?

Flowchart adalah diagram grafis yang menyatakan steps atau langkah-langkah dari algortima yang kita buat. Silahkan sobat lihat gambar-gambar yang digunakan untuk membuat algoritma di Flowchart :

Gambar	Simbol untuk	Keterangan
	Proses	Menyatakan kegiatan yang akan ditampilkan dalam diagram (langkah-langkah)
	Titik Keputusan (decision)	Proses / Langkah dimana perlu adanya keputusan atau adanya kondisi tertentu. Di titik ini selalu ada dua output untuk melanjutkan proses yang berbeda..
	Input / Output Data	Digunakan untuk mewakili data yang masuk (input) dan data yang keluar (Output) / hasil dari decision.
	Terminasi	Menunjukkan awal atau akhir sebuah proses (Start dan Stop /Finish)
	Garis	Menunjukkan arah aliran proses atau algoritma.
	Kontrol / Inspeksi	Menunjukkan proses / langkah dimana ada inspeksi atau pengontrolan.

Saya akan memberikan contoh pembuatan algoritma menggunakan Flowchart pada program yang simple. Saya akan mengambil program yang telah saya buat sebelumnya yaitu menentukan bilangan ganjil atau bilangan genap. Silahkan perhatikan langkah-langkah berikut :

Keterangan :

Program dimulai dengan diagram terminasi "Start" yang menandakan bahwa program dimulai.
Diagram input bilangan, seorang user menginput sebuah nilai bilangan.
Decision, mengambil keputusan jika bilangan yang diinput oleh user adalah bilangan yang habis dibagi 2 (genap), maka :
Jika "Yes" artinya bilangan tersebut memang habis dibagi 2, maka menghasilkan output dengan mencetak "Genap".
Setelah mencetak "Genap", program akan berhenti yang diwakili dengan diagram terminasi "Stop".
Jika "No" artinya bilangan tersebut tidak habis dibagi 2, maka program akan melanjutkan ke instruksi atau diagram selanjutnya.
Diagram selanjutnya adalah decision. Mengambil keputusan jika bilangan yang diinput oleh user adalah bilangan yang tidak habis dibagi 2 (ganjil), maka :
Jika "Yes", maka akan menghasilkan output dengan mencetak "Ganjil".
Stelah mencetak "Ganjil", program akan berhenti yang diwakili dengan diagram terminasi "Stop".

Dengan mempelajari Algoritma dan Flowchart ini, saya berharap bahwa sobat bisa mengaplikasikannya di Program lain. Jadi coba sobat membuat sebuah algortima menggunakan flowchart di program-program yang telah kita bahas sebelumnya. Semoga bermanfaat dan terimakasih. :)

Membuat Program Binary Search di Bahasa Pemrograman Python

Joni Python ,

Binary Search adalah salah satu metode pencarian atau pengecekan sebuah elemen angka di dalam sebuah wadah. Jika di dalam wadah terdapat elemen angka yang dicari oleh user, maka program tersebut akan mengembalikan statement True. Begitu pun sebaliknya, jika di dalam wadah tersebut tidak terdapat elemen angka yang dicari oleh user maka program tersebut akan mengembalikan statement False.

Point penting yang harus sobat perhatikan disini adalah metode ini hanya bisa digunakan untuk wadah dengan angka yang sudah urut (wadah dengan elemen angka dari kecil ke besar). Program ini akan sangat berguna ketika wadah yang user gunakan mengandung banyak sekali elemen angka di dalamnya.

Baiklah kita akan memulai pembahasan materi tentang bagaimana Membuat Program Binary Search di Bahasa Pemrograman Python. Silahkan cermati program di bawah ini :

def binSearch(wadahList,target) :
low = 0
high = len(wadahList)-1
while low <= high :
mid = (high+low)//2
if target == wadahList[mid] :
return True
elif target < wadahList[mid] :
high = mid - 1
else :
low = mid + 1
return False

Keterangan :

Membuat function bernama binSearch(wadahList, target) dengan dua variable yaitu var wadahList mewakili wadah dan var target mewakili elemen angka yang ingin dicari.
Membuat var low dengan nilai 0.

"Fungsi dari var low adalah untuk menentukan elemen angka pertama yang akan diindeks."
Membuat var high dengan nilai banyak elemen angka pada saat itu dan dikurangi dengan angka 1.

"Fungsi dari var high adalah untuk menentukan elemen angka terakhir yang akan diindeks."
Looping dengan kondisi nilai dari var low kurang dari atau sama dengan nilai dari var high.
Membuat var mid dengan nilai hasil kalkulasi dari penjumlahan nilai var high dan var low kemudian hasil penjumlahan tersebut dibagi 2.

"Nilai var high dan var low bisa berubah, lihat step 9 dan 11."
Jika nilai var target sama dengan nilai var wadahList dengan indeks nilai var mid, maka :
Mengembalikan statement True.
Jika nilai var target kurang dari nilai var wadahList dengan indeks nilai var mid, maka :
Nilai var high berubah menjadi nilai var mid dikurangi dengan angka 1.
Jika nilai var target kondisinya tidak sama dengan kedua kondisi (if dan elif) di atas, berarti nilai var target lebih besar dari nilai var wadahList dengan indeks var mid, maka :
Nilai var low berubah menjadi nilai mid ditambah dengan angka 1.
Mengembalikan statement False jika nilai var target tidak berada di dalam var wadahList.

Saya akan memberikan contoh beserta pengerjaan manual atau proses program ini berjalan. Silahkan sobat perhatikan contoh berikut :

A = [2,5,8,11,25,32,45,56,68,86,93]

Pada contoh di atas terdapat wadah bernama A dan didalamnya terdapat 11 elemen angka yang sudah berurutan dari kecil ke besar.

Misalnya kita ingin mencari elemen angka dengan target = 68 maka :

Program akan mengindeks elemen pertama yaitu angka 2, elemen akhir yaitu angka 93, dan elemen tengah yaitu angka 32.
Perulangan program :
Program akan membandingkan target dengan elemen tengah (32).
Pada contoh tersebut kita bisa simpulkan bahwa 68 > 32, maka elemen awal akan berubah menjadi elemen dengan indeks tengah + 1 yaitu angka 45.
Wadah akan berubah menjadi :

Perulangan program :
Program membandingkan lagi antara target dengan elemen tengah yang baru (68).
Pada kasus ini kita bisa menyimpulkan bahwa target (68) = elemen tengah (68), maka program tersebut akan mengembalikan statement True.

Catatan :

Program akan terus melakukan perulangan sampai target bernilai sama dengan nilai elemen tengah. Kemudian program akan berhenti dan mengembalikan statement True. Jika program tidak menemukan kondisi nilai target sama dengan nilai elemen tengah, maka program akan berhenti dan mengembalikan statement False.

Contoh program setelah dieksekusi :

Demikian materi hari ini tentang bagaimana Membuat Program Binary Search di Bahasa Pemrograman Python. Semoga tulisan saya mudah dipahami oleh sobat semua, dan jika ingin mengajukan pertanyaan silahkan menulis di kolom komentar. Terimakasih :)

Membuat Rumus ABC di Bahasa Pemrograman Python

Joni Python ,

Membuat Rumus ABC di Bahasa Pemrograman Python | pemrograman | komputer | bahasa python

Di bidang matematika, sobat telah mengenal suatu rumus yang berfungsi untuk menyelesaikan persamaan kuadrat. Rumus yang sering kita dengar adalah rumus ABC. Masih ingatkah sobat dengan rumus tersebut ? Ketika sobat berada di SMA atau bahkan di SMP, saya yakin tidak asing bagi sobat terhadap rumus tersebut.

Baik, saya akan sedikit mengulas pelajaran beberapa tahun yang lalu ketika saya mendapatkan rumus ABC. Bentuk dari persamaan kuadrat adalah sebagai berikut :

ax²+ bx + c = 0

Fungsi dari rumus ABC sendiri adalah mencari nilai x₁ dan x₂yang memenuhi persamaan kuadrat tersebut. Lalu bagaimana formula dari rumus ABC ? Lihat rumus di bawah :

Saya rasa tidak perlu memberikan contoh penggunaan rumus ABC dalam matematika karena sobat pasti sudah ingat dan memahami penjelasan saya di atas. Jika masih ada yang kurang paham dengan rumus ABC, silahkan sobat mempelajari dulu penggunaan rumus tersebut sebelum melanjutkan pembelajaran tentang Membuat Rumus ABC di Bahasa Pemrograman Python ini.

Silahkan lihat function di bawah ini :

from math import sqrt as akar
def rumusABC(a,b,c) :
a = float(a) ; b = float(b) ; c = float(c)
D = b**2 - 4*a*c
x1 = (-b + akar(D)) / (2*a)
x2 = (-b - akar(D)) / (2*a)
hasil = (x1,x2)
return hasil

Keterangan :

Mengimport modul math yang sudah disediakan oleh python. Sobat bisa mengecek modul apa saja yang sudah disediakan oleh python dengan cara membuka C:\Python 2.7\lib\.

"Dari modul math, kita mengimport fungsi sqrt (fungsi akar) dengan diwakili var akar."
Membuat function dengan nama rumusABC(a,b,c) demgan var a, var b, dan var c yang akan diinput oleh user.
Mengkonvert nilai var a, var b, dan var c dari tipe integer ke tipe float.

"Fungsi kenapa kita mengkonvert tipe integer menjadi tipe float adalah ketika hasil dari x₁ dan x₂

berbentuk desimal. Berdasarkan pengalaman dulu, ketika menggunakan rumus ABC, hasilnya selalu dalam bentuk desimal. Karena memang pada dasarnya rumus ABC ini digunakan ketika nilai persamaan kuadrat tidak bisa difaktorkan dengan pemfaktoran biasa sehingga menghasilkan nilai desimal."

Membuat var D dengan nilai hasil kalkulasi dari b**2 - 4*a*c.

"Var D disini adalah Diskriminan, masih ingat kan rumus Diskriminan? "

Membuat var x1 dengan nilai (-b + akar(D)) / (2*a).

"Sebagai hasil dari nilai x yang pertama."

Membuat var x2 dengan nilai (-b - akar(D)) / (2*a).

"Sebagai hasil dari nilai x yang kedua."

Membuat var hasil dengan nilai tuple yang berisi nilai var x1 dan var x2.

Mengembalikan nilai dari var hasil.

Contoh ketika program ini di eksekusi :

Cukup sekian materi yang bisa saya sampaikan hari ini. Saya mohon maaf jika ada kesalahan ketik ataupun salah dalam menerjemahkan script di atas, Saya harap sobat semua bisa memberikan komentar atau saran tentang materi saya, Semoga bermanfaat dan terimakasih atas kunjungannya. :)