Transcript penganar web design (html)

PENGANTAR
PEMROGRAMAN WEB
Swasta Priambada
PENGANTAR HTML
Teori Dasar HTML






Untuk membangun sebuah web page, dibutuhkan sebuah bahasa
pemrograman yang lebih dikenal dengan web scripting.
Berdasarkan letak proses interpreter, maka web scripting dibagi
menjadi 2, yaitu yang bersifat client side dan server side.
Client side dilakukan oleh web browser seperti Internet Explorer,
Firefox, Netscape dan Opera.
Contoh bahasa client side: HTML, CSS, Javascript, VBscript, XML.
Server side dilakukan oleh web server seperti PWS (Personal Web
Server untuk sistem operasi Windows 98), IIS (untuk Sistem Operasi
Windows 2000/Windows XP), Apache, Tomcat, Xitami, ZOPE.
Untuk contoh bahasa server side: ASP (.Net), PHP, JSP, CFM, CGI/PL
Teori Dasar HTML




Web scripting yang bersifat client side akan menghasilkan web page
yang statis, artinya lebih menekankan pada desain format tampilan
informasi dan informasi yang disajikan tidak dapat diupdate seketika,
karena tidak dapat dilakukan request interaktif dari pengguna, dan
proses tidak terjadi di server sehingga tidak akan menghasilkan output
apapun.
Sehingga sangatlah tidak mungkin untuk menciptakan aplikasi web
yang bersifat dinamis dengan web scripting yang bersifat client side,
jadi harus dikombinasikan dengan web scripting yang bersifat server
side.
Teori Dasar HTML





HTML (Hypertext Markup Language) adalah bahasa dasar untuk web
scripting bersifat client side yang memungkinkan untuk menampilkan
informasi dalam bentuk teks, grafik, multimedia, serta untuk
menghubungkan antartampilan web page (hyperlink)
Tidak diperlukan suatu program editor khusus untuk menggunakan
kode-kode perintah HTML.
Dapat dipergunakan Notepad, Edit Plus, atau editor lain yang berbasis
GUI (Graphical User Interface) seperti Microsoft Frontpage,
Macromedia Dreamweaver, Adobe GoLive.
Dengan program ini, kita tidak perlu mengetik kode HTML-nya, semua
perintah diwujudkan secara icon base.
Tetapi kemampuan penguasaan terhadap kode-kode HTML sangatlah
diperlukan, sehingga disarankan untuk menguasai kode perintah HTML
menggunakan editor teks (contoh Notepad)
Aturan Penulisan HTML (1)

Memiliki struktur minimal dari dokumen HTML (head
dan body)
Aturan Penulisan HTML (2)





Bentuk tulisan di atas disebut “tag”.
Tag memiliki pembuka <tag>, tetapi tidak semua memiliki
penutup </tag>.
Tag memberi instruksi interpreter kepada browser (misalnya
Internet Explorer).
Contoh pada dokumen di atas, tag yang pertama
memberitahukan kepada browser bahwa dokumen HTML dengan
tag pembuka <HTML> pada awal dokumen, dan tag penutup
</HTML> pada akhir dokumen.
Dalam dokumen HTML, penggunaan tag-tag penutup HTML
disesuaikan dengan urutan penggunaan tag tersebut.
Aturan Penulisan HTML (3)





Di dalam sebuah tag HTML, terdapat atribut tag.
Atribut yang terkandung dalam tag satu dengan yang
lain belum tentu sama.
Atribut yang dipakai tidak memiliki urutan pendefinisian
tertentu.
Atribut tag digunakan untuk memodifikasi sifat-sifat dari
tag, bergantung dari nilai yang diberikan.
Namun, juga ada atribut tag yang tidak memiliki nilai.
Aturan Penulisan HTML (4)

Penulisan tag bersifat non-case sensitive. Artinya, bahwa
penulisan tag dengan huruf besar atau dengan huruf kecil
akan dianggap sama. Sebagai contoh: <HTML> akan
sama dengan <html> atau <HtMl>
Aturan Penulisan HTML (5)



Setelah tanda ”<“ harus langsung diikuti oleh tag dan
ditutup dengan tanda”>”, tidak boleh ada spasi, angka,
tanda baca.
Nama atau istilah untuk tag adalah standart. Tidak
dapat dibuat sendiri.
Nama tag harus mengikuti standar W3C, yaitu sebuah
lembaga atau organisasi internasional yang mengatur
standarisasi web (http://www.w3c.org)
Aturan Penulisan HTML (6)




Dalam dokumen HTML diperlukan tag
<HEAD></HEAD>.
Di dalam tag ini diletakkan judul web page dengan
menggunakan tag <TITLE>judul web page</TITLE>
Sedangkan di dalam tag <BODY></BODY> berisikan
isi dari web page.
Untuk eksistensi dari file HTML, perlu ditambahkan .html
atau .htm di belakang nama file-nya (contoh: coba.htm)
Aturan Penulisan HTML (7)

Penulisan tag-tag HTML tidak akan terpengaruh oleh
perintah langsung keyboard seperti penekanan tombol
enter atau spasi. Sehingga diperbolehkan menyusun tagtag HTML secara continue horizontal seperti berikut:
<HTML><HEAD><TITLE>Judul Web
Page</TITLE></HEAD></HTML>
2. Heading



Heading digunakan untuk menampilkan format huruf
yang besar dan dicetak tebal, biasanya digunakan untuk
judul topik utama dari sebuah paragraf, ukurannya dari
yang terbesar <H1> sampai dengan yang terkecil <H6>
Untuk mengatur posisi heading digunakan atribut “align”,
contoh: <H1 align=“…”> ditutup dengan </H1>
Nilai atribut: left (rata kiri), center (rata tengah), right
(rata kanan)
3. Paragraf

Untuk memformat padagraf agar rata kiri,, kanan
atau tengah, digunakan tag pembuka <P
align=“…”> dan penutup </P>
1. Body
<BODY bgcolor = “green” text=“yellow”>
4. Breaking Now


Tag <Br> digunakan untuk berpindah ke baris baru
dalam isi dokumen.
Ini adalah salah satu tag yang tidak memerlukan
tag penutup.
5. Horizontal Ruler



Tag ini dibuat untuk membuat garis horizontal
Atibut yang dimiliki adalah “align” untuk perataan, “size”
untuk mengatur ketebalan garis (dalam pixel) dan “width”
untuk mengatur lebar garis (dalam pixel atau persen).
Penggunaan satuan persen memiliki arti bahwa ukuran
garis horizontal akan diambil persentase terhadap width
tampilan jendela. Tag <HR> ini tidak memiliki tag
penutup.
6. Preformat


Untuk memformat dokumen HTML dengan menggunakan
fasilitas Preformat. Dengan fasilitas ini, tampilan yang
akan diformat sama persis dengan isi yang ada dalam
tag <PRE>isi</PRE>.
Di dalam tag <PRE> tombol enter untuk ganti baris atau
spasi untuk jeda dapat digunakan.
7. Bold, Italic, Under line, Subscript,
Superscript, Stripe
Berikut adalah cara memberikan efek cetak huruf dalam dokumen
HTML

Untuk memberikan efek huruf tebal (bold)
<b>kata atau kalimat</b>

Untuk memberikan efek huruf miring (italic)
<i>kata atau kalimat</i>

Untuk memberikan efek huruf yang diberi garis bawah (under
line)
<u>kata atau kalimat</u>
7. Bold, Italic, Under line, Subscript,
Superscript, Stripe



Untuk memberikan efek huruf sebagai superscript
<sup>kata atau kalimat</sup>
Untuk memberikan efek huruf sebagai subscript
<sub>kata atau kalimat</sub>
Untuk memberikan efek huruf sebagai huruf yang dicoret (strike)
<s>kata atau kalimat</s>
8. List






Dalam dokumen HTML dapat menamplikan daftar list seperti bullet dan numbering
pada MS word
UnorderedList (mirip bullet)  tag <UL> sebagai pembbuka dan </UL> sebagai
penutup
OrderedList (mirip numbering)  tag <OL> sebagai pembuka dan </OL>
sebagai penutup
Untuk item-item list yang ada di dalamnya digunakan tag <LI> untuk mengawali.
Atribut “type” unorderedlist, yaitu bentuk bullet-nya: disc (default), circle (bentuk
lingkaran berlubang), square (kotak)
Atribut “type” ordered list:

1 untuk penomoran 1, 2, 3…

A untuk penomoran A, B, C…
I untuk penomoran I, II, III…
A untuk penomoran a, b, c…
i untuk penomoran i, ii, iii…


