Tutorial dasar html

Setelah melewati dua tahap yaitu Persiapan belajar html dan Pengenalan dasar html, selanjutnya Anda ber hak ada di halaman ini, yaitu Tutorial dasar html.

Selanjutnya pada halaman ini membahas cara penulisan script html pada text editor yang Anda gunakan, walaupun hal tersebut sudah dibahas sedikit sebelumnya.

Ada tiga bahasan dasar yang tidak Saya ikut sertakan pada halaman ini, namun sangat berkaitan pada halaman ini.
Mengapa tidak Saya jadikan satu dengan halaman ini ? Karena pada halaman ini kita akan fokus pada satu pembahasan yaitu “Tutorial dasar html”.

Tiga pembahasan tersebut bisa Anda buka di tab baru diantaranya adalah:


Selanjutnya, setelah semuanya paham dengan pembahasan sebelumnya, kita masuk ke pembahasan utama tutorial html dasar.

Penulisan html pada text editor

 A. Kerangka dasar struktur penulisan:  

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Tutorial dasar html</title>
	</head>
<body>

<!-- Bagian ini adalah tempat script yang akan ditampilkan oleh browser -->

</body>
</html>


Jika kita lihat kerangka script diatas, sepertinya sangat sederhana, namun memiliki peran yang sangat penting.
Ada Tiga bagian penting dari script diatas yaitu:

  1. DOCTYPE, Yang berperan sebagai penegas type dokumen yang akan ditampilkan browser.
  2. META, Yang berperan sebagai penegas jenis pengkodean kepada browser.
  3. BODY, Tag diantara body inilah yang berperan paling banyak, karena isi website yang ditampilkan di browser di tuliskan di antara tag body.


 B. Script atau kode yang di tampilkan browser 
Sekarang kita fokus pada tag diantara “body”, karena kode yang kita sematkan disitulah yang akan ditampilkan oleh browser.
Contoh:

<body>

	<p>Ini adalah paragraf</p>
	
</body>

Jika kita buka script diatas menggunakan browser, maka hasilnya adalah menampilkan text “Ini adalah paragraf”

Tag apa saja yang dipakai untuk menuliskan script di dalam tag body ?
Anda bisa lihat tag tag tersebut dalam tabel pada halaman: https://my-id.site/tag-dasar-pada-html ↗

 LATIHAN 

Dalam latihan kali ini kita akan praktek membuat, menulis dan menyimpan script html.

Siapkan text editor Anda untuk membuat file html, dan ingat, untuk file html, harus selalu di ahiri dengan dot html

Contoh: index.html
Keterangan: “index”, adalah nama filenya, dan “.html” adalah jenis filenya.


File file yang akan kita buat untuk latihan diantaranya adalah:

  1. LINK, atau disebut juga dengan hyperlink yang dalam bahasa Indonesianya adalah tautan.
  2. BOLD, memberikan efek cetak tebal pada teks.
  3. ITALIC, memberikan efek cetak miring pada teks.
  4. UNDERLINE, memberikan efek garis bawah pada suatu kata atau kalimat.
  5. MARQUEE, membuat text atau kalimat menjadi berjalan.
  6. TABLE, membuat table, text dalam kotak.
  7. UL LI, Unordered List dan List Item, untuk membuat daftar item.

Buatlah satu file dengan nama “link.html”, dan simpan file tersebut jika sudah selesai menuliskan kode.

Salin atau Copy baris contoh dibawah.
Namun Saya menyarankan Anda untuk mengetiknya satu persatu, untuk membiasakan Anda dalam membuat file html. 

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>HTML Text Link</title>
</head>
<body>

	<a href="https://google.com">Ini adalah link menuju Google</a>
	<br>
	<a href="https://yahoo.com">Ini adalah link menuju Yahoo</a>
	
</body>
</html>

Edit dan lihat hasil script text link diatas

2. BOLD

Buatlah satu file dengan nama “bold.html”, dan simpan file tersebut jika sudah selesai menuliskan kode.

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>HTML Text Bold</title>
</head>
<body>

	<b>Belajar membuat text bold dengan tag b</b>
	<br>
	<strong>Belajar membuat text bold dengan tag strong</strong>
	
</body>
</html>

Edit dan lihat hasil script text bold diatas

Catatan:
Versi HTML5, dianjurkan menggunakan tag <strong> – </strong> walaupun tag <b> – </b> masih tetap bisa digunakan.

3. UNDERLINE

Buatlah satu file dengan nama “underline.html”, dan simpan file tersebut jika sudah selesai menuliskan kode.

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>HTML Text Underline</title>
</head>
<body>

	<u>Belajar membuat text Underline</u>
	
</body>
</html>

Edit dan lihat hasil script text underline diatas

Catatan:
Jangan gunakan garis bawah pada teks berwarna biru, karena link secara default sudah underline dan berwarna biru, ini untuk menghindari visitor agar tidak bingung membedakan link dan text.

4. ITALIC

Buatlah satu file dengan nama “italic.html”, dan simpan file tersebut jika sudah selesai menuliskan kode.

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>HTML Teks Miring</title>
</head>
<body>

	<em>Belajar membuat text miring dengan tag em</em>
	<br>
	<i>Belajar membuat text miring dengan tag i</i>
	
</body>
</html>

Edit dan lihat hasil script text italic diatas

Catatan:
Text miring bisa dibuat dengan kode <em> – </em> atau <i> – </i>, seperti yang terlihat pada contoh.

5. MARQUEE

Buatlah satu file dengan nama “marquee.html”, dan simpan file tersebut jika sudah selesai menuliskan kode.

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>HTML Text Berjalan</title>
</head>
<body>

	<p>Belajar HTML</p>
	<marquee>Belajar membuat text berjalan</marquee>

</body>
</html>

Edit dan lihat hasil script text marquee diatas

6. TABLE

Buatlah satu file dengan nama “table.html”, dan simpan file tersebut jika sudah selesai menuliskan kode.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>HTML Table</title>

</head>
<body>

	<table border="1">
		<tr>
			<td> INI ADALAH TABLE </td>
		</tr>
	</table>

</body>
</html>

Edit dan lihat hasil script table diatas

7. UL LI dan OL

Buatlah satu file dengan nama “list.html”, dan simpan file tersebut jika sudah selesai menuliskan kode.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>HTML UL dan OL</title>

</head>
<body>

<p>Contoh Penggunaan ul 1</p>
	
<ul type="disc">
	<li>Satu</li>
	<li>Dua</li>
	<li>Tiga</li>
</ul>

<p>Contoh Penggunaan ul 2</p>

<ul type ="disc">
  <li>HOME</li>
  <li>MENU
  <ul type="circle">
    <li>Menu 1</li>
    <li>Menu 2
      <ul type ="square">
        <li>Menu 2.a</li>
        <li>Menu 2.b</li>
        <li>Menu 2.c</li>
      </ul>
    </li>
    <li>Menu 3</li>
  </ul>
  </li>
  <li>CONTACT</li>
</ul>

<p>Contoh Penggunaan ol</p>

<ol type="1">
  <li>Satu</li>
  <li>Dua</li>
  <li>Tiga</li>
</ol>

</body>
</html>

Edit dan lihat hasil script UL LI dan OL diatas

ul (Unordered List) atau Daftar Acak, element digunakan untuk merepresentasikan sebuah daftar item.
li (List Item), li terletak didalam ul dan dapat ditulis lebih dari satu element.
ul juga bisa ditulis didalam li yang menunjukkan tingkatan list bersarang (nested).

Keterang dari script UL LI dan OL diatas.

Type yang bisa digunakan untuk UL:
1. Type = “disc” membuat bentuk bulatan Hitam.
2. Type = “circle” membuat bentuk lingkaran hitam seperti cincin.
3. Type = “square” membuat bentuk bulatan kotak.
4. Type = “none” tidak membuat bentuk apapun atau kosong.

Type yang bisa digunakan untuk OL:
1. Type = “a” hasilnya menjadi : a, b, c dst.
2. Type = “A” hasilnya menjadi : A, B, C dst.
3. Type = “1” hasilnya menjadi : 1, 2, 3 dst.
4. Type = “i” hasilnya menjadi : i, ii, iii dst.
5. Type = “I” hasilnya menjadi : I, II, III dst.


Untuk melihat hasil script dari latihan diatas, silahkan buka file file tersebut di peramban Anda dengan cara “double click” atau klik kanan, dan pilih “buka dengan” lalu pilih peramban yang Anda gunakan.

Atau Anda juga bisa menggunakan halaman “Latihan koding html”, untuk Copy paste Script tersebut diatas pada form pertama.

Mungkin hanya ini penjelasan singkat tentang Tutorial dasar html, selanjutnya silahkan Anda gunakan halaman “Latihan koding html” untuk memperlancar penulisan script html Anda

Mungkin Anda Menyukai