Penulisan Sintaksis Heading, Paragraf, Tautan Link Dan Gambar | Sorogan HTML 02

 Apa itu Sintaks dalam HTML dan CSS?

Dalam HTML dan CSS, sintaksis adalah urutan elemen muncul atau ditulis, yang berarti tata bahasa dan ejaan bahasa. Aturan sintaks diterapkan untuk memastikan bahasa selalu ditulis dengan cara yang dapat dibaca atau diinterpretasikan oleh komputer. Jika aturan sintaks tidak diikuti, kesalahan dapat terjadi dan halaman web atau aplikasi dapat rusak. Untuk alasan ini, penting untuk mempelajari sintaks yang tepat untuk bahasa pemrograman atau pengembangan apa pun yang Anda pelajari.

Mengapa Sintaks Penting Saat Coding?

Katakanlah Anda akan mulai membuat kode situs web pribadi menggunakan HTML dan CSS, dan Anda yakin bahwa Anda adalah satu-satunya orang yang akan pernah melihat atau menggunakan kode Anda. Karena tidak ada orang lain yang harus bekerja dengan kode Anda, dapatkah Anda mengabaikan sintaks dan menulis apa pun yang masuk akal bagi Anda? Sayangnya (atau untungnya), HTML atau CSS tidak bekerja seperti itu. Anda harus mengikuti sintaks.

Anda menulis kode untuk komputer jika tidak ada orang lain, dan, meskipun komputer cerdas, mereka tidak cukup fleksibel untuk memahami HTML dan CSS jika sintaksis tidak diikuti. Pada dasarnya, komputer mengharapkan elemen muncul dalam urutan tertentu. Mereka mencari bentuk tertentu. Jika HTML dan CSS Anda tidak cocok dengan bentuk yang diharapkan, Anda akan mengalami kesalahan. Jangan lakukan itu. Jangan seperti itu.

Bagaimana Mengingat Sintaks Coding

Setiap bahasa memiliki sintaks, termasuk bahasa pertama yang Anda pelajari untuk berkomunikasi, tetapi, kemungkinan besar, Anda tidak berpikir untuk mendapatkan sintaks yang benar saat Anda berada di tengah percakapan. Anda melakukannya dengan benar karena Anda sering menggunakannya. Lihat kemana arah ini? Jika Anda ingin mengingat sintaks HTML dan CSS, Anda perlu berlatih berkomunikasi di masing-masing.

Semakin banyak Anda berlatih, semakin sedikit Anda perlu khawatir tentang mengingat aturan. Pada awalnya, Anda harus bergantung pada sumber daya dan mungkin teman, rekan kerja, atau rekan kerja untuk melakukannya dengan benar. Tapi, sebelum Anda menyadarinya, Anda tidak akan mengkhawatirkan sintaks; Anda hanya akan berkomunikasi dengannya secara alami. Anda akan dapat melihat HTML atau CSS orang lain dan menunjukkan sintaks yang tidak tepat atau tidak tepat.

Latihan, Latihan Lagi, Lagi dan Teruslah Berlatih.

Sumber daya untuk belajar HTML dan Sintaks CSS

Apakah Anda belum pernah menggunakan HTML dan CSS sebelumnya atau Anda memiliki pengalaman, kemungkinan besar, Anda akan menggunakan W3Schools untuk menyegarkan pikiran Anda tentang tag, kelas, ID, konvensi, dan banyak lagi. Jika Anda belum melakukannya, Anda benar-benar harus menandai tautan itu sehingga ada untuk Anda saat Anda membutuhkannya.

Jika Anda mencari lembar contekan cepat untuk merujuk pada tag HTML atau CSS, kami siap membantu Anda. Anda dapat menandai HTML Cheat Sheet dan CSS Cheat Sheet sebagai referensi saat Anda membuat kode, dengan definisi yang membantu dan aturan cepat untuk diingat sehingga Anda tidak tersesat. :v

Apakah itu sudah ditandai?

simpan itu, karna itu akan memudahkan anda dalam mengingat dan menuliskan sintaksis HTML dan CSS, mengingat anda sekarang sudah memiliki kamus tersebut, hehehehe.

baiklah, setelah mengenal sintaksis atau cara penulisan pada HTML dan CSS mari kita pelajari struktur dasar lainnya. yakni :

Header HTML (Heading)

Bab ini hanya memperkenalkan Anda pada fitur-fitur dasar HTML, nanti dalam tutorial ini kita akan melihat masing-masing tag ini lebih detail.

Judul dalam HTML ditentukan oleh tag <h1> sampai dengan <h6> (h1 mendefinisikan judul terbesar, dan h6 adalah yang terkecil).

mari kita coba dan lihat contoh pembuatan heading dibawah ini : 

Input : tag Heading yang kita tulis | output : hasil dari input yang ditampilkan

Paragraf HTML

Dengan tag HTML <p> Anda dapat menentukan paragraf.

Paragraf digunakan untuk mengelompokkan teks secara logis. Browser secara otomatis mengindentasi satu baris sebelum dan sesudah teks paragraf.

<p> Ini adalah paragraf 1</p>

<p> Ini adalah paragraf 2</p>

sekarang silahkan coba hal diatas dan silahkan lihat apa yang anda dapatkan?

apakah anda melihat output seperti ini?



Tautan atau link pada HTML

Dengan tag HTML <a> Anda dapat menentukan tautan atau sebuah link yang dapat kita sisipkan kedalamnya.

Tautan digunakan untuk menghubungkan dokumen HTML satu sama lain. Dengan mengklik link tersebut, pengguna akan dipindahkan ke dokumen HTML lain (seperti dari halaman 1 ke 2), yang url- nya ditentukan di dalam atribut href .

penulisannya seperti berikut :

<a href=”https://www.abrahamyusuf.my.id”>Ini Tautan Menuju Blog Catatan Abraham</a>

Hasil dari kode:
sekarang coba anda buat tautan atau link menuju google di text editor anda, apa yang anda dapatkan?

Harap dicatat bahwa atribut akan dibahas secara rinci nanti dalam tutorial ini.


Memasukkan gambar pada HTML

Dengan tag HTML <img> Anda dapat memasukkan gambar apa pun ke dalam dokumen HTML.

Sedangkan Untuk Mengatur Lebar dan tinggi gambar dapat diatur menggunakan atribut width dan height .

<img src='logocatatanabrahamyusuf.jpg' width = '300' height = '242'/>

Hasil dari kode:


cukup sekian tutorial kali ini, silahkan bereksplorasi atau mencoba coba sendiri.

salam semangat, salam hangat, wassalam.


Tinggalkan Balasan

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