WEB SITE

Hubungan antara tag definisi halaman, tag terstruktur, dan tag div

HTML

Saya tertinggal dalam transisi HTML ...

Ketika saya pindah dari Jakarta ke Bali pada tahun 2000, saya menghabiskan banyak waktu untuk melakukan pekerjaan fisik seperti membeli dan mengemas untuk memulai perusahaan dan mengekspor furnitur dan barang-barang lain-lain, jadi saya tidak dapat mengikuti transisi teknologi dari web.

Dengan HTML4.01 pada tahun 1999, terjadi perubahan besar dalam arah, dengan HTML mengkhususkan diri pada definisi struktur dan menyerahkan dekorasi pada CSS, dan era tag HTML itu sendiri digantikan oleh era lembar gaya.

/*Write attributes in the HTML tag. The default font size is 3.*/
<font size=5 color="red">

/*Use the font attribute of the stylesheet*/
<font style="font-size:12px; color:red;">

Pada tahun 2001, ketika generasi XHTML1.1 berikutnya dirilis, terjadi kebingungan, dan masalah dari beberapa Definisi Jenis Dokumen dan metode deskripsi yang panjang ditemui, tetapi HTML5, yang menjadi standar resmi W3W pada tahun 2014, akan dapat memberikan definisi jenis dokumen yang sama dengan titik awal DTD adalah singkat dan selesai.

/*HTML 4.01 Transitional DTD*/
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">

/*XHTML1.1 */
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

/*HTML5*/
<!DOCTYPE html>
<html lang="ja">

Ada tiga jenis DOCTYPE: Strict, Transitional, dan Frameset, dan bergantung pada cara penulisannya, browser akan beralih antara "mode kompatibilitas" dan "mode yang sesuai standar", yang akan menghasilkan status tampilan yang berbeda.

Page-defined dan structured tags

Saya membeli PC IBM dengan Windows 3.1 sekitar tahun 1994 dan membuat situs musik India sebagai hobi, tetapi html, head and body adalah tag definisi halaman yang sudah ada sejak saat itu, dan semuanya dibagi menjadi bagian metadata (informasi tentang dokumen HTML itu sendiri) dan bagian konten Informasi di tag kepala tidak ditampilkan di browser.


<html>
    |-<head></head>
    |-<body></body>
</html>

Di HTML5, seluruh situs web dibagi menjadi lima bagian: "area header", "area navigasi", "area konten", "area bilah sisi" dan "area footer", menggunakan tag terstruktur (header, nav, artikel, samping, dan footer ) untuk bagian konten yang ditentukan oleh tag definisi halaman.


<body>
    |-<header></header>
    |-<nav></nav>
    |-<article></article>
    |-<aside></aside>
    |-<footer></footer>
</body>

Pada dasarnya, semantik konten ditentukan oleh ID dan atribut kelas dari tag div, tetapi item utama seperti header dan navigasi harus distandarisasi dalam tag HTML5.

Tata letak dengan CSS untuk atribut id dan kelas dari tag div

Setelah menentukan kerangka dengan tag halaman dan tag terstruktur, Anda menentukan atribut id dan kelas dengan tag div dan mengatur tata letak menggunakan CSS.

Sejak spesifikasi CSS2.1 diselesaikan sekitar tahun 1999, CSS hanya menambahkan fitur sampai CSS3, jadi tidak mengubah cara tampilannya seperti HTML.

Tidak ada aturan penamaan untuk atribut id dan nama kelas, tetapi penggunaan yang umum adalah sebagai berikut.

  1. Tempatkan wadah tepat di bawah badan dan tutupi seluruh konten dari header hingga footer
  2. Membungkus header, nav dan samping dengan pembungkusnya

 

html

body

container

header-wrapper

left

Mengapa mengapit elemen blok dengan pembungkus lagi?

Dua hal utama yang harus diingat saat mendesain situs web adalah "keterbacaan" dan "tampilan dan nuansa", tetapi jika teks tersebar hingga lebar penuh browser, sulit untuk dibaca, dan jika semuanya diperketat naik dari kedua sisi, memberi kesan sempit.

Seperti tema blog ini, hampir semua tema responsif modern menempatkan gambar latar belakang di header yang memenuhi lebar browser dan menempatkan visual utama di tengah jendela untuk mendapatkan dampak visual.

  1. Keterbacaan> Spasi di kedua sisi
  2. Tampilannya bagus> Buka gambar latar belakang hingga lebar penuh di browser.

Alasan untuk membungkus ulang area header dan nav dengan wrappers adalah untuk menyebarkan gambar latar belakang untuk mengisi browser untuk menciptakan rasa keterbukaan, dan area header blog ini juga dilakukan.

犬たちSaya juga menampilkan entri terbaru dengan thumbnail di bagian widget situs, dengan teks dibungkus di sebelah kanan.
Untuk mencapai ini, saya mengatur tag img gambar ke "float: left;" lalu apit sebagai elemen induk dengan pembungkus dan lepaskan float dengan "overflow: hidden". Ini persis seperti ini.
<div id="wrapper-dog" style="border: 1px, solid, black; overflow:hidden;">
<img src="test_float.jpg" style="float:left; margin-right:10px;"/>
<p>Contents</p>
</div>

© 2020 バテラハイシステム Powered by STINGER