Cara mengatur posisi teks di html

Question

Dalam Tutorial Teks CSS kali ini, kita akan mempelajari Cara Mengatur Rata Teks HTML dengan CSS. Properti CSS yang akan kita bahas adalah: text-align.

Table of Contents Show

Mengatur Rata Teks dengan Property: text-align
Tutorial Cara Mengatur Rata Teks dengan CSS
Mengatur Teks Pada CSS
Mengubah Warna Teks Pada CSS
Mengatur Posisi Teks Pada CSS
Mengatur Jarak Antara Huruf Dengan CSS
Mengatur Jarak Spasi Antara Kata
Mengatur Teks Jarak Kiri Pada Kata Pertama
Mengatur Posisi Perataan Teks Pada CSS
Mengatur Dekorasi Teks Pada CSS
Mengatur Besar Kecil Huruf Pada CSS
Mengatur White Space Pada CSS
Mengatur Shadow Atau Bayangan Pada Teks
Apa itu text align pada HTML?
Bagaimana cara mengatur rata teks HTML dengan CSS?
Text align apa saja?
Apa itu center di HTML?

Mengatur Rata Teks dengan Property: text-align

Untuk mengatur rata text HTML dengan CSS, kita menggunakan property text-align. Property text-align memiliki 4 nilai yang bisa dipilih, yakni: left, right, center, atau justify. Sesuai dengan namanya, kita menggunakan text-align: left dan text-align: right untuk membuat rata teks kiri dan rata teks kanan. Untuk membuat text berada di tengah, kita mengunakan: text-align: center.

Perintah text-align: justify digunakan untuk membuat text rata kiri dan kanan. Namun efek justify ini perlu menjadi catatan. Membuat text rata kiri dan kanan sekaligus akan membuat web browser menambah jarak (spasi) antar kata, terutama untuk kata yang panjang. Hal ini bisa membuat tulisan akan susah dibaca, terutama jika diakses dari smartphone yang memiliki layar kecil. Efek justify lebih cocok jika digunakan untuk media cetak seperti buku atau majalah.

Tutorial Cara Mengatur Rata Teks dengan CSS

Dalam tutorial kali ini saya akan membuat teks HTML sederhana, yang terdiri dari 4 paragraf menggunakan tag <p>. Masing-masing paragraf ini memiliki kode CSS text-align yang ‘ditempelkan’ menggunakan class selector.

Berikut adalah contoh penggunaan property text-align:

<!DOCTYPE html>
<html>
<head>
<title>Belajar Rata Teks CSS</title>
<style type="text/css">
   .left    { text-align: left;}
   .right   { text-align: right;}
   .center  { text-align: center;}
   .justify { text-align: justify;}
</style>
</head>
<body>
   <h2>Belajar Rata Teks CSS: text-align</h2>
  
   <h3>Text Align: Left</h3>
   <p class="left">Lorem ipsum dolor sit amet, consectetur
   adipiscing elit. Nulla erat dolor, ullamcorper in ultricies
   eget,fermentum rhoncus leo. Curabitur eu mi vitae metus
   posuere laoreet. Eam facilis omittantur at, usu efficiantur
   neglegentur delicatissimi et, in per vero splendide
   persequeris.<p>
  
   <h3>Text Align: Right</h3>
   <p class="right">Lorem ipsum dolor sit amet, consectetur
   adipiscing elit. Nulla erat dolor, ullamcorper in ultricies
   eget,fermentum rhoncus leo. Curabitur eu mi vitae metus
   posuere laoreet. Eam facilis omittantur at, usu efficiantur
   neglegentur delicatissimi et, in per vero splendide
   persequeris.<p>
  
   <h3>Text Align: Center</h3>
   <p class="center">Lorem ipsum dolor sit amet, consectetur
   adipiscing elit. Nulla erat dolor, ullamcorper in ultricies
   eget,fermentum rhoncus leo. Curabitur eu mi vitae metus
   posuere laoreet. Eam facilis omittantur at, usu efficiantur
   neglegentur delicatissimi et, in per vero splendide
   persequeris.<p>
  
   <h3>Text Align: Justify</h3>
   <p class="justify">Lorem ipsum dolor sit amet, consectetur
   adipiscing elit. Nulla erat dolor, ullamcorper in ultricies
   eget,fermentum rhoncus leo. Curabitur eu mi vitae metus
   posuere laoreet. Eam facilis omittantur at, usu efficiantur
   neglegentur delicatissimi et, in per vero splendide
   persequeris.<p>
</body>
</html>

Dalam tutorial belajar CSS kali ini kita telah membahas Cara Mengatur Rata Teks HTML dengan CSS. Penggunaan fitur text-align ini bisa menjadi salah satu fitur untuk mempercantik hasil desain web.

eBook CSS Uncover Duniailkom

Jika anda ingin belajar cara mendesain web, CSS wajib dikuasai. Duniailkom telah menyusun eBook CSS Uncover yang membahas CSS dengan lebih detail dan lebih lengkap, mulai dari dasar hingga fitur terbaru CSS3 seperti animasi dan web responsive. Penjelasan lebih lanjut bisa ke: eBook CSS Uncover Duniailkom.

Masih dilingkup tutorial css dasar, kali ini yang akan kita bahas adalah bagaimana cara mengatur teks pada css, di css sendiri memikili beberapa properti untuk mengatur teks pada css agar menjadi sesuai yang keperluan kita. Bagian dari tutorial ini sangat penting, karna sebuah website adalah sekumpulan teks sebagai informasi untuk pengguna internet.

Mengatur Teks Pada CSS

Dasar mengatur teks pada css biasanya seperti posisi perataan teks, jarak spasi dan lain sebagainya, semua itu bisa dilakukan dengan css. Berikut ini properti-properti yang bisa digunakan untuk memanipulasi atau mengatur teks pada css agar menjadi sesuai dengan yang kita inginkan.

PropertiKeterangancolorProperti color digunakan untuk mengubah warna textdirectionProperti direction digunakan untuk menentukan posisi textletter-spacingProperti latter-spacing digunakan untuk menambah atau mengurangi ruang antara huruf yang berbentuk kataword-spacingProperti word-spacing digunakan untuk menambah atau mengurangi ruang antara kata-kata pada sebuah kalimattext-indentProperti text-indent digunakan untuk mengatur jarak bagian kiri kata pertama pada sebuah kalimattext-alignProperti text-align digunakan untuk mengatur posisi atau perataan texttext-decorationProperti text-decoration digunakan untuk membuat garis bawah, overline atau tanda coret pada tekstext-transformProperti text-transform digunakan untuk mengatur huruf besar atau kecilwhite-spaceProperti white-space digunakan untuk mengatur jarak enter sebuah kalimattext-shadowProperti text-shadow untuk membuat bayangan pada teks

Properti-properti diatas akan kita bahas satu-persatu, penulis berharap pembaca sambil mempraktekan tutorial ini langsung, agar tahu bagaimana sebuah teks dapat dimanipulasi dengan sintaks css.

Mengubah Warna Teks Pada CSS

Untuk dapat mengubah warna teks pada css yaitu dengan cara menggunakan properti color, pada tutorial sebelumnya telah disediakan metode menggunakan warna pada css. Berikut ini contoh kodenya.

<!DOCTYPE html>
<html>
    <head>
    <title>Mengatur Teks Pada CSS</title>
    <style type="text/css">
        p {
            color: red;
        }
    </style>
</head>
<body>
    <p>Mengubah warna text pada css</p>
</body>
</html>
Code language: HTML, XML (xml)

Kode diatas untuk mengubah warna teks menjadi warna merah yang diarahkan ke selector p, berikut ini tampilan dari hasil kode diatas.

Mengatur Posisi Teks Pada CSS

Untuk mengatur posisi teks pada css yaitu dengan menggunakan properti direction, dalam properti direction ini hanya memiliki dua nilai, yaitu ltr (left to right) dan rtl (right to left), yang dimaksud posisi properti direction ini adalah posisi teks apakah berada dikanan atau dikiri. Berikut ini contoh kodenya.

<style type="text/css">
    p {
        direction: rtl;
    }
 </style>
Code language: HTML, XML (xml)

Kode diatas hanya menggunakan nilai rtl, dimana teks akan berada dibagian kanan browser, secara default nilai direction meksipun tidak didefinisikan akan bernilai ltr.

Mengatur Jarak Antara Huruf Dengan CSS

Untuk dapat mengatur jarak antara huruf pada sebuah kata yaitu dengan cara menggunakan properti letter-spacing, kita meskipun secara bawaan huruf pada sebuah halaman html sudah sangat baik, hanya saja pada bagian desain kadang-kadang memiliki aturannya sendiri, berikut ini contoh kodenya.

<style type="text/css">
    p {
        letter-spacing: 10px;
    }
 </style>
Code language: HTML, XML (xml)

Dari kode diatas berikut ini hasilnya…

Mengatur Jarak Spasi Antara Kata

Untuk dapat mengatur jarak spasi antara kata yaitu dengan menggunakan properti word-spacing, kadang spasi antara kata pada dokumen html tidak sesuai dengan yang kita inginkan, kita dapat menggunakan properti word-spacing tanpa menggunakan tombol spasi berkali-kali. Berikut ini kodenya.

<style type="text/css">
    p {
        word-spacing: 10px;
    }
 </style>
Code language: HTML, XML (xml)

Dari kode diatas maka akan menghasilkan tampilan seperti dibawah ini…

Mengatur Teks Jarak Kiri Pada Kata Pertama

Teks indent pada perangkat lunak office sering kita gunakan, yaitu untuk mengatur jarak pada bagian kiri kalimat pertama. Jika di css yaitu dengan menggunakan properti text-indent, berikut ini contoh kodenya.

<style type="text/css">
    p {
        text-indent: 40px;
    }
 </style>
Code language: HTML, XML (xml)

Berikut ini tampilan dari kode diatas…

Mengatur Posisi Perataan Teks Pada CSS

Layaknya diperangkat lunak office, anda dapat mengatur perataan teks seperti rata tengah, rata kanan, rata kiri, dan sama rata, begitupun dalam html kita membutuhkan posisi perataan text pada dokumen html ini. Jika di css yaitu dengan menggunakan properti text-align. Berikut ini contohnya.

<!DOCTYPE html>
<html>
    <head>
    <title>Mengatur Teks Pada CSS</title>
    <style type="text/css">
        .rata-kiri {
            text-align: left;
        }
        .rata-kanan {
            text-align: right;
        }
        .rata-tengah {
            text-align: center;
        }
        .sama-rata {
            text-align: justify;
        }
    </style>
</head>
<body>
    <strong>Rata Kiri</strong>
    <p class="rata-kiri">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <strong>Rata Kanan</strong>
    <p class="rata-kanan">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <strong>Rata Tengah</strong>
    <p class="rata-tengah">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <strong>Sama Rata</strong>
    <p class="sama-rata">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</body>
</html>
Code language: HTML, XML (xml)

Berikut ini tampilan kode diatas…

Mengatur Dekorasi Teks Pada CSS

Untuk dapat mengatur dekorasi pada teks yaitu dengan menggunakan text-decoration, dekorasi pada teks maksudnya seperti menambahkan garis bawah, efek coret pada teks atau efek blink. Berikut ini contoh kodenya.

<!DOCTYPE html>
<html>
    <head>
    <title>Mengatur Teks Pada CSS</title>
    <style type="text/css">
        .garis-bawah {
            text-decoration: underline;
        }
        .coret {
            text-decoration: line-through;
        }
        .garis-atas {
            text-decoration: overline;
        }
       .blink {
            text-decoration: blink;
        }
    </style>
</head>
<body>
    <strong>Garis Bawah</strong>
    <p class="garis-bawah">Lorem ipsum dolor sit amet</p>
    <strong>Efek Coret</strong>
    <p class="coret">Lorem ipsum dolor sit amet</p>
    <strong>Garis Atas</strong>
    <p class="garis-atas">Lorem ipsum dolor sit amet</p>
    <strong>Efek Blink</strong>
    <p class="blink">Lorem ipsum dolor sit amet</p>
</body>
</html>
Code language: HTML, XML (xml)

Berikut ini contoh tampilan dari kode diatas…

Mengatur Besar Kecil Huruf Pada CSS

Untuk dapat mengatur besar kecilnya huruf di css yaitu dengan menggunakan properti text-transform, dimana text-transform ini memiliki beberapa nilai antara lain, uppercase, lowercase dan capitalize. Jika pada uppercase seluruh teks akan menjadi huruf besar, sebaliknya dengan lowercase seluruh teks akan menjadi kecil, namun pada capitalize huruf awal setiap kata akan menjadi huruf besar. Beribut ini contoh kodenya.

<!DOCTYPE html>
<html>
    <head>
    <title>Mengatur Teks Pada CSS</title>
    <style type="text/css">
        .uppercase {
            text-transform: uppercase;
        }
        .lowercase {
            text-transform: lowercase;
        }
        .capitalize {
            text-transform: capitalize;
        }
    </style>
</head>
<body>
    <strong>Uppercase</strong>
    <p class="uppercase">Lorem ipsum dolor sit amet</p>
    <strong>Lowercase</strong>
    <p class="lowercase">Lorem ipsum dolor sit amet</p>
    <strong>Capitalize</strong>
    <p class="capitalize">Lorem ipsum dolor sit amet</p>
</body>
</html>
Code language: HTML, XML (xml)

Dari kode diatas berikut ini tampilan pada browser…

Mengatur White Space Pada CSS

Untuk mengatur white space pada css yaitu dengan menggunakan properti white-space. Pada properti white-space memiliki beberapa nilai antara lain, pre, nowrap, dan normal. Meski secara default di browser sudah normal. Berikut ini contohnya.

<style type="text/css">
    p {
        white-space: pre;
    }
 </style>
Code language: HTML, XML (xml)

Dinilai pre bisa anda ganti dengan beberapa nilai yang tadi penulis sudah sebutkan.

Mengatur Shadow Atau Bayangan Pada Teks

Mengatur bayangan pada teks atau shadow bisa dengan menggunakan properti text-shadow yang memang sudah tersedia di dalam css, hanya tinggal menyesuaikannya saja agar sesuai dengan yang kita inginkan. Berikut ini contoh kodenya.

<style type="text/css">
    p {
        text-shadow: 1px 1px 9px black;
    }
 </style>
Code language: HTML, XML (xml)

Hasil dari kode diatas seperti dibawah ini…

Demikianlah tutorial untuk mengatur teks pada css, dari sekian banyak properti teks yang bisa digunakan semoga dengan tutorial ini dapat lebih mempermudah penggunaan masing-masing properti yang dibutuhkan untuk membangun website anda.

Apa itu text align pada HTML?

Atribut HTML align merupakan atribut yang digunakan untuk menata perataan teks. Atribut align biasanya digunakan pada HTML element pada tingkatan blok seperti DIV, P (paragraf), header dan lainnya.

Bagaimana cara mengatur rata teks HTML dengan CSS?

Pengaturan perataan teks pada CSS dapat menggunakan properti text-align. Nilai pada properti ini akan membuat teks disusun sesuai dengan nilai perataannya. text-align: left | right | center | justify | inherit; Properti dengan nilai left artinya teks akan diatur dengan rata kiri.

Text align apa saja?

Text Align Ada rata kiri, rata kanan, rata tengah, rata kiri dan kanan. Nah, kita juga bisa meratakan teks dengan properti CSS text-align .

Apa itu center di HTML?

Elemen HTML center merupakan tipe block level element, yang mana elemen tipe ini akan membagi halaman HTML menjadi bagian yang terpisah, atau menjadi blok.

kode html