KERAH: Praktikum pemrograman internet (pertemuan 1)

MODUL I

MENGENAL HTML

A. Tujuan Praktikum

1. Praktikan mampu menjelaskan media linier dan hypermedia.

2. Praktikan mampu mendefinisikan HTML dan mendeskripsikan struktur dasar suatu dokumen.

3. Praktikan mampu mengidentifikasi sub elemen header.

4. Praktikan memahami beberapa tag-tag dasar HTML dan mampu mengimplementasikan dalam script – script halaman HTML.

B. Dasar Teori

1. Media Linier

Media linier adalah suatu hal yang digunakan untuk emnjelaskan suatu awal dan suatu progress linier hingga akhir. Bentuk dari media linier dappat berupa movies, audio dan video tapes, dan sebagian besar buku - buku diorganisasikan dengan ekspektasi ini. Sedangkan Word Wide Web diorganisasikan dengan cara yang sangat berbeda.

2. Hipermedia

Hypermedia adalah dimana seorang pengguna dengan mudahnya memilih item berikutnya yang diinginkan dan dengan segera ditransport ke lokasi baru yang diinginkakn tadi.Sebagai contoh adalah suatu audio CD dimana anda dapat memilih lagu kelima dan langsung dapat didengarkan lagu tersebut. Berbeda dengan sebuah audiotape dimana anda harus mencari mulai daari lokasi saat ini tape anda hingga diawal lagu yang diinginkan. Ketika konsep ini diaplikasikan pada suatu teks maka akan didapatkan suatu hypertext, dimamna dengan {clicking} pada suatu link atau hotspot ( hyperlink) andan dengan segera dikirimkan menuju ke lokasi baru dalam halaman yang sama atau halaman baru atau secara bersamaan. Ketika anda melakukan interlink dalam jumlah yang banyak halaman teks pada computer yang berada di segala penjuru dunia, anda seolah – olah mendapatkan system seperti jarring laba – laba dari pada link – link dan halaman – halaman tersebut. Hal ini yang dikenal dengan World Wide Web, suatu system dimana suatu halaman disimpan pada beberapa web server (penyediaan layanan web) yang berbeda – beda, tersambung dengan atau menuju ke internet, semuanya itiu tersambung bersama. System ini sangatlah sangatlah bermanfaat karena semua halaman dibuat dalam format yang sama. Format atau “language” ini dinamakan HTML (Hypertext Markup language) yang merupakan bagian dari standar internasional untuk dokumen elektronik yang dinamakan SGML (Standar Generalized Markup Language).

Pada bab ini anda akan dikenalkan dengan format halaman HTML, anda akan mempelajari tentang komponen yang membuat HTML dan bagaimana halaman yan dapat dipublish di Word Wide Web (www). HTML (Hypertext Markup Language ) merupakan salah satu format yang digunakan dalam dokumemn dan aplikasi yang berjalan di web browser. Karena itu, untuk bisa melakukan pemrograman aplikasi di atas web anda harus terlebih dahulu menguasai HTML. Walaupun sekarang telah banyak terdapat tool yang dapat anda gunakan untuk membuat halaman secara WYSIWYG (What You See is What You Get) seperti Dreamweaver, frontpage, dan Netscape Editor.

Web Browser : Mozilla Firefox, Opera, Google Chrome, Internet Explorer, Netscape dll

Editor : Notepad, Notepad++, Dreamwaver, PHP Editor dll

3. Pembuatan Halaman HTML

a. Memilih Text Editor

Saat ini banyak sekali program aplikasi yang dapat digunakan untuk membuat halaman web. Text Editor adalah program pengolah kata yang paling besar tanpa dda fitur - fitur yang ‘aneh – aneh‘ seperti pengolahan kata pada umumnya seperti Ms. Word. Salah satu kelebihan dari text editor adalah suatu file yang dibuat dengan program ini disimpan hampir tanpa ada kode rahasia yang tak terlihat seperti halnya dokumen Ms. Word atau pengolah kata yang lainnya. Yang akan secara drastic akan menimbulkan efek pada dokumen anda saat akan ditampilkan di web browser. Dengan kata lain akan lebih mudah untuk membangun suatu halaman web dengan menggunakan text editor biasa dari pada suatu pengolahan kata.

HTML editor mempermudah pengguna untuk membuat halaman web dengan ccepat dan mudah hanya dengan menekan beberapa buah tombol yang disediakan akan kemudian program aplikasi ini akan menghasilkan “source code “ HTML untuk anda,, daripadda memasukkan semua kode – kode HTML dengan mengetikkannya satu persatu. HTML editor merupakan suatu alat yang tepat bagi seorang web developer; meskipun seharusnya juga sangat penting untuk ada dan membetulkan dokumen andda jika tidak dapat dilakukan oleh HTML editor.Ms. Word dan corel WordPrefect versi yang ada saat ini juga telah mempunyai kemampuan untuk membuat halaman web.

Dalam hal ini, kita akan menggunakakn text editor standar dari Ms. Windows, yaitu notepad. Anda dapat melakukan semua latihan dan konsep ini dengan text editor apapun andda berbagi platform yang lain juga.

b. Memulai NotePad

NotePad adalah text editor standar yang ada baik di versi 16 bit maupun 32 bit system operasi Ms. Windows.

Untuk memulai Notepad di Ms. Windows ikuti langkah – langkah berikut :

- Click pada tombol “start” yang ada pada task bar windows

- Click pada “program” dan click pada menu direktori berlabel “accessories”

- Kemudian click pada shortcut “NotePad”.

c. Menyimpan File Script

Setelah anda membuat script – script HTML, tentunya anda ingin segera menyimpan file tersebut dalam ekstensi HTML atau ekstensi lainnya.

Ikutilah langkah berikut :

- Click tombol “File” pada taskbar notepad, kemudian pilih “save”

- Pada field isian nama file (filename), ketikkan namafile.html (“namafile”) dapat anda ganti dengan nama file yang anda sukai, misalnya file1.html

- Coba jalankan browser dengan membuka “internet explorer”.

- Click pada menu file

- Pilih pada option “open” yang ada pada menu”file”

- Pada dialog box”open” klik pada tombol “Browser..” dan cari file yang ingin ditampilkan

- Selanjutnya pilih tombol “OK” jika file sudah dipilih

d. Mengedite File Script

Saat ini anda telah membuka dan menampilkan hasil kerja anda dalam suatu web browser, sekarang anda dapat melanjutkan peekerjaan anda dengan menambahkakn dan mengedite file html teesebut. Kemubdian meyimpan hasill perubahan tersebut dan lalu menampilkan hasil perubahan file itu.

Anda akan lebih produktif jika anda belum menutup web browser anda; cukup hanya dengan meminimize web browser dan melanjutkan pekerjaan andda. Ketika anda ingin menampilkan hasil kerja yang sudah diedit.

- Simpan hasil perubahan file html anda

- Pindah ke aplikasi web browser

- Pada Ms. Internet Explorer tekan tombol “REFRESH”

Web browser akan meload dokumen yang sama tapi dengan revisi baru tadi. Proses ini adalah siklus Edit, Save dan View.

4. Dasar - Dasar HTML

HTTP (Hyper Text Transfer Protocol) merupakan protocol yang digunakan untuk mentransfer data antara web server ke web browser. Protocol ini mentransfer dokumen – dokumen web yang ditulis atau berformat HTML berfungsi untuk ‘memperindah’file tekss biasa untuk diitampilkan pada program web browser. Hal ini dilakukan dengan menambah elemen atau sering disebut sebagai tag – tag padda file teks biasa tersebut.

Tag HTML biasanya berupa tag – tag yang berpasangan dan ditandai dengan symbol lebih besar (<) dan (>). Pasangan dari sebuah tag ditandai dengan symbol garis miring(/). Misalnya pesan gan dari tag<contoh> adalah </contoh>

Dalam hal ini <contoh> kita sebut sebagai elemen dan biasanya dalam suatu elemen terdapat atribut –atribut untuk mengatur elemen tersebut. Jadi misalnya elemen <contoh> bile ditulis dengan atributnya adalah sebagai berikut

<contoh>atribut1=”nilai_atribut”atribut2=”nilai_atribut2”,,,>

Dalam penulisan tag HTML tidaklah case sensitive artinya penggunaan huruf kecil ataupun capital tidaklah menjadi masalah.

Struktur Dasar Dokumen HTML

Setiap dokumemn HTML memiliki struktur dasar atau susunan sebagai berikut :

<html>

<head>

<title>teks pada title bar web browser</title>

</head>

<body>

Berisi tentang text, gambar, atau apapun yang tampil pada dokumen web

</body>

</html>

Seperti terlihat , struktur file HTML diawali dengan sebuah tag <html> dan ditutup dengan tag</html>. Di dalam tag ini terdapat dua buah bagian besar, yaitu yang diapit oleh tag <head>…</head> dan tag <body<…</body>. Bagian yang diapit oleh tag HEAD merupakan header dari halaman HTML dan tidak ditampilkan pada browser.

Bagian ini berisi tag – tag header seperti <title>…</title> yang berfungssi untuk mengeluarkan judul pada title bar window web browser. Bagian kedua, yang diapit oleh tag BODY merupakan bagian yang akan ditampilkan pada halaman web browser nantinya. Pada bagian ini anda akan menuliskan semua jenis informasi berupa teks dengan bermacam format maupun gambar yang ingin anda sampaikan pada pengguna nantinya.

5. Pengaturan Properti Dokumen

Property document diatur melalui atribut – atribut yang terdapat dalam elemen <body>. Sebagai contoh adalah pengaturan warna latar belakang halaman, warna teks, warna link, dan lain – lain .

a. Kode Warna

Dalam pengaturan warna menggunakan kode RGB yang mana ditmapilkan dalam nilai heksadesimal.Setiap bagian dua digit kode menunjukan banyaknya itensitas dari kombinasi warna merah, hijau dan biru.Sebagai contoh oo pada dua digit pertama berarti tidak ada warna merah dalam kombinasi warna. Berikut ini adalah contoh kode warna :

Color	Hexadecimal	Color	Hexadecimal
White	#FFFFFF	Black	#000000
Red	#FF0000	Green	#00FF00
Blue	#0000FF	Magenta	#FF00FF
Cyan	#00FFFF	Yellow	#FFFF00

b. Atribut Elemen <body>

BACKGROUND = lokasi dan nama file (latar belakang image dokumen)

BGCOLOR = warna ( warna latar belakang dokumen, default putih )

TEXT = warna ( warna text dokumen, default hitam )

LINK = warna ( warna link dokumen, default biru )

VLINK = warna ( warna visited link dokumen, default ungu )

ALINK = warna ( warna aktif link dokumen, default merah )

c. Elemen Heading <h1>…<h6>

Tag heading berfungsi untuk memformat heading (judul dan sub judul) dari suatu halaman web. Heading ini akan memperbesar ukuran huruf setiap jenis heading. Ada tujuh buah heading yang dikenal di HTML, yaitu dari <h1> sampai <h6>

d. Elemen Paragrafh <p>

Tag paragraph berfungsi layaknya untuk pengaturan antara paragraph dalam halaman web anda. Dalam elemen pragrafh terdapat atribut align yang berfungsi sebagai pengaturan peraturan paragraph. Anda dapat memilih perataan kiri, tengah atau kanan.

ALIGN = [left center right]

e. Elemen Break <br>

Elemen break berfungsi untuk memberikan baris baru suatu paragraph dalam halaman web anda. Elemen break tidak memerlukan elemen penutup break.

f. Elemen Horisontal Rules <hr>

Elemen <hr> berfungsi untuk menampilkan garis horizontal di dalam halaman web anda.Elemen <hr> tidak memerlukan elemen penutup </hr>.

Atribut Elemen Horisontal Rules

ALIGN = [left center right] ( perataan horizontal, default center )

SIZE = Pixels ( tinggi garis, default 2 )

WIDTH = Length ( lebar garis, pixel or persen, default100%)

NOSHADE = (garis solid)

g. Elemen Pemformatan Karakter <font>

Font pada halaman HTML dapat diformat sesuai dengan desain yang anda temukan, baik ukuran, jenis maupun warna.

Aturan Elemen Font

SIZE = angka (ukuran huruf, default 3 )

COLOR = warna ( warna font, default hitam)

FACE = angka ( jenis font, default Times New Roman )

h. Elemen Ragam Karakter <font>

<br>bold</b> = menghasilkan huruf tebal

<i>italic</i> = menghasilkan huruf miring

<u>underline</u> = menghasillkan huruf bergaris bawah

i. Elemen List

Property <li> digunakakn untuk menampilkan informasi dalam bentuk daftar (list). Ada dua jenis daftar yang dikenal di HTML, yaitu list dalam format bullet ( unordered list <ul>) dan dalam bentuk nomor (ordered list <ol>).

Atribut Elemen List

Atribut elemen Erdered list = TYPE = [l a A I l ] ( tipe penomoran, default 1)

Atribut elemen unordered list = TYPE = [disc square circle] (tipe bullet, default disc)

j. Elemen Image <img>

Anda dapat menampilkan gambar dalam halaman HTML, format filenya berupa JPG atau GIF. Untuk menampilkannya digunakan tag IMG.

Atribut Elemen Image

SRC = URL (lokasi image)

ALT = text (text alternatif)

WIDHT = Length (lebar image)

ALIGN = [atas tengah bawah kiri kanan] (perataan image)

BORDER = length (lebar batas link)

LATIHAN

1. Latihan 01 : heading.html

Syntax Program

<html>

<head>

<title> latihan1_137006002</title>

</head>

<h4>M Gilbran Eka Pawitra</h4>

<h1>TOKO KOMPUTER ISAKUIKI</h1>

<h2>Toko Kami Menyediakan</h2>

<h3>Komputer Berbagai Merk</h3>

<h4>Apple, DELL, IBM, dll.</h4>

<h3>CD-ROM dan CD-WRITER</h3>

<h4>Asus, Lite On, Samsung.</h4>

<h3>Asesoris Komputer</h3>

<h4>USB FLASH DISK, Headset, Speaker dll.</h4>

</body>

</html>

Tampilan Program

Analisis program :

2. Latihan 02 : teks.html

Syntax Program

<html>

<head>

<title> latihan 02_137006002</title>

</head>

<h1>TOKO KOMPUTER ISAKUIKI</h1>

<h2>Toko Kami Menyediakan</h2>

<h3>Komputer Berbagai Merk</h3>

<p>Apple<br> DELL<br> IBM<br>dll.</p>

<h3>CD-ROM dan CD-WRITER</h3>

<p>Asus<br> Lite On<br> Samsung<br>dll.</p>

<h3>Asesoris Komputer</h3>

<p>USB FLASH DISK<br> Headset<br>Speaker<br>dll.</p>

<br><h4>M Gilbran Eka Pawitra</h4>

</body>

</html>

Tampilan Program

Analisis Program:

3. Latihan 03 : font.html

Syntax Program

<html>

<head>

<title> latihan 03_137006002</title>

</head>

<font color=#FFFF00 face=arial>TOKO KOMPUTER ISAKUIKI</font></h1>

<h2>Toko Kami Menyediakan</h2>

<h3><font color=red>Komputer Berbagai Merk</font></h3>

<p align=center>Apple<br> DELL<br> IBM<br>dll.</p>

<h3><font color=red>CD-ROM dan CD-WRITER</font></h3>

<p align=right>Asus<br> Lite On<br> Samsung<br>dll.</p>

<h3><font color=red>Asesoris Komputer</font></h3>

USB FLASH DISK<br>Headset<br>Speaker<br>dll.</p>

<p align=center>M Gilbran Eka Pawitra<br> 137006002<br></p>

</body>

</html>

Tampilan Program

Analisis Program

4. Latihan 04 : listing.html

Syntax Program

<html>

<head>

<title> latihan 04_137006002</title>

</head>

<h1>TOKO KOMPUTER ISAKUIKI</h1>

Toko Kami Menyediakan

<h2>Komputer Berbagai Merk</h2>

<ol>

<li>Apple

<li>DELL

<li>IBM

<li>dll.

</ol>

<h2>CD-ROM dan CD-WRITER</h2>

<li>asus

<ul>

<li>seri A587-Hitam-R

<li>seri B002-Putih-R/W

<li>seri C657-Hitam-R/W

</ul>

<li>Lite On

<li>Samsung

</ol>

<h2>Asesoris Komputer</h2>

<li>headset

<li>USB FLASH DISK

<li>kingston-128 MB

<li>twinmos-128 MB

<li>ipod-1 GB

</ul>

<li>Speaker

<li>dll.

</ol>

</body>

</html>

Tampilan Program

Analisis Program

KERAH

Thursday, October 29, 2015

Praktikum pemrograman internet (pertemuan 1)

No comments:

Post a Comment