21
MK Desain Grafis Web 2002/2003 by Ido Priyana Hadi : HTML : Apa itu? HTML = Hyper Text Markup Language HTML adalah dokumen text yang bisa dibaca untuk dipublikasikan di World Wide Web (WWW) Dalam file HTML terdapat "tag " atau kode- kode yang dimengerti oleh web browser dan dapat menampilkannya di layar monitor. 1

HTML : Apa itu? - faculty.petra.ac.idfaculty.petra.ac.id/ido/courses/grafis/HTML.pdf · Tag HTML ada 2 Macam. 1. Tag Tunggal menandai akhir dari sebuah paragraf

Embed Size (px)

Citation preview

MK Desain Grafis Web 2002/2003 by Ido Priyana Hadi :MK Desain Grafis Web 2002/2003 by Ido Priyana Hadi :

HTML : Apa itu?

HTML = Hyper Text Markup Language

HTML adalah dokumen text yang bisa dibaca untuk dipublikasikan di World Wide Web (WWW)

Dalam file HTML terdapat "tag" atau kode-kode yang dimengerti oleh web browser dan dapat menampilkannya di layar monitor.

1

Apa itu Tag HTML

1. Tag HTML adalah kode-kode special yang ditandai dengan karakter “<“ dan “>”

2. Tag HTML adalah penempatan atau nilai format teks yang memerintahkan browser untuk menampilkan sebuah dokumen html.

3. Tag HTML dibuat berpasangan, ada tag pembuka dan ada tag penutup.

4. Format umum tag HTML <nama_tag> Teks yg ditampilkan </nama_tag>

Tag HTML ada 2 Macam

1. Tag Tunggal <P> menandai akhir dari sebuah paragraf <BR> menandai akhir sebuah baris. <HR> membuat sebuah garis horisontal.

2. Tag Berpasangan<BODY> dan </BODY> menandai awal dan akhir dari tubuh dokumen.<B> dan </B> untuk membuat karakter cetak tebal<I> dan </I> untuk membuat karakter cetak miring

Struktur Dokumen HTML

Format dasar html :<html><head><title>Judul Dokumen</title></head><body>

Saya adalah mahasiswa Universitas Kristen Petra.

</body></html>

Head dan Body

Dokumen HTML terbagi dalam dua bagian besar yaitu head dan body.

Bagian head berfungsi untuk memberikan informasi-informasi penting tentang dokumen HTML dan informasi tersebut TIDAK ditampilkan di layar monitor.

Bagian body berisi semua instruksi untuk mengatur seluruh tampilan halaman web di web browser dan informasi lain yang tidak termasuk dalam bagian head.

Bentuk HTML Sederhana

<html> <head> <title>Halaman sederhana...</title> </head>

<!-- bagian header berisi informasi tambahan yang menjelaskan dokumen dan tidak ditampilkan -->

<body>

<!-- semua instruksi untuk mengatur tampilan --><h3> Halaman web sederhana... </h3> </body> </html>

Latihan 1 : HTML Teks

Ketikan :1. <p>Ini adalah contoh text html untuk

sebuah paragraf.</p>2. <em>Ini contoh italic text.</em>3. <strong>Ini adalah sebuah contoh dari

bold text</strong>4. <div align="center">Centered

text.</div>5. <!-- ini hanya untuk latihan saja -->

Kesimpulan : HTML Teks

- - ><! - -Comment tags

(none)&nbspNon breaking space

(none)<br>Line break</strong> atau </b><strong> atau <b>Bold</em> atau </I><em> atau <I> Italic</div><div align=“center”>Center</p><p>Paragraph

Tag PenutupTag Pembuka

Latihan 2 : HTML bulleted list unordered list (ul) + ordered list (ol)

<h4>PCU Faculties</h4><ul>

<li>Letters</li><li>Civil Engineering</li><li>Communications Science</li>

</ul> Ubahlah bullet ke square dan cyrcle<h4>PCU Faculties</h4><ul type=“square”> atau type=“cyrcle”>

<li>Letters</li><li>Civil Engineering</li><li>Communications Science</li>

</ul>

Latihan 2 : HTML bulleted list unordered list (ul) + ordered list (ol)

<h4>PCU Faculties</h4><ol><li>Letters</li><li>Civil Engineering</li><li>Communications Science</li></ol>

Latihan 3 : HTML Heading

<html><head><title>Welcome to my Course Web Page</title></head><body bgcolor = white text = black link = blue alink = blue vlink = grey><h2>Introduction to the Internet</h2></body></html>

HTML tags : Tabel

Topic yang relevan tag <PRE>hanya saja berlaku untuk text, TIDAK untuk gambar/images

Tag table <TABLE>

</TABLE>Di dalam table ada baris dan kolom. Cell: kotak dalam table

HTML tags : Tabel 1

Tag html yang berada di dalam table– Caption menunjukkan judul table

Atribut: Align=“"top“|"bottom“|"left“|"right"

– TR table rowTag HTML didalam TR:• TH table header/judul kolom• TD table data/kolom

HTML tags : Tabel 2

Contoh table sederhana<TABLE border=1> <caption align="bottom">Judul table</caption> <TR>

<TH>judul kolom 1 <TH>judul kolom 2 </TH> </TR> <TR>

<TD> 0.32 </TD> <TD> 1.2 </TD>

</TR> <TR>

<TD> alfa </TD> <TD> beta</TD>

</TR> </TABLE>

HTML tags : Tabel 3

Beberapa hal yang harus diingat– TH, TD dan TR adalah tag berpasangan– Defaultnya, table tidak memiliki border

Atribut table– Width– Border– Cellpadding space between cell content and cell

border– Cellspacing space between cells

HTML tags : Tabel 4

Atribut TR, TD dan TH– ALIGN ="left“ | "center" | "right”– VALIGN="top“ | "middle“ | "bottom“– Note: alignment TD dan TH dapat override alignment TR

Contoh:<table border width=40%> <TR>

<TD>4.11<BR>aaaa</TD> <TD> 4.23 </TR><TR ALIGN="center" VALIGN="center"> <TD>4.11<BR>aaaa</TD>

<TD> 4.23 </TR> <TR ALIGN="center" VALIGN="center"> <TD>4.11<BR>aaaa</TD>

<TD VALIGN="top"> 4.23</TR> </table>

HTML tags : Tabel 5

Atribut TD dan TH untuk merge cell– COLSPAN jumlah kolom – ROWSPAN jumlah baris<TABLE BORDER WIDTH=40%> <TR>

<TD> 1.1 <TD> 1.2 <TD> 1.3 <TD> 1.4 </TR><TR>

<TD> 2.1 <TD COLSPAN=2> 2.2 <TD> 2.4 </TR><TR>

<TD> 3.1 <TD> 3.2 <TD ROWSPAN=3> 3.3 <TD> 3.4 </TR>

<TR> <TD> 4.1 <TD> 4.2 <TD> 4.4 </TR>

<TR> <TD> 5.1 <TD> 5.2 <TD> 5.4 </TR>

</TABLE>

Kesimpulan : HTML Table

Latihan 4 : HTML Tabel

<table border=1 bgcolor=white><tr bgcolor=yellow align=center><th>Nama</th><th>umur</th><th>Telpon</th></tr><tr align=center><td>Agus Cahyono</td><td>22</td><td>8437102</td></tr><tr align=center><td>Esther Kuncoro</td><td>28</td><td>8437103</td></tr>

</table>Buat versi lain!

HTML Tag : Images

Untuk menyisipkan gambar kita dapat memanfaatkan tag <IMG>

Format file gambar yang bisa ditampilkan bisa bermacam-macam, misalnya jp, jpeg, pcx, gif, psd

<IMG src="url_file" width="img_width" height="img_height" vspace="10" hspace="10" alt="alt_teks">

HTML Tag : Hyperlink

Hyperlink :dapat diletakkan pada teks ataupun pada sebuah image.

Bila diletakkan pada teks maka teks tersebut (secara default) akan digaris-bawahi dan warnanya menjadi berbeda.

<A href="url_file_tujuan#section">Teks hyperlink </A>

Mailto :<a href="mailto:[email protected]">Kirim

email</a>