HTML (Hypertext Markup Language ) adalah standar informasi yang berbasis hypertext yang dipaai pada web. HTML bekerja dengan menggunakan HTTP(HyperText Transfer Protocol) yaitu protocol komunikasi yang memungkinkan Web server berkomunikasi dengan Web Browser.
Kode HTML berupa sebuah berkas teks dengan akhiran berupa .HTML, .html, .HTM, atau .htm
Pasangan tag <HTML> dan </HTML> menandakan bahwa kode yang terdapat didalamnya adalah kode HTML sehingga browser akan menerjemahkannya sebagai dokumen HTML.
Bagian yang tedapat dalam <HTML> dan </HTML > umumnya terbagi atas kepala dan badan. Bagian krpala ditandai dengan pasangan tag <HEAD> dan </HEAD> sedangkan bagian badan ditandai dengan tag <BODY> dan </BODY>. Pada bagian kepala kita dapat menentukan judul dokumen HTML pada pasangan tag <TITLE> dan </TITLE>.
Tag | Kegunaan |
<html> | Mendefinisikan sebuah dokumen hmtl |
<body> | Mendefinisikan isi suatu dokumen |
<>h1-<h6> | Mendefinisikan heading 1 s/d heading ke 6 |
<p> | Mendefinisikan sebuah paragraf |
<!--> | Mendefenisikan komentar dalam sebuah kode sumber HTML |
<br> | Membuat baris baru (enter) |
<pre> | Mendefinisikan teks preformatted |
<acronym> | Mendefnisikan suatu singkatan |
<address> | Mendefinisikan suatu elemen alamat |
<bdo> | Mendefiniskan arah teks |
<blockquote> | Mendefinisikan quotation panjang |
<q> | Medefinisikan quotation pendek |
Latihan 1 => Membuat Title
<html>
<head> <title> Belajar Perdana Pengembangan Web </title></head>
<body>
<h1><i> Selamat </i></h1><br/>
<h6> Datang </h6><br/>
<p> ini web pertama saya lho</p>
</body>
</html>
Latihan 2 => Membuat Format Text, Background Color
<html>
<head>
<title>Hello World</title>
</head>
<body>
<body bgcolor="pink">
<h1>Hello Word</h1>
<font color="green" size = "5" face="Calibri">
<p align = "center"><b>ini sebuah paragraf</b></p>
<p align = "center"><i>ini sebuah paragraf</i></p>
<p align = "center"><u>ini sebuah paragraf</u></p>
<p align = "center">h<sub>2</sub>0</p>
<p align ="center">x<sup>2</sup>+2x+5=0</p>
</font>
</body>
</html>
Penjelasan :
<body bgcolor="pink"> => untuk membuat background web berwarna pink
<font color="green" size = "5" face="Calibri"> => untuk mengatur warna tulisan , ukuran
huruf dan jenis huruf yang digunakan
huruf dan jenis huruf yang digunakan
<p align = "center"><b>ini sebuah paragraf</b></p> => tampilan teks Bold (tebal)
<p align = "center"><i>ini sebuah paragraf</i></p> => tampilan teks Italic (miring)
<p align = "center"><u>ini sebuah paragraf</u></p> => tampilan teks Underline (garis bawah)
<p align = "center">h<sub>2</sub>0</p> => sub digunakan agar teks ditampilkan sebagai
subskrip
subskrip
<p align ="center">x<sup>2</sup>+2x+5=0</p> => sup digunakan agar teks ditampilkan
sebagai superskrip
Latihan 3
Ini merupakan salah satu format text yang sediakan untuk memudahkan para programmer.
<html>
<head>
<title>Hello World</title>
</head>
<body>
<body bgcolor="black">
<code>Computercode</code>
<br>
<br>
<kbd>Keyboard Input</kbd>
<br>
<br>
<tt>Teletype Text</tt>
<br>
<br>
<samp>Sample Text</samp>
<br>
<br>
<var>Computer Variabel</var>
</body>
</html>
Latihan 4 => Teks Preformat
Teks ini preformat akan menampilkan spasi dan line break yang apa adanya.
<html>
<body>
<pre>
uses crt;
begin
*
* *
* *
*******
end.
</pre>
</body>
</html>
Latihan 5 => Addresing
<html>
<head>
<title>Hello World</title>
</head>
<body>
<addres>
Nia<br>
Diponegoro 52-60<br>
Salatiga<br>
</address>
</body>
</html>
Latihan 6 => Membuat quote
<html>
<title>Hello World</title>
<body>
<blockquote>
ini blockquote yang panjang lho ini blockquote yang panjang lho ini blockquote yang panjang lho ini blockquote yang panjang lho ini blockquote yang panjang lho ini blockquote yang panjang lho ini blockquote yang panjang lho ini blockquote yang panjang lho ini blockquote yang panjang lho ini blockquote yang panjang lho ini blockquote yang panjang lho ini blockquote yang panjang lho
</blockquote>
Here zomes a short quotation:
<q>
This is a short quotation
</q>
</body>
</html>
Latihan 7 => Membuat acronym dan bi-directional override (bdo)
<html>
<head>
<title>Hello World</title>
</head>
<body>
<h1>Hello Word</h1>
<acronym title ="Meirlin Sartikasari Nubatonis">MSN
</acronym>
<p> ini tulisan sebelum di ubah : JANGAN TIRU YANG DI DEPAN </p>
<bdo dir="rtl">
JANGAN TIRU YANG DIDEPAN
</bdo>
</body>
</html>
Penjelasan
· <acronym title ="Meirlin Sartikasari Nubatonis">MSN
</acronym>
Ini merupakan cara membuat akronim (singkatan ), ketika kursosr digerakkan ke MSN maka akan muncul tulisan Meirlin Sartikasari Nubatonis (disingkat MSN).
· <bdo dir="rtl">
Bi-directional override (bdo), baris berikut ini akan dituliskan dari kanan ke kiri (rtl) sehingga tulisan JANGAN TIRU YANG DIDEPAN akan diubah menjadi NAPEDID GNAYURIT NAGNAJ
Latihan 8 => Menampilkan karakter
<html>
<title>coba Lagi</title>
<body>
<
>
&
¢
£
¥
€
§
©
®
×
÷
</body>
</html>
SELAMAT MENCOBA
GOD BLESS YOU
