BSI PURWOKERTO - Belajar HTML part 5

Hello my sunlight! Update lagi nih, kali ini Mentari akan share rangkuman materi Web Programming 1 pada hari Senin, 16 April 2018 dengan dosen pengampu bapak Fabriyan Fandi Dwi Imaniawan tentang membuat Layout WEB Responsive sederhana HTML dan CSS.

Langsung aja yuk!


Sebelum memulai, ingat! Untuk selalu meng-aktifkan XAMPP terlebih dahulu


1. Masuk folder htdocs
2. Buat folder dengan nama website_2f 



3. Di dalam folder website_2f, buat folder css dan file dengan nama index.html



 Coding Struktur Data Index.html

---
<html>
<head>
  <title>Membuat Layout WEB responsive sederhana HTML dan CSS</title>
<link rel="stylesheet" type="text/css" href="css/style.css">

</head>
<body>
<div class="header">
<h2>header</h2>
</div>

<div class="nav">
<a href="#">menu 1</a>
<a href="#">menu 2</a>
<a href="#">menu 3</a>
</div>

<div class="row">
<div class="content">
<div class="card">
<h2>Judul Artikel</h2>
<h5>Rabu, 22 Februari 2018</h5>
<div class="img" style="height:200px:">image</div>
<p>Deskripsi Deskripsi</p>
</div>
</div>
<div class="sidebar">
<div class="widget">
<h2> Widget 1</h2>
</div>
<div class="widget">
<h2> Widget 2</h2>
</div>
<div class="widget">
<h2> Widget 3</h2>
</div>
<div class="widget">
<h2>Widget 4</h2>
</div>
</div>
</div>

<div class="row">
<div class="footer">
<h2>Footer 1</h2>
</div>
<div class="footer">
<h2>Footer 2</h2>
</div>
<div class="footer">
<h2>Footer 3</h2>
</div>
<div class="footer">
<h2>Footer 4</h2>
</div>
</div>

</body>
</html>
-----



HASIL CODING
4. Buat struktur data, kemudian simpan dalam folder CSS dengan nama style.css


Coding Struktur Data Style.css


* {
box-sizing:border-box;
}

body{
font-family:Arial;
padding :10px;
background:#f1f1f1;
}

.header{
padding:10px;
font-size:40px;
text-align:center;
background:white;
}

.nav{
overflow: hidden;
background-color:#333;
}

.nav a{
float: left;
display:block;
color:#f2f2f2;
text-align:center;
padding:14px 16px;
text-decoration:none;
}

.nav a:hover{
background-color:#ddd;
color:black;
}

.content{
float:left;
width:75%;
}

.sidebar{
float : left;
width:25%;
background-color:#f1f1f1;
padding-left:10px;
}

 .img{
 background-color:#aaa;
 width:100%;
 height:200px;
 padding;10px;
 }

 .card{
 background-color:white;
 padding:10px;
 margin-top :10px;
 }

 .widget{
 background-color:white;
 padding:10px;
 margin-top:10px;
 }

 .row:after{
 content:"";
 display:table;
 clear:both;
 }

 .footer{
 padding:10px;
 width:25%;
 text-align:center;
 background:white;
 margin-top:20px;
 display:inline-block;
 float:left;
 }

 @media (max-width:800px) {
 .content, .sidebar, .footer{
 width:100%;
 padding:0;
 }
 }

 @media (max-width:400px) {
 .nav a{
 float:none;
 width:100%;
 }
 }

-----





HASIL CODING



Bagaimana rangkuman saya kali ini? Semoga kalian semua paham dan dapat menambah ilmu. Jika ada yang mau ditanyakan bisa ditanyakan lewat kolom komentar ya! Mohon maaf bila masih terdapat banyak kesalahan, karena kita sama-sama belajar. hehe

Sekian dan terima kasih!

SEE U ON THE NEXT POST!

Purwokerto, 19 April 2018

-Mentari Rizki-

Comments

Popular posts from this blog

Makalah Cyber Sabotage and Extortion

Hunting Rame Rame (Bukan anak hitz)

Memories of Chrisye - Komustik 4th (Komunitas Musik SMA N 1 Patikraja)