PANDUAN RINGKASAN HTML
Dokumen ini dirancang untuk melayani kelompok penmbaca tertentu. Dokumen ini dirancang sebagai "kertas contekan" yang baik, yang dapat anda gunakan untuk melihat bentuk dan tag yang benar selagi anda menyusun lembar halaman pada Web. Panduan HTML yang lain menyediakan uraian yang lebih rinci tentang bagaimana menggunakan tag tertentu atau bagaimana cara kerja HTML pada umumnya. Bila anda adalah pemula dalam bidang HTML, sebaiknya anda membaca panduan tersebut lebih dahulu agar tidak menjadi rancu.
Ada pula beberapa panduan gaya penulisan (style)
yang mengarahkan anda menulis lebar halaman agar terlihat indah dan
bekerja untuk berbagai jenis browser. Saya menyarankan agar anda
membacanya bila anda serius akan merencanakan lembar halaman pada Web;
terlalu banyak orang yang mengabaikan pemikiran bahwa lembar halaman
ciptaan mereka akan dibaca oleh orang lain dan untuk itu selalu ada
cara dalam menampilkannya secara lebih baik atau lebih buruk.
WWW Help Page
yang saya susun memiliki acuan ke berbagai tempat yang menyediakan
informasi tentang HTML dan rancangan lembar halaman Web. Tempat-tempat
acuan ini merupakan tempat yang baik bagi pemula terutama bila anda
memiliki pertanyaan tertentu yang lebih luas daripada sekedar informasi
yang terdapat pada "panduan Ringkas" di sini.
Panduan
ini dirancang bagi mereka yang sudah cukup mamahami HTML dan tak
membutuhkan instruksi langkah demi langkah, namun mereka tidak atau
belum mampu mengingat format yang tepat dari semua tag HTML. Bila
anda membutuhkan "Rujukan Cepat", di mana anda dapat segera menemukan
yang anda cari tanpa harus mengikuti uraian selengkapnya berbagai
keterangan tambahan, maka panduan ini memang ditujukan bagi anda.
ELEMEN DASAR
| Jenis Dokumen | <HTML></HTML> | (terdapat pada awal dan akhir dari file HTML) | |
| Judul | <TITLE></TITLE> | (harus selalu terdapat pada mukadimah) | |
| Mukadimah (Header) | <HEAD></HEAD> | (keterangan umum, seperti judul dsb.) | |
| Batang Tubuh | <BODY></BODY> | (isi dari halaman HTML) |
RANCANGAN STRUKTURAL
| Kepala | <H?></H?> | (Heading - spesifikasi untuk menetapkan 6 tingkatan kepala) | |
| Penataan (Align) Kepala | <H? ALIGN=LEFT|CENTER|RIGHT></H?>[*] | ||
| Bagian (Division) | <DIV></DIV> | ||
| Penataan Bagian | <DIV ALIGN=LEFT|RIGHT|CENTER></DIV> | ||
| Kutipan Blok (Block Quote) | <BLOCKQUOTE></BLOCKQUOTE> [*] | (tampilan dengan jeda terhadap batas pinggir) | |
| Penekanan (Emphasis) | <EM></EM> | (umumnya huruf miring) | |
| Penguatan (Strong Emphasis) | <STRONG></STRONG> | (umumnya huruf tebal) | |
| Kutipan singkat (Citation) | <CITE></CITE> | (umumnya huruf miring) | |
| Kode | <CODE></CODE> | (Code - untuk source code listings) | |
| Contoh Keluaran | <SAMP></SAMP> | (Sample Output) | |
| Masukan Papan Ketik | <KBD></KBD> | (Keyboard Input) | |
| Variabel | <VAR></VAR> | (Variable) | |
| Definisi | <DFN></DFN> | (Definition - jarang dipakai) | |
| Alamat Pengarang (Author's Address) | <ADDRESS></ADDRESS> | ||
| Huruf ukuran Besar | <BIG></BIG> | ||
| Huruf Ukuran Kecil | <SMALL></SMALL> |
FORMAT TAMPILAN
| Huruf Tebal | <B></B> | (Bold) | |
| Huruf Miring | <I></I> | (Italic) | |
| N3.0b | Garis Bawah | <U></U> | (Underline - jarang digunakan) |
| Huruf Coret | <STRIKE></STRIKE> | (Strikeout - jarang digunakan) | |
| N3.0b | Huruf Coret | <S></S> | (Strikeout - jarang digunakan) |
| Huruf Geser Bawah | <SUB></SUB> | (Subscript) | |
| Huruf Geser Atas | <SUP></SUP> | (Superscript) | |
| Huruf Mesin Ketik | <TT></TT> | (Typewriter - huruf berjarak tetap) | |
| Pra-format (Preformatted) | <PRE></PRE> | (menampilkan dengan jarak pra-format) | |
| Jarak Huruf | <PRE WIDTH=?></PRE> | (mengatur jarak huruf) | |
| Rata Tengah | <CENTER></CENTER> [*] | (Center - berlaku untuk teks maupun gambar) | |
| N1.0 | Huruf Kedip | <BLINK></BLINK> | (Blinking - tag terlucu sampai kini) |
| Ukuran Huruf | <FONT SIZE=?></FONT> | (Font Size - boleh diisi dari 1 sampai 7) | |
| Rubah Ukuran Huruf | <FONT SIZE="+|-?"></FONT> | ||
| N1.0 | Basis Ukuran Huruf | <BASEFONT SIZE=?> | (boleh diisi 1 sampai 7; ukuran standard/default=3) |
| Warna Huruf | <FONT COLOR="#$$$$$$"></FONT> | ||
| N3.0b | Pilih Jenis Huruf | <FONT FACE="***"></FONT> | |
| N3.0b | Teks Multi Kolom | <MULTICOL COLS=?></MULTICOL> | |
| N3.0b | Jarak Batas Kolom | <MULTICOL GUTTER=?></MULTICOL> | (default = 10 pixels) |
| N3.0b | Lebar Kolom | <MULTICOL WIDTH=?></MULTICOL> | |
| N3.0b | Celah (Spacer) | <SPACER> | |
| N3.0b | Jenis Celah | <SPACER TYPE=horizontal| vertical|block> | |
| N3.0b | Ukuran Celah | <SPACER SIZE=?> | |
| N3.0b | Dimensi Celah | <SPACER WIDTH=? HEIGHT=?> | |
| N3.0b | Penataan Celah | <SPACER ALIGN=left|right|center> |
ACUAN DAN GRAFIK
| |||
|---|---|---|---|
| Acuan pada dokumen tertentu | <A HREF="URL"></A> | ||
| Acuan pada sasaran dalam dokumenyang | <A HREF="URL#***"></A> | (bila terdapat pada dokumen lain) | |
| <A HREF="#***"></A> | (bila terdapat pada dokumen sama) | ||
| N2.0 | Jendela Sasaran (Target Window) | <A HREF="URL" TARGET="***| |_blank|_self|_parent|_top"></A> | |
| Penamaan sasaran pada dokumen | <A NAME="***"></A> | ||
| Kaitan(Relationship) | <A REL="***"></A> | (jarang digunakan) | |
| Kaitan terbalik (Reverse Relationship) | <A REV="***"></A> | (jarang digunakan) | |
| Peragaan Gambar | <IMG SRC="URL"> | ||
| Penataan Letak Gambar | <IMG SRC="URL" ALIGN=TOP|BOTTOM|MIDDLE|LEFT|RIGHT> | ||
| N1.0 | Penataan Letak Gambar | <IMG SRC="URL" ALIGN=TEXTTOP| ABSMIDDLE|BASELINE|ABSBOTTOM> | |
| Alternatif Teks | <IMG SRC="URL" ALT="***"> | (saat gambar belum/tidak ditampilkan) | |
| Daerah Gambar (Imagemap) | <IMG SRC="URL" ISMAP> | (membutuhkan program script) | |
| Daerah Gambar pihak klien | <IMG SRC="URL" USEMAP="URL"> | ||
| Uraian Daerah Gambar | <MAP NAME="***"></MAP> | ||
| Pembagian Daerah Gambar | <AREA SHAPE="RECT" COORDS=",,," HREF="URL"|NOHREF> | ||
| Dimensi Gambar | <IMG SRC="URL" WIDTH=? HEIGHT=?> | (in pixels) | |
| Garis Batas | <IMG SRC="URL" BORDER=?> | (dalam satuan pixel) | |
| Ruang Pembatas | <IMG SRC="URL" HSPACE=? VSPACE=?> | (dalam satuan pixel) | |
| N1.0 | Gambar Low-Res Proxy | <IMG SRC="URL" LOWSRC="URL"> | |
| N1.1 | Pemindahan Tarik | <META HTTP-EQUIV="Refresh" CONTENT="?; URL=URL"> | (Client Pull) |
| N2.0 | Objek Cantum | <EMBED SRC="URL"> | (Embed Object - mencantumkan objek pada dokumen) |
| N2.0 | Ukuran Objek | <EMBED SRC="URL" WIDTH=? HEIGHT=?> | |
PEMISAH
| |||
|---|---|---|---|
| Paragraf | <P></P> [*] | (tag penutup seringkali tak diperlukan) | |
| Align Text | <P ALIGN=LEFT|CENTER|RIGHT></P>[*] | ||
| Pndah Baris | <BR> | (pindah ke baris berikut) | |
| Putus Penataan Baris | <BR CLEAR=LEFT|RIGHT|ALL> | (Clear Textwrap) | |
| Garis Datar | <HR> | (Horizontal Rule) | |
| Penataan Letak Garis | <HR ALIGN=LEFT|RIGHT|CENTER> | ||
| Tebal Garis | <HR SIZE=?> | (dalam satuan pixel) | |
| Lebar Garis | <HR WIDTH=?> | (dalam satuan pixel) | |
| N1.0 | Lebar Garis Persentasi | <HR WIDTH="%"> | (dalam persentasi terhadap lebar halaman) |
| Garis Pejal | <HR NOSHADE> | (Solid Line - tanpa pola 3D) | |
| N1.0 | Tanpa Ganti Baris | <NOBR></NOBR> | (No Break - mencegah ganti baris) |
| N1.0 | Sambung Suku Kata | <WBR> | (Word Break - letak ganti baris bila diperlukan) |
DAFTAR
| ||||
|---|---|---|---|---|
| Daftar Tanpa Nomor | <UL><LI></UL> | (Unordered List - Cantumkan <LI> sebelum tiap butir) | ||
| Kompak | <UL COMPACT></UL> | (Compact) | ||
| Jenis Butiran | <UL TYPE=DISC|CIRCLE|SQUARE> | (Bullet Type - berlaku umum bagi butir terdaftar) | ||
| <LI TYPE=DISC|CIRCLE|SQUARE> | (berlaku khusus pada butir ini dan selanjutnya) | |||
| Daftar Bernomor | <OL><LI></OL> | (Ordered List - Cantumkan <LI> sebelum tiap butir) | ||
| Kompak | <OL COMPACT></OL> | |||
| Jenis Penomoran | <OL TYPE=A|a|I|i|1> | (berlaku umum untuk semua butir dalam daftar) | ||
| <LI TYPE=A|a|I|i|1> | (berlaku khusus pada butir ini dan selanjutnya) | |||
| Nomor Mulai | <OL START=?> | (berlaku umum untuk semua butir dalam daftar) | ||
| <LI VALUE=?> | (berlaku khusus pada butir ini dan selanjutnya) | |||
| Daftar Definisi | <DL><DT><DD></DL> | (Definition List - <DT>=istilah, <DD>=uraian) | ||
| Kompak | <DL COMPACT></DL> | |||
| Daftar Menu | <MENU><LI></MENU> | (Cantumkan <LI> sebelum butir menu) | ||
| Kompak | <MENU COMPACT></MENU> | |||
| Daftar Direktori | <DIR><LI></DIR> | (Cantumkan <LI> sebelum tiap butir direktori) | ||
| Kompak | <DIR COMPACT></DIR> | |||
LATAR BELAKANG DAN WARNA
| |||
|---|---|---|---|
| Latar Belakang Gambar | <BODY BACKGROUND="URL"> | (Tiled Background) | |
| Warna Latar Belakang | <BODY BGCOLOR="#$$$$$$"> [*] | (Background Color - urutan: merah/hijau/biru) | |
| Warna Huruf Teks | <BODY TEXT="#$$$$$$"> [*] | ||
| Warna Acuan | <BODY LINK="#$$$$$$"> [*] | ||
| Acuan Lepas Kunjung | <BODY VLINK="#$$$$$$"> [*] | (Visited Link) | |
| Acuan Aktif | <BODY ALINK="#$$$$$$"> [*] | (Active Link) | |
(Info lanjut di http://werbach.com/web/wwwhelp.html#color)
| |||
HURUF SPESIAL(these must all be in lower case)
| |||
|---|---|---|---|
| Special Character | &#?; | (where ? is the ISO 8859-1 code) | |
| < | < | ||
| > | > | ||
| & | & | ||
| " | " | ||
| Registered TM | ® | ||
| Copyright | © | ||
| Spasi tak putus | | Non-breaking Space | |
(Daftar lengkap huruf khusus terdapat di http://www.uni-passau.de/%7Eramsch/iso8859-1.html)
| |||
FORMULIR
| |||
|---|---|---|---|
| Rancangan Formulir | <FORM ACTION="URL" METHOD=GET|POST></FORM> | Define Forms | |
| N2.0 | Mengirimkan File | <FORM ENCTYPE="multipart/form-data"></FORM> | File Upload |
| Input Field | <INPUT TYPE="TEXT|PASSWORD|CHECKBOX|RADIO| IMAGE|HIDDEN|SUBMIT|RESET"> | ||
| Nama Field | <INPUT NAME="***"> | ||
| Nilai Field | <INPUT VALUE="***"> | ||
| Kotak Periksa | <INPUT CHECKED> | (checkboxes dan radio boxes) | |
| Ukuran Field | <INPUT SIZE=?> | (dalam satuan jumlah karakter) | |
| Panjang Maksimum | <INPUT MAXLENGTH=?> | (dalam satuan karakter) | |
| Daftar Pilihan | <SELECT></SELECT> | Selection List | |
| Nama Daftar Pilihan | <SELECT NAME="***"></SELECT> | ||
| Jumlah Pilihan | <SELECT SIZE=?></SELECT> | ||
| Banyak Pilihan | <SELECT MULTIPLE> | (dapat memilih lebih dari satu) | |
| Pilihan | <OPTION> | (butir yang dapat dipilih) | |
| Pilihan Default | <OPTION SELECTED> | ||
| Ukuran Input Box | <TEXTAREA ROWS=? COLS=?></TEXTAREA> | ||
| Nama Input Box | <TEXTAREA NAME="***"></TEXTAREA> | ||
| N2.0 | Rangkuman Teks | <TEXTAREA WRAP=OFF|VIRTUAL|PHYSICAL></TEXTAREA> | Wrap Text |
TABEL
| |||
|---|---|---|---|
| Rancangan Tabel | <TABLE></TABLE> [*] | ||
| Garis Batas Tabel | <TABLE BORDER=?></TABLE> | ||
| Celah Sel | <TABLE CELLSPACING=?> | Cell Spacing | |
| Penyangga Sel | <TABLE CELLPADDING=?> | Cell Padding | |
| Lebar Tabel | <TABLE WIDTH=?> | (dalam satuan pixel) | |
| Lebar Tabel Persentasi | <TABLE WIDTH="%"> | (dalam satuan persen terhadap lebar halaman) | |
| Baris dalam Tabel | <TR></TR> | ||
| Penataan Letak Baris | <TR ALIGN=LEFT|RIGHT| CENTER|MIDDLE|BOTTOM VALIGN=TOP|BOTTOM|MIDDLE> | ||
| Sel dalam Tabel | <TD></TD> | (harus ada dalam setiap baris tabel) | |
| Penataan Letak Sel | <TD ALIGN=LEFT|RIGHT| CENTER|MIDDLE|BOTTOM VALIGN=TOP|BOTTOM|MIDDLE> | ||
| Tanpa Ganti Baris | <TD NOWRAP> | ||
| Rentang Kolom | <TD COLSPAN=?> | Columns to span | |
| Rentang Baris | <TD ROWSPAN=?> | Rows to span | |
| N1.1 | Lebar Sel | <TD WIDTH=?> | (dalam satuan pixel) |
| N1.1 | Lebar Sel Persentasi | <TD WIDTH="%"> | (dalam satuan persen terhadap lebar tabel) |
| N3.0b | Warna Sel | <TD BGCOLOR="#$$$$$$"> | |
| Kepala Tabel | <TH></TH> | (Table Header - seperti data dengan Bold dan Center) | |
| Penataan Letak Kepala Tabel | <TH ALIGN=LEFT|RIGHT| CENTER|MIDDLE|BOTTOM VALIGN=TOP|BOTTOM|MIDDLE> | ||
| Tanpa Baris Baru | <TH NOWRAP> | ||
| Rentang Kolom | <TH COLSPAN=?> | Columns to Span | |
| Rentang Baris | <TH ROWSPAN=?> | Rows to Span | |
| N1.1 | Lebar Kepala Tabel | <TH WIDTH=?> | (dalam satuan pixel) |
| N1.1 | Lebar Persentasi | <TH WIDTH="%"> | (dalam persentasi terhadap lebar tabel) |
| N3.0b | Warna Kepala Tabel | <TH BGCOLOR="#$$$$$$"> | |
| Keterangan Tabel | <CAPTION></CAPTION> | Caption | |
| Penataan Keterangan | <CAPTION ALIGN=TOP|BOTTOM> | (di atas / di bawah tabel) | |
FRAMES
| |||
|---|---|---|---|
| N2.0 | Dokumen dalam Frame | <FRAMESET></FRAMESET> | (sebagai pengganti <BODY>) |
| N2.0 | Tinggi Baris Frame | <FRAMESET ROWS=,,,></FRAMESET> | (dalam satuan pixel atau %) |
| N2.0 | Tinggi Baris Frame | <FRAMESET ROWS=*></FRAMESET> | (* = ukuran relatif) |
| N2.0 | Lebar Kolom Frame | <FRAMESET COLS=,,,></FRAMESET> | (dalam satuan pixel atau %) |
| N2.0 | Lebar Kolom Frame | <FRAMESET COLS=*></FRAMESET> | (* = ukuran relatif) |
| N3.0b | Lebar Garis Batas | <FRAMESET BORDER=?> | |
| N3.0b | Garis Batas | <FRAMESET FRAMEBORDER="yes|no"> | |
| N3.0b | Warna Garis Batas | <FRAMESET BORDERCOLOR="#$$$$$$"> | |
| N2.0 | Rancangan Frame | <FRAME> | (isi dari frame individu) |
| N2.0 | Tampilan Dokumen Frame | <FRAME SRC="URL"> | |
| N2.0 | Nama Frame | <FRAME NAME="***"|_blank|_self| _parent|_top> | |
| N2.0 | Lebar Batas | <FRAME MARGINWIDTH=?> | (batas kiri dan kanan) |
| N2.0 | Tinggi Batas | <FRAME MARGINHEIGHT=?> | (batas atas dan bawah) |
| N2.0 | Scrollbar? | <FRAME SCROLLING="YES|NO|AUTO"> | Memungkinkan scrolling pada frame |
| N2.0 | Ukuran Frame tak bisa diubah | <FRAME NORESIZE> | |
| N3.0b | Batas Frame | <FRAME FRAMEBORDER="yes|no"> | |
| N3.0b | Warna Garis Batas | <FRAME BORDERCOLOR="#$$$$$$"> | |
| N2.0 | Isi tanpa Frame | <NOFRAMES></NOFRAMES> | (bagi browser yang tak mampu frame) |
JAVA
| |||
|---|---|---|---|
| Applet | <APPLET></APPLET> | ||
| Nama File Applet | <APPLET CODE="***"> | ||
| Parameter Applet | <APPLET PARAM NAME="***"> | ||
| Sumber Applet | <APPLET CODEBASE="URL"> | ||
| Identifier Applet | <APPLET NAME="***"> | (sebagai rujukan di tempat lain pada halaman sama) | |
| Teks Alternatif | <APPLET ALT="***"> | (untuk browser tanpa kemampuan Java browsers) | |
| Penataan Applet | <APPLET ALIGN="LEFT|RIGHT|CENTER"> | ||
| Ukuran Applet | <APPLET WIDTH=? HEIGHT=?> | (in pixels) | |
| Celah batas Applet | <APPLET HSPACE=? VSPACE=?> | (in pixels) | |
LAIN-LAIN
| |||
|---|---|---|---|
| Komentar | <!-- *** --> | (tidak ditampilkan oleh browser) | |
| Prolog HTML 3.2 | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN"> [*] | ||
| Mampu Cari | <ISINDEX> | (indikasi indeks yang dapat dicari-temukan) | |
| Prompt | <ISINDEX PROMPT="***"> | (teks sebagai prompt) | |
| Perintah Cari | <A HREF="URL?***"></a> | (gunakan tanda tanya yang sebenarnya) | |
| URL dari file ini | <BASE HREF="URL"> | (harus terletak di header) | |
| N2.0 | Nama Dasar Window | <BASE TARGET="***"> | (harus terletak di header) |
| Kaitan | <LINK REV="***" REL="***" HREF="URL"> | (Relation dan Reverse Relation, harus terletak di header) | |
| Informasi Meta | <META> | (harus terletak di header) | |
| Lembar Gaya Penulisan | <STYLE></STYLE> | (Style Sheet - belum didukung sepenuhnya) | |
| Scripts | <SCRIPT></SCRIPT> | (belum didukung sepenuhnya) | |
HTML (Hyper Text Mark-up Language)
Struktur kode-kode yang digunakan untuk membuat halaman website atau dokumen berbasis html.
Kode html berfungsi untuk mengatur setiap isi pada halaman dokumen html baik warna, latar belakang, text, gambar, suara dsb sesuai yang kita inginkan, penyusunan kode html adalah biasa dengan diawali dengan kode "<>" Opening Tag dan diakhiri dengan "</>" Closing Tag, kedua tag ini untuk mengapit unsur yang kita kelola sehingga menghasilkan penampilan yg unik secara otomatis.
Berikut beberapa contoh struktur kode html:
1. Bold (Huruf Tebal)
Jika
kita ingin membuat satu tulisan dengan tampilan efek bold maka yang
harus kita lakukan adalah mengapit tulisan tersebut diantara Opening
tag dan Closing tag, dan kode html'nya adalah "b" sebelum ditambahkan
dengan kedua tag tersebut
Contoh:
Maka hasilnya adalah : imamSadja. Anda dapat meng-copy kode pada tabel diatas untuk di paste di halaman html proyek Anda!
Maka hasilnya adalah : imamSadja
Maka hasilnya adalah : imamSadja
Maka hasilnya adalah :
imam
Sadja
Maka hasilnya adalah :
imam
Sadja
> Contoh:
Maka hasilnya adalah :
imam
Maka hasilnya adalah : imamSadja. Anda dapat meng-copy kode pada tabel diatas untuk di paste di halaman html proyek Anda!
2. Italics (Huruf Miring)
Memberikan efek miring pada tulisan yg kita inginkan Contoh:Maka hasilnya adalah : imamSadja
3. Underline (Garis Bawah)
Memberikan efek bergaris bawah pada tulisan yang kita apit Contoh:Maka hasilnya adalah : imamSadja
4. Baris Baru
Untuk
membuat baris baru Kita tidak perlu memakai Opening dan Closing tag,
cukup denagn menyisipkan kode "<br/>" diantara tulisan yang akan
dipisahkan secara alinea Contoh:Maka hasilnya adalah :
imam
Sadja
4. Baris Baru
Untuk
membuat baris baru Kita tidak perlu memakai Opening dan Closing tag,
cukup denagn menyisipkan kode "<br/>" diantara tulisan yang akan
dipisahkan secara alinea Contoh:Maka hasilnya adalah :
imam
Sadja
5. Line (Garis)
Membuat garis cukup dengan menyisipkan kode "<hr/>" diantara element yang hendak kita pisahkan> Contoh:
Maka hasilnya adalah :
imam
Sadja
a. Center (Tengah)
Seperti biasanya, kode yang harus digunakan adalah Opening dan Closing tag'nya Contoh:
Maka hasilnya adalah :
6. Align (Perataan)
Adalah untuk memposisikan tulisan atau unsur lainnya sesuai selera. Align terdiri dari beberapa macam, berikut ini misalnya:a. Center (Tengah)
Seperti biasanya, kode yang harus digunakan adalah Opening dan Closing tag'nya Contoh:
Maka hasilnya adalah :
b. Right (Kanan)
Memposisikan sebelah kanan Contoh:
Maka hasilnya adalah :
imamSadja
c. Left (Kiri)
Kode yang dipakai sama dengan align (right). Hanya mengganti dengan (left) Contoh:
Maka hasilnya adalah :
imamSadja
7. Font Style (Gaya Tulisan)
Font
style ada berbagai macam, seperti: Verdana, Thoma, Arial, Comic,
Kartica, Jokerman, Papyrus, Lucidia dan masih banyak lagi Contoh:Maka hasilnya adalah :
imamSadja
8. Font Color (Warna Tulisan)
Dalam
HTML, warna bisa di formatkan menjadi enam rangkaian huruf dan atau
angka diawali dengan symbol # yang berlaku pada system kode html,
seperti warna putih (#FFFFFF), hitam (#000000), orange (#FFA500) dan
lain-lain. Setiap warna memiliki kodenya masing-masing. Klik disini untuk melihat kode kode html warna selengkapnya!Kita juga bisa langsung menuliskan nama warnanya, seperti "lime", "red", "green" dan sebagainya Contoh:
Maka hasilnya adalah :
imamSadja atau imamSadja
9. Font Size (Ukuran Tulisan)
Kita juga bisa menyesuaikan ukuran font sesuka hati Contoh:Maka hasilnya adalah :
imamSadja
10. Marquee (Tulisan Berjalan)
Tidak
semua device atau browser pada mobile dapat menampilkan font marquee,
jika device tidak mendukung maka hasilnya adalah tulisan tidak berjalan
Contoh:Maka hasilnya adalah :
Adapula macam-macam marquee adalah tergantung dari arah dan gaya bergeraknya yang berbeda-beda tapi ma'af Saya tidak bisa mencontohkannya satu-satu karena "cuapek nulisnya, huahaha..."
11. Blink (Tulisan Berkedip)
Sama halnya dengan marquee, tulisan blink tidak akan bekerja apabila devicenya tidak mendukung Contoh:Maka hasilnya adalah :
Mungkin blink juga bisa dipakai untuk mengedipkan grafik, tapi entahlah Saya tidak pernah mencobanya..
LINK HTML CODES
Link adalah sebuah tautan berupa text atau grafik yang mengarahkan pada lokasi URL atau halaman sebuah dokumen pada situs, kurang lebihnya gitu, au ah.. Sumprit dech Lo...
Langsung saja, dibawah ini beberapa contoh yang saya tahu;
1. Link Text
Dengan
banyak membuat link text pada halaman utama situs Anda maka akan lebih
menghemat volume bagi Pengunjung, selain praktis mereka juga dapat
mudah mengakses karena ukuran situs yg rendah dan Anda juga bisa memuat
banyak-banyak informasi (dibuat link) pada halaman utama sehingga
Pengunjung merasa nyaman dan akan kembali datang lagi lain waktu,
alahmaaak..kelamaan, jadi kayak jubir, hehehe.... Contoh:Maka hasilnya adalah :
imamSadja
Dengan mengisikan URL Anda maka link ini akan menuju ke target apabila di klik, coba aja!
2. Link image
Selain text, gambar juga bisa dijadikan link untuk mengantarkan sebuah lokasi URL, bisa langsung menampilkan gambar saja dan bisa juga menggunakan text sebagai keterangan Contoh:
Maka hasilnya adalah :
ATAU:
Maka hasilnya adalah :
imamSadja
BOX HTML CODES
Bikin pembatas pada text maupun image Anda dengan box pastinya tampilan akan lebih cantik dan menarik. Cobain yuk! Contoh:
Maka hasilnya adalah :
menarik.mywibes.com
Kita bisa mengganti jenis border seperti outset menjadi inset, solid, dotted, double, dashed, groove, ridge, dll sesuai selera, juga bisa mengganti warna dan ukuran dan juga bisa menambahkan background, seperti contoh di bawah ini: Box yg lain:
Maka hasilnya adalah :
www.menarik.mywibes.com
Dan juga ada Box mixed, ini mencampur-campur bentuk border atau warnanya sesuai keinginan kita Contoh box mixed :
Maka hasilnya adalah :
menarik.mywibes.com
Bila ingin membuat box tanpa border maka Kita tinggal mengisikan border menjadi "0px" Contohnya :
Maka hasilnya adalah :
www.menarik.mywibes.com
Box juga bisa digunakan untuk membingkai gambar dan link dan cara penyusunannyapun sama dengan contoh diatas hanya saja Kita harus mengganti text dengan url image yg hendak di garap. Cobain aja Sop..!!
BACKGROUND HTML CODES
Halaman website jaman sekarang begitu banyak yang tampil cantik dan variatif, kiat ini pastinya bertujuan untuk memikat pengunjung, mulai dari background warna warni, gambar, kelap kelip hingga musik dapat embed pada halaman situs (html) Kita.
Selain memanjakan mata, para pengunjung juga bisa jingkrak jingkrak menikmati alunan musik yang berputar selama mengakses situs kita, mereka juga akan merasa betah dan berlama lama ngejogrog sambil baca baca informasi yang tersedia, sumprit dech Lo..
Berikut beberapa contoh kode html menyisipkan background:
1. Background image (Background gambar)
Kode HTML background image adalah terbatas, lebih baik gunakan kode CSS background!HTML background code is limited, CSS background code is much better!Tapi disini Saya tidak akan menjelaskan atau memberikan contoh kode CSS. Dibawah ini hanya contoh kode HTMLnya saja Contoh:
Untuk melihat hasilnya, silahkan disini!
2. Backgroun Sound / Musik (Background suara)
Langkah
yang pertama pastinya Kita harus punya file musik yang disimpan di akun
internet dan kita ambil URLnya. Misalnya Saya akan memakai file musik
"ST12-Pangeran_Cinta.mp3" dari album musik pada akun
menarik.mywibes.com saya.Agar menghindari loading yang lama maka disarankan sebaiknya Kita gunakan file musik yang berjenis MIDI atau WAV karena pada umumnya jenis file musik ini berukuran rendah.
Langkah berikutnya Kita 'Copy' URL file musik yang akan Aku pakai tadi terus Kita 'Paste' diantara <head> dan <title> kemudian Kita save projectnya. Contoh Strukturnya:
Dan background musik siap dinikmati saat mengakes halaman situs Kita.
Tidak ada komentar:
Posting Komentar