Home » Disain Web
Showing posts with label Disain Web. Show all posts
Showing posts with label Disain Web. Show all posts
Membuat Link atau Tautan Pada HTML

Membuat Link atau Tautan Pada HTML

Add Comment
Membuat Link atau Tautan Pada HTMLLink atau tautan dalam sebuah aplikasi web sangat penting keberadaannya karena akan memudahkan kita dalam menelusuri objek lain seperti web page, gambar, suara, ataupun ke komputer server yang lain. Untuk membuat perintah link atau tautan pada HTML kita dapat menggunakan elemen anchor :<A>...</A> dan tambahan perintah HREF. Bentuk penulisannya dapat dilihat di bawah ini: <A HREF ="Contoh.htm">Menuju ke dokumen contoh.htm</A>. Kalimat "menuju ke dokumen contoh.htm" akan digaris bawahi dan jika pointer melewati teks tersebut akan berubah bentuknya. Jika kalimat tersebut kita klik maka kita akan dibawa ke halaman contoh.htm tersebut.
Untuk lebih memahaminya kita dapat melihat contoh program singkat berikut ini:
Contoh:

<html>
<head>
<title>Homepage Pribadiku</title>
</head>
<body>
<h>Contoh Tautan </h>
<a href ="belajar.htm">Link ke dokumen belajar</a>
</body>
</html>

Kalau dijalankan tampilannya lebih kurang seperti berikut:
Contoh Tautan
Link ke dokumen belajar
Untuk membuat link atau tautan ini tidak mesti menggunakan tulisan tapi juga bisa menggunakan gambar atau image. Berikut adalah contohnya:

<a href ="contoh.htm"> <img src ="gambar.gif"> </a>

Contoh link yang lain :
<a href ="http://www.uniksharianja.com"> link ke weblognya harianja </a>
<a href ="mailto:almakky1433h@gmail.com"> link ke email harianja </a>
Read More
Membuat Tabel Pada HTML

Membuat Tabel Pada HTML

Add Comment
Membuat Tabel Pada HTMLUntuk membuat tampilan yang mengandung unsur-unsur baris dan kolom (tabel), dokumen HTML juga sudah menyiapkan beberapa Tag yang dapat kita gunakan untuk kebutuhan tersebut. Berikut ini adalah beberap Tag yang biasanya digunakan untuk membuat tabel dalam dokumen HTML:
1. <tabel>..........</tabel>    : untuk menset dokumen tabel
2. <TR>...........</TR>   : untuk menset  baris (tabel baris)
3. <TD>...........</TD>   : untuk menset  kolom (tabel kolom)
4. <TH> ..........</TH>  : untuk menset header (tabel header)
5. <caption>......</caption> : untuk menset judul tabel (tabel caption)
Untuk mengunakan tag tag di atas dapat kita lihat contoh program singkat berikut ini:
Contoh:
<html>
<head>
<title>
Homepage Ku
</title>
</head>
<body background ="gambar1.jpg">
<center>
<h1>Homepage Ku</h1>
<IMG SRC ="gambar2.gif">
<font size =3 face ="arial" color ="red">
Inilah <b>Homepage </b>Aku <i>Yang Pertama</i>
</font>
</center>
<font size = 3 face ="arial" color = "blue">
<ol>
<li> Nama : Harianja
<li> Prodi : Teknik Informatika
<li> Fakultas : Teknik
<li> Kampus : UNIKS
</ol>
</font>
<BR>
<center>
<tabel border = 2>
<caption> Daftar Nilai  </caption>
<TR>
<TD> <BR> </TD>
<TH> <TUGAS> </TH>
<TH> <MID> </TH>
<TH> <AKHIR> </TH>
</TR>
<TR>
<TH> Aljabar </TH>
<TD> 90 </TD>
<TD> 95 </TD>
<TD> 80 </TD>
</TR>
<TR>
<TH> Jaringan Komputer </TH>
<TD> 95 </TD>
<TD> 95 </TD>
<TD> 90 </TD>
</TR>
</tabel>
</center>
</body>
</html>
Read More
Atur Font dan List pada HTML

Atur Font dan List pada HTML

Add Comment
Atur Font dan List pada HTMLSeperti pada bahasa pemrograman lainnya, pada HTML kita juga bisa mengatur font dari dokumen yang yang kita buat. Font ini bisa berupa size untuk mengatur ukuran huruf, color untuk mengatur warna huruf, dan face untuk mengatur jenis huruf. Selain itu kita juga dapat membuat list atau daftar berupa OL(ordered list) dan UL (unordered list). Jika kita menggunakan OL maka daftar kita akan terurut baik berupa angka maupun huruf. Berikut ini adalah contoh sederhana mengatur font dan list dalam bahasa HTML.
Contoh:

<html>
<head>
<title>
Homepage Ku
</title>
</head>
<body background = "gambar1.jpg">
<center>
<h1>Homepage Ku</h1>
<IMG SRC = "gambar2.gif">
<font size = 3 face = "arial" color = "red">
Inilah <b>Homepage</b> Aku <i> Yang Pertama </i>
</font>
</center>
<font size = 3 face = "arial" color "blue">
<ol>
<li> Nama : Harianja
<li> Prodi : Teknik Informatika
<li> Fakultas : Teknik
<li> Kampus : UNIKS
</ol>
</Font>
</body>
</html>

Ketika dijalankan kita akan mendapatkan bahwa tulisan "Inilah Homepage Aku Yang Pertama" dengan ukuran 3, jenis tulisan arial dan warna tulisan merah. Serta terdapat list atau daftar seperti berikut (warna biru, ukuran 3 jenis tulisan arial) :
1. Nama : Harianja
2. Prodi : Teknik Informatika
3. Fakultas : Teknik
4. Kampus : UNIKS
Read More
Memasukkan Gambar dan Background pada HTML

Memasukkan Gambar dan Background pada HTML

7 Comments
Memasukkan Gambar dan Background pada HTMLUntuk memperindah tampilan kita dapat memasukkan gambar dan background ke dalam dokumen HTML. Gambar yang dimasukkan dapat berupa gambar diam dan bisa juga gambar yang bergerak atau animasi (gif). Gambar bisa juga merupakan gambar tunggal di bagian area halaman atau memenuhi area halaman sebagai background. Untuk memanggil file gambar tunggal kita dapat menggunakan kode-kode perintah berikut:
<IMG SRC = "nama file gambar">
Read More
Struktur Dokumen HTML

Struktur Dokumen HTML

Add Comment
Struktur Dokumen HTML Syarat mutlak untuk mempelajari suatu bahasa pemrograman adalah mengetahui struktur dasar pemrograman tersebut. Begitu juga dengan pemrograman HTML memiliki struktur yang terdiri dari kepala program atau dokumen, badan program atau dokumen dengan bentuk seperti di bawah ini:

<html>
<head>
....Kepala Program
</head>
<body
....Badan Program
</body>
</html>
Dari struktur di atas terlihat bahwa dokumen HTML adalah dokumen suatu dokumen yang selalu diapit oleh tag <HTML>  dan di akhiri dengan </HTML> . Untuk kepala program diapit oleh <head> dan ditutup oleh </head>. Sedangkan bagian badan program atau dokumen diapit oleh <body> dan ditutup dengan </body>.
Berikut ini adalah contoh program HTML yang sederhana:
<html>
<head>
<title> 
Homepage Ku
</title>
</head>
<body>
<center>
<h1> Homepage Ku</h1>
Inilah <b>Homepage</b>Aku<i>Yang Pertama</i>
</center>
</body>
</html>
Jika program kita jalankan maka tampilannya akan terlihat seperti berikut:

Homepage Ku

Inilah Homepage Aku Yang Pertama

Dari hasil program di atas terlihat bahwa:
h1 adalah tulisan header yang bisa juga dicoba h2, h3..h6.  Pada tulisan Homepage terlihat tebal dengan menggunakan  tag <b> </b>, Tulisan yang pertama terlihat miring karena tag <i> </>. Jika kita ingin membuat tulisan bergaris bawah kita dapat gunakan <u> </u>.
Read More
Subscribe to: Posts (Atom)