Pemrograman Berorientasi Platform (IN315B) HTML Dasar (Konsep Dasar, Text Formating, Link, Frame)
HTML (HyperText Markup Language) HTML bukan bahasa pemrograman, tapi merupakan sebuah mark up language. HTML salah satu bahasa pemrograman di mana browser sebagai compilernya. HTML menggunakan mark up tags untuk mendeskripsikan halaman web. Digunakan untuk memberi tahu web browser bagaimana menampilkan halaman web. Sebuah HTML file harus mempunyai ekstensi .htm atau .html. HTML dapat dibuat menggunakan text editor (notepad, edit plus dsb).
Web Browser Tugas dari web browser (Chrome, IE, Mozilla) adalah membaca dokumen HTML dan menampilkannya sebagai halaman web. Web browser tidak menampilkan tag HTML, tapi menggunakan / membaca tag tersebut untuk menginterprestasi sebuah halaman web.
Struktur HTML Tag Element Attribute
Tag Adalah teks khusus (markup) berupa dua karakter "<" dan ">", sebagai contoh <body> adalah tag dengan nama body. Secara umum tag ditulis secara berpasangan, yang terdiri atas tag pembuka dan tag penutup (ditambahkan karakter "/" setelah karakter "<"), sebagai contoh <body> ini adalah tag pembuka isi dokumen HTML, dan </body> ini adalah tag penutup isi dokumen HTML.
Tag boleh ditulis dalam huruf kecil maupun kapital. Tag harus berpasangan, yaitu tag awal diikuti tag akhir, kecuali tag tunggal. <p> teks </p>, <br> Penulisan tag tidak boleh tumpang tindih. <tag1><tag2> teks </tag1></tag2> → penulisan yang salah <tag1><tag2> teks </tag2></tag1> → penulisan yang benar
Element Element terdiri atas tiga bagian, yaitu tag pembuka, isi, dan tag penutup. Sebagai contoh untuk menampilkan judul dokumen HTML pada web browser digunakan element title: <title>FTI UKSW</title> <title> ini adalah tag pembuka judul dokumen HTML Disini Judul Dokumen HTML ini adalah isi judul dokumen HTML </title> ini adalah tag penutup judul dokumen HTML
Attribute Attribute mendefinisikan property dari suatu element HTML, yang terdiri atas nama dan nilai. Penulisannya adalah sebagai berikut: <tag nama-attr=“nilai-attr” nama-attr=“nilai-attr”> ................. </tag>
Contoh <html> <HEAD> <TITLE>Judul dokumen</TITLE> </HEAD> <body> <h1>My First Heading</h1> <p>My first paragraph</p> </body> </html>
... Ditulis dalam tag <html></html> yang menunjukkan sebuah halaman web. Tag <header></header> menandai bagian header dokumen html. Text di antara <body></body> merupakan konten halaman yang ditampilkan.
Tag Judul (Heading) <hn>Judul paragraf</hn> n = 1,2,3,4,5,6 (tingkat judul) Untuk menuliskan judul suatu paragraf.
Tag Paragraf <p>paragraf</p> Untuk menandai suatu paragraf. Suatu paragraf akan terlihat dibatasi oleh satu baris kosong sebelum dan sesudahnya.
Text Formating (Bold, Italic, Underline) <b>Kalimat yang dicetak tebal</b> <i>Kalimat yang dicetak miring</i> <u>Kalimat yang digarisbawahi</u>
Text Formating (Superscript, Subscript) <sup>bagian yang dicetak tinggi</sup> <sub>bagian yang dicetak rendah</sub> Untuk menandai bagian karakter agar dicetak tinggi atau rendah, biasanya untuk rumus matematika atau kimia.
Tag Ganti Baris (Break Line) Untuk pindah ke baris berikutnya. Bentuk penulisan lain yang dianjurkan (XML style) : <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 Link (Anchor) <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.
...
Frame Frame membagi layar dalam beberapa jendela, dimana masingmasing layar menampilkan web page yang berbeda. Tag Dasar: <frameset> . . . . </frameset> <frame/> <noframes> . . . . </noframes> Basic Atributes - cols = “values” …. (value biasanya dituliskan dalam % menunjukkan besar pembagian area. - rows = “values” - name = “frame_name” - src = “frame_source(url)” - target = “frame_name”
...
Terima Kasih