Design web lanjutan? mungkin pada bingung apa yang akan dilanjutkan :D Baiklah langsung saja desing web lanjutan ini merupakan lanjutan dari artikel Mendesign web sederhana dengan menggunakan HTML. Selanjutnya pada artikel design yang yang sudah ada kita akan menambahkan sedikit atribut mungkin bisa jadi agar terlihat lebih menarik dn ramai. Seperti biasa silahkan simak tutorialnya!
Untuk pengetikkan script kali ini belum ada yang berupah tetap menggunakan notepad atau notepad++
scriptnya seperti dibawah ini:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="image">
</div>
<div id="header">
<ul>
<li><a href="depan.html">Depan</a></li>
<li><a href="depan">Bio</a></li>
<li><a href="depan">Testimoni</a></li>
<li><a href="depan">Info</a></li>
</ul>
</div>
<div id="nav">
<img src="momon.JPG" width="215" height="220"><br>
<p align="left">
<strong>Nama :</strong> Monica Rachma Marantika<br/>
<strong>Pekerjaan :</strong> Freelance<br/>
<strong>Negara :</strong> Indonesia<br/>
<strong>Alamat :</strong> Melcem City<br/>
<strong>Hoby :</strong> Tidur<br/> </p>
<hr>
<p align="left">
<strong>"Banyak Jalan Menuju Cina, Tapi kalau gak punya biaya ya g bisa</strong>
</p>
</div>
<div id="kanan">
<ul>
<li><a href="depan.html">Depan</a></li>
<li><a href="depan">Bio</a></li>
<li><a href="depan">Testimoni</a></li>
<li><a href="depan">Info</a></li>
</ul>
</div>
<div id="section">
<h1><strong>HALAMAN UTAMA</strong></h1>
<p>
Selamat Datang Dihalaman Utama.
</p>
<img src="mini.jpg" width="800" height="520"><br>
</div>
<div id="footer">
<table width="648" cellpadding="5" align="center"><br>
<div align="center"><font FONT FACE="georgia" color="White"><B>
MOMON@2015
</b></FONT></div>
</div>
</body>
</html>
Script telah selsai, eiitss tetapi sesungguhnya masih ada untuk script beriktnya lagi. Untuk script diatas silahkan di simpan dalam format HTML dalam satu folder. Kemudian mulailah menulis lagi untuk script kedua, script kedua ini akan berbentuk CSS yang berguna untuk melengkapi warna design, gambar design, jenis font, size font, size picture dll.Contok scriptnya berbentuk seperti ini:
#image { background-image:url("jos.jpg"); padding-left:100px; height:200px; } #header { background-color:yellow; color:blue; text-align:center; padding:5px; padding-left:150px; } #nav { margin:0 auto 10px; line-height:30px; height:730px; width:210px; background-color:pink; float:left; padding-top:5px; } #kanan { line-height:30px; height:300px; width:200px; float:right; padding-top:5px; } #section { width:820px; height:635px; background-color:white; float:left; padding:50px; } #footer { background-color:#000000; color:blue; text-align:center; padding:5px; clear:both; margin:0 auto; padding-top:15px; line-height: 1.6em; text-transform:uppercase; letter-spacing:.1em; text-align: center; } ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; } li { float:left; } a:link, a:visited { display: block; width: 200px; font-weight: georgian; color: white; background-color: blue; text-align: center; padding: 4px; text-decoration: none; text-transform: uppercase; } a:hover, a:active { background-color: green; } #garis { width: 200px; float:left; background-color:blue; text-transform: uppercase; }Karna scrpt ini dibutuhkan dalam brntuk Css maka simpan file ini dengan format Css dalan satu folder bersama dengan scrip pertama tadi. Jangan lupa melampirkan juga gambar yang hendak dimasukan dalam desig web, simpan gambar dalam folder bersama scriptnya. Pastikan nama gambar telah sesui dengan nama gambar pada script, karna jika nama tidak sesuai maka gambar tidak akan muncul pada design webnya. contok peletakkan dalam folder misalnya seperti ini:
Langkah terakhir adalah buka lah file scriptnya yang berbentuk HTML maka tampilan yang ditampilkan oleh browser adalah seperti ini:
Mudah kan guys? tinggal ikuti langkah-langkahnya aja kok :D jika ingin menambah gambar atau atriby lainnya bisa aja untuk lebih memperindah tampilan web kamu..Baiklah sekian dulu yaa guys semoga bermanfaat, sampai dan terima kasih....
4 komentar:
Materinya sangat bagus, ditunggu postingan berikutnya sis....
SEMANGAT (y)
MANTAP
Baiklah terima kasih rekan'' :)
makasih,bermanfaat banget
http://www.atmaluhur.ac.id
https://kawakenakeruce.mahasiswa.atmlauhur.ac.id
Posting Komentar