Pendahuluan
Dalam membuat sebuah halaman web, penempatan teks yang baik dan mudah dibaca adalah salah satu faktor penting untuk memperbaiki pengalaman pengguna. Salah satu teknik penempatan teks yang efektif adalah dengan membuat teks rata tengah (center-aligned text).
Teks rata tengah adalah cara menempatkan teks di tengah halaman atau bagian tertentu dari halaman. Teknik ini sering digunakan dalam desain halaman web, terutama pada bagian-bagian seperti header, subjudul, atau pengantar.
Ada beberapa cara untuk membuat teks rata tengah dengan menggunakan HTML. Beberapa cara tersebut melibatkan penggunaan gaya CSS, sedangkan cara lainnya menggunakan tag HTML khusus. Oleh karena itu, penting bagi seorang pengembang web untuk memahami cara membuat teks rata tengah dengan HTML agar dapat memilih cara terbaik yang sesuai dengan kebutuhan halaman web yang dibuat.
Point Materi
Berikut adalah beberapa poin materi tentang cara membuat teks rata tengah dengan menggunakan HTML:
Menempatkan teks rata tengah di tengah halaman.- Menggunakan gaya CSS dengan
display: flex;untuk membuat konten halaman berada di tengah. - Menggunakan gaya CSS dengan
align-items: center;danjustify-content: center;untuk memposisikan konten di tengah.
div.
- Menggunakan gaya CSS dengan
display: flex;untuk membuat div berada di tengah halaman. - Menggunakan gaya CSS dengan
align-items: center;danjustify-content: center;untuk memposisikan konten di tengahdiv.
center.
- Menggunakan tag HTML
center, tetapi sebaiknya dihindari karena sudah tidak dianjurkan dalam HTML5.
Pada setiap contoh, penempatan teks rata tengah dilakukan dengan cara yang berbeda. Namun, gaya CSS display: flex; dan properti align-items: center; dan justify-content: center; digunakan pada kedua contoh pertama untuk memudahkan penempatan konten di tengah.
Memahami cara membuat teks rata tengah dengan HTML dan gaya CSS sangat penting bagi pengembang web. Selain memudahkan penempatan teks, teknik ini juga dapat meningkatkan tampilan halaman web dan meningkatkan pengalaman pengguna. Dengan menggunakan teknik yang tepat, Anda dapat membuat tata letak yang menarik dan mudah dibaca bagi pengunjung halaman web Anda.
Format Umum
Format umum penggunaan jenis ini adalah:
<center>Teks ini akan rata tengah pada penerapannya.</center>
Dalam membuat dokumen HTML, kita dapat menentukan letak atau posisi dari teks atau gambar yang terdapat pada halaman web; apakah ingin rata kiri, rata kanan, rata kiri-kanan, atau berada di tengah-tengan layar. Pekerjaan semacam ini sering dikenal dengan istilah text aligment. Untuk melakukan hal ini, kita dapat mengisi atribut ALIGN dengan nilai-nilai yant telah disediakan.
Teks rata tengah pada tag div dengan id "header"
Format kode pada penggunaan jenis ini adalah:
<!DOCTYPE html>
<html>
<head>
<title>Teks Rata Tengah</title>
<style>
#header {
text-align: center;
}
</style>
</head>
<!--[ <body> open ]-->
<body>
<div id="header">
<p>Pandu Essentials</p>
<p>Ini adalah teks rata tengah.</p>
</div>
</body>
<!--[ </body> close ]-->
</html>
Dalam contoh ini, teks "Ini adalah teks rata tengah." akan muncul di tengah halaman karena gaya CSS yang diterapkan pada tag <div> dengan id "header". Anda dapat menyesuaikan kode CSS untuk membuat teks rata tengah di tempat lain di halaman web Anda dengan mengubah class atau id yang digunakan pada tag <div>.
Teks rata tengah dengan menggunakan HTML
Format kode pada penggunaan jenis ini adalah:
<!DOCTYPE html>
<html>
<head>
<title>Teks Rata Tengah</title>
<style>
/* Style Button */
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
</style>
</head>
<!--[ <body> open ]-->
<body>
<p>Pandu Essentials</p>
<p>Ini adalah teks rata tengah di tengah halaman.</p>
</body>
<!--[ </body> close ]-->
</html>
Pada contoh ini, teks "Ini adalah teks rata tengah di tengah halaman." akan muncul di tengah halaman karena gaya CSS yang diterapkan pada body. Kode CSS ini menggunakan display: flex; untuk membuat konten halaman berada di tengah, serta height: 100vh; untuk mengatur tinggi halaman sehingga konten dapat berada di tengah.
Teks rata tengah di bagian tengah div
Format kode pada penggunaan jenis ini adalah:
<!DOCTYPE html>
<html>
<head>
<title>Teks Rata Tengah</title>
<style>
#container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
#content {
text-align: center;
}
</style>
</head>
<!--[ <body> open ]-->
<body>
<div id="container">
<div id="content">
<p>Pandu Essentials</p>
<p>Ini adalah teks rata tengah di bagian tengah div.</p>
</div>
</div>
</body>
<!--[ </body> close ]-->
</html>
Pada contoh ini, teks "Ini adalah teks rata tengah di bagian tengah div." akan muncul di tengah <div> dengan id "content" karena gaya CSS yang diterapkan pada tag <div> tersebut. Kode CSS ini menggunakan display: flex; untuk membuat div dengan id "container" berada di tengah halaman, serta align-items: center; dan justify-content: center; untuk memposisikan tag <div> dengan id "content" di tengah div dengan id "container".
Teks rata tengah dengan tag center
Format kode pada penggunaan jenis ini adalah:
<!DOCTYPE html>
<html>
<head>
<title>Teks Rata Tengah</title>
</head>
<!--[ <body> open ]-->
<body>
<center>
<p>Pandu Essentials</p>
<p>Ini adalah teks rata tengah di bagian tengah div.</p>
</center>
</body>
<!--[ </body> close ]-->
</html>
Pada contoh ini, teks "Ini adalah teks rata tengah dengan tag center." akan muncul di tengah halaman karena tag center yang digunakan. Namun, penggunaan tag center sudah tidak dianjurkan karena telah dihapus dari HTML5. Oleh karena itu, lebih disarankan untuk menggunakan gaya CSS untuk membuat teks rata tengah di halaman web Anda.
Kesimpulan
Dalam membuat halaman web, penempatan teks yang baik dan mudah dibaca merupakan faktor penting untuk memperbaiki pengalaman pengguna. Salah satu teknik penempatan teks yang efektif adalah dengan membuat teks rata tengah (center-aligned text). Terdapat beberapa cara untuk membuat teks rata tengah dengan menggunakan HTML, antara lain menggunakan gaya CSS, tag HTML khusus, maupun tag HTML yang sudah tidak dianjurkan.
Untuk memperoleh hasil yang terbaik dalam penempatan teks rata tengah, penting bagi pengembang web untuk memilih cara terbaik yang sesuai dengan kebutuhan halaman web yang dibuat. Selain itu, pengembang web juga harus memperhatikan praktik-praktik terbaik dalam penggunaan kode HTML dan CSS agar dapat memaksimalkan hasil yang diinginkan pada halaman web.
Praktikum
Current Browser Support:Praktikum 3.25: Mengatur posisi tombol di tengah pada halaman web.
- Jalankan aplikasi Text Editor
- Isikan kode dibawah ini kedalam text editor
- Simpan file dengan nama posisi-button.html dan tempatkan ke dalam direktori kerja.
- Jalankan file tersebut melalui web browser dan lihat hasilnya.
<!DOCTYPE html>
<html dir='ltr' lang='en'>
<head>
<title>Button</title>
<style>
.parent {
display: grid;
place-items: center;
}
/* Style Button */
.button-custom {
display: inline-block;
background: #4285F4;
color: #fff;
width: 240px;
height: 50px;
border-radius: 5px;
border: thin solid #888;
box-shadow: 1px 1px 1px grey;
white-space: nowrap;
font-size: 16px;
font-weight: normal;
font-family: 'Roboto', sans-serif;
margin: 2rem 0;
}
</style>
</head>
<!--[ <body> open ]-->
<body>
<center>
<h1>Pandu Essentials</h1>
<p>Mengatur Posisi Tombol</p>
</center>
<br />
<h1>Pandu Essentials</h1>
<div class="parent">
<button name="button" class="custom">Sign in with Pandue</button>
</div>
</body>
<!--[ </body> close ]-->
</html>
Gambar dibawah ini adalah Gambar hasil praktikum mengatur posisi button/tombol sesuai dengan script diatas.