Septi IT - seputar informasi dan teknologi

Showing posts with label website. Show all posts

Cara Membuat Website Sendiri mudah dan gratis

Hallo, sejahtera semua, kali ini akan dibahas cara membuat website sendiri, mungkin bagi yang ingin belajar membuat website tentu akan membutuhkan waktu bagi yang belejar Otodidak dan terasa sulit.

Adapun Step by step akan saya paparkan untuk membuat website, sebelum bisa membuat website silakan membaca

Dasar HTML yang Wajib Dikuasai

Dari dasar HTML itu bisa ditarik kesimpulan bahwa menjadi Programer website harus mengerti syntak dari setiap bahasa pemrograman.

Software Code Editor
Harus memiliki kode Editor untuk website bisa menggunakan Notepade ++ atau paling direkomendasikan adalah Adobe Dreamwaver CS6

Buat Dasar Kerangka HTML



<html>
<head>
<title>isikan judul website</title>
</head>
<body>
disini tempat kode element dan sebagainya
</body>
</html>

Kode diatas adalah dasar dari html, silakan di copy atau buat sendiri seperti itu.

Menambah Element layout atau <div>
Fungsi DIV ini digunakan untuk membentuk suatu element kerangka dasar yang akan di hiasi oleh CSS nanti.


<html>
<head>
<title>Juduh website</title>
</head>

<body>
<div id="coverluar"> <!--sangat penting untuk mengatur layout-->
 <div id="kepala">
    </div>
    <div id="menu">
    </div>
    <div id="menukiri">
    </div>
    <div id="isitengah">
    </div>
    <div id="kaki">
    </div>
</div>
</body>
</html>


<link rel="stylesheet" href="custom.css" type="text/css" />
</head>

Baca Berikutnya

Membuat File CSS


#coverluar{
 width:900px; /*tentukan lebar layout*/
 margin:auto;
 display:block; /*agar posisi layout di tenagh*/
 border:1px solid #CCC;
}


@charset "utf-8";
/* CSS Document */
#coverluar{
 width:900px; /*tentukan lebar layout*/
 margin:auto;
 display:block; /*agar posisi layout di tenagh*/
 border:1px solid #CCC;
}

#kepala{
 height:150px;
 background:#0FF;
 clear:both;/*mematikan fungsi float left/kanan,*/
}
#menu{
 width:900px;
 height:50px;
 clear:both;
}
#menukiri{
 width:200px;
 height:700px;
 float:left;
 background:#999;
}
#isitengah{
width:700px;
height:700px;
float:left;
background:#CCC;
}

#kaki{
 clear:both;
 height:50px;
 width:900px;
 background:#333;
 color:#fff; 
}

coba cek hasilnya

cara mudah membuat website sendiri septi it

Membuat menu


 <div id="menu">
    <ul>
     <li><a link href="#">Home</a></li>
        <li><a link href="#">Menu 1</a></li>
        <li><a link href="#">Menu 2</a></li>
        <li><a link href="#">Menu lainnya</a></li>
        <li><a link href="#">About Use</a></li>
    </ul>
    </div>


#menu{
 width:900px;
 height:50px;
 clear:both;
 background:#000; /*penambahan background ya, sebelumhnya belum di isi*/
}


#menu ul li{
 display:inline;
 float:left;
 height:40px;
 width:15%;
 list-style:none; /*menghilangkan tanda titik hitam di depan value menu */
}



#menu ul li a{
  text-decoration:none; /*menghilangkan garis bawah */
  color:#fff;  
  padding:13%;
}
#menu ul li a:hover{ 
/*agar saat cursor diatas menu kita akan memberi perubahan warna yg berbeda */
  text-decoration:none;
  color:#fff;  
  padding:13%;
  background:#fff;
  color:#000;
}

Hasilnya

Baca Sebelumnya

Hallo semua kali ini saya mau membahas tentang dasar dasar html yang harus dikuasai jika ingin menjadi web designer.

Tetapi sebelum belajar dasar HTML, kalian harus tau software apa yang harus kalian pakai untuk belajar dasar html.....

jika kalian ingin menggunakan notepade bisa..! tetapi itu akan sulit kita tau kode yang kita tuliskan apakah benar atau tidak, nah silakan baca

Wajib Install Software ini untuk membuat website

Nah itu beberapa software kalian wajib install , nah dasar menjadi seorang programing atau untuk bisa menjadi seorang designer web adalah ketekunan dan niat.

karena kita harus belajar bahasa yang dimana kita pun sulit untuk menerjemahkan, itu disebut bahasa pemrograman.

untuk bisa menguasai bahasa pemrograman kita harus tau syntak / aturan penulisan sebuah code,

Baca juga aturan syntax HTML

Kerangka dasar HTML

Untuk bisa memahami bahasa pemrograman HTML, yang harus di ketahui adalah kerangka dasar HTML,



<html><!--ini kerangka luar/kulit html-->
<head><!--kepala kerangka-->
<title>title websitenya</title><!--title/judul dari website kita buat-->
</head>
<body><!--tempat memasang kode,artikel dan lain lain-->
<p>tempat mengisikan </p>
<p>artikel atau element pembentuk website</p>

<!-- setiap kode yg di buat
contoh :
"<html>"  selalu di akhiri "</html>" -->
</body>
</html><!--penutup kode kerangka html-->

itu wajib ada sebelum membuat atau memasang kode di body html ataupun javascript logikanya ini adalah wadah utamanya.

Kode Dasar HTML

HEADING
```
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
...............
sampai 
<h6>heading 6</h6>

```
kode ini digunakan untuk memberi judul dan membedakan anatar mana judul induk dan sub judul

PARAGRAF
```
<p>Ini Isi paragraf 1</p>
<p>Ini Isi paragraf 2</p>
<p>Ini Isi paragraf  dan seterusnya</p>
```
ini berfungsi untuk membuat paragraf, paragraf sangat penting untuk kenyamanan dalam membaca artikel dan tips saya , untuk membuat artikel yg enak dilihat, minimal 3 baris dalam 1 paragraf.

BOLD , ITALIC DAN UNDERLINE
dalam menulis artikel mungkin perlu tau kode untuk memberi huruf tebal, miring dan bergaris bawah...Ini sangat diperlukan untuk penekanan setiap kata pada artikel.


<b> Untuk Menebalkan huruf </b>
<i> Untuk Memmbuat huruf bertuliskan miring </i>
<u> Untuk Membuat Huruf Bergaris Bawah </u>

Baca Selanjutnya

Menu List


<ul>
<li>menu 1</li>
<li>Menu 2</li>
</ul><!-- ini menggunakan menu list dengan pengurutan symbol--> 

<ol>
<li>menu 1</li>
<li>Menu 2</li>
</ol><!-- ini menggunakan menu list dengan penomeran angka-->

Penomeran Dengan ANGKA

Pengurutan dengan symbol

Table


<table>
<tr>
<td>Baris 1 Kolom 1</td>
<td>Baris 1 Kolom 2 </td>
</tr>
<tr>
<td>Baris 2 Kolom 1</td>
<td>Baris 2 Kolom 2 </td>
</tr>
<tr>
<td>Baris 3 Kolom 1</td>

Baris 1 kolom 1	Baris 1 kolom 2
Baris 2 kolom 1	Baris 2 kolom 2
Baris 3 kolom 1	Baris 3 kolom 2

Tag DIV

Kembali

Septi IT - Seputar informasi dan Teknologi

Cara Membuat Website Sendiri mudah dan gratis

Software Code Editor

Buat Dasar Kerangka HTML

Menambah Element layout atau <div>

Cara Membuat Website Sendiri mudah dan gratis (part 2)

Membuat File CSS

Membuat menu

Dasar html Wajib Dikuasai

HEADING

PARAGRAF

BOLD , ITALIC DAN UNDERLINE

Dasar Html part 2

Menu List

Table

Tag DIV

Populer Post

Blog Archive