wiblogger

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



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

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.

struktur minimum 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>


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>

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).

membuat file baru di notepad

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.

belajar html - atur bahasa notepad

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>


belajar html - kode html sederhana

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).

belajar html - simpan kode html
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.

belajar html - hasil


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
htmlElemen akar
headElemen yang menampung informasi terkait dokumen HTML
bodyTubuh dokumen
pParagraf
divBagian/section
spanBagian/section
brBaris baru
hrPembatas


Content formatting
h1 - h6Membuat heading
abbrMembuat text yang merupakan singkat
bMembuat text tebal
iText miring
uGaris bawah
smallText kecil
strongText penting
subSubscript text
supSuperscript text
blockquoteKutifan
qKutifan pendek
citeNama pekerjaan
addressElemen alamat
preMembuat kode
codeMembuat kode
timeTanggal dan waktu
delKonten yang telah dihapus (text lama)
delKonten update (text baru)
dfnKonten yang didefinisikan
emTeks yang ditekankan
markMenandai text/highlight


Section formatting
headerBagian header
mainBagian konten utama
footerKaki halaman
articleArtikel
asideSidebar
sectionBagian
navNavigasi


Formulir dan input
formFormulir
inputInput untuk formulir
textareaMulti-line text
buttonTombol
selectInput dengan daftar opsi
optionOpsi untuk elemen select
optgroupGrup opsi
labelLabel untuk elemen input
fieldsetGrup input pada formulir
legendCapsion untuk elemen fieldset
datalistMembuat predefined opsi
outputJumlah kalkulasi input


Frame
frameFrame


Gambar
imgGambar
mapclient-side image-map
areaArea pada image-map
canvasMenggambar dengan script
figureFigure
figcaptionFigure capsion
figtureKontainer untuk banyak gambar
svgKontainer svg


Audio dan Video
audioFile audio
sourceSource untuk file audio
trackText-track untuk file multimedia
videoFile video


Links
aLink
linkexternal resource


Daftar
olDaftar dengan nomor
ulDaftar tanpa nomor
liDaftar elntuk elemen ul dan ol
dlDaftar dengan deskripsi
dtJudul untuk daftar pada elemen dl
ddDeskripsi untuk daftar pada elemen dl


Tabel
tableTabel
theadHeader tabel
tbodyTubuh tabel
tfootKaki tabel
captionCapsion tabel
thHeader cell
trBaris pada table
tdTabel cell
colgroupMendefinisikan grup kolom
colMengatur konfigurasi grup kolom


Pengukur (Grafik) dan Tampilan spesial
meterMenampilkan skala dengan value yang ditentukan
progressMenampilkan progress dengan value yang ditentukan
detailsKonten yang bisa dilipat
summaryJudul untuk elemen details


Meta
metaMeta data
baseURL basis untuk semua URL relatif


Programming
scriptScript
noscriptKonten yang ditampilkan jika browser tidak mendukung script
embedKonten eksternal
objectEmbedded object
paramParamenter 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
idMendefinisikan id unik elemen
classMendefinisikan class elemen
titleMendefinisikan judul elemen
langMendefinisikan bahasa konten pada elemen
hiddenMenyembunyikan elemen
data-*Membuat custom data untuk keperluan tertentu
dirMendefinisikan direksi konten elemen
contenteditableMengatur apakah konten untuk elemen yang bersangkutan bisa di edit oleh pengguna atau tidak
dragableMengatur apakah elemen bisa dipindahkan ke bagian tertentu atau tidak
accesskeyMendefinisikan shortcut untuk mengakses/fokus pada elemen
tabindexMendefinisikan urutan tab elemen (navigasi)
translateMengatur apakah konten elemen akan diterjemahkan atau tidak pada proses lokalisasi


Terkait Window event
onloadscript yang akan dieksekusi ketika dokumen HTML terload sepenuhnya
onresizeScript yang akan dijalankan ketika terjadi perubahan pada layar browser
onerrorScript yang akan dijalankan ketika terjadi error
onbeforeprintScript yang akan dijalankan sebelum dokumen diprint
onafterprintScript yang akan dijalankan setelah dokumen diprint
onofflineScript yang akan tereksekusi ketika browser mulai bekerja secara offline
ononlineScript yang akan tereksekusi ketika browser mulai bekerja secara online


Terkait Form/Input Event
onfocusScript yang akan dijalankan ketika elem terfokus
oninputScript yang akan dijalankan ketika value input berubah
onchangeScript yang akan dieksekusi ketika value input diupdate
onselectScript yang akan dijalankan ketika pengguna men-selek text pada elemen
onsubmitScript yang akan dijalankan ketika pengguna mensubsit form


Terkait Keyboard Event
onkeydownScript yang akan dijalankan ketika pengguna menekan tombol pada keyboard
onkeyupScript yang akan dijalankan ketika pengguna melepas tombol pada keyboard


Terkait Mouse Event
onmouseoverScript yang akan dijalankan ketika pointer memasuki elemen
onmousemoveScript yang akan dijalankan ketika pointer digerakkan pada elemen
onmouseoutScript yang akan dijalankan ketika pointer meninggalkan elemen
onmousedownScript yang akan dijalankan ketika tombol klik mouse ditekan(dijalankan sebelum onclick)
onmouseupScript yang akan dijalankan ketika tombol klik mouse dilepas
onwheelScript yang akan dijalankan ketika pengguna menggulir mouse wheel
onclickScript yang akan dijalankan ketika elemen di-klik
ondblclickScript yang akan dijalankan ketika terjadi double-click pada elemen


Terkait Clipboard Event
oncopyScript yang akan dijalankan ketika pengguna mengcopy konten elemen
oncutScript yang akan dijalankan ketika pengguna meng-cut konten elemen
onpasteScript 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:



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.

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

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).

html css 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

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.

  1. 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.

    pengertian web klien
  2. 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.

    pengertian web server
  3. 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.

    pengertian front-end

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

HTML <table> : Cara membuat tabel di postingan blog

Daftar isi:
  1. Cara membuat tabel di postingan blogger
  2. HTML table sederhana
  3. 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:
tableTag 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 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).
Berlangganan Artikel
Kami akan mengirimkan berbagai referensi blogging pilihan langsung ke alamat email anda. Pastikan juga anda melakukan konfirmasi pada email yang bersangkutan untuk mengaktifkan layanan. Panduan bagaimana cara berlangganan artikel bisa anda baca disini.
×
Jangan tampilkan lagi