Tuesday, 12 October 2010

cara Menyisipkan Gambar/Images pada HTML

Digunakan untuk menampilkan image atau animasi gif pada halaman web Anda. Tag yang digunakan adalah



Attribut yang dimiliki tag adalah: alt, align=(center, left, right), hspace, vspace, border, width dan height. Jika attribut ukuran gambar tidak dituliskan, maka gambar ditampilkan sesuai dengan ukuran asllinya. Untuk mengatur ukuran gambar, menggunakan attribut width daan height. Attribut align digunakan untuk perataan posisi gambar. Attribut border, digunakan untuk memberi bingkai pada gambar. Sedangkan alt, digunakan untuk memberi keterangan pada gambar jika mouse berada diatasnya. Untuk mengatur letak gambar dapat menggunakan attribut hspace daan vspace.
Contoh :


<html>
<head>
<title>::: menampilkan images :::</title>
</head>
<body>
<b><font size=2 Face=tahoma color=black>
<img src="gambar1.gif" alt="ini adalah logo halaman pembuka" width=100 height=50>
<img src="gambar1.gif" hspace=10 vspace=5 align=right border=2> </font>
</body>
</html>


maka hasinya akan seperti gambar di bawah ini:

Untuk gambar lebih jelasnya klik saja gambarnya...




Untuk mengubah kode-kode tersebut menjadi seperti gambar tersebut siahkan klik DI SINI

Untuk pertanyaan silahkan tinggalkan komentar di bawah ini!
TERIMA KASIH

Posted by at No comments:
Labels:

Hypertext Link

Digunakan untuk membuat link ke halaman lain. Tulisan yang terletak antara dan akan terdapat garis bawah.


Link ke Dokumen Lain


Untuk membuat link dengan target ke dokumen/halaman yang berbeda anda harus membuat dokumen yang dituju/target dan disimpan didirektori tertentu, baik pada direktori yang sama atau berbeda dengan dokumen yang aktif sekarang.
Contoh:

<html>
<head>
<title>::: Link Dokumen Lain :::</title>
</head>
<body>
<font face=arial size=2 color=maroon>
<b> >> MENU << <br>
<a href=../index.html>H o m e</a><br>
<a href=profile.html>Profile</a><br>
<a href=album/index.html>Album</a><br>
<a href=Karya.html>Hasil Karya</a><br>
<a href=buku/index.html>Buku Tamu</a><br>
<a href=forum/index.html>Diskusi</a><br>
</b>
</body>
</html>


maka hasinya akan seperti gambar di bawah ini:

Untuk gambar lebih jelasnya klik saja gambarnya...



Link ke bagian tertentu dalam dokumen yang sama

Untuk membuat link ke bagian tertentu dalam dokumen yang sama anda harus memberikan nama anchor dan juga membuat link, sehingga perbedaannya dengan link yang berbeda dokumen adalah tujuan/target link, jika dalam dokumen yang sama yang dituju adalah nama anchor tetapi kalau dokumen yang beda yang dituju adalah nama file/dokumen yang bersangkutan.Untuk memberi nama anchor, atribut yang dipakai adalah NAME pada tag anchor <A> dan untuk membuat link cukup memberikan tanda # setelah nama file dalam URL. Misal:

<a href=â''#phpâ''> Ada apa dengan PHP? </a>
atau dapat ditulis lengkap:
<a href=â''belajar_php.html#phpâ''> Ada apa dengan PHP? </a>
dan untuk nama anchornya:
<a name=â''phpâ''>Ada apa dengan PHP?</a>


Link ke alamat URL atau Website

Untuk membuat link ke alamat URL adalah dengan menambahkan:
http://nama_URL.
Contoh:

<a href=â''http://arifjainuri.blogspot.com/â''>Blog aku</a>
<a href=â''http://www.smkpgri3-mlg.sch.idâ''>www.smkpgri3-mlg.sch.id </a>



Link ke Alamat Email

Link email adalah membuat link pada teks, jika teks tersebut diklik maka akan menampilkan program pengiriman email yang terdapat pada komputer yang dipakai untuk mengakses data atau teks tersebut secara otomatis.
Untuk membuat link ke alamat email hanya menambahkan atribut mailto:alamat_email ke dalam tag

<A HREF>

contoh


<A HREF="mailto:webmaster@smkpgri3-mlg.sch.id">Kirim email</a>



Link File yang akan didownload

Link file dalam hal ini adalah apabila dikik pada teks tersebut maka proses selanjutnya adalah mendownload file yang tercantum pada dokumen tersebut. Format penulisannya adalah

<a href=nama_file>

contoh

<a href=â''baru.zipâ''>Download baru</a>
<a href=â''baru.docâ''>Download</a>
<a href=â''php404.exeâ''>Download PHP</a>


Untuk mengubah kode-kode tersebut menjadi seperti gambar tersebut siahkan klik DI SINI

Untuk pertanyaan silahkan tinggalkan komentar di bawah ini!
TERIMA KASIH
Posted by at No comments:
Labels:

Pengaturan Teks Pada HTML

Ada banyak Pengaturan Teks Pada HTML
salah satu contohnya yang akan kita bahas adalah:

Preformatted Text:
<PRE>. Digunakan untuk mengatur format tampilan agar sesuai dengan aslinya.
Contoh

<html>
<head>
<title>the &lt;pre&gt; tag</title>
</head>
<body>
<h3>without the &lt;pre&gt; tag:</h3>

               here's
             some ditty
           specially done
         to lay it out all
       formatted and pretty.
     unfortunately, that is all
       this junk really means
          because i admit i
           couldn't scrawl
             poetry for 
               beans.
     <p>
<h3>with the &lt;pre&gt; tag:</h3>


     <pre>
               here's
             some ditty
           specially done
         to lay it out all
       formatted and pretty.
     unfortunately, that is all
       this junk really means
          because i admit i
           couldn't scrawl
             poetry for 
               beans.

</pre>
</body>
</html>

maka hasinya akan seperti gambar di bawah ini:

Untuk gambar lebih jelasnya klik saja gambarnya...




Extended Quotations:

: <BLOCKQUOTE>, digunakan untuk membuat kutipan panjang, sehingga hasilnya menjorok ke dalam.
Contoh:

<html>
<head> <title>::: Blockquote :::</title> </head>
<body>
<h3>2. Pengaturan Teks</h3>
<blockqoute>

Untuk mendapatkan halaman web yang baik Anda harus melakukan pengaturan terhadap teks seperti memilih jenis dan ukuran huruf, perataan, dll.
</blockqoute>
</body>
</html>


maka hasinya akan seperti gambar di bawah ini:

Untuk gambar lebih jelasnya klik saja gambarnya...




Untuk mengubah kode-kode tersebut menjadi seperti gambar tersebut siahkan klik DI SINI

Untuk pertanyaan silahkan tinggalkan komentar di bawah ini!
TERIMA KASIH

Posted by at No comments:
Labels:

LISTS (Daftar)

Daftar/list adalah merupakan kumpulan teks yang disusun sedemikian rupa sehingga item-item yang ada memiliki nomor urut atau bisa juga berupa tanda-tanda khusus/symbol.


Terdapat tiga tipe list yang dapat digunakan, yaitu :

  • Unordered Lists:

<UL> Untuk membuat daftar item dengan tanda bullet (tidak bernomor). List entries didefinisikan dengan tag <LI>. Pada jenis ini tidak memerlukan pengurutan data. Bentuk item tanda pada Unordered List dapat diubah dengan menggunakan atribut TYPE kedalam tag <UL> dengan nilai “circle” untuk bentuk lingkaran tengahnya putih, “square” untuk bentuk kotak padat hitam dan “disc” bentuk lingkaran pada warna hitam.
Contoh :

<html>
<head>
<title>::: Undordered List :::</title>
</head>
<body>
<b><font size=3 Face=tahoma color=blue>
Hobi saya adalah : </b>
<hr size=2 width=150 align=left>
<ul type=circle>
<li>Olahraga
</ul>
<ul type=square>
<li>Shurfing
</ul>
<ul type=disc>
<li>Makan Bakso
</ul>
</font>
</body>
</html>


maka hasinya akan seperti gambar di bawah ini:

Untuk gambar lebih jelasnya klik saja gambarnya...



  • Ordered Lists:

<OL> Juga digunakan untuk membuat daftar item bernomor, dengan tiap item dapat menggunakan angka arab atau romawi. List entries juga didefinisikan dengan <LI>tag. Atribut yang ada pada Ordered List adalah TYPE dan START.

Contoh :

<html>
<head>
<title>::: Ordered List :::</title>
</head>
<body>
<b><font size=2 Face=tahoma color=black>
Pendidikan saya adalah : </b>
<hr size=2 width=150 align=left>
<ol type=1>
<li>Sekolah Dasar
<li>Sekolah Lanjutan Pertama
<li>Sekolah Lanjutan Atas
</ol>
<hr size=3 width=500>
<ol start=4>
<li>Universitas Muhammadiyah Malang
<li>Universitas PGRI Malang
</ol>
</font>
</body>
</html>

maka hasinya akan seperti gambar di bawah ini:

Untuk gambar lebih jelasnya klik saja gambarnya...




Untuk attribut TYPE, dapat juga menggunakan :
1- Default numbers, 1, 2, 3, etc.
A- Huruf besar. A, B, C, etc.
a- Huruf kecil. a, b, c, etc.
I- Romawi huruf besar. I, II, III, etc.
i- Romawi huruf kecil , i, ii, iii, etc.


  • Definition Lists:


<DL>, digunakan untuk menjelaskan istilah-istilah. Definition List dinyatakan dengan tag <DL> dan diantara tag tersebut ditambahkan tag <DT> Definition Term yaitu bagian istilah yang dijabarkan dan tag <DD> Definition Data yang merupakan penjabaran dari istilah.
Contoh :

<dl>
<dt> Bagian Pertama.
<dd> Sub Bagian Pertama.
<dt> Bagian Kedua.
<dd> Sub Bagian Kedua
</dl>


maka hasinya akan seperti gambar di bawah ini:

Untuk gambar lebih jelasnya klik saja gambarnya...



Untuk mengubah kode-kode tersebut menjadi seperti gambar tersebut siahkan klik DI SINI

Untuk pertanyaan silahkan tinggalkan komentar di bawah ini!
TERIMA KASIH

Posted by at No comments:
Labels:

HORIZONTAL LINE

HORIZONTAL LINE

<HR>, digunakan untuk membuat garis horisontal. Tag ini mempunyai atribut SIZE, WIDTH, ALIGN dan NOSHADE. Atribut SIZE digunakan untuk menentukan panjang garis dalam satuan pixel. Atribut WIDTH digunakan untuk menentukan ketebalan garis. Atribut NOSHADE akan menyatakan bahwa garis tersebut ditampilkan tanpa bayang-bayang 3-D.
Contoh:

<html>
<head>
<title>::: Membuat Garis Horisontal :::</title>
</head>
<body>
<font size=1 Face=tahoma color=blue>Selamat Datang</font>
<hr size=1 width=150 align=left>
<h1><center>www.smkn1tanggul.sch.id</h1>
<hr size=5 align=center noshade>
</body>
</html>


maka hasinya akan seperti gambar di bawah ini:

Untuk gambar lebih jelasnya klik saja gambarnya...



Untuk mengubah kode-kode tersebut menjadi seperti gambar tersebut siahkan klik DI SINI

Untuk pertanyaan silahkan tinggalkan komentar di bawah ini!
TERIMA KASIH
Posted by at No comments:
Labels:

BASE FONT

<BASEFONT> Digunakan untuk mendefinisikan "default text". Attribut sama dengan attribut FONT. Tag FONT akan mengoverwrite setting pada BASEFONT.
Contoh :
<basefont size=2 face="arial,helvetica" color="#ff0000">


Perhatian :
Selain tag dan atribut diatas, masih terdapat lagi tag-tag yang berhubungan dengan pengaturan teks, yaitu :
<B> </B> Bold text

<I> </I> Italic text

<U> </U> Underscore

<TT> </TT> Typewriter

<S> </S> Strikeout - draws a line through the text

<PRE> Preformatted Text

<DFN> Definition

<BLINK> Text berkedip (lebih baik jgn di gunakan)

<STRONG> Strong


<CITE> Digunakan untuk quoting text

<CODE> Monospaced font (digunakan bila Anda ingin meletakkan (memperlihatkan) kode HTML pada dokumen HTML Anda)

<SAMP> Monospaced font (digunakan bila Anda ingin meletakkan (memperlihatkan) kode HTML pada dokumen HTML Anda)

<KBD> Monospaced font (digunakan bila Anda ingin meletakkan (memperlihatkan) kode HTML pada dokumen HTML Anda)

<BIG> Ukuran teks akan lebih besar satu ukuran

<SMALL> Ukuran teks akan lebih kecil satu ukuran

<SUP> Membuat tekssuperscript

<SUB> membuat tekssub script

<ABBREV> Abbreviations

<ACRONYM> Untuk akronim

<PERSON> Digunakan untuk indexing

<Q> Membuat short inline quotation

<VAR> Membuat variable name, selalu dalam
italics.

Perhatian : Semua tag di atas ini membutuhkan tag penutup.

Untuk mengubah kode-kode tersebut menjadi HALAMAN WEB siahkan klik DI SINI

Untuk pertanyaan silahkan tinggalkan komentar di bawah ini!
TERIMA KASIH

Posted by at No comments:
Labels:

Kode-Kode HTML lainnya

Kode-Kode HTML lainnya:
Dalam HTML lumayan Banyak kode-kodenya untuk membuat sebuah halaman Web...
ni merupakan sedikit tentang Kode, kode tersebut:


A. PARAGRAPH BARU: <P> Digunakan untuk pindah alinea atau membuat paragraf baru. Tag ini bisa diberi akhiran </P> tapi juga bisa tidak diberi. Dalam tag ini juga bisa digunakan untuk mengatur perataan kiri, tengah, kanan dan kiri-kanan, yaitu dengan attribut ALIGN. Attribut align mempunyai nilai: LEFT, RIGHT, CENTER dan JUSTIFY.


B. LINE BREAK: <BR> Digunakan untuk pindah ke baris baru.


C. NO LINE BREAK: <NOBR> Bila digunakan tag ini maka teks yang panjang tidak secara otomatis pindah baris bawahnya bila baris pertama sudah terlalu panjang.
D. FONT: <font> Digunakan untuk mengatur huruf dokumen HTML. Tag FONT mempunyai attribut, yaitu: SIZE, FACE, COLOR.


a. SIZE: Digunakan untuk mengatur ukuran font. Ukuran font yang digunakan berkisar antara 1 - 7 dengan 1 merupakan ukuran terkecil dan 7 merupakan ukuran terbesar.


b. FACE: Digunakan untuk mengatur jenis atau nama font. Anda bisa memilih maksimal 3 jenis font yang masing-masing dipisahkan oleh koma. Bila terdapat spasi yang terletak pada nama font maka harus digunakan tanda garis bawah (_). Dalam memilih jenis font ini harus dipertimbangkan apakah font yang kita gunakan pada halaman web kita nantinya akan terdapat pada komputer pengguna yang lain (pengakses web kita). Pendeknya kita tidak usah menggunakan font-font yang bentuknya aneh-aneh, gunakan saja font standar. Tapi bila Anda ingin menggunakan font yang sedikit "aneh" Anda bisa menggunakan graphic.


c. COLOR: Digunakan untuk mengatur warna font. Didefinisikan dengan menggunakan nilai RGB/HEX atau bisa juga langsung menggunakan nama warna (red misalnya).
Contoh :
<html>
<head>
<title>::: Ukuran, Jenis dan Warna Font :::</title>
</head>
<body>
<font size=1 Face=arial color=red>Ukuran font 1</font><br>
<font size=2 Face=arial color=green>Ukuran font 2 </font><br>
<font size=3 Face=arial color=blue>Ukuran font 3 </font><br>
<font size=4 Face=verdana color=red>Ukuran font 4 </font><br>
<font size=5 Face=verdana color=blue>Ukuran font 5 </font><br>
<font size=6 Face=tahoma color=green>Ukuran font 6 </font><br>
<font size=7 Face=tahoma color=red>Ukuran font 7 </font><br>
</body>
</html>

maka hasinya akan seperti gambar di bawah ini:

Untuk gambar lebih jelasnya klik saja gambarnya...



Contoh lainnya :
<font size=2 face="times_new_roman" color="#0066cc">


Untuk mengubah kode-kode tersebut menjadi seperti gambar tersebut siahkan klik DI SINI

Untuk pertanyaan silahkan tinggalkan komentar di bawah ini!
TERIMA KASIH
Posted by at No comments:
Labels:
Subscribe to: Posts (Atom)