1. Struktur HTML Document
Document
HTML bisa di bagi mejadi tiga bagian utama:
·
HTML
Setiap document HTML harus di awali dan
di tutup dengan tag HTML
<HTML>
</HTML>
·
HEAD
Bagian
header dari document HTML di apit oleh tag <HEAD></HEAD> di dalam
bagian ini
biasanya
dimuat tag TITLE yang menampilkan judul dari halaman pada titlenya browser.
Header juga
memuat tag META yang biasanya di gunakan untuk menentukan informasi
tertentu
mengenai document HTML, anda bisa menentukan author name, keywords, dan
lainyan
pada tag META.
·
BODY
Document
body di gunakan untuk menampilkan text, image link dan semua yang akan di
tampilkan pada web page.
2. Basic HTML Element
·
Block
Level Element
Block
level element yang sering di gunakan : Heading (H1 sampai H6)
·
Paragraf
(P) List Item(LI)
List
item di gunakan untuk mengelompokkan data baik berurutan (ordered list) maupun
yang
tidak
berurutan (unordered list).
Ada dua
macam list yang bisa anda tambahkan ke document HTML:
1. Unordered List (Bullet) :
2. Ordered List (Numbering)
Contoh :
§ Tag Attribute Value Description
Tag
|
Attribute
|
Value
|
Description
|
<UL>
|
TYPE
|
SQUARE
DISC
CIRCLE
|
Bullet Kotak
Bullet titik
Bullet lingkaran
|
Tag
|
Attribute
|
Value
|
Description
|
<OL>
|
TYPE
|
Li
Aa
|
Upper
Roman Lower Roman
Upercase
Lowercase
|
<OL>
|
START
|
n
|
Begin
Number
|
§ Definition List
Definition
List terdiri diapit oleh tag <DL> … </DL> dan <DT> tag
menentukan definition
term serta
<DD> tag menentukan definition itu sendiri.
§ Horizontal Rules(HR)
Horizontal
Rule tag digunakan untuk menggambar garis horizontal dalam document HTML.
Attribute
|
Description
|
Position
|
menetukan
posisi dari HR, dengan value : canter |
right
| left.
|
Width
|
Untuk
menentukan panjang HR default 100%
|
Size
|
Untuk
menentukan tebal dari HR dalam pixel
|
Noshad
|
Efek
bayangan.
|
3. Pemformatan Page Break
Tag
<BR> di gunakan untuk memulai baris baru pada document HTML, tag ini
fungsinya mirip dengan carriage return.
·
Font
Dengan
tag <FONT> anda bisa menentukan format tampilan font dalam document HTML
seperti
color, size, style dan lainya.
Contoh:
Attribute
|
Description
|
Color
|
Untuk
menentukan warna font, anda bisa
menggunakan
nama font atau hexadecimal
(#000000
- #ffffff)
|
Size
|
Untuk
menentukan ukuran dari font 1 - 7
|
Face
|
Untuk
menentukan jenis font biasanya dalam satu list ada beberapa font dan akan di
baca mulai dari yang paling kiri.
|
§ Color
Color
merupakan attribute yang bisa anda tambahkan pada beberapa element seperti
body,
font, link
dan lainya. Color di bagi dalam tiga ketegori warna primer yaitu red, green dan
blue.
Masing-masing
color didefinisikan dalam dua digit hexadecimal number.
#RRGGBB
Hexadecimal
|
Color
|
#FF0000
|
Red
|
#00FF00
|
Green
|
#0000FF
|
Blue
|
#000000
|
Black
|
#FFFFFF
|
White
|
§ Alignment
Align
attribute digunakan untuk menentukan perataan object dalam document HTML baik
berupa
text, object, image, paragraph, division dan lain-lain.
Value
|
Description
|
Left
|
Rata kiri
|
Right
|
Rata kanan
|
Center
|
Rata tengah
|
Justify
|
Rata kanan kiri
|
§ Format text
Physical Formatting
Tag
|
Description
|
<B> ... </B>
|
Bold text
|
<I> ... </I>
|
Italic text
|
<U> ... </U>
|
Underline text
|
<BIG> ... </BIG>
|
Untuk ukuran yang lebih besar
|
<SMALL> ...
</SMALL>
|
Untuk ukuran yang lebih kecil
|
<STRIKE> ...
</STRIKE>
|
Untuk memberi garis di tengah
text
|
<SUP> ... </SUP>
|
Superscript
text
|
<SUB> ... </SUB>
|
Subscript
text
|
<CENTER> ...
</CENTER>
|
Center
document
|
Logical Formatting
Tag
|
Description
|
<EM> ... </EM>
|
Text miring / <i>
|
<strong> ... </strong>
|
Text tebal / <b>
|
<del> ... </del>
|
Mencoret text / <strike>
|
<INS> ... </INS>
|
Underline text / <u>
|
·
Preformatted text
Tag PRE di gunakan untuk menampilkan text sesuai dengan format
aslinya.
·
Hyperlink
Link Address
§
Absolute Address - merupakan full internet
address (URL) yang meliputi protocol, network
Location,
path dan nama file.
Contoh:
http
://www.yahoo.com/index.html
§
Relatif Address - URL yang tidak
menyebutkan protocol dan network locationya (hanya path
dan
nama filenya).
§ Anchor
Anchor
tag <A> untuk menentukan hyperlink dalam document HTML. HREF property
digunakan untuk menentukan
tujuan dari hyperlink tersebut.Sumber : buku kelas 10 SMK
sumber : gambar