·
cara menginstal XAMPP
·
latihan membuat web dengan Notepad
·
cara menyimpan latihan
·
pembahasan mengenai HTML
1. sejarah
HTML
2. elemen-elemen
HTML
3. Attribut
HTML
4. Heading
5. Paragraph
6. Komentar
<html>
<head>
<title>Belajar
HTML</title><!-ini judul HTML-->
</head>
<body>
<!-Sebuah
paragraf-->
<p>Ini
adalah sebuah Paragraf. </p>
<!-Menampilkan
baris horizontal-->
<hr/>
</body>
</html>
7. Line
break
<html>
<head>
<title>Belajar
HTML</title>
</head>
<body>
<p>Komputer
meruapakan <br/>suatu alat elektronika yang
dapat
menerima dan mengolah data menjadi informasi,
menjalankan
program yang tersimpan di dalam memori,
<br/>serta
dapat bekerja secara otomatis dengan aturan
tertentu.</p>
</body>
</html>
8. HTML
Formating
html>
<body>
<p><b>Teks cetak
tebal</b></p>
<p><i>Teks cetak
tebal</i></p>
<p>Tulisan<sub>subscript</sub>dan
<sup>Superscript</sup></p>
</body>
</html>
9. Style
HTML
<html>
<body
style="background-color:PowderBlue;">
<h1>perhatikan
!Style dan Warna</h1>
<p
style="font-family:verdana;color:red">
ini
adalah font Verdana Berwarna Merah</p>
<p
style="font-family:times;color:green">
Teks
ini berjenis font times berwarna Hijau</p>
<p
style="font-size:30px">This text is 30 pixels high</p>
</body>
</html>
HTML Elemen
·
Head
o
Base
Menentukan URL eksplisit yang digunakan
untuk semua URL relative dalam dokumen
Elemen ini sangat bermanfaat jika kita
ingin menyisipkan
contoh
o
Link
Untuk membuat link ke resorce eksternal
Elemen ini harus ditempatkan dibagian head
Contoh
<link rel =”
o
Meta
Berguna untuk menentukan informasi
umum tentang dokumen
Contoh :
<meta http-equiv=”content-Type”
o
Scrip
Tag script dapat ditempatkan dibagian head
ataupun body
Contoh :
<script type
o
Style
Elemen style memungkinkan kita untuk
memasukkan kode CSS ke dalam dokumen HTML
Contoh :
<style>
Body
{background-color:#00ff00;}
<style>
o
Title
Latihan
html>
<body>
<p><b>Teks cetak tebal</b></p>
<p><i>Teks cetak
tebal</i></p>
<p>Tulisan<sub>subscript</sub>dan
<sup>Superscript</sup></p>
</body>
</html>
Untuk mengatur paragaraf
<html>
<head>
<title>Penggunaan
Tag<p></title>
</head>
<body>
<p
align="left"><b>Teks ini berada di kiri</p>
<p
align="center"><b>Teks ini berada di tengah</p>
<p
align="right"><b>Teks ini berada di
kanan</b></p>
<p
align="justify">Paragraph ini bertipe justify. Dimana semuat teks
akan dibuat lurus sama
dengan
batas tepi halaman. Oh ya, tag <p></p> merupakan
default atau bentuk
baku
tag lt;p></p> dimana teks atau paragraf akan berformat
rata kiri. Jika anda
tidak
memberi atribut
align</i>pada
tag <p> maka browser akan menganggap rata kiri.</p>
<pre>1
2 3 4 5 </pre>
</body>
</html>
·
Font
<html>
<head><title>Contoh
Penggunaan Tag Font</title></head>
<body>
<p><font
name="Arial">Ini Font Arial</font></p>
<p><font
name="Arial"><i>Ini Font Arial dan
miring</i></font></p>
<p><font
face="verdana"size="4"color="blue">
<b>Ini
Font Verdana berukuran 12 pt berwarna biru sekaligus
tebal</b></font>
<p
align="center"><font
face="Tahoma"color="red">
<b>Ini
Font Tahoma berwarna merah, tebal dan berada di
tengah</b></font><p>
<p
align="center"><font face="Arial"
color="red">Ini Font Arial berwarna merah,</font><font
face="Verdana"color="blue">Sedangkan ini adalah font
Verdana berwarna biru</font></p>
</body>
</html>
<html>
<head><title>Penggunaan
tag ol,ul dan li</title></head>
<body>
<p><b>Penggunaan
tag ol dengan li</b></p>
<ol>
<li>Ini
nomor 1</li>
<li>Ini
nomor 2</li>
<li>Ini
nomor 3</li>
</ol>
<p><b>Penggunaan
tag ul dengan li</b></p>
<ul>
<li>Ini
bullet 1</li>
<li>Ini
bullet 2</li>
<li>Ini
bullet 3</li>
</ul>
</body>
</html>
·
Checkbox
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta
http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
<title>ChexBox</title>
</head>
<body>
<form
action="http://www.stimik.edu.id/pmrgweb/program/form.php"
"method="get" name="frmCV">
Pilih Istilah yang berhubungan
erat dengan pemrograman berbasis web.<br/>
<input
type="checkbox" name="chkSkills" value="html"/>HTML<br/>
<input
type="checkbox" name="chkSkills"
value="xhtml"/>XHTML<br/>
<input
type="checkbox" name="chkSkills"
value="CSS"/>CSS<br/>
<input
type="checkbox" name="chkSkills"
value="JavaScript"/>JavaScript<br/>
<input
type="checkbox" name="chkSkills"
value="fortran"/>fortran<br/>
<input
type="checkbox" name="chkSkills"
value="PHP"/>PHP
</form>
</body>
</html>
·
Password
<form>
Username:
<input
type="text" name="txtUsername" value=""
size="20" maxlength="20"/><br/><br/>
Password:
<input type="password"
name="pwdPassword" value="" size="20"
maxlength="20"/><br/><br/>
<input
type="submit" value="log in"/>
</form>
·
select box
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta
http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
<title>Select
box</title>
</head>
<body>
<form
action="http://www.stimik.edu.id/pmrgweb/program/form.php"
"method="get" name="frmCV">
<select size="4"
name="pilhari" multiple="multiple">
<option
value="sen">Senin</option>
<option
value="sel">Selasa</option>
<option
value="rab">Rabu</option>
<option
value="kam">Kamis</option>
<option
value="jum">Jumat</option>
<option
value="sab">Sabtu</option>
<option
value="min">Minggu</option>
</select>
<br /><br /><input
type="submit" value="submit"/>
</form>
</body>
</html>
·
select
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
<title>Select box</title>
</head>
<body>
<form
action="http://www.stimik.edu.id/pmrgweb/program/form.php" "method="get"
name="frmCV">
<select size="4" name="pilhari"
multiple="multiple">
<option
value="sen">Senin</option>
<option
value="sel">Selasa</option>
<option
value="rab">Rabu</option>
<option
value="kam">Kamis</option>
<option
value="jum">Jumat</option>
<option
value="sab">Sabtu</option>
<option
value="min">Minggu</option>
</select>
<br /><br /><input type="submit"
value="submit"/>
</form>
</body>
</html>
·
Komentar
<form
action="form.php" "method="post">
Komentar tentang website yang
anda sedang kunjungi:<br/>
<textarea
name="txtKomentar" rows="20" cols="50">
masukkan komentar anda disini.
</textarea>
<br />
<input type="submit"
value="submit"/>
</form>
·
Telusur
<head>
<title>Single
line text input control</title>
</head>
<body>
<form action="http://www.google.co.id/search"
method="get" name="frmSerch">
Telusur :
<input
type="text" name="q" value="Telusur"
size="20" maxlength="64"/>
<input
type="submit" value="Submit"/>
</form>
</body>
<html>
·
Optiongroup
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta
http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
<title>SelecInformasi</title>
</head>
<body>
<form
action="http://www.stimik.edu.id/pmrgweb/program/form.php"
"method="get" name="frmInfo">
Pilih produk:<br/>
<select
name="selInformasi">
<optgroup
Label="Hardware">
<option
value="Desktop">Komputer Desktop</option>
<option
value="Laptop">Komputer Laptop</option>
</optgroup>
<optgroup
Label="Software">
<option
value="OfficeSoftware">Office Software</option>
<option
value="Games">Games</option>
</optgroup>
<optgroup
Label="Peripheral">
<option
value="Monitor">Monitor</option>
<option
value="InputDevice">Perangkat Input</option>
<option
value="Penyimpana">Media Penyimpanan</option>
</optgroup>
</select>
<br /><br /><input
type="submit" value="submit"/>
</form>
</body>
</html>
·
Tagform
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta
http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
<title>Tagform</title>
</head>
<body>
<form action="http://www.stimik.edu.id/pmrgweb/program/form.php"
"method="get" name="frmFieldSet">
<fieldset>
<legend><em>Data
Pengguna</em></legend>
<table>
<tr>
<td
width="200"><label>Nama Lengkap:</label></td>
<td><input
type="text" name="txtLnama" size="50"/><td>
</tr>
<tr>
<td
width="200"><label>Nama Panggilan:</label></td>
<td><input
type="text" name="txtPNama"
size="50"/><td>
</tr>
<tr>
<td
width="200"><label>E-Mail:</label></td>
<td><input
type="text" name="txtemail"
size="50"/><td>
</tr>
</table>
</fieldset>
<fieldset>
<legend><em>Data
Alamat</em></legend>
<table>
<tr>
<td
width="200"><label>Jalan:</label></td>
<td><input
type="text" name="txtJalan"
size="20"/><td>
</tr>
<tr>
<td
width="200"><label>Provinsi:</label></td>
<td><input
type="text" name="txtProvinsi"
size="20"/><td>
</tr>
<tr>
<td
width="200"><label>Negara:</label></td>
<td><input
type="text" name="txtNegara"
size="20"/><td>
</tr>
</table>
</fieldset>
<fieldset>
<legend><em>Komentar</em></legend>
<label>Komentar
anda:<br/>
<textarea
name="txtTiebreaker" rows="10"
cols="40"></textarea>
</label>
</fieldset>
<fieldset>
<legend><em>Kirim
Data</em></legend>
<input
type="submit" value="kirim"/>
</fieldset>
</form>
</body>
</html>
Tidak ada komentar:
Posting Komentar