html : apa itu? dan body dokumen html terbagi dalam dua bagian besar yaitu head dan body. bagian...
TRANSCRIPT
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) Non 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>