New Updates

Mengenal HTML dan Belajar Dasar-Dasar HTML untuk Membangun Website

April 18, 2020 , , ,
Pada kesempatan kali ini saya akan berbagi materi tentang mengenal HTML dan Dasar-Dasar sorce code HTML. Tujuan dari belajar HTML adalah untuk menjadi web designer (pembuatan layout dari website), akan diperkuat dengan mempelajari CSS dan JS.



A. Mengenal HTML

HTML HyperText Markup Language, adalah Bahasa Markup yang digunakan untuk membuat tampilan dari website yang dapat tampil di browser, atau digunakan untuk membuat kerangka kerangka (Frame) suatu website.


Bahasa Markup adalah bahasa komputer yang digunakan untuk mendefinisikan struktur adalah menampilkan teks. Suatu teks disebut menggunakan bahasa markup apabila teks tersebut telah ditandai (memberi tanda pada pada suatu teks), ketika diinterpretasikan oleh komputer maka tampilan susunan dari teks tersebut akan berubah.

HyperText adalah teks yang ditampilkan di komputer atau perangkat yang menyediakan akses ke teks lain melalui tautan, atau disebut juga sebagai "hyperlink.".

Aplikasi yang dapat digunakan untuk membuat atau mengedit HTML dengan cara coding manual adalah :
Windows: notepad, notepad++, Sublime Text, VS Code dan lain sebagainya.
Linux : Gedit, Blue Fish, dan lain-lain.

Selain dengan cara coding untuk membuat tampilan website dapat dilakukan dengan cara lain yaitu menggunakan aplikasi yang drag and dorp, misal : adobe DreamWeaver. Dengan tool drag and drop pembuatan tampilan web akan lebih efisien (cepat). 

Namun saya lebih suka membuat dengan cara coding manual karena akan mempermudah dalam melakukan costume pada HTML yang saya buat, sehingga hasilnya akan sesuai dengan yang saya inginkan.

B. Versi-versi dari HTML 

  • HTML 

    HTML release pertama kali pada tahun 1991. Versi awal HTML hanya dapat berisi text saja misalkan heading, cetak tebal (bold), cetak miring (italic), paragraph. Website pertama kali masih berbentuk website statis.

  • HTML 2

    HTML 2 release pada tahun 1995. HTML 2 merupakan perkembangan dari HTML dengan ditambahkan vitur berupa form. Versi HTML ini dapat dikatakan sebagai awal untuk membuat sebuah web interaktif.

  • HTML 3.2

    HTML 3.2 release pada tahun 1997 merupakan perkembangan lebih lanjut dari HTML 2 dengan menambahkan fitur baru salah satu fitur yang terkenal pada masa ini adalah fitur tabel.

  • HTML 4

    HTML 4 release pada tahun 1999. Dengan menambahkan fitur seperti imagemaps, link dan sebagainya.
    HTML versi 4 sudah memungkinkan web dapat memiliki tampailan interface yang baik untuk pengguna.

    Pendeklamasian DOCTYPE pada HTML 4 :

    HTML 4.01 Strict 
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

    HTML 4.01 Transitional 
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

    HTML 4.01 Frameset 
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

  • XHTML

    Extensible hypertext markup language, merupakan salah satu versi HTML yang yang release pada tahun 2000, setelah HTML 4. XHTML adalah bahasa markup layakanya HTML, namun memiliki gaya bahasa lebih baik, karena XHTML merupakan versi HTML yang memenuhi persyaratan XML.

    Pendeklarasia DOCTYPE pada XHTML
    XHTML 1.0 Strict 
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

    XHTML 1.0 Transitional 
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    XHTML 1.0 Frameset 
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

  • HTML 5

    HTML 5 release pada tahun 2014. HTML yang pada umumnya digunakan pada saat ini. Element yang telah ditambahkan pada HTML 5 :
    - Memiliki semantic element baru : <header>, <footer>, <article>, dan <section>.
    - Terdapat atribut untuk element yang baru : number, date, time, calendar, dan range.
    - Terdapat element graphic : <svg> dan <canvas>.
    - Terdapat element multimedia yang baru : <audio> and <video>.

    Berikut ini adalah deklarasi doctype dari HTML 5 :
    <!DOCTYPE html>

C. Perbedaan Tag, Element dan Atribut pada HTML

  • Tag

    Tag pada HTML adalah bahasa markup yang digunakan untuk mengubah tampilan dari suatu teks, pada umumnya teks yang ditampilkan di web browser tampilan nya akan dibedakan berdasarkan tag yang digunakan untuk melengkapi teks tersebut.
    <p> </p>
    Tag yang memberikan efek pada teks dibuat secara berpasangan, jika ada tag pembuka maka ada tag penutup. Ketika anda mendeklarasikan tag jangan lupa menutupnya, Jika source code sudah ribuan dan ada yang tag yang tidak anda tutup kadang akan menyebabkan tata letak website yang anda buat menjadi acak-acakan, dan kadang susah untuk mencari dimana anda harus menutup tag tersebut.

    Ada juga tag yang tidak perlu ditutup yaitu :

    break <br>, berfungsi untuk membuat baris baru atau berganti baris (memberikan effect enter pada document HTML).
    horizontal line <hr>, adalah tag yang digunakan untuk menampilkan garis horizontal.
    image <img scr="">, adalah tag yang digunakan untuk menampilkan gambar dari link atau url yang dipanggil.


  • Element

    Yang disebut sebagai Element  pada HTML adalah tag yang telah diisi. contoh pada gambar diatas adalah tag <span>  yang berisi teks berupa "Lorem ipsum dolor sit laborum".

  • Atribut

    Atribut adalah suatu perlengkapan yang dimiliki oleh tag atau dapat ditambahkan pada suatu tag. Contoh :

    Hyperlink
    <a href=""></a>
    tag <a>  memiliki atribut href="", yang berfungsi sebagai tepat link yang dituju apabila text pada tag <a> tersebut dikilk.

    Gambar
    <img scr="">
    tag <img> memliki atribut src="", yang berfungsi untuk link gambar yang akan ditampilkan pada ketika tag <img> diinterpreterkan oleh web browser.


D. Berikut ini adalah Source Code Dasar HTML



E. Beberapa Contoh Tag pada HTML

1. html

html adalah tag paling luar dari HTML file yang digunakan untuk membungkus menjadi 1 dari tag-tag dalam satu kesatuan yaitu HTML. Penulisan :
<html></html>

2. head

head adalah bagian dimana kita bisa mendeklarasikan metadata suatu website.
Selain metadata tag <head> juga diguankan untuk mendeklarasikan Framework website dapat berupa CSS, JS, font yang bersifat external. Penulisan
<head></head>

3. title

tag tittle berisi tentang nama dari halaman yang akan anda buat, ketika file html dibuka di browser maka title akan tampil sebagai site title.
contoh :

Source Code :
<title>Belajar HTML</title>
Hasil :

4. body

<body> adalah bagian dimana dapat mengisikan content atau isi dari web tersebut.
Gambar diatas menjelaskan isi dari tag <body>. didalam tag body terdapat bebrapa tag yang berfungsi untuk menyusun tata letak dari suatu website.

5. header

<header> tag header pada umumnya digunakan sebagai wadah dari Judul dan deskripsi singkat dari content yang dimuat oleh website atau blog yang bersangkutan.

6. nav

<nav> adalah tag digunakan untuk menyusun navigasibar atau menubar pada suatu website. Navigasi Bar biasaya berisi. Link About, Contact US, Sitemap, atau link menuju layanan-layanan lain yang disediakan oleh suatu website.

7. content

<content> adalah tag yang digunakan untuk isi / bagian utama / content dari suatu website. Bisa dikatakan tag <content> pada template blogspot diguanakan untuk menampilakan artikel, meskipun tidak semua template blog menggunakan pendeklarasian <content> untuk mendeklarasikan isinya.

8. aside

<aside> adalah sidebar berada disebalah kanan atau kiri dari conten Web, digunakan sebagai wadah tools dari yang disedian oleh web misalkan Terjemahan, atau biasanya juga digunakan sebagai wadah iklan.

9. footer

<footer> adalah bagian paling bawah sendiri dari web, biasanya berisi Copyright content, template dari  Website, kadang juga diisi sosial media yang bersangkutan dengan web tersebut.

10. Division

Division <div> adalah tag yang digunakan untuk membuat bagian-bagian dari website (division dapat digunakan untuk membuat layout website). seperti beberapa tag yang talah kita kenal <header>, <nav>, <aside>, <contect>, <footer>, dapat diwakilkan oleh <div>. Namun untuk membedakan fungsi dari <div> satu dengan <div> yang lain dapat dideklarasikan id atau class  disertai dengan nama class atau id tersebut. Contoh :

<div class="header"></div>
<div class="content"></div>

untuk belajar lebih lanjut dalam layout website dengan menggunakan div. Membuat layout tata letak website.

11. heading

heading adalah tag yang diguankan untuk mendeklarasikan judul, sub judul, dan judul-judul yang lain. terdapat 6 buah heading yang dapat digunakan yaitu <h1> sampai dengan <h6>, masing masing heading memiliki size atau ukuran yang berbeda sesuai dengan kebutuhan dalam meletakkan judul. berikut ini adalah contoh sourcecode dan hasilnya :

Source Code:
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
Hasil :

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

12. paragraf

<p></p> adalah tag yang digunakan untuk mengelompokan bebrapa kalimat yang akan tampil supaya dapat tersusun dalam suatu paragraf. Contoh :

Source Code :
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p><p>Duis aute irure dolor in reprehenderit sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
Hasil :
Lorem ipsum dolor sit amet, consectetur adipisicing elit, exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

13. bold

bold tag yang digunakan untuk merubah text yang ada di dalam nya menjadi BOLD / cetak Tebal. Contoh  :

Source Code :
<b>Cetak Tebal</b>
Hasil : Cetak Tebal

14. italic

italic adalah tag yang digunakan untuk merubah teks atau karakter yang ada di dalam nya menjadi Italic / cetak miring. Contoh :

Source Code :
<i>Cetak Miring</i>
Hasil : Cetak Miring

15. underline

underline adalah tag yang digunakan untuk merubah teks atau karakter yang ada di dalam nya menjadi Underline / bergaris bawah. Contoh :

Source Code :
<u>Ditampilkan dengan Underline</u>
Hasil : 
Ditampilkan dengan Underline

F. Cara Membuat file HTML :

Berikut ini saya akan membuat html file menggunakan notepad.
  • Pertama, Buka notepad.
  • Kemudian, ketik source code berikut ini :

  • Selanjutnya, silahkan simpan source code yang telah anda ketik dalam file  dengan format / ektensi .html.
    Berikut contoh source code yang saya kertik di notepad kemudian simpan dengan nama index.html.
    Ubah type file yang awalnya Text Documents menjadi All Files.
    Ubah format menjadi nama_file.html.
    Kemudian Save.
  • Untuk melihat hasil conding anda silahkan buka di web browser anda, file HTML yang telah anda simpan dengan cara drag ke web browser, dan hasilnya seperti berikut ini :


Untuk membuat .html file sangat mudah bukan?
Selanjutnya apabila anda berminat untuk menjadi web designer anda perlu belajar CSS, Java Script, meningkatkan kreatifitas anda dalam membuat tampian website dan menambah pengalaman.

~Semoga Bermanfaat~

No comments

Subscribe to: Post Comments ( Atom )