BLOG'S DAMIR

TEKNIK KOMPUTER DAN JARINGAN

Sabtu, 25 September 2010

LAPORAN PRAKTIKUM HTML

PRAKTIKUM  I
DASAR-DASAR  HTML

Tujuan :
1. Mengetahui struktur dasar HTML.
2.Dapat menggunakan dasar-dasar html ( tag <body></body>, <hx>,<br>, <p>, <hr>, <font>,<li>,<IMG>,<a> </a> ) 
Materi :

HTML
HTML (HyperText Markup Language) merupakan salah satu format yang digunakan dalam dokumen dan aplikasi yang berjalan di web browser. 
Strukur dasar Dokumen HTML
Setiap dokumen memiliki struktur dasar atau susunan file sebagai berikut : <html> <head> <title>Judul Dokumen HTML</title> </head>  <body> </body> </html>  Tag Keterangan
<HTML> …</HTML> Mengawali dan mengahiri kode HTML
<head>…</head> Merupakan header dari dari halaman HTML
<title>…</title> Judul pada title judul pada title bar windows web browser
<body>…</body> Bagian yang akan ditampilkan pada web browser

Elemen Body <body>

Properti dokumen diatur melalui atribut-atribut yang terdapat dalam elemen body  
Atribut Keterangan
Background Background image for document
Bgcolor Background color for document, default white
Text color text for document, default black
Link color link for document, default blue
Vlink visited link for document, default purple
alink active link for document, default red

Elemen Heading <hx>
Tag heading berfungsi untuk memformat heading (judul dan sub judul). Contoh :
 Elemen Paragrap <p>
Berfungsi pengaturan antara paragrap dalam halaman web
Atribut Elemen Paragrap

Pemrograman Internet:

Align = [ left | center | right ] 
Elemen Break <br>
Berfungsi untuk memberikan baris baru suatu paragrap dalam halaman web. 
Elemen Horisontal Rules<hr>
Berfungsi untuk menampilkan garis horisontal di dalam halaman web.
Atribut elemen horisontal rule :
Align = [ left | center | right ] (Horizontal aligment, default center) Size = pixels (line height, default 2) Width = length ( line width, pixed or percentage, default 100%) Noshade = solid line 
Elemen Pemformatan Karacter <font>
Font pada halaman HTML dapat diformat sesuai dengan desain yang ditentukan, baik ukuran, jenis maupun warna.
Atribut elemen font
Zise = Number ( font size adjustment, default 3) Color = color ( font color adjustment, default black) Face = number (font face adjusment, default Times New Roman)
Elemen Ragam Karakter
<b>bold</b>
<i>italic</i>
<u>underline</u> 
Element List <li>
Properties <li> digunakan untuk menampilkan informasi dalam bentuk daftar (list). Ada dua jenis yang dikenal HTML, yaitu :
Unordered list <ul> = format bullet Ordered list <ol>    = format bentuk nomor
Atribut
Ordered list
 Type = [ 1 | a | A | i | I, default 1 ] Atribut
Unordered list
 Type = [ disc | square | circle, default disc ] 
Elemen Image <img> 
Berfungsi untuk menampilkan image yang format filenya jpg atau gif. Untuk menampilkan digunakan tag IMG
Atribut elemen Image
SRC = ( location of image) ALT = text ( alternate text) Width = length ( image width) Height = height ( image height) Align = [ top | middle | bottom | left | right] Border = length (link border width) 
Elemen Link/Ancor <a>
Berfungsi untuk penghubung antara satu halaman dengan halaman lain. Bentuknya :
< a href = URL_Tujuan> hypertext</a>

 Pemrograman Internet 3;

Praktikum :

1. Ketiklah script HTML berikut ini :
<html>
<head>
<title>Latihan dasar-dasar HTML</title>
</head>

<body >
HTML<br>

HTML (HyperText Markup Language) merupakan salah satu format yang digunakan dalam dokumen dan aplikasi
yang berjalan di web browser.

</body>
</html>

Simpan dengan nama :
latihan1.html

 2.Ketiklah script HTML berikut ini :
<html>
<head>
<title>Elemen Heading</title>
</head>
 <body >
 <h1>Heading 1 </h1>
<h2>Heading 2 </h2>
<h3>Heading 3 </h3>
<br>
 </body>
</html>
 
 Simpanlah dengan nama : latihan2.html

3.
<html>
<head>
<title>HOME</title>
</head>

<body >
SEKOLAH TINGGI MANAJEMEN INFORMATIKA DAN KOMPUTER<br>
<br>
PROGRAM STUDI :
<ol type="1">
 <li>Manajemen Informatika
 <li>Teknik Informatika
</ol>
Jenjang Pendidikan :
<ul type="circle">
 <li>Manajemen Informatika - D3
 <li>Teknik Informatika - S1
</ul>
 </body> </html>

 Simpan dengan nama file : latihan3.html

Diposting oleh di 2 komentar:

PEMROGRAMAN WEB (BULLET DAN NUMBERING)

Bullet And Numbering Pada Dokumen HTML

Tujuan Pembelajaran :
1.Bisa menggunakan tag yang berfungsi untuk membuat Bullet dalam berbagai bentuk dan cara.
2. Bisa menggunakan tag yang berfungsi untuk membuat Numbering dalam berbagai bentuk dan cara.
 
     1.1. Pendahuluan
            Pada tampilan dokumen HTML terkadang kita menginginkan terlihat lebih unik dan terlihat menarik. Selain itu mungkin kita hanya ingin memperjelas informasi tertentu, dalam hal ini misalnya kita ingin informasi tersebut diletakan pada poin-poin khusus atau list-list khusus. Untuk membuat poin atau list tersebut pada bab ini kita menggunakan dua model, yaitu Bullet dan Numbering. Bullet dan Numbering tersebut merupakan simbol atau karakter khusus yang diletakkan didepan suatu teks tertentu.

     1.2 Daftar Item dengan Bullet
          Pada HTML untuk membuat Bullet atau yang sering dikenal dengan tanda daftar list, kita dapat menggunakan tag <UL>. Dan untuk mengakhiri penggunaan tag <UL> diakhir teks yang diberi tanda bullet diberikan tanda </UL>. cara penulisan pada dokumen HTML dapat dilihat di bawah ini :
Bullet.html
<html>
<head>
<title>pemakaian tag ul</title>
</head>
<body>
<h2>Daftar Nama Ikan :</h2>
<ul>
Louhan<br>
Sepat<br>
Betok<br>
Nila<br>
Lele Dumbo
</ul>
********
</body>
</html>

Pada netscape navigator, jenis bullet dapat ditentukan melalui atribut type pada tag <li>. Kemungkinan nilai untuk type diperlihatkan pada kode-kode dan hasil program berikut :
Bullet2.html
<html>
<head>
<title>pemakaian tag ul</title>
</head>
<body>
<h2>Daftar type li :</h2>
<ul>
<li>hasil li tanpa diberi atribut type</li><br>
<li type="circle">Circle<br>
<li type="disk">Disk<br>
<li type="square">Square<br>
</ul>
********
</body>
</html>

1.3 Numbering
Adakalanya daftar suatu item dikehendaki agar ditampilkan dengan nomor urut. Dengan menggunakan tag <OL>, pemberian nomor dapat diotomatiskan tanpa anda harus menuliskannya. Untuk lebih jelasnya kerjakan latihan berikut :

Numbering.html
<html>
<head>
<title>pemakaian tag ol</title>
</head>
<body>
<b>Cara Memasak Mie Instant</b>
<ol>
<li>Masak air di panci sampai mendidih<br>
<li>Buka pembukus mie instant<br>
<li>Masukan Mie + bumbu kedalam Panci<br>
<li>Tunggu +- 3 menit<br>
<li>Mie siap dihidangkan
</ol>
</body>
</html>

1.4 Daftar Definisi

                 HTML menyediakan jenis daftar khusus yang disebut daftar definisi (definition list). Daftar ini menyediakan tampilan dengan format mirip kamus, dengan definisi suatu istilah diletakan agak menjorok ke kanan.
Tiga buah pasangan tag yang terkait dengan daftar definisi dapat dilihat pada tabel berikut :
Tag
Catatan
<DD>…<DD>
Digunakan untuk menyatakan wadah bagi definisi istilah
<DT>…</DT>
Digunakan untuk menyatakan wadah bagi istilah yang akan didefinisikan
<DL>…</DL>
Digunakan untuk menyatakan wadah bagi daftar
Tabel 5. Daftar Tag Definition List
©Pengembangan Web/Buku Ajar/T.I/Darmajaya
Bullet And Numbering Pada Dokumen HTML 30
Sebagai contoh perhatikan kode berikut :
Definisi.html
<html>
<head>
<title>definisi</title>
</head>
<body>
<b>Kamus Teknologi Informasi</b>
<dl>
<dt>HTML</dt>
<dd>Bahasa yang digunakan untuk menyusun web</dd>
<dt>HTTP</dt>
<dd>Protokol yang dipakai untuk mentransfer HTML</dd>
</dl>
</body>
</html>
Diposting oleh di Tidak ada komentar:

PEMROGRAMAN WEB (LIST HTML)


List HTML

List merupakan bentuk yang umum yang bisa kita gunakan untuk menguraikan daftara sesuatu, misalnya jenis-jenis list dalam HTML:
  • List dengan nomor
  • List tanpa nomor
  • List definisi
List dengan nomor adalah model daftar yang setiap itemnya dibri nomor. Pada contoh kalimat di atas merupakan contoh list tanpa menggunakan nomor.

Selain list bernomor dan tanpa nomor, ada sebuah list lagi yang bisa digunakan untuk membuat list yang memberi uraian terhadap sesuatu item dalam daftar ? disebut list definisi.
Untuk membuat list tanpa nomor, disebut juga bulleted list:
  • Mulai dengan tag pembuka list <ul>
  • Memasukkan setiap item list dengan menggunakan tag <li> kemudian tuliskan itemnya (satu saja), tag penutup item </li>, sebenarnya ini tidak harus dituliskan (tetapi sebaiknya dituliskan)
  • Ulangi lagi langkah kedua untuk menuliskan item list berikutnya
  • Akhiri seluruh list dengan sebuah tag penutup </ul>.
Untuk list dengan nomor, disebut juga ordered list, tag <ul> diubah dengan <ol>, demikian juga </ul> diganti dengan </ol>

Contoh List

Contoh ini mendemonstrasikan list berurut dan tak berurut menggunakan nomor dan menggunakan billet.
<!-coba_list.html?
<html>
<body>
<h4>An Ordered List: </h4>
<ol>
<li>Coffe</i>
<li>Tea</li>
<li>Milk</li>
</ol>
<h4>An Unordered  List:</h4>
<ul>
<li>Coffe</li>
<li>Tea</li>
<li>Milk</li>
</il>
</body>
</html>

Ordered List

Nomor item secara default adalah menggunakan angka 1,2,3,…, dan seterusnya sampai dengan sejumlah item dalam list tersebut.
Untuk keperluan penyajian tentu kita dapat mengubah nomor dalam order list dengan model angka yang lain, dengan mengisi atribut type pada tag <ol>.
Berikut ini adalah nilai-nilai yang dapat digunakan untuk mengubah penomoran dalam order list;
Type I Arti : Ditampilkan dengan angka Romawi huruf besar
Type i Arti : Ditampilkan dengan angka Romawi huruf kecil
Type a Arti : Diubah dengan menggunakan abjad huruf kecil
Type A rti : Diubah dengan menggunakan abjad huruf besar
Selain atribut type, ada juga atribut start, digunakan untuk mendefinisikan nomor awal yang akan digunakan pada ordered list. Jika ingin supaya list dimulai dari nomor 7, maka berikut adalah contoh penggunaannya <ol start=7>…</ol>

Contoh ini mendemonstrasikan berbagai jenis ordered list yang berbeda.
<!- -coba_listordered.html–>
<html>
<body>
<h4>Numbered list:</h4>
<ol>
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
<h4>Letters list : </h4>
<ol type=”A”>
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
<h4>Lowercase letters list : </h4>
<ol type=”a”>
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
</ol>
<h4>Roman numbers list:</h4>
<ol type=”I”>
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
<h4>Lowercase Roman numbers list :</h4>
<ol type=”i”>
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
</body>
</html>

Unordered List

Unordered list sering disebut sebagai bulleted list, mempunyai bulleted default berupa noktah. Jenis bulet bisa diubah, berikut adalah daftar jenis bullet yang bisa digunakan untuk mengubah bullet default pada bulleted list:
  • disk, bentuk noktah tetapi tidak diarsir ditengahnya
  • box, bentuk kotak
untuk mengubah jenis bullet dapat didefinisikan pada atribut type pada tag <ul>, berikut adalah contoh untuk mengubah jenis bullet menjadi kotak <ul type=”box>…</u>
Contoh ini mendemonstrasikan berbagai jenis unoredered list.
<!-coba_listunordered.html?
<html>
<body>
<h4>Disc bullets list : </h4>
<ul type=”disc”>
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>
<h4>Circle bullets list : </h4>
<ul type=”circle”>
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Orange</li>
<h4>square bullets list : </h4>
<ul type=”square”>
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>
</body>
</html>

Nested List

Bullet dapat digunakan secara bersarang, maksudnya didalam list ada list lagi. Contoh ini mendemonstrasikan bagaimana membuat list yang bersarang (nested list).
<!–coba_listnested.html – - >
<html>
<body>
<h4>A nested List : </h4>
<ul>
<li>Coffee</li>
<li>Tea</li>
<ul>Black tea</li>
<li>Green tea</li>
</ul>
</body>
</html>

Definition List

Contoh ini mendemonstrasikan suatu definition list
<!-coba_listdef.html?
<html>
<body>
<h4>A Definition List : </h4>
<dl>
<dt>Coffee</dt>
<add>Black hot drink</dd>
<dt>Milk</dt>
<dd>white cold drink</dd>
</dl>
</body>
</html>
Tag Awal <ol> kegunaan sebagai Defines an ordered list
Tag Awal <ul> kegunaan sebagai Defines an unordered list
Tag Awal <li> kegunaan sebagai Defines a list item
Tag Awal <dl> kegunaan sebagai a Defines a definition list
Tag Awal <dt> kegunaan sebagai Defines a definition term
Tag Awal <dd> kegunaan sebagai Defines a definition description
Tag Awal <dir> kegunaan sebagai Deprecated. Use <ul> instead
Tag Awal <menu> kegunaan sebagai Deprecated. Use <ul> instead


Diposting oleh di Tidak ada komentar:
Langganan: Postingan (Atom)