HyperText Markup Language (HTML) itu apa - Apa dan Fungsi >

HyperText Markup Language (HTML) itu apa

html img

HTML Itu Apa? 

      Html atau HyperText Markup Language merupakan salah satu format yang digunakan dalam pembuatan dokumen dan aplikasi yang berjalan di halaman Web. Dokumen ini dikenal sebagai web page. Dokumen HTML merupakan dokumen yang disajikan pada web browser.

Pengenalan Kode HTML

<html>
   <!--- Code --->
</html>


Masing masing baris diatas disebut tag.Tag adalah kode yang digunakan untuk me-markup (memoles) teks ASCII menjadi file HTML.Setiap tag diapit tanda kurung runcing. Ada tag pembuka yaitu <html> dan ada tag penutup yaitu </html> yang ditandai dengan tanda slash(garis miring) di depan awal tag tersebut.Tag diatas memberikan kaidah bahw yang akan ditulis di antara dua tag tersebut adalah isi dari dokumen HTML.

Dalam sebuah penamaan sebuah dokumen yang akan ditampilkan pada web browser maka nama yang digunakan harus diakhiri dengan ekstensi (nama.html) atau (nama.htm) Ekstensi dokumen HTML awalnya 3 karakter,adalah untuk magakomodasi sistem penamaan dalam DOS.

Pengaturan warna di dalam HTML menggunakan methode RGB (Red,Green,Blue) dimana setiap warna di tampilkan dalam dua digit nilai heksadecimal (0,1,2,...,F). Setiap bagian dua digit kode menunjukan banyaknya intentitas dari kombinasi warna Merah,Hijau,dan Biru.

Untuk Lebih Jelasnya Perhatikan Script berikut : 

<html> 
    <head>
          <title>Script/Code Warna</title>
    </head>
            <body>
                <h1>Output</h1>
                <p style="color:#fff;background-color:#000">Anang Leson [Warna Putih]   [Background Hitam]</p>
                   <p style="color:#000>Anang Leson [Warna Hitam]</p>
                   <p syle="color:#ff0000>Anang Leson [Warna Mearah]</p>
                   <p style="color:#00ff00">Anang Leson [Warna Hijau]</p>
                   <p style="color:#ff00ff">Anang Leson [Warna Magenta]</p>
                   <p style="color:#0000ff">Anang Leson [Warna Biru]</p>
            </body>
</html> 



Atau anda juga bisa membuatnya melalui CSS,silahkan lihat script berikut :


<html>
<head>
    <title>Script/Code Warna</title>
    <style type="text/css">
    .hitam{color: #000;}
    .putih{color: #fff;background-color: #000;}
    .merah{color: #ff0000;}
    .hijau{color: #00ff00;}
    .magenta{color: #ff00ff;}
    .biru{color: #0000ff;}
    </style>
</head>
<body>
<h1>Output</h1>
    <p class="putih">Anang Leson [Warna Putih] [Background Hitam]</p>
    <p class="hitam">Anang Leson [Warna Hitam]</p>
    <p class="merah">Anang Leson [Warna Mearah]</p>
    <p class="hijau">Anang Leson [Warna Hijau]</p>
    <p class="magenta">Anang Leson [Warna Magenta]</p>
    <p class="biru">Anang Leson [Warna Biru]</p>
</body>
</html>



Bedanya jika anda menggunakan CSS Anda harus menambahkan Script <style>......</style> yang diposisikan setelah Script <title>........</title> atau diantara bagian Script <head> dan </head>.

Output dari Script di atas :

warna html

Definisi Elemen dan Tag HTML

Elemen dasar yang harus dimiliki dalam pembuataan dokumen HTML adalah tag html,tag head,tag bod. Elemen head berisi informasi tentang dokumen,sedangkan elemen body berisi teks atau elemen lainnya. 
             
          Lebih jelasnya perhatikan Script berikut :

<html>
<head>
    <!--- Informasi Dokumen -->
</head>
<body>
<!-- Informasi yang ditampilkan
        pada browser -->
</body>
</html>

Penggunaan Tag dan Atribut Tag

Dalam Pembuatan dokumen HTML,penulisan elemen yang diawali dan diakhiri tanda tag HTML memiliki syarat berikut :
  1. Tag HTML diapit dengan dua karakter kurung sudut ( < dan > )
  2. Tag HTML secara normal selalu berpasangan,misal (<i>.....</i>)
  3. Tag HTML tidak 'case sensitive' . ( <b> sama dengan <B>
  4. Jika dalam suatu tag ada tag lagi,maka penulisan tag akhir tidak boleh bersilang,harus berurutan,Misal <b><i>..Bold dan Italic...</i></b>
          Tag juga dapat mempunyai atribut untuk mengubah default pemformatan dokumen dengan tag yang bersangkutan.
          Tag yang tidak mempunyai atribut,misal <body>.Tag <body> ini tidak menggunakan atribut,sehingga dokumen HTML sebagimana default dari tampilan HTML.

Tag Dasar HTML

1. HTML
 Merupakan tag dasar yang mendefinisikan dokumen html
  • Script :
<html>
   <!--- Code --->
</html>


2. Head
Keterangan  untuk menuliskan keterangan tentang dokumen web yang akan ditampilkan.
  • Script :
<html>
<head>
    <!--- Informasi Dokumen -->
</head>
<body>
<!-- Informasi yang ditampilkan
        pada browser -->
</body>
</html>

3. Title
Merupakan tag untuk menuliskan judul dari dokumen HTML.
  • Script :
<html>
<head>
    <title> Anang Leson </title>
</head>
<body>
...... Code ........
</body>
</html>

4. Heading
Tag yang digunakan untuk memformat judul.
  •  Script :
<html>
<head>
    <title> Heading </title>
</head>
<body>
<h1> Anang Leson</h1>
<h2>Anang Leson</h2>
<h3>Anang Leson</h3>
<h4>Anang Leson </h4>
<h5>Anang Leson </h5>
<h6>Anang Leson</h6>
</body>
</html>

  • Output :
    img html heading

3. Paragraph
 Tag paragrapt <p> berfungsi layaknya untuk pengaturan antar paragrapt.
  • Script :
<html>
<head>
    <title> Paragraph </title>
</head>
<body bgcolor="#222222" text="#ff0000">
<h1> Anang Leson</h1>
<hr width="85% align="left">
<h4>Belajar HTML </h4>
<p>Saya Ingin Sukses Belajar HTML </p>
</body>
</html>

  • Output :
    img html paragraph
4. List
 List item merupakan perintah yang digunakan dalam html untuk membuat daftar atau pengelompokan kata.contoh :
  • Script :
<html>
<head>
    <title> List </title>
</head>
<body>
<h2>WEB Programming</h2>
<ol type="a">
<li>PHP</li>
<li>HTML</li>
<li>CSS</li>
<li>Bootstrap</li>
</body>
</html>

  • Output :
    bullet html img 
      

5. Format Karakter 
Merupakan format terhadap karakter yang ditampilakn sangat berguna  membuat suatu dokumen HTML yang menarik.
  • Script : 
<html>
<head>
    <title> Paragraph </title>
</head>
<body bgcolor="#cccccc" text="#fffff0">
<h1> Anang Leson</h1>
<hr width="85%" align="left">
<h4>Belajar HTML </h4>
<strong>Text Strong </strong><br>
<cite>Text Cite</cite>
</body>
</html>

  • Output :
    html format img
6. Karakter Khusus


spesial karakter html img

  • Script : 
<html>
<head>
    <title> Memformat Karakter </title>
</head>
<body bgcolor="#cccccc" text="#fffff0">
<h1> Anang Leson</h1>
<hr width="85%" align="left">
<h4>Belajar HTML </h4>
ampesand &amp;<br>
tanda kutip &quot;<br>
lebih kecil &lt;<br>
lebih besar &gt;<br>
tanda kali &times;<br>
Copyright &copy;
</body>
</html>

  • Output :
    spesial karakter html img

      Untuk Tutorial dan panduan script HTML lengkap anda bisa mengunjungi website http://www.w3schools.com/html/default.asp    

           Sekian sedikit Ilmu yang bisa saya beri,semoga bermanfaat bagi kita,dan jika anda masih punya pertanyaan silahkan anda tinggal kan komentar anda,dan jangan lupa kunjungi artikel saya yang lainnya yang berjudul PHP itu apa.

Dimohon untuk tidak menggunakan bahasa rasis, bahasa kotor, spam iklan. Link hidup di komentar tidak akan ditayangkan Terima kasih
EmoticonEmoticon