wiBlogger.com

Elemen HTML: html

Definisi dan penggunaan

html adalah elemen tertinggi didalam dokumen HTML. html juga sering disebut sebagai elemen akar (root elements). Semua elemen HTML lainnya harus berada di dalam elemen html ini.

Konten yang diizinkan

Satu elemen head diikuti dengan satu elemen body

Contoh

<!DOCTYPE html>
<html>
   <head>
      <!-- Konten... -->
   </head>
   <body>
      <!-- konten... -->
   </body>
</html>

Atribut

Atribut wajib Tidak ada
Atribut khusus Tidak ada
Atribut umum Daftar atribut umum

Dukungan browser

Chrome	Firefox	Safari	IE	Opera
Ya	Ya	Ya	Ya	Ya

Tips

Atribut lang adalah satu-satunya atribut umum yang sering digunakan pada elemen html untuk mendeklarasikan bahasa konten secara keseluruhan.

Modul HTML: Belajar HTML dari Nol bersama wiBlogger.com

Sebagai motivasi awal, dengan mengikuti materi dan praktek pada modul ini, anda setidaknya akan mendapatkan beberapa hal yang akan menjadi modal yang sangat membantu dalam proses belajar web programming secara otodidak. Beberapa hal ini adalah:

Mengerti tentang peranan HTML, CSS dan Javascript sebagai pembangun halaman web

Mengerti tentang bagaimana cara menerapkan CSS dan Javascript pada HTML

Mampu membuat halaman web sederhana

Mengetahui materi-materi terkait lainnya yang dibutuhkan dalam pembelajaran HTML, CSS dan Javascript

Belum pernah belajar web programming sebelumnya ? Apakah baik jika mulai belajar dari HTML ?
Ya, HTML adalah kemampuan front-end developer. Kenapa harus mulai dari front-end ? Sederhananya, sebelum kita dapat memproduksi sesuatu (dengan kemampuan back-end programming), kita harus paham dulu tentang apa yang akan kita produksi. Selain itu, tiga bahasa yang akan anda pelajari pada sisi front-end ini akan menjadi pondasi yang sangat penting jika anda hendak mendalami back-end programming.

Materi:

Sampai disini, anda telah mengerti tentang struktur utama halaman web serta fungsi masing-masing bahasa (HTML, CSS, Javascript).

Struktur Minimum HTML

Dalam pembuatan HTML, terdapat beberapa elemen yang harus didefinisikan. Beberapa elemen ini merupakan struktur minimum dari dokumen HTML.

DOCTYPE <DOCTYPE html> adalah kode yang mendefinisikan tipe dokumen HTML. Kode ini harus diletakkan pertama kali (paling atas).
Elemen HTML: html Tepat setelah doctype, kode diteruskan dengan elemen html, ini adalah elemen akar. Elemen-elemen HTML lainnya harus diletakkan didalam elemen ini (merupakan sub dari elemen ini).
Elemen HTML: head Elemen yang menampung berbagai informasi terkait dokumen HTML, hal ini seperti misalnya judul, deskripsi dan lain sebagainya. Elemen ini tidak akan ditampilkan pada layar browser.
Elemen HTML: body Merupakan tubuh HTML. Elemen inilah yang akan ditampilkan pada layar browser.
Elemen HTML: title Elemen yang mengatur judul dokumen. Konten yang terdapat pada elemen title ini akan ditampilkan pada Tab browser.

Terkait Blogger.com

Jika sistem minimum HTML mewajibkan beberapa elemen diatas, kenapa pada pembuatan posting di blogger.com, HTML bisa dibuat tanpa elemen-elemen diatas ?

Pada pembuatan post blogger.com, yang kita buat bukanlah dokumen HTML melainkan elemen-elemen HTML. Sistem blogger akan meletakkan elemen-elemen yang kita buat pada Antarmuka post editor ke suatu lokasi (sesuai tema/template yang digunakan) yang merupakan sub dari elemen body. Jadi jelas, kita tidak perlu atau bahkan tidak boleh menyertakan elemen-elemen diatas kedalam post editor.

Cara browser merender HTML (Membaca, membuat dan menampilkan)

Masih merujuk pada sistem minimum HTML diatas, terdapat 2 elemen utama. Dua elemen ini adalah head dan body.

head Elemen ini berisi berbagai elemen yang bertujuan memberikan informasi terkait dokumen HTML. Anda mungkin akan bingung tentang apa yang dimaksud dengan "informasi" disini. Untuk lebih jelasnya, sebagai contoh, salah satu elemen yang sering digunakan pada elemen head adalah elemen meta untuk mendefinisikan status index mesin pencari (Apakah mesin pencari boleh mengindex halaman atau tidak). Mesin pencari akan membaca informasi yang terdapat pada elemen meta ini untuk menentukan apakah halaman akan diletakkan pada database mereka atau tidak.

body Elemen ini merupakan tubuh dokumen HTML. Elemen inilah yang ditampilkan pada layar browser.

<!DOCTYPE html>
<html>
   <head>
      <title>Belajar HTML</title>
   </head>
   <body>
      <p>Belajar membuat paragraf</p>
   </body>
</html>

Belajar membuat paragraf

Tentang Elemen HTML

HTML adalah bahasa markup yang tersusun atas elemen-elemen HTML. Elemen HTML didefiniskan (dibuat) dengan Tag HTML. Beberapa contoh elemen HTML adalah seperti html, head, body, title, h1, p dan lain sebagainya.

Sintak / cara penulisan

Sintak:

<elemen>content...</elemen>

Keterangan:

elemen adalah nama elemen
<elemen> adalah tag pembuka (Start tag)
</elemen> adalah tag penutup (Closing tag)
Tag penutup ditulis sama dengan tag pembuka dengan menambahkan / tepat sebelum elemen.

Apakah semua tag harus ditutup ?

Ya. Meskipun pada HTML5 penulisan tag penutup bersifat opsional, namun, hal ini sangat tidak dianjurkan. Jadi, tetap tutup semua tag.
elemen bersifat Case Insensitive
elemen bersifat Predefined. Dengan kata lain, kita hanya bisa menggunakan nama elemen yang telah diizinkan oleh HTML.

Daftar Elemen HTML

Untuk daftar elemen HTML, anda bisa menuju halaman: Daftar Elemen HTML.

Atribut HTML

Atribut HTML merupakan deklarasi data pada elemen HTML. Atribut memberikan informasi terkait elemen HTML yang bersangkutan, baik itu sebagai informasi wajib maupun hanya sebagai informasi tambahan.

Contoh penerapan atribut HTML

<p title='HTML paragraf'>Paragraf</p>

Pada contoh diatas, title="HTML paragraf" merupakan Atribut HTML.

Sintak

Sintak

<elemen nama='value'>Paragraf</elemen>

Keterangan:

nama adalah nama atribut yang bersangkutan (Predefined)
value adalah nilai (data).
Setiap elemen html bisa memiliki satu atau lebih atribut
Deklarasi atribut diletakkan didalam Tag pembuka
Deklarasi value bisa dilakukan menggunakan Single quote (') atau Double quote (").

HTML5 memungkinkan pendefinisian atribut tanpa mengunakan quote.
Contoh
```
<p class=class1>Paragraf</p>
```
Hal ini tidak dianjurkan, jadi tetap gunakan quote dalam mendeklarasikan atribut.

Jenis-jenis atribut HTML

Terdapat 3 jenis atribut HTML, tiga jenis atribut ini adalah Atribut Wajib, Atribut Khusus dan Atribut Global (umum).

Atribut Wajib

Atribut wajib adalah atribut yang berlaku untuk elemen-elemen tertentu saja dan harus didefinisikan. Contoh atribut wajib HTML adalah atribut href untuk elemen link.

<a href="http://www.wiblogger.com">wiBlogger.com</a>

wiBlogger.com

Apa yang terjadi jika atribut wajib tidak didefinisikan ?

HTML anda tidak valid (tidak benar) dan browser akan merender elemen yang bersangkutan sebisa yang mereka bisa lakukan. Pada kasus ini, elemen mungkin ditampilkan tidak seperti yang seharusnya.

Artibut Khusus

Atribut yang hanya tersedia untuk elemen-elemen tertentu saja dan bersifat optional (bisa didefinisikan dan bisa tidak). Contoh atribut khusus adalah atribut target untuk elemen link.

<a target="_blank" href="http://www.wiblogger.com">wiBlogger.com</a>

wiBlogger.com

Keterangan target="_blank" mengintruksikan browser untuk membuka link pada tab baru. Tanpa atribut ini, link tetap akan bekerja sebagaimana mestinya (terbuka pada tab yang sama).

Atribut Global

Atribut yang tersedia untuk semua elemen HTML dan bersifat opsional. Contoh atribut global adalah seperti title, class, id, dan lain sebagainya.

Daftar atribut global HTML

Untuk daftar atribut global HTML, anda bisa menuju halaman: Daftar Atribut Global HTML.

Membuat HTML sederhana

Pada modul ini, kita akan praktek membuat dokumen HTML sederhana secara offline. Pastikan anda mengikuti praktek ini untuk memahami poin-poin yang akan anda jumpai selanjutnya.

Persiapan

Text editor Untuk text editor, kita akan menggunakan Notepad++ (Download dan instal)
Buat for baru Untuk memudahkan proses belajar anda, buat forder baru dengan nama Belajar HTML. Semua aset (media) untuk keperluan belajar HTML akan kita letakkan pada forder ini.

Membuat file HTML

Buka Notepad++, jika ini adalah kali pertama anda menggunakan Notepad++, tab untuk file baru akan secara otomasi dibuat. Atau anda bisa membuat file baru dengan cara klik shortcut New file (atau bisa melalui toolbar File > New).

Pada keadaan awal, bahasa default yang ter-apply pada file baru adalah txt, atur bahasa file baru ke HTML dengan cara: pada toolbar Notepad++, klik Language dan pilih H > HTML.

Sekarang, bahasa yang ter-apply pada file baru adalah HTML, selanjutnya, Copy dan Paste semua kode HTML sederhana dibawah kedalam kode editor.

HTML sederhana

<!DOCTYPE html>
<html>
   <head>
      <title>Belajar HTML</title>
   </head>
   <body>
      <h1>Belajar HTML</h1>
      <p>Konten paragraf 1</p>
      <p class='paragraf'>Konten paragraf 2</p>
      <p class='paragraf' id='paragraf3'>Konten paragraf 3</p>
   </body>
</html>

Selanjutnya, simpan file ke dalam folder Belajar HTML yang telah anda siapkan sebelumnya dengan cara klik toolbar File > Save. Ganti nama file menjadi index (Anda bisa menamai file ini dengan nama lainnya, namun untuk praktek ini, kita namai file ini dengan index).

Hasil

Untuk melihat hasil, pada toolbar Notepade++, klik Run dan pilih Browser yang dikehendaki (yang terinstal pada perangkat anda). Pada panduan ini, browser yang digunakan adalah Google Chrome. Cara lain untuk membuka file adalah dengan cara Double-click pada file index yang terdapat pada folder Belajar HTML, perangkat akan secara otomatis membuka file melalui default browser.

File index akan terbuka pada browser yang anda pilih.

Sampai pada paragraf ini, anda sudah memiliki pemahaman dasar tentang HTML serta beberapa materi terkait HTML. Pada hasil HTML sederhana yang telah kita buat, tampilan HTML masih sangat sederhana. Selanjutnya, kita akan mempelajari bagaimana cara menerapkan CSS serta materi-materi terkait CSS untuk mendesain HTML.

Modul: Belajar CSS (belum tersedia)

Kami akan mengupdate ketersediaan materi secara bertahap, Anda bisa berlangganan artikel kami melalui formulir Email Subscription yang terdapat di bagian bawah blog ini untuk mendapatkan update materi-materi yang akan kami terbitkan selanjutnya.

Daftar Elemen HTML

Berikut adalah daftar elemen HTML yang sering digunakan. Anda bisa membaca lebih lanjut terkait elemen yang bersangkutan melalui link yang terdapat pada daftar. Untuk daftar yang bukan berupa link. Itu artinya materi belum tersedia pada blog wiBlogger.com. Manfaatkan pencarian google untuk mencari informasi terkait elemen HTML yang bersangkutan. Anda juga bisa berlangganan artikel kami melalui formulir Email Subscription yang terdapat di bagian bawah blog ini untuk mendapatkan update materi-materi yang akan kami terbitkan selanjutnya.

Umum

<!DOCTYPE html>	Mendeklarasikan tipe dokumen HTML
<!--...-->	Elemen komen
html	Elemen akar
head	Elemen yang menampung informasi terkait dokumen HTML
body	Tubuh dokumen
p	Paragraf
div	Bagian/section
span	Bagian/section
br	Baris baru
hr	Pembatas

Content formatting

h1 - h6	Membuat heading
abbr	Membuat text yang merupakan singkat
b	Membuat text tebal
i	Text miring
u	Garis bawah
small	Text kecil
strong	Text penting
sub	Subscript text
sup	Superscript text
blockquote	Kutifan
q	Kutifan pendek
cite	Nama pekerjaan
address	Elemen alamat
pre	Membuat kode
code	Membuat kode
time	Tanggal dan waktu
del	Konten yang telah dihapus (text lama)
del	Konten update (text baru)
dfn	Konten yang didefinisikan
em	Teks yang ditekankan
mark	Menandai text/highlight

Section formatting

header	Bagian header
main	Bagian konten utama
footer	Kaki halaman
article	Artikel
aside	Sidebar
section	Bagian
nav	Navigasi

Formulir dan input

form	Formulir
input	Input untuk formulir
textarea	Multi-line text
button	Tombol
select	Input dengan daftar opsi
option	Opsi untuk elemen select
optgroup	Grup opsi
label	Label untuk elemen input
fieldset	Grup input pada formulir
legend	Capsion untuk elemen fieldset
datalist	Membuat predefined opsi
output	Jumlah kalkulasi input

Frame

frame	Frame

Gambar

img	Gambar
map	client-side image-map
area	Area pada image-map
canvas	Menggambar dengan script
figure	Figure
figcaption	Figure capsion
figture	Kontainer untuk banyak gambar
svg	Kontainer svg

Audio dan Video

audio	File audio
source	Source untuk file audio
track	Text-track untuk file multimedia
video	File video

Links

a	Link
link	external resource

Daftar

ol	Daftar dengan nomor
ul	Daftar tanpa nomor
li	Daftar elntuk elemen ul dan ol
dl	Daftar dengan deskripsi
dt	Judul untuk daftar pada elemen dl
dd	Deskripsi untuk daftar pada elemen dl

Tabel

table	Tabel
thead	Header tabel
tbody	Tubuh tabel
tfoot	Kaki tabel
caption	Capsion tabel
th	Header cell
tr	Baris pada table
td	Tabel cell
colgroup	Mendefinisikan grup kolom
col	Mengatur konfigurasi grup kolom

Pengukur (Grafik) dan Tampilan spesial

meter	Menampilkan skala dengan value yang ditentukan
progress	Menampilkan progress dengan value yang ditentukan
details	Konten yang bisa dilipat
summary	Judul untuk elemen details

Meta

meta	Meta data
base	URL basis untuk semua URL relatif

Programming

script	Script
noscript	Konten yang ditampilkan jika browser tidak mendukung script
embed	Konten eksternal
object	Embedded object
param	Paramenter untuk elemen object

Kami akan mengupdate ketersediaan materi secara bertahap, Anda bisa berlangganan artikel kami melalui formulir Email Subscription yang terdapat di bagian bawah blog ini untuk mendapatkan update materi-materi yang akan kami terbitkan selanjutnya.

Daftar Atribut Global HTML

Berikut adalah daftar atribut global HTML yang sering digunakan. Anda bisa membaca lebih lanjut terkait atribut yang bersangkutan melalui link yang terdapat pada daftar. Untuk daftar yang bukan berupa link. Itu artinya materi belum tersedia pada blog wiBlogger.com. Manfaatkan pencarian google untuk mencari informasi terkait atribut yang bersangkutan. Anda juga bisa berlangganan artikel kami melalui formulir Email Subscription yang terdapat di bagian bawah blog ini untuk mendapatkan update materi-materi yang akan kami terbitkan selanjutnya.

Umum

id	Mendefinisikan id unik elemen
class	Mendefinisikan class elemen
title	Mendefinisikan judul elemen
lang	Mendefinisikan bahasa konten pada elemen
hidden	Menyembunyikan elemen
data-*	Membuat custom data untuk keperluan tertentu
dir	Mendefinisikan direksi konten elemen
contenteditable	Mengatur apakah konten untuk elemen yang bersangkutan bisa di edit oleh pengguna atau tidak
dragable	Mengatur apakah elemen bisa dipindahkan ke bagian tertentu atau tidak
accesskey	Mendefinisikan shortcut untuk mengakses/fokus pada elemen
tabindex	Mendefinisikan urutan tab elemen (navigasi)
translate	Mengatur apakah konten elemen akan diterjemahkan atau tidak pada proses lokalisasi

Terkait Window event

onload	script yang akan dieksekusi ketika dokumen HTML terload sepenuhnya
onresize	Script yang akan dijalankan ketika terjadi perubahan pada layar browser
onerror	Script yang akan dijalankan ketika terjadi error
onbeforeprint	Script yang akan dijalankan sebelum dokumen diprint
onafterprint	Script yang akan dijalankan setelah dokumen diprint
onoffline	Script yang akan tereksekusi ketika browser mulai bekerja secara offline
ononline	Script yang akan tereksekusi ketika browser mulai bekerja secara online

Terkait Form/Input Event

onfocus	Script yang akan dijalankan ketika elem terfokus
oninput	Script yang akan dijalankan ketika value input berubah
onchange	Script yang akan dieksekusi ketika value input diupdate
onselect	Script yang akan dijalankan ketika pengguna men-selek text pada elemen
onsubmit	Script yang akan dijalankan ketika pengguna mensubsit form

Terkait Keyboard Event

onkeydown	Script yang akan dijalankan ketika pengguna menekan tombol pada keyboard
onkeyup	Script yang akan dijalankan ketika pengguna melepas tombol pada keyboard

Terkait Mouse Event

onmouseover	Script yang akan dijalankan ketika pointer memasuki elemen
onmousemove	Script yang akan dijalankan ketika pointer digerakkan pada elemen
onmouseout	Script yang akan dijalankan ketika pointer meninggalkan elemen
onmousedown	Script yang akan dijalankan ketika tombol klik mouse ditekan(dijalankan sebelum onclick)
onmouseup	Script yang akan dijalankan ketika tombol klik mouse dilepas
onwheel	Script yang akan dijalankan ketika pengguna menggulir mouse wheel
onclick	Script yang akan dijalankan ketika elemen di-klik
ondblclick	Script yang akan dijalankan ketika terjadi double-click pada elemen

Terkait Clipboard Event

oncopy	Script yang akan dijalankan ketika pengguna mengcopy konten elemen
oncut	Script yang akan dijalankan ketika pengguna meng-cut konten elemen
onpaste	Script yang akan dijalankan ketika pengguna mem-paste konten kedalam elemen

Diatas adalah daftar global atribut HTML yang sering digunakan. Daftar diatas tidaklah lengkap, terdapat beberapa atribut lainnya yang belum disertakan. Hal ini seperti atribut terkait Media event (video, audio, dll), Dragable Content dan lain sebagainya. Anda bisa mendapatkan daftar atribut ini melalui link berikut:

Mozilla.org: Global attributes - (Bahasa Inggris)
w3schools.com: Global attributes - (Bahasa inggris)

Atribut HTML: id

Definisi dan penggunaan

Atribut id memberikan id unik pada elemen HTML. Atribut id umumnya digunakan untuk kebutuhan styling, scripting, atau linking. Atribut id merupakan salah satu Atribut global HTML.

Sintak

<elemen id='value'>

Keterangan

value harus bersifat unik. Dengan kata lain, sebuah value untuk atribut id hanya bisa digunakan satu kali.
value harus terdiri dari satu atau lebih karakter.
value tidak mengandung spasi (spasi, tab, dll).

Dukungan browser

Chrome	Firefox	Safari	IE	Opera
Ya	Ya	Ya	Ya	Ya

Contoh-contoh

Untuk keperluan styling Atribut id sering digunakan sebagai CSS selector.

<p id='paragraf1'>Pragraf HTML<p>

#paragraf1 {
   background:blue;
   color:#fff;
   padding:20px;
   text-align:center;
}

Paragraf HTML

Untuk keperluan scripting Terkait javascript, atribut id digunakan untuk mempermudah proses pengambilan elemen yang bersangkutan.

<p id='paragraf1'>Pragraf HTML<p>
<a href='#' id='link1'>Alert text paragraf 1<a>

#paragraf1 {
   background:blue;
   color:#fff;
   padding:20px;
   text-align:center;
}

#link1 {
   display:inline-block;
   margin-top:20px;
   background:#f6f7f8;
   color:#000;
   padding:10px 15px;
   line-height:1;
   border:1px solid #e0e0e0;
   border-radius:5px;
}

   var paragraf = document.getElementById("paragraf1");
   var link = document.getElementById("link1");
       link.onclick = function(e){
          e.preventDefault();
          alert(paragraf.innerHTML);
       }

Paragraf HTML

Alert text paragraf

Untuk keperluan linking Kita bisa membuat link untuk mengarahkan pengguna pada elemen-elemen tertentu. Contoh penggunaan untuk kebutuhkan ini misalnya adalah Membuat daftar isi postingan.

Pengertian dan fungsi HTML, CSS dan Javascript sebagai pembangun Halaman web

Sebagian besar Halaman web yang terdapat di internet tersusun atas 3 bahasa. 3 bahasa ini adalah HTML, CSS dan Javascript. Pemahaman tentang HTML, CSS dan Javascript merupakan hal yang sangat penting demi kemudahan proses pembangunan blog.

HTML

HTML (Hyper Text Markup Language) adalah bahasa markup yang digunakan untuk membuat Halaman web. HTML adalah markup yang digunakan untuk mendefinisikan struktur halaman web. Hal ini seperti misalnya membuat elemen paragraf, gambar, link dan lain sebagainya. HTML tersusun atas elemen-elemen HTML. Elemen html didefinisikan dengan tag-tag HTML.

Sebagian besar halaman web yang terdapat di internet merupakan halaman yang dibangun dengan HTML. HTML merupakan bentuk utama dari halaman web. CSS dan Javascript terletak didalam file HTML. Sebuah halaman web dapat dibuat hanya dengan menggunakan HTML (Tanpa CSS dan Javascript).

CSS

CSS adalah bahasa yang digunakan untuk mengatur tampilan (gaya) elemen-elemen HTML. Dengan CSS, kita dapat memberikan warna background, border, mengatur posisi elemen, ukuran font dan lain sebagainya.

Javascript

Javascript adalah bahasa pemrograman (berjalan pada web browser) yang digunakan untuk membuat halaman web yang lebih interaktif. Beberapa fungsi yang bisa anda tambahkan menggunakan Javascript seperti misalnya menampilkan elemen tertentu hanya pada browser tertentu saja, membuat fitur yang memungkinkan pengguna untuk dapat menyesuaikan ukuran font pada blog, dan lain sebagainya.

Contoh-contoh

Untuk lebih memperjelas tentang bagaimana ketiga bahasa ini bekerja secara bersamaan, perhatin beberapa contoh berikut:

<!DOCTYPE html>
<html>
   <head>
      <title>Belajar HTML</title>
   </head>
   <body>
      <p>Paragraf 1</p>
      <p>Paragraf 2</p>
   </body>
</html>

Paragraf 1

Paragraf 2

Pada kode HTML diatas, tidak ada satupun konfigurasi CSS yang diterapkan. Hasil yang terlihat juga berupa paragraf sederhana. Pada contoh dibawah ini, beberapa konfigurasi CSS diterapkan untuk elemen paragraf.

<!DOCTYPE html>
<html>
   <head>
      <title>Belajar HTML</title>
      <style>
         /* KODE CSS DISINI */
      </style>
   </head>
   <body>
      <p>Paragraf 1</p>
      <p>Paragraf 2</p>
   </body>
</html>

Paragraf 1

Paragraf 2

Sampai disini, anda tentunya sudah paham tentang fungsi dari CSS. Pada contoh kode dibawah, javascript digunakan untuk menambahkan elemen tombol yang mengungkinkan pengguna untuk dapat menghapus dan me-restore paragraf 2.

<!DOCTYPE html>
<html>
   <head>
      <title>Belajar HTML</title>
      <style>
            /* KODE CSS DISINI... */
      </style>
   </head>
   <body>
      <p>Paragraf 1</p>
      <p>Paragraf 2</p>
      <script>
            // KODE SCRIPT DISINI... 
      </script>
   </body>
</html>

Paragraf 1

Paragraf 2

Hapus parafraf 2 Restore parafraf 2

Istilah Web Klien, Web Server, Front-end, Back-end dalam Web Programming

Pengertian singkat

Web klien	Perangkat yang meminta konten dari web server
Web server	Perangkat yang menyimpan/menampung data-data terkait situs web tertentu. Web server melayani berbagai permintaan dari web klien.
Font-end processing	Semua proses yang terjadi pada sisi web klien
Back-end processing	Semua proses yang terjadi pada sisi web server

Alur bagaimana informasi (konten web) sampai kepada pembaca

Untuk mendapatkan pemahaman yang kuat tentang beberapa istilah diatas. Akan kita tinjau alur/proses bagaimana konten web ditampilkan pada pembaca.

Ketika anda mengakses konten web, terdapat 2 perangkat yang terlibat, dua perangkat ini adalah Web Klien dan Web Server. Dibawah ini adalah proses utama yang terjadi ketika anda mengakses situs web.

Anda membuka Web browser (Google Chrome, Mozilla Firefox, Safari) dan mengetikkan alamat situs yang hendak dituju. Dalam hal ini, web browser adalah perangkat yang bertindak sebagai Web klien.
Browser (web klien) meminta konten yang bersangkutan pada web server (loading). Web server mengambil atau membuat konten yang diminta oleh web klien. Pada fase ini, berbagai proses berlangsung pada web server. Berbagai proses yang terjadi pada fase inilah yang disebut sebagai Back-end processsing.
Web klien menerima konten yang bersangkutan. Engine pada web klien mengelolah dan menampilkan konten. Pada fase ini, berbagai proses berlangsung pada web klien. Berbagai proses yang terjadi disini disebut sebagai Front-end processing. Hal ini seperti misalnya memproses kode javascript pada HTML dan lain sebagainya.

Tentang web server

Anda mungkin masih bingung tentang apa itu web server. Pada prinsipnya, web server tidak ubahnya seperti perangkat komputer pada umumnya. Ya, kita bahkan bisa menggunakan perangkat komputer yang kita gunakan sebagai web server. Sederhananya, anda dapat mengibaratkan koneksi antara web klien dan web server ini seperti halnya kegiatan trasfer file dari komputer satu ke komputer lainnya melalui koneksi bluetooth. Hanya saja, dalam hal ini, teknologi yang digunakan sebagai media transmisi data web adalah Internet.

HTML <table> : Cara membuat tabel di postingan blog

Daftar isi:

Cara membuat tabel di postingan blogger
HTML table sederhana
Menggabungkan cell antar baris dan kolom

1. Cara membuat tabel dipostingan blog

Kita tahu bahwa salah satu keterbatasan yang terdapat pada post editor blogger adalah tidak tersedianya toolbar untuk membuat tabel. Untuk membuat tabel, kita harus membuat dan memasukkan kode HTML secara manual dengan cara: Masuk ke antarmuka post editor, pada mode penulisan post, pilih mode HTML. Paste kode html tabel pada posisi yang anda kehendaki.

2. HTML Tabel sederhana

HTML1: HTML Tabel sederhana

<table>
    <tbody>
        <tr>
            <td>Cell baris 1, kolom 1</td>
            <td>Cell baris 1, kolom 2</td>
        </tr>
        <tr>
            <td>Cell baris 2, kolom 1</td>
            <td>Cell baris 2, kolom 2</td>
        </tr>
    </tbody>
</table>

Hasil HTML 1

Cell baris 1, kolom 1	Cell baris 1, kolom 2
Cell baris 2, kolom 1	Cell baris 2, kolom 2

Keterangan HTML 1:

table	Tag untuk membuat tabel
tbody	Tag yang mendefinisikan tubuh tabel. Khususnya pada antarmuka post editor blogger, tag ini bersifat optional (tidak harus digunakan). Dengan kata lain, tanpa tag tbody sekalipun, tabel tetap dapat ditampilkan dengan benar. Jika tag ini tidak didefinisikan, sistem blogger akan secara otomatis melengkapi tag tbody ini ketika post diterbitkan
tr	Tag untuk membuat baris baru pada tabel. Sebuah tabel setidaknya terdiri dari satu baris
td	Tag untuk membuat Cell baru pada tabel. Sebuah baris tabel setidaknya terdiri dari satu cell. Tag ini selalu digunakan didalam tag tr. Jumlah kolom pada tabel sama dengan jumlah cell per baris.

Pada HTML 1, semua cell didefinisikan dengan menggunakan tag td. Terdapat dua jenis cell pada tabel, yaitu Standard cell dan Header cell. Standard cell didefinisikan dengan tag td, dan Header cell didefinisikan dengan tag th. Header cell digunakan untuk memberikan label pada baris atau kolom tertentu. Berikut adalah contoh penggunaan header cell.

HTML2: Penggunaan Tag TH

<table>
    <tbody>
        <tr>
            <th>Nama</th>
            <th>Umur</th>
        </tr>
        <tr>
            <td>Mawar</td>
            <td>17</td>
        </tr>
        <tr>
            <td>Melati</td>
            <td>19</td>
        </tr>
    </tbody>
</table>

Hasil HTML 2

Nama	Umur
Mawar	17
Melati	19

3. Menggabungkan cell antar baris dan kolom

Kita bisa menggabungkan (Marge) cell antar baris atau kolom dengan menggunakan atribut rowspan dan colspan.

rowspan	Menggabungkan cell antar baris. Atribut ini digunakan pada tag td atau th
colspan	Menggabungkan cell antar kolom. Atribut ini digunakan pada tag td atau th.

HTML 3: Penggunaan rowspan

<table>
    <tbody>
        <tr>
            <td rowspan='2'>Baris 1-2, kolom 1</td>
            <td>Baris 1, kolom 2</td>
        </tr>
        <tr>
            <td>Baris 2, kolom 2</td>
        </tr>
        <tr>
            <td>Baris 3, kolom 1</td>
            <td>Baris 3, kolom 2</td>
        </tr>
    </tbody>
</table>

Hasil HTML 3

Baris 1-2, kolom 1	Baris 1, kolom 2
Baris 1-2, kolom 1	Baris 2, kolom 2
Baris 3, kolom 1	Baris 3, kolom 2

Keterangan HTML 3 Pada HTML 3 diatas, cell pertama baris 1 memiliki atribut rowspan dengan value 2. Ini artinya, cell tersebut akan mengambil Space sebanyak 2 baris. Oleh karena itu, hanya satu cell didefinisikan pada baris 2 (satu space cell lagi telah diambil oleh cell dengan rowspan yang bersangkutan).

HTML 3: Penggunaan colspan

<table>
    <tbody>
        <tr>
            <th>Baris 1, kolom 1</th>
            <th colspan='2'>Baris 1, kolom 2-3</th>
        </tr>
        <tr>
            <td>Baris 2, kolom 1</td>
            <td>Baris 2, kolom 2</td>
            <td>Baris 2, kolom 3</td>
        </tr>
        <tr>
            <td>Baris 3, kolom 1</td>
            <td>Baris 3, kolom 2</td>
            <td>Baris 2, kolom 3</td>
        </tr>
    </tbody>
</table>

Hasil HTML 4

Baris 1, kolom 1	Baris 1, kolom 2-3
Baris 2, kolom 1	Baris 2, kolom 2	Baris 2, kolom 3
Baris 3, kolom 1	Baris 3, kolom 2	Baris 2, kolom 3

Keterangan HTML 4 Pada HTML 4 diatas, cell ke-2 baris pertama memiliki atribut colspan dengan value 2. Ini artinya, cell tersebut akan mengambil Space sebanyak 2 kolom. Oleh karena itu, cell ke-3 pada baris 1 tidak didefinisikan (space ke-3 telah diambil oleh cell dengan colspan yang bersangkutan).