kode-kode html

Kode-kode dasar HTML

Dalam HTML seperti pemformatan text berupa tebal,miring,garis bawah,membuat tabel,dll,dapat di lakukan dengan kode-kode.Bagi anda yang belum begitu mengerti HTML,bisa baca disini
Di bawah ini ada beberapa kode-kode untuk mewakili pemformatan text maupun mebuat berbagai object dalam halaman anda,meskipun sekarang sudah banyak pembuatan halaman HTML dengan software instant seperti Dreamweaver dll.

---

Membuat Center,gunakan kode : <p align="center">Belajar</p> hasilnya seperti:

Belajar

---

Membuat Posisi kekanan gunakan kode : <p align="right">Belajar</p> hasilnya seperti :

Belajar

---

Membuat Posisi kekiri gunakan kode: <p align="left">Belajar</p> hasilnya seperti :

Belajar

---

Membuat Huruf Tebal gunakan kode: <b>Belajar</b> hasilnya seperti :
Belajar

---

Membuat Huruf Garis Bawah gunakan kode : <u>Belajar</u> hasilnya seperti :
Belajar

---

Membuat Huruf bercetak Miring gunakan kode : <i>Belajar</i> hasilnya seperti :
Belajar

---

Membuat Kombinasi huruf tebal,miring,garisbawah,gunakan kode :
<b><i><u>Belajar</u></i></b> hasilnya seperti :
Belajar

---

Membuat Huruf tebal strong gunakan kode : <srong>Belajar</strong> hasilnya seperti :
Belajar

---

Membuat Huruf Hidden gunakan kode : <span style="visibility: hidden">Belajar</span> hasilnya seperti :

Namanya juga hidden..ya..ga keliatan..

---

Membuat Huruf Besar semua (uppercase) gunakan kode :
<span style="text-transform: uppercase">Belajar</span> hasilnya seperti :
Belajar

---

Membuat Huruf Small caps gunakan kode:
<span style="font-variant: small-caps">Belajar</span> hasilnya seperti ini:
Belajar

---

Membuat Huruf Subscribe / kecil di bawah gunakan kode:
<p>4₂</p>hasilnya seperti ini:
4₂

---

Membuat Huruf Superscribe / pangkat gunakan kode:
<p>4²</p> hasilnya seperti ini:
4²

---

Membuat Huruf bergaris atas gunakan kode:
<span style="text-decoration: overline">Belajar</span> hasilnya seperti ini:
Belajar mengganti huruf

---

Membuat Huruf bergaris tengah gunakan kode:
<strike>Belajar</strike> hasilnya seperti ini:
Belajar

---

Menentukan jenis huruf gunakan kode:
<p><font-family="Arial" >Belajar</font></p> hasilnya seperti ini:
Belajar

---

Menentukan ukuran huruf gunakan kode:
<p><font-size="3" >Belajar</font></p> hasilnya seperti ini:
Belajar

---

Menentukan warna huruf gunakan kode:
<p style="color: green; >Belajar</p> hasilnya seperti ini:
Belajar

---

Membuat bullet dot bolong gunakan kode:
<ul type="circle">
<li>DOT 1</li>
<li>DOT 2</li>
<li>DOT 3</li>
</ul>
hasilnya seperti ini:

• DOT 1


• DOT 2


• DOT 3

---

Membuat bullet dot kotak gunakan kode:
<ul type="square">
<li>DOT 1</li>
<li>DOT 2</li>
<li>DOT 3</li>
</ul>
hasilnya seperti ini:

• DOT 1
• DOT 2
• DOT 3

---

Membuat bullet dot bulat gunakan kode:
<ul>
<li>DOT 1</li>
<li>DOT 2</li>
<li>DOT 3</li>
</ul>
hasilnya seperti ini:

• DOT 1
• DOT 2
• DOT 3

---

Mengatur posisi bullet gunakan kode:
<blockquote>
<blockquote>
<blockquote>
<ul>
<li>DOT 1</li>
<li>DOT 2</li>
<li>DOT 3</li>
</ul>
</blockquote>
</blockquote>
</blockquote>
hasilnya seperti ini:

• DOT 1
• DOT 2
• DOT 3

---

Menentukan kombinasi warna,jenis,dan ukuran huruf gunakan kode:
<p><font style="color: red; font-family: courier new; font-size: 15px;" >Belajar</font></p>
hasilnya seperti ini:

Belajar

---

Membuat tabel border solid gunakan kode:

<table border="1" width="200">
<tr>
<td style="border-style: solid">Text</td>
</tr>
</table>

hasilnya seperti :

Text

---

Membuat tabel border dot gunakan kode:
<table border="1" width="200"
style="border-style: dotted">
<tr>
<td border="2" style="border-style:
dotted">Text</td>
</tr>
</table>
hasilnya seperti ini:

Text

---

Membuat tabel border dashed gunakan kode:
<table border="1" width="200" style="border-style: dashed">
<tr>
<td style="border-style: dashed">Text</td>
</tr>
</table>
hasilnya seperti ini:

Text

---

Membuat tabel border groove gunakan kode:
<table border="1" width="200" style="border-style: groove">
<tr>
<td>Text</td>
</tr>
</table>
hasilnya seperti ini:

Text

---

Membuat tabel border Ridge gunakan kode:
<table border="1" width="200" style="border-style: ridge">
<tr>
<td>Text</td>
</tr>
</table>
hasilnya seperti ini:

Text

---

Membuat tabel border Insert gunakan kode:
<table border="1" width="200" style="border-style: inset">
<tr>
<td>Text</td>
</tr>
</table>
hasilnya seperti ini:

Text

---

Membuat tabel border Outset gunakan kode:
<table border="1" width="200" style="border-style: outset">
<tr>
<td>Text</td>
</tr>
</table>
hasilnya seperti ini:

Text

---

Membuat Tabel Biasa gunakan kode :
<table border="1"width="200"><td>Text</td></table>
hasilnya seperti:

Text

---

Membuat Tabel berwarna gunakan kode :
<table border="1"width="200"bgcolor="green"><td>Text</td></tabel> hasilnya seperti :

Text

---

Membuat Tabel berwarna tak berbingkai gunakan kode :
<table border="0"width="200"bgcolor="blue"><td>Text</td></tabel> hasilnya seperti:
Text

Read More

Warna HTML

CAMEX WAP

KODE WARNA HTML Contoh:Putih =>#ffffff;

#FOF8FF Aliceblue

#FAEBD7 Antiquewhite

#00FFFF Aqua

#7FFFD4 Aquamarine

#F0FFFF Azure

#F5F5DC Beige

#FFE4C4 Bisque

#000000 Black

#FFEBCD Blanchedalmond

#0000FF Blue

#8A2BE2 Blueviolet

#A52A2A Brown

#DEB887 Burlywood

#5F9EAD Cadetblue

#7FFF00 Chartreuse

#D2691E Chocolate

#FF7F50 Coral

#64950 Cornflowerblue

#FFF8DC Cornsilk

#DC143C Crimson

#00FFFF Cyan

#00008B Darkblue

#008B8B Darkcyan

#B8860B Darkgoldenrod

#A9A9A9 Darkgray

#006400 Darkgreen

#8B008B Darkmagenta

#BDB76B Darkkhaki

#556B2F Darkolivegreen

#FF8C00 Darkorange

#9932CC Darkorchid

#8B0000 Darkred

#E9967A Darksalmon

#8FBC8B Darkseagreen

#483D8B Darkslateblue

#2F4F4F Darkslategray

#00CED1 Darkturquoise

#9400D3 Darkviolet

#FF1493 Deeppink

#00BFFF Deepskyblue

#696969 Dimgray

#1E90FF Dodgerblue

#B22222 Firebrick

#FFFAF0 Floralwhite

#228B22 Forestgreen

#FF00FF Fuchsia

#DCDCDC Gainsboro

#F8F8FF Ghostwhite

#FFD700 Gold

#DAA520 Goldenrod

#808080 Gray

#008000 Green

#ADFF2F Greenyellow

#F0FFF0 Honeydew

#FF69B4 Hotpink

#CD5C5C Indianred

#4B0082 Indigo

#FFFFF0 Ivory

#F0E68C Khaki

#E6E6FA Lavender

#FFF0F5 Lavenderblush

#7CFC00 Lawngreen

#FFFACD Lemonchiffon

#ADE8E6 Lightblue

#F08080 Lightcoral

#E0FFFF Lightcyan

#FAFAD2 Lightgoldenrodyellow

#90EE90 Lightgreen

#D3D3D3 Lightgray

#FFB6C1 Lightpink

#FFA072 Lightsalmon

#20B2AA Lightseagreen

#87CEFA Lightskyblue

#778899 Lightslategray

#B0C4DE Lightsteelblue

#FFFFE0 Lightyellow

#00FF00 Lime

#32CD32 Limegreen

#FAF0E6 Linen

#FF00FF Magenta

#800000 Maroon

#66CDAA Mediumaquamarine

#0000CD Mediumblue

#BA55D3 Mediumorchid

#9370DB Mediumpurple

#3CB371 Mediumseagreen

#7B68EE Mediumslateblue

#00FA9A Mediumspringgreen

#48D1CC Mediumturquoise

#C71585 Mediumvioletred

#191970 Midnightblue

#F5FFFA Mintcream

#FFE4E1 Mistyrose

#FFE4E1 Moccasin

#FFDEAD Navajowhite

#000080 Navy

#FDF5E6 Oldlace

#808000 Olive

#6B8E23 Olivedrab

#FFA500 Orange

#FF100%0 Orangered

#DA70D6 Orchid

#EEE8AA Palegoldenrod

#98FB98 Palgreen

#AFEEEE Paleturquoise

#DB7093 Palevioletred

#FFEFD5 Papayawhip

#FFDAB9 Peachpuff

#CD853F Peru

#FFC0CB Pink

#DDA0DD Plum

#B0E0E6 Powderblue

#800080 Purple

#FF0000 Red

#BC8F8F Rosybrown

#4169E1 Royalblue

#8B4513 Saddlebrown

#FA8072 Salmon

#F4A460 Sandybrown

#2E8B57 Seagreen

#FFF5EE Seashell

#A0522D Sienna

#C0C0C0 Silver

#87CEEB Skyblue

#708090 Slategray

#FFFAFA Snow

#00FF7F Springgreen

#4682B4 Steelblue

#D2B48C Tan

#008080 Teal

#D8BFD8 Thistle

#FF6347 Tomato

#40E0D0 Turquoise

#EE82EE Violet

#F5DEB3 Wheat

#FFFFFF White

#F5F5F5 Whitesmoke

#FFFF00 Yellow

#9ACD32 Yellowgreen

CAMEX 2010

Read More

cara mebuat form yang bagus

Form adalah salah satu tag HTML yang dipakai untuk penempatan input-input yang akan diisikan oleh user untuk dieksekusi selanjutnya. Nah, bagi seorang web developer istilah form pasti udah ga asing lagi, soalnya semua data yang akan dimasukkan ke dalam database, pasti bakal via form ini.
Tapi, apakah kalian tau gimana cara bikin form yang efektif? maksud efektif di sini adalah supaya kita gak kesulitan pas membuat style buat form itu.
Nah, seperti yg udah diketahui, tag form adalah sebagai berikut:

<form action="register.php" method="post">
  ...
</form>

Buat sebagian orang, mengatur form supaya rapi, tata letaknya teratur, mereka menggunakan table sebagai tempat nempatin elemen input yang ada di form, contohnya kayak gini:

<form action="register.php" method="post">
    <table>
        <tr>
            <td><label for="nama_lengkap">Nama Lengkap</label></td>
            <td><input id="nama_lengkap" type="text" /></td>
        </tr>
        <tr>
            <td><label for="nama_panggilan">Nama Panggilan</label></td>
            <td><input id="nama_lengkap" type="text" /></td>
        </tr>
        <tr>
            <td><label for="nama_panggilan">Nama Panggilan</label></td>
            <td><textarea id="nama_lengkap"></textarea</td>
        </tr>
        <tr>
            <td></td>
            <td><input type="submit" value="kirim" /></td>
        </tr>
    </table>
</form>

Hmm… sebenernya cara di atas itu tidak salah sih, cuman menurutku cara kayak gitu tuh sangat merepotkan, soalnya kita harus bikin table sebagai pemampang elemen inputnya, dan itu sangat cape menurutku… banyak alasan kalo cara itu ga efektif, contoh lain adalah di saat di mana kita bikin suatu fungsi maupun class (bukan CSS) di PHP dan kita akan merender setiap elemen form secara independen, maksudnya berdiri sendiri, tanpa bantuan tag table sebelum elemen dan di akhir elemen input…
Lagian kan semua tag [input] di html ada berbagai macam, ada buat text, textarea, submit, combobox, dsb… nah berarti kalo kita bikin style CSSnya kita harus memberikan class di setiap elemen, soalnya ga bisa klo kita membuat style untuk semua tag [input], jadi setiap elemen [input] harus dikasih class…
Sekarang kita langsung coba mengimplementasikan struktur html kayak di atas klo qta bikin style buat CSSnya… gimana caranya? pasti bakal kayak gini:

<form action="register.php" method="post">
    <table>
        <tr>
            <td><label for="nama_lengkap">Nama Lengkap</label></td>
            <td><input id="nama_lengkap" type="text" class="textfield" /></td>
        </tr>
        <tr>
            <td><label for="nama_panggilan">Nama Panggilan</label></td>
            <td><input id="nama_lengkap" type="text" class="textfield" /></td>
        </tr>
        <tr>
            <td><label for="nama_panggilan">Nama Panggilan</label></td>
            <td><textarea id="nama_lengkap" class="textarea"></textarea</td>
        </tr>
        <tr>
            <td></td>
            <td><input type="submit" value="kirim" class="button" /></td>
        </tr>
    </table>
</form>

Ada cara yang lebih efektif, dan berdiri sendiri, maksudnya kita bakal bikin setiap baris input tanpa menggunakan awalan [table] dan akhiran [/table] dan tidak memberikan class di setiap elemen, juga ga ngeborosin tag (kayak tr td)… di sini kita akan menggunakan div… menurut Cheyuz ini yang paling efektif… (gak tau menurut kalian )

<form action="register.php" method="post">
    <div class="input text">
        <label for="nama_lengkap">Nama Lengkap</label>
        <input id="nama_lengkap" type="text" />
    </div>
    <div class="input text">
        <label for="nama_panggilan">Nama Panggilan</label>
        <input id="nama_panggilan" type="text" />
    </div>
    <div class="input textarea">
        <label for="nama_panggilan">Nama Panggilan</label>
        <textarea id="nama_panggilan"></textarea>
    </div>
    <div class="input submit">
        <input type="submit" value="kirim" />
    </div>
</form>

Read More

html frame

HTML Code:

The frameset (frame_example_frameset_1.html):

<html>
<head>
<title>Frameset page<title>
</head>
<frameset cols = "25%, *">
  <frame src ="frame_example_left.html" />
  <frame src ="frame_example_right.html" />
</frameset>
</html>

The left frame (frame_example_left.html):

<html>
<body style="background-color:green">
<p>This is the left frame (frame_example_left.html).</p>
</body>
</html>

The right frame (frame_example_right.html):

<html>
<body style="background-color:yellow">
<p>This is the right frame (frame_example_right.html).</p>
</body>
</html>

View the result

Add a Top Frame

You can do this by "nesting" a frame within another frame.
HTML Code:

The frameset (frame_example_frameset_2.html):

<html>
<head>
<title>Frameset page</title>
</head>
<frameset rows="20%,*">
  <frame src="/html/tutorial/frame_example_top.html">
<frameset cols = "25%, *">
  <frame src ="/html/tutorial/frame_example_left.html" />
  <frame src ="/html/tutorial/frame_example_right.html" />
</frameset>
</frameset>
</html>

The top frame (frame_example_top.html):

<html>
<body style="background-color:maroon">
<p>This is the Top frame (frame_example_top.html).</p>
</body>
</html>

(The left and right frames don't change)

View the result

Remove the Borders

You can get rid of the borders if you like. Officially, you do this using frameborder="0". I say, officially because this is what the HTML specification specifies. Having said that, different browsers support different attributes, so for maximum browser support, use the frameborder, border, and framespacing attributes.
HTML Code:

The frameset (frame_example_frameset_3.html):

<html>
<head>
<title>Frameset page</title>
</head>
<frameset border="0" frameborder="0" framespacing="0" rows="20%,*">
  <frame src="/html/tutorial/frame_example_top.html">
<frameset cols = "25%, *">
  <frame src ="/html/tutorial/frame_example_left.html" />
  <frame src ="/html/tutorial/frame_example_right.html" />
</frameset>
</frameset>
</html>

(The left, right, and top frames don't change)

View the result

Load Another Frame

Most websites using frames are configured so that clicking a link in one frame loads another frame. A common example of this is having a menu in one frame, and the main body in the other (like our example).
This is achieved using the name attribute. You assign a name to the target frame, then in your links, you specify the name of the target frame using the target attribute.
Tip: You could use base target="content" at the top of your menu file (assuming all links share the same target frame). This would remove the need to specify a target frame in each individual link.
HTML Code:

The frameset (frame_example_frameset_4.html):

<html>
<head>
<title>Frameset page</title>
</head>
<frameset border="0" frameborder="0" framespacing="0" cols = "25%, *">
  <frame src ="/html/tutorial/frame_example_left_2.html" />
  <frame name="content" src ="/html/tutorial/frame_example_yellow.html" />
</frameset>
</html>

The left frame (frame_example_left_2.html):

<html>
<body style="background-color:green">
<p>This is the left frame (frame_example_left_2.html).</p>
<p>
<a target="content" href="frame_example_yellow.html">Yellow</a><br />
<a target="content" href="frame_example_lime.html">Lime</a>
</p>
</body>
</html>

The yellow frame (frame_example_yellow.html):

<html>
<body style="background-color:yellow">
<p>This is the yellow frame (frame_example_yellow.html).</p>
</body>
</html>

The lime frame (frame_example_lime.html):

<html>
<body style="background-color:Lime">
<p>This is the lime frame (frame_example_lime.html).</p>
</body>
</html>

View the result

Tag Reference

Here's some more info on the above tags.

The frameset Tag

In your frameset tag, you specify either cols or rows, depending on whether you want frames to go vertically or horizontally.

Attribute	Description
rows	Specifies the number of rows and their height in either pixels, percentages, or relative lengths. Default is 100%
cols	Specifies the number of columns and their width in either pixels, percentages, or relative lengths. Default is 100%

The frame Tag

For each frame you want to display, you specify a frame tag. You nest these within the frameset tag.

Attribute	Description
name	Assigns a name to a frame. This is useful for loading contents into one frame from another.
longdesc	A long description - this can elaborate on a shorter description specified with the title attribute.
src	Location of the frame contents (for example, the HTML page to be loaded into the frame).
noresize	Specifies whether the frame is resizable or not (i.e. whether the user can resize the frame or not).
scrolling	Whether the frame should be scrollable or not (i.e. should scrollbars appear). Possible values: auto yes no
frameborder	Whether the frame should have a border or not. Possible values: 1 (border) 0 (no border)
marginwidth	Specifies the margin, in pixels, between the frame's contents and it's left and right margins.
marginheight	Specifies the margin, in pixels, between the frame's contents and it's top and bottom margins.

The noframe Tag

The noframes tag is used if the user's browser doesn't support frames. Anything you type in between the noframes tags is displayed in their browser.
HTML Code:

<html>
<head>
<title>Frameset page<title>
</head>
<frameset cols = "25%, *">
  <noframes>
  <body>Your browser doesn't support frames.
  Therefore, this is the noframe version of the site.</body>
  </noframes>
  <frame src ="frame_example_left.html" />
  <frame src ="frame_example_right.html" />
</frameset>
</html>

Read More

RANGKUMAN TENTANG HTML , PHP , DESAIN WEB

HTML  (Hyper Text MarkUp Language)

Merupakan suatu metode untuk menampilkan data sesuatu dalam bentuk point-point

Dengan HTML  kita dapat menampilkan daftar atau deretan informasi  dalam bentuk point-point sehingga lebih mudah di baca dan di pahami dalam membuat link .

PHP (Hyper Text Prepocessor )

PHP adalah singkatan dari “PHP : Hyper Text Prepocessor “ yang merupakan sebuah bahasa scripting yang terpasang pada HTML .PHP merupakan bahasa pemograman web yang bersipat server – side . PHP dikenal sebagai bahasa scripting yang menyatu dengan tag HTML , di eksekusi di server dan di gunakan untuk membuat halaman web yang dinamis seperti ASP (Active Server Pages ) dan JSP (Java Server Pages ) . PHP pertama kali di buat oleh rasmus lerdroft seorang programmer C  yang semulanya PHP digunakan intuk menghiotung jum;ah pengunjung dalam web nya . Seluruh aplikasi berbasis web dapat dibuat dengan PHP . Namun kekuatan yang paling utama PHP adalah pada konektivitasnya dengan system data base di dalam web

DESAIN WEB

Pengertian desain web atau definisi desain web adalah jenis desain grafis yang ditunjukan untuk pengembangan dan styling obyek lingkungan informasi Internet untuk menyediakan dengan fitur konsumen high-end dan kualitas estetika. Definisi yang ditawarkan memisahkan desain web dari pemrograman web, menekankan fitur fungsional dari sebuah situs web, serta desain posisi web sebagai semacam desain grafis.
Tujuan desain web adalah untuk membuat situs web atau dokumen elektronik dan aplikasi yang berada pada web server dan menampilkan konten dan fitur antarmuka interaktif kepada pengguna akhir dalam bentuk halaman Web. Seperti unsur-unsur teks, gambar (gif, jpeg) untuk ditempatkan pada halaman menggunakan HTML / XHTML / tag XML. Menampilkan media yang lebih kompleks (vektor grafis, animasi, video, suara) membutuhkan plug-in seperti Adobe Flash

Read More