Module desain web

2012 - BPP – Design Web – MI 1

Nama :………………………………………………

Kelas :………………………………………………

NPM :………………………………………………

Materi Kuliah

SEMESTER 1


Pertemuan : 1 (Satu)

Materi : Memahami cara kerja website dan installasi perangkat pendukung

web se

Teori

A. Cara Kerja Website

World Wide Web (WWW) adalah sebuah layanan di internet yang berjalan diatas

protocol HyperText Transfer Protokol (HTTP). WWW merupakan halaman-halaman website yang dapat saling terkoneksi satu dengan lainnya (hyperlink) yang membentuk samudera belantara informasi. Dengan kata lain, WWW merupakan server di Internet yang berisikan Halaman-halaman Web terbentuk dari kumpulan file-file teks murni (plain text) yang pada awalnya berupa script-script HTML yang dapat dibuka/ dilihat/ diterjemahkan dengan perangkat lunak web browser yang dimiliki oleh client.

Pada saat sebuah alamat ditulis pada sebuah web browser maka, data (request) akan

dilewatkan oleh suatu protocol HTTP melewati port 80 ke web server. Alamat ini adalah URL dari suatu situs web yang mempunyai nama domain yang unik di Internet dan terdaftar pada DNS server. Web Browser akan mengirimkan suatu aturan yang telah disepakati sebelumnyua, aturan ini biasa disebut sebagai protocol. Web browser terinstallasi pada perangkat di sisi user (client) bertugas menerjemahkan kode-kode HTML yang dikirim (respon) dari web server, kemudian menampilkan hasil interpreting dalam bentuk informasi ke halaman browser.

Gambar 1. Cara Kerja Web

Catatan :

Halaman web yang termasuk kedalam client side script , hanya memerlukan web browser untuk menjalankannya. Sedangkan dan Halaman web yang dibangun dengan konsep server side script, harus menggunakan web server untuk dapat menjalankannya.


B. Perangkat Pendukung Server Web

Agar website dapat berjalan dan dijalankan secara sempurna disebuah web server, maka

diperlukan beberapa perangkat pendukung yang disajikan seperti pada gambar 2.

Gambar 2. Perangkat Pendukung Web Server

Server web merupakan server internet yang berfungsi untuk menyimpan sumber daya

data dan melayani koneksi transfer data melalui protocol HTTP. Web server merupakan hal yang terpenting dari server di internet dibandingkan server lainnya seperti e-mail server, ftp server ataupun news server. Hal ini disebabkan web server telah dirancang untuk dapat melayani beragam jenis data, dari text sampai grafis 3 dimensi. Web server juga dapat menggabungkan dengan dunia mobile wireless internet atau yang sering disebut sebagai WAP (Wireless Access Protocol), yang banyak digunakan sebagai sarana handphone yang memiliki fitur WAP. Dalam kondisi ini, webserver tidak lagi melayani data file HTML tetapi telah dapat melayani WML (Wireless Markup Language).

Kebutuhan perangkat web server terbagi dalam dua macam, yaitu perangkat keras

(komputer server) dan perangkat lunak. Untuk kebutuhan perangkat lunak yang harus disediakan adalah :

Perangkat Lunak Sistem Operasi Misalnya : Windows dan atau Linux

Perangkat Lunak Web Server Misalnya : Apache, IIS, tomcat, dll

Perangkat Lunak Database Management System (DBMS) Misalnya : MySQL, Postgree, dll

Perangkat Lunak Server Side Script Misalnya : PHP, CGI, Perl, Python, JSP, ASP, dll

Namun seiring perkembangan teknologi perangkat lunak yang semakin pesat, dan tujuan

untuk menghindari kerumitan proses installasi web server, maka telah banyak perangkat lunak khusus web server yang telah mem-bundle kebutuhan perangkat lunak seperti Apache, MySQL, PHP dalam sebuah software. Perangkat lunak penunjang tersebut antara lain XAMPP, PHPtriad, AppServer dan lain-lain.

C. Perangkat Lunak Pendukung Scripting

Penulisan script untuk Design Web dapat dilakukan dengan menggunakan bantuan

perangkat lunak pengolah text sederhana atau dengan perangkat lunak khusus untuk keperluan scripting Design Web. Perangkat lunak yang paling sederhana adalah NOTEPAD, dan perangkat lunak khusus yang paling banyak digunakan oleh web programmer adalah MACROMEDIA DREAMWEAVER. Selain kedua perangkat lunak tersebut masih banyak lagi perangkat lunak yang dapat digunakan untuk keperluan scripting.


Kerjakan langkah-langkah percobaan installasi XAMPP, untuk kebutuhan web server berikut ini :

A. Pendahuluan

XAMPP adalah sebuah aplikasi yang digunakan untuk membangun dan mengelola kebutuhan web server. Aplikasi XAMPP secara default menyediakan kebutuhan seperti web server (Apache), Database (MySQL) dan Server-Side Engine (PHP).

B. Installasi XAMPP

1) Pastikan aplikasi setup XAMPP sudah tersedia 2) Jalankan program setup XAMPP tersebut, dengan cara Double klik atau klik kanan lalu

klik Run pada file setup yang dimaksud. Kemudian pertama kali akan muncul dialog pemilihan bahasa yang digunakan. Pilihlah bahasa yang diinginkan lalu klik (OK).

3) Layar Dialog “Welcome” akan disajikan. Pada dialog ini pilih tombol (NEXT) untuk

memulai installasi XAMPP.

4) Layar Dialog “Choose Install Location” akan disajikan. Pada dialog ini diminta untuk menentukan letak/lokasi drive dan folder dimana file XAMPP akan di letakkan. Lokasi default adalah “c:\xampp”. Jika sudah anda tentukan, klik (NEXT).


5) Layar Dialog “XAMPP Option” akan disajikan. Pada dialog ini Anda diminta untuk menentukan konfigurasi ( desktop icon, start menu dan services action ) XAMPP. Pilih Install Apache as service dan Install MySQL as service, Filezilla ftp server diabaikan. Untuk melanjutkan installasi klik (INSTALL).

6) Layar Dialog “Installing” akan disajikan. Tunggulah beberapa saat hingga proses installasi selesai dilaksanakan.

7) Proses installasi selesai ditandai dengan kemunculan window dialog “Complete Setup”. Lalu klik (Finish) untuk mengakhiri.


8) Beberapa saat kemudian akan muncul kotak dialog informasi, yang menunjukkan bahwa installasi services telah selesai. Klik (OK).

9) Beberapa saat kemudian akan muncul kotak dialog informasi “congratulation”, yang menunjukkan bahwa installasi telah selesai seluruhnya. Dan pada dialog pemilihan kondisi pilih (YES) untuk langsung mengaktifkan aplikasi XAMPP Control Panel.

10) Window control panel XAMPP disajikan sebagai berikut :

Konfigurasi pada kontrol panel cukup sederhana. Menyajikan informasi tentang keadaan [Running] untuk Apache, Mysql, Filezilla dan Mercury. Pada bagian [Svc] checkbox menunjukkan layanan apa saja yang telah anda tentukan sebelumnya pada saat installasi.

Masing-masing layanan menyajikan informasi keadaan [Running] Untuk masuk ke system file dari xampp, Check kondisi apakah web server telah berhasil dijalankan, pada control panel silahkan klik tombol (explore). Atau jalankan web browser, kemudian tuliskan alamat pada addresses bar sebagai berikut : localhost <enter>


C. Membuat Direktori Aktif dalam web server

Buatlah direktori website didalam direktori web server yang telah terinstallasi : Dengan nama direktori sebagai berikut : “pw”, kemudian didalam direktori “pw” buatlah sub- direktori dengan nama “praktikum1”.

7. Tugas dan Pertanyaan

Lakukan pengecekan apakah web server telah berhasil dijalankan, amati dan analisislah

hasilnya dan simpan catatan anda (*.doc) dalam direktori “pw/praktikum1”.

Lakukan pengecekan apakah DBMS MySQL telah berhasil dijalankan, amati dan analisislah hasilnya. dan simpan catatan anda (*.doc) dalam direktori “pw/praktikum1”.

Lakukan pengecekan apakah PHP engine telah berhasil dijalankan, amati dan analisislah hasilnya dan simpan catatan anda (*.doc) dalam direktori “pw/praktikum1”.

Berikan hasil analisis anda terhadap prosedur dan proses installasi XAMPP secara keseluruhan. dan simpan catatan (*.doc) anda dalam direktori “pw/praktikum1”.

8. Pustaka

Bates, C., 2006, Web Programming: Building Internet Applications, Third Edition, Jhon Wiley & Sons Ltd., England.

9. Hasil Praktikum Terinstallasinya sebuah Web Server aktif yang siap digunakan

Terinstallasinya sebuah DBMS MySQL aktif yang siap digunakan

Terinstallasinya sebuah PHP Engine aktif yang siap digunakan


Minggu ke : 2 Unit Kompetensi : Client Side Script : Hypertext Markup Language (HTML) Waktu : 240 menit

Tempat Laboratorium Komputer Software

1. Elemen Kompetensi Menguasai konsep dasar script Hypertext Markup Language (HTML)

Menguasai elemen-elemen pada tag HEAD HTML

Menguasai elemen-elemen pada tag BODY HTML

2. Indikator Konerja

Mampu menjelaskan konsep dasar script Hypertext Markup Language (HTML)

Mampu mengidentifikasi dan menggunakan elemen-elemen tag HEAD pada dokumen HTML

Mampu mengidentifikasi dan menggunakan elemen-elemen tag BODY pada dokumen HTML

Mampu menggunakan elemen untuk memformat halaman

3. Teori

A. Konsep Dasar script Hypertext Markup Language (HTML)

HyperText Markup Language (HTML) adalah suatu bahasa pengkodean (Script) yang

digunakan untuk membangun sebuah halaman web. Script akan diinterpretasikan oleh browser dan browser juga akan memberikan hasilnya pada halaman browser. File HTML berekstensi : „html‟ atau „htm‟. Untuk membuat dokumen HTML, dapat menggunakan aplikasi-aplikasi editor teks (notepad, dll) atau aplikasi khusus scripting (Macromedia Dreamweaver, dll).

HTML merupakan standar bahasa yang digunakan untuk menampilkan dokumen web.

Unsur bahasa atau elemen HTML dinyatakan dengan tanda khusus, yang disebut dengan TAG. Sebuah tag ditandai dengan nama elemen (TAG) yang diapit oleh simbol “<” dan “>”.

Bentuk umum penulisan sintak tag HTML :

<ELEMENT [ATRIBUT1 =”value” … ATRIBUTN=”value”] > … </ELEMENT>

Keterangan :

• ELEMENT : Nama Tag HTML • ATRIBUT : Atribut dari Tag HTML (optional) • VALUE : Nilai dari Atribut Tag HTML (optional)

Contoh : < BODY BGCOLOR =”red”> ……… </BODY>

Pemahaman tentang tag HTML

Open Element

Merupakan elemen-elemen (tag) HTML yang bersifat terbuka, atau tidak memiliki elemen penutup. Format penulisan <name element /> Contoh : <hr/>, <br/>

Close Element

Merupakan elemen-elemen (tag) HTML yang bersifat tertutup, atau memiliki elemen penutup. Format penulisan <name element > ….. </name element> Contoh : <body>…<body/>, <div>…</div>, dll

Comment

Merupakan baris yang tidak akan dieksekusi oleh penerjemah. Biasanya digunakan untuk informasi script . Format Penulisan : < ! - - comment text -- > Contoh : < ! - - Hallo saya adalah baris yang tidak akan diekskusi -- >


Struktur Elemen dalam Dokumen HTML

Struktur elemen dalam dokumen HTML adalah struktur dasar penulisan script untuk

dokumen HTML. Berikut ini adalah gambar struktur dokumen HTML, dan hubungannya dengan output pada halaman web browser.

<html> <head>

………… </head> <body>

………… </body>

</html>

Gambar 3. Struktur Elemen dalam Dokumen HTML

B. Elemen-Elemen Pada Tag HEAD HTML

Elemen-elemen pada tag HEAD HTML, adalah elemen-elemen yang didefinisikan dan

ditulis diantara Tag <HEAD> dan </HEAD>. Ada beberapa macam elemen pada tag HEAD HTML, yaitu antara lain :

TITLE

Tag yang digunakan untuk menampilkan judul homepage/ halaman web pada title browser area. Contoh : < TITLE > halaman web pertamaku </TITLE>

META

Tag yang digunakan untuk mendefinisikan informasi (keywords, http header, dll) dan identitas (author, copyright, dll) pada sebuah halaman web (dokumen HTML).

Contoh : < META keywords = “web, pemrograman”/> < META name =”author” content =”eko win kenali”/> < META name =”copyright” content =”2006”/>

LINK

tag yang digunakan untuk menyertakan dokumen lain ke dalam halaman web untuk tujuan khusus. Dokumen lain tersebut biasa berupa file dengan format CSS, PHP, ICO dan lain- lain. Contoh : <link rel="shortcut icon" href="../images/favicon.ico" type="image/x-icon“/> <link rel="stylesheet" href="../css/style.css" media="screen" type="text/css“/>

C. Elemen-elemen pada tag BODY HTML

Elemen-elemen pada tag BODY HTML, adalah elemen-elemen yang didefinisikan dan

ditulis diantara Tag <BODY> dan </BODY>. Ada beberapa macam elemen pada tag BODY HTML, dan agar lebih memudahkan dalam

pemahaman, macam-macam elemen tersebut akan disajikan berdasarkan tugas dan fungsinya:


Elemen untuk memformat halaman :

HEADING

Heading adalah elemen tag yang digunakan untuk mendefinisikan sebuah teks sebagai kepala (judul/title). Ada 6 macam elemen heading, yaitu H1, H2, H3, H4, H5 dan H6. Contoh : < H1 > Contoh Heading 1 </H1>

PARAGRAPH

Paragraph adalah elemen tag yang digunakan untuk mendefinisikan sebuah teks atau lebih sebagai paragraph. Elemen Paragraph ditandai dengan close tag <p>..</p>. Contoh : <p> HyperText Markup Language (HTML) adalah suatu bahasa pengkodean (coding/scripting) yang digunakan untuk membangun sebuah halaman web. Script HTML akan diinterpretasikan dan diterjemahkan oleh browser, kemudian browser akan menampilkan hasil ke pengguna. </p>

LIST ITEMS

List Item adalah tag digunakan untuk mengelompokkan data (teks) baik dengan metode pengelompokan tidak berurutan (unordered list) maupun pengelompokan berurutan (ordered list).

Contoh :

Unordered List Order List <ul>

<li>minggu</li> <li>rabu</li> <li>jum‟at</li> <li>kamis</li> <li>sabtu</li> <li>selasa</li> <li>senin</li>

</ul>

<ol> <li>minggu</li> <li>rabu</li> <li>jum‟at</li> <li>kamis</li> <li>sabtu</li> <li>selasa</li> <li>senin</li>

</ol>

DEFINITON LIST Definition List fungsinya sama dengan list item. Elemen Definition List ditandai oleh tag <DL> … </DL>. Didalam tag Definition List terdapat tag Definition Term <DT>, yaitu tag untuk menentukan definition term. Serta tag Definition <DD>, yaitu tag untuk menentukan definition itu sendiri. Contoh : Contoh : <dl>

<dt>HTML <dd>HyperText Markup Language is not Language programming</dd>

</dt> <dt>HTTP

<dd>HyperText Transfer Protocol is TCP/IP Protocol</dd> </dt> <dt>Internet

<dd>A network of network</dd> </dt> <dt>TCP/IP

<dd>Internet protocol</dd> </dt>

</dl>

HORIZONTAL RULE Horizontal rule adalah tag digunakan untuk menggambar garis horizontal dalam document HTML. Elemen Horizontal Rule ditandai dengan tag <hr>. Contoh : <hr/>


BREAK LINE Break Line adalah tag di gunakan untuk memulai/ganti baris baru pada document HTML. Elemen Break Line ditandai dengan tag <br>. Contoh : <br/>

QUOTES / IDENTASI

Quotes adalah tag yang digunakan untuk membuat indentasi paragraph. Elemen Quotes ditandai dengan tag <blockquote> .. </blockquote> atau <Q>..</Q>. Contoh : <p> <blockquotes> HyperText Markup Language (HTML) adalah suatu bahasa pengkodean (coding/scripting) yang digunakan untuk membangun sebuah halaman web. Script HTML akan diinterpretasikan dan diterjemahkan oleh browser, kemudian browser akan menampilkan hasil ke pengguna. </blockquote> </p>

FONT

Font adalah tag di gunakan untuk menentukan format font pada dokumen html. Elemen Font ditandai dengan tag <font>…</font>. Contoh : <font face=”arial, verdana” color=”#FF3300” size=”12px”> DESIGN WEB </font>

4. Bahan dan Alat

Personal Komputer

Perangkat lunak Web Browser ( yaitu : Mozilla Firefox, Opera, Internet Explorer (IE), dll)

Perangkat lunak bundling web server (yaitu: XAMPP)

Perangkat lunak : Notepad atau Dreamweaver

5. Organisasi Mandiri (Perseorangan)

6. Prosedur Kerja

1. Buatlah direktori website didalam direktori web server yang telah terinstallasi : Dengan nama direktori sebagai berikut : “pw”, kemudian didalam direktori “pw” buatlah sub- direktori dengan nama “praktikum2”.

2. Merancang halaman web sederhana.

a. Buatlah dokumen HTML Baru dan ketiklah script berikut :

1 <html>

2 <head>

3 </head>

4 <body>

5 </body>

6 </html>

b. Simpan dokumen dengan nama percobaan2_1.html dan simpanlah di dalam direktori

“pw\praktikum2”. c. Jalankan dokumen tersebut pada browser dengan cara mengetikan alamat

“localhost/pw/praktikum2” pada address bar browser, dan amati hasil ouput.

3. Merancang halaman web dengan meletakkan script elemen pada tag HEAD

a. Buatlah dokumen HTML Baru dan Ketiklah script berikut :


1 <html>

2 <head>

3 <title > halaman web pertamaku </title>

4 </head>

5 <body>

6 </body>

7 </html>


“pw\praktikum2”. c. Jalankan dokumen tersebut pada browser dengan cara mengetikan alamat


4. Merancang halaman web dengan meletakkan script elemen pada tag HEAD

a. Buatlah dokumen HTML Baru dan Ketiklah script berikut :

1 <html>

2 <head>

3 <title > halaman web keduaku </title>

4 <meta keywords = “web, pemrograman”>

5 <meta name =”author” content =”eko win kenali”>

6 <meta name =”copyright” content =”2006”>

7 <link rel="stylesheet" href="../css/style.css" media="screen"

8 type="text/css">

9 </head>

10 <body>

11 </body>

12 </html>


“pw\praktikum2”.

c. Jalankan dokumen tersebut pada browser dengan cara mengetikan alamat “localhost/pw/praktikum1” pada address bar browser, dan amati hasil ouput.

5. Merancang halaman web dengan meletakkan script elemen pada tag BODY untuk keperluan

Formating Page.

5.1. Membuat Heading

d. Buatlah dokumen HTML Baru dan Ketiklah Script berikut :

1 <html>

2 <head>

3 <title > Percobaan Heading </title>

4 </head>

5 <body>

6 <h1> Heading 1 </h1>




10 <h5> Heading 5 </h5>

11 <h6> Heading 6 </h6>

12 </body>

13 </html>

e. Simpan dokumen dengan nama percobaan2_4.html dan simpanlah di dalam

direktori “pw\praktikum2”. f. Jalankan dokumen tersebut pada browser dengan cara mengetikan alamat



5.2. Membuat Paragraph

a. Buatlah dokumen HTML Baru dan Ketiklah Script berikut :

1 <html>

2 <head>

3 <title > Percobaan Paragraph </title>

4 </head>

5 <body> <h1> Definisi HTML </h1>

6 <p>

7 HyperText Markup Language (HTML) adalah suatu bahasa pengkodean 8 (Script) yang digunakan untuk membangun sebuah halaman web. 9 </p> 10 </body> 11 </html>

b. Simpan dokumen dengan nama percobaan2_5.html dan simpanlah di dalam

direktori “pw\praktikum2”. c. Jalankan dokumen tersebut pada browser dengan cara mengetikan alamat


5.3. Membuat List Items


1 <html>

2 <head><title > Percobaan List Items </title></head>

3 <body>

4 <h3> Definisi List Items Underlist List, Order List, dan Definition List </h3>

5 <h4> Under List </h4>

6 <ul>

7 <li>minggu</li>

8 <li>rabu</li>

9 <li>jum‟at</li>

10 <li>kamis</li>

11 <li>sabtu</li>

12 <li>selasa</li>

13 <li>senin</li>

14 </ul>

15 <h4> Order List </h4>

16 <ol>

17 <li>minggu</li>

18 <li>rabu</li>

19 <li>jum‟at</li>

20 <li>kamis</li>

21 <li>sabtu</li>

22 <li>selasa</li>

23 <li>senin</li>

24 </ol>

25 <h4> Definition List </h4>

26 <dl>

27 <dt>HTML

28 <dd>HyperText Markup Langguage is not Language Programming</dd>

29 </dt>

30 <dt>HTTP

31 <dd>HyperText Transfer Protocol is TCP/IP Protocol</dd>

32 </dt>

33 <dt>Internet

34 <dd>A network of network</dd>

35 </dt>


36 <dt>TCP/IP

37 <dd>Internet protocol</dd>

38 </dt>

39 </dl>

40 </body>

41 </html>




5.4. Membuat Horizontal Rule


1 <html>

2 <head>

3 <title > Percobaan Horizontal Rule </title>

4 </head>

5 <body>

6 <h3> Garis dibawah ini dibuat dengan tag horizontal rule </h3>

7 <hr/>

8 </body>

9 </html>

b. Simpan dokumen dengan nama percobaan2_7.html dan simpanlah di dalam direktori “pw\praktikum2”.


5.5. Membuat Break Line


1 <html>

2 <head>

3 <title > Percobaan Break Line </title>

4 </head>

5 <body>

6 <h3> Percobaan membuat break line </h3>

7 Teks pertama <br/> Teks kedua <br/> Teks ketiga <br/> Teks keempat

8 </body>

9 </html>



5.6. Membuat Quotes / Identasi


1 <html>

2 <head>

3 <title > Percobaan Break Line </title>

4 </head>

5 <body>

6 <h3> Percobaan membuat Quotes/Identasi </h3>

7 <p>

8 <blockquotes>


9 HyperText Markup Language (HTML) adalah suatu bahasa pengkodean

10 (coding/scripting) yang digunakan untuk membangun sebuah halaman

11 web. Script HTML akan diinterpretasikan dan diterjemahkan oleh browser,

12 kemudian browser akan menampilkan hasil ke pengguna.

13 </blockquote>

14 </p>

15 </body>

16 </html>



5.7. Memodifikasi Font pada teks


1 <html>

2 <head>

3 <title > Percobaan Memodifikasi font </title>

4 </head>

5 <body>

6 <h3> Percobaan memodifikasi font pada teks </h3>

7 <p>

8 <font face=”arial, verdana” color=”#FF3300” size=”12px”>

9 HyperText Markup Language (HTML) </font> adalah suatu bahasa

10 pengkodean (coding/scripting) yang digunakan untuk membangun

11 sebuah halaman web. Script HTML akan diinterpretasikan dan

12 diterjemahkan oleh browser, kemudian browser akan menampilkan hasil

13 ke pengguna.

14 </p>

15 </body>

16 </html>




Buatlah tutorial tentang lingkungan kerja Macromedia Dreamweaver.

Buatlah dokumen HTML sederhana, yang mampu menampilkan identitas web sesuai dengan identitas anda. Kemudian lakukan analisa terhadap script dan hasil output pada halaman browser.

Buatlah dokument dan script HTML untuk menampilkan halaman web yang memuat informasi berikut :

Profil Manajemen Informatika Jurusan Ekonomi dan Bisnis Politeknik Negeri Lampung

Visi

Text here


Misi

1. text item 1 here

2. text item 2 here

3. ….

Tujuan

text item 1 here

text item 2 here

….

Kompetensi Lulusan

Kompetensi 1

text item kompetensi 1

Kompetensi 1

text item kompetensi 1

….

Kompetensi n

text item kompetensi n

Nama / NPM / Jurusan

Simpanlah dokumen dengan format nama file sebagai berikut : tugas_p2_1_npm.html

8. Pustaka


9. Hasil Praktikum Dokumen HTML sederhana

Dokumen HTML lengkap dengan identitas website

Dokumen tutorial lingkungan kerja Macromedia Dreamweaver

Dokumen HTML dengan memanfaatkan elemen-elemen tag HTML untuk keperluan memformat halaman




1. Elemen Kompetensi Menguasai elemen-elemen pada tag BODY HTML


Mampu menggunakan elemen untuk memformat Teks

3. Teori

Memformat teks dapat dibedakan ke dalam 2 cara pandang, yaitu (1) physical formatting dan (2) logical formatting. Berikut ini adalah elemen-elemen (tag) yang memiliki tugas dan fungsi dalam hal memformat teks yang diklasifikasikan berdasarkan cara pandang tersebut, yaitu :

BOLD

Bold adalah tag digunakan untuk menebalkan bentuk teks pada dokumen html. Elemen Bold ditandai dengan tag <b>…</b>. Contoh : Mata Kuliah <b> DESIGN WEB </b>

ITALIC

Italic adalah tag digunakan untuk memiringkan bentuk teks pada dokumen html. Elemen Italic ditandai dengan tag <i>…</i>. Contoh : Mata Kuliah <i> DESIGN WEB </i>

UNDERLINE

Underline adalah tag digunakan untuk membuat garis bawah pada teks dalam dokumen html. Elemen Underline ditandai dengan tag <u>…</u>. Contoh : Mata Kuliah <u> DESIGN WEB </u>

BIG

Big adalah tag digunakan untuk merubah ukuran teks menjadi lebih besar dari ukuran normal dalam dokumen html. Elemen Big ditandai dengan tag <big>…</big>. Contoh : Mata Kuliah <big> DESIGN WEB </big>

SMALL

Small adalah tag digunakan untuk merubah ukuran teks menjadi lebih kecil dari ukuran normal dalam dokumen html. Elemen Small ditandai dengan tag <small>…</small>. Contoh : Mata Kuliah <small> DESIGN WEB </small>

STRIKE

Strike adalah tag digunakan untuk memberi garis ditengah teks dalam dokumen html. Elemen Strike ditandai dengan tag <strike>…</strike>. Contoh : Mata Kuliah <strike> DESIGN WEB </strike>

SUPERSCRIPT

Superscript adalah tag digunakan untuk mengubah teks ke bentuk superscript text dalam dokumen html. Elemen Superscript ditandai dengan tag <sup>…</sup>. Contoh : E=MC <sup>2</sup>


SUBSCRIPT

Subscript adalah tag digunakan untuk mengubah teks ke bentuk subscript text dalam dokumen html. Elemen Subscript ditandai dengan tag <sub>…</sub>. Contoh : H<sub>2</sub>O

CENTER

Center adalah tag digunakan untuk memformat teks menjadi rata tengah dalam dokumen html. Elemen Center ditandai dengan tag <center>…</center>. Contoh : <center>SAYA MENGAMBIL KULIAH DESIGN WEB </center>

STRONG

Strong adalah tag yang tugas dan fungsinya sama dengan tag <b>, digunakan untuk menebalkan bentuk teks pada dokumen html. Elemen Strong ditandai dengan tag <strong></strong>. Contoh : SAYA MENGAMBIL KULIAH <strong>DESIGN WEB </strong>

EM

EM adalah tag yang tugas dan fungsinya sama dengan tag <i>, digunakan untuk memiringkan bentuk teks pada dokumen html. Elemen EM ditandai dengan tag <em></em>. Contoh : SAYA MENGAMBIL KULIAH <em>DESIGN WEB </em>

INS

INS adalah tag yang tugas dan fungsinya sama dengan tag <u>, digunakan untuk membuat garis bawah pada teks dalam dokumen html. Elemen INS ditandai dengan tag <ins></ins>. Contoh : SAYA MENGAMBIL KULIAH <ins>DESIGN WEB </ins>

DEL

DEL adalah tag yang tugas dan fungsinya sama dengan tag <strike>, digunakan untuk memberi garis ditengah teks dalam dokumen html. Elemen DEL ditandai dengan tag <del></del>. Contoh : SAYA MENGAMBIL KULIAH <del>DESIGN WEB </del>

PRE

PRE adalah tag yang digunakan untuk menampilkan teks sesuai format aslinya dalam dokumen html. Elemen PRE ditandai dengan tag <pre>…</pre>. Contoh : <p><pre>

To run web applications,you need a web server. A web server is software that serves files in response to requests from web browsers. </pre></p>

ANCHOR

Anchor adalah tag yang digunakan untuk menentukan hyperlink dalam document HTML. Elemen Anchor ditandai dengan tag <a>…</a>. Contoh : <a href=”Hyperlink”> Klik Saya Sekarang </a>

Keterangan : • Hyperlink : Link Address • Absolute Address : merupakan full internet address (URL) yang meliputi protocol,

network-location, path dan filename. Contoh: http ://www.yahoo.com/index.html • Relatif Address : URL yang tidak menyebutkan protocol dan network location (hanya

path dan nama filenya). Contoh : ./content/profil.html • Section Address : merupakan hyperlink ke section tertentu dalam satu dokumen.

Contoh : #namesection

http://www.yahoo.com/index.html


4. Bahan dan Alat Personal Komputer

Perangkat lunak Web Browser ( yaitu : Mozilla Firefox, Opera, Internet Explorer (IE), Google Chrome, dll)



5. Organisasi

Mandiri (Perseorangan)

6. Prosedur Kerja

1. Buatlah direktori website didalam direktori web server yang telah terinstallasi :

Dengan nama direktori : “praktikum3”, didalam direktori aktif web server (direktori “pw”).


Formating Teks.

2.1. Menebalkan bentuk Huruf/teks menggunakan tag <b> dan atau <strong>

a. Buatlah dokumen HTML baru dan Ketiklah script berikut :

1 <html>

2 <head>

3

<title > Percobaan menebalkan bentuk Huruf/Teks </title>

4 </head>

5 <body>

6 <h2> Percobaan Menebalkan Bentuk Huruf/Teks </h2>

7 <hr/>

8 <p>

9 Berdasarkan cara pandang dimana sebuah script di interpretasikan, script

10 dibedakan menjadi 2 macam, yaitu <b>client-side script</b> dan

11 <strong>server-side script </strong>.

12 </p>

13 </body>

14 </html>



2.2. Memiringkan bentuk Huruf/teks menggunakan tag <i> dan atau <em>


1 <html>

2 <head>

3 <title > Percobaan memiringkan bentuk Huruf/Teks </title>

4 </head>

5 <body>

6 <h2> Percobaan Memiringkan Bentuk Huruf/Teks </h2>

7 <hr/>

8 <p>


10 dibedakan menjadi 2 macam, yaitu <i>client-side script</i> dan

11 <em>server-side script </em>.

12 </p>

13 </body>

14 </html>




2.3. Membuat garis bawah pada Huruf/teks menggunakan tag <u> dan atau <ins>


1 <html>

2 <head>

3 <title > Percobaan membuat garis bawah pada Huruf/Teks </title>

4 </head>

5 <body>

6 <h2> Percobaan Membuat Garis Bawah pada Huruf/Teks </h2>

7 <hr/>

8 <p>


10 dibedakan menjadi 2 macam, yaitu <u>client-side script</u> dan

11 <ins>server-side script </ins>.

12 </p>

13 </body>

14 </html>



2.4. Membuat garis ditengah Huruf/teks menggunakan tag <strike> dan atau <del>


1 <html>

2 <head>

3 <title > Percobaan membuat garis ditengah Huruf/Teks </title>

4 </head>

5 <body>

6 <h2> Percobaan Membuat Garis ditengah Huruf/Teks </h2>

7 <hr/>

8 <p>


10 dibedakan menjadi 2 macam, yaitu <strike>client-side script</strike> dan

11 <del>server-side script </del>.

12 </p>

13 </body>

14 </html>




2.5. Memodifikasi bentuk fisik huruf menggunakan tag <big>, <small>, <sup>, <sub> dan <center>


1 <html>

2 <head>

3 <title > Percobaan memodifikasi bentuk fisik Huruf/Teks </title>

4 </head>

5 <body> <h2> Percobaan Memodifikasi Bentuk Fisik Huruf/Teks </h2>

6 <hr/>

7 <p> 8 Berdasarkan <big>cara pandang</big> dimana sebuah script di 9 interpretasikan, <small>script dibedakan menjadi 2 macam, yaitu client- 10 side script dan server-side script </small>. 11 <center>Apakah benar saya telah berada di tengah halaman</center>

12 <br>

13 Rumus kimia air adalah H<sub>2</sub>O

14 .<br>

15 Rumus Enstain adalah E=MC<sup>2</sup>

16 </p>

17 </body> </html>



2.6. Menampilkan teks sesuai dengan format aslinya, menggunakan tag <pre>


1 <html>

2 <head>

3 <title > Percobaan tag PRE </title>

4 </head>

5 <body> <h2> Percobaan tag PRE </h2>

6 <hr/>

7 <pre> 8 To run web applications,you need a web server. 9 A web server is software that serves files in response to 10 requests from web browsers. 11 </pre>

12 </body>

13 </html>



2.7. Memformat teks sebagai hyperlink, menggunakan tag anchor <a>


1 <html>

2 <head>

3 <title > Percobaan hyperlink </title>

4 </head>

5 <body>

6 <h2> Percobaan thyperlink </h2>

7 <hr/>


8 <pre>

9 Praktikum pada hari ini, saya telah membuat halaman-halaman sebagai

10 berikut :

11

12 <a href=”percobaan3_1.html” target=”_blak”> percobaan3_1</a><br>







19

20 Dan berdasarkan beberapa percobaan diatas saya telah menguasai

21 penggunaan tag-tag HTML untuk keperluan formatting text.

22 </pre>

23 </body>

24 </html>




Modifikasilah tugas praktikum 3 (tugas_p3_1_npm.html) dengan memanfaatkan elemen-elemen formatting teks. Kemudian hasil modifikasi di simpan dengan nama tugas_p3_2_npm.html

8. Pustaka Bates, C., 2006, Web Programming: Building Internet Applications, Third Edition, Jhon Wiley &

Sons Ltd., England.

9. Hasil Praktikum Dokumen HTML dengan memanfaatkan elemen-elemen tag HTML untuk keperluan

memformat teks

Dokumen HTML dan halaman web untuk keperluan informasi program studi dengan teks terformat.






Mampu menggunakan elemen Multimedia

Mampu menggunakan elemen grouping

3. Teori

A. Elemen-elemen multimedia (Importing)

Berikut ini adalah elemen-elemen (tag) yang memiliki tugas dan fungsi dalam menampilkan

format multimedia (image dan video), yaitu :

IMAGE image adalah tag digunakan mendefinisikan sebuah image pada dokumen html. Elemen image ditandai dengan tag <img>…</img>. Contoh : <img src=“relatif-addresess“ />

Keterangan : Relatif Address - URL yang tidak menyebutkan protocol dan network location (hanya path

dan nama filenya). Contoh : “image1.jpg” atau “/images/image1.jpg”

APPLET

Applet adalah tag digunakan mendefinisikan file-file applet (java) ke dalam sebuah dokumen html. Elemen Applet ditandai dengan tag <applet>…</applet>. Contoh : <applet code=" relatif-addresess " codebase = "./flash "></applet>

Keterangan : Relatif Address - URL yang tidak menyebutkan protocol dan network location (hanya path

dan nama filenya). Contoh : “flashfile.fla” atau “/flash/movie.swf”

OBJECT

Object adalah tag digunakan mendefinisikan file-file objek multimedia (flash file) ke dalam sebuah tabel pada dokumen html. Elemen object ditandai dengan tag <object>…</object>.

Contoh : <object > <param name="movie" value="flashku.fla" /> <param name="quality" value="high" /> <embed src="flashku.fla" quality="high"

type="application/x-shockwave-flash"></embed> </object>

B. Elemen-elemen GROUPING

Elemen grouping memiliki fungsi untuk mengelompokkan atau mengisolasi

data/informasi/elemen-tag didalam halaman web. Berikut ini adalah elemen-elemen (tag) yang memiliki tugas dan fungsi dalam hal pengelompokan elemen-elemen (tag) lain, yaitu :


SPAN

Span adalah tag digunakan mengelompokkan elemen-elemen kategori text formatting pada dokumen html. Elemen Span ditandai dengan tag <span>…</span>. Contoh : <span style="font-size:25; color:#FF3300">

baris ini dalam span dengan warna orange. </span>

DIV

DIV adalah tag digunakan mengelompokkan elemen-elemen kategori page formating dan text formatting pada dokumen html. Elemen DIV ditandai dengan tag <div>…</div>. Contoh : <div style="font-size:25; color:#FF3300">

<b>DIV 1</b>. Area ini adalah DIV Pertama. </div> <div style="font-size:25; color:#CCCCCC">

<b>DIV 2</b>. Area ini adalah DIV kedua. </div>

TABLE

Elemen Table digunakan untuk membuat tabel di dalam halaman web. Berikut ini adalah elemen-elemen (tag) yang memiliki tugas dan fungsi dalam hal merancang dan membangun sebuah tabel, yaitu :

Keterangan :

• Table, tag untuk mendefinisikan sebuah tabel pada dokumen html. <table>…</tabel>.

• Table Row, tag untuk mendefinisikan sebuah baris atau lebih dalam sebuah tabel pada dokumen html. <tr>…</tr>.

• Table Column, tag untuk mendefinisikan sebuah kolom atau lebih dalam sebuah tabel pada dokumen html. <td>…</td>.

• Column Title, tag untuk mendefinisikan judul kolom dalam sebuah tabel pada dokumen html. <th>…</th>.

Contoh : <table> <tr>

<th>No</th><th>Nama</th> </tr> <tr>

<td>1.</td><td>Surya Darma</td> </tr> <tr>

<td>2.</td><td>Sinta Sari</td> </tr> </table>


Menyatukan/Menggabungkan Baris / Kolom :

Menyatukan 2 baris <tr> : - Atribut Rowspan: - Contoh : rowspan=“2”

Menyatukan 2 kolom <td> : - Atribut Colspan - Contoh : colspan=“2”

4. Bahan dan Alat

Personal Komputer




5. Organisasi


6. Prosedur Kerja




Importing Multimedia

2.1. Menampilkan image/gambar pada halaman web

a. Persiapkan file gambar format (jpg/jpeg). Dan letakkan di dalam direktori yang sama dengan file html.

b. Gantilah nama / rename file gambar tersebut dengan nama “gambar” c. Buatlah dokumen HTML lengkap dengan strukturnya d. Ketiklah script berikut diantara tag <body>..</body>:

<img src=”gambar.jpg”/>

<img src=”gambar.jpg” width=”200px” height=”200px” title=”ini gambar pertamaku”/>




2.2. Menampilkan Java Applet pada halaman web

a. Persiapkan file java applet. (download). Dan letakkan di dalam direktori yang sama dengan file html.

b. Gantilah nama / rename file applet tersebut dengan nama “jappletku” c. Buatlah dokumen HTML lengkap dengan strukturnya d. Ketiklah script berikut diantara tag <body>..</body>:

<applet code="jappletku " codebase = "./flash "></applet>





2.3. Menampilkan Java Applet pada halaman web a. Persiapkan file Flash/Swish. (download). Dan letakkan di dalam direktori yang sama

dengan file html. b. Gantilah nama / rename file applet tersebut dengan nama “flashku.fla” c. Buatlah dokumen HTML lengkap dengan strukturnya d. Ketiklah script berikut diantara tag <body>..</body>:

<object >

<param name="movie" value="flashku.fla" />

<param name="quality" value="high" />

<embed src="flashku.fla" quality="high" type="application/x-shockwave- flash"></embed>

</object>

e. Simpan dokumen dengan nama percobaan4_3.html dan simpanlah di dalam direktori “pw\praktikum4”.

f. Jalankan dokumen tersebut pada browser dengan cara mengetikan alamat “localhost/pw/praktikum4” pada address bar browser, dan amati hasil ouput.


Grouping

3.1. Membuat grouping dengan menggunakan tag <span>

a. Buatlah dokumen HTML lengkap dengan strukturnya b. Ketiklah script berikut diantara tag <body>..</body>:

<span style=”width:100%; padding:5px; border:1px solid #CCCCCC;”>

<h2>Span 1</h2>

<p>Teks ini berada pada area tag span<p>

</span>

<br/>

<span style=”width:50%; padding:5px; border:1px solid #CCCCCC;”>

<h2>Span 2</h2>

<p>Teks ini berada pada area tag span<p>

</span>

c. Simpan dokumen dengan nama percobaan4_4.html dan simpanlah di dalam direktori “pw\praktikum4”.

d. Jalankan dokumen tersebut pada browser dengan cara mengetikan alamat “localhost/pw/praktikum4” pada address bar browser, dan amati hasil ouput.

3.2. Membuat grouping dengan menggunakan tag <div>


<div style=”width:100%; padding:5px; border:1px solid #CCCCCC;”>

<h2>DIV 1</h2>

<p>Teks ini berada pada area tag div<p>

</div>

<br/>

<div style=”width:50%; padding:5px; border:1px solid #CCCCCC;”>

<h2>DIV 2</h2>

<p>Teks ini berada pada area tag div<p>

</div>




3.3. Membuat grouping dengan menggunakan tag <table>


<h2>Contoh Tabel</h2>

<TABLE width=”100%” cellpadding=”0” cellspacing=”0” border=”1”>

<tr><th>No.</th><th>NPM</th><th>Nama Lengkap</th><th>email</th></tr>

<tr><td>1</td><td>11210001</td><td>Reno</td><td>[email protected]</td></tr>

<tr><td>2</td><td>11210002</td><td>Budiono</td><td>[email protected]</td></tr>

</TABLE>




1) Buatlah satu dokumen HTML untuk menampilkan informasi seperti layout dibawah ini

(simpan file dengan nama : tugas4_1_npm.html):

2) Buatlah satu dokumen HTML untuk menampilkan informasi seperti layout dibawah ini (simpan file dengan nama : tugas4_2_npm.html):

3) Buatlah satu dokumen HTML untuk menampilkan tabel seperti layout dibawah ini (simpan file dengan nama : tugas4_3A_npm.html, tugas4_3B_npm.html, tugas4_3C_npm.html dan tugas4_3D_npm.html):

mailto:[email protected]

mailto:[email protected]



Sons Ltd., England.


importing multimedia

Dokumen HTML dengan memanfaatkan elemen-elemen tag HTML untuk keperluan grouping






Mampu menggunakan elemen Form

Mampu menggunakan HTML Input Elemen

3. Teori

A. Elemen Form

Elemen form berfungsi sebagai kerangka kerja/framework untuk HTML input elemen (pengolahan data). Bentuk umum elemen form adalah sebagai berikut :

<form method=“metode” action=“relatif-addresess”>

………….. //HTML input/textarea/select elemen

…………..

</form>

Keterangan : • Method : GET / POST • Relatif Address - URL yang tidak menyebutkan protocol dan network location (hanya path

dan nama filenya). Contoh : ./content/profil.html

B. HTML Input Elemen

Didalam sebuah form, elemen-elemen input HTML diletakkan, Berfungsi untuk menerima inputan dari user. Tag yang digunakan adalah <input/>, <textarea></textarea> dan <select></select>.

INPUT

Input adalah sebuah elemen form yang digunakan menerima masukan dari user dalam sebuah form. Elemen input terdiri dari berbagai macam type, berikut ini adalah daftar type elemen input yang umum digunakan:

No Type Sintak Type

1 Button <input type=“button”/> 2 Text <input type=“text”/> 3 Checkbox <input type=“checkbox”/> 4 Radio <input type=“radio”/> 5 Submit <input type=“submit”/> 6 Reset <input type=“reset”/>

TEXTAREA textarea adalah elemen input text dengan daya tampung text masukan berukuran besar. Contoh : <textarea cols=“12” rows=“5”/> </textarea>

SELECT

Select adalah elemen input HTML yang digunakan menampilkan combo pilihan. dan dari combo pilihan tersebut, user wajib memilih salah satu diantara pilihan yang disajikan.


Contoh : <select name=“pilihpekerjaan” size=“1”>

<option value=“1”>items1</option>

<option value=“2”>items2</option> ……..

</select>

4. Bahan dan Alat

Personal Komputer




5. Organisasi


6. Prosedur Kerja



2. Membuat form sederhana 1


<form name=”form1” methode=”GET” action=”#” />

Masukkan nama :<br>

<input type=”text” name="nama" size=”30” maxlength=”30” /><br>

Pilih Jenis Kelamin : <br>

<input type=”radio” name="sex" size=”1” value=”L” /> Laki-Laki

<input type=”radio” name="sex" size=”1” value=”P” />Perempuan<br>

Masukkan email : <br>

<input type=”text” name="email" size=”50” maxlength=”50” /><br>

<input type=”submit” value=”Simpan” />

</form>

c. Simpan dokumen dengan nama percobaan5_1.html dan simpanlah di dalam direktori






Masukkan nama :<br>

<input type=”text” name="nama" size=”30” maxlength=”30” /><br>

Masukkan alamat : <br>

<textarea name="alamat" cols="12" rows="4"></textarea><br>

<input type=”submit” value=”Simpan” />

</form>




4. Membuat form sederhana 3 a. Buatlah dokumen HTML lengkap dengan strukturnya b. Ketiklah script berikut diantara tag <body>..</body>:


Pilih Pekerjaan: <br>

<select name=”job” size=”1”>

<option value="1" >Pegawai Negeri Sipil</option>

<option value="2" >TNI/POLRI</option>

<option value="3" >Pegawai Swasta</option>

<option value="4" >Wiraswasta</option>

</select>

</form>






Username :<br>

<input type=”text” name="username" size=”30” maxlength=”30” /><br>

Password : <br>

<input type=”password” name="password" size=”30” maxlength=”30” /><br>

<input type=”submit” value=”Login” />

</form>




1) Buatlah satu dokumen HTML untuk menampilkan form registrasi data mahasiswa baru

dengan format layout bebas (simpan file dengan nama : Tugas5_1_npm.html):

2) Buatlah satu dokumen HTML untuk menampilkan form registrasi data pegawai dengan

format layout bebas (simpan file dengan nama : Tugas5_2_npm.html):

3) Buatlah satu dokumen HTML untuk menampilkan form login (seperti pada gambar) untuk

sistem informasi akademik. dengan format layout seperti pada gambar dibawah ini (simpan file dengan nama : Tugas5_3_npm.html):


8. Pustaka



importing multimedia

Dokumen HTML dengan memanfaatkan elemen-elemen tag HTML untuk keperluan grouping


Minggu ke : 6 Unit Kompetensi : Client Side Script : Casecading Style Sheet (CSS) Waktu : 240 menit


1. Elemen Kompetensi Menguasai Konsep Dasar Script Casecading Style Sheet (CSS)

Menguasai desain layout web dengan metode inline style sheet, outline style sheet dan crossline style sheet.


Mampu menjelaskan konsep dasar Script Casecading Style Script (CSS)

Mampu mendesain layout halaman dengan metode inline style sheet

Mampu mendesain layout halaman dengan metode outline style sheet

Mampu mendesain layout halaman dengan metode crossline style sheet

3. Teori

Pengantar Casecading Style Sheet (CSS) : • CSS, merupakan fitur yang sangat penting dalam hal merancang atau mendesain halaman

web (HTML). • CSS merupakan teknik dan mekanisme untuk mendesain, mengontrol dan mengelola style

elemen-elemen tag HTML. • CSS mendeskripsikan bagaimana interface dokumen HTML di layar monitor. • Dengan CSS, efek-efek spesial di dalam halaman web bisa disajikan. • CSS technology support pada hampir semua web Browser. Karena CSS telah di standar-kan

oleh World Wide Web Consortium (W3C) untuk di gunakan di web browser. • Secara teoritis CSS, dapat disertakan (embeded) dalam dokumen html untuk mendukung

desain style halaman web.

CSS dalam sebuah dokumen HTML, dapat disertakan dengan 3 mekanisme (metode), yaitu :

1) Inline Style Sheet suatu mekanisme penulisan script style sheet (CSS) langsung pada elemen-elemen tag HTML. Penggunaan Inline style ditandai dengan penulisan atribut „style‟ pada sebuah

elemen tag HTML.

2) Outline Style Sheet suatu mekanisme pengelompokan dan penulisan script style sheet (CSS) pada area tersendiri. Penggunaan outline style ditandai dengan penulisan tag <style>..</style> didalam area tag <head></head>.


3) Crossline Style Sheet Suatu mekanisme pengelompokan dan penulisan script style sheet (CSS) pada file tersendiri

(*.CSS), kemudian file CSS tersebut disertakan (embeded) ke dalam halaman web (file html) yang menggunakannya. Penggunaan Crossline style ditandai dengan penulisan tag <link> didalam area tag <head></head>.

Konsep dasar penulisan script CSS dan istilah-istilah penting :

Style Rule

Cascading style sheet merupakan kumpulan aturan yang mendefinisikan style dari document. Sebagai contoh kita bisa membuat aturan style yang menentukan bahwa semua <H2> di tampilkan dengan warna orange.

Selector, Property dan Value

Selector adalah sebuah nama tag HTML, property adalah properti-properti yang dimiliki oleh sebuah selector, dan value adalah nilai dari sebuah property.

Contoh :


Selector { property:value;

property:value; …………….

}

H1 {

}

font-size:100%; font-weight:bold; color:#000000;

Komentar

Comments atau komentar biasanya di gunakan oleh programmer untuk memudahkan mengingat kembali script yang sudah di tulisnya, Comments di CSS hampir sama dengan comments di C atau C++ yaitu dengan mengapit selector berserta deklarasinya dengan tanda /* …. */ Contoh : /* H1 { font-size:100%; font-weight:bold; } */

4. Bahan dan Alat

Personal Komputer




5. Organisasi


6. Prosedur Kerja

1. Buatlah direktori website didalam direktori web server yang telah terinstallasi : Dengan nama direktori : “praktikum6”, didalam direktori aktif web server (direktori “pw”).

2. Menggunakan Inline Style Sheet pada elemen <body>, <h1> dan <p>.

a. Buatlah dokumen HTML lengkap dengan strukturnya dan Ketiklah script berikut :

<html> <head>

<title> Belajar CSS </title> </head> <body style=” background-color:#333333; color:#F1F1F1; font-size:100%; ”> Elemen H1 Standar <br>

<h1> Heading 1 </h1> Elemen H1 dimodifikasi dengan Stylesheet (CSS) <br>

<h1 style=”color:#FFCC00; font-weight:bold; font-size:140%;“> Heading 1 </h1> <p style=” font-size:100%; color:#cccccc; line-height:12px; width:400px; “>

HyperText Markup Language (HTML) adalah suatu bahasa pengkodean (coding/scripting) yang digunakan untuk membangun sebuah halaman web. Script HTML akan diinterpretasikan dan diterjemahkan oleh browser, kemudian browser akan menampilkan hasil ke pengguna. </p> </body>

</html>




3. Menggunakan Inline Style Sheet untuk mendesain menu


<div style=" width:100%; padding:5px; border:none; height:30px; background-color: #003366; float-left; margin:0; color:#FFFFFF; ">

<ul style=" margin:0; padding:0; list-style:none; ">

<li style=" float: left; list-style:none; margin:3px; padding:2px; width:100px; background-color: #0066CC; color:#FFFFFF; text-align:center; ">Home</li>

<li style=" float: left; list-style:none; margin:3px; padding:2px; width:100px; background-color: #0066CC; color:#FFFFFF; text-align:center; ">Profile</li>

<li style=" float: left; list-style:none; margin:3px; padding:2px; width:100px; background-color: #0066CC; color:#FFFFFF; text-align:center; ">Produk</li>

<li style=" float: left; list-style:none; margin:3px; padding:2px; width:100px; background-color: #0066CC; color:#FFFFFF; text-align:center; ">Kontak</li>

</ul>

</div>

c. Simpan dokumen dengan nama percobaan6_2.html dan simpanlah di dalam direktori


d. Jalankan dokumen tersebut pada browser dengan cara mengetikan alamat “localhost/pw/praktikum6” pada address bar browser, dan amati hasil

4. Menggunakan Outline Style Sheet pada elemen <body>, <h1> dan <p>.

a. Buatlah dokumen HTML lengkap dengan strukturnya dan Ketiklah script berikut :

<html> <head>

<title> Belajar CSS (OUTLINE STYLESHEET) </title> <style>

Body { background-color:#333333; color:#F1F1F1; font-size:100%; } H1 { color:#FFCC00; font-weight:bold; font-size:140%; } P { font-size:100%; color:#cccccc; line-height:12px; width:400px; }

</style> </head> <body>

<h1> HTML </h1> <p> HyperText Markup Language (HTML) adalah suatu bahasa pengkodean (coding/scripting) yang digunakan untuk membangun sebuah halaman web. Script HTML akan diinterpretasikan dan diterjemahkan oleh browser, kemudian browser akan menampilkan hasil ke pengguna. </p> </body>

</html>


c. Jalankan dokumen tersebut pada browser dengan cara mengetikan alamat “localhost/pw/praktikum6” pada address bar browser, dan amati hasil


5. Menggunakan Outline Style Sheet untuk mendesain menu

a. Buatlah dokumen HTML lengkap dengan strukturnya b. Ketiklah script dibawah ini, letakkan didalam <head></head>:

<style>

#model {

width:100%; padding:5px; border:none; background-color:#000000; float-left; color:#FFFFFF; text-align:center; font-family:arial; font-size:120%;

}

ul { margin:0; padding:0; list-style:none; }

li { float: left; list-style:none; margin:3px; padding:2px; width:100px; background-

color: #0066CC; color:#FFFFFF; text-align:center;

}

</style>

c. Ketiklah script berikut diantara tag <body>..</body>:

<div id=”model”>

<ul>

<li>Home</li>

<li >Profile</li>

<li>Produk</li>

<li >Kontak</li>

</ul>

</div>

d. Simpan dokumen dengan nama percobaan6_4.html dan simpanlah di dalam direktori


e. Jalankan dokumen tersebut pada browser dengan cara mengetikan alamat “localhost/pw/praktikum6” pada address bar browser, dan amati hasil

6. Menggunakan Crossline Style Sheet : Merancang dokumen CSS sederhana dan

menggunakannya dalam dokumen HTML. a. Buatlah dokumen CSS baru dan ketikkan script css berikut ini

/* CSS Document */ Body { background-color:#333333; color:#F1F1F1; font-size:100%; margin:0; padding:0; font-family:Arial, Helvetica, sans-serif;} #mainarea {width:80%; margin:0; margin:auto; padding:0; background-color:none; height:100%;} #leftarea {width:25%; margin:5px; float:left; background-color:#000000; padding:5px;} #rightarea {width:72%; margin:5px; float:right;} Div { margin-bottom:5px;} #blok1 { background-color:#1226BA; color:#F1F1F1; padding:10px; width:100%; margin:0;} #blok2 { background-color:#268006; color:#F1F1F1; padding:10px; width:100%; margin:0;} #blok3 { background-color:#D6E304; color:#000000; padding:10px; width:100%; margin:0;} #model { height:auto; width:100%; padding:0; border:none; background-color:none; float- left; color:#FFFFFF; text-align:center; font-family:arial; font-size:120%; } ul { margin:0; padding:0; list-style:none; } li { float: left; list-style:none; margin:3px; padding:2px; width:97%; background- color: #0066CC; color:#FFFFFF; text-align:center; }


b. Simpanlah Dokumen CSS diatas dengan nama style_1.css

c. Buatlah dokumen HTML lengkap dengan strukturnya d. Ketiklah script HTML berikut:

<html> <head>

<title> Belajar CSS (CROSSLINE STYLESHEET) </title> <link href="style_1.css" type="text/css" media="screen" rel="stylesheet" />

</head> <body> <div id="mainarea" > <div id="leftarea"> <div id="model"> <ul> <li>Home</li> <li >Profile</li> <li>Produk</li> <li >Kontak</li> </ul> </div> </div> <div id="rightarea"> <div id="blok1"> HyperText Markup Language (HTML) adalah suatu bahasa pengkodean (coding/scripting) yang digunakan untuk membangun sebuah halaman web. Script HTML akan diinterpretasikan dan diterjemahkan oleh browser, kemudian browser akan menampilkan hasil ke pengguna. </div> <div id="blok2"> HyperText Markup Language (HTML) adalah suatu bahasa pengkodean (coding/scripting) yang digunakan untuk membangun sebuah halaman web. Script HTML akan diinterpretasikan dan diterjemahkan oleh browser, kemudian browser akan menampilkan hasil ke pengguna. </div> <div id="blok3"> HyperText Markup Language (HTML) adalah suatu bahasa pengkodean (coding/scripting) yang digunakan untuk membangun sebuah halaman web. Script HTML akan diinterpretasikan dan diterjemahkan oleh browser, kemudian browser akan menampilkan hasil ke pengguna. </div> </div>

</body>

</html>

e. Simpan dokumen dengan nama percobaan6_5.html dan simpanlah di dalam direktori “pw\praktikum6”.

f. Jalankan dokumen tersebut pada browser dengan cara mengetikan alamat

“localhost/pw/praktikum6” pada address bar browser, dan amati hasil



Buatlah sebuah homepage dengan memanfaatkan file CSS yang anda rancang untuk kebutuhan desain homepage tersebut. Ketentuan. 1) Simpan dokumen HTML dengan nama (tugas6_1_npm.html) 2) Simpan dokumen CSS dengan nama (style_2.css). 3) Dengan Layout Homepage adalah sebagai berikut :


Sons Ltd., England.

9. Hasil Praktikum Dokumen HTML yang dilengkapi dengan desain layout menggunakan Casecading style

sheet.

Dokumen HTML yang dilengkapi dengan desain layout menggunakan berbagai metode scripting pada Casecading style sheet.


Minggu ke : 7 Unit Kompetensi : Client Side Script : JAVAScript Waktu : 240 menit


1. Elemen Kompetensi Menguasai konsep dasar JAVAScript


Mampu menjelaskan konsep dasar pemrograman JAVAScript

Mampu membuat script sederhana dengan JAVAScript

Mampu membuat script untuk objeck dan form dengan JAVAScript

3. Teori

A. Sekilas Tentang Javascript

Javascript adalah bahasa skrip yang ditempelkan pada kode HTML dan diproses di sisi klien. Dengan adanya bahasa ini, kemampuan dokumen HTML menjadi semakin luas. Sebagai contoh, dengan menggunakan JavaScript dimungkinkan untuk memvalidasi masukan-masukan pada formulir sebelum formulir dikirimkan ke server. Javascript bukanlah bahasa Java dan merupakan dua bahasa yang berbeda. Javascript diinterpretasikan oleh klien (kodenya bisa dilihat pada sisi klien), sedangkan kode Java dikompilasi oleh pemrogram dan hasil kompilasinyalah yang dijalankan oleh klien.

B. Struktur Dokumen Javascript

Secara umum struktur dari JavaScript adalah sebagai berikut :

<SCRIPT LANGUAGE = ”JavaScript”>

<!- -

Penulisan kode javascript

// - - >

</SCRIPT>

Keterangan : Kode <!- - // - - > umumnya disertakan dengan tujuan agar sekiranya browser tidak mengenali JavaScript maka browser akan memperlakukannya sebagai komentar sehingga tidak ditampilkan pada jendela browser.

C. Javascript Pemrograman Berorientasi Objek

Properti

Properti adalah atribut dari sebuah objek. Contoh, objek mobil punya properti warna mobil.

Penulisan : Nama_objek.nama_properti = nilai window.defaultStatus = ”Selamat Belajar JavaScript”;

Metode

Metode adalah suatu kumpulan kode yang digunakan untuk melakukan sesuatu tindakan terhadap objek.

Penulisan : Nama_objek.nama_metode(parameter) document.write (”Hallo”)

D. Letak Kode Program Javascript dalam dokumen HTML

Kode program (script) Javascript dalam dokumen HTML diletakkan pada :

area Head

Dan bias juga pada area Body (jarang digunakan).

4. Bahan dan Alat

Personal Komputer




5. Organisasi


6. Prosedur Kerja



2. Dasar-dasar pemrograman javascript

Pemakaian alert sebagai property window a. Buatlah dokumen HTML Baru dan Ketiklah Script berikut :

<HTML>

<HEAD><TITLE>Alert Box</TITLE></HEAD>

<BODY>

<SCRIPT LANGUAGE = "JavaScript">



</SCRIPT>

</BODY>

</HTML>




Pemakaian metode dalam objek. a. Buatlah dokumen HTML Baru dan Ketiklah Script berikut :

<HTML> <HEAD><TITLE>Skrip JavaScript</TITLE></HEAD> <BODY> Percobaan memakai JavaScript:<BR> <SCRIPT LANGUAGE = "JavaScript">  </SCRIPT> </BODY> </HTML>

Penggunaan Prompt a. Buatlah dokumen HTML Baru dan Ketiklah Script berikut :

<HTML>

<HEAD><TITLE>Pemasukan Data</TITLE></HEAD>

<BODY>




</SCRIPT>

</BODY>

</HTML>




Pembuatan fungsi dan cara pemanggilannya a. Buatlah dokumen HTML Baru dan Ketiklah Script berikut :

<HTML>

<HEAD><TITLE>Contoh Program Javascript</TITLE></HEAD>

<SCRIPT language="Javascript">

function pesan(){

alert ("memanggil javascript lewat body onload")

}

</SCRIPT>

<BODY onload=pesan()>

</BODY>

</HTML>



Operasi dasar aritmatika a. Buatlah dokumen HTML Baru dan Ketiklah Script berikut :

<HTML>

<HEAD><TITLE>Contoh Program Javascript</TITLE></HEAD>


function test (val1,val2)

{

document.write("<br>"+"Perkalian : val1*val2 "+"<br>")

document.write(val1*val2)

document.write("<br>"+"Pembagian : val1/val2 "+"<br>")

document.write(val1/val2)

document.write("<br>"+"Penjumlahan : val1+val2 "+"<br>")

document.write(val1+val2)

document.write("<br>"+"Pengurangan : val1-val2 "+"<br>")

document.write(val1-val2)

document.write("<br>"+"Modulus : val1%val2 "+"<br>")

document.write(val1%val2)

}

</SCRIPT>

<BODY>

<input type="button" name="button1" value="arithmetic"

onclick=test(9,4)>

</BODY>

</HTML>



Operasi relational a. Buatlah dokumen HTML Baru dan Ketiklah Script berikut :

<HTML>

<HEAD>

<TITLE>Contoh Program Javascript</TITLE>

</HEAD>


function test () {

val1=window.prompt("Nilai I :")

val2=window.prompt("Nilai II :")

document.write("<br>"+"val1==val2"+"<br>")

document.write(val1==val2)

document.write("<br>"+"val1!=val2"+"<br>")

document.write(val1!=val2)

document.write("<br>"+"val1&gtval2"+"<br>")

document.write(val1>val2)

document.write("<br>"+"val1&ltval2"+"<br>")

document.write(val1<val2) }

</SCRIPT>

<BODY>

<input type="button" name="button1" value="relational"

onclick=test()>

</BODY>

</HTML>



Seleksi kondisi (if..else) a. Buatlah dokumen HTML Baru dan Ketiklah Script berikut :

<HTML>

<HEAD>

<TITLE>Contoh if-else</TITLE>

</HEAD>

<BODY>


<!--

var nilai = prompt("Nilai (0-100): ", 0);

var hasil = ""; if

(nilai >= 60)

hasil = "Lulus";


else

hasil = "Tidak Lulus";

document.write("Hasil: " + hasil);

//-->

</SCRIPT>

</BODY>

</HTML>



Penggunaan operator switch untuk seleksi kondisi a. Buatlah dokumen HTML Baru dan Ketiklah Script berikut :

<HTML>

<HEAD>


</HEAD>


function test ()

{

val1=window.prompt("Input Nilai (1-5):")

switch (val1)

{

case "1" :

document.write("bilangan satu")

break

case "2" :

document.write("bilangan dua")

break

case "3" :

document.write("bilangan tiga")

break

case "4" :

document.write("bilangan empat")

break

case "5" :

document.write("bilangan lima")

break

default :

document.write("bilangan lainnya")

}

}

</SCRIPT>

<BODY>

<input type="button" name="button1" value="switch"

onclick=test()>

</BODY>

</HTML>



Pemakaian looping < for > a. Buatlah dokumen HTML Baru dan Ketiklah Script berikut :

<HTML>

<HEAD>


</HEAD>

<BODY>




</SCRIPT>

</BODY>

</HTML>



Pemakaian looping < do..while > a. Buatlah dokumen HTML Baru dan Ketiklah Script berikut :

<HTML>

<HEAD>


</HEAD>

<BODY>




</SCRIPT>

</BODY>

</HTML>



Pemakaian looping < while > a. Buatlah dokumen HTML Baru dan Ketiklah Script berikut :

<HTML> <HEAD> <TITLE>Contoh Program Javascript</TITLE> </HEAD> <BODY> <SCRIPT language="Javascript"> <!-- var x=0 while (x<=10){

<FORM> <INPUT TYPE = "BUTTON" VALUE = "Latar Belakang Hijau" onClick = "ubahWarnaLB('GREEN')"> <INPUT TYPE = "BUTTON" VALUE = "Latar Belakang Putih" onClick = "ubahWarnaLB('WHITE')"> <INPUT TYPE = "BUTTON" VALUE = "Teks Kuning" onClick = "ubahWarnaLD('YELLOW')"> <INPUT TYPE = "BUTTON" VALUE = "Teks Biru" onClick = "ubahWarnaLD('BLUE')"> </FORM> <SCRIPT LANGUAGE = "JavaScript">  </SCRIPT> </BODY>

</HTML>




1) Buat halaman html untuk mengkonversi nilai angka menjadi nilai huruf dengan

menggunakan javascript. Simpanlah dokumen dengan format nama file sebagai berikut : tugas_p7_1_npm.html Konversi : 0-40 =E 41-55=D 56-60=C 61-65=BC 66-70=B 71-80=AB 81-100=A

2) Buat halaman html untuk menampilkan aplikasi program kalkulator sederhana dengan

menggunakan javascript.

Contoh Tampilan :

Bil 1 dan Bil 2 merupakan text box, dapat diisi angka, bila tombol + atau – atau x atau / ditekan, maka akan keluar bilangan pada text box hasil, dimana bilangan ini merupakan operasi arithmetic sesuai dengan tombol yang ditekan. Simpanlah dokumen dengan format nama file sebagai berikut : tugas_p7_2_npm.html



Sons Ltd., England.


memformat halaman


Minggu ke : 8 Unit Kompetensi : UTS Waktu : 240 menit


1. Elemen Kompetensi Menguasai HTML & CSS


Mampu melakukan instalasi joomla

Mampu memahami struktur joomla

3. Teori

4. Bahan dan Alat

Personal Komputer




5. Organisasi


6. Prosedur Kerja 7. Tugas dan Pertanyaan


Sons Ltd., England.


memformat halaman


Minggu ke : 9 Unit Kompetensi : Mengenal Joomla Waktu : 240 menit


1. Elemen Kompetensi Menguasai komponen-komponen joomla


Mampu melakukan instalasi joomla

Mampu membuat category di joomla

3. Teori CMS adalah software yang digunakan untuk membuat, mengubah dan mempublikasikan content ke dalam sebuah website. Fasilitas yang umumnya terdapat dalam CMS sangat banyak, terutama yang berkaitan dengan publikasi isi website, pengaturan halaman, pengubahan isi, pencarian dan lain-lain. Sebuah CMS, dapat berbentuk program yang sederhana, atau dapat juga merupakan suatu program kompleks yang terdiri dari berbagai modul-modul sesuai dengan fasilitas yang terdapat didalamnya.

Kita memerlukan CMS karena para pengelola atau pemilik website yang tidak mahir dalam menggunakan kode HTML dapat melakukan pembuatan, pengubahan dan publikasi content terhadap website-nya sendiri. CMS menyediakan framework manajemen proses yang dibutuhkan dalam pengembangan website yang menghendaki pengelolaan yang sering / dalam frekuensi yang tinggi.

Salah satu CMS yang banyak digunakaan adalah Joomla. Joomla merupakan perangkat lunak untuk manajemen konten web atau sering juga di sebut dengan CMS ( Content Management System ). Konten yang bisa di tangani Joomla antara lain publikasi web, mengedit web, menghapus web dan lain-lain. CMS saat ini semakin populer kemudahan dalam menggunakannya.

Dahulu jika kita ingin membuat web, kita harus bersusah payah belajar bahasa pemrograman web seperti ASP, PHP, dan Java. Dengan adanya CMS khususnya Joomla, orang awam dapat membuat web dengan mudah dan cepat. CMS yang sejenis Joomla banyak, antara lain Mamboo, PHPNuke, AuraCMS dan masih banyak yang lainnya.

4. Bahan dan Alat

Personal Komputer




5. Organisasi


6. Prosedur Kerja

A. Installasi Joomla Sebelumnya install web server, anda dapat menggunkan web server (lihat pertemuan 1). Setelah itu pastikan web server anda telah berjalan dengan normal.

http://blog.balimechanicweb.net/2012/07/cms-content-management-system/

http://blog.balimechanicweb.net/2012/07/dasar-pemograman-website-html/

http://www.kudaliar.com/category/cms/


B. Install joomla 1. Letakkan installer joomla pada folder c://xampp/htdocs


2. Extract installer tersebut dan sesuaikan nama foldernya, (pada contoh diatas menggunkan nama pelatihan)

3. Buka lah web browser, ketikkan url berikut http://localhost/pelatihan

Tentukan ilihan bahasa yang anda inginkan.

4. Selanjutnya pastikan pre installation joomla tidak ada masalah



Sons Ltd., England.


memformat halaman

http://localhost/pelatihan

Module desain web

Education

Transcript of Module desain web