Gambas TI: May 2014

Tuesday, May 6, 2014

Cara Memasukan File Gambar di HTML

Kali ini saya akan menuliskan sebuah artikel tentang bagaimana cara menyisipkan gambar ke dalam html. ini sering di gunakan untuk menampilkan logo atau foto dari suatu situs/website. Dalam suatu tag html, gambar tersebut ditulis dengan menggunakan kode, hal ini di karenakan pada html di tulis di dalam notepad yang tidak dapat di masuki oleh gambar atau suatu website, namun kita dapat memasukan gambar tersebut dengan menggunakan tag atau kode pada notepad. Berikut adalah cara cara dan kode kode untuk memasukan gambar ke dalam tag html.

Untuk memasukan gambar Gambar , digunakan tag <img>. Berikut adalah susunan sederhananya, gunakan tag berikut;
<img src=”url gambar( letak file gambar berada)”>

File Gambar dan File HTML saya letakan di My Document seperti terlihat di gambar ini :

Terdiri dari file :

Unitted.html
Kaskus.jpg Gambar seperti dibawah ini :

Sehingga penulisannya :

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>

<body>
<img src="Kaskus.jpg"</img>
</body>
</html>

Hasilnya akan tampil logo atau logo dari Kakus di dalam browser.

Penutup

Di atas adalah cara cara untuk memasukan gambar ke dalam tag html. Kritik dan saran sangat saya butuhkan. Terimakasih.

Sunday, May 4, 2014

Pengaturan Teks Pada HTML

Untuk mendapatkan halaman web yang baik Anda harus melakukan pengaturan terhadap teks seperti memilih jenis dan ukuran huruf, perataan, dll. Tag-tag di bawah ini yang biasa digunakan dalam pengaturan teks :
Headers: <Hn>..</Hn> Digunakan untuk mengatur ukuran huruf pada header. "n" mempunyai nilai antara 1 - 6 atau antara <H1> sampai <H6>, dengan <H1> merupakan ukuran terbesar dan <H6> merupakan ukuran terkecil.
Contoh :
<H2>Tutorial Html</H2>

Hasilnya akan terlihat seperti :

Tutorial Html

Paragraph Baru: <P> Digunakan untuk pindah alinea atau paragraf. Tag ini bisa diberi akhiran </P> tapi juga bisa tidak diberi.
Line Break: <BR> Digunakan untuk pindah ke baris baru.
No Line Break: <NOBR> Bila digunakan tag ini maka teks yang panjang tidak secara otomatis pindah baris bawahnya bila baris pertama sudah terlalu panjang.
Font <FONT> Untuk mendefinisikan berbagai attribut FONT, yaitu : SIZE, FACE, COLOR.
SIZE: Ukuran font yang digunakan, berkisar antara 1 - 7 dengan 1 merupakan ukuran terkecil dan 7 merupakan ukuran terbesar.
FACE: 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.
COLOR: Warna font, didefinisikan dengan menggunakan nilai RGB/HEX atau bisa juga langsung menggunakan nama warna (red misalnya).
Contoh :
<FONT SIZE=4 FACE="Verdana, Arial, Helvetica" COLOR="#FF0000">Contoh teks yang berwarna merah</FONT>

Hasilnya akan terlihat seperti :

Contoh teks yang berwarna merah
Contoh lainnya :
<FONT SIZE=2 FACE="Times_New_Roman" COLOR="#0066CC">
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">
Selain tag dan atribut di atas, masih terdapat lagi tag-tag yang berhubungan dengan pengaturan teks, yaitu :
Perhatian : Semua tag di bawah ini membutuhkan tap penutup.
<B> Bold text
<I> Italic text
<U> Underscore
<TT> Typewriter
<S> Strikeout - ~~draws a line through the text~~
<PRE> Preformatted Text <DFN> Definition
<BLINK> Text berkedip (lebih baik jangan digunakan)
<STRONG> Strong
<ADDRESS>

Italic

<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 teks^superscript
<SUB> membuat teks_{sub script}
<ABBREV> Abbreviations
<ACRONYM> Untuk akronim
<PERSON> Digunakan untuk indexing
<Q> Membuat short inline quotation
<VAR> Membuat variable name, selalu dalam italics.

Lists
Terdapat tiga tipe list yang dapat digunakan, yaitu :
Unordered Lists: <UL> Untuk membuat daftar item dengan tanda bullet. List entries didefinisikan dengan tag <LI>.
Contoh :

<UL>
<LI> Item nomer 1
<LI> Item nomer 2
<LI> Item nomer 3
</UL>
Hasil dari kode di atas adalah:

Item nomer 1
Item nomer 2
Item nomer 3

Dengan atribut TYPE Anda dapat mendefinisikan bentuk disc, circle atau square bullet point.
Contoh :

<UL COMPACT TYPE=square> …
Ordered Lists: <OL> Juga digunakan untuk membuat daftar item, dengan tiap item dapat menggunakan angka arab atau romawi. List entries juga didefinisikan dengan <LI> tag.
Contoh :

<OL TYPE=I>
<LI> Item nomer 1
<LI> Item nomer 2
<LI> Item nomer 3
</OL>
Hasil dari kode di atas adalah :

Item nomer 1
Item nomerr 2
Item nomerr 3

Untuk TYPE Anda 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>
Contoh :

<DL>
<DT> Item pertama.
<DD> Penjelasan tentang item pertama.
<DT> Item kedua.
<DD> Penjelasan tentang item kedua
</DL>

Hasil dari kode di atas adalah :

Item pertama.

Penjelasan tentang item pertama.

Item kedua.

Penjelasan tentang item kedua

Membuat Judul Halaman di HTML

Cara membuat halaman jdul di HTMl kita mengunkan perintah :
<title>...................</title>
perintah title tersebut terletak dinatara <html> dan <head> sebagai contoh sebagai berikut

<html>
<head>
<title> Letakkan judul situs di sini </title>
</head>
<body>
Ini halaman situs Anda. Letakkan perintah-perintah HTML di sini.
Ini halaman situs Anda. Letakkan perintah-perintah HTML di sini.
Ini halaman situs Anda. Letakkan perintah-perintah HTML di sini.
</body>
</html>

Setelah diketikkan, Anda simpan dengan nama latihan.html. Untuk mengeceknya Anda double
click file yang telah Anda simpan. Sebenarnya Anda dapat menggunakan ekstensi .htm, tetapi
supaya sama, maka sebaiknya digunakan ekstensi .html.

Gambas TI

Pages