Tugas 9 [ ki ]-0316-[ joko wijayanto ]-[ 1412510263 ]

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">&nbsp <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 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;}

Tugas 9 [ ki ]-0316-[ joko wijayanto ]-[ 1412510263 ]

Education

Transcript of Tugas 9 [ ki ]-0316-[ joko wijayanto ]-[ 1412510263 ]