HTML.
advertisement
Tentang HTML • HTML adalah sebuah standar yang digunakan secara luas untuk menampilkan halaman web dan HTML kini merupakan standar Internet yang saat ini dikendalikan oleh World Wide Web Consortium (W3C). • Versi terakhir dari HTML adalah HTML 4.01, meskipun saat ini telah berkembang XHTML yang merupakan pengembangan dari HTML. • Yang dimaksud dengan HyperText adalah beberapa teks yang ada dalam dokumen HTML memuat informasi yang menghubungkan ke lokasi yang berbeda, baik dalam satu struktur dokumen atau ke alamat lain di internet. • Sedangkan Markup Language merupakan bagian spesifik pada dokumen yang mengindikasikan bagaimana suatu informasi akan ditampilkan pada web browser. Editor HTML Text editor Notepad Editor plus Ultra edit WYSWYG Macromedia dreamweaver Microsoft frontpage Microsoft publisher Struktur dokumen HTML <Head> <Title> Kepala <head> Judul Homepage </Title> </Head> Homepage <Body> Isi…Teks Isi…Tabel. Isi…Audio, Video, dll. Tubuh <body> </Body> HTML Ekstensi • Untuk menyimpan file HTML ekstensi yang digunakan adalah .htm atau html. • Ekstensi yang paling sering digunakan adalah .html 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 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 <!--> Defines a comment 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 9 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> Peng . Komp & TI 2C 10 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. Peng . Komp & TI 2C 11 TAG TAG DASAR HTML (cont.) Contoh Soal : Peng . Komp & TI 2C 12 TAG TAG DASAR HTML (cont.) Hasil : Peng . Komp & TI 2C 13 TAG TAG DASAR HTML (cont.) Contoh Soal : Peng . Komp & TI 2C 14 TAG TAG DASAR HTML (cont.) Hasil : Peng . Komp & TI 2C 15 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 16 TAG TAG DASAR HTML (cont.) Contoh Soal : Peng . Komp & TI 2C 17 TAG TAG DASAR HTML (cont.) Hasil : Peng . Komp & TI 2C 18 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 19 TAG TAG DASAR HTML (cont.) Peng . Komp & TI 2C 20 TAG TAG DASAR HTML (cont.) Contoh Soal : Peng . Komp & TI 2C 21 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 22 TAG TAG DASAR HTML (cont.) Contoh Soal : Peng . Komp & TI 2C 23 TAG TAG DASAR HTML (cont.) Hasil : Jika atribut align tidak diisi maka heading secara default akan ditampilkan rata sebelah kiri. Peng . Komp & TI 2C 24 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 25 TAG TAG DASAR HTML (cont.) Contoh : Peng . Komp & TI 2C 26 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 27 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 28 TAG TAG DASAR HTML (cont.) Contoh : Peng . Komp & TI 2C 29 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 30 TAG TAG DASAR HTML (cont.) Hasil : Peng . Komp & TI 2C 31 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 – &nbsp; spasi – &lt; < – &gt; > – &amp; & – &quot; " Peng. Komp & TI 2C 32 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 33 TAG JUDUL (HEADING) <hn>Judul paragraf</hn> n = 1,2,3,4,5,6 (tingkat judul) Untuk menuliskan judul suatu paragraf Peng. Komp & TI 2C 34 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 35 TAG ENUMERASI – LIST (cont.) Peng. Komp & TI 2C 36 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 37 TAG GAMBAR (cont.) Peng. Komp & TI 2C 38 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 2C 39 TAG TABLE – DATA (cont.) Peng. Komp & TI 2C 40 TAG TABLE - LAYOUT • Untuk menata letak (layout) isi dokumen (walaupun hakikatnya bukan untuk keperluan ini) Peng. Komp & TI 2C 41 TAG TABLE – LAYOUT (cont.) Peng. Komp & TI 2C 42 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 2C 43 TAG LINK (cont.) Peng. Komp & TI 2C 44 HTML-LINK-LIST • LINK HTML Kelebihan utama dari dokumen HTML adalah kemampuannya untuk memberikan link dari satu teks dan / atau gambar menuju ke dokumen atau bagian lain dalam suatu dokumen. Browser Web akan menyorot (“highlight”) teks atau gambar yang diidentifikasi sebagai link dengan warna dan / atau garis bawah untuk menunjukkan bahwa itu adalah hyperteks link (hyperlink atau link). • TAG ANCHOR • Tag <A> digunakan untuk membuat suatu link kepada dokumen lain dalam web dengan • menambah atribut “href” sebagai definisi lokasi link. Contoh : • <A HREF=”http://www.microsoft.com”> clik here to show it</A> Ada tiga jenis link yaitu : Link relatif, Link absolute, Link dalam dokumen yang sama. - Link Relatif Digunakan jika membuat suatu link pada page anda ke page lain pada komputer yang sama. Bila dua page berada pada direktori sama, anda dapat menuliskan nama file html seperti berikut : <A HREF = “page_2.html”> Next </A> - Link Absolut Digunaka apabila anda membuat link ke page web lain yang berada pada web site lain di internet. Contoh: <A HREF = “http://www.mangosoft.com”>Click here if you want to see my home page</A> - Link ke bagian lain dalam dokumen Link ini dibuat untuk dokumen yang panjang sekali, sehingga apabila ditampilkan dalam browser web akan mengharuskan kita melakukan scroll layar berulang-ulang. Navigasi untuk penelusuran dokumen dapat dimudahkan dengan membuat link antar bagian, dengan menandai setiap bagian tersebut dengan memberinya nama. Sehingga pada tempat di dalam dokumen akan ada bagian yang bernama, dan di bagian lainnya dapat diletakkan link untuk menuju ke bagian-bagian tersebut. Memberi nama suatu bagian dalam dokumen, Letakkan kursor pada baris atau teks yang menjadi awal dari bagian tersebut, Sisipkan nama bagian tersebut dengan: <A NAME= “nama bagian”> Membuat link yang menuju pada bagian dokumen yang sama dapat dilakukan dengan cara yang sama seperti link absolut atau relatif, namun nama dokumen dalam link diganti dengan nama bagian dokumen dengan ditambah tanda # yang ditulis sebelum nama bagian tersebut. Contoh: <A HREF= “#nama bagian”> Bagian tentang link</A> Contoh Link <HTML> <HEAD> </HEAD> <BODY> <A NAME="TOP"> <A HREF="#LINK RELATIF">Link relatif</A><BR> <A HREF="#LINK ABSOLUT">Link Absolut</A><BR> <A HREF="#LINK WITH NEW WINDOW">Link with New Window</A><BR> <A HREF="#NO UNDERLINE">Link without underline</A><BR> </A> <BR> <A NAME="LINK RELATIF"> <H1>Link secara relatif, lihat contoh di bawah ini:</H1> <P> <A HREF="page_2.html">Klik di sini </A>jika mau ke halaman berikutnya. </P> </A> <A NAME="LINK ABSOLUT"> <H1>Link secara absolut, lihat contoh di bawah ini:</H1> <P> Klik <A HREF="http://www.mangosoft.com">my home page</A> if you want to see my personality. </P> </A> Contoh Link (lanjutan) <A NAME="LINK WITH NEW WINDOW"> <H1>Membuat window baru untuk link:</H1> <P> Open <A HREF="http://www.mangosoft.com" target="_blank"> my home page</A> with new window. </P> </A> <A NAME="NO UNDERLINE"> <H1>Membuat link tanpa garis bawah:</H1> <P> <A HREF="http://www.mangosoft.com" style=" text-decoration:none">Klik This Link </A> , Looks it's not use underline. </P> </A> <HR> <A HREF="#TOP"> kembali ke atas</A> <HR> </BODY> </HTML>
