tik kelas xi

Download TIK kelas xi

Post on 06-Aug-2015

42 views

Category:

Documents

1 download

Embed Size (px)

DESCRIPTION

pelajaran TIK kelas xi

TRANSCRIPT

HTML dan PHP

BAB I STRUKTUR HTML

TIK SMAN 5 Surabaya

HTML (Hypertext Markup Language) adalah sebuah format data yang pada umumnya digunakan sebagai dokumen untuk membangun sebuah halaman web. Dokumen HTML memungkinkan kita untuk mengisikan teks, gambar, audio, video di dalam halaman web. Dokumen HTML disebut markup language karena mengandung tanda-tanda tertentu yang digunakan untuk menentukan tampilan suatu teks dan tingkat kepentingan teks tersebut. Untuk mengawali membuat sebuah dokumen HTML kita harus tahu terlebih dahulu tentang struktur dokumen HTML. Secara umum HTML tersusun dari 3 komponen yaitu: Elemen HTML Heading dokumen (kepala) Body dokumen (badan) Berikut adalah contoh HTML sederhana: Latihan 1.1 html pertamaku Hello world !

1.1 Elemen HTML HTML merupakan dasar atau tulang punggung dalam pembuatan sebuah Web. Dalam setiap file HTML akan selalu didahului dengan tag . Tag ini akan membuat web browser mencoba untuk membaca file yang ada didalam tag tersebut untuk ditampilkan dalam web browser. Pada akhir baris jangan lupa Anda harus selalu mengakhiri tag dengan . Sehingga akan kelihatan bahwa pada setiap tag HTML akan selalu : untuk mengakhiri : Penulisan Tag HTML adalah incase sensitive. Artinya, akan sama dengan atau . * Istilah Penting a. Tag Tag adalah kode yang digunakan untuk me-mark-up (memoles) teks ASCII sehingga membentuk file html. Setiap tag memiliki fungsi sendiri dan selalu dimulai dengan tanda "", misalnya ,, dan lain sebagainya. Kebanyakan tag memiliki pasangan penutup yang harus digunakan untuk menutup tag sebelumnya. Tag penutup tidak harus diletakkan satu baris dengan tag pembuka, melainkan dapat diletakkan dimana saja dan selalu dimulai dengan tanda "", misalnya , , dan lain sebagainya. Contoh: Home Page ---> oleh browser akan ditampilkan sebagai Home Page Home Page ---> oleh browser akan ditampilkan sebagai Home Page b. Atribut

2

HTML dan PHP

TIK SMAN 5 Surabaya

Sebuah tag bisa memiliki satu atribut atau lebih. Atribut digunakan untuk mengendalikan kerja tag bersangkutan. Berikut adalah 3 macam atribut yang mungkin dimiliki oleh sebuah tag: Atribut nama, misalnya ALIGN, WIDTH dll. Atribut tanda sama dengan (=). Atribut nilai, misalnya '60', "80%","red", "index.html" dll. Atribut nilai boleh juga ditulis tanpa tanda kutip, karena itu tiga contoh dibawah ini sama benarnya:

1.2 Elemen HEAD Header akan berfungsi sebagai tanda pengenal pada halaman yang akan Anda buat. Untuk mendefinisikan header dalam tag HTML maka anda harus menambahkan dan tag di bawah tag . Header menjadi komponen yang cukup penting untuk sebuah web. Didalam elemen head terdapat beberapa tag antara lain: Adalah tag yang digunakan untuk memberi judul di pojok kiri atas halaman browser. Formatnya: .... Digunakan untuk mempersingkat penulisan URL dengan memberikan hubungan relatif pada link dari dokumen. Dengan menggunakan base, seorang dapat mengikuti link dari dokumen anda sekalipun dokumen telah berpindah tempat. Contoh : Tidak hanya terdapat dalam elemen head saja tapi juga dalam elemen body. Untuk lebih lengkappnya terdapat bahasan sendiri. Tag yang digunakan untuk memberi informasi lain yang bermanfaat bagi browser atau server selain judul. Adapun atribut dan fungsinya antara lain: Atribut HTTP-EQUIV NAME URL CONTENT Fungsi Menghubungkan elemen META ke respon protocol tertentu Untuk menambahlan keterangan elemen. Jika atribut ini tidak ada diasumsikan sama dengan HTTP-EQUIV Mendefinisikan target dokumen Menunjukkan respon nilai dari properti

*) untuk meta, base, link tidak begitu penting untuk sementara

Latihan 1.2

3

HTML dan PHP

TIK SMAN 5 Surabaya

General Officers of the US Army I think the war is trash. *) untuk link, base dan meta tidak akan tampak di layar

1.3 Elemen BODY Adalah elemen yang wajib ada dalam HTML karena di dalam elemen BODY semua isi halaman page dituliskan. Untuk mendefinisikan body harus diketikan tag dan ditutup dengan tag dibawah tag HEAD. Adapun yang dibahas pada bab ini hanya atribut dari BODY itu sendiri sedangkan tag dari BODY ini merupakan bahasan terbesar dalam buku ini yang akan dibahas di bab berikutnya. Macam-macam atribut tag body antara lain: Atribut Alink Background Bgcolor Bgproperties Leftmargin Link Text Topmargin Vlink Fungsi Menyatakan warna link yang sedang aktif Menytakan file gambar yang digunakan sebagai latar belakang Menyatakan warna yang digunakan sebagai latar belakang Jika diset fixed, membuat suatu watermark yaitu background tetap (tidak ikut menggulung) Mengatur margin kiri dari isi dokumen dengan ukuran pixel Warna dari link yang belum pernah dikunjungi Mengatur warna teks dokumen web Mengatur margin atas dari isi dokumen dengan ukuran pixel Warna link yang pernah dikunjugi

Adapun warna yang digunakan dalam dokumen HTML menggunakan kode heksadesimal atau nama RGB. Berikut kami sajikan tabel warnanya: Warna Black Maroon Green Olive Navy Purple Teal Gray Silver Red Lime Yellow Blue Fuchsia Aqua Kode Heksadesimal #000000 #800000 #008000 #808000 #000080 #800080 #008080 #808080 #C0C0C0 #FF0000 #00FF00 #FFFF00 #0000FF #FF00FF #00FFFF

4

HTML dan PHP

TIK SMAN 5 Surabaya

White

#FFFFFF

Latihan 1.3 Hallo Surabaya Hallo-hallo Surabaya bagaimana kabarmu?
Baik-baik saja Terharu *) catatan: anda harus meletakkan file nama.jpg di folder yang sama dengan tempat file html anda disimpan.

1.4 Membuat, Menyimpan, dan Menjalankan Dokumen HTMLUntuk membuat dokumen HTML di Ubuntu adalah dengan menggunakan program Geany. Didalam geany lah semua rumusan HTML dituliskan. Untuk menyimpan, seperti biasa masuk FileSave As kemudian simpan dengan nama.html dan simpan di dalam folder public_html yang ada di dalam folder smala. Untuk menjalankannya menggunakan firefox web broser atau ice weasel. Semua file yang kita simpan di folder public_html akan dapat dibuka dengan browser yang berada di alamat localhost. Jadi ketikkan di tempat urlnya localhost maka didalamnya akan ada file kita tadi. Kemudian pilih yang akan kita jalankan dan kita bisa melihat hasilnya. Selamat mencoba dan silahkan kerjakan seluruh latihan yang ada di bab ini.

Tiada kesuksesan yang dapat diraih kecuali dengan kesungguhan, dan sebaik-baik kesungguhan itu dimulai dari rasa cinta. Jadi, jika ingin sukses mengerjakan sesuatu maka mulailah untuk mencintai perkerjaan itu.

5

HTML dan PHP

BAB II TEKS DALAM PARAGRAF

TIK SMAN 5 Surabaya

Teks Dalam HTML tidak sesederhana seperti yang dibayangkan. Banyak komponen yang menyertainya agar teks ditampilkan sesuai dengan yang dikehendaki. HTML menyediakan berbagai macam elen antara lain : 2.1 Paragraf Untuk dapat membuat paragraph dalam HTML Anda bisa menggunakan tag dan diakhiri dengan . Anda bisa mengatur paragraph yang Anda buat dengan menggunakan atribut ALIGN dengan dikuti posisi yang Anda inginkan. Nama Left Right Center Fungsi Rata kiri Rata kanan Rata Tengah

Latihan 2.1 Paragraf Dalam perancangan suatu antarmuka terdapat akses-akses penting yang harus diperhatikan. Aspek-aspek tersebut akan sangat menunjang dalam hasil dari perancangan perangkat lunak tersebut. Aspek yang harus diperhatikan tidak hanya dipandang dari satu sisi programnya saja, tetapi juga dari aspek manusianya yang merupakan pengguna dari Dalam perancangan suatu antarmuka terdapat akses-akses penting yang harus diperhatikan. Aspek-aspek tersebut akan sangat menunjang dalam hasil dari perancangan perangkat lunak tersebut. Aspek yang harus diperhatikan tidak hanya dipandang dari satu sisi programnya saja, tetapi juga dari aspek manusianya yang merupakan pengguna dari Dalam perancangan suatu antarmuka terdapat akses-akses penting yang harus diperhatikan. Aspek-aspek tersebut akan sangat menunjang dalam hasil dari perancangan perangkat lunak tersebut. Aspek yang harus diperhatikan tidak hanya dipandang dari satu sisi programnya saja, tetapi juga dari aspek manusianya yang merupakan pengguna dari 2.2 Berpindah Baris Untuk melakukan pindah baris dalam HTML digunakan tag
. Latihan 2.2

6

HTML dan PHP

TIK SMAN 5 Surabaya

Ganti Baris Baris Pertama
Baris Kedua
Baris Ketiga


Begitulah cara berganti baris 2.3 Heading Merupakan sekumpulan kata yang menjadi judul atau subjudul dalam suatu dokumen HTML. Heading akan berbeda dengan tag yang tidak akan muncul dalam halaman web. HTML menyediakan enam tingkat heading. Secara umum heading menggunakan tag dan mempunyai atribut yang sama dengan P yaitu ALIGN. Latihan 2.3 Heading Heading level1 Heading level2 Heading level3 Heading level4 Heading level5 Heading level6 2.4 Garis Pemisah Horisontal Untuk memberi garis pemisah antara satu baris dengan baris lainnya, gunakan elemen . Elemen ini akan membuat garis horisontal sepanjang lebar jendela browser. Atribut yang menyertai adalah : Atribut Fungsi ALIGN Rataan paragraf WIDTH Untuk mengatur panjang garis horizontal yang dapat ditentukan dengan nilai pixel atau persen SIZE Untuk mengatur ketebalan garis horizontal mempunyai nilai dalam satuan pixel NOSHADE Menampilkan garis horizontal tanpa baying-bayang 3-D COLOR Memberi warna pada garis horisontal Latihan 2.4

7

HTML dan PHP

TIK SMAN 5 Surabaya

Pemakaian Tag HR Pesawat Ruang Angkasa
Soviet
Vostok
Soyuz
Amerika
Mercury
Apollo
2.5 Divider Menngunakan tag ... untuk membagi dokumen HTML dalam hierarki yang terstruktur. Teks yang dikelilingi ... akan diformat menurut atribut ALIGN yang ditentukan didalamnya. Latihan 2.5 Pembagian Paragraf Header rata tengah
Tulisan berada diatas baris teks
baris teks ini rata kanan Heading warna biru Teks dalam paragraf berwarn