Blognya Yayang: web design

Tampilkan postingan dengan label web design_HTML. Tampilkan semua postingan

Senin, 03 Mei 2010

Contoh Link

Ketik Dokumen HTML dibawah ini :

Jika sudah selesai, jalankan index.htm pertma kali. Tampilannya seperti dibawah ini

Kamis, 29 April 2010

Contoh tabel

Contoh praktek tabel :

buat tampilan tabel seperti dibawah ini dengan kode html

Cara membuat html nya sebagai berikut :

<html>
<head>
<title>Contoh tabel</title>
</head>

<body>
<P>Daftar nama Siswa Kelas XI<br>
SMK ABC
<table width="50%” border="1">

<tr>
<td>1</td>
<td>Ujang</td>
<td>L</td>
</tr>

<tr>
<td>3</td>
<td>Shela</td>
<td>P</td>
</tr>

<tr>
<td>5</td>
<td>Didin</td>
<td>L</td>
</tr>

</table>
</body>
</html>

Latihan :

Buat tabel dibawah ini dengan html

Daftar Harga Barang
Toko “ABC”

No	Nama Barang	Harga Satuan	Jumlah Barang
1	Lux	Rp. 150	3
2	Dettol	Rp. 450	2
3	Pantene	Rp. 225	4
4	Formula	Rp. 170	3

Minggu, 04 April 2010

Penamaan dan Elemen HTML (1)

Penamaan Dokumen

File yang disimpan dalam format HTML akan berekstensi/berakhiran HTM atau HTML

Elemen HTML

Dokumen HTML disusun oleh elemen-elemen. “Elemen“ adalah merupakan istilah bagi komponen-komponen dasar pembentuk dokumen HTML. Contoh elemen adalah head, body , table, paragraf , list. Elemen dapat berupa teks murni atau bukan teks atau keduanya.

Definisi TAG

Untuk menandai berbagai elemen dalam suatu dokumen HTML, kita menggunakan TAG.

Petunjuk menggunakan TAG adalah :

Tag HTML diapit dengan dua karakter kurung bersudut < dan >

Tag HTML secara normal selalu berpasangan seperti <b> dan </b>
Tag pertama dalam suatu pasangan adalah tag awal dan tag yang kedua merupakan tag akhir
Tag HTML tidak case sensitive (boleh huruf kecil atau besar) . contoh : <b> berarti sama dengan <B>

Secara umum suatu elemen dalam dokumen HTML yang dinyatakan dengan tagnya, dituliskan :

Setiap dokumen html harus diawali dengan menuliskan tag <html> dan tag</html> diakhir dokumen. Tag ini menandai bahwa dokumen ini adalah dokumen HTML. Dalam satu dokumen hanya ada satu elemen html.

Elemen head ditandai dengan tag <head> dan diakhiri dengan tag </head>. Bagian ini berisi informasi tentang dokumen HTMLnya. Minimal informasi yang dituliskan dalam elemen ini adalah judul dari dokumen, judul ini akan ditampilkan pada caption bar dari window browser, ditandai dengan menggunakan tag <title> dan diakhiri dengan </title>.

Elemen body ditandai dengan tag <body> dan diakhiri </body>. Bagian ini merupakan elemen terbesar di dalam dokumen html. Elemen ini berisi isi dokumen yang akan ditampilkan pada browser, meliputi paragraf, grafik, link, tabel dsb.

Image dan Link

Images :

Digunakan untuk menampilkan image atau animasi gif pada halaman web Anda.

Atribut : alt, align=(center, left, right), hspave, vspace, border, width & height

Contoh :

Links :
Digunakan untuk membuat link ke halaman lain. Tulisan yang terletak antara <A> dan </A> akan terdapat garis bawah.

Contoh :
<A HREF="hal2.html">Klik di sini</A> Untuk membuat link ke hal2.htm
<A HREF="mailto:webmaster@klik-kanan.com">Klik di sini</A> Untuk membuat link pada alamat e-mail.
<A HREF="#aplikasi">Klik di sini</A> Untuk membuat link ke bagian lain pada halaman yang sama.
<A HREF="halamanlain.html#aplikasi">Klik di sini</A> Untuk membuat link kebagian lain pada halaman yang berbeda.
<A HREF="halaman2.html"><IMG SRC="gambar.gif"></A> Untuk membuat link dengan menggunakan gambar.

TAG-TAG HTML

Tag-Tag Dasar HTML

Tag dasar berarti elemen dasar. Dokumen HTML secara mendasar akan terdiri atas teks informasi.

HTML

Merupakan tag dasar yang mendefinisikan bahwa dokumen ini adalah dokumen HTML. Tag ini merupakan satu keharusan bagi pemrogram web untuk menuliskannya sebagai tag pertama dalam dokumen HTML.

<html> di awal dokumen dan </html> di akhir dokumen.

Head

Merupakan tag berikutnya setelah <html> untuk menuliskan keterangan tentang dokumen web yang akan ditampilkan

<head> di awal setelah <html>, dan </head> di akhir section head

Title

Merupakan tag di dalam head yang harus dituliskan untuk memberikan judul/ informasi pada caption browser web tentang topik atau judul dari dokumen web yang ditampilkan dalam browser.

<title> judul dokumen</title>

Body

Merupakan section utama dalam dokumen web. Pada section ini semua isi dokumen yang akan ditampilkan di dalam browser harus dituliskan.

<body> di awal, segera setelah tag </head>

</body> di akhir, diletakkan sebelum tag </html>

Paragraf

Informasi yang disajikan dalam dokumen harus mengikuti kaidah kaidah dalam penulisan. Misalnya satu pikiran utama disimpan dalam satu paragraf.

Setiap paragraf harus dimulai dengan memberi tag <p>. diakhir paragraf tidak diharuskan menuliskan </p> sebagai akhir paragraf. Setiap pergantian paragraf harus dimulai dengan <p> kembali.

Line Break

Kita dapat memaksakan ganti baris pada dokumen web. Ganti baris disini dimaksudkan hanya menyajikan informasi pada baris sendiri tetapi tidak berganti paragraf. Untuk menampilkan suatu teks ditampilkan pada baris yang baru dalam suatu paragraf, maka harus digunakan tag <br> sebelum teks yang dimaksud dituliskan.

Heading

Teks dalam dokumen umumnya mempunyai judul topik, pada dokumen HTML judul ini disebut heading. Heading tulisan akan ditampilkan dengan huruf yang lebih besar atau ditebalkan. Heading juga dimanfaatkan untuk menunjukkan tingkat keberartian dari teks yang dituliskan. Ada 6 tingkat heading dalam HTML, dinomori dari satu sampai dengan nomor 6. Nomor 1 merupakan heading terbesar. Setiap heading dalam dokumen harus diberi tag, tergantung pada kebutuhan teks tersebut, jika dianggap sebagai heading1 digunakan tag <h1>

Contoh :

Cara pengetikkan

Setelah dijalankan

FONT

Font <FONT> Untuk mendefinisikan berbagai attribut FONT, yaitu : SIZE, FACE, COLOR.

SIZE: Ukuran font yang digunakan, berkisar antara 1 - 7 dengan 1 merupakan ukuran terkecil dan 7 merupakan ukuran terbesar.
FACE: Jenis atau nama font.
COLOR: Warna font,

Contoh :

<FONT SIZE=4 FACE="Verdana, Arial, Helvetica" COLOR="#FF0000">Contoh teks yang berwarna merah</FONT>

Hasilnya akan terlihat seperti :
Contoh teks yang berwarna merah

Contoh lainnya :

Selain tag dan atribut di atas, masih terdapat lagi tag-tag yang berhubungan dengan pengaturan teks, yaitu :

<B> Bold text
<I> Italic text
<U> Underscore
<S> ~~Strikeout - draws a line through the text~~
<PRE> Preformatted Text

TABEL

Tabel

Terdapat tiga tag atau elemen utama yang digunakan dalam pembuatan table : <TABLE>, <TR>, dan <TD>. Yang perlu diingat adalah bahwa tab <TR> dan <TD> harus terletak di antara tag <TABLE> dan </TABLE>

<TABLE>
Terdiri dari atribut :

align - perataan : rata kiri (left), tengah (center) atau kanan (right).
bgcolor - warna latar belakang (background) dari tabel.
border - ukuran lebar border tabel (dalam pixel).
cellpadding - jarak antara isi cell dengan batas cell (dalam pixel).
cellspacing - jarak antar cell (dalam pixel).
width - ukuran tabel dalam pixel atau percent.

Contoh :
<TABLE align="center" bgcolor="#0000FF" border="2" cellpadding="5" cellspacing="2" width="90%">

<TR>

Tag ini digunakan untuk membuat baris baru (pada tabel). Terdiri dari atribut:

align - perataan : rata kiri (left), tengah (center) atau kanan (right).
bgcolor - warna latar belakang dari baris.
valign - perataan vertikal : top, middle atau bottom.

Contoh :
<TR align="right" bgcolor="#0000FF" valign=top>

<TD>
Tag ini digunakan untuk membuat kolom baru pada tabel.

align - perataan
background - image yang digunakan sebagai latar belakang dari kolom.
bgcolor - warna latar belakang
colspan - lihat gambar contoh
height - ukuran tinggi cell dalam pixels.
nowrap - membuat supaya isi dari kolom tetap berada pada satu baris.
rowspan - lihat gambar contoh
valign - perataan vertikal :top, middle atau bottom.
width - ukuran kolom dalam pixel atau percen.

Contoh :

Tampila tabel :

Kode HTML :

<html>
<head>
<title>tabel data</title>
</head>

<body>
 <p>DAFTAR KARYAWAN </p>
 <table width="40%"  border="1" cellspacing="0" cellpadding="0">
   <tr>
     <td width="11%" rowspan="2"><div align="center">No</div></td>

     <td width="26%" rowspan="2"><div align="center">Nama Siswa </div></td>
     <td colspan="2"><div align="center">ALAMAT </div></td>
   </tr>
   <tr>
     <td width="28%"><div align="center">RUMAH</div></td>
     <td width="35%"><div align="center">KANTOR</div></td>
   </tr>

   <tr>
     <td><div align="center">1</div></td>
     <td>Ana</td>
     <td><div align="center">Jl. Bojong No. 2 </div></td>
     <td><div align="center">Bogor</div></td>
   </tr>
   <tr>

     <td><div align="center">2</div></td>
     <td>Ani</td>
     <td>Jl. Enyod No 3 </td>
     <td><div align="center">Cibinong</div></td>
   </tr>
 </table>
 <p>&nbsp; </p>

</body>
</html>

HOME PAGE DESIGN

HTML

HTML kependekan dari Hypertext Markup Language adalah suatu format data yang digunakan untuk membuat dokumen hypertext yang dapat dibaca dari suatu flatform ke flatform lainnya tanpa melakukan perubahan apapun. Dokumen HTML sebenarnya adalah teks biasa, sehingga flatform apapun dokumen tersebut dapat dibaca. Dokumen HTML disebut markup language karena mengandung tanda-tanda tertentu yang digunakan untuk menetukan tampilan teks dan tingkat kepentingan dari teks tersebut dalam suatu dokumen.

Struktur Dokumen HTML

Dokumen HTM dibagi 2 kategori utama, yaitu elemen Head dan Body. Elemen Head memberikan informasi tentang dokumen seperti judul dokumen, sedangkan elemen Body adalah bagian isi dari suatu dokumen ditampilkan oleh browser, misalnya paragraf, tabel, list (daftar) dan lain-lain.

Struktur penulisannya lihat seperti dibawah ini:

Ketika browser menampilkan suatu web page, browser membaca teks-teks pada dokumen HTML dan akan mencari kode khusus yang disebut tag. Tag dinyatakan dalam bentuk <>

Contoh :
- Buat baris html dibawah ini dengan menggunakan Notepad untuk media penulisannya.

------------------------------------------------------------------------------------

<html>
    <head>
    <title>
          Latihan buat web dengan html
     </title>
     </head>
<body>
Halo, saya sekarang sedang belajar buat web dengan html, asyik juga.
</body>
</html>

------------------------------------------------------------------------------------

- Jika sudah selesai, simpan data tersebut dengan akhiran filenya .htm
- buka file tersebut dengan cara double klik
- hasilnya :

Blognya Yayang

Senin, 03 Mei 2010

Contoh Link

Kamis, 29 April 2010

Contoh tabel

Minggu, 04 April 2010

Penamaan dan Elemen HTML (1)

Penamaan Dokumen

Image dan Link

TAG-TAG HTML

HTML

Head

Title

Body

Paragraf

Line Break

Heading

TABEL

HOME PAGE DESIGN

Mengenai Saya

Silahkan

Kategori

Arsip Blog