Mengatur Alignment Teks di Dokumen HTML dengan CSS


Halo sobat Artikel Multimedia, sebagian sobat mungkin tidak asing lagi dengan istilah alignment (perataan), terlebih lagi jika pernah membuat dokumen di Microsoft word. Di dalam css sendiri juga terdapat sebuah properti yang digunakan untuk meratakan sebuah kalimat atau paragraf secara horizontal, properti css tersebut adalah text-align. Di html text-align berfungsi untuk membuat teks rata kiri (default), rata kanan, rata tengah, atau rata kiri-kanan. Berikut ini adalah cara penerapannya: 

1. Menggunakan cara inline 

Ini adalah kode html dan css untuk membuat teks rata kanan (text-align: right) dengan cara inline. 

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Mengatur Alignment Tulisan</title>
</head>
 
<body>
    <p style="text-align: right">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
</body>
 
</html> 



2. Menggunakan cara internal 

Ini adalah kode html dan css untuk membuat teks rata tengah (text-align: center) dengan cara internal. 

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Mengatur Alignment Tulisan</title>
</head>
 
<style>
    .tengah {
        text-align: center
    }
</style>
 
<body>
    <p class="tengah">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
</body>
 
</html> 


3. Menggunakan cara eksternal 

Jika sobat ingin membuat secara eksternal, maka sobat harus membuat file html dan css secara terpisah. Ini adalah kode html dan css untuk membuat teks rata kiri-kanan (text-align: justify) dengan cara eksternal.

- kode di file html

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Mengatur Alignment Tulisan</title>
</head>
 
<link rel="stylesheet" href="css/style.css">
 
<body>
    <p class="kiri-kanan">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
</body>
 
</html>


- kode di file css

.kiri-kanan {
    text-align: justify;
}


Sekian pembahasan singkat cara mengatur alignment teks, jika sobat tertarik dengan artikel seputar multimedia silakan kunjungi postingan kami lainnya di blog ini. Terima kasih …  

Tags:

Posting Komentar

0 Komentar

Terima kasih telah mengunjungi website ini semoga bermanfaat untuk anda