Belajar Dasar HTML Atribut Tag Div Style Dan Contohnya

HTML singkatan dari Hyper Text Markup Language, Kode HTML adalah sebuah kode yang berfungsi untuk menampilkan struktur halaman web, menampilkan berbagai informasi dengan gaya dan bentuk nya masing masing sesuai dengan bentuk kode yang ditulis. Untuk bisa menampilkan informasi yang menarik pada web dibutuhkan pemahaman tentang kode HTML.

Saya ingatkan bahwa kode HTML bukan merupakan sebuah bahasa pemrograman, melainkan sebuah format untuk menampilkan bentuk sebuah halaman web, namun anda bisa mempelajari HTML sebagai pengenalan struktur kode. Kode HTML ditulis didalam file text, itu karena html menggunakan format ASCII untuk menulis kodenya sama seperti file txt. Kode HTML Diawali dengan penulisan <!DOCTYPE HTML> sebagai penanda bahwa text tersebut seluruhnya berupa kode HTML, lalu diikuti kode berikutnya yaitu <html> sebagai tanda dimulainya penulisan kode HTML.

Salahsatu penulisan kode HTML yaitu kode <head> yang berisi <title> bagian ini untuk memberikan judul halaman, contoh penulisan <title> Contoh HTML </title> yang berarti halaman web tadi berjudul "Contoh HTML", selain <title>, bagian <head> juga berisi dengan berbagai element kode HTML seperti kode CSS, meta tag, tempat untuk meletakkan kode java script, dll.

lalu ada bagian <body> yang berisi isi dari laman seperti kalimat dengan paragraf komplit. bagian ini berisi kode yang akan ditampilkan pada seluruh halaman, kode HTML yang berada diluar <body>, kodenya tidak akan tampil dilaman browser.

Pada penulisan tag <div> pada kode HTML berfungsi untuk membuat blok blok atau kelompok dalam kotak. Gambar diatas merupakan kode warna HTML, untuk membantu anda berkreasi dalam mengedit kode HTML. Ingat tag div ditulis dalam elemen body, contoh kecil <body> <div> isi text </div> </body>. Berikut contoh lain dari tag div:


Kode Text Rata Kanan:
<div style="text-align: right;">
Saya menggunakan tag div dengan format teks rata kanan
</div>
Hasil:
Saya menggunakan tag div dengan format teks rata kanan


Kode Text Rata Kiri:
<div style="text-align: left;">
Saya menggunakan tag div dengan format teks rata kanan
</div>
Hasil:
Saya menggunakan tag div dengan format teks rata kanan


Kode Text Rata Tengah:
<div style="text-align: center;">
Saya menggunakan tag div dengan format teks rata kanan
</div>
Hasil:
Saya menggunakan tag div dengan format teks rata kanan


Kode Text Dengan Warna Beackground:
<div style="background:#FFF000;">
Saya menggunakan tag div untuk memberi background warna kuning
</div>
Hasil:
Saya menggunakan tag div untuk memberi background warna kuning


Kode Text Bacground Warna Kuning Dan Text Warna Merah:
<div style="background:#FFF000; color : red;">
Saya menggunakan tag div untuk memberi background warna kuning dan Text warna merah
</div>
Hasil
Saya menggunakan tag div untuk memberi background warna kuning dan Text warna merah


Kode Text Dan Bingkai Warna Merah:
<div style="border:3px #FF0000 outset; padding:10px">
Saya menggunakan tag div untuk memberi bingkai warna merah
</div>
Hasil:
Saya menggunakan tag div untuk memberi bingkai warna merah


Kode Text Bingkai Kiri:
<div style="border-left: 10px #FF0000 outset; padding:10px">
Saya menggunakan tag div untuk memberi bingkai kiri warna merah
</div>
Hasil:
Saya menggunakan tag div untuk memberi bingkai kiri warna merah


Kode Text Bingkai Kanan:
<div style="border-right: 10px #FF0000 outset; padding:10px">
Saya menggunakan tag div untuk memberi bingkai kanan warna merah
</div>
Hasil:
Saya menggunakan tag div untuk memberi bingkai kanan warna merah


Kode Div Style Sudut Melengkung:
<div style="background: #ffcc33; border-radius: 15px; border: 4px outset #ff9933; padding: 10px 20px 30px 25px; text-align: center;">
Saya mengunakan tag div untuk membuat bingkai melengkung
<div>
Hasil:
Saya mengunakan tag div untuk membuat bingkai melengkung


Kode HTML Text Miring Pada Bingkai Melengkung:
<div style="background: #ffcc33; border-radius: 15px; border: 4px outset #ff9933; padding: 10px 20px 30px 25px; text-align: center;"><i>
Saya mengunakan tag div untuk membuat bingkai melengkung
</i><div>
Hasil:
Saya mengunakan tag div untuk membuat bingkai melengkung


Kode HTML Text Garis Bawah Pada Bingkai Melengkung:
<div style="background: #ffcc33; border-radius: 15px; border: 4px outset #ff9933; padding: 10px 20px 30px 25px; text-align: center;"><u>
Saya mengunakan tag div untuk membuat bingkai melengkung
</u><div>
Hasil:
Saya mengunakan tag div untuk membuat bingkai melengkung


Itulah pembahasan mengenai attribut tag div, terimakasih telah mampir di blog saya ini. Jika ada kesalahan dalam penulisan saya mohon maaf dan jika anda masih belum paham tentang cara menulis kodenya ke dalam blog/situs anda, saya sangat senang jika anda berkomentar dan menjelaskan bagianmana yang membingungkan anda karena tentu saya akan membimbing anda dengan sebaik-baiknya. sekian tips dan tutorial blog dari Dukun Tekno yang dapat saya bagikan dan Semoga berhasil.