HTML Dasar: Apa itu – Contoh dan Fungsi

Apa Itu HTML

HTML adalah bahasa standar untuk membangun sebuah website. Dengan HTML kita dapat membangun sebuah website.

Kepanjangan dari html: Hyper Text Markup Language

Versi HTML Dari Masa Ke Masa

Versi Tahun
HTML 1991
HTML 2.0 1995
HTML 3.2 1997
HTML 4.01 1999
XHTML 2000
HTML5 2014

Karakteristik

Semua dokumen HTML harus dimulai dengan deklarasi tipe dokumen  <! DOCTYPE html>
Semua dokumen html harus dimulai dengan tag <html> lalu diakhir tag </html>.
Bagian yang ingin di tampilkan harus terdapat di antara <body> sebelum </body>

Contoh 1 : Html – Heading dan Paragaraf

<!DOCTYPE html>
<html>
<head>
<title>Contoh HTML Sederhana</title>
</head>
<body>

<h1>Ini Adalah Heading</h1>
<h2>Ini Adalah Heading</h2>
<h3>Ini Adalah Heading</h3>
<p>Ini adalah Paragraf yang dapat digunakan untuk menulis konten artikel.</p>

</body>
</html>
  • <!DOCTYPE html> menandakan dokumen ini adalah html
  • <html> </html>mulainya html
  • <head> </head> adalah tanda dokumen utama yang berada di atas atau kepala sebuah dokumen html
  • <title> </title> adalah judul
  • <body></body> adalah bagian isi dari dokumen html
  • h1,h2, dan seterusnya digunakan sebagai heading,
  • <p> dan </p> adalah tanda di mulai dan akhirnya sebuah paragraf
  • </p> digunakan sebagai akhir paragraf

Contoh 2 : Html Sederhana Dengan Tabel

<!DOCTYPE html>
<html>
<head>
<title>Contoh HTML Sederhana</title>
</head>
<body>

<h1>Ini contoh html tabel</h1>
<table border="1">
  <tr>
    <th>Nama Lengkap</th>
    <th>Alamat</th>
    <th>Usia</th>
  </tr>
  <tr>
    <td>Anton</td>
    <td>jl. Depati Amir</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Evalia Sentosa</td>
    <td>Bandung</td>
    <td>17</td>
  </tr>
</table>
</body>
</html>

Contoh 3 : Html Link

<!DOCTYPE html>
<html>
<body>

<h2>HTML Links</h2>
<p>Link pada html didifinisikan dengan tag <a> </p>

<a href="https://dosenit.com">Ini adalah contoh link</a>

</body>
</html>

Contoh 4 : HTML Image

<!DOCTYPE html>
<html>
<body>

<h2>HTML Images</h2>
<p>Gambar pada HTML didifinisikan dengan tag img</p>

<img src="https://dosenit.com/wp-content/uploads/2019/03/dosen-ti.png" alt="Dosenit.com" width="270" height="70">

</body>
</html>

Contoh 5 : HTML Button

<!DOCTYPE html>
<html>
<body>

<h2>HTML Button</h2>
<p>Button pada html menggunakan tag button </p>

<button>Click me</button>

</body>
</html>

Contoh 6 : HTML List

<!DOCTYPE html>
<html>
<body>

<h2>HTML List</h2>
<p>Button pada html menggunakan tag ul dan li atau ol dan li </p>

<ul>
  <li>Kopi</li>
  <li>Susu</li>
  <li>Air putih</li>
</ul>

<ol>
  <li>CSS</li>
  <li>PHP</li>
  <li>C++</li>
</ol>

</body>
</html>

contoh lainnya

Tag Dasar

No Nama Tag Fungsi
1  <! DOCTYPE html> Deklarasi untuk mendefinisikan dokumen menjadi HTML
2  <html> Tag pembuka untuk membuat dokumen HTML
3  <head> Informasi meta tentang dokumen
4  <title> Membuat judul halaman yang nantinya akan ditampilkan di browser
5  <body> Tempat dibuatnya semua konten website menggunakan HTML

Contoh penggunaan :

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>
</html>

Preview :

Tag HTML
Tampilan Tag Dasar

 

Tag Judul

No Nama Tag Fungsi
1  <h1> s/d <h6>  Membuat judul atau heading
2 <hr> Memisahkan konten (biasanya ditampilkan garis pembatas)

Contoh penggunaan :

<!DOCTYPE html>
<html>
<body>

<h1>This is heading 1</h1>
<p>This is some text.</p>
<hr>

<h2>This is heading 2</h2>
<p>This is some other text.</p>
<hr>

<h2>This is heading 2</h2>
<p>This is some other text.</p>

</body>
</html>

Preview :

Tag HTML
Tampilan Tag Pos

Tag Paragraf

No Nama Tag Fungsi
1  <p>  Membuat paragraf
2 <br>  Membuat garis baru
3 <pre>  Memfortmat teks atau kalimat

Contoh penggunaan :

<!DOCTYPE html>
<html>
<body>

<p>In HTML, spaces and new lines are ignored:</p>
<br> example

<p>

My Bonnie lies over the ocean.

My Bonnie lies over the sea.

My Bonnie lies over the ocean.

Oh, bring back my Bonnie to me.

</p>

</body>
</html>

Preview :

Tampilan Tag Paragraf

 

Tag Style

No Nama Tag Fungsi
1  style  Atribut untuk elemen styling pada HTML
2 background-color  Memberikan warna latar belakang
3 color  Memberi warna pada teks
4 font-family  Mengubah font pada teks
5 font-size  Mengatur ukuran font
6 text-align  Mengatura perataan teks

Contoh penggunaan :

<!DOCTYPE html>
<html>
<body>

<h1 style="text-align:center;">Centered Heading</h1>
<p style="text-align:center;">Centered paragraph.</p>

</body>
</html>

Preview :

Tag HTML
Tampilan elemen styling


Tag Formating






No
Nama Tag
Fungsi




1
<b>
 Membuat teks tebal




2
<strong>
 Membuat teks penting




3
<i>
 Membuat teks miring




4
<em>
 Membuat teks ditekankan




5
<mark>
 Membuat teks ditandai




6
<small>
 Membuat teks kecil




7
<del>
 Teks dihapus




8
<ins>
 Teks dimasukan




9
<sub>
 Teks subscript




10
<sup>
 Teks superscript






Contoh penggunaan :


<!DOCTYPE html>
<html>
<body>

<p><b>This text is bold</b></p>
<p><i>This text is italic</i></p>
<p>This is<sub> subscript</sub> and <sup>superscript</sup></p>

</body>
</html>


Preview :


Tampilan tag formating


 


Tag Gambar






No
Nama Tag
Fungsi




1
<img>
Elemen untuk mendefinisikan gambar




2
src
Atribut untuk menentukan URL gambar




3
alt
Mendefinisikan teks pada gambar, jika gambar tidak dapat ditampilkan




4
width – height
Menentukan ukuran gambar




5
float
Properti untuk float image pada CSS




6
<map>
Mendefinisikan gambar peta




7
<area>
Mendefinisikan area atau daerah-daerah gambar pada peta




8
<picture>
Menampilkan gambar yang berbeda untuk perangkat yang berbeda






Contoh penggunaan :


<!DOCTYPE html>
<html>
<body>

<h2>Alternative text</h2>

<p>The alt attribute should reflect the image content, so users who cannot see the image gets an understanding of what the image contains:</p>

<img src="img_chania.jpg" alt="Flowers in Chania" width="300" height="300">

</body>
</html>


Preview :


Tampilan Tag Gambar


 


Tag Form






No
Nama Tag
Fungsi




1
<form>
Membuat formulir untuk mengumpulkan input pengguna




2
<input>
Membuat tipe inputan pada form yang akan dibuat




3
<textare>
Elemen untuk mendefinisikan field input




4
<label>
Memberikan label pada elemen input




5
<fieldset>
Mengelompokan elemen yang terdapat pada sebuah form




6
<select>
Membuat input dengan pilihan yang berbentuk list drop down




7
<optgroup>
Mengelompokan beberapa pilihan pada daftar pilihan input




8
<option>
Mendefinisikan opsi yang bisa dipilih




9
<button>
Membuat Button




10
<datalist>
Membuat daftar pilihan untuk input data




11
<output>
Menampilkan hasil dari hitungan






Contoh penggunaan :


<!DOCTYPE html>
<html>
<body>

<h2>The datalist Element</h2>
<p>The datalist element specifies a list of pre-defined options for an input element.</p>

<form action="/action_page.php">
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<input type="submit">
</form>

<p><b>Note:</b> The datalist tag is not supported in Safari or IE9 (and earlier).</p>

</body>
</html>


Preview :


Tag HTML 
Tampilan Tag Form







Tag Tabel






No
Nama Tag
Fungsi




1
<table>
Membuat tabel pada web




2
<tr>
Membuat baris pada tabel




3
<td>
Membuat kolom pada tabel




4
<th>
Membuat judul pada kolom. Contohnya nama, kelas, dan alamat.




5
<caption>
Membuat judul tabel




6
border
Mengatur garis tabel




7
border-collapse
Mengatur batas garis tabel




8
padding
Mengatur padding pada cell




9
text-align
Mengatur perataan pada konten tabel




10
border-spacing
Mengatur jarak spasi garis tabel




11
colspan
Menggabungkan beberapa kolom. Kalau di office disebutnya Merge Cell




12
rowspan
Menggabungkan beberapa baris




13
id
Memberikan id pada tabel atau kolom






Contoh penggunaan :


<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
  padding: 5px;
}
table {
  border-spacing: 15px;
}
</style>
</head>
<body>

<h2>Border Spacing</h2>
<p>Border spacing specifies the space between the cells.</p>

<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>80</td>
  </tr>
</table>

<p>Try to change the border-spacing to 5px.</p>

</body>
</html>


Preview :


Tampilan Tag Tabel




 


Tag Daftar/ List






No
Nama Tag
Fungsi




1
<ul>
Untuk membuat tampilan daftar menggunakan simbol seperti bullet, cyrcle, dan lainnya.




2
<ol>
Membuat daftar menggunakan nomor, huruf, romawi, dan lainnya




3
<li>
Menentukan berbagai item yang ingin ditampilkan




4
<dl>
Mendefinisikan daftar deskripsi




5
<dt>
Mendefinisikan istilah deskripsi




6
<dd>
Menggambarkan istilah dalam daftar deskripsi




7
<type>
Menentukan jenis penomoran






Contoh penggunaan :


<!DOCTYPE html>
<html>
<body>

<h2>Ordered List with Lowercase Roman Numbers</h2>

<ol type="i">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

</body>
</html>


Preview :


Tampilan Tag List/ Daftar









Tugas silahkan di download


tugas html.


tugas3








sumber : https://dosenit.com/html/html-dasar


https://badoystudio.com/tag-html/