Artikel 1
HTML adalah, (HyperText Markup Language) sebuah bahasa standar yang digunakan oleh browser Internet untuk membuat halaman dan dokumen pada sebuah Web yang kemudian dapat diakses dan dibaca layaknya sebuah artikel. HTMLjuga dapat digunakan sebagai link link antara file-file dalam situs atau dalam komputer dengan menggunakan localhost, atau link yang menghubungkan antar situs dalam dunia internet.
Nah lanjut deh kita belajar dasarnya...
Artikel 2
Cascading Style Sheet (CSS) merupakan salah satu bahasa pemrograman
web untuk mengendalikan beberapa komponen dalam sebuah web sehingga
akan lebih terstruktur dan seragam.
Sama halnya styles dalam aplikasi pengolahan kata seperti Microsoft Word yang dapat mengatur beberapa style, misalnya heading, subbab, bodytext, footer, images, dan style lainnya untuk dapat digunakan bersama-sama dalam beberapa berkas (file). Pada umumnya CSS dipakai untuk memformat tampilan halaman web yang dibuat dengan bahasa HTML dan XHTML.
CSS dapat mengendalikan ukuran gambar, warna bagian tubuh pada teks, warna tabel, ukuran border, warna border, warna hyperlink, warna mouse over, spasi antar paragraf, spasi antar teks, margin kiri, kanan, atas, bawah, dan parameter lainnya.[1] CSS adalah bahasa style sheet yang digunakan untuk mengatur tampilan dokumen. Dengan adanya CSS memungkinkan kita untuk menampilkan halaman yang sama dengan format yang berbeda.
Sejarah CSS
Nama CSS didapat dari fakta bahwa setiap deklarasi style yang berbeda dapat diletakkan secara berurutan, yang kemudian membentuk hubungan ayah-anak (parent-child) pada setiap style. CSS sendiri merupakan sebuah teknologi internet yang direkomendasikan oleh World Wide Web Consortium atau W3C pada tahun 1996. Setelah CSS distandarisasikan, Internet Explorer dan Netscape melepas browser terbaru mereka yang telah sesuai atau paling tidak hampir mendekati dengan standar CSS.
Penulisan
Saat masuk pada bagian CSS, sering dijumpai kode sebagai berikut:
h1 {
Bagian
pertama sebelum tanda ‘{}’ dinamakan selector, sedangkan yang diapit
oleh ‘{}’ disebut declaration yang terdiri dari dua unsur, yaitu
property dan value. Selector dalam pernyataan di atas adalah h1,
sedangkan color adalah property, dan #0789de adalah value.
Selain itu ada tiga metode penulisan CSS atribut, yaitu :
Inline Style Sheet
CSS didefinisikan langsung pada tag HTML yang bersangkutan. Cara penulisannya cukup dengan menambahkan atribut style=”…” dalam tag HTML tersebut. Style hanya akan berlaku pada tag yang bersangkutan, dan tidak akan mempengaruhi tag HTML yang lain.
Contoh penulisan CSS dengan metode Inline Style Sheet :
<html>
<head>
<title>Contoh Bentuk Inline</title>
</head>
<body bgcolor=”#FFFFFF”>
<p id=”cth1?>
Ini adalah contoh tag P tanpadiformat menggunakan CSS </p>
<p id=”cth2? style=”font-size:20pt”>
Tag P ini diformat dengan besar font 20 point </p>
<p id=”cth3? style=”font-size:14pt; color:red”>
Tag P ini diformat dengan besar font 14 point, dan menggunakan warna merah </p>
</body>
</html>
Embedded Style Sheet
CSS didefinisikan terlebih dahulu dalam tag <style> … </style> di atas tag <body>. Pada pendefinisian ini disebutkan atribut-atribut CSS yang akan digunakan untuk tag-tag HTML, yang selanjutnya dapat digunakan oleh tag HTML yang bersangkutan.
Contoh penggunaan CSS dengan metode Embedded Style Sheet :
<html>
<head>
<title>Contoh Bentuk Embedded/title>
</head>
<style>
body {background:#0000FF; color:#FFFF00; margin-left:0.5in}
h1 {font-size:18pt; color:#FF0000}
p {font-size:12pt; font-family:arial; text-indent:0.5in}
</style>
<body>
<h1 id=”cth1?>Judul ini berukuran 18 dengan warna merah!</h1>
<p id=”cth2?>Tag p ini di format dengan besar font 12 point dengan tipe font Arial dan mempunyai identasi 0.5 inch </p>
<p id=”cth3?>Yang perlu diperhatikan juga bahwa body disini telah diformat dengan margin kiri 0.5 inch dan warna background biru</p>
</body>
</html>
Linked Style Sheet
Metode ini hampir sama dengan metode Embedded Style Sheet, hanya saja pendefinisian tag <style> … </style> dibuat pada berkas terpisah dari berkas HTML yang membutuhkan CSS. Kemudian berkas lain tersebut disimpan dalam format .css.
Pada berkas HTML yang akan menggunakan berkas CSS, harus dibuat tag <link> yang dituliskan di antara tag <head> … </head>.
Contoh (simpan dengan nama contoh.css) :
<style>
body {background:#0000FF; color:#FFFF00; margin-left:0.5in}
h1 {font-size:18pt; color:#FF0000}
p {font-size:12pt; font-family:arial; text-indent:0.5in}
</style>
Sifat CSS
Ada dua sifat CSS yaitu internal dan eksternal. Jika internal yang dipilih, maka skrip itu dimasukkan secara langsung ke halaman website yang akan didesain. Kalau halaman web yang lain akan didesain dengan model yang sama, maka skrip CSS itu harus dimasukkan lagi ke dalam halaman web yang lain itu.
Sifat yang kedua adalah eksternal di mana skrip CSS dipisahkan dan diletakkan dalam berkas khusus. Nanti, cukup gunakan semacam tautan menuju berkas CSS itu jika halaman web yang didesain akan dibuat seperti model yang ada di skrip tersebut.
Fakta Menggunakan CSS
Fakta Menggunakan CSS diantaranya :
Artikel 3
PHP (Hypertext Preprocessor) adalah bahasa pemrograman
berbasis web yang bekerja di server. Karena bekerja di sisi server maka
kode sumber (source code) file tidak dapat dilihat di sisi client.
Banyak juga yang bertanya apa sih perbedaan PHP dengan HTML ?
Perbedaannya adalah PHP digunakan untuk membangun web dinamis sedangkan HTML hanya untuk membangun web statis.
Diagram berikut menampilkan cara kerjanya.
Contoh paling mudah adalah ketika anda membuka situs ilmusoft.com maka anda telah melakukan request file index.php ke server. Sehingga request ke http://www.ilmusoft.com sama dengan request ke http://www.ilmusoft.com/index.php. File index.php saya buat supaya melakukan query ke database, mengambil artikel terbaru untuk ditampilkan di halaman depan. Sehingga halaman depan situs ini akan berubah isinya saat ada artikel baru yang saya tulis. Jika saya menggunakan index.html maka saya harus melakukan cara manual yaitu mengedit kode sumber html setiap ada artikel baru. Bukankah itu merepotkan ?
Karena bekerja disisi server maka kita harus menyimpan file tersebut di server yang mendukung bahasa PHP misalnya Apache Web Server. Jika anda sedang belajar maka bisa menggunakan aplikasi bernama XAMPP. Disitu sudah terdapat server apache dan sekaligus database mysql. Setelah selesai menginstal XAMPP maka anda harus meletakkan file php di folder default htdocs yaitu C:/Program Files/xampp/htdocs. Misalnya C:/Program Files/xampp/htdocs/latihan. Lalu kunjungi halaman web anda dengan mengetikkan http://localhost/latihan. Sebelumnya jangan lupa untuk menjalankan apache.
Bahasa PHP disimpan dalam bentuk file teks berekstensi php (.php). Kode PHP diapit antara tanda <?php dan ?>. Berikut adalah kode sumber PHP sederhana.
Simpan dengan nama terserah.php. Saat dibuka di browser anda akan melihat tulisan Hello World ! tampil di layar.
HTML adalah, (HyperText Markup Language) sebuah bahasa standar yang digunakan oleh browser Internet untuk membuat halaman dan dokumen pada sebuah Web yang kemudian dapat diakses dan dibaca layaknya sebuah artikel. HTMLjuga dapat digunakan sebagai link link antara file-file dalam situs atau dalam komputer dengan menggunakan localhost, atau link yang menghubungkan antar situs dalam dunia internet.
Contoh Struktur dasar pemrograman web HTML:
<!DOCTYPE html>
<html>
<head>
<title>Judul halaman web disini</title>
</head>
<body>
Informasi halaman website disini
</body>
</html>
<html>
<head>
<title>Judul halaman web disini</title>
</head>
<body>
Informasi halaman website disini
</body>
</html>
Pejelasan Struktur dasar diatas :
A.
TAG
Merupakan
teks khusus (markup) yang terdiri dari dua karakter yaitu karakter
"<" dan karakter ">", sebagai contoh
<body> adalah tag dengan nama body.
Secara
Umum tag ditulis secara berpasangan contoh tag <body> biasanya diakhiri
dengan tag penutup </body> (ditambahkan karakter "/" setelah
karakter "<") sehingga informasi yang diberikan didalam tag
<body> berada sebelum ditutup dengan </body> .
B.
ELEMENT
Element
terdiri atas tiga bagian, yaitu tag pembuka, isi, dan tag penutup. Sebagai
contoh untuk menampilkan judul dokumen HTML pada web browser digunakan element
title, dimana:
<title>
ini adalah tag pembuka judul dokumen HTML
Disini
Judul Dokumen HTML ini adalah isi judul dokumen HTML
</title>
ini adalah tag penutup judul dokumen HTML
Tag-tag
yang ditulis secara berpasangan pada suatu element HTML, tidak boleh
saling tumpang tindih dengan pasangan tag-tag lainnya.
Contoh penulisan tag-tag yang benar
<p>
<b> Informasi yang di bold </b>
</p>
<p>
<b> Informasi yang di bold </b>
</p>
Contoh yang salah :
<p>
<b> Informasi yang di bold </p>
</b>
<p>
<b> Informasi yang di bold </p>
</b>
1
|
<b>
</b> |
C.
ATTRIBUTE
Attribute
mendefinisikan property dari suatu element HTML, yang terdiri atas nama dan
nilai. Secara umum nilai attribute harus berada dalam tanda petik satu
atau dua, Contoh ingin membuat background hitam dengan warna tulisan
putih
<body bgcolor="black" text="white">
test html
</body>
test html
</body>
(Biasanya
jarang digunakan, lebih banyak menggunakan CSS dalam desain tampilan.)
Ada
banyak elemet dan tag dalam html, namun penggunaanya disesuaikan dengan
kebutuhan, untuk mempelajari element-element dari tag html dapat di lihat dan
dilatih dari link ini : http://w3schools.com/html/html_attributes.asp
. Untuk awal silahkan belajar dengan kreasi menurutmu untuk tahap dasar,
postingan mengenai html ini akan saya lanjutkan secara berlanjut, untuk tahap
dasar mungkin beberapa pertanyaan dibawah ini bisa menjadi dasar latihan
pemrograman dasar html.
- Cara Menampilkan teks dalam dokumen web HTML
- Cara Merubah warna Teks dan background
- Cara Mengganti Teks dan Background gambar.
Sebagai
panduan, silahkan membuat dokumen html menggunakan Notepad++, setelah membuat
silahkan save as dengan extension html contoh save as “index.html”. Itu saja
postingan kali ini mengenai belajar pemrograman web HTML sampai ketemu di
postingan selanjutnya.
Artikel 2
Mengenal Cascading Style Sheet (CSS)
Sama halnya styles dalam aplikasi pengolahan kata seperti Microsoft Word yang dapat mengatur beberapa style, misalnya heading, subbab, bodytext, footer, images, dan style lainnya untuk dapat digunakan bersama-sama dalam beberapa berkas (file). Pada umumnya CSS dipakai untuk memformat tampilan halaman web yang dibuat dengan bahasa HTML dan XHTML.
CSS dapat mengendalikan ukuran gambar, warna bagian tubuh pada teks, warna tabel, ukuran border, warna border, warna hyperlink, warna mouse over, spasi antar paragraf, spasi antar teks, margin kiri, kanan, atas, bawah, dan parameter lainnya.[1] CSS adalah bahasa style sheet yang digunakan untuk mengatur tampilan dokumen. Dengan adanya CSS memungkinkan kita untuk menampilkan halaman yang sama dengan format yang berbeda.
Sejarah CSS
Nama CSS didapat dari fakta bahwa setiap deklarasi style yang berbeda dapat diletakkan secara berurutan, yang kemudian membentuk hubungan ayah-anak (parent-child) pada setiap style. CSS sendiri merupakan sebuah teknologi internet yang direkomendasikan oleh World Wide Web Consortium atau W3C pada tahun 1996. Setelah CSS distandarisasikan, Internet Explorer dan Netscape melepas browser terbaru mereka yang telah sesuai atau paling tidak hampir mendekati dengan standar CSS.
Penulisan
Saat masuk pada bagian CSS, sering dijumpai kode sebagai berikut:
h1 {
color: #0789de;
}
Bagian
pertama sebelum tanda ‘{}’ dinamakan selector, sedangkan yang diapit
oleh ‘{}’ disebut declaration yang terdiri dari dua unsur, yaitu
property dan value. Selector dalam pernyataan di atas adalah h1,
sedangkan color adalah property, dan #0789de adalah value.Selain itu ada tiga metode penulisan CSS atribut, yaitu :
Inline Style Sheet
CSS didefinisikan langsung pada tag HTML yang bersangkutan. Cara penulisannya cukup dengan menambahkan atribut style=”…” dalam tag HTML tersebut. Style hanya akan berlaku pada tag yang bersangkutan, dan tidak akan mempengaruhi tag HTML yang lain.
Contoh penulisan CSS dengan metode Inline Style Sheet :
<html>
<head>
<title>Contoh Bentuk Inline</title>
</head>
<body bgcolor=”#FFFFFF”>
<p id=”cth1?>
Ini adalah contoh tag P tanpadiformat menggunakan CSS </p>
<p id=”cth2? style=”font-size:20pt”>
Tag P ini diformat dengan besar font 20 point </p>
<p id=”cth3? style=”font-size:14pt; color:red”>
Tag P ini diformat dengan besar font 14 point, dan menggunakan warna merah </p>
</body>
</html>
Embedded Style Sheet
CSS didefinisikan terlebih dahulu dalam tag <style> … </style> di atas tag <body>. Pada pendefinisian ini disebutkan atribut-atribut CSS yang akan digunakan untuk tag-tag HTML, yang selanjutnya dapat digunakan oleh tag HTML yang bersangkutan.
Contoh penggunaan CSS dengan metode Embedded Style Sheet :
<html>
<head>
<title>Contoh Bentuk Embedded/title>
</head>
<style>
body {background:#0000FF; color:#FFFF00; margin-left:0.5in}
h1 {font-size:18pt; color:#FF0000}
p {font-size:12pt; font-family:arial; text-indent:0.5in}
</style>
<body>
<h1 id=”cth1?>Judul ini berukuran 18 dengan warna merah!</h1>
<p id=”cth2?>Tag p ini di format dengan besar font 12 point dengan tipe font Arial dan mempunyai identasi 0.5 inch </p>
<p id=”cth3?>Yang perlu diperhatikan juga bahwa body disini telah diformat dengan margin kiri 0.5 inch dan warna background biru</p>
</body>
</html>
Linked Style Sheet
Metode ini hampir sama dengan metode Embedded Style Sheet, hanya saja pendefinisian tag <style> … </style> dibuat pada berkas terpisah dari berkas HTML yang membutuhkan CSS. Kemudian berkas lain tersebut disimpan dalam format .css.
Pada berkas HTML yang akan menggunakan berkas CSS, harus dibuat tag <link> yang dituliskan di antara tag <head> … </head>.
Contoh (simpan dengan nama contoh.css) :
<style>
body {background:#0000FF; color:#FFFF00; margin-left:0.5in}
h1 {font-size:18pt; color:#FF0000}
p {font-size:12pt; font-family:arial; text-indent:0.5in}
</style>
Sifat CSS
Ada dua sifat CSS yaitu internal dan eksternal. Jika internal yang dipilih, maka skrip itu dimasukkan secara langsung ke halaman website yang akan didesain. Kalau halaman web yang lain akan didesain dengan model yang sama, maka skrip CSS itu harus dimasukkan lagi ke dalam halaman web yang lain itu.
Sifat yang kedua adalah eksternal di mana skrip CSS dipisahkan dan diletakkan dalam berkas khusus. Nanti, cukup gunakan semacam tautan menuju berkas CSS itu jika halaman web yang didesain akan dibuat seperti model yang ada di skrip tersebut.
Fakta Menggunakan CSS
Fakta Menggunakan CSS diantaranya :
- Telah didukung oleh kebanyakan browser versi terbaru, tetapi tidak didukung oleh browser-browser lama.
- Lebih fleksibel dalam penempatan posisi layout. Dalam layouting CSS, kita mengenal Z-Index untuk menempatkan objek dalam posisi yang sama.
- Menjaga HTML dalam penggunaan tag yang minimal, hal ini berpengaruh terhadap ukuran berkas dan kecepatan pengunduhan.
- Dapat menampilkan konten utama terlebih dahulu, sementara gambar dapat ditampilkan sesudahnya.
- Penerjemahan CSS setiap browser berbeda, tata letak akan berubah jika dilihat di berbagai browser
- CSS adalah layouting "Masa Depan" dengan penggabungan bersama XHTML.
Artikel 3
Dasar-dasar Pemrograman Web Menggunakan Bahasa PHP
PHP (Hypertext Preprocessor) adalah bahasa pemrograman
berbasis web yang bekerja di server. Karena bekerja di sisi server maka
kode sumber (source code) file tidak dapat dilihat di sisi client.
Banyak juga yang bertanya apa sih perbedaan PHP dengan HTML ?
Perbedaannya adalah PHP digunakan untuk membangun web dinamis sedangkan HTML hanya untuk membangun web statis.
Saat kita membuat sebuah halaman web dengan HTML halaman tersebut akan
nampak sesuai kode HTML yang kita buat. Untuk merubah isi maupun
tampilan halaman tersebut kita harus mengubah kode sumber file html.
Sedangkan pada PHP tanpa merubah kode sumbernya halaman web kita akan
menampilkan isi yang berbeda tanpa harus merubah kode sumber file
phpnya. Sehingga PHP disebut bahasa pemrograman web dinamis.
Bagaimana Cara Kerja PHP ?
Diagram berikut menampilkan cara kerjanya.
Contoh paling mudah adalah ketika anda membuka situs ilmusoft.com maka anda telah melakukan request file index.php ke server. Sehingga request ke http://www.ilmusoft.com sama dengan request ke http://www.ilmusoft.com/index.php. File index.php saya buat supaya melakukan query ke database, mengambil artikel terbaru untuk ditampilkan di halaman depan. Sehingga halaman depan situs ini akan berubah isinya saat ada artikel baru yang saya tulis. Jika saya menggunakan index.html maka saya harus melakukan cara manual yaitu mengedit kode sumber html setiap ada artikel baru. Bukankah itu merepotkan ?
Persiapan Belajar PHP
Karena bekerja disisi server maka kita harus menyimpan file tersebut di server yang mendukung bahasa PHP misalnya Apache Web Server. Jika anda sedang belajar maka bisa menggunakan aplikasi bernama XAMPP. Disitu sudah terdapat server apache dan sekaligus database mysql. Setelah selesai menginstal XAMPP maka anda harus meletakkan file php di folder default htdocs yaitu C:/Program Files/xampp/htdocs. Misalnya C:/Program Files/xampp/htdocs/latihan. Lalu kunjungi halaman web anda dengan mengetikkan http://localhost/latihan. Sebelumnya jangan lupa untuk menjalankan apache.
Syntax Dasar PHP
Bahasa PHP disimpan dalam bentuk file teks berekstensi php (.php). Kode PHP diapit antara tanda <?php dan ?>. Berikut adalah kode sumber PHP sederhana.
<?php echo "Hello World !"; ?>
Simpan dengan nama terserah.php. Saat dibuka di browser anda akan melihat tulisan Hello World ! tampil di layar.
Tidak ada komentar:
Posting Komentar