Cara menggunakan apa itu html layout?

Kali ini kita akan coba belajar membuat website sederhana menggunakan HTML dan CSS dengan berbagai jenis layout. Layout website setidaknya memiliki element-element berikut:

Table of Contents Show

Layout Website Sederhana 1: 1 Kolom Artikel
Apa yang dimaksud dengan web layout?
Bagaimana cara membuat sebuah layout?
Apa itu CSS layout?
Apa itu grid dalam HTML?

Element header, untuk menempatkan informasi judul maupun tagline web
Element navigasi, menu navigasi yang mengahar ke halaman lain website
Element konten, element yang berfungsi untuk menempatkan konten-konten website
Element sidebar, element satu ini difungsikan untuk menempatkan informasi tambahan seperti, postingan populer, postingan terbaru, arsip, maupun iklan
Element footer, posisi paling akhir atau bawah dari halaman website yang berfungsi untuk menempatkan informasi profil seperti halaman about, contact, atau bisa juga lisensi dari halaman web.

Seri Belajar HTML:

Panduan Dasar Belajar HTML untuk Pemula
Panduan Membuat Tabel di HTML
Panduan Membuat Form di HTML
Panduan Membuat Layout HTML dengan Semantic Element

Berikut spesifikasi layout yang akan kita buat menggunakan HTML dan CSS:

Layout website 1: 1 kolom untuk artikel
Layout website 2 terdiri dari: 2 kolom (1 kolom artikel, 1 kolom sidebar kiri)
Layout website 3 teridir dari: 3 kolom (2 kolom artikel, 1 kolom sidebar kanan)
Layout website 4 terdiri dari: 4 kolom (2 kolom artikel, 2 kolom sidebar kiri-kanan) & header image
Layout website 5 terdiri dari: 3 kolom (1 kolom artikel, 2 kolom sidebar kiri-kanan) dan 3 kolom footer

Langsung kita eksekusi menggunakan text editor. Kita buat dua buah file untuk HTML menggunakan index.html sedangkan CSS gunakan nama style.css.

Daftar Isi

Layout Website Sederhana 1: 1 Kolom Artikel

Kode HTML

Sebelum membuat layout HTML, pahami terlebih dahulu tentang materi element block & inline, div & span, serta atribut class dan id pada HTML, baca selengkapnya . Sekarang kita mulai step by step untuk koding HTML nya:

#1 Pertama kita buat struktur dasar HTML, tambahkan title dan element <link> untuk menghubungkan kode HTML dengan CSS:

<!DOCTYPE html>

<html>

<head>

<title>Belajar HTML</title>

</head>

<body>

</body>

</html>

#2 Pada element <body> buat class container untuk membungkus header, content, dan footer:

</div>

#2.1 Element header terdiri dari 3 buah element, yaitu tag <h1> untuk judul website, tag <p> untuk deskripsi atau tagline web, dan tag <ul> untuk membuat menu navigasi. Kode HTML yang digunakan:

<h1 class="judul">Belajar HTML</h1>

<p class="tagline">Membuat Layout HTML</p>

<li><a href="#">About</a></li>

<li><a href="#">Contact</a></li>

</ul>

</div>

#2.2 Pada element konten akan kita tambahkan beberapa element yaitu:

judul konten menggunakan tag <h2>,
meta data yang terdiri dari author dan tanggal publikasi menggunakan tag <p>,
isi konten terdiri atas 3 buah paragraf menggunakan element tag <p>

Kode HTML yang digunakan:

<h2>Judul Artikel</h2>

<p class="author">Oleh <a href="#">Rino Safrizal</a> pada 17 November 2021</p>

<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Id, quia dolores excepturi. Ad voluptatem nesciunt provident commodi beatae. Voluptatum alias ab ipsa atque vitae odio iure accusamus laboriosam quibusdam, assumenda reprehenderit aperiam, adipisci nostrum fugit. Voluptas quas ipsum officiis dolor, numquam quos, unde ducimus odio animi repudiandae, temporibus alias praesentium esse delectus magnam nihil et est, error ad fuga. Laudantium obcaecati quis officiis est mollitia quibusdam explicabo fugit vel veniam esse non assumenda nisi facere ab, similique molestiae nulla nemo iusto alias quam quisquam nihil quod ratione in. Aliquam, inventore repudiandae tempora nihil in unde adipisci officia. Recusandae, eos perspiciatis!</p>

<p>Lorem ipsum dolor, sit, amet consectetur adipisicing elit. Voluptate obcaecati possimus eaque fugiat, labore assumenda sed eligendi repellat omnis, libero sequi in vel nesciunt enim, nisi aliquid! Quasi voluptatem ipsa quo recusandae vero, maxime eligendi, optio! Dolorum cupiditate laborum quae, quidem neque consequuntur quam iusto optio nam unde porro explicabo tenetur illo blanditiis ducimus voluptate voluptatem animi possimus est. Tempora, aut accusamus. Doloremque consectetur distinctio impedit maiores, sit atque maxime odio inventore libero nisi voluptate nam eaque ad laboriosam eum corrupti, numquam voluptas dolorem reprehenderit tempora vero minima, aspernatur. Natus, dicta accusantium consequuntur dolores, porro ipsum quibusdam veniam minima asperiores.</p>

</div>

Baca Juga: Membuat Layout Website Sederhana (Part 3)

#2.3 Untuk element footer kita gunakan tag <p>, kode HTML yang digunakan:

</div>

#3 Kita susun kode HTML di atas sehingga menjadi sebagai berikut:

<!DOCTYPE html>

<head>

<title>Belajar HTML</title>

</head>

<body>

<h1 class="judul">Membuat Website</h1>

<p class="tagline">Membuat Layout HTML 1 Kolom</p>

<li><a href="#">About</a></li>

<li><a href="#">Contact</a></li>

</ul>

</div>

<h2>Judul Artikel</h2>

<p class="author">Oleh <a href="#">Rino Safrizal</a> pada 17 November 2021</p>

</div>

</div>

</body>

</html>

Baca Juga: Instalasi Sistem Operasi Linux Mint Dual Boot dengan Windows 10

Hasil kode HTML pada web browser tanpa menggunakan CSS:

Kode CSS

Kode CSS berfungsi untuk memberikan style atau gaya dari sebuah website. Dengan kode CSS, satu buah halaman HTML yang sama bisa memiliki lebih dari satu style yang berbeda. Sekarang kita coba untuk memberikan style layout HTML diatas:

#1 Pertama-tama kita tambahkan CSS reset untuk menghilangkan konfigurasi default setiap element HTML. Selain itu, dengan CSS reset memudahkan kita memanipulasi setiap element HTML sesuai selera. Untuk memeret konfigurasi default element HTML, kita tambahkan tool CSS yang dibuat oleh Eric A. and Kathryn S. Meyer, dengan kode CSS berikut:

/* http://meyerweb.com/eric/tools/css/reset/

v2.0 | 20110126

License: none (public domain)

html, body, div, span, applet, object, iframe,

h1, h2, h3, h4, h5, h6, p, blockquote, pre,

a, abbr, acronym, address, big, cite, code,

del, dfn, em, img, ins, kbd, q, s, samp,

small, strike, strong, sub, sup, tt, var,

b, u, i, center,

dl, dt, dd, ol, ul, li,

fieldset, form, label, legend,

table, caption, tbody, tfoot, thead, tr, th, td,

article, aside, canvas, details, embed,

figure, figcaption, footer, header, hgroup,

menu, nav, output, ruby, section, summary,

time, mark, audio, video {

margin: ;

padding: ;

border: ;

font-size: 100%;

font: inherit;

vertical-align: baseline;

}

/* HTML5 display-role reset for older browsers */

article, aside, details, figcaption, figure,

footer, header, hgroup, menu, nav, section {

display: block;

}

body {

line-height: 1;

}

ol, ul {

list-style: none;

}

blockquote, q {

quotes: none;

}

blockquote:before, blockquote:after,

q:before, q:after {

content: '';

content: none;

}

table {

border-collapse: collapse;

border-spacing: ;

}

#2 Style pada element body:

font-family: sans-serif
background-color: #f3f3f3,
font color: #555:

body {

font-family: sans-serif;

background-color: #f3f3f3;

color: #555;

}

#3 Style pada element container:

lebar (width): 900px
margin: auto (posisi di tengah browser)

.container {

width: 900px;

margin: auto;

}

#4 Style pada element header:

background-color: aquamarine
padding atas kanan bawah kiri: 30px

Padding berfungsi mengatur jarak antara konten header dengan border

.header {

background-color: aquamarine;

padding: 30px;

}

#4.1 Style pada element judul:

font-size: 40px
font-weight: bold (huruf tebal)
margin-bottom: 10px (jarak antara judul dengan tagline)

.header .judul {

font-size: 40px;

font-weight: bold;

margin-bottom: 10px;

}

#4.2 Style pada element tagline:

font-size: 18px
margin-bottom: 40px (jarak antara tagline dengan menu)

.header .tagline {

font-size: 18px;

margin-top: 40px;

}

#4.3 Style pada element menu:

display: inline-block

Fungsi property display dengan value inline-block pada tag <ul> dan <li> adalah mengubah posisi default menu dari vertikal (berupa block) menjadi horizontal (berupa inline).

.header ul li {

display: inline-block;

margin-top: 40px;

}

#4.4 Style pada anchor text:

text-decoration: none
font size: 16px
font color: white
padding: 7px
background-color: dodgerblue

property text-decoration dengan value none berfungsi menghilangkan style default (warna biru dan underline) pada anchor text. Padding berfungsi mengatur jarak antara konten dengan border.

.header a {

text-decoration: none;

font-size: 16px;

color: white;

padding: 7px;

background-color: dodgerblue;

}

Baca Juga: Instalasi dan Konfigurasi DHCP Server pada Linux Debian 11

#4.5 Memberikan efek ketika mouse diarahkan ke anchor text atau tombol menu navigasi, gunakan pseudo :hover pada selector a:

Apa yang dimaksud dengan web layout?

Layout website adalah sebuah tata letak dari kumpulan elemen atau variabel desain yang terhubung dengan suatu media tertentu untuk mendukung konsep pembuatan sebuah situs web. Pada dasarnya, tujuan penggunaan tata letak ini adalah untuk menggabungkan elemen, seperti gambar dan teks agar mampu berkomunikasi.

Bagaimana cara membuat sebuah layout?

Tips membuat layout halaman.

Sejajarkan Elemen Desain dalam Grid (kisi-kisi) ... .

Pilih Visual Tunggal. ... .

Keseimbangan Tata Letak Visual / Teks. ... .

Aturan Sepertiga. ... .

Menambahkan Ruang Kosong Di Tempat Yang Tepat. ... .

Gunakan Dua Atau Lebih Dari Elemen Desain Yang Sama. ... .

Tekankan Perbedaan Antar Unsur Desain..

Apa itu CSS layout?

CSS layouting adalah tehnik untuk mengatur tata letak sebuah halaman web dengan menggunakan kode CSS.

Apa itu grid dalam HTML?

Grid merupakan salah satu properti CSS yang digunakan untuk mengatur layout website. Layaknya Flexbox, Grid mampu membuat layout responsive dan fleksibel. Untuk membuat halaman web yang lebih powerful kita bisa mengkombinasikan kedua konsep ini.