Belajar membuat website sederhana dengan menggunakan HTML dan CSS (PART1)
26 April 2020
8 Comments
Taukah kalian tentang apa itu HTML ?... HTML atau yang disebut sebagai Hyper Text Markup Language. Awal mula dari HTML sendiri dari IBM yang berniat membuat bahasa kode atau baasa pemrograman yang menggabungkan antara text dengan perintah pemformatan untuk mengenali elemen dokumen.
Untuk pemula biasanya hal yang harus diperhatikan pertama adalah software-software yang sudah kalian install sebelumnya. Untuk pemrograman web, biasanya software yang digunakan adalah Notepad++, dan browser seperti Mozila,Chrome, dan yang lain.
Setelah Tools atau software seperti Notepad++ sudah terinstall silakan dibuka, dan pastikan browser kalian telah teristall. Untuk memulai bahasa pemrograman web seperti HTML, silakan kalian pahami terlebih dahulu Tag seperti dibawah ini :
Diatas adalah Tag basic dalam HTML. Kita langsung praktek. Pertama, setelah kalian membuka Notepad++, silakan ketik kode dibawah ini ya.
<!DOCTYPE html>
<html>
<tittle>
<h1>Judul Anda<h1>
</tittle>
<body>
<h2>judul artikel anda</h2>
<br>
<h4>isi dari artikel anda</h4>
</body>
</html>
Setelah kode diatas telah diketik, silakan klik Save, dan simpan dengan ekstensi sharkvalue.html saat save pilih save dengan html seperti dibawah ini :
Kemudian untuk melihat hasilnya, silakan kalian buka sharkvalue.html yang kalian buat tadi. Secara otomatis akan berubah menjadi tampilan chrome atau mozila sesuai browser anda. Maka tampilannya seperti dibawah ini :
Bagaimana teman-teman mudahkan ?... Selanjutnya kita mencoba untuk membuat sebuah artikel, kemudian artikelnya nanti kita desain/dihias.
untuk membuat desain pada web kita gunakan CSS. Apa itu CSS ?...
CSS atau yang disebut Cascading Style Sheet adalah bahasa pemrograman desain yang mempermudah proses pembuatan website. Dengan adanya CSS pada website anda, maka website anda akan lebih enak dilihat danjuga menarik.
Langkah awal sebelum membuat CSS kita buat ulang strukture html kita supaya lebih bagus silakan buat file sharkvalue.html dengan koding seperti dibawah ini :
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="wrap">
<div class="header">
<h1>SHARKVALUE </h1>
<p>Tutorial belajar membuat layout website sederhana</p>
</div>
<div class="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Pembelajaran</a></li>
<li><a href="#">Hardware</a></li>
<li><a href="#">Software</a></li>
<li><a href="#">Game Android</a></li>
</ul>
</div>
<div class="badan">
<div class="sidebar">
sidebar
<ul>
<li><a href="#">Tutorial Memasang Hardware</a></li>
<li><a href="#">Tutorial Memasang Software</a></li>
<li><a href="#">Tutorial Bermain Game Android</a></li>
</ul>
</div>
<div class="content">
content
</div>
</div>
<div class="clear"></div>
<div class="footer">
footer
</div>
</div>
</body>
</html>
Setelah kode diatas selesai maka tampilannya akan seperti dibawah ini :| Basic | |
| <!DOCTYPE> | Tag untuk menentukan tipe dokumen |
| <html> | Tag untuk membuat sebuah dokumen HTML |
| <title> | Tag untuk membuat judul dari sebuah halaman |
| <body> | Tag untuk membuat tubuh dari sebuah halaman |
| <h1> to <h6> | Tag untuk membuat heading |
| <p> | Tag untuk membuat paragraf |
| <br> | Memasukan satu baris putus |
| <hr> | Tag untuk membuat perubahan dasar kata didalam isi |
| <!--...--> | Tag untuk membuat komentar |
<!DOCTYPE html>
<html>
<tittle>
<h1>Judul Anda<h1>
</tittle>
<body>
<h2>judul artikel anda</h2>
<br>
<h4>isi dari artikel anda</h4>
</body>
</html>
Setelah kode diatas telah diketik, silakan klik Save, dan simpan dengan ekstensi sharkvalue.html saat save pilih save dengan html seperti dibawah ini :
 |
| Simpan dengan extensi html |
 |
| Tampilan Web sederhana |
untuk membuat desain pada web kita gunakan CSS. Apa itu CSS ?...
CSS atau yang disebut Cascading Style Sheet adalah bahasa pemrograman desain yang mempermudah proses pembuatan website. Dengan adanya CSS pada website anda, maka website anda akan lebih enak dilihat danjuga menarik.
Langkah awal sebelum membuat CSS kita buat ulang strukture html kita supaya lebih bagus silakan buat file sharkvalue.html dengan koding seperti dibawah ini :
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="wrap">
<div class="header">
<h1>SHARKVALUE </h1>
<p>Tutorial belajar membuat layout website sederhana</p>
</div>
<div class="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Pembelajaran</a></li>
<li><a href="#">Hardware</a></li>
<li><a href="#">Software</a></li>
<li><a href="#">Game Android</a></li>
</ul>
</div>
<div class="badan">
<div class="sidebar">
sidebar
<ul>
<li><a href="#">Tutorial Memasang Hardware</a></li>
<li><a href="#">Tutorial Memasang Software</a></li>
<li><a href="#">Tutorial Bermain Game Android</a></li>
</ul>
</div>
<div class="content">
content
</div>
</div>
<div class="clear"></div>
<div class="footer">
footer
</div>
</div>
</body>
</html>
 |
| Tampilan web Tanpa CSS |
.wrap{
background: blue;
width: 900px;
margin: 10px auto;
}
/*bagian header*/
.wrap .header{
background: green;
/*height: 50px;*/
padding: 2px 10px;
}
/*akhir header*/
/*bagian menu*/
.wrap .menu{
background: yellow;
}
.wrap .menu ul{
padding: 0;
margin: 0;
background: yellow;
overflow: hidden;
}
.wrap .menu ul li{
float: left;
list-style-type: none;
padding: 10px;
}
/*akhir menu*/
.clear{
clear: both;
}
.badan{
height: 450px;
}
/*bagian sidebar*/
.wrap .badan .sidebar{
background: orange;
float: left;
width: 25%;
height: 100%;
}
/*akhir sidebar*/
.wrap .badan .content{
background: red;
float: left;
height: 100%;
width: 75%;
}
.wrap .footer{
width: 100%;
padding: 10px;
}
setelah sharkvalue.html dan style.css berada pada folder yang sama, maka tampilannya akan berubah menjadi :
 |
| Tampilan Web Setelah diberi CSS |
Sharkvalue (Share Infromation For you)
8 Responses to "Belajar membuat website sederhana dengan menggunakan HTML dan CSS (PART1)"
Mantap gan...
Remarkably! It is as if you read my mind! A person appear to know therefore considerably relating to this, just like you authored the book inside it or something. I feel that you can do with a few images to drive the content residence a bit, on top of that, this really is great weblog. The outstanding study. I will definitely review again. website designers nyc
Thankyou for this post, I am a big big fan of this web site would like to proceed updated. web design in new york
I really wanted to make a brief comment in order to appreciate you for these nice strategies you are giving out on this site. My particularly long internet look up has finally been compensated with reliable content to go over with my neighbours. I ‘d say that many of us readers are undoubtedly endowed to be in a great network with so many marvellous individuals with helpful techniques. I feel truly privileged to have used your entire site and look forward to so many more awesome minutes reading here. Thank you once more for a lot of things. ny web design firms
Enjoyed looking at this, very good stuff, thanks . website design company nyc
I have been absent for a while, but now I remember why I used to love this web site. Thank you, I will try and check back more frequently. How frequently you update your site? branding agencies in san francisco
Hey there. I want to to ask a little something…is this a wordpress web log as we are planning to be transferring over to WP. Additionally did you make this template all by yourself? Many thanks. brand identity design agency
Sewing Machines… [...]plenty of time to read through as well as visit the articles as well as sites we have now linked to[...]… san fran design firms
Post a Comment