informasi seputar kuliah DKV: pengertian html

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 :

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.

3. Kegunaan JavaScript

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 .

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.

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.

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.

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>