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-
Location: Purwokerto, Banyumas Regency, Central Java, Indonesia

Comments

Post a Comment

Popular posts from this blog

Makalah Cyber Sabotage and Extortion

Image
MAKALAH   ETIKA PROFESI TEKNOLOGI INFORMASI DAN KOMUNIKASI CYBER CRIME CYBER SABOTAGE AND EXTORTION Diajukan untuk memenuhi nilai Tugas Makalah Semester 6 Mata Kuliah E-learning  Etika Profesi Teknologi Informasi dan Komunikasi Disusun Oleh : 1.      Adi Susanto                        (12172174) 2.      Galih Permana Putra      (12170635) 3.      Mentari Rizki Egayanti   (12173671) 4.      Trias Nur Maulani           (12170866) Program Studi Sistem Informasi Universitas Bina Sarana Informatika Purwokerto 2020 KATA PENGANTAR Dengan rasa syukur kehadirat Tuhan Yang Maha Esa, atas segala rahmat , hidayah dan bimbingan-Nya , sehingga kami penulis dapat m...
Read more

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

Image
Hello gengs, Mentari balik lagi nih, yuhu. Kenken kabare?? hoho, duh udah lama ngga post sesuatu disini, hehe. Rada sibuk juga sih. Langsung aja, kali ini Mentari bakal post tentang KOLABORASI MUSIK KOMUSTIK 4th -MEMORIES of CHRISYE- yeayy!! ini adalah da best moment ever pokoke, hehe. Gimana ngga seneng gengs, ide yang luar biasa ini adalah dari papahnya komustik yang sangat saya kagumi dan sayangi, Bapak Bayu Sukmajati Vendratama. hoho. Dan for the first time, aku ada didalamnya, ya sebagai Sopran Choires, yey. Buat nampilin show yang sangat luar biasa ini dibutuhkan perjuangan yang amat sangat besar dan luar biasa menurutku. First, dari pak Bayu untuk memikirkan ide ini dan meng-aransemen musiknya pastinya, juga dapet bantuan dari adik tercintanya kak Defta Rangga Widyasukma, muehehe. Juga tentunya anak-anak yang terlibat dalam kolaborasi ini, ada Band, Guitar Ansamble, Melodeon Ansamble, Choires, and Candle Theaters. hehe. Dan pihak lain yang terlibat, terimakasih, sangat sangat ...
Read more

Hunting Rame Rame (Bukan anak hitz)

Image
Well, aku spam postingan karena saking kangennya nulis di blog nih, hehew. Kali ini aku bakal bagi foto aku pas hunting kemarin hari jum'at sama temen-temen aku di depan Horison Hotel sama Purwokerto City Walk (PCW) *sing wong purwokerto jelas ngerti* Btw, dua tempat ini tuh terkenal hitz di Purwokerto, padahal kan aku anak rumahan, ckckck. First time nih aku hunting foto kayak gini, bhak! cupu yaks. Oke lah langsung cuss Btw, dari kiri ke kanan ya oke. Jadi dari yang paling kiri, cowok kalem berisik namanya Ganda, terus ada cewek cucok namanya Desnana, terus ini nih tante cerewet anak mafia ceritanya namanya Nindya liat aja andeng andeng nya gede, terus ada Si montok anak konglomerat namanya Meliani, terus itu akyu yang imut nan lincah, dan yang paling kanan ada Kori yang katanya kece parah. huahahha udah kenal kan?? jangan lupa taken bye Aldi Zulas, yang punya seribu cewek, weh. Oiya gengs, disini ada empat S, harusnya lima tapi yang satu ngga ikut. Sama ya dari kiri ...
Read more