Adoc - Pub HTML Apa Itu HTML Hyper Text Markup Language HTML

MK
MKDesain
DesainGrafis
GrafisWeb
Web2002/2003
2002/2003by
byIdo
IdoPriyana
PriyanaHadi
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>

<body>

<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. 
Kesimpulan : HTML Teks
Tag Pembuka Tag Penutup

Paragraph <p> </p>
Center <div align=“center”> </div>
Italic <em> atau <I> </em> atau </I>
Bold <strong> atau <b> </strong> atau </b>
Line break <br> (none)
Non breaking &nbsp (none)
space
Comment tags <! - - -->
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
<ul type=“square”> atau type=“cyrcle”>
<li>Letters</li>
</ul>
Latihan 2 : HTML bulleted list
unordered list (ul) + ordered list (ol)
<ol>
<li>Letters</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 row
Tag 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:saya@petra.com">Kirim
email</a>

Bahasa

Adoc - Pub HTML Apa Itu HTML Hyper Text Markup Language HTML

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Adoc - Pub HTML Apa Itu HTML Hyper Text Markup Language HTML

Diunggah oleh

Hak Cipta:

Format Tersedia

MK

HTML : Apa itu?

HTML adalah dokumen text yang bisa dibaca

Dalam file HTML terdapat "tag" atau kode-

Format dasar html :

Dokumen HTML terbagi dalam dua bagian

Bagian head berfungsi untuk memberikan

Bagian body berisi semua instruksi untuk

Tag Pembuka Tag Penutup

Topic yang relevan Æ tag <PRE>hanya

Tag html yang berada di dalam

Beberapa hal yang harus diingat

Atribut TR, TD dan TH

Atribut TD dan TH untuk merge cell

<table border=1 bgcolor=white>

Untuk menyisipkan gambar kita

<IMG src="url_file" width="img_width"

Anda mungkin juga menyukai