Elemen-elemen tersebut harus membuka dan menutup dengan benar sehingga jelas berada di dalam atau di luar satu sama lain. Jika keduanya tumpang tindih seperti yang ditunjukkan di atas, browser web Anda akan mencoba menebak apa yang ingin Anda katakan, yang dapat menyebabkan hasil yang tidak diharapkan. Jadi jangan lakukan itu!

Elemen kosong

Beberapa elemen tidak memiliki konten dan disebut elemen kosong. Ambil elemen yang menyematkan gambar ke dalam dokumen. Ini adalah elemen yang diganti."> elemen yang sudah kita miliki di halaman HTML kita:

Ini berisi dua atribut, tetapi tidak ada penutup tag dan tidak ada konten dalam. Hal ini karena elemen gambar tidak membungkus konten untuk mempengaruhinya. Tujuannya adalah untuk menyematkan gambar di halaman HTML di tempat kemunculannya.

Anatomi dokumen HTML

Itu merangkum dasar-dasar setiap elemen HTML, namun tidak berguna jika berdiri sendiri. Sekarang kita akan melihat bagaimana elemen individual digabungkan untuk membentuk keseluruhan halaman HTML. Mari kita lihat kembali kode yang kita masukkan ke dalam contoh index.html (yang pertama kali kita temui di artikel Menangani file):

Di sini, kami memiliki yang berikut ini:

• - Tipe dokumen. Di masa lalu, ketika HTML masih muda (sekitar tahun 1991/92), doctypes dimaksudkan untuk bertindak sebagai tautan ke serangkaian aturan yang harus diikuti oleh halaman HTML agar dianggap sebagai HTML yang baik, yang dapat berarti pemeriksaan kesalahan otomatis dan lainnya. hal-hal yang berguna. Namun, saat ini tidak ada yang mempedulikannya, dan itu hanyalah artefak sejarah yang perlu disertakan agar semuanya berfungsi dengan baik. Untuk saat ini, hanya itu yang perlu Anda ketahui.
• - elemen mewakili root (elemen tingkat atas) dari sebuah dokumen HTML, sehingga disebut juga sebagai elemen root. Semua elemen lainnya harus merupakan turunan dari elemen ini."> elemen. Elemen ini membungkus semua konten di seluruh halaman dan terkadang dikenal sebagai elemen root.
• - elemen berisi informasi yang dapat dibaca mesin (metadata) tentang dokumen, seperti judul, skrip, dan style sheetnya."> elemen. Elemen ini bertindak sebagai wadah untuk semua hal yang ingin Anda sertakan pada halaman HTML itu tidak konten yang Anda tampilkan kepada pemirsa laman Anda. Ini mencakup hal-hal seperti kata kunci dan deskripsi laman yang ingin Anda tampilkan di hasil penelusuran, CSS untuk menata gaya konten kami, deklarasi rangkaian karakter, dan banyak lagi.
• - Elemen ini menyetel kumpulan karakter yang harus digunakan dokumen Anda ke UTF-8, yang mencakup sebagian besar karakter dari sebagian besar bahasa tertulis. Pada dasarnya, sekarang dapat menangani konten tekstual apa pun yang mungkin Anda masukkan ke dalamnya. Tidak ada alasan untuk tidak menyetelnya, dan ini dapat membantu menghindari beberapa masalah di kemudian hari.
• - ) mendefinisikan dokumen yang ditampilkan di bilah browser atau tab halaman.>

  Suatu hari dalam hidupku

  Mempersiapkan konser

  Hari ini saya bangun pagi-pagi karena saya memiliki hari yang berat di depan. Lagipula, hari ini saya harus tampil di konser di depan seratus penonton. Dan untuk memastikan semuanya berjalan dengan baik, saya harus mengulang program latihannya

  Latihan

  Semuanya berjalan tanpa hambatan. Tidak ada seorang pun dari tim kami yang kehilangan ritme, dan ternyata, kekhawatiran semua orang sia-sia.

  Konser

  Semua orang tampil dengan baik, meskipun menurut saya ada saat ketika drummer kami kehilangan tempo. Tapi kami dengan cerdik keluar dari situasi ini.

  Pertama, Anda perlu mengetikkan teks ini di beberapa editor teks (menurut saya yang paling nyaman adalah Buku Catatan++) dan simpan file dengan nama indeks .html di suatu tempat di disk Anda. Ketika Anda mengklik dua kali pada file yang disimpan, Anda akan melihat halaman yang terlihat seperti ini.

  Harap dicatat bahwa tag itu sendiri tidak ditampilkan, tetapi konten itu sendiri yang terletak di antara tag tersebut ditampilkan. Dan dari sini kita dapat menyimpulkan bahwa tag bertindak sebagai elemen desain dalam HTML.

  Lihatlah kode sumbernya. Seperti yang mungkin sudah Anda perhatikan, ada lekukan kecil sebelum kata “Satu”. Namun, browser tidak memperhitungkannya; ia hanya menelannya secara diam-diam, seolah-olah tidak pernah ada. Selain itu, jika Anda mencoba memberi banyak spasi di antara kata-kata, semuanya akan dianggap oleh browser sebagai satu spasi - HTML memiliki fitur ini.

  Dan ini saran lainnya: saat menulis kode HTML, latih diri Anda untuk membuat indentasi tag-tag yang bersarang di dalam tag lain. Misalnya, tag judul dan isi disarangkan di dalam tag html. Artinya, saat Anda menulis tag ini, jangan lupa untuk membuat indentasi yang sesuai. Biasanya dilakukan dengan menggunakan dua spasi atau tab - ini masalah selera. Mengapa hal ini perlu? Nah, pada bagian kecil dokumen yang saya berikan sebagai contoh di atas, informasinya tidak banyak, sehingga cukup bermasalah jika bingung disana. Namun, jika ada banyak elemen bersarang di halaman, tidak ada yang lebih mudah daripada tersesat dalam kode besar ini dan kesulitan mencari tahu di bagian mana dokumen Anda berada sekarang. Jadi lebih baik segera membiasakan diri dengan gaya yang baik, maka Anda sendiri akan memahaminya dan itu akan bermanfaat bagi Anda di masa depan.

  Penting juga untuk menunjukkan tag minimum yang harus ada dalam dokumen HTML. Saya sedang berbicara tentang bagian ini:

  Namun meskipun bagian ini hilang, sebagian besar browser akan menutup mata terhadap semua ini dan tetap menampilkan halaman Anda. Namun, gaya pengkodean yang sembrono, di mana seseorang melewatkan banyak tag, adalah penulisan yang buruk, jadi disarankan untuk memiliki semua elemen ini di halaman Anda. Jika tidak, hal ini dapat menimbulkan masalah kompatibilitas dengan browser lain, yang pada akhirnya dapat memengaruhi tampilan situs Anda, dan akibatnya, lalu lintas.

  Selain itu, Anda dapat menulis komentar dalam dokumen HTML - ini murni informasi layanan yang ditujukan khusus untuk Anda. Biasanya ini adalah beberapa catatan penting yang berfungsi sebagai pengingat bagi Anda atau sekadar sesuatu yang perlu diperhatikan. Komentar tidak diproses oleh browser, artinya pengguna tidak akan melihatnya. Biasanya ditulis seperti ini:

  Sekarang mari kita coba mencari tahu sendiri tag mana dalam contoh di atas yang bertanggung jawab atas apa.

  Menandai html berarti keluaran kode html dimulai.

  kepala– bagian informasi layanan. Antara lain, ini dia judul, yang bertanggung jawab atas teks dalam judul jendela browser. Bagian ini juga dapat dianggap sebagai informasi yang ingin kami sampaikan kepada browser tentang halaman ini.

  tubuh– bagian utama dokumen dimulai.

  jam 1- judul.

  jam 2– subjudul.

  P– paragraf.

  Mungkin itu saja! Jika ini adalah dokumen HTML pertama Anda, selamat! Ya, dia tidak terlihat sehebat yang kita inginkan. Namun demikian, kami memiliki materi yang sudah bisa kami kerjakan. Dan di pelajaran berikutnya, semuanya akan menjadi lebih menarik, dan kami akan perlahan-lahan membahas cara mengerjakannya lembar gaya berjenjang (CSS).

  • < Назад

  Untuk berkomentar, Anda harus mendaftar.

  HTML adalah bahasa markup hypertext yang menjadikan Internet seperti yang kita kenal dan sukai. Berkat alat luar biasa inilah situs terlihat cantik dan modern, serta memastikan kemudahan penggunaan. HTML hanya mengatur elemen halaman web ke dalam format yang mudah digunakan. Pekerjaannya sebanding dengan apa yang dilakukan orang-orang seperti MS Word atau OpenOffice. Mereka mengubah sekumpulan huruf tanpa fitur menjadi dokumen yang berisi paragraf, teks tebal, huruf miring, tabel, dan bahkan gambar. Bahasa HTML melakukan hal yang kurang lebih sama, satu-satunya perbedaan adalah dokumennya ditampilkan di browser, dan kemampuan alat ini jauh lebih luas daripada editor teks. Tag digunakan untuk markup - perintah khusus yang menggambarkan struktur halaman web. Mereka diapit dalam tanda kurung siku -<тег>, sehingga browser dapat membedakannya dari sebagian besar teks. Selanjutnya, kita akan membahas dasar-dasar HTML untuk pemula.

  Editor visual

  Pemula yang baru mulai belajar HTML sering kali memulai pekerjaan mereka dengan program yang memungkinkan Anda membuat situs web tanpa sepengetahuan apa pun. Di dalamnya Anda cukup mengatur elemen di layar seperti yang akan ditampilkan di browser. Tampaknya ini adalah sumber rahmat abadi yang memungkinkan Anda menyingkirkan sebagian besar pengembang web. Namun tidak semuanya sesederhana itu, karena editor visual memiliki banyak kekurangan sehingga tidak mungkin digunakan dalam proyek serius.

  Semua program ini membuat banyak tag yang tidak perlu sehingga membuat halaman akhir menjadi berat dan kurang optimal. Tentu saja, di zaman kita dengan Internet berkecepatan tinggi, hal ini menjadi kurang penting dibandingkan sebelumnya, namun ada sejumlah alasan mengapa situs web yang ringkas dan ditulis dengan baik ternyata lebih praktis daripada situs web yang dibuat dengan editor visual. Halaman web yang dibuat dengan program semacam itu akan diproses dengan buruk oleh robot pencari, karena setiap kilobyte kode penting bagi mereka, dan kode yang besar dan tidak logis kemungkinan besar tidak sesuai dengan selera mereka. Selain itu, editor sering kali ketinggalan zaman, menjadi tidak relevan, dan menghabiskan sumber daya untuk pengembangannya tidak praktis, karena tidak ada profesional yang menggunakan produk ini. Oleh karena itu, siapa pun yang ingin bekerja di industri pengembangan website harus mengetahui dasar-dasar HTML.

  Tag

  Seperti disebutkan di atas, tag menggambarkan struktur halaman web pada browser. Kebanyakan dari mereka memiliki tag pembuka dan penutup, tapi tidak semua. Misalnya, , yang berisi konten, bukan titik. Yang pertama menunjukkan di mana tag dimulai, dan yang kedua menutupnya. Mungkin ada elemen markup halaman lain di dalamnya; elemen tersebut dapat disarangkan satu sama lain seperti boneka bersarang. Penting untuk menutup tag tepat waktu agar halaman ditampilkan dengan benar.

  Ada juga tag tunggal yang tidak perlu ditutup. Di dalamnya, konten terletak di dalam, seperti yang dapat ditulis untuk sebagian besar tag HTML, dan mengatur properti elemen. Hal ini ditunjukkan dalam tag pembuka dan terlihat seperti ini: atribut = "...", di mana alih-alih titik ada nilai atribut. Mengetahui tag adalah langkah pertama dan terpenting untuk menguasai HTML. Dasar-dasar seni ini juga melibatkan pemahaman struktur halaman web.

  Struktur dokumen

  Setiap dokumen HTML memiliki ekstensi yang sesuai, misalnya Index.html. Dengan cara ini browser dapat memahami apa yang sedang dihadapinya dan menampilkan halaman dengan benar. Dianjurkan untuk menyimpan semua file yang digunakan untuk membuat situs web dalam satu direktori, yang akan membuat hidup Anda lebih mudah di masa depan. Dasar-dasar bahasa markup hypertext HTML memerlukan pemahaman yang jelas tentang struktur dokumen. Ini dimulai dengan tag, yang memberi tahu browser versi HTML yang digunakan dalam dokumen ini. Saat ini, versi kelima bahasa tersebut relevan, jadi tidak perlu menciptakan apa pun, Anda dapat dengan aman memasukkan tag di atas di awal halaman mana pun.

  

  Lalu ada struktur berpasangan utama yang membentuk “kerangka” situs. Tag pertama tempat semua tag lainnya disarangkan adalah .... Apa pun di luarnya tidak dikenali oleh browser sebagai halaman web, sehingga membuka dokumen dan menutupnya. Tag ini diperlukan untuk dokumen apa pun. Ini juga berisi beberapa tag wajib lainnya, yang akan dibahas di bawah.

  Kepala

  Di dalam tag ... berisi informasi teknis yang tidak akan muncul pada halaman namun tetap merupakan bagian penting dari dokumen HTML. Fondasi situs diletakkan di tempat ini; di sini pengkodean dipilih dan nama halaman dimasukkan. Itu terkandung dalam tag yang diperlukan . Judul ditampilkan di bagian atas browser, di mana Anda juga dapat menempatkan ikon kecil yang menjadi ciri isi halaman. Dianjurkan untuk segera menunjukkan pengkodean dokumen untuk tampilan yang benar. Hal ini dapat dilakukan dengan menggunakan tag . Tag meta memberikan informasi tentang struktur halaman dan biasanya terletak di dalam kepala.

  Link

  Mengetahui dasar-dasar HTML juga melibatkan penggunaan gaya berjenjang, atau css. Mereka mengatur properti elemen yang akan ditampilkan pada halaman. Pendekatan modern untuk tugas ini melibatkan transfer karakteristik seperti warna, tinggi dan lokasi elemen ke file eksternal untuk kenyamanan lebih. Untuk memasukkan file css, gunakan tag . Jika sudah selesai tampilannya seperti ini: , di mana href menunjukkan lokasi file, dan type menunjukkan jenisnya.

  

  Tubuh

  Di bagian dokumen HTML inilah bagian halaman yang terlihat dibuat. Segala sesuatu yang dilakukan di dalam "tubuh" akan ditampilkan oleh browser. DI DALAM Sejumlah besar tag HTML digunakan. Dasar-dasarnya adalah pemformatan teks, bekerja dengan tautan, dan alat dasar untuk menyusun halaman web. Untuk mulai bekerja dalam HTML, Anda hanya perlu mengetahui tag dasar dan dapat menggunakannya. Di bawah ini adalah yang paling populer:

  • - digunakan untuk menyorot substring yang akan tunduk pada gaya khusus yang dijelaskan dalam css;
  • - membuat link pada halaman web; alamat transisi ditentukan oleh atribut href;
  • - salah satu tag paling populer di zaman kita; Siapa pun yang memutuskan untuk mempelajari dasar-dasar bahasa HTMLl harus memberikan perhatian khusus padanya, karena ini adalah elemen blok yang menjadi dasar pembuatan sebagian besar situs modern (parameter untuk blok

    ditentukan dalam css, dan blok lain dapat ditempatkan di dalam tag ini);

  • Memilih paragraf dari teks; isi paragraf berada di antara tag pembuka dan penutup;

  • - daftar bernomor yang elemennya diapit oleh tag berpasangan
    1. - daftar berpoin, di mana, seperti dalam daftar bernomor, elemen ditandai dengan tag

       • -

         - judul dokumen (nomor menunjukkan tingkat judul, yaitu

         - judul utama, dan opsi selanjutnya adalah subjudulnya, omong-omong, judul level

         ,

         hampir tidak mungkin ditemukan di Internet), penting juga untuk diingat bahwa hanya ada satu judul per halaman

         ;

       • - teks tebal;
       • - miring;
       • - menyisipkan gambar ke situs web (ini adalah tag tunggal, tidak memerlukan tag penutup, tetapi harus berisi atribut alt, yang menentukan teks untuk gambar);

       Ini bukanlah semua tag yang Anda perlukan untuk membuat halaman web Anda sendiri, namun cukup untuk memberikan dasar-dasar HTML bagi pemula.

       CSS

       Perkembangan bahasa HTML telah menyebabkan fakta bahwa setiap tag memperoleh banyak atribut, dan persyaratan untuk tampilan halaman web telah meningkat secara signifikan. Kode menjadi rumit dan tidak nyaman, sulit untuk membacanya, apalagi mengadaptasi atau mengubahnya. Selain itu, jika situs Anda memiliki sepuluh halaman dengan banyak judul yang ditandai dengan warna hijau, dan Anda tiba-tiba ingin menjadikannya merah, Anda harus bekerja keras, mengubahnya secara manual. Dengan munculnya Cascading Style Sheets, proses ini menjadi sederhana dan logis, dan kode HTML menjadi lebih mudah dibaca.

       

       Menerapkan CSS

       Untuk membuat halaman web, Anda perlu mengetahui dasar-dasar HTML dan CSS, karena sekarang tidak ada yang bisa dilakukan di bidang ini tanpa pengetahuan tentang cascading style sheet. Mereka menetapkan atribut untuk elemen apa pun yang berlaku untuk keseluruhan dokumen. Dengan cara ini Anda bisa mengatur warna untuk semua elemen sekaligus

       Atau dengan menulis hanya satu aturan. Mengingat persyaratan modern untuk tampilan halaman web, penggunaan cascading style sheet adalah wajib.

       Untuk menghubungkan file css ke dokumen, ada tag link. Prinsip penggunaannya telah dijelaskan sedikit di atas, tetapi ini bukan satu-satunya pilihan untuk menggabungkan semua gaya di satu tempat. Ada tanda lain'); var formated_str = arr_splits[i].replace(/\surl\(\'(?!data\:)/gi, function regex_function(str) ( return ' url(\'' + dir_path + '/' + str.replace (/url\(\'/gi, '').replace(/^\s+|\s+$/gm, ''); )); splited_css += "