HTML digunakan untuk membuat sebuah halaman web yg menghasilkan tampilan terintegerasi seperti seperti texs, grafik, animasi, hyperlink maupun audio-video. Read More
Manfaatkan Tutorial cara buat web gratis,tutorial blog, blogspot, blogger, Css, Html, javascript,tips, trik, widget dan fitur-fitur menarik untuk kebutuhan blogging anda. Read More
Anda bisa belajar cara buat blog blogspot dari blogger, hanya dengan tiga langkah mudah cepat dan gratis. Silahkan anda ikuti langkah - langkahnya. Read More
Dalam HTML, gambar didefinisikan dengan tag <img>. Dan Tag <img> berdiri sendiri, yang berarti bahwa tag ini hanya berisi atribut, dan tidak memiliki tag penutup.
Untuk menampilkan sebuah gambar pada halaman, Anda perlu menggunakan atribut src. Src singkatan dari "source atau sumber". Nilai dari atribut src adalah URL dari gambar yang ingin ditampilkan.
Contoh sintaks untuk mendefinisikan gambar adalah sebagai berikut :
URL menunjuk ke lokasi di mana gambar disimpan, sedang atribut alt diperlukan menentukan sebuah teks alternatif untuk gambar, jika gambar tidak dapat ditampilkan. Atribut alt sangat berfungsi menyediakan informasi alternatif bagi gambar jika pengguna untuk beberapa alasan tidak bisa melihatnya (karena koneksi yang lambat, kesalahan dalam atribut src, atau yang lain).
Kemudian Browser menampilkan gambar di mana tag <img> terjadi dalam dokumen. Jika Anda menempatkan tag gambar antara dua paragraf, maka browser akan menampilkan gambar sebagi berikut :
Mengatur Tinggi dan Lebar dari suatu Gambar
Atribut "height" dan atribut "width" digunakan untuk menentukan tinggi dan lebar dari suatu gambar. Dan secara default, nilai atribut yang ditetapkan adalah satuan piksel.
Jika atribut ini ditetapkan, ruang yang diperlukan untuk gambar dicadangkan saat halaman dimuat. Tapi, tanpa atribut-atribut ini, browser tidak mengetahui ukuran gambar. Sehingga mengakibatkan tata letak halaman akan berubah selama pemuatan (karena beban gambar).
Berikut ini adalah praktek yang baik untuk menentukan atribut tinggi dan lebar untuk gambar :
Menyelaraskan gambar
Berikut contoh HTML untuk menyesuaikan gambar dalam teks :
Berikut hasilnya :
Selamat mencoba dan Semoga bermanfaat....
Jangan lupa luangkan waktu untuk beri komentar ya......terima kasih.
Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan
anda gunakan tombol berlangganan artikel yang ada disebelah
kanan halaman ini, atau melalui tombol dibawah ini.
Untuk membuat teks lebih fungsional dan lebih berfariasi, format teks termasuk yang sangat sering digunakan dalam penulisan artikel. Dengan menggunakan format teks kita dapat merubah bentuk atau ukuran teks.
Beberapa format teks yang sering digunakan yaitu :
Bold (Ketebalan), ditandai dengan tag awal <b> dan tag akhir </b> Strong (Besar), ditandai dengan tag awal <strong> dan tag akhir </strong> Italic (Kemiringan), ditandai dengan tag awal <i> dan tag akhir </i> Small (sedang), ditandai dengan tag awal <small> dan tag akhir </small> Under line (Garis bawah), ditandai dengan tag awal <u> dan tag akhir </u> Strikethrough (Garis ditengah teks), ditandai dengan tag awal <strike> dan tag akhir</strike>
Perhatikan contoh :
Berikut hasilnya :
code : HNGJJ4NWVWRW
Mudah kan...........?
OK....Selamat membaca artikel yang lain dan semoga bermanfaat....
Jangan lupa luangkan waktu untuk beri komentar ya......terima kasih.
Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan
anda gunakan tombol berlangganan artikel yang ada disebelah
kanan halaman ini, atau melalui tombol dibawah ini.
Dalam format html, baris bisa ditandai dengan tag <p> atau ditandai dengan tag <br/> , biasanya saya menggunakan tag <p> atau tag <br/> untuk memberi jarak antara teks dengan teks dibawahnya, seperti pada saat membuat daftar. Tag ini juga sering saya gunakan untuk memisahkan tabel, gambar, dll.
Berikut contoh penggunaan spasi pada teks :
Berikut hasilnya :
Berikut yang tidak menggunakan tag <br/> :
Mudah kan...........?
OK....Selamat membaca artikel yang lain dan semoga bermanfaat....
Jangan lupa luangkan waktu untuk beri komentar ya......terima kasih.
Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan
anda gunakan tombol berlangganan artikel yang ada disebelah
kanan halaman ini, atau melalui tombol dibawah ini.
Menyisipkan sebuah garis memang kadang sangat diperlukan. Garis bisa disisipkan ditengah - tengah paragraf, biasanya digunakan sebagai penekanan suatu teks dalam sebuah paragraf . Tapi yang jelas garis bisa ditempatkan dimana saja, sesuai fungsi dan kebutuhannya. Garis dalam penulisan html ditandai dengan tag <hr/>, dan tag <hr/> penulisannya tidak menggunakan tag pembuka.
Berikut contoh cara penulisan saat menyisipkan garis diantara paragraf :
Berikut hasilnya :
Mudah kan...........?
OK....Selamat membaca artikel yang lain dan semoga bermanfaat.... Jangan lupa luangkan waktu untuk beri komentar ya......terima kasih.
Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan
anda gunakan tombol berlangganan artikel yang ada disebelah
kanan halaman ini, atau melalui tombol dibawah ini.
Sebuah hyperlink (atau link) adalah kata, kalimat, atau gambar yang dapat Anda klik untuk melompat atau menuju ke dokumen baru atau bagian baru dari sebuah halaman yang sedang dibaca. Untuk mengetahui bahwa suatu kata, kalimat, atau gambar mengandung sebuah link, biasanya bila Anda memindahkan kursor di atas link disuatu halaman Web, panah kursor akan berubah menjadi gambar tangan kecil.
Penulisan html link ditandai dengan tag awal <a> dan tag akhir atau tag penutup </a>. Dan tag <a> dapat digunakan dalam dua cara:
1. Untuk membuat link ke dokumen lain, dengan menggunakan atribut href
2. Untuk membuat bookmark dalam dokumen, dengan menggunakan atribut nama
Kode HTML untuk link yang sederhana bisa ditulis seperti ini:
artinya bil kita klik hyperlink "Klik disini", maka link akan mengarahkan kealamat http://htmlnoer.blogspot.com
HTML Link - Atribut Target
Atribut target menentukan tempat untuk membuka dokumen terkait. Artinya link akan mengarahkan kealamat yang terkait dengan membuka jendela baru dalam browser.
Berikut penulisan html link dengan atribut target :
Dan masih banyak mengenai macam-macam atribut untuk html link. Anda bisa baca artikel lain yang berhubungan dengan hyperlink yaitu "Penggunaan atribut hyperlink" dan "CSS Link".
Semoga bermanfaat.....
Jangan lupa luangkan waktu untuk beri komentar ya......terima kasih.
Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan
anda gunakan tombol berlangganan artikel yang ada disebelah
kanan halaman ini, atau melalui tombol dibawah ini.
Headings atau Judul Post merupakan elemen structural dari HTML Yaitu sebuah tanda yang menentukan level atau tingkatan dari sebuah
tulisan seperti tag <h1><h2><h2> dan seterusnya, tag
ini menampilkan tulisan lebih tebal dan besar yang digunakan sebagai
penulisan judul.
Headings atau Judul Post ditandai dengan tag <h1> hungga <h6> dan seterusnya.
<h1> Untuk penulisan judul terbesat, dan hingga <h6> untuk menuliskan judul yang lebih kecil.
Berikut cara penulisan :
<h1>Teks Judul atau Headings 1</h1>
<h2>Teks Judul atau Headings 2</h2>
<h3>Teks Judul atau Headings 3</h3>
<h4>Teks Judul atau Headings 4</h4>
<h5>Teks Judul atau Headings 5</h5>
<h6>Teks Judul atau Headings 6</h6>
Dan berikut hasilnya :
Teks Judul atau Headings 1
Teks Judul atau Headings 2
Teks Judul atau Headings 3
Teks Judul atau Headings 4
Teks Judul atau Headings 5
Teks Judul atau Headings 6
Catatan :
Browser secara otomatis menambahkan Spasi kosong sebelum dan sesudah heading atau judul.
Pentingnya Judul atau Headings
Mesin pencari menggunakan judul Anda untuk mengindeks seluruh isi dari halaman web Anda.
Karena pembaca dapat mengerti isi halaman Anda dengan judul tersebut, jadi sangat penting untuk menggunakan pos untuk menunjukkan struktur dokumen.
H1 harus digunakan sebagai judul utama, diikuti dengan sub judul H2, kemudian H3 , dan seterusnya.
Gunakan HTML judul untuk judul saja. Jangan gunakan judul untuk membuat teks besar atau tebal.
HTML Lines atau Garis
Tag <hr/> menciptakan sebuah garis horizontal pada sebuah halaman HTML.
Unsur "hr" dapat digunakan untuk memisahkan sebuah konten atau paragraf teks:
<p> Ini adalah sebuah paragraf </ p>
<hr />
<p> Ini adalah sebuah paragraf </ p>
<hr />
<p> Ini adalah sebuah paragraf </ p>
Hasilnya sebagai berikut :
Ini adalah sebuah paragraf
Ini adalah sebuah paragraf
Ini adalah sebuah paragraf
HTML Komentar
Komentar atau Html yang digunakan untuk menjekaskan bagian-bagian pada elemen Html, dan Html komenter dapat disisipkan ke dalam kode HTML untuk membuatnya lebih mudah dibaca dan dimengerti. Html Komentar diabaikan atau tidak terbaca oleh browser dan tidak ditampilkan pada halaman browser.
Contoh penulisannya sebagai berikut :
<!-- columns -->
<p>Ini adalah sebuah paragraf / konten "columns"</p>
<!-- main -->
<p>Ini adalah sebuah paragraf / konten "main"</p>
<!-- content -->
<p>Ini adalah sebuah paragraf / konten "content"</p>
Catatan :
Ada tanda seru setelah kurung buka, tetapi tidak sebelum kurung penutup.
Berikut hasilnya dan Html komentar tidak terbaca :
Ini adalah sebuah paragraf / konten "columns"
Ini adalah sebuah paragraf / konten "main"
Ini adalah sebuah paragraf / konten "content"
Pernahkah Anda melihat sebuah halaman Web dan bertanya-tanya "seperti apa cara penulisan dalam kode Html ... ?!". Silahkan anda bisa coba lihat sekumpulan HTML pada halaman sebuah web.
Caranya, klik kanan pada halaman web dan pilih "View Source" (IE) atau "View Page Source" (Firefox), atau serupa untuk browser lainnya. Ini akan membuka jendela yang berisi kode HTML dari halaman web tersebut.
OK....Selamat membaca artikel yang lain dan semoga bermanfaat.... Jangan lupa luangkan waktu untuk beri komentar ya......terima kasih. Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda gunakan tombol berlangganan artikel yang ada disebelah kanan halaman ini, atau melalui tombol dibawah ini.
Perintah didalam dokumen HTML terdiri dari berbagai struktur penyusun
seperti Tag, elemen, atribut dan nilai. Tag terdiri dari lambang-lambang
khusus seperti: "<", ">" dan "/", untuk menuliskannya di dalam
dokumen HTML dimulai dengan tag pembuka "<...>"dan diakhiri dengan
tag penutup "</...>". Kemudian di dalam tag tersebut terdapat
Elemen HTML seperti html, head, title,body dll. Versi terakhir dari HTML
adalah HTML 4.01, meskipun saat ini telah berkembang XHTML yang
merupakan pengembangan dari HTML.
Jadi penambahan Atribut memberikan informasi tambahan tentang elemen HTML.
Kesimpulannya :
* HTML elemen dapat memiliki atribut
* Atribut memberikan informasi tambahan tentang suatu elemen Html
* Atribut selalu ditulis pada tag awal
* Atribut ditulis dalam pasangan nama / nilai seperti: name="value"
Misalnya HTML link didefinisikan dengan tag <a>. Alamat link ditetapkan dalam atribut href : .
Atribut Nilai (value) harus selalu diapit tanda kutip. dan tanda kutip yang umum digunakan yaitu tanda kutip ganda ("......"). Tapi bisa juga menggunakan tanda kutip tunggal ('......'). Catatan :
Dalam beberapa situasi tertentu, ketika nilai atribut itu sendiri berisi tanda kutip, perlu untuk menggunakan tanda kutip tunggal seperti ( '...... "......" ......').
Penulisan atribut dianjurkan dengan huruf kecil, Versi yang lebih baru (X) HTML akan menuntut atribut huruf kecil.
Berikut ini adalah daftar dari beberapa atribut yang standar untuk elemen HTML :
Atribut
Value
Description
class
classname
Menentukan classname untuk elemen
id
id
Menentukan sebuah id unik untuk elemen
style
style_definition
Menentukan gaya inline untuk elemen
title
tooltip_text
Menentukan tambahan informasi tentang elemen
OK....Selamat membaca artikel yang lain dan semoga bermanfaat....
Jangan lupa luangkan waktu untuk beri komentar ya......terima kasih.
Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan
anda gunakan tombol berlangganan artikel yang ada disebelah
kanan halaman ini, atau melalui tombol dibawah ini.
List termasuk atribut yang sering digunakan dalam membuat sebuah daftar ataupun sub daftar. Biasanya bentuk list yang sering digunakan adalah seperti Angka, huruf, romawi, titik atau bentuk-bentuk bidang seperti lingkaran, kotak, dll.
Berikut beberapa contoh bentuk list yang sering digunakan :
<h4>List bentuk Angka :</h4>
<ol>
<li>Satu</li>
<li>Dua</li>
<li>Tiga</li>
<li>Empat</li>
</ol>
List bentuk Angka :
Satu
Dua
Tiga
Empat
<h4>List bentuk Huruf besar:</h4>
<ol type="A">
<li>Huruf besar A</li>
<li>Huruf besar B</li>
<li>Huruf besar C</li>
<li>Huruf besar D</li>
</ol>
List bentuk Huruf besar :
Huruf besar A
Huruf besar B
Huruf besar C
Huruf besar D
<h4>List bentuk Huruf kecil:</h4>
<ol type="a">
<li>Huruf kecil a</li>
<li>Huruf kecil b</li>
<li>Huruf kecil c</li>
<li>Huruf kecil d</li>
</ol>
List bentuk Huruf kecil :
Huruf kecil a
Huruf kecil b
Huruf kecil c
Huruf kecil d
<h4>List bentuk Romawi besar:</h4>
<ol type="I">
<li>Romawi besar I</li>
<li>Romawi besar II</li>
<li>Romawi besar III</li>
<li>Romawi besar IV</li>
</ol>
List bentuk Romawi besar :
Romawi besar I
Romawi besar II
Romawi besar III
Romawi besar IV
<h4>List bentuk Romawi kecil:</h4>
<ol type="i">
<li>Romawi kecil i</li>
<li>Romawi kecil ii</li>
<li>Romawi kecil iii</li>
<li>Romawi kecil iv</li>
</ol>
OK....Selamat membaca artikel yang lain dan semoga bermanfaat....
Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda masukkan email pada forum Langganan Via Email yang ada disebelah kanan halaman ini.
Jangan lupa luangkan waktu untuk beri komentar ya......terima kasih.
Dalam format html,Tabel didefinisikan dengan tag awal <table> dan tag akhir </table>. Secara dasar pada sebuah tabel terdapat beberapa elemen yaitu baris yang ditandai dengan tag <tr>, dan setiap baris atau tag <tr> terdiri atas sel-sel data yang ditandai dengan tag <td> singkatan dari "data tabel" . Didalam tag <td> inilah tempat meletakkan sebuah data atau dokumen seperti teks, link, gambar, video, animasi, daftar, bentuk suatu bidang, dll, termasuk bisa diisi sebuah tabel itu sendiri, dengan kata lain tabel didalam tabel.
Secara keseluruhan, dalam pembuatan sebuah tabel, terdapat banyak unsur atau elemen tag, yang perlu diperhatikan sesuai dengan bentuk dan fungsinya masing-masing. Langsung saja silahkan perhatikan beberapa bentuk tabel dan perbedaan penulisannya dalam format html :
1. Tabel 1 kolom, dan 1 baris
Berikut hasilnya :
Tabel 1 kolom, dan 1 baris
2. Tabel 1 kolom, dan 2 baris
Untuk membuat tabel 2 baris dan seterusnya, kita tinggal menambahkan elemen tag <tr></tr> diantara tag <table> </table> yaitu :
Berikut hasilnya :
Tabel 1 kolom, dan baris pertama
Tabel 1 kolom, dan baris kedua
3. Tabel 2 kolom, dan 1 baris
Untuk membuattabel 2 kolom dan seterusnya kita tinggal menambahkan elemen tag <td></td> diantara <tr></tr> yaitu :
Berikut hasilnya :
Kolom Pertama
Kolom Kedua
4. Tabel 2 kolom dengan 2 baris
Berikut hasilnya :
Baris pertama dan Kolom Pertama
Baris pertama dan Kolom Kedua
Baris Kedua dan Kolom Pertama
Baris Kedua dan Kolom Kedua
5. Tabel dengan garis tebal
Garis tebal ditentukan oleh Nilai border, semakin besar nilainya semakin Tebal garisnya dan terlihat seperti 3D (efek bevel)
Berikut hasilnya :
Teks
6. Tabel dengan garis berwarna
Untuk memberi warna border kita tinggal menambah “bordercolor “
Berikut hasilnya :
Teks
7. Tabel dengan warna background sama
Untuk memberi warna Background dengan warna sama seluruh tabel kita tinggal menambah “bgcolor “.
Berikut hasilnya :
Teks
Teks
8. Tabel dengan warna beda
Untuk memberi warna Background dengan warna berbeda pada setiap kolomnya :
Berikut hasilnya :
Teks
Teks
9. Tabel dengan Judul
Berikut hasilnya :
JUDUL TABEL
Judul Kolom 1
Judul Kolom 2
Judul Kolom 3
Teks
Teks
Teks
Teks
Teks
Teks
10. Tabel header atau Judul
Judul diatas
Berikut hasilnya :
Judul disamping
Berikut hasilnya :
11. Tabel Header dan keterangan
Berikut hasilnya :
12. Tabel dengan sel-sel yang lebih dari satu baris / kolom
Sel yang mencakup dua kolom:Sel yang mencakup dua kolom:
Berikut hasilnya :
Sel yang mencakup dua baris:
Berikut hasilnya :
13. Tag di dalam tabel
Bagaimana menampilkan elemen-elemen di dalam unsur-unsur lain.
Berikut hasilnya :
14. Cell padding
Cellpadding berfungsi agar teks atau gambar tidak terlalu dekat dengan garis pada tabel.
Berikut hasilnya :
15. Cell jarak
Cara menggunakan cellspacing untuk meningkatkan jarak antara sel.
Berikut hasilnya :
OK....Selamat membaca artikel yang lain dan semoga bermanfaat....
Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda masukkan email pada forum Langganan Via Email yang ada disebelah kanan halaman ini.
Jangan lupa luangkan waktu untuk beri komentar ya......terima kasih.
Hyperlinks atau link digunakan untuk mengarahkan pembaca menuju kesebuah dokumen baru, yang berada antar halaman maupun antara halaman web menuju halaman web yang lain. Biasanya link ditempatkan pada sebuah kata, kalimat, ataupun gambar. Ciri - ciri Hyperlinks yaitu bila pembaca mengarahkan kursor diatas sebuah kata, kalimat, ataupun gambar, maka kursor yang berbentuk panah akan berubah berbentuk gambar tangan.
HTML Link ditandai dengan tag awal <a> dan tag akhir </a> , dan tag ini biasanya diikuti oleh atribut href yang digunakan untuk mengarahkan link menuju ke dokumen lain.
1. Menempatkan Link pada teks
Berikut hasilnya :
2. Menempatkan Link pada Gambar
Berikut hasilnya :
3. Membuat Link agar terbuka pada tab atau jendela baru
Berikut hasilnya :
Catatan : Tinggal menambahkan kode target="_blank" setelah ULR.
OK....Selamat membaca artikel yang lain dan semoga bermanfaat....
Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda masukkan email pada forum Langganan Via Email yang ada disebelah kanan halaman ini.
Jangan lupa luangkan waktu untuk beri komentar ya......terima kasih.
Atribut Style digunakan untuk menentukan gaya atau bentuk dan memberi fariasi pada font. Dengan Atribut Style, kita bisa merubah atau menentukan ukuran besar dan kecil pada font, memberi warna pada font, memberi background warna atau warna latar pada font, merubah bentuk atau jenis font, dan menentukan penempatan letak teks baik disebelah kiri, tengah, serta kanan.
Berikut penggunaan Atribut Style beserta contoh hasilnya :
1. Menentukan ukuran pada font
Berikut hasilnya :
2. Memberi warna pada font
Berikut hasilnya :
3. Memberi Warna latar pada font
Berikut hasilnya :
4. Menentukan penempatan letak teks
5. Merubah bentuk atau jenis font Berikut hasilnya :
Dibawah ini daftar nama - nama bentuk font, silahkan anda bida gunakan daftar dibawah ini untuk latihan :
Agency FB Algerian Arial Arial Rounded MT Baskerville Old Face Bauhaus 93 Bell MT Berlin Sans FB ArialBernard MT Blackadder ITC Bodoni MT Bodoni MT Poster Book Antiqua Bookman Old Style Bradley Hand ITC Britannic Broadway Brush Script MT Calibri Century Gothic Century Schoolbook Chiller Colonna MT Comic Sans MS Cooper Copperplate Gothic Courier Curlz MT Edwardian Script ITC Elephant Engravers MT Eras ITC Felix Titling Fixedsys Footlight MT Forte Franklin Gothic Freestyle Script French Script MT Futura Md BT Gabriola Georgia Gigi Gill Sans Gloucester MT Goudy Old Style Goudy Stout Haettenschweiler Harlow Solid Harrington High Tower Text Impact Informal Roman Jokerman Juice ITC Kristen ITC Kunstler Script Latin Lucida Calligraphy Lucida Console Lucida Handwriting Lucida Sans Magneto Maiandra GD Matura MT Script Capitals Microsoft Sans Serif Mistral Modern Modern No. 20 Monotype Corsiva MS Sans Serif MS Serif Niagara Engraved Niagara Solid OCR-A BT Old English Text MT Onyx Palace Script MT Palatino Linotype Papyrus Playbill Poor Richard Pristina Rage Ravie Rockwell Roman Script Script MT Segoe Print Segoe Script Segoe UI Showcard Gothic
oooooooooooooo Small Fonts Snap ITC Stencil System Tahoma Tempus Sans ITC Terminal Times New Roman Trebuchet MS Tw Cen MT Verdana Viner Hand ITC Vivaldi Vladimir Script
OK....Selamat membaca artikel yang lain dan semoga bermanfaat....
Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda masukkan email pada forum Langganan Via Email yang ada disebelah kanan halaman ini.
Jangan lupa luangkan waktu untuk beri komentar ya......terima kasih.
Bagi anda yang berminat tukar link, silahkan copy linknya lalu pasang di Blog anda. Dan bila sudah terpasang, jangan lupa beritahu saya, agar link anda segera saya pasang di Blog tercinta ini. CEO BLOG MAS NOER Noer cholis
Bila anda merasa artikel ataupun tutorial yang ada di Blog ini bermanfaat, anda bisa berikan suport comment melalui form ini.
Form ini sangat bagus sebagai BACKLINK buat blog anda, silahkan tinggalkan link anda....
Selasa, 01 November 2011
| 22.27
Postingan
