Kamis, 12 Maret 2015

PENGENALAN DASAR HTML


Internet merupakan jaringan global yang menghubungkan suatu network dengan network lainnya di seluruh dunia. Word Wide Web (WWW) merupakan bagian dari internet yang paling cepat berkembang dan palin popular. WWW bekerja mendasarkan pada tiga mekanisme berikut:
  •  Protocol standart aturan yang digunakan untuk berkomunikasi pada computer networking. Hypertext Transfer Protocol (HTP) adalah protocol untuk WWW.
  •   Address WWW memiliki aturan penamaan alamat web yaitu URL(Uniform Resource Locator)     yang digunakan sebagai standard alamat internet.
  •   HTML digunakan untuk membuat document yang bias diakses melalui web.
Hypertext Markup Language(HTML) merupakan standard bahasa yang digunakan untuk menampilkan document web, yang bisa dilakukan dengan HTML yaitu:
  •   Mengontrol tampilan dari web page dan contentnya.
  •   Mempublikasikan document secara online sehinggabisa diakses seluruh dunia.
  •  Membuat online form yang bias digunakan untuk menangani pendaftaran, transaksi secara online.
  •   Menambahkan objek-objek seperti image, audio, video, dan juga java applet dalam document HTML.
STRUKTUR DOKUMEN HTML

<html>
<head>
<title>Belajar HTML</title>
</head>
<body>
Hallo Word!
</body>
</html>

   
Note:
<html> ... </html>  : merupakan tag pembuka dari dokumen html.
<head> ... </head> :
<title> ... </title>     : merupakan tag untuk memberikan judul pada dokumen html.
<body> ... </body> : merupakan body dari dokumen html. Segala sesuatu yang ingin
ditampilkan di dokumen html disimpan dalam tag body ini.

TAG BODY dan ATRIBUT

1.    BACKGROUND
Atribut ini digunakan untuk mengeset gambar untuk digunakan sebagai latar
belakang pada sebuah halaman. Kita cukup menggunakan atribut berikut untuk
memilih sebuah gambar untuk dijadikan latar belakang. Cara penulisannya
adalah sebagi berikut:

<body background="urlgambar/lokasi penyimpanan gambar">

2.    BGCOLOR
Bgcolor menentukan warna latar belakang dari halaman web. Misalnya, untuk
mengatur warna latar belakang halaman agar berwarna merah, kita dapat
menggunakan tag berikut :

<body bgcolor="#222222?” >

3.    TEXT
Atribut ini berguna untuk menentukan warna standar dari teks yang ada pada
halaman tersebut.
4.    LINK
Atribut ini berguna untuk menentukan warna standar dari tautan (link) yang
ada pada halaman tersebut sebelum di-klik.
5.    VLINK
Berguna untuk menentukan warna standar dari tautan (link) yang ada pada
halaman tersebut ketika telah di-klik.
6.    ALINK
Berguna untuk menentukan warna standar dari tautan (link) pada halaman
tersebut ketika kursor berada diatasnya.
7.    MARGIN
TOPMARGIN dan LEFTMARGIN digunakan untuk menentukan jarak atas dan
tepian pada halaman. Tag ini akan terbaca pada browser Internet Explorer,
sedangkan untuk browser Netscape tag yang digunakan adalah
MARGINHEIGHT dan MARGINWIDTH.
8.    onLoad
Tag onLoad digunakan untuk menjalankan suatu perintah ketika suatu
halaman html dibuka. Contoh:

<body onload="alert('Selamat')">

9.    onUnload
Tag onUnLoad digunakan untuk menjalankan suatu perintah ketika suatu
halaman html tutup. Contoh:

<body onUnload="alert('Selamat Tinggal')">

TEXT HEADING
Text heading terdiri dari beberapa level, untuk lebih jelas lihat contoh di bawah ini:
<html>
<head>
<title>Title</title>
</head>
<body>
<h1>Heading Level 1</h1>
<h2>Heading Level 2</h2>
<h3>Heading Level 3</h3>
<h4>Heading Level 4</h4>
<h5>Heading Level 5</h5>
<h6>Heading Level 6</h6>
</body>
</html>

Berikut adalah hasil tampilan dari code di atas:


   
MENGATUR FONT PADA HALAMAN HTML

<html>
<head>
<title> Format Font </title>
</head>
<body >
<font size="5pt" face="Arial" color="red">
Bentuk Text arial berwarna merah
</font>
</body>
</html>


MEMBUAT TEXT BOLD, ITALIC, UNDERLINE, STRIKETRUE, SUPERSRIPT DAN SUBSCRIPT

<html>
<head>
<title></title>
</head>
<body >
<b>Ini Text Bold</b><br>
<i>Ini Text Italic</i><br>
<u>Ini Text Underline</u><br>
<s>Ini Text Striketrue</s></br>
Text Superscript: X<sup>2</sup><br>
Text Subscript: H<sub>2</sub>O
</body>
</html>


MEMBUAT LIST

Ada 3 jenis list dalam dokumen html yaitu:
1. Ordered List “<ol>”
    Tag <ol> adalah kependekan dari Ordered List, yang artinya list secara
    berurutan. list yang ditampilkan nanti oleh tag ini akan menampilkan nomor
    disebelah kiri dari detail.

<html>
<head>
<title>web saya</title>
</head>
<body>
TUGAS HARI INI ADALAH :
<ol>
<li>Memasak</li>
<li>cuci piring</li>
<li>cuci baju</li>
<li>mandi</li>
<li>sarapan</li>
<li>berangkat sekolah</li>
</ol>
</body>
</html>


 Pada Ordered List “<ol>” secara default pengurutan akan diurutkan dengan angka. Jika anda ingin mengurutkan dengan huruf/romawi maka anda tinggal menambahkan atribut type pada tag <ol> contoh:

<html>
<head>
<title>web saya</title>
</head>
<body>
TUGAS HARI INI ADALAH :
<ol type="A">
<li>Memasak</li>
<li>cuci piring</li>
<li>cuci baju</li>
<li>mandi</li>
<li>sarapan</li>
<li>berangkat sekolah</li>
</ol>
</body>
</html>


2. Unordered List <ul>
    Unordered List merupakan pengurutan list dengan menggunakan
    symbol/bullet. Cara membuatnya sama dengan Ordered List hanya saja tag <ol>
    diganti dengan tag <ul>. Contoh:

<html>
<head>
<title>web saya</title>
</head>
<body>
TUGAS HARI INI ADALAH :
<ul>
<li>Memasak</li>
<li>cuci piring</li>
<li>cuci baju</li>
<li>mandi</li>
<li>sarapan</li>
<li>berangkat sekolah</li>
</ul>
</body>
</html>


3. List tanpa bullet <dl>
    Untuk membuat list tanpa mengunakan bullet/symbol caranya sama persis
    dengan pembuatan list dengan tag ol/ul, hanya saja tag <ul> diganti dengan
    <dl> lalu tag <li> diganti dengan <dd> contoh:

<html>
<head>
<title>web saya</title>
</head>
<body>
TUGAS HARI INI ADALAH :
<dl type=>
<dd>Memasak</dd>
<dd>cuci piring</dd>
<dd>cuci baju</dd>
<dd>mandi</dd>
<dd>sarapan</dd>
<dd>berangkat sekolah</dd>
</dl>
</body>
</html>

Tidak ada komentar:

Posting Komentar