HTML | category

Showing posts with label HTML. Show all posts

Home > Posts filed under HTML

Membuat Menu Navigasi Dengan CSS

by Unknown on 13 November 2012 di 1:34 PM

Kali ini gw mau share cara membuat menu navigasi dengan css .

HTML

<html>
<head>

<title>Menu Dropdown</title>
<link rel="stylesheet" href="style.css" type="text/css"/>

</head>
<body id="home">
<ul id="nav">
<li id="nav-home"><a href="home.html">Home</a></li>
<li id="nav-about"><a href="about.html">About</a></li>
<li id="nav-archive"><a href="archive">Archive</a></li>
<li id="nav-lab"><a href="lab.html">Lab</a></li>
<li id="nav-reviews"><a href="reviews.html">Reviews</a></li>
<li id="nav-contact"><a href="contact.html">Contact</a></li>
</ul>
</body>
</html>

id pada element body , di ganti sesuai page masing" halaman. Untuk di halaman about, maka id pada body di ganti dengan about. Seterusnya juga sama.

CSS

body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif }
#nav {
    margin: 0;
    padding: 0;
    list-style-type: none;
    background: #808259 url(nav_bg.jpg) 0 0 repeat-x;
    float: left;
    width: 100%;
    border: 1px solid #42432d;
    border-width: 1px 0 1px 1px;
}
#nav li {
    display: inline;
    padding: 0;
    margin: 0;
}
#nav a:link,
#nav a:visited {
    color: #000;
    background: #b2b580;
    padding: 20px 40px 4px 10px;
    float: left;
    width: auto;
    border-right: 1px solid #42432d;
    text-decoration: none;
    text-transform: uppercase;
}
#nav a:hover,
#nav a:focus {
    color: #fff;
    background: #727454;
}
#home #nav-home a,
#about #nav-about a,
#archive #nav-archive a,
#contact #nav-contact a,
#lab #nav-lab a,
#reviews #nav-reviews a {
    background: #e35a00;
    color: #fff;
    text-shadow: none;
}
#home #nav-home a:hover,
#about #nav-about a:hover,
#archive #nav-archive a:hover,
#contact #nav-contact a:hover,
#lab #nav-lab a:hover,
#reviews #nav-reviews a:hover { background: #e35a00 }

hasil akhir :

yang di pelajari sekarang belum masuk ke menu dropdown, next saya akan posting artikel gimana membuat menu dropdown dengan CSS.^^

Tag : Belajar HTML, HTML, pemrograman web

Belajar HTML Yuk ! (bagian 4-Tag <a> dan <img>)

by Unknown on 18 January 2012 di 12:49 PM

Ga kerasa udah belajar HTML (Bagian 4).Di bagian ini saya mau mencoba mengenalkan <select> dan <option>. Biar ngerti langsung praktek aja ya. Silahkan ketikkan kode alien ini di editor HTML :

<select>
    <optgroup label="Minuman">
        <option value="Teh">Teh</option>
        <option value="Mocca">Mocca</option>
        <option value="Anggur">Anggur</option>
    </optgroup>
    <optgroup label="Minuman Hangat">
        <option value="Kopi Kapal Api">Kapal Api</option>
        <option value="Teh Hangat">Teh hangat</option>
    </optgroup>
</select>

NB: <select> berada di antara <body> </body>.
Hasil output kode di atas sebagai berikut :

Setelah mengerti materi di atas, lanjut pembahasan mengenai Tag <a> </a>. Tag ini biasa di gunakan untuk meletakkan link dalam sebuah kalimat atau kata.^^
Langsung aja nih kode aliennya di ketik.

<a href=”http://agitshare.blogspot.com”>contoh meletakkan link</a>

Akan menjadi seperti ini : contoh meletakkan link

sekarang lanjut di tag <img>, gunanya untuk meletakkan gambar pada website anda, langsung aja tanpa basa basi, ni saya kasih contohnya:

Hasilnya:

penggunaan (src=) , berupa alamat dari gambar yang ingin anda tampilkan, misal gambar yang di beri nama “contoh” bertype “jpg”, di simpan bersamaan dengan file latihan html anda, jika letak gambar ada pada 1 folder di atas file latihan html yang sedang di kerjakan, dan folder itu bernama “gambar”, maka penggunaannya sperti ini :
<img href=”gambar/contoh.jpg”/>

semoga artikel saya bisa berguna buat yang membutuhkan, mau istrah dulu, cape juga nulis artikel .
-__-“

Belajar HTML (Bagian 1) | (Bagian 2) | (Bagian 3) | HMTL

Tag : AKADEMIK, Belajar HTML, HTML, Tips dan Trik

Belajar HTML Yuk ! (Bagian 3,mengenal tab Form dan tag Input

by Unknown on 17 January 2012 di 12:08 PM

Alhamdulilah dah posting lagi, lanjut dari postingan sebelumnya sekarang lanjut lagi belajar HTML nya. Kali ini saya mau ngebahas tag <Form> dan tag <input> .
Tag <form> ini selalu biasanya berdampingan alias pasangannya tag <input> atau pun <textarea>. Yahh sama aja kaya tag <table>, jodohnya ya tag <tr> sama tag <td>.^^
Langsung aja yuk di praktekin :

<html>
<head>
<title>Tag input</title>
<form action="coba.php" method="post">
<input type="checkbox" />Checkbox 1<br />
<input type="checkbox" />Checkbox 2
</form>
</head>
</html>

Kode diatas akan menghasilkan :

Judul

Kalo kode yang ini

<html>
<head>
<title>Tag input</title>
<form action="coba.php" method="post">
<input type="radio" />Radio 1<br />
<input type="radio" />Radio 2
</form>
</head>
</html>

Kode diatas akan menghasilkan :

Judul

Kalo kode yang ini

<html>
<head>
<title>Tag input</title>
<form action="coba.php" method="post">
<input type="text" maxlength="20" /> text 1<br />
<input type="text" maxlength="20" /> text 2
</form>
</head>
</html>

Hasilnya :

Judul

NB: Maxlength ( untuk memberikan batas maksimal karakter yang ada di form )

Lanjut kode yang ini .^^

<html>
<head>
<title>Tag input</title>
<form action="coba.php" method="post">
<input type="password" maxlength="20"/>password 1
<br/>
<input type="password" maxlength="20"/>password 2
</form>
</head>
</html>

Hasilnya :

Judul

Huahh masih ada nihh :

<html>
<head>
<title>Tag input</title>
<form action="coba.php" method="post">
<input type="reset" value="reset" />Tombol reset ini berguna untuk menghapus
atau mereset semua isian yang ada di form<br />
</form>
</head>
</html>

Judul

nah kalo misal di modifikasi , misal mau di bikin jadi 1 halaman . Coba ketik kode ini :

<html>
<head>
<title>Atribut tag form dan input</title>
</head>
<body>
<font face="Verdana" size="2">
<form action="coba.php" method="post">
<p><b>Tag input dengan atribut type="nama"</b><br />
<input type="text" maxlength="20"/>
</p>
<p><b>Tag input dengan atribut type="password"</b><br />
<br />
<input type="password" name="password_ku" size="16" maxlength="20"/><br/></p>
<p><b>Tag input dengan type="radio"</b><br />
<br />
<input type="radio" name="radio_ku" value="isi_1"/>radio 1</p>
<p><b>Tag input dengan atribut type="checkbox"</b><br />
<br />
<input type="checkbox" name="checkbpx_ku" value="isi_1"/>Checkbox 1
<br /></p>
<p><b>Tag input dengan atribut type="reset"</b><br />
<br />
<input type="reset" value="reset"/><br />
<b>Tombol reset ini berguna untuk menghapus atau mereset semua isian yang ada di form</b>
</p>
</form>
</font>
</body>
</html>

Hasilnya :

Judul

Yapzz kira2 seperti itu contoh penggunaan tag <form> dan <input>.
Semoga apa yang saya share bisa berguna bagi yang membutuhkan,terutama untuk saya sendiri .^^
Happy Blogging !
^-^

Belajar HTML (Bagian 1) | Belajar HTML (Bagian 2) | HTML | Program Pascal | HTML Pemula

Tag : AKADEMIK, Belajar HTML, HTML, Tips dan Trik

Belajar HTML Yuk ! (bagian 2,mengenal atribut tabel)

by Unknown on 15 January 2012 di 7:49 PM

Lanjut lagi dari postingan sebelumnya “Belajar HTML Yuk ! (bagian 1)”, sekarang udah naik level yaitu bakalan mempelajari tabel dengan HTML.
Menurut saya tag tabel ini sangat banyak di perlukan dalam pembuatan website, tentu kan buat nentuin kolom gambar, kolom side bar atau mungkin tabel buat galery foto, jadi pelajari dengan sungguh-sungguh sampai mengerti konsep dari tag tabel ini.

border
cellpadding
cellspacing
widht
height
name
id
title
bgcolor
background
align
valid

Mengatur semua elemen tabel pada HTML

sebenernya contoh pembuatan tabel ini sudah saya posting di postingan saya yang berjudul “Membuat tabel dengan HTML”. Yaudah mending langsung aja download sourcenya disini buat latihan, nah tabel di atas itu atribut-atribut yang terdapat pada tag table, dicoba-coba aja gan, jangan malu untuk mencoba, toh ga bayar .^^
sekian dulu dari saya, semoga membantu bagi yang membutuhkan.
Happy Blogger !

Tag : AKADEMIK, Belajar HTML, HTML, Tips dan Trik

Belajar HTML Yuk ! (bagian 1)

by Unknown on 14 January 2012 di 10:11 PM

Sesuai judulnya dong,”Belajar HTML yuk !” .^^
yapzz sedikit share tentang apa yang udah saya pelajari dari situs webmaster yang saya kunjungi. Dasar untuk membangun web itu kita harus mengerti konsep penggunaan HTML, banyak sih ga HTML doang, tapi dasarnya ya HTML dulu aja begitu katanya . Open-mouthed smile

Belajar HTML ga pusing-pusing amat lahh, asal kita ngerjainnya dengan hati yang ikhlas pasti jadi menyenangkan . HTML punya banyak tag dan atribut-atributnya, belum semua yang saya pelajari karena masih newbie juga saya dan juga masih masa pembelajaran . Winking smile

Langsung aja nih contoh-contoh penggunaan tag serta atributnya :

Contoh	Hasil
<b> Contoh </b>	Contoh
<i> Contoh </i>	Contoh
<u> Contoh </u>	Contoh
<hr>	Menampilkan garis horizontal

ada juga tag <font> yang berguna untuk mengatur tulisan (cnth atribut : color,size,face). contoh penggunannya :
<p><font color=”green” size=”4” face=”Verdana”> Tulisan dengan warna hijau berukuran 4 pt dan bertipe tulisan Verdana </font></p>
hasil : Tulisan dengan warna hijau berukuran 4 pt dan bertipe tulisan Verdana
Keterangan :

Color berfungsi untuk memberi warna pada tulisan.
Size berfungsi menentukan ukuran pada tulisan.
Face berfungsi untuk menentukan jenis tulisan yang akan di gunakan.

NB : ketinggalan, fungsi <p> itu untuk membuat paragraf baru, kalo <br/> untuk enter atau membuat garis baru. Terus setiap tag yang kita buka ( < > ) harus di tutup juga (</ >) dengan tanda slash.^^
yapz itu contoh sederhana dari tag HTML, belum yang ribetnya nihh Disappointed smile

. Yuk lanjutin .^^
jika menuliskan kode di bawah ini :

<html>
<head>
<title>Belajar HTML</title>
</Head>
<body>
<p align=”left”>teks di kiri</p>
<p align=”center”>teks di tengah</p>
<p align=”right”>teks di kanan</p>
</body>
</html>

makan akan menghasilkan :
teks di kiri

teks di tengah

teks di kanan

yapz sementara sampe situ dulu ya gan, sebeenrnya masih ada tag untuk tabel dan tag-tag lainnya yang mau saya share, tapi pasti saya share di postingan berikutnya,soalnya sekarang masu isirahat dulu Laughing out loud