Catatan Teknologi Informasi dan Komunikasi: 2011

Friday, September 9, 2011

HTML 7

Contoh

Yang dibutuhkan 5 file yang terdiri dari

1. 4 file warna

2. 1 file frame

4 File warna, dimana isi html nya sebagai berikut :

untuk warna silver :

<HTML>

</Body>

</HTML>

Simpan dengan nama file : Silver.htm

untuk warna cyan:

<HTML>

</Body>

</HTML>

Simpan dengan nama file : cyan.htm

untuk warna pink :

<HTML>

</Body>

</HTML>

Simpan dengan nama file : pink.htm

untuk warna yellow:

<HTML>

</Body>

</HTML>

Simpan dengan nama file : yellow.htm

1 Frame, dimana isi HTML nya sebagai berikut :

untuk warna Frame:

<html>

</frameset>

HTML 6

Tag yang digunakan untuk menghubungkan antar file adalah :

<A href =”letak file yang akan di hubungkan dan nama file yang akan dihubungkan “> nama yang ditampilkan </a>

Contoh :

<A href=”D:\administrasi\LATIHAN\1a.html”>Buka latihan 1A</a>

Jika nama file yang dihubungkan tidak jadi satu dengan nama file penghubung

<A href=”1a.html”>Buka latihan 1a </a>

Jika nama file yang dihubungkan jadi satu folder dengan nama file penghubung

Yang harus di ingat adalah extention filenya

Tag yang digunakan untuk membagi halaman web menjadi beberapa bagian adalah

1. <Frameset Cols=”banyaknya % yang dibagi ”>

Adalah membagi halaman web secara vertical

2. <Frameset rows=”banyaknya % yang dibagi ”>

Adalah membagi halaman web secara horisontal

3. <Frame src=”nama file yang akan di tampilkan”>

Adalah memanggil file yang akan di tampilkan pada frame yang dibuat

4. <IFrame src=’nama file yang akan di tampilkan”>

Adalah frame yang terdapat dalam suatu paragraph / frame mengambang dan bisa ditampilkan dalam komponen <body>

Contoh :

<Html>

</Frameset>

</Html>

Hasilnya :

<Html>

</Frameset>

</Html>

Hasilnya :

Kenapa ada satu halaman yang tidak ada warnanya ?

Karena : extantion file yang digunakan tidak sama dengan yang seharusnya

<Html>

</Frameset>

</Html>

Hasilnya :

<Html>

</Frameset>

</Html>

Hasilnya :

HTML 5

Tag yang di gunakan untuk menampilkan gambar dalam halaman web :

<IMG SRC=”letak gambar di directori.EXTENTION FILE GAMBAR” Alt=”kalimat” Border=”angka” Width=”angka” Height=”angka”>

Tag yang termasuk dari gambar adalah :

1. Alt

menampilkan kalimat jika mouse didekatkan pada gambar

2. Style= ”background-color : warna ; border : ketebalan bingkai jenis bingkai warna bingkai”

menampilkan warna latar belakang bingkai, ketebalan bingkai, warna bingkai dan jenis bingkai pada gambar

3. Width

mengatur lebar gambar

4. Height

Mengatur tinggi gambar

5. Src

Mengambil gambar

Yang harus di perhatikan bahwa :

Gambar gambar yang akan di gunakan di simpan di dalam satu folder bersama dengan file webnya. Jika tidak maka gambar tersebut tidak akan tampil.

Extantion gambar terdiri dari :

1.GIF : Gambar yang bergerak

2.JPG , JPEG, WMF, BMP : Gambar yang tidak bergerak

Contoh :

<Html>

<Body>

</Body>

</Html>

Hasilnya :

<Html>

<Body>

</Body>

</Html>

Hasilnya :

<Html>

<Body>

</Body>

</Html>

Hasilnya :

Mengatur ukuran gambar

<Html>

<Body>

</Body>

</Html>

Memberi warna bingkai dan jenis bingkai pada gambar

<Html>

<Body>

<IMG SRC="PH03425I.JPG" Width=200 Height=100

STYLE="BACKGROUND-COLOR:CY AN; BORDER:10PX DOUBLE GREEN">

</Body>

</Html>

Letak gambar

<Html>

<Body>

<P Align=Center>

</Body>

</Html>

Catatan :

Latar belakang halaman web adalah gambar

Tag yang digunakan adalah

Jika gambar yang ditampilkan banyak pada satu halaman karena ukuran gambar tidak sebesar ukuran / lebar monitor Anda

Kode Programnya

<html>
<Body background="anggrek3.jpg">
</body>
</html>

Hasilnya:

HTML 4

Contoh-contoh Tabel pada HTML 3

<HTML>
<Table Border = 5 bgcolor=skyblue=border-color:red>
<tr>
<td> Nama Siswa </td>
<td> Bidang Studi </td>
</tr>
<tr>
<td> Verry </td>
<td> Bahasa Indonesia </td>
</tr>

<tr>
<td> Fiona </td>
<td> Manajemen Bisnis </td>
</tr>
</Table>
</Html>

Hasilnya :

<Html>
<Table Border=18 style=border-color:darkblue>
<TR>
          <TD Width=200 BgColor=Lime><Font Color=Maroon Face=Jokerman Size=5>Nama Siswa </TD>
          <TD Width=300 BgColor=Navy><Font Color=Aqua><Font Face=Castellar Size=5> Bidang Studi </TD>
</TR>
     <TR>
        <TD BgColor=Fuchsia><Font Color=Blue size=5> Steven </TD>
        <TD BgColor=Teal><Font Color=Yellow size=5> Teknologi Informasi Komunikasi    </TD>
</TR>
<TR>
        <TD BgColor=Aqua> <Font Color=Green size=6> Jason       </TD>
        <TD Bgcolor=Silver><Font Color=darkBlue size=6> Matematika    </TD>
</TR>
</Table>
</Html>

Hasilnya :

<Html>
<Table BORDER=5 BGCOLOR=orange STYLE="BORDER:10px DOUBLE RED">
<TR>
        <TD >Nama </TD>
       <TD><CENTER> Sekolah </TD>
</TR>
     <TR>
        <TD> Angel </TD>
        <TD> SMP Katolik Permata Bunda    </TD>
</TR>
<TR>
        <TD> Mawar </TD>
        <TD> SMP katolik Permata Bunda    </TD>
</TR>
</Table>
</HTML>

Hasilnya :

Catatan Tambahan pada Tabel HTML

<TD ROWSPAN=”ANGKA”> kalimat </TD>

untuk menggabungkan dua baris / lebih menjadi hanya satu baris

<TD COLSPAN=”ANGKA”> kalimat </TD>

untuk menggabungkan dua kolom/lebih menjadi hanya satu kolom

Contoh :

<Html>
<Body>
<Table Border=13 bgcolor=yellow STYLE="BORDER:10px solid blue">
<Caption><font color=red size=6> DATA SISWA</Caption>
<TR>
<TD> NAMA SISWA </TD>
<TD Colspan=2 Align=Center> NO TELEPHONE / HP </TD>
<TD> ALAMAT </TD>
</TR>
<TR>
<TD> Darren </TD>
<TD> 081235678904 </TD>
<TD> 081812004578 </TD>
<TD> Jl. Bangau Raya No.1 </TD>
</TR>
<TR>
<TD> Henny </TD>
<TD> 0217893456 </TD>
<TD> 02185734678 </TD>
<TD> Jl. Mampang Raya 2 No.4 </TD>
</TR>
</Body>
</Html>

Hasilnya :

<Html>
<Body>
<Table Border=5>
<TR>
   <TD> Nama </TD>
   <TD> Hobby </TD>
   <TD> Alamat </TD>
</TR>
<TR>
   <TD> Gringggo </TD>
   <TD> Main Musik </TD>
   <TD Rowspan=2> Jl. Matraman </TD>
</TR>
<TR>
   <TD> Puding </TD>
   <TD> Shopping </TD>
</TR>
</Body>
</Html>

Hasilnya :

Tunggu catatan selanjutnya.

Monday, August 22, 2011

Pr 2 kls 9

Pr Ke 2 Kelas 9 SMP Katolik Permata Bunda

Buatlah kode program notepad agar tabel yang dihasilkan seperti di bawah ini

( warna, ukuran tulisan, jenis tulisan dan lebar kolom bebas tapi bentuk tabel harus sama )

Buatlah kode program notepad agar bentuk Frame seperti di bawah ini

( dengan 6 file warna background yang berbeda )

Jawaban di kirim lewat e-mail :

tik.perbun@gmail.com

Pr 1 kls 7

PR Ke – 1 Kelas 7 SMP Katolik Permata Bunda

1. Dibawah ini perangkat lunak pengolah kata adalah ….

a. microsoft excel

b. microsoft word

c. notepad

d. microsoft power point

2. Title bar berfungsi untuk ….

a. menunjukan apakah dokumen sudah pernah disimpan atau belum

b. menampilkan nama dokumen

c. menampilkan status bar

d. menampilkan penulis dokumen

3. Bagian jendela yang digunakan untuk mempercepat akses terhadap sebuah tombol perintah adalah ….

a. ribbon

b. quick acess toolbar

c. status bar

d. vertical bar

4. Bagian jendela microsoft word dimana terdapat zoom level adalah ….

a. ribbon

b. quick access toolbar

c. status bar

d. ruler

5. Perintah yang terdapat di tab Home adalah ….

a. Open dan Paste

b. Cut dan Paste

c. Copy dan Close

d. Copy dan New

6. Mengatur jenis huruf terdapat di ribbon ….

a. insert

b home

c. page layout

d. view

7. Mengatur arah pencetakkan dokumen terdapat di ribbon ….

a. insert

b home

c. page layout

d. view

8. Menambahkan gambar ke dokumen menggunakan ribbon ….

a. insert

b home

c. page layout

d. view

9. Ctrl A berfungsi untuk ….

a. memblok seluruh dokumen

b. memblok satu kata ke kanan

c. menggerakkan kursor ke bawah satu baris

d. memindahkan satu kata ke akhir kalimat dalam satu baris

10. Perintah cut dan paste dapat digantikan dengan menggunakan tombol keyboard yaitu ….

a. ctrl x dan ctrl y

b. ctrl c dan ctrl s

c. ctrl x dan ctrl v

d. ctrl y dan ctrl v

11. Mengatur spasi baris menggunakan ribbon ….

a. home atau page layout

b. insert atau view

c. mailings atau home

d. file atau home

12. Ctrl end berfungsi untuk ….

a. memindahkau baris kursor ke awal baris

b. memindahkan kursor ke akhir dokumen

c. memindahkan kursor ke bawah satu baris

d. memindahkan kursor ke kiri satu huruf

13. Tombol keyboard untuk menebalkan tulisan, memiringkan tulisan dan menggaris bawahi tulisan adalah ….

a. ctrl b, ctrl u dan ctrl i

b. ctrl s, ctrl p dan ctrl o

c. ctrl c, ctrl x dan ctrl v

d. ctrl z, ctrl y dan ctrl n

14. Icon textbox ada di ribbon ….

a. Insert

b. Home

c. View

d. Page Layout

15. Memberi bingkai halaman pada dokumen yang sedang digunakan, kelompok ribbonnya adalah ….

a. Page setup

b. Page background

c. Paragraf

d. Font

Essai

Jelaskan perbedaan pengaturan posisi gambar yang dipilih secara lengkap (in line with text, square, tight, through, top and bottom, behind text, in front of text dan edit wrap points

Jawaban di kirim lewat e-mail :

tik.perbun@gmail.com

Catatan Teknologi Informasi dan Komunikasi

Friday, September 9, 2011

HTML 7

HTML 6

HTML 5

HTML 4

Monday, August 22, 2011

Pr 2 kls 9

Pr 1 kls 7

About Me

Blog Archive