Jobsheet 2

JURUSAN TEKNIK KOMPUTER DAN JARINGAN
SMK NEGERI 2 MALANG

No. Jobsheet :
2
JOBSHEET PEMROGRAMAN WEB

Materi :
Instruktur : Zulqoidah, S.Kom
Pemrograman HTML Dasar
Waktu : 3 x 45
Text dan paragraf
1.
Tujuan
a. Siswa dapat memahami pemformatan teks dan paragraf melalui atribut pada HTML
b. Siswa dapat mengenal macam-macam tag pemformatan teks dan paragraf pada
HTML
2.
Prosedur Percobaan
a. Buat folder di Drive D:, dengan nama folder nama anda_absen. Misal : nadira_07
b. Buat subfolder prak2 di dalam folder yang sudah dibuat sebelumnya.
c. Bukalah aplikasi web editor (seperti: Notepad, Notepad ++) dan dan ketik beberapa
contoh pemformatan dokumen HTML yang ada dalam kajian teori singkat yang
dianjurkan untuk diuji coba pada contoh di bawah.
d. Simpan elemen-elemen struktur dokumen HTML tersebut dalam format : *.html
e. Jalankan masing-masing contoh elemen-elemen struktur dokumen HTML tersebut
dengan bantuan : Internet Explorer atau Internet Mozilla Firefox atau Opera atau
browser lain yang tersedia di dalam komputer saudara.
3.
Kajian Teori Singkat

a. Line Break
Line break pada HTML digunakan untuk pindah ke baris baru. Tag yang digunakan
adalah dan tidak memerlukan penutup , atau langsung dapat ditulis 
Contoh
Simpan kode di atas dengan nama linebreak.html, lalu buka di browser sehingga
tampak hasilnya seperti berikut.
b. Atribut dalam Tag

Atribut yang ditambahkan dalam tag digunakan sebagai informasi tambahan maupun
untuk memformat suatu elemen pada HTML. Atribut selalu ditambahkan pada tag
pembuka atau start tag. Cara mendefinisikan atribut dengan memberikan informasi
name dan value dari suatu elemen, seperti name=value.
Atribut bgcolor
Atribut bgcolor digunakan untuk memberikan warna pada latar belakang
dokumen HTML, yang disisipkan pada tag <body>. Penggunaannya adalah
sebagai berikut :
<body bgcolor=#xxxxxx>
</body>
#xxxxxx merupakan angka HEX yang menentukan warna, atau dapat pula
menggunakan warna-warna pasti seperti red, green, blue, dst.
Atribut align
Atribut align digunakan untuk mengatur peletakan elemen HTML dalam
masing-masing baris. Value atau nilai yang dapat diberikan pada atribut align
yaitu:
Left : mengatur elemen rata kiri
Right : mengatur elemen rata kanan
Center : mengatur elemen rata tengah
Justify : mengatur elemen rata kanan kiri
Contoh
Simpan kode di atas dengan nama linebreak.html, lalu buka di browser sehingga
c.
Tag untuk Mengatur Teks

Selain menggunakan atribut di dalam tag, pemformatan teks dan paragraf pada
HTML dapat menggunakan berbagai macam tag pemformatan teks, di antaranya:
Bold, Italic, dan Underline
Untuk memberi efek tebal atau bold pada teks tertentu, digunakan tag 
yang kemudian ditutup tag penutup . Format penulisannya adalah
sebagai berikut:
 elemen yang dikenai efek tebal 
Untuk memberi efek miring atau italic pada teks tertentu, digunakan tag 
yang kemudian ditutup tag penutup . Format penulisannya adalah
sebagai berikut:
 elemen yang dikenai efek miring 
Untuk memberi efek garis bawah atau underline pada teks tertentu,
digunakan tag yang kemudian ditutup tag penutup . Format
penulisannya adalah sebagai berikut:
 elemen yang dikenai efek tebal 
Contoh
Simpan kode di atas dengan nama biu.html, lalu buka di browser sehingga
Small, Strong, Emphasized

Subscript dan Superscript
Subscript adalah tulisan yang ukurannya lebih kecil dan letaknya sedikit di
bawah tulisan normal. Tag yang digunakan adalah dan ditutup dengan

Superscript adalah tulisan yang ukurannya lebih kecil dan letaknya sedikit di
atas tulisan normal. Tag yang digunakan adalah dan ditutup dengan

Contoh
Simpan kode di atas dengan nama biu.html, lalu buka di browser sehingga tampak
hasilnya seperti berikut.
Font
Tag font yang disertai dengan atribut seperti size, face, dan color, dapat
digunakan untuk mengatur ukuran, jenis style huruf, dan warna pada elemen
teks atau paragraf pada HTML. Ketiga atribut tersebut dapat digunakan
bersamaan atau salah satu saja, tergantung kebutuhan.
Format penulisannya adalah sebagai berikut:
 elemen teks 
Contoh
Simpan kode di atas dengan nama font.html, lalu buka di browser sehingga
Center
Untuk meletakkan suatu elemen HTML di tengah-tengah layar, dapat pula
digunakan tag center. Format penulisannya adalah sebagai berikut:
<center> elemen HTML </center>
Contoh
Simpan kode di atas dengan nama center.html, lalu buka di browser sehingga
d. Komentar
Komentar adalah bagian dari kode HTML yang diabaikan oleh browser. Kegunaan
komentar dalam kode HTML adalah sebagai keterangan. Sebuah komentar diawali
dengan <!dan diakhiri dengan -->.
Contoh
Simpan kode diatas dengan nama komentar.html, lalu buka di browser sehingga
Gambar . Hasil Tampilan Komentar pada HTML
4.
Tugas
Buatlah tampilan teks HTML di web browser seperti gambar di bawah ini:
Simpan dengan nama tugas.html
Untuk pemilihan warna dan style font tidak harus sama. Berikut ini adalah daftar beberapa
pilihan warna dan style font yang dapat digunakan:

Jobsheet 2

Diunggah oleh

Informasi Dokumen

Deskripsi Asli:

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Jobsheet 2

Diunggah oleh

Hak Cipta:

Format Tersedia

JURUSAN TEKNIK KOMPUTER DAN JARINGAN

SMK NEGERI 2 MALANG

JOBSHEET PEMROGRAMAN WEB

Kajian Teori Singkat

b. Atribut dalam Tag

Tag untuk Mengatur Teks

Small, Strong, Emphasized

Gambar . Hasil Tampilan Komentar pada HTML

Anda mungkin juga menyukai