diinterpretasi bukan untuk tampilan

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 Homepage saya
Saya

Perkenalan

Perkenalkan, nama saya ..... Ini adalah homepage pertama saya, karena saya baru belajar tentang cara membuat homepage.
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:
• The end tag is a slash and the name surrounded by angle brackets
• 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 and • The text between the start and end tags is the element content • Not case sensitive, means the same as 8

HTML Tags • • • • • • • • • •

Basic (, ,
,
, …) Text Formatting (, , …) Links () Frames (, , …) Tables (
, ,
,
, …) Lists (
,
,
, …) Forms (
, , , …) Images (<img>, <map>, …) Head (<head>, <meta>, …) Scripts (<script>, <noscript>, …) 9<br /> <br /> Basic Tags<br /> <br /> Tag <b> <big> <em> <i> <small> <strong> <sub> <sup> <ins> <del><br /> <br /> Tag <html> <body> <h1> to <h6> <p> <br> <hr> <!--><br /> <br /> Description Defines bold text Defines big text Defines emphasized text Defines italic text Defines small text Defines strong text Defines subscripted text Defines superscripted text Defines inserted text Defines deleted text<br /> <br /> Description Defines an HTML document Defines the document's body Defines header 1 to header 6 Defines a paragraph Inserts a single line break Defines a horizontal rule Defines a comment<br /> <br /> Text Formatting Tags<br /> <br /> 10<br /> <br /> “Computer Output” Tags Tag <code> <kbd> <samp> <tt> <var> <pre><br /> <br /> Description Defines computer code text Defines keyboard text Defines sample computer code Defines teletype text Defines a variable Defines preformatted text<br /> <br /> Citation, Quotations, and Definition Tags Tag <abbr rel="nofollow"> <acronym rel="nofollow"> <address rel="nofollow"> <bdo> <blockquote> <q> <cite> <dfn><br /> <br /> Description Defines an abbreviation Defines an acronym Defines an address element Defines the text direction Defines a long quotation Defines a short quotation Defines a citation Defines a definition term<br /> <br /> 11<br /> <br /> HTML Entities • Commonly Used Character Entities Result Description non-breaking space < less than > greater than & ampersand " quotation mark ' apostrophe ¢ cent £ pound ¥ yen € euro § section © copyright ® registered trademark × multiplication ÷ division<br /> <br /> Entity Name < > & " ' (does not work in IE) ¢ £ ¥ € § © ® × ÷<br /> <br /> Entity Number < > & " ' ¢ £ ¥ € § © ® × 12 ÷<br /> <br /> 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"><br /> <br /> 13<br /> <br /> Tag Judul (Heading) • <hn>Judul paragraf</hn> • n = 1,2,3,4,5,6 (tingkat judul) • Untuk menuliskan judul suatu paragraf<br /> <br /> 14<br /> <br /> Tag Paragraf (Paragraph) • <p>paragraf</p> • Untuk menandai suatu paragraf. • Suatu paragraf akan terlihat dibatasi oleh satu baris kosong sebelum dan sesudahnya.<br /> <br /> 15<br /> <br /> Text Formatting<br /> <br /> 16<br /> <br /> Tag Ganti Baris (Break line) • <br> : Untuk pindah ke baris berikutnya. • Bentuk penulisan lain yang dianjurkan (XML style) : <br /><br /> <br /> 17<br /> <br /> Tag Font (Size)<br /> <br /> 18<br /> <br /> Tag Font (Face)<br /> <br /> 19<br /> <br /> Tag Font (Color)<br /> <br /> 20<br /> <br /> Tag List • <ul> : unordered list • <ol> : oredered list<br /> <br /> 21<br /> <br /> Tag Garis Mendatar (Horizontal Line) • <hr> : membentuk garis pemisah mendatar. • Bentuk penulisan lain yang dianjurkan (XML style) : <hr /><br /> <br /> 22<br /> <br /> 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" /><br /> <br /> 23<br /> <br /> Tag Link (Anchor) • <a href="Link" rel="nofollow">Kata yang di-click</a> • <a name="#Acuan" rel="nofollow">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.<br /> <br /> 24<br /> <br /> 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><br /> <br /> 25<br /> <br /> Tag Tabel (Table) - layout • Untuk menata letak (layout) isi dokumen (walaupun hakikatnya bukan untuk keperluan ini)<br /> <br /> 26<br /> <br /> • Referensi : – http://www.w3schools.com/html/default.asp<br /> <br /> • 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<br /> <br /> </div> </div> </div> </div> </div> </div> </div> </div> <div class="modal fade" id="report" tabindex="-1" role="dialog" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <form role="form" method="post" action="https://adoc.pub/report/diinterpretasi-bukan-untuk-tampilan" style="border: none;"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">Report "diinterpretasi bukan untuk tampilan"</h4> </div> <div class="modal-body"> <div class="form-group"> <label>Your name</label> <input type="text" name="name" required="required" class="form-control" /> </div> <div class="form-group"> <label>Email</label> <input type="email" name="email" required="required" class="form-control" /> </div> <div class="form-group"> <label>Reason</label> <select name="reason" required="required" class="form-control"> <option value="">-Select Reason-</option> <option value="pornographic" selected="selected">Pornographic</option> <option value="defamatory">Defamatory</option> <option value="illegal">Illegal/Unlawful</option> <option value="spam">Spam</option> <option value="others">Other Terms Of Service Violation</option> <option value="copyright">File a copyright complaint</option> </select> </div> <div class="form-group"> <label>Description</label> <textarea name="description" required="required" rows="3" class="form-control" style="border: 1px solid #cccccc;">

Copyright © 2024 ADOC.PUB. All rights reserved.
About Us | Privacy Policy | Terms of Service | Copyright | Contact Us | Cookie Policy

Sign In

Email

Password

Remember me Forgot password?

Our partners will collect data and use cookies for ad personalization and measurement. Learn how we and our ad partner Google, collect and use data. Agree & close

diinterpretasi bukan untuk tampilan

Recommend Documents

Saya

Perkenalan

• The end tag is a slash and the name surrounded by angle brackets