module tutorial web part 1 - blitar jaya

Hot

Post Top Ad

Image and video hosting by TinyPic

Wednesday, 15 February 2017

module tutorial web part 1




MODUL I
DASAR-DASAR HTML

A.   TUJUAN
Memahami struktur dasar dokumen HTML.
Mampu membuat dokumen HTML yang baik dan benar.
Mampu  memanfaatkan  elemen-elemen  dasar  untuk  menampilkan
informasi.



B.   PETUNJUK

Awali setiap aktivitas dengan do'a, semoga berkah dan mendapat kemudahan.
Pahami tujuan, dasar teori, dan latihan-latihan praktikum dengan baik dan benar.
Kerjakan tugas-tugas praktikum dengan baik, sabar, dan jujur.
Tanyakan kepada asisten/dosen apabila ada hal-hal yang kurang jelas. 




C.   DASAR TEORI

1.    HTML dan XHTML
HTML  (Hypertext  Markup  Language)  merupakan  sebuah  bahasa  markup,
bukan  bahasa  pemrograman.  Bahasa  markup  (Indonesia:  markah)  adalah
bahasa  yang  mengombinasikan  teks  dan  informasi  tambahan  mengenai  teks
tersebut.  HTML  merupakan  dokumen  standar  yang  digunakan  untuk
mendesain halaman web.

Pada  awal  tahun  2000,  W3C  (World  Wide  Web  Consortium)  membuat
perubahan  besar  melalui  XHTML  (eXtensible  Hypertext  Markup  Language).
Ide  dasarnya,  dalam  upaya  meningkatkan  kompatibilitas  dokumen  HTML,
W3C  menambahkan  struktur  dan  ekstensibilitas  XML  (eXtensible  Markup
Language) ke HTML.


2.    Struktur Dokumen HTML
Setiap  dokumen  HTML  harus  diawali  dengan  tag  <html>  dan  diakhiri
dengan komplemennya, yakni tag </html> tag. Sebagai tambahan, dokumen
HTML juga menyertakan tiga pasang tag.
    Tag  <head>  dan  </head>:  digunakan  untuk  menyatakan  informasi
mengenai dokumen HTML.

    Tag <title> dan </title>: digunakan untuk menambahkan title di
title bar browser.
    Tag  <body>  dan </body>:  digunakan  untuk  melingkupi  semua  teks
yang terdapat di halaman HTML.

Di samping elemen utama di atas, masih terdapat berbagai jenis elemen yang
dapat  digunakan  di  dalam  dokumen  HTML.  Salah  satu  elemen  yang  perlu
diperhatikan  adalah  untuk  penulisan  komentar.  Di  HTML,  komentar
dinyatakan dengan tag <!-- dan diakhiri dengan tag -->.



Bagaimanapun, praktikum ini menuntut adanya standardisasi yang benar.
Oleh karena itu, penulisan dokumen HTML harus merujuk pada
spesifikasi XHTML




3.    Persiapan Kebutuhan
Pada  praktikum  awal  ini,  meskipun  dokumen  HTML  bisa  ditampilkan  tanpa
menggunakan  web  server,  namun  di  sini  diwajibkan  tetap  menggunakan.
Selain  itu,  praktikum  ini  juga  menuntut  pembuatan  kode-kode  yang  baik,
benar, dan valid.

Berikut ini adalah kebutuhan-kebutuhan yang minimal diperlukan:

a.  WampServer
Paket  web  server  Apache,  PHP,  dan  MySQL.  Alasan  pemilihan  paket
bundel seperti ini dikarenakan praktis sehingga tinggal memfokuskan pada
pemrograman.

b.  Web Browser
Sangat disarankan menggunakan browser utama  Mozilla Firefox. Adapun
untuk pembanding, sebaiknya juga memanfaatkan browser lain.

c.  Editor Teks

Editor  teks  untuk  menuliskan  kode-kode  HTML  pembentuk  halaman
aplikasi web (tidak diperkenankan menggunakan IDE seperti
Dreamweaver dan sebagainya).

d.  HTML Validator

Untuk  menghasilkan  dokumen  HTML  yang  valid,  diwajibkan  memasang
validator, misalnya berupa add-on pada browser Firefox.


D.   LATIHAN

1.    Membuat Dokumen HTML
Secara  garis  besar,  struktur  dokumen  HTML  terdiri  dari  dua  bagian: header
dan  bodi.  Di  mana  header  mendefinisikan  informasi  mengenai  dokumen,
sedangkan bodi mendefinisikan tubuh atau isi dokumen.

Langkah-langkah pembuatan dokumen HTML diperlihatkan sebagai berikut:
1.    Buka editor teks.
2.    Ketikkan teks (kode-kode HTML) berikut:
<html>
<head>
  <!-- Ini baris komentar, tidak diproses -->
  <title>Ini judul dokumen</title>
</head>

<body>
  Ini adalah teks di body
</body>

</html>

3.    Simpan  dokumen  HTML  dengan  nama  latihan1.1.html  dan  letakkan  di
lokasi direktori web, misal C:\wamp\www. Perhatikan, www merupakan
direktori web dan sebaiknya buat subdirektori di dalamnya.

Untuk  mengetahui  hasil  pembuatan  dokumen  HTML,  klik  ganda  file  yang
telah Anda buat. Hasilnya akan terlihat seperti Gambar 1.


Bagaimanapun, dokumen HTML memang bisa ditampilkan dengan mengklik
ganda  di  mana  pun  lokasinya.  Namun  perlu  diperhatikan,  langkah  ini
bukanlah cara untuk menjalankan halaman web di server lokal. 

Dokumen HTML Standar

Untuk  menghasilkan  dokumen  yang  well-formed,  kita  harus  merujuk  pada
aturan  XML  yang  dituangkan  ke  dalam  dokumen  XHTML.  Dalam
implementasinya,  di  sini  kita  menambahkan  tag  <!DOCTYPE>  di  bagian
paling atas dan mengidentifikasikan dokumen sebagai XHTML compliant.

Merujuk  pada  aturan-aturan  yang  ada,  dokumen  HTML  sebelumnya  dapat
dituliskan sebagai berikut:
<!DOCTYPE html
     PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"
lang="en">

<head>
  <!-- Ini baris komentar, tidak diproses -->
  <title>Ini judul dokumen</title>
</head>

<body>
  Ini adalah teks di body
</body>

</html>

Begitu dilihat di browser, terlihat bahwa secara tampilan—untuk kasus ini—
tidak  ada  pengaruh  akibat  penambahan  deklarasi  XHTML.  Namun  jika  kita
sudah  menginstal  HTML  validator,  akan  terlihat  ikon  cek  list  (OK)  pada
pojok  kanan  bawah  browser.  Ikon  ini  mengindikasikan  bahwa  halaman  web
sudah valid (well-formed)


Bagaimanapun, praktikum ini menuntut adanya standardisasi yang benar.
Oleh karena itu, penulisan dokumen HTML harus merujuk pada
spesifikasi XHTML


2.    Publikasi Halaman Web
Untuk  menguji  aplikasi  web,  kita  mempublikasikannya  ke  web  server,  baik
secara lokal maupun Internet. Lingkungan lokal tentu merupakan pilihan yang
efisien, khususnya ketika aplikasi masih dalam tahap pengembangan.

Langkah yang diperlukan untuk publikasi ini sangat sederhana.

1.    Pastikan bahwa file dokumen sudah diletakkan di direktori web, misalnya
untuk  WampServer  lokasi  defaultnya  adalah  www.  Untuk  paket  web
server lainnya, termasuk Apache (versi tunggal) adalah htdocs.

2.    Pastikan bahwa web server sudah dijalankan.

3.    Buka  web  browser,  kemudian  ketikkan  alamat  URL  yang  merujuk  ke
lokasi dokumen. Perhatikan contohnya seperti Gambar 2.


3.    Format Teks
HTML  menyediakan  beragam  elemen  yang  dapat  dimanfaatkan  untuk
pemformatan teks.

Heading

Heading  merupakan  salah  satu  elemen  penting  di  dalam  dokumen  HTML.
Heading didefinisikan menggunakan tag <hn> dan diakhiri dengan </hn>, di
mana n menyatakan tipe dengan nilai 1-6.

Untuk  mengetahui  bentuk  semua  jenis  heading,  buat  kode  HTML  seperti  di
bawah  ini.  Perhatikan,  kode  HTML  ini  sengaja  diringkas  guna  memudahkan
penulisan.  Jadi,  dalam  implementasinya  harus  mendeklarasikan  semua
elemen-elemen dasar.

<body>

  <h1>Heading 1</h1>
  <h2>Heading 2</h2>
  <h3>Heading 3</h3>
  <h4>Heading 4</h4>
  <h5>Heading 5</h5>
  <h6>Heading 6</h6>

</body>


Elemen  heading  menyediakan  atribut  align  yang  dapat  digunakan  untuk
mengatur posisi teks.
\
<body>

  <h1 align="right">Heading 1</h1>
  <h2 align="left">Heading 2</h2>
  <h3 align="center">Heading 3</h3>

</body>


Paragraf

Sebagaimana  teks  pada  umumnya,  dokumen  HTML  dapat  terdiri  dari
kumpulan  paragraf.  Dalam  konteks  HTML,  paragraf  direpresentasikan
melalui tag <p>. Tag <p> sebenarnya merupakan tag pasangan, meski dalam
implementasinya kerap kali diabaikan.



<body>

  <p>
  Ini paragraf pertama

  <p>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit,
  sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua.
  Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris
  nisi ut aliquip ex ea commodo consequat.

  <p>
  Ini paragraf ketiga

</body>




Sebagaimana  heading,  kita  juga  bisa  mengatur  posisi  paragraf  dengan
memanfaatkan  atribut     align.  Sebagai  contoh,  dokumen  berikut  akan
menghasilkan paragraf rata tengah, kiri kanan, dan kanan.

<!DOCTYPE html
     PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"
lang="en">
<head>
  <title>Demo Paragraf</title>
</head>

<body>

  <p align="center">
  Ini paragraf rata tengah

  <p align="justify">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit,
  sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua.


  Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris
  nisi ut aliquip ex ea commodo consequat.

  <p align="right">
  Ini paragraf rata kanan

</body>

</html>


Secara  normal,  baris  baru  akan  ditambahkan  di  antara  dua  paragraf.  Adapun
jika  kita  hanya  ingin  membuat  baru,  kita  tidak  harus  menggunakan  paragraf.
Sebagai gantinya, gunakan tag line break <br />.

<body>

  Membuat baris baru <br />
  Membuat baris baru <br />

  <p>
  <!-- break di dalam paragraf -->
  Lorem ipsum dolor sit amet, consectetur adipisicing elit,
<br />
  sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. 
  <br />
  Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris
  nisi ut aliquip ex ea commodo consequat.


</body>



Fontase

HTML  menyediakan  sejumlah  elemen  yang  dapat  dimanfaatkan  untuk
mengatur  font,  seperti  huruf  tebal,  huruf  miring,  garis  bawah,  dan  masih
banyak lagi.
Sebagai  tambahan,  di  sini  juga  akan  dijelaskan  mengenai  cara  mencetak  tag.
Seperti  diketahui,  tag  <p>  di  dokumen  secara  otomatis  akan  diterjemahkan
sebagai  paragraf.  Adapun  untuk  mencetak  karakter  <p>  di  layar,  kita  perlu
menggunakan  nama  entitas.  Sebagai  contoh,  karakter  <  dinyatakan  dengan
nama entitas < dan karakter > dinyatakan dengan >.
<body>

  <b>Menggunakan tag <b>...</b></b> <br />
  <strong>Menggunakan tag
<strong>...</strong></strong> 
  <br />
  <i>Menggunakan tag <i>...</i></i> <br />
  <em>Menggunakan tag <em>...</em></em> <br />
  <u>Menggunakan tag <u>...</u></u> <br />
  <strike>Menggunakan tag
<strike>...</strike></strike> <br />

</body>

Karakter Khusus

Di  HTML,  kita  juga  bisa  menampilkan  karakter-karakter  khusus  dengan
memanfaatkan  nama  entitas.  Tabel  berikut  memperlihatkan  beberapa  jenis
karakter khusus yang dapat digunakan beserta nama entitasnya.



Karakter
¢
£
¥
©
®



<body>

Deskripsi
Cent
Pound
Yen
Euro
Copyright
Registered
Trademark

Nama Entitas
&cent;
&pound;
&yen;
&euro;
&copy;
&reg;
&trade;



  &pound; Pound <br />

  &euro; Euro <br />

  &copy; Copyright <br />

  &reg; Registered <br />

  &trade; Trademark <br />

</body>


4.    Preformatted Text
Adakalanya  kita  menginginkan  agar  teks  yang  tertulis  di  editor  teks  dapat
ditampilkan  apa  adanya.  Pada  kasus  seperti  ini,  kita  bisa  memanfaatkan
keberadaan  tag  <pre>.  Tag  ini  akan  menampilkan  teks  dengan  font  Courier
dan tetap mempertahankan spasi serta baris baru.

<body>

  <pre>
  ------------------------------------------------
  No | Nama             | Alamat
  ------------------------------------------------
   1 | PT. Bintang      | Jl. Terusan Surabaya
   2 | PT. Sinar Jaya   | Jl. Tidar
   3 | PT. Mitra        | Jl. Galunggung
   4 | PT. Harapan      | Jl. Jombang
   5 | PT. Barokah      | Jl. Bondowoso
  ------------------------------------------------
  </pre>

</body>

Untuk  melihat  perbedaannya,  hilangkan  tag  <pre>  kemudian  perhatikan
hasilnya.


5.    Garis Horizontal
Di HTML, garis horizontal direpresentasikan melalui tag <hr />. Meskipun
kebanyakan  browser  me-render  elemen  ini  dengan  visualisasi  yang  sedikit
berbeda,  namun  pada  hakekatnya  mencerminkan  sebuah  bentuk  garis
horizontal.

<body>

  Membuat garis horizontal <hr />

  <p>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit,
<br />

  sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. 
  <br />
  Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris
  nisi ut aliquip ex ea commodo consequat.

  <hr />

</body>


6.    Menggunakan List
HTML  mendukung     list  dalam  bentuk  terurut  (ordered),  tak  terurut
(unordered), dan definisi (definition). Untuk setiap bentuk list ini, terdapat list
item—dinyatakan  melalui  tag  <li>  berpasangan—yang  merepresentasikan
item-item list.

<body>

  Ordered List
  <ol>
    <li>Satu</li>
    <li>Dua</li>
  </ol>

  <hr />

  Unordered List
  <ul>
    <li>Satu</li>
    <li>Dua</li>
  </ul>

  <hr />

  Definition List
  <dl>
    <dt>Satu</dt>
      <dd>Satu Satu</dd>
    <dt>Dua</dt>


      <dd>Dua Dua</dd>
  </dl>

</body>

7.    Pewarnaan
Untuk memberikan warna background, HTML menyediakan atribut bgcolor
di  tag  <body>.  Atribut  ini  dapat  diisi  dengan  nama  warna—misalnya  red—
atau kode heksadesimal—misalnya #FFFFFF.

Khusus  untuk  elemen-elemen  lain  tertentu,  tersedia  atribut  color  yang
memungkinkan  kita  melakukan  pewarnaan.  Sama  seperti  bgcolor,  nilai
atribut ini juga dapat berupa nama warna atau kode heksadesimal.

<!-- memberi warna aqua di body -->
<body bgcolor="aqua">

  <h3 align="center">Heading 3</h3>

  <font color="red">Font berwarna merah</font> <br />

  <font color="#FF0000">
  Font berwarna merah (menggunakan nilai heksa)</font>

</body>



8.    Bekerja dengan Gambar
Tak  hanya  teks,  kita  juga  bisa  menyisipkan  gambar  di  dalam  dokumen
HTML. Untuk keperluan ini, HTML menyediakan tag <img> yang didukung
dengan sejumlah atribut.

<body>
  <p>
  <!-- menggunakan path relative -->
  <img src="kucing.jpg" />
  Lorem ipsum dolor sit amet, consectetur adipisicing elit,
  sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua.
  <hr />

  <p>
  <!-- menggunakan path absolute -->
  <img src="http://localhost/web01/01/kucing.jpg"
align="right" />
  Lorem ipsum dolor sit amet, consectetur adipisicing elit,
  sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua.
</bod



E.   STUDI KASUS
1.    Buat halaman web sederhana yang melibatkan elemen teks, garis, warna, dan
gambar.  Di  mana  terdapat  minimal  sebuah  heading  dan  garis  berwarna,
gambar dengan garis tepi (border),  dan halaman utama dengan latar belakang
gambar sembarang. Contoh tampilannya diperlihatkan seperti Gambar 15.




No comments:

Post a Comment

Post Top Ad

Image and video hosting by TinyPic