Learning HTML involves... Learning how these elements are used Learning a list of elements.
HTML - ihsan.staff.gunadarma.ac.idihsan.staff.gunadarma.ac.id/Downloads/files/7818/03_HTML.pdf · 7...
Transcript of HTML - ihsan.staff.gunadarma.ac.idihsan.staff.gunadarma.ac.id/Downloads/files/7818/03_HTML.pdf · 7...
1
HTML
2
Mark Up Language
• Mark Up : informasi tambahan yang ditempatkan padateks untuk menjelaskan bagaimana teks tersebutdiinterpretasi
• Mark Up ditambahkan bukan untuk tampilan tetapiuntuk memberikan struktur interpretasi/pemberian arti
• HTML (HyperText 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)
3
HTML
• HTML : format standar untuk membuat dokumenweb
• HTML versi terakhir : HTML 4.01
• Spesifikasi HTML standar : http://www.w3.org/TR/html4
• HTML merupakan bahasa bertanda, menggunakanrangkaian teks tertentu (tag) untuk menandai teksyang mempunyai interpretasi khusus
• File HTML berupa file teks (plain text file), bukanbinary file
4
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
5
Contoh Dokumen HTML
<html><head><title>Homepage saya</title></head><body><h1>Saya</h1><h2>Perkenalan</h2><p>Perkenalkan, nama saya ..... Ini adalah <i>homepage</i><b>pertama</b> saya, karena saya baru belajar tentangcara membuat <b><i>homepage</i></b>.</p></body></html> <!-- akhir dokumen HTML -->
6
7
HTML Elements
• HTML documents are text files made up of HTML elements.
• HTML elements are defined using HTML tags.• Each HTML element has an element name (body, h1, p,
br) • The start tag is the name surrounded by angle
brackets: <h1> • The end tag is a slash and the name surrounded by
angle brackets </h1> • The element content occurs between the start tag and
the end tag • Some HTML elements have no content • Some HTML elements have no end tag
8
HTML Tags
• Used to mark-up HTML elements
• Surrounded by the two characters < and
>, called angle brackets
• Normally come in pairs like <b> and </b>
• The text between the start and end tags is the element content
• Not case sensitive, <b> means the same as <B>
9
HTML Tags
• Basic (<html>, <body>, <p>, <br>, …)
• Text Formatting (<b>, <i>, …)
• Links (<a>)
• Frames (<frameset>, <frame>, …)
• Tables (<table>, <th>, <tr>, <td>, …)
• Lists (<ul>, <ol>, <li>, …)
• Forms (<form>, <input>, <textarea>, …)
• Images (<img>, <map>, …)
• Head (<head>, <meta>, …)
• Scripts (<script>, <noscript>, …)
10
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 Description
<b> Defines bold text
<big> Defines big text
<em> Defines emphasized text
<i> Defines italic text
<small> Defines small text
<strong> Defines strong text
<sub> Defines subscripted text
<sup> Defines superscripted text
<ins> Defines inserted text
<del> Defines deleted text
Basic Tags
Text Formatting Tags
11
Tag Description
<abbr> Defines an abbreviation
<acronym> Defines an acronym
<address> Defines an address element
<bdo> Defines the text direction
<blockquote> Defines a long quotation
<q> Defines a short quotation
<cite> Defines a citation
<dfn> Defines a definition term
Tag Description
<code> Defines computer code text
<kbd> Defines keyboard text
<samp> Defines sample computer code
<tt> Defines teletype text
<var> Defines a variable
<pre> Defines preformatted text
“Computer Output” Tags
Citation, Quotations, and Definition Tags
12
HTML Entities
• Commonly Used Character EntitiesResult Description Entity Name Entity Number
non-breaking space  
< less than < <
> greater than > >
& ampersand & &
" quotation mark " "
' apostrophe ' (does not work in IE) '
¢ cent ¢ ¢
£ pound £ £
¥ yen ¥ ¥
€ euro € €
§ section § §
© copyright © ©
® registered trademark ® ®
× multiplication × ×
÷ division ÷ ÷
13
HTML Attributes
• Attributes provide additional information to an
HTML element.
• Attributes always come in name/value pairs like
this: name="value".
• Attributes are always specified in the start tag of
an HTML element.
• Example :
– <h1 align="center">This is heading 1</h1>
– <body bgcolor="yellow"> Colored Background! </body>
– <table border="1">
14
Tag Judul (Heading)
• <hn>Judul paragraf</hn>
• n = 1,2,3,4,5,6 (tingkat judul)
• Untuk menuliskan judul suatu paragraf
15
Tag Paragraf (Paragraph)
• <p>paragraf</p>
• Untuk menandai suatu paragraf.
• Suatu paragraf akan terlihat dibatasi oleh satu bariskosong sebelum dan sesudahnya.
16
Text Formatting
17
Tag Ganti Baris (Break line)
• <br> : Untuk pindah ke baris berikutnya.
• Bentuk penulisan lain yang dianjurkan (XML
style) : <br />
18
Tag Font (Size)
19
Tag Font (Face)
20
Tag Font (Color)
21
Tag List
• <ul> : unordered list
• <ol> : oredered list
22
Tag Garis Mendatar (Horizontal Line)
• <hr> : membentuk garis pemisah mendatar.
• Bentuk penulisan lain yang dianjurkan (XML
style) : <hr />
23
Tag Gambar (Image)
• <img src="NamaFileGambar"> NamaFileGambar = file gambar yang mempunyai ekstensi .GIF, .JPG, atau.PNG.
• Bentuk penulisan lain yang dianjurkan (XML style) : <img src="NamaFileGambar" />
24
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.
25
Tag Tabel (Table) - data
• <table> definisi tabel </table> : Menampilkan data dalam bentuk tabel
• Tag untuk penanda baris adalah <tr> definisi baris </tr>
• Tag untuk penanda kolom adalah <td>data</td>
26
Tag Tabel (Table) - layout
• Untuk menata letak (layout) isi dokumen
(walaupun hakikatnya bukan untuk keperluan
ini)
27
• Referensi :
– http://www.w3schools.com/html/default.asp
• Tugas :
– Buatlah situs web pribadi anda
– Upload ke free hosting
– Tidak boleh menggunakan CMS
– Isi situs :
• CV (personal, pendidikan, pekerjaan, keahlian, dll)
• Resources (catatan, tugas kuliah, dll)
• Links : www.gunadarma.ac.id, studentsite.gunadarma.ac.id, dan lain-lain