Membuat Website Sendiri Dengan Mudah
Membuat
Website Sendiri Dengan Mudah
1.
Pengenalan Website
Apa itu Website ?
Website adalah sering juga
disebut Web, dapat diartikan suatu kumpulan-kumpulan halaman yang menampilkan
berbagai macam informasi teks, data, gambar diam ataupun bergerak, data
animasi, suara, video maupun gabungan dari semuanya, baik itu yang bersifat
statis maupun yang dinamis, yang dimana membentuk satu rangkaian bangunan yang
saling berkaitan dimana masing-masing dihubungkan dengan jaringan halaman atau
hyperlink.
Atau
definisi website adalah kumpulan dari berbagai macam halaman situs, yang
terangkum didalam sebuah domain atau juga subdomain, yang lebih tempatnya
berada di dalam WWW (World Wide Web)
yang tentunya terdapat di dalam Internet.
Halaman
website biasanya berupa dokumen yang ditulis dalam format Hyper
Text Markup Language
(HTML), yang bisa diakses melalui HTTP, HTTP adalah suatu protokol yang
menyampaikan berbagai informasi dari server website untuk ditampilkan kepada
para user atau pemakai melalui web browser.
Berikut ini adalah gambar dari
sebuah website yang saya buat sendiri, ,,,
Pastinya anda ingin lebih tau
banyak tentang cara pembuatan website ,,,,
Dalam membuat website ini terlebih
dahulu anda harus membuat coding html.
Cara
Membuat Website Sederhana :
1.
Anda
harus menginstal aplikasi Notepad++ untuk membuat sebuah coding html.
2.
Buatlah
sebuah folder baru dan di save,
3.
Lalu,
buka aplikasi Notepad++ , untuk langkah pembuatan coding anda bisa mencopy
coding yang saya buat ini.
<html>
<head>
<title>Belajar HTML dengan CSS</title>
<link rel="stylesheet" type="text/css"
media="all" href="style7.css">
</head>
<body>
<div id="layout">
<div id="header">
</div>
<div id="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
<li><a href="#">Menu 4</a></li>
</ul>
</div>
<div id="runningtext">
<marquee behavior="scroll" scrollamount="3"
onmouseover="this.stop();"
onmouseout="this.start();"
direction="left">
WELCOME TO MY WEBSITE
</marquee>
</div>
<div id="sidebar">
<div class="widged">
<img src="iklan.gif" class="gambariklan">
</div>
<div class="widged">
<h1 class="judulwidged">Hot Thread</h1>
<ul>
<li> <a href="#">Judul Posting No 1</a>
</li>
<li> <a href="#">Judul Posting No 2</a>
</li>
<li> <a href="#">Judul Posting No 3</a>
</li>
</ul>
</div>
</div>
<div id="isi">
<div class="isiposting"><!--menampilkan gambar
-->
<img src="mawar.jpg" class="gambardepan">
<h2>Tanaman Bunga Mawar</h2>
isiberita isiberita isiberita isiberita isiberita
isiberita isiberita isiberita isiberita isiberita
isiberita isiberita isiberita isiberita isiberita
isiberita isiberita isiberita isiberita isiberita
isiberita
<br>
<a href="posting1.html">
Berita selengkapnya >>
</a>
</div>
<div class="isiposting"><!--menampilkan gambar
-->
<img src="dahlia.jpg" class="gambardepan">
<h2>Tanaman Bunga Dahlia</h2>
isiberita isiberita isiberita isiberita isiberita
isiberita isiberita isiberita isiberita isiberita
isiberita isiberita isiberita isiberita isiberita
isiberita isiberita isiberita isiberita isiberita
isiberita
<br>
<a href="posting2.html">
Berita selengkapnya >>
</a>
</div>
<div class="isiposting"><!--menampilkan gambar
-->
<img src="kamboja.jpg"
class="gambardepan">
<h2>Tanaman Bunga Kamboja</h2>
isiberita isiberita isiberita isiberita isiberita
isiberita isiberita isiberita isiberita isiberita
isiberita isiberita isiberita isiberita isiberita
isiberita isiberita isiberita isiberita isiberita
isiberita
<br>
<a href="posting3.html">
Berita selengkapnya >>
</a>
</div>
</div>
<div id="footer"> © 2016|Diyanti</div>
</div>
</body>
</html>
4.
Setelah
coding html ini di copy dalam notepad ++ , selanjutnya anda save ke dalam
folder yang anda buat.
5.
Berkas
html ini saya beri nama “Paraktek7.html”
6.
Setelah
anda save , lalu buat lagi berkas baru di notepad++ untuk css.
CSS berfungsi untuk mempercantik
tampillan html untuk website yang anda buat.
Berikut coding css yang saya buat
:
/* pengaturan body */
body {
background-image :url(blue.jpg);
text-align: center;
font : .90em/1.5em Comic Sans MS;
}
/* pengaturan layout utama */
#layout {
background : #fff;
width : 980px;
margin : auto;
text-align : left;
padding : 2px;
}
#header{
width : 100%;
height : 130px;
background-color : #02a2d8;
position : relative;
}
/*pengaturan menu*/
#menu{
width : 100%;
height : 40px;
background-image :url(polka.jpg);
position : relative;
}
/*pengaturan runingtext*/
#runningtext{
width : 100%;
height : 25px;
padding-top : 7px ;
margin : 5px 0 5px 0;
background-color :red;
color : black;
position : relative;
}
/*pengeturan isi*/
#isi{
padding : 5px;
width : 70%;
height : auto;
background-color : #ba7584;
position : relative;
margin-top : 5px;
}
#sidebar{
padding : 5px;
width : 27%;
background-color : #d3beaa;
position : relative;
float : right;
/*memberikan garis putus-putus*/
border-style : dotted;
border-width : 1px;
}
#footer{
width : 100%;
height : 50px;
margin-top : 5px;
padding-top : 30;
background-color : #0066FF;
color : white;
font-size : 12pt;
text-align : center;
position : relative;
}
/*pengaturan posting*/
.isiposting{
background-color : #bc9d64;
width : 98%;
height : 150px;
margin-bottom : 5px;
padding : 5px;
}
/*pengaturan gambar yang di halaman depan*/
.gambardepan{
float: left;
height: 100px;
width: 150px;
margin-right: 5px;
margin-top: 3px;
padding: 1px;
border: 1px solid #dddddd;
}
/*pengaturan heading2 “Judul” */
h2 {
font-size : 20px;
font-weight : bold;
color : #ffffff;
margin-top : 4px;
margin-bottom : 3px;
}
/*pengaturan anchor atau link yang ada di
isiposting */
.isiposting a{
text-decoration : none;
}
.isiposting a:hover{
color: yellow;
}
/*pengaturan widget sidebar*/
.widged{
width : 99%;
margin-bottom : 5px;
background : #ffffff;
border-top : 1px solid #DFDFDF;
border-bottom : 1px solid #DFDFDF;
border-right : 1px solid #DFDFDF;
border-left : 1px solid #DFDFDF;
font-size : 100%;
margin : 0px 0px 5px 0px;
}
/*pengaturan ukuran iklan dg gambar pada widged*/
.gambariklan{
width : 99%;
height : 150px;
}
/*pengatusan huruf judul widged*/
.judulwidged{
background :#d74006;
padding : 5px 10px 5px 10px;
margin : 0px 0px 0px 0px;
text-align : center;
color : white;
font-weight : bold;
font-size : 15px;
margin-bottom : 5px;
}
.widged ul {
margin : 0px 0 0px 0px;
padding : 0px 0px 0px 0px;
list-style-type : none;
}
.widged li {
padding : 0px 0px 0px 0px; /*top
right bottom left*/
background-position : left;
background-repeat: no-repeat;
color : #333333;
}
.widged li a {
color : #333333;
border-bottom : 1px dotted #cccccc;
text-decoration : none;
display : block;
margin-bottom : 5px;
padding : 4px 5px 4px 10px;
}
.widged li a:hover {
color : blue;
}
/*pengaturan menu*/
#menu ul {
margin: 0;
padding: 0;
list-style: none;
}
#menu ul li {
float: left;
}
#menu ul li a {
float: left;
color: #00000;
padding: 12px 20px;
text-decoration: none;
background-image:url(polka.jpg);
border-left: 1px solid #3C4042;
border-right: 1px solid #3C4042;
text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.6);
}
#menu ul li a:hover {
color: white;
background: #3C4042;
}
7.
Lalu
setelah coding css ini copy paste selanjutnya di save dalam folder yang sama
dengan file “Praktek7.html”
8.
Save
coding css ini dengan memberi file name “Style7.css”
9.
Selanjutnya
untuk mengubah gambar di <img src> gambar harus di save dalam satu folder
tadi dengan praktek7.html dan syle7.css agar gambar yang diinput bisa muncul.
10.
Dan
bila anda ingin website ini lebih menarik, anda bisa merubah atau menambah kan
coding lagi se-kreatif mungkin.
Sekian, berikut adalah sebuah
website yang saya buat sendiri, anda bisa mencoba bila ada waktu luang.
Dan berkreasi sebagus mungkin
untuk membuat website ^_^
Wynn Las Vegas - Gold Casino - MGM Grand
BalasHapusThe casino is a hotel 하하 포커 머니 상 within 벳 365 우회 접속 a 5-minute drive of the airport. Guests can enjoy 배팅 dining at 블랙잭애니 the Wynn and other popular amenities. Additionally, there is a 꽁머니 지급 seating area