BAB I HTML DAN XHTML

INTERJAR

BAB I HTML DAN XHTML A. DEFINISI HTML Apa itu HTML? HTML atau Hypertext Markup Language terdiri dari 2 bagian utama, yaitu:


Hypertext, diartikan sebagai suatu link yang dapat dibuat pada halaman web, yang mengarahkan pengunjung ke halaman web lainnya, atau secara praktis hal-hal lain pada internet. Berarti informasi di dalam suatu web dapat di akses dari manapun.




Universalitas, berarti dokumen HTML disimpan hanya berupa file teks.

Jadi, HTML adalah sebuah bahasa yang universal yang dapat diakses dari mesin apapun (Windows, Macintos, dll) yang berfungsi sebagai sarana penukaran informasi di dalam internet. Chapter 1 (Basic) bodygoeshere

Chapter 2 Heading, digunakan untuk memberikan judul atau sub judul pada dokumen html. Tag heading selalu di buka dengan dan ditutup dengan , y merupakan ukuran dari heading dari 1 sampai 6 (1 yang terbesar, dan 6 yang paling kecil).

H1: Lab Manajemen Menengah Gunadarma

H2: Lab Manajemen Menengah Gunadarma

H3: Lab Manajemen Menengah Gunadarma

H4: Lab Manajemen Menengah Gunadarma

H5: Lab Manajemen Menengah Gunadarma

H6: Lab Manajemen Menengah Gunadarma

LABORATORIUM MANAJEMEN MENENGAH

1

LABORATORIUM MANAJEMEN MENGENGAH

Chapter 3 Text Formating.....

Laboratorium laboratorium

Manajemen praktikum

Menengah

penunjang

merupakan

perkuliahan

di

salah

satu

Universitas

Gunadarma. Mata kuliah yang diajarkan di Laboratorium Manajemen Menengah salah satunya adalah Internet salah

dan

satu

Jaringan.

Laboratorium

laboratorium

Manajemen

praktikum

Menengah

penunjang

merupakan

perkuliahan

di

Universitas Gunadarma. Mata kuliah yang diajarkan di Laboratorium Manajemen Menengah salah satunya adalah Internet dan Jaringan.

Laboratorium Manajemen Menengah merupakan salah satu laboratorium praktikum penunjang perkuliahan di Universitas Gunadarma. Mata kuliah

yang

diajarkan

di

Laboratorium

Manajemen

Menengah

salah

satunya adalah Internet dan Jaringan

Selain

Internet

dan

Jaringan

ada

beberapa

mata

kuliah

lainnya

seperti

1. Riset Operasional
2. Manajemen Operasional
3. Manajemen Keuangan
4. Manajemen Jasa
5. Marketing Communication

BAB I HTML dan XHTML

2

LABORATORIUM MANAJEMEN MENGENGAH

Chapter 4 Link And Images

ditutup dengan

Example:

href

="http://www.labmamen.gunadarma.ac.id">
size=5>Laboratorium Manajemen Menengah Gunadarma

The Navigation Akan sangat menyenangkan bila hanya dengan meng-click sebuah link, kita langsung menuju bagian halaman dalam sebuah web page. Caranya adalah gunakan tag link
href>.

Letakkan text pada teks link,

kemudian tambahkan


name="name_of_area">text

pada daerah yang

dituju.

BAB I HTML dan XHTML

3

LABORATORIUM MANAJEMEN MENGENGAH

Chapter 5 Table Table dimulai dengan dan ditutup dengan . Unsur utama dari table yaitu dan digunakan untuk membuat sebuah baris baru pada table, sedangkan digunakan untuk membuat kolom. Didalam table kita bisa menambahkan beberapa atribut diantaranya border, width, height, cellspacing, bgcolor, background

dll.

Example :

Membuat Tabel

Ini kolom 1 pada baris 1	Ini kolom 2 pada baris 1
Ini kolom 1 pada baris 2	Ini kolom 2 pada baris 2

A

color="blue">Tabel

sebagai

bingkai

dari

paragraf

Tabel memiliki peranan sangat penting dalam tampilan sebuah web page. Tanpa tabel desainer akan mengalamai kesulitan dalam mendesain sebuah halaman web. Kalau anda perhatikan website yan memiliki tampilan yang tersusun rapi. Sebenarnya itu adalah tabel hanya saja atribut border="0" sehingga tabel seakan tidak ada. Perlu diingat tag-tag pada html dapat mengandung unsur yang sama. BAB I HTML dan XHTML 4 LABORATORIUM MANAJEMEN MENGENGAH Contohnya di dalam sebuah tabel terdapat tabel lagi. Di bawah ini adalah tabel yang berada di dalam tabel utama border="1" style="border-collapse: collapse" bgcolor="white" bordercolor="black" cellpadding="8" width="80%">
Nama Barang	Harga Barang
Monitor	Rp. 500.000,-
CDRW	Rp. 245.000,0
Keyboard	Rp. 220.000
Hardisk	Rp. 600.000

BAB I HTML dan XHTML

5

LABORATORIUM MANAJEMEN MENGENGAH Chapter 6 Form.... Tag

berguna untuk mengirimkan(mem-post) variabel yang bersisi data ke file tujuan yang memproses variabel tersebut. Tag-tag yang biasa digunakan bersama tag form adalah tag <select> dan . Atribut form yang banyak digunakan adalah method dan action. Atribut method menentukan jenis pengiriman data bisa berupa “POST” atau “GET”. Sedangkan action adalah file tujuan yang akan memproses data yang ada diantara tag <form>...</form>. Untuk lebih jelas, perhatikan tag berikut <form method =post action="proses_chpater6.php"> <center> <h1>LABORATORIUM MANAJEMEN MENENGAH<br>UNIVERSITAS GUNADARMA <h2>Form<br /> <br /> Data<br /> <br /> Praktikan<br /> <br /> Serta<br /> <br /> Kritik<br /> <br /> Saran<br /> <br /> Untuk<br /> <br /> Asisten</h2></center> <hr> <br> <table> <tr> <td align=right>NAMA PRAKTIKAN</td> <td><input type=text name="nama" size=40></td> </tr> <tr> <td align=right>TANGGAL LAHIR</td> <td><input type=text name="tanggal"></td> </tr> <tr> <td align=right>CONTACT</td> <td><input type=text name="contact"></td> </tr> <tr> <td align=right>ALAMAT</td> <td><input type=text name="alamat" size=40></td> </tr> <tr> <td align=right>JENIS KELAMIN</td> <td><input type=radio name="kelamin" value="LK">Laki - Laki <input type=radio name="kelamin" value="PR">Perempuan</td> </tr> <tr> <td align=right>AGAMA</td><br /> <br /> BAB I HTML dan XHTML<br /> <br /> 6<br /> <br /> LABORATORIUM MANAJEMEN MENGENGAH <td><input type=checkbox name="Islam" value="I">Islam <input type=checkbox name="Katolik" value="K">Katolik <input type=checkbox name="Protestan" value="P">Protestan <input type=checkbox name="Hindu" value="H">Hindu <input type=checkbox name="Budha" value="B">Budha </tr> <tr> <td align=right>FAKULTAS</td> <td><select name="FAKULTAS"> <option>Ekonomi <option>Ilmu Komputer <option>Teknik Industri <option>Teknik Sipil dan Perencanaan <option>Sastra <option>Psikologi </td> </tr> <td align=right>JENJANG</td> <td><select name="JENJANG"> <option>S3 <option>S2 <option>S1 <option>D3 <option>D2 <option>D1 </td> </tr> <td align=right>KRITIK SARAN</td> <td><textarea name="kritik_saran" rows=6 cols=40>Tuliskan Kritik dan Saran Anda di Sini

BAB I HTML dan XHTML

7

LABORATORIUM MANAJEMEN MENGENGAH Hasil output dari tag diatas terlihat seperti di bawah ini

B. DEFINISI XHTML Apa Itu XHTML XHTML adalah HTML yang ditulis ulang oleh W3C (World Wide Web Consortium) dengan menggunakan XML. Bahasa ini mempunyai semua fitur dari HTML dan dapat dibaca oleh semua browser yang tersedia, karena XHTML adalah derivate dari HTML. Pengguna yang terbiasa menggunakan HTML tidak akan mengalami kesulitan yang berarti dalam menggunakan XHTML.

C. PERBEDAAN ANTARA HTML DAN XHTML


HTML tidak memperdulikan apabila kita menggunakan syntax html, head, dan DOCTYPE, sementara XHTML membutuhkannya.




Penggunaan HTML memungkinkan penghilangan beberapa closing tag, sedangkan pada XHTML dibutuhkan penggunaan closing tag bahkan untuk tag kosong sekalipun.

BAB I HTML dan XHTML

8

LABORATORIUM MANAJEMEN MENGENGAH


Penggunaan HTML memungkinkan untuk menghilangkan tanda petik (“”) pada nilai atribut yang mengandung huruf, angka, dan empat simbol sederhana (-, ., _, dan ;), sedangkan XHTML membutuhkan tanda petik tersebut untuk setiap atributnya.




Penggunaan HTML tidaklah Case Sensitive, sementara XHTML mengharuskan semua elemen, atribut, dan nilai yang telah ditetapkan sebelumnya ditulis dengan huruf kecil.




Penggunaan HTML mengizinkan penghilangan nilai yang mempunyai nama yang sama dengan atribut, sedangkan XHTML menekankan bahwa setiap nilai harus didefinisikan dan dideklarasikan secara eksplisit.

D. PENGGUNAAN HTML DAN XHTML Kapan kita menggunakan XHTML? Dalam penggunaannya untuk membuat suatu halaman web, kita harus mengetahui adanya aturan mengenai penggunaan HTML ataupun XHTML. Ada beberapa kondisi yang harus dipenuhi:


Semakin besar suatu situs, semakin penting penggunaan CSS dan XHTML. Penggunaan HXTML dan CSS membuat situs lebih mudah untuk diimplementasi, dan merubah pengaturan pada situs serta membuat halaman lebih terstruktur agar dapat dipakai di kemudian hari.




Banyak perusahaan dan lembaga pemerintahan yang mensyaratkan untuk setiap websites dapat digunakan oleh orang yang cacat. Hal ini diartikan bahwa pembuatan web harus memungkinkan penggunaan XHTML dan disertai dengan pengaturan CSS.




Situs komersial skala besar yang menginginkan semua orang dapat mengakses web mereka dapat menggunakan transitional XHTML, menggunakan beberapa tag HTML untuk dukungan yang lebih luas dan juga mengandalkan stabilitas XHTML.




Situs minimalis dan penggunaan web pribadi dapat menggunakan keuntungan dari sintax HTML yang mudah, serta didukung dengan pengaturan CSS yang berkinerja tinggi.

BAB I HTML dan XHTML

9

LABORATORIUM MANAJEMEN MENGENGAH CSS (Cascading Style Sheet) CSS berguna untuk mendefinisikan tampilan dari sebuah halaman web. Sebuah style sheet sebenarnya adalah file teks yang mengandung satu atau lebih aturan yang ditentukan melalui properti dan tampilan nilai dari beberapaelemen di dalam halaman web yang seharusnya ditampilkan. Ada beberapa properti CSS untuk mengontrol pengaturan standar seperti tipe font dan warna, property layout seperti penempatan posisi dan float, kontrol untuk pencetakan. CSS juga memiliki beberapa properti dinamik yang memungkinkan suatu item untuk ditampilkan lalu kemudian menghilang dan sangat berguna untuk pembuatan komponen interaktif. Sampai saat ini ada beberapa versi dari CSS, namun versi yang mempunyai dukungan terbaik adalah CSS versi 2. Alasan penggunaan CSS versi 2 adalah banyaknya browser yang mendukung CSS versi 2.

Berikut ini contoh penggunaan CSS secara singkat: #container { padding-left: 20px; padding-top: 20;px font-family: arial, times new roman; font-weight: normal; font-size: 14pt; }

PENGKODEAN-SYNTAX HTML Dalam pengkodean HTML, memiliki beberapa cirri khas, yaitu:


Perintah pengkodean HTML umumnya berpasangan. Misal: penulisan harus diakhiri




Terbagi menjadi dua golongan, yaitu kepala dan badan.




Pada bagian kepala ditandai dengan dan , sedangkan bagian badan/isi ditandai dengan dan .




Pada bagian kepala kita bisa menentukan judul dokumen HTML, yang ditulis dengan tag

BAB I HTML dan XHTML

10

LABORATORIUM MANAJEMEN MENGENGAH E. MERANCANG HOMEPAGE DENGAN MACROMEDIA FLASH

Link Berpindah ke sebuah Frame atau Scene •

Gunakan statement Go To untuk berpindah ke sebuah frame yang spesifik atau scene dalam movie. Ketika sebuah movie berpindah ke sebuah frame, anda akan menemui pilihan untuk menghentikan movie pada sebuah frame baru atau menjalankan dari frame tersebut.

•

Behaviour yang default adalah untuk berpindah ke sebuah frame dan menghentikan movie.

•

Statement Go To memiliki parameter sebagai berikut: Scene menyatakan sebuah scene tujuan. Jika anda memilih scene yang sedang digunakan atau sebuah scane yang telah diberi nama, anda dapat menyatakan sebuah frame dengan scene tersebut. Jika anda memilih scene selanjutnya atau yang sebelumnya movie tersebut akan berpindah ke frame pertama dari scene tersebut.

•

Frame menyatakan sebuah scene yang aktif atau sebuah frame yang telah dinamai dan dispesifikasi dengan scene option. Anda dapat memasuki sebuah frame dengan nomor, label atau sebuah ekspresi yang menilai pada sebuah nomor atau label frame. Anda juga dapat menspesifikasikan frame sebelumnya atau sesudahnya. Sebagai contoh statement di bawah ini mengindikasikan sebuah frame bahwa lima frame selanjutnya dari kumpulan frame berisi aksi: Go To and Stop (_currentframe + 5)

•

Go To dan Play memerintahkan movie untuk tetap berjalan dari frame yang telah ditentukan. Ketika pilihan ini off, movie berhenti pada frame yang telah ditentukan.

Berpindah ke Sebuah URL Berbeda Gunakan statement Get URL untuk memindah sebuah dokumen dari sebuah URL ke dalam sebuah windows, atau melewatkan variable-variabel ke aplikasi yang lain yang telah didefinisikan pada URL tertentu. Untuk mencoba action ini, file yang akan di load harus berada pada lokasi yang telah ditentukan  Parameter - parameter yang terdapat dalam Get URL action adalah sebagai berikut :


URL mendefinisikan alamat URL yang mana yang akan menampilkan atau meload dokument yang diinginkan.




Window mendefinisikan jendela/window atau frame HTML yang mana merupakan tempat dokumen yang kita inginkan diload atau ditampilkan. Kita bisa

BAB I HTML dan XHTML

11

LABORATORIUM MANAJEMEN MENGENGAH menuliskan atau memasukan nama dari window atau frame yang kita inginkan atau cukup kita masukan suatu ekspresi. Kita juga dapat memilih dari nama target yang baku yang telah ditentukan oleh aplikasi flash, yaitu : / -self mendeflnisikan frame yang sedang digunakan pada window yang sedang aktif, atau pada dirinya sendiri. / -blank mendefinisikan sebuah window yang baru. / _parent mendefinisikan parent dari frame yang sedang aktif. / _top mendefinisikan frame yang berada pada level yang paling tinggi yang terdapat pada window yang sedang aktif.




Variables menjelaskan dan menentukan apakah menggunakan GET atau POST untuk mengirimkan variabel - variabel, atau bahkan tidak mengirimkan variabel sama sekali. Metoda GET menambahkan variabel - variabel pada akhir dari URL dan biasanya digunakan jika hanya sedikit atau beberapa variabel saja yang terlibat. Metode POST mengirimkan header yang terpisah dan mampu mengirimkan string yang banyak.

Action Script 1. Kegunaan script , berguna untuk: •

mengontrol frame, movie clip, symbol, tombol, maupun berinteraksi dengan movie lainnya.

Untuk menampilkan action script pada frame : a. Klik kanan pada frame pilih properties. b. Muncul kotak dialog dan ada tab label, sound, actions, tweening, pilih tab actions .Klik tombol “ + “ dalam tab actions. Dan akan muncul beberapa action script

BAB I HTML dan XHTML

12

LABORATORIUM MANAJEMEN MENGENGAH

2. Fungsi Go To


Kosa

kata

GoTo

merupakan

pernyataan

percabangan

bahasa

pemprograman umum.


Penerapan kosa kata ini sering dilakukan pada frame pada baris waktu (Time Line).




Kosa kata Go To pada prakteknya sering dirangkai bersama pernyataan Stop atau Play.




Bentuk penulisan : Go To {and} {Stop/Play} target {and}

3. Fungsi Play dan Stop


Play adalah pernyataan umum dimana animasi akan dijalankan apabila menemukan instruksi.




Stop adalah pernyataan umum dimana animasi akan dihentikan apabila menemukan instruksi ini.

4. Fungsi Set Variabel Untuk mendeklarasikan suatu variabel sebelum dipakai pada tubuh program, penulisan yang berlaku adalah sebagai berikut : set variable : nama-variable = nama-operand dimana nama variable dan nama operand merupakan tipe data string atau angka. Apabila nama variable bertipe string maka harus diapit dengan tanda “”. 5.

Memasukkan Action Script ke URL Sekarang anda berada dalam stage utama dan ada symbol tombol disana : a. Klik kanan pada tombol dan pilih properties. b. Muncul kotak dialog pilih tab actions. c. Klik tanda ""+" dan pilih get URL. d. Masukkan alamat URL anda ke kotak dialog bagian kanan bertulis URL. e. Simpan file flash anda dan beri nama file dengan ekstention “FLA”.

BAB I HTML dan XHTML

13

LABORATORIUM MANAJEMEN MENGENGAH

Publish dalam bentuk HTML •

Untuk melakukan pengaturan publikasi berbentuk HTML, maka prosedur yang dapat dilakukan adalah pada jendela Publish Setting (Pengaturan Publikasil), klik tab HTML.

•

Pada jendela ini item-item yang harus diperhatikan antara lain :

a. Template Macromedia Flash menyediakan pilihan standar sebagai pilihan standar template. Klik panah bawah, maka anda dapat melihat pilihan pada template yang telah disediakan.

Dalam keadaan standar Macromedia Flash

memberikan pilhan Flash Only. b. Dimensions Pilihan ini digunakan untuk mengatur dimensi objek animasi yaitu tinggi dan lebar objek. Terdapat tiga pilihan yaitu : -

Mact Movie = apabila pemakai ingin mengatur agar lebar dan tinggi objek pada animasi berukuran sama.

-

Pixels = apabila anda ingin pengaturan manual yang dimasukkan.

-

Percent = apabila anda ingin pengaturan manual secara presentase.

c. Playback Pilihan ini berguna untuk mengatur bagaimana animasi Flash berjalan sesudah didownload oleh browser. Macromedia Flash memberikan pilihan standar berupa Display menu. d. Quality Gunanya: -

menentukan bagaimana kualitas obyek grafis ditampilkan.

-

menyediakan pilihan High sebagai pilihan standar, Low (rendah) sampai Best (terbaik).

e. Windows Mode Berguna untuk mengatur bagaimana objek animasi dijalankan pada jendela browser.

BAB I HTML dan XHTML

14

LABORATORIUM MANAJEMEN MENGENGAH

f. HTML Alignment Berguna untuk mengatur bagaimana objek animasi diletakkan pada source HTML dan memberikan penataan. g. Scale Pilihan ini digunakan bersamaan dengan pilihan Dimensions. Pilihan ini juga bergunakan untuk mengatur bagaimana scale objek ditampilkan pada jendela browser. Macromedia Flash memberikan pilihan standar (default) untuk keadaan standar. h. Flash Alignment Pilihan ini berguna untuk mengatur bagaimana objek ditampilkan dan disesuaikan dengan dimensions serta scale yang sudah diatur. i. Show Warning Pilihan ini berguna agar Macromedia Flash menampilkan pesan kesalahan selama publikasi.

BAB I HTML dan XHTML

15

LABORATORIUM MANAJEMEN MENGENGAH SOAL PRAKTIKUM

Gambar Di bawah ini untuk soal 1, 2, dan 3.

a. Buat Source Code untuk gambar di atas dengan menggudakan kode html ! b. Buat Source code untuk gambar diatas dengan menggunakan kode xhtml ! c. Lakukan perubahan terhadap output pada gambar diatas dengan menggunakan kode css (disertai output) ! d. Jelaskan perbedaan antara html dan xhtml ! Gambar Di bawah ini untuk soal nomor 4 dan 5

a. Buat Source Code HTML untuk tabel diatas! b. Buat Source Code CSS untuk tabel diatas ! c. Jelaskan perkembangan HTML sampai dengan versi sekarang ini !

BAB I HTML dan XHTML

16

LABORATORIUM MANAJEMEN MENGENGAH Untuk Soal 8, 9, dan 10 : Buatlah sebuah web page yang isinya data tentang diri anda. Buat semenarik mungkin dengan menggunakan html. Elemen - elemen yang harus ada adalah :  Table  Img  link dan navigasi 8.

Buat dengan menggunakan kode html (disertai kodenya)!

9.

Buat dengan menggunakan kode html dan CSS (disertai kodenya)!

10.

Buat dengan menggunakan Macromedia Flash (disertai caranya)!

BAB I HTML dan XHTML

17