Pengenalan-HTML-struktur-umum-2-Nyekrip

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.

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.

Tambahkan skrip diatas tepat dibawah meta tag, sehingga skrip kita menjadi seperti ini:

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:

Penggunaan tag title dan penampakan dari tag title pada browser -nyekrip

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.

Sehingga hasil akhir skrip kita menjadi seperti ini:

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:

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:

Setelah itu simpan file HTML anda, dan refresh halaman browser, dalam halaman browser kita menampilkan tulisan “Ini adalah div”. Lihat penampakan halaman browser berikut:

Penggunaan tag div dan penampakan isi dari tag div pada browser -nyekrip

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:

Tambahkan skrip diatas persis dibawah penutup tag div, sehingga hasil akhir skrip kita menjadi seperti ini:

Simpanlah file HTML anda, setelah itu refresh halaman browser anda dan akan tampil seperti gambar berikut:

Penggunaan tag span dan penampakan isi dari tag span pada browser -nyekrip

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:

Happy Nyekrip! Terimakasih.

About The Author

Tinggalkan Balasan

Alamat surel Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

This site uses Akismet to reduce spam. Learn how your comment data is processed.