5 Langkah Memahami Kod HTML Asas

HTML adalah bahagian penting dalam web seperti yang kita ketahui. Walaupun beberapa pereka web membuat halaman dengan menaip HTML secara manual, masih berguna untuk mengetahui sedikit tentangnya.

Kami akan melihat beberapa asas bahasa, termasuk apa sebenarnya HTML, beberapa konsep asas, dan bagaimana ia berinteraksi dengan bahasa lain. Anggap ini sebagai kursus kemalangan 'HTML for dummies'.

Asas HTML: Apa itu HTML?

HTML bermaksud Bahasa Penanda Hiperteks . Walaupun kadangkala disatukan dengan bahasa pengaturcaraan, ini tidak tepat.

Sebagai Bahasa penanda , HTML hanya membolehkan anda membuat susun atur paparan halaman. Yang benar bahasa pengaturcaraan , seperti Java atau C ++, mengandung logik dan perintah yang dijalankan.

Walaupun ringkas, HTML berada di tulang belakang setiap halaman di web. Ini bertanggungjawab untuk teks yang muncul sebagai tebal, menambahkan gambar, dan menghubungkan ke halaman lain. Kami mempunyai Soalan Lazim HTML yang menerangkan lebih lanjut.

Anda boleh mengklik kanan pada kebanyakan laman web di penyemak imbas anda dan memilih Lihat sumber halaman atau serupa untuk melihat HTML di belakangnya. Ini mungkin juga mengandungi banyak kod yang bukan HTML, tetapi anda boleh menyaringnya.

Walaupun anda tidak mempunyai pengalaman menggunakan bahasa markup atau pengaturcaraan, belajar sedikit mengenai HTML akan menjadikan anda pengguna web yang lebih berpengetahuan. Mari ikuti lima langkah asas untuk membantu anda memahami bagaimana HTML berfungsi. Kami akan memberikan contoh sepanjang perjalanan.

Langkah 1: Memahami Konsep Tag

HTML menggunakan sistem tanda nama untuk mengkategorikan pelbagai elemen dokumen.

Sebilangan besar tag berpasangan untuk membungkus teks yang terkena di dalamnya. Berikut adalah contoh mudah (yang

tag membuat teks berani ; kita akan membincangkannya lebih lama lagi.)

This is some bold text .
Perhatikan bagaimana tag penutup bermula dengan garis miring ke depan (/). Ini menandakan teg penutup, yang penting. Sekiranya anda tidak menutup teg, segala-galanya dari awal dan seterusnya akan mempunyai atribut itu.
streaming filem secara percuma tanpa mendaftar

Walau bagaimanapun, tidak semua tag mempunyai pasangan. Beberapa elemen HTML, disebut unsur kosong , tidak mempunyai kandungan dan wujud sendiri. Contohnya ialah
tag, yang merupakan pemecahan garis. Anda boleh 'menutup' tag tersebut dengan menambahkan garis miring (seperti
) tetapi tidak semestinya diperlukan.

Langkah 2: Susun atur HTML Skeleton

Dokumen HTML yang betul mesti mempunyai teg tertentu yang ditentukan sehingga disusun dengan betul. Ini adalah bahagian penting:

Setiap dokumen HTML mesti bermula dengan untuk menyatakan dirinya seperti itu. Oleh itu, tanda penutupnya, , adalah item terakhir dalam fail HTML.

Seterusnya, bahagian merangkumi maklumat seperti tajuk halaman, pelbagai skrip yang berjalan di halaman, dan serupa. Seperti namanya, ini biasanya muncul tepat setelah awal teg. Pengguna akhir tidak melihat banyak kandungan dalam tag ini.

Akhirnya, tag memegang teks halaman yang dilihat pembaca (ditambah banyak lagi). Di sini anda akan menemui imej, pautan dan banyak lagi.

Sejak
bahagian merangkumi sebahagian besar dokumen HTML, selebihnya panduan kami melihat elemen-elemen yang berkaitan dengannya.

Langkah 3: Tag HTML Asas untuk Pemformatan

Seterusnya, mari kita lihat beberapa tag biasa yang membentuk dokumen HTML. Sudah tentu, tidak mungkin merangkumi setiap elemen, jadi kami akan mengkaji beberapa perkara yang paling penting. Kami telah membuat liputan banyak lagi contoh HTML jika ini tidak memuaskan anda.

Sekiranya tag ini kelihatan cukup asas, ingatlah bahawa HTML telah dibuat sejak 1993. Web berasaskan teks pada masa awal.

Pemformatan Teks Ringkas
HTML menyokong gaya teks asas seperti yang anda dapati di Microsoft Word:

tag membuat teks berani .

tag (yang bermaksud 'penekanan') akan mencetak miring teks.

HTML juga menyokong yang lebih lama

tag untuk tebal dan

untuk huruf miring. Walau bagaimanapun, lebih baik menggunakan yang di atas.

Pendek kata,

dan

tunjukkan bagaimana sesuatu harus difahami, sementara tag terakhir hanya memberitahu anda bagaimana seharusnya kelihatan. Tag bekas ini lebih mudah diakses untuk pembaca skrin yang digunakan oleh golongan penglihatan.

Perenggan dan Bahagian Lain
HTML

tag membolehkan anda menentukan bahagian dokumen. Biasanya, ini dipasangkan dengan CSS (lihat di bawah) untuk memformat bahagian dengan cara tertentu.

The
tag membolehkan anda membahagikan teks menjadi perenggan. Penyemak imbas secara automatik akan meletakkan beberapa ruang sebelum dan selepas ini, membiarkan anda secara semula jadi memecah teks.

Anda boleh menambahkan tajuk ke dokumen anda dan mempermudah untuk diikuti menggunakan
melalui
tanda nama. H1 adalah tajuk yang paling penting, sementara H6 paling tidak penting. Hampir setiap artikel MakeUseOf menggunakan tajuk H2 dan H3 untuk menyusun maklumat.

Memukul Masukkan untuk menambahkan jeda baris dalam dokumen HTML anda sebenarnya tidak akan memaparkannya. Sebaliknya, anda boleh menggunakan

untuk menambah jeda baris.

Inilah contoh yang menggunakan semua ini:

Example Heading This is one paragraph. This is a second paragraph split between two lines.
Langkah 4: Memasukkan Imej

Imej adalah bahagian penting dari kebanyakan laman web. Anda boleh menambahkannya dengan mudah dengan HTML, dan bahkan menetapkan sifat yang berbeza untuknya.

Anda memasukkan gambar menggunakan

teg. Menggabungkan ini dengan
bagaimana mencari maklumat mengenai seseorang dalam talian secara percuma
src
atribut membolehkan anda menentukan dari mana anda mahu gambar dimuatkan.

Satu lagi sifat penting bagi

tag adalah
alt
. Teks Alt membolehkan anda menerangkan gambar untuk pembaca layar atau sekiranya gambar tidak dimuat dengan betul. Anda boleh mengarahkan tetikus ke atas gambar untuk melihat teks altnya.

Menggunakan
width
dan
height
elemen untuk menentukan bilangan piksel pada gambar muncul.

Gabungkan semuanya, dan tanda gambar kelihatan seperti ini:

Langkah 5: Menambah Pautan

World Wide Web tidak akan banyak web tanpa pautan ke halaman lain. Menggunakan

tag, anda boleh memaut ke halaman lain pada teks apa pun.

Di dalam

tag, yang
href
atribut memberitahu di mana anda menghubungkan. Cukup menampal URL akan berfungsi dengan baik. Anda boleh menggunakan
title
elemen untuk menambahkan sedikit teks yang muncul apabila seseorang melayang di atas pautan.

Pautan asas kelihatan seperti ini:

Visit Google
The

tag mempunyai banyak elemen lain yang mungkin, tetapi kami tidak akan menyelami elemen ini di sini.

Bagaimana Hubungan HTML Dengan CSS dan JavaScript

Kami telah melihat asas HTML dan bagaimana ia mewujudkan laman web. Tetapi seperti yang anda bayangkan, HTML sahaja tidak memotongnya untuk web moden. Halaman web HTML sederhana adalah perkara biasa pada hari 'Web 1.0', ketika kebanyakan laman web tidak lebih dari sekadar teks statik.

Tetapi sekarang, kita mempunyai banyak lagi. CSS (Cascading Style Sheets) adalah bahasa yang digunakan untuk menggambarkan bagaimana teks yang anda sediakan dalam HTML seharusnya kelihatan. Ingat

tag yang kita bincangkan? Di dalam ini (dan tag lain), anda boleh menentukan a
class
atribut. Kemudian, dalam dokumen CSS yang disertakan, anda boleh menulis arahan untuk bagaimana
class
harus melihat.

Anda boleh menentukan elemen gaya ini sebaris dalam kod HTML anda, tetapi ini dianggap sebagai amalan yang buruk kerana jauh lebih sukar untuk dijaga. Ketahui lebih lanjut dengan contoh CSS ringkas ini . Lihat juga bagaimana mengoptimumkan fail CSS anda .

JavaScript

Kami telah melihat bahawa HTML menentukan kandungan dan CSS menentukan penampilannya. JavaScript, anggota terakhir trio yang penting untuk web, membolehkan laman web bertindak balas terhadap tindakan orang tanpa memuat halaman baru setiap masa.

Sebagai contoh, JavaScript membenarkan laman web untuk memberi amaran kepada anda bahawa kata laluan yang anda masukkan tidak memenuhi syaratnya sebelum anda cuba menyerahkannya. Pereka web mungkin menggunakan JavaScript untuk menelusuri gambar dalam tayangan slaid atau meminta pengguna untuk memasukkan.

Ini hanya beberapa contoh asas. JavaScript adalah bahasa skrip yang mampu melakukan banyak hal, dan jauh lebih rumit daripada HTML dan CSS. Lihat gambaran keseluruhan JavaScript kami untuk banyak lagi.

Melihat skop reka bentuk web yang lengkap adalah di luar ruang lingkup artikel ini, tetapi cukup untuk mengatakan bahawa HTML berinteraksi dengan bahasa lain untuk membuat laman web yang kita kenal sekarang.

Evolusi HTML

Penting untuk diperhatikan bahawa HTML tidak statik. HTML telah melalui beberapa semakan, yang terakhir adalah HTML 5. Terutama, standard ini menyokong penyematan video asli dan bukannya bergantung pada format proprietari seperti Adobe Flash.

Iterasi baru HTML juga menyatakan tag kuno tertentu tidak digunakan lagi dari semasa ke semasa. Ini termasuk tag yang mengerikan seperti
dan
(Tatal dan teks flash masing-masing) yang biasa dilihat pada reka bentuk laman web tahun 1990-an. Oleh itu, ingat bahawa standard berubah dari masa ke masa.

Pengetahuan HTML Sedikit Menuju

Kami telah melakukan lawatan ringkas mengenai bagaimana dokumen HTML berfungsi. Sekarang anda sudah mengetahui asas bagaimana laman web disusun. Walaupun anda tidak terus membina laman web, anda sedikit lebih mengetahui tentang web yang anda gunakan setiap hari.
apa aplikasi terbaik untuk memuat turun muzik

Untuk mengetahui lebih lanjut, tingkatkan kemahiran pengembangan web anda dengan alat penting dan kemudian periksa panduan kami mengenai cara merancang laman web pertama anda .

Kredit Gambar: Belyaevskiy / Depositphotos
Berkongsi Berkongsi Tweet E-mel 5 Petua untuk Meningkatkan Mesin Linux VirtualBox Anda
Bosan dengan prestasi buruk yang ditawarkan oleh mesin maya? Inilah yang harus anda lakukan untuk meningkatkan prestasi VirtualBox anda.
Baca Seterusnya Topik-topik yang berkaitan

Pengaturcaraan

HTML

Pembangunan Web

JavaScript

Alat Webmaster

Pengaturcaraan

HTML5

Mengenai Pengarang Ben Stegner(1735 Artikel Diterbitkan)
Ben adalah Timbalan Editor dan Pengurus Onboarding di MakeUseOf. Dia meninggalkan pekerjaan IT untuk menulis sepenuh masa pada tahun 2016 dan tidak pernah melihat ke belakang. Dia telah merangkumi tutorial teknologi, cadangan permainan video, dan lebih banyak lagi sebagai penulis profesional selama lebih dari tujuh tahun.
Lagi Dari Ben Stegner
Langgan buletin kami

Sertailah buletin kami untuk mendapatkan petua, ulasan, ebook percuma, dan tawaran eksklusif!
Klik di sini untuk melanggan