Sabtu, 08 April 2017

Laporan Praktikum Pemograman Web1 Modul 2

Posted on April 08, 2017 by Radea Nurlaila | No comments
LAPORAN PRAKTIKUM
Pemograman WEB 1
Modul II
“HTML LANJUTAN”

Nama         : Radea Nurlaila
NIM           : 2015091083
Prodi          : SI 2015 C

LABORATORIUM KOMPUTER
FAKULTAS ILMU KOMPUTER
UNIVERSITAS KUNINGAN
2017
Jl. Cut NyakDien, No.36A CijohoKuninganTelp/Faks : 0232-974824
  


1. TUGAS




1. Jelaskan fungsi tag-tag HTML pada Praktikum5

Sintaks: 

<p> Pukul 15. <sup>30</sup><br>
20 <sup>0</sup> <sub> Celcius </sub></p>
<p> &nbsp; </p><br>
<pre> Don’t Join To NATO
No Action
Talk Only </pre>

<strike> Jangan Jadi Orang
yang Hanya Banyak Bicara
Tanpa Aksi/Bukti Nyata</strike><br>
<ol type=”1″><b>FKOM</b>
    <li>Teknik Informatika S1</li>
    <li>Sistem Informasi S1</li>
    <li>Teknik Informatika D3</li>
    <li>Manajemen Informatika D3</li>
</ol>
<ul type=”circle”><b>Matakuliah</b>
    <li>PTI</li>
    <li>Algoritma</li>
    <li>Kalkulus</li>
</ul>
<dl>
    <dt><i>Definisi 1</i></dt>
        <dd>Penjelasan Definisi 1</dd>
    <dt><i>Definisi Ke-n</i></dt>
        <dd>Penjelasan Definisi Ke-n</dd>
</dl>
Penjelasan untuk tag-tag yang terdapat diatas:

  •  <p> : digunakan untuk membuat sebuah paragraf 
  • <sup> : digunakan untuk memberikan efek superscript pada teks 
  •  <br> : digunakan untuk membuat baris baru (breakline)
  • <sub> : digunakan untuk memberikan efek subscript pada teks 
  • <pre> :digunakan untuk menampilkan hasil yang sama dengan apa yang diketikkan di layar 
  • <strike> : digunakan untuk memberikan garis tengah/mencoret teks 
  •  <ol> : digunakan untuk membuat daftar dengan format penomoran 
  • <li> : digunakan untuk membuat daftar dengan format simbo
  •   <ul> : digunakan untuk membuat daftar dengan format simbol 
  • <dl> : digunakan untuk mendefinisikan sebuah daftar definisi 
  • <dt> : digunakan untuk mendefinisikan istilah (item) dalam daftar definisi 
  • <i> : digunakan untuk memiringkan teks (italic) 
  • <dd> : digunakan untuk mendefinisikan deskripsi dari item dalam daftar definisi

  2. Buat design Web dengan skema :





Untuk membuat design web seperti diatas menggunakan Frameset, yang pertama harus kita punya adalah 6 file html . File-file tersebut ialah:
– frameset.html : digunakan untuk mengatur frameset
– header.html : digunakan untuk membuat header
– menukiri.html : digunakan untuk membuat menu kiri
– main.html : digunakan untuk menampilkan informasi
– menukanan.html : digunakan untuk membuat menu kanan
– footer.html : digunakan untuk membuat footer


a. frameset.html

<title> Radea Nurlaila's</title>
<frameset rows="31%,61%,8%" color="black" border="1">
        <frame name="header" src="header.html"/>
        <frameset cols="20%,60%,20%">
            <frame name="menu" src="menukiri.html"/>
            <frame name="main" src="main.html" />
            <frame name="menu" src="menukanan.html"/>
        </frameset>
        <frame name=”footer” src="footer.html"/>
</frameset>


b. header.html

<html>
<head>
<title> UNIKU </title>
</head>
<body>
<table border="0″ align="center" width="100%">
<tr>
    <td width="20%" align="center"><img src="uniku1.jpg" height="150" width="150"></td>
    <td width="80%" align="center"><h1>RADEA NURLAILA</h1>
    <h2>SISTEM INFORMASI 2015 C</h2>
  Fakultas Ilmu Komputer Universitas Kuningan </td>
</tr>
</table>
<hr size=”4″ color=”black”>
</body>
</html>

c. menukiri.html

<html>
<head>
<title> Radea Nurlaila </title>
</head>
<body bgcolor="#E9967A">
<ol type="1"><h2>
    <li><a href="main.html" target="Home"> Home </li>
    <li><a href="aku.html" target=”blank”> About Me </li>
    <li><a href="Blog.html" target=”blank”> Blogroll </li>
</h2>
</ol>
</body>
</html>


d. main.html

<html>
<head>
<title> Radea Nurlaila's </title>
</head>
<body bgcolor="#E9967A">
<center><h1>
Hi! Welcome to My Website
</h1>
</body>
</html>

e. menukanan.html

<html>
<head>
<title> Radea Nurlaila's </title>
</head>
<body bgcolor="#E9967A">
<ol type="1"><h2>
    Kategori
        <ul type=”disc”>
            <li><a href="Photos.html" target=”blank”>Foto</li>
            <li><a href="Videos.html" target=”blank”>Videos</li>
            <li><a href="about.html" target=”blank”>About Author</li>
        </ul></h2>
</ol>
</body>
</html>

f. footer.html

<html>
<head>
<title> Radea Nurlaila's </title>
</head>
<body bgcolor="#E9967A">
<p align="center" bgcolor="#E9967A"> &copy;Radea Nurlaila </p>
</body>
</html>

Setelah dijalankan maka hasilnya adalah sebagai berikut :




 2. POST TEST

Buat Design Web sebagai berikut :


Dengan ketentuan :
:


  • Input Text untuk NIM, NIM sudah ada, tetapi tidak bisa dihapus 
  • Textarea nilainya tidak bisa dihapus 
  • Input Text Untuk NIM dibatasi sampai 10 Character
 
Maka Script nya adalah : (disismpan dalam nama postes2.html)


<form id="form1" name="form1" method="post" action="">
<p><strong>Property Readonly </strong></p>
<p> NIM : <input type="text" name="nim" id="nim" readonly value="2015091083"></p>
<p><strong>Readonly dan Title di Text Area</strong></p>
<p>Komentar : <textarea cols="40" rows="10" readonly title="Komentar">
Komentar di Text Area Tidak Bisa Dihapus</textarea></p>
<p><strong> Checked </strong></p>
<p>Jenis Kelamin : <input type="radio" name="jk" value="L"> L
                <input type="radio" name="jk" value="P" checked="checked"> P
</p>
<p><strong>Maximal Character</strong></p>
<p> NIM : <input type="text" maxlength="10" size="20"> Maximal 10 karakter </p>
</form>



Maka Hasilnya adalah :









0 komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)