Selasa, 19 Mei 2015

Cara memasukkan gambar, video, audio ke dalam HTML

0 komentar
1. Memasukkan gambar
Untuk memasukkan gambar kedalam HTML, kita menggunakan tag < img >. Atribut-atribut yang bisa kita gunakan adalah :
  • src untuk menunjukkan lokasi file gambar
  • align untuk menentukan posisi gambar
  • height untuk menentukan tinggi gambar dalam pixel ketika di tampilkan di browser
  • width untuk menentukan lebar gambar dalam pixel ketika di tampilkan di browser, apa bila tidak disebutkan atribut height dan width, maka ukuran gambar akan di tampilkan ke dalama browser dengan ukuran asli file nya
  • hspace untuk menentukan jarak antara gambar dengan text secara horizontal
  • vspace untuk menentukan jarak antara gambar dengan text secara vertikal
·         border untuk menentukan batas batas pada gambar.
Contoh :
<img src="gambar/arif.jpg" height="120" width="80">
2. Memasukkan Audio
Untuk memasukkan audio kedalam HTML, kita menggunakan tag < embed >. Atribut-atribut yang bisa kita gunakan adalah :
  • src digunakan untuk menentukan lokasi file music
  • align digunakan untuk menentukan posisi.
  • border digunakan untuk menentukan batas-batas.
  • height digunakan untuk menentukan tinggi dari object yang dimasukkan.
  • width digunakan untuk menentukan lebar dari object yang dimasukkan.
  • hspace digunakan untuk menentukan jarak horizontal antara object dengan text.
  • vspace digunakan untuk menentukan jarak vertikal antara object dengan text.
Contoh:
<html>
<head>
<title> Contoh memasukkan file audio </title>
<body>
<h2>
 Ini Contoh memasukkan file audio ke dalam dokumen HTML
<br>
<embed src = "mp3/01. Ada Apa Denganmu.mp3" border ="2" 
autostart="false" height = "45" width = "400"
align="middle"></embed>
</body>
</html>
Apa bila ingin menjadikannya bgsound (Suara latar belakang) dalam halaman web kita maka di gunakan tag < bgsound >
Contoh :
<html>
<head>
<title> Contoh memasukkan file audio sebagai background sound </title>
<bgsound src="pangandaran.mp3" loop="-1">
</head>
<body>
</body>
</html>
3. Memasukkan Video
Dan untuk memasukkan video ke dalam dokumen HTML, juga digunakan tag yang sama yaitu tag < embed > Penulisan kode HTML-nya juga menyerupai penulisan kode HTML untuk memasukkan file audio. Hanya saja bedanya di format file nya saja, misalnya jika
format audio: .mp3
format video: .mp4, .flv, .avi dll
Contoh :
<html>
<head>
<title> Contoh memasukkan file video </title>
</head>
<body>
<h3>
 Ini Contoh memasukkan file audio ke dalam dokumen HTML </h3>
<embed src = "video/Ek Pal Ka Jeena.mp4" border ="2" align="middle"
autostart="false" height = "180" width = "400"></embed>
</body>
</html>
</body>
</html>

Editor HTML

0 komentar
Berikut adalah 10 software text editor yang digunakan dalam pemrograman web :
1. Notepad
Notepad adalah editor asli bawaan dari windows/Microsoft. Bagi pengguna Operating System windows pasti sudah terbiasa melihat atau menggunakan applikasi ini. Biasanya untuk pemula direkomendasikan menggunakan notepad biasa ini. Karena notepad yang harus serba manual mengajarkan kita cara menghafal penempatan coding-coding.
2. Notepad ++
Notepad++ hampir sama dengan notepad biasa, namun fitur lebihnya adalah pewarnaan pada code-code tertentu sehingga akan sedikit memudahkan penggunanya.
3. Sublime-Text
Memiliki banyak fitur yang mempermudah penggunanya dan eye catching (tampilan menarik). Kekurangannya adalah software ini adalah software berbayar tidak gratis.
4. NetBeans
Cukup baik untuk coding web, namun tidak direkomendasikan untuk PC yang memory seadanya. Karena akan membuat process yang memakan memory cukup besar.
5. Adobe Dreamweaver
Editor yang paling sering saya gunakan, bisa multi-tab. Tampilan keren eye catching dan tidak terlalu memakan banyak memori PC anda. Kekurangan software ini adalah software berbayar.
6. Araneae
Merupakan teks editor yang digunakan untuk file html dengan syntax highlighting, panjang dokumen tidak terbatas, mendukung drag & drop gambar, instan browser preview, dapat membuka beberapa tab sekaligus, dan sudah support untuk berbagai bahasa.
7. Crimson Editor
Free text editor ini sementara dapat berfungsi sebagai pengganti yang baik untuk Notepad, CE juga menawarkan banyak fitur canggih untuk bahasa pemrograman seperti html, C/C + +, Perl, dan Java.
8. ATPad
ATPad adalah pengganti dari Notepad standar. Berikut fitur-fitur didalamnya: multi tab, tampilan editornya dapat disesuaikan, terdapat garis penomoran, recent documents, bookmark, reload on-demand, change tracking, reloading ininterval, serta portability.
9. EditPad Lite
Merupakan free text editor yang menyajikan banyak aspek di luar Windows Notepad. Jika Anda menggunakan sebuah text editor untuk hal-hal seperti HTML coding atau menulis script atau file batch maka EditPad bisa jadi opsi baru. Untuk fiturnya sebagai berikut:
- Multi tabs, kamu bisa membuka banyak tab sekaligus
- Tidak ada batasan untuk ukuran file atau panjang baris teks
- Memiliki kemampuan untuk mengedit Unicode, DOS, KO18, dan halaman kode EBCDIC
- Support untuk berbagai jenis bahasa
10. Google Web Designer
Baru-baru ini google juga meluncurkan text editor. Design yang keren dan fitur-fitur yang memanjakan penggunanya. Beberapa fitur tersebut diantaranya adalah fitur manipulasi 3D, ilustrasi tools, dsbnya.

Senin, 20 April 2015

Pemrograman Web

0 komentar
Pemrograman web diambil dari 2 suku kata yaitu pemrograman dan web. Pemrograman diartikan proses, cara, perbuatan program. Definisi Web : jaringan komputer yang terdiri dari kumpulan situs internet yang menawarkan teks dan grafik dan suara dan sumber daya animasi melalui protokol transfer hypertext. Orang banyak mengenal web dengan istilah WWW. WWW adalah halaman-halaman website yang dapat saling terkoneksi satu dengan lainnya (hyperlink) yang membentuk samudra belantara informasi. Halaman Web merupakan file teks murni (plain text) yang berisi sintaks-sintaks HTML yang dapat dibuka/ dilihat/ diterjemahkan dengan Internet Browser . Sintaks HTML mampu memuat konten text, gambar, audio, video dan animasi. Kini internet identik dengan web, karena kepopuleran web sebagai standar interface pada lanyanan-layanan yang ada di internet, dari awalnya sebagai penyedia informasi, ini digunakan juga untuk komunikasi dari email sampai dengan chatting, sampai dengan melakukan transaksi bisnis (commerce).
Banyak keuntungan yang diberikan oleh Aplikasi berbasis Web dari pada aplikasi berbasis desktop, sehingga aplikasi berbasis web telah diadopsi oleh perusahaan sebagai bagian dari strategi teknologi informasinya, karena beberapa alasan :
  1. Akses informasi mudah,
  2. Setup server lebih mudah
  3. Informasi mudah didistribusikan
  4. Bebas platform, informasi dapat disajikan oleh browser web pada sistem operasi mana saja karena adanya standar dokumen berbagai tipe data dapat disajikan
HTTP
HTTP (HyperTextTransfer Protocol) adalah protokol yang dipergunakan untuk mentransfer dokumen dalam World Wide Web(WWW). Protokol ini adalah protokol ringan, tidak berstatus dan generik yang dapat dipergunakan berbagai macam tipe dokumen.
1.     Sejarah
Protokol HTTP pertama kali dipergunakan dalam WWW pada tahun 1990. Pada saat tersebut yang dipakai adalah protokol HTTP versi 0.9. Versi 0.9 ini adalah protokol transfer dokumen secara mentah, maksudnya adalah data dokumen dikirim sesuai dengan isi dari dokumen tersebut tanpa memandang tipe dari dokumen. Kemudian pada tahun 1996 protokol HTTP diperbaiki menjadi HTTP versi 1.0. Perubahan ini untuk mengakomodasi tipe-tipe dokumen yang hendak dikirim beserta enkoding yang dipergunakan dalam pengiriman data dokumen. Sesuai dengan perkembangan infrastruktur internet maka pada tahun 1999 dikeluarkan HTTP versi 1.1 untuk mengakomodasi proxy, cache dan koneksi yang persisten.
Perbedaan WEB 1.0, WEB 2.0 dan WEB 3.0
Web adalah suatu ruang informasi di mana sumber-sumber daya yang berguna diidentifikasi oleh pengenal global yang disebut Uniform Resource Identifier (URI). Secara umum, Web 1.0 dikembangkan untuk pengaksesan informasi dan memiliki sifat yang sedikit interaktif.Secara garis besar, sifat Web 1.0 adalah Read.
Sedangkan letak perbedaan Web 1.0 dan Web 2.0 yaitu :
  1. Perilaku pengguna Membaca Menulis
  2. Pelaku utama Perusahaan Pengguna/Komunitas
  3. Hubungan dengan server Client-server Peer to peer
  4. Bahasa pemrograman penampil konten HTML XML
  5. Pola hubungan penerbit-pengguna Searah Dua arah/ Interaktif
  6. Pengelolaan konten Taksonomi/direktori Folksonomi/penanda/tag
  7. Penayangan berbagai kanal informasi Portal RSS/Sindikasi
  8. Hubungan antar pengakses Tidak ada Berjejaring
  9. Sumber konten Penerbit/pemilik situs Pengguna
Di dalam web 3.0, sudah terjadi konvergensi yang sangat dekat antara dunia TI dengan dunia telekomunikasi.
Bahasa Pemrograman Web
Bahasa pemrograman merupakan suatu teknik instruksi standar untuk memerintah komputer. Berikut adalah penjelasan tentang bahasa pemrograman yang biasa digunakan untuk membuat suatu website:


Bahasa Pemrograman
Keterangan
HTML
HyperText Markup Language (HTML) adalah sebuah bahasa markup yang digunakan untuk membuat sebuah halaman web dan menampilkan berbagai informasi di dalam sebuah browser Internet. Sebuah file yang merupakan file HTML dapat dibuka dengan menggunakan browser web seperti Mozilla Firefox, Microsoft Internet Explorer dll.
PHP
Hypertext Preprocessor (PHP) adalah bahasa pemrograman script yang paling banyak dipakai saat ini. PHP pertama kali dibuat oleh Rasmus Lerdorf pada tahun 1995. PHP biasanya berjalan pada sistem operasi linux (PHP juga bisa dijalankan dengan hosting windows).
ASP
ASP adalah singkatan dari Active Server Pages yang merupakan salah satu bahasa pemograman web untuk menciptakan halaman web yang dinamis. ASP merupakan salah satu produk teknologi yang disediakan oleh Microsoft.
XML
Extensible Markup Language (XML) adalah bahasa markup serbaguna yang direkomendasikan W3C untuk mendeskripsikan berbagai macam data.
WML
WML adalah (Wireless Markup Language), yaitu bahasa pemrograman yang digunakan dalam aplikasi berbasis XML (Extensible Markup Langauge). WML adalah bahasa pemrograman yang digunakan dalam aplikasi wireless. WML merupakan analogi dari HTML yang berjalan pada protocol nirkabel.
PERL
Perl adalah bahasa pemrograman untuk mesin dengan sistem operasi Unix (SunOS, Linux, BSD, HP-UX), juga tersedia untuk sistem operasi seperti DOS, Windows, BeOS, VMS, EBCDIC, dan PocketPC. PERL merupakan bahasa pemograman yang mirip bahasa pemograman C.
CFM
CFM dibuat menggunakan tag ColdFusion dengan software Adobe ColdFusion / BlueDragon / Coldfusion Studio. Syntax coldfusion berbasis html.
Javascript
Javascript adalah bahasa scripting yang handal yang berjalan pada sisi client. JavaScript merupakan sebuah bahasa scripting yang dikembangkan oleh Netscape. Untuk menjalankan script yang ditulis dengan JavaScript kita membutuhkan JavaScript-enabled browser yaitu browser yang mampu menjalankan JavaScript.
CSS
Cascading Style Sheets (CSS) adalah suatu bahasa stylesheet yang digunakan untuk mengatur tampilan suatu dokumen yang ditulis dalam bahasa markup. Penggunaan yang paling umum dari CSS adalah untuk memformat halaman web yang ditulis dengan HTML dan XHTML. Spesifikasi CSS diatur oleh World Wide Web Consortium (W3C).



Struktur Dasar Pemrograman :

HTML adalah singkatan dari HyperText Markup Language yang merupakan sebuah script untuk menyusun dokumen-dokumen halaman Web. Dokumen HTML disimpan dalam format teks reguler dan mengandung tag-tag yang memerintahkan web browser untuk mengeksekusi perintah-perintah yang dispesifikasikan.
Contoh Struktur dasar pemrograman web HTML :
<!DOCTYPE html>
<html>
<head>
<title>Judul halaman web disini</title>
</head>
<body>
Informasi halaman website disini
</body>
</html>
Penjelasan Struktur Dasar di atas :
 
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>
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>