MODUL PENGENALAN WEB DENGAN HTML

MODUL PENGENALAN WEB DENGAN HTML

Apakah web : Web (World Wide Web) merupakan salah satu layanan yang didapat oleh pemakai komputer yang terhubung ke internet, yang dapat memudahkan pengguna komputer untuk berinteraksi dengan pengguna internet lainnya dan mencari informasi yang diperlukan. Web browser : Browser web merupakan software yang digunakan untuk menampilkan informasi dari server web. Contoh dari web browser : Opera, Mozzila, Netscape Navigator, Internet Explorer, Lynx, Konqueror. Server web : Server web adalah komputer yang digunakan untuk menyimpan dokumen-dokumen web, komputer ini akan melayani permintaan dokumen web dari kliennya. Contoh dari web server : IIS, PWS, Apache, Xitami. Pemrograman web (HTML): Dalam pemrograman web, diperlukan suatu file teks yang bernama atau berekstensi HTML (Hypertext Markup Language). Ada dua cara untuk membuat sebuah web page: 1. dengan menggunakan editor teks biasa (notepad, editplus) 2. dengan HTML Editor. Dokumen HTML disusun oleh elemen-elemen seperti : head, body, table, paragraf dan list. Untuk menandai berbgai elemen dalam suatu dokumen HTML, kita menggunakan tag. Tag HTML terdiri atas sebuah kurung sudut kiri (<, lebih kecil), sebuah nama tag, dan sebuah kurung sudut kanan (>, tanda lebih besar). Tag umumnya berpasangan, misalkan tag awal
berpasangan dengan tag akhir
. Struktur Dokumen HTML : Elemen yang dibutuhkan untuk membuat suatu dokumen HTML dinyatakan dengan tag , , dan berikut tag-tag pasangannya. Setiap dokumen terdiri atas tag head dan body. Elemen head berisi informasi tentang dokumen tersebut, dan elemen body berisi teks yang sebenarnya yang tersusun dari link, grafis, paragraf dan elemen lainnya. Berikut ini adalah pola dasar sebuah dokumen HTML : …. Informasi tentang dokumen HTML. …. Informasi tentang yang akan ditampilkan dalam browser web.

MODUL I (STRUKTUR HTML) Praktikum 1  

Bukalah notepad atau program text editor yang lain. Ketikkan script berikut : <TITLE> World Wide Web
Definisi World Wide Web

WWW adalah layanan yang paling sering digunakan dan memiliki perkembangan yang sangat cepat karena dengan layanan ini kita bisa menerima informasi dalam berbagai format (multimedia). Untuk mengakses layanan WWW dari sebuah komputer (yang disebut WWW server atau web server) digunakan program web client yang disebut web browser atau browser saja.
Surfing merupakan istilah umum yang digunakan bila menjelajahi dunia maya atau web. Tampilan web yang sangat artistik yang tidak hanya menampilkan teks tapi juga gambar-gambar yang di tata sedemikian rupa sehingga selalu membuat betah netter untuk surfing berjam-jam.

    

Simpan (File|Save As), dengan nama web.html, pada kolom Save As Type, pilihlan All Files(*.*). Buka web browser anda (internet explorer) Bukalah dokumen yang anda buat tadi. (File|Open) Klik browse: arahkan ke file Contoh1.html, klik OK Lihatlah hasilnya :

Halaman 2

Praktikum 2 Pada praktikum 2 kali ini kita akan belajar menambahkan warna background, dan pemformatan tampilan teks.  Buka kembali file web.html pada program teks editor anda (notepad).  Ubah perintah berikut  Ubah paragraf pertama menjadi seperti dibawah ini :

 

WWW adalah layanan yang paling sering digunakan dan memiliki perkembangan yang sangat cepat karena dengan layanan ini kita bisa menerima informasi dalam berbagai format (multimedia). Untuk mengakses layanan WWW dari sebuah komputer (yang disebut WWW server atau web server ) digunakan program web client yang disebut web browser atau browser saja. Jenis-jenis browser yang sering digunakan adalah: Netscape Navigator/Comunicator, Internet Explorer, NCSA Mosaic, Arena, Lynx, dan lain-lain. Simpan hasil editing anda (File|Save) Lihat hasil perubahan pada web browser anda.

Praktikum 3  Buatlah sebuah dokumen HTML untuk tulisan berikut ini :  Simpan dengan nama Dunia Maya.html.

Apa Itu Internet? Internet (Inter-Network) adalah sebutan untuk sekumpulan jaringan komputer yang menghubungkan situs akademik, pemerintahan, komersial, organisasi, maupun perorangan. Internet menyediakan akses untuk layanan telekomnunikasi dan sumber daya informasi untuk jutaan pemakainya yang tersebar di seluruh dunia. Layanan internet meliputi komunikasi langsung (email, chat), diskusi (Usenet News, email, milis), sumber daya informasi yang terdistribusi (World Wide Web, Gopher), remote login dan lalu lintas file (Telnet, FTP), dan aneka layanan lainnya. Jaringan yang membentuk internet bekerja berdasarkan suatu set protokol standar yang digunakan untuk menghubungkan jaringan komputer dan mengalamati lalu lintas dalam jaringan. Protokol ini mengatur format data yang diijinkan, penanganan kesalahan (error handling), lalu lintas pesan, dan standar komunikasi lainnya. Protokol standar pada internet dikenal sebagai TCP/IP (Transmission Control Protocol/Internet Protocol). Protokol ini memiliki kemampuan untuk bekerja diatas segala jenis komputer, tanpa terpengaruh oleh perbedaan perangkat keras maupun sistem operasi yang digunakan.

Halaman 3

MODUL II (PEMFORMATAN TEKS DAN KARAKTER KHUSUS) Pemformatan Teks: Perintah-perintah yang digunakan:  ..teks..  tag-tag pemformatan : Tag awal Kegunaan <em> <small> <strong> <sub> <sup> <s> 

Mendefinisikan teks yang ditebalkan. Mendefinisikan teks yang besar ukurannya. Mendefinisikan teks yang ditekankan Mendefinisikan teks yang dimiringkan – Italic Mendefinisikan teks yang kecil ukurannya Mendefinisikan teks yang ditebalkan. Mendefinisikan teks yang dijadikan subscript. Mendefinisikan teks yang dijadikan superscript. Mendefinisikan teks yang digaris bawahi – Underline Mendefinisikan teks yang di coret – strikethrough

Karakter-karakter khusus Entitas

Keterangan

© ® ™ & « » £ € ¥

Copyright Registered Trade mark Non breaking space Ampersand Anggle quotation mark (left) Anggle quotation mark (right) Poundsterling Euro Yen

Halaman 4

Praktikum 1  Ketikkan script berikut menggunakan teks editor.  Simpan dengan nama Internet.html Interconnected Network
Interconnected Network alias Internet

Interconnected Network - atau yang lebih populer dengan sebutan Internet - adalah sebuah sistem komunikasi global yang menghubungkan komputer-komputer dan jaringanjaringan komputer di seluruh dunia. Setiap komputer dan jaringan terhubung - secara langsung maupun tidak langsung - ke beberapa jalur utama yang disebut internet backbone dan dibedakan satu dengan yang lainnya menggunakan unique name yang biasa disebut dengan alamat IP 32 bit. Contoh: 202.155.4.230 . Komputer dan jaringan dengan berbagai platform yang mempunyai perbedaan dan ciri khas masing-masing (Unix, Linux, Windows, Mac, dll) bertukar informasi dengan sebuah protokol standar yang dikenal dengan nama TCP/IP (Transmission Control Protocol/Internet Protocol). TCP/IP tersusun atas 4 layer (network access, internet, host-to-host transport, dan application) yang masing-masing memiliki protokolnya sendiri-sendiri.

Bila anda mempunyai Komputer minimal prosessor 486, Windows 95, Modem, dan line telepon, maka anda telah bisa bergabung dengan ribuan juta komputer lain dari seluruh dunia dan mengakses harta karun informasi di internet.

© STMIK EL RAHMA
Yogyakarta

Halaman 5

Praktikum 2  Ketikkan script berikut menggunakan teks editor. <TITLE> karakter khusus Copyright ©
Trademark ™
Registered ®
Poundsterling £
Yen ¥
Euro €
 

Simpan dengan nama karakter_khusus.html Lihat hasilnya dengan browser.

Praktikum 3  Ketikkan script berikut menggunakan teks editor. <TITLE> Formatting Font Bold
Underline

Halaman 6

Italic
<strong>Strong
<em>Emphasis
Citation
<S>strikethrough
CO<sup>2
H<sub>2O  

Simpan dengan nama font.html Lihat hasilnya dengan browser.

Halaman 7

MODUL III (Penyisipan Gambar) Perintah-perintah yang digunakan dalam penyisipan gambar : 

Perintah dibawah ini digunakan untuk menyisipkan gambar kedalam dokumen HTML.



Bila ingin menggunakan gambar sebagai background/latar belakangdokumen HTML

praktikum 1 

Ketikkan script berikut : Wisata Dunia
Tempat-tempat yang indah didunia

Inilah tempat-tempat wisata dunia yang banyak dikunjungi oleh wisatawan tiap tahunnya:

Gunung Lawu : terletak di Propinsi Jawa Timur Indonesia

Hawaii : Terletak di Benua Amerika

 

Simpan dengan nama image_align.html Lihat hasil melalui browser.

Halaman 8

Halaman 9

MODUL 4 HYPERLINK

Perintah-perintah yang digunakan :  Membuat link dengan karakter : link  Membuat link dengan gambar : 

Membuat nama link pada satu dokumen (anchor) :



Membuat link pada bagian lain dalam satu dokumen HTML. : nama_link

Praktikum 1  Ketikkan script berikut : Wisata Dunia
Tempat-tempat yang indah didunia

Inilah tempat-tempat wisata dunia yang banyak dikunjungi oleh wisatawan tiap tahunnya.

Ikuti link pada gambar untuk melihat secara detail.

Gunung Lawu : di Propinsi Jawa Timur

Hawaii : Terletak di Benua Amerika

Colloseum : ada di Romawi

Halaman 10

 

Candi Borobudur : Di Jawa Tengah

Tersedia paket perjalanan wisata dengan harga mulai 100$ US

Pesan sekarang juga

TOP Simpan dengan nama Tempat_wisata.html Jalankan dari web browser.

Halaman 11

Praktikum 2  Buat script berikut dan simpan dengan nama detail_tempat_wisata.html Detail Tempat Wisata
Detail Tempat Wisata

Gunung Lawu

Gunung yang indah dan penuh dengan legenda ini terletak di Propinsi Jawa Timur, dengan ketinggian sekitar 3265 diatas permukaan laut.

Harga paket perjalanan wisata : Rp. 500.000 (3H2M)

Hawaii

Kepulauan hawaai merupakan pulau yang indah dengan pantai-pantai yang eksotis. Dengan tarian yang khas, dan keramah-tamahan penduduknya.

Harga paket perjalanan wisata : $500.000 (3H2M)

Kembali
Cek semua link yang terdapat pada kedua file HTML diatas

Halaman 12

MODUL 5 LIST List merupakan bentuk yang umum yang biasa kita gunakan untuk menguraikan daftar sesuatu. Jenis-jenis list dalam HMTL :  List dengan nomor (OL : Ordered List) Nomor item pada ordered list secara default adalah menggunakan angka 1,2,3.., dst sampai sejumlah item dalam list tersebut. Bila nomor ingin diganti dengan type yang lain (romawi, abjad huruf besar/kecil), maka kita tinggal mengisi atribut type pada tag
Contoh untuk list dengan angka romawi :
 List tanpa nomor (UL: Unordered List) Jenis bullet pada unordered list bisa diganti dengan mengisikan atribut type pada tag
Contoh
: bila ingin bullet berbentuk kotak.  List definisi Praktikum 1:  Cobalah script berikut ini : <TITLE> Ordered List & Unordered List
An ordered List :

Coffee

Tea

Milk

An unordered List :

Coffee

Tea

Milk

 Simpan dengan nama list.html  Jalankan dengan web browser Praktikum 2:  Cobalah script berikut ini : <TITLE> definition list

Halaman 13

Coffee

Black hot drink

Ice Cream

sweet Cold drink

 

Simpan dengan nama definition.html Jalankan dengan web browser

Halaman 14

MODUL 6 TABEL Elemen-elemen tabel : Elemen

Keterangan

...
Mendefinisikan sebuah tebel dalam HTML. Jika atribut border dituliskan, maka browser akan menampilkan tabel dengan border. … Mendefinisikan sel header tabel, secara default teks dalam sel ini ditebalkan dan rata tengah. … Mendefinisikan sebuah baris tabel dalam tabel. Anda dapat mendefinisikan atribut untuk seluruh baris : align(left,center,right) dan/atau valign (top,middle,bottom) … Mendefinisikan sebuah sel data tabel, secara default teks dalam sel ini akan ditampilkan rata kiri dan ditengah secara vertikal. Sel data tabel dapat berisi atribut untuk mendefinisikan karakteristik dari sel dan isinya. Praktikum 1 

Ketikkan script berikut <TITLE> Belajar Tabel
Daftar Pegawai STMIK

Halaman 15

No Nama Alamat Telepon

1 Asih Winantu Bantul Yogyakarta 0274-441170

2 Agus Riyanto Sleman Yogyakarta 0274-377982

3 M Wahib Blora Jawa Tengah 0274-377982

 

Simpan dengan nama tabel1.html Jalankan dengan web browser

Halaman 16

Praktikum 2 

Ketikkan script berikut ini
Daftar Nilai Pemrograman Web 1
Nama Nilai

Tugas Praktikum

Lutfia 80 85

yulia 90 93

Ardian 100 98



Simpan dengan nama tabel2.html Jalankan dengan web browser



Halaman 17

MODUL 7 FRAME Sintaks : Praktikum 1 

Buat file dengan nama Frame.html



Buat file dengan nama atas.html
<marquee width="661" height="19">STMIK EL RAHMA : Menggapai Ilmu Menuju Rahmat



Buat file dengan nama utama.html SELAMAT DATANG DI SITUS STMIK EL RAHMA
SELAMAT DATANG DI SITUS STMIK EL RAHMA

STMIK El Rahma Yogyakarta berdiri pada tanggal 30 Agustus 2001 dengan SK Mendiknas No. 155/D/0/2001 dibawah naungan Yayasan El Rahma. Pada saat berdirinya, STMIK El Rahma memiliki lima program studi yaitu Sistem Informasi, Teknik Informatika, Manajemen Informatika, Teknik Komputer dan Komputerisasi

Halaman 18

Akuntansi.


Buat file dengan nama kiri.html Program Studi
Sejarah Singkat

Program Studi

Fasilitas

Alumni

Info Kerja



Buat file dengan nama bawah.html untitled
© STMIK EL RAHMA
2005

Jalankan file frame.html, pastikan hasilnya seperti gambar berikut :

Halaman 19

MODUL 8 IMAGE MAP Metode ImageMap mengharuskan pemrogram web untuk mendefinisikan daerah-daerah dalam suatu gambar (image) yang mempunyai link. Derah yang didefinisikan berupa bentuk daerah dan koordinat pembatasnya. Bentuk daerah peta dibedakan menjadi :    

Point : daerah berupa titik Rect : daerah berupa kotak/persegi panjang Poly : daerah berbentuk polygon Circle : daerah berbentuk lingkaran

Koordinat daerah menggunakan posisi titik (point). Adapun ketentuan pendefinisian koordinat (0,0) dimulai dari pojok kiri atas gambar, dan maksimum koordinat adalah pojok kanan bawah gambar (lebar_maks, tinggi_maks). Sintaks : <map name=”nama_map”> <area shape=”jenis map” coords=”koordinat map” href=”file yang dipanggil”> Coordinat dari object relatif terhadap pojok kirai atas image. Coordinate Value Rect Left-x, top-y, right-x, bottom-y Circle CENTER-X, CENTER-Y, RADIUS Poly X1, Y1, X2, Y2, … XN, YN

Halaman 20

Contoh: Creating Hotspot <map name="Map"> <area shape="rect" coords="0,0,200,100" href="file1.htm" alt="kotak link"> <area shape="circle" coords="354,41,36" href="file2.htm" alt="lingkaran link"> <area shape="poly" coords="58,102,97,101,110,134, 119,119,177,195,69,196, 47,162,62,143" href="#">

Halaman 21

MODUL 9 FORM DAN INPUT

Form merupakan elemen HTML yang digunakan untuk mendapatkan masukan dari pengguna web. Pengguna web dapat memasukkan input melalui halaman web. Sintaks :

Jenis masukan dalam suatu form dibedakan menjadi :  Text : digunakan untuk memasukkan suatu nilai untuk dikirimkan ke server. Nilai bisa berupa angka atau teks.  Text Area : digunakan untuk memasukkan data dalam bentuk teks yang jumlah karakternya banyak.  Radio : menyediakan beberapa pilihan, hanya satu pilihan yang bisa dipilih.  Check Box : menyediakan beberapa pilihan, bisa lebih dari satu pilihan.  List : pilihan dalam bentuk list., pilihan dapat lebih dari satu.  Button : mendefinisikan tombol untuk melakukan pemrosesan form. o Submit : untuk memenggil url, setelah selesai penginputan form. o Reset : untuk menginisialisasi setiap elemen form. o Button : untuk memebuat form lebih interaktif, untuk memanggil script (fungsi) yang ada dalam dokumen HTML. o Image : digunakan sebagai pengganti button, button yang berbentuk gambar. Praktikum 1  Ketikkan script berikut : formulir
Formulir Pendaftaran Kursus

Halaman 22

Nama :

Jenis Kelamin : Laki-laki Perempuan

Alamat :

Propinsi : <select size="1" name="propinsi">

Pilihan Kursus : Bahasa Inggris
Komputer

 

Simpan dengan nama form.html Lihat hasilnya dengan browser.

Halaman 23

Halaman 24

Praktikum 2 (validasi data)  Bukalah kembali file form.html.  Tambahkan script berikut pada bagian head : <script language="VBscript">  Jalankan dengan browser. Validasi Data dengan JavaScript:  Ketikkan script berikut : Membuat Validasi <script LANGUAGE="JAVASCRIPT"> function ValidasiForm() { if (document.FormTamu.nama.value=="") { alert("Kolom nama tidak boleh kosong"); return false; } if (document.FormTamu.alamat.value=="") { alert("Kolom Alamat tidak boleh kosong"); return false; } if (document.FormTamu.email.value=="") { alert("Kolom Email tidak boleh kosong"); return false; } }

Halaman 25



Form Validasi

Nama

Alamat

Email

Jalankan hasilnya.

Halaman 26

MODUL 10 CSS (Cascading Style Sheet) CSS merupakan sebuah dokumen yang dapat digunakan untuk melakukan pengaturan pada seluruh komponen web. CSS bisa digunakan dengan berbagai metode, salah satu diantaranya adalah diletakkan pada bagian Head. Contoh penggunaan CSS : Membuat form bentuk cantik <style type="text/css">

Halaman 27

Form Cantik

Nama

Alamat

Email

Pesan

MODUL 11 MEMPERCANTIK HALAMAN WEB Cursor diikuti teks:  Ketikkan script berikut : Animasi Kursor <script language="JavaScript">
Halaman 28

function textfollow() { if (flag==1 && document.all) { for (i=message.length-1; i>=1; i--) { xpos[i]=xpos[i-1]+step ypos[i]=ypos[i-1] } xpos[0]=x+step ypos[0]=y for (i=0; i<message.length-1; i++) { var thisspan = eval("document.all.span"+(i)+".style") thisspan.posLeft=xpos[i] thisspan.posTop=ypos[i] } } if (flag==1 && document.layers) { for (i=message.length-1; i>=1; i--) { xpos[i]=xpos[i-1]+step ypos[i]=ypos[i-1] } xpos[0]=x+step ypos[0]=y for (i=0; i<message.length-1; i++) { var thisspan = eval("document.span"+i) thisspan.left=xpos[i] thisspan.top=ypos[i] } } var timer=setTimeout("textfollow()",10) } file://--> <STYLE> .spanstyle { position:absolute; visibility:visible; top:-50px; font-size:8pt; font-family:verdana; color:black; font-weight: bold; } a { color:FFFFCC; text-decoration:none } a:hover { color:FFFF99; text-decoration:underline } a:visited { color:FFFF99 } <script language="JavaScript">

Halaman 29

") document.write(message[i]) document.write("") } if (document.layers){ document.captureEvents(Event.MOUSEMOVE); } document.onmousemove = handlerMM; //--> Gerakan Mouse ..... Teks Berjalan Pada Status Bar teks jalan <script language="VBScript">

Halaman 30

No	Nama	Alamat	Telepon
1	Asih Winantu	Bantul Yogyakarta	0274-441170
2	Agus Riyanto	Sleman Yogyakarta	0274-377982
3	M Wahib	Blora Jawa Tengah	0274-377982

Nama	:
Jenis Kelamin	:	Laki-laki Perempuan
Alamat	:
Propinsi	:	<select size="1" name="propinsi">
Pilihan Kursus	:	Bahasa Inggris Komputer

MODUL PENGENALAN WEB DENGAN HTML

Recommend Documents

berpasangan dengan tag akhir

Definisi World Wide Web

An ordered List :

An unordered List :

Daftar Pegawai STMIK