Tampilkan postingan dengan label Home Page Design. Tampilkan semua postingan
Tampilkan postingan dengan label Home Page Design. Tampilkan semua postingan

Selasa, 02 Juni 2009

Tes HTML

Posted by Yayang DS at 00.59 . Selasa, 02 Juni 2009
1 comments
Labels:

Buatlah kode program dari tampilan tabel dibawah ini :

 

 

image

Read More »»

Selasa, 19 Mei 2009

Membuat E-mail dengan Gmail

Posted by Yayang DS at 22.31 . Selasa, 19 Mei 2009
0 comments
Labels:

Langkah-langkah membuatnya dapat dilakukan seperti berikut :

 

1.

Pada Address bar ketikkan Http://www.google.co.id. Tampilannya bisa diperhatikan seperti dibawah ini.
  image

2.

 Pilih tab Gmail pada pilihan yang disediakan.
  image

3.

 Setelah anda mengklik Gmail, selanjut ditampilkan dialog sebagai berikut :
  clip_image006[10]

4.

 Untuk membuat membuat E-mail, anda harus mendaftar terlebih dahulu dengan memilih pada pilihan buat akun dari dialog tersebut
  clip_image008[10]

5.

 Selanjutnya anda mengisi form isian seperti dibawah ini :
  clip_image010[10]
  image

6.

 Jika berhasil pada layar ditampilkan ucapan selamat telah menjadi anggota (sudah punya E-mail)

7.

 Selamat mencoba

Read More »»

Senin, 18 Mei 2009

Latihan HTML 2

Posted by Yayang DS at 09.58 . Senin, 18 Mei 2009
1 comments
Labels:

 

I. Pilihlah Jawaban yang paling tepat !

1. Yang bukan Web Editor (pembuat website) adalah …

    a. Adobe Photoshop       

    b. Frontpage

    c. Notepad                     

    d. Macromedia Dreamweaver

2. HTML singkatan dari …

    a. Hometext Markup Language

    b. Hypertext Markup Language

    c. HyperLink Text Markup Language

    d. Homepage Text Markup Language

3. Istilah melihat, membaca dan membuka salah satu situs di internet disebut ….

    a. E-mail

    b. Chating

    c. FTP

    d. Browsing

4. Jika kita menyimpan file HTML, file tersebut mempunyai akhiran ..

    a. .DOC

    b. .HTM

    c. .XLS

    d. .TXT

5. Jenis layanan internet yang kita ketahui adalah tersebut diibawah ini …

    a. WWW, FTP, E-mail, Chating

    b. ISP, E-mail, FTP, Chating

    c. TAG, FTP, E-mail, Chating

    d. HTML, BODY, FTP, Chating

6. Salah satu jasa lintas internet seperti berkomunikasi lewat telepon yang dikirimg lewat pengetikan disebut …

    a. FTP

    b. SMS

    c. Chating

    d. E-mail

7. Baris perintah HTML : <I>akan tercetak tebal</I> akan menampilkan tampilan …

    a. akan tercetak tebal

    b. akan tercetak tebal

    c. akan tercetak tebal

    d. akan tercetak tebal

8. Tag tempat dimana kita memasukkan informasi dalam suatu table, dinyatakan dengan pasangan tag …

    a. <TABLE> … </TABLE>

    b. <TD> … </TD>

    c. <CAPTION> … </CAPTION>

    d. <TR> … </TR>

9. Untuk bisa mengakses internet, kita harus melalui penyedia layanan internet, yang disebut …

    a. WWW.Yahoo.com

    b. Telkomnet@instant

    c. ISP

    d. E-mail

10. Jenis layanan internet, dimana layanannya sepeti mesin fax adalah jenis layanan …

    a. E-mail

    b. ISP

    c. FTP

    d. WWW

11. Tag untuk menaikkan posisi karakter atau teks menjadi lebih tinggi dari teks normal, adalah tag …

    a. <SUP>

    b. <SUB>

    c. <STRIKE>

    d. <CAPTION>

12. Tag untuk menampilkan nama dari situs yang dibrowsing, menggunakan tag …

    a. <HTML>

    b. <HEAD>

    c. <TABLE>

    d. <TITLE>

13. Tag untuk membuat table sebelum memulainya, kita harus menuliskan pasangan tag …

    a. <TR> … </TR>

    b. <TD> … </TD>

    c. <TITLE> … </TITLE>

   d. <TABLE> … </TABLE>

14. Tag yang menyatakan isi/detail di dalam daftar adalah tag …

   a. <LI>

   b. <OL>

   c. <TABLE>

   d. <CAPTION>

15. Jika salah memberikan nama tag, misalkan harusnya <TABLE> tapi tertulis <TABEL>, maka hasilnya akan menampilkan …

   a. Error Message

   b. Error

   c. Tampilannya rusak

   d. Tidak ditampilkan

16. Perintah dibawah ini digunakan untuk membuat teks agar dituliskan pada baris berikutnya

   a. <P>

   b. <PRE>

   c. <B>

   d. <BR>

17. Untuk menggabungkan sel-sel dalam satu baris adalah …

    a. <Rows>

    b. <Cols>

    c. <Rowpsan>

    d. <Colspan>

18. Untuk mengatur perataan horizontal data di dalam table, seperti rata kiri, rata  tengan atau rata kanan adalah …

    a. <ALIGN>

    b. <VALIGN>

    c. <HALIGN>

    d. <LIGN>

19. Untuk membuat hidup homepage kita agar dapat menarik pengunjung, diperlukan software animasi, salah satunya adalah …

    a. Adobe Photoshop

    b. Adobe Ilustratror

    c. Macromedia Flash

    d. Macromedia Freehand

20. Attribut BGCOLOR merupakan bagian dari tag …

    a. FRAME

    b. BODY

    c. TABLE

    d. FRAMESET

21. clip_image002[7]  Logo disamping ini berfungsi untuk …

    a. Browsing

    b. Membuat HTML

    c. Membuat Animasi

    d. Koneksi ke Telkomnet

22. clip_image004[7]  Nama logo disamping ini adalah …

    a. Internet Explorer

    b. Microsoft Outlook

    c. Outlook Express

    d. Netscape

23. Atribut BACKGROUND biasanya digunakan untuk membuat latar belakang berupa …

     a. Warna

     b. Warna Patern

     c. Gambar

     d. Tanpa warna

24. FRAMESET mempunyai attribut …

     a. Rowspan

     b. Valign

     c. Cols

     d. Frame

25. clip_image006[7]Baris HTML yang benar untuk menampilkan table disebelah

ini adalah sebagai berikut …

..

a clip_image007[7] b clip_image008[7]
c. clip_image009[7] d. clip_image010[7]
     

 

 

26. Bagian baris dari isi HTML disebelah ini akan

menampilakan tampilan …

 

  clip_image011[7]    

 

     a. clip_image013[7] b. clip_image015[7] c. clip_image017[7] d. clip_image019[7]

27. HTML adalah kepanjangan dari ..

    a. Hypertext Markup Language

    b. Hyperlink Markup Language

    c. Hyper Marking Language

    d. Horizontal Markup Language

28. Tampilan akhir : Jam 2335 , yang benar baris program untuk tampilan tersebut adalah ..

    a. Jam 23 <SUP>35</SUP>

    b. Jam 23 <SUB>35</SUB>

    c. <SUP>Jam 23 35</SUP>

    d. <SUB>Jam 23 <SUB>35

29. Tampilan akhir : gadis Bojong Enyod , yang benar baris program untuk tampilan tersebut adalah ..

    a. <I><S>gadis Bojong Enyod<I><S>

    b. <I><U>gadis Bojong Enyod<I><U>

    c. <B><S>gadis Bojong Enyod<B><S>

    d. <U><B>gadis Bojong Enyod<U><B>

30. Jika dalam program HTML kita tidak menggunakan baris <TITLE> …</TITLE>, maka hasil keluarannya akan menampilkan …

    a. Nama browsingnya sama dengan nama file yang kita buka

    b. Nama browsingnya mempunyai nama Untitle

    c. Nama browsingnya mempunyai nama Homepage.htm

    d. Nama browsingnya mempunyai nama

 

 

 

 

II. Jawablah dengan singkat dan tepat !

1. Apa yang kamu ketahui tentang UpLoad

 

2. Apa yang kamu ketahui tentang Outlook Express

3. clip_image021[7]Sebutkan nama logo dan gunanya dari yang tersebut ?

 

4. Apa yang kamu ketahui tentang menu Favorite yang terdapat di Internet Explorer

 

5. Perhatikan tampilan hasil browsing dibawah ini :

 

   Buat lengkap perintahnya dengan HTML, dimana tampilan akhirnya seperti dibawah  ini (judul halaman : Tabel Harga )

        DAFTAR HARGA BARANG

 

Komputer

Speed

Harga

Lama

Baru

Pentium II

266 Mhz

Rp. 500.000,-

Rp. 350.000,-

Pentium III

600 Mhz

Rp. 1.500.000,-

Rp. 1.250.000,-

--- selamat bekerja ---

Read More »»

Senin, 11 Mei 2009

LATIHAN HTML 1

Posted by Yayang DS at 23.08 . Senin, 11 Mei 2009
0 comments
Labels:

Jawablah pertanyaan dibawah ini dengan singkat dan jelas !

  1. Apa kepanjangan dari HTML ?
  2. Untuk menggabungkan 2 buah baris pada suatu tabel menjadi satu sel, dapat kita gunakan tag …
  3. Apa maksudnya dari perintah tag <TD COLSPAN = 2>  ?
  4. Jelaskan perintah dari tag <PRE> !
  5. Buatlah kode HTML-nya dari gambar berikut ini :

image

 

selamat mengerjakan

Read More »»

TABEL

Posted by Yayang DS at 09.31 .
0 comments
Labels:

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 :

 

clip_image002

 




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>

Read More »»

Image dan Link

Posted by Yayang DS at 09.21 .
0 comments
Labels:

 

Images :

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

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

Contoh :

<IMG SRC="logo.gif" alt="Ini adalah logo halaman pembuka" width=200 height=100>
<IMG SRC="logo.gif" hspace=10 vspace=5 align=right border=2>

 

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.

Read More »»

HOME PAGE DESIGN

Posted by Yayang DS at 09.12 .
0 comments
Labels:

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 sperti judul dokumen, sedangankan 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:

 

 

clip_image002


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

Read More »»

Penamaan dan Elemen HTML (1)

Posted by Yayang DS at 08.45 .
0 comments
Labels:

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 :

<namatag> …….. </namatag>

 

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.

Read More »»

Minggu, 15 Februari 2009

TAG-TAG HTML

Posted by Yayang DS at 03.34 . Minggu, 15 Februari 2009
0 comments
Labels:

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 :

 

clip_image002[3]

Cara pengetikkan

 

 

clip_image004

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 :

<FONT SIZE=2 FACE="Times_New_Roman" COLOR="#0066CC">

 

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

Read More »»
Langganan: Postingan (Atom)