HTML Tags - Index of
advertisement
PEMROGAMAN WEB
HTML Introduction
What is HTML?
HTML adalah bahasa untuk mendeskripsikan
web pages.
HTML singkatan dari Hyper Text Markup
Language
HTML adalah markup language
–
–
A markup language is a set of markup tags
HTML uses markup tags to describe web pages
HTML Tags
HTML markup tags biasa disebut HTML tags
HTML tags adalah kata kunci yang dikelilingi oleh
angle brackets <html>
HTML tags biasanya berpsangan seperti <b> dan
</b>
Tag pertama disebut start tag, dan tag kedua
disebut end tag
Start dan end tags juga disebut opening tags dan
closing tags.
HTML Element
HTML element dimulai dengan start tag
HTML element diakhiri dengan end tag
The element adalah semua isi yang berada diantara
start dan end tag
Beberapa HTML elements hanya content kosong
Beberapa HTML elements tidak memiliki end tag
Catatan: start tag dapat memiliki informasi tambahan
(attributes)
Atribut Tag
Tag dapat memiliki atribut
Memberikan informasi tambahan
Contoh
- align, bgcolor, text, link, id, class, name
Nested HTML
Kebanyakan HTML elements dapat di “nested”
(dapat berisi HTML element yang lain).
Kebanyakan HTML documents dibuat dengan
nested HTML elements
Empty HTML Elements
HTML elements tanpa isi disebut empty elements.
Empty elements tidak memiliki end tag.
<br /> adalah empty element tanpa closing tag.
Adding a slash to the start tag, like <br />, is the
proper way of closing empty elements, accepted by
HTML, XHTML and XML
HTML Documents - Web Pages
HTML documents mendeskripsikan web pages
HTML documents berisi HTML tags and plain text
HTML documents disebut juga halaman web
Tujuan web browsers (seperti Internet Explorer)
untuk membaca HTML dan menampilkannya
manjadi halaman web.
–
Browser tidak menampilkan HTML tags, tapi
menggunakannya untuk mengintpretasikan isi dari halaman
What Do You Need?
HTML Editor
–
–
Notepad
FrontPage, etc
Browser
–
–
–
Mozilla Firefox
Opera
IE
HTM or HTML Extension?
Untuk menyimpan file html dapat
menggunakan .htm atau .html extension.
.htm digunakan karena software versi lama
tidak menerima extensi lebih dari 3 huruf
HTML Headings
Headings ditulis dengan <h1> to <h6> tags.
–
–
<h1> heading terbesar.
<h6> heading terkecil.
Note: Browsers automatically adds an empty line
before and after headings
Headings
HTML Paragraphs
Paragraf ditulis dengan <p> tag.
Kebanyakan browsers akan menampilkan HTML
dengan benar walaupun end tag tak ditulis.
Contoh dibawah ini akan bekerja dengan baik di
kebanyakan browsers, tetapi jangan dibiasakan.
Forgetting the end tag can produce unexpected
results or errors.
Note: Future version of HTML will not allow you to
skip end tags
Paragraphs
<p>This is a paragraph</p>
<p>This is another paragraph</p>
<p>This is a paragraph
<p>This is another paragraph
Problem with Paragraph
Mengabaikan kode spasi lebih dari 1
Bagaimana menampilkan kode sintax like
if($i % 2 == 0)
{
echo “even”
}
HTML Line Breaks
Gunakan <br /> tag jika ingin membuat baris
baru (a new line) tanpa membuat paragraf
baru
<br /> tag adalah empty tag. Tidak memiliki
end tag seperti </br>.
Walaupun <br> dapat bekerja di semua
browser, tulislah <br /> agar kode bertahan
di versi selanjutnya
Line Breaks
My favorite sports are : <br />
Soccer <br />
Baseball <br />
Basketball
<p>This is<br />a para<br />graph with line
breaks</p>
Blockquote
The <blockquote> tag specifies a section that
is quoted from another source.
Browsers usually display indent
<blockquote> elements.
Blockquote
<blockquote
cite="http://www.worldwildlife.org/who/index.ht
ml">
For 50 years, WWF has been protecting the
future of nature. The world's leading
conservation organization</blockquote>
HTML Formatting Tags
HTML menggunakan tag <b> dan <i> untuk
formatting output, seperti bold atau italic text.
HTML tag ini disebut formatting tags
Output examples :
–
–
–
This text is bold
This text is italic
This is subscript and superscript
Text Formatting Tags
HTML Fonts
Dengan tag <font> dapat diatur jenis dan
ukuran font yang ditampilkan
The <font> Tag Should NOT be Used
–
The World Wide Web Consortium (W3C) has
removed the <font> tag from its
recommendations.
Untuk versi selanjutnya HTML, CSS akan
digunakan untuk pengaturan dan formatting
di halaman web
Fonts
<font face="Verdana">I'm Verdana</font>
<font size=“6">Using size=6</font>
<font color="yellow">My color is yellow</font>
Character Entity
Berberapa karakter seperti “<“ memiliki
makna khusus bila di HTML, sehingga tak
dapat digunakan langsung
Maka diperlukan karakter entity
Entity Character Table
Tips Menulis Tag
Gunakan huruf kecil semua (sesuai dengan
rekomendasi W3C
Selalu isi nilai atribut yang diisikan
Jika menggunakan nested tags tulis seperti
ini
<itu><ini>tulisan</ini></itu>
Jangan
<itu><ini>tulisan</itu></ini>
Tag Komentar
Adakalanya diperlukan penulisan untuk
menjelaskan suatu kode.
Komentar adalah bagian yang dari kode
yang tidak dieksekusi.
Tag Komentar
Tag Horizontal Line
<hr> elemen digunakan untuk memisahkan
konten (atau mendefinisikan perubahan)
dalam sebuah halaman HTML.
Tag Horizontal Line
Tag List
<ol> tag digunakan untuk ordered list.
ordered list dapat berupa angka atau alfabet
Gunakan <li> tag untuk menuliskan isi dari
list.
Tag List
Tag List
<ul> tag digunakan untuk menuliskan
unordered (bulleted) list.
Gunakan <li> tag untuk menuliskan isi dari
list.
Tag List
Tag Image
<Img> tag mendefinisikan sebuah gambar di
halaman HTML.
<Img> tag memiliki dua atribut yang
diperlukan: src dan alt.
Tag Image
Catatan: Gambar tidak secara teknis
dimasukkan ke dalam halaman HTML,
gambar terkait (link) dengan halaman HTML.
<Img> tag menciptakan ruang untuk gambar
direferensikan.
Tip: Untuk menghubungkan gambar ke
dokumen lain, sarang (nested) <img> tag di
dalam tag <a>.
Tag Image
Tag Table
<Table> mendefinisikan sebuah tabel HTML.
Tabel HTML terdiri dari <table> elemen dan
satu atau lebih <tr>, <th>, dan <td> elemen.
<Tr> elemen mendefinisikan baris tabel,
yang <th> elemen mendefinisikan header
tabel, dan <td> elemen mendefinisikan sel
tabel.
