PERINTAH DASAR HTML
Sebelum menuju perintah HTML alangkah baiknya perhatikan
contoh perintah berikut ini
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
penjelasan
Ø
<!DOCTYPE
html> deklarasi mendefinisikan dokumen ini menjadi HTML5
Ø
<html> elemen elemen akar halaman HTML
Ø
<head> elemen berisi informasi meta tentang dokumen
Ø
<title> elemen menentukan judul untuk dokumen
Ø
<body> elemen berisi konten halaman yang terlihat
Ø
<h1> elemen mendefinisikan judul besar
Ø
<p> elemen mendefinisikan sebuah paragraf
Ø
yang ada di dalam kurung
disebut Tag
Ø
tag selalu berpasangan
contohnya <p> dengan </p> dll.
PERINTAH –PERINTAH PADA HTML:
1.
<H1> Sampai <H6>
berfungsi untuk memilih ukuran teks
<html>
<head>
<title>Page Title</title>
</head>
<body>
<head>
<title>Page Title</title>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
</body>
</html>
</html>
2. <HR>
digunakan untuk membuat garis horisontal penuh
layar
<html>
<head>
<title>Page Title</title>
</head>
<body>
<head>
<title>Page Title</title>
</head>
<body>
<h1>This is heading 1</h1>
<p>This is text.</p>
<hr>
<h2>This is heading 2</h2>
<p>This is text.</p>
<hr> garis horizontal penuh layar
<p>This is text.</p>
<hr>
<h2>This is heading 2</h2>
<p>This is text.</p>
<hr> garis horizontal penuh layar
</body>
</html>
</html>
3. <P>
Perintah ini digunakan untuk mrmbuat paragraf dan memisahkan paragraf
satu dengan paragraf yang lainnya
<html>
<head>
<title>Page Title</title>
</head>
<body>
<head>
<title>Page Title</title>
</head>
<body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
</html>
4.
<BR>
Perintah ini sama halnya perintah enter pada keyboard, yaitu untuk
membuat teks yang diketik setelah perintah <BR>
akan berada dibawah teks yang diketikkan sebelum perintah <BR>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<head>
<title>Page Title</title>
</head>
<body>
<p>This is<br>a paragraph<br>with line breaks.</p>
</body>
</html>
</html>
5. <PRE>
Perintah ini digunakan untuk teks asli seperti mengetik biasa, maksudnya
jika ingin menuliskan teks seperti puisi tidak perlu menginputkan perintah <BR>, cukup menekan enter saja
dengan catatan teks tetap berada didalam elemen perintah <PRE>
<pre>
angin ...
angin ...
Angiin...
Angiin....
</pre>
6. Style
Perintah ini bisa digunakan untuk mengubah jenis Font, warna text, warna
background dll
Ø Mengubah
warna background
<body style="background-color:powderblue;">
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
Ø Mengubah warna text
<h1 style="color:blue;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
<p style="color:red;">This is a paragraph.</p>
Ø Mengubah
font
<h1 style="font-family:verdana;">This is a heading</h1>
<p style="font-family:courier;">This is a paragraph.</p>
<p style="font-family:courier;">This is a paragraph.</p>
Ø Mengubah
ukuran text
<h1 style="font-size:300%;">This is a heading</h1>
<p style="font-size:160%;">This is a paragraph.</p>
<p style="font-size:160%;">This is a paragraph.</p>
Ø Menyelaraskan
text
<h1 style="text-align:center;">Centered Heading</h1>
<p style="text-align:center;">Centered paragraph.</p>
<p style="text-align:center;">Centered paragraph.</p>
7.
<B>
Membuat text bold
<b>This text is bold</b>
8.
<i>
Membuat text italic
<i>This text is italic</i>
9.
<Strong>
Mendefinisikan teks kuat
<strong>This text is strong</strong>
10.
<Em>
Membuat penekanan teks
<em>This text is emphasized</em>
11.
<Small>
Membuat teks lebih kecil
<h2>HTML <small>Small</small> Formatting</h2>
12.
<mark>
Menyorot teks yg diinginkan
<h2>HTML <mark>Marked</mark> Formatting</h2>
13.
<del>
Mendefinisikan elemen dihapus
<p>My favorite color is <del>blue</del> red.</p>
14.
<ins>
Mendefinisikan elemen teks ditambahkan
<p>My favorite <ins>color</ins> is red.</p>
15.
<sub>
Mendefinisikan subscript teks
<p>This is <sub>subscripted</sub> text.</p>
16.
<sup>
Mendefinisikan superscripted teks
<p>This is <sup>superscripted</sup> text.</p>
17.
<q>
Untuk menambahkan kutipa n pendek
<p>WWF's goal is to: <q>Build a future where people live in harmony with nature.</q></p>
18.
<blockquote>
Mendefinisikan kutipan diambil dari sumber lain
<p>quote dari newbie:</p>
<blockquote cite="http://www.newbieeror.blogspot.com.html">
setelah 20 tahun bertapa akhirnya anak yang dulu beruia 15 tahun ini ditemukan dan telah menjadi orang tua di gua
</blockquote>
<blockquote cite="http://www.newbieeror.blogspot.com.html">
setelah 20 tahun bertapa akhirnya anak yang dulu beruia 15 tahun ini ditemukan dan telah menjadi orang tua di gua
</blockquote>
19.
<abbr>
Untuk membuat singkatan atau akronim
<p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>
20.
<address>
Menampilkan informasi kontak dari artikel
<address>
ditulis oleh mr.x.<br>
newbieeror.blogspot.com.com<br>
Box 564, Disneyland<br>
INA
</address>
ditulis oleh mr.x.<br>
newbieeror.blogspot.com.com<br>
Box 564, Disneyland<br>
INA
</address>
21.
<cite>
Memberi
judul sebuah karya
<p><cite>The rock</cite> by famelio. Painted in 2016.</p>
22.<kbd>
Digunakan untuk mendefinisikan input keyboard
<kbd>File | Open...</kbd>
23.
<samp>
Digunakan untuk mendefinisikan contoh output dari program komputer
<samp>
demo.example.com login: Apr 12 09:10:17
Linux 2.6.10-grsec+gg3+e+fhs6b+nfs+gr0501+++p3+c4a+gr2b-reslog-v6.189
</samp>
demo.example.com login: Apr 12 09:10:17
Linux 2.6.10-grsec+gg3+e+fhs6b+nfs+gr0501+++p3+c4a+gr2b-reslog-v6.189
</samp>
24.
<code>
Untuk mendefinisikan sepotong kode pemrograman
<code>
var x = 5;
var y = 6;
document.getElementById("demo").innerHTML = x + y;
</code>
var x = 5;
var y = 6;
document.getElementById("demo").innerHTML = x + y;
</code>
25.
<var>
Untuk
mendefinisikan variabel
variabel yang bisa menjadi variabel
dalam ekspresi matematika atau variabel dalam konteks pemrograman
Einstein wrote: <var>E</var> = <var>m</var><var>c</var><sup>2</sup>.
26.
<a>
Didefinisikan untuk membuat hyperlink
<a href="http://www.w3schools.com/html/">Visit our HTML
tutorial</a>
Link agar ada perbedaan warna
antara hal. Yang sudah dibuka dan belum dibuka
<style>
a:link {color:green; background-color:transparent; text-decoration:none}
a:visited {color:pink; background-color:transparent; text-decoration:none}
a:hover {color:red; background-color:transparent; text-decoration:underline}
a:active {color:yellow; background-color:transparent; text-decoration:underline}
</style>
a:link {color:green; background-color:transparent; text-decoration:none}
a:visited {color:pink; background-color:transparent; text-decoration:none}
a:hover {color:red; background-color:transparent; text-decoration:underline}
a:active {color:yellow; background-color:transparent; text-decoration:underline}
</style>
Link jika
mengklik teks akan ditujukan pada halaman yang ditentukan “href”
<a href="http://www.newbieeror.blogspot.com/">kunjungi tutorial
HTML kami</a>
Target atribut menentukan di mana untuk membuka dokumen
terkait.
Atribut target dapat memiliki salah satu dari nilai
berikut:
- _blank -
Membuka dokumen terkait di jendela baru atau tab
- _self -
Membuka dokumen terkait di jendela yang sama / tab seperti yang diklik
(ini adalah default)
- _parent -
Membuka dokumen terkait dalam kerangka induk
- _top -
Membuka dokumen terkait dalam tubuh penuh jendela
- framename
- Membuka dokumen terkait dalam bingkai bernama
contoh 1
<a href="http:// www.newbieeror.blogspot.com/ target="_blank">Visit newbieeror!</a>
Contoh2
<a href="http://www.newbieeror.blogspot.com/ target="_top">HTML5 tutorial!</a>
27. <img>
(tanpa tag penutup)
Secara garis besar digunakan
untuk menginput gambar
<img src="wrongname.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
28.
<Table>
Digunakan untuk membuat tabel
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<table
style="width:100%">
<tr>
<th>Nama</th>
<th>Alamat</th>
<th>umur</th>
</tr>
<tr>
<td>Bill</td>
<td>Semaranng</td>
<td>20</td>
</tr>
<tr>
<td>Eva</td>
<td>Solo</td>
<td>21</td>
</tr>
<tr>
<td>Joni</td>
<td>Kendal</td>
<td>21</td>
</tr>
</table>
</body>
</html>
Dari perintah diatas maka
akan terbentuk sebuah tabel seperti gambar dibawah
- <table> untuk mendefinisikan
tabel
- <tr> untuk menentukan baris
tabel
- <td>
untuk menentukan data tabel
- <th>
- Border properti untuk membuat batas /
garis antar kolom
table, th, td {
border: 1px solid black;
}
border: 1px solid black;
}
·
Padding menentukan jarak antar sel
th, td {
padding: 15px;
}
padding: 15px;
}
·
Text-align membuat text rata ( kanan, kiri, tengah,
kiri-kanan)
th {
text-align: left;
}
text-align: left;
}
·
Boder-spacing digunakan untuk membuat jarak cukup lebar
antar sel
table {
border-spacing: 5px;
}
border-spacing: 5px;
}
·
Colspan membuat rentan sel lebih dari satu kolom
<table style="width:100%">
<tr>
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>55577854</td>
<td>55577855</td>
</tr>
</table>
<tr>
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>55577854</td>
<td>55577855</td>
</tr>
</table>
·
Rowspan membuat rentan sel lebih dari satu baris
<table style="width:100%">
<tr>
<th>Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">Telephone:</th>
<td>55577854</td>
</tr>
<tr>
<td>55577855</td>
</tr>
</table>
<tr>
<th>Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">Telephone:</th>
<td>55577854</td>
</tr>
<tr>
<td>55577855</td>
</tr>
</table>
· <caption>
memberi keterangan pada
tabel
<table style="width:100%">
<caption>Monthly savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$50</td>
</tr>
</table>
<caption>Monthly savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$50</td>
</tr>
</table>
·
Id membuat gaya khusus untuk tabel yang ditentukan
<table id="t01">
<tr>
<th>Nama</th>
<th>alamat</th>
<th>umur</th>
</tr>
<tr>
<td>Eva</td>
<td>solo</td>
<td>21</td>
</tr>
</table>
<tr>
<th>Nama</th>
<th>alamat</th>
<th>umur</th>
</tr>
<tr>
<td>Eva</td>
<td>solo</td>
<td>21</td>
</tr>
</table>
siipp thanks bro
ReplyDelete