Posts Tagged ‘pengetahuan’
Story of The April’s fool day
Apaan sih April Mop? Biasanya orang akan menjawab bahwa April Mop, yang hanya berlaku pada tanggal 1 April, adalah hari di mana kita boleh dan sah-sah saja menipu teman, orang tua, saudara, atau sejenisnya, dan sang target tidak boleh marah atau emosi ketika sadar bahwa dirinya telah menjadi sasaran April Mop. Biasanya sang target, jika sudah sadar kena April Mop, maka dirinya juga akan tertawa atau minimal mengumpat sebal, tentu saja bukan marah sungguhan. Read the rest of this entry »
Kode etik yang keren !!
Media-media internasional seperti televisi CNN, radio BBC, dll mewartakan Nopember 2007 bahwa polisi Italia telah menemukan sebuah catatan berisi peraturan internal anggota mafia Italia menyusul ditangkapnya Salvatore Lo Piccolo, 65 tahun [lihat gambar]. Piccolo, godfather mafioso yang oleh aparat Italia dijuluki sebagai “bos dari segala bos”, telah diburu polisi sejak 1993.Dalam penangkapannya ditemukan catatan kode etik mafia yang berisi hak dan kewajiban setiap anggota Piccolo. Suratkabar Italia, La Repubblica, menyebut kode etik itu sebagai The Godfather’s Ten Commandments atau — menurut terjemahan bebas Blog Berita — Sepuluh Titah Sang Mafia.
Polisi Italia mengatakan, berkas tersebut dibuka dengan kalimat, “Aku bersumpah untuk percaya pada Cosa Nostra. Kalau aku berkhianat, maka biarlah tubuhku terbakar.” Cosa Nostra adalah istilah yang sering dipakai aparat Amerika Serikat untuk menyebut mafia Italia.
Kode etik mafia Italia ini ditulis dengan huruf kapital. Isinya antara lain memerintahkan setiap anggota mafia untuk bersikap baik dan hormat pada isteri masing-masing, dan melarang berselingkuh atau mendekati isteri sesama mafia.
Inilah kesepuluh kode etik ala mafia Italia yang diterjemahkan secara “suka-sukaku” oleh Blog Berita:
- Dilarang memperkenalkan diri secara langsung kepada pihak kedua; harus pihak ketiga yang melakukannya.
- Dilarang “main mata” dengan isteri sesama anggota.
- Jangan sampai terlihat oleh polisi.
- Dilarang dugem di tempat hiburan malam seperti pub dan klub.
- Harus selalu siaga demi panggilan tugas mafia, bahkan ketika isterimu melahirkan.
- Janji untuk bertemu harus dipatuhi.
- Isteri harus diperlakukan dengan hormat.
- Bila ditanya soal informasi apapun, maka jawabannya haruslah benar.
- Dilarang menerima uang yang menjadi hak rekan lain atau keluarganya.
- Orang-orang yang tidak bisa bergabung dengan mafia: Orang yang dekat dengan polisi, yang waktunya bagi keluarga relatif terbagi, yang perangainya buruk dan tidak bermoral.
Tak kusangka mafia punya aturan sebagus itu. Bandingkan dengan pegawai di republik: Ada yang berselingkuh dengan isteri sesama pegawai, mengambil uang jatah rakyat, membolos dalam rapat-rapat bila diundang legislatif atau pura-pura sakit bila dipanggil jaksa, de-el-el.
Sekarang, coba simak 10 kode etik koboi yang kukutip dari Wikipedia ini. Namanya: Gene Autry’s Cowboy Code.
- Dilarang duluan menembakkan senjata; tidak boleh memukul orang yang lebih kecil atau duel secara tidak adil.
- Tidak boleh menjilat kata-kata yang telah terucap; tidak boleh membocorkan rahasia.
- Harus selalu mengatakan kebenaran.
- Harus bersikap baik pada anak-anak, orang yang lebih tua, dan binatang kecil.
- Dilarang bersikap rasial dan anti-toleransi.
- Diwajibkan menolong orang yang kesusahan.
- Koboi haruslah pekerja keras.
- Harus bersikap, berpikir, dan berbicara dengan jelas dan tegas.
- Wajib menghormati perempuan, orangtua, dan kebijakan negara.
- Seorang koboi adalah pencinta tanah airnya.
Begitulah. Adakah yang tertarik bikin 10 kode etik bloger Indonesia? Penjahat saja, mafia dan koboi, punya kode etik, masak kita kalah. [www.blogberita.com]
HTML
HTML —–> ( Hyper Text Markup Language) adalah format standar dokumen pada halaman Situs Web. HTML adalah bahasa interpreter, bukan bahasa pemrograman yg sebenarnya seperti Delphi, JAVA, dan Visual Basic.
Link atau Hyperlink —-> kekuatan atau kelebihan File HTML di bandingkan file yg lain adalah kemampuannya dalam melalukan link Hyperlink. Yaitu sebuah teks yg di beri tag khusus sehingga memiliki kemanpuan untuk membuat browser melompat kehalaman lain yg merupakan halaman tujuan yg terdapat pada link atau hyperlink tersebut. Link atau Hyperlink biasanya berupa sebuah teks yg diberi garis bawah berwarna biru yg jika di klik oleh mouse akan melompat ke halaman tujuannya. Hyperlink juga bisa di lakukan pada gambar dan bukan pada teks saja.
Browser —–> merupakan program yg dipergunakan untuk menampilkan isi dari dokumen HTML dan format-format lain di world wide web, Tiga browser yg ternama yaitu Internet Explorer,Opera dan Netscape Navigator.
HTML Standard: Web Browser yg berada di pasaran seperti Internet Explorer dan Netscape Navigator, diproduksi oleh perusahaan yg berbeda-beda, sehingga tampilan dari sebuah dokumen yg sama (termasuk dokumen HTML) dapat terlihat berbeda.
Sebuah website yg kelihatan bagus dan rapi pada Internet Explorer dapat terlihat berantakan pada Netscape. Sebagai tambahan pengunjung yg berbeda dapat menghasilkan tampilan sebuah halaman tertentu yg berbeda-beda pula, hal ini dikarenakan oleh berbagai faktor seperti resolusi monitor yg dipergunakan dan setting browser yg berbeda.
Oleh karena itu hindari merancang sebuah halaman web dengan aturan yg baku pemilihan font dan ukuran lay out. Terkadang image tertentu akan kelihatan lebih besar dalam monitor lain.
HTML Tags : HTML merupakan komposisi dari tag-tag. Tag merupakan perintah yg dituliskan dengan menggunakan tanda < dan >. Sehingga semua string yg berada di antara kedua tanda tersebut, disebut tag.
HTML merupakan komposisi dari tag-tag. Tag merupakan perintah yg dituliskan dengan menggunakan tanda < dan >. Sehingga semua string yg berada di antara kedua tanda tersebut, disebut tag.
<TAG> _____________ </TAG>
<TAG> menunjukkan indikasi dari awal format, dan </TAG> akhir/penutup. Apapun yg berada diantara kedua tag tersebut akan memiliki perilaku yg dipengaruhi oleh atribut tag yg anda pasang mengurungnya.
Frame : Adalah sebuah halaman situs Web yg menampilkan dua atau lebih halaman web lainnya yg bisanya berfungsi untuk mempermudah navigasi atau penelusuran halaman demi halaman situs web tersebut.
Table : adalah sebuah penataan halaman Web menggunakan baris dan kolom untuk mengatur layout atau tata ruang halamam Web agar lebih rapi, menarik danlebih memudahkan dalam pengaturan letak teks dan gambar yg ditampilkannya.
Spacing : Spasi dan atau ruang kosong tidak mempengaruhi tampilan dari sebuah halamn web ; Sebanyak apapun spasi akan tetap dihitung sebagai satu spasi. Untuk menampilkan spaci sebagai spasi maka di pergunakan kode ini ” “
Meta Tag ~ HTML tags dimana search engine akan melakukan spiders and crawlers untuk melihat ketika mengindek sebuah situs.
Tag dasar HTML
Ada beberapa tag yg harus dimiliki sebuah dokumen HTML . Apabila tag-tag ini tidak dicantumkan, tampilan dari dokumen tersebut akan terganggu struktur dan lay out-nya akan menjadi tidak karuan.
<HTML>
Ini merupakan Tag Utama yg setiap halaman Web harus mempunyai.
<HTML> tag.
<HTML> harus muncul atau ditempaytkan pada bagian paling awal dari kode halaman anda,
dan </HTML> sebagai yg paling akhir.
________________________________________
<HEAD>
Tepat di bawah tag HTML adalah tag <HEAD>. Tag HEAD ini mengandung obyek yg akan di load lebih dahulu oleh browser pengunjung halaman anda sebelum menampilkan bagian lain dalam halaman yg sama.
________________________________________
<TITLE>
Tag Title ini diletakkan di antara tag HEAD. Ini merupakan Tag yg sangat penting karena merupakan tag yg paling menentukan sebuah situs web saat di index oleh search engine. Usahakan untuk mengisi tag TITLE ini dengan satu atau lebih kata yg merupakan keyword utama dari situs anda.
<TITLE>Selamat Datang di Iklan Bonanza</TITLE>
String yg berada di antara tag TITLE akan ditampilkan sebagai judul yg bisa dilihat pada bagian kiri atas window browser.
________________________________________
<BODY>
Di bawah tag HEAD, namun masih di dalam (di antara) tag HTML.
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
Tag BODY ini berisi informasi yg berhubungan dengan property dasar pada keseluruhan isi dokumen HTML. Text, Link, Link yg telah dikunjungi, Link yg aktif dan warna latar belakang (background) dokumen serta image yg akan menjadi background didefinisikan pada bagian ini.
<BODY TEXT=”white” LINK=”gray” VLINK=”orange” ALINK=”gray” BGCOLOR=”black” BACKGROUND=”white-tile.gif”></BODY>
Tag BODY ini mengandung informasi yg berhubungan dengan property dasar pada keseluruhan isi dokumen HTML. Text, Link, Link yg telah dikunjungi, Link yg aktif dan warna latar belakang (background) dokumen serta image yg akan menjadi background didefinisikan pada bagian ini.
<BODY TEXT=”white” LINK=”gray” VLINK=”orange” ALINK=”gray” BGCOLOR=”black” BACKGROUND=”white-tile.gif”></BODY>
TEXT= Warna dari keseluruhan teks pada dokumen
LINK= Warna teks yg berupa Link
ALINK= Warna teks yg sedang di klik oleh user
VLINK= Warna teks link yg pernah dikunjungi oleh user
BGCOLOR= Warna latar belakang dokumen
BACKGROUND= Path (jalur relatifatau absolut) menuju ke image yg akan menjadi latar belakang dari dokumen anda yg akan muncul lebih dahulu dari bgcolor.
________________________________________
Comment Tag
Tag “comment” adalah sebagai berikut:
<!– Halaman situs ini di buat oleh real_low –>
Browser akan mengabaikan atau tidak menampilkan isi apapun yg berada dalam area comment tag ini. Tag ini berguna untuk memberi kemudahan pada saat anda melakukan perubahan struktur halaman anda dan komentar apa saja yg ingin anda tampilkan.
________________________________________
Kode yg telah anda kuasai sejauh ini adalah:
<HTML>
<HEAD>
<TITLE>My Homepage</TITLE>
</HEAD>
<BODY TEXT=”Black” LINK=”Blue” VLINK=”Orange” ALINK=”Gray” BGCOLOR=”White” >
</BODY>
</HTML>
Jika halaman di atas kita buka pada browser maka yg akan kita saksikan adalah : sebuah halaman kosong berwarna putih, dengan judul di bagian kiri atas browser My Homepage
________________________________________
META TAG —–> Merupakan salah satu TAG penting yg diperlukan untuk informasi bagi Search Engine yg akan mengindex situs yg bersangkutan. Seberapa jelas dan lengkap informasi yg di dapat oleh Search Engine bergantung dari META TAG ini. META TAG Letaknya harus diantara TAG <HEAD></HEAD>.
Contoh penggunaannya :
<HTML>
<HEAD>
<TITLE>Belajar tag HTML</TITLE>
<META NAME=”Autor” CONTENT=”real_low”>
<META NAME=”Generator” CONTENT=”Notepad”>
<META NAME=”Description” CONTENT=”Situs Ini Berisi Tutorial Untuk Belajar Hacking”>
<META NAME=”KeyWords” CONTENT=”HTML tutotial,free email,free web space,free counter,free web hosting,free e-books,free guestbook,webmaster resource,’”>
</HEAD>
<BODY>
…….. isi web ……..
</BODY>
</HTML>
META NAME “Autor” = untuk menunjukkan siapa yg membuat halaman situs tersebut.
META NAME “generator” = untuk menunjukkan dengan sofware HTML editor apa halaman halaman situs web tersebut dibuat.
META NAME “Description” = Berguna bagi Search Engine untuk mengetahui keterangan singkat mengenai situs tersebut.
META NAME “keywords” = untuk mencantumkan kata kunci atau keywords yg berhubungan dengan situs tersebut.
________________________________________
Penggunaan Link atau Hyperlink
Hyperlink adalah teks atau gambar web yg jika di klik akan membuat browser melompat ke halaman lain yg menjadi tujuan dari Hyperlink tersebut. Selain itu ia juga akan membuka e-mail client anda untuk mengirim e-mail jika link tujuannya berupa alamat e-mail yg anda klik.
Anda bisa memakai hyperlinks dalam bentuk teks atau gambar termasuk banner. Ketika anda mengeklik sebuah banner maka browser anda akan melompat ke halaman situs lain yg di iklankan atau di tuju oleh banner tersebut.
Tag Hyperlink adalah :<a> sebagai tag pembuka dan wajib ditutup dengan tag penutup </a>. ( huruf besar atau kecil sama saja)
Format Pengunaannya adalah sebagai berikut :
<A href=”halaman_web_yg_di_tuju”> Nama Link </a>
Contoh :
<A href=”http://wordpress.com” TARGET=”tujuan target”>WordPress</a>
akan di tampilkan sebagai berikut
wordpress
Jika anda mengklik teks wordpress di atas maka browser akan melompat dan membuka file halaman web yg beralamatkan di http://wordpress.com
di dalam tag <a> ada atribut TARGET yg boleh tidak di gunakan kecuali anda ingin agar link tujuannya tidak di tampilkan pada halaman yg sama dengan lokasi halaman di mana link tersebut berada.
Jika anda ingin menampilkan hasil Link atau tujuan link dalam halaman browser baru, Anda dapat menigisi nama tujuan targetnya dengan nama target=”_blank” misalkan (TARGET=”_blank”).
Sekarang, kegunaan yg lain dari Hyperlinks yaitu membuat pengunjung situs akan membuka e-mail client nya dengan alamat email anda, dan biasanya ada predefined subject yg sudah di tempatkan di sana. Pengunaannya juga memakai href di tambah mailto: di depan account e-mail.
Contoh:
<a href=”mailto:mail@mail.com”>Send E-Mail</a>
hasilnya yg anda lihat di browser: cobalah mengekliknya
Send E-Mail
Anda juga bisa menambahkannya dengan predefined subject:
<a href=”mailto:mail@mail.com?subject=testing”>Send E-Mail</a>
Sekarang cobalah…just click this link:
Send E-Mail
Bagaimana?
And that’s all there is to know about hyperlinks!
________________________________________
HTML Index Of Elements (Element-element TAG HTML)
-A-
<!– –> Comments — untuk menampilkan komentar —
<!DOCTYPE> HTML version
<A> Hyperlink — untuk membuat link atau hyperlink —
<ABBR> Abbreviation
<ACRONYM> Acronym
<ADDRESS> Author’s name and address — menampilkan pencipta dan alamatnya–
<APPLET> JAVA Applet — untuk menampilkan file JAVA Applet —
<AREA> Hotspots (image map)
-B-
<B> Bold untuk — membuat huruf tebal —
<BASE> Base URL and default destination frame
<BASEFONT> Default font (document) — mengatur font default —
<BDO> Bidirectional off (display characters in opposite direction)
<BGSOUND> Background sound — menampilkan latar belakang suara —
<BIG> Extra bold — membuat huruf extra tebal —
<BLINK> Blinking Text — membuat teks yg berkedip kedip —
<BLOCKQUOTE> Block Quote — membuat paragraf lebih menjorok ke dalam —
<BODY> Document body — tag body dokumen —
<BR> Line return — untuk membuat baris baru —
<BUTTON> Button — untuk menampilkan tombol —
-C-
<CAPTION> Table title
<CENTER> Centegray — untuk membuat rata tengah —
<CITE> Quotation
<CODE> Programming Code
<COL> Columns
<COLGROUP> Column Group
<COMMENT> Comments
-D-
<DD> Term definition
<DEL> Indication of deleted text
<DFN> Indication of a definition
<DIR> “Directory” type list
<DIV> Document division
<DL> Definitions — untuk membuat daftar definisi —
<DT> Defined term (Definition list)
-E-
<EM> Emphasized text
<EMBED> Embedded object
-F-
<FIELDSET> Regrouping of controls in a form
<FONT> Fonts — mengatur penggunaan font —
<FORM> Forms — untuk membentuk form —
<FRAME> Frames — untuk membentuk frame —
<FRAMESET> Frame setting — untuk mengatur setting frame —
-H-
<H1 . . . H6> Headings — membuat teks judul atau sub judul—
<HEAD> Header
<HR> Horizontal line — untuk membuat garis horisontal —
<HTML> HTML document indication — menunjukan dokumen tersebut HTML —
<HTMLAREA> HTML text area (form)
-I-
<I> Italics — membuat huruf atau teks menjadi miring —
<IFRAME> Floating frame
<ILAYER> Layer with independent content
<IMG> Image — untuk menampilkan gambar —
<INPUT> Form controls — untuk mengontrol form —
<INS> Indication of inserted text
<ISINDEX> Text input field (search engines)
-K-
<KBD> Indication of procedure
<KEYGEN> Creation of keys (secure sites)
-L-
<LABEL> Label
<LAYER> Layers
<LEGEND> Legend — menampilkan legenda , seperti pada peta –
<LI> List item — untuk menampilkan daftar item —
<LINK> Link
<LISTING> Listing
-M-
<MAP> Image map — menampilkan gambar yg bisa di beri beberapa link —
<MARQUEE> Scrolling text (banner) — menampikan teks berjalan —
<MENU> Menu type list
<META> Meta-information — menampilkan meta informasi situs —
<MULTICOL> Multiple columns — menampilkan multiple kolom –
-N-
<NOBR> No line break — agar browser tidak membuat baris baru –
<NOEMBED> Alternative (embedded object)
<NOFRAMES> Alternative (frames) — berguna untuk browser lama yg tidak bisa menampilkan frame —
<NOLAYER> Alternative (layers)
<NOSCRIPT> Alternative (script) — berguna untuk browser yg tidak bisa menampilkan javascripts —
-O-
<OBJECT> Insertion of object
<OL> Ordegray list — membuat daftar item dengan nomor urut —
<OPTGROUP> Logical regrouping (form)
<OPTION> Description of menu choices (form)
-P-
<P> Paragraph — untuk mengatur paragraf —
<PARAM> Applet or object parameters
<PLAINTEXT> Plain text
<PRE> Pre-formatted text — menampilkan teks apa adanya —
-Q-
<Q> Inline quotation
-R-
<RT> Specification of annotation text <RUBY>
<RUBY> Annotations
-S-
<S> Strikethrough text — untuk mencoret teks —
<SAMP> Example indication
<SCRIPT> Script insertion in a document
<SELECT> Selection of options list
<SERVER> Script (server-side)
<SMALL> Smaller fonts — membuat huruf lebih kecil —
<SPACER> Space insertion
<SPAN> Parameters of a delimited one
<STRIKE> Strikethrough text — untuk mencoret teks –
<STRONG> Thick text — untuk menampilkan teks lebih tebal —
<STYLE> Inline style
<SUB> Index
<SUP> Superscript — untuk menaikkan posisi karakter atau teks lebih tinggi dari posisi normal, misalnya pada penulisan derajat dan jam –
-T-
<TABLE> Table — untuk membuat table –
<TBODY> Table body
<TD> Cell data — menampilkan kolom dalam tabel —
<TEXTAREA> Text area (form)
<TFOOT> Table foot
<TH> Table header cell
<THEAD> Table header
<TITLE> Document title
<TR> Table row — menampilkan baris kolom tabel —
<TT> “Teletype” (typewriter) text
-U-
<U> Underlined text — membuat garis bawah —
<UL> Unordegray (Bulleted) list — membuat daftar tak berurutan —
-V-
<VAR> Program Variable
_-W-
<WBR> Pre-authorized line break
-X-
<XMP> Example text
<XML> IXML island code
HTML Index Elements di atas berisi Tag dan keterangan kegunaannya
Mengatur penataan teks
Selanjutnya setelah kita mampu menciptakan sebuah halaman html kosong dengan kode-kode dasar HTML. Waktunya untuk melangkah ke tahap selanjutnya yakni mengolah kata dalam HTML. Yaitu mengisi diantara tag <BODY> yg nantinya akan ditampilkan oleh browser sebagai sebuah isi dari halam situs web.
Hal yg paling mendasar dalam melakukan format teks adalah tag Heading (jangan tertukar dengan Tag HEAD – tidak ada kesamaan mendasar di antara keduanya).
Ada enam level untuk heading dengan satu sebagai heading yg terbesar dan 6 adalah heading terkecil. Dengan kode heading teks akan berbentuk sebagai berikut :
<H1>Heading 1</H1>
<H2>Heading 2</H2>
<H3>Heading 3</H3>
<H4>Heading 4</H4>
<H5>Heading 5</H5>
<H6>Heading 6</H6>
akan di tampilkan browser sebagai berikut :
Heading 1 (merupakan Heading paling besar)
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6 (merupakan Heading paling kecil)
________________________________________
Paragraph
Paragraf cukup umum digunakan dalam HTML ; menandakan struktur dari mem-format teks. Dengan tag paragraph anda dapat mengatur pembagian alinea dalam dokumen anda.
<P ALIGN=”CENTER”>
</P>
atribut CENTER juga dapat digantikan dengan berbagai penataan alinea seperti RIGHT,LEFT atau JUSTIFY.
________________________________________
Mengakhiri Sebuah baris
Untuk mengakhiri sebuah baris dari isi dokumen tanpa memulai sebuah paragraph baru, gunakan tag <BR> <br>. Tag ini akan memposisikan baris teks berikut tepat di bawah baris sebelumnya, tanpa jeda baris seperti tag <p> paragraph.
________________________________________
Blockquote
Tag blockquote umum-nya untuk teks dalam baris panjang berupa material yg dikutip dan ditujukan untuk memperjelas serta memberi penekanan pada sesuatu point.Bisa juga untuk membuat sebuah paragraf atau apa saja lebih menjorok ke dalam.
Tag blockquote terlihat sebagai berikut :
<BLOCKQUOTE></BLOCKQUOTE>
Paragraf cukup umum digunakan dalam HTML ; menandakan struktur dari mem-format teks. Dengan tag paragraph anda dapat mengatur pembagian alinea dalam dokumen anda.
CONTOH :
<BODY>
<font color=”red”>Teks normal ….</font>
<BLOCKQUOTE>
<P><B><font color=”blue”>Pemasaran Lewat E-mail</font></B>
<P><font=”maroon”>aku tak lebih baik dari pecundang, aku hanya orang bodoh yang tak mau di bodohi</font></P>
– <I>kikil.com</I> , Juni 2007 –
</BLOCKQUOTE>
</BODY>
HASIL yg TAMPAK DI BROWSER :
Teks normal ….
aku tak lebih baik dari pecundang, aku hanya orang bodoh yang tak mau di bodohi
– kikil.com , Juni 2007 –
________________________________________
<P ALIGN=”CENTER”>
</P>
atribut CENTER juga dapat digantikan dengan berbagai penataan alinea seperti RIGHT– rata kanan — atau JUSTIFY — rata kiri kanan –.
________________________________________
Penggunaan Link
Link atau Jalur penghubung, sering dikenal dengan istilah “hyperlinks”, memungkinkan sebuah obyek/string dalam dokumen anda untuk di-klik. Pada saat di-klik obyek/string tersebut akan menampilkan sebuah proses lain (action), misalnya membuka halaman dokumen lain atau maju ke halaman berikutnya.
Teks dan Image dapat di beri jalur sambung dengan mudah.
Tag LINK adalah sebuak blok dengan awalan :
<A>
yg menyatakan awal dari obyek yg dapat di-klik dan di akhiri dengan tag :
</A>
yg menyatakan akhir dari link, atau berhentinya jalur sambung. Apapun yg berada di-antara TAG Awal dan TAG Akhir tadi menampilak proses yg sama, TAG semacam ini disebut Tag Blok.
Ada atribut di dalam TAG LINK yg menyatakan kemana tujuan dari jalur sambung tersebut atau apa yg akan diproses. There are Attributes inside a link tag which tell it where to go. Atribut itu diletakkan diantara <> dari tag awal atau tag pembuka.
________________________________________
HREF
Ini adalah atribut dari Tag LINK, yg memberi perintah kepada tag <A> kemana link terebut menuju. HREF diikuti dengan tanda sama dengan =, yg disambung langsung dengan URL (masih ingat URL kan ? ada di atas kalo udah lupa) dari dokumen atau apapun yg di tuju oleh jalur sambung tersebut.
Sebagai contoh adalah Tag berikut:
<A href=”menu.html”> Menu </A>
Saat teks “menu” di-klik maka browser akan membuka sebuah file yg bernama menu.html.
<A href=”menu.html” target=”_blank” title=”Daftar Isi lengkap halaman Web”> Menu </A>
Target =”_blank” menyatakan bahwa dokumen yg muncul nanti akan berada di window baru, dan penjelasan yg dikehendaki ada pada tag title.
Jika tidak di beri “target” maka secara default link akan terbuka pada jendela browser yg sama.
Perhatikan bahwa atribut dapat ditulis dengan huruf kapital semua atau sebaliknya, namun kebiasaan yg konsisten akan memudahkan anda dikemudian hari.
Beberapa atribut yg dapat diselipkan di antara Tag LINK adalah :
<A>
Attribut Deskripsi/Penjelasan Nilai / Value
HREF Menyatakan URL dari dokumen yg akan dibuka saat link di-klik pada browser. URL halaman atau dokumen yg dituju, relatif terhadap dokumen
TARGET Menyatakan dokumen tersebut akan muncul dibagian mana dari frame atau window. Nama dari frame atau window yg dituju
TITLE Teks yg akan muncul sebagai pop-ups saat mouse berada di atas link. Rangakaian teks yg dikehendaki muncul saat mouse di atas link.
Mengatur penataan font
Mengatur Penataan FONT
Kita dapat memberi sentuhan berbagai macam terhadap font yg kita gunakan dalam HTML, dengan sedikit usaha dan pengetahuan.
TAG FONT akan muncul sebagai berikut:
<FONT> teks… </FONT>
DI dalam bagian awal dari TAG FONT, kita memberi deskripsi bagaimana font yg kita inginkan.
Contohnya :
Untuk menyesuaikan ukuran dari font kita memakai atribut :
<FONT SIZE=4> teks… </FONT>
Ini berarti font yg kita gunakan adalah 4.
Atribut yg dapat kita gunakan dalam Tag FONT adalah :
SIZE= (ukuran Font, dari 1-7)
COLOR= (warna Font, dapat di lihat pada list di bawah)
FACE= (nama Font yg kita gunakan, namun ingat bahwa tidak semua font yg kita kehendaki dimiliki oleh kompuer orang lain pula)
Jika atribut FACE tidak digunakan maka yg akan di tampilkan adalah font face default, yaitu Times Nesw Roman.
Membuat daftar atau list
Ada 3 tipe list. There are 3 types of lists.
Unordered Lists
Contoh penerapan unordered list:
• Anjing
• Kucing
• Buaya
• Monyet
Perintah ini menempatakan bullet (baik kotak atau bulat) di depan setiap item list.
Tampilan di atas adalah hasil dari kode HTML anda berikut ini :
<UL>
<LI>Anjing</LI>
<LI>Kucing</LI>
<LI>Buaya</LI>
<LI>Monyet</LI>
</UL>
Tag <LI> sebagai pengganti List Items.
<UL> adalah TAG pembuka. Dianataranya adalah item-item yg akan di list. Kemudian di akhiri dengan Tag </UL>.
________________________________________
Ordered Lists
Item Ordered list diberi label berupa angka atau huruf.
• Anjing
• Kucing
• Buaya
• Monyet
Kode-nya adalah sebagai berikut:
<OL>
<LI>Anjing</LI>
<LI>Kucing</LI>
<LI>Buaya</LI>
<LI>Monyet</LI>
</OL>
Item Ordered list diberi label berupa angka atau huruf.
• Anjing
• Kucing
• Buaya
• Monyet
Kode-nya adalah sebagai berikut:
<OL>
<LI>Anjing</LI>
<LI>Kucing</LI>
<LI>Buaya</LI>
<LI>Monyet</LI>
</OL>
________________________________________
Definition Lists
Tipe ini relatif lebih kompleks namun jangan khawatir sebab tidak se-sulit kelihatannya.
Definisi list block adalah :
<DL></DL>
Inside the tag there are two parts:
<DT> Definition Term -and-
<DD> Definition Definition
contoh penggunaannya adalah :
________________________________________
HTML
Hyper Text Markup Language, the standard format for website documents.
Browser
The program in which the actual contents of the HTML document are displayed.
Link
A clickable text string or image that takes the viewer to another document, or location.
________________________________________
Kode-nya adalah sebagai berikut:
________________________________________
<DL>
<DT> HTML
<DD> The program in which the actual contents of the HTML document are displayed.
<DT> Browser
<DD> The program in which the actual contents of the HTML document are displayed.
<DT> Link
<DD> A clickable text string or image that takes the viewer to another document, or location.
</DL>
________________________________________
Contoh Lain Penggunaan Tag List
Kode yg anda lihat pada halaman HTML …
<ol type=”I”>
<li>Company Profile
<ol type=”i”>
<li>Headquarters
<li>C.E.O.
<li>Local Branches
<ul type=”circle”>
<li>Los Angeles
<li>Washington DC
</ul>
</ol>
<li>Products
<ul type=”disc”>
<li>Computers
<li>Printers
</ul>
<li>Overseas Operations
<ol type=”i”>
<li>Germany
<ul type=”square”>
<li>Berlin
<li>Hamburg
</ul>
<li>France
<ul type=”square”>
<li>Paris
<li>Marseilles
</ul>
</ol>
<li>New Developments
<ol type=”1″>
<li>Lap Tops
<li>Cell Phones
</ol> … Dan hasilnya yg akan terlihat pada browser Anda
I. Company Profile
i. Headquarters
ii. C.E.O.
iii. Local Branches
o Los Angeles
o Washington DC
II. Products
• Computers
• Printers
III. Overseas Operations
. Germany
§ Berlin
§ Hamburg
i. France
§ Paris
§ Marseilles
IV. New Developments
. Lap Tops
i. Cell Phones
Mengunakan gambar
Untuk menyertakan atau menampilkan gambar/image ke dalam dokumen HTML sangatlah mudah. Yaitu dengan menggunakan tag IMG. Tag IMG adalah tag yg tertutup.
<IMG src=a WIDTH=b HEIGHT=c BORDER=d ALT=e ALIGN=f>
a = lokasi source/image yg akan kita sertakan
b = lebar horizontal
c = tinggi secara vertikal
d = ukuran border yg akan menjadi frame image
e = teks yg akan muncul sebagai pengganti bila image tidak diload
f = pengaturan rata halaman (LEFT, RIGHT, TOP, MIDDLE, BOTTOM)
Bagian yg paling penting untuk disertakan adalah SRC sebab ini memberi petunjuk file mana yg akan digunakan sebagai image. Atribut lain bersifat opsional, sehingga tag IMG yg paling sederhana adalah :
<IMG src=cat.gif>
SRC berarti ‘SOURCE’ dari dokumen gambar. Ini menunjuk kepada nama file image, yg akan disertakan dalam dokumen.
Sangat baik bila kita membiasakan diri menggunakan atribut tinggi dan lebar pada kode kita, karena akan sangat memudahkan bagi broser untuk mengatur lay out halaman dokumen saat loading apabila telah dispesifikasikan terlebih dahulu. Halaman akan di load lebih cepat, kemudian menyusul image-image untuk di load berikutnya.
Format Grafik/Image yg digunakan di web :
GIF- berarti Graphic Interchange Format, sebuah palet image 8-bit (256 color) berformat dengan 2-bit alpha mask (transparansi). GIFs tidak memilik kompresi yg dapat terlihat. Gunakan format ini bila anda ingin menampilkan gambar-gambar ilustrasi, kartun dan lain-lain yg memiliki jumlah warna sedikit serta blok-blok warna berukuran besar.
JPG- sebuah format image 24-bit color, dengan kompresi yg dapat terlihat pada kualitas yg rendah. Gunakan format ini untuk menampilakn foto, dan warna-warna yg lebih kaya.
Contoh penggunaannya :
<BODY><center>
<IMG src=”images.jpg” alt=”foto”><br> (ukuran asli = 90×120 pixel)<br>
<IMG src=”images.jpg” alt=”foto” WIDTH=”45″ HEIGHT=”60″ border=”14″ ><br> (45×60 pixel dengan border=14)<br>
<IMG src=”images.jpg” alt=”foto” WIDTH=”180″ HEIGH=”240″> <br>(180×240 pixel)</center>
<BODY>
Menggunakan table
TAG Table ini sangat berguna untuk melakukan pengaturan komposisi halaman, tata ruang dan paling membantu dalam menyusun sebuah dokumen dalam HTML. Untuk mengkonstruksi sebuah interface (antarmuka) secara grafik dan berbagai interaktifitas pengguna.
Tag Table ini bersifat Blok dan akan terlihat sebagai berikut:
<TABLE>
</TABLE>
Di dalam blok tersbut kita menytakan jumlah baris dan dalam baris tersebut kita menyatakan jumlah kolom yang akan kita gunakan.
Untuk menciptakan baris gunakan tag berikut dalam blok Tag TABLE:
<TR>
</TR>
Di dalam tag baris di atas kita spesifikasikan kolom seperti ini :
<TABLE>
<TR>
<TD></TD>
</TR>
</TABLE>
TD berarti Table Data. Segala informasi yang ingin kita tampilan dalam table di letakkan di antara Tag TD ini. Menambahkan beberapa TD lagi akan menambahkan jumlah kolem dalam Table anda.
<TABLE BORDER=1>
<TR>
<TD>Pekerjaan:</TD>
<TD>Petani</TD>
</TR>
</TABLE>
Ada tambahan baris, dan kode-nya akan terlihat sebagai berikut :
<TABLE>
<TR>
<TD>Name:</TD>
<TD>Paijo</TD>
</TR>
<TR>
<TD>Pekerjaan:</TD>
<TD>Petani</TD>
</TR>
</TABLE>
Untuk membuat sebuah kolom melebar melewati kolom–kolom lainnya, kode yang digunakan adalah colspan (column expand) diikuti dengan value dri berapa jumlah kolom yang akan dilewati.
<TABLE BORDER=1>
<TR>
<TD COLSPAN=2><CENTER><B>Database</B></CENTER></TD>
</TR>
<TR>
<TD>Name:</TD>
<TD>Paijo</TD>
</TR>
<TR>
<TD>Pekerjaan:</TD>
<TD>Petani</TD>
</TR>
<TR>
<TD>Pendidikan</TD>
<TD>SMA</TD>
</TR>
</TABLE>
Segala data disimpan di antara blok table.
Baris Tabel <TR>: perintah ini memunculkan sebuah baris dalam tabel
Kolom Tabel <TD>: bagian ini menciptakan sebuah klom yang akan diisi data apapun yang berada di antaranya.
Beberapa atribut yang dapat digunakan dalam Tag TABLE adalah sebagai berikut :
Attributes Description Values
<TABLE>
CELLPADDING Menggatur jarak antara
isi yang tersimpan dalam
sebuah sel dengan border sel Jumlah Pixel
CELLSPACING Spasi yang akan memberi jarak
antar sel satu sama lain Jumlah Pixel
BORDER Besaran border, tepian dari table
dan antar sel Jumlah Pixel
BGCOLOR Warna latar dari table Warna, atau nilai hexa
desimal warna
BACKGROUND The URL dari gambar yang ingin
dipakai dalam background tabel. JPG or GIF source
ALIGN Pengaturan pe-rata-an data LEFT, RIGHT, CENTER
WIDTH Lebar table Nilai dalam jumlah pixel
atau persen
HEIGHT Tinggi table Nilai dalam jumlah pixel
atau persen
<TR>
VALIGN Pengaturan alinea dalam
baris sel secara vertikal TOP, MIDDLE, BOTTOM,
BASELINE
ALIGN Pengaturan alinea dalam
baris sel secara horizontal RIGHT, LEFT, CENTER,
JUSTIFY
BORDERCOLOR Warna tepian (border) Warna, atau nilai hexa
desimal warna
BORDERCOLORLIGHT Warna bagian atas dari border Warna, atau nilai hexa
desimal warna
BORDERCOLORDARK Warna bagian bawah border Warna, atau nilai hexa
desimal warna
BGCOLOR Warna latar dari sel Warna, atau nilai hexa
desimal warna
<TD>
VALIGN Pengaturan alinea dalam baris sel
secara vertikal TOP, MIDDLE, BOTTOM,
BASELINE
ALIGN Pengaturan alinea dalam baris sel
secara horizontal RIGHT, LEFT, CENTER,
JUSTIFY
ROWSPAN Number of rows the cell spans across Jumlah Baris
COLSPAN Number of columns the cell spans across Jumlah Kolom
BGCOLOR Warna latar Warna, atau nilai hexa
desimal warna
BACKGROUND URL dari data yang akan digunakan sebagai latar belakang dapat berupa gambar. Source file
__________________________________________________ __
CONTOH-CONTOH PENGGUNAAN TABLE
Contoh Penggunaan Table Untuk Menampilkan Gambar :
Kode HTMLnya :
<table border=”0″ width=”100%”>
<tr>
<td>Border = 1
<table BORDER=”1″>
<tr><td><img src=”images.jpg”></td></tr>
</table>
</td>
<td>Border = 5
<table BORDER=”5″>
<tr><td><img src=”images.jpg”></td></tr>
</table>
</td>
<td>Border = 12
<table BORDER=”12″>
<tr><td><img src=”images.jpg”></td></tr>
</table>
</td>
</tr>
</table>
Menggunakan frame
Dengan menggunakan Frame dimungkinkan beberapa dokumen HTML ditampilakan dalam satu window browser. Perintah ini membagi satu window browser menjadi beberapa bidang untuk melihat beberapa halaman web/dokumen yg berbeda. Kita dapat memiliki sebuah menu dalam satu frame kemudian frame lainnya menampilkan isi dari dokumen yg dituju oleh menu tersebut.
Top.html
Menu.html Main.html
Ada satu dokumen yg mengandung informasi lay out, data tambahan, dan ketentuan dari frame yg akan kita buka. Kemudian semua isi dari dokumen yg menyusun frame-frame tersebut tersimpan dalam dokumen lain.
Dalam dokumen index terdapata sebuah tag : no body tags dan FRAMESET tags. Dalam <FRAMESET> diikuti Tag <FRAME> yg menyatakan bagaiamana tampilan setiap frame nantinya.
Tag FRAMESET dapat diikuti beberapa atribut sbb :
<FRAMESET>
Attributes Description Values
NAME Nama dari frame untuk jalur sambung bertarget (target linking) Tidak boleh memuat string : \ / : * ? ” < > |
ROWS Memungkinkan kita membuat beberapa baris frame yg akan muncul serta ukurannya Contoh. ROWS=”300,200,*”
COLS Memungkinkan kita membuat beberapa kolom frame yg akan muncul serta ukurannya The Column sizes listed ie. COLS=”200,600,*”
FRAMEBORDER Merubah berapa ukuran tepian atau border Angka piksel
FRAMESPACING Jarak yg memisahkan masing-masing frame-frame Angka piksel
contoh:
<HTML>
<HEAD>
<TITLE>My Frames</TITLE>
</HEAD>
<FRAMESET COLS=”100,*”>
<FRAME NAME=”menu” src=”menu.html”>
<FRAME NAME=”main” src=”main.html”>
</FRAMESET>
</HTML>
// two columns, first is 100 pixels
// first frame, name “menu”: menu.html
//second frame, name “main”: main.html
Tampilannya akan terlihat sbb:
Menu.html
100 pixels Main.html
Sisa lebar dari keseluruhan layar
Atribut COLS dalam sebuah Tag frameset menyatakan bahwa frame itu akan muncul dalam bentuk lajur atau kolom. Besaran nilai terpisah dengan koma, di dalam tada petik akan menetukan berapa jumlah kolom yg akan muncul. Untuk setiap kolom yg terbentuk anda musti menyertakan sebuah tag <FRAME> di dalam blok Tag Frame.
Demikian juga halnya dengan ROWS.
Bila kita menciptakan kolom, maka kita mengatur (setelah tanda = ) dimensi dalam piksel atau pesen dari frame yg kita ciptakan dari kiri ke kanan, bile kita membuat 4 angka berurutan maka 4 kolom frame yg tercipta.
Contoh :
<FRAMESET COLS=”50%,150,100,*”>
1 2 3 4
ini akan menciptakan 4 Frame, yg pertama, paling kiri, adalah 50 % lebarnya dari keseluruhan lebar window, kemudian frame selanjutnya lebar pikselnya 150, lalu frame ketiga dengan lebar 100 piksel, serta frame keempat diwakili tanda * selebar sisa dari seluruh window dikurangi ketiga frame sebelumnya.
Perhatikan bahwa resolusi layar ada beberapa macam 1024 x 768 piksel, kemudian 800 x 600, serta 640 x 480 dan area yg tersisa dalam window browser yg akan terlihat oleh pengunjung situs anda berkisar dua pertiganya, setelah dikurangi scroler, border dan menu pada browser.
Tag berikutnya yg anda sertakan adalah keepat tag <FRAME> yg kita letakkan di antara blok <FRAMESET> yg akan menjelaskan ke- 4 frame tersebut. Tag yg pertama <FRAME> akan menyatakan lebar 50% , kemudian diikuti lebar 150 pixels dan properti frame lainnya.
<FRAMESET COLS=”50%,150,100,*”>
<FRAME src=”main.html” NAME=”Main”>
<FRAME src=”menu.html” NAME=”Menu”>
<FRAME src=”thumbnails.html” NAME=”Pics”>
<FRAME src=”empty.html”>
</FRAMESET>
Di dalam setiap tag FRAME tertutup dapat disertakan atribut ini :
<FRAME>
Attributes Description Values
NAME Nama Frame untuk Jalur sambung bertarget (target linking) Karakter berikut tidak boleh disertakan : \ / : * ? ” < > |
SRC URL dari dokumen yg akan berada dalam frame tersebut URL dokumen relatif
MARGINWIDTH Margin lebar frame Sembarang angka
MARGINHEIGHT Margin tinggi frame Sembarang angka
SCROLLING Memungkinkan ada atau tidaknya scroll dalam frame YES/NO/AUTO
BORDERCOLOR Merubah warna border Warna, atau nilai hexa warna
NORESIZE Memungkinkan frame tidak dapat dirubah-rubah N/A
FRAMESPACING Jarak antar sel frame Angka dalam piksel
FRAMEBORDER Rubah besaran boder frame Angka dalam piksel
Sangat dimungkinkan untuk memiliki frame dari dalam sebuah frame baris. Untuk itu kita menciptakan Frameset dalam Frameset.
Contoh:
Untuk menciptakan frame seperti ini :
Left.html Top.html
Main.html
Pertama membuat kolom normal :
<FRAMESET COLS=”300,*”>
</FRAMESET>
ini berarti kita membagi dua halaman window menjadi sebuah frame dengan lebar 300 pixel, dan sebuah lagi sisanya.
Kemudian sertakan frameset selanjutnya diantara frame blok kedua, perhatikan contoh berikut :
________________________________________
<FRAMESET COLS=”300,*”>
<FRAME src=”Left.html”>
<FRAMESET ROWS=”200,*”>
<FRAME src=”Top.html”>
<FRAME src=”Main.html”>
</FRAMESET>
</FRAMESET>
Contoh diatas adalah contoh Frameset dalam Frameset