html -...
TRANSCRIPT
![Page 1: HTML - ivan_maurits.staff.gunadarma.ac.idivan_maurits.staff.gunadarma.ac.id/Downloads/files/7540/minggu2_… · Pemrograman Web/MI/D3/2 sks 10 Tag Judul (Heading) Judul](https://reader034.vdocuments.site/reader034/viewer/2022052615/608f1392b2fdb528f6486ed5/html5/thumbnails/1.jpg)
Pemrograman Web/MI/D3/2 sks 1
HTML
Minggu 2
![Page 2: HTML - ivan_maurits.staff.gunadarma.ac.idivan_maurits.staff.gunadarma.ac.id/Downloads/files/7540/minggu2_… · Pemrograman Web/MI/D3/2 sks 10 Tag Judul (Heading) Judul](https://reader034.vdocuments.site/reader034/viewer/2022052615/608f1392b2fdb528f6486ed5/html5/thumbnails/2.jpg)
Pemrograman Web/MI/D3/2 sks 2
HTML (HyperText Markup Language)
Mark up : informasi tambahan yang ditempatkan pada teks untukmenjelaskan bagaimana teks tersebut diinterpretasi
Mark up ditambahkan bukan untuk tampilan tetapi untukmemberikan struktur interpretasi/pemberian arti
HTML (HyperText Markup Language) merupakan subset dariSGML (Standard Generalized Markup Language)
HTML : format standar untuk membuat dokumen webHTML versi terakhir : HTML 4.01Spesifikasi HTML standar : http://www.w3.org/TR/html4HTML merupakan bahasa bertanda,menggunakan rangkaian
teks tertentu (tag) untuk menandai teks yang mempunyaiinterpretasi khusus
File HTML berupa file teks (plain text file), bukan binary file
![Page 3: HTML - ivan_maurits.staff.gunadarma.ac.idivan_maurits.staff.gunadarma.ac.id/Downloads/files/7540/minggu2_… · Pemrograman Web/MI/D3/2 sks 10 Tag Judul (Heading) Judul](https://reader034.vdocuments.site/reader034/viewer/2022052615/608f1392b2fdb528f6486ed5/html5/thumbnails/3.jpg)
HTML (HyperText Markup Language)
HTML adalah format standar untuk menulis dokumen webcontoh dokumen HTML:
hasil tampilan :
<html><head>
<title>My first HTML document</title></head><body>
<p>Hello world!<br>Welcome to my <b>first</b> HTML page.
</p></body></html>
Hello world!Welcome to my first HTML page.
Pemrograman Web/MI/D3/2 sks 3
![Page 4: HTML - ivan_maurits.staff.gunadarma.ac.idivan_maurits.staff.gunadarma.ac.id/Downloads/files/7540/minggu2_… · Pemrograman Web/MI/D3/2 sks 10 Tag Judul (Heading) Judul](https://reader034.vdocuments.site/reader034/viewer/2022052615/608f1392b2fdb528f6486ed5/html5/thumbnails/4.jpg)
Pemrograman Web/MI/D3/2 sks 4
HTML Authoring Tools
Visual Editor• Macromedia DreamWeaver• MS Word• dl
Text Editor• OS default– notepad (Windows)– vi (Unix)• Third party– EditPlus, Crimson Editor, UltraEdit
(Windows)– joe (Linux)– dl
l
l
![Page 5: HTML - ivan_maurits.staff.gunadarma.ac.idivan_maurits.staff.gunadarma.ac.id/Downloads/files/7540/minggu2_… · Pemrograman Web/MI/D3/2 sks 10 Tag Judul (Heading) Judul](https://reader034.vdocuments.site/reader034/viewer/2022052615/608f1392b2fdb528f6486ed5/html5/thumbnails/5.jpg)
Pemrograman Web/MI/D3/2 sks 5
Daftar Tag
<br> Ganti baris<font> Fontd<li> Enumerasi<hr> Garis mendatar<img> Gambar<a> Link (kaitan)<table> Tabel<!-- --> Komentar
<html> Dokumen<head> Header<title> Judul dokumen<body> Isi dokumen<h1> Judul paragraf<p> Paragraf<b> <i> <u><sup> <sub> Atribut
![Page 6: HTML - ivan_maurits.staff.gunadarma.ac.idivan_maurits.staff.gunadarma.ac.id/Downloads/files/7540/minggu2_… · Pemrograman Web/MI/D3/2 sks 10 Tag Judul (Heading) Judul](https://reader034.vdocuments.site/reader034/viewer/2022052615/608f1392b2fdb528f6486ed5/html5/thumbnails/6.jpg)
Pemrograman Web/MI/D3/2 sks 6
Mengenai Penulisan Tag
• Tag dibentuk oleh suatu kata (keyword) yang diapit oleh tanda kurunglancip (<tag>)
• Tag boleh ditulis dalam huruf kecil maupun kapital• Tag harus berpasangan, yaitu tag awal diikuti tag akhir, kecuali tag
tunggal<p> teks </p>, <br>
• Di antara tag awal dan tag akhir bisa terdapat tag lain• Penulisan tag tidak boleh tumpang tindih<tag1><tag2> teks </tag1></tag2> → penulisan yang salah<tag1><tag2> teks </tag2></tag1> → penulisan yang benar
![Page 7: HTML - ivan_maurits.staff.gunadarma.ac.idivan_maurits.staff.gunadarma.ac.id/Downloads/files/7540/minggu2_… · Pemrograman Web/MI/D3/2 sks 10 Tag Judul (Heading) Judul](https://reader034.vdocuments.site/reader034/viewer/2022052615/608f1392b2fdb528f6486ed5/html5/thumbnails/7.jpg)
Pemrograman Web/MI/D3/2 sks 7
Skema Dasar HTML
<HTML>
<HEAD><TITLE>Judul dokumen</TITLE></HEAD>
<BODY>Isi dokumen</BODY>
</HTML>
![Page 8: HTML - ivan_maurits.staff.gunadarma.ac.idivan_maurits.staff.gunadarma.ac.id/Downloads/files/7540/minggu2_… · Pemrograman Web/MI/D3/2 sks 10 Tag Judul (Heading) Judul](https://reader034.vdocuments.site/reader034/viewer/2022052615/608f1392b2fdb528f6486ed5/html5/thumbnails/8.jpg)
Pemrograman Web/MI/D3/2 sks 8
Mengenai Penulisan HTML
• Browser HTML menginterpretasikan satu atau beberapa space yang berdekatan sebagai sebuah spaceteks teks teks teks dianggap sebagai : teks teks teks teks
• Browser HTML menginterpretasikan Carriage Return (Enter) danindentasi (Tab) sebagai sebuah space
• Ada beberapa karakter khusus yang dapat direpresentasikan dengankode tertentu–   ; spasi– < ; <– > ; >– & ; &– " ; “– &apos ; ‘ (does not work in IE)
![Page 9: HTML - ivan_maurits.staff.gunadarma.ac.idivan_maurits.staff.gunadarma.ac.id/Downloads/files/7540/minggu2_… · Pemrograman Web/MI/D3/2 sks 10 Tag Judul (Heading) Judul](https://reader034.vdocuments.site/reader034/viewer/2022052615/608f1392b2fdb528f6486ed5/html5/thumbnails/9.jpg)
Pemrograman Web/MI/D3/2 sks 9
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>
![Page 10: HTML - ivan_maurits.staff.gunadarma.ac.idivan_maurits.staff.gunadarma.ac.id/Downloads/files/7540/minggu2_… · Pemrograman Web/MI/D3/2 sks 10 Tag Judul (Heading) Judul](https://reader034.vdocuments.site/reader034/viewer/2022052615/608f1392b2fdb528f6486ed5/html5/thumbnails/10.jpg)
Pemrograman Web/MI/D3/2 sks 10
Tag Judul (Heading)
<hn>Judul paragraf</hn>n = 1,2,3,4,5,6 (tingkat judul)Untuk menuliskan judul suatu paragraf
This is heading 1
This is heading 2
This is heading 3
This is heading 4
This is heading 5
This is heading 6
Use heading tags only for headings. Don't use them just to
make something bold. Use other tags for that.
<html><body><h1>This is heading 1</h1><h2>This is heading 2</h2><h3>This is heading 3</h3><h4>This is heading 4</h4><h5>This is heading 5</h5><h6>This is heading 6</h6><p>Use heading tags only for headings. Don't use them just to make something bold. Use other tags for that.</p></body></html>
![Page 11: HTML - ivan_maurits.staff.gunadarma.ac.idivan_maurits.staff.gunadarma.ac.id/Downloads/files/7540/minggu2_… · Pemrograman Web/MI/D3/2 sks 10 Tag Judul (Heading) Judul](https://reader034.vdocuments.site/reader034/viewer/2022052615/608f1392b2fdb528f6486ed5/html5/thumbnails/11.jpg)
Pemrograman Web/MI/D3/2 sks 11
Tag Paragraf (Paragraph)
<p>paragraf</p>Untuk menandai suatu paragraf.Suatu paragraf akan terlihat dibatasi oleh satu bariskosong sebelum dan sesudahnya.
![Page 12: HTML - ivan_maurits.staff.gunadarma.ac.idivan_maurits.staff.gunadarma.ac.id/Downloads/files/7540/minggu2_… · Pemrograman Web/MI/D3/2 sks 10 Tag Judul (Heading) Judul](https://reader034.vdocuments.site/reader034/viewer/2022052615/608f1392b2fdb528f6486ed5/html5/thumbnails/12.jpg)
Pemrograman Web/MI/D3/2 sks 12
Tag Atribut 1 (Bold, Italic, Underline)
<b>Kalimat yang dicetak tebal</b><i>Kalimat yang dicetak miring</i><u>Kalimat yang digarisbawahi</u>Untuk menandai bagian kalimat agar dicetak tebal,miring, dan/atau digarisbawahi.
![Page 13: HTML - ivan_maurits.staff.gunadarma.ac.idivan_maurits.staff.gunadarma.ac.id/Downloads/files/7540/minggu2_… · Pemrograman Web/MI/D3/2 sks 10 Tag Judul (Heading) Judul](https://reader034.vdocuments.site/reader034/viewer/2022052615/608f1392b2fdb528f6486ed5/html5/thumbnails/13.jpg)
Pemrograman Web/MI/D3/2 sks 13
Tag Atribut 2 (Superscript, Subscript)
<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.
![Page 14: HTML - ivan_maurits.staff.gunadarma.ac.idivan_maurits.staff.gunadarma.ac.id/Downloads/files/7540/minggu2_… · Pemrograman Web/MI/D3/2 sks 10 Tag Judul (Heading) Judul](https://reader034.vdocuments.site/reader034/viewer/2022052615/608f1392b2fdb528f6486ed5/html5/thumbnails/14.jpg)
Pemrograman Web/MI/D3/2 sks 14
Tag Ganti Baris (Break line)
<br>Untuk pindah ke baris berikutnya.Bentuk penulisan lain yang dianjurkan (XML style) :<br />
![Page 15: HTML - ivan_maurits.staff.gunadarma.ac.idivan_maurits.staff.gunadarma.ac.id/Downloads/files/7540/minggu2_… · Pemrograman Web/MI/D3/2 sks 10 Tag Judul (Heading) Judul](https://reader034.vdocuments.site/reader034/viewer/2022052615/608f1392b2fdb528f6486ed5/html5/thumbnails/15.jpg)
Pemrograman Web/MI/D3/2 sks 15
Tag Font (size)
Memformat suatu bagian kalimat dengan ukuran,jenis huruf, atau warna tertentu.Tag : font Parameter : size, face, color
![Page 16: HTML - ivan_maurits.staff.gunadarma.ac.idivan_maurits.staff.gunadarma.ac.id/Downloads/files/7540/minggu2_… · Pemrograman Web/MI/D3/2 sks 10 Tag Judul (Heading) Judul](https://reader034.vdocuments.site/reader034/viewer/2022052615/608f1392b2fdb528f6486ed5/html5/thumbnails/16.jpg)
Pemrograman Web/MI/D3/2 sks 16
Tag Font (face)
Memformat suatu bagian kalimat dengan ukuran,jenis huruf, atau warna tertentu.Tag : font Parameter : size, face, color
![Page 17: HTML - ivan_maurits.staff.gunadarma.ac.idivan_maurits.staff.gunadarma.ac.id/Downloads/files/7540/minggu2_… · Pemrograman Web/MI/D3/2 sks 10 Tag Judul (Heading) Judul](https://reader034.vdocuments.site/reader034/viewer/2022052615/608f1392b2fdb528f6486ed5/html5/thumbnails/17.jpg)
Pemrograman Web/MI/D3/2 sks 17
Tag Font (color)
Memformat suatu bagian kalimat dengan ukuran,jenis huruf, atau warna tertentu.Tag : font Parameter : size, face, color
![Page 18: HTML - ivan_maurits.staff.gunadarma.ac.idivan_maurits.staff.gunadarma.ac.id/Downloads/files/7540/minggu2_… · Pemrograman Web/MI/D3/2 sks 10 Tag Judul (Heading) Judul](https://reader034.vdocuments.site/reader034/viewer/2022052615/608f1392b2fdb528f6486ed5/html5/thumbnails/18.jpg)
Pemrograman Web/MI/D3/2 sks 18
Tag Enumerasi(List, Unnumbered List, Ordered List)
<li>item</li>Untuk menandai suatu item dari daftar (enumerasi), diawalidengan 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>
![Page 19: HTML - ivan_maurits.staff.gunadarma.ac.idivan_maurits.staff.gunadarma.ac.id/Downloads/files/7540/minggu2_… · Pemrograman Web/MI/D3/2 sks 10 Tag Judul (Heading) Judul](https://reader034.vdocuments.site/reader034/viewer/2022052615/608f1392b2fdb528f6486ed5/html5/thumbnails/19.jpg)
Pemrograman Web/MI/D3/2 sks 19
Tag Garis Mendatar (Horizontal Line)
<hr>membentuk garis pemisah mendatar.Bentuk penulisan lain yang dianjurkan (XML style) :<hr />
![Page 20: HTML - ivan_maurits.staff.gunadarma.ac.idivan_maurits.staff.gunadarma.ac.id/Downloads/files/7540/minggu2_… · Pemrograman Web/MI/D3/2 sks 10 Tag Judul (Heading) Judul](https://reader034.vdocuments.site/reader034/viewer/2022052615/608f1392b2fdb528f6486ed5/html5/thumbnails/20.jpg)
Pemrograman Web/MI/D3/2 sks 20
Tag Gambar (Image)
<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" />
![Page 21: HTML - ivan_maurits.staff.gunadarma.ac.idivan_maurits.staff.gunadarma.ac.id/Downloads/files/7540/minggu2_… · Pemrograman Web/MI/D3/2 sks 10 Tag Judul (Heading) Judul](https://reader034.vdocuments.site/reader034/viewer/2022052615/608f1392b2fdb528f6486ed5/html5/thumbnails/21.jpg)
Pemrograman Web/MI/D3/2 sks 21
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 ditujuAcuan = Kata sembarang sebagai penandamembentuk link ke URL/file/bagian dokumen lain.
![Page 22: HTML - ivan_maurits.staff.gunadarma.ac.idivan_maurits.staff.gunadarma.ac.id/Downloads/files/7540/minggu2_… · Pemrograman Web/MI/D3/2 sks 10 Tag Judul (Heading) Judul](https://reader034.vdocuments.site/reader034/viewer/2022052615/608f1392b2fdb528f6486ed5/html5/thumbnails/22.jpg)
Pemrograman Web/MI/D3/2 sks 22
Frame
![Page 23: HTML - ivan_maurits.staff.gunadarma.ac.idivan_maurits.staff.gunadarma.ac.id/Downloads/files/7540/minggu2_… · Pemrograman Web/MI/D3/2 sks 10 Tag Judul (Heading) Judul](https://reader034.vdocuments.site/reader034/viewer/2022052615/608f1392b2fdb528f6486ed5/html5/thumbnails/23.jpg)
Pemrograman Web/MI/D3/2 sks 23
Tag Tabel (Table) - dataMenampilkan data dalam bentuk tabelTabel didefinisikan dengan cara menyatakan baris-baris dan kolom-kolom.
Tag Penjelasan
<table> Mendefinisikan suatu tabel
<th> Mendefinisikan suatu judul tabel
<tr> Mendefinisikan suatu baris
<td> Mendefinisikan suatu cell(data) tabel
<caption> Mendefinisikan judul tabel ?????
<colgroup> Mendefinisikan group kolom dari table
<col> Mendefinisikan nilai atribute untuk satu atau lebih kolom dalam suatu tabel
<thead> Mendefinisikan suatu head tabel
<tbody> Mendefiniskan suatu body tabel
<tfoot> Mendefinisikan suatu footer tabel
![Page 24: HTML - ivan_maurits.staff.gunadarma.ac.idivan_maurits.staff.gunadarma.ac.id/Downloads/files/7540/minggu2_… · Pemrograman Web/MI/D3/2 sks 10 Tag Judul (Heading) Judul](https://reader034.vdocuments.site/reader034/viewer/2022052615/608f1392b2fdb528f6486ed5/html5/thumbnails/24.jpg)
Pemrograman Web/MI/D3/2 sks 24
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 :
![Page 25: HTML - ivan_maurits.staff.gunadarma.ac.idivan_maurits.staff.gunadarma.ac.id/Downloads/files/7540/minggu2_… · Pemrograman Web/MI/D3/2 sks 10 Tag Judul (Heading) Judul](https://reader034.vdocuments.site/reader034/viewer/2022052615/608f1392b2fdb528f6486ed5/html5/thumbnails/25.jpg)
Pemrograman Web/MI/D3/2 sks 25
Tag Tabel (Table) - layout
Untuk menata letak (layout) isi dokumen (walaupunhakikatnya bukan untuk keperluan ini)