Anda di halaman 1dari 29

Pengenalan Struktur Dokumen HTML

Hypertext Markup Language (HTML) adalah bahasa yang


digunakan untuk menulis halaman web. untuk
menyampaikan ide pada web browser, bahasa HTML
menggunakan sesuatu yang dinamakan tag. Tag selalu
ditulis diantara tanda lebih kecil dari (<) dengan tanda
lebih besar dari (>) contoh (< tag >)

Secara sederhana HTML terdiri dari dua bagian yaitu


Header dan Body. Struktur HTML diapit oleh tag awal
<HTML> dan tag akhir </HTML>
<html>
    <head>
        <title>Deskripsi Dokumen</title>
    </head>
    <body>
        isi dokumen
   </body>
</html>
<html>
    <head>
        <title>Struktur Dokumen HTML</title>
    </head>
    <body>
        Belajar HTML itu menyenangkan dan mudah
    </body>
</html>
Heading

Heading adalah sekumpulan kata yang menjadi judul atau


subjudul dalam satu dokumen HTML. Heading berbeda
dengan tag <TITLE> yang tidak bisa muncul dalam
halaman web. HTML menyediakan enam tingkatan
heading. Heading level 1 biasanya untuk judul utama.
<html>
    <head>
        <title>Heading</title>
    </head>
    <body>
        <h1>Ini Teks Dengan Heading 1</h1>
        <h2>Ini Teks Dengan Heading 2</h2>
        <h3>Ini Teks Dengan Heading 3</h3>
        <h4>Ini Teks Dengan Heading 4</h4>
        <h5>Ini Teks Dengan Heading 5</h5>
        <h6>Ini Teks Dengan Heading 6</h6>
    </body>
</html>
Paragraf

Untuk membuat paragraf digunakan tag <P>. Setelah tag


<P> anda bisa menulis ini paragraf dan paragraf tersebut
di akhiri dengan tag penutup </P>. Dan anda juga dapat
mengatur posisi paragraf dengan menggunakan atribut
ALIGN. atribut ALIGN diikuti dengan posisi yang
diinginkan. Left  untuk meratakan paragraf dikiri, center
untuk meratakan paragraf ditengah, right untuk meratakan
paragraf di kanan. 
<html>
    <head>
        <title>Paragraf</title>
</head>
<body>
<p align="left">
VoIP merupakan teknologi yang membawa sinyal suara digital dalam bentuk
data paket dengan protokol IP. 
</p>
<p align="center">
Network IP dapat berupa network paket apapun, termasuk  Intranet, atau line
E1.
</p>
<p align="right">
Pada sisi pengirim, sinyal suara dikodekan kemudian dipaketkan.
</p>
</body>
</html>
Format Text (Pengaturan Font)

Untuk mengatur format dari text dalam HTML atau


mengatur huruf dari dokumen HTML digunakan tag
<FONT>. Tag <FONT> memiliki beberapa atribut untuk
mengatur ukuran huruf, jenis huruf, dan warna yang akan
diberikan pada huruf.
Ukuran Font

Attribut SIZE digunakan untuk mengatur ukuran font. Nilai


font dimulai dengan nilai 1 untuk ukuran huruf yang
terkecil dan nilai 7 untuk ukuran huruf yang terbesar 
<html>
    <head>
           <title>Ukuran Font</title>
    </head>
    <body>
        <font size=1>Ukuran dari font adalah 1</font>
        <font size=2>Ukuran dari font adalah 2</font>
        <font size=3>Ukuran dari font adalah 3</font>
        <font size=4>Ukuran dari font adalah 4</font>
        <font size=5>Ukuran dari font adalah 5</font>
        <font size=6>Ukuran dari font adalah 6</font>
        <font size=7>Ukuran dari font adalah 7</font>
    </body>
</html>
Jenis Font

Attribut FACE digunakan untuk mengatur jenis huruf yang


diinginkan. Attribut FACE harus diisi dengan string jenis
font seperti Arial, Times New Roman, Verdana dan
sebagainya.
<html>
<head>
        <title>Jenis Font</title>
 </head>
 <body>
   <font face="Arial">ini jenis huruf Arial</font>
   <font face="Times New Roman">ini jenis huruf
Times New Roman</font>
   <font face="Verdana">ini jenis huruf Verdana</font>
<font face="Tahoma">ini jenis huruf Tahoma</font>
 </body>
</html>
Warna Font

Attribut color digunakan untuk mengatur warna font yang


diingikan. Untuk memberi nilai pada attribut color ada dua
cara. Cara pertama dengan menyebutkan nama warna
seperti red, green, blue. Sedangkan cara kedua adalah
dengan menggunakan nilai RGB(Red, Green, Blue) dari
suatu warna, misalnya FF0000 untuk red, 00FF00 untuk
green dan 0000FF untuk warna blue.
<html>
   <head>
       <title>Warna Font</title>
  </head>
    <body>
      <font color="red">Aku suka warna Merah</font>
      <font color="#FF0000">aku suka warna merah</font>
      <font color="#00FF00">aku suka warna hijau</font>
    </body>
</html>
BR

Tag line break (BR) digunakan untuk menulis text pada


baris berikutnya. Tag <BR> membuat baris baru tanpa
baris kosong
<html>
    <head>
           <title>Line Break</title>
    </head>
    <body>
    <p>
Banyak cara yang dapat kita gunakan untuk melakukan instalasi Fee
BSD. Namun ada tiga cara yang  paling sering dilakukan yaitu :</p>
<br>Instalasi melalui FTP
<br>Instalasi malalui CDROM
<br>Instalasi melalui partisi DOS
</body>
</html>
Link

Perintah Anchor (A) digunakan untuk embuat suatu link.


Untuk membuat link ke dokumen HTML lain digunakan
perintah  <A HREF="nama_dokumen">Teks Pada
Browser</A>.
<html>
<head>
   <title>Link</title>
</head>
<body>
<p>Nama-nama prodi di STMIK Kharisma:</p>
<br>Ingin tahu lebih <a href="latih1.html">klik disini</a>
  </body>
</html>
<html>
<head>
<title>Link Halaman Lain</title>
</head>
<body>
<p align="center">Kalau tidak salah</p>
<br>Teknik Informatika
<br>Sistem Informasi
<br>Manajemen Informatika
<br><a href="latih.html">Kembali</a>
</body>
</html>
Ordered List

Ordered list digunakan untuk mebuat daftar dimana tiap


bagiannya memiliki nomor secara berurut. Ordered list
dimulai denga tag <OL> dan diakhiri dengan penutup
</OL>. Untuk menyatakan tiap-tiap bagiannya digunakan
tag <LI> dimana tag ini tidak telalu memerlukan tag
penutup. Dengan menggunakan Ordered List anda tidak
perlu memberi nomor untuk tiap bagian. Perintah tersebut
akan secara otomatis diproses oleh browser. 
<html>
    <head>
           <title>Ordered List</title>
    </head>
    <body>
<p align=left>Empat Angkutan darat</p>
            <ol>
                <li>Mobil
                <li>Motor
                <li>Kereta api
                <li>Becak 
            </ol>
    </body>
</html>
Ketika anda menggunakan perintah ordered list maka defauld dari
penomoran adalah 1,2,3,.... Anda bisa mengubah nomor tersebut
dengan meggunakan attribut TYPE pada tag <OL>. Attribut TYPE
beserta fungsinya dapat anda lihat pada tabel berikut ini :

Attribut Fungsi
Daftar berurut dengan nomor 1,2,3 (attribut ini adalah defauld dari
Type = 1
ordered list)
Type = I Daftar berurut dengan bilangan romawi huruf besar I,II,III

TYPE = i Daftar berurut dengan nomor bilangan romawi huruf kecil (i,ii,iii)

Type = A Daftar berurut dengan abjad A,B,C

TYPE = a Daftar berurut dengan abjad huruf kecil a,b,c


Selain mengubah jenis penomoran, HTML juga
menyediakan perintah untuk menentukan nilai awal
penomoran. Attribut yang digunakan adalah START = n,
dimana n adalah nilai awal penomoran.
<html>
    <head>
       <title>Ordered List</title>
    </head>
   <body>
      <ol type="A">
       <li>Empat Keajaiban Dunia
            <ol type="I">
               <li>Great Wall
               <li>Pyramid
               <li>Menara Pisa
               <li>Air Terjun Niagara
            </ol> 
        <li>Urutan lima sampai enam
            <ol type=1 start=5>
             <li>Pulau Komodo
              <li>Menara Eifel
</ol>
     </ol>
    </body>
</html>
Unordered List

Berbeda dengan ordered list, dalam unordered list, tidak


dijumpai ururtan dalam suatu daftar. Setiap bagian dari
unordered list ditandai dengan bullet. Tanda bullet
menjadi default dalam unordered list. Untuk membuat
daftar tanda ini digunakan tag awal <UL> dan tag penutup
</UL>. Selajutnya sama dengan ordered list untuk bagian-
bagianya digunakan tag <LI> tanpa tag penutup.
<html>
    <head>
           <title>Unordered List</title>
    </head>
    <body>
            Empat Angkutan Darat
            <ul>
                <li>Mobil
                <li>Motor
                <li>Kereta Api
                <li>Becak 
            </ul>
   </body>
</html>
Selaindefaul tanda bullet, Anda bisa menggunakan tanda
cakram, lingkaran, atau kotak. Caranya dengan
menggunakan atribut TYPE pada tag <UL>. Untuk lebih
jelasnya lihatlah pada daftar berikut :

Attribut Fungsi
TYPE = Circle Tanda Lingkaran
TYPE = Disk Tanda Cakram
TYPE = Square Tanda Kotak
<html>
    <head>
           <title>Unordered List</title>
    </head>
    <body>
            Empat Angkutan Darat
            <ul type="square">
                <li>Mobil
                <li>Motor
                <li>Kereta Api
                <li>Becak 
            </ul>
    </body>
</html>