MODUL 3
Praktikum 1
Ketiklah script di bawah ini :
modul_3a.html
<!DOCTYPE html>
<html>
<head>
<title>Styling the article element</title>
<script>document.elementBaru("gaya1")</script>
<style>
gaya1 {
display:block;
background-color:#ddd;
padding: 50px;
font-size: 30px;
}
</style>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
<gaya1>Format Tampilan CSS di HTML5</gaya1>
</body>
</html>
Tampilan yang dihasilkan:
Praktikum 2
Ketiklah script di bawah ini :
modul_3b.html
<!DOCTYPE html>
<html><head>
<title>HTML5</title>
<style>
body
{font-family: Verdana, sans-serif; font-size:0.8em;}
header, nav, section, article, footer
{border:1px solid grey; margin:5px; padding:8px;}
nav ul {margin:0; padding:0;}
nav ul li {display:inline; margin:5px;}
</style>
</head>
<body>
<header>
<h1>HTML5 Skeleton</h1>
</header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">About</a></li>
</ul>
</nav>
<section>
<h2>UNIKU FACULTY</h2>
<article>
<h2>FKOM</h2>
<p>Fakultas Ilmu Komputer</p>
</article>
<article>
<h2>FKIP</h2>
<p>Fakultas Ilmu Pendidikan</p>
</article>
<article>
<h2>FHUT</h2>
<p>Fakultas Ilmu Kehutanan</p>
</article>
</section>
<footer>
<p>© @Rio Andriyat FKOM FACULTY</p>
</footer>
</body></html>
Tampilan yang dihasilkan:
Praktikum 3
Ketiklah script di bawah ini :
modul_3c.html
<!DOCTYPE html>
<html>
<body>
<form action="action_page.php">
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<br><br>
<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>
<br><br>
<button type="button"
onclick="alert('Anda menekan Tombol Click Me')">Click Me!</button>
<br><br>
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
</form>
</body>
</html>
Tampilan yang dihasilkan:
Praktikum 4
Ketiklah script di bawah ini :
modul_3d.html
<!DOCTYPE html>
<html>
<body>
<form action="action_page.php" oninput="x.value=parseInt(a.value)+parseInt(b.value)">
0
<input type="range" id="a" name="a" value="0">
100 +
<input type="number" id="b" name="b" value="0">
=
<output name="x" for="a b"></output>
<br><br>
<input type="submit">
</form>
</body>
</html>
Tampilan yang dihasilkan:
Praktikum 5
Ketiklah script di bawah ini :
modul_3e.html
<!DOCTYPE html>
<html><body>
<p>Circle
<svg width="100" height="100">
<circle cx="50" cy="50" r="40"
stroke="green" stroke-width="4" fill="yellow"/>
Sorry, your browser does not support inline SVG.
</svg>
<p>Rectangle
<svg width="400" height="100">
<rect width="400" height="100"
style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)"/>
</svg>
<p>Start>
<svg width="300" height="200">
<polygon points="100,10 40,198 190,78 10,78 160,198"
style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;"/>
</svg>
<p>Logo
<svg height="130" width="500">
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1"/>
<stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1"/>
</linearGradient>
</defs>
<ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad1)"/>
<text fill="#ffffff" font-size="45"
font-family="Verdana" x="50" y="86">SVG</text>
Sorry, your browser does not support inline SVG.
</svg>
</body>
</html>
Tampilan yang dihasilkan:
Praktikum 6
Siapkanlah file op.mp4
Ketiklah script di bawah ini :
modul_3f.html
<video width="320" height="240" controls>
<source src="op.mp4" type="video/mp4">
<source src="op.ogg" type="video/ogg">
</video>
Tampilan yang dihasilkan:
Pre Test Praktikum
Ketiklah script di bawah ini :
modul_3prettest.html
<!DOCTYPE html>
<html>
<head>
<title>Pre Test Modul 3</title>
<script>document.elementBaru("gaya1")</script>
<style>
gaya1 {
display:block;
background-color:#ddd;
padding: 50px;
font-size: 30px;
}
</style>
</head>
<body>
<h1>HEADING PERTAMA</h1>
<p>Paragraf dengan Style</p>
<gaya1>Format Tampilan text di BOX</gaya1>
</body>
</html>
Tampilan yang dihasilkan:
Tugas Praktikum
Siapkan file GalaxyKickOff_01.mp4
Ketiklah script di bawah ini :
modul_3tugas.html
<!DOCTYPE html>
<html>
<title>Tugas Modul 3</title>
<center><body>Script HTML Untuk Memutar Video .mp4<body><br>
<video width="320" height="240" controls>
<source src="GalaxyKickOff_01.mp4" type="video/mp4">
<source src="GalaxyKickOff_01.ogg" type="video/ogg">
</video>
</body>
</center>
</html>
Tampilan yang dihasilkan:
Post Test Praktikum
Siapkanlah file ColdCherryGrowingPainInst.mp3
Ketiklah script di bawah ini :
modul_3postest.html
<!DOCTYPE html>
<html>
<title>Post Test Modul 3</title>
<center><body>Script HTML Untuk Memutar Audio .mp3<body><br>
<audio controls>
<source src="ColdCherryGrowingPainInst.mp3" type="audio/mp3">
</audio>
</body>
</center>
</html>
Tampilan yang dihasilkan:
0 Response to "Laporan Praktikum Pemrograman Web 1 Modul 3"
Posting Komentar