PENGANTAR KOMPUTER DAN TI 2C PERTEMUAN 5
Struktur dokumen HTML Kepala
<Title> Judul Homepage
Tubuh
Isi…Teks Isi…Tabel. Isi…Audio, Video, dll.
Homepage
Tags HTML HTML tags digunakan untuk menandai element HTML HTML tags ditandai dua character
HTML tags ditulis berpasangan seperti dan Tags yang pertama adalah start tag dan tags kedua adalah end tag Teks diantara tag adalah content element HTML tags tidak case sensitif , sama dengan
Cara penulisan tags yang benar Kombinasi tag bisa digunakan dengan mengikuti aturan sebagai berikut: ...
Overlaping Tags, penulisan yang kurang baik karena akan membingungkan browser untuk mengeksekusi kode html. Nested Tags, penulisan yang baik karena kode html akan lebih mudah dieksekusi oleh browser.
Basic HTML Tags Tag
Description
Defines an HTML document
Defines the document's body
to
Defines header 1 to header 6
Defines a paragraph
Inserts a single line break
Defines a horizontal rule
Defines a comment
6
TAG TAG DASAR HTML Tag dasar berarti elemen dasar. Dokumen HTML secara mendasar akan terdiri atas teks informasi.
HTML Merupakan tag dasar yang mendefinisikan bahwa dokumen ini adalah dokumen HTML. Tag ini merupakan satu keharusan bagi pemrogram web untuk menuliskannya sebagai tag pertama dalam dokumen HTML. di awal dokumen dan di akhir dokumen. Peng . Komp & TI 2C
7
TAG TAG DASAR HTML (cont.) Head Merupakan tag berikutnya setelah untuk menuliskan keterangan tentang dokumen web yang akan ditampilkan di awal setelah , dan di akhir section head Title Merupakan tag di dalam head yang harus dituliskan untuk memberikan judul/ informasi pada caption browser web tentang topik atau judul dari dokumen web yang ditampilkan dalam browser. judul dokumen Peng . Komp & TI 2C
8
TAG TAG DASAR HTML (cont.) Body Merupakan section utama dalam dokumen web. Pada section ini semua isi dokumen yang akan ditampilkan di dalam browser harus dituliskan. di awal, segera setelah tag di akhir, diletakkan sebelum tag Paragraf Informasi yang disajikan dalam dokumen harus mengikuti kaidah kaidah dalam penulisan. Misalnya satu pikiran utama disimpan dalam satu paragraf. Setiap paragraf harus dimulai dengan memberi tag . diakhir paragraf tidak diharuskan menuliskan
sebagai akhir paragraf. Setiap pergantian paragraf harus dimulai dengan kembali. Peng . Komp & TI 2C
9
TAG TAG DASAR HTML (cont.) Contoh Soal :
Peng . Komp & TI 2C
10
TAG TAG DASAR HTML (cont.) Hasil :
Peng . Komp & TI 2C
11
TAG TAG DASAR HTML (cont.) Contoh :
Peng . Komp & TI 2C
12
TAG TAG DASAR HTML (cont.) Hasil :
Peng . Komp & TI 2C
13
TAG TAG DASAR HTML (cont.) Line Break Kita dapat memaksakan ganti baris pada dokumen web. Ganti baris disini dimaksudkan hanya menyajikan informasi pada baris sendiri tetapi tidak berganti paragraf.
Untuk menampilkan suatu teks ditampilkan pada baris yang baru dalam suatu paragraf, maka harus digunakan tag
sebelum teks yang dimaksud dituliskan.
Peng . Komp & TI 2C
14
TAG TAG DASAR HTML (cont.) Contoh Soal :
Peng . Komp & TI 2C
15
TAG TAG DASAR HTML (cont.) Hasil :
Peng . Komp & TI 2C
16
TAG TAG DASAR HTML (cont.) Heading Teks dalam dokumen umumnya mempunyai judul topik, pada dokumen HTML judul ini disebut heading. Heading tulisan akan ditampilkan dengan huruf yang lebih besar atau ditebalkan. Heading juga dimanfaatkan untuk menunjukkan tingkat keberartian dari teks yang dituliskan. Ada 6 tingkat heading dalam HTML, dinomori dari satu sampai dengan nomor 6. Nomor 1 merupakan heading terbesar. Setiap heading dalam dokumen harus diberi tag, tergantung pada kebutuhan teks tersebut, jika dianggap sebagai heading1-digunakan tag
Sintaks elemen heading Teks yang menjadi heading , dimana y adalah nomor heading Peng . Komp & TI 2C
17
TAG TAG DASAR HTML (cont.)
Peng . Komp & TI 2C
18
TAG TAG DASAR HTML (cont.) Contoh Soal :
Peng . Komp & TI 2C
19
TAG TAG DASAR HTML (cont.) Mengatur letak Heading
Tag heading mempunyai atribut yang digunakan untuk mengatur letak heading dalam baris –align. Aligment heading kiri-left tengah –center kanan-right Peng . Komp & TI 2C
20
TAG TAG DASAR HTML (cont.) Contoh Soal :
Peng . Komp & TI 2C
21
TAG TAG DASAR HTML (cont.) Hasil :
Jika atribut align tidak diisi maka heading secara default akan ditampilkan rata sebelah kiri. Peng . Komp & TI 2C
22
TAG TAG DASAR HTML (cont.) Penggaris Mendatar Sebuah garis dapat dsisipkan dalam dokumen web, umumnya digunakan sebagai pemisah antar bagian atau paragraf. Tag
disisipkan pada tempat garis akan disisipkan dokumen.
Peng . Komp & TI 2C
23
TAG TAG DASAR HTML (cont.) Contoh :
Peng . Komp & TI 2C
24
TAG TAG DASAR HTML (cont.) Hasil : Garis yang disisipkan dapat dalam bentuk penggaris karena lebar garis dapat diatur, ukuran garis dapat dalam bentuk point atau dalam bentuk relatif dalam window browser.
Peng . Komp & TI 2C
25
TAG TAG DASAR HTML (cont.) Komentar
Dalam suatu dokumen informasi ada sebagian teks dalam dokumen yang berfungsi sebagai catatan atau komentar terhadap program itu sendiri. Catatan/komentar dalam dokumen tidak ditampilkan dalam browser. Komentar disisipkan pada section body, diletakkan pada bagian-bagian teks dokumen yang memang perlu dikomentari. Peng . Komp & TI 2C
26
TAG TAG DASAR HTML (cont.) Contoh :
Peng . Komp & TI 2C
27
TAG TAG DASAR HTML (cont.) Tag komentar dapat digunakan untuk menyembunyikan sebagian dokumen web. Teks yang berfungsi sebagai komentar disimpan dalam dokumen ditandai dengan tag
Peng . Komp & TI 2C
28
TAG TAG DASAR HTML (cont.) Hasil :
Peng . Komp & TI 2C
29
MENGENAI PENULISAN HTML Browser HTML menginterpretasikan satu atau beberapa space yang berdekatan sebagai sebuahspace teks teks teks teks dianggap sebagai : teks teks teks teks Browser HTML menginterpretasikan Carriage Return (Enter) dan indentasi (Tab) sebagai sebuah space Ada beberapa karakter khusus yang dapat direpresentasikan dengan kode tertentu – spasi – < < – > > – & & – " "
Peng. Komp & TI 2C
30
TAG DASAR HTML: menandai awal dan akhir dokumen HTML dokumen Head: menandai bagian header dokumen HTML header Title: memberi judul pada dokumen HTML judul dokumen Body: menandai awal dan akhir isi dokumen isi dokumen isi dokumen
Peng. Komp & TI 2C
31
TAG JUDUL (HEADING) Judul paragraf n = 1,2,3,4,5,6 (tingkat judul) Untuk menuliskan judul suatu paragraf
Peng. Komp & TI 2C
32
TAG ENUMERASI (LIST)
item Untuk menandai suatu item dari daftar (enumerasi), diawali dengan simbol • (bullet) Kelompok item harus diapit oleh tag dalam daftar bertingkat.
Untuk menomori enumerasi dengan nomor urut (1,2,3), apitlah dengan tag
Peng. Komp & TI 2C
33
TAG ENUMERASI – LIST (cont.)
Peng. Komp & TI 2C
34
TAG GAMBAR 
NamaFileGambar = file gambar yang mempunyai ekstensi .GIF, .JPG, atau .PNG.
Untuk menampilkan sebuah file gambar. Bentuk penulisan lain yang dianjurkan (XML style) :
Peng. Komp & TI 2C
35
TAG GAMBAR (cont.)
Peng. Komp & TI 2C
36
TAG TABLE - DATA
Menampilkan data dalam bentuk tabel Tabel didefinisikan dengan cara menyatakan baris-baris dan kolom kolom. Tag untuk penanda baris adalah definisi baris
Tag untuk penanda kolom adalah data | Peng. Komp & TI 2C
37
TAG TABLE – DATA (cont.)
Peng. Komp & TI 2C
38
TAG TABLE - LAYOUT Untuk menata letak (layout) isi dokumen (walaupun hakikatnya bukan untuk keperluan ini)
Peng. Komp & TI 2C
39
TAG TABLE – LAYOUT (cont.)
Peng. Komp & TI 2C
40
TAG LINK Kata yang di-click Kata yang dituju Link = Alamat URL atau nama file dan/atau acuan yang dituju
Acuan = Kata sembarang sebagai penanda membentuk link ke URL/file/bagian dokumen lain. Peng. Komp & TI 2C
41
TAG LINK (cont.)
Peng. Komp & TI 2C
SEKIAN
