2. CSS Drop Cap
<html>
<head>
<title>DROP CAP</title>
<style type="text/css">
p.styleku:first-letter {
float: left;
font-family: "Lucida Grande";
font-size: 80px;
}
p {
text-align : justify;
}
</style>
</head>
<body>
<h1 id="heading1">Ini Judul Heading 1</h1>
<p class="styleku">Bagian ini adalah paragraf. Bagian
ini adalah
paragraf. Bagian ini adalah paragraf. Bagian ini adalah
paragraf.
Bagian ini adalah paragraf. Bagian ini adalah paragraf.
Bagian ini
adalah paragraf. Bagian ini adalah paragraf. Bagian ini
adalah
paragraf. Bagian ini adalah paragraf. Bagian ini adalah
paragraf.
Bagian ini adalah paragraf. Bagian ini adalah paragraf.
</p>
</body>
</html>
6. CSS Links
a:link - a normal, unvisited link
a:visited - a link the user has visited
a:hover - a link when the user mouses over it
a:active - a link the moment it is clicked
<html>
<head>
<style>
/* visited link */
a:visited {
color: green;
}
/* mouse over link */
a:hover {
color: red;
}
</style>
</head>
<body>
<p><b><a
href="https://www.instagram.com/explore/tags/
trplpolmanbabel/" target="_blank">TRPL Polman
Babel</a></b></p>
</body>
</html>
7. CSS Links (Text Decoration)
a:link - a normal, unvisited link
a:visited - a link the user has visited
a:hover - a link when the user mouses over it
a:active - a link the moment it is clicked
<html>
<head>
<style>
a:link {
text-decoration: none;
}
/* visited link */
a:visited {
color: green;
}
/* mouse over link */
a:hover {
color: red;
text-decoration: underline;
}
</style>
</head>
<body>
<p><b><a
href="https://www.instagram.com/explore/tags/trpl
polmanbabel/" target="_blank">TRPL Polman
Babel</a></b></p>
</body>
</html>
8. CSS Links (Background
Color)
a:link - a normal, unvisited link
a:visited - a link the user has visited
a:hover - a link when the user mouses over it
a:active - a link the moment it is clicked
<html>
<head>
<style>
a:link {
text-decoration: none;
background-color: lightgreen;
}
/* visited link */
a:visited {
color: green;
}
/* mouse over link */
a:hover {
color: red;
background-color: yellow;
}
</style>
</head>
<body>
<p><b><a
href="https://www.instagram.com/explore/tags/trpl
polmanbabel/" target="_blank">TRPL Polman
Babel</a></b></p>
</body>
</html>
14. Layout
HTML
<body>
<div id="header">
<h1>Politeknik Manufaktur Negeri Bangka
Belitung</h1>
</div>
<div id="nav">
<a href ="#">Home</a><br>
<a href ="#">Struktur Organisasi</a><br>
<a href ="#">Teknologi Rekayasa Perangkat
Lunak</a><br>
<a href ="#">Data Mahasiswa</a><br>
<a href ="#">Tutorial</a><br>
<a href ="#">Berita Jomblo</a><br>
<div id="section">
<h2>Teknologi Rekayasa Perangkat
Lunak</h2>
<p>
<i>IEEE Computer Society</i> mendefinisikan
rekayasa perangkat lunak sebagai penerapan
suatu pendekatan yang sistematis, disiplin
dan terkuantifikasi atas pengembangan,
penggunaan dan pemeliharaan perangkat
lunak, serta studi atas pendekatan-
pendekatan ini, yaitu penerapan pendekatan
engineering atas perangkat lunak
</p>
15. Layout
<p>
Jadi Rekayasa Perangkat Lunak adalah pengubahan perangkat lunak itu sendiri guna
mengembangkan, memelihara, dan membangun kembali dengan menggunakan prinsip
reakayasa untuk menghasilkan perangkat lunak yang dapat bekerja lebih efisien dan efektif
untuk pengguna.</p>
</div>
<div id="footer">
<h3>Footer </h3>
</div>
</body>
</html>
16. Tugas
TUGAS KELOMPOK
• Buatlah tutorial berbentuk video oleh masing-masing kelompok sekreatif mungkin dengan mengacu “Tugas Besar”
yang akan dibuat dimana kontennya terdiri dari komponen diatas dengan layouting.
Contoh url:
https://www.youtube.com/watch?v=uyaV_EWWRmo
https://www.youtube.com/watch?v=NjHMJNhYBY4
Software untuk screen recording: ACTION! SCREEN RECORDER, Bandicamp,camtasia, Open Broadcaster
Software, dll
File video ditaruh pada folder minggu 8 -> foleder nama_kelompok