Panduan HTML Asas untuk Dummies

Dikemas kini pada 20 Januari 2020

Dua puluh tahun yang lalu, walaupun anda hanya seorang blogger hobi, anda perlu mengetahui beberapa pengekodan web untuk melindungi diri anda atau menambah fungsi mudah ke laman web anda. Tetapi sekarang terdapat begitu banyak editor dan plugin yang dapat mengetahui bahawa asas-asas HTML tidak lagi diperlukan membuat laman web or jalankan blog.

Masalah dengan ini ialah jika anda tidak mengetahui beberapa asas, anda boleh dengan mudah mendapatkan masalah sebenar dalam blog anda dan perlu mengupah seorang pembangun yang mahal untuk membetulkan apa yang mungkin menjadi masalah kecil. Bukan itu sahaja, tetapi mencipta perubahan pada blog anda seperti menambah widget teks tersuai memerlukan sedikit pengetahuan.

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 hari ini. Berjuta-juta laman web bersama-sama membentuk internet. Di mana HTML adalah blok bangunan semua laman web ini.

Q & A pemula

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 "Unsur". Elemen juga dikenali sebagai "Teg".

2- Kenapa diperlukan HTML?

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 yang 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 Text Sublime, 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!


Pergi Top

1- Hello World!

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

Kod:

<! DOCTYPE html> <html> <head> <title> Laman web pertama saya </ title> </ head> <body> <p> Hello World! </ P>

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 kita cuba memahaminya daripada kod "Hello World!". Unsur berikut adalah bahagian mandatori untuk setiap fail HTML.

  • <! DOCTYPE html> = Ini adalah perisytiharan kepada pelayar bahawa ini adalah fail HTML. Anda mesti nyatakannya sebelum tag <html>.
  • <Html> </ html> = Ini adalah elemen akar fail HTML. Semua yang anda tulis antara <html> dan </ html>.
  • <Head> </ head> = Ini adalah bahagian maklumat meta untuk penyemak imbas. Kod dalam tag ini tidak mempunyai output visual.
  • <Body> </ body> = Ini adalah bahagian yang membuat penyemak imbas web. Apa yang anda nampak di laman web adalah penyebaran kod antara <body> dan </ body>.


Pergi Top

2- Tags 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 pembukaan dan tag tutup. Tag pembuka mempunyai kata kunci yang dikelilingi oleh tanda kurang daripada (<) dan lebih besar daripada tanda (>). Tag tutup mempunyai semua yang sama tetapi slash forward tambahan (/) selepas tanda kurang daripada (<).

(2a) Tag Ketua

Semua tag kepala pergi antara <head> dan </ head>. Mereka mengandungi maklumat meta untuk pelayar web dan enjin carian. Mereka pada dasarnya tidak mempunyai output visual.

<Title> </ title>

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:

<title> Halaman web pertama saya </ title>
Tag tajuk muncul di atas penyemak imbas anda.

<pautan>

Pautan pautan menghubungkan halaman HTML anda dengan sumber luar. Penggunaan utamanya adalah menghubungkan halaman HTML dengan stylesheets CSS. Ia adalah tag penutup diri dan tidak memerlukan penutupan </ link>. Di sini rel bermaksud hubungan dengan fail dan src bermakna sumbernya.

Kod:

<link rel = "stylesheet" type = "text / css" src = "style.css">

<Meta>

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 = "Ini adalah penerangan pendek yang enjin carian menunjukkan"

<script> </ script>

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:

<script type = "text / javascript" src = "scripts.js"> </ script>

<noscript> </ noscript>

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:

<noscript> <p> Alas! Skrip dilumpuhkan. </ P> </ noscript>

(2b) Tags Badan

Semua tag tubuh pergi antara <body> dan </ body>. Mereka mempunyai output visual. Di sinilah kerja yang paling banyak dilakukan. Anda perlu menggunakan teg ini untuk menyusun kandungan halaman utama anda.

<h1> </ h1> ke <h6> </ h6>

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

Kod:

<h1> Ini adalah tajuk h1 </ h1> <h2> Ini adalah tajuk h2 </ h2> <h3> Ini adalah tajuk h3 </ h3> <h4> Ini adalah tajuk h4 </ h4> <h5 > Ini adalah tajuk h5 </ h5> <h6> Ini adalah tajuk h6 </ h6>

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:

<p> Anda boleh menyerlahkan teks anda dengan banyak cara. </ p> <p> Anda boleh <strong> bold </ strong>, <u> garis bawah </ u>, <em> italic </ em>, < > tandakan </ mark>, <sub> subskrip </ sub>, <sup> superskrip </ sup> dan banyak lagi! </ p>

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:

<! - <p> Anda boleh memberi komen sebarang kod dengan mengelilinginya dengan cara ini </ p> ->

(2c) Tag HTML Penting Lain

<a> </a>

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 <a> pembukaan dan bahagian penutup </a>. Teks yang anda ingin jangkar berlaku di antara <a> dan </a>.

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.
  • target = "" = Ia menentukan sama ada URL akan dibuka dalam tab pelayar baru atau dalam tab yang sama. target = "_ blank" adalah untuk tab baru dan target = "_ self" adalah untuk membuka dalam tab yang sama.
  • rel = "" = Ia mentakrifkan hubungan halaman semasa dengan halaman yang dipautkan. Jika anda tidak mempercayai halaman yang dipaut, anda boleh menentukan rel = "nofollow".

Kod:

<p> <a target="_blank" href="https://www.google.com/"> Klik di sini </a> untuk pergi ke Google. Ia akan dibuka dalam tab baru. </ P> <p> <a target="_self" href="https://www.google.com/"> Klik di sini </a>. Ia juga akan membawa anda ke Google tetapi akan terbuka dalam tab semasa. </ P>

Output:

<img />

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

<img /> ialah tag penutup diri. Ia tidak memerlukan penutup tradisional seperti </ img>. Terdapat beberapa atribut yang anda perlu ketahui sebelum anda boleh 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.
  • Ketinggian = "" = Ia menentukan ketinggian imej dalam piksel.

Contoh:

<p> Ini adalah Googleplex pada bulan Ogos 2014. </ p> <p> Imej ini mempunyai lebar piksel 500 dan ketinggian piksel 375. </ p> <img src = "https: //upload.wikimedia. org / wikipedia / commons / 0 / 0e / Googleplex-Patio-Aug-2014.JPG "alt =" Ibu Pejabat Google pada bulan Ogos 2014 "width =" 500 "height =" 375 "

Output:

Petua: Ingin memasukkan imej yang boleh diklik? Balutkan kod imej dengan label <a>. Lihat bagaimana ia berlaku.

<ol> </ ol> atau <ul> </ ul>

Label senarai adalah untuk membuat senarai item. <ol> bermaksud senarai yang disusun (senarai bernombor) dan <ul> bermaksud senarai tidak disusun (mata peluru).

Item senarai di dalam <ol> atau <ul> ditandakan dengan <li> </ li>. li bermaksud senarai. Anda boleh mempunyai seberapa banyak <li> yang anda mahu di dalam tag <ol> atau <ul> ibu bapa.

Kod:

<p> Ini adalah senarai teratur: </ p> <ol> <li> Item 1 </ li> <li> Item 2 </ li> <li> Item 3 </ li> Ini adalah senarai tidak teratur: </ p> <ul> <li> Item 1 </ li> <li> Item 2 </ li> <li> Item 3 </ li> </ ul>

Output:

<Table> </ table>

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

<table> </ table> ialah kod ibu bapa luar. Dalam tag ini, <tr> bermaksud baris jadual, <td> bermaksud lajur jadual dan <th> bermaksud header header.

Kod:

<table> <tr> <th> Name </ th> <th> Age </ th> <th> Profession </ th> </ <td> <td> </ td> <td> 27 </ td> <td> Jururawat </ td> </ td> </ / td> <td> 26 </ td> <td> Profesor </ td> </ tr> </ table>

Output:

Nota: Nilai di dalam <tr> pertama adalah tajuk. Jadi, kami menggunakan <th> 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:

  • <thead> </ thead> = Untuk membungkus tajuk jadual. Ia mencetak ke setiap halaman perpecahan jadual.
  • <tbody> </ tbody> = Untuk membungkus data utama jadual. Anda boleh mempunyai sebanyak <tbody> seperti yang anda perlukan. Tag <tbody> bermaksud kumpulan data yang berasingan.
  • <tfoot> </ tfoot> = 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 menggabungkan jadual yang dicontohkan kepada <thead>, <tbody> dan <tfoot>:

Kod:

<table> <thead> <tr> <th> Name </ th> <th> Age </ th> <th> Profession </ th> </ John </ td> <td> 27 </ td> <td> Perniagaan </ td> </ tr> <tr> <td> Carol </ td> <td> 26 </ td> <td> <td> <td> <td> <td> </ td> <td> 39 </ td> <td> Profesor </ td> </ tr> </ tbody> <tfoot> Jumlah Orang: </ td> <td> 3 </ td> </ tr> </ tfoot> </ table>

Output:

<Form> </ form>

Elemen borang digunakan untuk membuat bentuk interaktif untuk laman web. Bentuk HTML mengandungi beberapa elemen berturut-turut. Sebagai contoh: <label>, <input>, <textarea> dll.

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 adalah teks. Ia ditulis sebagai <input type = "text">. Jenis mungkin juga radio, kotak pilihan, e-mel dan sebagainya. Perlu memasukkan input jenis di bahagian bawah untuk membuat butang penyerah.

Label <label> digunakan untuk membuat label dan mengaitkannya dengan input. Peraturan mengaitkan label dengan input adalah yang mempunyai nilai yang sama untuk = "" atribut label dan id = "" atribut input.

Kod:

<form action = "#"> <label for = "firstname"> First Name: </ label> <input type = "text" id = "firstname"> <br> <label for = "lastname" </ label> <input type = "text" id = "lastname"> <br> <label for = "bio"> Short Bio: </ label> <textarea id = "bio" 10 "placeholder =" Enter your bio here ... "> </ textarea> <br> <label> Gender: </ label> <br> <label for =" male "> Male </ label> <input type = "radio" name = "gender" id = "male"> <br> <label for = "female"> Female </ label> <input type = "radio" name = "gender" id = "female"> <br > <input type = "submit" value = "Submit"> <form>

Output:

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


Pergi Top

3- Atribut HTML

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

Atribut kelihatan seperti attributename = "" dan duduk dalam tag HTML pembuka. Nilai atribut berlaku antara petikan berganda.

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:

<h1 class = "heading"> Ini adalah tajuk utama </ h1>

href = ""

href bermaksud Rujukan Hypertext. Mereka mengarahkan pengguna ke pautan rujukan. Label anchor <a> menggunakan href untuk menghantar pengguna ke URL destinasi.

Kod:

<a href="https://www.google.com/"> Google </a>

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:

<img src = "https://upload.wikimedia.org/wikipedia/commons/0/0e/Googleplex-Patio-Aug-2014.JPG" />

alt = ""

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

Kod:

<img src = "https://upload.wikimedia.org/wikipedia/commons/0/0e/Googleplex-Patio-Aug-2014.JPG" alt = "Ibu Pejabat Google" />

gaya = ""

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

Kod:

<h2 style = "color: red"> Ini tajuk lain </ h2>


Pergi Top

4- Paparan Kod: Blok vs Inline

Sesetengah elemen sentiasa bermula pada barisan baru dan mengambil lebar yang lengkap. Ini adalah elemen "Blok".

Ex: <div>, <p>, <h1> - <h6>, bentuk dll.

Sesetengah elemen hanya mengambil ruang yang diperlukan dan tidak bermula pada baris baru. Ini adalah elemen "Tertentu".

Ex: <a>, <span>, <br>, <strong>, <img> 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:

<! DOCTYPE html> <html> <head> <title> Halaman web pertama saya </ title> </ head> <body> <h2> Ini adalah tajuk H2. Ia mempunyai paparan Blok. </ H2> <h2> Ini adalah tajuk H2 </> lain </ u>. Di sini, teg garis bawah mempunyai paparan Inline. </ H2> </ body> </ html>

Output:


Pergi Top

5- Kutipan 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.


Pergi Top

6- Semantik HTML vs HTML Tidak 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 telah dikenalpasti oleh nama id / kelas. Sebagai contoh: <div id = "article"> </ div> dianggap artikel.

Dalam HTML5, tag <article> </ article> mewakili dirinya sebagai artikel tanpa memerlukan pengenal 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:

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

Struktur HTML5 yang mudah akan kelihatan seperti ini:

<! DOCTYPE html> <html> <head> <meta charset = "utf-8" /> <title> Laman web pertama saya </ title> </ head> <body> li> Menu 1 </ li> <li> Menu 2 </ li> </ ul> </ nav> </ header> <main> <article> <header> <h2> h2> <p> Dihantar oleh John Doe </ p> </ header> <p> Kandungan artikel yang akan datang di sini </ p> </ article> </ main> <footer> <p> p> </ footer> </ body> </ html>


Pergi Top

7- HTML Validation

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.


Pergi Top

8- Sumber Lain yang Berguna

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: