Pemrograman Web Dasar (Lat 6-10) - abasID

Sabtu, 08 Desember 2018

Pemrograman Web Dasar (Lat 6-10)



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





Latihan7B

Pada latihan ini saya akan membahas tentang font atau jenis tulisan yang bisa digunakan dalam isi halaman website

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 Condensed
Hasilnya :
Bodoni MT Condensed
29. font-family: Bradley Hand ITC
Hasilnya :
Bradley Hand ITC
30. font-family: Brush Script S
Hasilnya :
Brush Script S
31. font-family: Adobe Arabic
Hasilnya :
Adobe Arabic
32. font-family: Adobe Caslon Pro
Hasilnya :
Adobe Caslon Pro
33. font-family: Adobe Fan Heiti S B
Hasilnya :
Adobe Fan Heiti S B
34. font-family: Adobe Song S L
Hasilnya :
Adobe Song S L
35. font-family: Arial Rounded MT Bold
Hasilnya :
Arial Rounded MT Bold
36. font-family: Bauhaus 93
Hasilnya :
Bauhaus 93
37. font-family: Broadway
Hasilnya :
Broadway
38. font-family: Cooper Black
Hasilnya :
Cooper Black
39. font-family: Chiller Regular
Hasilnya :
Chiller Regular
40. font-family: Consolas
Hasilnya :
Consolas
41. font-family: Gabriola
Hasilnya :
Gabriola
42. font-family: Goudy Stout
Hasilnya :
Goudy Stout
43. font-family: Gill Sans MT
Hasilnya :
Gill Sans MT
44. font-family: Harlow Solid Italic
Hasilnya :
Harlow Solid Italic
45. font-family: Jokerman
Hasilnya :
Jokerman
46. font-family: Lucida Sans
Hasilnya :
Lucida Sans
47. font-family: Magneto
Hasilnya :
Magneto
48. font-family: Mistral
Hasilnya :
Mistral
49. font-family: Verdana
Hasilnya :
Verdana
50. font-family: Trajan Pro
Hasilnya :
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:



Latihan9A

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>&nbsp; &nbsp; <!-- 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)
Comments


EmoticonEmoticon