Sebagai seorang blogger sangat penting untuk mengetahui HTML dan CSS baik itu saat memformat konten maupun saat mengutak-atik template. Jadi HTML dan CSS adalah bagian yang tak terpisahkan di kehidupan seorang blogger disamping terus mengupdate konten di situs blognya.

Dalam postingan kali ini saya akan membahas tentang HTML dan CSS serta beberapa kode dan teknik dasar untuk menggunakannya.

Perbedaan Antara HTML dan CSS

HTML adalah singkatan dari Hyper Text Markup Language. HTML berfungsi untuk memberi tahu browser tentang apa yang ditampilkannya, baik itu konten maupun strukturnya.

CSS adalah singkatan dari Cascading Stylesheet. CSS berfungsi memberi tahu browser untuk memberi gaya pada tampilannya, yang menentukan tampilan benda.

Apa itu HTML

Sebelum kita mempelajari HTML, saya ingin memberi anda pengantar singkat tentang beberapa terminologi dan struktur. Ini akan membantu anda mudah mengikutinya saat nanti kebagian tag HTML dasar.

Di setiap bagian kode HTML, ada tag pembuka dan tag penutup. Tag pembuka dimulai dengan tanda sudut kiri, diikuti oleh beberapa huruf yang mengidentifikasi jenis tag apa, kemudian diikuti oleh kurung sudut siku-siku.

Tag penutup muncul di bagian akhir dan terlihat hampir sama dengan tag pembuka tetapi memiliki tanda garis miring ( / ) sebelum karakter untuk mengidentifikasi jenis tag tersebut.

Berikut ini contohnya

Apa yang ada di Antara Tag?

Ada penempatkan objek atau teks di antara tag pembuka dan penutup. Tag pembuka dan penutup mengelilingi "elemen" yang dimodifikasi.

Dalam contoh di atas adalah kalimat, "My Name is Aridjaya", yang dimodifikasi oleh tag <strong> dan akan menghasilkan teks yang dicetak tebal.

Di mana HTML Ditulis?

HTML akan diketik ke dalam tab HTML saat membuat posting blog atau halaman. dalam membuat postingan di situs blogger ada pilihan Compose untuk mengetik postingan secara langsung

Apa seorang Blogger harus akrab dengan HTML?

Sebagai seorang blogger, sebaiknya Anda mengenal beberapa kode HTML dasar ini.

Judul

^ Lihat \di atas? Itu adalah judul.

Judul sebagai kalimat inti dari sebuah postingan yang menentukan isi dari semua postingan blog, dan juga digunakan oleh mesin pencari untuk membantu menentukan dengan tepat seperti apa isi konten anda. Judul yang sangat bagus akan meningkatkan SEO Anda.

Di bawah ini adalah beberapa tag heading yang berbeda, anda cukup menambahkan teks di antara tag pembuka dan penutup.

<h1> Tajuk 1 </h1>

<h2> Heading 2 </h2>

<h3> Judul 3 </h3>

<h4> Tajuk 4 </h4>

<h5> Heading 5 </h5>

<h6> Heading 6 </h6>

dan seperti ini tampilannya

Tajuk 1

Heading 2

Judul 3

Tajuk 4

Heading 5

Heading 6

Ukuran dan gaya judul ditentukan oleh CSS, yang ini akan saya bahas sedikit saja.

Hyperlink

Mempelajari sintaks tautan dan cara membuat kode adalah sesuatu yang harus dipelajari dan dipahami oleh setiap blogger.

Sintaks dasar untuk hyperlink adalah

<a href="https://www.aridjaya.com"> Check Out My Blog Here </a>

dan akan terlihat seperti ini di postingan.

Check Out My Blog Here

anda dapat menyesuaikan tautan dengan menggunakan atribut ...

href="url" - ganti url dengan url halaman / situs blog anda bila ingin ditautkan ke suatu halaman tertentu atau gunakan sintaks href = "mailto:emailaddres@example.com" untuk menautkan ke alamat email.

target="_blank" - tautan akan terbuka di jendela browser baru.

title=”…” - menambahkan judul ke tautan yang akan muncul saat tautan dituju oleh mouse.

Gambar

Tag gambar digunakan untuk menampilkan suatu gambar dan terlihat seperti ini

Kode tersebut akan menampilkan gambar seperti ini

src="..." - Ini mendefinisikan URL gambar, bisa berupa jenis file jpeg, png atau gif.

alt="..." - Ini adalah deskripsi teks dari gambar, dan ini sangat penting untuk SEO karena mesin pencari menggunakannya untuk memberi tahu tentang apa yang diwakili oleh gambar dan mengaitkannya dengan konten anda.

width=”…” - Atribut ini digunakan untuk mengubah lebar gambar. Lebar dinyatakan dalam piksel atau dalam persentase.

Misalnya, jika anda ingin mengurangi gambar hingga ukuran 50% maka anda akan menentukan width="50%". Tinggi juga dapat ditentukan atau dibiarkan sebagai height="-" yang berarti anda ingin ukuran gambar berubah secara proporsional berdasarkan lebar.

Menautkan Gambar

Untuk membuat gambar sebagai tautan yang dapat diklik, sederhana saja, masukkan kode gambar dengan tautan, seperti ...

Membuat Daftar

Daftar adalah cara lain untuk memecah konten dan membuatnya lebih mudah dibaca.
Ada daftar yang mengunakan nomer urut dan daftar tidak teratur.

Daftar tidak teratur seperti ini

<ul>

<li>contoh</li>

</ul>

Dan hasilnya seperti ini :

contoh
contoh
contoh

Daftar dengan nomer urut seperti ini

<ol>

<li>contoh</li>

</ol>

Dan hasilnya seperti ini

contoh
contoh
contoh

Gaya Teks Dasar

Teks Tebal

<strong>Untuk teks tebal</strong>

Teks bergaris bawah

<span style="text-decoration: underline;">Teks bergaris bawah</span>

teks dicetak miring

<em>teks dicetak miring</em>

~~Teks di coret~~

<del>Teks di coret</del>

Pemformatan Teks Dasar

Sebuah paragraf dasar

<p> Sebuah paragraf dasar. </p>

Untuk memulai baris baru dalam paragraf yang sama

<br>

maka anda akan menggunakannya seperti ini :

<p> Ini akan ada di baris satu. <br> Ini akan ada di baris 2 </p>

Untuk menengahkan teks

<center> Untuk menengahkan teks </ center>

Apa itu CSS?

CSS adalah singkatan dari Cascading Style Sheet. Saat HTML mendefinisikan konten dan struktur halaman web, CSS mengontrol bagaimana HTML itu muncul di halaman.

Anda dapat menggunakan CSS untuk mengubah font, gaya, warna, dan ukuran teks; margin, paddings, warna latar belakang dan batas ... anda juga dapat menggunakan CSS untuk menyesuaikan posisi elemen.

Singkatnya anda dapat menggunakan CSS secara radikal mengubah tampilan halaman tanpa pernah mengubah HTML.

Bagaimana CSS Diterapkan?

CSS akan diterapkan ke elemen HTML ketika gaya telah dinyatakan untuk elemen itu.

Sintaks dasar dalam nilai gaya sebagai berikut :

selector {
property: value;
}

Mari kita lihat potongan-potongan yang berbeda ini dan melihat bagaimana mereka bekerja.

Selector

Selector dapat berupa :

Sebuah elemen seperti h3 - Dalam HTML akan ditulis seperti <h3> ... </h3>, di CSS akan ditargetkan ini sebagai h3

Sebuah kelas .red - Dalam HTML akan ditulis seperti <span class=”red”> ... </span>, di CSS akan ditargetkan ini sebagai .red (di css semua kelas diawali oleh tanda titik)

Sebuah id #intro - Dalam HTML akan ditulis seperti <p id="intro"> ... </p>, dalam CSS akan ditargetkan ini sebagai #intro (dalam css semua id diawali dengan tanda #)

Properti

Properti dan nilai selalu dikelilingi dengan tanda kurung kurawal:

p {

}

Properti adalah istilah standar yang dipahami semua browser web. seperti: font-family, font-size, color, dll. Properti selalu diikuti oleh titik dua (:)

p {

font-family:

font-size:

color:

}

Value

Value adalah gaya atau variabel khusus yang ditetapkan untuk properti. Value selalu diikuti oleh titik koma (;)

Contoh:

p {
font-family: Arial;
font-size: 18px;
color: black;
}

Bagaimana cara menerapkannya?

CSS di atas memberi tahu browser bahwa setiap elemen yang dikelilingi oleh <p> itu harus dirender sebagai font Arial, dengan ukuran 18px dan warna hitam.

Berikut contoh lainnya :

h1 {
color: #cc0000;
font-weight: bold;
text-decoration: underline;
}

Di sini setiap elemen <h1> akan ditampilkan sebagai warna memiliki nilai hex #cc0000, font akan tebal dan teks digarisbawahi.

Sebelumnya anda telah mengetahui cara membuat teks tebal dan garis bawah dengan HTML, di sini adalah cara anda dapat melakukannya dengan CSS.

Beberapa Properti dan Contoh CSS Dasar

color: #000000; - mengubah warna teks, anda dapat menggunakan nama warna, kode hex (yang digunakan seperti contoh), atau kode rgb

letter-spacing: 2px; - mengubah spasi

text-transform: uppercase; - mengubah bentuk teks (huruf besar, huruf kecil, huruf kapital)

background-color: #ffffff; - mengubah warna latar belakang menjadi putih

border: 2px solid #eeeeee; - menambahkan garis batas abu-abu terang dengan ketebalan 2 piksel.

width: 400px; - merubah ukuran lebar

height: 200px; - mengubah ketinggian

opacity: 0,8; - mengubah transparan menjadi 80%, 1 adalah 100%, 0 benar-benar transparan

margin: 10px; - Menambah margin di sekitar elemen

padding: 20px; - tambahkan padding di sekitar elemen

Margin dan padding berlaku untuk semua sisi element blok. Jadi jika anda mengatakan margin: 20px ;, itu akan menambah margin 20px ke semua sisi elemen.

Jika anda ingin nilai margin yang berbeda di sekitar elemen maka anda harus menentukan margin disetiap sisi seperti : margin: 20px 5px 20px 5px; .. Ini ditulis dalam urutan searah jarum jam, mulai dari atas, kanan, bawah, kiri; atau atas / bawah, kanan / kiri.

Bagaimana Cara Menggunakan HTML dan CSS Bersama

Lihat beberapa contoh untuk mendapatkan ide tentang cara menggunakan HTML dan CSS bersama.

Contoh #1 - Buat Tombol Tautan

Pertama HTML

<a href="https://www.aridjaya.com/p/sitemap.html" class="my-button"> Daftar Isi </a>

Tanpa CSS, terlihat seperti ini.

Daftar Isi

Sekarang mari kita tambahkan sedikit CSS ...

.my-button {
display: inline-block;
font-size: 14px !important;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
background: #494949;
color: #fff;
cursor: pointer;
padding: 12px 20px;
overflow: auto;
width: auto;
}

Sekarang hyperlink lebih mirip tombol.

Daftar Isi

Sekarang mari kita menggunakan beberapa CSS untuk mengubah warna ketika kita mengarahkan mouse kita ke tombol. The: hover membuat gaya ini hanya berlaku ketika mouse melayang di atas tombol.

.my-button:hover {

background: #e8b0b4;

}

Daftar Isi

Contoh # 2 - Gaya Sebuah Judul

Pertama HTML

<h3> Ini Adalah Judul </h3>

Tanpa CSS, terlihat seperti ini.

Ini Adalah Judul

Sekarang mari kita tambahkan sedikit CSS ...

<h3 class = "h3-heading"> Ini Adalah Judul </h3>

.h3-heading {
font-size: 28px;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
color: #bbcc33;
border-bottom: 5px solid #bbcc33;
}

Dan sekarang terlihat seperti ini

Ini Adalah Judul

Contoh #3 - Gaya sebuah daftar

Untuk contoh ini, kita akan membahas elemen HTML bertumpuk. Elemen HTML dapat diulang, seperti dalam daftar.

<ul>

<li>item nomor satu</li>

<li>item nomor dua</li>

<li>nomor item tiga</li>

</ul>

hasilnya adalah :

item nomor satu
item nomor dua
nomor item tiga

Sekarang mari kita tebalkan setiap item dalam daftar, kita bisa menggunakan CSS berikut untuk melakukan itu

li {
font-style: bold;
}

hasilnya adalah :

item nomor satu
item nomor dua
nomor item tiga

Sangat mudah bukan?
Jadi apa yang Anda pikirkan?
Apakah ini membantu?
Apakah mudah dimengerti dan diikuti?
Atau ada tambahan yang lain?

Berikan komentar di bawah ini atau pertanyaan yang anda miliki.