RSS Feed

Selasa, 29 Maret 2011

Resume DesWeb - Pertemuan 5


Dokument Hypertext adalah dokumen yang berisi link ke dokumen lain. Anda bisa pindah dari satu dokumen ke dokumen lain hanya dengan klik link tersebut.
 Dokument Hypermedia adalah dokumen yang berdasarkan hypertext ditambah dengan multimedia seperti gambar, video dan audio. Dalam dokumen hypermedia, gambar sering digunakan sebagai link ke dokumen lain

Path relative jika lokasi file tersebut relatif terhadap dokumen yang sedang aktif, yaitu terletak di atas atau dibawah direktori dokumen tersebut.
Contoh : <a href=“../tes.html”>masuk !</a>,
  <a href=“masuk/tes.html”>Mlebu !</a>.
 Absolute Path adalah path yang merujuk pada pada suatu lokasi file dengan cara alamat url yang ditulis lengkap atau utuh.
Contoh : <a href=http://www.stikom.edu>Stikom</a >

Link  merupakan dasar pembangun hypertext. Sebuah link menghubungkan satu sumber web ke web lain.
Link mempunyai dua komponen, yaitu anchor dan tujuan.
         link merupakan sarana yang membawa anda ke lokasi yang    dituju.
         Anchor merupakan lokasi yang menjadi tujuan dari link tersebut.

Atribute ID merupakan atribut href untuk menyatakan suatu file tujuan. Server mencari ke dalam direktori di mana dokumen saat ini berada untuk mencari file tersebut. File dokumen tujuan HTML yang menggunakan elemen A bisa diikuti atribut id.
Untuk membuat link yang membawa pembaca ke suatu bagian tertentu dalam dokumen, cukup sertakan tanda # setelah nama bagian link.
Contoh : <a href=“#teguh”>Oke</a>

Elemen <a>
Untuk membuat suatau link dalam HTML dipergunakan elemen yang dinyatakan dengan tag berpasangan <a>..</a>.
Atribut
Fungsi
Name
Menyatakan titik anchor dalam suatu dokumen HTML
Href
Menunjukan lokasi dokumen Web
Rel
Menggambarkan hubungan dari dokumen asal dengan dokumen tujuan yang ditunjuk dengan atribut href
DLL

HTML  Frames
Kegunaan Frame :
       Membuat daftar isi pada suatu sisi frame sementara sisi frame yang lain menampilkan isi.
       Membuat suatu judul atau logo yang tidak berubah-ubah pada suatu sisi frame, sedangkan sisi frame yang lain menampilkan isi dokumen.
       Membuat suatu dokumen tanya-jawab, di mana sisi frame yang satu berisi daftar pertanyaan sedangkan sisi frame yang lain
       DLL.

Membuat Frame
Dokumen frame tidak boleh berada dalam elemen body. Dokumen frame menggunakan elemen FRAMESET mempunyai dua buah atribut, yaitu ROWS dan COLS.
       ROWS Membagi Jendela Browser menjadi beberapa baris frame
             •       COLS membagi jendela browser menjadi beberapa kolom frame 
Tag <frame>
Mendefiniskan sebuah frame. Tag tersebut harus dalam elemen FRAMESET, contoh :
<html>
                  <head>
                                    <title>frame</title>
                  </head>
                  <frameset rows="5,5" cols="5,5">
                                    <frame src="http://www.google.com">
                                    <frame src="http://www.detik.com">
                                    <frame src="http://www.facebook.com">
                                    <frame src="http://www.yahoo.com">
                  </frameset>
</html>

Link ke Sumber (SRC)
Atribut yang paling penting dari tag FRAME adalah SRC (Source). SRC menunjukkan bahwa frame berisi URL, yang biasanya adalah file HTML.
                  <frame src=http://www.stikom.edu>
File HTML yang dipanggil oleh SRC diusahakan merupakan dokumen HTML yang lengkap. Artinya harus mengandung elemen HTML, HEAD, BODY dan lainnya. Anda juga bisa memanggil file image (*.jpg) / (*.gif) / (*.png)

Mengatur Jumlah Baris dan Kolom Frame
Untuk mengatur baris dan kolom frame hampir sama. Aturan penggunaan atribut ROWS dan COLS pada FRAMESET adalah Sebagai Berikut :
<frameset rows="500px,500px" cols="500px,500px">
……………
……………
</frameset>
Nilai baris dan nilai kolom adalah kumpulan nilai yang menyatakan banyaknya frame yang dibuat serta ukuran masing-masing frame

HTML Forms
Form adalah salah satu penampilan interaktif yang paling populer pada World Wide Web(www).
Form memungkinkan pengguna berinteraksi dengan teks, grapik atau yang dirampilkan pada browser.
Sebuah form dibentuk dengan menggunakan pasangan tag <form> </form>. Setiap elemen FORM harus mempunyai 2 buah atribut METHOD dan ACTION.
ACTION adalah URL dari script yang dipanggil oleh form tersebut
Method adalah cara mengirimkan data yang dimasukan pembaca ke web server. Form ini mempunyai dua metode yaitu GET dan POST.
Metode GET Adalah mengirimkan data pada server dengan cara meletakkannya pada bagian akhir URL.
Metode POST Adalah mengirim seluruh data dari form yang terpisah dari URL

Metode GET
<form action = “Proses.php” method = “GET”>
   ……………
   ……………
</form>

Metode POST
<form action = “Proses.php” method = “POST”>
   ……………
   ……………
</form>
Tag
Description
<Form>
Defines an HTML form for user input
<input>
Defines an input control
<textarea>
Defines a multi-line text input control
<select>
Defines a select list (drop-down list)
<option>
Defines an option in a select list
<button>
Defines a push button


HTML Scripting
The <script> tag is used to define a client-side script, such as a JavaScript.
The script element either contains scripting statements or it points to an external script file through the src attribute.
Common uses for JavaScript are image manipulation, form validation, and dynamic changes of content.
<script type="text/javascript">
                  document.write("Hello World!")
</script>
The <noscript> tag is used to provide an alternate content for users that have disabled scripts in their browser or have a browser that doesn’t support client-side scripting.
The noscript element can contain all the elements that you can find inside the body element of a normal HTML page.
The content inside the noscript element will only be displayed if scripts are not supported, or are disabled in the user’s browser:
<script type="text/javascript">
document.write("Hello World!")
</script>
<noscript>Sorry, your browser does not support JavaScript!</noscript>

Selasa, 22 Maret 2011

Resume DesWeb - Pertemuan 4


Content Display dalamHalaman Web

HTML Text Formating
HTML uses tags like <b> and <i> for formatting output, like bold or italic text.Examples :
          This text is bold -><b>This text is bold</b>
          This text is italic   -><i>This text is bold</i>

HTML Styles
Attribut Style
Attribut Style digunakansecaralangsungterhadap tag yang beradadalam BODY untukmelakukanpengaturandenganproperti-properti CSS.
ContohAttributStyle :
<html>
<body style="background-color:Blue;">
<h1>Look ! Styles and colors</h1>
<p style = "font-family: verdana; color: red">
                This text Verdana and red
</p>
<p style= "font-family: times; color: green">
                This text isi Times and green
</p>
<p style= "font-size:30px">
                                                                This text is 30 pixels high
</p>
</body>
</html>



HTML Images
Jenis Gambar
Ekstensi
Keterangan
GIF
.gif
Grapich Interchange Format
JPEG
.jpg / .jpeg
Joint Photographic Experts Group
PNG
.png
Portable Network Graphics

Membuat Gambar Sebagai Background
<html>
                <head>
                                <title>Latarbelakang</title>
                </head>
<body background = “images/tes.png”>
</body
</html>

MenampilkanGambar
<html>
                <head>
                                <title>Latarbelakang</title>
                </head>
<body>
                                <imgsrc=“tes.png”>
</body
</html>

MengaturLetakTeksTerhadapGambar
Nilai
Keterangan
TOP
Teks diletakkan di bagian atas
MIDDLE
Teks diletakkan di tengah-tengah
BOTTOM
Merupakan nilai default. Dalam hal ini, teks diletakkan padabagian bawah
 
Cth: <imgsrc = “tes.png” align=”TOP”>

MengaturUkuranGambar
<html>
                <head>
                                <title>Latarbelakang</title>
                </head>
<body>
                                <imgsrc=“tes.png” height=“20” width=“20”>
</body>
</html>

HTML Tables
ELEMEN TABLE
Untukmembuattabel.Andaharusmemulainyadenganpasangan tag <table>..</table>. Di dalam tag andadapatmenentukanbanyakkolomdanbaris. Perataan, warnadanpengaturanlainnya
<html>
<head>
<title>Untitled Document</title>
</head>
<body>
<table width="200" border="1">
<tr>
<th>Nim</th>
<th>Nama</th>
</tr>
<tr>
<td>08410100140</td>
<td>Joni</td>
</tr>
</table>
</body>
</html>

Atribut Table:
          Border :untukmembuatbatastepi.
          Width :untukmengaturlebar table.
          Align :untukmengaturbentukperataan horizontal data di dalam table. Sepertikiri, tengah, ataukanan
          DLL.

Group Baris
Contoh Group Table
<table>
                <thead>
                                <tr>      
                                                <th>Nama</th>
                                                <th>Hari</th>  
                                </tr>    
                </thead>            
                <tbody>
                                <tr>      
                                                <td>Teguh</td>
                                                <td>Selasa</td>
                                </tr>
                </tbody>            
<tfoot>
                                <tr><td colspan="2">footnote</td></tr>
</tfoot>
</table>

HTML List
Tag
Description
<ol>
Defines an ordered list
<ul>
Defines an unordered list
<li>
Defines a list item
<dl>
Defines a definition list
<dt>
Defines an item in a definition list
<dd>
Defines a description of an item in a definition list





Selasa, 08 Maret 2011

Resume DesWeb - Minggu ke 3


Suatu elemen HTML terdiri dari tag-tag dan atribut. Berikut ini ciri-ciri tentang elemen-elemen HTML :
           Elemen HTML dimulai dengan start tag / opening tag. <html>
           Elemen HTML diakhiri dengan end tag / closing tag. </html>
           Element content adalah segala sesuatu antara start tag dan end tag.
          Beberapa elemen HTML  mempunyai empty content.
cth:  <br /> , <hr />, dsb
           Empty elements  adalah tag yang ditutup saat start tag.


Hyper Text Markup Language(HTML) TAG
Tag biasanya merupakan suatu pasangan tag awal <…> dan tag akhir </..>. Format umum pasangan tag adalah sebagai berikut :
      <html>
                <head>
                                <title>Contoh Tag HTML</title>
                </head>
                <body>
                                .. Isi dokument HTML Anda ..
          </body>
 </html>


Beberapa Contoh HTML Tag :
           <br />      : Digunakan untuk berpindah baris.
           <p> </p> : Digunakan untuk mendeklarasikan paragraph.
           <hr />      : Membuat Garis Horizontal.
           <blink>   : Membuat Text berkedip-kedip.
           <font>     : Menformat huruf.
           DLL.

 
HTML Atribute
Atribut memungkinkan informasi tambahan pada elemen HTML.
Cth:
<font face=”Arialsize:20px;>
Font                     : html tag
Face, size             : html attribute
Arial, 20px           : value html attribute

Macam HTML Attribute:
          <p align=“center”> : digunakan untuk menengahkan text paragraph.
           <table border = “1px solid”> : digunakan untuk membuat table yang mempunyai ketebalan garis sebesar 1 pixel dan berwarna solid (hitam).
           <body bgcolor="#000000"> : digunakan untuk membuat background body dengan warna hitam.
           <font size=“12”> : digunakan untuk memrubah ukuran font.
           DLL.


HTML Heading
Heading dokumen adalah suatu tag yang berisi informasi mengenai bagian kepala dari suatu dokumen HTML.
Contoh html heading terdapat pada tag
           <head>…</head>
           <title>…</title>
Untuk membuat judul pada suatu dokumen HTML digunakan pasangan tag <title> .. </title>. Tag <title>..</title> hanya boleh berada di bagian HEAD dan setiap dokumen hanya boleh memiliki satu <title>..</title>.


HTML Paragraph
Contoh sintax Penggunaan HTML Paragraph :
<html>
                <head>
                                <title>Coba Blink-Blink</title>
                </head>
                <body>
                                <p align=”Left”>apes </p>
                                <p align=”Center”> apes </p>
                                <p align=”Right> apes </p>
                </body>
</html>