3-Dasar Tag HTML

Dasar Tag HTML (2)
Dasar Tag HTML
 Images
Tag HTML untuk memasukkan gambar:

<img src=filename>
Catatan: img src=image source

Dasar Tag HTML
 Images
Images Properties:
 HSPACE = memberikan spasi di kanan dan di kiri gambar.

 VSPACE = memberikan spasi di atas dan di bawah gambar.
 WIDTH = untuk menset batas lebar / panjang gambar.
 HEIGHT = untuk menset tinggi gambar.
 BORDER = memberikan garis batas yang mengelilingi gambar.
Dasar Tag HTML
 Images
<html>
<head>
<title>Latihan 22</title>
</head>
<body>
<img src=test.gif
width=400 height=300>
</body>
</html>
Dasar Tag HTML
 Images
<html>
<head>
</head>
<body>
<h2 align=center>Images Center</h2>
<center>
<img src= test.jpg
width=400 height=300>
</center>
</body>
</html>
Dasar Tag HTML
 Images
<html>
<head>
</head>
<body>
<h2 align=center>Images Border</h2>
<center>
<img src= test2.jpg
width=400 height=300 border=1>
</center>
</body>
</html>
Dasar Tag HTML
 Images & Body Background
<html>
<head>
</head>
<body background=bg.gif>
</body>
</html>
 Images & Table
Dasar Tag HTML
<html>
<head>
</head>
<body>
<h3>Daftar Nama Siswa</h3>
<table border=1 cellpadding=3
cellspacing=3>
<tr align=center>
<td background=bg2.gif>NIM</td>
<td background=bg2.gif>NAMA
LENGKAP</td>
</tr>
<tr>
<td>04102001</td>
<td>Nur Qomari</td>
</tr>
</table>
</body></html>
 Images & Table Dasar Tag HTML
<html>
<head>
</head>
<body>
<table border=10 cellspacing=10 cellpadding=10>
<tr>
<td><img src=photo1.jpg width=200 height=200></td>
</tr>
<tr>
<td>Wallpaper1.JPG 800 X 600</td>
</tr>
</table>
</body>
</html>
Soal 1
 Tuliskan source code dari design
berikut
 notepad
Soal 2
Link
Tag Link pada HTML:

<a href=url/filename>……..</a>
Dasar Tag HTML
Catatan:
HREF=Hypertext REFerence
Link URL
<html>
<head>
</head>
<body>
<a href=http://yahoo.com>Yahoo</a>
Dasar Tag HTML <p>
<a href=http://google.com>Google</a>
</body>
</html>
Link File
<html>
<head>
</head>
<body>
<a href=latihan_27.html>Latihan 27</a>

Dasar Tag HTML <p>
<a href=latihan_28.html>Latihan 28</a>
</body>
</html>
Link E-mail
<a href=mailto:nama_email>Send to E-mail</a>
Dasar Tag HTML

Form
Awal formulir ditandai dengan Tag <FORM>, dan berisi dua kata kunci:
METHOD dan ACTION.
Dasar Tag HTML
<form name=nama_form method=post/get action=nama_file/email>

Form
<html>
<head>
</head>
Dasar Tag HTML <body>
<form name=mhs_baru method=post action=proses.php>
………………
</form>
</body>
</html>
Form Dasar Tag HTML
Input Text:
<input name=nama_input type=text size=lebar_input
maxlength=kar._maks.>
<html>
<head>
</head>
<body>
<h2>Form Mahasiswa</h2>
<form name=form_mahasiswa>
NIM<br>
<input name=nim type=text size=20
maxlength=8><br>
Nama Lengkap<br>
<input name=nama type=text size=40>
</form>
</body>
</html>
Form
Dasar Tag HTML
Radio Button:
<input name=nama_input type=radio checked>
<html>
<head>
</head>
<body>
<form name=form_jeniskelamin>
Jenis Kelamin:<br>
<input name=gender type=radio checked>
Laki-laki<br>
<input name=gender type=radio>
Perempuan
</form>
</body>
</html>
Dasar Tag HTML
Form
Check Box:
<input name=nama_input type=checkbox checked>
<html>
<head>
</head>
<body>
<form name=form_fak>
Fakultas Ilmu Komputer:<br>
<input name=si type=checkbox checked>
Sistem Informasi<br>
<input name=sk type=checkbox>
Sistem Komputer
</form>
</body>
</html>
Form
Drop-down List:
<select name=nama_list>
Dasar Tag HTML <option value=nama_opsi1>…</option>
<option value=nama_opsi2>…</option>
<option value=nama_opsi3>…</option>
</select>
Dasar Tag HTML
Form
Drop-down List:
<html>
<head>
</head>
<body>
<form name=list>
Level:<br>
<select name=level>
<option value=stand>Standart</option>
<option value=prof>Professional</option>
</select>
</form>
</body>
</html>
Form
Dasar Tag HTML Textarea:

<textarea name=nama_input rows=ukuran_tinggi cols=ukuran_lebar>
</textarea>
Dasar Tag HTML
Form
Textarea:
<html>
<head>
</head>
<body>
<form name=alamat>
Alamat:<br>
<textarea name=alamat rows=4 cols=40>
</textarea>
</form>
</body>
</html>
Form
Button:
<input type=submit/reset value=caption>
Dasar Tag HTML

Catatan:
type=submit, akan mendefinisikan sebagai tombol untuk menyerahkan
umpan balik.
type=reset, akan mendefinisikan tombol untuk menghapus isi formulir.

Dasar Tag HTML
Form
Button:
<html>
<head>
</head>
<body>
<form name=frm_submit method=post
action=latihan_39.html>
Alamat:<br>
<textarea name=alamat rows=4 cols=40>
</textarea><br>
<input type=submit value=Kirim>
<input type=reset value=Reset>
</form>
</body>
</html>
Dasar Tag HTML
 Soal (14)
Tuliskan Source Code dari tampilan berikut:
Catatan: Username dan Password panjang karakter = 10
Dasar Tag HTML
 Soal (15)
Dasar Tag HTML
 Soal (17)
Catatan: Nama dan Alamat tidak dapat ditulisi
Dasar Tag HTML
 Soal (18)
Dasar Tag HTML
Text Alignment
<html>
<head>
</head>
<body>
<h1 align=center>Text Alignment</h1>
<p align=center>Set in the centre of the window
<p>Back to Normal
<p align=right>Align to Right
<p align=left>Align to Left
</body>
</html>
Style pada Font
<b>……</b>
Tag ini untuk membuat bold (tebal)
<i>.…..</i>
Tag ini untuk membuat italic (miring)
Dasar Tag HTML <u>…..</u>

Tag ini untuk membuat underline (garis bawah)
<tt>…..<tt>
Tag ini untuk membuat huruf dengan efek mesin ketik (font Courier)
Dasar Tag HTML
Style pada Font
<html>
<head>
</head>
<body>
<b>If you set words in bold</b>
<p>
<i>If you set words in italic</i>
<p>
<u>If you set words in underline</u>
<p>
<tt>If you set words in typewriter</tt>
</body>
</html>
Background
<html>
<head>
</head>
<body bgcolor=blue>
Dasar Tag HTML </body>
</html>
Catatan:
*) Pemberian warna pada background dapat juga menggunakan kode
heksadesimal
Dasar Tag HTML
 Catatan:
Browser akan mengabaikan spasi yang berlebihan. Sehingga Anda dapat

membuat spasi sekehendak hati Anda untuk memudahkan pembacaan kode
Anda.
<html>
<head>
</head>
<body>
<h2>Words1 Words2</h2>
</body>
</html>
Bullet & Numbering
Variasi bullet pada HTML:
 Disc, memberikan efek lingkaran (default)

 Square, memberikan efek persegi empat
 Circle, memberikan efek lingkaran yang transparan
Dasar Tag HTML

 Bullet & Numbering
Dasar Tag HTML
<html>
<head>
</head>
<body>
<h3>Daftar Fakultas:
<ul type=disc>
<li>Fakultas Ekonomi</li>
<li>Fakultas Hukum</li>
<li>Fakultas Ilmu Komputer</li>
<li>Fakultas Teknik Sipil</li>
</ul>
</h3>
</body>
</html>
Catatan: ul = unordered list

li = list item
Bullet & Numbering
Daftar bernomor pada HTML:
 i adalah angka romawi kecil, misal: i,ii,iii,iv,dst

 I adalah angka romawi besar, misal: I,II,III,IV,dst
 a adalah huruf kecil, misal: a,b,c,d,dst
Dasar Tag HTML  A adalah huruf kapital, misal: A,B,C,D,dst
 1 adalah angka dalam standar, misal: 1,2,3,4,dst
Dasar Tag HTML
<html>
<head>
</head>
<body>
<ol type=A>
</ol>
</h3>
</body>
</html>
Catatan: ol = ordered list

Dasar Tag HTML
<html>
<head>
</head>
<body>
<ol type=a>
</ol>
</h3>
</body>
</html>
Dasar Tag HTML
<html>
<head>
</head>
<body>
<ol type=I>
</ol>
</h3>
</body>
</html>
Dasar Tag HTML
 Soal (6)
Dasar Tag HTML
 Soal (7)

3-Dasar Tag 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

3-Dasar Tag HTML

Diunggah oleh

Hak Cipta:

Format Tersedia

Dasar Tag HTML (2)

Dasar Tag HTML

Tag HTML untuk memasukkan gambar:

Catatan: img src=image source

 HSPACE = memberikan spasi di kanan dan di kiri gambar.

width=400 height=300 border=1>

 Images & Body Background

Tag Link pada HTML:

Dasar Tag HTML

Dasar Tag HTML <p>

<a href=latihan_27.html>Latihan 27</a>

<a href=latihan_28.html>Latihan 28</a>

<a href=mailto:nama_email>Send to E-mail</a>

Dasar Tag HTML

Dasar Tag HTML

<form name=nama_form method=post/get action=nama_file/email>

Dasar Tag HTML Textarea:

Dasar Tag HTML

type=reset, akan mendefinisikan tombol untuk menghapus isi formulir.

Dasar Tag HTML <u>…..</u>

Style pada Font

Browser akan mengabaikan spasi yang berlebihan. Sehingga Anda dapat

 Disc, memberikan efek lingkaran (default)

Dasar Tag HTML

Catatan: ul = unordered list

Daftar bernomor pada HTML:

 i adalah angka romawi kecil, misal: i,ii,iii,iv,dst

Catatan: ol = ordered list

Anda mungkin juga menyukai