Pelajari HTML dasar dari Nol. Pahami tag penting yang sering digunakan. Kemudian buat situs web Anda sendiri dengan HTML. Selamat Belajar Show
HTML (Hyper Text Markup Language) adalah bahasa markup untuk membuat halaman web. Bahasa markup adalah bahasa komputer untuk memformat teks dan berbagai media di dalamnya Biasanya, HTML didukung oleh bahasa lain. Seperti CSS, JS, atau bahasa pemrograman lain yang lebih rumit Mengapa Anda harus belajar coding HTML? HTML memungkinkan Anda membuat situs web, membuat template, dan berbagai karya lain yang ingin dibeli banyak orang Bagaimana? . Sudah tidak sabar? . Daftar isi 25+ Contoh Coding HTML untuk PemulaAgar tidak bingung, sebaiknya kenali dulu beberapa istilah untuk belajar HTML
Nah sekarang sudah siap untuk belajar contoh HTML untuk pemula. Di bagian akhir, kami juga akan memberikan bonus contoh desain web HTML keren yang patut kamu coba lho. Penasaran? 1. HTML dasarSemua template HTML yang ada di dunia memiliki bentuk dasar yaitu HTML Basic. Apa yang harus ada dalam koding dasar HTML? <!DOCTYPE html> <html> <head> <title>Title of the document</title> </head> <body> <h1>Heading</h1> <p>Paragraf.</p> </body> </html> Pertama, dokumen HTML harus diawali dengan . Fungsinya sebagai deklarasi sehingga browser tahu dokumen ditulis dalam HTML. Berikutnya, ada tag . Tag ini akan menampung seluruh tag HTML dari awal hingga penutupan, yaitu . Setelah , masuk ke tag . Seperti namanya, tag ini berisi coding HTML untuk membuat kepala dokumen. Hasilnya akan terlihat sebagai judul pada tab browser Anda.Lalu, tibalah Anda ke tag . Coding HTML ini memuat inti dokumen HTML Anda, yaitu isian website.Terakhir, jangan lupa untuk menutup dokumen HTML dengan tag penutup yang sesuai (, , dll.) 2. MenujuHeading adalah judul untuk sub-judul di website. Fungsinya untuk memetakan info dari umum ke khusus Selain memudahkan pengunjung menangkap inti informasi, heading juga mendongkrak SEO website Pasalnya, Google lebih memahami struktur dan konteks artikel, deskripsi produk, atau media teks lainnya di website Berikut adalah contoh HTML untuk berbagai judul Judul 1 Judul 2 Judul 3 Judul 4 Semakin spesifik pemilihan info dan sub-heading, semakin kecil ukuran heading. Tentunya dengan adanya koding HTML tag heading, Anda tidak perlu pusing dengan format ukuran heading secara manual. Praktis, bukan?3. Gugus kalimatNah, contoh HTML selanjutnya adalah membuat paragraf Paragraf itu penting. Sekarang, bayangkan Anda sedang membaca artikel website yang tidak memiliki paragraf. Setiap gagasan utama terlihat kabur dan melelahkan mata karena tidak ada jeda Oleh karena itu, setiap paragraf perlu dipisahkan. Nah, untuk membuat paragraf dengan koding HTML, gunakan saja tag P teks Setelah itu, paragraf baru akan muncul sebagai baris baru. Alhasil tulisan jadi lebih enak dibaca dan rapi kan? 4. Berani/KuatContoh koding HTML selanjutnya ada yang bold/kuat Pastinya Anda sudah tahu bahwa tag HTML ini akan memberikan efek bold pada teks. Tapi, apa perbedaan antara berani dan kuat? Teks dengan efek tebal (atas) dan kuat (bawah).Pertama, pengkodean HTML yang berani dan kuat memiliki tag yang berbeda Afiliasi adalah promosi bersama dan penjualan produkAfiliasi adalah promosi bersama dan penjualan produk Dan meskipun hasilnya terlihat sama, Google melihatnya secara berbeda Pengodean HTML tebal hanya memberikan efek tebal, sedangkan tag kuat berpengaruh pada perayapan web. Sebab, tag yang kuat mampu memberi tahu Google kata atau kata kunci penting yang memperkuat informasi dari konten website Jadi, mana yang Anda butuhkan? 5. Miring/PenekananMirip dengan tag tebal/kuat, ada dua kode HTML yang dapat Anda gunakan untuk membuat miring kata-kata Berikut adalah contoh HTML dengan tag italic/emphasize Bug adalah istilah bahasa Inggris yang berarti serangga.Bug adalah istilah bahasa Inggris yang berarti serangga. Jadi, mana yang harus Anda gunakan? Kembali lagi ke kebutuhan Anda. Jika hanya ingin memiringkan kata-kata saja, gunakanlah coding HTML italic. Sedangkan jika mau menekankan kata tertentu agar Google lebih mudah mengindeks konten, pakailah tag . 6. Jeda barisSekilas, pengkodean HTML Line Break mirip dengan pengkodean HTML paragraf Seperti namanya, Line Break berfungsi untuk membuat baris baru. Namun, barisnya masih dalam paragraf yang sama. Ini adalah contoh Pemisahan Baris HTML Hasilnya akan terlihat seperti ini Lalu, apa perbedaan HTML Line Break dan Paragraph coding? Untuk outputnya sendiri memang sepintas sama. Namun, tag lebih berisiko error pada beberapa browser. Sedangkan tag . Beda dari contoh HTML-lainnya, coding HTML 7. Gambar-gambarSiapa yang suka website tanpa gambar? Selain membosankan, informasi di website juga tidak jelas. Faktanya, menyertakan ilustrasi meningkatkan penayangan menjadi , lol Nah untuk menyisipkan gambar, gunakan koding gambar HTML. Anda juga dapat mengatur sendiri ukurannya pada atribut Style Eits, tunggu dulu. Jika diperhatikan, pada contoh coding gambar HTML tadi terdapat atribut 'alt'. Apa itu? Teks alternatif adalah kata yang disisipkan ke dalam gambar. Fungsinya untuk mengantisipasi jika gambar tersebut tidak valid. Artinya, ketika gambar tidak muncul maka alt text akan menggantikannya agar pengunjung web tetap memahami deskripsi gambar tersebut 8. Garis horisontalContoh HTML berikutnya, garis horizontal Sederhananya, pengkodean HTML ini memungkinkan Anda membuat garis horizontal Contoh coding HTML-nya juga simple. Cukup masukkan tag pada bagian yang Anda inginkan. teks teks
|