Panduan HTML Dasar untuk Dummies
3 min read
Anda dapat membuat file HTML dasar menggunakan Notepad di komputer Anda. Tetapi akan menyakitkan untuk menulis banyak baris kode. Anda membutuhkan Editor Kode. Editor kode yang baik akan mempermudah menulis dan mengatur kode besar
Dua puluh tahun yang lalu, bahkan jika Anda hanya seorang blogger hobi, Anda harus mengetahui beberapa pengkodean web untuk melindungi diri Anda sendiri atau untuk menambahkan fungsi sederhana ke situs Anda. Tetapi sekarang ada begitu banyak editor dan plugin yang tersedia bahkan mengetahui dasar-dasar HTML tidak lagi diperlukan.
Masalahnya adalah jika Anda tidak mengetahui beberapa hal mendasar, Anda dapat dengan mudah mendapatkan masalah nyata di blog Anda dan harus menyewa pengembang mahal untuk memperbaiki apa yang mungkin merupakan masalah kecil. Tidak hanya itu, membuat perubahan pada blog Anda seperti menambahkan widget teks kustom membutuhkan sedikit pengetahuan.
Dan jika Anda mengalami tata letak konten tidak terlihat benar, pengetahuan HTML dapat membuat Anda kembali ke jalur.
Berikut adalah beberapa versi panduan HTML kami untuk pemilik bisnis online blogger dan non-techie.
HTML adalah tulang punggung internet saat ini. Jutaan situs web bersama-sama membentuk internet. Dimana HTML adalah blok bangunan dari semua situs web ini.
Navigasi
Panduan ini terdiri dari subjek berikut
Sebelum kita mulai…
1. Apakah HTML itu?
HTML adalah singkatan dari Hyper Text Markup Language. Ini adalah bahasa standar untuk menandai konten untuk browser web.
HTML diwakili oleh “Elemen”. Elemen juga dikenal sebagai “Tag”.
2. Mengapa HTML dibutuhkan?
Peramban web hanya dapat merender situs web bila ditulis dalam bahasa yang didukung. HTML adalah bahasa markup yang paling umum dan memiliki penerimaan tertinggi ke browser web.
Itu sebabnya Anda membutuhkan HTML.
3. Apakah HTML case sensitive?
HTML tidak sensitif huruf. Tetapi praktik terbaik adalah menulis HTML dengan kasus yang tepat.
Langkah-langkah untuk Membuat File HTML Pertama Anda
Anda dapat membuat file HTML dasar menggunakan Notepad di komputer Anda. Tetapi akan menyakitkan untuk menulis banyak baris kode.
Anda membutuhkan Editor Kode. Editor kode yang baik akan mempermudah menulis dan mengatur kode besar.
Saya menggunakan dan merekomendasikan Notepad ++ (gratis dan open-source) untuk menulis bahasa web. Ada editor lain yang mungkin Anda gunakan seperti Sublime Text, Atom dan sebagainya
Inilah yang perlu Anda lakukan:
- Instal editor kode
- Buka pintunya
- Buat file baru
- Simpan sebagai file .html
kamu siap untuk pergi!
1. Halo Dunia!
Salin dan sisipkan kode berikut ke dalam file HTML baru Anda dan simpanlah. Sekarang jalankan di browser web Anda.
Kode:
Halaman web pertama saya Halo Dunia!
Keluaran:
Selamat! Anda telah membuat file HTML pertama Anda. Anda tidak harus memahaminya pada saat ini. Kami akan menutupinya segera.
Memahami Struktur HTML
Setiap file HTML memiliki struktur umum telanjang. Di sinilah semuanya dimulai. Dan setiap halaman kode besar akan masuk ke struktur ini setelah pemangkasan.
Jadi, mari kita coba memahaminya dari halaman “Hello World!” kode. Elemen berikut adalah bagian wajib untuk setiap file HTML.
- = Ini adalah pernyataan kepada browser bahwa ini adalah file HTML. Anda harus menentukannya sebelum menandai.
- = Ini adalah elemen root dari file HTML. Semua yang Anda tulis berada di antara keduanya dan .
- = Ini adalah bagian informasi meta untuk browser. Kode di dalam tag ini tidak memiliki keluaran visual.
- = Ini adalah bagian yang dirender oleh browser web. Apa yang sebenarnya Anda lihat di situs web adalah rendering kode di antaranya dan .
2. Tag HTML
HTML adalah kolaborasi dari ratusan tag berbeda. Anda perlu belajar cara kerjanya. Anda juga harus memastikan bahwa mereka telah menggunakannya dengan cara yang benar.
Tag HTML biasanya memiliki tag pembuka dan penutup. Tag pembuka memiliki kata kunci yang diapit oleh tanda kurang dari (<) dan lebih besar dari (>). Tag penutup memiliki semuanya sama tetapi tambahan garis miring (/) setelah tanda kurang dari (<).
(2a) Tag Kepala
Semua tag kepala berada di antara keduanya dan . Mereka berisi informasi meta untuk browser web dan mesin pencari. Mereka pada dasarnya tidak memiliki keluaran visual.
Tag judul mendefinisikan judul halaman web yang terlihat pada tab browser. Informasi ini digunakan oleh program web dan mesin pencari. Anda dapat memiliki satu judul tertinggi per file HTML.
Kode:
Halaman web pertama saya
Link tag menautkan halaman HTML Anda dengan sumber daya eksternal. Penggunaan utamanya adalah menghubungkan halaman HTML dengan stylesheet CSS. Ini adalah tag penutup diri dan tidak membutuhkan akhiran . Di sini rel berarti relasi dengan file dan src berarti sumbernya.
Kode:
Meta adalah tag penutupan diri sendiri yang menyediakan informasi meta dari file html. Mesin pencari dan layanan web lainnya menggunakan informasi ini. Meta tag adalah suatu keharusan jika Anda ingin mengoptimalkan halaman Anda untuk mesin pencari.
Kode:
<meta name="description" content="This is the short description that search engines show"
Tag skrip digunakan untuk menyertakan skrip sisi server atau membuat tautan ke file skrip eksternal. Ini dapat memiliki dua atribut di tag pembuka. Salah satunya adalah jenis dan yang lainnya adalah sumber (src).
Kode:
Tag noscript berfungsi saat skrip dinonaktifkan di browser web. Itu membuat halaman kompatibel dengan mereka yang tidak mengizinkan skrip di browser web mereka.
Kode:
Sayang! Skrip dinonaktifkan.
(2b) Tag Tubuh
Semua tag tubuh berada di antara keduanya dan . Mereka memiliki keluaran visual. Di sinilah pekerjaan paling banyak dilakukan. Anda harus menggunakan tag ini untuk menyusun konten halaman utama Anda.
untuk
Ini adalah tag heading. Tajuk terpenting diberi tag dan yang paling tidak penting dengan . Anda harus menggunakannya dalam hierarki yang benar.
Kode:
Ini adalah heading h1 Ini adalah heading h1 Ini adalah heading h1 Ini adalah judul h2 Ini adalah heading h2 Ini adalah heading h2
Keluaran:
Memformat Tag
Teks dalam file html dapat diformat menggunakan banyak tag pemformatan. Ini akan diperlukan ketika Anda ingin menyorot kata atau garis dari konten Anda.
Kode:
Anda dapat menyorot teks Anda dengan berbagai cara. Anda dapat menebalkan , menggarisbawahi , miring , menandai , subskrip , superskrip , dan lainnya!
Keluaran:
Anda dapat menyimpang beberapa kode dari mengoyak menggunakan tag komentar. Kode akan muncul di kode sumber tetapi tidak akan ditampilkan. Penggunaan utama dari tag ini adalah untuk membuat dokumentasi file html untuk referensi di masa mendatang.
Contoh:
You can comment out any code by surrounding them in this way -->
(2c) Tag HTML Penting Lainnya
Anchor adalah tag yang tak ternilai yang digunakan hampir di mana-mana. Anda tidak akan melihat halaman web apa pun secara online tanpa setidaknya satu tautan tautan.
Strukturnya sama. Ini memiliki bagian pembukaan dan penutup . Teks yang ingin Anda jangkar berada di antara dan .
Ada beberapa atribut yang menentukan ke mana dan bagaimana pengguna pergi setelah mengkliknya.
- ahref = ”“ = Ini mendefinisikan tautan tujuan. Tautan itu berada di antara tanda kutip ganda.
- target = ”“ = Ini menentukan apakah URL akan terbuka di tab browser baru atau di tab yang sama. target = ”_ blank” untuk tab baru dan target = ”_ self” untuk membuka di tab yang sama.
- rel = ”“ = Ini mendefinisikan hubungan halaman saat ini dengan halaman tertaut. Jika Anda tidak mempercayai halaman yang ditautkan, Anda dapat menentukan rel = “nofollow”.
Kode:
Klik di sini untuk pergi ke Google. Ini akan terbuka di tab baru. Klik disini . Ini juga akan membawa Anda ke Google tetapi akan terbuka di tab saat ini.
Keluaran:
Tag gambar adalah tag penting lain yang tanpanya Anda tidak dapat membayangkan banyak situs web berbasis gambar.
adalah tag penutup diri. Tidak perlu penutupan tradisional seperti . Ada beberapa atribut yang perlu Anda ketahui sebelum dapat menggunakannya dengan benar.
- src = ”“ = Ini untuk menentukan tautan sumber gambar. Letakkan tautan di antara tanda kutip ganda.
- alt = ”“ = Ini singkatan dari teks alternatif. Ketika gambar Anda tidak dimuat, teks ini akan memberi pengguna gambaran tentang gambar yang hilang.
- lebar = ”“ = Ini mendefinisikan lebar gambar dalam piksel.
- Tinggi = ”“ = Ini mendefinisikan tinggi gambar dalam piksel.
Contoh:
Ini adalah Googleplex pada Agustus 2014. Gambar ini memiliki lebar 500 piksel dan tinggi 375 piksel.
Keluaran:
Tips: Ingin memasukkan gambar yang dapat diklik? Bungkus kode gambar dengan tag. Lihat bagaimana kelanjutannya.
atau
Tag daftar untuk membuat daftar item. singkatan dari daftar memerintahkan (daftar bernomor) dan singkatan dari unordered list (poin-poin).
Item daftar di dalam atau ditandai dengan . li adalah singkatan dari list. Anda dapat memiliki sebanyak mungkin seperti yang Anda inginkan di dalam orang tua atau menandai.
Kode:
Ini adalah daftar yang dipesan: Barang 1 Item 2 Item 3 Ini adalah daftar yang tidak berurutan: Barang 1 Item 2 Item 3
Keluaran:
Tag tabel adalah untuk membuat tabel data. Ada beberapa tag tingkat batin yang mendefinisikan header tabel, baris, dan kolom.
adalah kode induk terluar. Di tag ini, singkatan dari baris tabel, singkatan dari kolom tabel dan singkatan dari header tabel.
Kode:
Nama Usia Profesi Jo 27 Pengusaha Carol 26 Perawat Simone 39 Profesor
Keluaran:
Catatan: Nilai di dalam yang pertama adalah judul. Jadi, kami dulu yang menerapkan efek teks tebal ke teks.
Tabel Pengelompokan
Anda dapat memperluas fungsi tabel menggunakan elemen pengelompokan tabel. Akan ada waktu ketika Anda perlu membuat tabel besar yang dibagi menjadi beberapa halaman.
Mengelompokkan data tabel Anda ke header, body dan footer, Anda dapat mengizinkan gulir independen. Header dan bagian tubuh akan mencetak ke setiap halaman di mana tabel Anda telah terbentang.
Tag pengelompokan tabel adalah:
- = Untuk membungkus judul tabel. Mencetak ke setiap halaman terpisah dari tabel.
- = Untuk membungkus data utama tabel. Anda dapat memiliki sebanyak mungkin sesuai kebutuhan. SEBUAH tag berarti sekelompok data yang terpisah.
- = Untuk membungkus informasi footer dari meja. Mencetak ke setiap halaman terpisah dari tabel.
Harap dicatat bahwa itu tidak wajib untuk menggunakan pengelompokan. Anda dapat menggunakannya untuk membuat tabel yang lebih besar menjadi lebih mudah dibaca. Sementara beberapa pengembang khusus secara nyata menggunakan tag ini sebagai CSS Selectors.
Inilah cara kita mengelompokkan tabel yang dicontohkan ke dalam , dan :
Kode:
Nama Usia Profesi John 27 Pengusaha Carol 26 Perawat Simone 39 Profesor Jumlah Orang: 3
Keluaran:
Elemen formulir digunakan untuk membuat formulir interaktif untuk halaman web. Formulir HTML berisi beberapa elemen yang berurutan. Sebagai contoh:, , dll.
Atribut aksi dalam bentuk sangat penting. Ini menunjuk ke sisi server atau halaman pihak ketiga untuk memproses informasi. Untuk pemrosesan, Anda perlu menentukan metode terlebih dahulu.
Anda dapat menggunakan salah satu dari dua metode, dapatkan atau posting. Dapatkan mengirim semua informasi dalam format URL di mana Post mengirim informasi di badan pesan.
Ada banyak jenis masukan untuk formulir. Jenis masukan yang paling dasar adalah teks. Itu ditulis sebagai . Jenis mungkin juga radio, kotak centang, email, dan sebagainya. Harus ada masukan jenis kirim di bagian bawah untuk membuat tombol kirim.
tag digunakan untuk membuat label dan mengaitkannya dengan masukan. Aturan mengaitkan label dengan input adalah yang memiliki nilai yang sama pada atribut for = ”” dari label dan id = ”” atribut input.
Kode:
Nama depan: Nama keluarga: Bio Singkat: Jenis kelamin: Pria Perempuan
Keluaran:
Catatan: Saya telah mengarahkan tindakan ke nilai nol karena tidak terhubung ke server apa pun untuk memproses informasi.
3. Atribut HTML
Atribut adalah salah satu jenis pengubah untuk tag HTML. Mereka menambahkan konfigurasi baru ke tag HTML.
Sebuah atribut terlihat seperti nama atribut = ”” dan berada di tag HTML pembuka. Nilai atribut berada di antara tanda kutip ganda.
id = ”” dan class = ””
id dan kelas adalah pengidentifikasi tag HTML. Nama yang berbeda ditujukan untuk elemen HTML yang berbeda menggunakan pengenal. Anda dapat menggunakan satu pengenal kelas untuk beberapa elemen. Tetapi Anda tidak dapat menggunakan satu pengidentifikasi id untuk beberapa elemen.
Kode:
Ini judul utamanya
href = ””
href adalah singkatan dari Hypertext Reference. Mereka mengarahkan pengguna ke tautan referensi. Tag jangkar menggunakan href untuk mengirim pengguna ke URL tujuan.
Kode:
src = ””
src adalah singkatan dari sumber. Ini mendefinisikan sumber media atau sumber daya yang Anda gunakan dalam file HTML. Sumbernya bisa berupa URL lokal atau pihak ketiga.
Kode:
alt = “”
alt adalah alternatif. Ini adalah teks cadangan yang digunakan ketika elemen HTML tidak dapat memuat.
Kode:
style = ””
atribut gaya sering digunakan dalam tag HTML. Itu pekerjaan CSS dalam tag HTML. Properti styling Anda berada di antara tanda kutip ganda.
Kode:
Ini adalah gelar lain
4. Tampilan Kode: Blok vs Inline
Beberapa elemen selalu dimulai pada baris baru dan mengambil lebar penuh yang tersedia. Ini adalah elemen “Blok”.
Ex: , , – , bentuk dll.
Beberapa elemen hanya mengambil ruang yang diperlukan dan tidak dimulai pada baris baru. Ini adalah elemen “Inline”.
Mis: ,, ,, dll.
Anda perlu membedakan elemen blok dari inline ketika Anda akan menggunakan gaya CSS. Dalam panduan HTML ini, itu tidak terlalu penting.
Kode:
Halaman web pertama saya Ini adalah heading H2. Ini memiliki tampilan Blok. Ini adalah heading H2 lainnya . Di sini tag garis bawah memiliki tampilan Inline.
Keluaran:
5. Kutipan ganda vs kutipan tunggal dalam HTML
Pertanyaan ini sangat jelas. Apa yang harus Anda gunakan dalam HTML? Kutipan tunggal atau kutipan ganda? Orang-orang tampaknya menggunakan keduanya tetapi mana yang benar?
Dalam HTML, kutipan tunggal dan kutipan ganda sama. Mereka tidak membuat perbedaan dalam output.
Anda dapat menggunakan siapa pun yang Anda sukai. Tetapi mencampurkan keduanya dalam satu halaman kode dianggap sebagai praktik yang buruk. Anda harus konsisten dengan salah satu dari mereka.
6. HTML Semantik vs HTML Non-semantik
Semantic HTML adalah versi terbaru dari HTML, yang juga disebut HTML5. Ini adalah versi yang dikembangkan dari HTML non-semantik dan XHTML.
Mengapa HTML5 lebih baik? Pada versi sebelumnya, elemen HTML diidentifikasi oleh id / nama kelas. Sebagai contoh: dianggap sebagai artikel.
Di HTML5, tag merepresentasikan dirinya sebagai artikel tanpa membutuhkan ID / class identifier.
Demi HTML5, sekarang mesin pencari dan aplikasi web lainnya dapat lebih memahami halaman web. Situs web semantik telah terbukti lebih baik untuk SEO.
Berikut ini daftar beberapa tag HTML5 populer:
- = Ini untuk membungkus konten utama yang ingin Anda tunjukkan kepada pemirsa Anda.
- = Ini untuk menandai bagian header konten seperti judul atau meta penulis.
- = Ini menentukan konten yang ditentukan pengguna atau independen untuk pemirsa Anda.
- = Ini dapat mengelompokkan kode apa pun seperti header, footer atau sidebar. Bisa dibilang, itu adalah bentuk semantik dari sebuah div.
- = Ini adalah tempat konten footer, penafian atau teks hak cipta milik Anda.
- = Ini memungkinkan Anda memasukkan file audio tanpa masalah plugin apa pun.
- = Suka , Anda dapat memasukkan video menggunakan tag ini tanpa masalah plugin.
Struktur HTML5 sederhana akan terlihat seperti ini:
Halaman web pertama saya Menu 8 Menu 1 Ini adalah judul artikelnya Diposting oleh John Doe Isi artikel ada di sini Hak Cipta 2 John Doe
7. Validasi HTML
Sebagian besar profesional web memvalidasi kode mereka setelah menyelesaikannya. Mengapa perlu memvalidasi kode saat berfungsi dengan baik?
Ada dua kemungkinan alasan untuk memvalidasi kode Anda:
- Ini akan membantu Anda membuat kode lintas-browser dan lintas platform yang kompatibel. Kode mungkin tidak menunjukkan kesalahan apa pun di browser Anda saat ini, tetapi mungkin di yang lain. Validasi kode akan memperbaikinya.
- Mesin pencari dan program web lainnya mungkin berhenti merayapi halaman Anda jika Anda memiliki kesalahan di dalamnya. Anda dapat mengonfirmasi melalui validasi bahwa Anda tidak memiliki kesalahan besar.
W3C Validator adalah layanan paling populer untuk validasi kode. Mereka memiliki beberapa metode untuk memvalidasi kode. Anda dapat mengunggah file atau langsung memasukkan kode ke mesin validasinya.
8. Sumber Bermanfaat Lainnya
HTML adalah topik yang selalu dipelajari. Versi HTML yang lebih diperbarui mungkin akan datang lebih awal. Jadi, Anda harus tetap diperbarui dan terus berlatih. Berlatih adalah apa ace HTML.
Berikut ini beberapa sumber daya bermanfaat untuk Anda:
