Pemrograman Web : Membuat link dan Memasukkan gambar (HTML) - Pascaldhika

Pascaldhika

Blog Informatika dan Android

Hot

Tuesday, March 11, 2014

Pemrograman Web : Membuat link dan Memasukkan gambar (HTML)



Apa itu Pemrograman web? Pemrograman web diambil dari 2 suku kata yaitu pemrograman dan web. Pemrograman sendiri diartikan sebagai proses, cara, perbuatan program. Sedangkan Web berarti jaringan komputer yang terdiri dari kumpulan situs internet yang menawarkan teks, grafik, suara dan sumber daya animasi melalui protokol transfer hypertext.

Teknik pemrograman web dapat dibedakan menjadi 2, yaitu :
1.    1.  Client-side programming

Client-side programming merupakan teknik pemrograman web dimana perintah program dijalankan di web browser, sehingga ketika client meminta dokumen yang mengandung script, maka script tersebut akan didownload dari servernya kemudian dieksekusi pada browser yang bersangkutan. Pemrograman web yang tergolong client-side programming adalah : JavaScript, VbScript,HTML.

2.      2. Server-side programming.

Pada server-side programming, perintah-perintah program (script) terlebih dahulu dieksekusi di web server, kemudian hasilnya dikirimkan ke browser dalam bentuk HTML biasa. Pemrograman web yang tergolong server-side programming: CGI/Perl, ASP, JSP, PHP, ColdFussion, dan sebagainya.

Pada pertemuan 1/chapter 1 kemarin dosen saya memberikan materi Pengenalan Perancangan Web/Pemrograman Web tentang HTML(memiliki struktur dasar atau susunan file). Pada tahap pengenalan ini saya diajarkan untuk membuat list/daftar pada sebuah web melalui HTML. Dan selanjutnya saya diajarkan untuk memasukkan image/gambar, table, dan link ke dalam web kita. Software yang kita gunakan untuk membantu mengedit HTML adalah Macromedia Dreamweaver atau dalam versi sekarang ini sering kita sebut Adobe Dreamweaver

Berikut ini saya berikan contoh format penyusunan HTML sederhana :

<html>
                <head>
                                <title>berisi teks yang akan muncul pada title bar browser</title>
                </head>
                <body>
                                 berisi teks, gambar, atau apapun yang ingin ditampilkan
                                pada halaman web ada pada bagian ini.
                 </body>
</html>


Untuk Tag-tag Dasar HTML sendiri terdiri dari bermacam-macam Tag, antara lain yang saya sebutkan dibawah ini :

Tag Awal
FX
IE
W3
Kegunaan
<HTML>
3.0
3.0
3.2
Definisi sebuah dokumen HTML
<body>
3.0
3.0
3..2
Definisi body dokumen
<h1><h6>
3.0
3.0
3..2
Definisi Heading 1 s.d 6
<p>
3.0
3.0
3..2
Definisi sebuah Paragraf
<br>
3.0
3.0
3..2
Sisipan Line break
<hr>
3.0
3.0
3..2
Definisi Sebuah Horizontal Rule
<!à
3.0
3.0
3..2
Definisi Komentar dalam source code

Kode Warna yang ada pada Macromedia Dreamweaver/Adobe Dreamweaver antara lain :

Warna
Heksa
Warna
Heksa
Aqua = Cyan (biru air)
#00FFFF
Maroon (merah tua)
#800000
Aquamarine (biru kehijauan)
#70DB93
Navy (biru gelap)
#000080
Black (hitam)
#000000
Olive (hijau kekuningan)
#808000
Blue (biru)
#0000FF
Orange
#FF7F00
Brass (kuning tua)
#B5A642
Pink (merah muda)
#FF6EC7
Chocolate (cokelat)
#5C3317
Purple (ungu)
#800080
Copper (keunguan)
#B87333
Red (merah)
#FF0000
Fuchsia (merah keunguan)
#FF00FF
Silver (perak)
#C0C0C0
Gray (abu-abu)
#808080
Teal (biru kehijauan)
#008080
Green (hijau)
#00FF00
Violet
#9F5F9F
Lime (hijau terang)
#00FF00
White (putih)
#FFFFFF
Magenta
#FF00FF
Yellow (kuning)
#FFFF00

Contoh script sederhana yang saya kerjakan waktu kelas praktek di lab :

<html>
<head>
  <title>Latihan-1: Paragraf dan Break</title>
</head>
<body bgcolor=#990066 text=#FFCCFF>
  <h1>Toserba</h1>
  <hr width=50% align=left>
  <h2>Toko kami menyediakan</h2>
  <h3>Alat Tulis</h3>
  <p>Pensil<br>Ballpoint<br>Penggaris<br>Dll.</p>
  <h3>Buku-buku Pelajaran</h3>
  <p>Ilmu pasti<br>Ilmu bumi<br>Sejarah<br>Dll.</p>
  <h3>Peralatan Kantor</h3>
  <p>Meja<br>Kursi<br>File manager<br>Dll.</p>
</body>
</html>

MENAMPILKAN IMAGE

Kita dapat menampilkan gambar melalui halaman HTML, format filenya berupa JPG atau GIF. Untuk menampilkannya digunakan tag <img>.

<img src=nama_file_gambar>

Atribut elemen image

src       = lokasi dan nama gambar
alt        = teks alternatif, teks yang ditampilkan ketika gambar disorot dengan mouse
width  = lebar gambar, pixel
height  = tinggi gambar, pixel
align    = [ top | middle | bottom | left | right ] (perataan gambar)
border = tebal garis tepi gambar, pixel

MEMBUAT LINK

Elemen link berfungsi sebagai penghubung antara suatu halaman dengan halaman lain, atau ke URL lain, bahkan dalam suatu halaman untuk berpindah ke sub judul yang lain.

<a href = URL_tujuan>hypertext</a>


Semoga bermanfaat -_-


2 comments:

  1. sangat bermanfaat tp kalo bisa di kasih contoh nya sekalian min biar mudeng hehehe terimakasih

    ReplyDelete
  2. Casino Table Games Near Me - MapyRO
    › mapy › casino-table 서산 출장안마 › mapy › casino-table Casino Table Games Near Me. If 양주 출장안마 you want to find the closest casino 광주 출장안마 table game, be sure to contact us via Mapyro. We offer a variety of 오산 출장샵 live casino tables, 김포 출장안마

    ReplyDelete