Pada kesempatan kali ini ane mau sharing mengenai Format Karakter HTML, ini merupakan lanjutan dari Format Teks HTML yang udah ane share pada waktu sebelumnya, bagi yang mau liat bisa klik disini aja. Cekidot :P
II. FORMAT KARAKTER
A. Logical Formating.
Adalah jenis format yang menggolongkan teks dari isi atau fungsi teks tersebut. Elemen
yang termasuk dalam kategori ini adalah :
- <EM>…</EM>
Digunakan untuk memberikan penekanan pada suatu kata atau kalimat. Elemen ini
biasanya dinyatakan dalam teks dengan bentuk miring.
Digunakan untuk memberikan penekanan pada suatu kata atau kalimat. Elemen ini
biasanya dinyatakan dalam teks dengan bentuk miring.
- <STRONG>…</STRONG>
Menyatakan penekanan yang kuat pada suatu kata atau kalimat, biasanya ditampilkan
dalam teks tebal.
Menyatakan penekanan yang kuat pada suatu kata atau kalimat, biasanya ditampilkan
dalam teks tebal.
- <CITE>…</CITE>
Digunakan untuk menampilkan citation dan menampilkan teks dalam bentuk miring.
Digunakan untuk menampilkan citation dan menampilkan teks dalam bentuk miring.
- <DFN>…</DFN>
Digunakan untuk menandai suatu istilah yang untuk pertama kalinya muncul dalam suatu
paragraf. Teks ditampilkan dalam bentuk miring.
Digunakan untuk menandai suatu istilah yang untuk pertama kalinya muncul dalam suatu
paragraf. Teks ditampilkan dalam bentuk miring.
- <CODE>…</CODE>
Digunakan untuk menampilkan suatu contoh kode program secara logikal dan biasanya
ditampilkan dalam font fixed pitch atau monospaced.
- <SAMP>…</SAMP>
Merupakan elemen sampel untuk menyatakan sekumpulan karakter-karakter literal,
biasanya ditampilkan dalam font monospaced.
Digunakan untuk menampilkan suatu contoh kode program secara logikal dan biasanya
ditampilkan dalam font fixed pitch atau monospaced.
- <SAMP>…</SAMP>
Merupakan elemen sampel untuk menyatakan sekumpulan karakter-karakter literal,
biasanya ditampilkan dalam font monospaced.
- <KBD>…</KBD>
Merupakan elemen keyboard yang menyatakan teks yang diketikan ditampilkan dalam
Merupakan elemen keyboard yang menyatakan teks yang diketikan ditampilkan dalam
font monospaced. Elemen ini sering digunakan dalam pembuatan buku manual/petunjuk.
- <VAR>…</VAR>
Untuk menyatakan suatu nama variabel, biasanya dinyatakan dengan bentuk miring.
Untuk menyatakan suatu nama variabel, biasanya dinyatakan dengan bentuk miring.
- <ABBR>…</ABBR>
Untuk menyatakan bentuk singkatan misalnya www, http, url dan lainnya.
Untuk menyatakan bentuk singkatan misalnya www, http, url dan lainnya.
- <ACRONYM>…</ACRONYM>
Untuk menyatakan bentuk sebuah akronim, misalnya radar, WAC.
Untuk menyatakan bentuk sebuah akronim, misalnya radar, WAC.
- <!……..>
Teks dlm elemen ini dinyatakan sebagai komentar dan tidak ditampilkan dalam browser.
Teks dlm elemen ini dinyatakan sebagai komentar dan tidak ditampilkan dalam browser.
Contoh :
<html>
<head>
<title>Paragraf</title>
</head>
<body bgcolor=lightgrey>
<h1>Pemakaian elemen teks</h1>
<pre>
<h2>
<DFN> untuk menandai suatu <DFN>Definisi</DFN>
<EM> untuk menandai suatu <EM>Penekanan</EM>
<CITE> untuk menandai suatu <CITE>Citation</CITE>
<CODE> untuk menandai suatu <CODE>Kode Program</CODE>
<html>
<head>
<title>Paragraf</title>
</head>
<body bgcolor=lightgrey>
<h1>Pemakaian elemen teks</h1>
<pre>
<h2>
<DFN> untuk menandai suatu <DFN>Definisi</DFN>
<EM> untuk menandai suatu <EM>Penekanan</EM>
<CITE> untuk menandai suatu <CITE>Citation</CITE>
<CODE> untuk menandai suatu <CODE>Kode Program</CODE>
<KBD> untuk menandai suatu <KBD>Keyboard</KBD>
<SAMP> untuk menandai suatu <SAMP>Contoh</SAMP>
<STRONG> untuk menandai suatu <STRONG>Penekanan</STRONG>
<VAR> untuk menandai suatu <VAR>Variabel</VAR>
<ABBR> untuk menandai suatu <ABBR>Singkatan : www</ABBR>
<ACRONYM> untuk menandai suatu
<ACRONYM>Akronim : Akabri</ACRONYM>
</h2>
</pre>
</body>
</html>
<SAMP> untuk menandai suatu <SAMP>Contoh</SAMP>
<STRONG> untuk menandai suatu <STRONG>Penekanan</STRONG>
<VAR> untuk menandai suatu <VAR>Variabel</VAR>
<ABBR> untuk menandai suatu <ABBR>Singkatan : www</ABBR>
<ACRONYM> untuk menandai suatu
<ACRONYM>Akronim : Akabri</ACRONYM>
</h2>
</pre>
</body>
</html>
B. PHYSICAL FORMATING
Adalah suatu jenis format yang diberikan pada teks tanpa tergantung jenis dari elemen
Adalah suatu jenis format yang diberikan pada teks tanpa tergantung jenis dari elemen
dasar teks tersebut. Elemen yang termasuk kategori ini adalah :
- <B>…</B> Untuk menebalkan teks
- <I>…</I> Untuk membuat teks tampil miring
- <U>…</U> Untuk membuat teks tampil bergaris-bawah
- <STRIKE>…</STRIKE> Untuk membuat efek coretan pada teks
- <BLINK>…</BLINK> Untuk membuat teks tampil berkedip, hanya ditampilkan pada
Netscape
- <S>…</S> Berfungsi sama dengan elemen <STRIKE>
- <TT>…</TT> Untuk menampilkan teks dalam font typewriter
- <BIG>…</BIG> Untuk memperbesar teks
- <SMALL>…</SMALL> Untuk memperkecil teks
- <SUB>…</SUB> Untuk membuat teks subscript
- <SUP>…</SUP> Untuk membuat teks superscript
Contoh :
<html>
<head>
<title>Paragraf</title>
</head>
<body bgcolor=lightgrey>
<h1>Pemakaian elemen teks</h1>
<html>
<head>
<title>Paragraf</title>
</head>
<body bgcolor=lightgrey>
<h1>Pemakaian elemen teks</h1>
<pre>
Tag <B> ...</B> untuk <B>Menebalkan</B> Teks
Tag <I> ...</I> untuk <I>Memiringkan</I> Teks
Tag <U> ...</U> untuk <U>Menggaris bawah</U> Teks
Tag <S> ...</S> untuk <S>Memberi coretan</S> Teks
Tag <STRIKE> ...</STRIKE> untuk <STRIKE>Memberi coretan</STRIKE>
Teks
Tag <TT> ...</TT> untuk <TT>Font Typewriter</TT> Teks
Tag <Big> ...</Big> untuk <B>Memperbesar</BIG> Teks
Tag <SMALL> ...</SMALL> untuk <SMALL>Mengecilkan</SMALL> Teks
Tag <SUB> ...</SUB> Untuk subscript teks H<SUB> 2</SUB>0
Tag <SUP> ...</SUP> Untuk superscript teks E=mc<SUP>2</SUP>
</pre>
</body>
</html>
Tag <B> ...</B> untuk <B>Menebalkan</B> Teks
Tag <I> ...</I> untuk <I>Memiringkan</I> Teks
Tag <U> ...</U> untuk <U>Menggaris bawah</U> Teks
Tag <S> ...</S> untuk <S>Memberi coretan</S> Teks
Tag <STRIKE> ...</STRIKE> untuk <STRIKE>Memberi coretan</STRIKE>
Teks
Tag <TT> ...</TT> untuk <TT>Font Typewriter</TT> Teks
Tag <Big> ...</Big> untuk <B>Memperbesar</BIG> Teks
Tag <SMALL> ...</SMALL> untuk <SMALL>Mengecilkan</SMALL> Teks
Tag <SUB> ...</SUB> Untuk subscript teks H<SUB> 2</SUB>0
Tag <SUP> ...</SUP> Untuk superscript teks E=mc<SUP>2</SUP>
</pre>
</body>
</html>
C. WARNA BACKGROUND
Atribut yang digunakan untuk memberi warna background adalah <BGCOLOR>.
Atribut ini akan memberi warna pada dasar body dokumen dan memberi warna tabel
Atribut yang digunakan untuk memberi warna background adalah <BGCOLOR>.
Atribut ini akan memberi warna pada dasar body dokumen dan memberi warna tabel
(elemen TABLE, TR, TH dan TD).
D. ALIGNMENT
Atribut align digunakan untuk meratakan tabel, gambar, objek, paragraf dan lainnya.
Pemakaian umum atribut ini : Align=left|center|right|justify
LEFT = teks rata dengan margin kiri
CENTER = teks rata tengah
RIGHT = teks rata dengan margin kanan
JUSTIFY = teks rata dengan margin kiri dan kanan
Atribut align digunakan untuk meratakan tabel, gambar, objek, paragraf dan lainnya.
Pemakaian umum atribut ini : Align=left|center|right|justify
LEFT = teks rata dengan margin kiri
CENTER = teks rata tengah
RIGHT = teks rata dengan margin kanan
JUSTIFY = teks rata dengan margin kiri dan kanan
Contoh potongan program :
<H1 align=”center”>Panduan HTML</H1>
<H1 align=”center”>Panduan HTML</H1>
E. FLOATING OBJEK
Gambar dan objek bisa ditampilkan sejajar dengan teks atau menggantung diantara teks
Gambar dan objek bisa ditampilkan sejajar dengan teks atau menggantung diantara teks
Contoh :
<html>
<head>
<title>Floating Objek</title>
</head>
<body bgcolor=lightgrey>
<h3>Floating Objek</h3>
<IMG align="right" src="logo.gif">
STMIK JAKARTA STI&K merupakan sekolah tinggi bidang ilmu komputer. Jenjang
pendidikan ada Diploma Tiga dan Sarjana, dengan Jurusan Sistem Informasi
dan Sistem Komputer. Lokasi kampus ada di jalan BRI Radio Dalam Kebayoran
Baru jakarta Selatan.
<HR>
<BR>
<IMG align="left" src="logo.gif">
STMIK JAKARTA STI&K merupakan sekolah tinggi bidang ilmu komputer. Jenjang
pendidikan ada Diploma Tiga dan Sarjana, dengan Jurusan Sistem Informasi
dan Sistem Komputer. Lokasi kampus ada di jalan BRI Radio Dalam Kebayoran
Baru jakarta Selatan.
</body>
</html>
<html>
<head>
<title>Floating Objek</title>
</head>
<body bgcolor=lightgrey>
<h3>Floating Objek</h3>
<IMG align="right" src="logo.gif">
STMIK JAKARTA STI&K merupakan sekolah tinggi bidang ilmu komputer. Jenjang
pendidikan ada Diploma Tiga dan Sarjana, dengan Jurusan Sistem Informasi
dan Sistem Komputer. Lokasi kampus ada di jalan BRI Radio Dalam Kebayoran
Baru jakarta Selatan.
<HR>
<BR>
<IMG align="left" src="logo.gif">
STMIK JAKARTA STI&K merupakan sekolah tinggi bidang ilmu komputer. Jenjang
pendidikan ada Diploma Tiga dan Sarjana, dengan Jurusan Sistem Informasi
dan Sistem Komputer. Lokasi kampus ada di jalan BRI Radio Dalam Kebayoran
Baru jakarta Selatan.
</body>
</html>
F. ATRIBUT FONT FACE
Atribut FACE digunakan untuk bermacam-macam font pada halaman web.
Atribut FACE digunakan untuk bermacam-macam font pada halaman web.
Contoh :
<html>
<head>
<title>Format Teks</title>
</head>
<body bgcolor=lightgrey>
<h1>Pemakaian Font</h1>
<h2> <font face="Times New Roman"> Font Times New Roman</font><br>
<font face="Arial black"> Font Arial Black</font><br>
<font face="Bazooka"> Font Bazooka</font><br>
<font face="Arial Narrow"> Font Arial Narrow</font><br>
</h2> </body> </html>
<html>
<head>
<title>Format Teks</title>
</head>
<body bgcolor=lightgrey>
<h1>Pemakaian Font</h1>
<h2> <font face="Times New Roman"> Font Times New Roman</font><br>
<font face="Arial black"> Font Arial Black</font><br>
<font face="Bazooka"> Font Bazooka</font><br>
<font face="Arial Narrow"> Font Arial Narrow</font><br>
</h2> </body> </html>
G. ATRIBUT FONT SIZE
Untuk menentukan ukuran suatu teks, elemen FONT menyediakan atribut dengan nilai
Untuk menentukan ukuran suatu teks, elemen FONT menyediakan atribut dengan nilai
1 sampai 7. Nilai 1 digunakan untuk membuat teks ukuran terkecil, standar teks pada
halaman web adalah nilai 3. Ukuran font teks dapat ditentukan secara relatif
berdasarkan ukuran default, yaitu dengan mendahului ukuran font dengan tanda + atau
-. Contoh : font ukuran 4 bisa ditulis Size=+1.
Contoh :
<html>
<head>
<title>Font Size</title>
</head>
<body bgcolor=lightgrey>
<h1>Ukuran Font</h1>
<h2> <font size=1> Size 1</font><br>
<font size=-1> Size 2</font><br>
<font size=3> Size 3</font><br>
<font size=4> Size 4</font><br>
<font size=+2> Size 5</font><br>
<font size=6> Size 6</font><br>
<font size=+4> Size 7</font><br>
</h2> </body> </html>
<html>
<head>
<title>Font Size</title>
</head>
<body bgcolor=lightgrey>
<h1>Ukuran Font</h1>
<h2> <font size=1> Size 1</font><br>
<font size=-1> Size 2</font><br>
<font size=3> Size 3</font><br>
<font size=4> Size 4</font><br>
<font size=+2> Size 5</font><br>
<font size=6> Size 6</font><br>
<font size=+4> Size 7</font><br>
</h2> </body> </html>
H.ATRIBUT FONT COLOR
Atribut ini digunakan untuk memberi warna pada font. Atribut Color menerima nilai
RGB suatu warna atau nama warna
Atribut ini digunakan untuk memberi warna pada font. Atribut Color menerima nilai
RGB suatu warna atau nama warna
Contoh :
<html>
<head>
<title>Font Size</title>
</head>
<body bgcolor=lightgrey>
<h1>Warna Font</h1>
<h2>
<font size=4 COLOR="#FF0000"> Teks berwarna merah</font><br>
<font size=5 COLOR="GREEN"> Teks Berwarna Hijau</font><br>
</h2>
</body>
</html>
<html>
<head>
<title>Font Size</title>
</head>
<body bgcolor=lightgrey>
<h1>Warna Font</h1>
<h2>
<font size=4 COLOR="#FF0000"> Teks berwarna merah</font><br>
<font size=5 COLOR="GREEN"> Teks Berwarna Hijau</font><br>
</h2>
</body>
</html>
I. TAG <BASEFONT>
Ukuran default bisa diubah dengan menggunakan tag <BASEFONT>. Misalnya ingin
ukuran standard untuk halaman web adalah 4, maka kode HTML yang digunakan adalah :
<BASEFONT SIZE=4>.
Jika tag akhir </BASEFONT> digunakan maka ukuran default baru hanya berlaku pada
<BASEFONT SIZE=4>.
Jika tag akhir </BASEFONT> digunakan maka ukuran default baru hanya berlaku pada
teks-teks yang berada di antara tag :
<BASEFONT SIZE=X>…</BASEFONT>
<BASEFONT SIZE=X>…</BASEFONT>
Contoh :
<html>
<head>
<title>BASEFONT</title>
</head>
<body bgcolor=lightgrey>
<h1>Tag BASEFONT</h1>
<h2>Teks ini sebelum tag BASEFONT digunakan</h2><br>
<BASEFONT SIZE=6 FACE="GEORGIA">
Teks ini setelah tag BASEFONT digunakan <br>
Ukuran relatif berubah sesuai BASEFONT
<FONT SIZE=-3>Size</FONT><BR>
</body>
</html>
<html>
<head>
<title>BASEFONT</title>
</head>
<body bgcolor=lightgrey>
<h1>Tag BASEFONT</h1>
<h2>Teks ini sebelum tag BASEFONT digunakan</h2><br>
<BASEFONT SIZE=6 FACE="GEORGIA">
Teks ini setelah tag BASEFONT digunakan <br>
Ukuran relatif berubah sesuai BASEFONT
<FONT SIZE=-3>Size</FONT><BR>
</body>
</html>
Demikianlah post mengenai Format Karakter HTML, semoga bermanfaat bagi kita semua. Aminnnnnnn...
0 komentar:
Post a Comment