HTML adalah singkatan dari Hypertext Markup Language yang merupakan bahasa markup untuk membuat halaman web. Bahasa markup yaitu bahasa komputer untuk memformat teks dan berbagai media di dalamnya. Biasanya, HTML didukung dengan bahasa lain, seperti CSS, JS, ataupun bahasa pemrograman lain yang lebih rumit. HTML memungkinkan seorang user untuk membuat dan menyusun bagian paragraf, heading, link atau tautan, dan blockquote untuk halaman web dan aplikasi. HTML bukanlah bahasa pemrograman, dan itu berarti HTML tidak punya kemampuan untuk membuat fungsionalitas yang dinamis. Sebagai gantinya, HTML memungkinkan user untuk mengorganisir dan memformat dokumen, sama seperti Microsoft Word. Ketika bekerja dengan HTML, Anda menggunakan struktur kode yang sederhana (tag dan attribute) untuk mark up halaman website. HTML (Hyper Text Markup Language) adalah Berikut beberapa manfaat belajar coding html:
• Memahami cara kerja website
• Membuat landing page hingga newsletter sendiri
• Lebih mudah belajar bahasa pemrograman lainnya
• Membuat code yang lebih rapi
• Jadi lahan penghasilan
HTML memungkinkan seseorang mampu membuat website, membangun template, dan berbagai karya lain.
Dokumen HTML adalah file yang diakhiri dengan ekstensi .html atau .htm. Ekstensi file ini bisa dilihat dengan mengunakan web browser apa pun (seperti Google Chrome, Safari, atau Mozila Firefox). Browser tersebut membaca file HTML dan me-render kontennya sehingga pengguna internet bisa melihat dan membacanya. Biasanya, rata-rata situs web menyertakan sejumlah halaman HTML yang berbeda-beda. Contohnya, beranda utama, halaman ‘tentang kami’, halaman kontak yang semuanya memiliki dokumen HTML terpisah. Masing-masing halaman HTML terdiri atas seperangkat tags (bisa disebut juga elements), yang mengacu pada building block halaman website. Tag tersebut membuat hirarki yang menyusun konten hingga menjadi bagian, paragraf, heading, dan block konten lainnya. Sebagian besar element HTML memiliki tag pembuka dan penutup yang menggunakan syntax .
Contoh Coding HTML untuk Pemula
Beberapa istilah dalam html:
• Tag: awalan instruksi atau perintah yang akan dibaca browser. Misalnya: tag .
• Elemen: keseluruhan kode yang terdiri dari tag pembuka (< >) hingga tag penutup (/< >).
• Atribut/property: informasi atau perintah tambahan yang berada di dalam elemen (Contoh: style)
Contoh desain web HTML
1. HTML Basic
Segala template HTML di dunia memiliki bentuk dasar, yaitu HTML Basic. Apa saja yang pasti ada dalam coding HTML Basic? Kami akan membedahnya satu per satu.
| 1 | < !DOCTYPE html >
dokumen HTML harus diawali dengan <!DOCTYPE html>. Fungsinya sebagai deklarasi sehingga browser tahu dokumen ditulis dalam HTML. |
| 2 | < html >
Tag ini akan menampung seluruh tag HTML dari awal hingga penutupan, yaitu < /html >. |
| 3 | < head >
tag ini berisi coding HTML untuk membuat kepala dokumen. Hasilnya akan terlihat sebagai judul pada tab browser. |
| 4 | <title>Title of the document</title> |
| 5 | < /head > |
| 6 | < body >
Coding HTML ini memuat inti dokumen HTML, yaitu isian website. |
| 7 | < h1>Heading</h1 > |
| 8 | < p>Paragraf.</p > |
| 9 | < /body > |
| 10 | < /html > |
Di akhir, jangan lupa tutup dokumen HTML dengan tag penutup yang sesuai (< /html >, < /body >, dll).
2. Heading
Heading adalah judul hingga sub-judul yang ada di dalam website. Fungsinya, untuk memetakan info dari umum ke khusus. Heading memudahkan visitor menangkap inti informasi, danjuga mendongkrak SEO website. Sebab, Google jadi lebih paham struktur dan konteks artikel, deskripsi produk, ataupun media teks lainnya pada website. Berikut contoh HTML untuk berbagai macam heading.
| < h1> | Heading | 1 | < h1> |
| < h1> | Heading | 2 | < h2> |
| < h1> | Heading | 3 | < h3> |
| < h4> Headimg 4 < h4> |
Makin spesifik info dan pemilihan sub-judulnya, maka makin kecil juga ukuran heading. Tentunya dengan coding HTML tag heading, Tak perlu repot-repot format ukuran heading secara manual.
3. Paragraf
Contoh HTML berikutnya yaitu membuat paragraf. Paragraf itu penting. Jika membaca artikel website yang tidak dibuat paragraf. Setiap ide pokok terlihat samar dan melelahkan mata gara-gara tak punya jeda. Maka, setiap paragraf perlu dipisah. Nah untuk membuat paragraf dengan coding HTML, gunakan saja tag P.
< p>text< /p>
Setelah itu, paragraf baru akan muncul menjadi baris baru. Alhasil, tulisan jadi lebih enak dibaca dan rapi.
4. Bold/Strong
Contoh coding HTML berikutnya, ada bold/strong. Tag HTML ini akan memberi efek tebal pada tulisan. Namun, bedanya bold dengan strong yaitu Tulisan dengan efek bold (atas) dan strong (bawah) Pertama, coding HTML bold dan strong memiliki tag yang berbeda:
| < b>Afiliasi adalah kerja sama promosi dan penjualan produk< /b> < strong>Afiliasi adalah kerja sama promosi dan penjualan produk</strong> |
Dan meskipun outputnya terlihat sama, Google memandangnya lain. Coding HTML bold sekadar memberi efek tebal, sedangkan tag strong memiliki pengaruh bagi web crawling. Sebab, tag strong mampu memberitahu Google kata atau keyword penting yang memperkuat info dari konten website. Maka, gunakan sesuai kebutuhan.
5. Italic/Emphasize
Mirip seperti tag bold/strong, ada dua coding HTML yang bisa dipakai untuk memiringkan kata-kata. Berikut contoh HTML dengan tag italic/emphasize.
| < i>Bug adalah istilah bahasa Inggris yang artinya serangga.< i> < em>Bug adalah istilah bahasa Inggris yang artinya serangga.< em> |
Dalam menggunakannya harus sesuai dengan kebutuhan. Jika hanya ingin memiringkan kata-kata saja, gunakanlah coding HTML italic. Sedangkan jika ingin menekankan kata tertentu agar Google lebih mudah mengindeks konten, pakailah tag < em> .
6. Line Break
Sekilas, coding HTML Line Break mirip dengan coding HTML paragraf. Seperti namanya, Line Break berfungsi membuat baris baru. Namun, baris tersebut masih dalam paragraf yang sama. Ini dia contoh HTML Line Break.
| < p> < br>Text < br> Text < /p> |
Outputnya sendiri memang sepintas sama. Yang membedakan coding HTML Line Break dengan Paragraf yaitu telihat dari tag < p> lebih berisiko error pada beberapa browser. Sedangkan tag < br> digadang-gadang akan lebih di-support oleh HTML5 daripada tag < p>. Kemudian, coding HTML < br> memang tidak memiliki tag penutup < /br>. Jadi, cukup menggunakan < br> saja.
7. Images
Mungkin, hampir tidak ada orang yang menyukai website tanpa gambar. Selain membosankan, info dalam website jadi kurang jelas. Faktanya, memasukkan ilustrasi meningkatkan views hingga 45%. Untuk memasukkan gambar, gunakan coding HTML images. Ukurannya juga bisa diatur sendiri pada atribut Style.
| < img src=”url atau lokasi penyimpanan gambar” alt=”text” style=”width:500px;height:333px;”> |
Jika diperhatikan, dalam contoh coding HTML images ada atribut ‘alt’. Alt text adalah kata yang diselipkan ke dalam gambar. Fungsinya sebagai antisipasi jika gambar invalid. Artinya, saat gambar tidak muncul, alt text akan menggantikannya sehingga visitor web tetap memahami deskripsi image.
8. Horizontal line
Untuk horizontal line, sederhana saja, coding HTML ini memungkinkan untuk membuat garis horizontal. Contoh coding HTML-nya juga simple. Cukup masukkan tag < hr> pada bagian yang diinginkan.
| < p> text < /p> < hr> < p> text < /p> |
Beda dari tag lainnya, tag < br>, < img>, dan < hr> memang tidak memiliki tag penutup (/br>, < /img>, < /hr>).
9. Cross-through text
Cross-through text atau teks yang dicoret mampu menekankan makna tertentu pada tulisan/informasi. Biasanya, para penulis menggunakan strategi ini untuk menunjukkan versi benar atau lebih baik dari suatu hal. Membuat cross-through text mudah, kok. Langsung saja gunakan contoh HTML ini.
| < del>text.< /del> |
Sekarang, sudah bisa mencoret tulisan sendiri.
Baca juga : Cara Melakukan Riset Keyword Dengan Mudah
10. Quote
Banyak orang, menyukai quote. Selain indah, quote mampu memotivasi seseorang melakukan action tertentu pada website. Entah itu lanjut membaca artikel, membeli produk, dan hal lainnya. Untuk membuat quote pada website dengan coding HTML, bisa membuat dua jenis quote: blockquote atau short quote. Blockquote adalah quote panjang yang terpisah dari teks utama. Sedangkan short quote yaitu quote ringkas yang bisa menjadi satu bagian atau terpisah dari teks utama. Di bawah ini contoh HTML yang bisa digunakan.
| < blockquote>text< /blockquote> < q>text< /q> |
11. Font
Dari contoh-contoh HTML sebelumnya, pasti penulis ataupun pembaca merasakan bosan karena hasil testing syntax selalu tampil dalam Times New Roman. Untuk menghindari ini bisa dengan mengubah jenis font. Baik itu pada header, paragraf, ataupun jenis teks lainnya. Caranya, masukkan property style ke dalam tag.
| < h2 style=“font-family:Georgia;”>text< /h2> < p style=“font-family:Comic Sans MS;”>text< /p> |
Penting untuk diketahui, setiap browser menyediakan jenis font berbeda. Jadi jangan bingung jika ada browser yang tidak mau menampilkan jenis font permintaan penulis.
12. Highlighted
Sama seperti menstabilo catatan penting di buku yang sedang dibaca. Maka bisa juga highlight kata penting pada website. Berikut contoh coding HTML untuk melakukannya.
| < p> text <mark> catatan penting < /mark> text < /p> |
Secara otomatis, highlight text akan berwarna kuning. Bagi yang ingin memakai warna lain, bisa memodif sendiri. Caranya yaitu dengan menambahkan CSS berikut. mark{ background-color: yellow; color: black}
13. Text Colour
Bisa juga mengatur warna teks sendiri. Caranya, gunakan property style seperti contoh HTML berikut.
The flower is red
Masukkan warna sesuai dengan kode warna HTML. Nantinya, browser akan memproses dan menampilkan hasil sesuai permintaan warna.
14. Text Size
Selain mengubah warna teks, bisa juga mengatur ukuran tulisan. Caranya ikuti contoh HTML berikut.
| < p style=”color:#ff471a;”>The flower is red < /p> |
Masukkan warna sesuai dengan kode warna HTML. Nantinya, browser akan memproses dan menampilkan hasil sesuai permintaan warna.
14. Text Size
Selain mengubah warna teks, bisa juga mengatur ukuran tulisan. Caranya ikuti contoh HTML berikut.
| < p style=”font-size:48px;”>text< /p> < p style=”font-size:20px;”>text< /p> |
15. Text Alignment
Untuk mengubah posisi teks, Caranya yaitu masukkan saja property style seperti ini:
| < p style=”text-align:right;”>Geser teks ke kanan< /p> < p style=”text=align:left;”>Geser teks ke kiri< /p> |
Hasilnya teks langsung bergeser sesuai perintah. Tapi, jika yang dimasukkan adalah “text-align: center”, jangan kaget kalau teks tidak berpindah. Karena saat ini, HTML5 tidak support “text-align: center”. Sehingga, harus menggunakan CSS property style jika ingin memindah posisi teks ke tengah.
< html>< head>< style>p {text-align: center;}< /style>< /head>< body>< p>Text< /p>< /body>< /html>
16. Anchor Text
Anchor text adalah kata yang bisa diklik sehingga visitor bisa membuka halaman web tertentu. Kata-kata tersebut bisa di-klik, karena ada link tersemat di dalamnya. Dengan anchor text, visitor web bisa menemukan info lain yang masih relevan. Google juga jadi lebih terbantu dalam memahami konteks web. Berikut contoh html anchor text.
| < a href=”link”>text< /a> |
Kemudian teks pilihan akan memiliki warna berbeda sekaligus bisa di-klik.
17. CTA Button
Tak hanya menyematkan link ke dalam teks, coding HTML memungkinkan untuk membuat CTA (Call-to Action) Button. CTA Button adalah tombol dengan link yang mengarahkan visitor website menuju konversi. Untuk cara membuat CTA Button dengan coding HTML, Berikut contoh HTML-nya.
< div class=”button-wrapper”> < a class=”button cta-button” href=”link”>text< /a>< /div>
Beda dari tag lainnya, Ada tag < div> pada syntax di atas, berfungsi membungkus elemen ke dalam satu grup/class. Tag < div> memudahkan saat mendesain dengan CSS. Sebab, CSS akan diterapkan pada kelompok yang diinginkan saja. Dalam hal ini, class button-wrapper. Maksudnya, syntax CTA Button tadi hanya menghasilkan output yang lebih mirip seperti anchor text daripada sebuah tombol. Contoh coding HTML itu hanya untuk membangun kerangka CTA Button saja. Agar ada desainnya, perlu mendesain tombol CTA menggunakan CSS untuk class button-wrapper.
Sisipkan syntax < link href=”style.css” rel=”stylesheet”> pada coding HTML supaya file CSS terhubung dan desain bisa ditampilkan.
.button-wrapper {display: block; text-align: center}.button {border: none; border-radius: 3em; box-shadow: 2px 2px 2px rgba(0,0,0,0.2); display: inline-block; font-size: 1em; padding: 1em 2em; width: auto}.cta-button {background-color: #000; color: #fff !important}.cta-button:hover {background-color: #777;Source Code: drivencreativelymad.com
18. Ordered List
Seperti namanya, Ordered List berfungsi membuat poin secara urut. Bisa berupa numbering, alfabet, ataupun romawi. Cara membuatnya, pakailah coding HTML tag < ol>. Berikut contoh HTML Ordered List.
< ol> < li> Point 1 < /li> < li> Point 2 < /li>< /ol>
Tag < ol> memang biasanya diikuti tag < li>. Tag < ol> berfungsi menentukan kelompok info yang mau diurutkan, sedangkan tag < li> untuk membuat list-nya. Tanpa tag < ol>, daftar list secara otomatis menjadi bullet points (Unordered List). Kemudian jika ingin Ordered List menggunakan alfabet ataupun angka romawi cukup dengan memasukkan atribut type:
| Type | Fungsi |
| Type =”1″ | Item angka |
| Type =”A” | Item huruf besar |
| Type =”a” | Item huruf kecil |
| Type =”I” | Item romawi besar |
| Type =”i” | Item romawi kecil |
Memasukkan atributnya yaitu bubuhkan di sebelah tag < ol>.
< ol type=”A”> < li> Point 1 < /li> < li> Point 2 < /li>< /ol>
19. Unordered List
Kebalikan dari Ordered List, Unordered List memungkinkan untuk membuat daftar item tanpa peduli urutannya. Biasanya menggunakan icon seperti bullet, persegi, dll. Untuk membuatnya, bisa menggunakan contoh HTML berikut.
< ul> < li> Point 1 < /li> < li> Point 2 < /li>< /ul>
Dengan contoh coding HTML di atas, output-nya adalah list item dengan bullet points. Kemudian jika ingin ganti icon caranta mirip seperti cara pada Ordered List, bisa menggunakan property list-style-type berikut.
| Value | Fungsi |
| Disc | List item berupa bullet hitam |
| Circle | List item berupa bullet putih |
| square | List item berupa kotak |
| none | List item tidak terlihat |
Cara menyelipkan property list-style-type juga mudah. Hanya begini saja:
< ul style=”list-style-type:square;”> < li> Point 1 < /li> < li> Point 2 < /li>< /ul>
20. Superscript
Jika menemukan huruf kecil melayang di atas tulisan normal seperti DC ComicsTM Atau angka pangkat seperti 42, Tipografi ini disebut juga sebagai superscript. Superscipt sudah cukup familiar, biasanya ini digunakan sebagai angka pangkat hingga logo trademark. Untuk membuat superscript, caranya buat saja dengan coding
21. Subscript
Lawan dari superscript adalah subscript. Biasanya, subscript dijumpai sebagai huruf/angka kecil di bagian bawah tulisan normal. Senyawa kimia, misalnya. Untuk contoh coding HTML Subscript, bisa lihat syntax ini.
| Text < sub> tags < /sub> |
22. Tabel
Contoh HTML berikutnya, tabel. Seumumnya membuat tabel, Anda harus membuat baris dan kolom. Sebagai langkah awal, silakan buat tabel dengan contoh coding HTML berikut.
< table border=”1″>
< tr>
< td>Baris 1 Kolom 1</td>
< td>Baris 1 Kolom 2</td>
< /tr>
< tr>
< td>Baris 2 Kolom 1</td>
< td>Baris 2 Kolom 2</td>
< /tr>
< /table>
23. Form
Membuat form dengan coding HTML cukup mudah. Dengan tag < form>, bisa langsung membuat form dengan HTML. Seperti contoh coding HTML di bawah.
< form>
< label>Username</label>< br>
< input type=”text”>< br>
< label>Password< /label><br>
< input type=”password”>< br></form >
Baca juga : Cara Melakukan Riset Keyword Dengan Mudah
24. Contoh Desain Web HTML Landing Page Responsive
Coding HTML:
| 1
2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
< !DOCTYPE HTML>
< html> < head> < link rel=”stylesheet” href=”style.css”> < meta name=”viewport” content=”width=device-width , initial-scale=1.0″> < /head> < body>
< div class=”filter”> < /div> < div class=”nav”> < div class=”container”> < h1>Logo</h1> < /div>
< /div> < div class=”description”> < h1>Welcome to our website< /h1> < p>discover our amazing website with our amazing services and contact us </p > </div > </body > </html > |
Penyebab Browser Tidak Bisa Merespon Coding HTML
1. File HTML dan CSS Belum Terhubung
Setelah membangun halaman web dengan HTML dan menata style-nya menggunakan CSS, Namun desain tidak mau tampil. Ini dikarenakan belum menyambungkan file HTML dengan file CSS. Cara menghubungkannya, dengan menyematkan tag berikut dalam file HTML
| < link href=”style.css” rel=”stylesheet”/> |
Style.css di sana adalah nama file CSS. Pastikan juga file HTML dan CSS berada dalam satu folder yang sama.
2. Link Source Tidak Valid
Ada kalanya seseorang bingung karena browser tidak menampilkan gambar atau media apapun. Padahal, sudah menggunakan tag HTML yang tepat. Jangan panik, coba cek URL yang digunakan. Apakah link-nya sudah valid dan Bisa diakses. Jika tidak, artinya harus menggantinya dengan alternatif link yang lain.
3. Ada Kesalahan pada Coding HTML
Penyebab berikutnya, yaitu ada kesalahan pada codingnya. Cek kembali apakah penulis sudah menulis semua tag dengan benar. Proses checking ini memang menyita waktu. Namun, bisa meminimalisirnya dengan menggunakan Editor HTML terbaik. Adanya fitur seperti highlight syntax, auto-complete, hingga find-and-replace tentu akan meringankan pekerjaan. Sebab, editor HTML terbaik mampu menunjukkan syntax yang error. Setelah memodifikasi code, jangan lupa refresh browser terlebih dahulu untuk melihat hasil perubahannya.
4. Halaman Web Belum Di-Online’kan
Jika sudah membuat coding HTML, tapi halaman web tidak bisa ditemukan orang lain di internet, kemungkinan besar itu terjadi karena belum mengonlinekan project tersebut. Sehingga, halaman web hanya tampil di komputer pribadi saja. Cara mengatasinya, upload website ke hosting. Namun, pastikan pilih hosting terbaik dan menjamin hal-hal berikut:
• Loading website cepat;
• Uptime website lebih dari 99%;
• Fitur pengelolaan website sesuai kebutuhan;
• Keamanan ketat;
• Dukungan customer support 24 jam.
Berikut beberapa contoh coding HTML di atas.
| Tag HTML | Fungsinya untuk Membuat… |
| < h1> Heading 1 < h1> | Heading |
| < p> paragraf < /p> | Paragraf |
| < b> bold </b >< strong> strong < /strong> | Bold/strong |
| < i> italic </i >< em> emphasize < em> | Italic/emphasize |
| < br> | Line break |
| < img src=”url gambar” alt=”text” style=”width:…px;height:…px;”> | Images |
| <hr > | Horizontal Line |
| < del>text< /del> | Cross-through text |
| <blockquote >text< /blockquote>< q>text< /q> | Quote |
| < p style=”font-family:…;”>text< /p> | Font |
| < mark> highlighted text < /mark> | Highlighted |
| < p style=”color:…;”>text< /p> | Text Colour |
| <p style=”font-size:..px;” >text< /p> | Text Size |
| <p style=”text-align:right/left;” >text< /p> | Text Alignment |
| < a href=”link”>text</a > | Anchor Text |
| < button type=”button”>Click Me!< /button> | CTA Button |
| < ol type=”…”>< li> Point 1 < /li>< li> Point 2 < /li></ol > | Ordered List |
| < ul style=”list-style-type:…;”>< li> Point 1 < /li>< li> Point 2 < /li></ul > | Unordered List |
| text< sup>TM< /sup> | Superscript |
| Text < sub> tags < /sub> | Subscript |
| < table> < /table>< tr>< /tr>< td>< /td> | Tabel |
| < form>< /form> | Form |
