HTML : Apa itu? HTML = Hyper Text Markup Language. HTML adalah dokumen text yang bisa dibaca untuk dipublikasikan di World Wide Web (WWW)

Ukuran: px

Mulai penontonan dengan halaman:

Download "HTML : Apa itu? HTML = Hyper Text Markup Language. HTML adalah dokumen text yang bisa dibaca untuk dipublikasikan di World Wide Web (WWW)"

Ratna Setiawan
7 tahun lalu
Tontonan:

1 MK MK Desain Desain Grafis Grafis Web Web 2002/ /2003 by by Ido Ido Priyana Priyana Hadi 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 kodekode yang dimengerti oleh web browser dan dapat menampilkannya di layar monitor. 1

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

3 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

4 Struktur Dokumen HTML Format dasar html : <html> <head> <title>judul Dokumen</title> </head> <body> Saya adalah mahasiswa Universitas Kristen Petra. </body> </html>

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

6 Bentuk HTML Sederhana <html> <head> <title>halaman sederhana...</title> </head>  <body>  <h3> Halaman web sederhana... </h3> </body> </html>

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

8 Kesimpulan : HTML Teks Paragraph Center Italic Bold Line break Non breaking space Comment tags Tag Pembuka <p> <div align= center > <em> atau <I> <strong> atau <b> <br> &nbsp <! - - Tag Penutup </p> </div> </em> atau </I> </strong> atau </b> (none) (none) -->

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

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

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

12 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

13 HTML tags : Tabel 1 Tag html yang berada di dalam table Caption menunjukkan judul table Atribut: Align= "top "bottom "left "right" TR table row Tag HTML didalam TR: TH table header/judul kolom TD table data/kolom

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

15 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

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

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

18 Kesimpulan : HTML Table

19 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> </td></tr> <tr align=center> <td>esther Kuncoro</td><td>28</td> <td> </td></tr> </table> Buat versi lain!

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

21 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:saya@petra.com">kirim </a>

dokumen-dokumen yang mirip

Edisi UNIVERSITAS NEGERI SEMARANG. Badan Pengembangan Teknologi Informasi dan Komunikasi. Modul Pelatihan H T M L

Edisi UNIVERSITAS NEGERI SEMARANG. Badan Pengembangan Teknologi Informasi dan Komunikasi. Modul Pelatihan H T M L Edisi 1 UNIVERSITAS NEGERI SEMARANG Badan Pengembangan Teknologi Informasi dan Komunikasi Modul Pelatihan H T M L U N I V E R S I T A S N E G E R I S E M A R A N G Modul Pelatihan HTML Akhmad Munawar http://about.me/akhmad.munawar