17 Contoh Kod HTML Mudah yang Anda Boleh Pelajari dalam 10 Minit

17 Contoh Kod HTML Mudah yang Anda Boleh Pelajari dalam 10 Minit

Walaupun laman web moden umumnya dibina dengan antara muka yang mesra pengguna, berguna untuk mengetahui beberapa HTML asas. Sekiranya anda mengetahui 17 contoh tag HTML berikut (dan beberapa tambahan), anda akan dapat membuat halaman web asas dari awal atau mengubah kod yang dibuat oleh aplikasi seperti WordPress.





Kami telah memberikan contoh kod HTML dengan output untuk kebanyakan tag. Sekiranya anda ingin melihatnya beraksi, muat turun contoh fail HTML di akhir artikel. Anda boleh bermain dengannya dalam penyunting teks dan memuatkannya di penyemak imbas untuk melihat apa yang dilakukan oleh perubahan anda.



1.

Anda memerlukan tag ini di awal setiap dokumen HTML yang anda buat. Ini memastikan bahawa penyemak imbas mengetahui bahawa membaca HTML, dan mengharapkan HTML5, versi terbaru.





Walaupun ini sebenarnya bukan tag HTML, tetap bagus untuk diketahui.

2.

Ini adalah teg lain yang memberitahu penyemak imbas bahawa ia membaca HTML. Teg tersebut terus mengikut tag DOCTYPE, dan anda menutupnya dengan teg tepat di hujung fail anda. Semua perkara lain dalam dokumen anda berada di antara teg ini.



3.

Teg memulakan bahagian tajuk fail anda. Perkara yang masuk di sini tidak muncul di laman web anda. Sebaliknya, ia mengandungi metadata untuk enjin carian, dan maklumat untuk penyemak imbas anda.

Untuk halaman asas, tag akan mengandungi tajuk anda, dan itu sahaja. Tetapi ada beberapa perkara lain yang boleh anda sertakan, yang akan kami selesaikan sebentar lagi.



Empat.

Teg ini menetapkan tajuk halaman anda. Yang perlu anda lakukan ialah meletakkan tajuk anda dalam tag dan menutupnya, seperti ini (saya juga memasukkan tag tajuk untuk menunjukkan konteksnya):


My Website

Itulah nama yang akan dipaparkan sebagai tajuk tab ketika dibuka di penyemak imbas.



5.

Seperti tag tajuk, metadata diletakkan di bahagian tajuk halaman anda. Metadata digunakan terutamanya oleh enjin carian, dan merupakan maklumat mengenai apa yang ada di halaman anda. Terdapat sebilangan medan meta yang berbeza, tetapi ini adalah beberapa bidang yang paling biasa digunakan:

  • penerangan : Huraian asas halaman anda.
  • kata kunci : Pilihan kata kunci yang berlaku untuk halaman anda.
  • pengarang : Pengarang halaman anda.
  • kawasan pandang : Teg untuk memastikan halaman anda kelihatan baik di semua peranti.

Berikut adalah contoh yang mungkin berlaku untuk halaman ini:




Teg 'viewport' harus selalu memiliki 'width = lebar-perangkat, skala awal = 1.0' sebagai konten untuk memastikan halaman anda ditampilkan dengan baik pada peranti mudah alih dan desktop.

6.

Selepas anda menutup bahagian tajuk, anda akan menuju ke bahagian badan. Anda buka ini dengan tag, dan tutup dengan tag. Itu betul-betul di hujung fail anda, tepat sebelum tag.

Semua kandungan halaman web anda berada di antara tag ini. Ia semudah bunyinya:


Everything you want displayed on your page.

7.

Header Sedikit Kurang Besar


Sub-Tajuk

Keputusan:

Seperti yang anda lihat, mereka semakin kecil di setiap peringkat.

8.

Tag perenggan memulakan perenggan baru. Ini biasanya memasukkan dua baris putus.

Lihat, sebagai contoh, pada jeda antara baris sebelumnya dan yang sebelumnya. Itulah yang a

tag akan berjaya.

Your first paragraph.


Your second paragraph.

Keputusan:

Perenggan pertama anda.

Perenggan kedua anda.

Anda juga boleh gunakan gaya CSS dalam tag perenggan anda, seperti ini yang mengubah saiz teks:

This is 50% larger text.

Keputusan:

9.

Tanda pemisah baris memasukkan pemecahan baris tunggal:

The first line.

The second line (close to the first one).

Keputusan:

Bekerja dengan cara yang serupa adalah

teg. Ini melukis garis mendatar di halaman anda dan bagus untuk memisahkan bahagian teks.

10.

Teg ini menentukan teks penting. Secara umum, itu bermaksud akan berani. Walau bagaimanapun, mungkin menggunakan CSS untuk membuat paparan teks secara berbeza.

masa terbaik untuk membeli komputer meja

Walau bagaimanapun, anda boleh menggunakan dengan selamat hingga teks tebal.

Very important things you want to say.

Keputusan:

Perkara yang sangat penting yang ingin anda sampaikan.

Sekiranya anda biasa dengan untuk teks tebal, anda masih boleh menggunakannya. Tidak ada jaminan ia akan terus berfungsi dalam versi HTML yang akan datang, tetapi buat masa ini, ia berfungsi.

sebelas.

Suka dan , dan ada kaitan. The teg mengenal pasti teks yang ditekankan, yang secara amnya bermaksud teks akan dicetak miring. Sekali lagi, ada kemungkinan CSS akan membuat paparan teks yang ditekankan secara berbeza.

An emphasized line.

Keputusan:

Garisan yang ditekankan.

The teg masih berfungsi, tetapi sekali lagi, kemungkinan ia akan ditamatkan dalam versi HTML yang akan datang.

12.

The , atau sauh, teg membolehkan anda membuat pautan. Pautan ringkas kelihatan seperti ini:

Pergi ke MUO

Atribut 'href' mengenal pasti tujuan pautan. Dalam banyak kes, ini akan menjadi laman web lain. Ini juga bisa berupa file, seperti gambar atau PDF.

Atribut berguna lain termasuk 'target' dan 'title.' Atribut target hampir digunakan secara eksklusif untuk membuka pautan di tab atau tetingkap baru, seperti ini:

Go to MUO in a new tab

Keputusan:

Pergi ke MUO di tab baru

Atribut 'title' membuat petua alat. Arahkan kursor ke pautan di bawah untuk melihat cara kerjanya:

Hover over this to see the tool tip

Keputusan:

Arahkan kursor ke atas untuk melihat hujung alat

13.

Sekiranya anda ingin menyematkan gambar di halaman anda, anda perlu menggunakan tag gambar. Anda biasanya akan menggunakannya bersama dengan atribut 'src'. Ini menentukan sumber gambar, seperti ini:

Keputusan:

bagaimana untuk memperbaiki proses kritikal mati

Atribut lain tersedia, seperti 'tinggi,' lebar, 'dan' alt '. Begini rupa:

the name of your image

Seperti yang anda jangkakan, atribut 'tinggi' dan 'lebar' menetapkan ketinggian dan lebar gambar. Secara umum, adalah idea yang baik untuk hanya menetapkan salah satu daripadanya supaya gambar menjadi betul. Sekiranya anda menggunakan kedua-duanya, anda boleh berakhir dengan gambar yang diregangkan atau dikuas.

Tag 'alt' memberitahu penyemak imbas teks apa yang akan ditampilkan jika gambar tidak dapat ditampilkan dan merupakan idea yang baik untuk disertakan dengan gambar apa pun. Sekiranya seseorang mempunyai sambungan yang sangat perlahan atau penyemak imbas lama, mereka masih dapat mendapatkan idea tentang apa yang seharusnya ada di halaman anda.

14.

    Tanda senarai yang dipesan membolehkan anda membuat senarai yang dipesan. Secara umum, ini bermaksud anda akan mendapat senarai bernombor. Setiap item dalam senarai memerlukan tag item senarai (

  1. ), jadi senarai anda akan kelihatan seperti ini:


    1. First thing

    2. Second thing

    3. Third thing

    Keputusan:

    1. Perkara pertama
    2. Perkara kedua
    3. Perkara ketiga

    Dalam HTML5, anda boleh menggunakan

      untuk membalikkan urutan nombor. Dan anda boleh menetapkan nilai permulaan dengan atribut mula.

      Atribut 'type' membolehkan anda memberitahu penyemak imbas jenis simbol yang akan digunakan untuk item senarai. Ini dapat diatur ke '1,' 'A,' 'a,' 'I,' atau 'i,' menetapkan senarai untuk dipaparkan dengan simbol yang ditunjukkan seperti ini:

        lima belas.

          Senarai yang tidak tersusun jauh lebih mudah daripada rakannya yang disusun. Ini hanyalah senarai buletin.


          • First item

          • Second item

          • Third item

          Keputusan:

          • Item pertama
          • Item kedua
          • Item ketiga

          Senarai yang tidak disusun juga mempunyai atribut 'type', dan anda boleh menetapkannya ke 'disc,' 'circle,' atau 'square.'

          16.

          Walaupun menggunakan jadual untuk pemformatan disukai, ada banyak kali anda mahu menggunakan baris dan lajur untuk menyegmentasikan maklumat di halaman anda. Beberapa tag diperlukan untuk mendapatkan jadual untuk berfungsi. Berikut adalah contoh kod HTML:














          1st column 2nd column
          Row 1, column 1 Row 1, column 2
          Row 2, column 1 Row 2, column 2

          The

          dan
          tag menentukan permulaan dan akhir jadual. Thetag mengandungi semua kandungan jadual.

          Setiap baris jadual dilampirkan dalam ateg. Setiap sel dalam setiap baris dibungkus dengan baiktag untuk tajuk lajur, atautag untuk data lajur. Anda memerlukan salah satu dari ini untuk setiap lajur pada setiap baris.

          Keputusan:

          Lajur pertamaLajur ke-2
          Baris 1, lajur 1Baris 1, lajur 2
          Baris 2, lajur 1Baris 2, lajur 2

          17.

          Apabila anda memetik laman web atau orang lain dan anda ingin membezakan petikan daripada dokumen anda yang lain, gunakan tag blockquote. Yang perlu anda buat hanyalah memasukkan petikan dalam membuka dan menutup tag blockquote:

          The Web as I envisaged it, we have not seen it yet. The future is still so much bigger than the past.

          Keputusan:

          Web seperti yang saya bayangkan, kami belum melihatnya. Masa depan masih jauh lebih besar daripada masa lalu.

          Pemformatan tepat yang digunakan mungkin bergantung pada penyemak imbas yang anda gunakan atau CSS laman web anda. Tetapi tegnya tetap sama.

          Contoh Kod HTML

          Dengan 17 contoh HTML ini, anda seharusnya dapat membuat laman web yang mudah. Anda boleh menguji semuanya sekarang dalam penyunting teks dalam talian untuk mengetahui bagaimana ia berfungsi.

          Untuk pelajaran yang lebih kecil dalam HTML, cubalah beberapa aplikasi pembelajaran mikro untuk pengekodan. Mereka akan membantu anda mencapai kepantasan dalam masa yang singkat.

          Berkongsi Berkongsi Tweet E-mel Mahu Belajar Pengekodan Asas? Cubalah 5 Aplikasi Pengekodan Berukuran Bite dalam Waktu Luang Anda

          Ingin belajar pengekodan asas tetapi mempunyai sedikit masa? Aplikasi pengekodan saiz gigitan ini akan memakan masa hanya beberapa minit dari hari sibuk anda.

          Baca Seterusnya           Topik-topik yang berkaitan
          • Pengaturcaraan
          • Perkataan
          • HTML
          • Pembangunan Web
          • Tutorial Pengekodan
          Mengenai Pengarang Andy Betts(221 Artikel Diterbitkan)

          Andy adalah bekas wartawan cetak dan editor majalah yang telah menulis mengenai teknologi selama 15 tahun. Pada masa itu, dia telah menyumbang banyak penerbitan dan menghasilkan karya tulis untuk syarikat teknologi besar. Dia juga telah memberikan komen pakar untuk media dan menjadi tuan rumah panel di acara industri.

          Lebih Banyak Dari Andy Betts

          Langgan buletin kami

          Sertailah buletin kami untuk mendapatkan petua, ulasan, ebook percuma, dan tawaran eksklusif!

          Klik di sini untuk melanggan