Tampilkan postingan dengan label Pemrograman web. Tampilkan semua postingan
Tampilkan postingan dengan label Pemrograman web. Tampilkan semua postingan

Sabtu, 05 September 2020

Link HTML

Link adalah tujuan kata Hypertext dari kepanjangan HTML. 
Cara Membuat link di HTML
Tujuan kata Hypertext dari HTML adalah membuat sebuah text yang ketika di-klik akan pindah ke halaman lainnya. 
HTML menggunakan tag <a>untuk keperluan ini.
Link ditulis dengan <a> yang merupakan singkatan cari anchor (jangkar). Setiap tag <a> setidaknya memiliki 
sebuah atribut href. Dimana href berisi alamat yang dituju (href adalah singkatan dari hypertext reference).
Agar lebih jelas, kita akan lihat menggunakan contoh. Silahkan buka text editor dan buat kode seperti 
dibawah ini.
Contoh penggunaan tag link <a>:

<!DOCTYPE html>
<html>
<head>
  <title>Tag Link </title>
</head>
<body>
  <h1>Belajar Link</h1>
  <p>Saya sedang belajar HTML dari 
  <a href="https://www.multimediawae.blogspot.com">multimedia</a></p>
</body>
</html>

Alamat Absolute dan Alamat Relatif
Pada contoh diatas kita menuliskan alamat link secara lengkap dengan bagian “http://www.”. 
Penulisan seperti ini disebut juga dengan external link, yang berarti kita membuat link ke alamat lain 
di internet, atau lebih dikenal dengan: alamat absolut.
Alamat absolut adalah penulisan alamat file dengan menyertakan nama website, 
seperti: href=”https://www.multimedaiwae.blogspot.com”, atau href=”http://www.google.com”.
Namun jika kita ingin membuat link di dalam situs yang sama, maka tidak perlu menyebutkan 
alamat lengkap tersebut. Tetapi cukup mencantumkan alamat file yang dituju relatif kepada file saat ini. 
Jenis alamat ini disebut alamat relatif.
Sebagai contoh alamat relatif, apabila kita ingin membuat link kepada file hello.html 
pada folder yang sama dengan file saat ini, maka atribut hrefnya, berisi: href=”hello.html”. 
Berikut adalah kode HTMLnya:
Contoh penggunaan tag link <a> untuk alamat relatif:

<!DOCTYPE html>
<html>
<head>
  <title>Tag Link </title>
</head>
<body>
  <h1>Belajar Tag Link</h1>
  <p>Halaman HTML saya adalah <a href="hello.html">Hello</a></p>
</body>
</html>

Alamat relatif maksudnya adalah relatif kepada file tempat kita memanggil link ini. 
Seandainya nama file kita adalah link.html, dan dalam folder yang sama terdapat halaman list.html, 
kita dapat menggunakan href=”list.html” untuk membuat link ke halaman list.html .
Jika file tersebut berada di dalam folder lagi_belajar, 
maka alamat relatifnya menjadi href=”lagi_belajar/list.html”. 
Namun bagaimana jika halaman tersebut berada 2 tingkat di luar folder saat ini? 
Kita dapat menggunakan href=”../../belajar_list.html”, untuk naik 2 folder diatasnya.


READ MORE - Link HTML

Rabu, 22 Februari 2012

LIST di HTLM



LIST UNORDERED
<html>
<body>
<h4> list unordered</h4>
<ul>
<li>kopi</li>
<li>susu</li>
<li>teh</li>
</ul>
</body>
</html>

LIST ORDERED
<html>
<body>
<h4> list unordered</h4>
<ol>
<li>kopi</li>
<li>susu</li>
<li>teh</li>
</ol>
</body>
</html>

List bersarang
<html>
<body>
<ul>
<li>kopi</li>
<li>teh<ul>
<li>the hitam</li>
<li> the hijau </li>
</ul>
</li>
<li>susu</li>
</ul>


List definisi
<html>
<body>
<dl>
<dt>kopi</dt>
<dd>minuman panas hitam</dd>
<dt>susu</dt>
<dd>minuman dingin putih</dd>
</dl>
</body>
</html>










READ MORE - LIST di HTLM

menyisipkan gambar di HTML



Menyisipkan gambar
<html>
<body>
<img src=’untitled-2.jpg’>
</body>
</html>

Menyisipkan gambar dengan ukuran
<html>
<body>
<img src=’untitled-2.jpg’ width=’144’ height=’150’>
</body>
Menyisipkan gambar dengan perataan
</html>
<html>
<body>
<img src=’untitled-2.jpg’ align =’left’ width=’144’ height=’150’>
</body>
</html>
Gambar latar belakang
<html>
<body background =”background.jpg>
<p> jika gambar lebih kecil dari halaman situs maka gambar akan ditampilkan berulang kali
</body>
</html>


READ MORE - menyisipkan gambar di HTML

mengatur isi tabel




Mengatur isi table


<html>
<body>
<table frame=” border=”>
<tr>
<th align =”left" width ="400"> menu makanan </th>
<th align =”left" width = "100"> harga</th>
<th align =”left" width = "100"> diskon</th>
</tr>
</table>
<table frame=” border=”>
<tr>
<th align =”left" width ="400"> soto</th>
<th align =”left" width = "100"> Rp 10.000,00 </th>
<th align =”left" width = "100"> Rp. 500,00 </th>
</tr>
</table>
</body>
</html>
 
Sempurnakan tabel dibawah ini, sehingga tampilannya menjadi baik.
<html>
<body>
<table width =”400” border =”1”>
<tr>
<th align =”left> dana yang dikeluarkan pada bulan </th>
<th align =”left> januari </th>
<th align =”left> febuari </th>
</tr>
<tr>
<th align =”left> pakaian </th>
<th align =”left> Rp 241.000,00 </th>
<th align =”left> Rp. 50.000,00 </th>
</tr>
<tr>
<th align =”left> make-up</th>
<th align =”left> 30.000,00 </th>
<th align =”left> 44.500,00</th>
</tr>
<tr>
<th align =”left> makanan</th>
<th align =”left> 730.000,00 </th>
<th align =”left> 650.000,00</th>
</tr>
<tr>
<th align =”left> Jumlah</th>
<th align =”left> 1001.500,00 </th>
<th align =”left> 744.650,00</th>
</tr>
</table>
</body>
</html>









Atribut pada frame
<html>
<body>
<table frame=” border=”>
<tr>
<th align =”left> dana yang dikeluarkan pada bulan </th>
<th align =”left> januari </th>
<th align =”left> febuari </th>
</tr>
</table>
<table frame =”box”>
<tr>
<th align =”left> pakaian </th>
<th align =”left> Rp 241.000,00 </th>
<th align =”left> Rp. 50.000,00 </th>
</tr>
</table>

<table frame =”void”>
<tr>
<th align =”left> make-up</th>
<th align =”left> 30.000,00 </th>
<th align =”left> 44.500,00</th>
</tr>
</table>

<table frame =”above”>
<tr>
<th align =”left> makanan</th>
<th align =”left> 730.000,00 </th>
<th align =”left> 650.000,00</th>
</tr>
<tr>
<th align =”left> Jumlah</th>
<th align =”left> 1001.500,00 </th>
<th align =”left> 744.650,00</th>
</tr>
</table>
</body>
</html>


LIST

LIST UNORDERED
<html>
<body>
<h4> list unordered</h4>
<ul>
<li>kopi</li>
<li>susu</li>
<li>teh</li>
</ul>
</body>
</html>

LIST ORDERED
<html>
<body>
<h4> list unordered</h4>
<ol>
<li>kopi</li>
<li>susu</li>
<li>teh</li>
</ol>
</body>
</html>

List bersarang
<html>
<body>
<ul>
<li>kopi</li>
<li>teh<ul>
<li>the hitam</li>
<li> the hijau </li>
</ul>
</li>
<li>susu</li>
</ul>


List definisi
<html>
<body>
<dl>
<dt>kopi</dt>
<dd>minuman panas hitam</dd>
<dt>susu</dt>
<dd>minuman dingin putih</dd>
</dl>
</body>
</html>









READ MORE - mengatur isi tabel

Jumat, 03 Februari 2012

membuat tabel di HTML (1)


cara membuat tabel pada script html
setiap tabel dimulai dengan tag table, dan setiap baris tebel dimulai dengan tag tr, dans etiap data dalam tabel dimulai dengan tag td.

<html>
<body>
<h4> tabel satu kolom </h4>
<table border ="1">
<tr>
<td> 100 </td>
</tr>
</table>

<h4> tabel satu baris tiga kolom </h4>
<table border ="1">
<tr>
<td> 100 </td>
<td> 200 </td>
<td> 300 </td>
</tr>
</table>

<h4>tabel dua baris tiga kolom</h4>
<table border ="1">
<tr>
<td>100 </td>
<td>200 </td>
<td>300</td>
</tr>
<tr>
<td>111 </td>
<td>222 </td>
<td>333</td>
</tr>
</table>
</body>
</html>

Heading dalam tabel
<html>
<body>
<h4> header tabel </h4>
<table border ="1">
<tr>
<th > nama </th>
<th> alamat </th>
<th> telp </th>
</tr>
<tr>
<td> paidjo</td>
<td> jogjakarta </td>
<td> 0274.XXXXX</td>
</tr>
</table>
</body>
</html>

READ MORE - membuat tabel di HTML (1)

Rabu, 01 Februari 2012

Modul 2 PEMFORMATAN TEKS & ENTITAS


MODUL 2
PEMFORMATAN TEKS & ENTITAS
Sama seperti pada modul sebelumnya, silahkan berlatih dengan menggunakan contoh yang ada, kemudian cobalah melakukan modifikasi untuk melihat maksud setiap tag. Jalankan setiap modifikasi yang baru saja anda lakukan.

PEMFORMATAN TEKS
<html>
<body>
<b>teks ini tebal (bold)</b>
<br>
<strong>
Teks ini tebal (strong)
</strong>
<br>
<big>
Teks ini hurufnya tebal
</big>
<br>
<em>
Teks ini miring (emphasized)
</em>
<br>
<i>
Teks ini miring (italic)
</i>
,br>
<small>
Teks ini hurufnya kecil
</small>
<br>
Teks ini berisi
<sub>
Subscript
</sub>
<br>
Teks ini berisi
<sup>
Superscript
</sup>
</body>
</html>

TEKS YANG DI PREFORMAT
<html>
<body>
<pre>
Ini adalah
Teks yang di-preformat.
Preformat akan menampilkan spasi dan
Line break apa adanya.
</pre>
<p>tag pre cocok untuk menampilkan kode computer di bawah ini:</p>
<pre>
For I = 1 to 10
      Print i
Next i
</pre>
</body>
</html>

TAG “KELUARAN KOMPUTER”
<html>
<body>
<code>kode computer </code>
<br>
<kbd>masukan dari keyboard</kbd>
<br>
<tt>teks jenis teletype </tt>
<br>
<samp>teks contoh</samp>
<br>
<var>variable computer  </var>
<br>
<p>
<b>catatan :</b> tag-tag tersebut biasanya di gunakan unttuk menampilkan kode computer/
pemrograman.
<p>
</body>
</html>

ALAMAT
<html>
<body>
<address>
Donald duck<br>
BOX 555<br>
USA
</address>
</body>
</html>

SINGKATAN & KEPENDEKAN
<html>
<body>
<abbr title=”Universitas Ahmad Dahlan”>UAD</abbr>
<br>
<acronym title=”World Wide Web”>WWW</acronym>
<p>Atribut title di gunakan untuk menampilakn versi yang dieja ketika pointer mouse berada
Di atas kependekan atau singkatan.</p>
<p>dalam IE 5, hanya elemen acronym yang mau bekerja.</p>
</body>
</html>
READ MORE - Modul 2 PEMFORMATAN TEKS & ENTITAS

Modul 1 Dasar - dasar HTML


MODUL 1
DASAR-DASAR HTML
Dalam modul ini anda akan berlatih untuk menggunakan berbagai tag dasar untuk pemrograman web menggunakan HTML, Ketikkan setiap kelompok tag dalam sebuah file, simpan dalam folder anda sendiri yang telah di teantukan, kemudian jalankan di web browser yang relah terinstal, Ketikkan setiap sumber apa asanya terlebih dahulu ( termasuk spasi kosong). Perhatikan hasil tampilannya, kemudian belajar untuk memodifikasi setiap kelompok tag untuk mengetahui maksud dari setiap baris tag HTML yang anda ketikkan. Jangan lupa untuk menyimpan setiap modifikasi anda sebelum menjalankan ulang di dalam browser.
HTML DASAR
<html>
<body>
Isi dari elemen body akan ditampilkan dalam browser anda
</body>
</html>

PARAGRAF SEDERHANA
<html>
<body>
<p>Ini adalah paragraph.</p>
<p>Ini adalah paragraph.</p>
<p>Ini adalah paragraph.</p>
<p>Elemen paragraph didefinisikan oleh tag p.</p>
</body>
</html>

PARAGRAF YANG LEBIH KOMPLEKS
<html>
<body>
<p>
Paragraph ini
Mengandung banyak baris
Dalam kode sumbernya,
Tetapi browser
Akan mengabaikannya.
</p>
<p>
Paragraph ini
Mengandung banyak spasi
Dalam kode sumbernya ,
Tetapi browser
akan mengabaikannya.
</p>
<p>
Jumlah baris dalam setiap paragraph tergantung pada ukuran window browser anda. Bila anda mengubah ukuran window browser, jumlah baris dalam paragraph akan berubah.
</p>
</body>
</html>
LINE BREAK
<html>
<body>
<p>
Untuk memotong <br>baris<br>dalam sebuah <br>paragraph,<br>gunakan tag br.
</p>
</body>
</html>

MASALAH PEMFORMATAN   
<html>
<body>
<p>
    Satu-satu, aku sayang ibu
    Dua-dua, aku sayng ayah.
   Tiga-tiga, aku sayang kakak
   Satu, dua, tiga, sayang semuanya.
</p>
<p>perhatikan bahwa browser begiti saja mengabaikan pemformatan anda!>/p>
</body>
</html>

HEADING
<html>
<body>
<h1>ini adalah heading 1</h1>
<h2>ini adalah heading 2</h2>
<h3>ini adalah heading 3</h3>
<h4>ini adalah heading 4</h4>
<h5>ini adalah heading 5</h5>
<h6>ini adalah heading 6</h6>
<p>gunakan tag heading hanya untuk membuat heading saja. Jangan menggunakan tag tersebut hanya untuk membuat tampilan huruf tebal. Gunakan tag lain untuk keperluan itu.
</p>
</body>
</html>

HEADER YANG DI LETAKKAN DI TENGAH
<html>
<body>
<h1 align=”center”>ini adalah heading 1</h1>
<p>heading di atas telah diposisikan untuk berada di tengah halaman ini. Heading di atas telah di posisikan untuk berada di tengah halaman ini. Heading di atasa telah di posisikan untuk berada di tengah halaman ini.</p>
</body>
</html>

GARIS HORISONTAL
<html>
<body>
<p>tag hr mendefinisikan sebuah garis horizontal:</p>
<hr>
<p>ini adalah sebuah paragraph</p>
<hr>
<p>ini adalah sebuah paragraph</p>
<hr>
<p>ini adalah sebuah paragraph</p>
</body>
</html>

KOMENTAR TERSEMBUNYI
<html>
<body>
<!—ini adalah komentar yang tidak akan ditampilkan -- >
<p> Yang ini adalah paragraph biasa</p>
</body>
</html>

WARNA LATAR BELAKANG
<html>
<body bgcolor=”yellow”>
<h2>lihatlah: latar belakang berwarna!</h2>
</body>
</html>
READ MORE - Modul 1 Dasar - dasar HTML