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 : nama tag
Attribute : atribut dari tag
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 :
l HTML
2 HEAD
3 BODY
4 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.
< html >
< head >
< title > Welcome to HTML < /title >
< /head >
< body bgcolor=”lightblue” >
< p>Document HTML yang Pertama
< /body >
< /html >
III. Basic HTML Element
HEADING
PARAGRAPH
LIST
1. HEADING
Block level element yang sering digunakan Heading (H1 sampai H6)
Contoh:
< html >
< head >
< title > Heading Elements < /title >
< /head >
< body >
< h1 > Heading one < /h1 >
< h2 > Heading two < /h2 >
< h3 > Heading three < /h3 >
< h4 > Heading four < /h4 >
< h5 > Heading five < /h5 >
< /body >
< /html >
2. PARAGRAP (P)
< html >
< head >
< title > Formating Paragraf < /title >
< /head >
< body >
< h3 > HTML < /h3 >
< p >
bahasa HTML sangat mudah dipelajari karena merupakan bahasa bertanda sehingga hanya sedikit menuntut logika
< /p >
< h2 > PHP < /h2 >
< p >
script PHP menolong HTML ketika melakukan pengolahan data karena HTML tidak dapat melakukannya
< /p >
< /body >
< /html >
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) :
< html >
< head >
< title > Unordered List < /title >
< /head >
< body >
< P > Shedule for HTML Course < /P >
< ul >
< li > Sunday < /li >
< li > Monday < /li >
< li > Tuesday < /li >
< li > Wednesday < /li >
< /ul >
< /body >
< /html >
2. Ordered List (Numbering)
Contoh :
< head >
< title > Ordered List < /title >
< /head >
< body >
< P > Shedule for HTML Course < /P >
< ol start=”1″ type=”I” >
< li > Sunday < /li >
< ol type=”a” >
< li > Introduction to HTML < /li >
< li > Creating List < /li >
< /ol >
< li > Monday < /li >
< ol type=”A” >
< li > Creating table < /li >
< li > Inserting Image < /li >
< /ol >
< li > Tuesday < /li >
< ol type=”I” >
< li > Creating Link < /li >
< li > Preparing Website < /li >
< /ol >
< li > Wednesday < /li >
< /ol >
< /body >
< /html >
3. Definition List
Definition List terdiri dari tag
- …
Contoh:
< html >
< head >
< title > Definition List < /title >
< /head >
< body >
< p > < b > List of Internet Resource < /b > < /p >
< dl >
< dt > HTML
< dd > HyperText Markup Langguage is not Language Programming < /dd >
< /dt >
< dt > HTTP
< dd > HyperText Transfer Protocol is TCP/IP Protocol < /dd >
< /dt >
< dt>Internet
< dd > A network of network < /dd >
< /dt >
< dt >TCP/IP
< dd > Internet protocol < /dd >
< /dt >
< /dl >
< /body >
< /html >
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
di gunakan untuk memulai baris baru pada document HTML, tag ini fungsinya mirip dengan carriage return.
Contoh :
< head >
< title > Break Line < /title >
< /head >
< body >
< h3 > Buliding Dynamic Web Aplication < /h3 >
< p >
If you’re building a dynamic web application, < br >
start by setting up an application server and < br >
connecting to a database.
< /p >
< /body >
< /html >
FONT
Dengan tag < FONT > anda bisa menentukan format tampilan font dalam document HTML seperti color, size, style dan lainnya.
< html >
< head >
< title > Formating Font < /title >
< /head >
< body >
< font color=”#9966FF” size=”5″ >
Setting Up Web Server
< /font >
< p >
< font face=”Courier New, Courier, mono” >
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.
< /font >
< /p >
< /body >
< /html >
Format Text
Tag untuk memformat teks antara lain :
< B > … < /B > : bold text
< I > … < /I > : italic text
< U > … < /U > : underline Text
< BIG > … < /BIG > : untuk ukuran yang lebih besar dari normal
< SMALL > … < /SMALL > : Untuk ukuran yang lebih kecil dari normal
< STRIKE > … < /STRIKE > : Untuk memberi garis di tengah text
< SUP > … < /SUP > : Superscript text
< SUB > … < /SUB > : Subscript text
< CENTER > … < /CENTER > : Center document
< EM > … < /EM > : Untuk teks miring
< STRONG > … < /STRONG > : 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.
< A HREF=”URL” > Hypertext < /A >
< A HREF=”protocol://host.domain:port/path/filename” > Hyper text < /A >
Link ke Document Lain
Misalkan ada dua document html link1.htm dan link2.htm untuk membuat link dari link1.htm ke link2.htm :
< html >
< head >
< title > Using Link < /title >
< /head >
< body >
< center > < font size=”5″ color=hotpink > Creating Link < /font > < /center >
< br >
< a href=”link2.htm” > Click here to view document 2 < /a >
< /body >
< /html >
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:
< FRAMESET BORDER=# {[ROWS|COLS]}={#,[#[,...]]} >
< FRAME SRC=”url” NAME=”nama frame” >
< /FRAMESET >
Target Frame
Nama frame predefined: _self, _top, _parent, _blank, sering digunakan untuk menunjukkan
target penampilan dari suatu link.
< HTML >
< FRAMESET COLS=”25%,50%,25%” >
< FRAME SRC=”tabel6.html” >
< FRAME SRC=”form1.html” >
< FRAME SRC=”list3.html” >
< /FRAMESET >
< /HTML >
VI. IMAGE
< img src=“path file”\>
Tidak ada komentar:
Posting Komentar