PRAKTIKUM NAMA KELAS TANGGAL PRAKTIKUM
: : : :
Margins, Padding dan Dimensi ________________________________________ ________________________________________ ________________________________________
A. TUJUAN 1. Siswa dapat mengenal, memahami serta dapat melakukan pengaturan margin dan padding. 2. Siswa dapat mengenal, memahami serta dapat melakukan pengaturan dimensi ukuran pada objek web.
B. DASAR TEORI 1. Margin Margin adalah jarak area kerja dalam meletakkan komponen-komponen web yang dihitung dari dinding-dinding browser. Sehingga dengan melakukan pengaturan margin, berarti menciptakan sebuah pembatas antara area kerja dengan dinding browser. Perhatikan gambar ilustrasi dibawah ini:
Kode CSS untuk pengaturan margin seperti gambar illustrasi diatas adalah: body { margin-top: 100px; margin-right: 40px; margin-bottom: 10px; margin-left: 70px; }
Bentuk kode CSS diatas dapat juga ditulis dengan bentuk seperti berikut: body { margin: 100px 40px 10px 70px; }
Praktikum Dasar Web Possible Values Value
Description
auto
The browser sets the margin. The result of this is dependant of the browser.
length
Defines a fixed margin (in pixels, pt, em, etc.)
%
Defines a margin in % of the containing element
Property margin dapat ditulis dengan bentuk dari satu hingga empat value, seperti berikut di bawah ini:
margin:25px 50px 75px 100px; o top margin is 25px o right margin is 50px o bottom margin is 75px o left margin is 100px margin:25px 50px 75px; o top margin is 25px o right and left margins are 50px o bottom margin is 75px margin:25px 50px; o top and bottom margins are 25px o right and left margins are 50px margin:25px; o all four margins are 25px
Selain menggunakan tag sebagai selector, Anda juga dapat menggunakan tag HTML lain yang berhubungan dengan objek yang ditampilkan, sebagai contoh Anda dapat menerapkannya pada elemen tabel. 2. Padding Pengaturan padding, adalah melakukan pengaturan terhadap jarak didalam (inner) antara border dengan content dari elemen. Tabel berikut menampilkan jenis padding beserta nilainya. Properties
padding
padding-top padding-right padding-bottom padding-left
Value padding-top padding-right padding-bottom padding-left length % length % length % length %
Keterangan Pengaturan batas isi web dengan objek yang ada di sampingnya. Pengaturan jarak padding sebelah atas Pengaturan jarak padding sebelah kanan Pengaturan jarak padding sebelah bawah Pengaturan jarak padding sebelah kiri
Untuk melakukan pengaturan padding pada halaman, maka Anda harus menggunakan tag sebagai selectornya, syntaknya adalah sebagai berikut: body { padding-top: value; padding-right: value; padding-bottom: value; padding-left: value; } Rekayasa Perangkat Lunak (Tk.1) - SMKN 2 Surabaya
2
Praktikum Dasar Web 3.
Dimensi Pada Halaman Web Pengaturan dimensi adalah teknik pengaturan ukuran pada suatu objek web. Dengan menggunakan property yang berkaitan dengan dimensi ini, Anda dapat dengan mudah melakukan pengaturan ukuran besar atau kecil suatu objek web. 3.1 Dimensi Gambar Di dalam aplikasi web pada web HTML, biasanya Anda melakukan pengaturan besar atau kecil sebuah objek dengan menentukan lebar dan panjangnya. Begitu juga dengan CSS yang menyediakan fungsi untuk pengaturan dimensi. Pada tabel berikut ini ditampilkan property serta nilai/value yang berkaitan dengan pengaturan dimensi gambar. Properties width height
Value length auto length auto
Keterangan Pengaturan lebar objek, untuk menggunakan nilai alami gunakan auto. Pengaturan tinggi objek.
Anda dapat menerapkannya dengan bentuk penulisan kode CSS seperti berikut: img.class{ width: value; height: value; }
3.2 Dimensi Pada Paragraf Apabila pada gambar yang dilakukan adalah pengaturan lebar dan tinggi, maka yang dapat dilakukan di dalam pengaturan paragraf adalah melakukan pengaturan yang berkaitan dengan jarak tinggi antar baris pada paragraf. Untuk dapat memberi jarak tinggi antar baris pada paragraf, property yang digunakan adalah line-height. Syntaxnya adalah: p.class{ line-height: value; }
Pada tabel berikut ini ditampilkan nilai/value dalam pengaturan dimensi halaman: Properties line-height
Value length auto
Keterangan Ukuran panjang Ukuran otomatis
Rekayasa Perangkat Lunak (Tk.1) - SMKN 2 Surabaya
3
Praktikum Dasar Web
C. PRAKTIKUM Ketentuan Praktikum: 1. Ketik dokumen halaman web pada Notepad 2. Capture Screen hasil tampilan pada browser. 3. Buat analisa dan kesimpulan dari praktikum yang Anda kerjakan di akhir praktikum.
1. A. Pengaturan Margin
Rekayasa Perangkat Lunak (Tk.1) - SMKN 2 Surabaya
4
Praktikum Dasar Web B. Pengaturan Margin Pada Elemen Tabel
2. Pengaturan Padding A. Pengaturan Padding Pada Elemen Heading
Rekayasa Perangkat Lunak (Tk.1) - SMKN 2 Surabaya
5
Praktikum Dasar Web B. Pengaturan Padding pada tabel [1]
Ganti property padding-top di atas dengan property padding-left, padding-bottom, dan padding-right secara bergantian (sesuaikan setting padding dengan tag
). Capture tiap-tiap tampilannya pada browser ! C. Pengaturan Padding pada tabel [2]<br />
<br />
Rekayasa Perangkat Lunak (Tk.1) - SMKN 2 Surabaya<br />
<br />
6<br />
<br />
Praktikum Dasar Web 3. Pengaturan Dimensi Gambar<br />
<br />
4. Pengaturan Dimensi Pada Paragraf<br />
<br />
Rekayasa Perangkat Lunak (Tk.1) - SMKN 2 Surabaya<br />
<br />
7<br />
<br />
Praktikum Dasar Web<br />
<br />
LATIHAN SOAL Buat tampilan berikut pada browser!<br />
<br />
H4, Padding(all)=10px Jenis huruf=georgia<br />
<br />
#CC6600<br />
<br />
Table -Margin kiri=0.5cm #CCFF66 Padding (All)=0.1cm<br />
<br />
Body Margin: -Atas=10px -Kanan=50px -Bawah=50px -Kiri=55px Warna Latar Blk=#CCFF00<br />
<br />
Paragraf Padding (All)=10px Warna Latar Blk=#990000 Jenis huruf=verdana Ukuran huruf=12px Margin: -Atas=1cm -Kanan=1cm -Bawah=20cm -Kiri=0.5cm<br />
<br />
Rekayasa Perangkat Lunak (Tk.1) - SMKN 2 Surabaya<br />
<br />
8<br />
<br /> </div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal fade" id="report" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<form role="form" method="post" action="https://adoc.pub/report/kelas-tanggal-praktikum" style="border: none;">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Report "KELAS TANGGAL PRAKTIKUM"</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label>Your name</label>
<input type="text" name="name" required="required" class="form-control" />
</div>
<div class="form-group">
<label>Email</label>
<input type="email" name="email" required="required" class="form-control" />
</div>
<div class="form-group">
<label>Reason</label>
<select name="reason" required="required" class="form-control">
<option value="">-Select Reason-</option>
<option value="pornographic" selected="selected">Pornographic</option>
<option value="defamatory">Defamatory</option>
<option value="illegal">Illegal/Unlawful</option>
<option value="spam">Spam</option>
<option value="others">Other Terms Of Service Violation</option>
<option value="copyright">File a copyright complaint</option>
</select>
</div>
<div class="form-group">
<label>Description</label>
<textarea name="description" required="required" rows="3" class="form-control" style="border: 1px solid #cccccc;"></textarea>
</div>
<div class="form-group">
<div style="display: inline-block;">
<div class="g-recaptcha" data-sitekey="6LcEnMcZAAAAAFHzKKgaE-Qh57XzUTzpfRElD4dP"></div>
</div>
</div>
<script src='https://www.google.com/recaptcha/api.js'></script>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Send</button>
</div>
</form>
</div>
</div>
</div>
<script>
$(document).ready(function () {
var inner_height = $(window).innerHeight() - 250;
$('#pdfviewer').css({"height": inner_height + "px"});
});
</script>
<footer class="footer" style="margin-top: 60px;">
<div class="container-fluid">
Copyright © 2024 ADOC.PUB. All rights reserved.
<div class="pull-right">
<span><a href="https://adoc.pub/about">About Us</a></span> |
<span><a href="https://adoc.pub/privacy">Privacy Policy</a></span> |
<span><a href="https://adoc.pub/term">Terms of Service</a></span> |
<span><a href="https://adoc.pub/copyright">Copyright</a></span> |
<span><a href="https://adoc.pub/contact">Contact Us</a></span> |
<span><a href="https://adoc.pub/cookie_policy">Cookie Policy</a></span>
</div>
</div>
</footer>
<!-- Modal -->
<div class="modal fade" id="login" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close" on="tap:login.close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="add-note-label">Sign In</h4>
</div>
<div class="modal-body">
<form action="https://adoc.pub/login" method="post">
<div class="form-group">
<label class="sr-only" for="email">Email</label>
<input class="form-input form-control" type="text" name="email" id="email" value="" placeholder="Email" />
</div>
<div class="form-group">
<label class="sr-only" for="password">Password</label>
<input class="form-input form-control" type="password" name="password" id="password" value="" placeholder="Password" />
</div>
<div class="form-group">
<div class="checkbox">
<label class="form-checkbox">
<input type="checkbox" name="remember" value="1" />
<i class="form-icon"></i> Remember me
</label>
<label class="pull-right"><a href="https://adoc.pub/forgot">Forgot password?</a></label>
</div>
</div>
<button class="btn btn-primary btn-block" type="submit">Sign In</button>
</form>
</div>
</div>
</div>
</div>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-177279549-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-177279549-1');
</script>
<script src="https://adoc.pub/assets/js/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://adoc.pub/assets/css/jquery-ui.css">
<script>
$(function () {
$("#document_search").autocomplete({
source: function (request, response) {
$.ajax({
url: "https://adoc.pub/suggest",
dataType: "json",
data: {
term: request.term
},
success: function (data) {
response(data);
}
});
},
autoFill: true,
select: function( event, ui ) {
$(this).val(ui.item.value);
$(this).parents("form").submit();
}
});
});
</script>
<!-- cookie policy -->
<div id="ADOCPUB_cookie_box" style="z-index:99999; border-top: 1px solid #fefefe; background: #FFC107; width: 100%; position: fixed; padding: 5px 15px; text-align: center; left:0; bottom: 0;">
Our partners will collect data and use cookies for ad personalization and measurement. <a href="https://adoc.pub/cookie_policy" target="_blank">Learn how we and our ad partner Google, collect and use data</a>. <a href="#" class="btn btn-success" onclick="accept_ADOCPUB_cookie_box();return false;">Agree & close</a>
</div>
<script>
function accept_ADOCPUB_cookie_box() {
document.cookie = "ADOCPUB_cookie_box_viewed=1;max-age=15768000;path=/";
hide_ADOCPUB_cookie_box();
}
function hide_ADOCPUB_cookie_box() {
var cb = document.getElementById('ADOCPUB_cookie_box');
if (cb) {
cb.parentElement.removeChild(cb);
}
}
(function () {
var ADOCPUB_cookie_box_viewed = (function (name) {
var matches = document.cookie.match(new RegExp("(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)"));
return matches ? decodeURIComponent(matches[1]) : undefined;
})('ADOCPUB_cookie_box_viewed');
if (ADOCPUB_cookie_box_viewed) {
hide_ADOCPUB_cookie_box();
}
})();
</script>
<!-- end cookie policy -->
</body>
</html>
