Source Code: Materi Latihan Praktikum Web Pertemuan 2

webBerikut adalah source code latihan-latihan praktikum matakuliah pemrograman berbasis web. Pada pertemuan 2 ini ada 6 latihan dasar-dasar HTML. Source code selengkapnya silahkan lihat di bawah ini. Penjelasan tentang kode program telah disampaikan saat perkuliahan 🙂

    • Latihan 1, merupakan latihan awal untuk pengenalan HTML. Silahkan disimpan dengan nama file latihan1.html
      <HTML>
      <HEaD>
      	<tiTLe>latihan 1</TitLE>
      </hEAd>
      
      <BodY>
      Saya sedang belajar dasar-dasar HTML
      </bODy>
      </htmL>
      
    • Latihan 2, dasar penggunaan tag P untuk paragraf. Simpan dengan nama file latihan2.html
      <HTML>
      <HEAD>
      	<TITLE>latihan 2</TITLE>
      </HEAD>
      
      <BODY BGCOLOR=blue>
      
      <P ALIGN="LEFT"><i>kiri</i></P>
      
      
      <P ALIGN=CENTER><b>tengah</b></P>
      
       
      
      <P ALIGN=RIGHT><u>kanan</u></P>
      
      </BODY>
      </HTML>
      
    • Latihan 3, tentang hyperlink yang menuju ke file atau dokumen lain. Latihan ini terdiri dari 2 buah file yaitu latihan3.html dengan kode sebagai berikut:
      <HTML>
      <HEAD>
      	<TITLE>latihan 3</TITLE>
      </HEAD>
      
      <BODY BGCOLOR=#eeeeee>
      	<a href="halamantarget.html">menuju halaman target</a>
      </BODY>
      </HTML>
      

      halaman kedua adalah halaman target (halamantarget.html) sebagai berikut:

      <HTML>
      <HEAD>
      	<TITLE>halaman target</TITLE>
      </HEAD>
      
      <BODY BGCOLOR=#ff8800>
      	Ini adalah halaman target
      	<BR>
      	<a href="latihan3.html">kembali</a>
      </BODY>
      </HTML>
      
    • Latihan 4, hyperlink dalam sebuah halaman, simpan dengan nama file latihan4.html
      <HTML>
      <HEAD>
      	<TITLE>latihan 4</TITLE>
      </HEAD>
      
      <BODY>
      	<a name=atas></a>
      	Bagian atas
      	<BR><BR><BR><BR><BR>
      	<BR><BR><BR><BR><BR>
      	<BR><BR><BR><BR><BR>
      	<BR><BR><BR><BR><BR>
      	<BR><BR><BR><BR><BR>
      	<BR><BR><BR><BR><BR>
      	<BR><BR><BR><BR><BR>
      	<BR><BR><BR><BR><BR>
      	<a href=#atas>ke atas</a>
      </BODY>
      </HTML>
      

  • Latihan 5, menerapkan heading, font dan pre format (latihan5.html)
    <HTML>
    <HEAD>
    	<TITLE>latihan 5</TITLE>
    </HEAD>
    
    <BODY>
    Contoh Judul
    
    <H1>Judul TAG H1</H1>
    
    
    <H2>Judul TAG H2</H2>
    
    
    <H3>Judul TAG H3</H3>
    
    
    <H4>Judul TAG H4</H4>
    
    
    <H5>Judul TAG H5</H5>
    
    
    <H6>Judul TAG H6</H6>
    
    
    
    <hr width="50%" align="left">
    
    <FONT FACE=arial size=4 color=#009900>tulisan ini hurufnya ARIAL ukuran 4</font>
    <BR>
    <FONT FACE=verdana size=2 color=#ff00ff>Ini huruf <font color=red><b>VERDANA</b></font> ukurannya 2</font>
    
    
    
    Contoh Praformat
    
    Overa Van Java
    
    
    <Pre>
    	Parto .......... 1
    	Sule ........... 2
    	Andre .......... 3
    	Azis ........... 4
    	Nunung ......... 5
    </prE>
    
    
    </BODY>
    </HTML>
    
  • Latihan 6, menampilkan gambar dan pengaturan propertinya> Pada contoh ini gambar yang digunakan bernama file stmikplk.jpg, jika menggunakan file gambar yang lain silahkan letakkan gambar pada folder kerja dan ganti nama file yang ada pada kode program bagian SRC sesuai nama file gambar yang digunakan. Properti ALT juga perlu diperhatikan… Simpan dengan nama latihan6.html
    <HTML>
    <HEaD>
    	<tiTLe>latihan 6</TitLE>
    </hEAd>
    
    <BodY>
    <IMG src="stmikplk.jpg" border=1 width=120 height=120 vspace=5 hspace=10 align=left alt="Logo STMIK">
    STMIK Palangkaraya, awalnya bernama AMIK Palangkaraya. Dulu beralamat di Jalan Kinibalu No. 120, kini pindah ke Jalan G. Obos No 114, gedung perkuliahannya ada 3 lantai dan halaman yang lebih luas dibanding kampus sebelumnya.
    </bODy>
    </htmL>
    

Untuk file-file latihan berikutnya akan diposting setelah disampaikan pada perkuliahan 🙂

Related Posts

About admin 179 Articles
AmazingLight.info Owner

Be the first to comment

Leave a Reply

Alamat email Anda tidak akan dipublikasikan.


*