SMK NEGERI 2 KEC. GUGUAKJOBSHEET HTML

Nama Guru: Harifa Gustin Karnela,S.PdSK:Mengelola isi halaman web

Kelas: XKD:Menerapkan dasar-dasar pembuatan web statis

Kode: JUDUL:Menambahkan Marquee, gambar, tabel dan link pada HTML

Langkah kerja :1. Marquee1.1 Membuat Teks Berjalan Dari KiriTag marquee bilamana diterapkan ke dalam sebuah media editor teks, maka secara default akan menghasilkan tampilan objek yang bergerak ke arah kiri atau bisa dibilang objek bergerak dari arah kanan menuju ke kiri. Berikut ini adalah contoh dari penggunaan tag marquee yaitu :

Membuat Teks Berjalan Berikut ini adalah contoh dari teks berjalan : bergerak dari kiri ke kanan

1.2 Membuat Teks Berjalan Dengan AttributSetelah memahami dan menerapkan dasardasar dari tag marquee, maka perlu memahami pemakaian attribut attribut yang telah diberikan pada sebuah media editor teks seperti behavior, height, width, loop,bgcolor, dan style. a. Attribut Behavior

Penerapan attribut pertama yang akan diberikan sebagai contoh adalah behavior. Behavior digunakan untuk menjalankan objek pada Marquee. Nilai yang terdapat pada behavior :1. Scroll, mengulang searah tekscontoh penerapan attribut behaviour dengan nilai yang diberikan adalah scroll.

Membuat Teks Berjalan

Berikut ini adalah contoh dari teks berjalan dengan attribut BEHAVIOR : Objek yang bergerak dengan BEHAVIOR bernilai SCROLL

Simpan dengan nama behavior scroll.html

2. Slide, menggulung searah tekscontoh penerapan attribut behaviour dengan nilai yang diberikan adalah scroll.

Membuat Teks Berjalan

Berikut ini adalah contoh dari teks berjalan dengan attribut BEHAVIOR : Objek yang bergerak dengan BEHAVIOR bernilai SLIDE

Simpan dengan nama behavior slide.html

3. Alternate, teks berjalan memantul atau bolak balikcontoh penerapan attribut behaviour dengan nilai yang diberikan adalah scroll.

Membuat Teks Berjalan

Berikut ini adalah contoh dari teks berjalan dengan attribut BEHAVIOR : Objek yang bergerak dengan BEHAVIOR bernilai ALTERNATE

Simpan dengan nama behavior alternate.html

b. Attribut Width Dan Height

Attribut width dan height berfungsi untuk mengatur panjang dan tinggi dari sebuah jalur objek itu bergerak. Salah satu contoh penerapan dari attribut width dan height pada sebuah tag marquee seperti berikut :

Membuat Teks Berjalan

Berikut ini adalah contoh dari teks berjalan dengan attribut WIDTH dan HEIGHT Objek yang bergerak dengan WIDTH = 200 dan HEIGHT = 100

Simpan dengan nama weight dan height.html

c. Attribut Loop

Loop merupakan atribut yang terdapat pada tag marquee yang berfungsi untuk mengulang beberapa kali sesuai dengan banyaknya jumlah perulangan yang diberikan atau ditentukan. Untuk membuktikan fungsi dari attribut tersebut, lakukanlah seperti contoh berikut yang mana akan diberikan perulangan sebanyak 10 kali, kemudian setelah 10 kali perulangan berakhir maka akan berhenti dan tidak akan muncul kembali objek berjalannya(lenyap).

Membuat Teks Berjalan

Berikut ini adalah contoh dari teks berjalan dengan attribut LOOP : Objek yang bergerak dengan LOOP sebanyak 5 kali perulangan

Simpan dengan nama Loop.html

d. Attribut BgcolorAttibut ini digunakan untuk memberikan warna latar belakang pada jalur objek bergerak. Penerapan didalam sebuah media editor teks sebagai berikut :

Membuat Teks Berjalan

Berikut ini adalah contoh dari teks berjalan dengan attribut BGCOLOR : Objek yang bergerak dengan BGCOLOR

Simpan dengan nama marquee bgcolor.html

e. Attribut Style

Attribut style digunakan untuk memformat tambahan yang ada dalam sebuah attribut tersebut, seperti font, paragraf, border, numbering,dan posisi. Namun disini yang akan dibahas hanyalah beberapa jenis style saja, diantaranya : jenis tulisan, ukuran, dan warna tulisan. Penerapan dalam sebuah media editor teks untuk attribut style dalam tag marquee seperti berikut ini :

Membuat Teks Berjalan

Berikut ini adalah contoh dari teks berjalan dengan attribut STYLE : Objek yang bergerak dengan STYLE font

Simpan dengan nama style font.html

1.3 Membuat Teks Berjalan ke kananMembuat teksatau objek lainberjalan dari arah kanan dapat dilakukan dengan menggunakan attribut direction, dimana fungsi dari attribut ini adalah mengubah atau mengatur arah gerak dari sebuah objek. Salah satu contoh dari penggunaan direction yaitu :

Membuat Teks Berjalan

Berikut ini adalah contoh dari teks berjalan : Objek bergerak dari KIRI ke KANAN menggunakan attribut DIRECTION

Simpan dengan nama direction right.html

1.4 Membuat Teks Berjalan ke AtasMembuat teks atau objek untuk dapat bergerak dari bawah ke atas sesungguhnya tidaklah begitu susah, karena cukup dengan memodifikasi penggunaan attribut direction dengan diberikan nilai up. Bentuk penulisan kode program untuk membuat sebuah tulisan atau objek dapat bergerak ke atas seperti berikut :

Membuat Teks Berjalan

Berikut ini adalah contoh dari teks berjalan ke atas : Tulisan ini bergerak dari BAWAH ke ATAS menggunakan attribut DIRECTION UP

Simpan dengan nama direction up.html

Pergerakanobjekdilihatdarigambar masihtampakterlalu cepat, maka untuk mengatur tempo kecepatan berjalannya digunakanlah scrollamount. Sedangkan penentu waktu tunda gerakan (jeda waktu pergerakan) digunakan Scrolldelay. Keduanya merupakan sebuah attribut tambahan dari tag marquee. Bentuk penulisannya sebagaiberikut : Tulisan ini bergerak dari BAWAH ke ATAS menggunakan atribut DIRECTION UP SCROLLAMOUNT 1

Keterangan :Attribut scrollamount : digunakan untuk mengatur tempo kecepatan gerakan dalam milisecond (ms).Nilai scrollamount : jika bilangan yang dimasukkan kecil maka kecepatan bergeraknya juga akan kecil(pelan atau lambat), begitu pula jika sebaliknya

Berikut bentuk penulisan dari Scrolldelay : Tulisan ini bergerak dari BAWAH ke ATAS menggunakan atribut DIRECTION UP SCROLLDELAY 1

Keterangan :Attribut scrolldelay : digunakan untuk mengatur penentuan waktu tunda gerakan dalam milisecond (ms).Nilai scrolldelay : jika bilangan yang dimasukkan kecil makawaktutunda bergeraknya cepat, begitu pula jika sebaliknya, maka akan tampak bergerak patahpatah.

1.5 Membuat Teks Berjalan ke BawahDirection dengan nilai down merupakan attribut yang digunakan untuk membuat sebuah teks atau objek dapat berjalan dari atas turun ke bawah. Bentuk penulisan kode program seperti berikut :

Membuat Teks Berjalan

Berikut ini adalah contoh dari teks berjalan ke bawah : Tulisan ini bergerak dari ATAS ke BAWAH menggunakan attribut DIRECTION DOWN

Simpan dengan nama direction down.html

1.6 BlinkContoh :

Blink

Welcomee.....

Simpan dengan nama blink.html

Latihan :1. Buatlah halaman web yang terdapat stiker news line seperti yang terdapat pada media televisi !2. Buatlah sebuah testimoni yang dapat berjalan atau bergerak dari bawah ke atas !

2. Format ImageDokumen HTML akan menarik bila ditambah image atau gambar. Format gambar yang dapat ditampilkan : GIF, JPEG, PCX, PNG, WMF, dll. Format gambar yang dikenal oleh hampir semua browser adalah GIF dan JPEGa. Insert imageBerfungsi untuk memasukkan gambar pada html. Terlebih dahulu copykan gambar ke folder penyimpanan anda. Lihat script pada contoh berikut :

Contoh Memasukkan Gambar

Simpan dengan nama insert image.html

b. Width height imageBerfungsi untuk mengatur lebar dan tinggi gambar pada html, lihat pada contoh berikut :

Mengatur Ukuran Gambar

Contoh Mengatur Ukuran Gambar :

Simpan dengan nama weight height image.html

c. Border imageBerfungsi untuk mengatur bingkai atau garis tepi gambar pada html, lihat pada contoh berikut :

Contoh Membuat Border

Contoh Membuat Border Gambar :

Simpan dengan nama border image.html

d. Title imageBerfungsi untuk mengatur judul gambar pada html, lihat pada contoh berikut :

Title Image

Contoh Membuat Judul Gambar :

Simpan dengan nama title image.html

e. Alternatif Imagelihat pada contoh berikut :

Contoh Alternatif Image

Contoh Tulisan Alternatif Gambar :

Simpan dengan nama alternatif image.html

3. TabelTag-tag yang digunakan :untuk pembuatan tabel, dengan atribut BORDER utk memberi bingkai. menentukan judul tabelmembuat baris dalam tabelmembuat judul kolommembuat sebuah sel data

tabel dengan garis

Daftar Jumlah Kelas Per Jurusan Jurusan Jumlah Teknik Komputer dan Jaringan 3 Kelas Multimedia 2 Kelas Rekayasa Perangkat Lunak 1 Kelas

Simpan dengan nama tabel dengan garis.html

Penggabungan sel dengan tag dan

a. Atribut ROWSPAN ditempatkan pada tag

Penggunaan ROWSPAN

Daftar Jurusan

Jurusan Teknik Komputer dan Jaringan Multimedia Rekayasa Perangkat Lunak

Simpan dengan nama rowspan ditempatkan pada tag TD.html

b. Atribut COLSPAN bisa ditempatkan pada tag atau

Penggunaan COLSPAN

Daftar Jurusan

Jurusan Teknik Komputer dan Jaringan3 Kelas Multimedia2 KelasRekayasa Perangkat Lunak 1 Kelas

Simpan dengan nama colspan ditempatkan pada tag TD atau TH.html

c. Pengaturan jarak dalam tabel :CELLSPACING mengatur jarak bagian sel thd tepi dalam bingkai tabel. CELLPADDINGmengatur jarak teks terhadap tepi kiri.

Tombol dengan Tabel

google

Simpan dengan nama jarak dalam tabel.html

4. LinkSitus web biasanya tidak hanya terdiri atas 1 halaman saja (homepage, halaman awal/ pembuka). Bila suatu situs terdiri atas lebih dari 1 halaman, situs tersebut pasti menggunakan hyperlink.a. Link Absolut

Membuat Link Absolut

Silahkan pilih salah satu pencarian yang menjadi tujuan Anda disini : Pencarian Google
Pencarian Yahoo !
Pencarian Facebook
Pencarian SMKN 2 Guguak
Pencarian Elearning SMKN 2 Guguak

Simpan dengan nama Link absolut.html

b. Link Relatif

Membuat Link Relatif

Klik Link Relatif di bawah ini untuk menuju halaman lain :