1 MOH. NAZAR AGLIYONO STUPID LOGIC PROGRAMMING I Memahami konsep : HTML Stupid Logic Programming I HTML Oleh : Moh. Nazar Agliyono Editor : Azaret Alf...
Stupid Logic Programming I – HTML Oleh : Moh. Nazar Agliyono Editor : Azaret Alfonso
KATA PENGANTAR Puji dan syukur selalu terlimpahkan untuk Dia Sang Khaliq, karena kehendak-Nyalah yang mampu menjadikan pengerjaan buku STUPID LOGIC PROGRAMMING I bisa selesai, Setelah sekian banyak sekali tantangan dan halangan, mudah-mudahan buku ini mempunyai kelebihan tersendiri agar lebih mudah dipahami dan dimengerti. Buku ini dikembangkan untuk membantu para programmer pemula agar lebih bisa memahami konsep pemrograman, tanpa sedikitpun biaya yang dikeluarkan karena mudahmudahan buku ini tersaji dalam bentuk soft-nya, sehingga kita pun bisa menggunakan ataupun mengeditnya tanpa sedikitpun biaya yang dikeluarkan. Mudah-mudahan setelah buku ini selesai kami akan segera membuat buku STUPID LOGIC PROGRAMMING II dengan pemahaman lanjut yaitu tentang pemrograman SQL. Jakarta, January 2011 Penulis
PENGERTIAN HTML singkatan dari Hyper Text Mark-up Language adalah bahasa yang digunakan untuk standarisasi pada client browser untuk menampilkan data-data berupa text, gambar, music, maupun video yang dibuat secara sedemikian rupa. Untuk pembelajaran awal kita akan memakai editor biasa pada windows yaitu notepad, tekan start+r maka keluar run command, lau ketikkan “notepad”. lihat gambar 1.1
Gambar 1.1 Setelah itu akan keluar editor notepad dan disinilah kita akan belajar bahasa HTML secara mudah dan simple. Lihat gambar 1.2
Gambar 1.2 Untuk permulaan save terlebih dahulu menjadi nama file yang anda kehendaki dan disave pada directory yang anda kehendaki, dan disini kita contohkan memberikan nama file “belajar html.html” pada path “Desktop” lalu diganti extensinya dengan tipe html (*.html), lihat gambar 1.3
Gambar 1.3 Dan untuk mencobanya kita perlu memasukkan sintak-sintak yang akan kita bahas nanti, serta untuk melihat hasilnya disini kita akan memberikan contoh simple, kita akan memasukkan sintak font untuk mengganti warna pada huruf yang kita kehendaki. Lihat kembali notepad lalu masukkan sintak ini : belajar html. Dan jangan lupa untuk segera disave dengan menekan tombol Ctrl+s pada keyboard, lalu buka file “belajar html.html” menggunakan (open with) browser yang kita suka, disini kita menggunakan firefox. Lihat gambar 1.4 dan 1.5
Gambar 1.4
Gambar 1.5
Maka outputnya akan terlihat pada browser kita, seperti gambar 1.6 dibawah ini :
Gambar 1.6
PENDAHULUAN Pada mulanya bahasa HTML diawali dengan sintaks dan diakhiri dengan penutupnya seperti pada gambar 2.1
Gambar 2.1 Di dalam bahasa HTML ada 2 bagian penting, yaitu 1. Header 2. Body
Header Header adalah bagian yang digunakan untuk mendeskripsikan sebuah website, dimana didalam bagian ini terdapat beberapa sintaks untuk mendeskripsikan website yang akan dibuat. Dan didalam bagian body lah semua isi sintaks-sintaks tentang website yang akan kita buat nantinya.
Gambar 2.2 ingat pada html kita akan mengenal backslash untuk menutup sintak, hal ini digunakan untuk tidak terjadinya kesalahan didalam penulisan, walaupun tidak semua sintaks harus ditutup. Dalam hal ini kita akan mencoba dengan sintaks dan penutupnya adalah , sintaks penutupnya , sintaks penutupnya , dan lain sebagainya. Didalam bagian terdapat sintaks sintaks yang medeskripsikan website kita, diantaranya : Judul Website Digunakan untuk memberikan judul dari website kita, masukkan kedalam sintaks lalu save file kita, lalu buka kembali browser kita, dan tekan refresh, maka akan terlihat judul seperti gambar dibawah ini :
Gambar 2.3
Gambar 2.4
Meta Languge Meta language adalah bahasa untuk mendeskripsikan suatau website dan sintaks-sintaks ini berada pada sintaks , contohnya : <meta name="Description" content="Muhammad Nazar Agliyono's Website" /> <meta name="Keywords" content="nazar, nazar website, belajar, design, web" /> <meta http-equiv="Content-Language" content="en-us"/> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="Distribution" content="Global" /> <meta name="Author" content="Azaret" /> <meta name="Robots" content="index,follow" />
Title Judul Website Sintak berada didalam sintak dan digunakan untuk memberikan judul pada sebuah website.
Gambar 2.5
Body Body merupakan inti dari sebuah website, dimana semua data-data terkandung didalam bagian body ini, kita akan mengenali sintaks-sintaks dan akan mempelajarinya. merupakan sebuah sintaks, sintaks mempunyai attribut attribut yang memang sudah diwariskan. didalam sintaks body terdapat attribut yang bernama bgcolor, dan diberikan nilai #000000 (black), yang artinya bahwa setiap bagian body, backgroundnya akan berwarna #000000 / hitam, nah sekarang kita telah mengetahui yang mana disebut sintaks dan yang mana disebut attribut. Ada beberapa attribut dari sintaks diantaranya : Background untuk mengatur background menggunakan gambar Misalnya untuk sintak body.
Gambar 2.6
Bgcolor untuk mengatur warna background dari object, dan berisi value kode-kode warna. Misalnya untuk sintaks body.
Gambar 2.7 Align untuk mengatur posisi / paragraph dari object, berisi value left, center, right, justify Left untuk posisi ke sebelah kiri Center untuk posisi ke tengah Right untuk posisi ke sebelah kanan Justify untuk merapihkan posisi / paragraph dari bagian kanan dan kiri Cth.
left
center
right
justify
Gambar 2.8
Size untuk mengatur ukuran object, dan berisi value dengan tipe data integer (angka), mulai dari 1 sampai yang kita butuhkan. Cth 1 2 3 4 5
Gambar 2.9
Color untuk mengatur warna dari object, berisikan value kode-kode warna, bisa juga dengan langsung value warnanya. Cth red green blue #FF0000 #00FF00 #0000FF
Gambar 2.10
Face untuk mengatur bentuk dari object, dalam font biasanya digunakan untuk merubah type font, bisa times new roman, cosmic, courier new, dan lain sebagainya. Times New Roman Calibri Courier New
Gamber 2.11 Border untuk mengatur ketebalan table, berisi value berupa integer, sesuai keinginan kita. Cth
Table Border 1
Gambar 2.12 Bordercolor untuk mengatur warna dari border, dan berisi value warna-warna dari kode ataupun seacra langsung.
Table Border 1
Gambar 2.13
Width untuk mengatur lebar dari object, berisi value berupa pixel ataupun persen. Cth
Gambar 2.14 Height untuk mengatur tinggi dari object, berisi value berupa pixel ataupun persen. Cth
Table Height 50
Gambar 2.15 Href untuk menunjukkan sebuah alamat object baru, bisa berupa alamat situs, file, maupun email, dan biasanya attribut ini dipakai pada sintaks hyperlink, Src untuk menentukan sumber dari object yang ingin dipanggil, biasanya attribut ini dipakai oleh sintaks iframe, object, ataupun img. Title untuk memberikan judul dari object, biasanya akan tampil ketika mouse hover dari object tersebut.
Gambar 2.16 Alt untuk memberikan nama lain / pengganti dari suatu object yang tidak bisa dipanggil, attribut ini biasanya terdapat pada sintaks img ketika object gambar yang dipanggil tidak terpenuhi.
Gambar 2.17 Cellspacing untuk menentukan jumlah spasi yang terdapat diantara dua buah cell, dan pastinya attribute ini bervalue integer (angka) untuk menentukan spasi nya dan juga attribute ini digunakan oleh sintaks table. Cellpadding untuk mengatur jumlah spasi yang terdapat antar batas border dengan isi atau teks didaam ell tersebut, dan bervalue integer (angka), dan attribute ini digunakan oleh sintaks table.
Colspan untuk menghubungkan beberapa kolom menjadi 1 kolom. Dan juga attribute ini digunakan oleh sintaks table Rowspan untuk menghubungkan beberapa baris menjadi satu, dan attribute ini digunakan oleh sintaks table. Behavior untuk menggerakkan object, attribut ini biasanya berada pada sintaks marquee. <marquee behavior=alternate> Untuk karakter berputar / bolak-balik <marquee behavior=scroll> Uuntuk karakter bergerak kesisi kiri dan mengulang <marquee behavior=slide> Untuk karakter bergerak kesisi kiri dan berhenti Class untuk memakai salah satu class yang sudah dibuat dari style css, hal ini memudahkan kita untuk bisa memanfaatkan style css, karena dia mempunyai sifat pewarisan. Id sama seperti class, mengambil dari css, namun dia lebih tinggi level diatas class. Dan kali ini kita akan mempelajari sintaks-sintaks yang digunakan didalam bahasa html, dan tentu bahwa inti dari websit adalah didalm body, maka kita akan membuat sintaks awal seperti pada gambar 2.17
Gambar 2.18
SINTAKS Comment Sintaks ini digunakan untuk memberikan komentar pada baris html dan tidak akan di eksekusi oleh browser, karena dia hanya bertugas memberikan komentar saja, di awali dengan <-- dan ditutup dengan --> Cth.
BR Sintak ini untuk membuat spasi kebawah [enter] dan tak perlu ditutup, sintaksnya Cth: saya budi saya andi saya coki
Gambar 3.1 jadinya akan seperti dibawah ini :
Gambar 3.2
HR Sintak ini untuk membuat garis horisontal sesuai ukurannya dan tak perlu ditutup, sintaks ini mempunyai beberapa attribut, yaitu : Width, size, color, align Cth.
Gambar 3.3
Gambar 3.4
Unordered List Sintak ini untuk membuat bulletin, di awali dengan
dan didalamnya terbentuk pilihanpilihan buletin dengan sintaks lalu bulletin ditutup dengan
, biasanya sintaks ini memakai attribute type, dan diantaranya bervalue square Cth :
ade
bone
Gambar 3.5
Gambar 3.6
Ordered List Sintak ini untuk membuat tab-tab numbering pada umumnya sintak ini mirip dengan sintak bulletin. Namun yang membuatnya beda adalah diawali dengan dan ditutup dengan , namun pembuatan tabnya sama saja dengan sintaks
dan ditutup dengan
, dan sintaks ini biasanya mempunyai attribute type dan diantaranya bervalue 1 (untuk 1,2,3) , I (untuk I, II, III), a (untuk a,b,c) dan lainnya…
Cth.
ade
bone
Gambar 3.7
Gambar 3.8
Font Sintaks ini digunakan untuk memberikan inovasi pada suatu character, diawali dengan dan ditutup dengan , serta font mempunyai attribut diantaranya adalah color, size, dan face. Cth. karakter contoh
Gambar 3.9
Gambar 3.10
Header Sintak ini digunakan untuk header dari sebuah web, setiap karakter yang diberikan sintaks ini, akan mempunyai ukuran yang berbeda dengan karakter lainnya, disini ada beberapa header, semakin besar kecil header, akan semakin besar. Standarnya ada 6 header yaitu :
ini h1
ini h2
ini h3
ini h4
ini h5
ini h6
Dan header ini mempunyai attribut sintaks diantaranya adalah align.
Gambar 3.11
Hyperlink Sintak ini digunakan untuk membuat object menjadi sebuah link menuju object lainnya. Cth. www.google.com Menjadikan object sebagai link, untuk menuju ke alamat http ://www.google.com [email protected] Menjadikan object sebagai link untuk menuju link pengiriman email file index Menjadikan object sebagai link menuju object lain yang bernama index.html www.google.com[email protected]file index
Gambar 3.12 Iframe Sintak ini digunakan untuk memanggil object lain berupa filem atau website lain berada pada web kita yag kita buat. Iframe juga mempunyai attribut attribut diantaranya width, height, src dan lainnya. Cth. <iframe src=http://google.com>
Gambar 3.13
Img Sintak ini digunakan untuk memanggil object berupa grafik, dan mempunyai attribut attribut diantaranya, src, width, height, alt, title. Cth.
Gambar 3.14
Marquee Sintak ini digunakan untuk membuat object menjadi bergerak sesuai kemauan kita. Dan sintaks ini mempunyai attribut attribut diantaranya adalah behavior. Cth. <marquee behavior=alternate>ini alternate <marquee behavior=scroll>ini scroll <marquee behavior=slide>ini slide
Paragraph Sintak ini digunakan untuk membuat sebuah paragraph baru / alinea baru, dan sintaks ini mempunyai beberapa attribut diantaranya adalah align. Cth.
karakter
karakter
Gambar 3.15
Pre Sintak ini untuk memposisikan object secara manual, jadi akan tertulis seperti itu, ada perbedaan antara memakai pre dan tidak memakai pre.
Gambar 3.16
Gambar 3.17
Bold Sintak ini digunakan untuk menebalkan object berupa karakter, Cth. Bold Gambar 3.18
Italic Sintak ini digunakan untuk memiringkan object berupa karakter, Cth Italic Gambar 3.19
Underline Sintak ini digunakan untuk menggarisbawahi object berupa karakter, Cth. Underline Gambar 3.20
Striketrough Sintak ini digunakan untuk mencoret object berupa karakter, Cth. <s>Striketrough Gambar 3.21
Table Sintak ini digunakan untuk membuat garis garis horizontal dan vertical sehingga akan menjadi table. Table mempunyai beberapa sintak penunjang.
dan
. Cth.
Table
adalah garis y / garis vertical sedangkan
garis x / garis horizontal
Cth 1 garis kebawah 1 garis kesamping
a
Gambar 3.22 1 garis kebawah 2 garis kesamping
a
b
Gambar 3.23 2 garis kebawah 1garis kesamping
a
b
Gambar 3.24 2 garis kebawah 2 garis kesamping
a
c
b
d
Gambar 3.25 1 kotak dikanan 2 kotak dikiri
c
b
d
Gambar 3.26
FORMS Forms adalah sintaks yang digunakan untuk interaksi antara user dengan computer, sehingga satu sama lain bisa saling berbagi informasi, dan dengan didukung oleh sintaks PHP dan SQL (pada STUPID LOGIC PROGRAMMING II & III) maka akan menjadi sebuah program yang mempunyai alur algoritma dengan koneksi database didalam penyimpanan data nya. Dan disini kita akan mempelajarai basiq dari form yang nantinya akan digunakan pada STUPID LOGIC III dengan pembahasan mengenai PHP. Form Sintaks ini digunakan sebagai wadah interaksi antara pengguna dengan computer dan mempunya attribute action dan method serta name. Dimana action digunakan untuk wadah proses kelanjutan dari method yang dilemparkan. Sedangkan method adalah bentuk dari proses form tersebut, apakah dengan menggunakan POST didalam melempar data form, atau menggunakan GET sehingga akan tertampil pada address bar browser. Contoh nama file adalah index.php :
Gambar 4.1
Gambar 4.2
Gambar 4.3 Disini kita tidak akan mempelajari method, yang diatas hanya pemahaman sedikit tentang method dan php, namun disini kita akan mempelajari beberapa sintaks form yang akan digunakan sebagai interaksi antara pengguna dengan computer.
Gambar 4.4 Digunakan sebagai input data berupa karakter / kumpulan karakter dan dalam bentuk multi line, sehingga bisa berpindah baris [enter]. <select name=hari>
Gambar 4.5 Digunakan untuk input data berupa drop down menu, sehingga user bisa memilih dari data yang sudah disediakan pada drop down menu tersebut.
Gambar 4.6 Digunakan sebagai input data berupa karakter atau kumpulan karakter.
Gambar 4.7 Digunakan sebagai input data berupa karakter atau kumpulan karakter dan akan dihidden tampilannya untuk menjaga privacy karena form ini diperuntukan untuk text password Digunakan sebagai form input, namun akan dihidden (tidak akan ditampilkan pada layar website) Badminton
Gambar 4.8 Digunakan sebagai input data berupa checkbox, apabila data tersebut diceklis maka akan bernilai 1 / true Pria Wanita
Gambar 4.9
Digunakan sebagai input data berupa radio button, dan sama seperti checkbox jika dipilih maka akan bernilai 1, radio ini hanya bisa dipilih satu dari beberapa radio yang name nya sama.
Gambar 4.10 Digunakan sebagai input data berupa file, dan dalam form harus ditambahkan attribute enctype="multipart/form-data", karena file bersifat multipart data.
Gambar 4.11 Digunakan untuk melemparkan method disertai dengan data-data inputan lainnya menuju proses selanjutnya yang ditentukan oleh form action
Gambar 4.12 Digunakan untuk mengulang / mereset semua isi dari form-form secara default.
DAFTAR PUSTAKA “Pemrograman Berbasis Web”, Awaludin Muhammad, 2003 “HTML Programming”, http://www.w3schools.com/html “Design HTML”, http://www.nazar.us.to/?go=sharing&id=1
TENTANG PENULIS
Moh. Nazar Agliyono adalah seorang mahasiswa Universitas Gunadarma yang mengambil Fakultas Teknologi Industri, tepatnya pada jurusan Teknik Informatika pada tahun 2010. Dia adalah salah satu mahasiswa yang kurang active pada perkuliahannya, dan dikenal pemalas, karena dia beranggapan bahwa kehidupan tidaklah perlu dipersulit. Dia juga kurang bisa mengikuti pelajaran yang berbau matematika, dikarenakan susah untuk memahami ilmu pasti, namun dia tetap berupaya dalam pelajaran tersebut. Dia mempelajari bahasa-bahasa pemrograman mulai dari kelas 2 SMK, karena pada waktu itu dia tertarik pada ekskul programming dan networking.
