Materi aplikasi IT 1

(1)

1

APLIKASI IT I

TEKNIK INFORMATIKA TEKNIK INFORMATIKA

2009 2009

APLIKASI IT I

A

It

Apa

Apa Itu

Itu

INTERNET?????

(2)

2

Jaringan Komputer

Jenis Jaringan Komputer

y _{LAN (Lokal Area Network): Jenis komunikasi menggunakan}

media Kabel.

y _{WAN (Wide Area Network) : Jenis Komunikasi}

(3)

3

Perangkat Akses Internet

y _Hardware

_{Modem : internal atau eksternal menghubungkan antara komputer}

dengan jalur komunikasi dengan jalur komunikasi.

_{Saluran komunikasi : media yang digunakan untuk menerima atau}

mengirim data dari dan ke internet. y _Software

Software untuk mengakses internet seperti web browser ( Internet Mozilla, Netscape, Mosaic dll), software Email (Microsoft Outlook, mail), software pengirim/penerima data ( Cute FTP, BFTP dll) p g p y _{Penyedia Akses}

(4)

4

WEB BROWSER

y _{Web browser adalah suatu perangkat lunak yang} digunakan untuk menampilkan halaman-halaman digunakan untuk menampilkan halaman halaman web (website) yang berada di internet.

y Jenis web browser yang sering dipakai adalah : 1. Internet Explorer

2. Netscape p 3. Mozilla 4. Opera 5. Flock

HTML (Hyper Text Markup Language)

y Bahasa Pengkodean untuk menghasilkan dokumen-dokumen hypertext untuk digunakan di World Wide Web.

(5)

5

Program Editor HTML

y _{Editor yang digunakan untuk mengetik, mengedit atau}

menyimpan Dokumen HTML

y _{Editor untuk memdesain suatu web dibagi 2 yaitu :}

1. Yang bersifat text murni : Notepad dan Ultra Edit

2 Yang WYSIWYG (Graphic) Netscape dan Front 2. Yang WYSIWYG (Graphic) : Netscape dan Front

Page.

Struktur Dasar HTML

y _{Tag – tag Dasar penulisan HTML yaitu :}

<HTML>HTML <HEAD>

<TITLE> Judul Dokumen </TITLE> <HEAD>

<BODY>O

Data – data yang ingin ditampilkan </BODY>

(6)

6

Elemen dan Tag HTML

y Elemen :

yElemen <HEAD> : informasi tentang dokumen tersebut, seperti judul dokumen astau hubungannya dengan dokumen lain.

l k b d k

yElemen <BODY> : menentukan bagaimana isi suatu dokumen ditampilkan oleh browser, seperti paragraf, list (daftra), tabel dll.

y _{Tag :}

yKode khusus dalam HTML. Ditandai dengan <>. yTag Awal dinyatakan dalam bentuk<nama Tag> yTag Akhir dinyatakan dalam bentukTag Akhir dinyatakan dalam bentuk</nama Tag></nama Tag>

ContohTag :

<namaTag> Teks yang akan ditampilkan </namaTag>

Desain HTML

y _{Contoh Desain HTML} <HTML>

<HEAD>

<TITLE>Program Pertama</TITLE> </HEAD>

<BODY>

<B>INI PROGRAM PERTAMA SAYA</B> <B>INI PROGRAM PERTAMA SAYA</B> </BODY>

(7)

7

Hasil di Web Browser

ELEMEN DASAR HTML

y Elemen dasar yang menyediakan Informasi berupa teks : yPARAGRAPHPARAGRAPH : untuk membuat suatu: untuk membuat suatu

Paragraf

yBLOCKQUOTE : untuk membuat kutipan

teks

y_PREFORMATTED _TEXT _: _untuk

menampilkan teks seperti yang dituliskan menampilkan teks seperti yang dituliskan

yDIVIDER : untuk mengelompokkan suatu teks

(8)

8

PARAGRAF

y _{Elemen <p>…..</p> untuk menandai teks sebagai suatu} paragraf

y _{Atribut Paragraf :}

Atribut Argumen Keterangan

Align Left Right Center Digunakan untuk perataan suatu paragraf, apakah Justify

p g , p rata kiri,kanan, tengah ataupun rata kiri/kanan (justify)

Contoh kode HTML untuk Paragraf

<html> <body> y

<p>Paragraf satu.</p> <p>Paragraf dua.</p> <p>Paragraf tiga.</p>

<p>Elemen paragraf didefinisikan dengan menggunakan tag P.</p>

(9)

9

Hasilnya

y _{Contoh kode HTML dengan tambahan atribut}_:

<html> <body>

<p align="right">Paragraf dengan perataan kanan. </p> <p align="center">Paragraf dengan rata tengah.</p> <p align="left">Paragraf tiga.</p>

<p align="justify">Paragraf dengan perataan justify.</p> </body>

(10)

10

Hasilnya

Format Penyimpanan File HTML

y _{Karena HTML adalah dokumen yang ditampilkan di}

dalam Browser, maka format yang dikenal adalah .HTML , y g atau .HTM

y _{Sehingga file yang disimpan harus memiliki Format .html} y Contoh :

(11)

11

Praktek Pertemuan ke-1

y _{Langkah awal pembuatan file HTML}

1. Buat Folder baru di Data Mahasiswa dengan nama kelasg anda/NIM. Contoh IF-1/10103082

2. Buat File baru file HTML di Ultra Edit dengan cara : File – New atau klik Ctrl + N

3. Lalu ketikan tag di bawah ini : 4. Simpan dengan nama Praktek1.htmlp g 5. Untuk melihat hasilnya :

Window – Show File in Browser

<html> <head> <title>Latihan Pertama</title> </head> <body> <b>

<p align="center">SELAMAT DATANG DI UNIKOM</p> b

</b> <br>

<p align="justify">Halo, Nama Saya Rani Susanto, saya senang sekali bisa masuk UNIKOM, apalagi bisa masuk ke Jurusan Teknik Informatika UNIKOM. Mudah -mudahan saya bisa menjadi yang <i> the best </i> di Jurusan ini. Teknik Informatika atau yang disingkat menjadi IF, adalah salah satu jurusan terbaik yang dimiliki oleh UNIKOM dan saya bangga bisa menjadi bagian di dalamnya.</p> <hr>

<p align="right">Jurusan Lain yang ada di UNIKOM <br>

1.Teknik Komputer <br> 2. Manajemen Komputer <br> </p>

(12)

12

(13)

1

MEMFORMAT HTML

Pertemuan 2

Heading

(14)

2

Phisical Style

Suatu jenis format yang diberikan pada teks tanpa tergantung pada

jenis dari elemen dasar teks tersebut.

Elemen Fungsi <B>…………..</B> <I>………</I> <U>…………..</U> <S>………</S> <BLINK>…….</BLINK> <TT> <TT>

Untuk menebalkan teks

Untuk membuat teks terlihat miring Untuk menggarisbawahi teks

Untuk memberikan coretan pada teks Membuat teks berkedip (khusus netscape)

M ilk t k d l f t <TT>……..…..<TT>

Menampilkan teks dalam format typewriter

Untuk membesarkan teks Untuk mengecilkan teks Membuat teks subscript Membuat teks superscript

(15)

3

Font

Ukuran Teks

Untuk mengatur ukuran suatu teks, elemen FONT Untuk mengatur ukuran suatu teks, elemen FONT menyediakan atribut SIZE dengan nilai dari 1 sampai 7. Contoh :

<font size=1>ukuran teks=1</font> <font size=2>ukuran teks=2</font> <font size=3>ukuran teks=3</font> <font size=4>ukuran teks=4</font> <font size=4>ukuran teks=4</font> <font size=5>ukuran teks=5</font> <font size=6>ukuran teks=6</font> <font size=7>ukuran teks=7</font>

(16)

4

Mengubah Warna Teks

Atribut COLOR pada elemen FONT. Pendefinisian

warna dilak kan dengan d a cara ait melal i warna dilakukan dengan dua cara yaitu, melalui nama warna atau menggunakan nilai RGB warna.

Penggunaan pada HTML

<font color =”red”>teks berwarna merah</font> <font color=”#8A2BE2”>Teks berwarna

Blueviolet</font>

(17)

5

Mengubah Jenis Font

Menggunakan atribut FACE pada elemen FONT.

Jenis jenis font ait TIMES NEW ROMAN ARIAL Jenis – jenis font yaitu TIMES NEW ROMAN, ARIAL, COMIC SANS MS, COURIER NEW dan lain

sebagainya.

Contoh Penggunaan Jenis Font

<Font Face=”arial”>Font jenis Arial</font> <Font Face=”Comic San MS”> Jenis Font Comic San MS</font>

(18)

6 Contoh Penggabungan :

<font size=”6” color=”green” face=”arial”>Gabungan beberapa atribut pada suatu teks</font>

Ganti Baris dan Garis Horizontal

Elemen untuk ganti baris adalah <BR> yang

berg na nt k men liskan teks pada baris berguna untuk menuliskan teks pada baris berikutnya. Contoh :

<Font Face=”arial”>Font jenis Arial</font> <br>

(19)

7

Garis Horizontal

Elemen untuk membuat garis horizontal adalah

<HR> Beberapa atrib t ang dig nakan ait <HR>. Beberapa atribut yang digunakan yaitu :

Contoh penggunaan pada HTML

<hr align="left" width="500" size="10" noshade> <hr>

<hr align="center" width="400" size="7" color="red">

(20)

8

Latihan

Buatlah perintah HTML di bawah ini Simpanlah dengan nama Praktek2.html

<html> <head> <title>Memformat HTML</title> </head> <body> <h1 align="center">UNIKOM</H1>

<Font size=6>U</font>nikom adalah universitas Komputer pertama di <b>Bandung</b>. Dengan <i>basic</i> IT yang dimiliki menuntut para mahasiswa

agar bisa mengikuti perkembangan Teknologi <u>Informasi</u> yang ada, khususnya di Indonesia umumnya di Dunia. <br>

<font color=green>Universitas Komputer Indonesia memberikan pilihan jurusan yang dapat dipilih oleh mahasiswanya, yaitu :</font><br> 1. Teknik Informatika <br>

2. Manajemen Informatika <br> 3. Teknik Komputer <br> dan lain sebagainya <br>

<font color="red" face="comic sans ms"> <p align="right"><b>UNIKOM</b> <br>

<i>Quality is Our Tradision</i> </p>

(21)

9

(22)

1 Pertemuan‐3

Beberapa jenis Listp j (Daftar)( )

Ordered list/numbered list (daftar berurut/daftar dengan nomor atau abjad)

Unordered list/bulleted list (daftar tidak berurut/menggunakan bullet)

Menu list (daftar menu)

Directory list

(23)

2

Suatu daftar dimana item‐item yangy g ada di

dalam daftar tersebut memiliki nomor secara

berurut.

Tag : <ol>

(24)

3

<ol>

<li> Apel </li> <li> Mangga </li> <li> Pisang </li> <li> Jeruk </li>

(25)

4 <ol type=“A”>yp

<li> Apel </li> <li> Mangga </li> <li> Pisang </li> <li> Jeruk </li> </ol>

(26)

5 <ol type=“I”>

<ol type I > <li> Apel </li> <li> Mangga </li> <li> Pisang </li> <li> Jeruk </li> </ol>

(27)

6

Suatu daftar dimana urutan tidak

diutamakan, jadi item‐item dalam daftar bisa

muncul dalam sembarang urutan.

Tag : <ul>

(28)

7 <ul type "disc">

(29)

8 <ul type “circle">

<ul type= circle > <li>Apel</li> <li>Mangga</li> <li>Pisang</li> <li>Jeruk</li> <li>Jeruk</li> </ul>

(30)

9 <html>

<body> <ol> <ol>

<li> Kopi </li> <ul type="disc">

<li>Arabika</li> <li>Capucino</li> </ul>

<li> Teh </li>

<ul type="circle"> <li>Hijau</li>

li i li

<li>Hitam</li> </ul>

(31)

10

(32)

11

h C t h Li t D fi i i /h <h4>Contoh List Definisi:</h4> <dl>

<dd>Hyper Text Markup Language, merupakan bahasa markup yang digunakan untuk membuat halaman‐halaman web.</dd>

<dt>Internet Explorer</dt>

<dd>Web browser yang merupakan bawaan dari <dd>Web browser yang merupakan bawaan dari sistem operasi Windows, digunakan untuk menampilkan halaman‐halaman web.</dd> </dl>

</body> </html>

Buatlah Tampilan Webp di bawah ini :

(33)

12 <html>

b d <body>

<h4>Contoh Ordered List:</h4> <ol>

<li>Fakultas Teknik dan Ilmu Komputer</li> <li>Fakultas Ekonomi</li>

<li>Fakultas Desain</li> <li>Fakultas Hukum</li> <li>Fakultas Hukum</li> <li>Fakultas Sosial Politik</li> </ol>

(34)

13

<h4>Atribut Pada Unordered List</h4>

<ul >

<li>Bandung</li> <li>Jakarta</li>

li S b /li

<li>Surabaya</li> </ul>

(35)

1

- BLOCKQUOTE

- PREFORMATTED TEXT

S C

- SPECIAL CHARACTER

BLOCKQUOTE

| Blockquote untuk membuat Kutipan teks.

| Tag : | Tag :

<BLOCKQUOTE> …..

…..

(36)

2

CONTOH

h3 T k l i U i l S i l B (USB) /h3 <h3>Teknologi Universal Serial Bus (USB)</h3> <blockquote>

Pada awal tahun 1977 tepatnya komputer dengan prosesor Pentium, beberapa komputer sudah mempunyai piranti baru untuk memudahkan pengguna komputer dalam menangani masalah kabel yang banyak. <br>

Teknologi baru tersebut dinamalan Universal Serial Bus atau yang lebih dikenal dengan USB. Memang masih bayak yang tidak mengetahui apa dan fungsi teknologi ini Oleh sebab itu bab ini akan memperkenalkan dan fungsi teknologi ini. Oleh sebab itu bab ini akan memperkenalkan apa yang dimaksud dengan USB dan kegunaannya.

</blockquote>

<h5>Disadur dari Buku " Pengantar Sistem Komputer" Hal:134 <h5> </body>

</html>

(37)

3

PREFORMATTED TEXT

| Membuat Teks yang dibuat di Editor Ultra Edit sama dengan yang terlihat di Browsernya. sama dengan yang terlihat di Browsernya. | Tag nya :

CONTOH

<h3>Contoh Penggunaan Tag PRE</h3> <pre>

Halo nama saya : Rani Halo nama saya : Rani

(38)

4

HASILNYA

(39)

5

KARAKTER SPESIAL

| Karakter yang penggunaannya di dalam HTML membutuhkan kode-kode tertentu.

membutuhkan kode kode tertentu.

| Tanda < dan > adalah salah satu contoh karakter spesial yang membutuhkan kode tertentu.

| Kode khusus untuk menampilkan karakter disebut Entity

y Karakter Entity

N ik E tit ( k k )

y Numerik Entity (menggunakan angka)

| Penulisan Entity :

y Diawali tanda & (Ampersand)

y Diakhiri tanda ; (Titik koma)

CONTOHKARAKTER SPESIAL

Nama Entitas Nomor Entitas Hasil Keterangan

Trademark ™; ™ Trademark   ¡ Non-breaking

space & & & Ampersand « « << Left-pointing

double angle » » >> Right-pointing

(40)

6

LATIHAN

| Buatlah Tampilan Web di bawah ini.

| Format Web agar tampilannya sama | Format Web agar tampilannya sama.

(41)

1

Menyisipkan Gambar

Beberapa jenis file gambar dalam HTML

GIF (G fi l I t h F t) ( if)

y GIF (Grafical Interchange Format) (.gif)

y JPEG (Joint Photographic Expert Image) (.jpg)

y PNG( Portable Network Graphic) (.png)

y BMP (Bitmap) (.bmp)

Tag :

(42)

2

Atribut Gambar

Elemen Atribut Keterangan

SRC URL Gambar Diisi dengan Alamat yang menuju File Gambar

ALT Teks Menentukan tulisan yang akan ditampilkan

(bi dit tk t t d tik)

(biasanya ditempatkan antara tanda petik). Apabila browser tidak dapat menampilkan gambar untuk alasan tertentu.

Top, bottom, middle digunakan untuk menentukan posisi image terhadap teks

Left, Right, Center untuk menentukan posisi image pada dokumen

HEIGHT angka Digunakan untuk menentukan ukuran tinggi gambar

WIDTH Angka Digunakan untuk menentukan ukuran lebar gambar

BORDER Angka Digunakan untuk memberikan bingkai pada gambar

2 Cara untuk memuat Gambar

Absolute Path : gambar disimpan dalam folder

yang sama dengan halaman Web Sehingga yang sama dengan halaman Web. Sehingga langsung panggil nama file atau alamat web nya.

Contoh :

(43)

3

2 Cara untuk memuat Gambar (2)

Relative Path : file gambar di simpan di

folder yang berbeda/terpisah dari file folder yang berbeda/terpisah dari file web nya.

Sehingga harus dipanggil dengan

lengkap alamatnya.

Contoh

Contoh

Buka File : Latihan1.html

(44)

4

Menyisipkan Latar Belakang

Terdapat dua cara penyisipan latar

belakang : belakang :

y Latar Belakang (Background) Warna

y Latar Belakang (Background) Gambar

Background Warna

Tag untuk menyisipkan Background

warna : warna :

<BODY BGCOLOR=“Warna”> Contoh

(45)

5

Contoh

Background Gambar

Tag untuk menyisipkan Gambar :

<BODY BACKGROUND=“Nama File”> Contoh

(46)

6

Contoh

(47)

7

Marquee

Tag untuk membuat objek bergerak.

Tag :

Atribut dalam Marquee

Atribut Argumen Fungsi

Left Arah pergerakan ke Kiri (dari kanan – kiri)

Direction

g ( )

Right Arah pergerakan ke Kanan (dari kiri – kanan)

Up Arah pergerakan ke Atas (dari bawah – atas)

Down Arah pergerakan ke Bawah (dari atas ke bawah)

Behavior

Alternate Bentuk pergerakan bolak – balik

Scroll Bentuk pergerakan scroll (seperti marquee biasa)

Slide Bentuk pergerakan slide (setelah bergerak lalu diam )

ditempat)

Contoh :

<marquee direction=“up”>Teknik Informatika</marquee>

(48)

8

Latihan

Buat halaman web di bawah ini.

Sisipkan gambar dan background

gambar (gambar bebas)

(49)

1

Link

y Untuk menghubungkan halamang g ‐halaman web,, situs yang lain atau bagian‐bagian tertentu pada suatu halaman web.

y Tag :

(50)

2

Atribut Link

Atribut Argumen Keterangan

HREF URL/Halaman Web Diisi dengan nama halaman web atau nama URL yang akan di link kan. NAME #namabagian Digunakan untuk link dalam satu

dokumen web

Penulisannya : Penulisannya :

<A HREF=”url atau hal.web lain”>teks ditandai dengan link </A> <A HREF=”#bagian dari halaman web”> teks</A> (sebagai penghubung) <A NAME=”bagian dari halaman web”> (bagian yang dihubungkan)

<a href=“Latihan.html”>Latihan Per‐1</a> Untuk menuju ke Latihan Pertemuan Pertama <br>

<a href=“Latihan1.html”>Latihan Per‐2</a> Untuk menuju ke Latihan Pertemuan Kedua </body>y

(51)

3 <body>

<center><h1>Daftar Isi</h1></center> <p>

<h3>

<p align="justified"><a href="#A1">Kata Pengantar</a>... 1 <br><abr a href="#A2">Daftar Isi</a>...href #A2 Daftar Isi /a ... 22

</h3>

<br><br><br><br><br><br><br><br><br><br><br><br><br><br> <h2><a name="A1">Kata Pengantar</a></h2>

<b>Kata Pengantar</b> berisi tentang Pengantar <br>

h "A " D f I i / /h <h2><a name="A2">Daftar Isi</a></h2> <b>Daftar Isi</b> berisi tentang Daftar isi <br>

<h2><a name="A3">Bab 1</a></h2> <b>Bab 1</b> berisi tentang Pendahuluan </body>

</html>

Latihan

y Buatlah sebuah halaman Web,Buatlah sebuah halaman Web, beri nama Fileberi nama File :: index.html

y Buat 3 Buah menu Pilihan yaitu, Biodata, Riwayat Pendidikan dan Hobby

y Simpan Biodata dengan nama File biodata.html

y Simpan Riwayat Pendidikan dengan nama FileSimpan Riwayat Pendidikan dengan nama File pendidikan.html

y Simpan Hobby dengan nama File hobby.html

(52)

(53)

(54)

d. Simpan dengan nama file NIM‐Nama Anda‐Kiri.html

(55)

1

TABEL

Tag Pembuat an Tabel

ELEM EN KEGU N AAN

TABLE Tag Utam a <TABLE> </ TABLE>

TABLE Tag Utam a <TABLE>…</ TABLE>

TR Baris Tabel <TR>… </ TR>

TD Data Tabel <TD>… </ TD>

TH J udul Tabel (H eader) <TH >…</ TH >

CAPTION J udul yan g terletak di bawah tabel

Tag Ut ama Tag Ut ama

[image:55.612.128.486.94.367.2]

(56)

2 At ribut dal am t abel

Cont oh Tabel Sederhana

<td>Tabel 1</ td> <td>Tabel 2</ td> </ tr>

(57)

3

Cont oh Tabel Sederhana dengan Garis

<td>Tabel 1</ td> <td>Tabel 2</ td> </ tr>

[image:57.612.124.491.106.455.2]

</ table> </ table>

Tabel 2 Dimensi

<tr>

<td>Baris 1 Kolom 1</ td> <td>Baris 1 Kolom 2</ td> </ tr>

<tr>

<td>Baris 2 Kolom 1</ td> <td>Baris 2 Kolom 1</ td> <td>Baris 2 Kolom 2</ td> </ tr>

(58)

4 Judul Tabel dengan Capt ion

<caption ><b>J udul Tabel</ b></ caption > <tr>

<tr>

</ table>

Judul Tabel dengan Header

<caption ><b>J udul Tabel</ b></ caption > <tr>

<th>Baris 1 Kolom 1</ th> <th>Baris 1 Kolom 2</ th> </ tr>

<tr>

(59)

5 Menggabungkan Baris dan kol om

• Atribut yan g digun akan un tuk m en ggabun gkan Kolom adalah COLSPAN