lifelong learner — urip iku urup, currently working on accenture.

10 syntax html yang perlu kita ketahui

0
Degananda.com -

Html atau hypertext markup language. Bahasa yang digunakan untuk membuat website. Html berfungsi untuk menampilkan data statis. Jika ingin membuat website yang dinamis maka membutuhkan server side langauge seperti php, phyton dan lain sebagainnya. Awalnya mempelajari html memang sangat susah (jika itu adalah pemrograman yang anda pelajari pertama kali). Berikut ini adalah 10 syntax html yang wajib anda pelajari. Sepuluh syntax tersebut merupakan dasar dari html yang pasti digunakan dalam membuat website.

1. Div (#)

Div digunakan untuk membuat element yang tidak inline. Maksut dari inline adalah elemen tersebut akan melintang. Div akan berada dalam satu baris penuh sehingga kita tidak dapat meletakan syntax html lain disamping div. Div biasannya digunakan sebagai container suatu elemen misalnya container untuk elemen post , komentar dan lain sebagainnya. Gunakanlah div jika anda ingin membuat elemen tersebut melintang(secara horizontal).  Anda juga dapat meletakan div dalam div.

2. Span (.)

Span merupakan kebalikan dari div yakni digunakan untuk membuat element yang inline. Disamping elemen span anda dapat meletakan elemen span lain. Maka elemen-elemen span tersebut akan sejajar satu dengan lainnya.  Span tidak dapat disejajarkan dengan div. Jika kita meletakan span disamping div maka span akan ditampilkan dibawah elemen div.

3. Ul  dan Li

ul merupakan container dari li. dengan syntax li kita dapat menampilkan list secara vertikal maupun horizontal (tergantung dari konfigurasi stylesheet yang kita gunakan). Ul dan li ini biasannya digunakan untuk membuat komponen menu secara horizontal. Stylesheet yang digunakan agar li dapat menjadi horizontal adalah display : inline (pada elemen li). Secara default ul akan memiliki padding dan margin. Anda harus mendefinisikan margin dan padding tersebut kembali jika ingin melakukan override pada padding ataupun margin default.

4. hr

hr digunakan untuk membuat garis lurus yang melintang secara horizontal. Garis lurus ini bersifat seperti div artinnya ketika kita meletakan elemen lainnya disamping hr otomatis akan ditampilkan dibawah elemen hr / garis luruh horizontal. Garis lurus ini biasannya digunakan sebagai divider antar elemen. Contohnya pada list (li) setelah ahir list tambahkan <hr>. Tetapi ada juga yang tidak menggunakan <hr> melainkan menggunakan stylesheet border-bottom atau border-top untuk membuat garis lurus yang melintang. Jadi tergantung dari kondisi yang dibutuhkan.

5. h1, h2 & h3

h1 merupakan kependekan dari heading satu, h2 merupakan kependekan dari heading dua, h3 merupakan kependekan dari header tiga. Heading ini berfungsi sebagai judul dari suatu komponen. Jika pada microsoft word heading digunakan untuk memisahkan antar bab. Contohnya bab 1 akan diberikan heading 1, sub bab 1.1 akan diberikan heading 2 dan sub dari sub bab 1.1.1 akan diberikan heading 1.1.1. Dalam best practicenya, selalu gunakan h1 , h2 , h3 dalam kode html kita. Mengapa? karena akan berpengaruh pada SEO(Search engine optimization). Search engine akan mengindex situs kita berdasarkan h1, h2 dan h3. Selain itu penggunaan h1, h2 dan h3 akan membuat rapi dan mudah dimengerti kode yang kita buat.

6. p / paragraph

p merupakan kependekan dari paragraph. Gunakan syntax ini untuk menuliskan suatu paragraph. Biasannya kita tidak menggunakan <p> dalam menuliskan kalimat. Namun biasakan menggunakan p selain meningkatkan kerapian dari kode yang kita tulis, rumor mengatakan bahwa p juga berpengaruh pada SEO layaknya h1, h2 dan h3. Semakin standart kode html yang kita tulis maka semakin baik SEO dari website yang kita buat.

7. <a>

a digunakan untuk membuat suatu hyperlink atau link. Namun, sebenarnya tidak hanya digunakan untuk membuat link tetapi juga dapat digunakan sebagai pembagi kata/huruf dalam suatu kalimat. Tujuannya adalah agar kita dapat melakukan styling secara terpisah pada kata-kata tertentu dalam suatu kalimat. Sehingga , <a> tidak melulu digunakan untuk hyperlink namun juga dapat digunakan untuk memisah kata/huruf pada suatu kalimat.

8. Tabel (<table>)

Tabel adalah elemen yang sangat penting bagi kita yang baru mempelajari pemrograman html. Selain digunakan untuk menampilkan data dalam bentuk tabel , fungsi tabel sesungguhnya juga dapat kita gunakan untuk membuat layout. Contohnya adalah website yang memiliki 2 kolom seperti blog-blog pada umumnya. Maka menggunakan tabel dengan dua buah kolom. Kolom pertama(sebelah kiri) digunakan untuk menampung konten sedangkan kolom kedua digunakan untuk menampung sidebar yang biasannya berisi widget. Sehingga, tabel sangat baik untuk digunakan dalam membuat layout website untuk seorang pemula.

Jika anda telah mahir membuat layout website menggunakan tabel maka saatnya untuk menghilangkan kebiasaan tersebut. mulailah untuk membuat layout website murni dengan menggunakan <div> mengapa? karena dengan menggunakan <div> kita dapat membuat layout website menjadi responsive dengna bantuan dari media query. Namun jika anda belum mahir membuat layout dengan tabel , stick with table! gunakan tabel untuk mempermudah pekerjaan anda.

9. <br />

syntax paling membantu dalam menuliskan suatu kalimat. <br /> digunakan untuk menuliskan suatu elemen ke baris beriktunya. Contohnya ingin memisahkan kalimat satu dengan kalimat dua menjadi dua baris. maka letakanlah <br /> ini diantara kedua kalimat tersebut. Yang paling penting adalah jangan menggunakan <br /> untuk membuat jarak / margin / padding antar dua elemen gunakanlah stylesheet css margin/padding karena itu sangat tidak rapi dalam penulisan html. Ukuran <br /> antar browser juga berbeda hal itu akan membuat tampilan website anda kacau atau mugnkin tidak sama jika dibuka dibrowser yang berbeda.

10. <style> dan <script>

style digunakan untuk memanggil file css sedangkan <script> digunakan untuk memanggil file javascript. yang paling penting adalah letakan file css di bagian paling atas kode html mengapa ? karena agar user segera meload stylesheet dari website anda. Sedangkan letakanlah <script> dipaling bawah (sebelum </body>) untuk meningkatkan performa (loadingtime) dari website anda. Namun , untuk library javascript tertentu memang ada beberapa framework yang membutuhkan meletakan <script> dibagian atas html seperti vue, angular dan lain sebagainnya.