Anda di halaman 1dari 10

A. Apa itu website?

Pengertian Website adalah suatu dokumen berupa kumpulan halaman web yang saling terhubung dan
isinya terdiri dariberbagai informasi berbentuk teks, suara, gambar, video, dan lainnya, dimana semua
data tersebut disimpan pada server hosting.
Untuk membuka sebuah website maka pengguna harus memiliki perangkat (komputer, smartphone) yang
terkoneksi dengan internet atau intranet. Halaman website atau web umumnya berbentuk dokumen
dalam format Hyper Text Markup Language (HTML), yang dapat diakses melalui HTTP atau HTTPS, suatu
protokol yang menyampaikan berbagai informasi dari server website untuk ditampilkan kepada para user
atau pemakai melalui web browser.
Sebuah website memiliki alamat URL yang unik dan spesifik yang disebut dengan domain. Misalnya
domain Maxmanroe.com, Google.com, Facebook.com, dan lain-lain. Website dapat diakses dengan
menggunakan browser dan koneksi internet. Namun, ada beberapa website yang bisa diakses
menggunakan jaringan lokal (LAN).

B. Jenis-Jenis Website Secara Umum

Sekarang ini ada banyak sekali jenis website yang bisa kita temukan di internet. Namun, semua website
tersebut dapat kita klasifikasikan ke dalam tiga jenis, yaitu:

1. Website Statis
Pengertian website statis adalah suatu halaman website yang tampilannya tidak berubah-ubah (statis).
Jika si pemilik website ingin mengubah tampilan maka harus dilakukan secara manual, yaitu dengan
mengedit kode-kode struktur websitenya.
Jenis website statis umumnya memiliki setidaknya 5 halaman utama untuk menjelaskan informasi
mengenai website tersebut. Selain itu, website statis umumnya tidak memungkinkan terjadinya interaksi
langsung antara pemilik/ pengelola website dan pengunjung di website tersebut.
Contoh website statis:
 Website perusahaan (company profile)
 Search Engine (Google, Bing)
2. Website Dinamis
Website dinamis adalah jenis website yang dirancang khusus untuk dapat menampilkan update konten
sesering mungkin. Website dinamis dapat disesuaikan dengan kebutuhan, baik dari sisi tampilannya
maupun dari sisi fiturnya.
Website dinamis umumnya dirancang dengan konsep visual dan kemampuan interaksi tinggi dengan
penggunanya. Beberapa fitur yang bisa ditambahkan pada website dinamis yaitu, kolom komentar, fitur
live chatting, formulir pendaftaran, dan lain-lain.
Beberapa contoh website dinamis:
 Blog/ website pribadi
 Situs E-commerce
 Website Portal
 Situs Berita
 Katalog online
 Dan lain-lain
3. Website Interaktif
Pengertian website interaktif adalah jenis website yang digunakan untuk tujuan berinteraksi dengan orang
lain secara online. Umumnya pengguna website interaktif adalah komunitas atau pengguna internet aktif.
Beberapa contoh website interaktif:
 Situs Media sosial
 Situs forum online
 Blog

C. Manfaat Website Secara Umum


Manfaat website yang paling utama adalah penyebaran informasi yang lebih cepat kepada masyarakat
luas. Internet dan website berperang penting dalam proses pertukaran informasi, baik secara lokal
maupun internasional.
Berikut ini adalah beberapa manfaat website secara umum:
 Sebagai sarana informasi yang lebih mudah dan cepat untuk didapatkan
 Memberikan kemudahan dalam kegiatan pemasaran dan promosi bisnis karena dapat menjangkau
banyak orang dalam waktu yang bersamaan
 Website menjadi sarana berkomunikasi bagi manusia di berbagai belahan dunia
 Sebagai sarana edukasi bagi masyarakat
 Sebagai saran hiburan yang murah

D. Unsur-Unsur Website

Di dalam sebuah website terdapat dua komponen penting, yaitu Domain dan Hosting. Tanpa komponen
ini maka website tidak dapat diakses.

1. Nama Domain
Nama domain adalah nama unik sebuah website untuk mengidentifikasi nama server komputer di
internet. Setiap website pasti memiliki domain unik, misalnya Google.com, Maxmanroe.com, atau
Facebook.com.
Domain dapat disewa dari perusahaan pengelola domain internet (registrar). Beberapa perusahaan
registrar domain diantaranya:
 Godaddy.com
 Namecheap.com
 Name.com
 Masterweb.com
 Rumahweb.com
 Dan lain-lain

2. Web Hosting
Web hosting adalah tempat atau lokasi penyimpanan database (teks, suara, gambar, video, dan lain-lain)
dari sebuah website. Umumnya pemilik website menyewa jasa layanan internet yang menyediakan
sumber daya server-server untuk menempatkan informasi di internet berupa HTTP, FTP, EMAIL, atau DNS.
Beberapa perusahaan jasa web hosting diantaranya:
 Hawkhost.com
 Rumahweb.com
 Niagahoster.co.id
 Hostinger.co.id
 Dan lain-lain

3. Konten Website
Konten website merupakan komponen yang sangat penting dalam keberadaan website di internet. Tanpa
adanya konten website tentunya tidak ada yang ditawarkan kepada pengunjung.
Konten website umumnya diciptakan atau dibuat oleh si pemilik website, misalnya website berbentuk
blog yang isinya adalah artikel atau gambar sesuai dengan topik website tersebut.
Namun ada juga website yang kontennya diciptakan atau dibuat oleh para penggunanya, baik itu konten
berbentuk teks, gambar, atau video. Beberapa contoh website yang kontennya dibuat oleh penggunanya,
 Media Sosial (YouTube.com, Twitter.com, Facebook.com, dan lain-lain)
 Situs forum (Bersosial.com, Ads.id, Forum.idws.id, dan lain-lain).
Pengertian Tag HTML

Pada saat kita membuat sebuah bahasa pemrograman agar dapat tampil di sebuah web browser, kita harus
“memberitahukan” web browser ini dengan bahasa yang bisa dipahami. Contohnya saja, ketika ingin
menampilkan sebuah teks harus dibuat dalam ukuran yang besar hingga kecil atau mengubah hurufnya sesuai
dengan perintah yang diberikan. Nah, istilah yang pas untuk menjabarkan perintah tersebut kata sebut dengan
tag.

Pada dasarnya tag pada sebuah HTML ditulis secara berpasang-pasangan. Pasangan tag tersebut dinamakan
tag pembuka dan juga tag penutup. Salah satu ciri khas dari tag ini adalah terdapat kurung siku “<” dan “>”.
Contoh yang paling mudah adalah sebagai berikut.

<p> Heading 1</p>

Dari contoh diatas bisa kita jelaskan bahwa diatas adalah contoh untuk memunculkan sebuah teks “Heading 1”.
Simbol “<p>” menunjukan tag pembuka yang objeknya adalah “p”. Kode “p” di sini merupakan sebuah tag
untuk sebuah paragraf. Sedangkan tag terakhir, yakni “</p> ini adalah pasangan dari tag pembuka atau kita
sebut sebagai tag penutup.

Tag penutup ini memiliki kesamaan dengan tag pembuka hanya saja dibelakang objek ditambahkan dengan
garis miring “/”. Jika tag penutup ini tidak ditulis, maka web browser tidak dapat membacanya dan
menganggap kita belum selesai memberi perintah. Oleh sebab itu, hal ini sangatlah penting. Jika kita uraikan
dengan bahasa kita, maka maksud dari tag ini adalah web browser dapat menunjukan tulisan Heading pada
halaman pertama.

1. Tag <!DOCTYPE html>


Tag <! DOCTYPE html> adalah perintah dasar HTML yang di gunakan untuk menginformasikan web
browserbahwa dokumen yang di berikan adalah dokumen HTML, dengan begitu web browser dapat
mengetahui bagaimana dokumen harus di interpretasikan, dengan menunjukkan versi atau standar HTML
(atau bahasa markup lainnya) yang di gunakan. Meskipun sebenarnya tag <! DOCTYPE html> bukan elemen
HTML itu sendiri, tag <! DOCTYPE html> harus di sertakan pada setiap dokumen HTML agar sesuai dengan
standar HTML.
2. Tag <html> … </html>
Tag <html> adalah perintah dasar HTML yang di gunakan sebagai wadah untuk semua elemen dari
keseluruhan dokumen HTML, semua elemen HTML harus ada dalam tag <html> … </html> (kecuali
DOCTYPE, itulah yang dimaksud dengan ‘tag DOCTYPE bukan elemen HTML’). Hal tersebut merupakan
aturan dalam dasar-dasar HTML (ISO/IEC 15445 adalah standar yang di tetapkan untuk HTML).
3. Tag <head> … </head>
Tag <head> adalah perintah dasar HTML yang berisi informasi tentang dokumen HTML yang digunakan
oleh web browser dan web crawlers namun sebagian besar tidak ditampilkan ke pengunjung situs web.
Tujuan dari penggunaan tag <head> adalah memberikan informasi tentang dokumen itu sendiri. Seperti
favicon, judul halaman (tag ‘title’), meta tags, style (CSS), dan javascript.
4. Tag <title> … </title>
Tag <title> adalah perintah dasar HTML yang di butuhkan untuk menetapkan judul dokumen HTML. Judul
halaman tidak di tampilkan di halaman web, namun di gunakan sebagai nama halaman oleh search
engine dan di tampilkan pada tab web browser juga di gunakan sebagai nama halaman dari halaman web
yang di bookmark.
5. Tag <body> … </body>
Tag <body> adalah perintah dasar HTML yang berisi keseluruhan isi halaman web. Ini harus menjadi elemen
kedua di dalam elemen induk <html>, hanya mengikuti elemen <head>. Tag <body> merupakan elemen
HTML yang paling penting. Isi elemen <body> adalah apa yang di tampilkan kepada pengguna yang
mengunjungi halaman web melihat dokumen web.
6. Tag <p> … </p>
Tag <p> adalah perintah dasar HTML yang di gunakan untuk mengidentifikasi blok teks. Tag <p>
mendefinisikan sebuah paragraf teks (belupa blok). Akhir paragraf di tandai dengan tag </p>. Secara teknis
tag </p> bersifat opsional, namun ada baiknya menyertakan tag penutup untuk memastikan dokumen
HTML tersebut valid. Secara default, sebagian besar browser terbaik saat ini menempatkan jarak dan baris
kosong di antara paragraf.
Mari kita satukan ke-enam pasang tag di atas menjadi satu kesatuan membentuk struktur dasar halaman
HTML

<!DOCTYPE html>

<html>

<head>

<title>DosenIT.com</title>

</head>

<body>

<p>Ilmu komputer & teknologi dari Dosen IT</p>

</body>

</html>

7. Tag <b> … </b> dan tag <strong> … </strong>


Tag <b> adalah perintah dasar HTML yang di gunakan untuk menarik perhatian pada teks dengan
menampilkan huruf tebal secara semantik (bagian struktur bahasa yang berhubungan dengan makna
ungkapan), pada HTML5 ada tag lain yang serupa dengan tag <b> (untuk menampilkan teks tebal) adalah
tag <strong>, tag <strong> di gunakan untuk mengidentifikasi teks yang lebih penting dari pada teks di
sekitarnya. Secara default, semua web browser menampilkan <strong> teks dalam huruf tebal.
8. Tag <i> … </i> dan <em> … </em>
Tag <i> adalah perintah dasar HTML yang di gunakan untuk membedakan kata dari teks sekitarnya dengan
menata teks yang di tandai dengan huruf miring tanpa menyiratkan penekanan tambahan pada kata-kata
yang dicetak miring, artinya teks di cetak miring semata-mata hanya masalah style saja, untuk teks dengan
makna yang tersirat secara tekstual HTML5 menyediakan tag <em> untuk kebutuhan tersebut.
9. Tag <u> … </u>
Tag <u> adalah perintah dasar HTML yang di gunakan untuk mengidentifikasi teks yang harus di
garisbawahi, namun teks tersebut tidak berartikulasi walaupun menjadi berbeda dari teks di sekitarnya.
Teks link dengan tag <a> juga secara default memiliki style garisbawah, namun teks link dengan tag
<a> berartikulasi karena memiliki makna dan berbeda dengan teks lain di sekitarnya.
10. Tag <a> … </a>
Tag <a>, atau tag anchor, adalah perintah dasar HTML yang di gunakan untuk membuat hyperlink ke
halaman web lain atau lokasi lain dalam halaman web yang sama. Hyperlink yang di buat oleh
elemen anchor dapat di terapkan pada teks, gambar, atau konten HTML lainnya yang berada di antara tag
<a> dan </a>.
Mari kita satukan tag di atas menjadi satu kesatuan membentuk halaman web dengan beragam format
teks.

<!DOCTYPE html>

<html>

<head>
<title>DosenIT.com</title>

</head>

<body>

<p>Ilmu komputer & teknologi dari Dosen IT</p>

<b>Teks tebal dengan tag BOLD</b>

<strong>Teks tebal dengan tag STRONG</strong>

<i>Teks miring dengan tag ITALIC</i>

<em>Teks miring dengan tag EMPASIZE</em>

<u>Teks bergarisbawah dengan tag UNDERLINE</u>

<a href="http://dosenit.com">Teks link dengan tag ANCHOR</a>

</body>

</html>

11. Tag <ul> … </ul>


Tag <ul> adalah perintah dasar HTML yang di gunakan untuk mendefinisikan list item yang tidak berurutan
(unordered list, ul). Tag <ul> menyajikan list item di dalamnya tanpa urutan numerik.
12. Tag <ol> … </ol>
Tag <ol> adalah perintah dasar HTML yang di gunakan untuk mendefinisikan list item yang berurutan
(ordered list, ul). Tag <ol> menyajikan list item di dalamnya dengan urutan numerik (1, I, i) atau alfabet (A,
a).
13. Tag <li> … </li>
Tag <li> adalah perintah dasar HTML yang di gunakan untuk mendefinisikan list item yang merupakan
bagian dari tag <ul> atau tag <ol>. Tampilan list item tergantung pada jenis list yang di gunakan, misalnya
Anda menggunakan tag <ol>, maka list item akan menampilkan daftar terurut dengan item angka.
Copy kode di bawah ini kemudian paste diantara tag <body> dan </body> untuk melihat perbedaanya.

<ul>

<li>Software</li>

<li>Hardware</li>

<li>Brainware</li>

</ul>

<ul type='circle'>

<li>Software</li>

<li>Hardware</li>
<li>Brainware</li>

</ul>

<ul type='disc'>

<li>Software</li>

<li>Hardware</li>

<li>Brainware</li>

</ul>

<ol>

<li>Software</li>

<li>Hardware</li>

<li>Brainware</li>

</ol>

<ol type='A'>

<li>Software</li>

<li>Hardware</li>

<li>Brainware</li>

</ol>

<ol type='a'>

<li>Software</li>

<li>Hardware</li>

<li>Brainware</li>

</ol>

<ol type='I'>

<li>Software</li>

<li>Hardware</li>

<li>Brainware</li>
</ol>

<ol type='i'>

<li>Software</li>

<li>Hardware</li>

<li>Brainware</li>

</ol>

14. Tag <table> … </table>


Seperti namanya, tag <table> adalah perintah dasar HTML yang di gunakan untuk mendefinisikan tabel,
sebuah tabel setidaknya terdiri dari satu kolom dan satu baris, dalam HTML sebuah baris di definisikan
dengan tag <tr> (akan kita bahas kemudian) sedangkan kolom di definisikan dengan tag <td> atau <th>
(juga akan kita bahas kemudian).

15. Tag <tr> … </tr>


Tag <tr> adalah perintah dasar HTML yang di gunakan untuk mendefinisikan baris pada tabel (table row),
tag <tr> harus di simpan tepat di dalam tag <table>, dalam satu baris (satu pasang tag <tr>) bisa terdapat
satu atau lebih tag <td> atau tag <th>.

16. Tag <th> … </th>


Tag <th> adalah perintah dasar HTML yang di gunakan untuk mendefinisikan heading pada tabel (table
heading), tag <th> harus di simpan tepat di dalam tag <tr>, tag <th> sebenarnya lebih cocok di analogikan
sebagai cell pertama pada microsoft office excel. Cell pertama biasanya di definisikan sebagai heading atau
judul kolom.

17. Tag <td> … </td>


Tag <td> adalah perintah dasar HTML yang di gunakan untuk mendefinisikan tabel data, tag <td> harus di
simpan tepat di dalam tag <tr>, tag <td> lebih mirip dengan cell pada Microsoft Office Excel, kumpulan cell
yang linier (horizontal) membentuk suatu kolom.

Copy kode di bawah ini kemudian paste diantara tag <body> dan </body> untuk membentuk struktur tabel.

<table border='1'>

<tr>

<th>No.<th><th>Nama Barang<th><th>Qty</th>

</tr>

<tr>

<td>1</td><td>Mouse</td><td>10</td>

</tr>

<tr>
<td>2</td><td>Keyboard</td><td>15</td>

</tr>

</table>

18. Tag <img/>


Tag <img> adalah perintah dasar HTML yang di gunakan untuk menampilkan gambar statis pada halaman
web. Semua tag <img> harus memiliki atribut “src” yang di tentukan. Atribut “src” mendefinisikan gambar
yang akan di tampilkan. Biasanya, “src” adalah URL, namun representasi data gambar juga dapat di gunakan
dalam beberapa kasus, misalnya apabila gambar berada satu path atau child-path dari halaman web yang
menampilkannya.

19. Tag <audio> … </audio>


Tag <audio> adalah perintah dasar HTML yang di gunakan untuk menambahkan media audio ke dokumen
HTML yang akan di mainkan oleh dukungan untuk pemutaran audio yang terpasang pada browser dan
bukan plugin browser.

20. Tag <video> … </video>


Tag <video> adalah perintah dasar HTML yang di gunakan untuk menambahkan video ke halaman web,
video akan di putar oleh dukungan pemutaran video native (bukan plugin browser), tag <video>
membutuhkan URL video ke elemen tersebut dengan menggunakan atribut src elemen <video> antara tag
pembuka dan penutup <video>.

Copy kode di bawah ini kemudian paste diantara tag <body> dan </body> untuk menyematkan media image,
audio, dan video.

<img src="https://dosenit.com/wp-content/uploads/2015/07/dosenitdankomputer.jpg">

<audio controls id="audio-example">

<source src="http://mp3download.planetlagu.site/save/01%20Jaz%20Kasmaran.ogg">

<source src="http://mp3download.planetlagu.site/save/01%20Jaz%20Kasmaran.mp3">

</audio>

<video width="640" height="480"


src="https://archive.org/download/Popeye_forPresident/Popeye_forPresident_512kb.mp4" controls></video>

21. Tag <form>


Tag <form> adalah perintah dasar HTML yang di gunakan untuk membuat formulir pada halaman web.
Elemen <form> sebenarnya tidak membuat kolom formulir, namun di gunakan sebagai wadah induk untuk
menampung elemen formulir seperti elemen <input> dan <textarea>, akan kita bahas kemudian.

22. Tag <input>


Tag <input> adalah perintah dasar HTML yang di gunakan untuk membuat kolom formulir yang menerima
masukan dari pengguna. Bentuk elemen <input> dapat di sajikan dengan berbagai cara, termasuk teks box,
button, check box, menu drop-down, dan banyak lagi, dengan menetapkan atribut jenis elemen masukan ke
nilai yang sesuai.

23. Tag <textarea>


Tag <textarea> adalah perintah dasar HTML yang di gunakan untuk membuat area input teks dengan
panjang yang tak terbatas. Secara default, teks dalam <textarea> di tampilkan dalam font monospace atau
fixed-width, tag <textarea> paling sering di gunakan dalam <form>.
24. Tag <button>
Tag <button> adalah perintah dasar HTML yang di gunakan untuk membuat tombol HTML. Teks yang
muncul antara tag pembuka dan penutup akan muncul sebagai teks pada tombol. Tidak ada tindakan yang
terjadi secara default saat tombol diklik. Tindakan harus ditambahkan ke tombol menggunakan JavaScript
atau dengan menghubungkan tombol dengan formulir.

25. Tag <select>


Tag <select>, adalah perintah dasar HTML yang di gunakan bersama dengan satu atau lebih tag <option>
(akan kita bahas kemudian), kombinasi kedua tag tersebut digunakan untuk membuat daftar opsi drop-
down untuk formulir pada halaman web. Tag <select> membuat daftar dan setiap elemen <option> di
tampilkan sebagai pilihan yang tersedia dalam daftar tersebut.

26. Tag <option>


Tag <option> adalah perintah dasar HTML yang di gunakan bersamaan dengan elemen <select> untuk
membuat menu drop-down dalam formulir halaman web. Setiap elemen <option> di tampilkan sebagai
pilihan yang tersedia di menu drop-down yang di hasilkan, tag <option> harus di letakkan tepat di dalam tag
<select>.

Copy kode di bawah ini kemudian paste diantara tag <body> dan </body> untuk membuat formulir pada
halaman web.

<form>

Nama : <br/>

<input type='text'><br/>

Jenis Kelamin : <br/>

<select>

<option>Laki-laki</option>

<option>Perempuan</option>

</select>

<br/>

Alamat : <br/>

<textarea cols='5' rows='5'> </textarea><br/>

<button>Simpan</button>

</form>

27. Tag <style>


Tag <style> adalah perintah dasar HTML yang di gunakan untuk menambahkan kode CSS ke dokumen
HTML. Elemen ini sebaiknya di letakkan di bagian <head>, walaupun tetap dapat berguna jika di letakkan
dalam <body>. CSS sendiri berfungsi untuk membuat desain web lebih menarik sesuai dengan tujuan user
interface pada masing-masing web developer (khususnya web designer).
28. Tag <script>
Tag <script> adalah perintah dasar HTML yang berisi kode yang di tulis dalam bahasa pemrograman selain
HTML atau menentukan lokasi sumber skrip eksternal. Hal ini paling sering di gunakan untuk
menambahkan perintah dasar JavaScript (atau perintah yang lebih expert) ke dalam halaman web secara
langsung atau dengan menautkan ke file .js eksternal.
Demikian pembahasan mengenai perintah dasar HTML, gunakan text editor seperti Sublime Text, NotePad+
+, Atom, Vim, Bracket, UltraEdit, Bluefish atau text editor lain favorit Anda untuk memudahkan editing kode
di atas,