Kamis, 08 April 2010

dasar dasar membuat web dengan html 3

Pada artikel dasar dasar membuat web dengan html 2 saya bilang saya akan kasih tau cara bikin heading, paragraf, garis horisontal, line break. Ya udah langsung aja....

Heading. Biasanya dipakai buat judul, sub judul dsb. Kalo pernah make MS Word pasti tau deh.. Dalam HTML heading dimulai dari HEADING 1 sampai HEADING 6, tapi paling sering dipakai cuma sampai HEADING 3.

Tag nya sebagai berikut, seperti biasa ditulis diantara tag <body> </body>.

-----------------mulai kode html----------------------

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

-----------------akhir kode html----------------------

Coba anda buat file HTML baru dengan nama: heading.html

-----------------mulai kode html---------------------

<html>
<head>
<title>Belajar Heading</title>
</head>

<body>
Contoh Heading

<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>

</html>

-----------------akhir kode html----------------------

Hasilnya seperti anda lihat Heading 1 memiliki font-size terbesar dan heading 6 yang terkecil.

Paragraf. Biasanya untuk tulisan yang panjang. Tag nya adalah:

-----------------mulai kode html----------------------

<p>Kalimat panjang disini, pendek juga boleh</p>

-----------------akhir kode html----------------------

Garis horisontal. Tag nya adalah

-----------------mulai kode html----------------------

<hr>

-----------------akhir kode html----------------------

Line Break. Spasi kebawah, kalau di aplikasi word processor pas kita mencet Enter hehehe.... Pada kode HTML percuma jika anda ingin membuat sebuah teks turun dengan menggunakan Enter berulang kali. Maka itu gunakan line break.

Tag nya:

-----------------mulai kode html----------------------

<br>

-----------------akhir kode html----------------------

Jika anda lihat, tag <hr> dan <br> tidak mempunyai tag penutup. Saya tidak salah tulis, tapi memang sudah begitu aturan nya, hehehhehehe....

Berikut adalah contoh komplit nya.

buat file baru pada folder latihan anda.

-----------------mulai kode html---------------------

<html>
<head>
<title>Belajar Heading, Paragraf, Line Break dan Garis Horisontal</title>
</head>

<body>
<h1>Kalimat dengan Heading 1</h1>
<p>Disini lah menu utama ditulis. Kalimat ini diapit tag paragraf</p>

<h2>Kalimat dengan Heading 2</h2>
Ini Tidak diapit paragraf<br>
Kalimat ini turun karena ada line break.
<h3>Kalimat dengan Heading 3</h3>

Setelah kalimat ini ada sebuah garis horisontal<br>
<hr>
</body>

</html>

-----------------akhir kode html----------------------

save dengan nama: belajar-hplg.html atau dengan nama lain ya terserah anda.

Hasilnya dapat anda lihat pada gambar berikut.



Oke, sampai jumpa pada artikel lainnya... Read More...
Diposting oleh andhika-maulana di 12.15 1 komentar
Label: ,

dasar dasar membuat web dengan html 2

Setelah anda mengetahui dasar membuat web dengan HTML, sekarang saya akan memberikan cara bagaimana supaya web anda bisa "nge-link" ke halaman internal atau external.

Oya kode2 ini harus ditulis di antara tag <body></body>

Tag untuk membuat link adalah:

-----------------mulai kode html----------------------

<a href="1">2</a>

-----------------akhir kode html----------------------

dimana 1 adalah link yang anda tuju, bisa berupa halaman web internal, atau halaman web lain (selanjutnya disebut URL). dan dimana 2 adalah kalimat yang ditampilkan di halaman web.

Misal anda telah membuat halaman Kontak Kami pada dengan nama file: kontak.html dan anda ingin membuat link ke halaman tersebut, cara membuat linknya adalah:

-----------------mulai kode html----------------------

<a href="kontak.html">Kontak Kami</a>

-----------------akhir kode html----------------------

Nah, kalau anda ingin ngelink ke website lain gimana? kodenya sama hanya URL nya saja yang beda. Contoh anda ingin ngelink ke Google.

-----------------mulai kode html----------------------

<a href="http://www.google.com">Kontak Kami</a>

-----------------akhir kode html----------------------

udah ngerti?

Untuk latihan coba buat file html lain pada folder latihan anda tadi.

-----------------mulai kode html----------------------

<html>
<head><title>Halaman Kedua</title></head>
<body>Ini isi halaman kedua</body>
</html>

-----------------akhir kode html----------------------

save dengan nama: halaman-dua.html pada folder latihan anda.

Lalu edit file index.html anda

-----------------mulai kode html---------------------

<html>
<head>
<title>Judul Website Anda</title>
</head>

<body>
Isi dari website anda
<a href="halaman-dua.html">Ke Halaman Dua</a>
</body>

</html>

-----------------akhir kode html----------------------

save kembali file index.html anda.

Buka file index.html anda. Klik link 'Ke Halaman Dua' dan secara otomatis anda akan berpindah ke web page anda yang kedua (halaman-dua.html).

Bagaimana kalau file yang mau dilink bukan satu folder. Misal di folder latihan anda, dibuat lagi satu folder dengan nama 'config'. Lalu didalam folder tersebut ada file halaman-tiga.html (bisa kan buat file halaman-tiga.html nya?). Lalu anda ingin membuat link dari index.html ke halaman-tiga.html.

Tambahkan kodenya pada index.html seperti ini:

-----------------mulai kode html----------------------

<a href="config/halaman-tiga.html">Halaman Tiga</a>

-----------------akhir kode html----------------------

Jadi anda sekarang sudah punya tiga file HTML yaitu, index.html; halaman-dua.html; halaman-tiga.html; dimana halaman-tiga.html berada pada folder 'config'.

Jadi bentuk file index.html menjadi:

-----------------mulai kode html---------------------

<html>
<head>
<title>Judul Website Anda</title>
</head>

<body>
Isi dari website anda
<a href="halaman-dua.html">Ke Halaman Dua</a>
<a href="config/halaman-tiga.html">Ke Halaman Tiga</a>
</body>

</html>

-----------------akhir kode html----------------------

sedangkan file halaman-dua.html; dan halaman-tiga.html; isinya biasa saja

Pada artikel selanjutnya Insya Allah, saya akan kasih tau bagaimana cara bikin heading, paragraf, garis horisontal, line break. Read More...
Diposting oleh andhika-maulana di 12.11 2 komentar
Label: ,

dasar-dasar membuat web dengan html 1

Jika anda ingin membuat web site secara manual, saya akan membagi ilmu saya yang masih sedikit ini kepada anda. Saya akan memberi tahu cara membuat web dengan bahasa HTML.

HTML singkatan dari Hyper Text Markup Language. Terdiri dari Tag-Tag yang umumnya harus memiliki penutup.

Contoh:

-----------------mulai kode html---------------------

<body> </body>

-----------------akhir kode html---------------------

<body> adalah tag pembuka, </body> adalah tag penutup.

Oke langsung saja....

Yang pertama anda butuhkan adalah program notepad, kalo punya editor web seperti dreamweaver lebih bagus. Tapi pada artikel ini anda cukup gunakan notepad yang ada di windows.

Sebaiknya anda buat dulu folder untuk latihan ini, misal: latihan_html

Setelah program notepad terbuka ketikkan code ini:

-----------------mulai kode html---------------------

<html>
<head>
<title>Judul Website Anda</title>
</head>

<body>
Isi dari website anda
</body>

</html>

-----------------akhir kode html----------------------

*) yang ada garis ------- nya ga usah diketik ya ^_^ itu cuma penanda yang mana kode html yang harus anda tulis.

Setelah selesai, save (Save As) dengan nama: index.html ubah save as type menjadi: All Files, simpan di folder latihan anda. Buka file tersebut dengan web browser. Caranya: buka web browser anda dan klik File>Open lalu browse folder latihan anda dan secara otomatis halaman web anda langsung terbuka karena file tersebut anda simpan dengan nama index.html. Oya, untuk penamaan file html sebaiknya jangan menggunakan spasi, gunakanlah underscore _ atau dash - jika ingin memisah kata.

Pada bahasa HTML semua bagian yang diapit <> disebut Tag. Pada bagian yang diapit Tag <title></title> disitu anda dapat mengedit apa yang ingin anda tulis pada Title bar Web Browser anda. Contoh: jika anda ingin menuliskan kalimat "Situs Pribadi John Doe" maka ketikkan kalimat tersebut diantara tag <title></title> tersebut.

-----------------mulai kode html---------------------

<title>Situs Pribadi John Doe</title>

-----------------akhir kode html----------------------

Dan untuk membuat isi website anda, tuliskan isi websita anda di antara tag <body></body>

Format yang saya berikan diatas adalah cara awal untuk membuat sebuah web dengan HTML. Untuk selanjutnya, anda dapat membaca artikel saya yang berikutnya. Read More...
Diposting oleh andhika-maulana di 12.03 1 komentar
Label: ,
Langganan: Postingan (Atom)