My name is Adam

Home Notes Blog Photos Video Links

Tutorial Belajar HTML Dasar

Dec 3, '09 11:42 AM
for everyone

Alat dan bahan:

seperangkat komputer /laptop
notepad
browser (opera/safari/mozilla/ie)
kopi + cemilan :D

Membuat file HTML Sederhana

1. Buka aplikasi/program notepad di PC Anda

2. Kemudian ikuti step by step panduan di bawah ini

tag HTML

<html>
<head>
<title>Latihan HTML </title>
</head>
<body>
Ini HTML //disini tempat menuliskan kode html
</body>
</html>

3. Save/simpan dengan menekan Ctrl+s file Anda. Lihat gambar berikut bagaimana cara penyimpanannya.

4. Untuk membuka file Anda tadi, cukup klik ganda pada file dan filepun akan terbuka dengan browser internet. Lihat gambar yang menujukkan hasil latihan kita.

5. Dasar HTML sudah selesai dipelajari

Kode HTML Lainnya

heading

Kode:

<h1>Ini heading 1</h1>

<h2>Ini heading 2</h2>

<h3>Ini heading 3</h3>

<h4>Ini heading 4</h4>

<h5>Ini heading 5</h5>

<h6>Ini heading 6</h6>

Hasilnya:

Ini heading 1

Ini heading 2

Ini heading 3

Ini heading 4

Ini heading 5

Ini heading 6

Paragraph

Kode :

<p > Ini adalah pragraf Ini adalah pragraf.Ini adalah pragraf.Ini adalah pragraf.Ini adalah pragraf.Ini adalah pragraf.Ini adalah pragraf.Ini adalah pragraf.Ini adalah pragraf.Ini adalah pragraf.Ini adalah pragraf.</p>

hasilnya :

Ini adalah pragraf Ini adalah pragraf.Ini adalah pragraf.Ini adalah pragraf.Ini adalah pragraf.Ini adalah pragraf.Ini adalah pragraf.Ini adalah pragraf.Ini adalah pragraf.Ini adalah pragraf.Ini adalah pragraf.

insert image

kode:

hasil:

hyperlink

kode:

<a href="http://link tujuan"> ini adalah link</a>

hasilnya

ini adalah link

division

lihat artikel disini

list

orderer list

kode :

<ol>

<li>Ini orderer list</li>

</ol>

hasilnya:

Ini orderer list
Ini orderer list
Ini orderer list

unorderer list

kode :

<ul>

<li>Ini unorderer list</li>

</ul>

hasilnya:

Ini unorderer list
Ini unorderer list
Ini unorderer list

paste kode-kode di atas ke file yang Anda buat tadi. Letakkan kode di antara tag <body> </body>

Oke sementara culup segini dulu. Bagi yang ingin memperdalam bisa mampir ke sini http://www.htmldog.com

Tags: tutorial html css, tips multiply

Prev: Membuat kotak dengan HTML dan CSS
Next: Cara mengetahui postingan terbaru dari banyak website/blog sekaligus tanpa harus blogwalking

39 CommentsChronological Reverse Threaded

laptopmini wrote on Dec 3, '09

Nice tutorial..
Sangat bermanfaat untuk mereka yang ingin belajar dari dasar..

anditasb wrote on Dec 3, '09

css dunk :D

carrotsoup wrote on Dec 3, '09

maunya blajar dr html-adam,gamau dr html-dog.. ^^

adamdesign wrote on Dec 3, '09

@lapotop
Padahal bikinnya sambil ngantuk:">
@andi, insya Alloh nyusul :D
@pakari
ah, soale adam cakep yak? klo dog kaga? :))

nitafebri wrote on Dec 4, '09

Yup.. sederhana n mudah..
mengingatkan saya saat pertama kali berkenalan dg HTML.. :)

adamdesign wrote on Dec 4, '09

kapan pertama kali kenalan mbak?

nitafebri wrote on Dec 4, '09, edited on Dec 4, '09

waktu iseng2 main ke Lab.Kom waktu kuliah.
dan ternyata lebih canggih lagi pas sudah masuk mata kuliahnya ^_^
hehe.. gini2 saya anak komputer looh hehe..
makanya jagan marah yaa.. nanti klo saya kritik..
bukan maksud saya sok teu looh.. cuma kasih pendapat aja.. ^_^V

adamdesign wrote on Dec 4, '09

malahan suka saya :D
gini2 saya bukan anak komp .. tp anak elektro yg tersesat di jalan yang benar :D

hehehe
ditunggu masukan2nya ya mbak nita

asri17 wrote on Dec 4, '09

asiiik.. ajarin php ya, kak.. ;) buat skripsi, hehe

nitafebri wrote on Dec 4, '09, edited on Dec 4, '09

asri17 said

asiiik.. ajarin php ya, kak.. ;) buat skripsi, hehe

PHP lebih syuseh..
mudah2an yg punya MP mau.. ^_^
klo mau yg gampang saran nih..
Install aja XAMPP free kuk, gak mesti bayar..
gak usah di konfigurasi langsung bisa di pakai..PHP plus MySQL nya

*looh kuk saya yg jawab siih..sorry yaa.. mas Adam.. ngeduluin hehe..

anditasb wrote on Dec 4, '09, edited on Dec 4, '09

nitafebri said

selain XAMPP, WAMP juga mudah kok.. :)

emang bener php lebih susah tapi lebih enak saya rasa. timku pun juga waktu recoding dulu sempet puter otak

adamdesign wrote on Dec 4, '09

asri17 said

asiiik.. ajarin php ya, kak.. ;) buat skripsi, hehe

kapan? dimana? :P yo siap yo

*loh*

adamdesign wrote on Dec 4, '09

nitafebri said

hihihi, masi belajar bikin tulisan je, alih2 bikin yg gampang malah jadi sulit :D

adamdesign wrote on Dec 4, '09

anditasb said

selain XAMPP, WAMP juga mudah kok.. :)

emang bener php lebih susah tapi lebih enak saya rasa. timku pun juga waktu recoding dulu sempet puter otak

nah mas andi jg pinter PHP, ila belajar ke mas andi ajah :D

night16 wrote on Dec 6, '09

heeheheh saya juga lagi belajar nih, hnya saja belum tersentuh wajib pajak,( loh kok?) hihihih masih belum mood bnget.....
soalny belum pernah bikin, hehehehehehe,

adamdesign wrote on Dec 6, '09

:D ditunggu deh :D

night16 wrote on Dec 13, '09

adamdesign said

:D ditunggu deh :D

sippp, klo bner2 minat. :D

night16 wrote on Dec 17, '09

adamdesign said

kode:

nah ini yag mau di tanyain, nyimpen gambarnya gimana?

night16 wrote on Dec 17, '09

adamdesign said

Alat dan bahan:
seperangkat komputer /laptop
notepad
browser (opera/safari/mozilla/ie)
kopi + cemilan :D
Membuat file HTML Sederhana
1. Buka aplikasi/program notepad di PC Anda
2. Kemudian ikuti step by step panduan di bawah ini
tag HTML
<html>
<head>
<title>Latihan HTML </title>
</head>
<body>
Ini HTML //disini tempat menuliskan kode html
</body>
</html>

3. Save/simpan dengan menekan Ctrl+s file Anda. Lihat gambar berikut bagaimana cara penyimpanannya.
4. Untuk membuka file Anda tadi, cukup klik ganda pada file dan filepun akan terbuka dengan browser internet. Lihat gambar yang menujukkan hasil latihan kita.
5. Dasar HTML sudah selesai dipelajari
Kode HTML Lainnya
heading
Kode:
<h1>Ini heading 1</h1>
<h2>Ini heading 2</h2>
<h3>Ini heading 3</h3>
<h4>Ini heading 4</h4>
<h5>Ini heading 5</h5>
<h6>Ini heading 6</h6>
Hasilnya:
Ini heading 1
Ini heading 2
Ini heading 3
Ini heading 4
Ini heading 5
Ini heading 6
Paragraph
Kode :
<p > Ini adalah pragraf Ini adalah pragraf.Ini adalah pragraf.Ini adalah pragraf.Ini adalah pragraf.Ini adalah pragraf.Ini adalah pragraf.Ini adalah pragraf.Ini adalah pragraf.Ini adalah pragraf.Ini adalah pragraf.</p>
hasilnya :
Ini adalah pragraf Ini adalah pragraf.Ini adalah pragraf.Ini adalah pragraf.Ini adalah pragraf.Ini adalah pragraf.Ini adalah pragraf.Ini adalah pragraf.Ini adalah pragraf.Ini adalah pragraf.Ini adalah pragraf.
insert image
kode:
<img src="http://images.adamdesign.multiply.com/image/1/photos/1/500x500/4/jogjainvest.jpg?et=uqo1kcDDTUQYCB2izyMjug&nmid=300937753" />
hasil:
hyperlink
kode:
<a href="http://link tujuan"> ini adalah link</a>
hasilnya
ini adalah link
division
lihat artikel disini
list
orderer list
kode :
<ol>
<li>Ini orderer list</li>
<li>Ini orderer list</li>
<li>Ini orderer list</li>
</ol>
hasilnya:
Ini orderer list
Ini orderer list
Ini orderer list
unorderer list
kode :
<ul>
<li>Ini unorderer list</li>
<li>Ini unorderer list</li>
<li>Ini unorderer list</li>
</ul>
hasilnya:
Ini unorderer list
Ini unorderer list
Ini unorderer list
paste kode-kode di atas ke file yang Anda buat tadi. Letakkan kode di antara tag <body> </body>
Oke sementara culup segini dulu. Bagi yang ingin memperdalam bisa mampir ke sini http://www.htmldog.com

2. Kemudian ikuti step by step panduan di bawah ini

tag HTML

Latihan HTML

Ini HTML //disini tempat menuliskan kode html

3. Save/simpan dengan menekan Ctrl+s file Anda. Lihat gambar berikut bagaimana cara penyimpanannya.

4. Untuk membuka file Anda tadi, cukup klik ganda pada file dan filepun akan terbuka dengan browser internet. Lihat gambar yang menujukkan hasil latihan kita.

5. Dasar HTML sudah selesai dipelajari

adamdesign wrote on Dec 17, '09

dah brazil blm mas yori?

night16 wrote on Dec 17, '09

tadi pas di done edit sidebar bisa, eh pas di reload lagi malah gambarnya jadi ukuran 1x1 pixels.

adamdesign wrote on Dec 17, '09

brati masih ada yg kurang tuh ;)) coba teruus :D

saya klo lg nemuin kasus pemrograman /html/css yg sulit jg sampe kriting lho :))

night16 wrote on Dec 17, '09

sukses bang, kemaren2 yang salah yaa link nya gambar. hehehehehe
saya mah posting gambar di blog trus di ubah ke html, nah saya pake deh tuh link nya hehehehe, ternyata salah.....

adamdesign wrote on Dec 17, '09

:D klo udah ketemu puas khan?

night16 wrote on Dec 17, '09

adamdesign said

:D klo udah ketemu puas khan?

pastinya, belajar tanpa buku, konseling gratis heheheheh ga bayar pula,,,,, ajib