Tuesday, 22 December 2015

Struktur HTML dan pembahasan

Nah gan, udah tahu kan dengan pengertian dari HTML dan juga fungsinya. Kali ini giliran struktur dari HTMLnya loh. Lalu apa saja sih struktur dari Hypertext Markup Language ini? Yuk baca di bawah ini.

STRUKTUR HTML
1.      Elemen
Elemen terdiri atas dua kategori utama, yaitu elemen – elemen  <HEAD> yang memberikan informasi tentang dokumen tersebut. Elemen <HEAD> ini meliputi judul dokumen atau hubungannya dengan dokumen lain.
Elemen lain yaitu elemen – elemen <BODY> yang menetukan bagaimana isi dokumen ditampilkan oleh browser. Isi elemen ini misalnya paragraph, list (daftar), table dan lain – lain. Di dalam elemen HTML terdiri dari tag – tag beserta teks yang ada dalam tag – tag tersebut.

2.      Tag
Adalah teks khusus (markup) berupa dua karakter "<" dan ">", sebagai contoh <body> adalah tag dengan nama body. Tag ditulis secara berpasangan, yang terdiri atas tag pembuka dan tag penutup (ditambahkan karakter "/" setelah karakter "<"), sebagai contoh <body> ini adalah tag pembuka isi dokumen HTML, dan </body> ini adalah tag penutup isi dokumen HTML. Yang merupakan tag-tag dasar dalam HTML adalah:
a.      <HTML></HTML>
Tag <HTML> dan </HTML> digunakan untuk menandai awal dan akhir dari suatu file HTML.
b.      <TITLE></TITLE>
Tulisan yang berada diantara tag <TITLE> dan </TITLE> akan ditampilkan oleh browser pada bagian title yang mana merupakan title dari jendela browser.
c.       <HEAD></HEAD>
Berisi keterangan informasi, seperti title dan jenis dokumen, ditulis diantara HEAD tags.
d.      <BODY></BODY>
Bagian tag BODY menandai awal dan akhir dari badan dokumen HTML. Tag ini memiliki sejumlah attribut dapat ditentukan.
Contoh :
<HTML>
<HEAD>
<TITLE>TUGAS UTS PEMROGRAMAN INTERNET 1-ISTIKHOMAH </TITLE>
</HEAD>
<BODY TEXT="#000000" BGCOLOR="#FFFFFF">
SELAMAT DATANG KAWAN !!!
</BODY>
</HTML>
3.      Atribut
Atribut mendefinisikan properti dari suatu elemen/tag dari HTML, yang terdiri atas nama dan nilai. 
HTML tidak hanya menyediakan teks saja dalam dokumennya, tetapi juga mampu menampilkan objek-objek multimedia seperti gambar, suara, video, dan bahkan telah merambah lebih jauh dengan adanya VRML serta applet-applet Java. Untuk informasi yang berupa teks, HTML telah menyediakan bermacam-macam elemen, seperti :
a)  Paragraph, untuk membuat suatu paragraph
b)  Blockquote, untuk membuat suatu kutipan teks
c)  preformatted text, untuk menampilkan teks seperti yang dituliskan
d)  divider, digunakan untuk mengelompokkan suatu teks tertentu

a.       Paragraph <p>
Elemen <P>…</P> digunakan untuk menandai sekumpulan teks sebagai suatu  paragraph. Tag <P> untuk awal paragraf dan tag </P> digunakan untuk mengakhiri  paragraf. Tag  paragraf memiliki atribut yang dapat dipakai sebagai tambahan untuk pemformatan paragraph.

b.      Blockquote
Tag <BLOCKQUOTE> digunakan untuk menuliskan suatu kutipan teks.  Browser  biasanya menampilkan kutipan teks dengan mengidentifikasikan teks tersebut atau dengan mengabaikan spasi dalam teks seperti tag paragraph. Kutipan teks dinyatakan dengan indentasi yang menjorok ke dalam dan berbeda dalam satu paragraf. 
  
c.       Preformatted text
Pada tag paragraf, penekanan tombol ENTER, Tab, Spasi tidak memberikan pengaruh  pada web page yang dibuat. Jika  akan menambahkan spasi dan enter pada teks dalam web page dengan menggunakan tag <PRE>…..</PRE>. Sehingga teks  yang berada di dalam tag pre akan mengikuti sesuai dengan pengetikan yang dilakukan.

d.      Divider dan Center
Elemen DIV digunakan untuk membagi-bagi dokumen HTML dalam suatu hierarki yang terstruktur. Teks yang dikelilingi oleh tag <DIV>……..</DIV> akan diformat menurut nilai atribut ALIGN yang ditentukan di dalamnya. Nilai atribut ALIGN yaitu, Left, Center dan Right. Penggunaan DIV dengan Align=”center” dapat diganti dengan tag <CENTER>….<CENTER>. 

Nah, sebagai bonus, ini nih cara efektif untuk membuat halaman HTML.
Pembuatan Halaman HTML
Dalam membuat halaman HTML, yang harus dilakukan diantaranya:
a.       Memilih text editor
Saat ini ada banyak sekali program aplikasi yang dapat digunakan untuk membuat halaman web. Text Editor adalah program  pengolah kata yang paling dasar tanpa ada fitur-fitur yang ‘aneh-aneh’ seperti pengolah kata pada umumnya seperti Ms Word. Salah satu kelebihan dari  text editor adalah suatu file yang dibuat dengan program ini disimpan hampir tanpa ada kode  rahasia yang tak terlihat seperti halnya dokumen Ms Word atau pengolah kata yang lainnya, yang akan secara drastis akan menimbulkan efek pada dokumen saat akan ditampilkan di web browser. Dengan kata lain akan lebih mudah untuk membangun suatu halaman web dengan menggunakan text editor biasa dari pada suatu pengolah kata.
HTML editor mempermudah pengguna untuk membuat halaman web dengan cepat dan mudah  hanya dengan menekan beberapa buah tombol yang disediakan dan kemudian program aplikasi ini akan menghasilkan “source code” HTML daripada memasukan semua  kode-kode HTML dengan mengetikkannya satu persatu. HTML editor merupakan suatu alat yang tepat bagi seorang web developer; meskipun seharusnya juga sangat penting untuk  mempelajari  dan mengetahui bahasa HTML sehingga  dapat mengedit kode-kode yang ada dan membetulkan dokumen jika tidak dapat dilakukan oleh HTML editor. Ms Word dan Corel WordPerfect versi yang ada saat ini juga telah mempunyai kemampuan untuk membuat halaman  web.  Contoh lain adalah  Microsoft FrontPage,  dan Adobe Dreamweaver. Namun dalam makalah ini, penulis menggunakan  text editor standar  dari Ms. Windows, yaitu NotePad. Karena merupakan dasar dari segala bentuk HTML dan  akan lebih paham mengenai cara kerja dan berbagai perintah yang biasa dipakai pada bahasa HTML.
b.      Memulai Notepad
NotePad adalah text editor standar yang ada baik di versi 16 bit maupun 32 bit sistem operasi Ms  Windows. Untuk memulai NotePad di Ms Windows langkah-langkahnya adalah  sebagai berikut :
·          Click pada tombol “Start” yang ada pada task bar Windows.
·          Click pada “Program” dan lalu click pada menu direktori berlabel “Accessories”.
·          Kemudian click pada shortcut “NotePad’’.
Agar dokumen tampak lebih menarik, dapat diatur tampilannya dengan beberapa properti. Properti dokumen diatur melalui atribut-atribut yang terdapat dalam elemen <body>. Sebagai contoh adalah pengaturan warna latar belakang halaman, warna teks, warna link dan lain-lain.
1)      Kode Warna
Dalam pengaturan warna menggunakan kode RGB yang mana ditampilkan dalam nilai heksadesimal. Setiap bagian dua digit kode menunjukkan banyaknya intensitas  dari kombinasi warna merah, hijau dan biru. Sebagai contoh 00 pada dua digit pertama berarti tidak ada warna merah dalam kombinasi warna. Berikut ini adalah contoh kode warna.

Color 
Hexadecimal 
Color 
Hexadecimal
White 
#FFFFFF 
Black 
#000000
Red
#FF0000
  Green
#00FF00
Blue
 #0000FF 
Magenta 
#FF00FF
Cyan 
#00FFFF
Yellow 
#FFFF00      
Aquamarine 
#70DB93 
Chocolate
#5C3317
Violet
#9F5F9F
Brass
#B5A642
Copper
#B87333
Pink
#FF6EC7

2)      Atribut Elemen <body>
BACKGROUND = Lokasi dan nama file (latar belakang image dokumen)
BGCOLOR          = Warna (warna latar belakang dokumen, default putih)
TEXT                = Warna (warna teks dokumen, default hitam)
LINK                = Warna (warna link dokumen, default biru)
VLINK             = Warna (warna visited link dokumen, default ungu)
ALINK             = Warna (warna aktif link dokumen, default merah)

3)      Elemen Heading <h1> ... <h6>
Tag heading berfungsi untuk memformat heading (judul dan sub-judul) dari suatu halaman web. Heading ini akan memperbesar ukuran huruf untuk setiap jenis heading. Ada tujuh buah heading yang dikenal di HTML, yaitu dari <h1> sampai <h6>.

4)      Elemen Paragrap <p>
Tag paragrap berfungsi layaknya  untuk pengaturan antar paragraf dalam halaman web. Dalam elemen paragrap terdapat atribut align yang berfungsi sebagai pengaturan perataan paragraph.

ALIGN = [ left | center | right ]

5)      Elemen Break <br>
Elemen Break berfungsi untuk memberikan baris baru suatu paragrap dalam halaman web. Elemen break tidak memerlukan elemen penutup break.

6)      Elemen Horisontal Rules <hr>
Elemen <hr> berfungsi untuk  menampilkan garis horisontal di dalam halaman web. Elemen <hr> tidak memerlukan elemen penutup </hr>.
Atribut Elemen Horisontal Rules :
·         ALIGN  = [ left | center | right ] (perataan horizontal, default center)
·         SIZE      = Pixels (tinggi garis, default 2)
·         WIDTH = Length (lebar garis, pixel or persen, default 100%)
·         NOSHADE (garis solid)

7)      Elemen Pemformatan Karakter <font>
Font pada halaman HTML dapat diformat sesuai dengan desain yang ditentukan, baik ukuran, jenis maupun warna.
Atribut Elemen Font :
SIZE      = Angka (ukuran huruf, default 3)
COLOR = Warna (warna font, default hitam)
FACE     = Angka (jenis font, default Times New Roman)

8)      Elemen Ragam Karakter
<b>bold</b> menghasilkan huruf tebal
<i>italic</i> menghasilkan huruf miring
<u>underline</u> menghasilkan huruf bergaris bawah

9)      Elemen List
Properti <li> digunakan untuk menampilkan informasi dalam bentuk daftar (list). Ada dua jenis daftar yang dikenal di HTML, yaitu list dalam format bullet (unordered list <ul>) dan dalam bentuk nomor (ordered list <ol>).
Atribut Elemen Ordered list    TYPE = [ 1 | a | A | i | I ] (tipe penomoran, default
1)
Atribut Elemen Unordered list     TYPE = [ disc | square | circle ] (tipe bullet, default disc).

10)  Elemen Image <img>
Untuk  menampilkan gambar dalam halaman HTML, format filenya berupa JPG atau GIF. Untuk menampilkanya digunakan tag IMG.
Atribut Elemen Image :
SRC           = URI (lokasi image)
ALT    = Text (text alternatif )
WIDTH  = Length (lebar image)
HEIGHT  = Length (tinggi image)
ALIGN  = [ atas | tengah | bawah | kiri | kanan ] (perataan image)
BORDE  =  Length (lebar batas link)
  
c.       Menyimpan File Script
Setelah  membuat script-script HTML, kemudian langkah menyimpannya adalah sebagai berikut :
·          Click tombol “File” pada taskbar notepad, kemudian pilih “Save”.
·          Pada field isian nama file (filename) , ketikkan namafile.html
·          Coba jalankan browser dengan membuka “Internet Explorer”.
·          Click pada menu "File .."
·          Pilih pada option "Open .." yang ada pada menu "File .."
·          Pada dialog box "Open" klik pada tombol "Browse .." dan cari file yang ingin ditampilkan.
·          Selanjutnya pilih tombol "Ok" jika file telah dipilih.

d.      Mengedit file script
Ketika file tersebut telah ditambahkan atau diedit dan telah disimpan, maka cara menampilkan file tersebut adalah :
·          simpan hasil perubahan file html anda
·          pindah ke aplikasi web browser

·          Pada Ms Internet Explorer tekan tombol "REFRESH" Web Browser akan me-load dokumen yang sama tapi dengan revisi baru tadi. Proses ini adalah siklus Edit, Save, dan View. 


Yap, itu dia gan tentang struktur dari HTML. Nah, selain ngobrolin HTML sampe berbusa besok bahas tentang apa ya? Bisa request ya gan

No comments: