Assalamu'alaikum wr wb.
hay sobat admin mau ngelanjutin tutor html.
ini lanjuannya:
7. JENIS FONT
Atribut face digunakan untuk mengaturjenis huruf yang diinginkan. Atribut face harus diisi dengan string
jenisfontseperti Arial, TimesNew Roman,Verdana, dan sebagainya.
Contoh:
Ketiklah dengan programnotepad dan simpan dengan nama file font_face.html
<html>
<head>
<title>Jenis Font</title>
</head>
<body>
<font size=5>
<font face ="Comic Sans MS">Comic Sans MS --- ABCdef123</font><P>
<font face ="Small Fonts">Small Fonts --- ABCdef123</font><P>
<font face ="Symbol">Symbol --- ABCdef123</font><P>
<font face ="WingDings">WingDings --- ABCdef123</font><P></font>
</body>
</html>
8. Manipulasi Teks
Untuk memberi efek, dekorasi atau pun manipulasiteks pada html diantaranya adalah menebalkan,tulisan
miring(italic),memberi coretan dan lain‐lainnya
Contoh :
Ketiklah dengan programnotepad dan simpan dengan nama file manipulasi_teks.html
<html>
<head>
<title>Manipulasi Teks</title>
</head>
<body>
<! PSYSICAL STYLE>
<B>Tebal</B> <br> <! untuk menebalkan teks >
<I>Miring</I> <br> <! untuk membuat teks terlihat miring>
<U>Garis Bawah</U> <br> <! untuk menggarisbawahi teks>
<S>Tercoret</S> <br> <! untuk memberikan coretan pada teks>
<STRIKE>Tercoret juga</STRIKE> <br> <! untuk memberikan coretan pada teks >
<BLINK> Berkedip</BLINK> <br> <! untuk membuat teks berkedip >
<TT>Seperti mesin tik</TT> <br> <! untuk menampilkan teks dalam font
typewriter >
<BIG>Tulisan Besar</BIG> <br> <! untuk membesarkan teks >
<SMALL>Tulisan Kecil</SMALL> <br> <! untuk mengecilkan teks >
Teks <SUB>subcript</SUB> <br> <! untuk membuat teks subscript>
Teks <SUP>supercript</SUP> <br><br> <! untuk membuat teks superscript>
</body>
</html>
9. WARNAFONT
Atribut color digunakan untuk mengatur warna font yang akan digunakan. Untuk memberi nilai pada
atribut color, ada dua cara. Cara pertama denganmenuliskan nama warna seperti Red, Blue, Yellow, White,
dll. Sedangkan cara kedua adalah dengan menggunakan nilai RGB (Red Green Blue) dari suatu warna,
misalnya FF0000 untuk Red, 00FF00 untuk green, dan 0000FF untuk Blue.
Contoh:
Ketiklah dengan programnotepad dan simpan dengan nama file warna_font.html
<html>
<head>
<title>Warna Font</title>
</head>
<body>
<font size=5>
<font color="red">Warna merah... </font> <p>
<font color= "#FF0000" size="5">Yang ini warna merah </font> <p>
<font color= "#00FF00" size="5">Kalo yang ini hijau </font> <p>
</font>
</body>
</html>
10. ORDEREDLIST
Ketiklah dengan programnotepad dan simpan dengan nama file ordered_list.html
<html>
<head>
<title>Link</title>
</head>
<body>
<! ORDERED LIST >
ORDERED LIST
<ol>
<li>baris pertama</li>
<li>baris kedua </li>
<li>baris ketiga </li>
<li>baris keempat </li>
</ol>
</body>
</html>
11. UNORDEREDLIST
Ketiklah dengan programnotepad dan simpan dengan nama file ordered_list.html
<html>
<head>
<title>Link</title>
</head>
<body>
<! UNORDERED LIST >
UNORDERED LIST<BR>
HTML menyediakan beberapa jenis daftar/list, yaitu :
<ul>
<li> Ordered List / numbered list (daftar berurut / daftar dengan nomor)</li>
<li> Unordered List / bulleted list (daftar tak berurut / daftar dengan
titik)mempunyai beberapa variasi,yaitu:
<ul>
<li type="disc"> UnOrdered List dengan tanda cakram (TYPE=disc) </li>
<li type="circle"> UnOrdered List dengan tanda bulatan (TYPE=circle) </li>
<li type="square"> UnOrdered List dengan tanda kotak (TYPE=square) </li>
</ul>
</li>
<li> Menu List (daftar menu) </li>
<li> Directory List </li>
<li> Definition List (Glossary / daftar istilah) </li>
</ul>
</body>
</html>
12. LINK
Perintah anchor <a> digunakan untuk membuat suatu link. Untuk membuat link ke dokumen html lain
digunakan perintah <a href = “nama_dokumen”>Teks pada browser</a>.
Anda juga bisa membuat link dalam sebuah dokumen html. Untuk itu perlu dipersiapkan nama anchor
lokasi tujuan dari link tersebut. Nama anchor dibuat dengan menambahkan atribut name pada tag <a>.
Misalnya <a name = “Bugs”</a>. Cara melakukan link ke bagian tersebut adalah <a href =
“#nama_anchor”>teks pada browser</a>.
Contoh:
Ketiklah dengan programnotepad dan simpan dengan nama file contohlink.html
<html>
<head>
<title>Link</title>
</head>
<body>
<a name="lengkap">Pemain-pemain AC Milan menurut abjad</a>
<blockquote>
<p>Abbiati ,<a href="#abbiati">info lengkap</a></p>
<p>Ayala</p>
<p>Ambrosini</p>
<p>Albertini</p>
<p>Boban</p>
<p><a href="linktujuan.html">kalo mau tahu lagi klik disini</a></p>
</blockquote>
<p><a name="abbiati">Abbiati</a></p>
<blockquote>
<p>
Kiper ketiga timnas Italia runner up Euro 2000<br>
Kiper utama U-21 juara Piala Eropa U-21 <br>
Kiper utama AC Milan juara Seri-A 1998-1999
</p>
</blockquote>
<p><a href="#lengkap">kembali ke atas</a></p>
</body>
</html>
Ketiklah dengan programnotepad dan simpan dengan nama file linktujuan.html
<html>
<head>
<title>Link tujuan</title>
</head>
<body>
<p align=”center”> Maaf, hanya sedikit</p>
<br>Chamot
<br>Dida
<br>Shevchenko
<br><a href=”contohlink.html”>kembali</a>
</body>
</html>
13. TABEL
Membuattabel
Simpan dengan nama file :tabel_1baris.html
<html>
<head>
<title>Tabel 1 Baris</title>
</head>
<body>
<table width="200" border="1" cellspacing="0" cellpadding="0"><!mengawali
membuat tabel>
<tr><! mengawali membuat baris>
<td>1 baris </td> <! Membuat 1 baris dan 1 kolom>
</tr> <! Mengakhiri baris pertama>
</table> <! Mengakhiri membuat tabel>
</body>
</html>
Keterangan : Lebar tabel=200 ; jumlah baris =1 ; jumlah kolom=1
Simpan dengan nama file :tabel_2baris.html
<html>
<head>
<title>Tabel 2 Baris</title>
</head>
<body>
<table width="200" border="1" cellspacing="0" cellpadding="0">
<tr>
<td> baris ke 1 </td>
</tr>
<tr>
<td>baris ke 2 </td>
</tr>
</table>
</body>
</html>
Keterangan : Lebar “width” tabel=200 ; jumlah baris =2 ; jumlah kolom=1
Sekian Itu Saja Dan nantikan part 3nya.
Wassalamu'alaikum wr wb.
hay sobat admin mau ngelanjutin tutor html.
ini lanjuannya:
7. JENIS FONT
Atribut face digunakan untuk mengaturjenis huruf yang diinginkan. Atribut face harus diisi dengan string
jenisfontseperti Arial, TimesNew Roman,Verdana, dan sebagainya.
Contoh:
Ketiklah dengan programnotepad dan simpan dengan nama file font_face.html
<html>
<head>
<title>Jenis Font</title>
</head>
<body>
<font size=5>
<font face ="Comic Sans MS">Comic Sans MS --- ABCdef123</font><P>
<font face ="Small Fonts">Small Fonts --- ABCdef123</font><P>
<font face ="Symbol">Symbol --- ABCdef123</font><P>
<font face ="WingDings">WingDings --- ABCdef123</font><P></font>
</body>
</html>
8. Manipulasi Teks
Untuk memberi efek, dekorasi atau pun manipulasiteks pada html diantaranya adalah menebalkan,tulisan
miring(italic),memberi coretan dan lain‐lainnya
Contoh :
Ketiklah dengan programnotepad dan simpan dengan nama file manipulasi_teks.html
<html>
<head>
<title>Manipulasi Teks</title>
</head>
<body>
<! PSYSICAL STYLE>
<B>Tebal</B> <br> <! untuk menebalkan teks >
<I>Miring</I> <br> <! untuk membuat teks terlihat miring>
<U>Garis Bawah</U> <br> <! untuk menggarisbawahi teks>
<S>Tercoret</S> <br> <! untuk memberikan coretan pada teks>
<STRIKE>Tercoret juga</STRIKE> <br> <! untuk memberikan coretan pada teks >
<BLINK> Berkedip</BLINK> <br> <! untuk membuat teks berkedip >
<TT>Seperti mesin tik</TT> <br> <! untuk menampilkan teks dalam font
typewriter >
<BIG>Tulisan Besar</BIG> <br> <! untuk membesarkan teks >
<SMALL>Tulisan Kecil</SMALL> <br> <! untuk mengecilkan teks >
Teks <SUB>subcript</SUB> <br> <! untuk membuat teks subscript>
Teks <SUP>supercript</SUP> <br><br> <! untuk membuat teks superscript>
</body>
</html>
9. WARNAFONT
Atribut color digunakan untuk mengatur warna font yang akan digunakan. Untuk memberi nilai pada
atribut color, ada dua cara. Cara pertama denganmenuliskan nama warna seperti Red, Blue, Yellow, White,
dll. Sedangkan cara kedua adalah dengan menggunakan nilai RGB (Red Green Blue) dari suatu warna,
misalnya FF0000 untuk Red, 00FF00 untuk green, dan 0000FF untuk Blue.
Contoh:
Ketiklah dengan programnotepad dan simpan dengan nama file warna_font.html
<html>
<head>
<title>Warna Font</title>
</head>
<body>
<font size=5>
<font color="red">Warna merah... </font> <p>
<font color= "#FF0000" size="5">Yang ini warna merah </font> <p>
<font color= "#00FF00" size="5">Kalo yang ini hijau </font> <p>
</font>
</body>
</html>
10. ORDEREDLIST
Ketiklah dengan programnotepad dan simpan dengan nama file ordered_list.html
<html>
<head>
<title>Link</title>
</head>
<body>
<! ORDERED LIST >
ORDERED LIST
<ol>
<li>baris pertama</li>
<li>baris kedua </li>
<li>baris ketiga </li>
<li>baris keempat </li>
</ol>
</body>
</html>
11. UNORDEREDLIST
Ketiklah dengan programnotepad dan simpan dengan nama file ordered_list.html
<html>
<head>
<title>Link</title>
</head>
<body>
<! UNORDERED LIST >
UNORDERED LIST<BR>
HTML menyediakan beberapa jenis daftar/list, yaitu :
<ul>
<li> Ordered List / numbered list (daftar berurut / daftar dengan nomor)</li>
<li> Unordered List / bulleted list (daftar tak berurut / daftar dengan
titik)mempunyai beberapa variasi,yaitu:
<ul>
<li type="disc"> UnOrdered List dengan tanda cakram (TYPE=disc) </li>
<li type="circle"> UnOrdered List dengan tanda bulatan (TYPE=circle) </li>
<li type="square"> UnOrdered List dengan tanda kotak (TYPE=square) </li>
</ul>
</li>
<li> Menu List (daftar menu) </li>
<li> Directory List </li>
<li> Definition List (Glossary / daftar istilah) </li>
</ul>
</body>
</html>
12. LINK
Perintah anchor <a> digunakan untuk membuat suatu link. Untuk membuat link ke dokumen html lain
digunakan perintah <a href = “nama_dokumen”>Teks pada browser</a>.
Anda juga bisa membuat link dalam sebuah dokumen html. Untuk itu perlu dipersiapkan nama anchor
lokasi tujuan dari link tersebut. Nama anchor dibuat dengan menambahkan atribut name pada tag <a>.
Misalnya <a name = “Bugs”</a>. Cara melakukan link ke bagian tersebut adalah <a href =
“#nama_anchor”>teks pada browser</a>.
Contoh:
Ketiklah dengan programnotepad dan simpan dengan nama file contohlink.html
<html>
<head>
<title>Link</title>
</head>
<body>
<a name="lengkap">Pemain-pemain AC Milan menurut abjad</a>
<blockquote>
<p>Abbiati ,<a href="#abbiati">info lengkap</a></p>
<p>Ayala</p>
<p>Ambrosini</p>
<p>Albertini</p>
<p>Boban</p>
<p><a href="linktujuan.html">kalo mau tahu lagi klik disini</a></p>
</blockquote>
<p><a name="abbiati">Abbiati</a></p>
<blockquote>
<p>
Kiper ketiga timnas Italia runner up Euro 2000<br>
Kiper utama U-21 juara Piala Eropa U-21 <br>
Kiper utama AC Milan juara Seri-A 1998-1999
</p>
</blockquote>
<p><a href="#lengkap">kembali ke atas</a></p>
</body>
</html>
Ketiklah dengan programnotepad dan simpan dengan nama file linktujuan.html
<html>
<head>
<title>Link tujuan</title>
</head>
<body>
<p align=”center”> Maaf, hanya sedikit</p>
<br>Chamot
<br>Dida
<br>Shevchenko
<br><a href=”contohlink.html”>kembali</a>
</body>
</html>
13. TABEL
Membuattabel
Simpan dengan nama file :tabel_1baris.html
<html>
<head>
<title>Tabel 1 Baris</title>
</head>
<body>
<table width="200" border="1" cellspacing="0" cellpadding="0"><!mengawali
membuat tabel>
<tr><! mengawali membuat baris>
<td>1 baris </td> <! Membuat 1 baris dan 1 kolom>
</tr> <! Mengakhiri baris pertama>
</table> <! Mengakhiri membuat tabel>
</body>
</html>
Keterangan : Lebar tabel=200 ; jumlah baris =1 ; jumlah kolom=1
Simpan dengan nama file :tabel_2baris.html
<html>
<head>
<title>Tabel 2 Baris</title>
</head>
<body>
<table width="200" border="1" cellspacing="0" cellpadding="0">
<tr>
<td> baris ke 1 </td>
</tr>
<tr>
<td>baris ke 2 </td>
</tr>
</table>
</body>
</html>
Keterangan : Lebar “width” tabel=200 ; jumlah baris =2 ; jumlah kolom=1
Sekian Itu Saja Dan nantikan part 3nya.
Wassalamu'alaikum wr wb.
Tutorial Html Part 2
4/
5
Oleh
Resma Adi Nugroho
