YFA Jurusan Teknik Informatika Sekolah Tinggi Teknologi Telkom
S1/IT/WE/E2/0806
Hypertext Markup Language (HTML)
CS4713
Pengantar HTML
Hypertext Markup Language (HTML) merupakan bahasa pemrograman web berupa suatu format data yang digunakan untuk membuat dokumen hypertext yang dapat dibaca, diinterpretasikan dari satu platform komputer ke platform komputer lainnya tanpa perlu melakukan suatu perubahan apa pun. Dokumen HTML sebenarnya adalah suatu dokumen teks biasa. Lalu kenapa disebut dengan HTML? HTML merupakan pengembangan dari SGML (Standard Generalized Markup Language).
YFA: Web Engineering
Dokumen HTML HTML
TXT
WYSIWYG
Teks
Teks
Grafis
Memiliki Format
Ya
Tidak
Ya
Memiliki Link
Ya
Tidak
Tidak
Contoh Editor
Ms-FrontPage
Notepad
MS-Word
Jenis
YFA: Web Engineering
Elemen HTML
Elemen pada sebuah dokumen HTML dapat dibagi menjadi dua kategori utama, yaitu:
... yang menyatakan informasi tentang dokumen tersebut, seperti judul dokumen, meta tag, atau hubungannya dengan dokumen lainnya. ... yang menentukan bagaimana format dan isi suatu dokumen yang akan ditampilkan oleh web browser, seperti paragram, tabel, frame, teks, gambar, hyperlink dll.
YFA: Web Engineering
Tag HTML
Tag dinyatakan dengan “<“ dan “>” .
Tag dalam dokumen HTML biasanya merupakan suatu pasangan yaitu tag awal “
” dan tag akhir “”. Contoh untuk menampilkan tulisan yang dicetak tebal:
Teks ini ditampilkan di web browser.
YFA: Web Engineering
Nested Tag
Tag yang mengandung tag lain di dalamnya disebut nested tag.
Teks ini untuk Tag1 Teks ini untuk Tag2
YFA: Web Engineering
Tag Kosong dan Tag Beratribut
Bentuk:
Teks Teks
Contoh: Home Page Saya
Aplikasi Internet
YFA: Web Engineering
Struktur Dokumen HTML ***** Script Bagian Head ***** ***** Script Bagian Body *****
YFA: Web Engineering
Bagian HEAD <TITLE>........... <STYLE HREF="url_style_sheet"> <STYLE>............ <META NAME="..." CONTENT="...">
YFA: Web Engineering
Tag Pemformatan Text
Paragraph: . . .
Preformatted Text: . . .
BlockQuote: . . .
DIV: . . .
Multi Kolom: <MULTICOL cols=”3” gutter=”25”> . . .
YFA: Web Engineering
Karakter Spesial
< > © »
dll
mewakili mewakili mewakili mewakili mewakili
blank < > © »
YFA: Web Engineering
Heading Heading Heading Heading Heading Heading Heading
1
2 3 4 5 6
YFA: Web Engineering
Physical Style
… untuk menebalkan teks … untuk membuat teks terlihat miring … untuk menggarisbawahi teks <S>… untuk memberikan coretan pada teks untuk membuat teks berkedip, hanya ada pada Netscape … untuk menampilkan teks dalam font typewriter … untuk membesarkan teks <SMALL>… untuk mengecilkan teks <SUB>… untuk membuat teks subscript <SUP>… untuk membuat teks superscript YFA: Web Engineering
Logical Style
… untuk menandai suatu definisi (miring) <EM>… untuk menandai suatu penekanan teks (miring), berasal dari kata “Emphasis” … untuk menandai suatu citation (miring) … untuk menyatakan suatu kode program, ditampilkan dalam font fixed pitch atau monoscapced. … untuk menyatakan suatu keyboard, ditampilkan dalam font monoscapced. Sering digunakan untuk pembuatan buku petunjuk atau manual book <SAMP>… untuk menyatakan teks contoh, ditampilkan dalam font monoscapced <STRONG>… untuk menyatakan teks dengan penekanan yang kuat (tebal). … untuk menyatakan suatu variabel untuk membuat suatu komentar atau keterangan. YFA: Web Engineering
Logical Style (lanjutan)
Apa perbedaan antara Physical Style dan Logical Style? Format teks mana yang mungkin berubah-ubah, Physical Style atau Logical Style?
YFA: Web Engineering
Font
Menentukan Ukuran Teks ….
Mengubah Warna Teks ….
Jenis Font ….
YFA: Web Engineering
Pemisah Antarteks Teks yang anda tuliskan akan terlihat berada dalam satu baris dan hanya akan pindah baris berikutnya jika telah melampaui lebar window browser. Tetapi anda dapat memaksakan teks anda untuk pindah ke baris berikutnya dengan menggunakan elemen
seperti yang terlihat dalam contoh ini,
brgitu juga dengan baris ini
Elemen
juga dapat digunakan bersama-sama dengan gambar.
Bahkan anda dapat membuat teks disebelah kiri atau kanan gambar untuk berpindah ke bagian bawah gambar
sebelum teks memenuhi sebelah kiri atau kanan gambar
YFA: Web Engineering
Pemisah Antarteks (lanjutan)
Atribut CLEAR mempunyai 3 buah nilai, yaitu: : Memindahkan teks ke bagian bawah gambar untuk gambar yang berada di sebelah kiri teks RIGHT : Memindahkan teks ke bagian bawah gambar untuk gambar yang berada di sebelah kanan teks ALL : Memindahkan teks ke bagian bawah gambar untuk gambar yang memiliki teks dikiri dan kanannya. LEFT
… untuk meniadakan ganti baris
untuk membuat garis pemisah horisontal <SPACER type=”[horizontal/vertical]” size=”…” height=”…” width=”…” =”…” align=”…”> untuk membuat spasi dalam ukuran pixel
YFA: Web Engineering
Link
Anchor tag: penandaan untuk membuat link antara dua halaman/dokumen yang terpisah atau ke area khusus pada satu halaman web. Sintaks tag : Link Teks
Selain atribut href, juga terdapat atribut target yang digunakan untuk membuat sebuah frame atau jendela (window) baru untuk menampilkan halaman web lainnya yang dituju.
YFA: Web Engineering
Jenis Path dalam Link
Salah satu bagian terpenting dari suatu link yaitu path, yang menyatakan lokasi file halaman/dokumen lain menjadi tujuan dari link yang bersangkutan. Jenis path dalam HTML: Absolute
path, link mengarah pada file yang lokasinya terpisah dari dokumen HTML yang sedang aktif. Relative path, link mengarah pada file yang lokasinya relatif terhadap dokumen HTML yang sedang aktif (dalam direktori yang sama, subdirektori maupun dalam direktori yang lebih tinggi tingkatannya dengan dokumen yang saat ini aktif).
YFA: Web Engineering
Contoh Link – 1 Kunjungi Website Informatika STT TELKOM Buka Dokumen Kedua
Buka Dokumen Ketiga
Buka Dokumen Keempat
YFA: Web Engineering
Link ke Bagian Tertentu dari Dokumen
Link dapat juga digunakan untuk mengarahkan ke suatu bagian tertentu dalam suatu dokumen HTML. Cara ini membutuhkan pendefinisian nama untuk bagian/lokasi yang menjadi tujuan dari link tersebut.
YFA: Web Engineering
Contoh Link – 2 Pengertian HTML
Pengertian CSS
Pengertian PHP
Pemrograman Web
Web Programming
Pengertian HTML
HTML adalah bla bla bla bla.. .
HTML .. .
Pengertian CSS
CSS adalah bla bla bla bla.. .
CSS .. .
Pengertian PHP
PHP adalah bla bla bla bla.. .
PHP .. .
YFA: Web Engineering
Gambar sebagai Link
Sebuah link dalam dokumen HTML dapat juga dikombinasikan dengan sebuah gambar yang digunakan sebagai hyperlink. Hal ini dapat dilakukan dengan cara menempatkan tag ![]()
untuk menampilkan gambar di antara tag . Sintaks tag ![]()
: 
Contoh: Link dapat juga dikombinasikan dengan menggunakan gambar:
YFA: Web Engineering
Form
Form interaktif memungkinkan suatu web server menerima data/informasi dari user melalui sejumlah elemen yang disebut kontrol. Kontrol dapat berupa check box, radio button, push button, list menu, textarea dan beberapa kontol lainnya. Tag
YFA: Web Engineering
Table
Tag yang berfungsi dalam pembuatan tabel meliputi: Table
tag , digunakan untuk mendefinisikan sebuah tabel. Table tag memiliki beberapa elemen yaitu align, background, bgcolor, border, cellpadding, cellspacing, bordercolor, width, valign serta rowspan dan colspan. Table data tag | , digunakan untuk mendefinisikan isi dari setiap sel atau kolom dalam baris tabel yang telah dibuat dengan tag . Table header tag | | , digunakan untuk mendefinisikan judul setiap baris atau kolom. Table row tag
, digunakan untuk mendefinisikan sebuah baris dalam tabel.
YFA: Web Engineering
Contoh Table – 1 | | Topik |
| | HTML | ASP | PHP |
| Waktu | Pagi | Penuh | Kosong | Kosong |
YFA: Web Engineering
Contoh Table – 1 (lanjutan) lanjutan) | Siang | Penuh | Penuh | Kosong |
| Malam | Kosong | Kosong | Penuh |
YFA: Web Engineering
Frame
Jendela web browser dapat dibagi menjadi beberapa bagian yang lebih kecil dengan adanya frame set tag. Masing-masing bagian tersebut dapat terdiri dari dokumen HTML tersendiri, sehingga pada satu saat yang bersamaan dapat ditampilkan beragam informasi. Tidak semua web browser mendukung pembentukan frame. Beberapa web browser versi lama tidak bisa menampilkan frame, untuk mengantisipasi hal tersebut dapat pula disertakan tag <noframes> ... sebagai alternatif dokumen lain yang dijalankan sebagai pengganti.
YFA: Web Engineering
Fungsi Frame
Kemampuan frame ini memungkinkan untuk: Membuat
suatu daftar isi (menu) pada satu frame, sementara sisi frame yang lain digunakan untuk menampilkan isi (content). Membuat suatu judul atau logo yang tidak berubah-ubah pada suatu sisi frame, sedangkan sisi-sisi frame yang lainnya digunakan untuk menampilkan isi atau informasi lain. Membuat suatu dokumen tanya-jawab (FAQ) dengan satu sisi frame memuat daftar pertanyaan dan frame yang lain memuat jawaban masing-masing pertanyaan tersebut.
YFA: Web Engineering
Sintaks Frame
Sebuah frame dalam dokumen HTML dapat dibuat denggan menggunaan penandaan
