• Internet
  • Akuntansi
  • About Me
gravatar

HTML

HTML adalah, HyperText Markup Language – bahasa standar yang digunakan browser Internet untuk membuat halaman dan dokumen yang dipajang pada Web. Selain memungkinkan komputer berkomunikasi, HTML juga menyediakan link di antara file-file yang ada di komputer yang berbeda dan dipisahkan oleh jarak yang jauh.
Beberapa komponen dasar pada HTML yaitu :
I.      Basic Tag HTML
II.     Struktur Document HTML
III.   Basic HTML Element
IV.   Pemformatan page
V.    FRAME
VI.  IMAGE

I  Basic Tag HTML

TagHTML

Command HTML biasanya disebut TAG. TAG digunakan untuk menentukan tampilan dari document HTML. Hampir semua tag berpasangan.

<BEGIN TAG> </END TAG>

Contoh : Setiap document HTML diawali dan diakhiri dengan tag HTML.

<HTML>

. . .

</HTML>

¡  Tag tidak case sensitive, jadi anda bisa gunakan <HTML> atau <html> keduanya menghasilkan output yang sama.

¡  Bentuk dari tag HTML sebagai berikut :

<ELEMENT ATTRIBUTE = �value�>

l  Element : nama tag

l  Attribute : atribut dari tag

l  Value : nilai dari atribut.

Contoh :

<BODY BGCOLOR=�blue�>

BODY merupakan element, BGCOLOR merupakan atribut yang memiliki nilai blue.


II.         Struktur Document HTML
Document HTML bisa dibagi mejadi tiga bagian utama :
HTML
HEAD
BODY


1.      HTML
Setiap document HTML harus di awali dan di tutup dengan tag HTML  < HTML > < /HTML >
tag HTML memberi tahu browser bahwa didalam kedua tag tersebut adalah document HTML.


2.      HEADER
Bagian header dari document HTML diapit oleh tag < HEAD >< /HEAD >.
Didalam bagian ini biasanya dimuat tag TITLE yang menampilkan judul dari halaman pada title browser. Selain itu Bookmark juga menggunakan tag TITLE untuk memberi mark suatu web site. Untuk keperluan pencarian (searching) biasanya title digunakan sebagai keyword.
Header juga memuat tag META yang biasanya digunakan untuk menentukan informasi tertentu mengenai document HTML, anda bisa menentukan author name, keywords, dan lainyan pada tag META.
Contoh :
< META name=”Author” contents=”Bocah Gunung” >
Author dari document tersebut adalah “Bocah Gunung “

3.      BODY
Elemen body digunakan untuk menampilkan text, image, link, dan semua yang
akan di tampilkan pada web page.

&lt;html&gt;

&lt;head&gt;

&lt;title&gt;Welcome to HTML&lt;/title&gt;

&lt;/head&gt;

&lt;body bgcolor=&acirc;��lightblue&acirc;��&gt;

&lt;p&gt;Document HTML yang Pertama&lt;/p&gt;

&lt;/body&gt;

&lt;/html&gt;


III.      Basic HTML Element

  1. HEADING
  2. PARAGRAPH
  3. LIST
1.      HEADING
Block level element yang sering digunakan Heading (H1 sampai H6)
Contoh:
&lt;html&gt;

&lt;head&gt;

&lt;title&gt;Heading Elements&lt;/title&gt;

&lt;/head&gt;

&lt;body&gt;

&lt;h1&gt;Heading one&lt;/h1&gt;

&lt;h2&gt;Heading two&lt;/h2&gt;

&lt;h3&gt;Heading three&lt;/h3&gt;

&lt;h4&gt;Heading four&lt;/h4&gt;

&lt;h5&gt;Heading five&lt;/h5&gt;

&lt;/body&gt;

&lt;/html&gt;



2.      PARAGRAP (P)
&lt;html&gt;

&lt;head&gt;

&lt;title&gt;Formating Paragraf&lt;/title&gt;

&lt;/head&gt;

&lt;body&gt;

&lt;h3&gt;HTML&lt;/h3&gt;

&lt;p&gt;

bahasa HTML sangat mudah dipelajari karena merupakan

bahasa bertanda sehingga hanya sedikit menuntut logika

&lt;/p&gt;

&lt;h2&gt;PHP&lt;/h2&gt;

&lt;p&gt;

script PHP menolong HTML ketika melakukan pengolahan

data karena HTML tidak dapat melakukannya

&lt;/p&gt;

&lt;/body&gt;

&lt;/html&gt;


3.      LIST
List item digunakan untuk mengelompokkan data baik berurutan (ordered list)
maupun yang tidak berurutan (unordered list).
Ada tiga macam list yang bisa anda tambahkan ke document HTML:

1. Unordered List (Bullet) :
&lt;html&gt;

&lt;head&gt;

&lt;title&gt;Unordered List&lt;/title&gt;

&lt;/head&gt;

&lt;body&gt;

&lt;P&gt;Shedule for HTML Course&lt;/P&gt;

&lt;ul&gt;

&lt;li&gt;Sunday&lt;/li&gt;

&lt;li&gt;Monday&lt;/li&gt;

&lt;li&gt;Tuesday&lt;/li&gt;

&lt;li&gt;Wednesday&lt;/li&gt;

&lt;/ul&gt;

&lt;/body&gt;

&lt;/html&gt;




2. Ordered List (Numbering)
Contoh :
 &lt;head&gt;

&lt;title&gt;Ordered List&lt;/title&gt;

&lt;/head&gt;

&lt;body&gt;

&lt;P&gt;Shedule for HTML Course&lt;/P&gt;

&lt;ol start=&acirc;��1&acirc;�&sup3; type=&acirc;��I&acirc;��&gt;

&lt;li&gt;Sunday&lt;/li&gt;

&lt;ol type=&acirc;��a&acirc;��&gt;

&lt;li&gt;Introduction to HTML&lt;/li&gt;

&lt;li&gt;Creating List&lt;/li&gt;

&lt;/ol&gt;

&lt;li&gt;Monday&lt;/li&gt;

&lt;ol type=&acirc;��A&acirc;��&gt;

&lt;li&gt;Creating table&lt;/li&gt;

&lt;li&gt;Inserting Image&lt;/li&gt;

&lt;/ol&gt;

&lt;li&gt;Tuesday&lt;/li&gt;

&lt;ol type=&acirc;��I&acirc;��&gt;

&lt;li&gt;Creating Link&lt;/li&gt;

&lt;li&gt;Preparing Website&lt;/li&gt;

&lt;/ol&gt;

&lt;li&gt;Wednesday&lt;/li&gt;

&lt;/ol&gt;

&lt;/body&gt;

&lt;/html&gt;



3. Definition List
Definition List terdiri dari tag < DL > … < /DL >. Tag < DT > digunakan untuk menentukan definition term serta tag < DD > menentukan definition itu sendiri.
Contoh:
&lt;html&gt;

&lt;head&gt;

&lt;title&gt;Definition List&lt;/title&gt;

&lt;/head&gt;

&lt;body&gt;

&lt;p&gt;&lt;b&gt;List of Internet Resource&lt;/b&gt;&lt;/p&gt;

&lt;dl&gt;

&lt;dt&gt;HTML

&lt;dd&gt;HyperText Markup Langguage is not Language

Programming&lt;/dd&gt;

&lt;/dt&gt;

&lt;dt&gt;HTTP

&lt;dd&gt;HyperText Transfer Protocol is TCP/IP

Protocol&lt;/dd&gt;

&lt;/dt&gt;

&lt;dt&gt;Internet

&lt;dd&gt;A network of network&lt;/dd&gt;

&lt;/dt&gt;

&lt;dt&gt;TCP/IP

&lt;dd&gt;Internet protocol&lt;/dd&gt;

&lt;/dt&gt;

&lt;/dl&gt;

&lt;/body&gt;

&lt;/html&gt;




Horizontal Rules (HR)
Horizontal Rule tag digunakan untuk menggambar garis horizontal dalam document HTML.
Atribut yang dimiliki :
Align : menetukan posisi dari HR, dengan
value : center | right | left.
Width : untuk menentukan panjang HR default 100%
Size : untuk menentukan tebal dari HR dalam pixel
Noshade : efek bayangan.


IV.         Pemformatan page
  • Break
Tag < BR > di gunakan untuk memulai baris baru pada document HTML, tag ini fungsinya mirip dengan carriage return.
Contoh :
 &lt;head&gt;

&lt;title&gt;Break Line&lt;/title&gt;

&lt;/head&gt;

&lt;body&gt;

&lt;h3&gt;Buliding Dynamic Web Aplication&lt;/h3&gt;

&lt;p&gt;

If you&acirc;��re building a dynamic web application, &lt;br&gt;

start by setting up an application server and &lt;br&gt;

connecting to a database.

&lt;/p&gt;

&lt;/body&gt;

&lt;/html&gt;


FONT
Dengan tag < FONT > anda bisa menentukan format tampilan font dalam document HTML seperti color, size, style dan lainnya.
 &lt;html&gt;

&lt;head&gt;

&lt;title&gt;Formating Font&lt;/title&gt;

&lt;/head&gt;

&lt;body&gt;

&lt;font color=&acirc;��#9966FF&acirc;�� size=&acirc;��5&acirc;�&sup3;&gt;

Setting Up Web Server

&lt;/font&gt;

&lt;p&gt;

&lt;font face=&acirc;��Courier New, Courier, mono&acirc;��&gt;

To run web applications, you need a web server.

A web server is software that serves files in

response

to requests from web browsers.

A web server is sometimes called an HTTP

server.

Common web servers include IIS,

Netscape Enterprise Server, iPlanet Web Server,

and Apache HTTP Server.

&lt;/font&gt;

&lt;/p&gt;

&lt;/body&gt;

&lt;/html&gt;


Format Text
Tag untuk memformat teks antara lain :
&lt;B&gt; &acirc;�&brvbar; &lt;/B&gt; : bold text

&lt;I&gt; &acirc;�&brvbar; &lt;/I&gt; : italic text

&lt;U&gt; &acirc;�&brvbar; &lt;/U&gt; : underline Text

&lt;BIG&gt; &acirc;�&brvbar; &lt;/BIG&gt; : untuk ukuran yang lebih besar dari normal

&lt;SMALL&gt; &acirc;�&brvbar; &lt;/SMALL&gt; : Untuk ukuran yang lebih kecil dari normal

&lt;STRIKE&gt; &acirc;�&brvbar; &lt;/STRIKE&gt; : Untuk memberi garis di tengah text

&lt;SUP&gt; &acirc;�&brvbar; &lt;/SUP&gt; : Superscript text

&lt;SUB&gt; &acirc;�&brvbar; &lt;/SUB&gt; : Subscript text

&lt;CENTER&gt; &acirc;�&brvbar; &lt;/CENTER&gt; : Center document

&lt;EM&gt; &acirc;�&brvbar; &lt;/EM&gt; : Untuk teks miring

&lt;STRONG&gt; &acirc;�&brvbar; &lt;/STRONG&gt; : Text tebal




Hyperlink
Ini merupakan salah satu keistimewaan yang dimiliki web. Dengan hyperlink ini berbagai halaman web yang berbeda dapat saling dihubungkan.
Link Address
Absolute Address merupakan full internet address (URL) yang meliputi protocol, network location, dan path serta nama file.
Anchor
Tag Anchor < A > untuk menentukan hyperlink dalam document HTML. Properti HREF digunakan untuk menentukan tujuan dari hyperlink tersebut.
&lt;A HREF=&acirc;��URL&acirc;��&gt; Hypertext &lt;/A&gt;

&lt;A HREF=&acirc;��protocol://host.domain:port/path/filename&acirc;��&gt;Hyper text &lt;/A&gt;


Link ke Document Lain
Misalkan ada dua document html link1.htm dan link2.htm untuk membuat link dari link1.htm ke link2.htm :
&lt;html&gt;

&lt;head&gt;

&lt;title&gt;Using Link&lt;/title&gt;

&lt;/head&gt;

&lt;body&gt;

&lt;center&gt;&lt;font size=&acirc;��5&acirc;�&sup3; color=hotpink&gt;Creating Link

&lt;/font&gt;&lt;/center&gt;

&lt;br&gt;

&lt;a href=&acirc;��link2.htm&acirc;��&gt; Click here to view document 2&lt;/a&gt;

&lt;/body&gt;

&lt;/html&gt;

V.         FRAME
Windows dalam browser yang dibagi menjadi beberapa windows disebut Frame. Model ini
sering digunakan untuk lebih memperjelas penyajian informasi, dengan menu sajian selalu ditampilkan.
Sintaks:
&lt;FRAMESET BORDER=# {[ROWS|COLS]}={#,[#[,...]]}&gt;

&lt;FRAME SRC=&acirc;��url&acirc;�� NAME=&acirc;��nama frame&acirc;��&gt;

&lt;/FRAMESET&gt;



Nama frame predefined: _self, _top, _parent, _blank, sering digunakan untuk menunjukkan
target penampilan dari suatu link.
 

&lt;HTML&gt;

&lt;FRAMESET COLS=&acirc;��25%,50%,25%&acirc;��&gt;

&lt;FRAME SRC=&acirc;��tabel6.html&acirc;��&gt;

&lt;FRAME SRC=&acirc;��form1.html&acirc;��&gt;

&lt;FRAME SRC=&acirc;��list3.html&acirc;��&gt;

&lt;/FRAMESET&gt;

&lt;/HTML&gt;


VI.         IMAGE
&lt;img src=&acirc;��path file&acirc;��\&gt;