Materi Kelas = XI
Semester = Ganjil
Standar Kompetensi :
Menggunakan homepage untuk keperluan informasi dan komunikasi

Kompetensi Dasar :
Membuat homepage sederhana dengan Tabel HTML

Rencana Pelaksanaan Pembelajaran (RPP) :
Untuk RPP, dapat diunduh di sini

TABEL merupakan salah satu elemen penting dalam pembuatan web sederhana menggunakan HTML, beberapa manfaat dari tabel dalam web adalah :

1. Untuk mengelola (maintance) elemen-elemen dalam website
2. Untuk menambah kreativitas desain halaman web
3. Untuk memisahkan dan mengorganisasikan style format yang berbeda-beda

Tabel dalam HTM dinyatakan dengan tag <TABLE>...</TABLE>
adapun elemen yang ada dalam tabel adalah :
1. <TR> digunakan untuk membuat danmenentukan jumlah baris
2. <TD> digunakan untuk membuat dan menentukan jumlah kolom atau sel

Attribut
attribut yang terdapat dalam tabel diantaranya :

• BORDER: untuk menentukan tebal border
• WIDTH: untuk menentukan lebar tabel
• ALIGN : untuk membuat perataan tabel
• COLSPAN : untuk melakukan merger sel dalam tabel
  
• ROWSPAN: untuk melakukan merger baris dalam tabel
• BGCOLOR: untuk menentukan warna bakground tabel
  

contoh tag HTML untuk tabel 3 baris 2 kolom :



Outputnya terlihat seperti tabel di bawah ini :



Untuk menggabungkan sel, maka kita harus menggunakan COLSPAN (menggabungkan sel baris) dan ROWSPAN (menggabungkan sel kolom), misalnya tabel di atas, akan kita merger antara baris 1 kolom 1 dengan baris 1 kolom 2, maka kode HTML menjadi :



Fungsi dari atribut colspan=2 adalah untuk menggabungkan sel kolom sebanyak 2 sel, nilai 2 (dua) dapat digantikan dengan jumlah sel kolom yang akan dimerger, oleh karenanya sel dibawahnya harus dihapus atau dihilangkan karena telah dimerger dengan sel sebelumnya.
Maka output dari kode HTMl di atas, adalah seperti gambar di bawah ini :

Sedangkan untuk menggabungkan baris 2 dan baris 3 kolom 1, digunakan attribut rowspan=2, sehingga kode HTMLnya menjadi :



dan hasil outputnya menjadi seperti gambar di bawah ini :

Tag HTML berikut adalah contoh tag HTML yang telah menggunakan penggabungan sel, baik sel kolom maupun baris, dengan penambahan warna sel, perataan teks dalam sel serta penambahan gambar pada sel :



output dari tag tabel di atas adalah seperti gambar di bawah ini :

Gb. Tabel akhir

TABEL CSS

Selain menggunakan tag TABLE, pembuatan tabel juga dapat dilakukan menggunakan CSS, berikut adalah script CSS untuk membuat tabel sederhana :



output dari script di atas tampak seperti gambar tabel di bawah ini :


Untuk latihan : Modifikasilah tabel CSS di atas seperti tabel di Gb. Tabel Akhir, dengan menggunakan penggabungan sel, dan input image atau gambar.

Materi Kelas : XI
Semester : Ganjil
Standar Kompetensi :
Menggunakan homepage untuk keperluan informasi dan komunikasi

Kompetensi Dasar :
Membuat homepage sederhana

Rencana Pelaksanaan Pembelajaran (RPP) :
Untuk RPP, dapat diunduh di sini

Materi :

• HTML adalah suatu format data yang digunakan untuk membuat dokumen hypertext yang dapat dibaca dari satu platform computer ke platform computer lainnya tanpa perlu melakukan suatu perubahan apapun
• Dokumen HTML disebut sebagai markup language karena mengandung tanda-tanda tertentu yang digunakan untuk menentukan tampilan suatu teks dan tingkat kepentingan dari teks tersebut dalam suatu dokumen.
• Perbedaan dokumen HTML dengan document teks adalah bahwa anda dapat memberikan suatu format tertentu, seperti bentuk tebal, miring, form, list, table pada dokumen HTML sedangkan pada teks biasa anda tidak dapat melakukannya. Disamping itu adalah adanya elemen-elemen HTML beserta tag-tagnya ( ditulis dengan tanda <> )
• Untuk membuat dokument HTML, dapat digunakan beberapa editor seperti Notepad atau Notepad++ ,wordpad maupun dreamweaver

DASAR-DASAR HTML :
A. Element

Dibagi menjadi dua kategori utama, yaitu elemen-elemen yang memberikan informasi tentang dokumen tersebut seperti judul dokumen atau hubungannya dengan dokumen lainnya, serta yang kedua adalah elemen yang menentukan bagaimana isi suatu dokumen ditampilkan oleh browser internet, seperti paragraph, list, table, dsb
B. Tag
Tag dinyatakan dengan tanda lebih kecil ( < ) dan tanda lebih besar (> ), tag biasanya merupakan suatu pasangan yang disebut tag awal dan tag akhir , sebagai contoh untuk menampilkan teks dalam format miring digunakan elemen I, yang dinyatakan seperti berikut :

<I> Teks ini akan terlihat miring di browser</I>

<B>Teks ini akan terlihat tebal di browser </B>

Note : HTML tidak membedakan antara huruf besar dan huruf kecil dari suatu elemen, semuanya akan memberikan hasil yang sama. HTML tidak membenarkan penulisan tag yang tumpang tindih, seperti :

<Tag1>Teks untuk tag1 <Tag2>

Teks untuk tag2 </Tag1>></Tag2>

C. Atribut
Tag awal bisa memiliki beberapa buah atribut atau properti yang menyatakan karakteristik dari tag-tag tersebut, misalnya dalam <P ALIGN=”center”>, atribut dengan nama ALIGN mempunyai nilai “center” yang berfungsi untuk menengahkan paragraph. Bahkan tag bias mengandung beberapa atribut, seperti pada <FONT FACE=”Arial” SIZE=8 COLOR=”red”>yang menyatakan jenis font, ukuran serta warna font atau huruf yang digunakan.
D. Struktur
Dokumen HTML mempunyai 3 buah tag utama yang membentuk struktur dari dokumen tersebut, yaitu :

HTML = untuk menyatakan suatu dokumen HTML

HEAD = memberikan informasi tentang dokumen

BODY = menyimpan informasi / data yang akan ditampilkan dalam dokumen HTML

Strukturnya dapat dilihat seperti berikut :

<HTML>

<HEAD>

*** Bagian HEAD ***

</HEAD>

<BODY>

*** Bagian BODY ***

</BODY>

</HTML>

Baiklah,kita akan mulai dari mengenal tag-tag yang ada dalam HTML dan kemudian mencoba mempraktikannya menggunakan editor Notepad++ yang di awal sudah kita download, bebrapa tag yang akan kita pelajari adalah :

1. HTML Heading
digunakan untuk membuat heading atau bagian judul, contoh :
<h1>Ini adalah contoh heading</h1>
<h2>Ini adalah contoh heading</h2>
<h3>Ini adalah contoh heading</h3>

coba editor

2. HTML Paragraph
digunakan untuk membuat paragraf teks,
contoh :
<P ALIGN="Left">Ini adalah contoh paragraf rata kiri</P><br><P ALIGN="Center">Ini adalah contoh paragraf rata tengah</P><br><P ALIGN="Right">Ini adalah contoh paragraf rata kanan</P>
hasil :
Ini adalah contoh paragraf rata kiri

Ini adalah contoh paragraf rata tengah

Ini adalah contoh paragraf rata kanan

3. HTML Image (<IMG SRC..>)
digunakan untuk menampilkan gambar (jog,bmp,gif,png,ico).
syntax : <IMG SRC="URL_Gambar" >
contoh :
<IMG SRC="http://sman3-smg.com/unduh/34.jpg" height=300 width=200 alt="baner karakter">

hasilnya:



4. HTML MARQUEE (<MARQUEE>)
digunakan untuk menampilkan teks berjalan,
syntax : <MARQUEE >Teks</MARQUEE >
contoh :
<MARQUEE direction=left scrollamount=5>Teks ini berjalan dari kanan ke kiri</MARQUEE>

hasilnya:

Teks ini berjalan dari kanan ke kiri
HTML
cobalah tulis tag HTML di bawah ini (latihan1.html) :

<HTML>

<HEAD>

<TITLE> Home Page Pribadiku </TITLE>

</HEAD><FONT COLOR=“RED”>

<MARQUEE DIRECTION=“Right” >WELCOME In MY PERSONAL WEB </MARQUEE><BR>

<HR SIZE=10 WIDTH=350 ALIGN=“center”>

<BODY BGCOLOR=“BLUE”>

<FONT COLOR=“ORANGE”>

<P ALIGN=”center”>

Hello….Apakah anda sudah mengetahui cara membuat home page ? jika belum, mari kita mempelajarinya bersama-sama menggunakan HTML, kelihatannya rumit tapi ternyata menarik…</P>

<P ALIGN=”left”> Anda harus rajin menulis, mengcopy, atau bahkan cut & paste untuk mempercepat penulisan tag di dokumen notepad…</P>

</BODY>

</HTML>