Web Tutorial Indonesia 
Sekarang tiba saatnya dalam tutorial ini kita akan menyelesaikan pembuatan halaman html dengan struktur pada umumnya. Pengetahuan tentang Struktur umum HTML akan membantu kita untuk memulai pembuatan halaman HTML secara benar.
Sebelum kita menambahkan tag yang lain, mari kita buka kembali skrip HTML yang telah kita buat pada tutorial part 1, dibawah ini adalah skrip akhir pada tutorial part 1.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> </head> </html> |
Perhatikan skrip diatas, masih terdapat tag-tag dan belum ada isi, yang ketika dirender atau dijalankan dalam web browser tidak akan memunculkan tulisan apapun, meskipun begitu tag-tag diatas adalah kerangka utama dalam pembuatan halaman web.
Penambahan Tag Title
Langkah selanjutnya adalah menambahkan judul dalam halaman web kita, bagaimana caranya? Caranya adalah dengan menambahkan tag title diantara tag head kita. Tag title diawali dengan penulisan skrip <title> dan diakhiri dengan skrip </title>, Tag title berfungsi sebagai judul dari halaman web, tambahkan skrip dibawah ini untuk menambahkan tag title.
|
1 |
<title>Judul Halaman Saya</title> |
Tambahkan skrip diatas tepat dibawah meta tag, sehingga skrip kita menjadi seperti ini:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Judul Halaman Saya</title> </head> </html> |
Setelah itu simpan file dan buka file menggunakan browser kesayangan anda, jika anda sudah membuka file tersebut di browser, cukup klik Refresh untuk melihat perubahan dalam browser. Setelah kita Refresh browser kita, maka tampilan browser akan tampak seperti ini:
Penampakan dari tag title pada browser
Pada gambar diatas, pada gambar bagian kanan terdapat tulisan “Judul Halaman Saya” pada tab browser.
Penambahan Tag dan Elemen Body
Selanjutnya kita tambahkan tag body, didalam tag body ini kita bisa menambahkan konten yang berupa teks atau pun gambar dan konten yang telah ditambahkan akan tampil dalam browser. Tag body diawali dengan skrip <body> dan berpasangan dengan tag penutupnya </body> .
Tag body beserta pasangan penutupnya kita tambahkan persis dibawah penutup tag head </head>, silahkan copy skrip berikut ini dalam teks editor anda.
|
1 2 3 |
<body> </body> |
Sehingga hasil akhir skrip kita menjadi seperti ini:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Judul Halaman Saya</title> </head> <body> </body> </html> |
Tinggal sedikit lagi akan selesai pembuatan struktur umum halaman html, skrip diatas masih dalam bentuk kerangka alias belum terdapat isi, mari kita kerangka diatas dengan konten. Kita akan memberi konten dalam tag body.
Tag dan Elemen Div
Dalam tag body, kita akan sisipkan skrip <div> beserta penutupnya </div>, dan memberikan teks “Ini adalah div” didalam tag div, sehingga skrip tag div beserta isinya seperti dibawah ini:
|
1 |
<div>Ini adalah div</div> |
Div berarti divisi atau area dalam dokumen HTML kita, tag ini sangat sering digunakan untuk memberikan style pada dokumen HTML. Tag ini juga berfungsi sebagai pengelompokan elemen dan konten dalam file HTML. Tag div bisa digunakan di dalam tag div juga alias bisa bersarang antara satu dengan lainnya. Tag ini juga bisa disebut tag block-line, sehingga tag <div> bisa digunakan sebagai container atau pembatas satu struktur HTML dengan struktur lainnya.
Lebih jelas dengan Div dalam HTML, anda bisa membaca artikel berikut: <div> element
Terdapat beberapa tag yang masuk kategori Block-line atau Block-style, contohnya tag paragraf (<p>), heading (<h1>..<h6>), dan tabel (<table>). Tag Block-line akan membuat sebuah ‘blok’ dalam struktur HTML. Di dalam tag ini bisa terdapat tag block lain, maupun tag In-line.
Kembali ke skrip, setelah penambahan skrip tag div, maka hasil skrip kita menjadi seperti ini:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Judul Halaman Saya</title> </head> <body> <div>Ini adalah div</div> </body> </html> |
Setelah itu simpan file HTML anda, dan refresh halaman browser, dalam halaman browser kita menampilkan tulisan “Ini adalah div”. Lihat penampakan halaman browser berikut:
Penampakan isi dari tag div pada browser
Tidak ada yang istimewa dari tulisan itu, tapi yang perlu dipahami bahwa tulisan tersebut didalam tag div. Sehingga kita bisa menambahkan style pada tulisan tersebut, seperti merubah warna background, atau lainnya.
Penambahan Tag Span
Tag terakhir yang akan kita tambahkan adalah tag span, tag span memiliki kesamaan dengan tag div yaitu sama-sama berfungsi untuk memblok teks. Tag span diawali dengan skrip <span> dan diakhiri dengan penutupnya </span>, kita akan menambahkan tulisan “ini adalah span” dalam tag span ini, lihat skrip tag span berikut:
|
1 |
<span>Ini adalah span</span> |
Tambahkan skrip diatas persis dibawah penutup tag div, sehingga hasil akhir skrip kita menjadi seperti ini:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Judul Halaman Saya</title> </head> <body> <div>Ini adalah div</div> <span>Ini adalah span</span> </body> </html> |
Simpanlah file HTML anda, setelah itu refresh halaman browser anda dan akan tampil seperti gambar berikut:
Penampakan isi dari tag span pada browser
Meskipun tag span dan tag div memiliki kesamaan dalam memblok suatu teks, tag span memiliki cara “memblok” yang berbeda dengan tag div.
Jika tag div disebut Block-line maka tag span disebut In-line, perbedaan mendasar dari kedua tag ini adalah jika tag Block-line umumnya akan tampil pada baris baru dan secara otomatis menambahkan spasi (enter) di akhir tag maka tag In-Line tidak menambahkan spasi (enter)di akhir tag, dan cenderung menyambung tag sebelum dan sesudahnya dalam baris yang sama.
Akhirnya kita telah menyelesaikan pembuatan halaman HTML dengan struktur umum, dalam tutorial mendatang kita akan membahas lebih dalam dan khusus mengenai teks dalam HTML.
Untuk mendownload atau ingin menjalankan skrip diatas, silahkan anda copy atau run skrip dibawah ini:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Judul Halaman Saya</title> </head> <body> <div>Ini adalah div</div> <span>Ini adalah span</span> </body> </html> |
Happy Nyekrip! Terimakasih.
