<html>
<head>
<title>Judul / Title</title>
</head>
<body>
Isi / Content
</body>
</html>
Heading
<html>
<head>
<title>Latihan 01</title>
</head>
<body>
<h1> Heading 1 - 24 Point </h1>
<h2> Heading 2 - 18 Point </h2>
<h3> Heading 3 - 14 Point </h3>
<h4> Heading 4 - 12 Point </h4>
<h5> Heading 5 - 10 Point </h5>
<h6> Heading 6 - 7 Point </h6>
Normal body text - 12 Point
</body>
</html>
Paragraf dan Break
<html>
<head>
<title>Latihan 02</title>
</head>
<body>
STIKOM BALI
<br>
Kelas Karyawan
<p>
Sistem Informasi
</body>
</html>
HR (Horizontal Rule)
<html>
<head>
<title>Latihan 03</title>
</head>
<body>
<h1>STIKOM BALI</h1> <hr>
</body>
</html>
<html>
<head>
<title>Latihan 04</title>
</head>
<body>
<font face=verdana size=3 color=blue>Sistem Informasi</font>
</body>
</html>
Catatan:
Jika Anda ingin menambahkan komentar pada dokumen HTML,maka tulislah Tag <!...................>,
misal:
<!perubahan terakhir 30/1/2015>
Table
Salah satu cara yang paling kompak dan paling mudah dibaca dalam menampilkan item informasi adalah dengan tabel.
Manfaat Tabel:
- Tabel dapat digunakan untuk menampilkan teks, link, grafik atau item lainnya yang dapat dikirimkan ke tempat lain manapun melalui halaman web.
- Tabel dapat digunakan untuk menyajikan informasi, atau bahkan dapat diperkuat dengan batas, warna, dan grafik sedemikian rupa, sehingga tabel itu sendiri menjadi item-item dekorasi.
<table>
<tr>
<td>Columns Item</td>
<td>Columns Item</td>
</tr>
<tr>
<td>Columns Item</td>
<td>Columns Item</td>
</tr>
</table>
Table dibentuk dari kiri atas, dan melintasi kolom-kolomnya. Setiap item diapit dengan tag <td></td> dan setiap baris diapit dengan tag <tr></tr>.
<html>
<head>
<title> Latihan 17</title>
</head>
<body>
<table>
<tr>
<td>Aku 1A</td>
<td>Cinta 2A</td>
</tr>
<tr>
<td>kamu 1B</td>
<td>sungguh 2B</td>
</tr>
</table>
</body>
</html>
Table Properties:
BORDER = akan memberikan garis pembatas pada tabel.
CELLSPACING= akan menset jarak dalam piksel antara batas dalam dan batas luar.
CELLPADDING= akan menset jarak dalam piksel antara batas dalam dan teksnya.
ALIGN= penjajaran rata kanan, kiri, atau tengah.
BGCOLOR= akan memberikan efek warna pada tabel.
ROWSPAN= untuk menset jumlah baris ke bawah.
COLSPAN= untuk menset jumlah kolom ke kanan.
WIDTH= untuk menset batas lebar / panjang tabel.
HEIGHT= untuk menset batas tinggi tabel.
Script:
<html>
<head>
<title> Latihan 18</title>
</head>
<body>
<h3> Daftar Nama Mahaiswa </h3>
<table border=1 cellpadding=3 cellspacing=3>
<tr>
<td align = center> NIM </td>
<td align = center> Nama Lengkap </td>
</tr>
<tr>
<td> 130030715</td>
<td> Komang Edy Dharyan Jaya</td>
</tr>
</table>
</body>
</html>
Kolom Berwarna
<html>
<head>
<title>Latihan 19</title>
</head>
<body>
<h3>Daftar Nama Mahasiswa</h3>
<table border=1 cellpadding=3 cellspacing=3>
<tr bgcolor=red>
<td align=center>NIM</td>
<td align=center>NAMA LENGKAP</td>
</tr>
<tr>
<td>130030715</td>
<td>Komang Edy Dharyan Jaya</td>
</tr>
</table>
</body>
</html>
Rata Tengah
<html>
<head>
<title>Latihan 20</title>
</head>
<body>
<h3 align=center>Daftar Nama Mahasiswa</h3>
<table border=1 cellpadding=3 cellspacing=3
align=center>
<tr bgcolor=red>
<td align=center>NIM</td>
<td align=center>NAMA LENGKAP</td>
</tr>
<tr>
<td>130030715</td>
<td>Komang Edy Dharyan Jaya</td>
</tr>
</table>
</body>
</html>
Colspan
<html>
<head>
<title>Latihan 21</title>
</head>
<body>
<h3 align=center>Daftar Nama Mahasiswa</h3>
<table border=1 cellpadding=3 cellspacing=3 align=center>
<tr bgcolor=red>
<td align=center colspan=2> NIM & NAMA LENGKAP </td>
</tr>
<tr>
<td>130030715</td>
<td>Komang Edy Dharyan Jaya</td>
</tr>
</table>
</body>
</html>
Images
Tag HTML untuk memasukkan gambar:
<img src=filename>
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.
<html>
<head>
<title>Latihan 22</title>
</head>
<body>
<img src=dewaruci.jpg
width=400 height=300>
</body>
</html>
<html>
<head>
<title>Latihan 23</title>
</head>
<body> <h2 align=center>Images Center</h2>
<center> <img src= dewaruci.jpg
width=400 height=300> </center>
</body>
</html>
Images & Body Background
<html>
<head>
<title>Latihan 25</title>
</head>
<body background=bg.gif>
</body>
</html>
Images & Table
<html>
<head>
<title>Latihan 26</title>
</head>
<body>
<h3>Daftar Nama Mahasiswa</h3>
<table border=1 cellpadding=3
cellspacing=3>
<tr align=center>
<td background=bg2.png>NIM</td>
<td background=bg2.png>NAMA
LENGKAP</td>
</tr>
<tr>
<td>130030715</td>
<td>Komang Edy Dharyan Jaya</td>
</tr>
</table>
</body></html>
<html>
<head>
<title>Latihan 27</title>
</head>
<body>
<table border=5 cellspacing=10 cellpadding=10>
<tr>
<td><img src=ular.png width=200 height=200></td>
<td><img src=orangutan.png width=200 height=200></td>
<td><img src=harimau.png width=200 height=200></td>
</tr>
<tr>
<td align=center>Ini gambar ular</td>
<td align=center>Ini gambar orangutan</td>
<td align=center>Ini gambar harimau</td>
</tr>
</table>
</body>
</html>
Bullet & Numbering
Variasi bullet pada HTML:
Disc, memberikan efek lingkaran (default)
Square, memberikan efek persegi empat
Circle, memberikan efek lingkaran yang transparan
<html>
<head>
<title>Latihan 10</title>
</head>
<body>
<h3>Daftar Belanja:
<ul type=disc> <li>Telur</li>
<li>Beras</li> <li>Arak</li>
<li>Sayur</li>
</ul>
</h3>
</body>
</html>
Catatan: ul = unordered list
li = list item
ini contoh bullet menggunakan tipe Disc, selain itu bisa diganti menggunakan tipe yang lain dengan mengedit <ul type=>
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
A adalah huruf kapital, misal: A,B,C,D,dst
1 adalah angka dalam standar, misal: 1,2,3,4,dst
<html>
<head>
<title>Latihan 13</title>
</head>
<body>
<h3>Daftar Belanja:
<ol type=A>
<li>Telur</li>
<li>Beras</li>
<li>Arak</li>
<li>Sayur</li>
</ol>
</h3>
</body>
</html>
Catatan: ol = ordered list
ini contoh bullet menggunakan tipe A, selain itu bisa diganti menggunakan tipe yang lain dengan mengedit <ol type=>
Link
Tag Link pada HTML:
<a href=url/filename>……..</a>
Catatan:
HREF=Hypertext REFerence
Link URL
<html>
<head>
<title>Latihan 28</title>
</head>
<body>
<a href=http://yahoo.com>Yahoo</a>
<p>
<a href=http://google.com>Google</a>
</body>
</html>
Link File
<html>
<head>
<title>Latihan 29</title>
</head>
<body>
<a href=latihan_27.html>Latihan 27</a>
<p>
<a href=latihan_28.html>Latihan 28</a>
</body>
</html>
Link E-mail
<a href=mailto:nama_email>Send to E-mail</a>
Marquee
Marquee = Menampilkan objek dengan memberikan efek berjalan.
Tag Marquee pada HTML:
<marquee behavior=…>……..</marquee>
Style Maquee:
- ALTERNATE
- SCROLL
- SLIDE
Direction Maquee:
- Down
- Left
- Right
- Up
<html>
<head>
<title>Latihan 30</title>
</head>
<body>
<marquee behavior=alternate direction=up>STIKOM Bali</marquee>
</body>
</html>
<html>
<head>
<title>Latihan 32</title>
</head>
<body>
<marquee behavior=alternate width=100 scrolldelay=500>
STIKOM Bali
</marquee>
</body>
</html>
Text Alignment
<html>
<head>
<title>Latihan 05</title>
</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)
<u>…..</u>
Tag ini untuk membuat underline (garis bawah)
<tt>…..<tt>
Tag ini untuk membuat huruf dengan efek mesin ketik (font Courier)
<html>
<head>
<title>Latihan 07</title>
</head>
<body>
<b>Ini text Bold</b>
<p> <i>Ini text italic</i>
<p> <u>Ini text dengan underline</u>
<p> <tt>Ini text dengan style typewriter</tt>
</body>
</html>
Background
<html>
<head>
<title>Latihan 08</title>
</head>
<body bgcolor=grey> <font color='White'> Ini Background berwarna abu-abu</font> </body>
</html>
Catatan: *) Pemberian warna pada background dapat juga menggunakan kode heksadesimal
0 komentar:
Posting Komentar