Pengenalan Web

LAPORAN pengenalan web PERTEMUAN KE 1 dan 2
Disusun Oleh : Nama Nim Jurusan : Mohamad Hanafi : 095410134 : TEKNIK INFORMATIKA
LABOROTARIUM TERPADU
SEKOLAH TINGGI MANAJEMEN INFORMATIKA DAN KOMPUTER
AKAKOM YOGYAKARTA
2011
PERTEMUAN KE-1 PENGENALAN HTML dan XHTML
A. DASAR TEORI Word Wide Web(www) atau web didistribusikan melalui pendekatan hypertext, yang memungkinkan suatu teks pendek menjadi acuan untuk membuka dokumen yang lain. Pada awalnya aplikasi web dibangun hanya dengan menggunakan bahasa yang disebut HTML(hyperText Markup Language) dan protokol yang digunakan HTTP. Pada perkembangan berikutnya, sejumlah script dan objek dikembangkan untuk memeperluas kemampuan HTML. B. PEMBAHASAN Macam-macam aplikasi web Web statis Dibentuk dengan menggunakan HTML saja. Kekurangan aplikasi seperti ini terletak pada keharusan untuk memelihara program secara terus-menerus untuk mengikuti setiap perubahan yang terjadi. Web Dinamis Perubahan informasi dalam halaman-halaman web dapat ditangani dengan perubahan data, bkan melalui perubahan program. Implementasinnya web dikoneksikan dengan database. Terdapat pemrosesan di server untuk menterjemahkan kode PHP menjadi kode HTML. Kode HTML yang diterjemahkan oleh mesin PHP-lah yang akan diterima oleh pemakai (klien). Dengan menggunakan pendekatan web dinamis, dimungkinkan untuk membentuk aplikasi berbasis web (web-based application). Sebagai contoh, sistem informasi akademis berbasis web memungkinkan seorang mahasiswa melihat informasi tentang nilai dari matakuiah-matakuliah yang sudah diambilnya dari luar kampus (di mana saja). Selain itu, pada masa semester baru, mahasiswa dapat memasukkan data KRS (kartu rencana studi) melalui Internet. Mengenal HTML HTML merupakan singkatan dari HyperText Markup Language, yaitu bahasa pemrograman untuk memebangun aplikasi web. Untuk membangun sebuah wen dan mengakses halama web tersebut diperlukan hal-hal berikut: Editor, untuk menliskan kode-kode HTML(seperti notepad,textpad) Web server, sebagai server untuk melayani permintaan klien (seperti Apache, IIS, Xitami) Wb browser, untuk mengakses halaman web
Tag yang ada dalam HTML antaralain <HTML> ..... </HTML> bAgian yang terdapat dalam tag HTML terdri dari:
Kepala
Bagian kepala dalam dokumen HTML ditandai dengan tag berikut: <HEAD> .... </HEAD> Bagian kepala ini digunakan untuk memebuat judul halaman web dengan menggunakan tag berikut: <TITLE> ... </TITLE> Badan Bagian badan dalam dokumen HTML ditandai dengan tag berikut: <BODY> .... </BODY> Bagian badan akan diisikan content yang akan ditampilkan dalam halaman web Aturan dalam menliskan Tag-tag HTML yaitu: Tag ditulis dengan format diawali tanda < dan diakhiri tanda >, seperti <HTML> Tidak boleh ada spasi setelah tanda < contoh : <TITLE> tidak boleh dituliskan dengan <TITLE> Tag boleh ditulis dengan huruf kecil, huruf capital, ataupun kombinasi keduannya.
Contoh pada paraktikum yang dilaksanakan : <HTml> <HEAD> Pada ektensi awal html yaitu ditulis apa yang diperintahkan oleh html yaitu menulis bagian kepala dahulu <TITLE>tag br</TITLE> Didalam kepala ada title yang berisi tag br yaitu untuk memberi judul pada new tab yang dibrowser tersebut. </head> <boDY> Dokumen ini yang akan ditampilkan di web browser anda. - web Statis adalah web yang berisi informasi-informasi yang bersifat statis (tetap). - web Dinamis adalah web yang menampilkan informasi yang bersifat dinamis (berubah-ubah) dan dapat saling berinteraksi dengan user. - perhatikan perbedaan antara yang menggunakan br dan yang tidak, selamat mencoba. Dan selanjutnya yaitu bagian tubuh, bagian tubuh tersebut gunannya untuk mengisikan dalam isi web yang akan ditampilkan pada halaman web tersebut. Untuk tag br dipergunakan mebuat baris baru atau berpindah baris dan setiap tag ditutup dengan slash(/) supaya link dari web tersebut telah berakhir. </BOdy> </HTML>
Pada contoh diatas merupakan contoh HTML yang setipa tagnya ditulis dengan huruf kecil atau huruf besar atau bisa kombinasi keduannya dalam perintah diatas ditulis dengan textpad atau bisa ditulis dengan Notepad setelah selesai penulisannya maka data tersebut disimpan dalam bentuk ekstensi.htm atau bisa dengan .html. sejingga kalau dijalankan maka hasil dari penulisan tag diataas adalah sebagai berikut:
Mengenal XHTML XHTML merupakan generasi berikutnya setelah HTML, tetapi dia menuntut kemampuan lebih tinggi untuk mengoperasikannya. Semua dokumen XHTML harus memilki deklarasi DOCTYPE. Elemen html, head dan body harus ada, dan elemen title harus berada dalam elemen head. Deklarasi DOCTYPE bukanlah bagian dari dokumen XHTML itu sendiri. Dia bukanlah elemen XHTML, sehingga tidak menggunakan tag penutp. Struktur XHTML dalam penggunaanya hampir sama dengan HTML, hanya lebih terstruktur dan konsisten. Berikut ini beberapa perbedaan antara HTML dan XHTML: 1. 2. 3. 4. Element XHTML harus bersarang dengan sempurna Element XHTML harus ditulis dengan huruf kecil Element XHTML harus selalu ditutup Element XHTML harus memliki satu root element
Element XHTML harus bersarang dengan sempurna sedangkan dalam HTML, elemenelemennya bisa ditulis dalam keaadan bersarang tidak sempurna Element XHTML harus ditulis dakam huruf kecil. Sudah cukup jelas, karena spesifikasi XHTML yang mengharuskan semua TAG harus ditulis dengan huruf kecil Element XHTML harus selalu ditutup. Element yang tidak kosong harus selalu ditutup dengan tag penutup Element yang kosong tetap harus ditutup dengan tag penutup atau tag awal harus diakhiri gengan />
Dokument XHTML harus memilki satu root element. Semua element XHTML harus bersarang didalam root element yaitu <HTML>. Semua elemen lainnya dapat memiliki sub element harus ditulis berpasangan dan bersarang dengan yang merupakan element atasannya (parent element). Pada pelaksanaan praktikum: <!DOCTYPE Doctype ditulis di sini> Semua dokumen XHTML harus memilki deklarasi DOCTYPE. Elemen html, head dan body harus ada. Deklarasi DOCTYPE bukanlah bagian dari dokumen XHTML itu sendiri. Dia bukanlah elemen XHTML, sehingga tidak harus menggunakan tag penutup. <html> <head> <title>Halaman web dengan XHTML</title> </head> <body> Melihat perbedaan-perbedaan diatas maka XHTML sangat disarankan bagi desainer web yang menginginkan konsistensi dalam struktur konten halaman webnya. Selai itu, XHTML lebih compatible untuk diintegrasikan dengan CSS (Cascade Style Sheet) dibandingkan dengan HTML. Perhatikan perbedaan tag br yang ada di html dan yang ada di xhtml </body> </html> Komponen yang dijelaskan sangtalah persis pada mengenal html yang pertama dibahas namun pada XHTML tersebut tag harus ditulis dengan huruf kecil berbeda dengan tag html,kenapa dalam penulisa tag br dikasih penutup pada belakangnya dikerenakan mungkin pada rumusnya XHTML kayak begitu slash yang berda dibelakang tag sangat tidak dibaca oleh html. Sehingga pada waktu dijalankan adalah seperti berikut:
C. KESIMPULAN Pada dasarnya terjadi kesalahan pada penulisan tag yang telah dibuat maka sewaktu dijalankan dari browser tidak ada error tapi pada tag tersebut akan ditampilkan tag didalam browser tersebut seharusnya ketka dijalankan browser tersebut tidak akan menampilkan tag tersebut,lain lagi apabila penu;isan tag tersebut tidak sama dalam arti penulisan huruf kecil dan besar kecil kemungkinan kecil pada saat browser dijalankan akan terjadi error. D. LISTING terlampir E. TUGAS <html> <head> <title>surat untuk sahabatku</title> </head> <body bgcolor="pink"> <h1>Salam sahabat karibQ,</h1> Sahabat aku, kita dah lama tak jumpa kembali bagaimanakah kabarmu disana ? semoga dalam lindungan Allah SWT dimana pada waktu kita menjalankan pendidikan SMA kita bersama-sama tak mengenal lelah susah senang kita hadapi berdua, namun akhirnya dirimu dan diriku dipisahkan oleh jarak dan waktu mengapa bisa demikian!karena dirimu telah melanjutkan perguruan tinggi sedangkan aku disini hanya untuk membantu orang tua. lanjutkanlah pendidikanmu janganlah sampai putus asa, seumpama dalam menjalankan pendidikan ada kendala atau sesuatu yang lain tetap tegarlah karena dibalik kesusahan pasti ada kemudahan sahabatmu ini cuma bisa mendoakan dirimu seorang, sahabat itu tidak akan terpisahkan melainkan hanyalah ajal tiba(kematian) Don't forget me sahabatq. <align="right"> <h2>sahabatmu Hanafi</h2> </body> </html> Hasil outputnya :
PERTEMUAN KE-2 PENGATURAN TEKS

A. DASAR TEORI pengaturan teks membuat tampilan dokumen HTML dengan menggunakan permainan warna, dan berbagai jenis pengaturan teks lainnya. Daftar membuat daftar item (list) dalam dokumen html. Dalam membuat dokument teks, kita selalu memerlukan pemformatan teks yang kita buat tersebut agar menjadi indah, mudah dibaca dan sesuai kebutuhan. B. PEMBAHASAN Menampilkan Tulisan / Teks Untuk menampilkan teks dihalaman web, dengan mengetikkan teks dalam tag <body>....<body>....dan untuk mengtur peletakkan teks, ada beberapa tag yang digunakan antara lain : No. Tag Fungsi 1 Center Mengatur posisi teks agar berada di tengah 2 DIV Mengatur teks yang memilki karakteristik yang sama 3 B Menebalkan cetakan teks 4 SMALL Menampilkan teks lebih kecil dari pada ukuran normal 5 BIG Menampilkan teks lebih besar dari pada ukuran normal 6 U Menambahkan garis bawah pada teks 7 I Menampilkan teks dengan bentuk tulisan miring 8 SUB Menampilkan teks sebagai subskrip 9 SUP Menampilkan teks sebagai superskrip 10 TT Menampilkan teks seperti ketikan menggunakan mesin ketik 11 FONT Mengatur jenis. Ukuran, dan juga warna font. Dalam tag ini bisa mengandung banyak atribut, antara lain face, color Warna font Warna font dapat diatur pada BODY dan juga tag FONT. Untuk warna latar belakang teks dapat ditentukan dengan menggunakan atribut BGCOLOR pada tag BODY. Dan untuk warna latar depan teks diatur melalui atribut COLOR pada tag FONT.
<HTML> <HEAD><TITLE="Halaman web dengan HTML"></TITLE></HEAD> Untuk bagian <title> yaitu untuk digunakan judul pada tab halaman web untuk <head> yaitu untuk digunakan halaman pembuatan web pertama dan diikuti oleh <html> <BODY bgcolor="#e4e4e4"> Pewarnaan pada bigground belakang pada halaman web. Ada dua cara memberi nilai pada atribut color ini, yaitu dengan menunjuk langsung nama warna yang dimaksud dalam bahasa inggris, atau bisa juga dengan kumpulan warna RGB(red green dan blue). Kita Belajar HTML..... Yuk!!! Hehehehehheheh......... Mengatur warna teks atau mengubah warna teks menjadi merah sehingga pada hasilnya akan berubah menjadi warna merah
</BODY> </HTML> Menutup tag pada sintak web yaitu digunakan tanda slash
Hasilnya :
Adapun warna-warna telah diberikan pada situs-situ web pada pemberian warna didepan diawali dengan tanda pagar setelah tanda petik. Ukuran font Ukuran font ditentukan oleh atribut size
<HTML> <HEAD><TITLE="Halaman web dengan HTML"></TITLE></HEAD> <BODY> Teks dengan ukuran normal untuk tanda br seperti yang dipelajari sebelumnya yaitu untuk membuat baris baru atau berpindah baris Teks dengan ukuran font 4 Kita Belajar HTML..... Yuk!!! Teks dengan ukuran font 5 Hehehehehheheh...... Aturan <....size...> yaitu untuk menentukan ukuran sebuah teks dengan ukuran 1 sampai dengan 7. Ukuran 1 untuk menampilkan teks yang paling kecil, ukuran 7 untuk menampilkan teks yang paling besar </BODY> </HTML
Maka hasilnya adalah sebagai berikut :
Membuat Garis Horisontal Tag untuk membuat sebuah garis horizontal dapat menggunakan tag <HR> Beberapa atribut pada tag HR antara lain: No. Atribut Fungsi 1. SIZE Menentukan ketebalan garis 2. WIDTH Menentukan lebar garis 3. ALIGN Menentukan peletakan teks dalam baris 4. NOSHADE Mengatur agar baris tidak disertai bayangan 5. COLOR Menetukan warna garis Contohnya sebagai berikut :
<HTML> <HEAD><TITLE="Halaman web dengan HTML"></TITLE></HEAD> <BODY> STMIK AKAKOM<HR align="center" color="#0000FF" noshade size="10"> Lebar garis diatur melalui presentase terhadap garis penuh. Semakin kecil persentasenya maka garis yang dihasilkan semakin kecil, maka dari script ini akan menampilkan garis horisontal berwarna biru dengan ukuran 10 dan tidak menyertakan bayangan. Jalan Raya Janti Kanoman No.143 Yogyakarta 55198 </BODY> </HTML>
Hasilnya :
Daftar item Seringkali sebuah dokumen berisikan teks yang berupa daftar sehingga penulisannya harus ditampilkan dalam bentuk sebuah daftar item (list). Dengan menggunakan tag, halaman HTML juga dapat menampilkan teks berupa daftar (list). Dalam dokumen HTML kita bisa membuat daftar atau list dengan lima macam cara. Lima macam cara itu adalah : Unordered list, ordered list, definition list, directory list, dan menu list. Tag yang digunakan antara lain : No. Tag Fungsi 1. <UL>....</UL> Menampilkan daftar item (list) tanpa penomoran 2. <LI> Menambahkan tanda bullet didepan masing-masing item. Tag ini ditambahkan dalam daftar item yang ada didalam tag<UL> 3. <OL>.....</OL> Menampilkan daftar item dengan no,or urut 4. <DL>....</DL> Menampilkan daftar teks yang biasa untuk daftar definisi 5. <DIR>....</DIR> Menampilkan daftar tanpa penomoran untuk menangani direktori 6. <MENU>.....<MENU> Menampilkan menu pilihan tanpa penomoran Unordered List Unodered list adalah buket yang mana bulet adalah suatu karakter tertentu, berupa sebuah tanda. Tanda tersebut bisa berupa apa saja, bisa berbentuk lingkaran, kotak, wajik, kaper, daun waru dan sebagainya. Daftar dengan bulet bisa dibuat dengan tag <UL> (unodered list) untuk pembukannya dan </UL> untuk penutupnya. Setiap item didalam list harus didahului dengan tag <LI> (list item). <LI> adalah tag tunggal sehingga tidak memerlukan penutup, tetapi seandainya diberi penutup juga tidak masalah. Berikut adalah format penulisanya. <ul type=...> <li>....</li> <li>....</li> </ul> Penentuan bentuk bullet pada atribut type Nilai untuk type Bentuk bullet
CIRCLE DISC SQUARE
Contoh : <html> <body> Daftar materi kuliah Pengenalan web <ul type="circle"> <li>pengenalan HTML</li> </ul> <ul type="disc"> <li>mengunakan Xara webstyle</li> </ul> <ul type="square"> <li>menggunakan Swismax</li> <li>Lain-lain</li> </ul> </body> </html> Hasil outputnya :
Ordered List Daftar dengan model ordered list adalah daftar dengan tiap itemnya disertai dengan nomor urut. Berikut adalah format penulisannya. <ol type=...> <li>....</li> <li>....</li> </ol>
Type yang bisa digunakan diantaranya : 1,2,3 nomor urut(default) A,B,Churuf kapital a,b,churuf kecil i,ii,iii romawi kecil I,II,III romawi besar Contoh : <html> <body> daftar bahasa untuk membuat software: <ol type="1"> <li>Visuall C++</li> <li>Visual basic</li> </ol> <ol type="A"> <li>borland Delphi</li> <li>Java</li> <li>Lain-Lain</li> </ol> </body> </html> Hasil outtputnya :
Definition List Daftar ini menyediakan tampilan dangan format mirip kamus, dengan definisi suatu istilah diletakkan agak menjorok ke kanan. Tag-tag untuk daftar definisi Tag Keterangan <dl>....</dl> Digunakan untuk menyatakan wadah bagi daftar definisi <dt>....</dt> Digunakan untuk menyatakan wadah bagi istilah yang akan didefinisikan <dd>....</dd> Digunakan untuk menyatakan wadah bagi definisi istilah Contoh :
<html> <body> kamus teknologi informasi <dl> <dt>HTML</dt> <dd>bahasa yang digunakan untuk menyusun web</dd> <dt>HTTP</dt> <dd>protokol yang dipakai untuk menstransfer HTML</dd> </dl> </body> </html> Hasil outputnya :
Spasi Membuat spasi yang lebih dari satu spasi di dokumen HTML tidak semudah kita menspasi tag atau dokumen yang kita ketik, kalaupun kita sudah memberi spasi panjang dari dokumen yang kita ketik, tetap saja browser mengabaikan dan hanya memberi satu spasi. Untuk memberi yang lebih dari satu berturut-turut atau spasi panjang dari dokumen HTML kita, kita bisa menggunakan teknik yang berlaku sekarang .pada mulanya, untuk memberi spasi ganda kita bisa menggunakan teknik yang berlaku sekarang. Pada mulanya, untuk memberi spasi ganda kita bisa menggunakan tag (spacer type=... size=...>, namun itu hanya berlaku untuk browser Netscape dan itupun sekarang sudah tidak berlaku. Untuk membuat spasi ganda, kita bisa menggunakan tag atau keyword sebagai berikut: Penggunakan tag tersebut adalah sebagai berikut. Bila kita membuat satu spasi, kita cukup menspasi langsung dengan menekan tombol spasi di keyboard. Bila kita membutuhkan dua spasi, maka kita menspasi dengan satu spasi dengan menekan keyboard dan spasi yang satunya lagi dengan satu tag diatas. Bila kita ingin dokumen HTML kita mempunyai 3 spasi berturut-turut, maka kita bisa membuat spasi yang pertama dengan menekan tombol spasi di keyboard dan spasi kedua dan ketiga dengan mengetikkan tag dua kali. Begitu juga seterusnya jika kita ingin membuat spasi yang panjang kita bisa menggunakan cara diatas. Directory List Menu List C. KESIMPULAN
Membuat dokumen HTML dengan menggunakan permainan warna, dan berbagai jenis pengaturan teks lainnya, maka bisa dikatakan untuk mengubah teks yang ada dalam web sangat bisa dipahami bagi pengguna/user yang pertama kali mengenali tentang dunia web. D. LISTING telampir E. TUGAS <html> <head> <title>Tugas modul 2</title> </head> <body> <center> Data Pribadi </center> Nama : Mohamad Hanafi Nim : 095410134 Alamat : ngawi Golongan darah : O Hoby : dengerin musik <ul type="square"> <li>maen sepak bola</li> <li>maen voli</li> </ul> Cita-cita : Programmer makanan kesukaan : Nasi Goreng <ul type="disc"> <li>pecel lele</li> <li>tempe penyet</li> <li>rawon khas ngawi</li> </ul> </body> </html> Hasil outputnya:

Pengenalan Web

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Pengenalan Web

Uploaded by

Copyright:

Available Formats

LAPORAN pengenalan web PERTEMUAN KE 1 dan 2

PERTEMUAN KE-1 PENGENALAN HTML dan XHTML

PERTEMUAN KE-2 PENGATURAN TEKS

CIRCLE DISC SQUARE

You might also like