Hai, bertemu lagi dengan saya Inggrit Sinara Dewi, saya akan memberi ilmu buat kalian tentang HTML5.

Penambahan input type & Validasi Form

Native Audio dan Video

Sejak era 2000-an, audio dan video di internet tidak mempunyai standar. Kebanyakan audio menggunakan plugin itunes atau realplayer  sedangkan video player menggunakan Flash atau silverLight . Era plugin sudah berakhir, HTML5 menghadirkan Native audio dan Video Codec langsung didalam browser. Tidak ada lagi namanya udpate plugin atau browser  crash karena plugin error.

Canvas

Canvas adalah fitur yang menarik. Bahasa mudahnya, dengan canvas kita bisa menggambar atau menampilkan animasi  langsung di browser.

Offline Support

Salah satu kelemahan dari aplikasi web adalah harus selalu online. HTML5 bisa bekerja walaupun tidak ada koneksi. Silahkan coba menggunakan beberapa aplikasi di Google chrome webstore seperti Google Docs dan Aplikasi Note. Dua aplikasi web ini bisa tetap berjalan walaupun tidak tersedia koneksi internet.

Drag & Drop

Kelebihan dari desktop adalah kemampun memindah atau mengkopi file cukup dengan “drag & drop”. Sekarang Web  bisa melakukan hal yang dulu hanya bisa dilakukan di Desktop. Salah satu web yang sudah menggunakan fitur ini adalah dropbox. Untuk mencobanya, buat akun di dropbox dan silahkan di upload image dengan cara mendrag file didesktop ke Halaman Dropbox, maka secara otomatis file akan terupload. Untuk mendonload cukup drag file yang ada di web dropbox ke desktop. Cool kan?

Mengakses Hardware.

Sebagian orang tidak mau membuat aplikasi web karena web tidak punya akses ke hardware. Yakin? sekarang bisa. HTML5 bisa mengakses Mic, Kamera dan Filesystem , Orientasi device (landscape atau potrait) dan Lokasi GPS langsung tanpa perlu plugin.

Masih ada beberapa fitur tambahan seperti Notifikasi gaya desktop, keamanan, WebRTC, Microdata, PageVisibility, Fullscreen support, Web socket, History API, HTML editing, spellcheck WebGL dan beberapa teknologi web  yang masih dikembangkan. Nah, gimana? HTML5 bukan hanya menambah syntax ke bahasa HTML, namun menambahkan Puluhan fitur yang memungkinkan programmer web membuat aplikasi seperti desktop hanya dengan HTML dan teman temannya (CSS, JS, webAPI dll).
Intinya, Belajar HTML5 sekarang dan anda akan menjadi pelopor pembuat aplikasi HTML5 disaat nanti yang lain baru belajar. Ingat, mulai dari sekarang!

#sumber dari : ( http://www.candra.web.id/2013/01/06/mengenal-fitur-html5/ )

Link adalah tujuan kata Hypertext dari kepanjangan HTML. Dalam tutorial belajar HTML dasar kali ini kita akan membahas cara membuat link di HTML.

---

Cara Membuat link di HTML

Tujuan kata Hypertext dari HTML adalah membuat sebuah text yang ketika di-klik akan pindah ke halaman lainnya. HTML menggunakan tag <a>untuk keperluan ini.
Link ditulis dengan <a> yang merupakan singkatan cari anchor (jangkar). Setiap tag <a> setidaknya memiliki sebuah atribut href. Dimana href berisi alamat yang dituju (href adalah singkatan dari hypertext reference).
Agar lebih jelas, kita akan lihat menggunakan contoh. Silahkan buka text editor dan buat kode seperti dibawah ini.
Contoh penggunaan tag link <a>:

---

Alamat Absulut dan Alamat Relatif

Pada contoh diatas kita menuliskan alamat link secara lengkap dengan bagian “http://www.”. Penulisan seperti ini disebut juga dengan external link, yang berarti kita membuat link ke alamat lain di internet, atau lebih dikenal dengan: alamat absolut.
Alamat absolut adalah penulisan alamat file dengan menyertakan nama website, seperti: href=”http://www.duniailkom.com/belajar_html.html”, atau href=”http://www.wikipedia.org”.
Namun jika kita ingin membuat link di dalam situs yang sama, maka tidak perlu menyebutkan alamat lengkap tersebut. Tetapi cukup mencantumkan alamat file yang dituju relatif kepada file saat ini. Jenis alamat ini disebut alamat relatif.
Sebagai contoh alamat relatif, apabila kita ingin membuat link kepada file hello.html pada folder yang sama dengan file saat ini, maka atribut hrefnya, berisi: href=”hello.html”. Berikut adalah kode HTMLnya:
Contoh penggunaan tag link <a> untuk alamat relatif:

Alamat absolute ditulis dengan lengkap, seperti http://www.duniailkom.com, atau jika kita merujuk kepada halaman tertentu, menjadi http://www.duniailkom.com/nama_halaman.html.
Alamat relatif maksudnya adalah relatif kepada file tempat kita memanggil link ini. Seandainya nama file kita adalah belajar_link.html, dan dalam folder yang sama terdapat halaman belajar_list.html, kita dapat menggunakan href=”belajar_list.html” untuk membuat link ke halaman belajar_list.html .
Jika file tersebut berada di dalam folder lagi_belajar, maka alamat relatifnya menjadi href=”lagi_belajar/belajar_list.html”. Namun bagaimana jika halaman tersebut berada 2 tingkat di luar folder saat ini? Kita dapat menggunakan href=”../../belajar_list.html”, untuk naik 2 folder diatasnya.

---

Atribut tag <a>: target

Atribut penting lainnya dari tag <a> adalah target. Atribut ini digunakan untuk menentukan apakah link yang dituju terbuka di jendela browser saat ini, atau terbuka di jendela baru.
Secara default, setiap link yang kita tulis akan terbuka pada jendela yang sama (menimpa halaman web saat ini). Tetapi apabila kita ingin halaman tersebut terbuka pada tab baru, gunakan atribut target=”_blank”.
Contoh penggunaan tag link <a> dengan atribut target:

Jika kita men-klik link tersebut, maka halaman duniailkom.com akan terbuka di tab baru, dan tidak menimpa tab saat ini.


Sumber : http://www.duniailkom.com/belajar-html-cara-membuat-link-di-html-tag-a/

Sulit membayangkan sebuah halaman HTML tanpa gambar untuk standard web saat ini. Pada tutorial belajar HTML cara menambahkan gambar di HTML ini kita akan mempelajari cara penggunaan tag image. Tag Image digunakan untuk menampilkan gambar kedalam halaman web, menggunakan <img>.

---

Atribut src dalam tag <img>

Atribut src adalah singkatan dari source, merupakan atribut yang berisi alamat dari gambar yang akan ditampilkan. Alamat ini bisa relatif atau absolute.
Untuk contoh kode HTML tentang image ini, sediakan sebuah gambar yang akan digunakan sebagai tampilan, dan tempatkan gambar tersebut ke dalam satu folder dengan halaman contoh. Gambar dapat berupa JPEG, PNG, maupun GIF.
Pada contoh dibawah ini saya menggunakan sebuah gambar koala.jpg yang berada dalam satu folder dengan halaman HTML saat ini. Savelah sebagai img.html
Contoh penggunaan tag <img>:
Perhatikan bahwa tag <img> tidak memiliki elemen, sehingga langsung ditutup dengan />

---

Atribut alt dalam tag <img>

Tag image juga memiliki atribut penting lainnya, yaitu alt
Atribut alt adalah singkatan dari alternative description, dimana alt digunakan untuk keterangan dari gambar jika gambar tersebut gagal ditampilkan oleh browser. Atau jika web broser telah disetting untuk tidak menampilkan gambar.
Contoh penggunaan atribut alt pada tag <img>: 

---

Atribut width dan height dalam tag <img>

Atribut lainnya membolehkan kita untuk menentukan besar dari gambar yang ditampilkan, yaitu width dan height.
Contoh penggunaan atribut width dan height pada tag <img>:

Pada penggunaan tag image diatas, gambar terlihat tidak proporsional, hal ini karena penggunaan atribut width dan height ‘memaksa‘ gambar untuk tampil dengan nilai yang kita tetapkan.
Untuk mempertahankan proporsi gambar, namun tetap membuat gambar menjadi besar/kecil, cantumkan hanya salah satu atribut saja (width saja atau height saja, namun tidak keduanya). Misalkan jika kita menetapkan atribut width=300px (tanpa mencantumkan height), maka web browser akan menampilkan gambar dengan lebar 300px, dan menghitung secara otomatis tinggi gambar agar gambar tetap proporsional.


Sumber:
http://www.duniailkom.com/belajar-html-cara-menambahkan-gambar-di-html-tag-image/

Cara Membuat Tulisan Berjalan di Blog

Contoh Teks Yang Dikenai Marquee

Untuk membuat Tulisan Berjalan seperti diatas, kita membutuhkan kode html seperti dibawah ini :

<marquee>Contoh Teks Yang Dikenai Marquee</marquee>

Si <marquee> inilah yang nantinya akan membuat seluruh Tulisan atau Teks yang diapit kode tersebut dapat bergerak.

Yang diatas itu kan Tulisan Berjalan yang biasa saja tanpa tambahan efek apapun pada kode html. Kita pun bisa memvariasikan kode <marquee> diatas dengan JavaScript atau HTML yang lain, agar lebih jelas kita masuk contoh saja.



Untuk menambahkan warna background, kita perlu menyisipkan style="background: warna;" kedalam kode marquee-nya, dibawah ini adalah contoh jika kita ingin memberi warna abu-abu pada Marquee Text.

<marquee style="background: gray;">Contoh Teks Yang Dikenai Marquee Dengan Background Abu-abu</marquee>

Maka hasil dari kode HTML diatasa akan nampak seperti ini.

Contoh Teks Yang Dikenai Marquee Dengan Background Abu-abu

Tulisan Berjalan diatas susah untuk dibaca bukan ? kita juga bisa mengganti warna dari Teks diatas, agar kontras dengan backgroundnya.



Disini saya akan mencotohkan bagaimana mengganti warna Tulisan Berjalan diatas dengan warna Putih agar teks tersebut mudah untuk terbaca.

Kode yang kita pakai adalah seperti ini :

<marquee style="background: gray; color: white;">Contoh Teks Yang Dikenai Marquee Dengan Background Abu-abu Teks Putih</marquee>

Dan Hasilnya akan nampak seperti dibawah ini :

Contoh Teks Yang Dikenai Marquee Dengan Background Abu-abu Teks Putih



Selain mengganti warna dan juga background kita juga bisa membuat Tulisan Berjalan tersebut hanya tampil dari tengah, tidak full dari kanan ke kiri.

Dan cara ini tergantung dari Div atau Nav pembungkus Marquee Teks tersebut, artinya jika lebar selector Div hanya 500px maka Tulisan berjalan akan muncul pada pixel ke 250 - 0 (tengah ke kiri).

Contoh penerapan dalam kode HTML :

<marquee width="50%">Contoh Teks Yang Dikenai Marquee Width 50%</marquee>

Kode HTML diatas akan membuat tulisan 'Contoh Teks Yang Dikenai Marquee' akan berjalan dari tengah-tengah layar menuju ke kiri, atau lebih jelasnya seperti contoh dibawah ini :

Contoh Teks Yang Dikenai Marquee Width 50%

Dan Anda pun bebas mengganti persentase tersebut. Semakin kecil maka semakin ke kiri pula teks yang akan tampil.

Diatas kita hanya menggunakan HTML dan CSS bukan, nah sekarang kita akan menambahkan JavaScript kedalam kode <marquee> tersebut.



Jika normalnya Tulisan Bejalan atau <marquee> selalu berjalan tanpa henti dari kanan ke kiri, maka kita bisa menyuruhnya untuk berhenti sejenak (jeda) dengan cara menambahkan kode berikut.

<marquee scrolldelay="500">Contoh Teks Yang Dikenai Marquee Scrolldelay 500</marquee>

500 disini maksudnya adalah 0,5 Detik bukan 500 Detik. Jadi kode diatas jika dijalankan akan membuat Teks yang ada didalam kode <marquee></marquee> berhenti sejenak setiap 0,5 Detik.

Contohnya seperti dibawah ini :

Contoh Teks Yang Dikenai Marquee Scrolldelay 500



Walaupun standar dari Marquee Text sudah sesuai (tidak terlalu cepat atau lambat) namun jika Anda merasa Tulisan Berjalan tersebut begitu amat cepat, Anda bisa dengan mudah mengatur kecepatannya, yaitu dengan menambahkan scrollamount="angka"

Contoh penerapan dalam HTML :

<marquee scrollamount="10">Contoh Teks Yang Dikenai Marquee Dengan Speed Scroll Amount 10</marquee>

Dan kode tersebut akan menghasilkan efek seperti ini :

Contoh Teks Yang Dikenai Marquee Dengan Speed Scroll Amount 10

Saya sendiri tidak tahu persis makna dari angka 10 tersebut, apakah 10px per detik atau apalah saya kurang tahu, Tapi yang jelas jika Anda merubah angkanya menjadi lebih besar, maka Kecepatan Tulisan Berjalan tersebut akan makin cepat.



Seperti yang kita semua tahu, bahwa Standar dari Teks Berjalan adalah mengarah Dari Kanan ke Kiri. Namun kali ini kita akan mencoba hal yang berbeda yaitu membalikkan arah pergerakannya (kiri ke kanan).

Kode HTML tambahan yang kita butuhkan adalah direction="right" yang nanti akan kita pasangkan dengan <marquee> tentunya.

Contoh penggabungan :

<marquee direction="right">Contoh Tulisan Berjalan Dari Kiri ke Kanan</marquee>

Dan hasilnya akan menjadi seperti ini :

Contoh Tulisan Berjalan Dari Kiri ke Kanan



Agar Tulisan Berjalan tersebut dapat memantul, kita cukup menambahkan behavior="alternate".

Contoh penambahan ke dalam HTML :

<marquee behavior="alternate">Contoh Tulisan Berjalan Dengan Efek Memantul</marquee>

Hasilnya setelah kita terapkan :

Contoh Tulisan Berjalan Dengan Efek Memantul



Sebenarnya kode untuk membuat Tulisan Berjalan Dari Bawah ke Atas sama saja dengan dengan Cara Membuat Tulisan Berjalan Dari Kiri ke Kanan, hanya saja kita mengubah valuenya menjadi direction="up"

Contoh penerspan :

<marquee direction="up">Contoh Tulisan Berjalan Dari Bawah ke Atas</marquee>

Dan Hasilnya :

Contoh Tulisan Berjalan Dari Bawah ke Atas

Kata "up" juga bisa Anda ganti dengan down (untuk memberi efek tulisan berjalan dari atas ke bawah).



Membaca dalam kondisi teks sedang berjalan memang saya akui cukup sulit, nah untuk itu ada kode JavaScript (JS) untuk memecahkan masalah tersebut, yaitu onmouseover="this.stop()" onmouseout="this.start()" kode JS tersebut fungsinya untuk menghentikan laju Tulisan Berjalan tersebut, dengan catatan ada Kursor Mouse yang melewati atau bersentuhan dengan Tulisan Berjalan.

Contoh Penggabungan JavaScript diatas dengan kode HTML Marquee :

<marquee onmouseover="this.stop()" onmouseout="this.start()">Contoh Teks Yang Dikenai Marquee Dan Akan Berhenti Jika Ada Kursor Diatasnya</marquee>

Dan hasil dari kolaborasi JavaScript dan HTML diatas adalah seperti dibawah ini :

Contoh Teks Yang Dikenai Marquee Dan Akan Berhenti Jika Ada Kursor Diatasnya


sumber : http://berguruseo.blogspot.com/2014/01/cara-membuat-tulisan-berjalan-di-blog.html

APA ITU PHP ?
Bagi anak muda , istilah PHP dikenal dengan pemberi harapan palsu , hehe . Tapi disini kita tidak membahas PHP yang itu tetapi PHP yaitu bahasa pemrograman yang bisa membantu seorang programmer untuk membuat sebuah halaman web dengan cepat . Orang awam pun juga bisa mempelajari bahasa pemrograman ini . Kepanjangan dari PHP disini adalah Hypertext Prepocessor . Bahasa pemrograman web ini dapat disisipkan dalam script HTML . Banyak sintaks di dalamnya yang mirip dengan bahasa C, Java dan Perl.
Ketika seseorang mengunjungi web berbasis PHP, web server akan memproses kode kode PHP. Beberapa perintah atau kode dari php tersebut selanjutnya ada yang diterjemahkan ke dalam HTML dan beberapa ada yang disembunyikan (misalnya kalkulasi dan operasi). Setelah diterjemahkan kedalam html , web server akan mengirim kembali ke web browser pengunjung tersebut.

MODAL DASAR MEMPELAJARI PHP
Sebelum mempelajari PHP, Anda harus menguasai

• HTML
• Dasar-dasar pemrograman( C/C++ lebih baik)

APLIKASI YANG DIPERLUKAN
Untuk dapat bekerja dengan PHP, berikut ini beberapa aplikasi yang diperlukan:

• Web server(Apache,II S, Personal Web Server/PWS)
• PHP server(dapat di download di PHP.net)
• Database server(MYSQL, Interbase, MS SQL,dll)
• Web Editor(Dreamweaver, Notepad++, Editplus,dll)

PHP - SINTAKS
Kode-kode PHP dituliskan diantara tanda berikut ini:
<?php
...
...
...
?>
atau
<?
...
...
...
?>
Apabila anda membuat kode PHP dan berencana akan mendistribusikan ke orang lain, maka usahakan untuk menggunakan sintaks <?php ... ?>. Hal ini dikarenakan untul penggunaan kode yang menggunakan <? ... ?> terkadang tidak bisa dijalankan dalam server tertentu.

MENYIMPAN FILE PHP
Apabila anda memiliki kode PHP yang disisipkan dalam HTML dalam suatu file dan menginginkan web server dapat menjalankannya, maka file tersebut harus disimpan dalm ekstensi *.php . Jika menyimpan dalam ekstensi *.htm, maka kode php tersebut tidak akan diproses dan akan ditampilkan dalam web browser seperti apa adanya(berupa kode-kode).
Contoh :
<html>
<head>
<title>Halaman PHP pertamaku</title>
</head>
<body>
<?php
echo "Hello word";
?>
</body>
</html>

Perintah echo digunakan untuk menampilkan teks ke dalam browser . Teks atau string dapat dituliskan di browser dengan langsung dituliskan dalam echo yang diapit oleh dua tanda petik ganda (quotes) atau menyimpan string terlebih dahulu dalam suatu variabel kemudian dituliskan dalam echo.

Semicolon(;)
Jika anda memperhatikan contoh sebelumnya, maka terdapat tanda titik koma / semicolon pada akhir perintah echo . Tanda semicolon merupakan penanda akhir dari statement PHP dan harus ada.
Contoh :
<html>
<head>
<title>Halaman PHP pertamaku</title>
</head>
<body>
<?php
echo "Hello word";
echo "Hello word";
echo "Hello word";
echo "Hello word";
echo "Hello word";
?>
</body>
</html>

Variabel
Misalkan dalam PHP kita akan menyimpan suatu nilai berupa angka atau string dalam suatu variabel , caranya adalah membuat nama variabel terlebih dahulu kemudian diberokan suatu assignment pada nilai yang diinginkan . Perhatikan sintaks berikut ini

$nama_variabel = nilai;

Note : jangan lupa tanda dolar($) harus disertakan
Contoh:
<?php
$hello = "Hello World!";
$sebuah_bilangan = 4;
$bilanganYangLain = 8;
?>
Dari contoh diatas bahwa dalam PHP , nama variabel tidak perlu dideklarasikan terlebih dahulu seperti C++ .

Menampilak Nilai Variabel dengan Echo
Nilai variabel dapat dengan mudah ditampilkan dengan menggunakan echo , baik nilai yang berupa bilangan maupun string.
Contoh :
<?php
$string_ku ="Hello.. Nama saya: ;
$bilangan_ku = 4;
$huruf_ku = "a";
echo $string_ku;
echo $bilangan_ku;
echo $huruf_ku;
?>

Komentar dalam PHP
Seperti halnya bahsa pemrograman yang lain, komentar dalam suatu kode PHP tidak akan dieksekusi . Terdapat 2 cara memberi komentar dam PHP, yaitu :

• Diberikan tanda //(slash) didepan teks komentar . Perintah ini hanya bisa berlaku untuk komentar dalam satu baris.
• Diberikan tanda /* didepan teks komentar dan diakhiri dengan */. Perintah ini dapat digunakan untuk komentar yang lebih dari satu baris .

Semoga bermanfaat :)

Integer Length	Name or Type	Range
8 bits	byte	-27  to 27-1
16 bits	short	-215 to 215-1
32 bits	Int	-231 to 231-1
64 bits	long	-263 to 263-1

Float Length	Name or Type	Range
32 bits	Float	-231 to 231-1
64 bits	double	-263 to 263-1

Operator	Use	Description
+	Op1 + op2	Adds op1 and op2
*	Op1 * op2	Multiplies op1 by op2
/	Op1 / op2	Divides op1 by op2
%	Op1% op2	Computes the remainder of dividing op1 by op2
-	Op1 – op2	Subtracts op2 from op1