Tutorial HTML (untuk Pemula)

Tutorial HTML untuk PemulaAdakah anda ingin mempelajari beberapa HTML?


Kedengarannya idea hebat. Itulah sebabnya mengapa kami mengumpulkan tutorial HTML ini untuk pemula.

Terdapat sekurang-kurangnya 1.7 bilion laman web di dunia sekarang. Hampir semua laman web ini menggunakan HTML dalam satu cara atau yang lain.

P.S: Sekiranya anda tidak mahu belajar HTML dan mula membina laman web anda dengan segera, tanpa memerlukan pengekodan, lihat panduan ini: Cara Membuat Laman Web secara PERCUMA (tanpa belajar HTML).

Pengenalan HTML


Apa itu HTML?

Apa itu HTMLHTML, singkatan dari HyperText Markup Language, adalah bahasa komputer untuk membuat laman web dan aplikasi web. Terdiri terutamanya dari rangkaian kod yang biasanya ditulis dalam fail teks dan disimpan sebagai HTML, kod yang ditulis dalam bahasa HTML diterjemahkan menjadi teks yang indah dan berformat baik atau gabungan teks dan media apabila dilihat melalui penyemak imbas.

HTML pertama kali dikembangkan oleh ahli fizik Britain, Tim Berners-Lee pada tahun 1990, dan ia telah melalui begitu banyak evolusi sejak itu sehingga versi terbaru dapat mencapai lebih banyak daripada yang dibayangkan mungkin ketika bahasa itu pertama kali diciptakan.

Dalam tutorial ini, kami akan membahas asas-asas bahasa HTML dan semua yang perlu anda ketahui untuk memulakan HTML sebagai pemula.

Versi HTML

Pertama, ikhtisar cepat dari semua versi HTML sejak HTML dicipta.

  • HTML 1.0: Ini adalah versi barebones HTML dan pelepasan bahasa yang pertama.
  • HTML 2.0: Versi ini diperkenalkan pada tahun 1995. Secara beransur-ansur berkembang, memungkinkan kemampuan tambahan termasuk muat naik fail berdasarkan bentuk, tabel, peta gambar sisi klien, dan pengantarabangsaan.
  • HTML 3.2: Dalam usaha untuk memastikan pengembangan standard untuk World Wide Web, World Wide Web Consortium (W3C) didirikan oleh Tim Berners-Lee pada tahun 1994. Menjelang tahun 1997, mereka menerbitkan HTML 3.2.
  • HTML 4.0: Kemudian pada tahun 1997, W3C mengeluarkan HTML 4.0 – versi yang menggunakan banyak jenis dan atribut elemen khusus penyemak imbas.
  • HTML 4.0 kemudian dikeluarkan semula dengan pengeditan kecil pada tahun 1998.
  • HTML 4.01: Pada bulan Disember 1999, HTML 4.01 dirilis.
  • XHTML: Spesifikasi diperkenalkan pada tahun 2000 dan disarankan untuk digunakan sebagai standar bersama dengan HTML 4.01. Ia menggabungkan XML untuk memastikan kod ditulis dengan betul dan untuk memastikan interoperabilitas antara bahasa pengaturcaraan.
  • HTML5: W3C menerbitkan HTML5 sebagai cadangan pada Oktober 2014 dan kemudian mengeluarkan HTML 5.1 pada November 2016.

Memilih Penyunting HTML Anda

Pilih penyunting HTMLSekiranya anda berfikir untuk membuat laman web dalam HTML, anda memerlukan penyunting HTML. Terdapat beberapa faedah menggunakan editor HTML.

Editor HTML yang baik akan memastikan kod anda tetap bersih dan teratur. Ia juga akan mengesan ketika anda membuka tag baru dan menutupnya secara automatik untuk mengelakkan anda mempunyai kod kereta dan sebagai akibatnya mengurangkan berapa banyak pengetikan yang harus anda lakukan. Sebilangan besar penyunting HTML hari ini membolehkan anda melihat halaman web anda untuk melihat seperti apa dalam penyemak imbas web menggunakan ciri WYSIWYG mereka.

Terdapat banyak editor HTML percuma dan berbayar, berikut adalah beberapa pilihan teratas yang boleh anda pilih:

Blok Binaan Asas HTML


Setelah anda memutuskan penyunting HTML yang ingin anda gunakan, langkah seterusnya adalah memahami asas HTML. Semasa membuat pengekodan dalam HTML, penting untuk memahami blok bangunan ini. Mereka merangkumi tag, atribut, dan elemen. Kami akan melihat asasnya di bawah:

Pengenalan Teg

Setelah anda menggunakan HTML, perkara pertama yang perlu anda fahami ialah teg. Pada dasarnya, tag memisahkan teks biasa dari kod HTML.

Akibatnya, ketika menggunakan HTML, tag membuat perbezaan antara apakah dokumen anda ditampilkan sebagai teks biasa atau “teks yang diubah” yang pada dasarnya merupakan kod teks yang nampaknya memperlihatkan serangkaian hal (hyperlink, gambar, media, atau lainnya) kaedah pemformatan) berdasarkan apa yang diperintahkan untuk dipaparkan berdasarkan tag.

Mari kita lihat perkataan “Dia adalah anak lelaki” sebagai contoh:

  • Dalam format teks biasa, anda mendapat: Dia adalah anak lelaki.
  • Dalam format teks tebal, anda mendapat: Dia budak lelaki

Untuk mencapai apa yang kita ada dalam format tebal anda harus menggunakan teg.

menjadikan teks tebal dalam html

Dalam HTML mentah kita ada Dia budak lelaki yang diterjemahkan oleh penyemak imbas kepada ini: Dia budak lelaki.

“Dia adalah anak laki-laki” juga bisa keluar dengan huruf miring.

Ini dicapai dengan menggunakan teg.

menjadikan teks dicetak miring dalam html

Kami mempunyai: Dia budak lelaki yang kemudian keluar sebagai Dia budak lelaki.

Hyperlinked dicapai dengan menggunakan teg.

menjadikan teks berangkai dalam html

Dalam HTML mentah kita ada: Dia adalah anak lelaki yang menunjukkan bahawa Dia adalah anak lelaki.

Terdapat beberapa perkara yang harus anda fahami mengenai tag:

  • Teg secara praktiknya merupakan blok asas HTML – anda tidak boleh melakukan HTML tanpa teg! Sekiranya anda terjebak pada tag mana yang harus digunakan, pastikan anda melihat jadual berkala HTML kami.
  • Hampir setiap tag terbuka mesti ditutup. Perlu diingat bahawa terdapat pengecualian. Contoh teg yang tidak perlu ditutup ialah tag kosong, seperti garis putus:
    .
  • Teg mengandungi kurang daripada (“<”) and greater than (“>Pendakap sudut. Tanda penutup mengandungi tanda garis miring yang menjadi sebelum nama tag ditutup. Contoh teg terbuka: . Contoh teg tertutup .
  • Setiap fail HTML bermula dengan tag pembuka dan berakhir dengan tanda penutup. Baris pertama fail HTML harus menyatakan jenis dokumen supaya penyemak imbas mengetahui rasa HTML yang anda gunakan. Inilah sebabnya mengapa anda melihat halaman HTML bermula dengan ““Sebelum kod HTML bermula.

Sebelum kandungan ditambahkan, kebanyakan fail HTML pada dasarnya kelihatan seperti ini:

HTML--

Bahagian yang mengikuti tag biasanya mengandungi maklumat mengenai dokumen seperti tajuknya, tag meta, dan di mana untuk mencari fail CSSnya – kandungan yang tidak dapat dilihat secara langsung di halaman penyemak imbas. Bahagian antara “ dan“(Yang kami wakili dengan” KANDUNGAN UTAMA “) adalah tempat kandungan utama fail HTML, yang akan dilihat oleh penonton di penyemak imbas. Ini merangkumi segala-galanya dari perenggan pertama hingga hiperpautan ke pemformatan ke multimedia dan semua yang lain.

Pengenalan Elemen

pengenalan unsur

Dalam HTML, “elemen” terdiri dari tag pembuka dan penutup serta kandungan antara tag.

Di dalam “Dia budak lelaki“(Dalam huruf tebal), kami mempunyai ini dalam HTML: Dia budak lelaki. Teks “Dia adalah anak laki-laki” dikelilingi oleh tanda terbuka dan tertutup. Segala-galanya, termasuk tag pembuka, kandungan dan tag tutup adalah elemen.

Ketika tag dibuka, konten diperkenalkan dan tag ditutup, kita memiliki elemen.

Unsur dapat dalam bentuk dasar atau dalam bentuk kompleks. Kenapa? Kerana apa-apa di antara tag terbuka dan tag penutup serta tag tersebut adalah elemen. Ini bermaksud bahawa kita boleh mempunyai unsur-unsur dalam elemen. Dalam contoh kita sekarang, “dia adalah anak lelaki” (Dia budak lelaki) adalah unsur.

Anda akan melihat bahawa kami mengatakan sebelumnya bahawa dokumen HTML mengandungi tag sebelum kandungan bermula. Kandungannya boleh merangkumi beratus-ratus elemen yang berbeza, tetapi semua elemen ini adalah bagian dari elemen “badan” (kerana elemen badan terbuka, berisi konten dan kemudian ditutup).

Pengenalan Atribut

Walaupun dokumen HTML pada dasarnya menggunakan teg untuk segalanya, kadang-kadang kita ingin menyampaikan maklumat tambahan di dalam elemen. Dalam kes ini, kami menggunakan atribut. Atribut digunakan untuk menentukan ciri-ciri elemen, ia digunakan di dalam tag pembuka elemen. Atribut terdiri daripada nama dan nilai.

Perhatikan bahawa nilai atribut diletakkan di dalam tanda petik menggunakan format Teks Anda.

contoh atribut

Contohnya:

Dia budak lelaki

Dalam contoh ini, kita mengarahkan “Dia adalah anak laki-laki” sejajar di tengah dokumen.

Bermula dengan HTML


Bermula dengan HTMLDengan andaian anda ingin membuat dokumen HTML asas anda sendiri hari ini, bagaimana anda memulakannya? Dari membuat tajuk halaman hingga membuat borang, kami akan membimbing anda untuk memulakan HTML di bawah.

Membuat HTML Unsur

Semasa membuat dokumen HTML, salah satu perkara pertama yang akan anda buat adalah unsur. Ini mengandungi metadata (atau data mengenai dokumen HTML). Ini termasuk maklumat seperti kumpulan watak, judul dokumen, gaya dokumen, skrip, dll.

Sebilangan elemen dalam sertakan tajuk, yang dibuat dengan teg.</p><p><strong>Contohnya</strong>:</p><pre><title>Ini adalah tajuk halaman kami

Tajuk ini akan dipaparkan di tab penyemak imbas. Itu juga yang akan diindeks sebagai tajuk untuk halaman ketika bot mesin pencari merangkak laman web anda.

Ini juga merangkumi elemen, yang sering digunakan untuk menentukan enjin carian maklumat yang dapat digunakan untuk menerangkan kandungan dalam senarai mereka. Ini merangkumi keterangan, kata kunci, maklumat pengarang, dll elemen juga menentukan set watak yang digunakan dokumen HTML.

Membuat Tajuk dalam HTML

membuat tajuk dalam html

Tajuk memainkan peranan utama dalam kejayaan laman web. Pertama, mereka memudahkan pembaca mengimbas kandungan halaman anda. Kedua, dan mungkin yang lebih penting, mereka menyampaikan struktur halaman web anda ke enjin carian dan oleh itu sering memberi kesan bagaimana kandungan anda berada dalam hasil enjin carian.

Walaupun begitu, penting untuk mengelakkan penggunaan tag tajuk untuk menjadikan teks anda besar atau tebal. Terdapat tag lain yang boleh digunakan untuk itu (yang akan kita sampaikan kemudian di bahagian ini). Sebaliknya, tag tajuk harus digunakan semata-mata untuk struktur.

Terdapat enam tag tajuk dalam HTML:

ke
, dengan

tanda yang menunjukkan tajuk yang paling penting dan
tanda yang menunjukkan tajuk yang paling tidak penting.

Untuk membuat tajuk, cukup tentukan tajuk apa yang Anda buat, buka tajuk dengan tag tajuk biasa, dan selalu ingat untuk menutup tag setelah selesai..

Contoh Tajuk HTML:

  • Ini Tajuk HTML Pertama Anda

    (terbesar)

  • Ini Tajuk HTML Kedua Anda

  • Ini Tajuk HTML Ketiga Anda

  • Ini Tajuk HTML Keempat Anda

  • Ini Tajuk HTML Kelima Anda
  • Ini Tajuk HTML Keenam Anda

Membuat perenggan

membuat perenggan dalam HTML

Langkah seterusnya adalah mula membuat perenggan. Ayat dapat dibuat dengan

teg.

Contohnya:

Ini adalah perenggan pertama anda.

Ini adalah perenggan kedua anda, dan anda akan membuat banyak lagi perenggan.

Perlu diingat bahawa menulis dalam HTML sangat berbeza dengan menulis dalam teks murni. Oleh itu, jika anda memecah teks di dalam HTML tanpa memulakan perenggan baru, tidak akan menjadi masalah apabila teks tersebut dipaparkan oleh penyemak imbas. Sebaliknya, anda ingin menggunakan pemecahan garis, yang diwakili oleh
teg.

Contohnya:

Ini adalah perenggan baru. Dan saya mahu menggunakan sebilangan baris baru. Jadi saya memecahnya.

Ini tidak akan keluar seperti berikut:

Ini adalah perenggan baru.
Dan saya mahu menggunakan sebilangan baris baru.
Jadi saya memecahnya.

Sebaliknya, ia akan keluar seperti ini:

Ini adalah perenggan baru. Dan saya mahu menggunakan sebilangan baris baru. Jadi saya memecahnya.

Jadi, bagaimana anda memecah teks menjadi baris baru sehingga ia akan kelihatan seperti ini:

Ini adalah perenggan baru.
Dan saya mahu menggunakan sebilangan baris baru.
Jadi saya memecahnya.

Dengan menggunakan putus talian.

Contohnya:

Ini adalah perenggan baru.
Dan saya mahu menggunakan sebilangan baris baru.
Jadi saya memecahnya.

Yang mengatakan, penting untuk diperhatikan bahawa garis putus (
) tag adalah teg kosong, jadi anda tidak perlu menutupnya.

Memformat Teks dalam HTML

memformat teks dalam HTML

Langkah seterusnya adalah memformat teks anda dalam HTML. Di sinilah anda dapat menunjukkan sama ada anda mahu teks anda keluar dengan huruf tebal, miring, bergaris bawah, berlangganan, berskrip, dan lain-lain. Ini adalah panduan asas, jadi bahagian ini tidak akan menjadi yang terbaik untuk pemformatan. Sebaliknya, kami hanya akan memasukkan beberapa tag pemformatan asas. Proses untuk menggunakan format lain adalah mudah – cari teg yang anda mahukan dan teruskan:

Menggunakan berani: Dia budak lelaki keluar sebagai Dia budak lelaki

Menggunakan huruf miring: Dia budak lelaki keluar sebagai Dia budak lelaki

Menggariskan teks: Dia budak lelaki keluar sebagai Dia budak lelaki. Perlu diingat bahawa tag tidak digunakan lagi dalam HTML 4.01 dan ditakrifkan semula untuk mewakili teks yang berbeza gaya dalam HTML5. Akibatnya, disarankan untuk menggunakan CSS untuk menunjukkan teks yang harus digarisbawahi. Oleh kerana artikel ini adalah panduan asas, kami membuatnya mudah.

Menggunakan langganan: Dia budak lelaki keluar sebagai Dia budak lelaki

Menggunakan superskrip: Dia budak lelaki keluar sebagai Dia budak lelaki

Untuk tag lain yang dapat digunakan untuk memformat, anda mungkin ingin melihat glosari di akhir sumber ini di mana kami telah memasukkan banyak tag HTML yang relevan.

Daftar Teratur dan Tidak Beratur

Cepat atau lambat anda perlu membuat senarai. Daftar boleh disusun (misalnya bernombor) atau tidak tersusun (iaitu tidak bernombor).

Berikut adalah contoh senarai yang dipesan:

  1. Perkara 1
  2. Perkara 2
  3. Perkara 3

Inilah cara membuatnya:

  1. Perkara 1
  2. Perkara 2
  3. Perkara 3

Berikut adalah contoh senarai yang tidak disusun:

  • Perkara 1
  • Perkara 2
  • Perkara 3

Inilah cara membuatnya:

  • Perkara 1
  • Perkara 2
  • Perkara 3

Sekiranya ia belum jelas. Berikut adalah pecahan:

The

  • tag digunakan untuk menunjukkan setiap item dalam senarai. Semasa membuat senarai, anda boleh menggunakan
      untuk menunjukkan senarai yang dipesan (“o” = dipesan dan “l” = senarai) atau