Pembuatan Frame link gambar menggunakan notepad
Untuk memulai
HTML kita akan menggunakan Texs Editor, Notepad. Di bawah ini adalah
merupakan contoh suatu dokumen HTML yang sangat sederhana bahkan awal
tahap .
Buka Notepad, silahkan mulai dengan mengetikkan kode di bawah ini:
<html>
<head>
<title>Titel Websiteku</title>
</head>
<body> Ini adalah dokumen HTML pertamaku
</body>
</html>
Buka Notepad, silahkan mulai dengan mengetikkan kode di bawah ini:
<html>
<head>
<title>Titel Websiteku</title>
</head>
<body> Ini adalah dokumen HTML pertamaku
</body>
</html>
Tag pertama pada dokumen HTML diatas
adalah: " <html>" tag ini merupakan awal dari suatu dokumen
HTML, dan tag " </html>" merupakan akhir dari dokumen HTML. Isi
keseluruhan dari suatu dokumen HTML selalu berada diantara tag
<html>…</html>.
Kemudian tag "
<head>…</head>" (header) adalah informasi dari dokumen HTML.
Informasi di dalam header meliputi: title, meta, style, script dll. Selain
Title informasi di dalam header ini nantinya tidak akan di tampilkan di web
browser.
Tag berikutnya adalah "
<title>…</title>" merupakan bagian dari Head, tag ini adalah sebagai
Titel dari dokumen HTML, titel ini akan tampil di titel dan tab browser.
Sebagai contoh sewaktu anda membuka file contoh diatas perhatikan akan muncul
tulisan "Disini titel websiteku".
Menyisipkan
LINK
Disini saya akan memasukkan Link Blog WordPress saya kedalam
HTML yang saya buat dengan cara
<html>
<head>
<title>Latihan Dasar 2 dan
3</title>
</head>
<body>
EVERYBODY WELCOME TO MY PAGE
HTML
</body>
</html>
<html>
<head></head>
<body>
<p>Saya sekarang sedang
membuat hyperlink</p>
Jika anda ingin mengunjungi my blog
:
<a
href="http://tonymr46.blogspot.com/">Klik link saya
disini</a><br>
<br>
<a
href="http://www.yahoo.com/">Link ini</a> akan membawa anda
ke Yahoo.com jika ingin memasukkan email anda
</body>
</html><br>
<br>
PENJELASAN :
<br> ini dimadsudkan sebagai
spasi baris .
<a
href="http://tonymr46.blogspot.com/">Klik link saya
disini</a><br> adalah bahwa tulisan ditujukan ke alamt web yang
tersedia
dan hasil pun akan terlihat :
MEMBUAT
FRAME PADA HTML
<html>
<body>
<h1>Berikut adalah tampilan
FRAME yang bersifat HTML dengan isi frame v-class </h1>
<iframe
src="http://v-class.gunadarma.ac.id/" width="500"
height="500"></iframe>
<table
bgcolor="red">
dan hasilpun akan terlihat seperti
dibawah ini :
Setelah itu kemudian tugas
selanjutnya adalah membuat TABEL PADA HTML
lalu masukkan kodingan seperti yang
terlihat dibawah ini untuk membuat tabel :
ini :
<table border="1"
width="75%">
<caption>INI BENTUK TABEL
DENGAN MOTIF AHMAD FATHONY</caption>
<table
style="background:#ffc" width="75%"
border="1">
<tr>
<th
style="background:red;width:50%;">NAMA MAHASISWA
:</th>
<th
style="background:red;">NPM MAHASISWA :</th>
</tr>
<tr>
<td>AHMAD
FATHONY</td>
<td>40212435</td>
</tr>
<tr>
<td>JON
ERIKSON</td>
<td>48212256</td>
</tr>
</table>
<html>
<head></head>
<body
bgcolor="GOLD">
</body>
</html>
Penjelasan :
<table>
aadalah Mendefinisikan sebuah tabel
<tr> adalah Mendefinisikan
suatu barisan dalam tabel
<th>
adalah Mendefinisikan sebuah header tabel
dan hasilpun akan terlihat seperti
dibawah ini :
SELANJUTNYA BERLANJUT PADA MODUL
BERIKUTNYA YAITU FORM DAN GAMBAR PADA HTML :
MEMBUAT
FORM DI HTML
ketikkan kode html seperti dibawah
ini :
ini kode :
<!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>Handling
Form</title>
</head>
<body>
<form id="form1"
name="form1" method="post"
action="script.php">
<P><b>Nama :</b>
<input name="nama" type="text" id="nama"
/></p>
<p><b>Email
:</b><input name="email" type="text"
id="nama" /></p>
<p><b>Jenis Kelamin :
</b><input name="gender" type="radio" value="L"
/>
Laki-laki
<input name="gender"
type="radio" value="P" />
Perampuan </p>
<p><b>Umur : </b>
<select name="umur"
>
<option
value="0-29">Di bawah 30</option>
<option
value="30-60">Antara 30 sd 60</option>
<option
value="60+">Di atas 60</option>
</select>
</p>
<p><b>Komentar
:</b>
<textarea
name="komentar" cols="30" rows="4"
></textarea>
</p>
<p align="center">
<input type="submit"
name="Submit" value="Submit" />
</p>
</form>
</body>
</html>
<head></head>
<body
bgcolor="GOLD">
</body>
</html>
Penjelasan :
<form>
adalah Mendefinisikan sebuah form untuk input dari pengunjung
<head> adalah awal
input type untuk mensubmit
hasil
dan inilah tampilan hasil dari form
itu sendiri :
selanjutnya HANYA MENYISIPKAN GAMBAR
PADA HTML :
berikut adalah kode gambar :
atau dengan : BERIKUT ADALAH
SEDIKIT MENYISIPKAN GAMBAR DI HTML :<br>
<img
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWktpUF7So9wuWS_q9Ccvih36nvGL3fRWIw1cyXlbCbpCQ9JjY2YoWfWCKEe9wrh_pRaTwfIuDrvFq8tc5EhGa_yUfOMgCodo_V4Q0GlyTo1lv-rZSnyjY8oqyGH9dvBp47xDABG80rgrO/s1600/logo_gunadarma.jpg"
style="float:right;"
alt="JOGJA6 width="100" height="100" />
<img
src="http://b.vimeocdn.com/ts/433/889/433889059_640.jpg"
style="float:LEFT;"
alt="JOGJA6 width="100" height="100" />
dan hasil gambar berformat html pun
dibawah ini :
Tidak ada komentar:
Posting Komentar