Showing posts with label tutorial. Show all posts
Showing posts with label tutorial. Show all posts

Instalasi Mail Server Zimbra 8.6 Open Source pada CentOS 6.5

Assalamu'alaikum Wr. Wb.
Halo lagi semuanya.... Kali ini saya akan membagikan sebuah tutorial spesial untuk temen-temen, yaitu mengenai Instalasi Zimbra 8.6 Open Source pada CentOS 6.5. Zimbra Open Source Edition merupakan sebuah software untuk membuat email server secara gratis dan praktis. Dan di samping fungsi utamanya sebagai mail server, Zimbra juga memiliki banyak fitur lainnya seperti Calendar, Task Management, dll.
Zimbra sudah menjadi favorit saya mulai dari Zimbra versi 6 (saat hak paten Zimbra masih dimiliki Yahoo), hingga sekarang. Kalo dihitung, kurang lebih sudah 6 tahun saya "bermain" dengan Zimbra. Dan alhamdulillah sudah jutaan rupiah bisa saya dapatkan hanya dengan jasa instalasi dan konfigurasi Zimbra yang saya terapkan di beberapa perusahaan. Sekarang sudah saatnya saya bagikan salah satu ilmu andalan saya ini kepada temen-temen.

Kita langsung mulai saja. Bismillahirrohmanirrohim...

Requirements

Sebuah software pasti memiliki persyaratan teknis agar software tersebut dapat berjalan dengan optimal, termasuk spesifikasi hardware. Berikut merupakan hardware requirement yang dibutuhkan agar Zimbra dapat berjalan optimal :
- Processor Dual Core (minimal)
- RAM 2 GB (minimal). Lebih optimal jika menggunakan RAM 4 GB atau lebih.
- LAN Gigabit Ethernet (recomended). Tidak disarankan menggunakan FastEthernet untuk diimplementasikan pada LAN.
- Hard Disk > 100 GB (tergantung banyaknya user email)

Persiapan

Jika komputer dengan spesifikasi di atas sudah kita persiapkan. Selanjutnya kita install dengan CentOS 6.5 64bit. Disarankan untuk tidak menambahkan GUI pada instalasi CentOS karena dapat memberatkan kinerja sistem sehingga Zimbra tidak dapat berjalan optimal. Setelah itu, setting IP Address pada CentOS, misalnya kita set IP 10.10.10.2. Tidak lupa pastikan koneksi internet berjalan. Untuk melakukan instalasi Zimbra juga kita mesti menggunakan user root (superuser) pada CentOS.
Hal yang harus dipertimbangkan lagi yaitu penggunaan text editor. Di sini saya akan menggunakan text editor nano dibandingkan vi. Karena penggunaanya lebih mudah dibandingkan vi. Tapi jika temen-temen sudah terbiasa dengan vi pun tidak masalah, yang penting bisa edit file, hehe.. :D
Jika CentOS belum memiliki text editor nano, bisa kita install dengan perintah :
# yum install -y nano

Prainstalasi

Waduh masih belum ke tahap instalasi juga nih? Ya memang untuk membangun sebuah server terkadang membutuhkan banyak tahap persiapan meskipun tahap instalasinya sangat mudah. Tapi dengan persiapan yang matang, sebuah rencana dapat dijalankan dengan mulus :)

Konfigurasi Hostname & DNS

Seperti anak yang baru lahir, server yang baru diinstall juga harus diberi nama. Maka dari itu, kita harus menentukan hostname sehingga Zimbra dapat mengenali nama server kita. Edit file /etc/hosts dengan perintah :
# nano /etc/hosts
Tambahkan baris berikut pada bagian bawah dalam file tersebut :
10.10.10.2 mail.domain.com mail
*ubah mail.domain.com dan mail sesuai dengan host/domain yang akan digunakan
Save hasil perubahan dengan cara Ctrl+O > [Enter], dan exit dengan Ctrl+X (jika menggunakan nano). Setelah itu restart CentOS dengan perintah :
# reboot
Kita sudah memberi nama pada server, tapi nama tersebut masih belum bisa dikenali oleh komputer lain. Agar komputer lain dapat mengenali server kita, maka kita harus mendaftarkannya pada DNS Server. Kalo temen-temen belum memiliki DNS Server, bisa di-install dan dikonfigurasi langsung  pada server ini sebelum menginstall Zimbra. 
Gimana caranya bikin DNS Server? Gampang, cukup baca aja tutorial Konfigurasi Bind9 (DNS Server) pada CentOS 6.5 dengan Chroot.
Agar calon server zimbra kita dapat dikenali, wajib ditambahkan baris berikut pada record DNS-nya :
IN MX 10 mail.domain.com. 
mail IN A 10.10.10.2
Record DNS untuk server Zimbra sudah kita daftarkan, tapi juga harus kita gunakan. Artinya server Zimbra ini harus menjadi DNS Client juga yang mengacu kepada DNS Server tersebut. Saatnya edit file /etc/resolv.conf dengan perintah :
# nano /etc/resolv.conf
Tambahkan baris berikut : (contoh IP nameserver di bawah jika DNS Server berada pada Zimbra Server)
nameserver 10.10.10.2
Agar konfigurasi DNS Client dapat langsung bekerja, restart network dengan perintah :
# /etc/init.d/network restart

Disable Service

Tahapan ini diperlukan karena beberapa aplikasi dan sistem keamanan pada CentOS dapat menghambat proses instalasi Zimbra. Keamanan pada CentOS seperti Firewall dan SELinux untuk sementara kita harus disable dahulu dan bisa kita konfigurasi ulang setelah proses instalasi Zimbra. Cara mengamankan CentOS dan Zimbra mungkin akan saya bahas lain kali di luar tutorial ini.
Ikuti langkah-langkah berikut :
Disable Postfix dan iptables.
# service iptables stop
# service ip6tables stop
# service postfix stop
# chkconfig postfix off
# chkconfig iptables off
# chkconfig ip6tables off
Edit file /etc/selinux/config untuk disable SELinux.
# nano /etc/selinux/config
Cari dan ubah bagian berikut :
SELINUX=disabled
Edit file /etc/sudoers
# nano /etc/sudoers
Cari bagian berikut dan tambahkan tanda pagar (#) seperti contoh di bawah :
#Defaults    requiretty
Restart CentOS dengan perintah :
# reboot

Install Package yang dibutuhkan

Sebelum melakukan instalasi Zimbra, kita perlu melakukan instalasi package-package pada CentOS yang dibutuhkan oleh Zimbra. Jalankan perintah berikut :
# yum -y install perl perl-core wget screen w3m elinks unzip nmap sed nc sysstat libaio rsync telnet aspell libtool-ltdl compat-libstdc++*

Instalasi Zimbra 8.6 Open Source Edition

(Akhirnya...sampai juga pada tahap instalasi Zimbra :D)
Untuk melakukan instalasi Zimbra, kita harus download terlebih dahulu package Zimbra 8.6 Open Source Edition. Download package bisa dilakukan langsung dari CentOS atau download manual dari komputer lain.
Untuk download langsung melalui CentOS, bisa dicoba perintah berikut :
# wget https://files.zimbra.com/downloads/8.6.0_GA/zcs-8.6.0_GA_1153.RHEL6_64.20141215151155.tgz
Atau jika ingin download secara manual, bisa klik link berikut : Download Zimbra Open Source Edition

Setelah kita download package Zimbra, extract file tersebut dengan perintah :
# tar -xzvf zcs-8.6.0_GA_1153.RHEL6_64.20141215151155.tgz
Jika proses extract sudah selesai, masuki direktori yang hasil extract package kemudian eksekusi file instalasi. Ikuti langkah berikut :
cd zcs-8.6.0_GA_1153.RHEL6_64.20141215151155/
# ./install.sh --platform-override
Tunggu sesaat, kemudian akan muncul pesan Terms & Agreement. ketik Y seperti contoh di bawah :
PLEASE READ THIS AGREEMENT CAREFULLY BEFORE USING THE SOFTWARE.
ZIMBRA, INC. ("ZIMBRA") WILL ONLY LICENSE THIS SOFTWARE TO YOU IF YOU
FIRST ACCEPT THE TERMS OF THIS AGREEMENT. BY DOWNLOADING OR INSTALLING
THE SOFTWARE, OR USING THE PRODUCT, YOU ARE CONSENTING TO BE BOUND BY
THIS AGREEMENT. IF YOU DO NOT AGREE TO ALL OF THE TERMS OF THIS
AGREEMENT, THEN DO NOT DOWNLOAD, INSTALL OR USE THE PRODUCT.
License Terms for the Zimbra Collaboration Suite:
http://www.zimbra.com/license/zimbra-public-eula-2-5.html
Do you agree with the terms of the software license agreement? [N] Y
Setelah itu, akan muncul pilihan package Zimbra yang akan di-install. Jika belum yakin dengan package yang akan dipilih, sesuaikan dengan pilihan seperti contoh di bawah (Y jika ingin di-install, N jika tidak ingin di-install) :
Select the packages to install
Install zimbra-ldap [Y]
Install zimbra-logger [Y]
Install zimbra-mta [Y]
Install zimbra-dnscache [Y] N
Install zimbra-snmp [Y]
Install zimbra-store [Y]
Install zimbra-apache [Y]
Install zimbra-spell [Y]
Install zimbra-memcached [Y] N
Install zimbra-proxy [Y] N
Ketik Y kembali untuk menyetujui pilihan package.
Checking required space for zimbra-core
Checking space for zimbra-store
Checking required packages for zimbra-store
zimbra-store package check complete.
Installing:
zimbra-core
zimbra-ldap
zimbra-logger
zimbra-mta
zimbra-snmp
zimbra-store
zimbra-apache
zimbra-spell
The system will be modified. Continue? [N] Y
Tunggu beberapa saat, hingga akan muncul error seperti contoh di bawah. Error ini terjadi karena secara default zimbra akan membuat domain email menggunakan hostname server kita (contoh : user@mail.domain.com) sedangkan kita membutuhkan alamat email dengan domain utama (contoh : user@domain.com). Berarti, pada tahap ini kita cukup pilih Yes untuk mengubah domain dan mengisinya dengan nama domain utama yang akan digunakan, seperti contoh di bawah :
DNS ERROR resolving MX for mail.domain.com
It is suggested that the domain name have an MX record configured in DNS
Change domain name? [Yes]
Create domain: [mail.domain.com] domain.com
Setelah proses perubahan domain tadi, akan muncul Configuration Menu seperti contoh di bawah. Di sini kita hanya perlu menentukan password untuk user admin Zimbra. Ketik angka 6 dan [Enter] untuk masuk ke menu zimbra-store.
Main menu
1) Common Configuration:
2) zimbra-ldap: Enabled
3) zimbra-logger: Enabled
4) zimbra-mta: Enabled
5) zimbra-snmp: Enabled
6) zimbra-store: Enabled
+Create Admin User: yes
+Admin user to create: admin@domain.com
******* +Admin Password UNSET
+Anti-virus quarantine user: virus-quarantine.zcystwcsm@domain.com
+Enable automated spam training: yes
+Spam training user: spam.z7piyptt@domain.com
+Non-spam(Ham) training user: ham.zxtj5fxh8@domain.com
+SMTP host: mail.domain.com
+Web server HTTP port: 80
+Web server HTTPS port: 443
+Web server mode: https
+IMAP server port: 143
+IMAP server SSL port: 993
+POP server port: 110
+POP server SSL port: 995
+Use spell check server: yes
+Spell server URL: http://mail.domain.com:7780/aspell.php
+Configure for use with mail proxy: FALSE
+Configure for use with web proxy: FALSE
+Enable version update checks: TRUE
+Enable version update notifications: TRUE
+Version update notification email: admin@domain.com
+Version update source email: admin@domain.com
+Install mailstore (service webapp): yes
+Install UI (zimbra,zimbraAdmin webapps): yes
7) zimbra-spell: Enabled
8) Default Class of Service Configuration:
s) Save config to file
x) Expand menu
q) Quit
Address unconfigured (**) items (? - help) 6
Pada menu zimbra-store, ketik 4 dan [Enter], lalu masukkan password untuk admin Zimbra (misalnya: 4dm!nZ1mbr@). Setelah selesai memasukkan password admin, kembali ke menu sebelumnya dengan mengetik 'r' dan [Enter] seperti contoh berikut:
Store configuration
1) Status: Enabled
2) Create Admin User: yes
3) Admin user to create: admin@domain.com
** 4) Admin Password UNSET
5) Anti-virus quarantine user: virus-quarantine.zcystwcsm@domain.com
6) Enable automated spam training: yes
7) Spam training user: spam.z7piyptt@domain.com
8) Non-spam(Ham) training user: ham.zxtj5fxh8@domain.com
9) SMTP host: mail.domain.com
10) Web server HTTP port: 80
11) Web server HTTPS port: 443
12) Web server mode: https
13) IMAP server port: 143
14) IMAP server SSL port: 993
15) POP server port: 110
16) POP server SSL port: 995
17) Use spell check server: yes
18) Spell server URL: http://mail.domain.com:7780/aspell.php
19) Configure for use with mail proxy: FALSE
20) Configure for use with web proxy: FALSE
21) Enable version update checks: TRUE
22) Enable version update notifications: TRUE
23) Version update notification email: admin@domain.com
24) Version update source email: admin@domain.com
25) Install mailstore (service webapp): yes
26) Install UI (zimbra,zimbraAdmin webapps): yes
Select, or 'r' for previous menu [r] 4
Password for admin@domain.com (min 6 characters): [iPZvUtXAno] 4dm!nZ1mbr@
Select, or 'r' for previous menu [r] r
Dari menu konfigurasi di atas, dapat kita sadari bahwa Zimbra membuat sebuah akun email admin@domain.com pada saat instalasi, yang berfungsi baik sebagai user email biasa, maupun sebagai user untuk urusan administrasi dan konfigurasi Zimbra.
Kembali ke Configuration Menu, ketik 'a' [Enter] untuk apply hasil konfigurasi password, kemudian ketik "Yes" dan [Enter] untuk save konfigurasi. Tekan [Enter] kembali untuk menyimpan file konfigurasi, lalu ketik 'Yes' dan [Enter] lagi untuk konfirmasi perubahan pada sistem. Lihat contoh di bawah :
*** CONFIGURATION COMPLETE - press 'a' to apply
Select from menu, or press 'a' to apply config (? - help) a
Save configuration data to a file? [Yes]
Save config in file: [/opt/zimbra/config.9907]
Saving config in /opt/zimbra/config.9907...done.
The system will be modified - continue? [No] Yes
Tunggu prosesnya hingga muncul permintaan notifikasi instalasi Zimbra. Ketik 'No' dan [Enter] seperti contoh berikut :
Notify Zimbra of your installation? [Yes] No
Tunggu kembali proses instalasinya hingga selesai, hingga muncul pesan berikut. Tekan [Enter].
Configuration complete - press return to exit
Alhamdulillah proses instalasi Zimbra akhirnya beres juga :D

Web Interface Zimbra

Admin Web Console

Setelah proses instalasi selesai, kita dapat langsung mengakses Zimbra Admin Console melalui browser dengan alamat https://10.10.10.2:7071 atau https://mail.domain.com:7071 jika menggunakan alamat domain (DNS). 
Jika ada security warning dari browser, abaikan saja. Hal ini terjadi karena Zimbra yang kita install tidak memiliki certificate HTTPS berbayar.
Login menuju Admin Console menggunakan user admin dengan password 4dm!nZ1mbr@ seperti yang sudah kita set pada saat instalasi. Berikut tampilan login dan halaman utama Admin Console :
Pada Admin Console ini kita bisa melakukan penambahan user dan group email (distribution list), melakukan konfigurasi server dan domain, serta dapat melakukan monitoring seperti service yang berjalan, antrian email, statistik penggunaan email, dll.

Web Mail Client

Web mail client dapat diakses oleh setiap pengguna melalui alamat http://10.10.10.2 atau http://mail.domain.com jika menggunakan alamat pada DNS. Berikut tampilan web mail client Zimbra :

Service Management Zimbra

Terkadang kita perlu melakukan restart, stop, atau start service secara manual setelah kita melakukan rekonfigurasi terhadap suatu aplikasi, begitu juga dengan Zimbra. Selain itu juga terkadang harus mengecek status suatu service apakah service tersebut berjalan atau tidak. Di sini saya akan memberitahukan cara untuk melakukan restart, start, stop, sekaligus melihat status service Zimbra.
Untuk mengatur service Zimbra dan melakukan konfigurasi lainnya melalui terminal pada sistem operasi (dalam bahasan ini berarti CentOS), Server Zimbra telah membuat sebuah akun khusus bernama 'zimbra'.
Kembali ke Server Zimbra, dan login sebagai root terlebih dahulu. Setelah login, gunakan user zimbra dengan cara :
# su zimbra
Setelah masuk ke mode user zimbra, lakukan perintah berikut untuk restart/start/stop seluruh service zimbra :
$ zmcontrol restart
$ zmcontrol start
$ zmcontrol stop
Untuk mengecek status service-service pada Zimbra, dapat dilakukan dengan cara :
$ zmcontrol status
Service Zimbra juga dapat diatur per-package, misalnya saya ingin melakukan restart terhadap service MTA Zimbra saja. Caranya seperti berikut :
$ zmmtactl restart
Berikut beberapa service yang dapat diatur dan dicek dengan cara serupa seperti contoh di atas yaitu :
- zmamavisdctl (Service Antivirus dan Antispam Zimbra)
- zmloggerctl (Zimbra Log File)
- zmmailboxdctl (Mailbox Service)
- zmmtactl (MTA Service)
- zmopendkimctl (OpenDKIM Service)
- zmsaslauthdctl (Zimbra Authentication Service)
- zmspellctl (Zimbra Spelling Service)
- zmstatctl (Zimbra Statistics Service)
- zmstorectl (Zimbra Store Service)
- zmswatchctl ( Zimbra Monitoring Service)

Log Monitoring Zimbra

Realtime Monitoring

Log Monitoring berfungsi untuk mengecek kelancaran sistem atau melakukan troubleshoot terhadap suatu kesalahan / error yang terjadi pada sistem. Untuk melakukan log monitoring terhadap zimbra secara realtime, cukup jalankan perintah berikut sebagai user root :
# tail -f /var/log/zimbra.log
Log lainnya selain berada pada /var/log/zimbra.log, juga banyak disimpan pada direktori /opt/zimbra/log/. Misalnya saya ingin melakukan monitoring terhadap konektivitas mailbox user zimbra :
# tail -f /opt/zimbra/log/mailbox.log

Filter Log

Melakukan filtering log sangat berguna juga untuk mencari log berdasarkan keyword tertentu. misalnya saya ingin melihat log email admin@domain.com seperti contoh di bawah :
# cat /var/log/zimbra.log |grep admin@domain.com
Cara filtering log ini juga berlaku untuk log yang lain.



Nampaknya segitu dulu tutorial mengenai Zimbra 8.6 Open Source Edition pada CentOS 6.5. Soalnya lumayan cape juga ngetik segitu banyak. Hehehe....(tutorial ini bukan hasil copas loh :D)
Kalo temen-temen mau tau lebih banyak tentang Zimbra atau ilmu yg lain, bisa tanya saya langsung lewat halaman kontak atau kolom komentar, atau boleh juga belajar secara privat asalkan domisilinya di Bandung. Hehehe...

Wassalamua'alaikum Wr. Wb.

Konfigurasi Bind9 (DNS Server) pada CentOS 6.5 dengan Chroot


Setelah sekian lama tidak posting karena banyak hal yang harus dibereskan :p, kali ini saya akan coba kembali sharing mengenai Konfigurasi Bind9 (DNS Server) pada CentOS 6.5 dengan Chroot. Kalo temen-temen masih belum paham tentang DNS, alangkah baiknya baca dulu blog mengenai Pengertian, Jenis, dan Konsep Domain Name System yang sudah saya share sebelumnya. Sekalian menambah traffic blog ini :p
Oke kita mulai...

Definisi Chroot

Sebelum masuk ke tahap instalasi dan konfigurasi, kita mesti mengenal dulu konsep chroot yang akan diterapkan pada instalasi Bind9.
Chroot (singkatan dari change root) merupakan sebuah mekanisme software sebagai "penjara" untuk membatasi sebuah proses untuk mengakses resource di luar area terbatas. Hal ini dapat menambah keamanan pada proses tersebut.
Seperti yang kita ketahui pada materi Pengertian, Jenis, dan Konsep Domain Name System, DNS dapat bekerja dengan intranet maupun internet. Dan kita tahu bahwa di dunia internet terdapat banyak kejahatan dunia maya, seperti yang sudah dibahas di sini. Apabila celah keamanan DNS yang kita buat terlihat oleh para cyber criminals (hacker), bukan tidak mungkin DNS kita akan diekspolitasi, bahkan dengan sistem operasinya. Dengan mengisolasi DNS pada Chroot, dapat meminimalisir eksploitasi yang dapat dilakukan pada sistem.

Persiapan

- Komputer server dengan sistem operasi CentOS 6.5 minimal
- IP Address, misalnya server kita memiliki IP 10.10.10.2
- Koneksi internet.
- Gunakan superuser (root) untuk melakukan instalasi dan konfigurasi.
- Text editor seperti vi atau nano, rekomendasi : nano untuk memudahkan pengetikan. Jika nano belum terinstall pada CentOS, jalankan perintah yum install -y nano
- Konfigurasi  Hostname. Tambahkan hostname pada file /etc/hosts dengan perintah nano /etc/hosts sehingga menjadi seperti berikut :

127.0.0.1 localhost.localdomain localhost
::1 localhost6.localdomain6 localhost6
10.10.10.2 host.domain.com host

*ubah host.domain.com dan host sesuai dengan FQDN (Fully Qualified Domain Name) yang akan digunakan, misalnya menjadi ns.mycompany.com dan ns. Restart server setelah konfigurasi hostname.

- Konfigurasi DNS Client untuk mengarahkan query DNS pada server itu sendiri. Edit file /etc/resolv.conf dengan perintah nano /etc/resolv.conf sehingga menjadi seperti berikut :

search domain.com
nameserver 10.10.10.2
nameserver 8.8.8.8

*ubah domain.com sesuai domain yang akan digunakan. Untuk nameserver kedua, gunakan public DNS, baik itu buatan sendiri atau DNS dari ISP. Contoh di atas menggunakan DNS Google.

Instalasi Bind9 dengan Chroot

Instalasi Bind9 dengan Chroot pada CentOS sangat mudah. Cukup jalankan perintah berikut :
# yum install -y bind bind-chroot bind-libs bind-utils
Dengan begitu, semua konfigurasi bind akan tersimpan pada direktori /var/named/chroot/

Konfigurasi Bind9

Konfigurasi Named

Pertama kali melakukan konfigurasi Bind9, kita harus mendefinisikan domain yang akan kita buat pada file named.conf.
Buat/edit file /var/named/chroot/etc/named.conf dengan perintah :
# nano /var/named/chroot/etc/named.conf
Tambahkan script berikut :

options {
directory "/var/named";
dump-file "/var/named/data/cache_dump.db";
statistics-file "/var/named/data/named_stats.txt";
};

include "/etc/rndc.key";

zone "domain.com" {
type master;
file "domain.com.record";
};

*ubah domain.com dengan nama domain yang akan digunakan, nama file pun dapat diubah sesuai keinginan.


Konfigurasi Record DNS

Dikarenakan kita mengarahkan domain.com menuju file domain.com.record, berarti kita harus menambahkan file /var/named/chroot/var/named/domain.com.record. Jalankan perintah berikut :
# nano /var/named/chroot/var/named/domain.com.record
Di sini, kita bisa menambahkan Record NS, A, MX, dan lain-lain (kecuali PTR, karena PTR digunakan pada reverse DNS). Berikut contoh konfigurasi record DNS untuk file domain.com.record :

@ IN SOA host.domain.com. root.domain.com. (
2015120901 ; Serial
1H ; Refresh
15M ; Retry
1W ; Expire
1D ) ; Minimum
IN NS host.domain.com.
IN MX 10 mail.domain.com.
IN A 10.10.10.3
mail IN A 10.10.10.4
host IN A 10.10.10.2
www IN A 10.10.10.3

Dari contoh di atas, dapat kita ambil kesimpulan bahwa :
- Name server yang digunakan yaitu host.domain.com sesuai dengan hostname server yang kita konfigurasi.
- host.domain.com diarahkan menuju IP 10.10.10.2, yaitu DNS server yg kita konfigurasi
domain.com memiliki mail exchanger (mail server) pada mail.domain.com yang diarahkan menuju IP 10.10.10.4.
- domain.com dan www.domain.com diarahkan menuju IP 10.10.10.3 sehingga jika ada user yang mengakses http://domain.com atau http://www.domain.com akan diarahkan menuju IP tersebut.

Menjalankan Service Bind9

Setelah melakukan konfigurasi, saatnya kita jalankan service bind. Lakukan perintah berikut :
# service named start
atau
# /etc/init.d/named start
Agar bind dapat otomatis berjalan ketika server booting. Lakukan perintah berikut :
# chkconfig named on

Tes hasil konfigurasi

Untuk melakukan pengetesan, lakukan perintah berikut :
# nslookup host.domain.com
Akan menghasilkan informasi seperti berikut :

Server:         10.10.10.2
Address:        10.10.10.2#53

Name:   host.domain.com
Address: 10.10.10.2

Jika informasi seperti di atas muncul, tandanya DNS Server Bind9 dengan Chroot pada CentOS 6.5 sudah berhasil kita bangun dan dapat digunakan oleh user.

Feel free to ask me if you have some questions :)

Dasar-dasar HTML Bagian 3 : Table, Div, dan Span

Terima kasih bagi semua yg sudah mau membaca tutorial-tutorial atau artikel yg saya tulis. Meskipun sebenernya sudah banyak tutorial ilmu IT di situs/blog lain, tapi di sini saya cuma mau membantu temen-temen agar lebih memahami ilmu di bidang IT dan sekaligus mengingatkan saya sendiri agar tidak lupa terhadap apa yg sudah saya pelajari.
Oke, kali ini Insyaallah saya akan memaparkan seri terakhir dari tutorial HTML, yaitu Dasar-dasar HTML Bagian 3 : Table, Div, dan Span. Just read, try, and learn :)

Table

Table pada HTML sangat berguna. Table digunakan untuk menyimpan data dalam bentuk tabel sehingga data mudah dibaca. Table dalam HTML memiliki opening tag <table> dengan closing tag </table>. Ketika kita ingin menampilkan konten dengan rapi dalam suatu tabel, sudah pasti kita memerlukan baris (row) dan kolom (column). Sebelum membuat tabel secara utuh, kita harus mempelajari tentang table row dan cara membuat column terlebih dahulu.

Table Row

Table Row memiliki tag <tr></tr>. Setiap kali kita membuat tag tersebut, maka sebuah baris baru dalam tabel akan dibuat. Table Row pada HTML merupakan tag yang dibuat terlebih dahulu setelah membuat tag <table>. Dengan kata lain, tag <tr></tr> berada di dalam tag <table></table>. Sehingga formatnya akan seperti berikut :

<table>
  <tr></tr>
  <tr></tr>
</table>

Table Data

Table Data berisi konten yang akan ditampilkan pada tabel. Table data memiliki tag <td></td>. Pembuatan kolom pada tabel HTML ditentukan oleh banyaknya table data (atau bisa dikatakan cell) pada setiap table row. Dengan kata lain, setiap membuat table data, tag <td></td> ditambahkan ke dalam tag <tr></tr>. Selain itu, setiap table row harus memiliki jumlah table data yang sama untuk membuat kolom yang sempurna. Dengan begitu, tabel yang dibuat memiliki format sebagai berikut : (contoh tabel 2 baris dengan 2 kolom)

<table>
  <tr>
    <td>Baris 1 Kolom 1</td>
    <td>Baris 1 Kolom 2</td>
  </tr>
  <tr>
    <td>Baris 2 Kolom 1</td>
    <td>Baris 2 Kolom 2</td>
  </tr>
</table>

Table Head & Table Body

Setelah mempelajari tentang pembuatan table sederhana dengan membuat baris dan kolom, selanjutnya kita akan mempelajari lebih lanjut mengenai struktur tabel pada HTML agar tabel yang dibuat lebih rapi dan terstruktur.
Seperti struktur HTML, tabel di dalam HTML juga memiliki head dan body. Table Head merupakan cara penulisan judul pada tabel. Bedanya, jika <title> dalam <head> HTML tidak ditampilkan pada halaman HTML, table head ditampilkan pada bagian atas tabel dengan font weight yang berbeda dengan data pada cell lain (mirip perbedaan antara heading dengan paragraf biasa). 
Untuk membuat table head, digunakan tag <thead></thead> setelah tag <table>. Setelah itu, untuk membuat baris pada table head, tambahkan <tr></tr> di dalam <thead></thead>. Terakhir, untuk menampilkan data dalam table head, digunakan tag <th></th> sebagai pengganti <td></td>. Dengan begitu, format table head akan menjadi seperti berikut :

<table>
  <thead>
    <tr>
      <th>Judul Tabel Kolom 1</th>
      <th>Judul Tabel Kolom 2</th>
    </tr>
  </thead>
</table>

Table Body merupakan bagian body pada tabel yang berisi data yang akan ditampilkan. Untuk membuat table body, digunakan tag <tbody></tbody> setelah closing tag </thead>. Selebihnya, ditambahkan tag <tr> dan <td> seperti contoh sebelumnya. Dengan begitu, table memiliki struktur yang sempurna seperti pada contoh berikut :

<table>
  <thead>
    <tr>
      <th>Judul Tabel Kolom 1</th>
      <th>Judul Tabel Kolom 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Data Baris 1 Kolom 1</td>
      <td>Data Baris 1 Kolom 2</td>
    </tr>
    <tr>
      <td>Data Baris 2 Kolom 1</td>
      <td>Data Baris 2 Kolom 2</td>
    </tr>
  </tbody>
</table>

Colspan

Bagaimana jika kita ingin menyatukan beberapa cell pada tabel seperti fungsi merge pada Excel? Kita dapat menggunakan colspan. Colspan merupakan attribute pada tabel, yang digunakan untuk menggabungkan dua cell atau lebih menjadi satu. Attribute colspan dapat digunakan pada tag <td> dan <th>. Berikut contoh penggunaan colspan, sehingga pada baris 1 hanya terdapat 1 cell, sedangkan pada baris 2 terdapat 2 cell :

<table>
  <tr>
    <td colspan="2">Baris 1 dengan colspan</td>
  </tr>
  <tr>
    <td>Baris 2 Kolom 1</td>
    <td>Baris 2 Kolom 2</td>
  </tr>
</table>

Style pada Table

Kita telah mempelajari struktur tabel secara keseluruhan. Akan tetapi tabel yang dihasilkan masih terlihat monoton. Untuk itu, kita akan coba membuat tabel lebih terlihat cantik menggunakan styling seperti pada tutorial sebelumnya. Di sini, saya akan kasih contoh kode sebuah halaman HTML yang berisi tabel dengan penambahan style yang mengubah tampilan table border, padding, dan font di dalam tabel. Silakan coba kode berikut, dan coba untuk lebih bereksperimen dengan mengubah value, teks, atau jumlah baris/kolom tabel, atau bahkan menambah style sendiri :

<html>
  <head>
    <title>Contoh Table</title>
  </head>
  <body>
    <table style="border-collapse:collapse;">
      <thead>
        <tr>
          <th colspan="2" style="color: red">Famous Monsters by Birth Year</th>
        </tr>
        <tr style="border-bottom:1px solid black;">
          <th style="padding:5px;"><em>Famous Monster</em></th>
          <th style="padding:5px;border-left:1px solid black;"><em>Birth Year</em></th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td style="padding:5px;">King Kong</td>
          <td style="padding:5px;border-left:1px solid black;">1933</td>
        </tr>
        <tr>
          <td style="padding:5px;">Dracula</td>
          <td style="padding:5px;border-left:1px solid black;">1897</td>
        </tr>
        <tr>
          <td style="padding:5px;">Bride of Frankenstein</td>
          <td style="padding:5px;border-left:1px solid black;">1944</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

Div

Salah satu tag yang akan banyak digunakan selanjutnya yaitu Div, singkatan dari Division (pembagian). Div pada HTML berfungsi untuk membagi halaman HTML menjadi container atau potongan-potongan berbeda. Div sangat fleksibel karena dapat digabungkan dengan style, dapat diisi dengan konten seperti teks dan gambar, juga dapat ditambahkan link pada div. Nantinya, div akan banyak digunakan saat mempelajari CSS. Karena dengan div, pembentukan tampilan sebuah halaman HTML akan menjadi lebih mudah. Untuk membuat div, digunakan tag <div></div>. Untuk dapat memahami lebih lanjut mengenai div, dapat dicoba kode berikut :

<!DOCTYPE html>
<html>
  <head>
    <title>Contoh Div</title>
  </head>
  <body>
    <div style="width:50px; height:50px; background-color:red"></div>
    <div style="width:50px; height:50px; background-color:blue"></div>
    <div style="width:50px; height:50px; background-color:green"></div>
    <a href="http://www.google.com"><div style="width:50px; height:50px; background-color:yellow"></div></a>
</body>
</html>


Span

Jika div membagi halaman HTML menjadi beberapa potongan berbeda dengan style berbeda, Span dapat mengontrol style pada bagian yang lebih kecil lagi seperti teks. Span menggunakan tag <span></span>. Sebagai contoh, jika kita ingin mengubah kata komputer menjadi warna merah pada kalimat Saya suka belajar komputer, maka tinggal ditambahkan span diantara kata komputer. Sehingga menjadi seperti berikut : Saya suka belajar <span style="color: red">komputer</span>
Coba kode berikut untuk lebih memahami span :

<!DOCTYPE html>
<html>
  <head>
    <title>Result</title>
  </head>
  <body>
    <p>My favorite font is <span style="font-family: Impact">Impact</span>!</p>
  </body>
</html>



Sekian tutorial Dasar-dasar HTML dari saya, terimakasih sudah mau membaca tutorial ini. Semoga tutorial ini dapat bermanfaat buat temen-temen semua. 

Tutorial Sebelumnya : Dasar-dasar HTML Bagian 2


Dasar-dasar HTML Bagian 2 : List, Comment, dan Styling

List pada HTML

List pada HTML merupakan cara penulisan daftar suatu komponen (text, gambar, dll) dalam HTML seperti penulisan daftar menu, daftar nama, dll. Sepeti contoh :
1. Teks urutan pertama
2. Teks urutan kedua
3. Teks Urutan ketiga
List dibagi menjadi 2 macam, yaitu Ordered List (OL) dan Unordered List (UL).

Ordered List

Secara sederhana, ordered list merupakan daftar berdasarkan nomor urut. Ordered List memiliki tag HTML <ol> dengan tag penutup </ol>. Untuk menambahkan setiap satu daftar item pada setiap list tag, menggunakan tag li (List Item), yaitu <li>Item 1</li>. Dengan begitu, cara penulisan Ordered List dapat dilihat sebagai berikut :

<ol>
  <li>Item 1</li>
  <li>Item 2</li>
</ol>

Berikut contoh penggunaan Ordered List :

<!DOCTYPE html>
<html>
  <head>
    <title>Ordered List</title>
  </head>
  <body>
    <h1>List of my favorite things</h1>
    <ol>
      <li>Raindrops on roses</li>
      <li>Whiskers on kittens</li>
      <li>Bright copper kettles</li>
      <li>Warm woolen mittens</li>
    </ol>
    <h2>List of things</h2>
    <ol>
      <li>computer</li>
      <li>smartphone</li>
      <li>and a nerd</li>
    </ol>
</body>
</html>


Unordered List

Bagaimana jika kita tidak ingin memperdulikan urutan angka pada daftar? Kita dapat menggunakan Unordered List (UL). Unordered List menampilkan daftar pada HTML dengan menampilkan tanda bulat (bullet point). Penulisan pada Unordered List hampir mirip dengan Ordered List. Bedanya, jika Ordered List menggunakan tag <ol>, Unordered List menggunakan tag <ul> dengan tag penutup </ul>.
Perhatikan dan coba code berikut :

<!DOCTYPE html>
<html>
  <head>
    <title>Unordered List</title>
  </head>
  <body>
    <h1>Some random thoughts</h1>
    <p>This is my random thoughts</p>
    <ul>
      <li>work hard</li>
      <li>get rich</li>
      <li>getting married</li>
      <li>going to heaven</li>
    </ul>
  </body>
</html>

Penggabungan Ordered List dan Unordered List

Ordered List dan Unordered List dapat digabungkan dengan 2 cara, yaitu Ordered list di dalam Unordered List, dan sebaliknya. Berikut contoh penggunaan penggabungan Ordered List dan Unordered List :

<!DOCTYPE html>
<html>
  <head>
    <title>Penggabungan list</title>
  </head>
  <body>
    <ol>
      <li>Hobi
        <ul>
          <li>Main Komputer</li>
          <li>Main Game di Komputer</li>
        </ul>
      </li>
      <li>Cita-cita
        <ul>
          <li>Naik Haji</li>
          <li>Masuk Surga</li>
        </ul>
      </li>
    </ol>
    <ul>
      <li>Klub Sepakbola Favorit
        <ol>
          <li>Livorno</li>
          <li>Stoke City</li>
          <li>Real SOciedad</li>
        </ol>
      </li>
      <li>Film Favorit
        <ol>
          <li>Lord of the ring</li>
          <li>Blackhat</li>
          <li>Bloody Monday</li>
        </ol>
      </li>
    </ul>
  </body>
</html>

Comment

Comment pada HTML berfungsi untuk membuat catatan/note pada halaman HTML. Selain itu, comment juga kadang digunakan untuk menutupi (disable) suatu kode. Comment tidak akan ditampilkan pada halaman HTML. Penulisan comment diawali dengan tanda <!-- dan diakhiri dengan tanda --> Perhatikan contoh berikut :

<!-- Contoh penggunaan Comment -->
<!-- <p>Kode ini tidak akan muncul</p>
<p>Ini juga tidak akan muncul</p> -->
<p>Kode ini bakal muncul</p>
<!-- comment -->


Styling

Styling merupakan cara untuk memperindah tampilan pada HTML. Pada umumnya, styling pada HTML dikerjakan oleh CSS yang terpisah. Akan tetapi, HTML juga memiliki bahan-bahan dasar untuk sedikit mempercantik tampilannya sendiri tampa menggunakan CSS yang terpisah. Untuk melakukan styling, HTML menggunakan berbagai attribute di dalam tags-nya. Attribute merupakan sebuah karakteristik atau deskripsi untuk konten pada elemen HTML. Hal ini sedikitnya telah kita pelajari pada Tutorial Dasar-dasar HTML Bagian 1 seperti attribute src di dalam tag <img>, atau href di dalam tag <a>.
Pada bahasan Styling ini, kita akan mencoba mengubah tampilan font, alignment, dan background color.

Font Size

Font Size berfungsi untuk mengubah ukuran teks menjadi besar atau kecil, sesuai dengan ukuran pixel. Untuk mengubah font size, kita dapat menggunakan attribute style. Isi attribute style dengan value font-face, diikuti dengan tanda titik dua (:), lalu isi tambahkan ukurannya, dan diakhiri dengan px (kependekan dari pixel). Sehingga contoh formatnya seperti berikut :
<p style="font-face: 12px">
Agar dapat dipahami lebih lanjut, bisa dicoba contoh code berikut :

<!DOCTYPE html>
<html>
  <head>
    <title>Penggunaan Font Size</title>
  </head>
  <body>
    <p style="font-size:10px"> Some text for you to make tiny! </p>
    <p style="font-size:20px"> Some text for you to make normal size!</p>
    <p style="font-size:40px"> Some text for you to make super big!</p>
</body>
</html>


Font Color

Penggunaan attribute style sangat berguna, karena tidak hanya digunakan untuk tag <p> saja, akan tetapi dapat digunakan oleh berbagai macam tag. Kali ini, kita akan gunakan attribute style pada tag lain.
Untuk mengubah Font Color (warna font), cukup tambahkan value color:blue pada attribute style (atau warna lain yang dapat dilihan di sini). Contoh :
<h2 style="color: red">
Bagaimana jika kita ingin mengubah ukuran font dan warna font sekaligus? Simple, cukup gabungkan kedua value di dalam attribute style dengan dipisahkan oleh semicolon (;). Contoh :
<h2 style="color: red; font-size: 20px">
Agar kita dapat memahami lebih lanjut, pada contoh di bawah saya juga akan mencoba menggabungkan font-size dengan color. Perhatikan dan coba kode berikut :

<!DOCTYPE html>
<html>
  <head>
    <title>Mengubah Warna Font</title>
  </head>
  <body>
    <h1 style="color: green; font-size: 16px">Heading</h1>
    <p style="color: violet">A giant bear and a little duck were friends.</p>
    <p style="color: red; font-size: 10px">But the bear got hungry and ate the duck.</p>
  </body>
</html>


Font Family

Setelah mempelajari font-size dan color, selanjutnya kita akan coba mengubah jenis font. Untuk mengubah jenis font, kita menggunakan value font-family. Contoh :
<h1 style="font-family: Arial">Ini Heading dengan Font Arial</h1>
Untuk daftar font yang dapat digunakan, dapat dilihat di sini.
Selain itu, kita juga dapat menggunakannya pada tag lain. Coba kode berikut :

<!DOCTYPE html>
<html>
  <head>
    <title>Loving the font changes</title>
  </head>
  <body>
    <h1 style="font-family: Arial">Big title</h1>
    <ol>
      <li style="font-size: 16px; font-family: Arial">This item is big Arial.</li>
      <li style="font-size: 12px; font-family: Verdana">This item is medium Verdana.</li>
      <li style="font-size: 10px; font-family: Impact">This item is small Impact.</li>
    </ol>
  </body>
</html>

Alignment

Selain mengubah tampilan teks, kita juga dapat mengubah penjajaran (alignment) teks menjadi rata kiri, kanan, atau tengah. Untuk mengubah alignment, tambahkan value teks-align pada attribute style. Perhatikan dan coba kode berikut :

<!DOCTYPE html>
<html>
  <head>
    <title>Alignment</title>
  </head>
  <body>
    <h3 style="text-align:center">Favorite Soccer Teams</h3>
    <ol>
      <li style="text-align:left">Lazio</li>
      <li style="text-align:center">QPR</li>
      <li style="text-align:right">Real Betis</li>
    </ol>
  </body>
</html>

Backgroud Color

Di samping styling pada teks, HTML juga dapat mengubah warna latar (Background Color) pada halamannya. Untuk mengubah Background Color, attribute style ditambahkan dengan value background-color, seperti penggunaan color untuk mengubah font color. Perhatikan dan coba kode berikut :

<!DOCTYPE html>
<html>
  <head>
    <title>Background Color</title>
  </head>
  <body style="background-color: brown">
    <h3>Favorite Soccer Teams</h3>
    <ol style="background-color: yellow">
      <li>Empoli</li>
      <li>Vitesse</li>
      <li>West Brom</li>
    </ol>
  </body>
</html>

Strong & Emphasize

Strong merupakan cara untuk membuat teks menjadi bold. Strong menggunakan tags <strong></strong>. Sedangkan Emphasize merupakan cara untuk membuat teks menjadi italic. Emphasize menggunakan tags <em></em>. Coba contoh kode berikut :

<!DOCTYPE html>
<html>
  <head>
    <title>Strong & Emphasize</title>
  </head>
  <body>
    <p>Do you <em>hear</em> the people <strong>sing</strong>?</p>
    <p>No <em>I don't</em>. I'm <strong><em>too</em></strong> busy eating <strong>cake</strong>.</p>
  </body>
</html>






Bersambung......
Tutorial Sebelumnya : Dasar-dasar HTML Bagian 1

Dasar-dasar HTML Bagian 1


Selamat pagi/siang/sore/malam teman-teman. Kali ini saya coba ketik tutorial dasar HTML buat temen-temen yang baru mau belajar tentang web programming. Semoga bermanfaat.

Definisi HTML

Hyper Text Markup Language (HTML) adalah sebuah bahasa markah yang digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi di dalam sebuah penjelajah web Internet dan pemformatan hiperteks sederhana yang ditulis dalam berkas format ASCII agar dapat menghasilkan tampilan wujud yang terintegerasi. Dengan kata lain, berkas yang dibuat dalam perangkat lunak pengolah kata dan disimpan dalam format ASCII normal sehingga menjadi halaman web dengan perintah-perintah HTML. -Dikutip dari Wikipedia

Mengapa belajar HTML?

Setiap halaman web yang temen-temen lihat menggunakan sebuah bahasa pemrograman bernama HTML. HTML dapat dianalogikan sebagai sebuah kerangka yang membentuk setiap stuktur halaman web. Pada tutorial ini, kita akan gunakan HTML untuk menambahkan paragrap, heading, gambar dan link/tautan ke dalam sebuah halaman web. Lihat contoh berikut :

<!DOCTYPE html>
<html>
<p>Hello World</p>
</html>

Perhatikan kode dengan tanda kurung <>, itulah HTML. Seperti bahasa pemrograman lain, HTML memiliki penulisan khusus.

Editor, Ekstensi, dan Cara Buka File HTML

HTML dapat dibuat hanya menggunakan Text Editor biasa seperti notepad, atau juga dapat digunakan software text editor lain seperti Notepad++ (free), sublime, atau text & graphical editor seperti Adobe Dreamweaver.

Jika ingin mencoba menggunakan Notepad++, bisa download melalui link berikut :
Download Notepad++ 6.7.9.2

Secara default, sebuah file HTML memiliki ekstensi file .html (atau .htm). Akan tetapi, dalam integrasi dengan bahasa pemrograman yang lain (contoh : PHP), maka file ekstensi yang digunakan juga harus mengikuti bahasa pemrograman tersebut (contoh .php). Maka dari itu, code HTML yang sudah dibuat pada Editor, harus di-save dengan ekstensi yang sesuai.
File .html yang sudah di-save dapat langsung dibuka (double click) untuk melihat hasilnya melalui browser.

HTML dan CSS

HTML merupakan singkatan dari HyperText Markup Language. Hypertext yang berarti "text dengan tautan (link) di dalamnya." Setiap saat kita klik pada sebuah kata yang membawa kita ke dalam sebuah halaman web, berarti kita telah meng-klik sebuah hypertext.
Markup language merupakan sebuah bahasa pemrograman yang digunakan untuk mengubah text menjadi text itu sendiri atau menjadi suatu hal yang lain pada halaman web. HTML dapat mengubah text menjadi gambar, link, tabel, daftar berurut, dan lain-lain.
Apa yang membuat sebuah halaman web menjadi terlihat bagus? Itu merupakan efek penggunaan CSS—Cascading Style Sheets. CSS dianalogikan sebagai kulit dan makeup yang membungkus kerangka yang dibuat HTML. Kali ini, kita akan belajar mengenai HTML terlebih dahulu, dan nanti Insyaallah saya akan jabarkan juga tutorial mengenai CSS.

Hal pertama yang harus dilakukan adalah membuat kerangka pada halaman.
a. Selalu tambahkan <!DOCTYPE html> pada baris pertama. Hal ini bertujuan untuk memberitahu browser bahasa apa yang digunakan (dalam hal ini HTML).
b. Selalu tambahkan <html> pada baris berikutnya. Ini adalah permulaan kode HTML.
c. Selalu tambahkan </html> pada baris terakhir. Ini adalah penutup kode HTML.

Terminologi Dasar

Semua yang berada di dalam tanda <> disebut dengan tags. Hampir setiap tags memiliki pembuka dan penutup.
Contoh tag pembuka: <html>
Contoh tag penutup: </html>

Tags dapat dianalogikan sebagai tanda kurung. Ketika ada kurung buka, harus ada kurung tutup. Selain itu, tags juga harus ditutup dengan urutan yang benar. Tag pembuka yang terakhir yang harus ditutup terlebih dahulu, seperti contoh di bawah.

<tag pertama><tag kedua>Teks Biasa</tag kedua></tag pertama>

Sebagai latihan, coba ketik kode berikut, save dengan format .html, kemudian lihat hasilnya :

<!DOCTYPE html>
<html>
Hello World
</html>


Membuat Head

Ada 2 bagian pada file HTML: head dan body. Kita mulai dengan head.
Head dapat menampung informasi mengenai file HTML yang dibuat, seperti judul halaman web (title). Title adalah tulisan yang kita lihat pada baris judul browser atau tab halaman. Sebagai contoh, judul halaman web ini yaitu "Dasar-dasar HTML Bagian 1 | RNetworks | Berbagi ilmu IT pada Blog".
Sebagai latihan, coba kode di bawah ini untuk membuat head pada HTML.

<!DOCTYPE html>
<html>
<head>
<title>My Webpage</title>
</head>
</html>


HTML Body

Body merupakan tempat menyimpan konten HTML seperti text, gambar, dan link. Konten pada body merupakan apa yang dapat dilihat langsung pada halaman web.
Body di simpan di dalam tag <html>, setelah tag <head> . Sebagai contoh, perhatikan dan coba kode di bawah ini :

<html> 
<head> 
<title>Web Saya</title> 
</head> 
<body>
<p>Paragraf 1</p>
<p>Paragraf 2</p>
</body>
</html>


Jika kita save lalu buka file HTML dengan kode di atas, maka akan menghasilkan tulisan :
Paragraf 1
Paragraf 2

Headings & Paragraf pada HTML

Heading pada HTML merupakan sub judul dari konten sebuah halaman web. Heading memiliki berbagai jenis ukuran text dengan font weight (ketebalan huruf) yang berbeda dengan paragraf biasa, h1 dengan penulisan <h1>Teks Heading</h1> untuk ukuran paling besar, dan h6 dengan penulisan <h6>Teks Heading</h6> untuk ukuran paling kecil. Hal ini dapat memudahkan cara penulisan paragraf yang bercabang.
Paragraf pada HTML seperti layaknya menulis paragraf pada Ms Word atau text editor lainnya. Paragraf memiliki cara penulisan <p>Teks Paragraf</p>. Setiap tag penutup paragraf, berarti sebuah paragraf dibuat, dan akan membuat paragraf baru pada baris selanjutnya untuk teks berikutnya. Untuk penulisan lebih lanjut, dapat disesuaikan alignment, jenis font, warna pada paragraf.
Untuk melihat perbandingan antara Heading dan Paragraf, dapat dicoba code berikut :

<!DOCTYPE html>
<html>
  <head>
    <title>
      Headings & Paragraphs
    </title>
  </head>
  <body>
    <h1>Ini h1</h1>
    <p>Ini paragraf di dalam h1</p>

    <p>Ini paragraf lain di dalam h1</p>
    <h2>Ini h2</h2>
    <p>
Ini paragraf di dalam h2</p>
    <h3>Ini h3</h3>
    
<p>Ini paragraf di dalam h3</p>
    <h4>Ini h4</h4>
    
<p>Ini paragraf di dalam h4</p>
    <h5>Ini h5</h5>
    
<p>Ini paragraf di dalam h5</p>
    <h6>Ini h6</h6>
    
<p>Ini paragraf di dalam h6</p>
  </body>
</html>

Link pada HTML

Bagaimana cara agar membuat seseorang dapat berpindah dari satu halaman web ke halaman lain? Kita dapat menggunakan Hyperlink, atau disingkat dengan link. Dengan Link, kita dapat membuat sebuah elemen pada konten HTML (Text, gambar, dll) dapat diklik dan memindahkan user ke halaman lain, baik halaman lain yang berada dalam satu situs web, maupun ke halaman situs web lain. Caranya :
Pertama, ada sebuah tag pembuka <a> dan buat sebuah attribute dengan nama href pada tag tersebut yang mengarah pada sebuah URL sebuah halaman web, contoh http://reznetworks.blogspot.com.
Setelah itu, tambahkan elemen (contoh teks) sebagai deskripsi/konten untuk di-klik.
Terakhir, tambahkan closing tag </a> setelah konten tersebut.
Coba kode berikut untuk untuk memahami lebih lanjut :

<!DOCTYPE html>
<html>
  <head>
    <title>Contoh Link</title>
  </head>
  <body>
    <a href="http://reznetworks.blogspot.com">RNetworks</a>
  </body>
</html>


Menambahkan Images pada HTML

Image atau gambar pada HTML dapat dimasukkan/dipanggil menggunakan tag <img>. Tag ini sedikit berbeda dengan tag yang lain. Jika tag lain memasukkan konten diantara opening & closing tag, pada tag img kita memberitahukan letak gambar menggunakan atribut src. Tag ini berbeda juga karena tidak menggunakan closing tag, tetapi tag img memiliki tanda / di dalam tagnya sebagai penutup. Sehingga, formatnya akan seperti : <img src="url" />. URL pada img dapat berupa link gambar dari situs lain, atau gambar pada suatu direktori/folder di komputer kita.
Berikut contoh code penggunaan img pada HTML :

<!DOCTYPE html>
<html>
  <head>
    <title>Image</title>
  </head>
  <body>
    <img src="http://s3.amazonaws.com/codecademy-blog/assets/f3a16fb6.jpg" />
    <img src="D:\folder\gambar.jpg" />
  </body>
</html>

Menambahkan Link pada Image

Sebuah gambar/image juga seringkali dibuat menjadi sebuah link dengan tujuan untuk lebih menarik minat pengunjung halaman web mengklik pada link tersebut. Untuk menambahkan link pada image dalam HTML, masukkan tag <img> diantara tag <a></a>. Perhatikan contoh berikut :

<!DOCTYPE html>
<html>
  <head>
    <title>Link & Image</title>
  </head>
  <body>
    <a href="http://www.wikipedia.org"><img src="https://upload.wikimedia.org/wikipedia/en/3/34/ISync_icon.png" /></a>
</body>
</html>




Bersambung ke Dasar-dasar HTML Bagian 2