Pemrograman Berbasi Web Session 2 Sintak & Tag-tag Dasar Html Pemrograman Berbasi Web Session 2
Mark Up Language Mark up : informasi tambahan yang di tempatkan pada teks untuk menjelaskan bagaimana teks tersebut diinterpretasi Mark up ditambahkan bukan untuk tampilan tetapi untuk memberikan struktur interpretasi / pemberian arti HTML (Hyper Text Markup Language) merupakan subset dari SGML (Standard Generalized Markup Language) Contoh subset lain dari SGML : XML (eXtensible Markup Language) SMIL (Synchronized Multimedia Integration Language) MathML (Mathematical Markup Language) CML (Chemical Markup Language)
Tentang HTML Tentang HTML HTML : format standar untuk membuat dokumen web HTML versi terakhir: HTML 4.01 Spesifikasi HTML standar: http://www.w3.org/TR/html4 HTML merupakan bahasa bertanda, menggunakan rangkaian teks tertentu (tag) untuk menandai teks yang mempunyai interpretasi khusus File HTML berupa file teks (plain text file), bukan binary file
HTML Authoring Tools HTML Authoring Tools Text Editor OS default – notepad (Windows) – vi (Unix) Third party – EditPlus, Crimson Editor, UltraEdit (Windows) – joe(Linux) – dll Visual Editor Macromedia DreamWeaver MS Word dll
Daftar Tag Daftar Tag <html> Dokumen <head> Header <title> Juduldokumen <body> Isidokumen <h1> Judulparagraf <p> Paragraf <b> <i> <u> <sup> <sub> Atribut <br> Gantibaris <font> Fontd <li> Enumerasi <hr> Garismendatar <img> Gambar <a> Link (kaitan) <table> Tabel <!----> Komentar
Mengenal Penulisan Tag Tag dibentuk oleh suatu kata (keyword) yang diapit oleh tanda kurung lancip(<tag>) Tag boleh ditulis dalam huruf kecil maupun Kapital Tag harus berpasangan, yaitu tag awal di ikuti tag akhir, kecuali tag tunggal <p> teks</p> <br> <hr /> Di antara tag awal dan tag akhir bisa terdapat tag lain Penulisan tag tidak boleh tumpang tindih <tag1><tag2> teks</tag1></tag2> →penulisanyang salah <tag1><tag2> teks</tag2></tag1> →penulisanyang benar
Struktur / Skema Dasar HTML <HEAD> <TITLE>Juduldokumen</TITLE> </HEAD> <BODY> Isidokumen </BODY> </HTML>
HTML HTML Contoh Dokumen HTML: <html> <head> <title>Homepage saya</title> </head> <body> <h1>Saya</h1> <h2>Perkenalan</h2> <p>Perkenalkan, namasaya..... Iniadalah<i>homepage</i> <b>pertama</b> saya, karenasayabarubelajartentang caramembuat<b><i>homepage</i></b>. </p> </body> </html> <!--akhirdokumenHTML -->
Mengenal Penulisan HTML Browser HTML menginterpretasikan satu atau beberapa space yang berdekatan sebagai sebuah space teks teks teks teks dianggap sebagai: Browser HTML menginterpretasikan Carriage Return (Enter) dan indentasi (Tab) sebagai sebuah space Ada beberapa karakter khusus yang dapat direpresentasikan dengan kode tertentu – spasi – < < – > > – & & – " "
Tag Dasar 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>juduldokumen</title> Body: menandai awal dan akhir isi dokumen <body>isidokumen</body> <body text="#xxxxxx" bgcolor="#xxxxxx" background="filegambar" link="#xxxxxx" vlink="#xxxxxx">isidokumen</body>
Tag Judul (Heading) <hn>Judulparagraf</hn> n = 1,2,3,4,5,6 (tingkatjudul) Untukmenuliskanjudulsuatuparagraf
Tag Paragraf Tag Paragraf <p>paragraf</p> Untuk menandai suatu paragraf. Suatu paragraf akan terlihat dibatasi oleh satu baris kosong sebelum dan sesudahnya. <p>paragraf</p> Untuk menandai suatu paragraf. Suatu paragraf akan terlihat dibatasi oleh satu baris kosong sebelum dan sesudahnya.
Tag Atribut <b>Kalimat yang dicetak tebal</b> <i>Kalimat yang dicetak miring</i> <u>Kalimat yang digaris bawahi</u> Untuk menandai bagian kalimat agar dicetak tebal,miring, dan / atau digaris bawahi.
Tag Atribut <sup>bagian yang dicetak tinggi</sup> <sub>bagian yang dicetak rendah</sub> Untuk menandai bagian karakter agar dicetakTinggi atau rendah, biasanya untuk rumusMatematika atau kimia.
Tag ganti Baris (Break Line) Untuk pindah kebaris berikutnya. Bentuk penulisan lain yang dianjurkan(XMLstyle) : <br/>
Tag Font (Size) Memformat suatu bagian kalimat dengan ukuran,jenis huruf, atau warna tertentu.Tag : font Parameter : size, face, color
Tag Font (Face) Memformat suatu bagian kalimat dengan ukuran,jenis huruf, atau warna tertentu.Tag : font Parameter : size, face, color
Tag Font (Color) Memformat suatu bagian kalimat dengan ukuran, jenis huruf, atau warna tertentu.Tag : font Parameter : size, face, color
Tag List (Daftar) List merupakan bentuk yang umum yang biasa kita gunakan untuk menguraikan daftar sesuatu. Jenis-jenis list dalalm HTML ada tiga yaitu list dengan nomor (ordered list), list tanpa nomor (unordered list) dan list definisi (definition list) : 1. List dengan nomor Adalah daftar yang setiap itemnya akan diberi nomor. Nomor tersebut dapat berupa angka, angka romawi maupun huruf. Penu-lisannya dalam tag HTML menggunakan <ol type=”A”>.....</ol> Type Arti ”I” Ditampilkan dengan angka Romawi huruf besar ”i” Ditampilkan dengan angka Romawi huruf kecil ”A” Ditampilkan dengan abjad Latin huruf besar ”a” Ditampilkan dengan abjad Latin huruf kecil 2. List tanpa nomor Adalah daftar yang setiap itemnya tidak diberi nomor melainkan hanya berupa bullet saja dapat berupa kotak atau bulet. Penulisan-nya dalam tag HTML menggunakan <ul type=”circle”>.....</ul> Type Arti ”Circle” Ditampilkan dengan lingkaran putih ”Disc” Ditampilkan dengan lingkaran hitam ”Square” Ditampilkan dengan kotak hitam
3.List definisi Adalah list yang memberikan uraian terhadap suatu item yang ter-dapat di dalam daftar. Penulisannya dalam tag HTML mengguna-kan <dl> (def list), <dt> (def term), dan <dd> (def description).
Output / layout List
Tag Enumerasi <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>
Tag Garis Mendatar <hr> membentuk garis pemisah mendatar.Bentuk penulisan lain yang dianjurkan (XML style) : <hr />
Tag Gambar (Image) <imgsrc="NamaFileGambar"> NamaFileGambar= file gambar yang mempunyai ekstensi.GIF, .JPG, atau .PNG. Untuk menampilkan sebuah file gambar.Bentuk penulisan lain yang dianjurkan (XML style) : <imgsrc="NamaFileGambar" />
Tag Link (Anchor) <a href="Link">Kata yang di-click</a> <a name="#Acuan">Kata yang dituju</a> Link = AlamatURL atau nama file dan/atau acuan yang dituju Acuan= Kata sembarang sebagai penanda Membentuk link keURL / file / bagian dokumen lain.
Tag Tabel (Data) <table> definisitabel</table> Menampilkan data dalam bentuk tabel Tabel di definisikan 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>
Tag Table (Layout) Untuk menata letak (layout) isi dokumen (walaupun hakikatnya bukan untuk keperluan ini)
Tag Marquee (Layout) Marquee : Sebuah tText berjalan pada dokument HTML, Sintaxnya adlh Sbb : <Marquee [Propertie]> .. Isi/text Marquee... </marquee> Keterangan propertie PROPERTIE KETERANGAN Behavior Cara atau teknik dari marquee utk menjalankan Text, nilainya Scroll : Menggulung searah Teks, Slide : juga menggulung searah text, dan Alternate : Tek berjalan bolak balik Direction Arah text berjalan Hight Tinggi dari marquee nilainya dlm prosentase % atau pixels Width Lebar dari marquee nilainya dlm prosentase % atau pixels Continously Menggulung text secara terus menerus, nilainya adalh Loop sebanyak n kali, Bila menginginkan marquee berjalan terusmenerus maka propertie ini tdk perlu dicantumkan. Style Kemampuan utk memformat Font, paragraf, border, numbering, dan position Bgcolor Warna latar dari marquee, nilainya bisa dicantumkan tanpa hrs menuliskan kode warna apabila anda tidak hapal,(misalnya: Yellow, blue, red, dst)
Tag Frame (Layout) Untuk menata letak (layout) isi dokumen (membagi/frame beberapa baris dan kolom atau sub baris dan kolom) secara kolom secara baris dan kolom
Sekian dan ...... Any Questions