PENGANTAR KOMPUTER DAN TI 2C
Struktur dokumen HTML
<Head> <Title> Judul Homepage </Title> </Head> Homepage Kepala <head> Tubuh <body> <Body> Isi…Teks Isi…Tabel. Isi…Audio, Video, dll. </Body>Tags HTML
HTML tags digunakan untuk menandai element
HTML
HTML tags ditandai dua character <and>
HTML tags ditulis berpasangan seperti <b> dan
</b>
Tags yang pertama adalah start tag dan tags
kedua adalah end tag
Teks diantara tag adalah content element
HTML tags tidak case sensitif , <b> sama dengan
Cara penulisan tags yang benar
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.
Kombinasi tag bisa digunakan dengan mengikuti aturan sebagai berikut:
Basic HTML Tags
Tag Description
<html> Defines an HTML document
<body> Defines the document's body
<h1> to <h6> Defines header 1 to header 6
<p> Defines a paragraph
<br> Inserts a single line break
<hr> Defines a horizontal rule
Peng . Komp & TI 2C
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.
<html> di awal dokumen dan </html> di akhir
dokumen.
Peng . Komp & TI 2C
7
TAG TAG DASAR HTML (cont.)
Head
Merupakan tag berikutnya setelah <html> untuk menuliskan keterangan tentang dokumen web yang akan ditampilkan
<head> di awal setelah <html>, dan </head> 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.
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.
<body> di awal, segera setelah tag </head>
</body> di akhir, diletakkan sebelum tag </html>
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 <p>. diakhir paragraf tidak diharuskan menuliskan </p> sebagai akhir paragraf. Setiap
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 <br> 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 <h1>
Sintaks elemen heading
<hy> Teks yang menjadi heading </hy>, dimana y adalah nomor heading
Peng . Komp & TI 2C
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
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<hr>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
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 <!—sebagai awal, kemudian teks yang dikomentari,
dan tag
sebagai akhir tag.
Khusus untuk tag komentar ini, tag penutup tidak
menggunakan tanda garis miring sebelumnya.
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 <html>dokumen</html>
Head: menandai bagian header dokumen HTML <head>header</head>
Title: memberi judul pada dokumen HTML <title>judul dokumen</title>
Body: menandai awal dan akhir isi dokumen <body>isi dokumen</body>
<body text="#xxxxxx" bgcolor="#xxxxxx" background="filegambar" link="#xxxxxx" vlink="#xxxxxx">isi dokumen</body>
Peng. Komp & TI 2C
31
TAG JUDUL (HEADING)
<h
n
>Judul paragraf</h
n
>
n
= 1,2,3,4,5,6 (tingkat judul)
Peng. Komp & TI 2C
32
TAG ENUMERASI (LIST)
<li>item</li>
Untuk menandai suatu item dari daftar (enumerasi),
diawali dengan simbol • (bullet)
Kelompok item harus diapit oleh tag <ul> </ul> dalam
daftar bertingkat.
Untuk menomori enumerasi dengan nomor urut (1,2,3),
apitlah dengan tag <ol> </ol>
Peng. Komp & TI 2C
Peng. Komp & TI 2C
34
TAG GAMBAR
<img src="
NamaFileGambar"
>
NamaFileGambar
= file
gambar yang mempunyai ekstensi .GIF, .JPG, atau
.PNG.
Untuk menampilkan sebuah file gambar.
Bentuk penulisan lain yang dianjurkan (XML style) :
<img src="
NamaFileGambar" /
>
Peng. Komp & TI 2C
Peng. Komp & TI 2C
36
TAG TABLE - DATA
<table> definisi tabel </table>
Menampilkan data dalam bentuk tabel
Tabel didefinisikan dengan cara menyatakan baris-baris
dan kolom kolom.
Tag untuk penanda baris adalah <tr> definisi baris
</tr>
Peng. Komp & TI 2C
Peng. Komp & TI 2C
38
TAG TABLE - LAYOUT
Untuk menata letak (layout) isi dokumen
(walaupun hakikatnya bukan untuk keperluan
ini)
Peng. Komp & TI 2C
Peng. Komp & TI 2C
40
TAG LINK
<a href="
Link
">Kata yang di-click</a>
<a name="#
Acuan
">Kata yang dituju</a>
Link
= Alamat URL atau nama file dan/atau
acuan yang dituju
Acuan
= Kata sembarang sebagai penanda
membentuk link ke URL/file/bagian dokumen
Peng. Komp & TI 2C
