Tugas Rekweb 03169 ( individu )
Nama : Joko wijayanto
Nim : 1412510263
Kelompok : KI
Ide web yang saya buat adalah TukangRipiuyang berkonsep berita perkembangan Gadget
Membuat Sketsa web
Membuat link ”css”, Header dan nav<html>
<head>
<link rel="stylesheet" href="css.css">
</head>
<body>
<header><div align="left">
<h2><i class="m">T</i>ukangRipiu.<b class="m2">com</b><br><b class="jd1">Segala macam riview</b></h2>
</div>
<div class="jdiv" align="right"><input class="bd" type="text" placeholder="cari" align="right">  <input type="submit" value="Search"></input></input></div>
</header>
<div class="jeda"><nav>
<ul id="menu">
<li><a href="#" class="current">Beranda</a></li>
<li><a href="#">Video Review</a></li>
<li><a href="#">Berita</a></li>
<li><a href="#">Tentang</a></li>
</ul>
</nav>
Membuat artikel<div class="jd2">
<section class="crouses">
<a class="jd3"><h2>Video Review</h2></a>
<article>
<figure>
<iframe width="250" height="200" src="https://www.youtube.com/embed/6maZZEeq5R8" frameborder="0" allowfullscreen></iframe></figure>
<hgroup><h3>Review Infinix Hot 3</h3></hgroup>
<p>Lihat video review Infinix Hot 3 yang telah hadir di indonesia, mau lihat spek dan kelebihannya ?</p>
</article>
<article>
<figure>
<iframe width="250" height="200" src="https://www.youtube.com/embed/BH0uSiaayUs" frameborder="0" allowfullscreen></iframe></figure>
<hgroup><h3>Hands on Oppo F1 Plus</h3></hgroup>
<p>Oppo baru-baru ini meluncurkan keluarga barunya Oppo F1 plus. mau lihat spek dan tampilan handphone ini pada launchingnya di indonesia. tonton videonya !! </p>
</article>
</section>
Membuat aside<aside>
<section class="pd2">
<h2>Berita<h2>
<article>
<hgroup>
<a href="#" class="hg" >Selamat datang (Kembali) Nokia !</a><br>
<a href="#" class="hg">Teknologi Ini Bisa Bikin Smartphone Lebih Cepat</a><br>
<a href="#" class="hg">Tak Hanya Kamera dan Hi-Fi, Ini Fitur-Fitur Keren Flash Plus 2</a><br>
<a href="#" class="hg">Bezel di Xperia X Lebih Tebal, Mengapa?</a><br>
<a href="#" class="hg">Sudah Dijual, Lenovo Vibe C Goda Kelas Bawah dengan 4G</a><br>
<a href="#" class="hg">Aksesoris Mungil Ini Bisa Ubah Ponsel Jadi Mikroskop!</a><br>
<a href="#" class="hg">Sony Resmi Kenalkan Xperia XA Ultra</a><br>
<a href="#" class="hg">Gawat, Enkripsi WhatsApp Berhasil Ditembus</a><br>
</hgroup>
</article>
</section>
</aside>
</div>
Membuat footer
<footer>© Joko.wijayanto - 1412510263</footer></body></html>
Membuat Skrip Cssheader{
padding : 5;
background : #fff342;
border-radius : 5px;
}
footer {
padding : 5;
background : gray;
border-radius : 5px;
color: white;
clear: left;
}
@font-face{
font-family : fontpertama;
src : url(MAIAN.TTF);
}
div {
font-family : fontpertama;
}
.jeda{padding-top: 5px;}
.jd1{padding-left: 120px;font-size: 12;}
.jd2{padding: 10px;}
a.jd3{float: left;padding-left: 50px;}
.m{color: red;font-size: 35;padding-left: 40px;}.m2 {color: red;font-weight: normal;}
h2{font-family : fontpertama;}
nav{background: #aeacb5;border-radius: 5px;}
nav ul{margin: 0px;padding: 5px 0px 5px 35px;}ul{list-style: none;}
nav li{display: inline;margin-right: 30px;}
nav li a{color: black;}
nav li a:hover, nav li a.current {color: white;font-family: fontpertama;}a{text-decoration: none;}
section.crouses{float : left;width: 900;border-right: 1px solid #eeeeee;}
hgruop{margin-top: 40px;}
article{clear: both;overflow: auto;width: 100%;}
aside {float: left;}
section.pd2{padding-left: 20px;clear: left;}
figure {float: left;}
p{padding-right:10px;}
.bd{border-radius: 5px;}
div.jdiv{padding-right: 10px;}
input{font-family : fontpertama;}
a.hg{font-weight: normal;font-size: 13px;padding-bottom: 5;padding-top: 5;text-align: justify;}