TUTORIAL DASAR-DASAR HTML

DASAR PEMOGRAMAN WEB

BAMESWARA
1|TUTORIAL DASAR HTML5
KATALOG DASAR
COVER DEPAN......................................................................................................................................... 1
KATALOG DASAR .................................................................................................................................... 2
KATA PENGANTAR.................................................................................................................................. 3
PENGERTIAN HTML ................................................................................................................................ 4
Sofware untuk mengedit document HTML ......................................................................................... 7
Tag pada document HTML .................................................................................................................. 8
Atribut pada Document HTML .......................................................................................................... 11
Comment pada document HTML ...................................................................................................... 16
Gaya pada document HTML ............................................................................................................ 18

Warna pada document HTML ......................................................................................................... 22

Resvonsif pada document HTML .................................................................................................... 24

2|TUTORIAL DASAR HTML5

 KATA PENGANTAR

Puji syukur selalu dipanjatkan dihadirat pemberi karunia, pemberi

rahmat, pemberi kehidupan yaitu Allah Tuhan sekalian alam semesta.
Tidak terlupa sebuah salam tertuju pada kekasih Nya yang mulia, pada
para pengharap kemulian yang senantiasa berbuat kebajikan di dunia.
Salam untuk mereka yang mengabdikan dirinya untuk sebuah ilmu
pengetahuan, tanpa ilmu maka tidak akan mungkin manusia memberikan
suatu peradaban dari zaman ke zaman.
Dalam menjalani hidup yang tidak terlepas dari waktu, waktu yang menjadikan
manusia sadar betul bahwa kehidupan selalu terus maju tanpa mengalami
kemunduran sedikitpun begitu juga dengan ilmu pengatahuan terus maju dengan
sebuah teknologi-teknologi yang menakjubkan diantaranya teknologi informasi
yang berbasis digitalisasi, munculah bahasa-bahasa yang dirancang dan
dikembangkan khusus sebagai suatu motorik penggerak berupa bahasa
pemograman komputerisasi.
Maka disela-sela waktu yang dijalani tidak ingin bergitu saja mengabaikan
momentum untuk mempelajari sedikit dari pengetahuan yang telah para ilmuan
kembangkan berupa bahasa pemograman, untuk itu disusunlah Tutorial Dasar-
Dasar HTML sebagai media pembelajaran pengembangan dasar web, penulis
tidak menunjukan atau menyatakan bahwa tulisan ini milik pribadi, tulisan ini
adalah milik mereka yang telah berjasa mengembangkannya, karena tidaklah
pantas seandainya penulis yang hanya penikmat menyatakan bahwa ilmu tentang
bahasa pemograman HTML ini milik pribadi.
Ucapan terimakasih yang sebesar-besarnya tertuju pada para sainstis yang telah
berhasil menyumbangkan ilmu bahasa pemograman html, pada para pembaca
yang selalu memberikan minat dalam yang begitu besar pada perkembagan ilmu
teknologi, serta pada semua yang telah berperan membantu tersususnya tutorial
ini, sebagaimana tujuan menuliskan tutorial ini ditunjukan pada siapa saja yang
hendak mempelajari HTML, walaupun penulis menyadari bahwa telah banyak
mengenai pembahasan yang sama tapi setidaknya, penulis ingin menyajikan
dalam bentuk yang berbeda. Tentunya juga dalam penyusunan tutorial ini masih
banyak terdapat kekurangan, maka masukan berupa kritik dan saran diterima
dengan penuh rasa hormat.

PENULIS

3|TUTORIAL DASAR HTML5

 PENGERTIAN HTML

Ketika Anda mulai mengenal dunia Internet melalui browser seperti

operamini, ucbrowser. Mozila, chrom, internet explorer, Microsoft edge,
dll. Tentunya Anda akan mengunjungi beberapa web-web yang berisi
berbagai konten menarik untuk sekedar membacanya atau hanya sekedar
berselancar.

Web-web itu didukung oleh sebuah bahasa dasar website yang disebut
bahasa pemograman HTML (Hyper Text Markup Language), yang
berhasil dibuat oleh seroang fisikawan berkebangsaan Swiss bernama
Tim Berners-Lee pada tahun 1990 saat dia bergabung sebagai seorang
Kontraktor di CERN (Suatu badan organisasi eropa untuk penelitian
Nuklir), serta HTML berhasil dirilis pertama kali pada tahun 1993 hingga
sampai sekarang perkembangan HTML dapat digabungkan dengan
teknologi bahasa pemograman lain seperti CSS (Cascading Style Sheets),
JavaScript dan VBScript.

Dokumen HTML pada dasarnya seperti dokumen biasa, hanya saja dalam
dokumen HTML sebuah tulisan bisa membuat instruksi yang ditandai
dengan kode atau Tag tertentu. Dokumen tersebut kemudian disebut
dengan Dokumen web page atau halaman web. Dekumen html sendiri
hanya dapat disajikan melalui web browser.

Pembuatan dokumen bisa dibuat melalui teks editor, seperti Notepad,

Notepad++, dan software teks editor lainnya. Penamaan dokuman html
diberi nama bebas sesuai dengan apa yang dikehendaki, kemudian diberi
format .htm atau .html .

Documen html disusun elemen-elemen atau suatu komponen dasar

pembentuk html, contohnya jika ingin membuat tampilan huruf miring,
seperti Huruf Miring maka cara penulisannya dilakukan sebagai berikut
<i>Huruf Miring</i> .

4|TUTORIAL DASAR HTML5

Elemen HTML yang dibutuhkan sebagai pembentuk suatu dokumen
html, dinyatakan dengan TAG <html>, <head> , dan <body>. Setiap
dokumen terdiri atas tag head dan body. Elemen head berisi informasi
tentang dokumen tersebut dan elemen body berisi teks yang akan
ditempilkan.

Lalu kenapa alasanya Anda harus mempelajari html?

Sebenarnya utuk mempelajari html tidak harus bagi mereka yang tidak
membutuhkan internet sebagai media untuk berbagi informasi, bagi
mereka yang tidak mau mempelajarinya maka hanya akan membuang-
buang waktu, jawabannya kenapa Anda harus mempelajari bahasa
pemograman HTML pertama jika Anda membutuhkan keterampilan
ingin membuat website, membuat toko online melalui web maka
setidaknya Anda harus menguasai teknik-teknik dasar html untuk
mengembangkan website Anda.

Manfaat mempelajari bahasa pemograman html sangatlah banyak

dimana di era teknologi informasi disajikan melalui internet atau web
browser, sehingga ketika Anda ingin membagikan hanya sekedar
informasi atau menjual produk yang Anda punya bisa setidaknya
menggunakan html utuk mempercantik halaman web yang Anda miliki.

5|TUTORIAL DASAR HTML5

Contoh penulisan dasar html

 <! DOCTYPE html> : Merupakan deklarasi untuk memulai

dokumen pada HTML5.
 <html> : Merupakan elemen pembukaan untuk memulai suatu
dokumen html meliputi seluruh tag, elemen, gaya sheets, scripts,
teks, gambar multimedia, dan masih banyak lainnya.
 <head> : Merupakan bagian atas atau kepala sebuah halaman pada
dokumen html, yang dapat dilanjutkan dengan menuliskan elemen
tag lain seperti <title>, atau <meta>.
 <title> : Merupakan judul yang akan ditampilkan dibagian atas
browser anda
 <body> : Merupakan bagian tubuh atau badan sebuah halaman
web, dengan menambakan elemen-elemen seperti <h1>, <p>, <i> ,
<br>, <img> dan lain-lain.
 <h1> : Merupakan elemen heading atau judul atas
 <p> : Merupakan elemen untuk menampilkan paragraph

Catatan : Setiap elemen tag yang dimasukan misalnya ingin memasukan

elemen tag paragraph untuk mengakhirinya harus dicantumkan tanda
garis miring seperti ini </…> bagian titik-titik tersebut harus diisi dengan
elemen yang telah digunakan.

6|TUTORIAL DASAR HTML5

 Sofware Untuk Mengedit Document HTML

Sudah disinggung sedikit pada penjelasan sebelumnya bahwa untuk

membuat atau mengedit dokumen html itu menggunakan beberapa
software teks editor, software tersebut beberapa ada yang sudah bisa di
install di Android, dan juga pastinya dapat di install di Windows, Linux,
Apple, dan OS lainnya.
Berikut beberapa software teks editor yang dapat Anda gunakan,
diantarannya sebagai berikut :

1. Notepad
2. Notepad++
3. TextEditor
4. Sublime Text Editor
5. VIM
6. Visual Studio Code
7. Quoda (Bisa di install di Android)
8. Atom
9. Brackets
10. QuickEdit (Bisa di install di Android)
11. Dcode (Bisa di install di Android)

Untuk dapat menggunakan software atau aplikasi tersebut harus

terlebih dahulu Anda mendownloadnya dan menginstal pada
perangkat yang anda gunakan. Selamat mencoba.

Namun jika Anda menggunakan OS Windows maka dalam windows

biasanya sudah tersedia software bawaan misalnya seperti Notepad.

7|TUTORIAL DASAR HTML5

 Tag pada document HTML

Sebuah TAG pada document html merupakan penanda elemen pada

suatu document html, dimana tag-tag elemen itu sendiri terdiri dari
bebearapa structure symbol diantaranya sebelah kiri < (< , untuk
mengawali sebelum memasukan tag). ! DOCTYPE html, html, head, h1,
body, p, b, i (merupakan nama dari elemen tag itu sendiri). Lalu sebelah
kanan symbol > ( > , untuk mengakhiri elemen yang telah dimasukan).

 Tag Head
Tag head merupakan tag untuk menuliskan keterangan tentang dokumen
HTML. Isi teks yang terdapat diantara <head> dengan </head> tidak
akan bisa ditampilkan dalam web browser

Contohnya :

<head>
<title> Tutorial Dasar HTML </title>
</head>

Gambar tampilan Head

8|TUTORIAL DASAR HTML5

  Tag Title
Tag title ini adalah tag yang digunakan untuk menuliskan judul dokumen
html, dimana penulisannya biasanya dilakukan setelah head, dan tag ini
akan ditampilkan dalam browser.

Contohnya :

<title>Hallo Dunia </title>

 Tag Body
Tag body merupakan bagian dalam document html yang akan
ditampilkan dalam browser.

Contohnya :

<body> Tutorial Dasar HTML </body>

 Tag Heading
Heading merupakan judul pertama. Biasanya suatu tag heading akan
diteruskan dengan tag paragraph dibawahnya.
Contohnya :

<body>
<h1> Ini adalah heading </h1>
</body>

9|TUTORIAL DASAR HTML5

  Tag paragraph
Biasanya tag paragraph dituliskan untuk membuat suatu paragraph
setelah tag heading atau judul utama.
Contohnya :

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

Preview gambar tampilannya :

CATATAN : Untuk memulai penulisan tag elemen harus menggunakan

huruf kecil dengan huruf kecil, apabila huruf yang dimasukan itu
berbeda artinya elemen tag tersebut akan error.

10 | T U T O R I A L D A S A R H T M L 5
 Atribut pada document HTML

Atribut HTML dapat digunakan untuk menambahkan informasi dari

sebuah elemen pada document html. Ada beberapa yang harus diketahui
untuk memahami atribut html pada document html yaitu atribut htlm
hanya ada pada document html tidak akan pernah bisa ditemukan pada
dokumen bahasa pemograman lain selain html, atribut html hanya
muncul pada tag awal tidak akan mungkin ditemukan pada tag akhir,
elemen html dapat memiliki begitu banyak atribut dalam satu dokumen
html, atribut html terdiri dari pasangan nama atau nilai, ada beberapa
atribut html yang dianggap tidak memiliki efek pada beberapa elemen
itulah yang disebut atribut global.
Atribul global html merupakan sebagai berikut contohnya seperti sebuah
Atribut konten yang dapat diedit ( attribute contenteditable) dari attribute
ini memiliki dua nila kemungkinan :
 Contenteditable = “True” memungkinkan sebuah atribut elemen
dapat diedit
 Contenteditable = “False” memungkinkan sebuah elemen tidak
dapat diedit hanya ditampilkan sebagai conteneditable
“Konten edit (contenteditable) tidak memerlukan nilai jika ada di tag
awal elemen html maka itu menjadi dapat diedit”
Contohnya sebagai berikut :
<! DOCTYPE html>
<html>
<head>
<title> Jadilah Dirimu Sendiri </title>
</head>
<body>
<p contenteditable> Yes! Saya adalah diriku sendiri conten editable
elemen html. Matur Thank You</p>
</body>
<html>

11 | T U T O R I A L D A S A R H T M L 5
Maka akan muncul sebuah preview dibawah ini.

 Konten Edit Caret Warna :

<! DOCTYPE html>

<head>
<title>Jadilah Dirimu Sendiri</title>
</head>
<body>
<p style=”caret-color : #d9534f;” contenteditable> Yes! Saya adalah
diriku sendiri konten edit caret warna. Terimakasih</p>
</body>
</html>

12 | T U T O R I A L D A S A R H T M L 5
  Konten Edit tanpa garis luar
Contohnya :
<! DOCTYPE html>
<html>
<head>
<title> Jadilah Dirimu Sendiri</title>
</head>
<body>
<p style=”outline : none;” contenteditabel > Ya! Saya adalah diriku sendiri
konten edit tanpa garis luar. Terimakasih</p>
</body>
</html>

Gambar Conteneditable Outline (Tanpa garis luar)

Sintax diatas merupakan contoh atribut html global.

13 | T U T O R I A L D A S A R H T M L 5
  Atribut Bahasa (lang Attributes)
Conten atribut bahasa merupakan atribut untuk menyatakan nilai “value” bahasa
pada dokumen html.
Contohnya :
<! DOCTYPE html>
<html lang=”en-US”>
<!—html document/file content goes here -->
…
</html>
Dalam susunan atribut bahasa diatas menggunakan bahasa Amarika-Inggris.

 Atribut judul link (title link) atau menu pada sebuah website
Contohnya :

<a href=”#link” title=”I serve as a tooltip”>Link</a>

Pada link yang berwarna merah itu bisa Anda tempelkan link judul
menunya, dan yang Link berwarna biru itu bisa ditulis nama menu yang
ingin dimunculkan.

 Atribut Gaya Tulisan (Style Attributes)

<p style=”font-size : 40px; color: gold”> Sebuah paragraph dengan gaya tulisan besar
40px dan warna emas.</p>
Preview

14 | T U T O R I A L D A S A R H T M L 5
  Atribut Id dan Class
Contohnya :
<div class=”name”
<! –some content goes here -->

</div>

<div id=”name”

<! –some content goes here -->

</div>

Atribut id dan class merupakan referensi yang dapat memberi tahukan elemen pada

document html.

Beberapa elemen dapat memiliki nilai/nama kelas yang sama.

Id atau singkatan dari identitas diberikan pada sebuah document html sebaiknya

menggunakan nama/nilai yang menarik agar mudah dipahami oleh robot html.

15 | T U T O R I A L D A S A R H T M L 5
 Comment Pada Dokumen HTML

Beberapa komentar html merupakan teks, prasa atau kalimat di dalam sebuah file

html, beberapa komentar akan selalu terlihat muncul dalam code akan tetapi tidak

dirender pada browser sehingga tidak tampak terlihat di dalam web.

Mengapa perlunya menggunakan komentar pada saat menggunakan bahasa

pemograman html, karena beberapa komentar html dapat membantu untuk

memudahkan seorang developer web untuk memberikan pengalaman agar bisa

mengorganisasikan beberapa code.

Sebuah komentar tag dapat mengikuti atau melekat pada catatan di dalam file html,

lalu bagaimana agar Anda bisa menuliskan sebuah komentar pada document html.

Untuk memulai menuliskan sebuah komentar di dalam document html dapat dimulai

dengan menuliskan symbol < -- dan diakiri dengan tanda symbol --> di dalam sebuah

file html Anda.

Contohnya dapat dilihar sebagai berikut :

<! DOCTYPE html>

<html>
<head>
<title>Jadilah Dirimu Sendiri</tile>
</head>
<body>
<p>
Ini kalimat yang akan ditampilkan di browser
<! – single-line comment -->
</p>
<p>
Ini kalimat yang akan ditampilkan di browser

16 | T U T O R I A L D A S A R H T M L 5
<! – this is a multi-line comment some phrases go here some phrases go here -->
</p>
<div> <! – putting comments beside a start tag -->
Kalimat html elemen dan gambar dapat ditampilkan
</div> <! – putting comments beside a start tag -->
</body>
</html>

Di dalam contoh di atas, Anda dapat belajar bagaimana menggunakan komentar

dalam file html baik itu yang berupa garis tunggal (single-line) atau beberapa garis

banyak (multi-line) secara langsung di dalam sebuah komentar tag.

Dan Anda dapat mengorganisasikan beberapa element yang menurut spesifikasi Anda

dalam memulai dan mengakhiri komentar.

17 | T U T O R I A L D A S A R H T M L 5
 Gaya Pada Dokumen HTML

Gaya HTML (HTML Style) digunakan untuk menata elemen-elemen html juga dapat

merubah nilai atau default. Misalnya penataan gaya dapat mengubah nilai default

warna teks menjadi berwarna hitam, warna background (latar belakang) menjadi

berwarna putih, perataan teks ke kiri, dan mengatur ukuran teks menjadi 12px, satuan

dalam html menggunakan px yang berarti piksel.

Lembar gaya internal (Internal Style)

Memakai lebar gaya internal juga disebut gaya internal.

Sebuah gaya internal (Style Sheet Internal) terdiri dari satu atau beberapa set aturan

CSS (Cassecading Style Sheet).

Kumpulan aturan CSS terdiri dari pemilihan dan balok deklarasi yang dikelilingi oleh

beberapa tanda kurung atau deklarasi CSS yang dipisahkan oleh titikkoma ; .

Setiap deklarasi menyertakan nama property CSS dan nilai, dipisahkan oleh titik dua.

Semuanya dapat diapit di dalam satu elemen <style> dengan atribut type=”tect/ccs”

yang disertakan di dalam elemen <head>.

Contoh Gaya internal (Internal Style Sheet) sebagai berikut :

<style type=”text/css”>
P {fent-size : 14px;
}
</style>
Akan banyak contoh gaya internal di tutorial ini maka teruskan belajarnya dan
nikmatilah.

18 | T U T O R I A L D A S A R H T M L 5
Inline Styling (Penataan sebaris)
Inline Styling merupakan elemen gaya (element style) yang dapat digunakan di sebuah
atribut style dengan deklarasi CSS di dalamnya yang menyerupai penataan gaya
internal.
 Inline Styling Syntax
<div style=”property : value ; property : value;”>
 Background Color Style
<! DOCTYPE html>
<html>
<head>
<title> Jadilah Dirimu Sendiri</title>
</head>
<body style=”background-color : gold”>
<! – content goes here -->
</body>
</html>

 Warna Teks (Text Color)

<! DOCTYPE html>
<html>
<head>
<title> Jadilah Dirimu Sendiri </title>
</head>
<body>
<p style=”color: blue”>Warna Saya Biru</p>
<p style=”color: red”> Warna Saya Merah</p>
<p style=”color: green”> Warna Saya Hijau</p>
<p style=”color: yellow”> Warna Saya Kuning</p>
<p style=”color: pink”> Warna Saya Pink</p>
</body>
</html>

19 | T U T O R I A L D A S A R H T M L 5
  Gaya Huruf (Text-Font Familly)
<! DOCTYPE html>
<html>
<head>
<title> Jadilah Dirimu Sendiri</title>
</head?
<body>
<h1 style=”font-family : Times New Roman”> Ini adalah Gaya Tulisan Times New
Roman</h1>
</body>
</html>

 Ukuran Teks (Text Sizing)

<! DOCTYPE html>
<html>
<head>
<title> Jadilah Dirimu Sendiri</title>
</head>
<body>
<p style=”font-size: 25px”> Ukuran Size adalah 25 pixel</p>
<p style=”font-size: 50px”> Ukuran Size adalah 50 pixel</p>
</body>
</html>
 Gaya teks Kanan. Kiri, Tengah (Text Aligning)
<! DOCTYPE html>
<html>
<head>
<title>Jadilah Dirimu Sendiri</title>
</head>
<body>
<p style=”text-align: left”>Teks Rata Kiri</p>
<p style=”text-align: center”>Teks Rata Tengah</p>

20 | T U T O R I A L D A S A R H T M L 5
<p style=”text-align: right”>Teks Rata Kanan</p>

Dalam beberapa gaya teks diatas Anda dapat mencobanya sendiri menggunakan
software text Editor yang Anda telah install, teruslah berlatih jangan hanya berhenti
untuk menguasai.

“Ilmu itu Ibarat tanah

semakin digali maka akan
bertambah dalam”

21 | T U T O R I A L D A S A R H T M L 5
 Warna Pada Document HTML

Warna pada dokumen html dapat mendefinisikan warna yang kita lihat di sebuah
halam website.
Dalam pembahasan tutorial maka Anda akan mempelajari sebuah warna dalam html
code, dan bagaimana Anda dapat membuat warna tersebut ke dalam document html
yang akan Anda buat. Disini akan dijelaskan dengan gaya inline dengan warna
property CSS dan warna latar elemen html.
Beberapa warna dalam html itu didefinisikan dengan nama warna, dan juga angka
hexadecimal.
 Nama Warna (Color name) Mendefinisikan warna yang sesuai dengan
namanya misalnya red (merah), blue (biru), white (putih), dsb.
 Nila warna hexadecimal (color hexadecimal) Warna ini mendefinisikan warna
valid apapun dengan tanda hubunga diikuti dengan huruf atau angka misalnya
: #ffffff , #000000.
 Nilai Warna RGB (Color value RGB) : RGB adalah singkatan dari red, green,
blue. Ini mendefinisikan warna yang valid dengan format ini “rgb (number,
number, number) ‘’ Misalnya rgb (255, 255, 255). Rgb (0, 0, 0). Angka-angka
mewakila intensitas warna merah, hijau dan biru dalam urutan tertentu.
Contonynya :
<! DOCTYPE html>
<html>
<head>
<title> Jadilah Dirimu Sendiri</title>
</head>
<body>
< !—merubah warna menggunakan nama warna -->
<div style=”background-color: black”>
<! – merubah warna dengan heksadesimal -->
<p style=”color: #009090;”> Ini warna hexadecimal</p>
<! – merubah warna denga rgb -->
<p style=”color: rgb (0, 128, 128); “> Ini warna dari RGB</p>
</div>
</body>
</html>

22 | T U T O R I A L D A S A R H T M L 5
 Gambar Hexadicimal dan RGB Warna

23 | T U T O R I A L D A S A R H T M L 5