03 HTML – Dasar-dasar HTML
Hypertext Markup Language (HTML) merupakan dasar untuk membuat sebuah halaman website. Dokumen dan aplikasi yang dapat berjalan di atas web browser umumnya memiliki format hypertext markup language (HTML). Meskipun sekarang terdapat banyak tool atau software yang dapat digunakan untuk merancang sebuah halaman secara WYSIWYG (what you see is what you get), jadi apa yang anda lihat itulah yang akan anda dapatkan seperti frontpage, dreamweaver, adobe golive, dll. Namun anda harus tetap menguasai HTML karena HTML merupakan dasar apabila Anda ingin mempelajari dan lebih mendalami tentang web programming. Hal ini menunjukan bahwa sangat pentingnya mempelajari dasar-dasar HTML. Karena itu untuk dapat melakukan pemrograman aplikasi di atas web anda harus terlebih dahulu menguasai HTML.
Pada bab ini akan dipelajari dasar-dasar penggunaan kode-kode HTML daiantaranya : Struktur dasar HTML, dasar penggunaan TAG, penggunaan komentar, penggunaan tag break row, penggunaan tag paragraf, penggunaan tag center, penggunaan tag heading, menampilkan garis horizonatal dan penggunaan tag divisi.
Kegunaan HTML
HTML berfungsi sebagai pondasi sebuah halaman website. Adapun yang dapat dilakukan dengan HTML adalah sebagai berikut
- Membungkus element-element tertentu sesuai kebutuhan
- Membuat heading atau format judul
- Membuat Komentar
- Membuat table
- Membuat List
- Membuat Paragraf
- Membuat Form
- Membuat Tombol
- Membuat Garis
- Membuat Huruf Tebal, Miring, Garis Bawah, Garis Coret
- Menampilkan Gambar
- Memutar File MP3 dan Video
- Membuat Iframe
- Dan masih banyak yang lain
Sampai saat ini HTML sudah sampai pada versi 5. HTML 5 sudah memiliki banyak sekali fitur tambahan yang salah satunya dengan HTML5 memungkinkan kita untuk membuat streaming video tanpa bantuan Plugin pada WebBrowser seperti VLC, Flash Player,dll.
Struktur Dokumen HTML
Setiap dokumen atau halaman HTML memiliki struktur atau susunan file seperti terlihat pada contoh berikut :
<!DOCTYPE html> <html> <head> <title>judul yang ingin ditampilkan pada title bar web browser</title> </head> <body> pada bagian ini dapat berisikan perintah-perintah untuk menampilkan : Text, gambar, suara dan lain-lain. </body> </html>
Seperti terlihat, struktur file HTML diawali dengan sebuah tag <html> dan ditutup dengan </html>. Di dalam tag ini terdapat dua buah bagian besar, yaitu yang diapit oleh tag <head> … </head> dan tag <body> … </body>.
Header dari halaman HTML diapit oleh tag <head> dan bagian ini tidak ditampilkan pada browser. Bagian ini berisi tag-tag header seperti <title> … </title> yang berfungsi untuk menampilkan judul pada title bar window pada web browser. Tag lain misalnya <meta> dan tag-tag lainya yang akan kita pelajari selanjutnya.
Bagian kedua yang diapit oleh tag body merupakan bagian yang akan ditampilkan pada halaman web browser nantinya. Pada bagian ini anda dapat menuliskan semua jenis informasi berupa teks dengan bermacam format maupun gambar yang ingin anda sampaikan pada pengguna nantinya.
Dasar-Dasar Penggunaan TAGS
Tag HTML umumnya berupa tag yang berpasang-pasangan dan diapit dengan simbol < dan >. Pasangan atau penutup perintah dari sebuah tag ditandai dengan tanda / . misalnya pasangan dari tag <example> adalah </ example >.
Sebagian tag telah digunakan pada contoh kode HTML di atas. Sekarang marilah kita kenali berbagai hal yang mendasar tentang tag. Setiap tag memiliki nama, nama tag ditulis dalam tanda < dan >. Antara nama tag dan tanda < ditulis tanpa spasi sama sekali. Nama tag dapat ditulis dengan huruf kecil, kapital maupun campuran.
Beberapa tag ada yang menggunakan atribut di dalamnya. Contoh : <P align=”center”>, pada contoh ini P adalah nama tag, sedangkan align adalah nama atribut dan center adalah nilai atribut.
| Tag | Nama Tag | Fungsi |
| <!– …. -> | Komentar | Digunakan untuk Memberi sebuah Komentar atau keterangan |
| <!DOCTYPE html> | Tipe Dokument | Digunakan untuk Mendefinisikan tipe document |
| <a> …. </a> | Link | Mendefinisikan sebuah anchor, digunakan untuk saling menanutkan antara satu dokumen HTML dengan dokumen HTML yang lain |
| <b> …. </b> | Bold | Membuat Text menjadi Tebal |
| <p> …. </p> | Paragraph | Membuat Paragraf |
| <h1> …. </h1> | Heading 1 | Membuat Heading Satu |
| <h2> …. </h2> | Heading 2 | Membuat Heading Dua |
| <h3> …. </h3> | Heading 3 | Membuat Heading Tiga |
| <h4> …. </h4> | Heading 4 | Membuat Heading Empat |
| <h5> …. </h5> | Heading 5 | Membuat Heading Lima |
| <h6> …. </h6> | Heading 6 | Membuat Heading Enam |
| <body> …. </body> | Body/Badan | Mendefinisikan Body/Isi document HTML |
| <head> …. </head> | Kepala | Mendefinisikan Bagian Kepala Dokumen HTML |
| <title> …. </title> | Judul Titel Bar | Mendifinisikan Judul Halaman pada Title Bar di Web Browser |
| <div>… </div> | Divisi | Mendifinisikan Divisi Halaman |
| <link> …. </link> | Link | Mendefinisikan Hubungan Antar Dokumen |
| Dll |
Element HTML
Element pada HTML merupakan isi atau object yang berada pada tag. Maksudnya, isi yang ada diantara tag pembuka dan tag penutup (termasuk jenis itu sendiri) contoh :
<!DOCTYPE html> <html> <head> <title>Title Website</title> </head> <body> <strong><h2>Pengenalalan Element HTML</h2></strong> </body> </html>
Pada contoh ditas <h2> Pengenalan Element HTML </h2> merupakan element H2 dan beserta isinya. Dalam element ini bias berupa text ataupun tag lain missal <a> <b> dan sebagainya.
Atribut pada HTML
Atribut merupakan informasi tambahan yang digunakan di dalam tag pembuka. Informasi ini bias berupa instruksi untuk memberikan efek warna, ketebalan, ukuran, posisi,dll. Atribut biasanya memiliki 2 bagian yaitu nama dan nilai, dengan cara penulisan yaitu name=”Value”. Penulisan nilai/value diapit oleh dua tanda kutip (bias digunakan kutip dua, kutip satu atau tanpa kutip).
Penulisan atribut pada HTML diawali dengan penulisan tag, dan didalam tag tersebut diberi atribut dan element. Contoh :
<!DOCTYPE html> <html> <head> <title>Title Website</title> </head> <body> <h2 align="center">Pengenalalan atribut HTML</h2> </body> </html>
Keterangan :
- <h2> adalah tag Heading 2
- Align adalah nama dari atribut
- Center adalah nilai dari atribut
- Pengenalan Atribut HTML adalah Element dari tag H2
Tidak semua tag ini membutuhkan atribut didalamnya, namun bagi anda yang bergelut diweb programming akan sering menjumpai tag yang didalamnya terdapat atribut.
Daftar ISI Dasar-Dasar Pemrograman WEB
- 01 HTML – Pendahuluan
- 02 HTML – Software Pendukung
- 03 HTML – Dasar-dasar HTML
- 04 HTML – Daftar Lengkap TAG HTML
- 05 HTML – Tag < br > BreakRow
- 06 HTML – Tag < p > Paragraph
- 07 HTML – Tag Heading
- 08 HTML – Tag Iframe
- 09 HTML – Tag DIV dan SPAN
