Pengertian HTML
HTML adalah singkatan dari HyperText Markup Language
yaitu bahasa pemrograman standar yang digunakan untuk membuat sebuah halaman
web, yang kemudian dapat diakses untuk menampilkan berbagai informasi di dalam
sebuah penjelajah web Internet (Browser). HTML apat juga digunakan sebagai link
antara file-file dalam situs atau dalam komputer dengan menggunakan localhost,
atau link yang menghubungkan anatar situs dalam dunia Internet. HTML
sendiri bukan tergolong pada suatu bahasa pemrograman karena sifatnya yang hanya
memberikan tanda (marking up) pada suatu naskah teks dan bukan sebagai program.
Berdasarkan kata-kata
penyusunnya HTML dapat diartikan lebih dalam lagi menjadi :
Hypertext
Link
hypertext adalah kata atau frase yang dapat menunjukkan hubungan suatu naskah
dokumen dengan naskah-naskah lainnya. Jika kita klik pada kata atau frase untuk
mengikuti link ini maka web browser akan memindahkan tampilan pada bagian lain
dari naskah atau dokumen yang kita tuju.
Markup
Pada
pengertiannya di sini markup menunjukkan bahwa pada file HTML berisi suatu
intruksi tertentu yang dapat memberikan suatu format pada dokumen yang akan
ditampilkan pada World Wide Web.
Language
Meski
HTML sendiri bukan merupakan bahasa pemrograman, HTML merupakan kumpulan dari
beberapa instruksi yang dapat digunakan untuk mengubah-ubah format suatu naskah
atau dokumen.
Supaya dapat menghasilkan tampilan wujud yang
terintegerasi Pemformatan hiperteks sederhana ditulis dalam berkas format ASCII
sehingga menjadi halaman web dengan perintah-perintah HTML. HTML merupakan
sebuah bahasa yang sebelumnya banyak dipakai di dunia percetakan dan penerbitan
yang disebut Standard Generalized Markup Language (SGML)
Sekarang ini HTML merupakan standar Internet yang
dikendalikan dan didefisinikan pemakaiannya oleh World Wide Web Consortium
(W3C). Pada tahun 1989, HTML dibuat oleh kolaborasi Berners-lee Robert dengan
Caillau TIM pada saat mereka bekerja di CERN (CERN merupakan lembaga penelitian
fisika energi tinggi di Jenewa).
Fungsi HTML
(HyperText
Markup Language) :
HTML (HyperText
Markup Language) adalah suatu yang menggunakan tanda-tanda tertentu (tag) untuk
menyatakan kode-kode yang harus ditafsirkan oleh browser agar halaman tersebut
dapat ditampilkan secara benar. Secara umum, fungsi HTML adalah
untuk mengelola serangkaian data dan informasi sehingga suatu dokumen dapat
diakses dan ditampilkan di Internet melalui layanan web.
Fungsi HTML yang lebih spesifik
yaitu :
1.
Membuat halaman web.
2. Menampilkan
berbagai iinformasi di dalam sebuah browser Internet.
3.
Membuat link menuju halaman web lain dengan kode
tertentu (hypertext).
Secara garis besar terdapat 4 jenis
elemen dari HTML yaitu :
1. Structural.
Adalah suatu
tanda atau kode program yang menentukan level atau tingkatan dari sebuah
tulisan (contoh, <h1>Internet</h1> akan memerintahkan browser untuk
menampilkan "Internet"
sebagai tulisan tebal besar yang menunjukkan sebagai Heading 1
2. Presentational.
Adalah suatu
tanda atau kode yang menentukan tampilan dari sebuah tulisan, tidak peduli
dengan level dari tulisan tersebut. (contoh : <b>Cetak
Tebal</b> maka pada browser akan menampilkan "Cetak Tebal". Namun kode-kode
presentational saat ini sudah mulai digantikan dengan penggunaan CSS (Cascading
Style Sheets) dan tidak direkomendasikan lagi untuk mengatur tampilan
tulisan.
3. HyperText.
Suatu tanda
atau kode program HTML yang menunjukkan hubungan (link) ke bagian lain dari
dokumen tersebut atau link ke dokumen lain.
contoh :
<a
href="http://dejavanta.blogspot.com/">Download software</a>
maka pada browser
akan menampilkan "Download software" sebagai sebuah hyperlink yang
menuju ke URL http://dejavanta.blogspot.com/
4. Elemen
Widget yang
membuat objek-objek lain seperti tombol <button>, list <li>, dan
garis horizontal <hr>, Konsep hypertext pada HTML memungkinkan kita untuk
membuat link pada suatu kelompok kata atau frase untuk menuju ke bagian manapun
dalam World Wide Web (WWW).
Ada tiga
macam link yang dapat kita gunakan :
- Link
menuju bagian lain dari page
- Link
menuju page lain dalam satu web site
- Link menuju
resource atau web site yang berbeda.
Selain markup presentational , markup yang lain tidak
menentukan bagaimana tampilan dari sebuah tulisan. Namun untuk saat ini,
penggunaan tag HTML untuk menentukan tampilan telah dianjurkan untuk mulai
ditinggalkan, dan sebagai gantinya digunakan Cascading Style Sheets atau
biasa disingkat CSS.
Contoh
dokumen HTML sederhana adalah seperti di bawah ini :
<!DOCTYPE
html>
<html>
<head>
<title>'''Hello World''</title>
</head>
<body>
<p>Welcome to my site!</p>
</body>
</html>
Untuk mencobanya dengan media yang paling sederhana,
anda bisa mengetikkannya pada media NOTE PAD yang ada di Windows, kemudian file
anda simpan dengan format dokumen html. (contoh : test.html).
Maka ketika file test.html tersebut anda buka, maka file akan langsung mengarah
pada web browser untuk membaca / menampilkan hasil dari perintah dokumen HTML
tersebut.
HEAD
Bagian header dari document HTML di apit oleh tag
<HEAD></HEAD> di dalam bagian ini biasanya dimuat tag TITLE yang
menampilkan judul dari halaman pada titlenya browser. Selain itu Bookmark juga
megunakan tag TITLE untuk memberi mark suatu web site. Browser menyimpan
“title” sebagai bookmark dan juga untuk keperluan pencarian (searching)
biasanya title di gunakan sebagai keyword. Header juga memuat tag META yang
biasanya di gunakan untuk menentukan informasi tertentu mengenai document HTML,
anda bisa menentukan author name, keywords, dan lainnya pada tag META.
Contoh :
<meta
name="author" content="dejavanta">
Elemen Body
Bagian BODY, yang dinyatakan dengan tag
<BODY>isi content</BODY>, merupakan tubuh atau isi dari dokumen
HTML dimana anda meletakan informasi yang akan ditampilkan pada browser.
Tag
HTML tidak membedakan penggunaan huruf besar ataupun
huruf kecil dari suatu elemen. Suatu elemen HTML terdiri dari tag-tag beserta
teks yang ada dalam tag-tag tersebut. Tag ini dinyatakan dengan tanda lebih
kecil (<) dan tanda lebih besar (>).
Tag biasanya
merupakan suatu pasangan yang disebut dengan :
1. Tag awal,
yang dinyatakan dalam bentuk <nama tag>
2. Tag
akhir, yang dinyatakan dalam bentuk </nama tag>
Format : <nama
tag> teks yang ditampilkan </nama tag>
Contoh : Untuk
menampilkan teks dalam format teks miring. misalnya untuk tampilan : Teks
ini terlihat miring di browser anda. maka perintah HTML nya adalah :
<i>Teks
ini terlihat miring di browser anda</i>
Atribute
Tag awal bisa memiliki beberapa buah atribut yang
menyatakan karakteristik dari suatu tag tersebut.
Misalnya
digunakan untuk membuat teks dengan pengaturan rata kiri pada suatu paragraf.
Maka tag yang digunakan adalah :
<div style="text-align: left">
dan atribut yang menyertainya adalah ALIGN dengan nilai left. Nilai atribut
ALIGN hanya bisa berupa center, left, right atau justify.
Pengertian CSS
CSS
adalah singkatan dari Cascading Style Sheets. Berisi rangkaian instruksi yang
menentukan bagiamana suatu text akan tertampil di halaman web. Perancangan
desain text dapat dilakukan dengan mendefinisikan fonts (huruf) , colors
(warna), margins (ukuran), latar belakang (background), ukuran font (font
sizes) dan lain-lain. Elemen-elemen seperti colors (warna) , fonts (huruf),
sizes (ukuran) dan spacing (jarak) disebut juga “styles”. Cascading Style
Sheets juga bisa berarti meletakkan styles yang berbeda pada layers (lapisan)
yang berbeda. CSS terdiri dari style sheet yang memberitahukan browser
bagaimana suatu dokumen akan disajikan. Fitur-fitur baru pada halaman web
lama dapat ditambahkan dengan bantuan style sheet. Saat menggunakan CSS,
Anda tidak perlu menulis font, color atau size pada setiap paragraf, atau pada
setiap dokumen. Setelah Anda membuat sebuah style sheet, Anda dapat menyimpan
kode tersebut sekali saja dan dapat kembali menggunakannya bila diperlukan.
CSS
dibuat untuk memisahkan konten utama dengan tampilan dokumen yang meliputi
layout, warna dan font. Pemisahan ini dapat meningkatkann daya akses konten
pada web, menyediakan lebih banyak fleksibilitas dan kontrol dalam spesifikasi
darisebuah karakteristik dari sebuah tampilan, memungkinkan untuk membagi
halaman untuk sebuah formatting dan mengurangi kerumitan dalam penulisan kode
dan struktur dari konten, contohnya teknik tableless pada desain web.
CSS
juga memungkinkan sebuah halaman untuk ditampilkan dalam berbagai style dengan
menggunakan metode pembawaan yang berbeda pula, seperti on-screen, in-print,
by voice, dan lain-lain. Sementara itu, pemilik konten web bisa
menentukan link yang menghubungkan konten dengan file CSS.
Tujuan
utama CSS diciptakan untuk membedakan konten dari dokumen dan dari tampilan
dokumen, dengan itu, pembuatan ataupun pemrograman ulang web akan lebih mudah
dilakukan. Hal yang termasuk dalam desain web diantaranya adalah warna, ukura
dan formatting. Dengan adanya CSS, konten dan desain web akan mudah dibedakan, jadi
memungkinkan untuk melakukan pengulangan pada tampilan-tampilan tertentu dalam
suatu web, sehingga akan memudahkan dalam membuat halaman web yang banyak, yang
pada akhirnya dapat memangkas waktu pembuatan web.
Fungsi CSS
Fungsi
utama css adalah merancang, merubah, mendisain, membentuk halaman wesite(blog
juga website). dan isi dari halaman website adalah tag-tag html, logikanya css
itu dapat merubah tag-tag html(yang sederhana) sehingga menjadi lebih
fungsional dan menarik. Dengan adanya CSS maka kita dapat dengan mudah merubah
tampilan atau attribut sebuah tag HTML. Seperti merubah warna background &
teks, paragraph, ukuran huruf, templates website dan sebagainya.
Pertama,
penulisan CSS secara Inline style sheet atau langsung kedalam tag HTML.
<html>
<head>
<title>Inline Style Sheet</title>
</head>
<body bgcolor="FFFFFF">
<p id="ex_1">Contoh paragraph tanpa menggunakan CSS</p>
<p id="ex_2" style="font-size:14pt;">Contoh
paragraph menggunakan CSS, besar huruf 14 pt</p>
<p id="ex_3" style="font-size:18pt; color:blue;">Contoh
paragraph menggunakan CSS, besar huruf 18 pt dan berwarna biru</p>
</body>
</html>
Kata yang berwarna merah adalah attribute style yang
berfungsi merubah ukuran dan warna tulisan. Untuk mencobanya Anda bisa lakukan copy
& paste kode program di atas atau dibawah ini. caranya: buka
notepad -->paste kode program --> simpan --> "index.html".
Dapat dijadikan catatan, ketika kita merubah attribut
style sebuah tag HTML maka tidak akan merubah attribut tag HTML yang lain
dikarenakan penulisan style sheet ini bersifat independent atau berdiri
sendiri.
Kedua, penulisan CSS secara embedded style sheet
CSS
didefinisikan diantara tag pembuka <style>...</style>
diletakkan di atas tag <body>
<html>
<head>
<title>Embedded Style Sheet</title>
</head>
<style>
body{background:#0000FF; color:#FFFF00; margin-left:0.5in}
H1{font-size:16pt; color:yellow}
P{font-size:12pt; font-family:arial; text-indent:0.5in}
</style>
<body>
<H1 id="ex_1">Header Berwarna Kuning</H1>
<P id="ex_2">Paragraph
1 mempunyai format ukuran font 12pt, tipe font Arial dan berindentasi 0.5 in.
Semua dokumen mempunyai margin kiri sebesar 0.5 inch dan berwarna #0000FF ,
didefinisikan pada attribut tag <body>...</body> </P>
</body>
</html>
Kata yang diberi warna merah adalah pendefinisan CSS
secara embedded style sheet, jika kita melakukan perubahan attribut tag HTML
maka tag HTML yang ada di dokumen akan berubah semua. misalnya: kita rubah
attribut color:yellow pada tag H1 dengan color:black
maka semua tag H1 di dalam dokumen akan mengalami perubahan.
Ketiga, penulisan CSS secara linked style sheet
Cara ketiga ini sebenarnya hampir mirip dengan cara
kedua embedded style sheet hanya saja CSS tidak ditulis dalam satu dokumen
tetapi ditulis secara terpisah dengan dokumen HTML dan mempunyai extensi file
.css. mungkin sebagian mungkin ada yang bertanya kenapa CSS harus ditulis
secara terpisah dengan HTML? ini adalah jawaban yang paling sederhana yaitu
agar proses editing terhadap style dokumen dapat dilakukan secara mudah dan
terpusat.
Untuk memanggil file css yang letaknya terpisah dengan
file HTML dapat kita gunakan format linked berikut ini. letakkan format kode <link
rel=stylesheet href="letak file css" type="text/css">
diantara tag <head>...</head>.
1.Sejarah JavaScript
JavaScript pertama kali diperkenalkan oleh Netscape
pada tahun 1995. Pada awalnya bahasa yang sekarang disebut JavaScript ini
dulunya dinamai “LiveScript” yang berfungsi sebagai bahasa
sederhana untuk browser Netscape Navigator 2 yang sangat populer pada saat itu.
Kemudian sejalan dengan sedang giatnya kerjasama antara Netscape dan Sun
(pengembang bahasa pemrograman “Java”) pada masa itu, maka Netscape memberikan
nama “JavaScript” kepada bahasa tersebut pada tanggal 4 desember 1995.
Pada saat yang bersamaan Microsoft sendiri mencoba
untuk mengadaptasikan teknologi ini yang mereka sebut sebagai “Jscript” di
browser milik mereka yaitu Internet Explorer 3. JavaScript sendiri merupakan
modifikasi dari bahasa pemrograman C++ dengan pola penulisan yang lebih
sederhana dari bahasa pemrograman C++.
2. Pengertian JavaScript
JavaScript adalah bahasa pemrograman berbasis
prototipe yang berjalan disisi klien. Jika kita berbicara dalam konteks web,
sederhananya, kita dapat memahami JavaScript sebagai bahasa pemrograman yang
berjalan khusus untuk dibrowser atau halaman web agar halaman web menjadi lebih
hidup. Kalau dilihat dari suku katanya terdiri dari dua suku kata, yaitu Java dan Script. Java adalah Bahasa pemrograman
berorientasi objek, sedangkan Script adalah serangkaian instruksi program.
Javascript merupakan bahasa scripting yang
digunakan untuk membuat aplikasi web, sifatnya client-side
sehingga dapat diolah langsung di browser tanpa harus terhubung keserver
terlebih dahulu. Walaupun namanya menggunakan kata “Java”, Javascript
tidak berhubungan dengan bahasa pemprograman java, meskipun keduanya memiliki
kemiripan dalam hal syntax yang meniru bahasa C.
Nama Asli dari bahasa ini adalah LiveScript
yang kemudian diganti karena adanya perjanjian kerjasama antara Netscape
dan Sun dengan balasan Netscape memperbolehkan untuk membundel browse
mereka dengan menggunakan Java dan Sun. “JavaScript” merupakan merk
terdaftar milik Sun Microsystem, Inc dan dilisensikan oleh Sun untuk Netscape
Comunications dan entitas lainnya seperti Mozilla Foundation.
Kegunaan utama JavaScript adalah untuk menuliskan fungsi yang
disisipkan kedalam HTML baik secara langsung disisipkan maupun diletakan ke
file teks dan di link dari dokumen HTML.
Secara fungsional, JavaScript digunakan untuk
menyediakan akses script pada objek yang dibenamkan (embedded). Contoh
sederhana dari penggunaan JavaScript adalah membuka halaman pop up, fungsi
validasi pada form sebelum data dikirimkan ke server, merubah image kursor
ketika melewati objek tertentu, dan lain lain.
1. Anti Klik Kanan
Kode javascript ini untuk
menonaktifkan klik kanan di blog anda, jadi pengunjung tidak bisa klik
kanan dan melihat source kode blog anda. Cari kode <body> di
template blog anda lalu ganti dengan kode dibawah ini .
<body
oncontextmenu=”return false;”>
2. Kotak Pesan Peringatan ( Alert Box )
Pesan
Pembuka
Kode ini
menampilkan pesan saat pengunjung pertama kali membuka atau mengunjungi blog
anda. Cari kode </head> di template blog, lalu copy
paste kode di bawah ini tepat di bawahnya. Lalu edit kalimat yang di highlight sesuai
keinginan anda.
<script
type=”text/javascript”>
alert(“SELAMAT DATANG DI BLOG GAK JELAS INI”);
</script>
Pesan
Penutup
Kode ini
muncul apabila pengunjung akan meninggalkan atau menutup tab blog anda. Cara
pasangnya sama dengan pesan pembuka, cari kode </head> lalu
copy paste kode di bawah ini tepat di bawahnya. Lalu edit kalimat yang di highlight sesuai
keinginan anda.
<script
type=”text/javascript”>
window.onbeforeunload=function(){
return confirm(“Yakin Ingin Meninggalkan Blog Ini?? Masih Banyak Yang Menarik
Loh Untuk Di Baca!!”);
}
</script>
3.Onmouseover Sound
Kode ini
memberikan backsound musik apabila pengunjung mengarahkan atau mengklik
mousenya ke text atau gambar. Caranya tinggal copy paste kode di bawah ini ke
mode HTML edit post blog anda.
<script language=”javascript”
type=”text/javascript”>
function playSound(soundfile) {
document.getElementById(“SCsound”).innerHTML=
“<embed src=\””+soundfile+”\” hidden=\”true\” autostart=\”true\”
loop=\”false\” />”;
}
</script>
<span
id=”SCsound”></span>
Lalu copy dan paste kode di
bawah ini untuk memunculkan musik/sound.
<a
href=”#” onmouseover=”playSound(‘URL-FILE-MUSIK/SOUND’);”>
Mouseover DISINI Buat Dengerin Musik</a>
Atau
<a
href=”#” onclick=”playSound(‘URL-FILE-MUSIK/SOUND’);”>Klik DISINI Buat
Dengerin Musik</a>
