Tahapan Desain dan Membuat Web dengan HTML
Untuk memudahkan dalam belajar membuat web, maka berikut adalah tahapan dalam desain dan membuat web yang secara besar tahapan materi/artikel dibagi menjadi 3 bagian secara berurutan yaitu HTML, CSS dan Penerapan. Ini merupakan langkah-langkah yang akan ditempuh dalam mempelajari cara membuat web, cara-cara ini akan ditempuh jika kita dalam membuat website ini kita menggunakan teknik “hand coding” bukan menggunakan CMS.
1. HTML
Pada bagian awal yang harus dipelajari adalah bagaimana skrip HTML digunakan untuk membuat halaman Web. memulai untuk menuliskan kata-kata atau kalimat yang ingin ditampilkan pada halaman web.
Memberi tag pada setiap kata atau group kata untuk menandainya sebagai judul, paragraf, dan lain sebagainya.
Juga dijelaskan lebih rinci tentang bagaimana mengatur teks, list atau daftar, link, gambar, tabel, bentuk-bentuk atau shapes, audio video dan flash, dan unsur lain-lain.
Untuk permulaan, contoh-contoh kode html yang di buat latihan akan terlihat membosankan, namun itu adalah dasar dari pembuatan halaman web.
Selanjutnya belajar tentang CSS yaitu suatu skrip yang digunakan untuk mengatur kode html yang sudah dibuat agar terlihat jauh lebih menarik.
2. CSS
Pada bagian ini yang akan dipelajari adalah bagaimana kinerja skrip css untuk mengontrol styling dan tata letak pada sebuah halaman web.
Untuk selanjutnya memahami berbagai properti dalam skrip CSS, properti ini dibagi dalam dua kategori:
Presentasi: Cara mengontrol objek seperti warna teks, font yang ingin digunakan dan ukurannya, bagaimana cara menambah warna background pada suatu halaman, atau mengubahnya dengan gambar.
Layout: Cara mengontrol posisi semua unsur-unsur pada layar dan belajar bagaimana teknik untuk membuat halaman lebih menarik.
3. PENERAPAN
Setelah memahami tentang CSS dan HTML, Pada tahapan akhir jangan lupa untuk mempelajari tips seputar informasi yang akan membantu dalam membangun website, yaitu tentang bagaimana menaruh web dalam hosting online, meningkatkan SEO, menggunakan Google Analytics, dan masih banyak lagi.
Perlu diketahui beberapa tag baru telah diperkenalkan HTML5 untuk membantu mengatur struktur halaman web. HTML5 adalah versi terbaru dan terakhir saat ini, mempelajari HTML5 akan membuat website kita mempunyai fitur dari HTML yang paling baru, pelajari HTML5 lebih mendetail beserta prakteknya setelah kita mengerti akan dasar mengenai HTML dan CSS.
Berikut ini Tahapan Desain dan Membuat Web dengan HTML masih menggunakan Notepad/Notepad++:
1. Buat folder bebas dan simpan diamana terserah anda.
2. Buka lah Notepad atau notepad++
3. Kemudian untuk langkah selanjutnya,Ketik script sederhana (contoh) HTML berikut:
3. Kemudian untuk langkah selanjutnya,Ketik script sederhana (contoh) HTML berikut:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="image">
</div>
<img src="batam.jpg" width="1500px" height="500px">
<div id="header">
<ul>
<li><a href="nav.html">Home</a></li>
<li><a href="nav.html">News</a></li>
<li><a href="nav.html">Contact</a></li>
<li><a href="nav.html">About</a></li>
</ul>
</div>
<div id="nav">
<img src="lastri.JPG" width="150" height="170"><br>
<p>
Nama : Lastri Yanti<br/>
Pekerjaan : Karyawan Swasta<br/>
Negara : Indonesia<br/>
Alamat : Komp. Tering Raya Blok B1 No. 35<br/>
Hoby : Selfi<br/> </p>
<hr>
<p align="justify">
Saya adalah seorang mahasiswa asal Batam, Indonesia.
Saya menyukai traveling, teater dan musik.
</p>
</div>
<div id="kanan">
<ul>
<li><a href="nav.html">Menu 1</a></li>
<li><a href="nav.html">Menu 2</a></li>
<li><a href="nav.html">Menu 3</a></li>
<li><a href="nav.html">Menu 4</a></li>
</ul>
</div>
<div id="section">
<h1>Biodata</h1>
<p>
Saya Lastri Yanti Mahasiswa STT IBNU SINA Semester 2 Teknik Informatika
Umur saya 20 tahun, saya anak ke-2 dari 3 bersaudara
</p>
<p>
Sekian biodata singkat tentang saya, jika ingin mengetahui saya lebih lanjut silahkan add fb atau twitter saya.
</p>
</div>
<div id="tengah"></div>
<div id="footer">
<marquee><font color="white">lastriyanti@rocketmail.com</font><marquee>
</div>
</body>
</html>
Simpan Script HTML di atas pada folder yang sudah di buat.<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="image">
</div>
<img src="batam.jpg" width="1500px" height="500px">
<div id="header">
<ul>
<li><a href="nav.html">Home</a></li>
<li><a href="nav.html">News</a></li>
<li><a href="nav.html">Contact</a></li>
<li><a href="nav.html">About</a></li>
</ul>
</div>
<div id="nav">
<img src="lastri.JPG" width="150" height="170"><br>
<p>
Nama : Lastri Yanti<br/>
Pekerjaan : Karyawan Swasta<br/>
Negara : Indonesia<br/>
Alamat : Komp. Tering Raya Blok B1 No. 35<br/>
Hoby : Selfi<br/> </p>
<hr>
<p align="justify">
Saya adalah seorang mahasiswa asal Batam, Indonesia.
Saya menyukai traveling, teater dan musik.
</p>
</div>
<div id="kanan">
<ul>
<li><a href="nav.html">Menu 1</a></li>
<li><a href="nav.html">Menu 2</a></li>
<li><a href="nav.html">Menu 3</a></li>
<li><a href="nav.html">Menu 4</a></li>
</ul>
</div>
<div id="section">
<h1>Biodata</h1>
<p>
Saya Lastri Yanti Mahasiswa STT IBNU SINA Semester 2 Teknik Informatika
Umur saya 20 tahun, saya anak ke-2 dari 3 bersaudara
</p>
<p>
Sekian biodata singkat tentang saya, jika ingin mengetahui saya lebih lanjut silahkan add fb atau twitter saya.
</p>
</div>
<div id="tengah"></div>
<div id="footer">
<marquee><font color="white">lastriyanti@rocketmail.com</font><marquee>
</div>
</body>
</html>
4. Lalu,Buka TAB baru di Notepad atau Notepad++
5. Langkah berikutnya adalah proses untuk mengedit jarak, tampilan, dll pada blog/web anda, Berikut script nya.
5. Langkah berikutnya adalah proses untuk mengedit jarak, tampilan, dll pada blog/web anda, Berikut script nya.
#image
{
background-image:url("jembatan.jpg");
padding-left:100px;
height:150px;
}
#header {
background-color:#000000;
color:purple;
text-align:center;
padding:5px;
padding-left:150px;
}
#nav {
line-height:30px;
height:730px;
width:200px;
float:left;
padding-top:5px;
}
#kanan {
line-height:30px;
height:300px;
width:200px;
float:right;
padding-top:5px;
}
#section {
width:350px;
float:left;
padding:50px;
}
#footer {
background-color:#000000;
color:white;
text-align:center;
padding:5px;
clear:both;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
a:link, a:visited {
display: block;
width: 200px;
font-weight: arial;
color: #FFFFFF;
background-color: #98bf21;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
}
a:hover, a:active {
background-color: #000000;
}
#garis {
width: 200px;
float:left;
background-color:#4c5f10;
text-transform: uppercase;
}
7. Simpan Script diatas dengan format cascade style sheet(*css),dan disimpan dalam satu folder yang sudah dibuat.
{
background-image:url("jembatan.jpg");
padding-left:100px;
height:150px;
}
#header {
background-color:#000000;
color:purple;
text-align:center;
padding:5px;
padding-left:150px;
}
#nav {
line-height:30px;
height:730px;
width:200px;
float:left;
padding-top:5px;
}
#kanan {
line-height:30px;
height:300px;
width:200px;
float:right;
padding-top:5px;
}
#section {
width:350px;
float:left;
padding:50px;
}
#footer {
background-color:#000000;
color:white;
text-align:center;
padding:5px;
clear:both;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
a:link, a:visited {
display: block;
width: 200px;
font-weight: arial;
color: #FFFFFF;
background-color: #98bf21;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
}
a:hover, a:active {
background-color: #000000;
}
#garis {
width: 200px;
float:left;
background-color:#4c5f10;
text-transform: uppercase;
}
(*NB.Teks kalimat,gambar,warna dapat anda rubah sesuai keinginan anda,saya disini hanya memberikan contoh belajarnya saja)
7. Simpan Script diatas dengan format cascade style sheet(*css),dan disimpan dalam satu folder yang sudah dibuat.
8. Biasanya dalam satu folder berisi:
9. Sekarang bukalah broser anda, bisa menggunakan Mozilla firefox ataupun Google Chrome dan bukalah file html yang sudah anda simpan tersebut. maka hasil tampilannya akan seperti berikut ini:
Sekian artikel Tahapan Desain dan Membuat Web dengan HTML. Happy Nyekrip! Terimakasih telah berkunjung. Salam optimis:)
#tugas4
0 komentar:
Posting Komentar