MK MKDesain DesainGrafis GrafisWeb Web2002/2003 2002/2003by byIdo IdoPriyana PriyanaHadi Hadi: :
HTML : Apa itu? HTML = Hyper Text Markup Language HTML adalah dokumen text yang bisa dibaca untuk dipublikasikan di World Wide Web (WWW) Dalam file HTML terdapat "tag" atau kodekode yang dimengerti oleh web browser dan dapat menampilkannya di layar monitor. 1
Apa itu Tag HTML 1. Tag HTML adalah kode-kode special yang ditandai dengan karakter “<“ dan “>” 2. Tag HTML adalah penempatan atau nilai format teks yang memerintahkan browser untuk menampilkan sebuah dokumen html. 3. Tag HTML dibuat berpasangan, ada tag pembuka dan ada tag penutup. 4. Format umum tag HTML
Teks yg ditampilkan
Tag HTML ada 2 Macam 1. Tag Tunggal
menandai akhir dari sebuah paragraf
menandai akhir sebuah baris.
membuat sebuah garis horisontal.
2. Tag Berpasangan dan menandai awal dan akhir dari tubuh dokumen.
dan untuk membuat karakter cetak tebal
dan untuk membuat karakter cetak miring
Struktur Dokumen HTML Format dasar html :
Judul Dokumen Saya adalah mahasiswa Universitas Kristen Petra.
Head dan Body Dokumen HTML terbagi dalam dua bagian besar yaitu head dan body. Bagian head berfungsi untuk memberikan informasi-informasi penting tentang dokumen HTML dan informasi tersebut TIDAK ditampilkan di layar monitor. Bagian body berisi semua instruksi untuk mengatur seluruh tampilan halaman web di web browser dan informasi lain yang tidak termasuk dalam bagian head.
Bentuk HTML Sederhana
Halaman sederhana...
Halaman web sederhana...
Latihan 1 : HTML Teks Ketikan : 1.
Ini adalah contoh text html untuk sebuah paragraf.
2. <em>Ini contoh italic text. 3. <strong>Ini adalah sebuah contoh dari bold text 4.
Centered text.
5.
Kesimpulan : HTML Teks Tag Pembuka
Tag Penutup
Paragraph Center Italic
<em> atau
atau
Bold
<strong> atau
atau
Line break
(none)
Non breaking space
(none)
Comment tags
-->
Latihan 2 : HTML bulleted list unordered list (ul) + ordered list (ol)
PCU Faculties
- Letters
- Civil Engineering
- Communications Science
Ubahlah bullet ke square dan cyrcle
PCU Faculties
atau type=“cyrcle”> - Letters
- Civil Engineering
- Communications Science
Latihan 2 : HTML bulleted list unordered list (ul) + ordered list (ol)
PCU Faculties
- Letters
- Civil Engineering
- Communications Science
Latihan 3 : HTML Heading
Welcome to my Course Web Page Introduction to the Internet
HTML tags : Tabel Topic yang relevan Æ tag
hanya saja berlaku untuk text, TIDAK untuk gambar/images Tag table
Di dalam table ada baris dan kolom. Cell: kotak dalam table
HTML tags : Tabel 1 Tag html yang berada di dalam table – Caption Æ menunjukkan judul table Atribut: Align=“"top“|"bottom“|"left“|"right" – TR Æ table row Tag HTML didalam TR: • TH Æ table header/judul kolom • TD Æ table data/kolom
HTML tags : Tabel 2 Contoh table sederhana
Judul table | judul kolom 1 | judul kolom 2 |
| 0.32 | 1.2 |
| alfa | beta |
HTML tags : Tabel 3 Beberapa hal yang harus diingat – TH, TD dan TR adalah tag berpasangan – Defaultnya, table tidak memiliki border
Atribut table – Width – Border – Cellpadding Æspace between cell content and cell border – Cellspacing Æ space between cells
HTML tags : Tabel 4 Atribut TR, TD dan TH – ALIGN ="left“ | "center" | "right” – VALIGN="top“ | "middle“ | "bottom“ – Note: alignment TD dan TH dapat override alignment TR
Contoh:
4.11
aaaa | 4.23 |
4.11
aaaa | 4.23 |
4.11
aaaa | 4.23 |
HTML tags : Tabel 5 Atribut TD dan TH untuk merge cell – COLSPAN Æ jumlah kolom – ROWSPAN Æ jumlah baris
| 1.1 | 1.2 | 1.3 | 1.4 |
| 2.1 | 2.2 | 2.4 |
| 3.1 | 3.2 | 3.3 | 3.4 |
| 4.1 | 4.2 | 4.4 |
| 5.1 | 5.2 | 5.4 |
Kesimpulan : HTML Table
Latihan 4 : HTML Tabel
| Nama | umur | Telpon |
| Agus Cahyono | 22 | 8437102 |
| Esther Kuncoro | 28 | 8437103 |
Buat versi lain!
HTML Tag : Images Untuk menyisipkan gambar kita dapat memanfaatkan tag
![]()
Format file gambar yang bisa ditampilkan bisa bermacam-macam, misalnya jp, jpeg, pcx, gif, psd
HTML Tag : Hyperlink Hyperlink : dapat diletakkan pada teks ataupun pada sebuah image. Bila diletakkan pada teks maka teks tersebut (secara default) akan digaris-bawahi dan warnanya menjadi berbeda.
Teks hyperlink Mailto :
Kirim email
