PENGANTAR KOMPUTER DAN TI PERTEMUAN 5
Struktur dokumen HTML Homepage Kepala <head> <Head> <Title> Judul Homepage </Title> </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 <B>
Cara penulisan tags yang benar Kombinasi tag bisa digunakan dengan mengikuti aturan sebagai berikut: <tag1> <tag2><tag n>...</tag n> </tag2> <tag1> 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 <html> <body> Description Defines an HTML document Defines the document's body <h1> to <h6> Defines header 1 to header 6 <p> <br> <hr> 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. <html> di awal dokumen dan </html> di akhir dokumen.
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. <title> judul dokumen</title>
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 pergantian paragraf harus dimulai dengan <p> kembali.
9 TAG TAG DASAR HTML (cont.) Contoh Soal :
10 TAG TAG DASAR HTML (cont.) Hasil :
11 TAG TAG DASAR HTML (cont.) Contoh :
12 TAG TAG DASAR HTML (cont.) Hasil :
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.
14 TAG TAG DASAR HTML (cont.) Contoh Soal :
15 TAG TAG DASAR HTML (cont.) Hasil :
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
17 TAG TAG DASAR HTML (cont.)
18 TAG TAG DASAR HTML (cont.) Contoh Soal :
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
20 TAG TAG DASAR HTML (cont.) Contoh Soal :
21 TAG TAG DASAR HTML (cont.) Hasil : Jika atribut align tidak diisi maka heading secara default akan ditampilkan rata sebelah kiri.
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.
23 TAG TAG DASAR HTML (cont.) Contoh :
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.
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.
26 TAG TAG DASAR HTML (cont.) Contoh :
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.
28 TAG TAG DASAR HTML (cont.) Hasil :
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
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
31 TAG JUDUL (HEADING) <hn>judul paragraf</hn> n = 1,2,3,4,5,6 (tingkat judul) Untuk menuliskan judul suatu paragraf Peng. Komp & TI
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
33 TAG ENUMERASI LIST (cont.) Peng. Komp & TI
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
35 TAG GAMBAR (cont.) Peng. Komp & TI
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> Tag untuk penanda kolom adalah <td>data</td> Peng. Komp & TI
37 TAG TABLE DATA (cont.) Peng. Komp & TI
38 TAG TABLE - LAYOUT Untuk menata letak (layout) isi dokumen (walaupun hakikatnya bukan untuk keperluan ini) Peng. Komp & TI
39 TAG TABLE LAYOUT (cont.) Peng. Komp & TI
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 lain. Peng. Komp & TI
41 TAG LINK (cont.) Peng. Komp & TI
SEKIAN