xZee Blog



8 Kode HTML dasar yang penting Untuk posting Blog

Plsy Store Street Fight
8 kode html dasar penting untuk membuat posting Blog
Zen Sama xZee Blog

pada posting ini Admin 1 xZee Blog akan membahas tentang 8 Kode HTML dasar yang penting Untuk posting Blog.
mungkin sudah banyak sekali yang membahas tentang atau terkait dengan posting ini, tapi apa salahnya saya tetap posting juga. ya untuk memperbanyak jumlah posting Blog ini yang masih sangat sedikit.

8 kode dasar ini bisa membuat posting Blog kamu yang mungkin sebelumnya hanya menggunakan sebagian dari 8 ini karena masih baru didunia blogging akan mulai menggunakan semua kode yang bahas di posting ini, karena kan jika html berbeda dengan dokumen atau txt jadi kurang anu.. jika posting hanya berupa teks atau teks dan gambar.

sebenarnya sekarang ini sangat mudah untuk membuat sebuah posting Blog tampak rapi meskipun tidak paham struktur kode HTML, lah kok bisa??
iya bisa karena sekarang kan terdapat banyak sekali html editor baik yang online sampai yang offline.
tapi disini Admin tidak membahas itu, jadi mungkin kapan kapan saja di bahas soal html editor nya.

baik langsung ke tutorial ataupun pembahasan.

terdapat sekitar 8 struktur kode dasar html yang bisa dibilang hampir selalu ada di sebuah posting Blog, dan berikut ini adalah daftar dan penjelasan kode tersebut.


xZee Blog
Kode Baris Baru
ini adalah kode yang bisa dibilang sangat wajib untuk membuat posting di sebuah Blog, karena kode ini digunakan sebagai pembuat baris baru atau biasanya kalo di Keyboard yang enter itu.
contoh penulisan kode baris baru ini cukup mudah dan tidak perlu memberikan penutup, contoh seperti dibawah ini.
<br> - </br> mau
<br> atau </br>
sama saja akan menjadi sebuah baris baru. sebagai contoh seperti teks dibawah ini.
Tanpa <br> atau </br>
ini merupakan teks contoh kode html dasar untuk membuat baris baru yang ada di xZee Blog. ini adalah teks yang berada dibawah teks contoh diatas.
Dengan <br> atau </br>
ini merupakan teks contoh kode html dasar untuk membuat baris baru yang ada di xZee Blog.
ini adalah teks yang berada dibawah teks contoh diatas.
xZee Blog
Kode Paragraf Baru
Yang ini tidak kalah penting dengan kode baris baru diatas karena yang ini adalah kode yang digunakan untuk membuat sebuah paragraf baru dalam struktur html.
kode untuk membuat paragraf baru ini adalah <p> berbeda dengan kode untuk membuat baris baru, kode paragraf baru html ini harus menggunakan penutup yaitu </p>. sebagai contoh seperti berikut ini.
<p>ini adalah sebuah teks yang berada diatas.</p> <p>ini teks yang ada dibawah teks diatas.</p>
maka hasilnya akan seperti berikut ini.

ini adalah sebuah teks yang berada diatas.

ini teks yang ada dibawah teks diatas.

nah seperti yang terlihat diatas apabila setiap paragraf baru memiliki ruang jarak sendiri jadi bisa dibilang kegunaan kode ini adalah untuk memberi jarak antara paragraf atau membuat ruang teks dan Lain-lain terpisah.
namun perlu diketahui, ini hanya untuk membuat sebuah paragraf baru yang berarti harus tetap menggunakan <br> untuk membuat sebuah baris baru. sebagai contoh seperti berikut ketika menggunakan kode <p> dan <br>.

ini adalah sebuah teks yang berada diatas. ini yang tanpa kode baris baru setelah teks (diatas.)

ini adalah sebuah teks yang berada diatas.
ini yang dengan kode baris baru setelah teks (diatas.)

xZee Blog
Kode Gambar
untuk membuat posting lebih menarik tentu penggunaan gambar adalah cara paling sering digunakan, nah berikut adalah kode html yang digunakan untuk membuat ataupun menampilkan sebuah gambar di posting Blog.
<img src="alamat gambar" alt="tentang"/> src=".." merupakan sumber gambar tersebut berasal sebagai contoh seperti src="http://sm.uploads.im/rEztk.jpg" sementara alt=".." seperti sebuah keterangan tentang gambar tersebut (bila gambar rusak atau alamat salah maka akan muncul teks di dalam alt="") sebagai contoh seperti berikut alt="kelinci" Dan penerapan sebagai berikut.
<img src="http://sm.uploads.im/rEztk.jpg" alt="kelinci"/>
kelinci
jika kamu ingin mengatur ukuran gambar tersebut maka tambahkan lagi width=".." (lebar) dan height=".." (tinggi) contoh seperti berikut <img src="http://sm.uploads.im/rEztk.jpg" alt="kelinci" width="100%" height="auto"/>
width="100%" akan membuat lebar gambar menjadi sesuai dengan tampilan kotak ruang posting di Blog kamu, sementara height="auto" akan menentukan ukuran tinggi gambar secara otomatis jadi nantinya jika menggunakan "auto" tinggi gambar tersebut akan tampil sesuai dengan ukuran skala tinggi gambar.

bila ingin mengubah gambar menjadi ukuran tertentu maka rubah width="100%" dan height="auto" menjadi width="..px" height="..px" sebagai contoh seperti berikut

<img src="http://sm.uploads.im/rEztk.jpg" alt="kelinci" width="180px" height="150px"/>

dan hasilnya akan menjadi seperti dibawah ini
kelinci

sebenarnya untuk membuat ataupun menampilkan sebuah gambar pada posting Blog tidak harus menggunakan <img src="." alt="." width="." height="."/> alias bisa hanya dengan menggunakan <img src=".."/> saja.
xZee Blog
Kode Link
kode penting berikutnya yang biasa digunakan pada sebuah posting Blog adalah kode link.
kode ini berfungsi sebagai jalan menuju ke alamat yang ditentukan didalam atributnya, contoh kode link ini sebagai berikut.
<a href="alamat tujuan">nama tujuan</a> sebagai contoh seperti <a href="/">Home</a> yang nantinya Bila di klik maka akan menuju ke halaman awal Blog dan <a href="http://google.co.id">Google</a> yang bila di klik akan menuju ke Halaman ataupun situs Google.
berikut adalah beberapa atribut selain href=".." yang sering digunakan dalam kode link.
  • title=".."
  • rel=".."
  • target=".."

title=".." digunakan untuk memberikan nama kepada alamat tujuan sebagai contoh ( href="/" title="xZee Blog" ).
rel=".." digunakan untuk menentukan apakah akan diberi atau tidak diberi sebuah perantara. disini ada banyak macam isi atribut rel=".." dan yang paling sering digunakan adalah
( rel="bookmark" ) ( rel="nofollow" ) ( rel="category" ) ( rel="home" )
target=".." digunakan untuk menentukan apakah link tersebut akan dibuka di Tab / Jendela Baru, Sebagai contoh ( target="_blank" ) maka link tersebut akan dibuka di Tab baru ataupun jendela baru pada Browser.

bila tidak ingin repot membuat sebuah link bisa hanya dengan menggunakan atribut href=".." saja, namun bila memperhatikan tentang kualitas link maka gunakan juga 3 atribut diatas.
nah terus jika ingin membuat link menuju posting yang sedang dibuat atau posting belum jadi bagaimana?
caranya mudah, yaitu hanya dengan membiarkan href="" tetap kosong sebagai contoh seperti berikut <a href="">Contoh Link Posting ini</a> maka akan seperti Contoh Link Posting ini
xZee Blog
Kode Garis Pemisah
Kode yang penting berikutnya adalah kode untuk membuat sebuah garis pemisah yang berguna untuk memberi sebuah garis sekaligus dapat digunakan untuk merapikan tampilan.
kode yang digunakan untuk membuat garis pemisah tersebut adalah <hr> tanpa penutup atau akhiran </hr>.
seperti yang Admin 1 xZee Blog sebutkan diatas jika ini digunakan untuk membuat sebuah garis, sementara untuk gaya garis tersebut tergantung dari tema Blog yang digunakan. contoh garis pemisah <hr> Blog ini tampil seperti dibawah ini.

Halo disini adalah teks contoh posting xZee Blog tentang anu..
nah teks halo.... diatas berada diantara kode <hr> atau bisa dibilang ada di setelah kode pertama dan sebelum kode kedua.

contoh lain, garis pemisah ini dapat digunakan untuk merapikan posting atau sekedar lebih tertata. menurut saya garis ini bagus diletakan pada bagian atas setelah gambar dan judul posting.


xZee Blog Tutorial HTML

contoh singkat isi teks posting dibawah kode garis hr, anu anu anu.... contoh singkat isi teks posting dibawah kode garis hr, anu anu anu.... contoh singkat isi teks posting dibawah kode garis hr, anu anu anu....
sekian posting tentang contoh... anu anu...

nah lebih rapi kan kalo di beri kode garis pemisah <hr>.
xZee Blog
Kode List / Daftar
yang berikutnya adalah kode List atau daftar, yang ini digunakan untuk membuat sebuah daftar teks menjadi lebih rapi dan tampil beda dari teks biasa pada posting.
kode yang digunakan untuk membuat sebuah daftar ataupun List sebagai berikut
<ul> <li>..</li> <li>..</li> </ul>
Dan untuk daftar dengan nomor urut kode nya seperti berikut.
<ol> <li>..</li> <li>..</li> </ol>

untuk tampilan sendiri kira-kira akan seperti gambar contoh dibawah ini
contoh daftar html
xZee Blog
Kode Span & Div
kode ini digunakan untuk mengubah gaya dari sebuah teks, contoh gaya tersebut seperti mengubah tampilan gaya, warna latar belakang ataupun background teks dan mengubah warna teks juga banyak kegunaan lainnya, tapi yang paling sering digunakan adalah 3 fungsi diatas.

cara menggunakan gaya untuk kode span dan div sendiri tidak berbeda dari kode lainnya yaitu dengan 2 atribut ( class=".." ) dan ( style=".." ).
kode <span> berbeda dengan kode <div> dimana perbedaannya terdapat pada baris baru, jika <span> dia tidak akan otomatis memberikan sebuah baris baru atau sebuah paragraf baru yang artinya <span> dapat digunakan untuk membuat teks warna-warni.
sementara disini <div> otomatis memberikan sebuah baris baru / paragraf yang tidak bisa digunakan untuk membuat sebuah teks warna-warni ( kecuali menambah display: inline-block; ) di samping teks lainnya.

contoh kode <span> Dan <div>
<span style="color: red;"> xZee Blog </span> <span style="color: blue;"> xZee Blog </span> <span style="color: green;"> xZee Blog </span> <span style="color: purple;"> xZee Blog </span>
xZee Blog xZee Blog xZee Blog xZee Blog
sementara contoh untuk kode <div> sendiri seperti berikut
<div style="color: red;"> xZee Blog </div> <div style="color: blue;"> xZee Blog </div> <div style="color: green;"> xZee Blog </div> <div style="color: purple;"> xZee Blog </div>
xZee Blog
xZee Blog
xZee Blog
xZee Blog

nah untuk yang atribut class=".." memerlukan sebuah style yang sudah dibuat terlebih dahulu, jadi class=".." disini berfungsi untuk memanggil gaya dengan menggunakan nama gaya tersebut.
untuk penerapan manual pada posting harus menggunakan kode

<style> contoh seperti dibawah ini

<style> .gaya1 { background: gold; color: red; padding: 5px; margin: 5px; text-align: center; border: 2px solid red; } .gaya2 { background: red; color: gold; padding: 5px; margin: 5px; text-align: center; border: 2px solid gold; } </style> <span class="gaya1"> xZee Blog </span> <span class="gaya2"> xZee Blog </span> <div class="gaya1"> xZee Blog </div> <div class="gaya2"> xZee Blog </div>

tampilan kode diatas akan terlihat seperti dibawah ini.
menggunakan <span>
xZee Blog xZee Blog
menggunakan <div>
xZee Blog
xZee Blog


nah dari contoh diatas terlihat jelas perbedaan <span> Dan <div> bukan?
untuk yang ingin tampilan div ataupun span yang beraneka ragam silakan menuju ke 2 posting dibawah ini.
jadi disini intinya kode <span> Dan <div> digunakan untuk mengubah gaya baik dari teks, tampilan, latar belakang dan Lain-lain.
jika ingin tau lebih tentang isi dari kode <style> diatas bisa membaca Penjelasan Dasar Tentang CSS.


masih ada lagi? banyak.... tapi ini posting kan untuk kode yang paling sering atau bisa dibilang juga perlu digunakan untuk membuat sebuah posting Blog.
untuk kelanjutan kisah HTML dari Admin 1 xZee Blog akan menyusul di kemudian hari... karena buat posting seperti ini lumayan lama juga jadi terkadang tidak berminat membuatnya😅. tapi ya kalo punya ilmu walau cuma sedikit kalo berbagi kan tanda tidak pelit ✌
jika untuk cara agar membuat posting Blog lebih rapi itu tergantung pada Tema atau template yang digunakan dan struktur kode diatas juga tambahan yang lainnya.
nah oke itulah posting xZee Blog kali ini tentang 8 Kode HTML Penting untuk membuat posting Blog.
bila ada yang belum jelas atau mungkin ketikan saya yang sudah saya periksa puluhan kali ini ada yang salah 🤓 bisa beri komentar dibawah.
akhir kata, Semoga Bermanfaat...
Share This Post

Post Detail


Posted By: Zen Sama
Posted On: 22 Oct 2017 23:24
Category: Blog dan WebWapBlog.ID


Leave a Comment

Lenna Gracie
Lenna Gracie
22 Oct 2017 23:24
Hello.. No comments yet on "8 Kode HTML dasar yang penting Untuk posting Blog"
Why not to be first user comment?

Please Login first for post a comment

Please switch off your AdBlock and refresh this page :)