+ All Categories
Home > Documents > HTML - ihsan.staff.gunadarma.ac.idihsan.staff.gunadarma.ac.id/Downloads/files/7818/03_HTML.pdf · 7...

HTML - ihsan.staff.gunadarma.ac.idihsan.staff.gunadarma.ac.id/Downloads/files/7818/03_HTML.pdf · 7...

Date post: 16-Oct-2020
Category:
Upload: others
View: 15 times
Download: 0 times
Share this document with a friend
27
1 HTML
Transcript
Page 1: HTML - ihsan.staff.gunadarma.ac.idihsan.staff.gunadarma.ac.id/Downloads/files/7818/03_HTML.pdf · 7 HTML Elements • HTML documents are text files made up of HTML elements. • HTML

1

HTML

Page 2: HTML - ihsan.staff.gunadarma.ac.idihsan.staff.gunadarma.ac.id/Downloads/files/7818/03_HTML.pdf · 7 HTML Elements • HTML documents are text files made up of HTML elements. • 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)

Page 3: HTML - ihsan.staff.gunadarma.ac.idihsan.staff.gunadarma.ac.id/Downloads/files/7818/03_HTML.pdf · 7 HTML Elements • HTML documents are text files made up of HTML elements. • HTML

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

Page 4: HTML - ihsan.staff.gunadarma.ac.idihsan.staff.gunadarma.ac.id/Downloads/files/7818/03_HTML.pdf · 7 HTML Elements • HTML documents are text files made up of HTML elements. • HTML

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

Page 5: HTML - ihsan.staff.gunadarma.ac.idihsan.staff.gunadarma.ac.id/Downloads/files/7818/03_HTML.pdf · 7 HTML Elements • HTML documents are text files made up of HTML elements. • HTML

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 -->

Page 6: HTML - ihsan.staff.gunadarma.ac.idihsan.staff.gunadarma.ac.id/Downloads/files/7818/03_HTML.pdf · 7 HTML Elements • HTML documents are text files made up of HTML elements. • HTML

6

Page 7: HTML - ihsan.staff.gunadarma.ac.idihsan.staff.gunadarma.ac.id/Downloads/files/7818/03_HTML.pdf · 7 HTML Elements • HTML documents are text files made up of HTML elements. • HTML

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

Page 8: HTML - ihsan.staff.gunadarma.ac.idihsan.staff.gunadarma.ac.id/Downloads/files/7818/03_HTML.pdf · 7 HTML Elements • HTML documents are text files made up of HTML elements. • HTML

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>

Page 9: HTML - ihsan.staff.gunadarma.ac.idihsan.staff.gunadarma.ac.id/Downloads/files/7818/03_HTML.pdf · 7 HTML Elements • HTML documents are text files made up of HTML elements. • HTML

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>, …)

Page 10: HTML - ihsan.staff.gunadarma.ac.idihsan.staff.gunadarma.ac.id/Downloads/files/7818/03_HTML.pdf · 7 HTML Elements • HTML documents are text files made up of HTML elements. • HTML

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

Page 11: HTML - ihsan.staff.gunadarma.ac.idihsan.staff.gunadarma.ac.id/Downloads/files/7818/03_HTML.pdf · 7 HTML Elements • HTML documents are text files made up of HTML elements. • HTML

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

Page 12: HTML - ihsan.staff.gunadarma.ac.idihsan.staff.gunadarma.ac.id/Downloads/files/7818/03_HTML.pdf · 7 HTML Elements • HTML documents are text files made up of HTML elements. • HTML

12

HTML Entities

• Commonly Used Character EntitiesResult Description Entity Name Entity Number

non-breaking space &nbsp; &#160;

< less than &lt; &#60;

> greater than &gt; &#62;

& ampersand &amp; &#38;

" quotation mark &quot; &#34;

' apostrophe &apos; (does not work in IE) &#39;

¢ cent &cent; &#162;

£ pound &pound; &#163;

¥ yen &yen; &#165;

€ euro &euro; &#8364;

§ section &sect; &#167;

© copyright &copy; &#169;

® registered trademark &reg; &#174;

× multiplication &times; &#215;

÷ division &divide; &#247;

Page 13: HTML - ihsan.staff.gunadarma.ac.idihsan.staff.gunadarma.ac.id/Downloads/files/7818/03_HTML.pdf · 7 HTML Elements • HTML documents are text files made up of HTML elements. • HTML

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">

Page 14: HTML - ihsan.staff.gunadarma.ac.idihsan.staff.gunadarma.ac.id/Downloads/files/7818/03_HTML.pdf · 7 HTML Elements • HTML documents are text files made up of HTML elements. • HTML

14

Tag Judul (Heading)

• <hn>Judul paragraf</hn>

• n = 1,2,3,4,5,6 (tingkat judul)

• Untuk menuliskan judul suatu paragraf

Page 15: HTML - ihsan.staff.gunadarma.ac.idihsan.staff.gunadarma.ac.id/Downloads/files/7818/03_HTML.pdf · 7 HTML Elements • HTML documents are text files made up of HTML elements. • HTML

15

Tag Paragraf (Paragraph)

• <p>paragraf</p>

• Untuk menandai suatu paragraf.

• Suatu paragraf akan terlihat dibatasi oleh satu bariskosong sebelum dan sesudahnya.

Page 16: HTML - ihsan.staff.gunadarma.ac.idihsan.staff.gunadarma.ac.id/Downloads/files/7818/03_HTML.pdf · 7 HTML Elements • HTML documents are text files made up of HTML elements. • HTML

16

Text Formatting

Page 17: HTML - ihsan.staff.gunadarma.ac.idihsan.staff.gunadarma.ac.id/Downloads/files/7818/03_HTML.pdf · 7 HTML Elements • HTML documents are text files made up of HTML elements. • HTML

17

Tag Ganti Baris (Break line)

• <br> : Untuk pindah ke baris berikutnya.

• Bentuk penulisan lain yang dianjurkan (XML

style) : <br />

Page 18: HTML - ihsan.staff.gunadarma.ac.idihsan.staff.gunadarma.ac.id/Downloads/files/7818/03_HTML.pdf · 7 HTML Elements • HTML documents are text files made up of HTML elements. • HTML

18

Tag Font (Size)

Page 19: HTML - ihsan.staff.gunadarma.ac.idihsan.staff.gunadarma.ac.id/Downloads/files/7818/03_HTML.pdf · 7 HTML Elements • HTML documents are text files made up of HTML elements. • HTML

19

Tag Font (Face)

Page 20: HTML - ihsan.staff.gunadarma.ac.idihsan.staff.gunadarma.ac.id/Downloads/files/7818/03_HTML.pdf · 7 HTML Elements • HTML documents are text files made up of HTML elements. • HTML

20

Tag Font (Color)

Page 21: HTML - ihsan.staff.gunadarma.ac.idihsan.staff.gunadarma.ac.id/Downloads/files/7818/03_HTML.pdf · 7 HTML Elements • HTML documents are text files made up of HTML elements. • HTML

21

Tag List

• <ul> : unordered list

• <ol> : oredered list

Page 22: HTML - ihsan.staff.gunadarma.ac.idihsan.staff.gunadarma.ac.id/Downloads/files/7818/03_HTML.pdf · 7 HTML Elements • HTML documents are text files made up of HTML elements. • HTML

22

Tag Garis Mendatar (Horizontal Line)

• <hr> : membentuk garis pemisah mendatar.

• Bentuk penulisan lain yang dianjurkan (XML

style) : <hr />

Page 23: HTML - ihsan.staff.gunadarma.ac.idihsan.staff.gunadarma.ac.id/Downloads/files/7818/03_HTML.pdf · 7 HTML Elements • HTML documents are text files made up of HTML elements. • HTML

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" />

Page 24: HTML - ihsan.staff.gunadarma.ac.idihsan.staff.gunadarma.ac.id/Downloads/files/7818/03_HTML.pdf · 7 HTML Elements • HTML documents are text files made up of HTML elements. • HTML

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.

Page 25: HTML - ihsan.staff.gunadarma.ac.idihsan.staff.gunadarma.ac.id/Downloads/files/7818/03_HTML.pdf · 7 HTML Elements • HTML documents are text files made up of HTML elements. • HTML

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>

Page 26: HTML - ihsan.staff.gunadarma.ac.idihsan.staff.gunadarma.ac.id/Downloads/files/7818/03_HTML.pdf · 7 HTML Elements • HTML documents are text files made up of HTML elements. • HTML

26

Tag Tabel (Table) - layout

• Untuk menata letak (layout) isi dokumen

(walaupun hakikatnya bukan untuk keperluan

ini)

Page 27: HTML - ihsan.staff.gunadarma.ac.idihsan.staff.gunadarma.ac.id/Downloads/files/7818/03_HTML.pdf · 7 HTML Elements • HTML documents are text files made up of HTML elements. • HTML

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


Recommended