HTML 1
Mark Up 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 (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) 2
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 3
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 4
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 tentang cara membuat <b><i>homepage</i></b>. </p> </body> </html> <!-- akhir dokumen HTML --> 5
6
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 7
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> 8
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>, ) 9
Basic Tags 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 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 Text Formatting Tags 10
Computer Output Tags 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 Citation, Quotations, and Definition Tags 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 11
HTML Entities Commonly Used Character Entities Result 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 12
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"> 13
Tag Judul (Heading) <hn>judul paragraf</hn> n = 1,2,3,4,5,6 (tingkat judul) Untuk menuliskan judul suatu paragraf 14
Tag Paragraf (Paragraph) <p>paragraf</p> Untuk menandai suatu paragraf. Suatu paragraf akan terlihat dibatasi oleh satu baris kosong sebelum dan sesudahnya. 15
Text Formatting 16
Tag Ganti Baris (Break line) <br> : Untuk pindah ke baris berikutnya. Bentuk penulisan lain yang dianjurkan (XML style) : <br /> 17
Tag Font (Size) 18
Tag Font (Face) 19
Tag Font (Color) 20
Tag List <ul> : unordered list <ol> : oredered list 21
Tag Garis Mendatar (Horizontal Line) <hr> : membentuk garis pemisah mendatar. Bentuk penulisan lain yang dianjurkan (XML style) : <hr /> 22
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" /> 23
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. 24
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> 25
Tag Tabel (Table) - layout Untuk menata letak (layout) isi dokumen (walaupun hakikatnya bukan untuk keperluan ini) 26
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 27