IT: HTML Tutorial untuk Pemula

Subyek: IT: HTML Tutorial untuk Pemula 06.03.08 12:09

COMPUTER AND INTERNET - KOSTER ™ IT'S PRO ™

MEMBUAT PAGINA JALA | WEB PAGE DENGAN TATA-LETAK DAN TAUT

MENGGUNAKAN PEMPROGRAMAN HTML,
TEXT EDITOR, WEB PAGE DESIGNER | DEVELOPER | PROCESSOR

BAGIAN PERTAMA

PENDAHULUAN

Internet (antarjaring) bukan lagi menjadi kalimat yang asing bagi telinga kita. Bahkan orang awam sekalipun sudah mengenal apa yang dinamakan internet, kata-kata www (world wide web, jala lebar dunia) [baca:triple double-yu] seakan-akan sudah menjadi bagian yang tidak dapat dipisahkan dari kehidupan modern saat ini. Situs-situs jala (web sites) dan surat-elektronik (electronic-mail, e-mail, email) menampilkan berbagai informasi apapun yang ada di belahan dunia tak peduli seberapapun jauhnya.

Komputer-komputer yang berkomunikasi satu terhadap yang lain di internet, dikendalikan oleh program-program komunikasi antar-komputer, yang disebut protocol (protokol, tolok), berfungsi sebagai semacam translator (penterjemah) atau interpreter (penafsir) atau compiler (penyadur), dimana protokol utama internet dinamakan TCP/IP (Transfer Communication Protocol / Internet Protocol).

Untuk membuat suatu pagina jala (web page) untuk situs jala atau e-mail dengan tata-letak (layout) yang menarik dan interaktiv [seperti pagina ini], yang tak hanya sekedar menampilkan informasi, tapi juga dapat berinteraksi dengan user, maka suatu pagina jala tak bersifat statik, tapi dapat menjadi bersifat dinamik, membutuhkan kemampuan pemrograman jala (web programming).

Setelah pendahuluan ini akan diberikan sekilas pengertian tentang pemrograman jala. Apa yang dimaksud pemprograman sisi-peladen atau SSP (server-side programming) dan apa yang dimaksud dengan pemprograman sisi-terladen atau CSP (client-side programming).

SERVER SIDE VS CLIENT SIDE

Teknologi yang digunakan dalam pemrograman jala dibagi menjadi dua yaitu server-side dan client-side. Pada server-side, perintah-perintah program dijalankan di web server computer (komputer peladen jala) dan dikirimkan ke web browser (perambah jala) sudah dalam bentuk HTML (HyperText Mark-up Language). Sedangkan pada client-side, proses akan dilakukan di web browser. Biasanya client-side digunakan untuk hal-hal yang membutuhkan interaksi user (peguna), tapi data yang ditampilkan tetap dan seragam.

Aplikasi web berjalan pada protokol HTTP (HyperText Transfer Protocol), dan semua protokol di internet selalu melibatkan antara server dan client. Ketika seseorang mengetikkan suatu alamat di browser, maka browser akan mengirimkan perintah tersebut ke web server computer. Jika yang diminta oleh client computer adalah file (berkas) yang mengandung perintah server-side, maka web server computer akan menjalankan lebih dulu program tersebut baru kemudian mengirimkannya kembali ke browser dalam bentuk HTML, sehingga dapat diterjemahkan oleh browser. Sedangkan jika yang diminta oleh client computer adalah file yang mengandung perintah client-side, maka oleh server,file tersebut akan langsung dikirimkan ke browser.

Cukup banyak dan bervariasi bahasa pemrograman yang dipakai pada pemrograman web, diantaranya: ASP (Active Server Pages) [Microsoft], PHP (Programmable Hypertext Processor), Perl CGI (Common Gateway Interface), JSP (Java Server Pages), CFM (Cold Fusion Mark), dll, yang kesemuanya itu adalah program server-side. Sedangkan untuk program client-side, diantaranya adalah HTML (HyperText Mark-up Language), JavaScript [script version of Java programming language] [Sun MicroSytems], JScript [script version of J programming language] dan BScript [script version of Visual BASIC] [Microsoft].

[ bersambung ke ... bagian dua ]

Silahkan mempelajari dan mencoba, kalau masih belum paham atau belum bisa, harap jangan sungkan atau malu untuk bertanya langsung via forum ini. Kita semua senantiasa belajar tanpa mengenal usia, karena teknologi komputer dan internet berkembang terus dari hari ke hari. (TR/nn)

IT'S PRO ™ INFORMATION TECHNOLOGY SOLUTION PROVIDER

KOSTER ™ KOMUNITAS SUZUKI THUNDER

___________________________________

(C) 1998-2008 - THUNDER RIDER | EE ONE S

HAKI (Hak Atas Kepemilikan Intelektual) karya tulis intelektual ini dilindungi oleh Undang-Undang Negara Republik Indonesia, dan juga oleh konvensi dan provisi internasional atas karya intelektual di tiap negara di seluruh dunia.

Tak sebagian pun dari tulisan, dokumen atau pagina jala ini boleh disalin, digandakan dan atau diperbanyak: diduplikasi, direplika, direproduksi, ditransmisi, ditranskripsi, ditranslasi kedalam bentuk bahasa apapun atau disimpan dalam satu sistem retrieval apapun; dalam bentuk apapun atau dalam cara apapun, mencakup tapi tak terbatas pada cara optik, elektromagnetik, elektronik, elektromekanik, atau lainnya; untuk maksud dan tujuan komersial; tanpa pemberitahuan dan perkenanan tertulis terlebih dulu dari pemilik hak atas karya intelektual ini.

Untuk non-komersial, duplikasi dan distribusi secara keseluruhan atau sebagian, mohon cantumkan sumber tulisan sebagai acuan.

Subyek: Re: IT: HTML Tutorial untuk Pemula 06.03.08 12:27

COMPUTER AND INTERNET - KOSTER ™ IT'S PRO ™

MEMBUAT PAGINA JALA | WEB PAGE DENGAN TATA-LETAK DAN TAUT

MENGGUNAKAN PEMPROGRAMAN HTML,
TEXT EDITOR, WEB PAGE DESIGNER | DEVELOPER | PROCESSOR

BAGIAN DUA

HTML

HTML (HyperText Mark-up Language) adalah bahasa standar dalam menulis pagina jala (web page). HTML merupakan pengembangan dari standar pemformatan dokumen teks. HTML sebenarnya adalah dokumen dalam bentuk | format ASCII (American Standard Code for Infomation Interchange) atau teks biasa yang dapat diterjemahkan olehweb browser dan HTML e-mail reader | writter menjadi suatu pagina dengan tata-letak (layout) menarik mengandung grafiks dan taut (link) interaktiv.

STRUKTUR DASAR DOKUMEN HTML

Sesuai dengan namanya, dokumen HTML terdiri dari tanda-tanda atau marka (mark-up) untuk menandai perintah-perintahnya. Selanjutnya akan kita sebut sebagai "tag".

Tag HTML biasanya adalah tag-tag yang berpasangan dan ditandai dengan simbol <dan>, sedangkan ‘pasangan’ atau akhir perintah dari sebuah tag ditandai dengan tanda ‘/’, misalnya pasangan dari tag adalah .

Setiap dokumen HTML memiliki struktur sbb:

</TITLE>
</HEAD>

<BODY>

</BODY>

</HTML>

Untuk lebih jelasnya, silahkan buka text editor [misalnya, untuk Microsoft Windows: NotePad, atau WordPad], lalu ketikkan baris perintah HTML diatas, save dengn nama "html-latihan-1.txt", dan kemudian ubah ekstensi namanya menjadi "html-latihan-1.htm", dan panggil melalui web browser [misalnya, untuk Microsoft Windows: Internet Explorer].

IT: HTML Tutorial untuk Pemula Img-latihan-010htm

Gambar 1. Tampilan Latihan 1

[ bersambung ke ... bagian tiga ]

Silahkan mempelajari dan mencoba, kalau masih belum paham atau belum bisa, harap jangan sungkan atau malu untuk bertanya langsung via forum ini. Kita semua senantiasa belajar tanpa mengenal usia, karena teknologi komputer dan internet berkembang terus dari hari ke hari. (TR/nn)

IT'S PRO ™ INFORMATION TECHNOLOGY SOLUTION PROVIDER

KOSTER ™ KOMUNITAS SUZUKI THUNDER

Subyek: Re: IT: HTML Tutorial untuk Pemula 06.03.08 12:40

COMPUTER AND INTERNET - KOSTER ™ IT'S PRO ™

MEMBUAT PAGINA JALA | WEB PAGE DENGAN TATA-LETAK DAN TAUT

MENGGUNAKAN PEMPROGRAMAN HTML,
TEXT EDITOR, WEB PAGE DESIGNER | DEVELOPER | PROCESSOR

BAGIAN TIGA

HEADING

Tag yang pertama kali akan kita pelajari adalah heading tag, yang berfungsi untuk memformat heading (kop, kepala; judul, subjudul) dalam suatu dokumen. Ada 7 peringkat heading yang dikenal dalam HTML, yaitu <H1> sampai <H7>.

Untuk mengetahui ukuran tiap heading, anda dapat mencoba baris-baris berikut:

<HTML>

</TITLE>
</HEAD>

<BODY>

<H1>

</H1>
<H2>

</H2>
<H3>

</H3>
<H4>

</H4>
<H5>

</H5>
<H6>

</H6>
<H7>

</H7>

</BODY>

</HTML>

Gambar 2. Tampilan Latihan Heading

[ bersambung ke ... bagian empat ]

Silahkan mempelajari dan mencoba, kalau masih belum paham atau belum bisa, harap jangan sungkan atau malu untuk bertanya langsung via forum ini. Kita semua senantiasa belajar tanpa mengenal usia, karena teknologi komputer dan internet berkembang terus dari hari ke hari. (TR/nn)

IT'S PRO ™ INFORMATION TECHNOLOGY SOLUTION PROVIDER

KOSTER ™ KOMUNITAS SUZUKI THUNDER[/b]

Subyek: Re: IT: HTML Tutorial untuk Pemula 06.03.08 13:13

COMPUTER AND INTERNET - KOSTER ™ IT'S PRO ™

MEMBUAT PAGINA JALA | WEB PAGE DENGAN TATA-LETAK DAN TAUT

MENGGUNAKAN PEMPROGRAMAN HTML,
TEXT EDITOR, WEB PAGE DESIGNER | DEVELOPER | PROCESSOR

BAGIAN EMPAT

PARAGRAPH

Untuk memformat paragraf | alinea, kita bisa menggunakan tag <P> [paragraph].
Dengan tag ini kita bisa menentukan alignment (peletakan) text pada pagina dokumen HTML. Untuk mengatur posisi tulisan kita menggunakan atribut ALIGN. Atribut ALIGN diikuti dengan posisi yang diinginkan.

Selain tag <P> ada pula tag <BR> [break] untuk pindah ke baris baru (new line) tanpa paragraf baru, <NOBR> [no break] untuk tak pindah ke baris baru, <HR> [horizontal line] untuk membuat garis, <BLOCKQUOTE> untuk membuat kutipan, <PRE> [preserve] untuk menampilkan text samadengan yang anda ketikkan dalam dokumen HTML, misal anda mengetikkan:

<HTML>

</TITLE>
<HEAD>

<BODY>

</BODY>

</HTML>

Maka yang akan ditampilkan oleh web browser adalah:

HalloHalloHallo

Hal itu terjadi karena HTML tidak mengenali tombol [Enter], sehingga tombol tersebut diabaikan. Untuk mengatasi hal tersebut maka kita menggunakan tag <PRE> tersebut.

<HTML>

</TITLE>
</HEAD>

<BR>

   +-------+
   | x   y |
   |       |
   |   z   |
   +-------+

</PRE>

</BODY>

</HTML>

Gambar 3. Tampilan Latihan Paragraph

[ bersambung ke ... bagian lima ]

Silahkan mempelajari dan mencoba, kalau masih belum paham atau belum bisa, harap jangan sungkan atau malu untuk bertanya langsung via forum ini. Kita semua senantiasa belajar tanpa mengenal usia, karena teknologi komputer dan internet berkembang terus dari hari ke hari. (TR/nn)

IT'S PRO ™ INFORMATION TECHNOLOGY SOLUTION PROVIDER

KOSTER ™ KOMUNITAS SUZUKI THUNDER[/b]

Subyek: Re: IT: HTML Tutorial untuk Pemula 06.03.08 13:22

COMPUTER AND INTERNET - KOSTER ™ IT'S PRO ™

MEMBUAT PAGINA JALA | WEB PAGE DENGAN TATA-LETAK DAN TAUT

MENGGUNAKAN PEMPROGRAMAN HTML,
TEXT EDITOR, WEB PAGE DESIGNER | DEVELOPER | PROCESSOR

BAGIAN LIMA

FONT
Untuk mengatur jenis, ukuran, warna suatu font, kita bisa menggunakan tag <FONT>, dimana tag <FONT> ini memiliki beberapa atribut diantaranya FACE dan COLOR.

Atribut FACE digunakan untuk menentukan jenis font yang akan kita gunakan, semisal kita akan menggunakan jenis font Comic Sans MS, maka kita dapat menuliskan <FONT FACE="Comic Sans MS">.

Sedangkan COLOR berfungsi untuk menentukan warna font, bisa dengan cara menyebutkan nama warna seperti "red", "green", dan "blue" atau
menggunakan nilai RGB (Red Green Blue) dari suatu warna, misalnya #FF0000 untuk red, #00FF00 untuk green, dan
#0000FF untuk blue. Ada juga atribut SIZE untuk menentukan ukuran font. Coba contoh berikut:

<HTML>

<HEAD>
<TITLE

</TITLE>
</HEAD>

<BODY>

</FONT><BR><BR><FONT FACE="Helvetica" COLOR="orange" SIZE="2">

</FONT><BR><BR><FONT FACE="Tahoma" COLOR="green" SIZE="3">

</FONT><BR><BR><FONT FACE="Verdana" COLOR="cyan" SIZE="4">

</FONT><BR><BR><FONT FACE="Arial" COLOR="blue" SIZE="5">

</FONT><BR><BR><FONT FACE="Courier" COLOR="violet" SIZE="6">

</FONT>

</BODY>

</HTML>

Gambar 4. Contoh Latihan Font

[ bersambung ke ... bagian enam ]

Silahkan mempelajari dan mencoba, kalau masih belum paham atau belum bisa, harap jangan sungkan atau malu untuk bertanya langsung via forum ini. Kita semua senantiasa belajar tanpa mengenal usia, karena teknologi komputer dan internet berkembang terus dari hari ke hari. (TR/nn)

IT'S PRO ™ INFORMATION TECHNOLOGY SOLUTION PROVIDER

KOSTER ™ KOMUNITAS SUZUKI THUNDER[/b]

Subyek: Re: IT: HTML Tutorial untuk Pemula 06.03.08 13:33

Ok Pak Iwan, wah asyik neh ada info kayak gini...nanti ta' coba ah

Subyek: Re: IT: HTML Tutorial untuk Pemula 06.03.08 14:33

salam koster :koster: Bendera Indonesia

nah tuh om iwan udah kasih ilmu cara membuat HTML ( (HyperText Mark-up Language) yah...heee
kalo emang pada berminat nanti kita buatkan Training class yah om...
biar all brogader koster melek terhadap dunia IT khususnya Internet...
dibantu bro admin Koster dimas, bro heru, bro heri, om gerry, bro oqi, bro teddy fazri, teddy lw.liang, anton lee , g-force ( migo ), dll
insya allah Ilmu yg akan kita berikan akan bertambah terus & berpahala asala ikhlas dan mengalir seperti air....amin TOP BGT !

Subyek: Re: IT: HTML Tutorial untuk Pemula 06.03.08 15:09

seep lah....ayo donk kapan schedule trainingnya....siapa yang paling menguasai informasi dialah yang akan mendapat benefit sebanyak2nya.....semakin banyak ilmu kita alirkan, maka semakin banyak juga ilmu lain yang akan diwariskan kepadanya, bener ga Om bear?

Subyek: Re: IT: HTML Tutorial untuk Pemula 06.03.08 15:30

Sungguh beruntung kalau kita banyak diberi ilmu oleh Allaah SWT. Diantaranya adalah kita bisa memberikan ilmu kpd banyak org lain.

Jadilah org kaya akan ilmu, krn tak pernah ada ruginya. Lbh baik kaya ilmu drpd kaya harta. Tapi lbh baik lagi kalau kaya keduanya.

... memang lbh baik kaya drpd miskin, TOP BGT !

baik dlm ilmu maupun dlm harta, berdoa...

bersyukurlah kalau kita memiliki keduanya, krn diriwayatkan dlm satu hadits shahih bahwa, Muhammad, rasulullah shalla-llaahu 'alay-hi wa sallama, pernah bersabda:

... dan dlm satu athar, diriwayatkan bahwa, sayyidi-naa ’Ali, karrama–llaahu wajha–hu pernah berkata:

al-’ilmu khayrun mmina al-maali;
al-’ilmu yahrusu–ka, wa anta tahrusu al-maala;
wa al-’ilmu haakimun, wa al-maalu mahkuwmun ’alay–hi;
wa al-maalu tanqushu–hu `aln-nafaqatu, wa al-’ilmu yazkuw bi al-infaaqi.

Jadi kesimpulannya, jika harta makin diberikan makin berkurang, maka ilmu makin diberikan makin bertambah.

Nah, kalau anda kaya, anda wajib menunaikan zakat, infaq, dan shadaqah, alias memberikan kekayaan anda kpd org lain yg membutuhkannya. Tp kalau anda miskin, justeru anda yg wajib diberi. ... Silahkan pilih ...

Semoga bermanfaat ...

Subyek: Re: IT: HTML Tutorial untuk Pemula 06.03.08 17:47

COMPUTER AND INTERNET - KOSTER ™ IT'S PRO ™

MEMBUAT PAGINA JALA | WEB PAGE DENGAN TATA-LETAK DAN TAUT

MENGGUNAKAN PEMPROGRAMAN HTML,
TEXT EDITOR, WEB PAGE DESIGNER | DEVELOPER | PROCESSOR

BAGIAN ENAM

WARNA PAGINA

Suatu pagina web atau e-mail akan terlihat lebih menarik bila diberi warna-warna atau gambar sebagai latarbelakangnya.

Untuk itu, pada HTML tersedia atribut-atribut untuk mengatur hal tersebut, atribut tersebut antara lain bisa diletakkan pada tag <BODY> sehingga efeknya akan dapat dilihat di seluruh pagina. Atribut yang digunakan dalam tag <BODY>; yaitu:

ATRIBUT	FUNGSI
BACKGROUND	citra grafiks sebagai background halaman web
BGCOLOR	warna background suatu halaman web
TEXT	warna teks normal
LINK	warna teks yang berfungsi sebagai link \| taut
ALINK	warna teks link ketika aktive
VLINK	warna teks link ketika telah dikunjungi (visited)

LINK

Dalam pagina web atau e-mail interaktiv, ada yang dinamakan link (taut), link berfungsi untuk pindah paragraf atau pindah pagina, sebagai penghubung antar paragraf atau antar pagina. Untuk link ini HTML menyediakan tag <A> [Anchor]. Tag <A> memiliki beberapa atribut mis: NAME untuk memberikan nama pada suatu paragraf/tulisan dalam dokumen HTML, sehingga mempermudah navigasi dalam suatu halaman web, dan HREF untuk menghubungkan antara satu halam dengan halaman lainnya,

<HTML>

<HEAD>

<TITLE>

</TITLE>

</HEAD>

<BODY>

</A>

</A>

</A>

</BODY>

</HTML>

Gambar 5. Contoh Penggunaan Link

[ bersambung ke ... bagian tujuh ]

Silahkan mempelajari dan mencoba, kalau masih belum paham atau belum bisa, harap jangan sungkan atau malu untuk bertanya langsung via forum ini. Kita semua senantiasa belajar tanpa mengenal usia, karena teknologi komputer dan internet berkembang terus dari hari ke hari. (TR/nn)

IT'S PRO ™ INFORMATION TECHNOLOGY SOLUTION PROVIDER

KOSTER ™ KOMUNITAS SUZUKI THUNDER

Subyek: Re: IT: HTML Tutorial untuk Pemula 06.03.08 18:31

COMPUTER AND INTERNET - KOSTER ™ IT'S PRO ™

MEMBUAT PAGINA JALA | WEB PAGE DENGAN TATA-LETAK DAN TAUT

MENGGUNAKAN PEMPROGRAMAN HTML,
TEXT EDITOR, WEB PAGE DESIGNER | DEVELOPER | PROCESSOR

BAGIAN TUJUH

LIST

Terkadang dalam website yang kita buat, kita ingin membuat sebuah daftar, misalnya saja kita membuat daftar barang inventaris sbb :

HTML menyediakan tag untuk membuat list seperti diatas. Jenis list dalam HTML dibagi menjadi :

Ordered List
Unordered List
Directory List
Menu List
Definition List

List yang paling sering dipakai adalah Ordered List dan Unordered List, untuk Directory List, Menu List dan Definition List jarang sekali dipakai.

Unordered List
Unordered list biasanya ditandai dengan pemakaian bullet untuk menandai setiap item dalam list. Unordered list diawali dengan tag <UL> [Unordered List], dan tiap item dalam list selalu diawali dengan <LI> [List] yang memiliki beberapa type, yaitu:

TYPE = circle —> tanda lingkaran
TYPE = disk —> tanda cakram
TYPE = square —> tanda kotak

Ordered List
Ordered list adalah daftar yang tiap bagiannya disertai dengan penomoran. Ordered list diawali dengan tag <OL> [Ordered List], dan tiap item dalam list selalu diawali dengan <LI> [List]. List yang memakai tag <UL> ini tidak harus 1, 2, 3, dst tetapi bisa saja A, B, C, dst, I, II, III, dst, tergantung pada atribut TYPE yang dituliskan dalam tag <UL>.
Tipe penomoran yang dimiliki oleh tag <OL> yaitu:

1 —> 1,2,3,…
A —> A,B,C,…
a —> a,b,c,…
I —> I,II,III,…
i —> i,ii,iii,…

<HTML>

<HEAD>

<TITLE>

</TITLE>

<HEAD>

<BODY>

<LI>

</LI>

<LI>

</LI>

<LI>

</LI>

</UL>

<LI>

</LI>

<LI>

</LI>

<LI>

</LI>

</OL>

<LI>

</LI>

<LI>

</LI>

<LI>

</LI>

</OL>

</BODY>

</HTML>

Gambar 6. Contoh Penggunaan List

[ bersambung ke ... bagian delapan ]

Silahkan mempelajari dan mencoba, kalau masih belum paham atau belum bisa, harap jangan sungkan atau malu untuk bertanya langsung via forum ini. Kita semua senantiasa belajar tanpa mengenal usia, karena teknologi komputer dan internet berkembang terus dari hari ke hari. (TR/nn)

IT'S PRO ™ INFORMATION TECHNOLOGY SOLUTION PROVIDER

KOSTER ™ KOMUNITAS SUZUKI THUNDER

Subyek: Re: IT: HTML Tutorial untuk Pemula 06.03.08 21:13

COMPUTER AND INTERNET - KOSTER ™ IT'S PRO ™

MEMBUAT PAGINA JALA | WEB PAGE DENGAN TATA-LETAK DAN TAUT

MENGGUNAKAN PEMPROGRAMAN HTML,
TEXT EDITOR, WEB PAGE DESIGNER | DEVELOPER | PROCESSOR

BAGIAN DELAPAN

MENAMPILKAN GAMBAR

Suatu situs web yang bagus, biasanya menampilkan gambar-gambar untuk menarik pengunjung masuk kedalamnya, bayangkan saja jika situs tersebut hanya menampilkan tulisan saja, tentu amat membosankan. HTML menyediakan fasilitas untuk menampilkan gambar di halaman web kita menggunakan tag <IMG>.

Tag <IMG> memiliki bermacam atribut seperti SRC yang digunakan untuk menentukan lokasi gambar yang akan ditampilkan, ALT sebagai teks pengganti apabila ada browser yang tidak mendukung grafik, BORDER berfungsi untuk memberikan suatu border di sekeliling gambar, Height dan weight berfungsi untuk menentukan tinggi atau lebar suatu gambar dalam halaman web kita (dalam ukuran pixel), HSPACE dan VSPACE berfungsi menentukan jarak spasi dengan objek disekitar gambar secara horiontal maupun vertikal.

</TITLE>
</HEAD>
<BODY>
<A HREF="http://www.suzuki-thunder.com/" target="_blank">
<IMG SRC="koster-banner.gif" BORDER=0 ALIGN=LEFT HSPACE=10 VSPACE=1>
<BR><BR><BR><BR><BR>

</A>

</A>
<BR><BR>
<A HREF="http://groups.yahoo.com/group/koster_bogor/" target="_blank">
<IMG SRC="yahoo-groups.gif" BORDER=0 ALIGN=LEFT HSPACE=10 VSPACE=1>
<BR>

</A>

</A>

</A>
<BR><BR>

</BODY>
</HTML>

IT: HTML Tutorial untuk Pemula Img-latihan-070text

IT: HTML Tutorial untuk Pemula Img-latihan-070html

Gambar 7. Contoh Tampilan dan Taut Gambar

[ bersambung ke ... bagian sembilan ]

Silahkan mempelajari dan mencoba, kalau masih belum paham atau belum bisa, harap jangan sungkan atau malu untuk bertanya langsung via forum ini. Kita semua senantiasa belajar tanpa mengenal usia, karena teknologi komputer dan internet berkembang terus dari hari ke hari. (TR/nn)

IT'S PRO ™ INFORMATION TECHNOLOGY SOLUTION PROVIDER

KOSTER ™ KOMUNITAS SUZUKI THUNDER

Subyek: Re: IT: HTML Tutorial untuk Pemula 06.03.08 21:16

COMPUTER AND INTERNET - KOSTER ™ IT'S PRO ™

MEMBUAT PAGINA JALA | WEB PAGE DENGAN TATA-LETAK DAN TAUT

MENGGUNAKAN PEMPROGRAMAN HTML,
TEXT EDITOR, WEB PAGE DESIGNER | DEVELOPER | PROCESSOR

BAGIAN SEMBILAN

DIVISION

Untuk membuat divisi pada suatu pagina jala (web page) digunakan pasangan tag <DIV></DIV>. Tag ini cukup banyak gunanya dan sangat bervariasi penggunaannya, dimana antara lain dapat digunakan untuk membuat beberapa lapisan (layer) pada satu pagina, sehingga informasi dapat ditumpuk (overlayed). Penggunaannya akan diperlihatkan langsung dalam beberapa contoh latihan.

Satu penggunaan sederhana adalah untuk menata peletakan (alignment) pada suatu tata-letak (layout), misalnya untuk meletakkan kandungan suatu divisi tetap di tengah, di kiri atau di kanan pagina, dlsb.

<HTML>
<HEAD>
<TITLE>CONTOH DIV</TITLE>
</HEAD>
<BODY>
<DIV align=center><CENTER>
<HR>
<H1>

<BR>

IT: HTML Tutorial untuk Pemula Img-latihan-080htm

Gambar 8. Contoh Divisi

[ bersambung ke ... bagian sepuluh ]

Silahkan mempelajari dan mencoba, kalau masih belum paham atau belum bisa, harap jangan sungkan atau malu untuk bertanya langsung via forum ini. Kita semua senantiasa belajar tanpa mengenal usia, karena teknologi komputer dan internet berkembang terus dari hari ke hari. (TR/nn)

IT'S PRO ™ INFORMATION TECHNOLOGY SOLUTION PROVIDER

KOSTER ™ KOMUNITAS SUZUKI THUNDER

Subyek: Re: IT: HTML Tutorial untuk Pemula 06.03.08 21:19

COMPUTER AND INTERNET - KOSTER ™ IT'S PRO ™

MEMBUAT PAGINA JALA | WEB PAGE DENGAN TATA-LETAK DAN TAUT

MENGGUNAKAN PEMPROGRAMAN HTML,
TEXT EDITOR, WEB PAGE DESIGNER | DEVELOPER | PROCESSOR

BAGIAN SEPULUH

TEXT CONTROL TAGS

Didalam pemprograman HTML ada beberapa tag dan character yang berfungsi sebagai pembentuk (formater) dan pengendali (controler) teks.

Tag yang sering digunakan untuk pembentukan teks, antara lain adalah pasangan tag <B></B> [BOLD], <I></I> [ITALIC], dan <U></U> [UNDERLINED], masing-masing untuk huruf tebal, miring, dan bergarisbawah.

Sedangkan tag yang sering digunakan untuk pengendali teks, disamping pasangan tag <P></P> [PARAGRAPH], adalah tag tunggal <BR> [BREAK. LINE FEED], pasangan tag <NOBR></NOBR> [NO BREAK], dan karakter &NBSP; [NO BREAK SPACE].

<BR> adalah tag tunggal tanpa pasangan. Artinya ia tidak digunakan untuk mengapit teks atau citra grafiks diantaranya. Dengan kata lain, ia bisa ditempatkan di awal atau di akhir teks atau citra grafiks. Teks yang diawali oleh <BR> akan mengambil satu garis baru sebelum ditampilkan, sedangkan teks yang diakhiri oleh <BR> akan mengambil garis baru sesudah ditampilkan. Demikian juga untuk citra grafiks.

<BR> dapat dipasang beruntun untuk mengambil beberapa garis baru, misalnya <BR><BR><BR>

Fungsi <BR> setara dengan fungsi karakter LF [LINE FEED] dan CR [CARRIAGE RETURN] dalam ASCII (American Standard Code for Information Interchange).

Teks yang diletakkan diantara tag <NOBR> dan </NOBR> tak akan dipatahkan (breaked) atau dibuntalkan (wraped) pada suatu baris pagina, melainkan akan direntangkan, sehingga pagina mengikuti panjang teks.

Fungsi karakter &NBSP; setara dengan fungsi karakter SPC [SPACE], yakni untuk membuat spasi . Karakter sedemikian dalam HTML harus selalu diawali dengan karakter & dan diakhiri oleh karakter ;, seperti juga misalnya fungsi karakter < [LESS THAN] dan > [GREATER THAN], digunakan untuk membuat tanda < dan >.

Lebih jauh tentang penggunaan tag dan karakter kontrol ini akan disertakan dalam berbagai contoh

Pada bagian selanjutnya akan dibahas cara membuat tabel.

[ bersambung ke ... bagian sebelas ]

Silahkan mempelajari dan mencoba, kalau masih belum paham atau belum bisa, harap jangan sungkan atau malu untuk bertanya langsung via forum ini. Kita semua senantiasa belajar tanpa mengenal usia, karena teknologi komputer dan internet berkembang terus dari hari ke hari. (TR/nn)

IT'S PRO ™ INFORMATION TECHNOLOGY SOLUTION PROVIDER

KOSTER ™ KOMUNITAS SUZUKI THUNDER

___________________________________

(C) 1998-2008 - THUNDER RIDER | EE ONE S

HAKI (Hak Atas Kepemilikan Intelektual) karya tulis intelektual ini dilindungi oleh Undang-Undang Negara Republik Indonesia, dan juga oleh konvensi dan provisi internasional atas karya intelektual di tiap negara di seluruh dunia.

Tak sebagian pun dari tulisan, dokumen atau pagina jala ini boleh disalin, digandakan dan atau diperbanyak: diduplikasi, direplika, direproduksi, ditransmisi, ditranskripsi, ditranslasi kedalam bentuk bahasa apapun atau disimpan dalam satu sistem retrieval apapun; dalam bentuk apapun atau dalam cara apapun, mencakup tapi tak terbatas pada cara optik, elektromagnetik, elektronik, elektromekanik, atau lainnya; untuk maksud dan tujuan komersial; tanpa pemberitahuan dan perkenanan tertulis terlebih dulu dari pemilik hak atas karya intelektual ini.

Untuk non-komersial, duplikasi dan distribusi secara keseluruhan atau sebagian, mohon cantumkan sumber tulisan sebagai acuan.

Subyek: Re: IT: HTML Tutorial untuk Pemula 10.04.08 6:50

COMPUTER AND INTERNET - KOSTER ™ IT'S PRO ™

MEMBUAT PAGINA JALA | WEB PAGE DENGAN TATA-LETAK DAN TAUT

MENGGUNAKAN PEMPROGRAMAN HTML,
TEXT EDITOR, WEB PAGE DESIGNER | DEVELOPER | PROCESSOR

BAGIAN SEBELAS

TABEL

Berbagai pagina web dan pesan e-mail dibuat menggunakan tabel. Termnasuk pagina forum ini dirancang menggunakan tabel-tabel dalam specific template, tapi hanya saja tabel-tabel tersebut tak tampak pada permukaan alias tersembunyi (hidden) di balik pagina. Tabel-tabel tersebut digunakan untuk menahan teks dan citra grafik (graphic images) agar tersusun dan tertata rapi dan beraturan dan tak bercampur satu terhadap lainnya, dan bisa-melar dan kenyal (flexible and elastic) mengikuti ukuran pagina.

Untuk membuat tampilan pagina jala (web page) yang baik dan menarik, kebanyakan para perancang jala (web designer) menggunakan tabel untuk mempermudah pengerjaan mereka, coba saja lihat situs baru KOSTER di web,suzuki-thunder.com. Dan masih banyak lagi situs yang menggunakan tabel untuk mempercantik tampilan pagina situs jala (web site) mereka.

Untuk membuat tabel, HTML menyediakan pasangan tag <TABLE></TABLE>, dimana dalam pasangan tag ini terdapat banyak atribut, antara lain: [tabel dibawah ini sendiri juga sebagai satu contoh pemakaian tag dan berbagai atribut tabel]

ATRIBUT	FUNGSI
WIDTH	lebar tabel dalam satuan pixel, point, atau percent
HEIGHT	tinggi tabel dalam satuan pixel, point, atau percent
BORDER	ukuran border \| bordir \| garis-batas tabel
BORDERCOLOR	warna border \| bordir \| garis-batas tabel
BGCOLOR	warna latarbelakang tabel
BACKGROUND	gambar untuk latarbelakang tabel
CELLPADDING	spasi antara text dan border
CELLSPACING	spasi antara baris dan kolom
STYLE	untuk berbagai style \| gaya tabel
CLASS	untuk berbagai style \| gaya dalam stylesheet
ALIGN	untuk alignment horizontal \| peletakan membujur
VALIGN	untuk alignment vertikal \| peletakan melintang
dan lain-lain	atribut tambahan

Suatu tabel terdiri dari lajur dan kolom, dimana untuk lajur digunakan pasangan tag <TR></TR> [Table Row], sedangkan untuk kolom digunakan pasangan tag <TD></TD> [Table Division], sehingga suatu tabel memiliki struktur tag dengan rumus umum sbb:

<TABLE><tr><td></td></tr></TABLE>

Sebagian besar atribut dalam tag <TABLE> juga dapat digunakan dalam tag <TR> dan dalam tag <TD>, dengan tambahan atribut khusus sbb:

ATRIBUT	FUNGSI MERGE
ROWSPAN	rentang lajur gabungan dua atau lebih lajur jadi satu
COLSPAN	rentang kolom gabungan dua atau lebih kolom jadi satu

Jika lebar dan tinggi tabel tak dinyatakan secara tersurat | eksplisit, maka lebar dan tinggi tabel akan dinyatakan secara tersirat | implisit, samadengan lebar dan tinggi teks dan atau grafiks terkandung didalamnya.

Jika lebar dan tinggi tabel tak dinyatakan dalam %, maka lebar dan tinggi tabel tsb merupakan persentasi lebar dan tinggi pagina, dan ukurannya bisa-melar dan kenyal (flexible and elastic) berubah sesuai dengan perubahan ukuran pagina, dimana nilai default (lalai) samadengan 100%.

Jika spasi sel tak dinyatakan secara tersurat | eksplisit, maka spasi sel berarti dinyatakan secara tersirat | implisit, samadengan nol.

<TABLE BORDER=1 CELLPADDING=0 CELLSPACING=0 WIDTH=100%></TABLE>

Jika rentang lajur atau kolom tak dinyatakan secara tersurat | eksplisit, maka rentang berarti dinyatakan secara tersirat | implisit, samadengan satu.

<TR ROWSPAN=1><TD COLSPAN=1></TD></TR>

Jika warna border, foreground (latardepan) untuk teks, dan background (latarbelakang) tak dinyatakan, maka tabel akan menggunakan warna default atau sesuai dengan warna diset untuk keseluruhan pagina [lihat pelajaran sebelumnya tentang warna dan font>.

Untuk membuat kop (caption) suatu tabel, misalnya untuk judul diatas tabel atau catatan dibawah tabel, dapat digunakan pasangan tag <CAPTION></CAPTION>.

Untuk lebih jelas, silahkan coba contoh tabel berikut.

IT: HTML Tutorial untuk Pemula Img-latihan-090htm

Gambar 9. Contoh Tabel

[ bersambung ke ... bagian duabelas ]

Silahkan mempelajari dan mencoba, kalau masih belum paham atau belum bisa, harap jangan sungkan atau malu untuk bertanya langsung via forum ini. Kita semua senantiasa belajar tanpa mengenal usia, karena teknologi komputer dan internet berkembang terus dari hari ke hari. (TR/nn)

IT'S PRO ™ INFORMATION TECHNOLOGY SOLUTION PROVIDER

KOSTER ™ KOMUNITAS SUZUKI THUNDER

Subyek: Re: IT: HTML Tutorial untuk Pemula 10.04.08 8:08

:sallute:

Subyek: Re: IT: HTML Tutorial untuk Pemula 10.04.08 13:27

mantapppp.... thanks ilmunya kang iwan...

Subyek: Re: IT: HTML Tutorial untuk Pemula 10.04.08 15:36

:koster inside: Awas ketagihan!

Subyek: Re: IT: HTML Tutorial untuk Pemula 11.04.08 8:07

COMPUTER AND INTERNET - KOSTER ™ IT'S PRO ™

MEMBUAT PAGINA JALA | WEB PAGE DENGAN TATA-LETAK DAN TAUT

MENGGUNAKAN PEMPROGRAMAN HTML,
TEXT EDITOR, WEB PAGE DESIGNER | DEVELOPER | PROCESSOR

BAGIAN DUABELAS

NESTED TABLE | TABLE BERTINGKAP

Table bisa dibuat bertingkap, bertingkat, atau berlapis-lapis, alias table rangkap (multiple table) dimana dalam satu table ada satu atau lebih tabel lain, dengan rumus umum, sbb.

<TABLE><TR><TD><TABLE><TR><TD></TD></TR></TABLE> </TD></TR></TABLE>

Untuk lebih jelas, silahkan coba contoh tabel rangkap berikut.

IT: HTML Tutorial untuk Pemula Img-latihan-100htm

Gambar 10. Contoh Table Rangkap Sepusat

[ bersambung ke ... bagian tigabelas ]

Silahkan mempelajari dan mencoba, kalau masih belum paham atau belum bisa, harap jangan sungkan atau malu untuk bertanya langsung via forum ini. Kita semua senantiasa belajar tanpa mengenal usia, karena teknologi komputer dan internet berkembang terus dari hari ke hari. (TR/nn)

IT'S PRO ™ INFORMATION TECHNOLOGY SOLUTION PROVIDER

KOSTER ™ KOMUNITAS SUZUKI THUNDER

Subyek: Re: IT: HTML Tutorial untuk Pemula 14.04.08 4:16

COMPUTER AND INTERNET - KOSTER ™ IT'S PRO ™

MEMBUAT PAGINA JALA | WEB PAGE DENGAN TATA-LETAK DAN TAUT

MENGGUNAKAN PEMPROGRAMAN HTML,
TEXT EDITOR, WEB PAGE DESIGNER | DEVELOPER | PROCESSOR

BAGIAN TIGABELAS

NESTED TABLE | TABLE BERTINGKAP

Berikut adalah contoh pembutan tabel lanjutan, yakni tabel rangkap jajar.

Untuk lebih jelas, silahkan coba contoh tabel rangkap jajar berikut.

IT: HTML Tutorial untuk Pemula Img-latihan-110htm

Gambar 11. Contoh Tabel Rangkap Jajar

[ bersambung ke ... bagian empatbelas ]

Silahkan mempelajari dan mencoba, kalau masih belum paham atau belum bisa, harap jangan sungkan atau malu untuk bertanya langsung via forum ini. Kita semua senantiasa belajar tanpa mengenal usia, karena teknologi komputer dan internet berkembang terus dari hari ke hari. (TR/nn)

IT'S PRO ™ INFORMATION TECHNOLOGY SOLUTION PROVIDER

KOSTER ™ KOMUNITAS SUZUKI THUNDER

Subyek: Re: IT: HTML Tutorial untuk Pemula 14.04.08 12:03

dicoba ... dicoba ... dicoba ...

... biar bisa bikin begini nih ...

hayo ...

Subyek: Re: IT: HTML Tutorial untuk Pemula 14.04.08 14:28

Thunder Rider wrote:: COMPUTER AND INTERNET - KOSTER ™ IT'S PRO ™

MEMBUAT PAGINA JALA | WEB PAGE DENGAN TATA-LETAK DAN TAUT

MENGGUNAKAN PEMPROGRAMAN HTML,
TEXT EDITOR, WEB PAGE DESIGNER | DEVELOPER | PROCESSOR

[ bersambung ke ... bagian empatbelas ]
Silahkan mempelajari dan mencoba, kalau masih belum paham atau belum bisa, harap jangan sungkan atau malu untuk bertanya langsung via forum ini. Kita semua senantiasa belajar tanpa mengenal usia, karena teknologi komputer dan internet berkembang terus dari hari ke hari. (TR/nn)

IT'S PRO ™ INFORMATION TECHNOLOGY SOLUTION PROVIDER

KOSTER ™ KOMUNITAS SUZUKI THUNDER

baik suhu.... Salut..Gue nyembah e

Subyek: Re: IT: HTML Tutorial untuk Pemula 14.04.08 15:20

:sallute:

Subyek: Re: IT: HTML Tutorial untuk Pemula 16.04.08 7:57

COMPUTER AND INTERNET - KOSTER ™ IT'S PRO ™

MEMBUAT PAGINA JALA | WEB PAGE DENGAN TATA-LETAK DAN TAUT

MENGGUNAKAN PEMPROGRAMAN HTML,
TEXT EDITOR, WEB PAGE DESIGNER | DEVELOPER | PROCESSOR

BAGIAN EMPATBELAS

CONTOH PENERAPAN TABEL

Untuk lebih jelas, silahkan coba contoh tabel rangkap berikut.

IT: HTML Tutorial untuk Pemula Img-latihan-120html

Gambar 12. Contoh

Silahkan mempelajari dan mencoba, kalau masih belum paham atau belum bisa, harap jangan sungkan atau malu untuk bertanya langsung via forum ini. Kita semua senantiasa belajar tanpa mengenal usia, karena teknologi komputer dan internet berkembang terus dari hari ke hari. (TR/nn)

IT'S PRO ™ INFORMATION TECHNOLOGY SOLUTION PROVIDER

KOSTER ™ KOMUNITAS SUZUKI THUNDER

___________________________________

(C) 1998-2008 - THUNDER RIDER | EE ONE S

HAKI (Hak Atas Kepemilikan Intelektual) karya tulis intelektual ini dilindungi oleh Undang-Undang Negara Republik Indonesia, dan juga oleh konvensi dan provisi internasional atas karya intelektual di tiap negara di seluruh dunia.

Tak sebagian pun dari tulisan, dokumen atau pagina jala ini boleh disalin, digandakan dan atau diperbanyak: diduplikasi, direplika, direproduksi, ditransmisi, ditranskripsi, ditranslasi kedalam bentuk bahasa apapun atau disimpan dalam satu sistem retrieval apapun; dalam bentuk apapun atau dalam cara apapun, mencakup tapi tak terbatas pada cara optik, elektromagnetik, elektronik, elektromekanik, atau lainnya; untuk maksud dan tujuan komersial; tanpa pemberitahuan dan perkenanan tertulis terlebih dulu dari pemilik hak atas karya intelektual ini.

Untuk non-komersial, duplikasi dan distribusi secara keseluruhan atau sebagian, mohon cantumkan sumber tulisan sebagai acuan.

Subyek: Re: IT: HTML Tutorial untuk Pemula 20.04.08 16:35

» Sarasehan ke-IV HTML: Saatnya HTML Tinggal Landas
» IT: Computer Hacking Tutorial
» FORUM: Tutorial Upload Image di ServImg