Panduan HTML Asas untuk Dummies

Terakhir dikemas kini pada 17 November 2021


Dua puluh tahun yang lalu, walaupun anda hanya blogger hobi, anda harus mengetahui beberapa pengekodan web untuk melindungi diri anda atau menambahkan fungsi mudah ke laman web anda. Tetapi sekarang terdapat begitu banyak editor dan pemalam yang tersedia walaupun mengetahui asas-asas HTML tidak diperlukan lagi.

Masalah dengan ini adalah bahawa jika anda tidak mengetahui beberapa asas, anda dapat dengan mudah menghadapi masalah sebenar di blog anda dan perlu menyewa pembangun yang mahal untuk menyelesaikan masalah yang mungkin menjadi masalah kecil. Bukan hanya itu, tetapi membuat perubahan pada blog anda seperti menambahkan widget teks khusus memerlukan sedikit pengetahuan.

Kod HTML.
"Kod" HTML.

Dan jika anda mengalami tata letak kandungan tidak kelihatan betul, pengetahuan HTML dapat membawa anda kembali ke landasan.

Berikut adalah beberapa panduan HTML versi kami untuk blogger dan pemilik perniagaan dalam talian yang bukan berteknologi.

HTML adalah tulang belakang internet masa kini. Berjuta-juta laman web bersama-sama membentuk internet. Di mana HTML adalah blok bangunan semua laman web ini.

Sebelum Kita Mula ...

1. Apa itu HTML?

HTML adalah singkatan dari Hyper Text MArkupe Lbahasa. Ia adalah bahasa standard untuk menandakan kandungan untuk penyemak imbas web.

HTML diwakili oleh "Elemen". Elemen juga dikenali sebagai "Tag".

2. Mengapa HTML diperlukan?

Pelayar web hanya boleh membuat laman web apabila ia ditulis dalam bahasa yang disokong mereka. HTML adalah bahasa markup yang paling biasa dan mempunyai penerimaan tertinggi kepada pelayar web.

Itulah sebabnya anda memerlukan HTML.

3. Adakah kes HTML sensitif?

HTML bukan kes sensitif. Tetapi amalan terbaik adalah menulis HTML dengan kes yang betul.

Langkah-langkah untuk Mencipta Fail HTML Pertama Anda

Anda boleh membuat fail HTML asas menggunakan Notepad pada komputer anda. Tetapi ia akan menyakitkan untuk menulis banyak baris kod.

Anda memerlukan Editor Kod. Editor kod yang baik akan memudahkan menulis dan mengatur kod besar.

Saya menggunakan dan mengesyorkan Notepad + + (bebas dan sumber terbuka) untuk menulis bahasa web. Ada editor lain yang boleh anda gunakan SublTeks, Atom dan lain-lain.

Inilah yang perlu anda lakukan:

  1. Pasang editor kod
  2. Bukanya
  3. Buat fail baru
  4. Simpan sebagai fail. Html

Anda sudah bersedia untuk pergi!

Contoh penyunting kod Atom
Penyunting kod - Atom

1. Hello Dunia!

Salin dan tampal kod berikut ke dalam fail HTML baru anda dan simpannya. Sekarang jalankan pada pelayar web anda.

Kod:

Laman web pertama saya Hai dunia!

Output:

Tahniah! Anda telah mencipta fail HTML pertama anda. Anda tidak perlu faham pada ketika ini. Kami akan menutupinya tidak lama lagi.

Memahami Struktur HTML

Setiap fail HTML mempunyai struktur telanjang yang biasa. Di sinilah semuanya bermula. Dan setiap halaman kod yang besar akan datang ke struktur ini selepas dikurangkan.

Oleh itu, mari cuba memahaminya dari "Hello World!" kod. Elemen berikut adalah bahagian wajib bagi setiap fail HTML.

  • = Ini adalah pernyataan kepada penyemak imbas bahawa ini adalah fail HTML. Anda mesti menentukannya sebelum teg.
  • = Ini adalah elemen akar fail HTML. Semua yang anda tulis antara lain dan .
  • = Ini adalah bahagian maklumat meta untuk penyemak imbas. Kod dalam tag ini tidak mempunyai output visual.
  • = Ini adalah bahagian yang diberikan oleh penyemak imbas web. Yang betul-betul anda lihat di laman web adalah rendering kod antara dan .

2. Teg HTML

HTML adalah kolaborasi beratus-ratus tag yang berbeza. Anda perlu belajar bagaimana mereka berfungsi. Anda juga perlu memastikan bahawa mereka menggunakannya dengan cara yang betul.

Tag HTML biasanya mempunyai tag pembuka dan penutup. Tag pembuka mempunyai kata kunci yang dikelilingi oleh tanda kurang dari (<) dan tanda lebih besar daripada (>). Tanda penutup mempunyai semua yang sama tetapi garis miring tambahan (/) selepas tanda kurang daripada (<).

(2a) Tag Ketua

Semua tanda kepala berada di antara dan . Mereka mengandungi maklumat meta untuk penyemak imbas web dan mesin carian. Mereka pada dasarnya tidak mempunyai output visual.

Tag tajuk menentukan tajuk laman web yang boleh dilihat pada tab penyemak imbas. Maklumat ini digunakan oleh program web dan enjin carian. Anda boleh mempunyai satu tajuk tertinggi setiap fail HTML.

Kod:

Laman web pertama saya
Tag Tajuk - contoh HTML
Tag tajuk muncul di atas penyemak imbas anda.

Tag pautan menghubungkan halaman HTML anda dengan sumber luaran. Penggunaan utamanya adalah menghubungkan halaman HTML dengan helaian gaya CSS. Ini adalah tanda tutup diri dan tidak memerlukan akhir . Di sini rel bermaksud hubungan dengan fail dan src bermaksud sumbernya.

Kod:

Meta adalah satu lagi tag penutup diri yang menyediakan maklumat meta fail html. Enjin carian dan perkhidmatan web lain menggunakan maklumat ini. Tag Meta adalah satu kemestian jika anda mahu mengoptimumkan halaman anda untuk enjin carian.

Kod:

<meta name="description" content="This is the short description that search engines show"

Tag skrip digunakan untuk memasukkan skrip sisi pelayan atau membuat pautan ke fail skrip luaran. Ia boleh mempunyai dua atribut dalam tag pembuka. Satu ialah jenis dan yang lain adalah sumber (src).

Kod:

Tag Noscript berfungsi apabila skrip dimatikan dalam pelayar web. Ia menjadikan halaman yang serasi kepada mereka yang tidak membenarkan skrip dalam pelayar web mereka.

Kod:

Malangnya! Skrip dilumpuhkan.

(2b) Tags Badan

Semua tanda badan berada di antara dan . Mereka mempunyai output visual. Di sinilah kerja paling banyak dilakukan. Anda harus menggunakan tag ini untuk menyusun kandungan halaman utama anda.

ke

Ini adalah tag tajuk. Tajuk yang paling penting ditandai dengan dan yang paling tidak penting dengan . Anda harus menggunakannya dalam hierarki yang betul.

Kod:

Ini adalah tajuk h1 Ini adalah tajuk h1 Ini adalah tajuk h1 Ini adalah tajuk h2 Ini adalah tajuk h2 Ini adalah tajuk h2

Output:

Pemformatan Tag

Teks dalam fail html boleh diformatkan menggunakan banyak tag pemformatan. Ia perlu apabila anda ingin menyerlahkan perkataan atau baris dari kandungan anda.

Kod:

Anda boleh menyerlahkan teks anda dengan pelbagai cara. Anda boleh berani , garis bawah , miring , tanda , langganan , superskrip dan banyak lagi!

Output:

Anda boleh menyimpulkan beberapa kod dari pemilihan menggunakan tag komen. Kod akan muncul dalam kod sumber tetapi tidak akan diberikan. Penggunaan utama tag ini adalah untuk membuat dokumentasi fail html untuk rujukan masa depan.

Contoh:

You can comment out any code by surrounding them in this way -->

(2c) Tag HTML Penting Lain

Anchor adalah tag yang tidak ternilai yang digunakan hampir di mana-mana sahaja. Anda tidak akan melihat mana-mana laman web dalam talian tanpa sekurang-kurangnya satu pautan utama.

Strukturnya sama. Ia mempunyai bahagian pembukaan dan penutup . Teks yang ingin anda tetapkan berada di antara dan .

Terdapat beberapa atribut yang menentukan di mana dan bagaimana pengguna pergi selepas mengklik padanya.

  • ahref = "" = Ia mentakrifkan pautan destinasi. Pautan itu berlaku di antara petikan berganda.
  • sasaran = "" = Ini menentukan sama ada URL akan dibuka di tab penyemak imbas baru atau di tab yang sama. target = "_ blank" adalah untuk tab baru dan target = "_ diri" adalah untuk membuka di tab yang sama.
  • rel = "" = Ini menentukan hubungan halaman semasa dengan halaman yang dipautkan. Sekiranya anda tidak mempercayai halaman yang dipautkan, anda dapat menentukan rel = "nofollow".

Kod:

Klik di sini untuk pergi ke Google. Ia akan dibuka di tab baru. Klik di sini . Ini juga akan membawa anda ke Google tetapi akan dibuka di tab semasa.

Output:

Tag imej adalah tag penting lain tanpa anda tidak dapat membayangkan banyak laman web berasaskan imej.

adalah tanda tutup diri. Ia tidak memerlukan penutup tradisional seperti . Terdapat beberapa atribut yang perlu anda ketahui sebelum dapat menggunakannya dengan betul.

  • src = "" = Ini adalah untuk menentukan pautan sumber imej. Letakkan pautan di antara petikan berganda.
  • alt = "" = Ia bermaksud teks alternatif. Apabila imej anda tidak dimuatkan, teks ini akan memberi pengguna idea tentang imej yang hilang.
  • lebar = "" = Ia mentakrifkan lebar imej dalam piksel.
  • Tinggi = "" = Ia menentukan ketinggian imej dalam piksel.

Contoh:

Ini adalah Googleplex pada bulan Ogos 2014. Gambar ini mempunyai lebar 500 piksel dan tinggi 375 piksel.

Output:

Petua: Ingin memasukkan gambar yang boleh diklik? Balut kod gambar dengan teg. Lihat bagaimana keadaannya.

atau

Tag senarai adalah untuk membuat senarai item. bermaksud senarai teratur (senarai bernombor) dan bermaksud senarai yang tidak tersusun (titik peluru).

Item senarai di dalam atau ditandakan dengan . li bermaksud senarai. Anda boleh mempunyai seberapa banyak seperti yang anda mahukan di dalam ibu bapa atau teg.

Kod:

Ini adalah senarai tertib: Perkara 1 Perkara 2 Perkara 3 Ini adalah senarai yang tidak tersusun: Perkara 1 Perkara 2 Perkara 3

Output:

Tag jadual adalah untuk membuat jadual data. Terdapat beberapa teg peringkat dalaman yang mentakrifkan pengepala jadual, baris dan lajur.

adalah kod induk luar. Dalam teg ini, bermaksud barisan meja, bermaksud lajur jadual dan bermaksud pengepala jadual.

Kod:

Nama Umur Profesion Jo 27 Ahli perniagaan Carol 26 Jururawat Simone 39 Guru Besar

Output:

Catatan: Nilai di dalam yang pertama adalah tajuk. Jadi, kami menggunakan yang menggunakan kesan teks tebal pada teks.

Jadual Pengumpulan

Anda boleh memanjangkan fungsi jadual menggunakan elemen pengelompokan jadual. Akan ada masa apabila anda perlu membuat jadual besar yang berpecah kepada beberapa halaman.

Mengumpulkan data jadual anda ke pengepala, badan dan kaki, anda boleh membenarkan menatal bebas. Bahagian header dan badan akan mencetak ke setiap halaman di mana jadual anda telah dibentangkan.

Tag pengumpulan jadual adalah:

  • = Untuk membungkus tajuk jadual. Ia mencetak ke setiap halaman perpecahan jadual.
  • = Untuk membungkus data utama jadual. Anda boleh mempunyai seberapa banyak seperti yang anda perlukan. A tag bermaksud kumpulan data yang berasingan.
  • = Untuk membungkus maklumat footer jadual. Ia mencetak ke setiap halaman perpecahan jadual.

Sila ambil perhatian bahawa ia tidak wajib menggunakan kumpulan. Anda boleh menggunakannya untuk membuat jadual yang lebih besar lebih mudah dibaca. Walaupun sesetengah pemaju khas menggunakan tag ini sebagai CSS Selectors.

Inilah cara kita dapat mengumpulkan jadual yang kita contohi , dan :

Kod:

Nama Umur Profesion John 27 Ahli perniagaan Carol 26 Jururawat Simone 39 Guru Besar Jumlah Orang: 3

Output:

Elemen borang digunakan untuk membuat borang interaktif untuk laman web. Bentuk HTML mengandungi beberapa elemen berturut-turut. Sebagai contoh:, , dan lain-lain.

Atribut tindakan dalam bentuk sangat penting. Ia menunjukkan kepada pihak pelayan atau halaman pihak ketiga untuk memproses maklumat. Untuk pemprosesan, anda perlu menentukan kaedah terlebih dahulu.

Anda boleh menggunakan salah satu daripada dua kaedah, dapatkan atau siarkan. Dapatkan semua maklumat dalam format URL yang mana Post menghantar maklumat dalam badan mesej.

Terdapat banyak jenis input untuk borang. Jenis input yang sangat asas ialah teks. Ia ditulis sebagai . Jenisnya mungkin juga radio, kotak centang, e-mel dan sebagainya. Harus ada input jenis kirim di bahagian bawah untuk membuat butang kirim.

tag digunakan untuk membuat label dan mengaitkannya dengan input. Peraturan mengaitkan label dengan input adalah yang memiliki nilai yang sama untuk atribut = "" label dan atribut id = "" input.

Kod:

Nama pertama: Nama terakhir: Bio Pendek: Jantina: Lelaki Perempuan

Output:

Nota: Saya telah menunjuk tindakan ke nilai nol kerana ia tidak disambungkan kepada mana-mana pelayan untuk memproses maklumat.

3. Atribut HTML

Atribut adalah satu jenis pengubah untuk tag HTML. Mereka menambah konfigurasi baru pada tag HTML.

Atribut kelihatan seperti nama atribut = ”” dan terletak di tag HTML pembuka. Nilai atribut terletak di antara tanda petik ganda.

id = "" dan kelas = ""

id dan kelas adalah pengenal tag HTML. Nama yang berlainan ditetapkan kepada elemen HTML yang berbeza menggunakan pengenal. Anda boleh menggunakan satu pengecam kelas untuk pelbagai elemen. Tetapi anda tidak boleh menggunakan satu pengecam id untuk pelbagai elemen.

Kod:

Inilah tajuk utama

href = ""

href bermaksud Hypertext Reference. Mereka mengarahkan pengguna ke pautan rujukan. Tanda sauh menggunakan href untuk menghantar pengguna ke URL tujuan.

Kod:

Google

src = ""

src bermaksud sumber. Ia mentakrifkan sumber media atau sumber yang anda gunakan dalam fail HTML. Sumbernya boleh menjadi URL tempatan atau pihak ketiga.

Kod:

alt = ""

alt adalah alternatif. Ia adalah teks sandaran yang digunakan ketika elemen HTML tidak dapat dimuat.

Kod:

gaya = ""

atribut gaya sering digunakan dalam tag HTML. Ia berfungsi CSS dalam tag HTML. Ciri-ciri gaya anda pergi di antara petikan berganda.

Kod:

Ini adalah tajuk lain

4. Paparan Kod: Blok vs Sebaris

Beberapa elemen selalu bermula pada baris baru dan menggunakan lebar yang tersedia sepenuhnya. Ini adalah elemen "Blok".

Cth: , , - , borang dll.

Sebilangan elemen hanya memerlukan ruang yang diperlukan dan tidak bermula pada baris baru. Ini adalah elemen "Sebaris".

Ex: ,, , dan lain-lain.

Anda perlu membezakan unsur-unsur blok dari inline apabila anda akan menggunakan gaya CSS. Dalam panduan HTML ini, ia tidak begitu penting.

Kod:

Laman web pertama saya Ini adalah tajuk H2. Ia mempunyai paparan Blok. Ini adalah tajuk H2 yang lain . Di sini tag garis bawah mempunyai paparan sebaris.

Output:

5. Petikan berganda vs petikan tunggal dalam HTML

Soalan ini sangat jelas. Apa yang perlu anda gunakan dalam HTML? Kutipan tunggal atau petikan berganda? Orang seolah-olah menggunakan kedua-dua tetapi mana yang betul?

Dalam HTML, petikan tunggal dan petikan berganda sama. Mereka tidak membuat perbezaan dalam output.

Anda boleh menggunakan sesiapa sahaja yang anda suka. Tetapi pencampuran keduanya dalam halaman kod dianggap sebagai amalan buruk. Anda harus selaras dengan mana-mana satu daripada mereka.

6. HTML semantik vs HTML Bukan semantik

Semantik HTML adalah versi terbaru HTML, yang juga disebut HTML5. Ia adalah versi yang dibangunkan HTML dan XHTML bukan semantik.

Mengapa HTML5 lebih baik? Dalam versi sebelumnya, elemen HTML dikenal pasti dengan nama id / kelas. Sebagai contoh: dianggap sebagai artikel.

Dalam HTML5, tag mewakili dirinya sebagai artikel tanpa memerlukan pengecam id / kelas.

Demi HTML5, sekarang enjin carian dan aplikasi web lain dapat lebih memahami laman web. Laman web semantik telah terbukti lebih baik untuk SEO.

Berikut adalah senarai beberapa teg HTML5 yang popular:

  • = Ini untuk membungkus kandungan utama yang anda mahu tunjukkan kepada penonton anda.
  • = Ini adalah untuk menandakan bahagian kepala kandungan seperti tajuk atau meta pengarang.
  • = Ia menentukan kandungan yang ditentukan pengguna atau bebas kepada penonton anda.
  • = Ia boleh mengelompokkan sebarang kod seperti header, footer atau sidebar. Anda boleh mengatakan, ia adalah bentuk semantik div.
  • = Di sinilah kandungan footer, penafian atau teks hak cipta milik anda.
  • = Ia membolehkan anda memasukkan fail audio tanpa sebarang masalah plugin.
  • = Suka , anda boleh memasukkan video menggunakan tag ini tanpa masalah pemalam.

Struktur HTML5 yang mudah akan kelihatan seperti ini:

Laman web pertama saya Menu 8 Menu 1 Ini adalah tajuk artikel Dihantar oleh John Doe Kandungan artikel terdapat di sini Hak Cipta 2 John Doe

7. Pengesahan HTML

Kebanyakan profesional web mengesahkan kod mereka selepas menamatkannya. Kenapa perlu untuk mengesahkan kod apabila ia berfungsi dengan baik?

Terdapat dua sebab yang mungkin untuk mengesahkan kod anda:

  1. Ia akan membantu anda membuat kod serasi pelayar dan serasi platform anda. Kod ini mungkin tidak menunjukkan ralat dalam pelayar semasa anda, tetapi mungkin dalam satu lagi. Pengesahan kod akan memperbaikinya.
  2. Enjin carian dan program web lain mungkin berhenti merangkak halaman anda jika anda mempunyai ralat di dalamnya. Anda boleh mengesahkan melalui pengesahan bahawa anda tidak mempunyai sebarang kesilapan besar.

Pengesah W3C adalah perkhidmatan yang paling popular untuk pengesahan kod. Mereka mempunyai beberapa kaedah untuk mengesahkan kod. Anda boleh memuat naik fail atau memasukkan kod secara langsung dalam enjin pengesahan mereka.

8. Sumber Berguna Lain

HTML adalah topik yang sentiasa diajar. Versi HTML yang lebih kemas kini mungkin akan datang lebih awal. Oleh itu, anda perlu sentiasa dikemas kini dan terus mengamalkannya. Amalan ialah apa yang HTML.

Berikut adalah beberapa sumber yang berguna untuk anda: