Pemograman WEB (CSS Lanjutan)

Cascade Style Sheet
(CSS)
Lanjutan
Riki Afriansyah
Teknologi Rekayasa Perangkat Lunak
Polman Babel

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>

CSS Lists
Unordered lists (<ul>)
Ordered lists (<ol>)
<html>
<head>
<style>
ul.a {list-style-type: circle; color:
red; }
ul.b {list-style-type: square;
color: blue; }
ol.c { list-style-type: upper-
roman;}
ol.d { list-style-type: lower-
alpha; }
</style>
</head>
<p>Contoh ordered lists:</p>
<ol class="c">
<li>Bakso</li>
<li>Pantiaw</li>
<li>Otak-otak</li>
</ol>
<ol class="d">
<li>Bakso</li>
<li>Pantiaw</li>
<li>Otak-otak</li>
</ol>
</body>
</html>
<body>
<p>Contoh unordered
lists:</p>
<ul class="a">
<li>Bakso</li>
<li>Pantiaw</li>
<li>Otak-otak</li>
</ul>
<ul class="b">
<li>Bakso</li>
<li>Pantiaw</li>
<li>Otak-otak</li>
</ul>

CSS Lists Images
<html>
<head>
<style>
ul {
list-style-image: url(‘square.png');
}
</style>
</head>
<body>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
</body>
</html>

CSS Links
<html>
<head>
<style>
a {
color: blue;
}
</style>
</head>
<body>
<p><b><a href="https://www.instagram.com/explore/tags/trplpolmanbabel/"
target="_blank">TRPL Polman Babel</a></b></p>
</body>
</html>

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>

CSS Links (Text Decoration)
<html>
<head>
<style>
a:link {
text-decoration: none;
}
/* visited link */
a:visited {
color: green;
}
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>

CSS Links (Background
Color)
<html>
<head>
<style>
a:link {
text-decoration: none;
background-color: lightgreen;
}
/* visited link */
a:visited {
color: green;
}
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>

CSS Tables (border)
<html>
<head>
<style>
table, th, td {
border: 3px solid blue;
}
</style>
</head>
<body>
<h2>CSS Tables Border:</h2>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Ariel</td>
<td>Peterpan</td>
</tr>
<tr>
<td>Ali</td>
<td>Hasanudin</td>
</tr>
</table>
</body>
</html>

CSS Tables (Width Height)
<html>
<head>
<style>
th {
height: 50px;
}
table, th, td {
width: 100%;
}
</style>
</head>
<body>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Ariel</td>
<td>Peterpan</td>
</tr>
<tr>
<td>Ali</td>
<td>Hasanudin</td>
</tr>
</table>
</body>
</html>

CSS Tables (Padding)
<html>
<head>
<style>
th {
height: 50px;
}
table, th, td {
}
th, td {
padding: 10px;
}
</style>
</head>
<body>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Ariel</td>
<td>Peterpan</td>
</tr>
<tr>
<td>Ali</td>
<td>Hasanudin</td>
</tr>
</table>
</body>
</html>

Layout
CSS
<style>
#header {
background-color:blue;
color:white;
text-align:center;
padding:5px;
}
#nav {
line-height:45px;
background-color:yellow;
height:400px;
width:150px;
float:left;
padding:15px;
}
#section {
width:800px;
float:left;
padding:25px;
}
#footer {
background-color:red;
color:black;
clear:both;
text-align:center;
padding:5px;
}
</style>

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>

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>

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

Pemograman WEB (CSS Lanjutan)

More Related Content

What's hot (19)

Similar to Pemograman WEB (CSS Lanjutan) (20)

More from Dnr Creatives (20)

Recently uploaded (20)

Pemograman WEB (CSS Lanjutan)