Belajar HTML Part 1 : Pengertian HTML

Belajar HTML Dasar Pengertian HTML

Apa itu HTML? Mungkin pertanyaan inilah yang terbersit pada benak anda yang
baru mulai masuk kedalam dunia web programming. HTML merupakan bahasa
pemograman dasar yang wajib dikuasai bagi seorang web developer. Karena
HTML merupakan unsur dasar dari pembangunan sebuah website. Jika di
ibaratkan HTML menjadi pondasi pada sebuah rumah atau bangunan karena
bentuk pada halaman website dibuat menggunakan HTML. pada judul
artikel Belajar HTML Part 1 : Pengertian HTML ini akan di jelaskan tentang
pengertian dari HTML dan sekilas tentang sejarah HTML dan
perkembangannya. oleh karena itu anda bisa menyimak artikel berikut ini
tentang Pengertian HTML.

Pengertian HTML

HTML (Hyper Text Markup Language) adalah sebuah bahasa Mark Up yang
digunakan untuk membuat sebuah halaman website. Di dalam dunia
pemograman berbasis website (Web Programming) html menjadi pondasi
dasar pada halaman website. Sebuah file HTML disimpan dengan ekstensi
.html (dot html) dan dapat dieksekusi atau diakses menggunakan web browser
(Google Chrome, Mozilla Firefox, Opera, Safari dan lain-lain). Seperti yang
sudah di jelaskan HTML adalah dasar dari sebuah website. Untuk membuat
sebuah website tidak cukup hanya menggunakan HTML, kita memerlukan
bantuan CSS, JavaScript dan PHP untuk membuat sebuah website yang
dinamis. Jika halaman website dibuat hanya menggunakan HTML saja maka
halaman website tersebut disebut halaman statis karena tidak memiliki aksi
atau fungsi-fungsi yang dapat mengelola website. Tentu developer akan sangat
disibukkan dengan harus mengubah lagi file HTML setiap ingin mengupdate
artikel.

HTML memiliki beberapa element yang tersusun dari tag-tag yang memiliki
fungsinya masing-masing. Seperti tag heading, paragraf, pembuatan form,
tombol, list, membuat hyperlink atau link yang menghubungkan antar halaman
website dan banyak lagi lainnya yang akan malasngoding.com bahas pada
artikel belajar HTML dasar selanjutnya di malasngoding.com.

Kegunaan HTML

HTML berfungsi sebagai pondasi sebuah halaman website. Adapun yang dapat
dilakukan dengan HTML adalah sebagai berikut :
  Membungkus element-element tertentu sesuai kebutuhan
 Membuat heading atau format judul
 Membuat Tabel
 Membuat List
 Membuat Paragraf
 Membuat Form
 Membuat Tombol
 Membuat Garis
 Membuat huruf tebal
 Membuat huruf miring
 Menampilkan gambar
 Menampilkan video
 Dan banyak lainnya yang akan kita pelajari di artikel malasngoding.com selanjutnya

Sampai saat ini HTML sudah sampai pada versi 5. HTML5 sudah memiliki
banyak sekali fitur tambahan salah satunya dengan HTML5 memungkinkan kita
untuk membuat streaming video tanpa bantuan flash. untuk tutorial cara
membuat streaming video dengan HTML5 juga akan kita bahas pada
tutorial belajar HTML dasar pada artikel selanjutnya di
malasngoding.com. Belajar HTML Dasar Pengertian HTML

Jadi kesimpulan dari pengertian HTML ini adalah HTML merupakan pondasi
dasar dari sebuah pembuatan sebuah website. untuk mengeksekusi atau
menjalankan file html harus menggunakan web browser.

Belajar HTML Part 2 : Memilih Text Editor

Untuk anda yang baru mau belajar bahasa pemrograman, disini khususnya
pemrograman web tentulah berfikir bagaimana saya membuat, dan apa yang
harus saya gunakan untuk membuat program? berikut kami sediakan jawaban
yang mungkin terbesit dalam hati/pikiran anda yang baru mau belajar bahasa
pemrograman. Sebelum kita memulai cara penulisan HTML terlebih dahulu
yang harus anda sediakan adalah text editor dan browser.

Text Editor merupakan aplikasi yang digunakan untuk menulis syntax atau
kode program, disini khususnya untuk penulisan kode program HTML itu
sendiri. Text editor sendiri sangatlah banyak yang bisa digunakan untuk
penulisan kode HTML, seperti Nodepad yang disediakan oleh sistem operasi
windows, TextEdit yang disediakan oleh sistem operasi Mac dan Nano yang
disediakan oleh sistem operasi linux. Text editor berbeda dengan Word
Processor (Microsoft Word, King Soft, WordPerfect). Itu dikarenakan text editor
tidak bisa digunakan untuk mengatur format document serta tidak disediakan
fitur-fitur yang bisa digunakan untuk desktop publishing.
Browser merupakan aplikasi yang akan kita gunakan untuk menjalankan code
program html yang sudah kita tulis. Browser ini ialah syarat yang harus anda
penuhi jika anda belajar web programing. Untuk browser itu sendiri bisa
digunakan yang sudah disediakan oleh sistem operasi langsung ataupun bisa
juga digunakan aplikasi browser yang lain misalnya Mozilla Firefox, Opera,
Chrome dan sebagainya.

Berikut beberapa text editor yang kami sarankan untuk digunakan dalam
penulisan code program bagi anda yang baru belajar bahasa pemograman.

1. sublime text. Text editor yang paling banyak digunakan oleh programer, editor ini
memiliki tampilan yang elegan yang khas dengan warna kecoklatannya. Editor ini
tersedia untuk windows, Mac, dan Linux. Untuk anda yang ingin menggunakan sublime
bisa di download disini

Sublime Text

2. notepad++. Text editor ini khusus bisa digunakan untuk windows dan free lisensi
(dalam artian bebas digunakan tanpa mengeluarkan biaya). Editor ini memili ciri khas
tersendiri dan banyak fitur-fitur yang bisa diinstall di text editor ini. untuk anda yang
ingin menggunakan text editor notepad++ bida di download disini
 notepad++

3. Atom. Text editor ini hampir sama dengan sublime namun text ini agak sedikit lebih
berat jika dibandingkan dengan sublime. Editor ini bisa digunakan oleh platform Mac,
Windows, dan Linux. Untuk anda yang ingin menggunakan text editor ini bisa di
download di sini

Atom
4. Brackest. Text editor ini memiliki kriteria tersendiri dan hampir sama dengan Atom.
editor ini bisa digunakan untuk Platform Mac, Windows dan Linux. untuk anda yang
ingin bergelut dengan brackest bisa di download disini

Brackest

5. Netbeans. Text editor ini merupakan salah satu favorit programer. namun text editor
bisa di kategorikan lebih berat dari text editor lain yang disebutkan di atas. Kemudahan
text editor ini adalah tampilan kode program yang ditulis lebih rapi. untuk anda yang
ingin menikmati editor ini bisa di download disini
 Netbeans
itulah beberapa list text editor yang bisa versi malasngoding.com yang bisa
digunakan untuk menulis code HTML. Text editor ini selain bisa digunakan
untuk menulis code html bisa juga untuk meulis code program lainnya seperti
php,CSS, JavaScript, dan beberapa code program untuk desktop.

Jadi kesimpulannya, sebelum memulai penulisan kode program yang harus

anda penuhi terlebih dahulu adalah text editor yang digunakan dan browser
untuk menjalankan code program.
Belajar HTML Part 3 : Mengenal Tag, Element, Atribut HTML

Stetelah pengenalan HTML, Text Editor pada tutorial sebelumnya. Kini kita
akan memasuki tutorial pengenalan dan penggunaan Tag, Element dan Atribut
dalam HTMl. Ketiga pembahasan ini merupakan dasar dalam penulisan kode
HTML atau dasar dari seluruh tampilan halaman web yang ada di internet.

Tag HTML
Tag merupakan kode yang digunakan untuk memperkenalkan pada web
brawser untuk apa text HTML yang ditulis. HTML membutuhkan cara
memperkenalkan text yang ditulis didalamnya kepada web browser baik text itu
berupa list, paragraf, link dan sebagainya. Disinilah digunakan tag. Dalam
penlisan tag, hampir semua menggunakan pembuka dan penutup tag, dimana
objek yang dimaksudkan berada diantara pembuka dan penutup tag. Berikut
penulisan tag yang digunakan dalam HTML.
1 <tag>Objek yang diisi</tag>

perbedaan antara tag pembuka dan tag penutup yaitu, pada tag pembuka
diawali kurung sudut pembuka, tag yang dimaksud, dan diakhiri dengan kurung
sudut penutup. Sedangkan pada penutup tag itu diawali dengan kurung sudut
pembuka, backslash, tag yang dimaksud, dan diakhiri dengan penutup kurung
sudut.

jenis tag yang sering digunakan dalam html

berikut beberapa jenis tag yang siring anda jumpai kalo di web programing :

Tag Fungsi

<!– ….–> Digunakan untuk memberi sebuah komentar atau keterangan

<!DOCTYPE html> digunakan untuk nendefinisikan tipe document

Mendefinisikan sebuah anchor, digunakan untuk saling

<a> menautkan antara satu dokumen HTML ke dokumen HTML
yang lain

<b> membuat teks menjadi tebal

<p> membuat paragraf

<h1> membuat heading satu

<h2> membuat heading dua

<body> mendefinisikan body/isi dokument html

 Tag Fungsi

<head> mendefinisikan bagian kepala dokumen html

<title> memdefiniskan judul halaman

<div> mendefinisikan halaman

<link> mendefinisikan hubungan antar dokumen

<script> Mendefinisikan client-side script

<table> mendefinisikan tabel

<th> Mendefinisikan sel header di dalam sebuah tabel

<td> Mendefinisikan sel di dalam sebuah tabel

<tr> Membuat baris di dalam sebuah tabel

<ul> Mendefinisikan daftar dalam format bullet

<li> mendefinisikan list

Element HTML
Element pada HTML merupakan isi atau objek yang berada tag. Maksudnya,
isi yang ada di antara tag pembuka dan tag penutup (termasuk jenis itu sendiri)
misalkan :

1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title></title>
5 </head>
6 <body>
7 <strong><h2>Pengenalalan atribut HTML</h2></strong>
8 </body>
9 </html>

pada contoh diatas <h2> ini adalah heading dua <h2> merupakan element h2
dan isinya ini adalah heading dua. dalam element ini bisa berupa text
ataupun tag lain misalnya <link> dan sebagainya.

Atribut pada HTML

Atribut merupakan informasi tambahan yang digunakan di dalam tag pembuka.
Informasi ini bisa berupa instruksi untuk memberikan efek warna, ketebalan,
dll. Atribut biasanya memiliki 2 bagian yaitu nama dan nilai, dapat
ditulis name=”value”. penulisan nilai/value diapit oleh dua tanda kutip (bisa
digunakan kutip satu atau kutip dua).
penulisan atribut pada HTML diawali dengan penulisan tag, didalam tag berikan
atribut dan element dari tag itu sendiri berikut contoh penulisan atribut
pada HTML :

1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title></title>
5 </head>
6 <body>
7 <h2 align="center">Pengenalalan atribut HTML</h2>
8 </body>
9 </html>

 <h2> adalah tag heading 2

 align adalah nama dari atribut
 center adalah nilai dari atribut
 pengenalan atribut HTML adalah element dari tag h2

tidak semua tag ini membutuhkan atribut di dalamnya, namun bagi anda yang
begelut di web programing akan sering menjumpai tag yang didalamnya
terdapat atribut.

Pada HTML ini banyak sekali atribut yang bisa digunakan tetapi hanya cocok
untuk tag-tag tertentu saja. Misalkan penggunaan atribut href yang hanya
bisa digunakan pada tag <a> beberapa tag lain.

Belajar HTML Part 4 : Heading Pada HTML

Heading merupakan element atau tag HTML yang berfungsi untuk

menunjukkan bagian penting pada halaman web. Element tag heading ini
memiliki enam tingkatan yang berurutan yaitu <h1>,<h2>,<h3>,<h4>,<h5>,
<h6> yang bisa digunakan untuk menambah ke struktur halaman web.
Perbedaan masing-masing heading yaitu besar hingga kecil teks. contohnya
tag/element <h1> lebih besar dari element/tag <h2> dan seterusnya.

Penggunaan masing-masing heading juga berbeda, berikut penggunaan

masing-masing tag/element heading yang sering digunakan pada pengolahan
halaman web :

1. <h1> heading yang digunakan untuk penulisan judul utama dari dokumen
2. <h2> heading yang digunaakan sebagai sub <h1>
3. <h3> heading yang digunakan sebagai sub <h2>
4. untuk penggunaan <h4><h5><h6> tergantung programmer sendiri untuk
memperindah halaman web.
Berikut contoh penerapan masing-masing elmen/tag heading:

1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title></title>
5 </head>
6 <body>
7 <h1>ini adalah heading 1</h1>
8 </body>
9 </html>

heading satu

1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title></title>
5 </head>
6 <body>
7 <h1>ini adalah heading 1</h1>
8 <h2>ini adalah heading 2</h2>
9 <h3>ini adalah heading 3</h3>
10 <h4>ini adalah heading 4</h4>
11 <h5>ini adalah heading 5</h5>
12 <h6>ini adalah heading 6</h6>
13 </body>
14 </html>

contoh penulisan heading

Dari contoh yang di atas dapat anda lihat perbedaan antara masing-masing
heading. Penulisan heading ini boleh digunakan di dalam jenis tag yang lain.
Berikut contoh penggunaan element heading di dalam tag lain:

1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title></title>
5 </head>
6 <body>
7 <a href="https://www.malasngoding.com/"><h1>ini adalah heading 1 </h1></a>
8 </body>
9 </html>

Belajar HTML Heading Pada HTML

contoh diatas yaitu penggunaan tag heading yang berada dalam tag
<a>. sedengkan element href digunakan untuk menghubungkan dengan
dokumen/link yang lain. Ketika diklik pada “ini adalah heading 1” akan di alihkan
ke halaman https://www.malasngoding.com

Kesimpulannya: salah fungsi dari tag heading ini adalah untuk merapikan
struktur penulisan dalam HTML, misalkan penulisan judul yang menggunakan
text yang lebih besar dari sub judul.

Belajar HTML Part 5 : Format Text Pada HTML

Dalam penuliasan HTML sangat sering menggunakan format text didalamanya.

baik itu dalam penulisan judul, ataupun isi dari content/halaman dari website
sendiri. Berikut beberapa penjelasan dan contoh dari Format Text Pada HTML.

1. Format text bold (tebal). untuk membuat teks menjadi tebal pada tampilan
halaman web menggunakan tag <b> berikut syntax HTML untuk membuat
format text tebal :
1 <b>ini text tebal</b>

2. format text italic (miring). untuk membuat teks miring pada HTML
menggunakan tag <i>, contohnya
1 <i>ini text miring</i>

3. format text underline (garis bawah), untuk membuat teks underline/garis

bawah pada HTML menggunakan tag <u>
1 <u>ini text underline</u>
berikut format text yang sering digunanakan dalam HTML.
tag description

<b> format text bold/tebal

<i> format text italic/miring

<u> format text underline/garis bawah

<small> format text kecil

<strong> format text yang hampir sama dengan format bold

<sub> format subscripted teks

<sup> format superscripted teks

<ins> format text garis bawah

<del> format text dengan garis di tengah

<mark> format text yang berwarna

berikut contoh penulisan tag/element format text di yang sudah di pelajari di
atas :
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>belajar format format text</title>
5 </head>
6 <body>
7 <b>ini format format text tebal</b><br/>
8 <i>ini format text italic</i><br/>
9 <u>ini format text underline</u><br/>
10 <em>ini format text em</em><br/>
11 <small>ini format text small</small><br/>
12 <strong>ini format text strong</strong><br/>
13 _{ini format text sub}<br/>
14 ^{ini format text sup}<br/>
15 <ins>ini format text ins</ins><br/>
16 <del>ini format text del</del><br/>
17 <mark>ini format text mark</mark>
18 </body>
19 </html>

Belajar HTML Format Text Pada HTML

Belajar HTML Part 6: Membuat Paragraf Pada HTML

untuk memahami pembuatan paragraf <p> pada HTML, diharapkan anda

terlebih dahulu sudah memahami penulisan dan apa itu tag, element, atribut
(bisa anda pelajari disini). Paragraf disini merupakan suatu tag untuk membuat
suatu elemen dalam penulisan HTML. Dalam paragraf itu sendiri terdapat 3
element/tag lain yang bisa dikombinasikan langsung dengan tag paragraf <p>.
element tag tersebut yaitu :
1. paragraf rata kiri menggunakan align left
2. paragraf rata kanan menggunakan align right
3. paragraf rata tengah menggunakan align center
4. paragraf rata kiri kanan menggunaan align justify

penulisan paragraf <p>

HTML mengunakan tag kusus untuk membuat paragraf yaitu <p>. perhatikan
contoh berikut :

1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>belajar membuat paragraf</title>
5 </head>
6 <body>
7 ini adalah paragraf pertama
8 ini adalah paragraf kedua
9 </body>
10 </html>

Membuat Paragraf Pada HTML

dari contoh di atas itu termasuk penulisan paragraf yang kurang tepat, di
karenakan paragraf satu dan paragraf kedua tidak di pisahkan melainkan di
satukan. dalam HTML enter dan spasi itu di abaikan.
untuk penulisan yang lebih tepatnya, paragraf menggunakan <p> berikut
inplementasi <p> dalam dokumen HTML :

1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>belajar membuat paragraf</title>
5 </head>
6 <body>
7 <p>ini merupakan penulisan paragraf pertama dalam dokument HTML</p>
8 <p>ini merupakan penulisan paragraf kedua dalam dokument HTML</p>
9 </body>
10 </html>
 Membuat Paragraf Pada HTML

dari contoh di atas dapat anda lihat bahwa penulisan paragraf pertama dan
paragraf kedua dipisahkan. Untuk memisahkan antara paragraf satu dan dua
ini menggunakana <p>.

Jenis Paragraf
paragraf rata kiri
1 <p align="left">1. ini merupakan penulisan paragraf rata kiri dalam dokument HTML</p>

paragraf rata kanan

1 <p align="right">2. ini merupakan penulisan paragraf rata kanan dalam dokument HTML</p>

paragraf rata tengah

1 <p align="center">3. ini merupakan penulisan paragraf rata tengah dalam dokument HTML</p>

paragraf rata kiri kanan

1 <p align="justivy">4. ini merupakan penulisan paragraf rata kiri kanan dalam dokument HTML</p>

berikut contoh lengkapnya :

1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>belajar membuat paragraf</title>
5 </head>
6 <body>
7 <p align="left">1. ini merupakan penulisan paragraf rata kiri dalam dokument HTML</p>
8 <p align="right">2. ini merupakan penulisan paragraf rata kanan dalam dokument HTML</p>
9 <p align="center">3. ini merupakan penulisan paragraf rata tengah dalam dokument HTML</p>
10 <p align="justivy">4. ini merupakan penulisan paragraf rata kiri kanan dalam dokument HTML</p>
11 </body>
12 </html>

Contoh paragraf
penulisan paragraf <br>
cara lain yang bisa anda gunakan dalam penulisan paragraf dalam dokumen
HTML adalah menggunakan tag </br> atau dikenal dengan break. perhatikan
contoh berikut :

1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>belajar membuat paragraf</title>
5 </head>
6 <body>
7 ini merupakan penulisan paragraf pertama </br>
8 ini merupakan penulisan paragraf kedua
9 </body>
10 </html>

penulisan paragraf menggunakan

dari contoh di atas bisa anda lihat penggunaan </br> dalam dokument HTML.
</br> ini bisa digunakan dalam penulisan paragraf namun fungsi dari </br>
sebenarnya adalah memisahkan teks satu dengan teks lainnya. Ada sedikit
perbedaan antara penggunaan <p> dengan <br/> yang bisa anda lihat sendiri
di atas. Salah satu perbedaannya adalah jika menggunakan <p> maka baris
yang di atur dalam HTML lebih besar dibandingkan dengan </br>. Jika
memang membutuhkan paragraf dalam dokumen HTML sebaiknya langsung
menggunakan tag <p>.