Blog Punya Wahyu: 04/30/14

Belajar HTML Image

5-HTML IMAGE (GAMBAR) ::

OBJEKTIF:
Setelah mempelajari materi ini diharapkan anda dapat memahami penggunaan element-element untuk menampilkan gambar.

MATERI:
Element IMG (Image)

ELEMENT IMG
Element IMG befungsi untuk menampilkan gambar. Element ini tidak mempunyai tag penutup dan mempunyai attribute yaitu align, alt (teks alternatif jika gambar tidak tampil), border,height, width, hspace (jarak kosong posisi horizontal, vspace (jarak kosong posisi vertikal), src (lokasi dari gambar itu disimpan beserta nama file-nya).

Sintaks:
<img
align="left"|"right"|"top"|"middle"|"bottom"
alt="text"
border="pixel"
width="pixel"|"%"
height="pixel"|"%"
hspace="pixel"
vspace="pixel"
src="uri">

LATIHAN

Gunakan teks editor misalkan "Notepad" untuk menyunting dan menyimpan script latihan di bawah ini. Untuk melihat hasilnya bukalah file tersebut dengan menggunakan web browser atau gunakan editor yang telah tersedia pada modul ini dengan mengklik menu Editor.

Latihan 1:
Tampilkan gambar image027.jpg dengan ukuran width dan height 160pixel dan border 8pixel :

Nama file: latihan5_1.html

<html>
<head>
<title>Latihan5-1</title>
</head>
<body><img width="160" height="160" src="image027.jpg">
</body>
</html>

Tugas tambahan:Letakkan gambar tersebut ke kanan, setelah itu ke kiri.

Latihan 2:
Dari Latihan 1 ubah gambar menjadi yang terdapat dalam direktori /images dengan nama image050.jpg

Nama file: latihan5_2.html

<html>
<head>
<title>Latihan5-1</title>
</head>
<body><img width="160" height="160" src="./images/image050.jpg">
</body>
</html>

Latihan 3:
Tampilkan gambar image027.jpg dengan ukuran width dan height 80pixel dan border 8pixel serta teks seperti di bawah ini:

Kehadiran Web Teknisi Jardiknas dapat memudahkan penyebaran informasi antara Biro Perencanaan dan Kerja Sama Luar Negeri - dan anggota Teknisi Jardiknas.Keuntungan bila sistem jaringan informasi ini terbentuk, komunikasi antar Biro Perencanaan dan Kerja Sama Luar Negeri dan Provider dan anggota Teknisi Jardiknas akan lebih cepat terjalin, informasi dapat dengan cepat sampai dan tepat sasaran pula. Salam Pendidikan...! Dr. Ir. Gatot Hari Priowirjanto

Nama file: latihan5_3.html

<html>
<head>
<title>Latihan5-3</title>
</head>
<body><img width="40" height="40" src="image027.jpg" align="left" border="8">
Kehadiran Web Teknisi Jardiknas dapat memudahkan penyebaran informasi antara Biro Perencanaan dan Kerja Sama Luar Negeri - dan anggota Teknisi Jardiknas. Keuntungan bila sistem jaringan informasi ini terbentuk, komunikasi antar Biro Perencanaan dan Kerja Sama Luar Negeri dan Provider dan anggota Teknisi Jardiknas akan lebih cepat terjalin, informasi dapat dengan cepat sampai dan tepat sasaran pula. Salam Pendidikan...! Dr. Ir. Gatot Hari Priowirjanto
</body>
</html>

Belajar HTML Table

4-HTML TABEL ::

OBJEKTIF:
Setelah mempelajari materi ini diharapkan anda dapat memahami penggunaan element-element untuk pembuatan tabel.

MATERI:
Element TABLE, Element CAPTION, Element TH(table header), Element TR(table row), Element TD(table data)

ELEMENT TABLE
Element TABLE befungsi untuk membuat suatu data multidimensi yang terdiri atas kolom dan baris. Element ini mempunyai attribute seperti align, bgcolor, border, cellpadding(jarak antara tepi sel dengan isi sel), cellspacing(jarak antara sel), width(lebar tabel), height(tinggi tabel). Element TABLE berisikan element CAPTION, TH, TR dan TD.

Sintaks:
<table
align="left"|"center"|"right"
bgcolor="color"
border="pixel"
cellpadding="pixel"
cellspacing="pixel"
width="pixel"|"%"
height="pixel"|"%" >
........................
</table>

ELEMENT CAPTION
Element CAPTION berfungsi untuk membuat judul dari tabel. Element ini harus berada di dalam element TABLE dan mempunyai attribute align dengan nilai top(judul terletak di atas tabel), dan bottom(judul terletak di bawah tabel).

Sintaks:
<caption align="top"|"bottom">
..........................
</caption>

ELEMENT TR (Table Row)
Element TR mendefinisikan baris pada tabel dan element ini harus berada di dalam element TABLE. Pada element TR terdapat element TH dan TD. Attribute yang terdapat pada element ini adalah align, valign(posisi vertikal), dan bgcolor.

Sintaks:
<tr
align="left"|"center"|"right"
valign="top"|"middle"|"bottom"
bgcolor="color">
..........................
</tr>

ELEMENT TH (Table Header) dan TD (Table Data)
Element TH dan TD merupakan informasi pada tabel. TH mendefinisikan isi sel sebagai header sel pada kolom tabel dan datanya tercetak tebal dan dengan posisi ditengah sel. Element TH dan TD ini harus terletak di dalam element TR. Attribute kedua element ini adalah align, valign, bgcolor, colspan, rowspan

Sintaks:
<th
align="left"|"center"|"right"
valign="top"|"middle"|"bottom"
bgcolor="color"
colspan="number"
rowspan="number">
..........................
</th>

<td
align="left"|"center"|"right"
valign="top"|"middle"|"bottom"
bgcolor="color"
colspan="number"
rowspan="number">
..........................
</td>

LATIHAN

Gunakan teks editor misalkan "Notepad" untuk menyunting dan menyimpan script latihan di bawah ini. Untuk melihat hasilnya bukalah file tersebut dengan menggunakan web browser atau gunakan editor yang telah tersedia pada modul ini dengan mengklik menu Editor.
Latihan 1:
Buat tabel untuk teks di bawah ini:

Tabel 1.1
No. Nama
1. Rina Hastuti
2. Ali Amran
3. Rahmat

Nama file: latihan4_1.html

<html>
<head>
<title>Latihan4-1</title>
</head>
<body>
<table align="center" border="2" bgcolor="cyan" cellpadding="5" cellspacing="0" >
<caption align="top"><b>Tabel 1.1</b></caption>
<tr>
<th>No.</th>
<th>Nama</th>
</tr>
<tr>
<td>1.</td>
<td>Rina Hastuti</td>
</tr>
<tr>
<td>2.</td>
<td>Ali Amran</td>
</tr><tr>
<td>3.</td>
<td>Rahmat</td>
</tr></table>
</body>
</html>

Tugas tambahan:1. Ganti ukuran cellpadding, cellspacing, border dengan lainnya.
2. Berikan nilai width dan height pada tabel hingga 100%.

Latihan 2:
Dari Latihan 1 gantilah warna background baris tabel menjadi baris-1=green baris-2=yellow baris-3=red baris-4=blue

Nama file: latihan4_2.html

<html>
<head>
<title>Latihan4-2</title>
</head>
<body>
<table align="center" border="2" bgcolor="cyan" cellpadding="5" cellspacing="0" >
<caption align="top"><b>Tabel 1.1</b></caption>
<tr bgcolor="green">
<th>No.</th>
<th>Nama</th>
</tr>
<tr bgcolor="yellow">
<td>1.</td>
<td>Rina Hastuti</td>
</tr>
<tr bgcolor="red">
<td>2.</td>
<td>Ali Amran</td>
</tr><tr bgcolor="blue">
<td>3.</td>
<td>Rahmat</td>
</tr></table>
</body>
</html>

Tugas tambahan:
Ubahlah align pada baris-2 kolom-1 dan baris-4 kolom-2 ke kanan

Latihan 3:
Buat tabel untuk teks di bawah ini:

Tabel 1.1
Data Siswa
No. Nama
1. Rina Hastuti
2. Ali Amran
3. Rahmat

Nama file: latihan4_3.html

<html>
<head>
<title>Latihan4-3</title>
</head>
<body>
<table align="center" border="2" bgcolor="cyan" cellpadding="5" cellspacing="0" >
<caption align="top"><b>Tabel 1.1</b></caption>
<tr bgcolor="fuchsia">
<th colspan="2">Data Siswa</th>
</tr>
<tr bgcolor="green">
<th>No.</th>
<th>Nama</th>
</tr>
<tr bgcolor="yellow">
<td>1.</td>
<td>Rina Hastuti</td>
</tr>
<tr bgcolor="red">
<td>2.</td>
<td>Ali Amran</td>
</tr><tr bgcolor="blue">
<td>3.</td>
<td>Rahmat</td>
</tr></table>
</body>
</html>

klo masih kuat tambah lagi belajarnya biar makin smart klik tambah smart

Belajar HTML Daftar Urutan

3-HTML DAFTAR URUTAN ::

OBJEKTIF:
Setelah mempelajari materi ini diharapkan anda dapat memahami penggunaan element-element untuk pembuatan daftar urutan.

MATERI:
Element OL(ordered list), Element UL(unordered list), Element LI(list item).

ELEMENT OL (Orderd List)
Element OL berfungsi untuk membuat nomor daftar urut. Element ini mempunyai attribute yaitu start, dan type. Attribute start berfungsi untuk memberikan nilai awal dari daftar urutan, attribute type berfungsi untuk memilih bentuk daftar urutan yaitu A untuk abjad huruf besar, a untuk abjad huruf kecil, I untuk abjad romawi besar, i untuk abjad romawi kecil, 1 untuk angka decimal (default: start="1" type="1" ). Dalam element OL harus terdapat beberapa element LI.

Sintaks:
<ol start="number" type="A"|"a"|"I"|"i"|"1">
........................
</ol>

ELEMENT UL (Unordered List)
Element UL berfungsi untuk membuat daftar tanpa nomor urut (dalam format bullet). Element ini mempunyai attribute yaitu type. Attribute type berfungsi untuk memilih bentuk bullet yang digunakan. Nilai dari pada attribute type ini adalah "circle", "square" dan "disc" . Dalam element UL harus terdapat beberapa element LI.

Sintaks:
<ul type="circle"|"square"|"disc">
..........................
</ul>

ELEMENT LI (List Item)
Element LI merupakan isi dari pada daftar. Element ini harus berada di dalam element OL atau UL. Element ini mempunyai attribute type dan value. Nilai attribute type adalahA,a,I,i,1,circle,square,disc dan attribute value berisikan nilai nomor urutan dari attribute type.

Sintaks:
<li type="A"|"a"|"I"|"i"|"1"|"circle"|"square"|"disc">
..........................
</li>

LATIHAN

Gunakan teks editor misalkan "Notepad" untuk menyunting dan menyimpan script latihan di bawah ini. Untuk melihat hasilnya bukalah file tersebut dengan menggunakan web browser atau gunakan editor yang telah tersedia pada modul ini dengan mengklik menu Editor.

Latihan 1:
Menampilkan teks dengan daftar urut (element OL):

Matakuliah TKJ Semester 1:
1. Bahasa Inggris 1
2. Matematika 1
3. Jaringan Komputer 1
4. Konsep Teknologi Informasi
5. Keterampilan Komputer dan Pengelolaan Informasi
6. Perangkat Keras Komputer
7. Sistem Operasi

Nama file: latihan3_1.html

<html>
<head>
<title>Latihan3-1</title>
</head>
<body>
Matakuliah TKJ Semester 1:
<ol>
<li>Bahasa Inggris 1</li>
<li>Matematika 1</li>
<li>Jaringan Komputer 1</li>
<li>Konsep Teknologi Informasi</li>
<li>Keterampilan Komputer dan Pengelolaan Informasi</li>
<li>Perangkat Keras Komputer</li>
<li>Sistem Operasi</li>
</ol>
</body>
</html>

Latihan 2:
Menampilkan teks dengan daftar urut (element OL):

Matakuliah TKJ Semester 1:
a. Bahasa Inggris 1
b. Matematika 1
c. Jaringan Komputer 1
d. Konsep Teknologi Informasi
e. Keterampilan Komputer dan Pengelolaan Informasi
f. Perangkat Keras Komputer
g. Sistem Operasi

Nama file: latihan3_2.html

<html>
<head>
<title>Latihan3-2</title>
</head>
<body>
Matakuliah TKJ Semester 1:
<ol start="1" type="a">
<li>Bahasa Inggris 1</li>
<li>Matematika 1</li>
<li>Jaringan Komputer 1</li>
<li>Konsep Teknologi Informasi</li>
<li>Keterampilan Komputer dan Pengelolaan Informasi</li>
<li>Perangkat Keras Komputer</li>
<li>Sistem Operasi</li>
</ol>
</body>
</html>

Latihan 3:
Menampilkan teks dengan daftar urut (element OL):

I. Matakuliah TKJ Semester 1:
a. Bahasa Inggris 1
b. Matematika 1
c. Jaringan Komputer 1
d. Konsep Teknologi Informasi
e. Keterampilan Komputer dan Pengelolaan Informasi
f. Perangkat Keras Komputer
g. Sistem Operasi

Nama file: latihan3_3.html

<html>
<head>
<title>Latihan3-3</title>
</head>
<body>
<ol start="1" type="I">
<li>Matakuliah TKJ Semester 1:</li>
<ol start="1" type="a">
<li>Bahasa Inggris 1</li>
<li>Matematika 1</li>
<li>Jaringan Komputer 1</li>
<li>Konsep Teknologi Informasi</li>
<li>Keterampilan Komputer dan Pengelolaan Informasi</li>
<li>Perangkat Keras Komputer</li>
<li>Sistem Operasi</li>
</ol>
</ol>
</body>
</html>

Klo ngantuk ngopiii dulu gan biar kaga ngantuk,habis ngopi belajar lagi disni

Blog Punya Wahyu

Rabu, 30 April 2014

Belajar HTML Image

Belajar HTML Table

Belajar HTML Daftar Urutan

Followers

Follow The Author