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

        untuk menunjukkan senarai yang tidak tersusun (“u” = tidak tersusun dan “l” = senarai). Mendapat intinya?

        Senarai bersarang

        Kita juga boleh mempunyai senarai bersarang atau senarai dalam senarai.

        Contoh:

        • Perkara 1
          • Item 1 bersarang
          • Item 2 bersarang
        • Perkara 2
        • Perkara 3

        Ini boleh dibuat dengan:

        • Perkara 1
          • Item 1 bersarang
          • Item 2 bersarang
          • Item 3 bersarang
        • Perkara 2
        • Perkara 3

        Seperti yang anda lihat, anda hanya membuka tag penyenaraian lain – dipesan (

          ) atau tidak tersusun (

            ) – bergantung pada apa yang anda mahukan sebelum menutup item yang anda mahu bersarang.

            membuat hyperlink dalam HTML

            Web adalah satu rangkaian halaman yang saling berkaitan secara besar-besaran. Sekiranya anda membuat laman web – sama ada secara dalaman atau luaran, atau kedua-duanya – anda perlu memaut ke halaman lain. Pautan ke halaman dalaman di laman web anda, atau ke halaman luaran di web, dipanggil hyperlink. Walaupun orang biasanya menghubungkan teks, elemen HTML apa pun – misalnya, gambar – dapat dihubungkan.

            The tag digunakan untuk menentukan pautan dalam HTML, sementara atribut “href” digunakan untuk menentukan tujuan pautan. Pautan kemudian dimasukkan ke dalam petikan setelah tanda “sama dengan” sebelum tag ditutup.

            Contohnya:

            Untuk membuat hyperlink, ini: TEKS LINK ANDA DI SINI akan muncul sebagai TEKS LINK ANDA DI SINI

            Sekarang, anggap anda menghubungkan ke fail tempatan di mana anda mempunyai semua halaman HTML anda dalam folder yang sama. Dalam kes ini, anda tidak perlu memasukkan URL laman web. Cukup tambahkan jalan fail. Sebagai contoh, jika memaut ke fail yang bertajuk about-page.html, pautan hiper anda akan menjadi TEKS LINK ANDA DI SINI, yang memaut ke fail about-page.html.

            Sekiranya fail HTML yang ingin anda pautkan adalah tempatan tetapi dalam folder yang berbeza dari folder utama, anda hanya menentukan jalan fail. Sebagai contoh, jika fail tersebut berada di folder “files” di bawah dokumen utama tempat dokumen semasa anda berada, hyperlink anda akan menjadi seperti ini TEKS LINK ANDA DI SINI

            Anda mungkin ingin menentukan bagaimana anda mahu pautan dibuka cth. dalam tetingkap / tab baru. Anda akan menggunakan atribut target untuk itu.

            Contoh:

            TEKS LINK ANDA DI SINI menentukan bahawa pautan harus dibuka di tab baru.

            TEKS LINK ANDA DI SINI menentukan bahawa pautan harus dibuka di tab yang sama.

            Terdapat atribut lain yang dapat digunakan untuk menyampaikan cara yang berbeza untuk membuka pautan:

            • _blank – Buka di tab baru.
            • _self – Buka di tab yang sama.
            • _parent – Buka di bingkai induk
            • _top – Buka di seluruh tingkap
            • nama bingkai – Buka dalam bingkai bernama

            Anda juga boleh mempunyai titik gambar ke pautan.

            Contohnya:

            Dia budak lelaki
            

            Ini memberitahu penyemak imbas untuk menampilkan gambar yang ditarik dari fail gambar “images / html-tutorial-for-beginners-3.jpg” dan menghubungkannya ke https://websitesetup.org. Atribut “alt” menunjukkan apa yang harus ditunjukkan jika gambar tidak dapat ditampilkan (kerana tetapan penyemak imbas atau beberapa perkara lain yang menghalang gambar ditampilkan).

            Menggunakan Imej

            menggunakan gambar dalam HTML

            Imej ditambahkan ke dokumen HTML dengan teg. The teg adalah tag kosong, jadi tidak perlu ditutup.

            Contohnya:

            Dia budak lelaki

            Ini adalah contoh dasar untuk memberitahu penyemak imbas untuk menampilkan gambar berjudul “images / html-tutorial-for-beginners-3.jpg” yang ditarik dari direktori yang sama dengan dokumen HTML. Atribut “alt” memberitahu penyemak imbas untuk menunjukkan teks (dikenal sebagai “teks alternatif”) yang disebut “Dia adalah anak laki-laki” jika atas sebab tertentu penyemak imbas atau tetapan internet menghalang penyemak imbas untuk menampilkan gambar. Sekiranya anda ingin menarik gambar di direktori lain, atau di laman web luaran, alamat / jalan lengkap harus ditentukan.

            Melampaui asas, kami juga dapat menggunakan atribut lain untuk menyesuaikan gambar dengan lebih baik. Sebagai contoh, atribut “style” dapat digunakan untuk menentukan lebar, tinggi atau keduanya.

            Contohnya:

            TEKS ALTERNATIF ANDA

            (“lebar” dan “tinggi” yang dicetak miring harus diganti dengan nilai sebenarnya dalam “px” (mis. “20px”) yang Anda inginkan untuk gambar anda.)

            Membuat Jadual

            membuat jadual dalam HTML

            Apabila anda semakin memahami HTML, anda akan ingin mempelajari pelbagai cara untuk menyampaikan maklumat dengan cara yang lebih teratur. Salah satu cara tersebut adalah melalui penggunaan jadual.

            Jadual dibuat dengan

            teg. Setiap tajuk dalam jadual ditentukan dengan

            (“Barisan meja”) teg. Data jadual kemudian ditunjukkan dengan

            (“Header meja”) tag sementara setiap baris ditentukan dengan

            teg.

            Contohnya:

            Tajuk Jadual 1 Tajuk Jadual 2 Tajuk Jadual 3
            Input 1 di bawah tajuk 1 Input 1 di bawah tajuk 2 Input 1 di bawah tajuk 3
            Input 2 di bawah tajuk 1 Input 2 di bawah tajuk 2 Input 2 di bawah tajuk 3
            Input 3 di bawah tajuk 1 Input 3 di bawah tajuk 2 Input 3 di bawah tajuk 3

            Ini memberi kita sesuatu seperti ini:

            contoh jadual 1

            Seperti yang anda lihat, walaupun kami mempunyai meja, agak tidak tersusun. Untuk mengatur, kita dapat menambahkan beberapa gaya pada kod. Dalam kes ini, kami menambah lebar:

            Tajuk Jadual 1 Tajuk Jadual 2 Tajuk Jadual 3
            Input 1 di bawah tajuk 1 Input 1 di bawah tajuk 2 Input 1 di bawah tajuk 3
            Input 2 di bawah tajuk 1 Input 2 di bawah tajuk 2 Input 2 di bawah tajuk 3
            Input 3 di bawah tajuk 1 Input 3 di bawah tajuk 2 Input 3 di bawah tajuk 3

            Ini menghasilkan sesuatu yang lebih teratur:

            contoh jadual 2

            Anda mungkin ingin pergi lebih maju dan menggunakan sempadan, mengatur penjajaran mendatar atau menegak untuk kandungan jadual, memperkenalkan pembahagi, padding, dll. Walau bagaimanapun, anda perlu mempelajari beberapa CSS untuk melakukan perkara seperti ini. Kami mengekalkan asas tutorial ini dan tidak akan membahasnya dalam artikel ini.

            Petikan dalam HTML

            petikan dalam HTML

            Terdapat pelbagai jenis petikan, dan petikan ini dilambangkan oleh unsur yang berbeza.

            Untuk petikan asas, berikut adalah contoh:

            Ini adalah contoh. Dan Inilah petikan kami

            Ini keluar sebagai: Ini adalah contoh. Dan “Inilah petikan kami”

            Apabila anda menggunakan tag, tanda petik secara automatik ditambahkan pada apa yang dilampirkan dalam tag.

            Anda juga boleh menggunakan tanda petik, yang dilakukan dengan

            teg.

            Contoh:

            Ini adalah contoh. Dan

            Inilah blokquote kami. Dalam contoh ini, kami cuba menunjukkan cara memformat teks untuk menunjukkan blokquote dalam HTML. Ini berbeza dengan tanda petik biasa, kerana simbol "sebut harga" sebenarnya mungkin atau mungkin tidak ditambahkan bergantung pada gaya CSS, tetapi teksnya disorot.

            Ia akan kelihatan seperti ini:

            contoh blockquote 1

            Menggunakan Komen dalam HTML

            Semasa melakukan sebarang bentuk pengekodan, penting untuk belajar bagaimana memasukkan komen dalam kod anda. Komen digunakan untuk membuat kod anda lebih teratur. Anda boleh memasukkan peringatan kepada diri sendiri atau nota kepada orang lain untuk mempermudah sesuatu.

            Pada mulanya, ini mungkin tidak penting, tetapi apabila anda mula menulis beratus-ratus atau ribuan baris kod, dan ketika semuanya mulai rumit, komen akan sangat berguna..

            Komen tidak akan ditunjukkan kepada penyemak imbas oleh penyemak imbas. Ingat bahawa ia dapat dilihat dalam kod sumber.

            Komen juga boleh digunakan di mana sahaja dalam kod. Mereka tidak akan mengubah fungsi kod anda dengan cara apa pun.

            Anda boleh memasukkan komen dengan membuka tanda kurung, termasuk tanda hubung berganda, menambahkan komen anda, termasuk tanda hubung berganda yang lain, dan kemudian menutup tanda kurung anda.

            Contohnya:

            Perlu diperhatikan juga, terutama ketika melakukan debug, anda boleh memberi komen mengenai garis kod. Dengan cara ini, kod tersebut tetap ada di dalam dokumen tetapi tidak berfungsi kerana anda telah mengomentarinya.

            Contohnya:

            Dalam kes ini, sementara “Dia adalah anak laki-laki” seharusnya keluar dengan berani kami telah mengomentarinya dan akan diabaikan oleh penyemak imbas. Dalam senario ini, sejauh penyemak imbas, kami tidak mempunyai apa-apa.

            Ini juga boleh digunakan dengan cara ini:

            Dia budak lelaki yang menunjukkan Dia budak lelaki. Ini kerana kami memberi komen “is a.” Kami hanya ingin menunjukkan kepada anda bahawa hampir apa sahaja, di dalam atau di luar elemen, dapat dikomentari. Anda boleh memasukkan nota dalam komen anda untuk rujukan – ia tidak mengubah sifat apa yang dipaparkan.

            Menggunakan Warna dalam HTML

            menggunakan warna dalam HTML

            Cepat atau lambat, anda ingin menggunakan warna untuk menunjukkan elemen tertentu dalam dokumen HTML anda. Ini dapat dilakukan dalam tiga cara utama: dengan nilai HEX, dengan nilai RGB, atau dengan nama warnanya.

            Menggunakan warna dalam HTML biasanya dilakukan dengan atribut gaya.

            Contoh 1:

            Ini adalah warna biru

            Dengan menggunakan nilai HEX untuk warna biru “# 0000FF” kami meminta penyemak imbas untuk menunjukkan teks anda (dalam hal ini “Ini adalah warna biru”) menggunakan warna biru.

            Contoh 2:

            Ini adalah warna hijau

            Kami mengarahkan teks untuk diserlahkan dalam warna hijau menggunakan nilai RGB.

            Contoh 3:

            Ini adalah warna kuning

            Dengan menggunakan nilai HSL, kami meminta teks tersebut diserlahkan dengan warna kuning.

            Contoh 4:

            Ini adalah warna oren

            Kami menggunakan nama warna HTML (dalam hal ini “oren” – yang kami sorot dalam kod dengan mencetak huruf miring) untuk meminta teks tersebut diserlahkan dalam warna oren. Jelas, ini hanya dapat dilaksanakan untuk teks yang anda tahu nama warna dan sukar bagi warna warna tertentu yang dapat dilakukan dengan mudah dengan kod HEX atau nilai RGB. Walau apa pun, anda boleh mendapatkan senarai 140 nama warna HTML disusun oleh Kod Warna HTML.

            Tidak dapat difahami, anda tidak mempunyai semua maklumat yang diperlukan – seperti kod HEX, nilai RGB, dll – untuk semua warna. Jangan panik – pemilih warna oleh W3Sekolah adalah alat yang hebat yang membolehkan anda memilih warna apa pun dan menunjukkan kepada anda semua maklumat mengenai warna itu termasuk kod HEX, nilai RGB, dan nilai HSL.

            Menggunakan iFrames dalam HTML

            Dalam dokumen HTML, iFrame (bingkai sebaris) dapat digunakan untuk menanamkan fail dalam dokumen saat ini. Pada dasarnya, anda boleh menggunakannya untuk memaparkan laman web atau kandungan lain dari laman web lain di dalam laman web semasa.

            Contohnya:

            Dengan kod di atas, kami memberitahu penyemak imbas untuk memaparkan kandungan https://websitesetup.org dalam bingkai langsung di dalam halaman ini.

            Iframes dapat digunakan untuk memaparkan laman web, video, gambar atau bentuk kandungan lain.

            Kod untuk ini mudah:

            (ganti “URL” dengan pautan ke laman web / kandungan yang ingin anda paparkan.)

            Anda boleh menyesuaikan lebih jauh untuk menentukan nilai tertentu, misalnya tinggi dan lebar, iframe anda.

            Contohnya:

            Kami memberitahu penyemak imbas untuk menampilkan iframe dengan ketinggian 350 piksel dan lebar 400 piksel.

            Fon dalam HTML

            menggunakan fon dalam HTML

            Memahami bagaimana fon berfungsi sangat penting untuk membuat dokumen HTML yang berkesan. Untuk satu, fon memudahkan untuk menetapkan ukuran teks anda. Ini juga mempermudah mengatur warna serta wajah (atau font “type”) kandungan anda.

            Untuk menunjukkan fon yang akan digunakan oleh dokumen HTML anda, anda perlu menggunakan teg. Anda dapat mengatur ukuran font, warna font atau wajah font dengan menggunakan atribut “size”, “color” atau “face”.

            Menetapkan saiz – contoh:

            Paparkan teks ini menggunakan saiz fon 6

            Dalam contoh ini, kami memberitahu penyemak imbas untuk memaparkan teks kami menggunakan ukuran fon 6. Penting untuk diperhatikan bahawa julat ukuran fon yang diterima adalah 1 hingga 7. Apa-apa di atas 7 akan secara automatik menyesuaikan diri dengan saiz fon 7. Lalai saiz fon adalah 3.

            Warna fon – contoh:

            Paparkan teks kami dengan warna biru

            Kami menggunakan tag untuk meminta penyemak imbas memaparkan teks kami dengan warna biru. Dalam contoh ini, kami menggunakan nama warna HTML (“biru”). Ini boleh diganti dengan kod HEX atau nilai RGB jika anda mahu.

            Muka fon – contoh:

            Adakah anda lebih suka Verdana daripada Times New Romans? Inilah cara anda menetapkannya:

            Tunjukkan teks ini dalam fon Verdana

            Kami memberitahu penyemak imbas untuk memaparkan teks kami dalam fon Verdana. Anda hanya boleh menukar nilai muka fon untuk menunjukkan fon yang anda mahu gunakan.

            Muka fon alternatif:

            Penting untuk diperhatikan bahawa orang hanya akan dapat melihat teks anda dipaparkan dalam fon yang anda nyatakan jika mereka memasang fon tersebut di komputer mereka. Sekiranya tidak, wajah fon lalai – biasanya Times New Roman – akan dipaparkan. Oleh sebab itu, sangat digalakkan menggunakan fon “selamat web”.

            Mungkin membantu memasukkan sebilangan besar font alternatif yang anda boleh. Dengan cara ini, walaupun mereka tidak mempunyai wajah fon utama anda, anda boleh menentukan fon lain mengikut urutan kepentingan. Ini dilakukan dengan penggunaan koma.

            Kembali ke contoh kami:

            Mohon paparkan teks ini dalam font Verdana terlebih dahulu, atau Helvetica, atau Arial, atau Comic Sans… dalam urutan itu, jika fon utama tidak tersedia

            Kami mengarahkan penyemak imbas untuk menunjukkan teks di Verdana. Sekiranya Verdana tidak tersedia, alih-alih kembali ke Times New Romans lalai, ia dapat menunjukkan Helvetica, atau Arial jika Helvetica tidak tersedia atau Comic Sans jika Arial tidak tersedia.

            Kesimpulannya

            Kesimpulannya, HTML lebih rumit daripada apa yang anda ada dalam panduan ini. Jangan putus asa – jika anda dapat memahami konsep asas dalam panduan ini, anda akan memulakannya dengan baik. Seperti mengetahui ABC bahasa dan segala yang lain menjadi lebih mudah.

            Sekiranya anda mengikuti tutorial ini dengan tujuan untuk membuat laman web yang menakjubkan, kami minta maaf kerana mengecewakan – ia tidak berfungsi seperti itu. Ini adalah tutorial asas HTML. Ini di sini untuk membantu anda mengembangkan asas yang boleh anda bangunkan. Anda boleh yakin bahawa ia memerlukan lebih banyak usaha – dan banyak masa pengembangan sering menggunakan gabungan bahasa – untuk membuat laman web yang luar biasa.

            Dengan WordPress, yang telah kami bahas dengan terperinci dalam panduan kami membuat laman web, anda boleh menyediakan laman web yang luar biasa dalam beberapa minit.

            Sumber HTML

            • Jadual Berkala HTML – Ini menyenaraikan semua tag HTML dalam bentuk jadual berkala, sehingga mudah dipelajari / menggunakannya.
            • W3Sekolah / Teg – Senarai semua tag HTML yang disusun mengikut abjad.
            • Mozilla / HTML Berat – Senarai semua atribut HTML yang disusun mengikut abjad.
            • Lembaran Menipu HTML
            • Kod Warna HTML / Nama Warna – Senarai 140 nama warna HTML termasuk kod HEX, nilai RGB dan nilai HSL.

            Jeffrey Wilson Administrator
            Sorry! The Author has not filled his profile.
            follow me