Showing posts with label Html. Show all posts
Showing posts with label Html. Show all posts

Saturday, November 1, 2014

Contoh Tampilan Web Sederhana Menggunakan Div

1:39 AM – by 1
Kali ini saya akan menshare Contoh Tampilan Web Sederhana Menggunakan Div. Sebelumnya kita sudah membahas Cara Membuat Web Statis Sederhana Menggunakan Table, dan sekarang kita akan menggunakan elemen div untuk membuat website. jika kalian belum mengetahui tentang tabel dan div silahkan baca dulu artikel sebelumnya tentang Perbedaan Tabel dan Div di Dalam Html.

Berikut adalah rancangan interfacenya :
rancangan_interface

Berikut contoh tampilan web  nya :

elemen_div

Berikut code Html nya :


<!DOCTYPE html>
<head>
<title>SMA Prestasi Yogyakarta</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<link rel="shortcut icon" href="images/favicon.gif" type="image/x-icon">
</head>

 <body>
<!-- homewebsitedesign.blogspot.com -->
<div id="kotak">
<div id="logo"></div>
<div id="header">
<div id="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Profil</a></li>
<li><a href="#">Akademik</a></li>
<li><a href="#">Kontak</a></li>
<li><a href="#">Download</a></li>
</ul>
</div>
  </div>
<div id="headcont"></div>
<div id="content">
<div id="kiri">
<div id="nav">Info Sekolah</div>
<div id="pages">Content 1</div>

<div id="nav">Support Online</div>
<div id="pages">Content 2</div>

<div id="nav">Award</div>
<div id="pages">Content 3</div>
</div>
<div id="tengah">
<div id="pages">
            <div id="navteng">BERITA TERBARU</div>
                    Berita
            </div>
</div>

<div id="kanan">
<div id="nav">Berita IT</div>
<div id="pages">Content 4</div>

<div id="nav">Link</div>
<div id="pages">Content 5</div>

<div id="nav">Alamat</div>
<div id="pages">Content 6</div>
</div>
</div>
    
<div id="footcont"></div>
<div id="batas"></div>
<div id="footer">Copyright &copy; 2013 SMA PRESTASI Yogyakarta. All Right Reserved</div>
<!-- homewebsitedesign.blogspot.com -->
</div>
</body>
</html>

Keterangan :

Untuk tulisan yang berwarna biru itu pemanggilan code css nya.

Berikut code Css nya :

/*homewebsitedesign.blogspot.com*/

body {
font-family: Verdana, Arial, Helvetica, sans-serif;
background-color: #380a62;
font-size:14px;
}
#kotak {
width: 920px;
margin:auto;
}
#kotak #logo {
background-image: url(../images/logo.jpg);
height: 60px;
width: 920px;
}
#kotak #header {
background-image: url(../images/header.jpg);
float: left;
height: 252px;
width: 920px;
margin-bottom:18px;
}
#kotak #content {
background-image: url(../images/background.jpg);
float: left;
width: 902px;
padding-right: 10px;
padding-left: 8px;
}

 #kotak #content #kiri {
float: left;
width: 190px;
padding-right: 5px;
padding-left: 5px;
}
#kotak #content #tengah {
float: left;
width: 502px;
}
#kotak #content #kanan {
float: left;
width: 190px;
padding-right: 5px;
padding-left: 5px;
}

 #kotak #batas {
clear: both;
}

 #kotak #footer {
height: 46px;
width: 920px;
margin-top: 5px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #FFFFFF;
text-align: center;
}
#kotak #content #tengah #pages {
margin-top: -8px;
text-align: left;
color: #000000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
padding-left:10px;
padding-right:10px;
padding-top:10px;
border-radius: 0px 0px 7px 7px; 
-moz-border-radius: 0px 0px 7px 7px; 
-webkit-border-radius: 0px 0px 7px 7px; 
border: 1px solid #B6B4B4;
}

 #kotak #content #tengah #pages #navteng {
background-color: #FB9B23;
height: 23px;
width:479px;
text-align: left;
color: #FFFFFF;
font-weight:bold;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
padding-left:20px;
padding-top:10px;
margin-top:-11px;
margin-left:-10px;
border-radius: 0px 0px 0px 0px; 
-moz-border-radius: 0px 0px 0px 0px; 
-webkit-border-radius: 0px 0px 0px 0px;
border: 1px solid #B6B4B4; 
}

 #nav {
background-color: #DEBBFB;
height: 20px;
text-align: center;
color: #780ed0;
font-weight:bold;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
padding:6px 2px 0px 1px;
border: 1px solid #B6B4B4;
border-radius: 7px 7px 0px 0px; 
-moz-border-radius: 7px 7px 0px 0px; 
-webkit-border-radius: 7px 7px 0px 0px;
}
#pages {
border: 1px solid #B6B4B4;
margin-bottom: 5px;
padding-left:8px;
padding-top:10px;
padding-bottom:10px;
padding-right:2px;
border-radius: 0px 0px 7px 7px; 
-moz-border-radius: 0px 0px 7px 7px; 
-webkit-border-radius: 0px 0px 7px 7px;
}

 #kotak #headcont {
background-image: url(../images/headcont.jpg);
float: left;
height: 9px;
width: 920px;
}
#kotak #footcont {
background-image: url(../images/footcont.jpg);
float: left;
height: 7px;
width: 920px;
}
#menu {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
height: 30px;
width: 901px;
top: 220px;
position: relative;
left: 8px;
}

 #menu ul {
margin: 0px;
padding: 0px;
list-style-type: none;
}
#menu ul li a {
text-decoration: none;
float: left;
display: block;
padding: 8px;
color: #FFFFFF;
}
#menu ul li a:hover {
color:#F9951D;
}
/*homewebsitedesign.blogspot.com*/


 Keterangan : 

 Untuk tulisan yang berwarna biru itu merupakan url gambar, silahkan ganti dengan gambar anda sendiri.


Selamat Mencoba !!!


Perbedaan Tabel dengan Div di dalam Html

1:18 AM – by 0

Berikut ini adalah perbedaan antara Table dan Div :

Tabel 

Tabel biasanya diawali dengan tag <table> dan memiliki tag <td> (kolom) dan tag <tr> (baris).Untuk tabel biasanya penggunakan background warna, gambar dan lainya berada didalam tabel tersebut, tidak terpisah. Tabel memang mudah dipahami karena sistematis dalam pengerjaanya dan tingkat presisi elemenya pun lebih tinggi sehingga pasti kompetibel dengan kebanyakan browser.
Tetapi  sayangnya menggunakan table dapat memakan memory karena ukuranya lebih besar, sehingga tidak menutup kemungkinan loading sebuah website akan terasa lama dan juga membutuhkan bandwith yang cukup besar.

Contoh Penulisan Tabel :

<tabel>
  <tr>
     <td>baris 1, kolom 1</td>
     <td>baris 1, kolom 2</td>
     <td>baris 1, kolom 3</td>
  </tr>
</table>

 DIV

Div merupakan singkatan dari division yaitu sebuah tag html yang di gunakan untuk membuat suatu bagian atau kelompok tertentu untuk mengelompokan suatu file agar lebih mudah saat kita ingin mencarinya. Div merupakan elemen berbasis Css yang bersifat "float" sehingga bisa diletakan dimana saja.  Div sangat cocok jika digunakan untuk layout yang kompleks, ukuranya pun lebih kecil dibanding tabel sehingga tidak menyedot banyak bandwith dan loading sebuah website pun akan terasa cepat. selain itu juga menggunakan div dapat mempercepat pendeteksian di search engine. Tetapi dalam hal menggunakan div dibutuhkan ketelitian dalam hal menuliskan tag-tag div, dan ketika terjadi error cukup sulit untuk memperbaikinya apabila kita tidak mengetahui pasti dan tidak teliti dalam hal penulisan sebuah tag.

contoh penulisan tag Div dengan Css :

<div style="background: #fffff">
Isi content
</div>

Kedua elemen tersebut memiliki kelebihan dan kekurangan masing-masing, tergantung kebutuhan anda, elemen yang mana yang pas untuk anda gunakan.

Cara Membuat Web Statis Sederhana Menggunakan Table

12:12 AM – by 2
Disini saya akan menshare bagaimana caranya membuat sebuah website dengan mudah dan sederhana. disini saya akan menshare cara membuat web statis menggunakan table, disini tidak diperlukan yang namanya css, hanya cukup dengan menggunakan tabel, dan disini saya menggunakan 3 kolom dan 3 baris, untuk pengembangan mungkin anda bisa mengembangkanya dan membuat yang lebih baik dari yang saya contohkan. sekiranya mungkin tampilan websitenya seperti dibawah ini :

website_sederhana

Dan ini kode HTML nya :


<html >
<head>
<title>Contoh Web Sederhana</title>
</head>

 <body>
<!-- homewebsitedesign.blogspot.com-->
<table width="700" height="851" border="1">
  <tr bgcolor="#FF0000">
    <td height="96" colspan="3"><h1 align="center"> WEBSITE SAYA </h1></td>
  </tr>
  <tr bgcolor="">
    <td bgcolor="#00FFFF" width="148" height="359">
    <ul type="circle">
       <li><a href="index.html"> HOME</a></li>
       <li><a href="About.html">ABOUT</a></li>
    </ul>  
    </td>
    <td width="315">
    Website ini berisi tentang materi perkuliahan Perancangan Pemrograman Web.
    
    <p>Berikut materinya :</p>
    
    <ol type="1">
    <li>HTML</li>
    <li>CSS</li>
    <li>Javascript</li>
    <li>Pengenalan Bootstrap</li>
    </ol>
    
    </td>
    <td  bgcolor="#00FFFF"width="215">
      <form>
      <table border="0" width="100" height="100">
        <tr>
          <td>Username</td>
          <td><input type="text" name="username" /> </td>
        </tr>
        <tr>
          <td>Password</td>
          <td><input type="password" name="password" /></td>
        </tr>
        <tr>
          <td align="center"><input type="submit" value="Login" /></td>
          <td><a href="form.html">Daftar</a>
        </tr>
      </table>
      </form>
    </td>
  </tr>
  <tr bgcolor="#FF0000">
    <td height="23" colspan="3" align="center">Copyright &copy; Contoh Website Sederhana</td>
  </tr>
</table>
<!-- homewebsitedesign.blogspot.com-->
</body>
</html>

Monday, October 27, 2014

Cara Memasukan Gambar di Dalam HTML

7:49 PM – by 0
gambar_tag_html

Bayangkan apabila di web anda anda berisi tulisan dan tidak ada gambarnya pasti tidak menarik. Gambar di dalam suatu web page merupakan daya penarik bagi pengunjung. Adanya gambar di web anda akan memperindah tampilan. File gambar yang umum digunakan ada 3 jenis format yaitu PNG, GIF, dan JPG. Ketika anda memilih suatu gambar harus memperhatikan dari format gambar yang digunakan karena setiap gambar akan membutuhkan waktu tambahan untuk di download dan memperlambat awal penampilan suatu dokumen dalam browser. Oleh karena itu, berhati-hatilah dalam memilih gambar dan menyertakannya ke dalam suatu dokumen. Untuk menysipkan gambar pada dokumen html di sediakan secara khusus yaitu Tag <img>.

Sintaks penulisannya :

<img src=”namagambar” />

Tag <img> mempunyai atribut di antaranya:

atribut_gambar

Contoh :

<html>
  <head>
    <title>Contoh Posisi Img</title>
  </head>
<body>
     Logo
   <img src="Gambar.jpg" width="223" height="226" align="bottom" alt="Logo"/>
</body>
</html>

 Keterangan :

 Tulisan yang berwarna merah anda ganti dengan nama gambar anda sendiri.
Tulisan yang berwarna hijau adalah ukuran lebar dari gambar tersebut.
Tulisan yang berwarna ungu adalah tinggi dari gambar tersebut.
tulisan yang berwarna biru adalah letak posisi gambar tersebut.

Sunday, October 26, 2014

Struktur Dasar HTML

1:44 AM – by 0
struktur_html


<html>
  <head>
     <title>judul</title>
  </head>
<body>
 . . . sisipan konten untuk ditampilkan di browser . . .
</body>
</html>

Keterangan :


  • Html


Merupakan tag dasar yang mendifinisikan bahwa dokumen adalah dokumen html.
Tag ini merupakan suatu keharusan bagi pemrogram web untuk menuliskannya sebagai tag pertama dalam dokumen html.

Penulisan tag seperti berikut ini :

 <html> pada awal dokumen dan </html> pada akhir dokumen.


  • Head


Bagian Head sebenarnya tidak harus ada pada dokumen HTML, tetapi pemakaian head yang benar akan meningkatkan kegunaan suatu dokumen HTML.

Penulisan tag seperti berikut ini :

<head> di awal setelah <html> dan </head> di akhir section head.

Elemen yang mungkin terdapat pada bagian head adalah title Tag <title>, digunakan untuk memberi judul dokumen pada web. penulisanya adalah sebagai berikut : <title>Judul Dokumen web</title>.


  • Body


Bagian body merupakan isi dari dokumen HTML. Semua informasi yang akan ditampilkan, mulai dari teks, gambar, sound, dan lain-lain, akan ditempatkan di bagian ini. Seperti telah disebutkan di atas, bagian body diawali oleh tag <body> dan ditutup </body>.

Subscribe to: Posts (Atom)