Tugas MULOK (HTML) / BAB 6
BAB 6
Memasukan Gambar pada html
<html>
<head>
<title>Image HTML</title>
</head>
<body>
<p>Gambar Komputer dalam folder yang sama dengan letak file
HTML-nya :</p>
<p><img src="computer1.jpg"
width="102" height="102"></p>
<p>Gambar Komputer dari folder yang berbeda dengan letak
file HTML-nya : </p>
<p><img
src="file:///C|/udinharun/bukuwebdesigncc/jpg/computer2.jpg"
width="141" height="125"></p>
<p>Gambar dari
www.eepis-its.edu</p>
<p><img
src="http://www.eepis-its.edu/images/stories/stories/2005/bungalahir.jpg"
width="382" height="54"> </p>
</body>
</html>
Alignment Image
<html>
<head>
<title>image align</title></head>
<body>
<p>Sebuah gambar<img src="jpg/bunga1.jpg"
width="103" height="77" align="top"> di tengah
teks dengan atribut align = top <br>
<p>Sebuah gambar<img src="jpg/bunga1.jpg"
width="103" height="77" align="middle"> di
tengah teks dengan atribut align = top <br>
<p>Sebuah gambar<img src="jpg/bunga1.jpg"
width="103" height="77" align="bottom"> di
tengah teks dengan atribut align = top <br>
</p>
</body>
</html>
Floating image
<html>
<head>
<title>Floating Image</title>
</head>
<body>
<p><img src="jpg/house1.jpg"
width="114" height="62" hspace="10"
vspace="5" align="left">Sebuah paragraf yang berisi
image. atribut align image diisi dengan "left". Sebuah
paragraf yang berisi image. atribut align image diisi dengan
"left". Sebuah paragraf yang berisi image. atribut align
image diisi dengan "left". Sebuah paragraf yang berisi image.
atribut align image diisi dengan "left". </p>
<p><img
src="jpg/house1.jpg" width="114" height="62"
hspace="10" vspace="5" align="right">Sebuah
paragraf yang berisi image. atribut align image diisi dengan
"right". Sebuah paragraf yang berisi image. atribut align
image diisi dengan "right".Sebuah paragraf yang berisi image.
atribut align image diisi dengan "right". Sebuah paragraf
yang berisi image. atribut align image diisi dengan "right".
Sebuah paragraf yang berisi image. atribut align image diisi dengan
"right".</p>
</body>
</html>
Image adjustment
<html>
<head>
<title>Adjustment Image</title>
</head>
<body>
<p>Image dengan ukuran 71 x 53 </p>
<p><img src="jpg/house1.jpg"
width="71" height="53"></p>
<p>Image dengan ukuran 122 x 79 </p>
<p><img src="jpg/house1.jpg"
width="122" height="79"></p>
<p>Image dengan ukuran 163 x 93 </p>
<p><img src="jpg/house1.jpg" width="163"
height="93"> </p>
</body>
</html>
Teks alternative untuk image
<html>
<head>
<title>Alternatif Image</title>
</head>
<body>
<img src="jpg/back.jpg" alt="klik to
next" width="111" height="65">
<br>
Browser akan menampilkan tulisan <strong>klik to
next</strong> jika mouse kita letakkan diatas gambar anak panah
</body>
</html>
Image sebagai link
<html>
<head>
<title>image link</title>
</head>
<body>
<p><a href="http://www.eepis-its.edu"
target="_blank"><img src="jpg/back.jpg"
width="111" height="87" border="0"></a>
</p>
<p>Membuat image menu dengan menambahkan tag <a
href>. jika icon anak panah kita klik, maka akan muncul alamat website
www.eepis-its.edu. </p>
</body>
</html>
Image map
<html>
<head>
<title>image map</title>
</head>
<body>
<div align="center"><img
src="jpg/house1.jpg" width="202" height="90"
border="0" usemap="#Maprumah">
<map
name="Maprumah" id="Maprumah">
<area
shape="rect" coords="62,17,103,49"
href="atap.htm" alt="atap rumah">
<area
shape="circle"coords="45,65,15"
href="dinding.htm" alt="dinding rumah">
</map>
</div>
</body>
</html>
\
Source kode 6.8
<html>
<head>
<title>atap rumah</title>
</head>
<body>
Anda menekan daerah atap
rumah
</body>
</html>
Sorce kode 6.9
<html>
<head>
<title>Dinding Rumah</title>
</head>
<body>
anda menekan daerah dinding rumah
</body>
</html>
Tugas MULOK (HTML) / BAB 5
BAB 5
Ordered list
<html>
<head>
<title>Ordered List</title>
</head>
<body>
<p>Daftar Hari :
</p>
<ol>
<li>Senin</li>
<li>Selasa</li>
<li>Rabu</li>
<li>Kamis</li>
<li>Jum'at</li>
<li>Sabtu</li>
<li>Minggu</li>
</ol>
<p>Daftar Kuliah :
</p>
<ol>
<li>Web Design</li>
<li>Pemrograman web</li>
<li>Database </li>
</ol>
</body>
</html>
Ordered list 5.1
<html>
<head>
<title>Ordered List</title>
</head>
<body>
<p>Daftar Hari :
</p>
<ol
type="A">
<li>Senin</li>
<li>Selasa</li>
<li>Rabu</li>
<li>Kamis</li>
<li>Jum'at</li>
<li>Sabtu</li>
<li>Minggu</li>
</ol>
<p>Daftar Kuliah :
</p>
<ol
type="i">
<li>Web Design</li>
<li>Pemrograman web</li>
<li>Database </li>
</ol>
</body>
</html>
Underd list
<html>
<head>
<title>Unordered List</title>
</head>
<body>
<p>Daftar Hari :
</p>
<ul>
<li>Senin</li>
<li>Selasa</li>
<li>Rabu</li>
<li>Kamis</li>
<li>Jum'at</li>
<li>Sabtu</li>
<li>Minggu</li>
</ul>
</body>
</html>
Undered list 5.4
<html>
<head>
<title>Unordered List</title>
</head>
<body>
<p>Daftar Hari : </p>
<ul type="circle">
<li>Senin</li>
<li>Selasa</li>
<li>Rabu</li>
<li>Kamis</li>
<li>Jum'at</li>
<li>Sabtu</li>
<li>Minggu</li>
</ul>
</body>
</html>
Nested list
<html>
<head>
<title>Nested List</title>
</head>
<body>
<ol>
<li>Buah</li>
<ul
type="circle">
<li>Semangka</li>
<li>Jambu</li>
</ul>
<li>Bunga</li>
<ul type="disc">
<li>Melati</li>
<li>Anggrek</li>
</ul>
<li>Kendaraan</li>
<ul type="square">
<li>Mobil</li>
<li>Sepeda Motor </li>
</ul>
</ol>
</body>
</html>
Definition list
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<title>Definition List</title>
</head>
<body>
<h3>Contoh Definition List</h3>
<dl>
<dt>Web
Design</dt>
<dd>Belajar HTML
- Macromedia Dreamweaver</dd>
<dt>Pemrograman
Web</dt>
<dd>Belajar PHP
MySQL</dd>
</dl>
</body>
</html>
Tugas MULOK (HTML) / BAB 4
BAB 4
Tag anchor
<a
href="http://www.eepis-its.edu">Link ke
www.eepis-its.edu</a>
Link relative
<html>
<head>
<title>Link Relatif</title>
</head>
<body>
<a
href="biodata.html">Biodata</a></body>
</html>
Link absolut
<html>
<head>
<title>link</title>
</head>
<body>
<a href="http://www.eepis-its.edu" >Link ke
www.eepis-its.edu</a>
</body>
</html>
Link ke bagian lain dalam dokumen
yang sama
<html>
<head>
<title>Link dalam satu
dokumen</title>
</head>
<body>
<p>Isi Bab :</p>
<p><a
href="#isibab1">1. Bab 1</a><br>
<a href="#isibab2">2. Bab
2</a><br>
<a href="#isibab3">3. Bab 3</a></p>
<p> </p>
<h2><a
name="isibab1">Bab1</a></h2>
<p>isi
penjelasan bab 1,isi penjelasan bab 1,isi penjelasan bab 1,isi penjelasan bab
1,isi penjelasan bab 1,isi penjelasan bab 1,isi penjelasan bab 1,isi penjelasan
bab 1,isi penjelasan bab 1,isi penjelasan bab 1,isi penjelasan bab 1,isi
penjelasan bab </p>
<h2><a
name="isibab2">Bab 2</a> </h2>
<p>isi
penjelasan bab 2, isi penjelasan bab 2,isi penjelasan bab 2,isi penjelasan bab 2,isi
penjelasan bab 2,isi penjelasan bab 2, isi penjelasan bab 2,isi penjelasan bab
2,isi penjelasan bab 2,isi penjelasan bab 2,isi penjelasan bab 2,isi penjelasan
bab 2</p>
<h2><a
name="isibab3">Bab 3 </a></h2>
<p>isi
penjelasan bab 3, isi penjelasan bab 3, isi penjelasan bab 3, isi penjelasan
bab 3,isi penjelasan bab 3,isi penjelasan bab 3,isi penjelasan bab 3,isi
penjelasan bab 3,isi penjelasan bab 3,isi penjelasan bab 3,isi penjelasan bab
3,isi penjelasan bab 3.</p>
</body>
</html>
Membuat Link untuk window baru
<html>
<head>
<title>link new window</title>
</head>
<body>
membuka alamat website eepis dengan membuka
window baru : <a href="http://www.eepis-its.edu"
target="_blank">www.eepis-its.edu</a>
</body>
</html>
mailto
<html>
<head>
<title>Mailto</title>
</head>
<body>
kirim email ke humas PENS : <a
href="mailto:info@eepis-its.edu">info@eepis-its.edu </a>
</body>
</html>
Tugas MULOK (HTML) / BAB 3
Bab 3
Pemformatan teks
<html>
<head>
<title>Format Teks</title>
</head>
<body>
<p><b>Tulisan ini ditebalkan
(bold)</b></p>
<p><strong>Tulisan
ini ditebalkan (strong)</strong> </p>
<p><em>Tulisan ini miring (emphasize)
</em></p>
<p><big>Tulisan ini besar (big)</big></p>
<p><i>Tulisan ini miring (italic)
</i></p>
<p>Tulisan ini <sub>subscript</sub> </p>
<p>Tulisan ini
<sup>superscript</sup></p>
</body>
</html>
Teks preformat
<html>
<head>
<title>Tag Preformatted</title>
</head>
<body>
<pre>
This section provides a brief overview of the
menus in Dreamweaver.
The
File menu and Edit menu contain the standard menu items for
File
and Edit.
menus, such as New, Open, Save, Save All,
Cut, Copy, Paste, Undo,
and
Redo
</pre>
<pre>
Ini
adalah
preformatted
text.
Menampilkan spasi
Dan
line break apa adanya.
</pre>
<p>Tag
PRE cocok digunakan untuk menampilkan kode bahasa pemrograman komputer
:</p>
<pre>
for
i = 1 to 10
print i
next i
</pre>
</body>
</html>
Quotation
<html>
<head>
<title>quotation</title>
</head>
<body>
tulisan ini BUKAN quotation
<blockquote>
tulisan ini adalah quotation <br>
tulisan ini adalah
quotation <br>
tulisan ini adalah
quotation <br>
</blockquote>
</body>
</html>TUGAS MULOK (HTML) / BAB 2
BAB 2
ELEMEN HTML
<html>
<head>
-- Informasi tentang dokumen HTML
</head>
<body>
-- Informasi yang akan ditampilkan dalam web
browser
</body>
</html>
CONTOH HTML
<html>
<head>
<title>Belajar Web Design</title>
</head>
ini adalah halaman HTML
<body>
</body>
</html>
Tidak ada komentar:
Posting Komentar