Create-script - haii gaesss....kali ini saya akan sharing mengenai cara mengatur tampilan Format Text pada HTML....supaya tidak penasaran. mari kia simak pembahasan berikut ini...
A. PENDAHULUAN
- Pengertian
- Latar Belakang
- Maksud dan Tujuan
- Hasil yang diharapkan
B. ALAT DAN BAHAN
- Text Editor
- Web Browser
ada beberapa syntax yang digunakan untuk mengatur CSS. diantaranya adalah sebagai berikut :
- color : digunakan untuk mengatur warna text, dan di dalam value nya dapat diisikan dengan warna yang ingin diterapkan dalam text tersebut.
- text-align : digunakan untuk mengatur penempatan posisi align pada suatu text. value yang berada di dalam atribut ini adalah
- center : digunakan untuk rata tengah.
- right : digunakan untuk rata kanan.
- left : digunakan untuk rata kiri.
- justify : digunakan untuk rata kanan dan rata kiri.
- text-decoration : digunakan untuk mengatur dekorasi pada textnya. value nya adalah :
- none : digunakan untuk text supaya tidak memiliki dekorasi
- overline : digunakan untuk memnuat text memiliki garis pada bagian atas text.
- line-through : digunakan untuk membuat garis yang akan memberi efek mencoret/mencoreng pada text
- underline : digunakan untuk memberi efek garis bawah.
- text-transform : digunakan untuk mengatur huruf kapital pada text, value nya dapat berupa sebagai berikut :
- uppercase : digunakan untuk membuat text menjadi huruf kapital.
- lowercase : digunakan untuk membuat text menjadi huruf kecil.
- capitalize : digunakan untuk membuat huruf awal kalimat menjadi besar.
- text-indent : digunakan untuk mengatur jarak alinea alinea pada text. value yang digunakan biasanya px(pixel), namun anda bisa juga menggunakan yang lainnya.
- text-spacing : digunakan untuk mengatur jarak antar karakter pada sebuah text, value yang biasanya digunakan untuk atribut ini adalah pixel.
- word-spacing : digunakan untuk mengatur jarak antar kata pada text, value ini di isi berupa nilai pixel.
- line-height : digunakan untuk mengatur jarak antar baris pada text value yang di isi berupa nilai.
- text-shadow : digunakan untuk mengatur efek bayangan pada sebuah text.
- value pertama di-isikan untuk mengatur jarak kiri dan kanan
- value kedua digunakan untuk mengisi jarak atas dan bawah bayangan text.
- dan yang ketiga, valuenya berupa warna yang akan digunakan sebagai bayangan text.
- vertical-align : digunakan untuk mengatur align dalam bentuk vertikal pada text. value yang digunakan adalah :
- left : membuat text rata kiri.
- right : digunakan untuk mengatur text agar rata kanan
- center : digunakan untuk membuat text rata tengah.
Praktek :
- Cara Mengubah Warna text dengan CSS
<!DOCTYPE html>
<html>
<head>
<title>Mengatur Format text pada HTML dengan CSS</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<p class="berwarna">Mengatur format text pada HTML dengan CSS</p>
</body>
</html>
kemudian save, dan buat file CSS nya, ketikkan script berikut :
.berwarna{
color: red;
}
kemudian save file CSSnya satu folder dengan dimana kita menempatkan file HTML kita.
kemudian buka file HTMLnya, maka hasilnya akan menjadi seperti ini :
Penjelasan : text pada tag <p> diatas menjadi berwarna merah, karena kita mengatur di CSS menggunakan warna merah (red). namun anda dapat mencoba warna lain juga.
- Cara Menggunakan text-align pada CSS
<!DOCTYPE html>
<html>
<head>
<title>Mengatur Format text pada HTML dengan CSS</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<p class="kiri">Mengatur format text pada HTML dengan CSS</p>
<p class="kanan">Mengatur format text pada HTML dengan CSS</p>
<p class="tengah">Mengatur format text pada HTML dengan CSS</p>
<p class="justify">Belajar Pemrograman bersama create-script.</p>
</body>
</html>
kemudian ketikkan script CSS berikut ini :
.kiri{
text-align: left;
}
.kanan{
text-align: right;
}
.tengah{
text-align: center;
}
.justify{
text-align: justify;
}
kemudian save dengan nama style.css dan simpan bersama satu folder dengan file HTML kita tadi.
dan buka file HTMLnya, maka hasilnya akan menjadi seperti ini :
- pada text pertama, penempatan text akan berada pada bagian kiri, karena value yang kita isikan adalah left(kiri), anda juga dapat menyesuaikan seperti apa yang anda inginkan. namun saat anda mengaturnya, anda harus memasukkannya dengan bahasa inggris.
- pada text kedua, penempatan text akan berada pada bagian kanan, karena value yang kita isikan adalah right(kanan), anda juga dapat mengaturnya, namun dengan bahasa inggris, anda juga dapat menyetting nya sesuai dengan apa yang anda inginkan.
- yang ketiga adalah center saat anda menggunakan value ini pada text, maka text akan otomatis mengambil posisi paling tengah pada suatu webpage.
- yang terakhir adalah justify. fungsi justify adalah membuat posiisi rata kiri pada webpage.
- Cara Mengatur format text dengan CSS
<!DOCTYPE html>
<html>
<head>
<title>Mengatur Format text pada HTML dengan CSS</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<p class="pertama">Paragraph Pertama pada HTML dengan CSS</p>
<p class="kedua">Paragraph Kedua pada HTML dengan CSS</p>
<p class="ketiga">Paragraph Ketiga pada HTML dengan CSS</p>
<p class="keempat">Paragraph Keempat pada HTML dengan CSS</p>
</body>
</html>
kemudian save, selanjutnya ketikkan script CSS berikut ini :
.pertama{
color: blue;
text-decoration: underline;
}
.kedua{
text-align: right;
text-transform: capitalize;
text-decoration: overline;
}
.ketiga{
text-align: center;
text-transform: lowercase;
text-decoration: line-through;
word-spacing: 10px;
}
.keempat{
text-transform: uppercase;
text-indent: 30px;
line-height: 30px;
letter-spacing: 5px;
}
kemudian save dan buka file HTML tadi di browser anda, maka hasilnya akan menjadi seperti ini :
Penjelasan :
- yang pertama akan menampilkan text berwarna biru dengan garis bawah, karena pada atribut color kita isikan value blue, dan pada atribut text-decoration kita isikan value underline. underline tersebut digunakan untuk membuat garis bawah pada text.
- yang kedua text-align digunakan untuk mengatur penempatan text, diatas berisi value right yang berarti kanan, maka tulisan akan berada pada bagian kanan website. text-transform: capitalize; digunakan untuk membuat huruf kapital pada awal kata, text-decoratin: overline; digunakan untuk memberi garis pada bagian atas text.
- text ketiga berisi atribut dan value text-align: center; value tersebut digunakan untuk mengatur text supaya berada pada posisi rata tengah. text-transform: lowercase; digunakan untuk membuat text menjadi huruf kecil. text-decoration: line-through; digunakan untuk memberi garis pada tengah text. word-spacing: 10px; digunakan untuk memberi jarak antar text, untuk value nya terserah, namun saya menggunakan 10px.
- text keempat, text-transform: uppercase; digunakan untuk menjadikan text sebagai huruf besar. text-indent digunakan untuk mengatur jarak alinea alinea pada text. line-height digunakan untuk mengatur jarak antar baris pada text value yang di isi berupa nilai. letter-spacing saya simpulkan sebagai pemberi jarak antara satu huruf dengan huruf lainnya
D. HASIL YANG DIDAPATKAN
- Dapat mengatur Format Text pada HTML
E. KESIMPULAN
- ada beberapa syntax yang digunakan untuk mengatur CSS. yaitu sudah saya jelaskan diatas
F. REFERENSI
- Malas Ngoding
Wassalammualaikum Wr.Wb.