HTML HTML Hyper Text Markup Language Mark up

HTML (Hyper Text Markup Language) • Mark up : informasi tambahan yang ditempatkan pada

HTML (Hyper Text Markup Language) • HTML adalah format standar untuk menulis dokumen web

HTML Authoring Tools • Text Editor – – – – notepad (Windows) vi (Unix)

Daftar Tag <html> Dokumen <head> Header <title> Judul dokumen <body> Isi dokumen <h 1>

Mengenai Penulisan Tag • Tag dibentuk oleh suatu kata (keyword) yang diapit oleh tanda

Skema Dasar HTML <HTML> <HEAD> <TITLE>Judul dokumen </TITLE> </HEAD> <BODY> Isi Dokumen </BODY> </HTML>

Mengenai Penulisan HTML • Browser HTML menginterpretasikan satu atau beberapa space yang berdekatan sebagai

Tag Dasar • HTML • Head • Title • Body : menandai awal dan

Tag Judul (Heading) <hn>Judul paragraf</hn> n = 1, 2, 3, 4, 5, 6 (tingkat

Tag Paragraf (Paragraph) <p>paragraf</p> Untuk menandai suatu paragraf. Suatu paragraf akan terlihat dibatasi oleh

Tag Atribut 1 (Bold, Italic, Underline) <b>Kalimat yang dicetak tebal</b> <i>Kalimat yang dicetak miring</i>

Tag Atribut 2 (Superscript, Subscript) <sup>bagian yang dicetak tinggi</sup> <sub>bagian yang dicetak rendah</sub> Untuk

Tag Ganti Baris (Break Line) Untuk pindah ke baris berikutnya. Bentuk penulisan lain yang

Tag Font (Size) Memformat suatu bagian kalimat dengan ukuran tertentu. Tag : font Parameter

Tag Font (Face) Memformat suatu bagian kalimat dengan jenis huruf tertentu. Tag : font

Tag Font (Color) Memformat suatu bagian kalimat dengan warna tertentu. Tag : font Parameter

Tag Enumerasi (List, Unordered List, Ordered List) <li>item</li> Untuk menandai suatu item dari daftar

Tag Enumerasi (List, Unordered List, Ordered List)

Tag Garis Mendatar (Horizontal Line) <hr> Membentuk garis pemisah mendatar. <hr />

Tag Gambar (Image) <img src='data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20760%20570%22%3E%3C/svg%3E' data-src="Nama. File. Gambar"> Nama. File. Gambar = file gambar yang

Area Map Kotak <area shape = “rect” coords = “ 0, 0, 50” title

Area Map Lingkaran <area shape = “circle” coords = “ 75, 5” title =

Area Map Poly <area shape = “poly” coords = “ 100, 120, 50, 100,

Tag Link <a href = "Link">Kata yang di-click</a> <a name = "#Acuan">Kata yang dituju</a>

Frame • Frame membagi layar dalam beberapa jendela, dimana masing-masing layar menampilkan web page

Frame <frameset rows=30%, *”> <frame src='data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20760%20570%22%3E%3C/svg%3E' data-src=“banner. htm”/> <frameset cols = “ 25%, 75%”> <frame

Tag Tabel (Table) - Data <table> definisi tabel </table> Tag untuk penanda baris adalah

Tag Tabel (Table) - Layout Untuk menata letak (layout) isi dokumen

Slides: 31

Download presentation

HTML

HTML (Hyper Text Markup Language) • Mark up : informasi tambahan yang ditempatkan 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) • HTML : format standar untuk membuat dokumen web • 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 (Hyper Text Markup Language) • HTML adalah format standar untuk menulis dokumen web contoh dokumen HTML: <html> <head> </head> <body> </html> <title>My first HTML document</title> Hello world! Welcome to my first HTML page. • Hasil tampilan: Hello world! Welcome to my first HTML page.

HTML Authoring Tools • Text Editor – – – – notepad (Windows) vi (Unix) Edit Plus (Windows) Crimson Editor (Windows) Ultra Edit (Windows) joe(Linux) dll • Visual Editor – Macromedia Dream Weaver – MS Word – dll

Daftar Tag <html> Dokumen <head> Header <title> Judul dokumen <body> Isi dokumen <h 1> Judul paragraf Paragraf Atribut Ganti baris Font <li> Enumerasi <hr> Garis mendatar <img> Gambar <a> Link (kaitan) <table> Tabel  Komentar

Mengenai 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 diikuti tag akhir, kecuali tag tunggal teks , • Diantara tag awal dan tag akhir bisa terdapat tag lain • Penulisan tag tidak boleh tumpang tindih <tag 1><tag 2> teks</tag 1></tag 2> →penulisan yang salah <tag 1><tag 2> teks</tag 2></tag 1> →penulisan yang benar

Skema Dasar HTML <HTML> <HEAD> <TITLE>Judul dokumen </TITLE> </HEAD> <BODY> Isi Dokumen </BODY> </HTML>

Mengenai Penulisan HTML • Browser HTML menginterpretasikan satu atau beberapa space yang berdekatan sebagai sebuah space teks dianggap sebagai : teks • Browser HTML menginterpretasikan enter dan tab sebagai sebuah space. • Ada beberapa karakter khusus yang direpresentasikan dengan kode tertentu – – – &nbsp &lt &gt &amp &quot &apos : spasi : < : > : & : “ : ‘

Tag Dasar • HTML • Head • Title • Body : menandai awal dan akhir dokumen HTML <html>dokumen</html> : menandai bagian header dokumen HTML <head>header</head> : memberi judul pada dokumen HTML <title>judul dokumen</title> : menandai awal dan akhir isi dokumen <body>isi dokumen</body> <body text="#xxxxxx" bgcolor="#xxxxxx" background="filegambar" link="#xxxxxx" vlink="#xxxxxx">isi dokumen</body>

Tag Judul (Heading) <hn>Judul paragraf</hn> n = 1, 2, 3, 4, 5, 6 (tingkat judul) Untuk menuliskan judul suatu paragraf

Tag Paragraf (Paragraph) paragraf Untuk menandai suatu paragraf. Suatu paragraf akan terlihat dibatasi oleh satu baris kosong sebelum dan sesudahnya.

Tag Atribut 1 (Bold, Italic, Underline) Kalimat yang dicetak tebal Kalimat yang dicetak miring Kalimat yang digaris bawah Untuk menandai bagian kalimat agar dicetak tebal, miring, dan/atau digaris bawah.

Tag Atribut 2 (Superscript, Subscript) bagian yang dicetak tinggi bagian yang dicetak rendah 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) :

Tag Font (Size) Memformat suatu bagian kalimat dengan ukuran tertentu. Tag : font Parameter : size

Tag Font (Face) Memformat suatu bagian kalimat dengan jenis huruf tertentu. Tag : font Parameter : face

Tag Font (Color) Memformat suatu bagian kalimat dengan warna tertentu. Tag : font Parameter : color

Tag Enumerasi (List, Unordered List, Ordered 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>

Tag Enumerasi (List, Unordered List, Ordered List)

Tag Garis Mendatar (Horizontal Line) <hr> Membentuk garis pemisah mendatar. <hr />

Tag Gambar (Image) <img src='data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20415%20289%22%3E%3C/svg%3E' data-src="Nama. File. Gambar"> Nama. File. Gambar = file gambar yang

Tag Gambar (Image) <img src="Nama. File. Gambar"> Nama. File. Gambar = file gambar yang mempunyai ekstensi. GIF, . JPG, atau. PNG. Untuk menampilkan sebuah file gambar. <img src="Nama. File. Gambar" />

<img src = “Logo. Gunadarma. jpg” alt = “Logo Gunadarma” width = “ 60” height = “ 60”> digunakan untuk menampilkan gambar dengan nama “Logo. Gunadarma. jpg” dengan ukuran lebar 60 pixel dan tinggi 60 pixel tanpa ada garis pinggir pada gambar, tetapi jika file gambar tidak ada, maka atribut alt akan berfungsi menampilkan sebuah kotak dengan ukuran yang sama dan terdapat tulisan di dalamnya “Logo Gunadarma”

Map <img src = “Logo. Gunadarma. jpg” alt = “Logo Gunadarma” usemap = “#contohmap” width = “ 128” height = “ 128”> <map name = “contohmap”> <area shape = “rect” coords = “ 0, 0, 50” title = “kotak” href = “kotak. html”> <area shape = “circle” coords = “ 75, 5” title = “lingkaran” href = “lingkaran. html”> <area shape = “poly” coords = “ 100, 120, 50, 100, 90, 80, 50” title = “belah ketupat” href = “ketupat. html”> </map>

Area Map Kotak <area shape = “rect” coords = “ 0, 0, 50” title = “kotak” href = “kotak. html”>

Area Map Lingkaran <area shape = “circle” coords = “ 75, 5” title = “lingkaran” href = “lingkaran. html”>

Area Map Poly <area shape = “poly” coords = “ 100, 120, 50, 100, 90, 80, 50” title = “belah ketupat” href = “ketupat. html”>

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.

Frame • Frame membagi layar dalam beberapa jendela, dimana masing-masing 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”

Frame <frameset rows=30%, *”> <frame src='data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20415%20289%22%3E%3C/svg%3E' data-src=“banner. htm”/> <frameset cols = “ 25%, 75%”> <frame

Frame <frameset rows=30%, *”> <frame src=“banner. htm”/> <frameset cols = “ 25%, 75%”> <frame src= “menu. htm”/> <frame src= “content. htm”/> </frameset>

Tag Tabel (Table) - Data <table> definisi tabel </table> Tag untuk penanda baris adalah <tr> definisi baris </tr> Tag untuk penanda kolom adalah <td> data </td> Contoh pendefinisian tabel :

Tag Tabel (Table) - Layout Untuk menata letak (layout) isi dokumen