Tuesday, 5 April 2016

Contoh Script CSS Text Indent

Script :

<HTML>
<HEAD>
<TITLE>Format Text </TITLE>
<STYLE ="text/css">
p {text-indent: 2cm }
</STYLE>
</HEAD>
<BODY>
<p>
Dengan text indent.
Form adalah salah satu bentuk halaman web yang digunakan
untuk menerima masukan dari pengguna,
untuk selanjutnya masukan dari pengguna tersebut diolah
menggunakan bahasa pemrograman web,
baik secara server side scripting(misalkan PHP, JSP)
ataupun client-side scripting (javascript).
</p>
Tanpa text indent.
Form adalah salah satu bentuk halaman web yang digunakan
untuk menerima masukan dari pengguna,untuk selanjutnya
masukan dari pengguna tersebut diolah menggunakan bahasa
pemrograman web,baik secara server side scripting(misalkan
PHP, JSP) ataupun client-side
</BODY>
</HTML>

 Hasil :


 

Admin

Contoh Script CSS Text Alignment

Script :

<!DOCTYPE html>
<html>
<head>
<style>
h1 {text-align:center;}
p.tanggal {text-align:right;}
p.utama {text-align:justify;}
</style>
</head>
<body>
<h1>Contoh CSS text-align</h1>
<p class="tanggal">07 Desember 2013</p>
<p class="utama">Properti text-align digunakan untuk
mengatur alignment horizontal teks.
Teks dapat ditulis rata kiri, rata kanan, rata kanan
kiri ataupun ditulis center. Ketika text-align diset
“justify", setiap baris memiliki lebar yang sama, dan
margin kiri dan kanan lurus (seperti di majalah dan surat
kabar).
Format penulisan CSS untuk text alignment.selector {textalign:nilai
text-align;}
Berikut adalah contoh dari penulisan style text-align
yang disisipkan di selector h1 dan paragraf.
h1 {text-align:center;}
p.tanggal {text-align:right;}
p.utama {text-align:justify;}
pada selector p.tanggal dan p.utama artinya CSS akan
diberikan ke paragraf dengan pemanggilan kelas “tanggal”
dan “utama”. Untuk lebih lengkapnya dapat dilihat pada
contoh berikut :</p>
<p><b>Catatan:</b> Baris ini adalah contoh penulisan tanpa
CSS</p>
</body>
</html>

 Hasil :

 

Admin

Contoh Script CSS Teks decoration

Script :

<HTML>
<HEAD>
<TITLE>Format Text </TITLE>
<STYLE ="text/css">
em {text-decoration : overline}
h2 {text-decoration: line-through}
h3 {text-decoration: underline}
a {text-decoration: none}
</STYLE>
</HEAD>
<BODY>
<em>Bentuk Overline</em>
<h2>Header 2, Bentuk Line-through</h2>
<h3>Header 3,Bentuk Underline</h3>
<p><a href="http://www.bem.akakom.ac.id">
Penggunaan Dalam Link,Nilai NONE</a></p>
</BODY>
</HTML>

 Hasil :

 

Admin

Contoh Script CSS Letter Spacing

Script :

<html>
<head>
<title>Letter-Spacing
</title>
<style ="text/css">
 p {letter-spacing: 0.5cm}
 h4 {letter-spacing: -2px}
</STYLE>
</HEAD>
<BODY>
<p>Pengaturan Spasi Pada Paragraph</p>
<h4> Header 4</h4>
</body>
</html>


Hasil : 
 

Admin

Contoh Script CSS Format Text

Script : 


<html>
<head>
<style>
body {color:red;}
h1 {color:#FF0000;}
h2 {color:#FF6D00;}
h3 {color:#FFF000;}
h4 {color:#38FF00;}
h5 {color:#00FFB8;}
h6 {color:#0028FF;}
p.ex {color:rgb(0,0,255);}
</style>
</head>
<body>
<h1>ini adalah heading 1</h1>
<h2>ini adalah heading 2</h2>
<h3>ini adalah heading 3</h3>
<h4>ini adalah heading 4</h4>
<h5>ini adalah heading 5</h5>
<h6>ini adalah heading 6</h6>
<p>ini adalah paragraph, ditulis dengan warna merah. Default text-color didefinisakan pada body selector.</p>
<p class="ex">ini adalah paragraph with class="ex". dan warna teks biru.</p>
</body>
</html>

 Hasil :

Admin

Thursday, 31 March 2016

Pengaturan border tabel


CSS dapat digunakan untuk memformat border atau garis tepi dari sebuah tabel. Format yang dapat dilakukan meliputi  jenis garis (dotted, solid, dan lainlain), warna border, ketebalan garis tepi dan sebagainya. Demikian pula warna dari sebuah sel, dapat diatur dengan CSS.


Script : 

 

 

 Hasil :


Admin

Cara Mengubah Huruf Kapital (Case) HTML dengan CSS







Sebagai bahan tutorial, berikut adalah contoh kode HTML dan CSS dalam penggunaan properti text-transform dan font-variant:
 
<!DOCTYPE html>
<html>
<head>
<title>Belajar text-transform dan font-variant</title>
<style type="text/css">
   .upper { text-transform: uppercase; }
   .lower { text-transform: lowercase; }
   .cap   { text-transform: capitalize; }
   .small { font-variant:   small-caps; }
</style>
</head>

<body>
   <h2>Belajar CSS: text-transform dan font-variant</h2>
   <p class="upper">KALIMAT dengan text-transform: UPPERCASE</p>
   <p class="lower">KALIMAT dengan text-transform: lowercase</p>
   <p class="cap">KALIMAT dengan text-transform: Capitalize</p>
   <p class="small">Kalimat dengan font-variant: small-caps</p>
</body>
</html>
 
 
Tutorial Belajar CSS - Contoh Cara Mengubah Tampilan Huruf Kapital (Case) Teks HTML

Mengubah tampilan huruf dengan text-transform dan font-variant lebih banyak digunakan untuk bagian-bagian penting dari web seperti judul artikel, navigasi, atau sidebar. Efek yang dihasilkan membuat tampilan akhir menjadi seragam, terlepas dari cara penulisan teks yang dipakai.

Sumber : Duniailkom.com

Admin

E-mail Newsletter

Sign up now to receive breaking news and to hear what's new with us.

Recent Articles

© 2014 Materi PW Semester 2. WP themonic converted by Bloggertheme9. Published By Gooyaabi Templates | Powered By Blogger
TOP