Kumpulan HTML Kode Dasar Desain Blog or Web

SPOTROID - Kode HTML Dasar Update 2018. Dalam tahapan dasar mengenala HTML atau pun belajar membuat blog HTML sederhana, maka yang pertama yang harus dikuasai adalah kode-kode dasar HTML. Kemudian setelah HTML sobat juga perlu menguasai kode CSS.

Kenapa? Karena blog atau website yang dibangun denga HTML saja dan tanpa CSS maka akan terkesan bagaikan rumah tanpa bentuk yang jelas, mana depan dan mana belakang kita tidak tahu. Begitu juga dengan blog tanpa CSS (tak berdesain).

CSS ini fungsinya untuk mengatur dan merapikan posisi atau tata letak dari dokumen HTML sehingga pada elemen yang muncul di dokumen HTML akan rapi berbentuk seperti yang diharapkan.

Langsung saja...

No.1
Cara menambahkan gambar menggunakan tag <img> dengan atribut src=" "

<img src="url gambar disini" />

Misalkan url gambarnya seperti pada contoh ini
https://4.bp.blogspot.com/-uy6MNTFR8zE/WiAUQU8nkUI/AAAAAAAAAmk/yllL_q0tzrgrzuk08cB-oLvBXAILQ5zGgCPcBGAYYCw/s1600/CSS%2Bukuran%2Bdan%2Bwarna%2Bfont%2Bdi%2Bawal%2Bparagraf%2Bpertama.jpg
Kemudian diletakkan di tulisan "url gambar disini". Tulisannya dihapus dan ganti dengan url gambar, dan hasilnya seperti berikut.




No.2
Cara membuat link dengan tag <a> </a> dan atribut href=" "

<a href="url yang jadi link disini"> teks / gambar disini </a>

No.3
Cara merubah warna, misalkan warna latar menggunakan tag <span> dengan atribut style=" "

<span style="background:orange;"> teks atau gambar disini </span>

teks atau gambar disini / maaf untuk demo yang ini belum bisa spot tampilkan karena telah beralih menggunakan template AMP, spot belum menambahkan Style khusus ke induk <amp-style...

No.4
Cara buat teks berjalan menggunakan <marquee>

<marquee> teks berjalan disini </marquee>

DEMO MARQUEE

No.5
Cara buat table HTML dengan tag <table>

<table style="font-size:90%;text-align:center;margin:0 auto;">
<tr>
<td style="width:100px;border:1px solid #ddd;">Ruang 1</td>
<td style="width:100px;border:1px solid #ddd;">Ruang 2</td>
<td style="width:100px;border:1px solid #ddd;">Ruang 3</td>
</tr>
</table>

Sudah tentu hasilnya cukup memuaskan, hanya saja yang ini juga belum bisa spot tampilkan demonya karena aturan dari template AMP yang tidak mendukung style inline.

No.6
Tag font adalah elemen untuk merubah huruf <font> dan atribut style=""

<font style="color:blue;font-size:40px;">font / huruf</font>

DEMO

No.7
Tag untuk teks tebal (bold) menggunakan <b>

<b>teks tebal / bold</b>

Hasil:
teks tebal / bold

Note:
Sebagian yang ada pada tutorial ini tidak mendukung AMP, tentunya bagi sobat yang telah menggunakan template blog AMP.

TUNGGU UPDATE SELANJUTNYA...

Salam sukses...
BLOG: Awak Blang Awe

YUK IKUTAN BERPARTISIPASI
Anda suka dengan artikel di atas? Bagikan!
Dengan 1x Anda membagikan artikel blog ini, artinya Anda telah ikut serta dalam menunjang berkembangnya blog "Spot Teknologi Android". Sekecil apapun usaha partisipasi Anda sangat berarti bagi blog ini, terimakasih.