Cara membuat tampilan website sederhana menggunakan HTML & CSS - OMJUAN.COM - Website Pragraming Learning
News Update
Loading...

9/26/2019

Cara membuat tampilan website sederhana menggunakan HTML & CSS

Tutorial HTML & CSS

Hallo teman-teman semua, kali ini saya akan membagikan beberapa source code html dan css yang mungkin bisa berguna untuk teman-teman semua. Source code yang saya bagikan ini merupakan source code buatan saya sendiri. silahkan teman-teman ambil dan merubahnya sesuka hari kalian. Seperti yang kita ketahui HTML itu seperti perempuan dan CSS adalah makeupnya. namun kedua itu hanyalah sebuah tampilan belum ada perilakunya atau Etitutnya. 

Javascript adahalh Etitutnya atau bisa di bilang adalah perilaku dari Perempuan tersebut. Silahkan teman-teman jika mau mencari tentang Source code Javascript bisa kunjungi halaman Javascript di bagian header atas blog ini.

HTML


  <!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
 <title>WEBSITE</title>
 <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

 <div class="container">
  <div class="header">
   <h1 class="judul">WEBSITE </h1>
   <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="latihan2.html">About</a></li>
    <li><a href="#">Product</a></li>
    <li><a href="#">Service</a></li>
    <li><a href="#">Contact</a></li>
   </ul>
  </div>
  <div class="hero"></div>
  <div class="content">
   <h2>Belajar mambuat web sederhana</h2>
   <p class="penulis">Di tulis oleh <a href="#">Juan Matheus</a>. pada 24 Juni 2018</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,
   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>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>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>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>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>
  </div>
  <div class="footer">
   <p class="copy">Copyright 2018 | Juan Matheus <a href="www.facebook.com/juan.jumax">Facebook</a></p>
  </div>
 </div>

</body>
</html>

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: transparent;
 background-image: url(img/doodles.jpg);

}

.container{
 width: auto;
 margin: auto;
 background-color: white;
}
.header{
 padding: 20px;
 padding-bottom: 10px;
}
.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{
 background-color: lightskyblue;
 color: white;
}

.hero {
 height: 450px;
 background-image: url(img/hero.jpg);
 background-size: cover;
 background-position: 0 -345px;
 border-top: 5px solid lightskyblue;
 border-bottom: 5px solid salmon;

}

.content {
 padding: 20px;
}
.content h2 {
 font-size: 25px;
 font-weight: bold;
}

.content penulis a{
 color: salmon;
 text-decoration: none;
}


.content penulis {
 font-size: 11px;
 margin-top: -5px;
}

.content p{
 margin-bottom: 20px;
 font-size: 14px;
}
.footer{
 background-color: #333;
 padding: 10px;
 border-top: 5px solid lightskyblue;
 border-bottom: 5px solid salmon;
}

.footer .copy{
 color: #eaeaea;
 text-align: center;
 font-size: 12.px;
}
.footer a{
 color: salmon;
 text-decoration: none;
}
CATATAN!!! Pada HTML & CSS yang saya bagikan di atas ini. Ada gambar yang perlu kalian masukan sendiri lagi. terserah kalian mau ambil gambar dari mana saja, bisa juga kalian menggunakan foto kalian sendiri. Saya sarankan kalian membuat taruh semua file HTML & CSS dalam satu folder kemudian kalian buat lagi folder IMG untuk menaruh gambar kalian. Alasannya supaya bisa lebih rapi saja sih. Terimakasih
Oke teman-teman jadi itulah sedikit source code yang dapat saya bagikan untuk kalian semua, jika menurut kalian postingan saya ini bermanfaat. Silahkan di bagikan di media sosial kalian. dengan kalian membagikan artikel saya ini. Berati kalian sudah berpatisipasi untuk membantu saya mengembangkan bolog saya ini, Terimakasih

Share with your friends

2 comments

  1. Artikel yang sangat bermanfaat...

    ReplyDelete
  2. Terima masih bro infonya sangat bermanfaat. Terus update agar kita semua mengetahui info seputar IT bro 👍👍👍

    ReplyDelete

Terimakasih telah mengunjungi situs ini. Silahkan berkomentar dengan bijak.Komentar spam atau berisikan link aktif tidak akan di tampilkan. Terimakasih

Notification
This is just an example, you can fill it later with your own note.
Done
Asal SEO Responsive Blogger Template
Pro Version 2 Pro Dark Version Pro Version 1 Pro Version 5 Proversion 4 Pro Version 3
Eclipse Responsive Blogger Template
Pro Version 3 Pro Version 2 Pro Version 1