Makalah

Nama : Hillyatul Aulia
No / NIM : 11 / 1841160062
Kelas : JTD – 4B
1. Script
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Uji Coba Selector</title>
<link rel="stylesheet" type="text/css" href="style4.css">
</head>
<body>
<h1>Selector CSS Dimulai</h1>
<img src="../images/logo.png" alt="polinema" width="20%">
<ul>
<li> <a href="#"> Link1 </a></li>
</ul>
<ol>
</ol>
<br>
<a href="www.youtube.com" class="cetak-tebal">Ini Link YouTube</a>
<h2>Hallo JTD</h2>
<p id="p1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p class="p2 cetak-tebal">Lorem ipsum dolor sit amet, consectetur adipisicing

elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
</body>
</html>
2. Script
a. HTML
<!DOCTYPE html>
<html>
<head>
<title>Nomor 2</title>
<link rel="stylesheet" type="text/css" href="style2.css">
</head>
<body>
<div class="container cf">
<div class="kiri"></div>
<div class="tengah"></div>
<div class="kanan"></div><br>
<div class="persegi">
<div class="kotak">1</div>
</div>
<div class="clear"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do

eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam,
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non
</div>
</body>
</html>
b. CSS
.container{
width: 600px;
border: 1px solid black;
padding: 5px;
margin: auto;
}
.kiri {
width: 100px;
height: 100px;
background-color: salmon;
padding: 10px;
box-sizing: border-box;
}
.tengah {
width: 100px;
height: 100px;
background-color: limegreen;
}
.kanan {
width: 100px;
height: 100px;
background-color: lightskyblue;
}
.persegi {
margin-top: -25px;
}
.kotak {
width: 80px;
height: 80px;
color: white;
background-color: salmon;
text-align: center;
line-height: 80px;
font-size: 30px;
margin: 2px;
float: left;
}
img {
float: left;
}
.clear{
clear: left;
}
.cf:before,
.cf:after {
content: " ";
display: table;
}
.cf:after {
clear: both;
}
.cf {
*zoom: 1;
}
3. Script
a. HTML

<!DOCTYPE html>
<html>
<head>
<title> Latihan Membuat Web</title>
<link rel="stylesheet" type="text/css" href="12.CSS">
</head>
<body>
<div class="container">
<div class="header">
<h1 class="judul"> Website Aulia</h1>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Product</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div class="gambar"></div>
<div class="konten cf">
<div class="main">
<h2> Website </h2>
<p class="penulis"> Ditulis oleh: <a

href="https://www.youtube.com/">Hillyatul Aulia</a> pada 10 Oktober
2021</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam,
</p>
<p>
sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip
ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id
est laborum.
</p>
<p>
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
<div class="sidebar">
<h3>Tentang Penulis</h3>
<img src="../../images/logo.png"
alt="DimasRossiawan">
<p> Lorem ipsum dolor sit amet, consectetur adipisicing
ex ea commodo
consequat.</p>
</div>
<div class="sidebar2">
<h3>Pembimbing</h3>
<img src="../../images/logo.png"
alt="DimasRossiawan">
<p> Lorem ipsum dolor sit amet, consectetur adipisicing
ex ea commodo
consequat.</p>
</div>
</div>
<div class="footer">
<p class="copy"> Copyright 2021. Hillyatul Aulia</p>
</div>
</body>
</html>
b. CSS
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,

h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/*STyle*/
body {
font: 16px/28px arial sans-serif;
background-color: white;
color: white;
background-image: url(../../polinema.png);
text-align: justify;
}
.container {
width: 1300px;
margin: auto;
background-color: #808080;
}
.header {
padding: 20px;
}
.header .judul {
font-size: 40px;
font-weight: bold;
}
.header ul li {
display: inline-block;
margin-top: 20px;
margin-right: 10px;
}
.header a {
text-decoration: none;
color: salmon;
padding: 3px;
}
.header a:hover {
color: white;
}
.gambar {
height: 320px;
background-image: url(../images/john-arano.jpg);
background-size: cover;
/*background-position: horizontal vertikal;*/
background-position: 0px -220px;
border-top: 5px solid slategrey;
border-bottom: 5px solid darkslategrey;
}
.main {
width: 500px;
padding: 20px;
box-sizing: border-box;
float: left;
}
.main h2{
font-size: 28px;
font-weight: bold;
}
.main .penulis {
font-size: 12px;
margin-top: -5px;
}
.main .penulis a{
color: salmon;
text-decoration: none;
}
.main p {
margin-bottom: 20px;
font-size: 14px;
}
.main .penulis a:hover {
color: white;
}
/*Sidebar*/
.sidebar {
width: 300px;
float: right;
padding: 20px;
}
.sidebar h3{
font-weight: bold;
color: #FFFFFF;
}
.sidebar img{
width: 70px;
height: 70px;
float: left;
padding: 10px;
}
.sidebar p {
font-size: 12px;
line-height: 18px;
font-family: arial;
}
/*Sidebar2*/
.sidebar2 {
width: 300px;
float: left;
padding: 20px;
}
.sidebar2 h3{
font-weight: bold;
color: #FFFFFF;
}
.sidebar2 img{
width: 70px;
height: 70px;
float: left;
padding: 10px;
}
.sidebar2 p {
font-size: 12px;
line-height: 18px;
font-family: arial;
}
.footer{
background-color: #333;
padding: 5px;
}
.footer .copy {
color: #eaeaea;
text-align: center;
font-size: 12px;
}
/*
Ini adalah Clearfix*/
.cf:before,
.cf:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.cf:after {
clear: both;
}
.cf {
*zoom: 1;
}

Makalah

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Makalah

Uploaded by

Copyright:

Available Formats

Nama : Hillyatul Aulia

<p class="p2 cetak-tebal">Lorem ipsum dolor sit amet, consectetur adipisicing

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do

<div class="konten cf">

<p class="penulis"> Ditulis oleh: <a

html, body, div, span, applet, object, iframe,

You might also like