Catatan Teknologi Informasi dan Komunikasi: September 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.

Catatan Teknologi Informasi dan Komunikasi

Friday, September 9, 2011

HTML 7

HTML 6

HTML 5

HTML 4

About Me

Blog Archive