Latest web development tutorials

tata letak HTML

tata letak halaman untuk memperbaiki penampilan situs ini sangat penting.

Harap hati-hati merancang tata letak halaman Anda.

contoh

contoh online

tata letak halaman dengan menggunakan elemen <div>
Cara menggunakan <div> elemen tata letak.

tata letak Gunakan halaman <table> elemen
Cara menggunakan <table> elemen tata letak.

tata letak situs

Sebagian besar situs akan isi menjadi sejumlah kolom (seperti majalah atau koran yang).

Kebanyakan situs dapat menggunakan <div> atau <table> elemen untuk membuat beberapa kolom. CSS digunakan untuk posisi elemen, atau membuat latar belakang dan penampilan penuh warna halaman.

lampu Meskipun kita dapat menggunakan tag tabel HTML untuk merancang tata letak yang indah, tetapi tag tabel tidak dianjurkan untuk digunakan sebagai alat tata letak - bukan alat tata letak meja.

HTML Layout - Menggunakan elemen <div>

elemen div adalah elemen blok-tingkat digunakan untuk mengelompokkan elemen HTML.

Contoh berikut ini menggunakan lima elemen div untuk membuat tata letak multi-kolom:

contoh

<! DOCTYPE html> <Html> <Head> <Meta charset = "utf-8"> <Title> Tutorial ini (w3big.com) </ title> </ Kepala> <Body> <Div id = "container" style = "width: 500px"> <Div id = "header" style = "background-color: # FFA500;"> <H1 style = "margin-bottom: 0 ;"> Judul halaman utama </ h1> </ div> <Div id = "menu" style = "background-color: # FFD700; height: 200px; width: 100px; float: left;"> <B> Menu </ b> Situs HTML <br> CSS Situs JavaScript </ div> <Div id = "content" style = "background-color: #EEEEEE ; height: 200px; width: 400px; float: left;"> Teks Berikut </ div> <Div id = "footer" style = "background-color: # FFA500; clear: both; text-align: center;"> Copyright © w3big.com </ div> </ Div> </ Body> </ Html>

Coba »

Kode HTML di atas menghasilkan hasil sebagai berikut:

tata letak HTML - menggunakan tabel

Gunakan HTML <table> tag adalah untuk menciptakan sebuah layout dengan cara yang sederhana.

Kebanyakan situs dapat menggunakan <div> atau <table> elemen untuk membuat beberapa kolom. CSS digunakan untuk posisi elemen, atau membuat latar belakang dan penampilan penuh warna halaman.

lampu Bahkan jika Anda dapat menggunakan tabel HTML untuk membuat tata letak yang baik, tetapi tujuannya adalah untuk menyajikan tabel desain tabel data yang - tidak table alat tata letak!

Contoh berikut ini menggunakan tiga baris dua meja - yang pertama dan baris terakhir menggunakan atribut colspan untuk rentang dua:

contoh

<! DOCTYPE html> <Html> <Head> <Meta charset = "utf-8"> <Title> Tutorial ini (w3big.com) </ title> </ Kepala> <Body> <Table width = "500" border = "0"> <Tr> <Td colspan = "2" style = "background-color: # FFA500;"> <H1> judul halaman utama </ h1> </ Td> </ Tr> <Tr> <Td style = "background-color: # FFD700; width: 100px;"> <B> Menu </ b> Situs HTML <br> CSS Situs JavaScript </ td> <Td style = "background-color: #eeeeee ; height: 200px; width: 400px;"> Teks Berikut </ td> </ Tr> <Tr> <Td colspan = "2" style = "background-color: # FFA500; text-align: center;"> Copyright © w3big.com </ td> </ Tr> </ Table> </ Body> </ Html>

Coba »

Kode HTML di atas menghasilkan hasil sebagai berikut:


HTML Layout - Tips Berguna

Tip: manfaat terbesar menggunakan CSS adalah bahwa jika kode CSS disimpan dalam style sheet eksternal, maka situs akan lebih mudah untuk mempertahankan.Dengan mengedit file tunggal, Anda dapat mengubah tata letak untuk semua halaman. Untuk mempelajari lebih lanjut tentang CSS, kunjungi tutorial CSS .

Tip: Karena untuk membuat tata letak canggih sangat waktu memakan, menggunakan template adalah pilihan yang cepat.Melalui mesin pencari Anda dapat menemukan banyak website template gratis (Anda dapat menggunakan tata letak situs prebuilt, dan mengoptimalkan mereka).

tag HTML layout

标签描述
<div> 定义文档区块，块级(block-level)
<span> 定义 span，用来组合文档中的行内元素。