Latihan6A
Dalam latihan ini kita akan membahas tentang pengaturan font pada html. Disini saya menggunakan font:
- Tahoma, Geneva, sans-serif
- Verdana, Geneva, sans-serif
- MS Sans Serif
- Lucida Console, Monaco, monospace
- Courier New, Courier, monospace
Oke langsung saja ketikan baris kode dibawah ini
<!DOCTYPE html>
<html>
<head>
<title>PENGATURAN FONT</title>
</head>
<body bgcolor="#007E49">
<font face="Tahoma, Geneva, sans-serif" color="#f20000">
<h1 align="center">VISI - MISI</h1>
</font>
<font face="Verdana, Geneva, sans-serif" color="#fff">
<h1 align="center">STMIK</h1>
</font>
<font face="MS Sans Serif" color="#fff"><marquee>
<h1 align="center">ICHSAN GORONTALO</h1>
</marquee></font>
<hr>
<font face="Tahoma, Geneva, sans-serif" color="#e6e6fa">
<h2>VISI</h2>
</font>
<font face="Lucida Console, Monaco, monospace" size="5">
"Terwujudnya Perguruan Tinggi Berkualitas, Berkarakter dan Berdaya Saing Nasional 2030 di Bidang Sistem Informasi, Manajemen Informatika dan Komputerisasi Akuntansi".
</font>
<font face="Tahoma, Geneva, sans-serif" color="#e6e6fa">
<h2>MISI</h2>
</font>
<font face="Courier New, Courier, monospace" size="5">
1. Melaksanakan pendidikan dan pengajaran sebagai
bentuk transfer ilmu berbasis pengetahuan, dan teknologi informasi
2. Melaksanakan kegiatan penelitian berkualitas
dan bermanfaat bagi peningkatan disiplin ilmu sistem
informasi, manajemen informatika dan komputerisasi akuntansi
3. Melaksanakan kegiatan pengabdian masyarakat
sebagai terwujud Tridharma perguruan tinggi dalam
bidan sistem informasi, manajemen informatika dan
komputerisasi akuntansi
</font>
<hr>
</body>
</html>
Simpan filenya, dan hasilnya akan seperti pada gambar dibawah ini:
Latihan6B
Pada latihan ini hampir sama dengan latihan sebelumnya (Latihan6) hanya saja disini saya menambahakan beberapa paragraph visi misi dan hanya menggunakan 2 style font yaitu Tahoma dan Verdana. Langsung saja ketikan baris kode dibawah ini.
<!DOCTYPE html>
<html>
<head>
<title>PENGATURAN FONT</title>
</head>
<body bgcolor="yellow">
<font face="Verdana, Geneva, sans-serif" color="#000"><h1 align="center">VISI</h1></font>
<br>
<font face="Tahoma, Geneva, sans-serif" color="#f20000"><h2>S1 - SISTEM INFORMASI</h2></font>
<font face="Tahoma, Geneva, sans-serif" size="5"><p>Terciptanya lulusan yang Profesional dibidang Sistem Informasi pada tahun 2024</p></font>
<font face="Tahoma, Geneva, sans-serif" color="#012b74"><h2>S1 - KOMPUTERISASI AKUNTANSI</h2></font>
<font face="Tahoma, Geneva, sans-serif" size="5"><p>Menjadikan lulusan yang profesional dalam bidang Komputerisasi Akuntansi pada tahun 2026</p></font>
<font face="Tahoma, Geneva, sans-serif" color="#25a032"><h2>D3 - MANAJEMEN INFORMATIKA</h2></font>
<font face="Tahoma, Geneva, sans-serif" size="5"><p>Terwujudnya Lulusan Yang Berjiwa Wirausaha Dalam Bidang Rekayasa Perangkat Lunak Di Tahun 2025</p></font>
<hr>
<font face="Verdana, Geneva, sans-serif" color="#000"><h1 align="center">MISI</h1></font>
<br>
<font face="Tahoma, Geneva, sans-serif" color="#f20000"><h2>S1 - SISTEM INFORMASI</h2></font>
<font face="Tahoma, Geneva, sans-serif" size="5">
<p>
1. Melaksanakan Pendidikan dan Pengajaran
yang berkualitas, berkarakter dan berdaya saing.
</p>
<p>
2. Melakukan Penelitian yang relevan dengan bidang ilmu
sistem informasi dan perkembangan teknologi saat ini.
</p>
<p>
3. Melakukan Pengabdian masyarakat yang relevan
dengan bidang ilmu sistem informasi
</p>
<p>
4. Membangun Kerjasama denga Mitra kerja baik dengan
instansi pemerintah maupun swasta.
</p>
</font>
<font face="Tahoma, Geneva, sans-serif" color="012b74"><h2>S1 - KOMPUTERISASI AKUNTANSI</h2></font>
<font face="Tahoma, Geneva, sans-serif" size="5">
<p>
1. Melaksanakan pendidikan dan pengajaran yang
berkualitas, berkarakter dan berdaya saing pada
bidang komputerisasi akuntansi
</p>
<p>
2. Menyelenggarakan kegiatan penelitian komputer
terapan yang memiliki kontribusi bermanfaat pada bidang
Akuntasi
</p>
<p>
3. Berperan aktif dalam kegiatan pengabdian kepada
masyarakat dibidang Komputerasasi Akuntansi
</p>
<p>
4. Membangun kerja sama dengan mitra kerja baik instansi
pemerintah maupun swasta yang unggul dibidang pengajaran,
penelitian dan pengabdian khususnya bidang komputerisasi Akuntansi
</p>
</font>
<font face="Tahoma, Geneva, sans-serif" color="#0b6623"><h2>D3 - MANAJEMEN INFORMATIKA</h2></font>
<font face="Tahoma, Geneva, sans-serif" size="5">
<p>
1. Menyelenggarakan pendidikan profesional dalam bidang
rekayasa perangkat lunak.
</p>
<p>
2. Mengembangkan penelitian di bidang rekayasa perangkat
lunak dalam rangka menunjang pengabdian kepada masyarakat
</p>
<p>
3. Melaksanakan kemitraan dunia usaha dalam bidang
rekayasa perangkat lunak
</p>
</font>
</body>
</html>
Dan hasilnya akan seperti pada gambar dibawah ini.
Latihan7A
Pada latihan ini saya akan membahas tentang subscript dan superscript pada HTML. Oke langsung saja ketikan baris kode html dibawah ini:
<html>
<head>
<title>CONTOH SUPERSCRIPT dan SUBSCRIPT</title>
</head>
<body>
<h4>10 Rumus Kimia</h4>
1. Rumus Kimia Asam Sulfat adalah
<sub>H<sub>2</sub>SO<sub>4</sub></sub>
<p>2. Rumus Kimia Molekul Unsur Poliatomik
<sub> O<sub>3,</sub>S<sub>8,</sub>P<sub>4</sub></sub>
<p>3. Rumus Kimia Senyawa Biner nonlogam
<sub> CO<sub>2,</sub> H<sub>2</sub>O</sub>
<p>4. Rumus Kimia Molekul Senyawa Organik (Asam Asetat)
<sub>CH<sub>3,</sub>COOH</sub>
<p>5. Rumus Kimia Molekul Senyawa Organik metana (alkana)
<sub>CH<sub>4,</sub></sub>
<p>6. Rumus Kimia Molekul Senyawa Organik etanol (alkolhol)
<sub>C<sub>2</sub>H<sub>5</sub>OH</sub>
<P>7. Rumus Kimia senyawa anhidrat
<sub>H<sub>2</sub>O</sub>
<p>8. Rumus Kimia Senyawa Kompleks
<sub>Na<sub>2</sub>[MnCI<sub>4</sub>]</sub>
<p>9. Rumus Kimia Molekul Unsur Monoatomik
<sub>F<sub>e,</sub>C<sub>u,</sub>H<sub>e,</sub>N<sub>e,</sub>H<sub>g</sub></sub>
<p>10. Rumus Kimia senyawa ION
<sub>O<sub>3,</sub>S<sub>8,</sub>P<sub>4</sub></sub>
<h4>10 Rumus Matematika</h4>
<p>1. Luas Kolam
<sup>150M<sup>2</sup></sup>
<p>2. Barisan Geometri
<sup>Un = a.r <sup>n-1</sup></sup>
<p>3. Luas Lingkaran
<sup>3.14 x r<sup>2</sup></sup>
<p>4. Volume Bangun Ruang (Tabung)
<sup>3.14r<sup>2</sup> x t</sup>
<p>5. Persegi Panjang
<sup>P x L</sup>
<p>6. Keliling Persegi
<sup>S x S = S<sup>2</sup></sup>
<p>7. Logaritma
<sup><sup>a</sup>log x<sup>n</sup> = n . <sup>a</sup>log x</sup>
<p>8. Keliling Lingkaran
<sup>3.14 x 2 x r</sup>
<p>9. Volume Tabung
<sup>3.14 x r<sup>2</sup></sup>
<p>10. Persamaan Kuadrat
<sup>ax<sup>2</sup>+ bx + c</sup>
</body>
</html>
Simpan filenya, dan hasilnya akan seperti pada gambar dibawah ini
<html>
<head>
<title>CONTOH SUPERSCRIPT dan SUBSCRIPT</title>
</head>
<body>
<h4>10 Rumus Kimia</h4>
1. Rumus Kimia Asam Sulfat adalah
<sub>H<sub>2</sub>SO<sub>4</sub></sub>
<p>2. Rumus Kimia Molekul Unsur Poliatomik
<sub> O<sub>3,</sub>S<sub>8,</sub>P<sub>4</sub></sub>
<p>3. Rumus Kimia Senyawa Biner nonlogam
<sub> CO<sub>2,</sub> H<sub>2</sub>O</sub>
<p>4. Rumus Kimia Molekul Senyawa Organik (Asam Asetat)
<sub>CH<sub>3,</sub>COOH</sub>
<p>5. Rumus Kimia Molekul Senyawa Organik metana (alkana)
<sub>CH<sub>4,</sub></sub>
<p>6. Rumus Kimia Molekul Senyawa Organik etanol (alkolhol)
<sub>C<sub>2</sub>H<sub>5</sub>OH</sub>
<P>7. Rumus Kimia senyawa anhidrat
<sub>H<sub>2</sub>O</sub>
<p>8. Rumus Kimia Senyawa Kompleks
<sub>Na<sub>2</sub>[MnCI<sub>4</sub>]</sub>
<p>9. Rumus Kimia Molekul Unsur Monoatomik
<sub>F<sub>e,</sub>C<sub>u,</sub>H<sub>e,</sub>N<sub>e,</sub>H<sub>g</sub></sub>
<p>10. Rumus Kimia senyawa ION
<sub>O<sub>3,</sub>S<sub>8,</sub>P<sub>4</sub></sub>
<h4>10 Rumus Matematika</h4>
<p>1. Luas Kolam
<sup>150M<sup>2</sup></sup>
<p>2. Barisan Geometri
<sup>Un = a.r <sup>n-1</sup></sup>
<p>3. Luas Lingkaran
<sup>3.14 x r<sup>2</sup></sup>
<p>4. Volume Bangun Ruang (Tabung)
<sup>3.14r<sup>2</sup> x t</sup>
<p>5. Persegi Panjang
<sup>P x L</sup>
<p>6. Keliling Persegi
<sup>S x S = S<sup>2</sup></sup>
<p>7. Logaritma
<sup><sup>a</sup>log x<sup>n</sup> = n . <sup>a</sup>log x</sup>
<p>8. Keliling Lingkaran
<sup>3.14 x 2 x r</sup>
<p>9. Volume Tabung
<sup>3.14 x r<sup>2</sup></sup>
<p>10. Persamaan Kuadrat
<sup>ax<sup>2</sup>+ bx + c</sup>
</body>
</html>
Simpan filenya, dan hasilnya akan seperti pada gambar dibawah ini
Latihan7B
Pada latihan ini saya akan membahas tentang font atau jenis tulisan yang bisa digunakan dalam isi halaman website
1.
Hasilnya :
Hasilnya :
Hasilnya :
Hasilnya :
Hasilnya :
Hasilnya :
Hasilnya :
Hasilnya :
Hasilnya :
Hasilnya :
Hasilnya :
Hasilnya :
Hasilnya :
Hasilnya :
Hasilnya :
Hasilnya :
Hasilnya :
Hasilnya :
Hasilnya :
Hasilnya :
Hasilnya :
Hasilnya :
Hasilnya :
Hasilnya :
Hasilnya :
Hasilnya :
Hasilnya :
Hasilnya :
Hasilnya :
Hasilnya :
Hasilnya :
Hasilnya :
Hasilnya :
Hasilnya :
Hasilnya :
Hasilnya :
Hasilnya :
Hasilnya :
Hasilnya :
Hasilnya :
Hasilnya :
Hasilnya :
Hasilnya :
Hasilnya :
Hasilnya :
Hasilnya :
Hasilnya :
Hasilnya :
Hasilnya :
Hasilnya :
1.
font-family: Courier, monospace;Hasilnya :
Courier, monospace;
2. font-family: "Courier New", Courier, monospace;Hasilnya :
"Courier New", Courier, monospace;
3. font-family: "Comic Sans MS", cursive;Hasilnya :
"Comic Sans MS", cursive;
4. font-family: "Bookman Old Style", serif;Hasilnya :
"Bookman Old Style", serif;
5. font-family: 'Andale Mono', 'Monotype.com', monospace;Hasilnya :
'Andale Mono', 'Monotype.com', monospace;
6. font-family: "Arial Helvetica", sans-serif;Hasilnya :
Arial, Helvetica, sans-serif;
7. font-family: "Arial Black", Gadget, sans-serif;Hasilnya :
Courier, monospace;
8. font-family: fixedsys, monospace;Hasilnya :
fixedsys, monospace;
9. font-family: Georgia, serif;Hasilnya :
Georgia, serif;
10. font-family: Garamond, serif;Hasilnya :
Garamond, serif;
11. font-family: Impact, Charcoal, sans-serif;Hasilnya :
Impact, Charcoal, sans-serif;
12. font-family: Lucida Sans Unicode, Lucida Grande, sans-serif;Hasilnya :
"Lucida Sans Unicode", "Lucida Grande", sans-serif;
13. font-family: Lucida Console, Monaco, monospace;Hasilnya :
"Lucida Console", Monaco, monospace;
14. font-family: MS Gothic, monospace;Hasilnya :
"MS Gothic", monospace;
15. font-family: MS Sans Serif, Geneva, sans-serif;Hasilnya :
"MS Sans Serif", Geneva, sans-serif;
16. font-family: MS Serif, New York, sans-serif;Hasilnya :
"MS Serif", "New York", sans-serif;
17. font-family: Webdings, sans-serif;Hasilnya :
Webdings, sans-serif;
18. font-family: Wingdings, Zapf Dingbats, sans-serif;Hasilnya :
Wingdings, "Zapf Dingbats", sans-serif;
19. font-family: Verdana, Geneva, sans-serif;Hasilnya :
Verdana, Geneva, sans-serif;
20. font-family: Trebuchet MS, Helvetica, sans-serif;Hasilnya :
"Trebuchet MS", Helvetica, sans-serif;
21. font-family: Times New Roman, Times, serif;Hasilnya :
"Times New Roman", Times, serif;
22. font-family: Techno, Impact, sans-serif;Hasilnya :
Techno, Impact, sans-serif;
23. font-family: Tahoma, Geneva, sans-serif;Hasilnya :
Tahoma, Geneva, sans-serif;
24. font-family: System, sans-serif;Hasilnya :
System, sans-serif;
25. font-family: Symbol, sans-serif;Hasilnya :
Symbol, sans-serif;
26. font-family: Palatino Linotype, Book Antiqua, Palatino, serif;Hasilnya :
"Palatino Linotype", "Book Antiqua", Palatino, serif;
27. font-family: Roboto, sans-serif;Hasilnya :
Roboto, sans-serif;
28. font-family: Bodoni MT CondensedHasilnya :
Bodoni MT Condensed
29. font-family: Bradley Hand ITCHasilnya :
Bradley Hand ITC
30. font-family: Brush Script SHasilnya :
Brush Script S
31. font-family: Adobe ArabicHasilnya :
Adobe Arabic
32. font-family: Adobe Caslon ProHasilnya :
Adobe Caslon Pro
33. font-family: Adobe Fan Heiti S BHasilnya :
Adobe Fan Heiti S B
34. font-family: Adobe Song S LHasilnya :
Adobe Song S L
35. font-family: Arial Rounded MT BoldHasilnya :
Arial Rounded MT Bold
36. font-family: Bauhaus 93Hasilnya :
Bauhaus 93
37. font-family: BroadwayHasilnya :
Broadway
38. font-family: Cooper BlackHasilnya :
Cooper Black
39. font-family: Chiller RegularHasilnya :
Chiller Regular
40. font-family: ConsolasHasilnya :
Consolas
41. font-family: GabriolaHasilnya :
Gabriola
42. font-family: Goudy StoutHasilnya :
Goudy Stout
43. font-family: Gill Sans MTHasilnya :
Gill Sans MT
44. font-family: Harlow Solid ItalicHasilnya :
Harlow Solid Italic
45. font-family: JokermanHasilnya :
Jokerman
46. font-family: Lucida SansHasilnya :
Lucida Sans
47. font-family: MagnetoHasilnya :
Magneto
48. font-family: MistralHasilnya :
Mistral
49. font-family: VerdanaHasilnya :
Verdana
50. font-family: Trajan ProHasilnya :
Trajan Pro
Latihan8A
Dalam latihan ini kita akan membahas Bullets dan Numbering yang sering digunakan pada halaman web.
Ketikan baris kode html dibawah ini.
<HTML>
<HEAD>
<TITLE>BULLET AND NUMBERING</TITLE>
</HEAD>
<BODY>
<h3>Contoh daftar item tak berurut</h3>
<ul>
<li>item pertama</li>
<li>item kedua</li>
<li>item ketiga</li>
</ul>
<h3>Contoh daftar item berurut</h3>
<ol>
<li>item pertama</li>
<li>item kedua</li>
<li>item ketiga</li>
</ol>
</BODY>
</HTML>
Dan hasilnya akan seperti pada gambar dibawah ini:
Latihan8B
Numbering lanjutan.
Ketikan baris kode html dibawah ini.
<HTML>
<HEAD>
<TITLE>BULLET AND NUMBERING</TITLE>
</HEAD>
<BODY>
<h3>ITEM BERTINGKAT</h3>
<ol type="1">
<li>Item pertama</li>
<li>Item kedua</li>
<ol type="A">
<li>Sub item pertama</li>
<li>Sub item kedua</li>
<ol type="I">
<li>Sub sub item pertama</li>
<li>Sub sub item kedua</li>
<li>Sub sub item ketiga</li>
</ol>
<li>sub item ketiga</li>
</ol>
<li>item ketiga</li>
</ol>
</BODY>
</HTML>
Dan hasilnya akan seperti pada gambar dibawah ini:
Latihan8C
Bullets lanjutan.
Ketikan baris kode html dibawah ini.
<HTML>
<HEAD>
<TITLE>BULLET AND NUMBERING</TITLE>
</HEAD>
<BODY>
<h3>ITEM BERTINGKAT</h3>
<ul type="SQUARE">
<li>Item pertama</li>
<li>Item kedua</li>
<ul type="DISC">
<li>Sub item pertama</li>
<li>Sub item kedua</li>
<ul type="CIRCLE">
<li>Sub sub item pertama</li>
<li>Sub sub item kedua</li>
<li>Sub sub item ketiga</li>
</ul>
<li>sub item ketiga</li>
</ul>
<li>Item ketiga</li>
</ul>
</BODY>
</HTML>
Dan hasilnya akan seperti pada gambar dibawah ini
Latihan8D(Finally)
Dalam latihan ini merupakan final dari 8a – 8c.
Ketikan baris kode html dibawah ini.
<HTML>
<HEAD>
<TITLE>BULLET AND NUMBERING</TITLE>
</HEAD>
<BODY bgcolor="black">
<ul><li><font color="white"><h3>Nama-Nama Fakultas:</h3></font></li></ul>
<ol type="I">
<h3><b><font face="Times New Roman, " color="#00ffff"><li>FAKULTAS TEKNIK</li></font></b></h3>
<ol type="A">
<b><font face="Arial" color="red"><i><li>Teknik Informatika</li></i></font></b>
<ol type="1">
<b><font face="Arial" color="white"><li>Ilmu Komputer</li></font></b>
<b><font face="Arial" color="white"><li>Sistem Informasi</li></font></b>
<b><font face="Arial" color="white"><li>Manajemen Informatika</li></font></b>
</ol>
<b><font face="Arial" color="red"><i><li>Teknik Arsitektur</li></i></font></b>
<ol type="CIRCLE">
<b><font face="Arial" color="white"><li>Teknik Bangunan</li></font></b>
<b><font face="Arial" color="white"><li>Teknik Menggambar</li></font></b>
</ol>
<b><font face="Arial" color="red"><i><li>Teknik Sipil</li></i></font></b>
<ol type="a">
<b><font face="Arial" color="white"><li>Ilmu Sipil</li></font></b>
<b><font face="Arial" color="white"><li>Mekanik Tanah dan Pondasi</li></font></b>
<b><font face="Arial" color="white"><li>Teknik Struktural</li></font></b>
</ol>
</ol>
<hr color="#add8e6">
<h3><b><font face="Times New Roman, " color="#ff69b4"><li>FAKULTAS EKONOMI</li></font></b></h3>
<ol type="a">
<b><font face="Arial" color="red"><i><li>Akuntansi</li></i></font></b>
<ol type="1">
<b><font face="Arial" color="white"><li>Akuntansi Biaya</li></font></b>
<b><font face="Arial" color="white"><li>Akuntansi Keuangan</li></font></b>
<ol type="CIRCLE">
<b><font face="Arial" color="white"><li>Diploma</li></font></b>
<ol type="i">
<b><font face="Arial" color="#ff69b4"><li>Diploma Satu (D1)</li></font></b>
<b><font face="Arial" color="#ff69b4"><li>Diploma Dua (D3)</li></font></b>
</ol>
<b><font face="Arial" color="white"><li>Strata Satu (S1)</li></font></b>
<b><font face="Arial" color="white"><li>Strata Dua (S2)</li></font></b>
</ol>
</ol>
<b><font face="Arial" color="red"><i><li>Manajemen</li></i></font></b>
<b><font face="Arial" color="red"><i><li>Pemasaran</li></i></font></b>
<b><font face="Arial" color="red"><i><li>Perbankan</li></i></font></b>
</ol>
<hr color="red">
<h2><b><font face="Times New Roman, " color="maqenta"><li>FAKULTAS HUKUM</li></font></b></h2>
<ol type="DISC">
<h3><b><font face="Arial" color="red"><i><li>Ilmu Hukum</li></i></font></b></h3>
<ol type="a">
<b><font face="Arial" color="white" size="3"><li>Hukum Pidana</li></font></b>
<b><font face="Arial" color="white" size="3"><li>Hukum Perdata</li></font></b>
<b><font face="Arial" color="white" size="3"><li>Hukum Islam</li></font></b>
</ol>
</ol>
</ol>
</BODY>
</HTML>
Dan hasilnya akan seperti gambar dibawah ini:
Dalam latihan ini kita akan membahas mengenai link dalam suatu halaman website. Oke langsung saja ketikan barsi kode html dibawah ini kemudian simpan dengan nama hal1.html
<html>
<head>
<title>HALAMAN 1</title>
</head>
<body>
<p align="right"><a href="HAL1.HTML">Halaman Pertama</a> | <a href="HAL2.HTML">Halaman Kedua</a> | <a href="HAL3.HTML">Halaman Ketiga</a></p>
<a name="atas"><H1 align="center">Selamat Datang di Proyek Pertama</H1></a>
<p>Judul diatas merupakan header level kedua yang diletakan ditengah. Dalam proyek
pertama ini saya akan berlatih membuat halaman web yang sangat-sangat sederhan.
Halaman web ini akan saya isi dengan beberapa format penulisan halaman web yang telah saya pelajari.
Dengan demikian saya bisa memperlancar dan mempermantap keterampilan saya membuat halaman web. Amin...!</p>
<h3>Ini header level Ketiga</h3>
<p>
Masih Ingat, kan cara membuat <b>Paragraf?</b> Suatu paragraf bisa tidak diberi <i>tag penutup</i>.
yang penting anda ingat, bila akan membuat paragraf baru, tulis <i>tag pembuka</i> paragraf. Sedangkan untuk membuat baris,
ada tag tersendiri.
Dalam paragraf ini anda akan mengulangi pelajaran membuat baris, seperti dibawah ini:</p>
<p>Klik <font size="4"><a href="HAL2.HTML" target="_blank">disini</a></font> untuk melihat daftar definisi.</p>
<p>Ini paragraf baru. Perlu anda ketahui bahwa halaman web yang tampak dalam browser
merupakan beberapa baris kalimat, bila dibuat dalam kode HTML, bisa saja ditulis dalam satu baris saja.
Yang penting untuk setiap baris baru harus diawali dengan tag <br> </p>
Ngerti Maksudnya?
<p><a href="#atas">Kembali Keatas</a> | <a href="HAL2.HTML">Selanjutnya</a></p>
</body>
</html>
Simpan filenya dengan nama hal1.html
Dan hasilnya akan seperti gambar dibawah ini:
Latihan9B
Latihan ini adalah lanjutan dari link diatas, oke langsung saja ketikan barsi kode html dibawah ini kemudian simpan dengan nama hal2.html
<html>
<head>
<title>HALAMAN 2</title>
</head>
<body bgcolor="yellow">
<p align="right"><a href="HAL1.HTML">Halaman Pertama</a> | <a href="HAL2.HTML">Halaman Kedua</a> | <a href="HAL3.HTML">Halaman Ketiga</a></p>
<font face="Comic Sans, sans-serif"><H1 align="center">Mengutak-atik Font</H1></font>
<font face="Comic Sans, sans-serif" size="2" color="blue"><p>Dalam halaman ini, kita akan menggunakan warna background kuning denga font Comic Sans ukuran 2 Warna
biru sebagai font default. Masih ingat, kan cara pengaturannya?</p></font>
<h3><i>Daftar Definisi</i></h3>
<b>Internet</b>
<p>Singkatan dari <i>INterconnection network</i> atau hubungan antar jaringan. Internet ialah jaringan
komputer global dan merupakan jaringan komputer yang terbesar didunia karena mampu
menghubungkan seluruh komputer yang ada di dunia.</p>
<b>HTTP</b>
<p>Singkatan dari <i>Hypertext Transfer Protocol</i> Adalah salah satu protokol bahasa yang digunakan
untuk berkomnukasi antar server komputer dalam internet. Protocol bahasa yang lain dalam internet
lainnya misalnya: Telnet, News, Gropher, FTP.</p>
<b>URL</b>
<p>Singkatan dari <i>Uniform Resource Locator</i>adalah standar pengalamatan sebuah file di internet yang dirancang khusus
untuk digunakan dengan browser WWW seperti Netscape, INternet Explorer, Opera dan Lain-lain</p>
<p>Bila anda ingin mencari terjemahan kata-kata inggris ke indonesia atan indonesia ke inggris,
pergilah ke situs <a href="google.translate.com" target="_blank" >Kamus Web</a></p>
<P><a href="HAL1.HTML">Kembali Keatas</a> | <a href="HAL3.HTML">Selanjutnya</a></P>
</body>
</html>
simpan filenya dengan nama hal2.html
Dan hasilnya akan seperti gambar dibawah ini:
Latihan9C
Latihan ini merupakan halaman akhir dari latihan 9, langsung saja ketikan baris kode html dibawah ini kemudian simpan dengan nama hal3.html
<html>
<head>
<title>HALAMAN 3</title>
</head>
<body>
<p align="right"><a href="HAL1.HTML">Halaman Pertama</a> | <a href="HAL2.HTML">Halaman Kedua</a> | <a href="HAL3.HTML">Halaman Ketiga</a></p>
<font face="Arial, sans-serif"><H1 align="center">Inilah Biodataku ...</H1></font>
<font face="Arial, sans-serif" size="3">
<ol type="1">
<li>Nama : Dandri Abas</li>
<li>Tempat/tanggal lahir : Kab. Gorontalo / 1 Mei 1999</li>
<li>Nama Orang Tua</li>
<ol type="a">
<li>Ayah : Aripin Abas</li>
<li>Ibu : Irawati K. Ali</li>
</ol>
<li>Pendidikan</li>
<ol type="i">
<li>Sekolah Dasar : SD NEGERI 2 TENILO</li>
<li>Sekolah Menengah Pertama : SMP NEGERI 2 LIMBOTO</li>
<li>Sekolah Menengah Atas : SMK NEGERI 1 LIMBOTO</li>
<li>Perguruan Tinggi : STMIK ICHSAN GORONTALO</li>
</ol>
<li>Pekerjaan : Belum Bekerja</li>
<li>Alamat</li>
<ol type="square">
<li>Rumah : Jln. Megawati Kel. Tenilo Kec. Limboto Kab. Gorontalo Link. Tumbuh</li>
<li>Kantor : Tidak ada</li>
</ol>
<li>Hobi : Browsing</li>
</ol>
</font>
<P><a href="HAL1.HTML">Kembali Halaman Pertama</P>
</body>
</html>
Simpan filenya dengan nama hal3.html
Dan hasilnya akan seperti gambar dibawah ini:
Latihan10A
Latihan ini merupakan latihan akhir dari materi link html. Dalam laihan ini kita akan membuat 3 halam page sederhana. langsung saja ikuti tutorial dibawah ini.
ketikan baris kode dibawah ini, kemudian simpan dengan nama home.html
<!DOCTYPE html>
<html>
<head>
<title>STMIK ICHSAN GORONTALO</title>
<style type="text/css">
body{
font-family: Arial, sans-serif;
background: #02aab0;
}
.galery{
margin: auto;
padding: 12px;
float: center;
display: inline-block;
}
</style>
</head>
<body>
<font color="#fff"><h1 align="center">STMIK ICHSAN GORONTALO</h1></font>
<center>
<div class="galery">
<a href="SI.HTML">
<img src="icon/coding.png" alt="SI" width="200" height="182">
</a>
<font color="#fff"><strong><p>SISTEM INFORMASI</p></strong></font>
</div>
<div class="galery">
<a href="KA.HTML">
<img src="icon/calculator.png" alt="KA" width="200" height="182">
</a>
<font color="#fff"><strong><p>KOMPUTERISASI AKUNTANSI</p></strong></font>
</div>
<div class="galery" >
<a href="HOME.HTML">
<img src="icon/bars-chart.png" alt="MI" width="200" height="182">
</a>
<font color="#fff"><strong><p>MANAGEMENT INFORMATIKA</p></strong></font>
</div>
<br><br> <!-- Tag untuk membuat baris baru -->
<a href="HOME.HTML" style="text-decoration: none;"><!-- a href tag untuk membuat sebuah link -->
<img src="icon/back.png" alt="back" title="Back" width="32" height="32"><!-- img tag untuk memberi gambar -->
</a> <!-- Memberi spasi -->
<a target="" href="SI.HTML">
<img src="icon/next.png" alt="next" title="Next" width="32" height="32">
</a>
</center>
</body>
</html>
Simpan filenya dengan nama home.html
Dan hasilnya akan seperti gambar dibawah ini:
Latihan10B
Latihan ini adalah latihan dari latihan di atas, langsung saja ketikan kode html dibawah ini kemudian simpan filenya dengan nama si.html untuk nama filenya bisa diganti asalkan sama dengan nama yang ada pada saat pemberian link. misal <a href=”nama_file.html”></a>.<!DOCTYPE html>
<html>
<head>
<title>SISTEM INFORMASI</title>
<style type="text/css">
body{
font-family: Arial, sans-serif;
background-color: #2193b0;
}
</style>
</head>
<body>
<font color="#fff"><h2 align="center">SISTEM INFORMASI</h2></font>
<hr color="#fff">
<ol type="I">
<font color="#fff" face="Lucida Console, Monaco, monospace", cursive"><h3><li>VISI</li></h3></font>
<font color="yellow" face="Courier, monospace" size="4"><p>
Terciptanya lulusan yang Profesional dibidang Sistem Informasi pada tahun 2024
</p></font>
<font color="#fff" face="Lucida Console, Monaco, monospace", cursive"><h3><li>MISI</li></h3></font>
<font color="#fff" face="Courier, monospace" size="4"><p>
<ol type="1">
<li>Melaksanakan Pendidikan dan Pengajaran yang berkualitas, berkarakter dan berdaya saing.</li>
<li>Melakukan Penelitian yang relevan dengan bidang ilmu sistem informasi dan perkembangan teknologi saat ini.</li>
<li>Melakukan Pengabdian masyarakat yang relevan dengan bidang ilmu sistem informasi</li>
<li>Membangun Kerjasama denga Mitra kerja baik dengan instansi pemerintah maupun swasta.</li>
</ol>
</p></font>
</ol>
<br>
<p align="left">
<a href="HOME.HTML">
<img src="icon/back.png" alt="back" title="Back" width="32" height="32">
</a>
</p>
<p align="right">
<a target="" href="KA.HTML">
<img src="icon/next.png" alt="next" title="Next" width="32" height="32">
</a>
</p>
</body>
</html>
Simpan filenya dengan nama si.html
Dan hasilnya akan seperti gambar dibawah ini:
Latihan10C
Ketikan baris kode html dibawah ini, kemudian simpan dengan nama ka.html<!DOCTYPE html>
<html>
<head>
<title>KOMPUTERISASI AKUNTANSI</title>
<style type="text/css">
body{
font-family: Arial, sans-serif;
background: #11998e;
}
</style>
</head>
<body>
<font color="#fff"><h2 align="center">KOMPUTERISASI AKUNTANSI</h2></font>
<hr color="#FDC830">
<ol type="I">
<font color="#fff" face="Gabriola", cursive"><h3><li>VISI</li></h3></font>
<font color="white" face="Courier, monospace" size="5"><p>
Menjadikan lulusan yang profesional dalam bidang Komputerisasi Akuntansi pada tahun 2026
</p></font>
<font color="#fff" face="Gabriola", cursive"><h3><li>MISI</li></h3></font>
<font color="#fff" face="Gabriola" size="5"><p>
<ol type="1">
<li>Melaksanakan pendidikan dan pengajaran yang
berkualitas, berkarakter dan berdaya saing pada
bidang komputerisasi akuntansi</li>
<li>Menyelenggarakan kegiatan penelitian komputer
terapan yang memiliki kontribusi bermanfaat pada bidang
Akuntasi</li>
<li>Berperan aktif dalam kegiatan pengabdian kepada
masyarakat dibidang Komputerasasi Akuntansi</li>
<li>Membangun kerja sama dengan mitra kerja baik instansi
pemerintah maupun swasta yang unggul dibidang pengajaran,
penelitian dan pengabdian khususnya bidang komputerisasi Akuntansi</li>
</ol>
</p></font>
</ol>
<br>
<p align="left">
<a href="SI.HTML">
<img src="icon/back.png" alt="back" title="Back" width="32" height="32">
</a>
</p>
<p align="right">
<a target="" href="MI.HTML">
<img src="icon/next.png" alt="next" title="Next" width="32" height="32">
</a>
</p>
</body>
</html>
Simpan filenya dengan nama ka.html
Dan hasilnya akan seperti gambar dibawah ini:
Latihan10D
Ini adalah latihan terakhir dari halaman page sederhana, ketikan kode html dibawah ini kemudian simpan dengan nama mi.html<!DOCTYPE html>
<html>
<head>
<title>MANAJEMEN INFORMATIKA</title>
<style type="text/css">
body{
font-family: Arial, sans-serif;
background: #FDC830;
}
</style>
</head>
<body>
<font color="#fff"><h2 align="center">MANAJEMEN INFORMATIKA</h2></font>
<hr color="#FFF">
<ol type="I">
<font color="#fff" face="Roboto, sans-serif;", cursive"><h3><li>VISI</li></h3></font>
<font color="#000" face="Bradley Hand ITC" size="4"><p>
Terwujudnya Lulusan Yang Berjiwa Wirausaha Dalam Bidang Rekayasa Perangkat Lunak Di Tahun 2025
</p></font>
<font color="#fff" face="Roboto, sans-serif;", cursive"><h3><li>MISI</li></h3></font>
<font color="#000" face="Trajan Pro" size="4"><p>
<ol type="1">
<li>Menyelenggarakan pendidikan profesional dalam bidang
rekayasa perangkat lunak.</li>
<li>Mengembangkan penelitian di bidang rekayasa perangkat
lunak dalam rangka menunjang pengabdian kepada masyarakat</li>
<li>Melaksanakan kemitraan dunia usaha dalam bidang
rekayasa perangkat lunak</li>
</ol>
</p></font>
</ol>
<br>
<p align="left">
<a href="KA.HTML">
<img src="icon/back.png" alt="back" title="Back" width="32" height="32">
</a>
</p>
<p align="right">
<a target="" href="HOME.HTML">
<img src="icon/next.png" alt="next" title="Home" width="32" height="32">
</a>
</p>
</body>
</html>
Simpan file diatas dengan nama mi.html
Dan hasilnya akan seperti gambar dibawah ini:
Oke untuk seluruf file latihan 10 anda bisa cek di link bawah ini:
Download File Latihan 10
Untuk latihan selanjutnya silahkan klik link dibawah ini
Pemrograman Web (Lat 11-14)
