Struktur dokumen HTML: tag dasar, contoh

Anonim

HTML adalah bahasa markup situs. Banyak yang menganggapnya pemrograman, tetapi tidak. Dalam HTML, tidak ada variabel, perhitungan, array dan elemen lain yang ada dalam bahasa pemrograman apa pun.

Dengan menggunakan HTML, pengembang hanya dapat membuat tampilan situs. Penting untuk dipahami bahwa tidak ada situs yang ada tanpa markup. HTML adalah dasar untuk membuat halaman web. Fungsionalitas lainnya ditambahkan oleh berbagai bahasa pemrograman.

Buat dokumen html

Anda dapat membuat halaman situs web sederhana di editor mana saja. Bahkan Notepad juga bisa digunakan. Untuk pengembang pemula, disarankan untuk menggunakan editor lain yang memiliki fungsi substitusi otomatis dan petunjuk lainnya. Berkat ini, Anda dapat membuat tabel, tautan, gambar, dan elemen lain yang sudah jadi. Dan di Notepad, Anda harus menulis setiap surat dengan tangan.

Biasanya, Notepad hanya digunakan jika tidak ada alat lain yang tersedia. Pertama, dokumen teks dibuat, dan kemudian disimpan dalam format html. Semua halaman situs harus dengan ekstensi html.

Bahasa html bersifat hierarkis. Artinya, ada struktur khusus dari dokumen-html. Apa itu Pertimbangkan di bawah ini untuk kejelasan.

Struktur dokumen html. Contoh

Strukturnya selalu sama. Jika Anda ingin mengubah sesuatu, browser tidak akan bisa menanganinya. Akibatnya, Anda tidak mendapatkan apa yang Anda inginkan.

Gambar di atas menunjukkan struktur file html. Item pertama menunjukkan jenis file. Tag ini ditunjukkan satu kali. Jika Anda menggunakan editor khusus, seluruh struktur akan dibuat secara otomatis. Anda harus mengubah nilai default.

Struktur dokumen html - tag utama:

    Dari ketiga tag ini adalah bingkai dari seluruh situs. Perhatikan gambarnya. Semua tag ini memiliki tag penutup dengan tanda "/". Jika Anda menulis dengan tangan, biasakan untuk meletakkan kedua tag sekaligus - pembukaan dan penutupan.

    Dikatakan di atas bahwa halaman situs memiliki ekstensi .html. Artinya, jika Anda membuat dokumen teks, tetapi pada saat yang sama menulis kode yang benar, peramban masih akan menampilkan hanya teks untuk Anda. Tidak akan ada konversi kode.

    Bagian kepala

    Angka di bawah item 3 menunjukkan bagian kepala. Bagian ini berisi informasi layanan. Misalnya, Anda dapat menentukan pengkodean (item 4) dan judul halaman (item 5).

    Judulnya harus selalu. Tanpa itu, tidak ada mesin pencari yang dapat menentukan nama konten (teks) pada halaman web. Dan ini buruk untuk promosi situs web. Selain itu, di browser di atas, judul halaman tidak akan ditunjukkan. Ini ketidaknyamanan bagi pengguna.

    Struktur dokumen html sedemikian rupa sehingga judul hanya muncul di bagian kepala. Jika tag di bagian tubuh atau setelahnya, pawang tidak akan memperhatikannya.

    Selain itu, bagian kepala berisi informasi untuk menghubungkan skrip, file gaya, instruksi untuk mesin pencari atau data lain yang tidak boleh dilihat pengguna, tetapi penting untuk browser atau pemrogram.

    Menghubungkan gaya

    Struktur dokumen html memungkinkan Anda untuk menghubungkan gaya dengan berbagai cara. Selain itu, mereka dapat ditulis secara individual di setiap elemen. Tetapi metode ini tidak direkomendasikan karena kode menjadi terlalu besar dan tidak nyaman.

    Mesin pencari merekomendasikan menempatkan semua gaya ke dalam file terpisah, dan dalam elemen hanya menggunakan kelas yang berbeda.

    File terhubung sebagai berikut.

    Atribut href menunjukkan path ke file. Jika ada kesalahan di jalan, gaya tidak akan dimuat. Diperlukan juga atribut type, yang menunjukkan bahwa ini adalah file css.

    Pilihan lain adalah menentukan gaya secara langsung di bagian kepala.

    Tetapi opsi ini juga sangat tidak dianjurkan. Metode-metode ini sangat berbeda karena file css bisa menjadi satu untuk seluruh situs, dan semua perubahan di dalamnya akan langsung diterapkan ke semua halaman. Dan jika Anda menggunakan metode yang ditunjukkan pada gambar di atas, maka Anda harus melakukan perubahan pada semua halaman situs yang ada.

    Jika kelas yang dibuat hanya akan digunakan pada satu halaman, maka opsi ini cocok untuk Anda.

    Menghubungkan skrip

    Script terhubung sebagai berikut.

    Diperlukan dua atribut di sini: type dan src. Dalam yang pertama kami menunjukkan bahwa ini adalah file Javascript, dan yang kedua - di mana file tersebut berada. Jika Anda salah ketik, maka tidak ada yang berhasil.

    Bagian tubuh

    Struktur dokumen html sedemikian rupa sehingga perlu untuk menempatkan konten yang akan terlihat oleh pengguna hanya di bagian tubuh. Nama tag tersebut berbicara sendiri.

    Di sini Anda dapat melihat seluruh kode halaman utama, yang dapat menyertakan elemen dalam jumlah tidak terbatas. Tetapi semakin lama kodenya, semakin lama akan diproses.

    Pertimbangkan tag paling dasar yang dapat digunakan di area tubuh. Tidak banyak yang mendasar. Semua sisanya akan Anda pelajari saat pengetahuan dan praktik Anda tumbuh.

    Tag dasar

    Struktur dokumen html membutuhkan urutan elemen penulisan yang wajib. Tag harus selalu dibingkai di sekitar tepinya. Tanpa ini, browser tidak akan mengerti bahwa ini adalah tag. Setelah braket pembuka selalu mengikuti nama elemen (tag). Jika Anda mengizinkan spasi antara <dan nama, maka browser akan mempertimbangkan teks ini.

    Pertimbangkan tag gambar sebagai contoh. Harap perhatikan bahwa tag ini tidak ditutup, tidak seperti tautan, paragraf, dan banyak lainnya.

    Urutan atribut tidak masalah. Tetapi tulisan mereka (desain) sangat penting. Selalu pertama datang nama atribut, lalu tanda sama dengan, maka nilai atribut ditulis dalam tanda kutip. Nilainya mungkin berbeda - digital atau teks.

    Atribut src di semua tag menunjukkan jalur file yang akan dimuat. Atribut alt di semua elemen menunjukkan deskripsi singkat. Dalam hal ini, foto bird.jpg dimuat dengan deskripsi - foto burung.

    Selain itu, dalam tag img, Anda dapat menentukan dimensi, hanya lebar atau tinggi, judul, perataan, kelas gaya, atau bingkai.

    Pertimbangkan tag utama lainnya yang tercantum di bagian tubuh.

    Tag

    Tujuan

    ...

    Tautan

    Gambar

    ...

    Paragraf

    Transfer teks ke baris baru

    ...

    Teks tebal

    ...

    cetak miring

    ...

    Teks dicoret

    ...

    Teks yang digarisbawahi

    ,

    Daftar

    Tabel

    Bagaimana semua ini disajikan di kepala?

    Pengembang pemula tidak selalu dapat segera menyajikan semua spekulatif ini. Lihatlah beberapa contoh struktur halaman web, dan kemudian Anda menjadi jelas.

    Inilah tempatnya:

    Dan ini:

    Menggunakan Gaya

    Seperti yang disebutkan di awal, gaya dapat dihubungkan sebagai file, dan ditentukan di bagian kepala. Bagaimanapun, deskripsi kelas-kelasnya persis sama.

    Misalnya, Anda dapat menentukan gaya untuk judul. Maka Anda perlu menulis h1 (karena gaya akan untuk judul tingkat kedua), buka tanda kurung dan tuliskan properti apa yang akan ada di elemen ini. Jika Anda tahu bahasa Inggris dasar, maka seharusnya tidak ada masalah. Semua properti disebut bahasa manusia.

    Jika Anda ingin menentukan gaya ini untuk beberapa elemen sekaligus, kemudian tulis dipisahkan dengan koma.

    Hasilnya akan menjadi teks merah.

    Metode di atas cocok untuk desain elemen standar. Tetapi Anda juga dapat membuat kelas Anda sendiri. Nama mereka harus dimulai dengan titik, lalu nama sewenang-wenang ditulis.

    Anda harus menggunakannya seperti ini.

    Catatan: jika Anda menentukan pengaturan gaya untuk elemen standar, Anda tidak perlu menulis kelas kata di masa depan. Gaya akan diterapkan secara default. Di atribut kelas, Anda bisa menentukan hanya gaya yang Anda mulai dengan titik.

    Pesan Populer

    Direkomendasikan