pen gen alan web m2

13
LAPORAN PRAKTIKUM PENGENALAN WEB MODUL I & II Disusun Oleh : Nama : Ratna Iswantara NIM : 085410273

Upload: pariono

Post on 19-Jun-2015

162 views

Category:

Documents


1 download

TRANSCRIPT

Page 1: Pen Gen Alan Web M2

LAPORAN PRAKTIKUMPENGENALAN WEB

MODUL I & II

Disusun Oleh :Nama : Ratna Iswantara

NIM : 085410273

LABORATORIUM TERPADUSEKOLAH TINGGI MANAJEMEN INFORMATIKA DAN KOMPUTER

AKAKOM

Page 2: Pen Gen Alan Web M2

YOGYAKARTAMODUL II

PENGATURAN TEKS

1. Tujuana. Mahasiswa dapat membuat tampilan dokumen HTML dengan menggunakan permainan

warna, dan berbagai jenis pengaturan teks lainnya.b. Mahasiswa dapat menggunakan daftar item (list) dalam dokumen html.

2. Dasar TeoriMenampilkan Tulisan / Teks

Untuk menampilkan teks dihalaman web, dengan mengetikkan teks dalam tag

<BODY>…</BODY>, dan untuk mengatur peletakan teks, ada beberapa Tag yang

digunakan antara lain :

Warna Font

Warna Font dapat diatur pada BODY dan juga tag FONT. Untuk warna latar belakang

teks dapat ditentukan dengan menggunakan atribut BGCOLOR pada tag BODY. Dan

untuk warna latar depan teks diatur melalui atribut COLOR pada tag FONT.

Sebagai contoh perhatikan potongan script berikut :

Page 3: Pen Gen Alan Web M2

<HTML><HEAD><TITLE="Halaman web dengan HTML"></TITLE></HEAD><BODY bgcolor="#00FF00"><font color="blue">Mari belajar HTML..gampang kan?</font></BODY></HTML>

Jika halaman web dijalankan di browser maka akan menghasilkan tampilan teks dengan warna fuchsia dan latar belakang teks berawarna hijau, seperti gambar berikut:

Pemberian warna pada atribut COLOR, BGCOLOR, dan TEXT dapat mengikuti aturan

berikut :

• Menggunakan nama warna

• Menggunakan nilai RGB (Red-Green-Blue), dengan format “#RRGGBB”

Table berikut menunjukkan nilai warna :

Ukuran Font

Ukuran Font diukur oleh atribut SIZE.

Contoh:

<HTML>

Page 4: Pen Gen Alan Web M2

<HEAD><TITLE="Halaman web dengan HTML"></TITLE></HEAD>

<BODY>

Teks dengan ukuran normal<BR>

<font size="+1">Teks dengan ukuran font 4?</font><BR>

<font size="5">Teks dengan ukuran font 5?</font><BR>

</BODY>

</HTML>

Size =”+1” Mengatur ukuran Font >1 dari ukuran normal (normal size =3), Size=”5” mengatur ukuran Font sebesar 5. Ukuran font normal, >1 normal size yaitu 4, dan ukuran font 5. Seperti tampak pada gambar berikut:

Membuat Garis Horisontal

Tag untuk membuat sebuah garis horizontal dapat menggunakan tag <HR>

Beberapa atribut pada tag HR antara lain:

No Atribut Fungsi

1 SIZE Mengukur ketebalan garis

2 ALIGN Mengatur posisi teks dalam baris

3 NOSHADE Menghilangkan bayangan pada garis

4 WIDTH Mengatur lebar garis

5 COLOR Menentukan warna garis

Page 5: Pen Gen Alan Web M2

Contoh :

<HTML><HEAD><TITLE>MEMBUAT GARIS HORISONTAL</TITLE></HEAD><BODY>STIMIK AKAKOM <HR align="center" color="#ooooff" noshade size="10">JALAN RAYA JANTI KANOMAN No. 143<br>Yogyakarta 55198<br></BODY></HTML>Hasil :

3. Pembahasan1.

<HTML><HEAD><TITLE>Membuat List</TITLE></HEAD><BODY><p align="justify">Teknolgi web pada sisi server memungkinkan pemrosesan kode di dalam server sehingga kode yang sampai pada pemakai berbeda dengan asli pada server.</p><br><H2>Beberapa contoh teknologi yang berjalan deserver adalah:</H2><UL>Common Gateway Interface<BR>Proprietary Web Server API<BR>Active Server Page(ASP)<BR>Server-Side JavaScript<BR>Java Servlets dab JavaServer Page(JSP)<BR>PHP<BR></UL></BODY></HTML>

<p align="justify"> = paragraf rata kanan-kiri. <ul> = menampilkan daftar item tanpa penomoran

Page 6: Pen Gen Alan Web M2

Hasilnya:

2.

<HTML><HEAD><TITLE>Membuat List</TITLE></HEAD><BODY><p align="justify">Teknolgi web pada sisi server memungkinkan pemrosesan kode di dalam server sehingga kode yang sampai pada pemakai berbeda dengan asli pada server.</p><br><H2>Beberpa ccontoh teknologi yang berjalan deserver adalah:</H2><UL><LI>Common Gateway Interface<BR><LI>Proprietary Web Server API<BR><LI>Active Server Page(ASP)<BR><LI>Server-Side JavaScript<BR><LI>Java Servlets dab JavaServer Page(JSP)<BR><LI>PHP<BR></UL></BODY></HTML>

Didalam <UL> ada <LI>

<UL><LI>Common Gateway Interface<BR>………..</UL> Menambahkan tanda bullet didepan masing-masing item

Page 7: Pen Gen Alan Web M2

Hasilnya:

3.

<HTML><HEAD><TITLE>PROFIL STMIK AKAKOM</TITLE></HEAD><BODY bgcolor="#808080"><H1><p align="center"><FONT color="blue">STMIK AKAKOMYOGYAKARTA</FONT></p></H2><FONT color=aqua" size="4">Jln Raya Janti no 143</FONT><BR><FONT color=#00ffff" size="+1">Yogyakarta 55198</FONT><BR><HR align="center" color="#0000ff" noshade size="10"><H2>Jenjang S1</H2><UL>Teknik Informatika<BR>Sistem Informasi<BR></UL><H2>Jenjang D3</H2><UL>Manajemen Informatika<BR>Teknik Komputer<BR>Komputerisasi Akuntasi<BR><UL><H1><p align="right">STMIK AKAKOM YOGYAKARTA</p></H1><H1><p align="right">Yang Pertama dan Yang Utama</p></H1></BODY></HTML>

<BODY bgcolor="#808080"> = background colour dengan warna RGB, diawali dengan tanda # Pemakaian atribut noshade pada kode membuat garis dalam keadaan diblok.

Page 8: Pen Gen Alan Web M2

Hasil:

4. Latihan

<html><head><title>Latihan Modul2</title></head><body><ul><li type="circle">ini type circle<br><li type="disc">ini type disc<br><li type="square">ini type square<br></ul>

<ol><li>ini penomoran<br><li>ini juga penomoran<br></ol>

<ol type="a"><li>ini penomoran dengan abjad<br><li>ini juga dengan abjad<br></ol></body></html>Hasil :

Page 9: Pen Gen Alan Web M2

5. Tugas :

Buat sebuah halaman web untuk menampilkan data pribadi tentang diri,

Ketentuan:

- Data terdiri dari tiga paragraf- Masing-masing paragraf menggunakan pengaturan teks yang berbeda-beda baik untuk

ukuran font, face font, maupun warna, serta align font.- Salah satu paragraf mengandung tanda bullet.Iswan

Kode Program :

<html><head><title>Data Diri</title></head><body><p align="center"><font color="blue" size="5">Nama : Ratna Iswantara<br>NIM : 085410273<br></font></p>

<p align="justify"><font color="#cdd031" size="4">Sekolah SD saat usia 7 tahun, ulang tahun tepat pada bulan pertama masuk sekolah.Teman-teman satu angkatannya menjadi ujicoba pergantian cara ujian saat akan masuk SMP. Setelah itu, dari SD sampai SMA juga mengalami uji coba perubahan kurikulum. Sejak SD sampai SMA saya selalu terpilih menjadi anggota pleton inti baris-berbaris hanya saja saat SMA saya sedikit kesal dengan salah satu teman TONTI saya sebuat saja dia X. Karena saat pertandingan berlangsung, dia uyik, ipik, jan pokokE yen didelok sepet lah...>.<"</font></p>

Page 10: Pen Gen Alan Web M2

<p align="right"><font color="#00ff00" size="6">Dulu saya sangat kasian melihat teman-teman saya yang badung, sering bolos dan jarang mengumpulkan tugas. Walaupun badung dan suka membolos tidak ada dalam diri saya. Akan tetapi, saya sendiri tidak tau kenapa sekarang saya malah jadi agak malas.</font></p>

<p><font face="Courier New" color="#ff00ff" size="5">Untuk saat ini saya kuliah di STMIK AKAKOM YOGYAKARTA. Sedikit mengalami perubahan kebiasaan, terutama saat pertama kali masuk. Kebiasaan buruk mulai terbentuk karena pengaruh keadaan yang bebas dan teman:</font></p>

<ol type="a"><font size="+1"><li>Nge-game<br><li>Pulang larut malam<br><li>Kuliah tidah konsentrasi+ngantuk<br></font></ol>

<p align="center"><font face="Ravie">>>>>akibat yang titimbulkan<<<br>>>nilai tak wajar+sakit<<<</font></p>

</html></body>Hasil :

Page 11: Pen Gen Alan Web M2

6. Kesimpulan- Untuk menampilkan teks dihalaman web, dengan mengetikkan teks dalam tag

<BODY>…</BODY>, dan untuk mengatur peletakan teks menggunakan beberapa Tag.- Warna Font dapat diatur pada BODY dan juga tag FONT. Untuk warna latar belakang teks

dapat ditentukan dengan menggunakan atribut BGCOLOR pada tag BODY. Dan untuk warna latar depan teks diatur melalui atribut COLOR pada tag FONT.

- Pemberian warna pada atribut COLOR, BGCOLOR, dan TEXT dapat mengikuti aturan berikut :o Menggunakan nama warnao Menggunakan nilai RGB (Red-Green-Blue), dengan format “#RRGGBB”

- Ukuran Font diukur oleh atribut SIZE. Normal size=3.o Size=”+1” maksudnya size = normal size+1 = 3+1 = 4o Size=”5” maksudnya size = 5