KURSUS WEB JAKARTA

HTML Layouts

Tata letak halaman web sangat penting untuk membuat website Anda terlihat baik.

Desain tata letak halaman web Anda sangat hati-hati.

Website Layouts

Kebanyakan website telah menempatkan konten mereka dalam beberapa kolom (diformat seperti majalah atau koran).

Beberapa kolom yang dibuat dengan menggunakan <div> atau elemen <table>. CSS digunakan untuk memposisikan elemen, atau untuk membuat latar belakang atau tampilan berwarna-warni untuk halaman.

lamp Meskipun mungkin untuk membuat layout yang bagus dengan tabel HTML, tabel dirancang untuk menyajikan data bentuk tabel - TIDAK sebagai alat tata letak!

HTML Layouts - Using <div> Elements

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

Contoh berikut ini menggunakan lima elemen div untuk membuat tata letak beberapa kolom, menciptakan hasil yang sama seperti pada contoh sebelumnya:

<!DOCTYPE html>
<html>
<body>

<div id="container" style="width:500px">

<div id="header" style="background-color:#9F3;">
<h1 style="margin-bottom:0;">Judul Halaman Web</h1></div>

<div id="menu" style="background-color:#9CC;height:200px;width:100px;float:left;">
<b>Menu</b><br>
HTML<br>
CSS<br>
JavaScript</div>

<div id="content" style="background-color:#CCF;height:200px;width:400px;float:left;">
Isi Content</div>

<div id="footer" style="background-color:#CF6;clear:both;text-align:center;">
Copyright © kursuswebdesign.co.id</div>

</div>
 
</body>
</html>
 

 Kode HTML di atas akan menghasilkan hasil sebagai berikut:

content

HTML Layouts - Using Tables

Sebuah cara sederhana untuk menciptakan layout adalah dengan menggunakan tag HTML <table>.

Beberapa kolom yang dibuat dengan menggunakan <div> atau elemen <table>. CSS digunakan untuk memposisikan elemen, atau untuk membuat latar belakang atau tampilan berwarna-warni untuk halaman.

lamp Menggunakan <table> untuk membuat tata letak yang baik TIDAK penggunaan yang benar dari elemen. Tujuan dari elemen <table> adalah untuk menampilkan data tabular!

 Contoh berikut menggunakan tabel dengan 3 baris dan 2 kolom - baris pertama dan terakhir meliputi kedua kolom menggunakan atribut colspan:

 <!DOCTYPE html>
<html>
<body>

<table width="500" border="0">
<tr>
<td colspan="2" style="background-color:#9F3;">
<h1>Judul Halaman Web</h1>
</td>
</tr>

<tr>
<td style="background-color:#9CC;width:100px;text-align:top;">
<b>Menu</b><br>
HTML<br>
CSS<br>
JavaScript
</td>
<td style="background-color:#CCF;height:200px;width:400px;text-align:top;">
Isi Content</td>
</tr>

<tr>
<td colspan="2" style="background-color:#CF6;text-align:center;">
Copyright © kursuswebdesign.co.id</td>
</tr>
</table>

</body>
</html>

 Kode HTML di atas akan menghasilkan hasil sebagai berikut:

contant

 

HTML Layout - Useful Tips

Tip: Keuntungan terbesar menggunakan CSS adalah bahwa, jika Anda menempatkan kode CSS pada style sheet eksternal, situs Anda menjadi Jauh Lebih Mudah untuk mempertahankan. Anda dapat mengubah tata letak dari semua halaman Anda dengan mengedit satu file. Untuk mempelajari lebih lanjut tentang CSS, studi kami tutorial CSS.

Tip: Karena layout canggih memerlukan waktu untuk membuat, pilihan yang lebih cepat adalah dengan menggunakan template. Pencarian Google untuk template website gratis (ini adalah layout situs pre-built Anda dapat menggunakan dan menyesuaikan).

HTML Layout Tags

TagDescription
<div> Mendefinisikan bagian dalam dokumen (block-level)
<span> Mendefinisikan bagian dalam dokumen (inline)

  (syd)

 

BELAJAR WEB DI ITKOMPUTER

Durasi 8 kali pertemuan untuk satu kali pertemuan 2 jam.
Pengenalan Photoshop untuk design web, design web dengan Photoshop, Integrasi Photoshop dengan DreamWeaver, Pengenalan DreamWeaver, perintah-perintah HTML, CSS, JQuery, Membuat animasi banner, Upload website dengan FTP dan cpanel, trik bagai mana mempromosikan website anda di internet, memilih web Hosting. Berbagai Tips dan Trik menarik tentang Web Design. Tujuan akhir setelah mengikuti kursus ini: Anda dapat membuat web yang menarik seperti company profile, web gallery photo, banner animasi, mempromosikan web di internet dan dapat melakukan upload ke server hosting.

Klik disini untuk mendaftar