Cara Cepat, Mudah, Simpel Membuat Template HTML dan CSS
Langsung saja ya!
Pertama kita sipakan editornya, yang kita gunakan pilihan Notepad, Notepad++, atau SublimText. Kalo saya disini pakenya sublim text, alasannya supaya mudah aja penulisanya, karena fiturnya banyak dan bisa otomatis. Tampilanya sepertini ini
Sumber : Tutorial Website Android Mobile Otodidak
Tapi Kalo teman-teman mau pake notepad atau notepad++ atau yang lainya juga silahkan.
Kalo menggunakan sublime text bagaimana caranya nanti kita bahas pada artikel berikutnya. Untuk sekarang kalian tinggal copas saja scrip yang suda disediakan diartikel ini.
- Pertama buat folder baru beri nama latihan membuat template.
- Kedua buatlah file bernama index.html (jangan lupa exstensi adalah html ya, seperti contoh nama file yang dicetak miring diatas, lalu save as ke dalam folder yang tadi telah dibuat.
- Copy scrip pada kotak dibawah lalu paste ke file index.html tadi, kemudian save.
<html>
<head>
<title>onplaystore.blogspot.com</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<!-- bagian header template -->
<header>
<h1 class="judul">Website Android Mobile Otodidak</h1>
<p class="deskripsi">Tutorial pemrograman website, aplikasi,internet jaring dan lain-lain secara otodidak.</p>
</header>
<!-- akhir bagian header template -->
<div class="wrap">
<!-- bagian menu -->
<nav class="menu">
<ul>
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">Ebook</a>
</li>
<li>
<a href="#">Download</a>
</li>
</ul>
</nav>
<!-- akhir bagian menu -->
<!-- bagian sidebar website -->
<aside class="sidebar">
<div class="widget">
<h2>Otodidak</h2>
<p>Selamat Datang di Website Android Mobile Otodidak. Silahkan pelajari lebih lanjut disini <a target="_blank" href="https://oneplaystore.blogspot.com">BELAJAR OTODIDAK</a></p>
</div>
<div class="widget">
<h2>Kumpulan Artikel</h2>
<p>Bagi yang tertarik dengan artikel tentang dunia pemrograman silakan baca disini<a target="_blank" href="https://oneplaystore.blogspot.com">https://oneplaystore.blogspot.com/</a></p>
</div>
</aside>
<!-- akhir bagian sidebar website -->
<!-- bagian konten Blog -->
<div class="blog">
<div class="conteudo">
<div class="post-info">
Di Edit Oleh <b>F.Hasan</b>
</div>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNupQ8VbiKHjbFiS1iNdLKyOkp7sJyyq5Yyo70iT_6KjbqKU-pqhMZdkkYuqUJdzefdwBbDtKc5WFf9wWvSoGrLz8_-uhtvNjnfkg1fQWWTcT_uHMxb9LiiHRxtkOeOri5tBw-3tB2pzM/s1600/onplaystre_html_css.jpg">
<h1> Template Sederhana HTML & CSS </h1>
<hr>
<p>
HTML dan CSS Dasar. HTML merupakan bahasa penanda yang digunakan untuk memberikan konten (teks) struktur dan makna semantik. CSS adalah bahasa yang digunakan untuk memberikan konten gaya penampilan yang bagus.
</p>
<a href="#" class="continue-lendo">Selengkapnya →</a>
</div>
<div class="conteudo">
<div class="post-info">
Di Posting Oleh <b>F.Hasan</b>
</div>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivxC8zLSeaECtQNcsS7aU3In6bZblBiLzvNOs1cNaqMsObRJ6ioU_DCQ06g6PFOGq_LKEfFhgHQoCR9-6eKm4zAlpt7E_D8KfvUKoH-yZaS-oCN75UDy8nTz_LXlcCjfDpXxt0_CgQdSM/s1600/onplaystre_html_css2.jpg">
<h1> Belajar HTML Lengkap </h1>
<hr>
<p>
Materi selanjutnya yang akan dibahas dari HTML terdiri dari :
<h3>Elemen DOCTYPE</h3>
<p>Digunakan untuk memberikan informasi kepada browser mengenai versi HTML yang digunakan oleh dokumen.</p>
<h3>Elemen HTML</h3>
<p>Elemen ini mengandung keseluruhan dokumen HTML, yang berarti tag pembuka elemen HTML merupakan tanda awal dokumen HTML, dan tag penutup adalah tanda akhir dokumen.</p>
<h3>Elemen head</h3>
<p>Elemen head pada dokumen digunakan untuk menguraikan berbagai meta data (informasi yang berkaitan dengan dokumen), judul dokumen, dan tautan dokumen ke berkas-berkas eksternal. Berbagai data yang ada di dalam elemen head tidak akan nampak pada halaman web hasil tampilan browser.</p>
<h3>Elemen title</h3>
<p>Memberikan judul dokumen.</p>
<h3>Elemen body</h3>
<p>Elemen ini merupakan penampung dari isi konten dokumen yang akan ditampilkan kepada pengguna. </p>
</p>
<a href="#" class="continue-lendo">Selengkapnya →</a>
</div>
</div>
<!-- akhir bagian konten Blog -->
</div>
</body>
</html>
<head>
<title>onplaystore.blogspot.com</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<!-- bagian header template -->
<header>
<h1 class="judul">Website Android Mobile Otodidak</h1>
<p class="deskripsi">Tutorial pemrograman website, aplikasi,internet jaring dan lain-lain secara otodidak.</p>
</header>
<!-- akhir bagian header template -->
<div class="wrap">
<!-- bagian menu -->
<nav class="menu">
<ul>
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">Ebook</a>
</li>
<li>
<a href="#">Download</a>
</li>
</ul>
</nav>
<!-- akhir bagian menu -->
<!-- bagian sidebar website -->
<aside class="sidebar">
<div class="widget">
<h2>Otodidak</h2>
<p>Selamat Datang di Website Android Mobile Otodidak. Silahkan pelajari lebih lanjut disini <a target="_blank" href="https://oneplaystore.blogspot.com">BELAJAR OTODIDAK</a></p>
</div>
<div class="widget">
<h2>Kumpulan Artikel</h2>
<p>Bagi yang tertarik dengan artikel tentang dunia pemrograman silakan baca disini<a target="_blank" href="https://oneplaystore.blogspot.com">https://oneplaystore.blogspot.com/</a></p>
</div>
</aside>
<!-- akhir bagian sidebar website -->
<!-- bagian konten Blog -->
<div class="blog">
<div class="conteudo">
<div class="post-info">
Di Edit Oleh <b>F.Hasan</b>
</div>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNupQ8VbiKHjbFiS1iNdLKyOkp7sJyyq5Yyo70iT_6KjbqKU-pqhMZdkkYuqUJdzefdwBbDtKc5WFf9wWvSoGrLz8_-uhtvNjnfkg1fQWWTcT_uHMxb9LiiHRxtkOeOri5tBw-3tB2pzM/s1600/onplaystre_html_css.jpg">
<h1> Template Sederhana HTML & CSS </h1>
<hr>
<p>
HTML dan CSS Dasar. HTML merupakan bahasa penanda yang digunakan untuk memberikan konten (teks) struktur dan makna semantik. CSS adalah bahasa yang digunakan untuk memberikan konten gaya penampilan yang bagus.
</p>
<a href="#" class="continue-lendo">Selengkapnya →</a>
</div>
<div class="conteudo">
<div class="post-info">
Di Posting Oleh <b>F.Hasan</b>
</div>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivxC8zLSeaECtQNcsS7aU3In6bZblBiLzvNOs1cNaqMsObRJ6ioU_DCQ06g6PFOGq_LKEfFhgHQoCR9-6eKm4zAlpt7E_D8KfvUKoH-yZaS-oCN75UDy8nTz_LXlcCjfDpXxt0_CgQdSM/s1600/onplaystre_html_css2.jpg">
<h1> Belajar HTML Lengkap </h1>
<hr>
<p>
Materi selanjutnya yang akan dibahas dari HTML terdiri dari :
<h3>Elemen DOCTYPE</h3>
<p>Digunakan untuk memberikan informasi kepada browser mengenai versi HTML yang digunakan oleh dokumen.</p>
<h3>Elemen HTML</h3>
<p>Elemen ini mengandung keseluruhan dokumen HTML, yang berarti tag pembuka elemen HTML merupakan tanda awal dokumen HTML, dan tag penutup adalah tanda akhir dokumen.</p>
<h3>Elemen head</h3>
<p>Elemen head pada dokumen digunakan untuk menguraikan berbagai meta data (informasi yang berkaitan dengan dokumen), judul dokumen, dan tautan dokumen ke berkas-berkas eksternal. Berbagai data yang ada di dalam elemen head tidak akan nampak pada halaman web hasil tampilan browser.</p>
<h3>Elemen title</h3>
<p>Memberikan judul dokumen.</p>
<h3>Elemen body</h3>
<p>Elemen ini merupakan penampung dari isi konten dokumen yang akan ditampilkan kepada pengguna. </p>
</p>
<a href="#" class="continue-lendo">Selengkapnya →</a>
</div>
</div>
<!-- akhir bagian konten Blog -->
</div>
</body>
</html>
4. Buatlah File bernama style.css (jangan lupa exstensi adalah css ya, seperti contoh nama file yang dicetak miring diatas, lalu save as ke dalam folder yang tadi telah dibuat.
5.Copy scrip pada kotak dibawah lalu paste ke file style.css tadi, kemudian save.
-------------------------------
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,800,700,600,300);
body {
background: #eee;
margin:0;
font-family: 'Open Sans', sans-serif;
}
hr {
border:0;
background:#dedede;
height:1px;
}
header{
text-align: center;
color: #232323;
}
header .judul{
font-size: 17pt;
}
header .deskripsi{
font-size: 11pt;
}
.wrap {
width: 950px;
margin:25px auto;
}
nav.menu ul {
overflow:hidden;
color:#fff;
list-style: none;
float:left;
padding:0;
width: 650px;
margin:0 0 0;
background: #1abc9c;
-webkit-box-shadow: 1px 1px 1px 0px rgba(204,204,204,0.55);
-moz-box-shadow: 1px 1px 1px 0px rgba(204,204,204,0.55);
box-shadow: 1px 1px 1px 0px rgba(204,204,204,0.55);
}
nav.menu ul li {
margin:0;
float:left;
}
nav.menu ul a {
padding:25px;
display:block;
font-weight:600;
font-size: 16px;
color:#fff;
text-transform: uppercase;
transition: all 0.5s ease;
text-decoration: none;
}
nav.menu ul a:hover {
text-decoration: underline;
background:#16a085;
}
.sidebar {
float:right;
width:275px;
}
.sidebar .widget {
padding:25px;
margin:0 0 25px;
background:#fff;
border-bottom: 2px solid #fff;
transition: all 0.5s ease;
}
.sidebar .widget:hover {
border-bottom: 2px solid #3498db;
}
.sidebar .widget h2 {
padding:0;
margin:0 0 15px;
color:#3498db;
font-size: 18px;
font-weight:800;
text-transform: uppercase;
}
.sidebar .widget p {
font-size: 14px;
}
.sidebar .widget p:last-child {
margin:0;
}
.blog {
float:left;
}
.conteudo {
width:600px;
padding:25px;
margin:25px auto;
background: #fff;
border:1px solid #dedede;
-webkit-box-shadow: 1px 1px 1px 0px rgba(204,204,204,0.35);
-moz-box-shadow: 1px 1px 1px 0px rgba(204,204,204,0.35);
box-shadow: 1px 1px 1px 0px rgba(204,204,204,0.35);
}
.conteudo img {
min-width: 650px;
margin:0 0 25px -25px;
max-width: 650px;
}
.conteudo h1 {
padding:0;
margin:0 0 15px;
font-weight: normal;
color: #666;
font-family: Georgia;
}
.conteudo p:last-child {
margin: 0;
}
.conteudo .continue-lendo {
color:#000;
transition: all 0.5s ease;
text-decoration: none;
font-weight: 700;
}
.conteudo .continue-lendo:hover {
margin-left:10px;
}
.post-info {
float: right;
font-size: 12px;
margin: -10px 0 15px;
text-transform: uppercase;
}
@media screen and (max-width: 960px) {
.header {
position:inherit;
}
.wrap {
width: 90%;
margin:25px auto;
}
.sidebar {
width:100%;
margin:25px 0 0;
float:right;
}
.sidebar .widget {
padding:5%;
}
nav.menu ul {
width: 100%;
}
nav.menu ul {
float:inherit;
}
nav.menu ul li {
float:inherit;
margin:0;
}
nav.menu ul a {
padding:15px;
font-size: 16px;
border-top:1px solid #1abf9f;
border-bottom:1px solid #16a085;
}
.blog {
width:90%;
}
.conteudo {
float:inherit;
margin:0 auto 25px;
width:101%;
border:1px solid #dedede;
padding:5%;
background: #fff;
}
.conteudo img {
max-width: 110%;
margin:0 0 25px -5%;
min-width: 110%;
}
.conteudo .continue-lendo:hover {
margin-left:0;
}
}
@media screen and (max-width: 460px) {
nav.menu ul a {
padding:15px;
font-size: 14px;
}
.sidebar {
display:none
}
.post-info {
display:none;
}
.conteudo {
margin:25px auto;
}
.conteudo img {
margin:-5% 0 25px -5%;
}
}
Sekarang coba buka pake browser. Kalo pake sublim text klik kanan pada scripnya lalu open browser lihat gambar dibawah ini.
