skip to main | skip to sidebar

ILHAM BLOG TKJ

Semoga hari ini berjalan dengan lancar dari hari kemarin JUST FOLLOW @ilhamBJDM

  • Entries (RSS)
  • Comments (RSS)
  • Home
  • Facebook
  • Sekolah

Sabtu, 29 Maret 2014

Dasar Membuat Desain Web Site

Diposting oleh Unknown di 11:17:00 AM Label: MULOK
1.      Membuat judul tab dalam halaman web, buka notepad++ terlebih dahulu, kemudian ketikan code dibawah ini:
<html>
<head>
  <title> My First HTML Project </title>
</head>
  <body BGCOLOR=“Green” TEXT=“Red”>
     WELCOME TO MY WEBSITE
</body>
<body bgcolor=”#00ff00”>
</html>
Langkah selanjutnya simpan dalam format HTML dan buka file dengan firefox atau sejenisnya, maka hasilnya akan seperti pada gambar 1 berikut:
 
Gambar 1.  Judul Tab Halaman
2.      Mengatur paragraf texs, buka notepad++ kemudin ketikan code dibawah ini:
<html>
<head>
 <title> Tag P, Br dan Hr </title>
</head>
<body>
 <p>Ini adalah paragraf pertama, yang berisi 3 baris.  Baris satu, dua dan tiga. <br><br></p>
 <p>Ini adalah paragraf kerdua, yang berisi garis horizontal</p>
<hr> Ini adalah garis horizontal.
</body>
<body bgcolor=”#00ff00”>
</html>
Langkah selanjutnya simpan dalam format HTML dan buka file dengan firefox atau sejenisnya, maka hasilnya akan seperti pada gambar 2 berikut:
 
Gambar 2. Mengatur Paragraf
3.      Mengatur ukuran huruf, buka notepad++,  kemudian ketikan code dibawah ini:
<html>
<head>
<title> Tag Heading </title>
</head>
<body>
<h1> Heading 1 </h1>
<h2> Heading 2 </h2>
<h3> Heading 3 </h3>
<h4> Heading 4 </h4>
<h5> Heading 5 </h5>
<h6> Heading 6 </h6>
</body>
<body bgcolor=”#00ff00”>
</html>
Langkah selanjutnya simpan dalam format HTML dan buka file dengan firefox atau sejenisnya, maka hasilnya akan seperti pada gambar 3 berikut:
 
Gambar 3.  Ukuran Huruf
4.      Mengatur format texs, Buka notepad++, kemudian ketikan code dibawah ini:
<html>
<head>
<title>format tulisan</titele>
</head>
<body>
teks normal <br>
<small> teks small </small><br>
<big> teks big</big><br>
<b> teks tebal </b><br>
<i> teks miring </i><br>
<u> teks bergaris bawah </u><br>
Contoh superscript : x <sup>2</sup><br>
Contoh subscript : H<sub>2</sub>O<br>
<strike> Ini teks tercoret </strike><br>
<font size = 5 face = verdana>
menggunakan tag font
</font>
</body>
<body BGCOLOR ="#00FF00">
</html>
Langkah selanjutnya simpan dalam format HTML dan buka file dengan firefox atau sejenisnya, maka hasilnya akan seperti pada gambar 4 berikut:
 
Gambar 4. Format tulisan
5.      Membuat from komentar, buka notepad++, kemudian ketikan code dibawah ini:
<html>
<head>
      <title> From komentar </title>
</head>
<body>
<table>
<tr>
<tdcolspan="3">&nbsp;</td></tr><tr>
  <td colspan="3"><h3>Silahkan Berkomentar : </h3></td>
</tr>
<tr>
<td>Nama</td>
<td>:</td>
<td><input type=text name="nama"></td>
</tr>
<tr>
<td>Email</td>
<td>:</td>
<td><input type=text name="email"></td>
</tr>
<tr>
<td valign=top>Komentar</td>
<td valign=top>:</td>
<td><textarea name="komentar" rows=6 width=200></textarea></td>
</tr>
<tr>
<td colspan="3"><input type=submit name="submit"
value=submit></td>
</tr>
</table>
</body>
<body BGCOLOR ="#00FF00">
</html>
Langkah selanjutnya simpan dalam format HTML dan buka file dengan firefox atau sejenisnya, maka hasilnya akan seperti pada gambar 5 berikut:
 
Gambar 5. From komentar
6.      Mengatur kolom, buka notepad++ kemudian ketikan code dibawah ini:
<html>
<head>
<title>warna-warna</title>
</head>
<body>
<table width="300" border="1">
<tr>
    <td colspan="3" align="center">warna-warna </td>
</tr>
<tr>
    <td bgcolor="#00FF00">Hijau</td>
    <td bgcolor="#FFFF00">Kuning</td>
    <td bgcolor="#FF0000">Merah </td>
</tr>
<tr>
    <td bgcolor="#999999">Abu-abu</td>
    <td bgcolor="#0000FF">Biru</td>
    <td bgcolor="#FF9900">Orange</td>
</tr>
<tr>
    <td bgcolor="#663300">Cokelat</td>
    <td bgcolor="#3399CC">Biru muda</td>
    <td bgcolor="#FF00FF">Merah muda</td>
</tr>
</table>
</body>
<body BGCOLOR ="#00FF00">
</html>
Langkah selanjutnya simpan dalam format HTML dan buka file dengan firefox atau sejenisnya, maka hasilnya akan seperti pada gambar 6 berikut:
 
Gambar 6. Tabel



Sumber : http://riyant17.blogspot.com
Kirimkan Ini lewat Email BlogThis! Bagikan ke X Berbagi ke Facebook

0 komentar:

Posting Komentar

Posting Lebih Baru Posting Lama Beranda
Langganan: Posting Komentar (Atom)

Sponsored

  • banners
  • banners
  • banners
  • banners

Penyusup

Labels

  • PRODUKTIF (35)
  • Info MUSIK (30)
  • MULOK (20)
  • Tips dan Trik (20)
  • Tentang Bojonegoro (15)

Blog Archive

  • ▼  2014 (39)
    • ►  April (14)
    • ▼  Maret (25)
      • Pembasmian Sarang Nyamuk Lebih Efektif Di Bojonegoro
      • Band HC Paling Terkenal Di Indonesia
      • BandUnderground Tercadas Di Indonesia
      • 5 Band Female Vocalist Indonesia
      • Sejarah Alat Musik Karinding dan Perkembangannya.
      • Membuat Profil, Album Galery, Dan Artikel Di Website
      • Membuat Halaman Login Dan Halaman Awal Website
      • Membuat HyperLink Di Website
      • Dasar Membuat Desain Web Site
      • Dasar Pembuatan Kode HTML
      • Suasana Malam Di Kahyangan Api Bojonegoro
      • 8 Generasi Emas Bojonegoro Menuju Lepas Pantai
      • 9 Motif Batik Bojonegoro
      • The Dander, Wisata Andalan Bojonegoro
      • Bojonegoro Temukan Solusi Distribusi Pupuk
      • Hack Java Permission Via BEST
      • Cara hack nokia java s40 tanpa PC
      • Install Dan Konfigurasi Mikrotik Di VirtualBox
      • Cara Sharing Data Antara Windows 7 dengan Ubuntu ...
      • Sharing Data lewat kabel LAN
      • 12 Band metal indonesia Masuk ke Internasional
      • Daftar Beberapa band Black Metal Indonesia
      • 10 Band Black Metal Pemuja Setan
      • Band Death Metal Terbaik Indonesia
      • LAMA GAK NGEPOS
  • ►  2013 (72)
    • ►  Agustus (19)
    • ►  Juni (14)
    • ►  Mei (25)
    • ►  April (10)
    • ►  Maret (2)
    • ►  Januari (2)
  • ►  2012 (3)
    • ►  Oktober (2)
    • ►  September (1)

Followers

 

© 2012 My Web Blog
designed by DT Website Templates | Bloggerized by Moh Wildan Ilhami | Zoomtemplate.com