Belajar HTML Dasar untuk pemula

Belajar HTML Dasar merupakan landasan awal yang harus dikuasai untuk anda yang memang baru mempelajarinya. HTML yang merupakan singkatan dari HyperText Mackup Language ini merupakan bahasa markup atau markah (bukan bahasa pemograman lho ya) yang terdiri dari struktur dasar utama dalam membangun suatu halaman website. Jika kita sering mengakses suatu halaman portal berita atau personal blog pada suatu browser misalnya, itu halaman yang tampil sebenarnya merupakan output dari suatu struktur HTML yang memang sudah dibangun dan dirancang untuk menampilkan isi halaman tersebut. Akan tetapi apa yang ditampilkan dengan beragam element-elementnya itu tak hanya terdiri dari kode HTML saja, melainkan sudah termasuk perpaduan antaran kode HTML dengan CSS, Javascript, dll. (nanti saya jelaskan apa itu CSS, Java Script, dll di kesempatan berikutnya).


Sebagai langkah awal, kita harus mengetahui apa saja yang terdapat pada susunan HTML. Terdapat banyak macam kode editor yang harus anda tahu dalam membangun sebuah halaman website nantinya. Mulai dari kode Tag, Atribut, dan Value. Tag ada yang berpasangan ada pula yang tidak berpasangan, kalau yang berpasangan biasanya selalu diakhiri dengan tanda garis miring sebelum Tag.



Struktur Dasar Dokumen HTML

Nah untuk setiap dokumen HTML ini harus dan selalu diawali dengan tag <html> yang kemudian diakhiri dengan komplemen atau pasangannya, yaitu tag </html>. 


<!Doctype html>

Merupakan suatu deklarasi terkait dengan penggunaan type HTML dengan HTML versi 5.


<html> ... </html>

Tag ini berfungsi sebagai pembuka dalam membuat sebuah kode HTML, Tag ini sendiri wajib ada pada setiap awal penulisan kode HTML. Didalamnya terdapat tag HEAD, TITLE, dan BODY.


Secara garis besar ada 3 pasang struktur HTML yang berpasangan dan wajib ada dalam pembuatannya.


HEAD atau bagian Struktur Kepala

<head> ... </head>

Tag ini berfungsi sebagai kode pembuka kepala yang menyatakan informasi mengenai suatu dokumen pada web.


Title

<title> ... </title>

Berguna sebagai peletakan sebuah Judul dari suatu halaman Web pada Tab bar suatu browser.


Body atau struktur badan

<body> ... </body>

Ini adalah tag yang digunakan untuk menampilkan isi dari sebuah halaman web penuh yang melingkupi Teks, Gambar, Tabel, Link, dan sebagainya.



Kebutuhan yang diperlukan untuk membuat Kode HTML

Web Browser

Untuk mengetahui tampilan web dari struktur HTML yang sudah kita buat kita bisa membukanya melalui aplikasi brower seperti Internet Browser, Safari, Mozilla Firefox, Google Chrome, Opera, dll


Teks Editor

Untuk bisa mengetikan kode-kode HTML sebagai struktur dasar dalam membentuk halaman suatu web bisa dengan menggunakan aplikasi teks editor seperti:

(*Pilih salah satu - Silahkan klik untuk mendownload aplikasinya).



Latihan membuat Struktur Dasar HTML

Sebagai struktur dasar HTML bisa kita memulainya dengan mengetikan pada aplikasi Teks Editor kode-kode seperti dibawah ini:

<!DOCTYPE html>
<html lang="en">
    <head>
        <title> Belajar HTML Dasar </title>
    </head>
    <body>
        <p> Isi Halamannya bisa berupa Teks, Image, Tabel, Link, dll. </p>
    </body>
</html>

Setelah anda ketik kode diatas kemudian simpan dengan nama File Belajar HTML Dasar.html (Ekstensinya harus .HTML Bukan .TXT) lalu untuk melihat hasilnya atau mempublikasikannya yaitu dengan cara membuka hasilnya dengan cara Klik kanan - pilih Browser (Safari, Chrome, Firefox, Opera) dan jika sudah sesuai lihat hasilnya akan seperti Gambar dibawah ini!



Untuk langkah awal sangat mudah bukan? Selebihnya anda bisa mengkreasikan dengan cara menambahkan beberapa elemen HTML untuk memperindah tampilan halaman web dengan mempelajari tag dan fungsinya dari masing-masing elemen dibawah ini.


Elemen dan Atribut HTML

Sekarang saya akan menjelaskan beberapa Format Teks beserta elemen-elemennya yang biasanya digunakan dalam pembuatan struktur kode HTML.


Heading

<h1> Heading1 </h1>

Elemen Heading ini bisa dibilang bagian yang cukup penting dalam pembuatan struktur HTML, seringkali kita tahu bagaimana cara membuatnya akan tetapi masih sangat sering salah didalam penggunaannya. Disini saya akan menjelaskan mengenai cara pembuatan heading yang benar dengan memperhatikan hierarki kepentingan dari suatu informasi yang akan kita sajikan melalui HTML.


Heading1 biasa digunakan untuk Judul Utama dalam pembuatan sebuah dokumen web. Heading2 digunakan untuk Judul, Heading3 untuk Sub Judul, Heading4 untuk Judul Kecil, Heading5 untuk paragraf, begitu seterusnya. Untuk mengetahui  bagaimana bentuk dari sebuah Judul atau heading berikut saya buatkan kode HTMLnya sesuai hierarki susunan yang benar.


    <body>
	  <h1> Heading1 </h1>
	  <h2> Heading2 </h2>
	  <h3> Heading3 </h3>
	  <h4> Heading4 </h4>
	  <h5> Heading5 </h5>
	  <h6> Heading6 </h6>
    </body>

Bisa anda lihat publish perbedaannya melalui implementasi pada web browser anda akan nampak seperti gambar dibawah ini.




Paragraf

<p> ... </p>

Tag ini digunakan pada awal penulisan kalimat dari sebuah paragraf. Dengan beberapa atribut tambahan seperti align: 

<center> rata tengah </center>; 

<right> rata kanan </right>; 

<left> rata kiri </left>; 

<justify> rata kanan-kiri </justify>; 

<b> huruf cetak tebal </b>; 

<i> huruf cetak miring </i>; 

<u> garis bawah huruf </u>; 

<br/> 1 x enter atau berpindah baris;

<color> untuk memberi aksen warna </color>


List (Daftar)

<li> ... </li>

Ada tiga macam jenis list yang bisa dibuat di dalam struktur HTML:

1. Ordered List: List yang terurut

Ordered list selalu dibuat dengan tag <ol> dan di dalamnya berisikan beberapa item yang akan dimasukkan ke dalam list. Untuk item dibuat dengan tag <li> .

2. Unordered List: List yang tak terurut

Unordered list merupakan list yang tak terurut dengan  menggunakan simbol-simbol pada tiap item-nya. Unordered list dibuat dengan tag <ul> dan untuk itemnya dibuat juga dengan tag <li>.

3. Description List: List yang berisi definisi

Description List adalah list yang berisi deksripsi atau penjelasan dari sesuatu. isinya terdapat tiga tag berbeda yang digunakan untuk membuat description list tersebut:
<dl> (description list) sebagai tag untuk memulai description list.
<dt> (description term) sebagai tag untuk membuat kata yang akan dideskripsikan.
<dd> (description description) sebagai tag untuk membuat penjelasan dari kata.

Hyperlink

<a> ... </a>

Dalam HTML Link atau Hyperlink merupakan salah satu elemen yang fungsinya menghubungkan suatu halaman web ke halaman web lain dengan cara meng-klik teks yang sudah disisipkan Link URL.

Selain digunakan untuk berpindah halaman, hyperlink juga bisa digunakan untuk menyisipkan URL file download, scroll top dan atau scroll bagian dokumen tertentu yang masih dalam satu halaman web.

Link pada HTML dibuka dengan tag <a> dan ditutup tag </a> dengan menambahkan atribut href dan value target.


Jenis-jenis Link pada HTML

1. Internal Link

<a href="alamat URL"> ... </a>

Yaitu link yang menuju ke domain atau halaman web itu sendiri, dalam arti lain kalau kita Klik tautan Link maka yang akan kebuka tetap berada pada halaman yang sama dengan tampilan yang sama atau berbeda. Kode ditambahkan atribut href dan value target="_self".

*Bisa pula tanpa menyertakan value target="_self" - sama saja.


2. Eksternal Link

<a href="alamat URL" target="_blank"> ... </a>

Merupakan link yang kalau di buka akan menuju ke domain lain atau akan membuka Tab halaman baru yang berbeda. Dalam kode ditambahkan atribut href dan value target="_blank" agar tautan link terbuka dihalaman yang baru.

Contohnya bisa lihat script dibawah ini:

<!DOCTYPE html>
<html lang="en">
<head>
  <title> Belajar HTML dasar - Hyperlink </title>
</head>
<body>
  <p> Untuk membuka Link pada halaman yang sama
    <a href="https://www.jeprisuwarno.com" target="_self"> Klik link disini! </a>
  </p>
  <p> Untuk membuka Link pada Tab baru dengan halaman yang berbeda
    <a href="https://www.jeprisuwarno.com" target="_blank"> Klik link disini! </a>
  </p>
</body>
</html>


Image SRC

<img> ... </img>

Tag ini digunakan untuk menyisipkan visual gambar pada suatu halaman dokumen web.

Table

<tabel> ... </table>

Tag yang digunakan untuk membuat tabel pada halaman web. Tag tambahannya yang sudah pasti digunakan yaitu: 

<th> ... </th> untuk memberi judul pada kolom,

<td> ... </td> untuk menambahkan kolom, dan 

<tr> ... </tr> untuk menambahkan row atau baris.


dengan beberapa atribut lain seperti:

<bgcolor> untuk memberikan warna pada latar

<border> untuk memberi garis pada tabel

<colspan> untuk menggabungkan kolom, dan <rowspan> untuk menggabungkan baris.

<!DOCTYPE html>
<html>
<head>
   <title> Belajar HTML Dasar - Tabel </title>
</head>
<body>
<h1 align="center"> Contoh Tag Tabel </h1>
<table border="1" align="center">
	<th bgcolor="violet">JUDUL KOLOM 1 </th>
	<th bgcolor="yellow">JUDUL KOLOM 2 </th>
	<th bgcolor="pink">JUDUL KOLOM 3 </th>
	<tr>
        <td> Baris 1, Kolom 1 </td>
        <td> Baris 1, Kolom 2 </td>
        <td> Baris 1, Kolom 3 </td>
    </tr>
    <tr>
        <td align="left"> Baris 2, Kolom 1 </td>
        <td align="right"> Baris 2, Kolom 2 </td>
        <td align="center"> Baris 2, Kolom 3 </td>
    </tr>
    <tr align="center">
        <td> Baris 3, Kolom 1 </td>
        <td> Baris 3, Kolom 2 </td>
        <td rowspan="2"> Baris 3, Kolom 3 digabung dengan baris 4, kolom 3 </td>
    </tr>
     <tr align="center">
        <td colspan="2"> Baris 3, Kolom 1&2 digabung </td>
        </tr>
</table>
</body>
</html>

Hasilnya akan seperti pada gambar dibawah ini:

Text Form

<form> ... </form>

Tag ini digunakan untuk membuat suatu form isian.

Text Div dan Span

<div> ... </div>


<span> ... </span>


Tags:
Lebih baru Lebih lama

Please click the cross to exit!

Contact Me