21
D. Aktifitas Pembelajaran
Dalam kegiatan ini peserta diklat akan melakukan pengformatan dokumen web menggunakan tag-tag HTML. Bentuk kelompok diskusi setiap kelompok terdiri dari
3-4 orang. Bacalah seluruh langkah dibawah ini kemudian lakukan dengan teliti. 1. Pasang dan konfigurasi perangkat teks editor Notepad++, Sublime Text dll.
2. Buat dokumen atau halaman web dengan tampilan dalam web browser seperti terlihat dibawah ini.
2.1. Pengformatan teks HTML
22
23
24 2.2.
Bekerja dengan Hyperlink
Keterangan :
Empire http:www.empireonline.com
Metacritic http:www.metacritic.com
Rotten Tomatoes http:www.rottentomatoes.com
Variety http:www.variety.com
Apabila di klik home maka akan mengarah ke halaman home.
25 2.3.
Bekerja dengan gambar
2.4. Bekerja dengan tabel
2.5. Bekerja dengan Form
26 2.6.
Bekerja dengan Audio dan Video
27 3. Diskusi dengan kelompok tentang tag-tag HTML apa saja yang telah
digunakan dan tag-tag apa saja yang belum diterapkan. Tuliskan dalam lembar kerja 2.1.seluruh tag-tag tersebut, beserta kegunaan atau
fungsinya dan contoh penulisannya. 4. Komunikasikan hasilnya dalam kelompok dan buatlah kesimpulan.
5. Buatlah Laporan dan komunikasikan hasil laporan dan pembahasan dengan tutor.
E. Studi Kasus
Buatlah website sekolah sederhana, simpan dalam folder dengan nama studi- kasus1-1. Sepesifikasi dari website tersebut adalah sebagai berikut
Terdapat tiga halaman utama, halaman home, halaman profil dan halaman kontak.
Dalam website tersebut terdapat sebuah logo dalam setiap halamannya. Halaman home berisi tentang beritaartikel tentang informasi sekolah.
Halaman profil berisi tentang deskripsi sekolah, visi dan misi berupa teks
dan sebuah video. Halaman kontak berisi sebuah form untuk pengiriman pesan oleh
pengunjung. Dari tiga halaman tersebut terdapat sebuah menu yang diberi link yang
dapat mengubungkan antara halaman satu dengan halaman lain. Saudara tidak perlu terfokusberkonsentrasi pada harfiah isi dari website,
baik teks, gambar, video. Diperbolehkan menggunakan standar mendemontrasikan elemen seperti lorem ipsum atau yang lain sesuai
keinginan saudara agar pengerjaan bisa berjalan dengan cepat dan tidak banyak membuang waktu, yang terpenting adalah penggunaan tag-tag
HTML dan website dapat berjalan dengan benar.
F. Rangkuman
HTML adalah markup language untuk mendeskripsikan dokumen web halaman web.HTML singkatan HyperText Markup Language, sebuah bahasa markup
adalah seperangkat tag markup.Dokumen HTML dijelaskan oleh tag HTML, setiap
28 tag HTML menjelaskan isi dokumen yang berbeda, Tag HTML biasanya datang
berpasangan seperti p dan p. Tag pertama dalam pasangan adalah tag awal, tag kedua adalah tag akhir. Tag akhir ditulis seperti tag awal, tetapi dengan
garis miring sebelum nama tag. Tag awal sering disebut tag pembuka, tag akhir sering disebut tag penutup. Elemen HTML ditulis dengan awal tag, dengan akhir
tag, dengan konten di antara HTML, elemen HTML adalah segalanya dari tag awal sampai tag akhir.
G. Umpan Balik
1. Apakah anda memahami tag, elemen dan atribut dalam HTML? 2. Apakah anda sudah bisa menulis dan membaca dokumen HTML?
3. Apakah anda sudah memahami tag-tag HTML beserta mengetahui fungsinya?
29
30
31
32
Mengatur Tampilan Dokumen HTML dengan CSS
A. Tujuan Pembelajaran
Melalui praktikum peserta didik dapat menuliskan CSS dalam dokumen atau halaman HTML dengan benar.
B. Indikator Pencapaian Kompetensi
Menuliskan CSS dalam dokumen atau halaman HTML dengan benar.
C. Uraian Materi
1. Definisi CSS CSS singkatan Cascading Style Sheets, CSS mendefinisikan bagaimana elemen
HTML yang akan ditampilkan. CSS Bekerja dengan mengaitkan aturan denga elemen HTML, aturan-aturan ini yang nantinya mengatur bagaimana elemen
ditampilkan. Dalam menggunakan sebuah CSS terdapat dua unsur, yaitu
selektor
dan
declaration
.
Selektor
: Merupakan merupakan penunjuk elemen yang akan diatur style-nya.
Declaration
: Merupakan deklarasi bagaimana sebuah elemen ditata. Dalam deklarasi terdapat dua unsur yaitu
property dan
value .
Property
menunjuk aspek elemen yang ingin dirubah, misal font, warna, lebar. Sedangkan
value adalah pengaturan yang digunakan untuk propertu
yang dipilih. Contoh jika anda ingin menentukan properti font-family, maka value-nya adalah arial, consolas, calibri.
33 Gambar 6. Struktur penulisan CSS
Dalam CSS juga terdapat cara lain dalam mendefinisikan sebuah selektor, yaitu
id selektor
dan
class selektor .
id selektor
id digunakan untuk mendefinisikan style pada elemen yang unik dan hanya bisa digunakan sekali dalam satu elemen.
Cara mendefinisikan: header { color: red } Contoh cara mengakses: div id=”header”
class selektor
class digunakan untuk mendefinisikan style pada elemen yang serupa, dan bisa digunakan beberapa kali untuk beberapa elemen.
Cara mendefinisikan: .body { text-align: center } Cara mengakses: div class=”body”
2. Cara Menerapkan CSS dalam HTML
Terdapat tiga cara atau pendekatan dalam menerapkan style sheet dalam dokumen HTML. Tiga cara tersebut adalah inline, internal dan eksternal.
Inline
Dengan cara ini kita bisa menerapkan style per-tag melalui atribut style. Contoh:
p style=”color:red;
ini adalah sebuah paragraf p
Internal
34 Dengan cara ini, keseluruhan aturan style didefinisikan ke dalam satu blok
dalam dokumen HTML kemudian digunakan dalam elemen-elemen HTML.
Contoh:
DOCTYPE html html
head title
Using Internal CSS title
style type
= textcss
body {
font-family : arial;
background-color : rgb185,179,175;}
style head
body h1
Potatoes h1
body html
Eksternal
Seluruh pendefinisian style diletakan di file yang ber-ekstensi CSS dan dikaitkan dengan dokumen HTML.
Contoh:
DOCTYPE html html
head title
Using eksternal CSS title
link href
= style.css
type =
textcss rel
= stylesheet
head body
h1 From Garden to Plate
h1 p
A i
potager i
is a French term for an ornamental p
body html
File style.css
body {
font-family : Arial, Verdana, sans-serif;}
h1 ,
h2 {
color : ee3e80;}
p {
color : 665544;}
Kategori