Arsip Kategori: Belajar HTML

Meletakkan Gambar pada HTML

Peluang Bisnis Online
Dengan adanya gambar, sebuah website akan lebih menarik dan sedap untuk dipandang. Beberapa format gambar yang biasa di pakai adalah GIF, JPG dan PNG. Untuk menambahkan gambar pada HTML, tag yang di gunakan adalah <img>. Dan kita membutuhkan atribut untuk melengkapi tag yaitu src (source) yang berarti sumber atau lokasi gambarnya, Baca lebih lanjut

Iklan

Membuat List pada HTML

Untuk membuat daftar(list) dalam html, tag yang kita gunakan adalah <li> ditutup dengan </li>. List dalam html bisa berupa number(angka)/ oredered list yang di html didefinisikan dengan tag <ol> dan ada juga yang berupa bullet(unordered list) yang dalam html di definisikan dengan tag <ul>.
Langsung saja kita lihat bagaimana cara penulisannya,

Minuman yang tersedia :
<ol>
<li>Es Tawar</li>
<li>Es Teh Manis</li>
<li>Es Jeruk</li>
</ol>


Maka hasilnya,list dengan angka,

Minuman yang tersedia :

  1. Es Tawar
  2. Es Teh Manis
  3. Es Jeruk

Atribut ‘type’ bisa kita tambahkan, jika ingin listnya berupa huruf atau angka romawi. Type yang dimaksud adalah “a”,”A”,”i”,”I”.
Mari kita coba untuk menyisipkan atribut type,

Minuman yang tersedia :
<ol type="a">
<li>Es Tawar</li>
<li>Es Teh Manis</li>
<li>Es Jeruk</li>
</ol>


Maka hasilnya :
ol "a"

Mari berlanjut ke unordered list,

Makanan yang tersedia :
<ul>
<li>Nasi Uduk</li>
<li>Ayam Goreng</li>
<li>Soto Ayam</li>
</ul>


Maka hasilnya,

Makanan yang tersedia :

  • Nasi Uduk
  • Ayam Goreng
  • Soto Ayam

Atribut type yang dapat kita gunakan adalah “disc”,”square”,”circle”.
Sekarang kita coba untuk menambahkan atribut type,

Makanan yang tersedia :
<ul type="circle">
<li>Nasi Uduk</li>
<li>Ayam Goreng</li>
<li>Soto Ayam</li>
</ul>


Maka hasilnya adalah,
ul"circle"

Karakter Khusus HTML

Belajar HTML sebelumnya>>>Membuat Tabel Pada HTML

kursus-online.com
Ada beberapa karakter yang berfungsi sebagai tag dalam html. Misalnya saja tanda lebih kecil (<) tanda lebih besar (>) tanda kutip dua("). Dalam kode html karakter-karakter itu biasanya berfungsi sebagai tag(tidak akan tampil di browser). Namun disaat tertentu kita ingin menampilkan tanda-tanda itu sebagai karakter(tampil dibrowser).

Sebagai ilustrasi, misalnya teman-teman ingin membuat suatu tulisan yang membahas tentang “Cara Menebalkan Tulisan di HTML”. Contohnya:
Di browser kita ingin tampilkan seperti ini

Saat ini kita akan membahas bagaimana cara menebalkan tulisan di html. Tag yang kita gunakan adalah <b> dan ditutup dengan tag </b>.

Nah, perhatikan <b> dan </b> . Kalau kita menuliskan dalam kode html sama persis seperti itu, maka nanti yang terlihat adalah teks “dan ditutup dengan tag” akan menjadi tebal dan tagnya akan tidak terlihat.
Nah terlihatnya seperti ini,

Saat ini kita akan membahas bagaimana cara menebalkan tulisan di html. Tag yang kita gunakan adalah dan ditutup dengan tag.

Disinilah kita memerlukan karakter khusus untuk menampilkan tanda-tanda itu.

Berikut karakter khusus yang dimaksud,

Karakter(Hasil) Kode(Entitas) Keterangan
" &quot; tanda petik dua
< &lt; tanda kurang dari
> &gt; tanda lebih dari
spasi &nbsp; tanda spasi
& &amp; tanda dan
© &copy; tanda copyright


Sehingga dari contoh diatas, kode html yang seharusnya kita tuliskan adalah,

Saat ini kita akan membahas bagaimana cara menebalkan tulisan di html. Tag yang kita gunakan adalah &lt;b&gt; dan ditutup dengan tag &lt;/b&gt;.

Begitulah yang bisa saya sampaikan, semoga bermanfaat….


Ingin belajar HTML, PHP dan MySQL sambil praktek sekaligus berpeluang menambah penghasilan,klik saja DISINI

Membuat Tabel pada HTML

Belajar HTML sebelumnya>>>Membuat Link dalam Satu Halaman

kursus-online.com
Pada kesempatan ini kita akan belajar untuk membuat tabel dengan html.
Tag yang kita gunakan untuk mendefinisikan sebuah tabel adalah
<tabel>   </table> = mendefinisikan sebuah tabel
<tr>   </tr>= mendefinisikan baris
<td>   </td>= mendefinisikan kolom dalam baris, tag ini diletakkan antara <tr> dan </tr>
<th>   </th> = mendefinisikan header tabel, nantinya teks yang ada dalam tag ini akan ditampilkan tebal
<caption>   </caption> = mendefinisikan judul tabel.
Atribut-atribut yang bisa kita gunakan dalam pembuatan tabel ini adalah
border = untuk membuat garis(border), kita bisa mengatur ketebalan garis sesuai kebutuhan, nilai yang kita cantumkan berupa angka
cellpadding = mengatur jarak di dalam cell(kolom), nilai yang kita cantumkan berupa angka
cellspacing = mengatur jarak antar cell(kolom), nilai yang kita cantumkan berupa angka
colspan = menggabungkan beberapa kolom menjadi satu, nilai yang kita cantumkan berupa angka
rowspan = menggabungkan beberapa baris menjadi satu, nilai yang kita cantumkan berupa angka
bgcolor = untuk memberi warna pada background, disini bisa kita gunakan nama warna ataupun kode warna.
width = mengatur lebar, nilai yang kita cantumkan berupa angka
height = mengatur tinggi, nilai yang kita cantumkan berupa angka.
align = mengatur perataan (left,center dan left)
valign = mengatur perataan atas bawah (bottom, middle, top)

Ayuuk!!! Sekarang kita coba untuk praktek

< table border= "1" >
< tr >
< td > Kolom1 </td >
</tr >
</table >

Berikutnya tabel dengan satu baris dua kolom

< table border= "1" >
< tr >
< td > Kolom1 </td >
< td > Kolom2 </td >
</tr >
</table >

Sekarang kita coba membuat tabel dengan header, judul tabel ditambah background dan juga menggabungkan beberapa baris.

< table border= "1" >
<caption><b>Daftar Harga Pulsa</b></caption>
< tr >
< th bgcolor="#99ffff"> Operator < /th >
< th bgcolor="#99ffff"> Nominal < /th >
< th bgcolor="#99ffff"> Harga < /th >
< /tr >

< tr >
< td rowspan="4" bgcolor="#8899ff"> </td >
< td bgcolor="#ff9988"> 5.000 </td >
< td bgcolor="#ff9988"> 7.000 </td >
</tr >

< tr >
< td bgcolor="#ff9988"> 10.000 </td >
< td bgcolor="#ff9988"> 12.000 </td >
</tr >

< tr >
< td bgcolor="#ff9988"> 20.000 </td >
< td bgcolor="#ff9988"> 22.000 </td >
</tr >

< tr >
< td bgcolor="#ff9988"> 50.000 </td >
< td bgcolor="#ff9988"> 52.000 </td >
</tr >
</table >

Mari kita lihat hasilnya,
Tabel HTML
Pada kolom operator, dibaris pertama kita sudah meletakkan rowspan="4" sesuai jumlah baris yang kita gabungkan,maka pada baris selanjutnya kita langsung menuju kolom Nominal dan Harga.

Pada baris yang kita gabungkan itu kan masih kosong, nah kita bisa membuang backgroundnya dan memasukkan gambar didalamnya, misalnya gambar logo operatornya dengan menaruh kode <img src="url(alamat gambarnya)">

Nah mudahkan?? Itu dulu ya…yang dapat saya sampaikan. Semoga bermanfaat. Silahkan dikembangkan sendiri untuk memperoleh hasil sesuai yang dibutuhkan

Baca juga ya..!!!

Belajar HTML selanjutnya>>>Karakter Khusus HTML


Ingin belajar HTML, PHP dan MySQL sambil praktek sekaligus berpeluang menambah penghasilan,klik saja DISINI

Membuat Link dalam Satu Halaman

Belajar HTML sebelumnya>>>Link HTML

kursus-online.com
Pada pembahasan sebelumnya yaitu mengenai Link HTML kita telah membuat link yang merujuk pada alamat yang berada diluar halaman (Hyperlink). Saat ini kita akan bahas cara membuat link untuk alamat yang dituju masih dalam satu halaman yang sama. Biasa di sebut link anchor. Ini cocok digunakan untuk teman-teman yang membuat satu halaman yang panjang atau tulisan dalam satu halaman yang terdiri dari bab-bab.

Tag html yang digunakan tetap sama yaitu <a>. Sedangkan atribut yang kita gunakan adalah name dan href.

Sebagai contoh yang mungkin sering teman teman temui adalah disaat kita membaca suatu halaman sampai habis(sampai bawah), terkadang kita menemui tulisan “Kembali ke atas” atau Top di sertai tanda panah ke atas, setelah di klik maka kita akan kembali ke bagian atas halaman yang kita baca. Itulah yang kita bahas kali ini.

Langkah pertama kita membuat anchor name, contoh kodenya adalah sebagai berikut :
<a name="atas">ini awal halaman</a>

Letakkan kode anchor name itu pada bagian yang akan kita tuju, jika nantinya link di klik. Pada contoh tersebut kita akan letakkan kodenya di awal halaman. Untuk atribut name kita bebas mau memberikan nama apa aja, yang penting disesuaikan dengan bagian yang akan kita tuju. Dan untuk teks “ini awal halaman” boleh dihilangkan sehingga kode di atas bisa kita tulis <a name=”atas”></a>

Langkah selanjutnya kita membuat link nya. Seperti membuat link sebelumnya kita memakai atribut href, sehingga kodenya jadi seperti ini :

<a href="#atas">Kembali keatas</a>

Dari kode diatas pada atribut href harus sama dengan yang kita tulis pada atribut name, tapi pada href diawali dengan tanda #. Selanjutnya teks Kembali keatas itu yang akan ditampilkan dan nantinya jika kita klik maka kita kan dibawa kebagian atas halaman yang kita baca. Letakkan kode linknya di mana kamu suka, sesuai kebutuhan. Asal jangan deket ama anchor name aja ;). Kan ngga lucu masa’ yg di tuju bagian atas terus link nya juga di taruh di atas he he he.

Bagi teman-teman yang biasa menulis tulisan yang terdiri dari banyak bab dengan pembahasan yang panjang dan di tulis dalam satu halaman web saja, ini juga bisa kita manfaatkan. Kita tulis judul babnya terlebih dahulu. Judul-judul bab itu yang nanti kita jadikan sebagai link. Dan nanti pada setiap awal kita membahas suatu bab kita letakkan disitu anchor namenya. Dengan demikian akan memudahkan bagi pembaca dalam pencarian suatu bab jika pembaca itu hanya ingin membaca bab tertentu saja. Sebagai contoh, coba lihat halaman berikut ini Struktur Dasar Akuntansi

Demikian pembahasan kita kali ini, semoga bermanfaat 🙂


Ingin belajar HTML, PHP dan MySQL sambil praktek sekaligus berpeluang menambah penghasilan,klik saja DISINI

Link HTML

Belajar HTML sebelumnya >>>Tag dan Atribut HTML

kursus-online.com

Sebuah Link HTML adalah alamat yang merujuk kepada ke dokumen atau alamat lain di internet. Secara mudahnya link itu adalah teks atau gambar yang terhubung dengan dokumen(halaman) dalam web, baik halaman itu masih dalam satu web atau halaman web pihak lain. Maka setelah kita meng klik teks atau gambar itu , lalu kita akan di bawa ke suatu halaman yang telah terhubung tadi.

Tag yang kita gunakan untuk membuat link adalah <a> yang di padukan dengan atribut href dangan kode dasar adalah :

<a href="url"> Teks Link </a>

Dalam kode di atas tag pembuka di ikuti atribut href="url". Nah url itulah alamat yang kita tuju, contohnya http ://tetapbersyukur.wordpress.com/ . Jangan lupa alamat urlnya diapit tanda petik. Selanjutnya Teks Link adalah teks atau bisa juga berupa gambar yang akan tampil sebagai objek link, atau lebih mudahnya teks atau gambar yang nantinya akan kita klik.

Contoh kodenya seperti ini

<a href="http ://kotasantri.com/"> MUSLIM COMMUNITY </a>

Hasilnya seperti ini

MUSLIM COMMUNITY

Setelah kita meng klik teks di atas maka kita akan di bawa ke alamat url http://kotasantri.com/

Mudah kan???

Dari kode diatas, alamat yang kita tuju akan terbuka di tab yang sama. Jadi secara otomatis kita meninggalkan halaman yang kita baca sebelumnya. Jika kamu ingin alamat yang kita tuju bisa terbuka di tab yang baru, artinya jika masih ingin tetap membaca halaman sebelumnya dan sekaligus alamat yang kita tuju juga akan terbuka, maka kita menggunakan atribut tambahan yaitu target. Sehingga kodenya jadi begini,

<a href="http ://kotasantri.com/" target="_blank"> MUSLIM COMMUNITY </a>

Hasilnya tetap seperti tadi

MUSLIM COMMUNITY

Bedanya setelah kita klik, kita akan dibawa ke tab yang baru. Coba saja kalau ngga percaya 😀

Demikian yang dapat saya sampaikan pada kesempatan kali ini, semoga bermanfaat 🙂


Jika ingin belajar HTML,PHP dan MySQL sekaligus praktek dan berpeluang untuk menambah penghasilan, silahkan klik DISINI


Tag dan Atribut HTML

Belajar HTML sebelumnya>>> Tag HTML

kursus-online.com

Sebelumnya kita telah belajar tag HTML. Berikut kita ulangi beberapa tag dan juga fungsinya.
<html> : memberitahukan pada browser bahwa ini adalah awal dari dokumen html tag penutupnya </html>
<head> : informasi header, tidak akan ditampilkan dibrowser. Dalam header memuat informasi dari dokumen yang kita buat. Tag penutupnya </header>
<title> : tag yang terletak dalam <header> adalah judul dari dokumen yang kita buat dan akan terlihat di bagian atas tab. Tag penutupnya </title>
<body> : bagian yang akan di tampilkan di browser tag penutupnya </body>
<hr> : untuk membuat garis horizontal, tidak ada tag penutupnya
<p> : untuk membuat sebuah paragraf, bisa ditulis tanpa tag penutup, jika menggunakan tag penutup, tag penutupnya yaitu </p>,
<br> atau <br/>: untuk ganti baris
<h1> sampai <h6> : untuk mendefinisikan judul,<h1> untuk judul yang paling besar dan <h6> untuk judul yang paling kecil. Tag penutupnya </h1> sampai </h6>
Sebagai contoh, jika kita menuliskan kode seperti ini,
<h1> Ini Sebuah Judul </h1>
<h2> Ini Sebuah Judul </h2>
Secara otomatis tulisannya akan menjadi besar h1 paling besar seterusnya h2 lebih kecil dan sampai h6 yang paling kecil yang paling kecil, perhatikan dibawah ini adalah hasil dari kode di atas,

Ini Sebuah Judul

Ini Sebuah Judul

Sekarang kita lanjutkan pada atribut tag HTML
Tag HTML dapat memiliki atribut. Atribut memungkinkan informasi tambahan pada elemen HTML
Atribut selalu memiliki pasangan nama atribut dengan nilai sehingga jadinya seperti ini: nama atribut=”nilai”.
Atribut selalu dicantumkan pada awal tag elemen HTML.
Contoh :
<h1> : mendefinisikan judul
<h1 align=”center”> : disini ada informasi tambahan, yaitu perataan(align) ditengah(center)
Sekarang kita tambah kode yang telah kita buat dengan align
<h1 align="center"> Ini Sebuah Judul </h1>
<h2 align="center"> Ini Sebuah Judul </h2>
Maka lihatlah hasilnya, tulisannya akan ke tengah,

Ini Sebuah Judul

Ini Sebuah Judul

<body> : mendefinisikan isi/halaman HTML
<body bgcolor=”green”> : disini terdapat informasi tambahan bahwa background halaman berwarna hijau.
<table> : untuk membuat tabel(nanti kita bahas lebih lanjut tentang tabel)
<table border=”1”> : disini terdapat informasi ktebalan garis pada tabel adalah 1

Nilai atribut selalu di apit dengan tanda kutip. Tanda kutip ganda sering digunakan, tanda kutip tunggal juga bisa digunakan.

Demikian pembahasan kita kali ini, jika berkenan, silahken di intip untuk pembahasan selanjutnya yaitu >>> Link HTML


Ingin belajar HTML, PHP dan MySQL sekaligus praktek dan berpeluang mendapatkan penghasilan?? Silahkan klik DISINI


%d blogger menyukai ini: