Thursday, July 19, 2012

Mengenal Dasar-dasar HTML

A.    DEFINISI HTML
     HTML (Hypertext Markup Language) merupakan suatu bahasa pemrograman untuk membangun sebuah dokumen dalam bentuk halaman di web (walaupun banyak orang yang keberatan)  menyebut HTML sebagai bahasa pemrograman Karena dirasa terlalu sederhana, hanya terdiri dari tag <html> sampai </html>, selain itu juga, HTML  tidak memiliki ‘looping’ seperti bahasa pemrograman lain. Namun dalam hal ini, tidak bisa dipungkiri bahwa HTML selalu ada pada sebuah halaman web page, karena HTML dapat dipergunakan sebagai hypertext link yang mampu membentuk hubungan antara teks dan dokumen lain. Dengan demikian pembaca dokumen bisa melompat dari satu dokumen ke dokumen yang lain dengan mudah.

B.  STRUKTUR DASAR HTML
     Adapun susunan penulisan HTML, secara mudah mempunyai struktur sebagai berikut berikut:
      <html>
<head>
<title>
Nama judul yang akan muncul pada browser
</title>
</head>
<body>
semua data, baik itu tulisan,gambar,maupun suara akan ditampilkan disini.
</body>
</html>

Dalam HTML juga terdapat suatu komponen (tag) yang kegunaannya dapat dilihat dibawah ini:
      Tag Dasar

<html>…</html>
Mendefinisikan sebuah dokumen HTML
<head>…</head>
Mendefinisikan isi atau badan sebuah dokumen HTML
<body>…</body>
Mendefinisikan judul, deskripsi dan meta tag sebuah dokumen HTML




C.    MENGENAL TAG PADA HTML
1.      Tag Headline
Dalam model tag headline ada beberapa macam yang sering digunakan untuk memformat tampilan huruf dari kecil dan besar yang dimulai dari <H1></H1> sampai <H6></H6>.
Contoh penggunaan :

<html>
 <head>
 </head>
 <body>
 <h1> Heading h1</h1>
 <h2> Heading  h2</h2>
 <h3> Heading  h3</h3>
 <h4> Heading  h4</h4>
 <h5> Heading  h5</h5>
 <h6> Heading  h6</h6>
 <h7> Heading  h7</h7>
 </body>
</html>

2.      Tag List
Tag ini biasanya digunakan untuk menampilkan informasi dalam bentuk daftar (list). Adapun jenis tag list ini ada dua yaitu format bullet (bulleted list) dan dalam bentuk nomor (ordered list). Biasanya ditambahkan dengan tag yang berbeda  yaitu dengan tag <UL> dan <OL>.
Contoh penggunaan :

<html>
<head>
</head>
<body>

<h2> Daftar Nama Dalam Bentuk Nomor  </h2>
<ol>
<li> Aryasatya
<li> Bumi
<li> Sasongko
</ol>

<h3>  Daftar Nama Dalam Bentuk Bullet  </h3>
<ul>
<li> Aryasatya
<li> Bumi
<li> Sasongko
</ul>

</body>
</html>

3.      Tag hr
Tag <hr> digunakan untuk membuat garis batas horizontal dan sekaligus akan membentuk baris baru.

4.      Tag Br
Tag <br> biasanya digunakan untuk penggantian baris baru. Sehingga kita dapat membuat baris baru bagi dokumen yang memerlukan pergantian baris.

D.    MEMFORMAT FONT DAN MENEMPATKAN GAMBAR

Dalam halaman web kita juga dapat melakukan pengaturan font dan gambar sehingga halaman web kita dapat terlihat lebih indah dan menarik. Penulisan perintah untuk memformat Font adalah sebagai berikut :
<font atribut></font>, untuk atribut dapat berupa size, face maupun lainnya.
Sedangkan penulisan perintah untuk menempatkan gambar adalah sebagai berikut                           <img scr="/url/nama_file"> dengan format yang sering digunakan adalah JPG, GIF dan PNG.
     
Tag <img> selalu diikuti dengan atribut src yang menunjukkan lokasi dan nama file grafik yang ingin kita tampilkan. URL (Universal Resources Locator) adalah alamat absolut dari file grafik tersebut.
       Atribut tambahan untuk instruksi <img> adalah Align. Atribut ini  mengendalikan letak (alignment) teks yang berada di baris yang sama dengan grafik terhadap sisi vertikal gambar. Atribut Align ditulis dengan cara sebagai berikut :
     <img src="gambar.gif" align=top>
     Anda dapat melihat atribut pada image seperti pada table dibawahi ini:
Tabel 2. Atribut pada image
ATRIBUT
KEGUNAAN

Width
Memberikan informasi mengenai ukuran lebar gambar kepada browser sebelum file grafiknya sendiri dikirimkan.
Height
Memberikan informasi mengenai ukuran vertikal gambar kepada browser sebelum file grafiknya sendiri dikirimkan.
Vspace
Menentukan jarak diatas dan dibawah
Hspace
menentukan jarak diatas dan dibawah
Border
Menentukan garis pinggir disekitar gambar.


E.      MEMBUAT TABLE DENGAN HTML
       Keberadaan tabel sangatlah penting dalam menampilkan dokumen atau informasi yang memerlukan banyak kolom dan baris. Namun lebih dari itu, table dapat menjadi alat utama dalam HTML untuk mengendalikan tata letak dokumen pada web kita..
Table 3. Struktur table
Tag
Kegunaan

<Table>….</tabel>
Digunakan untuk menampilkan data dalam bentuk table
<th>..…….</th>
Digunakan untuk menampilkan judul pada kolom
<tr>………</tr>
Digunakan untuk menentukan baris (table row)
<td>………</td>
Digunakan untuk menampilkan data pada setiap table (table data)

       Anda dapat lebih memahami tag tag diatas dengan mencoba membuat table dengan kode HTML dibawah ini.


Contoh penggunaan :

      <html>
<head>
<title> Pengunaan table</title>
</head>
<body >
<table border="1">
<tr>
<th>kolom1</th>
<th>kolom2</th>
<th>kolom3</th>
<tr>
<td>isi baris 1 kolom 1</td>
<td>isi baris 1 kolom 2</td>
<td>isi baris 1 kolom 3</td>
</tr>
<tr>
<td>isi baris 2 kolom 1</td>
<td>isi baris 2 kolom 2</td>
<td>isi baris 2 kolom 3</td>
</tr>
</table>
<br>
<br>
<table border ="1">
<tr>
<td>isi baris 3 kolom 1</td>
<td>isi baris 3 kolom 2</td>
<td>isi baris 3 kolom 3</td>
</tr>
</table>
</body>
</html>

F.     MEMBUAT LINK
       Kelebihan HTML adalah dapat berpindah dari satu halaman ke halaman yang lain. Suatu link hypertext, dalam suatu dokumen Web, dapat berupa gambar atau teks. Bila Anda mengklikkan mouse pada link-link tersebut, browser akan membawa Anda menuju ke dokumen lain yang ditunjukkan oleh link tersebut. Beberapa model link yang dapat anda gunakan adalah seperti dibawah ini:
1.      Model link Absolute
      Model ini dapat ditulis sebagai berikut dengan intruksi:
<a href=” http:// www.yahoo.com”>

2.   Model berpindah Halaman
<a href=” dokumen.htm”>

3.   Model link satu halaman
<a href=”# nama_link”>
Dengan catatan nama_link telah didefinisikan terlebih dahulu dengan cara:
<a name=” nama_link”>

G.    ELEMEN FORM
       Keberadaan form dalam HTML sangatlah penting, Form dalam HTML ditandai dengan tag <FORM> dan </FORM>. Sewaktu kita membuat elemen form, kita perlu menentukan bagaimana dan kemana data yang diisikan ke dalam form tersebut akan dikirimkan dari browser ke Web server. Hal ini dilakukan dengan pernyataan Action dan Method. Action menunjukkan lokasi tempat program CGI yang hendak dijalankan, sedangkan Method menunjukkan bagaimana informasi yang diisikan dalam form harus dikirimkan ke web server. method yang umum adalah get dan post.
1.      Elemen Textarea
       Textarea biasanya dipakai, bila kita menginginkan tempat bagi user web untuk memasukkan informasi yang panjangnya beberapa baris. perintah yang dipergunakan adalah : <textarea name=”nama” rows=n col=n>
       Name menyatakan nama data yang akan dimasukkan ke dalam textarea ini. cols dan rows berturut-turut menentukan banyak lebar textarea dan jumlah baris di dalam textarea. bila cols dan rows tidak ditentukan dalam kode textarea, maka nilai yang akan dipergunakan adalah 40 karakter lebar dan 4 baris tinggi.
2.      Elemen select
       Terkadang Anda ingin menyediakan beberapa pilihan kepada user dokumen Web Anda sebagai masukan. <SELECT> akan menampilkan suatu daftar yang dapat dipilih oleh user , baik dalam bentuk menu pop-up maupun menu gulung.
3.      Elemen input
Adapun elemen input ini biasanya terdiri dari:
a.      Textbox
Elemen ini digunakan untuk membuat kotak text yang mampu menerima masukkan berupa string atau bisa juga text yang teleh dienkripsi.
Untuk model text biasa
     Nama:  <input type ="text" name=tnama size=xx>
Dimana type yang digunakan yaitu berupa text
Untuk model text yang telah dienkripsi.
Password:
<input type ="password" maxlenght=”6”>
b.      Radio button
Elemen ini digunakan untuk menampilkan suatu daftar masukan berupa pilihan, dimana pengguna hanya diperbolehkan memilih satu dari pilihan yang ada.
Contoh:
jenis kelamin :
<input type ="radio" name=jenkel value="laki-laki">
laki-laki
<input type ="radio" name=jenkel value="perempuan">
perempuan

c.       Tombol
Elemen ini digunakan untuk menampilkan tombol, baik itu tombol Submit , maupun Reset.
            Contoh.
    <input type ="submit" value="kirim">
    <input type ="reset" value="batal">
1)      Submit digunakan untuk membuat tombol yang fungsinya untuk mengirimkan dara form agar diolah
2)      Reset digunakan untuk membuat tombol yang fungsinya untuk menghapus seluruh isian form yang telah diberikan
d.      Checkbox
Serupa dengan tombol, Checkbox memungkinkan user dokumen untuk memilih suatu pilihan dari beberapa pilihan yang tersedia, bedanya Checkbox mengijinkan user memilih lebih dari satu pilihan. Perintah yang digunakan :
    <input type=”checkbox”>


Table 4. Daftar atribut yang digunakan pada elemen form

Atribut
Keterangan
Name
Mendefinisikan nama dari suatu objek
Size
Menentukan ukuran kotak teks
Maxlenght
Menentukan jumlah maksimum karakter yang dapat dimasukkan pada kotak teks
Value
Pada elemen kotak teks digunakan untuk menentukan teks yang tertulis. pada elemen check box atau radio digunakan untuk menentukan nilai item yang dipilih sedangkan Pada elemen submit dan reset yaitu digunakan untuk menentukan teks yang tertulis pada tombol
Checked

Digunakan hanya pada checkbox atau radio untuk menentukan pilihan secara default
Type

Menentukan tipe input yang akan dibuat


sumber : http://www.bum1.info

1 comment:
Write komentar
  1. Mantap bang blogny dan makasih juga ilmunya ane jadi tau tag html dan fungsi atribut deh jadinya. jangan lupa juga ya mampir di blog ane tentang Pengertian Industri 4.0 thanks

    ReplyDelete