Hai semua!

Sebaik sahaja kami mula belajar, kami perlu mengetahui asas HTML dan CSS, yang akan membantu menjadikan tapak kami lebih baik dan lebih menarik kepada enjin carian. Sepanjang minggu ini saya akan memberitahu anda tentang bekerja dengan kod tapak web dan inilah yang menanti anda:

• . Kami akan belajar cara mengedit kod tapak web menggunakan editor ini;
• . Kami akan membantu robot carian memahami struktur halaman;
• . Kami akan mengetahui seberapa betul kod tapak disusun dan mencari ralat;

Seperti yang anda lihat, kami akan mempunyai banyak kerja minggu ini, jadi langgan kemas kini blog Context-UP dan terima semua pelajaran dalam e-mel anda jika anda belum melanggan.

Asas HTML

HTML (Hyper Text Markup Language) ialah bahasa penanda untuk dokumen di Internet. Iaitu, mana-mana halaman tapak web anda adalah dokumen, dan penyemak imbas adalah cara untuk melihat dokumen tersebut.

Tujuan HTML adalah untuk menunjukkan pelayar di mana elemen dokumen ini atau itu berada. Menggunakan bahasa ini, elemen ditanda pada halaman dan menduduki tempat tertentu, yang kemudiannya dipaparkan pada monitor pelawat tapak.

Bahasa penanda terdiri daripada teg khas yang membantu penyemak imbas menentukan:

• Struktur dokumen;
• Lokasi unsur tertentu;
• Tujuan elemen;
• Fail pihak ketiga yang disertakan;
• Dan banyak lagi.

Robot carian juga memahami perkara ini, jadi anda perlu memberi perhatian khusus kepada seberapa baik dokumen itu disusun dari sudut pandangan SEO dan struktur apa yang dimilikinya.

struktur HTML

Mana-mana dokumen HTML mempunyai struktur awal yang mesti diikuti dengan ketat. Dia kelihatan seperti ini:

Tajuk halaman Kandungan halaman

Sesetengah teks boleh disembunyikan daripada ditunjukkan dalam penyemak imbas dengan menjadikannya ulasan. Walaupun teks ini tidak akan dilihat oleh pengguna, ia masih akan dihantar dalam dokumen, jadi jika anda melihat kod sumber, anda boleh menemui nota tersembunyi.

Dan ia diterjemahkan sebagai "bahasa penanda hiperteks." Hiperteks ialah kaedah khas untuk menavigasi halaman Internet, dilaksanakan dalam bentuk pautan hiperteks. Dengan mengklik pada pautan ini, anda boleh menavigasi struktur tapak dengan mudah. Peralihan dalam kes ini tidak berlaku secara linear, i.e. anda sentiasa mempunyai peluang untuk pergi ke mana-mana halaman tapak, pautan yang boleh dilihat pada masa ini.

Penanda merujuk kepada peraturan dan sifat tertentu yang diberikan kepada elemen halaman. Mereka dilaksanakan dalam bentuk teg yang dipanggil. Contohnya, untuk menunjukkan bahawa teks tertentu pada halaman harus dipusatkan, anda boleh menandakannya dengan teg tengah. Anda boleh melihat kod HTML halaman tertentu melalui menu konteksnya. Sebagai contoh, untuk mengakses kod ini dalam pelayar Firefox, anda perlu klik kanan dalam halaman dan pilih "Kod Sumber Halaman".

Bagaimanakah kod HTML berfungsi? Kod HTML ialah satu set tag pendek dengan elemen halaman yang terkandung di dalamnya. Semua kod ini disimpan dalam fail dengan sambungan .html atau .htm. Apabila anda membuka fail sedemikian dalam penyemak imbas, kod itu ditafsirkan olehnya, dan halaman siap dipaparkan dalam tetingkap program. Mengetahui bahasa penanda HTML, hampir semua orang boleh membuat halaman mereka sendiri. Apakah itu tag? Tag ialah struktur berasingan dalam kod HTML. Ini ialah teks biasa yang disertakan di dalam kurungan sudut "". Anda boleh melihat teg dalam kod HTML hampir mana-mana halaman. Teg itu sendiri tidak dipaparkan pada halaman; ia memaparkan elemen tertentu yang dikodkan menggunakan teg. Sebagai contoh, jika terdapat gambar pada halaman, maka kod HTMLnya mengandungi teg img. Had HTML Walaupun fakta bahawa kod HTML membolehkan anda membina halaman hiperteks yang agak berkualiti tinggi, ia mempunyai hadnya. Halaman yang mengandungi secara eksklusif kod sedemikian adalah statik, i.e. mereka kekurangan dinamik, kesan khas dan ciri-ciri lain. Tetapi mereka boleh diperkenalkan menggunakan bahasa lain, seperti Skrip Java. Sebilangan besar laman web moden dicipta menggunakan bahasa tambahan yang menjadikannya lebih hidup dan interaktif.

Halaman HTML dan strukturnya ditakrifkan oleh teg utama

Mari lihat rupa halaman Internet yang paling biasa dari dalam.

• Struktur HTML adalah, pada umumnya, asas bagi setiap halaman web.
• Hari ini terdapat beberapa jenis dokumen HTML. Setiap jenis dokumen mempunyai struktur HTML sendiri (perincian di bahagian bawah halaman).
• Struktur HTML awal yang betul adalah kunci kepada keserasian merentas pelayar tapak.

Dalam menu Sistem Mula atau Mula, pergi ke bahagian Program (Semua Program), buka folder Aksesori, pilih Notepad. Sudah tentu, ini bukan satu-satunya alat untuk menulis kod, tetapi pada peringkat ini ia adalah apa yang anda perlukan.

Contoh struktur dokumen:

Mari lihat teg HTML yang mentakrifkan struktur halaman

• - wajib, tentukan dokumen HTML.
• - tentukan bahagian dengan maklumat perkhidmatan, mengandungi arahan untuk enjin carian, penyemak imbas dan skrip.
• - tentukan tajuk utama halaman web.
• - wajib, tentukan bahagian dokumen yang boleh dilihat.
• - tentukan tajuk tahap ke-3.
• - mentakrifkan perenggan. Lihat pelajaran perenggan HTML

Struktur dokumen HTML | Menulis kod halaman

Urutan tindakan adalah seperti berikut:

1. Tulis kod HTML halaman dalam Notepad:

4. Buka IE (Internet Explorer) atau pelayar lalai lain. Dalam menunya kami cuba mencari dan membuka fail index.html yang disimpan pada komputer. Anda juga boleh mencari dan membuka fail dalam mana-mana penyemak imbas dalam tetingkap yang muncul selepas menaip gabungan dua kekunci pada papan kekunci: Ctrl dan O - tahan Ctrl dan kemudian tekan huruf Latin O.

Untuk mengkaji lebih lanjut bahan, anda memerlukan yang berikut:
Anda mesti mempunyai beberapa penyemak imbas yang berbeza pada komputer anda. Muat turun Mozilla Firefox, Opera secara percuma dan teruskan pelajaran kami.

Buka index.html menggunakan Firefox. Dalam versi terdahulu penyemak imbas ini, anda tidak akan dapat membaca teks yang anda tulis, jadi aksara pelik akan dipaparkan. Kesilapan ini dihapuskan dengan hanya memasukkan dua tag dengan set atribut dalam kod HTML, yang juga wajib.

Struktur HTML 4.01 yang betul

Ini sepatutnya menjadi struktur awal halaman HTML:

Struktur dokumen HTML

Tambah perenggan dan tajuk sendiri dan lihat apa yang keluar. Ingat, selepas setiap dokumen disimpan, muat semula kandungan tetingkap penyemak imbas dengan mengklik butang dalam Mozilla Firefox atau butang dalam Internet Explorer, atau F5 untuk perubahan berkuat kuasa.

Adakah semuanya berjaya untuk anda? - Jadi anda berhati-hati dan melakukan segala-galanya dengan betul.

Sekarang beberapa perkataan tentang tag yang kami gunakan untuk membuat halaman ini.

Penerangan tentang tag html daripada contoh

1. - tag ini mesti ada pada setiap halaman web. Mereka memberitahu pelayar dan enjin carian bahawa ini adalah halaman HTML.

Mana-mana halaman html mempunyai struktur berikut:

... Teg tajuk ... ... Isi halaman ...

2. - antara tag ini terletak semua kandungan halaman yang boleh dilihat.

4. - antara tag ini tajuk halaman ditulis, yang dipaparkan di bahagian paling atas pelayar. By the way, apabila anda mencari sesuatu dalam enjin carian, perkara pertama yang dipaparkan ialah nama halaman. Teg sering disingkatkan kepada "tajuk". Saya menasihati anda untuk membaca artikel: cara membuat tag

Sekarang mari kita beralih kepada teg yang terdapat dalam badan halaman html (di dalam dan ).

5. - tag ini memusatkan segala-galanya di dalamnya. Dalam kes ini, bahagian tengah akan menjadi bahagian tengah skrin. Anda disyorkan supaya berhenti menggunakan tag ini pada masa hadapan.

6. ialah salah satu kelas tag tajuk..., biasanya melampirkan tajuk halaman. Sebagai contoh, halaman ini mempunyai teg tajuk "Contoh membuat halaman html".

Catatan

Teg ini mempunyai banyak berat dalam kedudukan laman web, jadi ia perlu digunakan dengan berhati-hati dan bijak.

Apabila mengarang kod html, anda perlu mematuhi peraturan mudah: tag tajuk harus didahulukan, dan kemudian ia boleh datang, dsb. Perkara utama ialah tidak sepatutnya ada yang pertama, kemudian, kemudian, dsb. Mesti ada hierarki yang ketat. Tajuk, dsb. mungkin banyak.

7.
ialah teg tunggal yang tidak memerlukan teg penutup. Ia bergerak ke baris seterusnya. Dalam contoh saya, saya menulis dua tag tunggal berturut-turut untuk melompat ke baris seterusnya dua kali.

8. ialah teg tunggal yang memaparkan imej.

• src ialah parameter yang diperlukan, yang menentukan alamat imej (bukan URL_IMAGE, anda mesti memasukkan alamat tempat imej anda disimpan).
  Catatan:
  • Jika imej berada dalam folder yang sama dengan halaman html anda, maka sudah cukup untuk menulis nama imej, jika tidak, anda perlu memasukkan sama ada URL mutlak atau relatif;
  • Jangan lupa untuk menentukan sambungan imej. Contohnya, .jpg, .gif, .jpeg.
• alt atau tajuk - dalam parameter ini anda boleh menulis perihalan imej anda. Apabila anda menuding tetikus anda pada imej, penerangan ini akan dipaparkan. Parameter ini penting untuk promosi tapak web, terutamanya dalam carian imej. Jika imej gagal dimuatkan, teks ini akan dipaparkan, yang juga merupakan tambahan.

9. - tag ini dicipta untuk menukar fon, latar belakang, saiz, dll. Ringkasnya, semua yang berkaitan dengan pemformatan teks boleh dikonfigurasikan dalam satu teg. Tag ini mempunyai beberapa atribut, yang akan saya bincangkan dalam pelajaran yang berasingan.

Nota: - tag serupa.

Terdapat juga sifat fon CSS di mana anda boleh menetapkan semua pilihan ini.

10. - serlahkan dalam huruf tebal. Segala-galanya antara dan akan diserlahkan dalam huruf tebal. Sebagai contoh, jika anda menulisnya pada awal kandungan dan menutupnya pada penghujungnya, maka semua teks pada halaman akan diserlahkan dalam huruf tebal. Ini adalah teg yang agak biasa, analognya ialah .

Enjin carian memberi perhatian kepada tag ini dari segi meningkatkan pengaruh kata kunci. Tetapi anda perlu berhati-hati, kerana menyerlahkan kata kunci dalam huruf tebal setiap kali akan dianggap sebagai spam.