.jpeg)
Apa itu HTMl ? mungkin pertanyaan inilah yang terbersit pada benak anda yang
baru mulai masuk kedalam dunia web programming. HTML merupakan bahasa pemrograman
dasar yang wajib di kuasai 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 di buat menggunakan HTML. pada judul
“Belajar HTML Dasar : Pengertian HTML” ini akan di jelaskan tentang pengertian dari HTML
dan sekilas tentang sejarah HTML dan perkembangannya.
Pengertian HTML
HTML (Hyper Text Markup Language) yaitu sebuah bahasa formatting yang digunakan
untuk membuat sebuah halaman website. Di dalam dunia pemrograman berbasis website(Web
Programming), HTML menjadi pondasi dasar pada halaman website. sebuah file HTML di di
simpan dengan ekstensi .html (dot html). dan dapat di eksekusi atau diakses menggunakan web
browser(Google Chrome, Mozilla Firefox, Opera, Safari dan lain-lain). seperti yang sudah di
jelaskan, HTML yaitu 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 di sebut halaman statis karena tidak memiliki aksi atau fungsi-
fungsi yang dapat mengelola website. tentu developer akan sangat di sibukkan dengan harus
mengubah lagi file HTML setiap ingin mengupdate artikel.
HTML memiliki beberapa element yang tersusun dari tag-tag yang memiliki fungsi nya
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 kita
bahas pada buku ini.
Ebook Belajar HTML & CSS Dasar 2Diki Alfarabi Hadi | www.malasngoding.com
Kegunaan HTML
HTML berfungsi sebagai pondasi sebuah halaman website. adapun yang dapat di lakukan
dengan HTML yaitu sebagai berikut :
Membungkus element-element tertentu sesuai kebutuhan.
Membuat heading atau format judul.
Membuat Tabel.
Membuat List.
Membuat Paragraf.
Membuat Form.
Membuat Tombol.
Membuat huruf tebal.
Membuat huruf miring.
Menampilkan gambar.
Menampilkan video.
Dan banyak lainnya yang akan kita pelajari pada penjelasan 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 adobe flash. untuk tutorial cara membuat streaming video dengan HTML5
juga akan kita bahas pada buku tutorial belajar HTML dasar ini.
jadi kesimpulan dari pengertian HTML ini yaitu HTML merupakan pondasi dasar dari
pembuatan sebuah website. untuk mengeksekusi atau menjalankan file html harus menggunakan
web browser dan file html di simpan dengan ekstensi .html (dot html).
Belajar HTML Dasar : 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
Ebook Belajar HTML & CSS Dasar 3Diki Alfarabi Hadi | www.malasngoding.com
membuat program ? berikut kami sediakan jawaban yang mungkin terbesit dalam hati/pikiran
anda yang baru mau belajar bahasa pemrograman web. sebelum kita memulai cara
penulisan HTML terlebih dahulu yang harus anda sediakan yaitu 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, contohnya seperti Notepad 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 seperti: Mozilla Firefox,
Opera, Chrome dan sebagainya.
Memilih text editor yang sesuai dengan keinginan
berikut beberapa text editor yang kami sarankan untuk digunakan dalam penulisan code
program bagi anda yang baru belajar bahasa pemrograman.
Sublime Text Editor
Sublime Text editor yaitu text editor yang paling banyak digunakan oleh programer,
text editor ini memiliki tampilan yang elegan, yang khas dengan warna kecoklatannya. Text
Editor ini tersedia untuk windows, Mac, dan Linux. Untuk anda yang ingin menggunakan
sublime bisa di download dari situs resminya langsung, yaitu di https://www.sublimetext.com/
Ebook Belajar HTML & CSS Dasar 4Diki Alfarabi Hadi | www.malasngoding.com
Gambar 1 : Sublime Text Editor
Notepad ++
Text editor ini bisa digunakan untuk windows dan free licence (dalam artian bebas
digunakan tanpa mengeluarkan biaya). Text Editor ini memiliki ciri khas tersendiri dan banyak
fitur-fitur yang bisa diinstal di text editor ini. untuk anda yang ingin menggunakan text editor
notepad++ bida di download pada situs resminya, yaitu https://notepad-plus-plus.org/.
Ebook Belajar HTML & CSS Dasar 5Diki Alfarabi Hadi | www.malasngoding.com
Gambar 2 : Notepad ++
Atom
Text editor ini hampir sama dengan sublime namun text ini agak sedikit lebih berat jika
dibandingkan dengan sublime. Text Editor ini bisa digunakan oleh platform Mac, Windows, dan
Linux. Untuk anda yang ingin menggunakan text editor ini bisa di download di https://atom.io/
Ebook Belajar HTML & CSS Dasar 6Diki Alfarabi Hadi | www.malasngoding.com
Gambar 3 Atom
Brackets
Text editor ini memiliki kriteria tersendiri dan hampir sama dengan Atom. Text editor ini
bisa digunakan untuk Platform Mac, Windows dan Linux. untuk anda yang ingin bergelut
dengan brackest bisa di download di http://brackets.io/
Ebook Belajar HTML & CSS Dasar 7Diki Alfarabi Hadi | www.malasngoding.com
Gambar 4 Brackets
Netbeans
Text editor ini merupakan salah satu favorit programer. namun text editor ini bisa di
kategorikan lebih berat dari text editor lain yang disebutkan di atas. kemudahan text editor ini
yaitu tampilan kode program yang ditulis lebih rapi. untuk anda yang ingin menikmati editor
ini bias di download di situs resmi netbeans, yaitu di https://netbeans.org/
Ebook Belajar HTML & CSS Dasar 8Diki Alfarabi Hadi | www.malasngoding.com
Nah, itulah beberapa list text editor yang bisa versi www.malasngoding.com yang bisa
digunakan untuk menulis kode HTML. Text editor ini selain bisa digunakan untuk menulis kode
html bisa juga untuk menulis kode program lainnya seperti PHP,CSS, JavaScript, dan beberapa
kode program untuk dektop.
jadi kesimpulannya, sebelum memulai penulisan kode program, yang harus anda
penuhi terlebih dahulu yaitu memilih salah satu text editor yang akan anda digunakan dan
browser untuk menjalankan code program.
Ebook Belajar HTML & CSS Dasar 9Diki Alfarabi Hadi | www.malasngoding.com
Belajar HTML Dasar : Mengenal Tag, Element, Atribut
HTML
Setelah sebelumnya kita membahas tentang Pengenalan HTML, Text Editor. 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 browser 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 di gunakan tag. dalam penulisan tag, hampir semua menggunakan pembuka dan
penutup tag, dimana objek yang di maksudkan berada diantara pembuka dan penutup tag. berikut
penulisan tag yang digunakan dalam HTML
Perbedaan antara tag pembuka dan tag penutup yaitu, pada tag pembuka diawali kurung
sudut pembuka dan di akhiri dengan kurung sudut penutup (< >), sedangkan pada tag penutup
,diawali dengan kurung sudut pembuka, backslash, dan diakhiri dengan penutup kurung sudut (</
>).
jenis tag yang sering digunakan dalam html
berikut beberapa jenis tag yang akan sering anda jumpai kalo di web programing :
Tag Fungsi
<!– ….–> Digunakan untuk memberi sebuah komentar atau keterangan
<tag> Objek yang diisi </tag>
Ebook Belajar HTML & CSS Dasar 10Diki Alfarabi Hadi | www.malasngoding.com
<!DOCTYPE
html> digunakan untuk Mendefinisikan tipe document HTML5
<a>link</a> Mendefinisikan sebuah anchor, digunakan untuk saling menautkan antarasatu dokumen HTML ke dokumen HTML yang lain (membuat link)
.<b> .. </b> membuat teks menjadi tebal
<p> .. </p> membuat pargraf
<h1> .. </h1> membuat heading satu
<h2> .. </h2> membuat heading dua
<body> mendefinisikan body/isi dokument html
<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 table
<th> Mendefinisikan sel header di dalam sebuah table
Ebook Belajar HTML & CSS Dasar 11Diki Alfarabi Hadi | www.malasngoding.com
<td> Mendefinisikan sel di dalam sebuah table
<tr> Membuat baris di dalam sebuah table
<ul> Mendefinisikan daftar dalam format bullet
<li> mendefinisikan list
Element HTML
Element pada HTML merupakan isi atau objek yang berada pada tag. maksudnya, isi
yang ada diantara tag pembuka dan tag penutup di sebut dengan elemen misalkan :
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<strong><h2>Pengenalalan atribut HTML</h2></strong>
</body>
</html>
pada contoh diatas <h2> yaitu heading dua <h2> merupakan element h2 dan isinya ini yaitu
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 bisanya memiliki
Ebook Belajar HTML & CSS Dasar 12Diki Alfarabi Hadi | www.malasngoding.com
2 bagian yaitu nama dan nilai, dapat ditulis dengan ( 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 :
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<h2 align="center">Pengenalalan atribut HTML</h2>
</body>
</html>
Perhatikan pada syntax di atas :
<h2> yaitu tag heading 2
align yaitu nama dari atribut
center yaitu nilai/value dari atribut
“Pengenalan atribut HTML” yaitu element dari tag h2
Tidak semua tag ini membutuhkan atribut di dalamnya, namun bagi anda yang bergelut di
web programing akan sering menjumpai tag yang didalamnya terdapat atribut.
Belajar HTML Dasar : Heading Pada HTML
Heading merupakan element atau tag HTML yang berfungsi untuk menunjukkan bagian
penting pada halaman web. element tag heading ini memiliki 6 tingkatan yang berurutan yaitu
Ebook Belajar HTML & CSS Dasar 13Diki Alfarabi Hadi | www.malasngoding.com
<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 :
<h1> yaitu heading yang digunakan untuk penulisan judul utama dari dokumen
<h2> yaitu heading yang digunaakan sebagai sub dari <h1>
<h3> yaitu heading yang digunakan sebagai sub dari <h2>
untuk penggunaan <h4><h4><h5><h6> tergantung programmer sendiri untuk memperindah
halaman web sesuai keperluan.
berikut contoh penerapan masing-masing element/tag heading :
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<h1>ini yaitu heading 1</h1>
</body>
</html>
Ebook Belajar HTML & CSS Dasar 14Diki Alfarabi Hadi | www.malasngoding.com
Gambar 5 Heading 1
Contoh lainnya:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<h1>ini yaitu heading 1</h1>
<h2>ini yaitu heading 2</h2>
<h3>ini yaitu heading 3</h3>
<h4>ini yaitu heading 4</h4>
<h5>ini yaitu heading 5</h5>
<h6>ini yaitu heading 6</h6>
</body>
</html>
Dan hasilnya saat di jalankan pada browser:
Ebook Belajar HTML & CSS Dasar 14Diki Alfarabi Hadi | www.malasngoding.com
Gambar 5 Heading 1
Contoh lainnya:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<h1>ini yaitu heading 1</h1>
<h2>ini yaitu heading 2</h2>
<h3>ini yaitu heading 3</h3>
<h4>ini yaitu heading 4</h4>
<h5>ini yaitu heading 5</h5>
<h6>ini yaitu heading 6</h6>
</body>
</html>
Dan hasilnya saat di jalankan pada browser:
Ebook Belajar HTML & CSS Dasar 14Diki Alfarabi Hadi | www.malasngoding.com
Gambar 5 Heading 1
Contoh lainnya:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<h1>ini yaitu heading 1</h1>
<h2>ini yaitu heading 2</h2>
<h3>ini yaitu heading 3</h3>
<h4>ini yaitu heading 4</h4>
<h5>ini yaitu heading 5</h5>
<h6>ini yaitu heading 6</h6>
</body>
</html>
Dan hasilnya saat di jalankan pada browser:
Ebook Belajar HTML & CSS Dasar 15Diki Alfarabi Hadi | www.malasngoding.com
Gambar 6 contoh penulisan heading
Dari contoh diatas, dapat anda lihat perbedaan antara masing-masing heading. penulisan
heading ini boleh digunakan didalam jenis tag yang lain. berikut contoh penggunaan element
heading di dalam tag lain :
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<a href="http://www.malasngoding.com/"><h1>ini yaitu heading 1 </h1></a>
</body>
</html>
Ebook Belajar HTML & CSS Dasar 15Diki Alfarabi Hadi | www.malasngoding.com
Gambar 6 contoh penulisan heading
Dari contoh diatas, dapat anda lihat perbedaan antara masing-masing heading. penulisan
heading ini boleh digunakan didalam jenis tag yang lain. berikut contoh penggunaan element
heading di dalam tag lain :
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<a href="http://www.malasngoding.com/"><h1>ini yaitu heading 1 </h1></a>
</body>
</html>
Ebook Belajar HTML & CSS Dasar 15Diki Alfarabi Hadi | www.malasngoding.com
Gambar 6 contoh penulisan heading
Dari contoh diatas, dapat anda lihat perbedaan antara masing-masing heading. penulisan
heading ini boleh digunakan didalam jenis tag yang lain. berikut contoh penggunaan element
heading di dalam tag lain :
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<a href="http://www.malasngoding.com/"><h1>ini yaitu heading 1 </h1></a>
</body>
</html>
Ebook Belajar HTML & CSS Dasar 16Diki Alfarabi Hadi | www.malasngoding.com
Gambar 7 Belajar HTML Heading Pada HTML
contoh diatas yaitu penggunaan tag heading yang berada dalam tag <a>. sedangkan
atribut href digunakan untuk menghubungkan dengan dokumen/link yang lain. ketika diklik pada
“ini yaitu heading 1” maka halaman akan di alihkan ke
halaman http://www.malasngoding.com.
Belajar HTML Dasar : Format Text Pada HTML
Dalam penuliasan HTML sangat sering menggunakan format text didalamanya. baik itu
dalam penulisan judul, ataupun isi dari content/halaman website sendiri. Berikut beberapa
penjelasan dan contoh dari Format Text Pada HTML.
Format Text Pada HTML
Ada beberapa format text yang umumnya di gunakan, di antaranya yaitu :
Membuat huruf tebal (bold) pada HTML
Untuk membuat teks menjadi tebal pada tampilan halaman web, bisa menggunakan tag
<b> berikut contoh syntax HTML untuk membuat format text tebal :
Ebook Belajar HTML & CSS Dasar 16Diki Alfarabi Hadi | www.malasngoding.com
Gambar 7 Belajar HTML Heading Pada HTML
contoh diatas yaitu penggunaan tag heading yang berada dalam tag <a>. sedangkan
atribut href digunakan untuk menghubungkan dengan dokumen/link yang lain. ketika diklik pada
“ini yaitu heading 1” maka halaman akan di alihkan ke
halaman http://www.malasngoding.com.
Belajar HTML Dasar : Format Text Pada HTML
Dalam penuliasan HTML sangat sering menggunakan format text didalamanya. baik itu
dalam penulisan judul, ataupun isi dari content/halaman website sendiri. Berikut beberapa
penjelasan dan contoh dari Format Text Pada HTML.
Format Text Pada HTML
Ada beberapa format text yang umumnya di gunakan, di antaranya yaitu :
Membuat huruf tebal (bold) pada HTML
Untuk membuat teks menjadi tebal pada tampilan halaman web, bisa menggunakan tag
<b> berikut contoh syntax HTML untuk membuat format text tebal :
Ebook Belajar HTML & CSS Dasar 16Diki Alfarabi Hadi | www.malasngoding.com
Gambar 7 Belajar HTML Heading Pada HTML
contoh diatas yaitu penggunaan tag heading yang berada dalam tag <a>. sedangkan
atribut href digunakan untuk menghubungkan dengan dokumen/link yang lain. ketika diklik pada
“ini yaitu heading 1” maka halaman akan di alihkan ke
halaman http://www.malasngoding.com.
Belajar HTML Dasar : Format Text Pada HTML
Dalam penuliasan HTML sangat sering menggunakan format text didalamanya. baik itu
dalam penulisan judul, ataupun isi dari content/halaman website sendiri. Berikut beberapa
penjelasan dan contoh dari Format Text Pada HTML.
Format Text Pada HTML
Ada beberapa format text yang umumnya di gunakan, di antaranya yaitu :
Membuat huruf tebal (bold) pada HTML
Untuk membuat teks menjadi tebal pada tampilan halaman web, bisa menggunakan tag
<b> berikut contoh syntax HTML untuk membuat format text tebal :
Ebook Belajar HTML & CSS Dasar 17Diki Alfarabi Hadi | www.malasngoding.com
<b>ini text tebal</b>
Membuat huruf miring (italic) pada HTML
untuk membuat teks miring pada HTML, kita bisa menggunakan tag <i>. contohnya:
<i>ini text miring</i>
Membuat huruf bergaris bawah (underline) pada HTML
untuk membuat teks underline/garis bawah pada HTML kita bias menggunakan tag <u>.
contohnya :
<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
Ebook Belajar HTML & CSS Dasar 18Diki Alfarabi Hadi | www.malasngoding.com
<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 :
<!DOCTYPE html>
<html>
<head>
<title>belajar format format text</title>
</head>
<body>
<b>ini format format text tebal</b><br/>
<i>ini format text italic</i><br/>
<u>ini format text underline</u><br/>
<em>ini format text em</em><br/>
<small>ini format text small</small><br/>
<strong>ini format text strong</strong><br/>
<sub>ini format text sub</sub><br/>
<sup>ini format text sup</sup><br/>
<ins>ini format text ins</ins><br/>
<del>ini format text del</del><br/>
<mark>ini format text mark</mark>
</body>
</html>
Ebook Belajar HTML & CSS Dasar 19Diki Alfarabi Hadi | www.malasngoding.com
Gambar 8 Belajar HTML Format Text Pada HTML
Belajar HTML Dasar : Membuat Paragraf Pada HTML
Untuk memahami pembuatan paragraf <p> pada HTML, diharapkan anda terlebih dahulu
sudah memahami penulisan dan apa itu tag, element, atribut. paragraf disini merupakan suatu tag
untuk membuat penulisan dalam bentuk paragraf. tag paragraf ini terdapat 3 atribut/tag yang bisa
dikombinasikan langsung dengan tag paragraf <p>. atribut tag tersebut yaitu :
Membuat paragraf rata kiri menggunakan <p align=”left”> .. isi paragraph </p>
Membuat paragraf rata kanan menggunakan <p align=”right”> .. isi paragraph </p>
Membuat paragraf rata tengah menggunakan <p align=”center”> .. isi paragraph </p>
Membuat paragraf rata kiri kanan menggunaan <p align=”justify”> .. isi paragraph </p>
Ebook Belajar HTML & CSS Dasar 19Diki Alfarabi Hadi | www.malasngoding.com
Gambar 8 Belajar HTML Format Text Pada HTML
Belajar HTML Dasar : Membuat Paragraf Pada HTML
Untuk memahami pembuatan paragraf <p> pada HTML, diharapkan anda terlebih dahulu
sudah memahami penulisan dan apa itu tag, element, atribut. paragraf disini merupakan suatu tag
untuk membuat penulisan dalam bentuk paragraf. tag paragraf ini terdapat 3 atribut/tag yang bisa
dikombinasikan langsung dengan tag paragraf <p>. atribut tag tersebut yaitu :
Membuat paragraf rata kiri menggunakan <p align=”left”> .. isi paragraph </p>
Membuat paragraf rata kanan menggunakan <p align=”right”> .. isi paragraph </p>
Membuat paragraf rata tengah menggunakan <p align=”center”> .. isi paragraph </p>
Membuat paragraf rata kiri kanan menggunaan <p align=”justify”> .. isi paragraph </p>
Ebook Belajar HTML & CSS Dasar 19Diki Alfarabi Hadi | www.malasngoding.com
Gambar 8 Belajar HTML Format Text Pada HTML
Belajar HTML Dasar : Membuat Paragraf Pada HTML
Untuk memahami pembuatan paragraf <p> pada HTML, diharapkan anda terlebih dahulu
sudah memahami penulisan dan apa itu tag, element, atribut. paragraf disini merupakan suatu tag
untuk membuat penulisan dalam bentuk paragraf. tag paragraf ini terdapat 3 atribut/tag yang bisa
dikombinasikan langsung dengan tag paragraf <p>. atribut tag tersebut yaitu :
Membuat paragraf rata kiri menggunakan <p align=”left”> .. isi paragraph </p>
Membuat paragraf rata kanan menggunakan <p align=”right”> .. isi paragraph </p>
Membuat paragraf rata tengah menggunakan <p align=”center”> .. isi paragraph </p>
Membuat paragraf rata kiri kanan menggunaan <p align=”justify”> .. isi paragraph </p>
Ebook Belajar HTML & CSS Dasar 20Diki Alfarabi Hadi | www.malasngoding.com
perhatikan contoh berikut :
Paragraf menggunakan <p>. berikut inplementasi <p> dalam dokumen HTML :
<!DOCTYPE html>
<html>
<head>
<title>belajar membuat paragraf</title>
</head>
<body>
<p>ini merupakan penulisan paragraf pertama dalam dokument HTML</p>
<p>ini merupakan penulisan paragraf kedua dalam dokument HTML</p>
</body>
</html>
Gambar 9 Membuat Paragraf Pada HTML
Dari contoh di atas dapat anda lihat bahwa penulisan paragraf pertama dan paragraf
kedua di pisahkan. untuk memisahkan antara paragraf satu dan dua ini menggunakana <p>.
Ebook Belajar HTML & CSS Dasar 20Diki Alfarabi Hadi | www.malasngoding.com
perhatikan contoh berikut :
Paragraf menggunakan <p>. berikut inplementasi <p> dalam dokumen HTML :
<!DOCTYPE html>
<html>
<head>
<title>belajar membuat paragraf</title>
</head>
<body>
<p>ini merupakan penulisan paragraf pertama dalam dokument HTML</p>
<p>ini merupakan penulisan paragraf kedua dalam dokument HTML</p>
</body>
</html>
Gambar 9 Membuat Paragraf Pada HTML
Dari contoh di atas dapat anda lihat bahwa penulisan paragraf pertama dan paragraf
kedua di pisahkan. untuk memisahkan antara paragraf satu dan dua ini menggunakana <p>.
Ebook Belajar HTML & CSS Dasar 20Diki Alfarabi Hadi | www.malasngoding.com
perhatikan contoh berikut :
Paragraf menggunakan <p>. berikut inplementasi <p> dalam dokumen HTML :
<!DOCTYPE html>
<html>
<head>
<title>belajar membuat paragraf</title>
</head>
<body>
<p>ini merupakan penulisan paragraf pertama dalam dokument HTML</p>
<p>ini merupakan penulisan paragraf kedua dalam dokument HTML</p>
</body>
</html>
Gambar 9 Membuat Paragraf Pada HTML
Dari contoh di atas dapat anda lihat bahwa penulisan paragraf pertama dan paragraf
kedua di pisahkan. untuk memisahkan antara paragraf satu dan dua ini menggunakana <p>.
Ebook Belajar HTML & CSS Dasar 21Diki Alfarabi Hadi | www.malasngoding.com
Jenis paragraph
Berikut ini yaitu beberapa contoh jenis paragraf pada HTML.
Paragraf rata kiri
<p align="left">1. ini merupakan penulisan paragraf rata kiri dalam dokument HTML</p>
Paragraf rata kanan
<p align="right">2. ini merupakan penulisan paragraf rata kanan dalam dokument HTML</p>
paragraf rata tengah
<p align="center">3. ini merupakan penulisan paragraf rata tengah dalam dokument HTML</p>
paragraf rata kiri kanan
<p align="justify">4. ini merupakan penulisan paragraf rata kiri kanan dalam dokument HTML</p>
berikut contoh lengkapnya :
<!DOCTYPE html>
<html>
<head>
<title>belajar membuat paragraf</title>
</head>
<body>
<p align="left">1. ini merupakan penulisan paragraf rata kiri dalam dokument HTML</p>
<p align="right">2. ini merupakan penulisan paragraf rata kanan dalam dokument HTML</p>
<p align="center">3. ini merupakan penulisan paragraf rata tengah dalam dokument HTML</p>
<p align="justify">4. ini merupakan penulisan paragraf rata kiri kanan dalam dokument HTML</p>
</body>
</html>
Ebook Belajar HTML & CSS Dasar 22Diki Alfarabi Hadi | www.malasngoding.com
Gambar 10 Contoh paragraf pada HTML
Belajar HTML Dasar : Membuat Tabel Pada HTML
Tabel merupakan struktur yang digunakan untuk menampilkan informasi dalam
bentuk baris dan kolom. pada HTML, untuk pembuatan tabel menggunakan tag <table>, dan
menggunakan tag <tr> untuk membuat baris dan <td> untuk membuat kolom.
Untuk lebih mudah memahami dalam pembuatan table pada HTML, berikut saya sajikan
penjelasan tag yang terlibat dalam pembuatan table pada HTML.
Tag <table> merupakan tag pembuka dalam membuat sebuah table pada html, tanpa
<table> ini, penggunaan <tr> dan <td> tidak bisa difungsikan dengan baik. <tr> atau dikenal
dengan table row merupakan tag yang digunakan untuk membuat baris dalam table HTML. <td>
atau dikenal dengan table data merupakan tag yang digunakan untuk membuat kolom dalam
baris. Dan tag <th> untuk membuat table head atau bagian kepala pada table.
Ebook Belajar HTML & CSS Dasar 22Diki Alfarabi Hadi | www.malasngoding.com
Gambar 10 Contoh paragraf pada HTML
Belajar HTML Dasar : Membuat Tabel Pada HTML
Tabel merupakan struktur yang digunakan untuk menampilkan informasi dalam
bentuk baris dan kolom. pada HTML, untuk pembuatan tabel menggunakan tag <table>, dan
menggunakan tag <tr> untuk membuat baris dan <td> untuk membuat kolom.
Untuk lebih mudah memahami dalam pembuatan table pada HTML, berikut saya sajikan
penjelasan tag yang terlibat dalam pembuatan table pada HTML.
Tag <table> merupakan tag pembuka dalam membuat sebuah table pada html, tanpa
<table> ini, penggunaan <tr> dan <td> tidak bisa difungsikan dengan baik. <tr> atau dikenal
dengan table row merupakan tag yang digunakan untuk membuat baris dalam table HTML. <td>
atau dikenal dengan table data merupakan tag yang digunakan untuk membuat kolom dalam
baris. Dan tag <th> untuk membuat table head atau bagian kepala pada table.
Ebook Belajar HTML & CSS Dasar 22Diki Alfarabi Hadi | www.malasngoding.com
Gambar 10 Contoh paragraf pada HTML
Belajar HTML Dasar : Membuat Tabel Pada HTML
Tabel merupakan struktur yang digunakan untuk menampilkan informasi dalam
bentuk baris dan kolom. pada HTML, untuk pembuatan tabel menggunakan tag <table>, dan
menggunakan tag <tr> untuk membuat baris dan <td> untuk membuat kolom.
Untuk lebih mudah memahami dalam pembuatan table pada HTML, berikut saya sajikan
penjelasan tag yang terlibat dalam pembuatan table pada HTML.
Tag <table> merupakan tag pembuka dalam membuat sebuah table pada html, tanpa
<table> ini, penggunaan <tr> dan <td> tidak bisa difungsikan dengan baik. <tr> atau dikenal
dengan table row merupakan tag yang digunakan untuk membuat baris dalam table HTML. <td>
atau dikenal dengan table data merupakan tag yang digunakan untuk membuat kolom dalam
baris. Dan tag <th> untuk membuat table head atau bagian kepala pada table.
Ebook Belajar HTML & CSS Dasar 23Diki Alfarabi Hadi | www.malasngoding.com
Perhatikan contoh pembuatan table pada HTML berikut :
<!DOCTYPE html>
<html>
<head>
<title>belajar membuat tabel di html</title>
</head>
<body>
<table border="1">
<tr>
<td>baris 1 / kolom 1</td>
<td>baris 1 / kolom 2</td>
<td>baris 1 / kolom 3</td>
</tr>
<tr>
<td>baris 2 / kolom 1</td>
<td>baris 2 / kolom 2</td>
<td>baris 2 / kolom 3</td>
</tr>
<tr>
<td>baris 3/ kolom 1</td>
<td>baris 3/ kolom 2</td>
<td>baris 3/ kolom 3</td>
</tr>
<tr>
<td>baris 4/ kolom 1</td>
<td>baris 4/ kolom 2</td>
<td>baris 4/ kolom 3</td>
</tr>
</table>
</body>
</html>
Dan coba jalankan pada browser.
Ebook Belajar HTML & CSS Dasar 24Diki Alfarabi Hadi | www.malasngoding.com
Gambar 11 Membuat Tabel Pada HTML
Dari contoh diatas dapat anda lihat sendiri fungsi dari masing-masing tag yang sudah kita
bahas diatas. namun pada tag table saya memberikan atribut border=’1’. atribut border ini
digunakan untuk memberikan garis pada table dan nilai 1 ini merupakan nilai dari garis tepi pada
tabel yang kita buat tadi (1 untuk membuat garis. Dan 0 jika tidak ingin menggunakan garis).
Dan berikut ini yaitu contoh membuat tabel HTML dengan menggunakan tag head atau
bagian kepala tabel.contoh
<!DOCTYPE html>
<html>
<head>
<title>belajar membuat tabel di html</title>
</head>
<body>
<table border="1">
<tr>
<th>No</th>
<th>Nama</th>
<th>Alamat</th>
</tr>
Ebook Belajar HTML & CSS Dasar 24Diki Alfarabi Hadi | www.malasngoding.com
Gambar 11 Membuat Tabel Pada HTML
Dari contoh diatas dapat anda lihat sendiri fungsi dari masing-masing tag yang sudah kita
bahas diatas. namun pada tag table saya memberikan atribut border=’1’. atribut border ini
digunakan untuk memberikan garis pada table dan nilai 1 ini merupakan nilai dari garis tepi pada
tabel yang kita buat tadi (1 untuk membuat garis. Dan 0 jika tidak ingin menggunakan garis).
Dan berikut ini yaitu contoh membuat tabel HTML dengan menggunakan tag head atau
bagian kepala tabel.contoh
<!DOCTYPE html>
<html>
<head>
<title>belajar membuat tabel di html</title>
</head>
<body>
<table border="1">
<tr>
<th>No</th>
<th>Nama</th>
<th>Alamat</th>
</tr>
Ebook Belajar HTML & CSS Dasar 24Diki Alfarabi Hadi | www.malasngoding.com
Gambar 11 Membuat Tabel Pada HTML
Dari contoh diatas dapat anda lihat sendiri fungsi dari masing-masing tag yang sudah kita
bahas diatas. namun pada tag table saya memberikan atribut border=’1’. atribut border ini
digunakan untuk memberikan garis pada table dan nilai 1 ini merupakan nilai dari garis tepi pada
tabel yang kita buat tadi (1 untuk membuat garis. Dan 0 jika tidak ingin menggunakan garis).
Dan berikut ini yaitu contoh membuat tabel HTML dengan menggunakan tag head atau
bagian kepala tabel.contoh
<!DOCTYPE html>
<html>
<head>
<title>belajar membuat tabel di html</title>
</head>
<body>
<table border="1">
<tr>
<th>No</th>
<th>Nama</th>
<th>Alamat</th>
</tr>
Ebook Belajar HTML & CSS Dasar 25Diki Alfarabi Hadi | www.malasngoding.com
<tr>
<td>1</td>
<td>Badrul</td>
<td>Sumedang</td>
</tr>
<tr>
<td>2</td>
<td>Andi</td>
<td>Jakarta</td>
</tr>
<tr>
<td>3</td>
<td>Budi</td>
<td>Bandung</td>
</tr>
</table>
</body>
</html>
untuk membuat tampilan tabel yang lebih menarik saya sarankan anda untuk belajar CSS dasar
di www.malasngoding.com.
Ebook Belajar HTML & CSS Dasar 26Diki Alfarabi Hadi | www.malasngoding.com
Belajar HTML Dasar : Membuat Hyperlink Pada HTML
Hyperlink yang sering di kenal dengan link yaitu menghubungkan antara satu dokumen
dengan dokumen yang lain pada HTML. Tujuan dari hyperlink ini membuat sebuah teks atau
gambar yang ketika diklik akan di alihkan ke halaman tertentu yang sudah di tetapkan dalam
penulisan hyerlink tersebut.
Hyperlink sendiri ditulis dengan menggunakan tag <a>. tag <a> ini selalu di ikiti oleh
atribut href, dimana didalam href (hypertext reference) ini lah yang akan di isikan alamat yang
dituju ketika text atau gambar di klik. berikut cara penulisan untuk membuat hyperlink :
<a href="http://www.malasngoding.com">klik disini</a>
ketika di klik pada kata “klik disini” maka halaman akan di alihkan ke
halaman www.malasngoding.com. hal ini sesuai dengan ketentuan yang telah kita tetapkan pada
atribut href.
Belajar HTML Dasar : Membuat List Pada HTML
List atau yang kita kenal dengan daftar berurutan merupakan fungsi dalam HTML yang
digunakan untuk menampilkan data secara berurutan ke bawah. Dalam HTML penulisan list
menggunakan tag <li>. dalam membuat list pada HTML ini terdapat dua jenis tampilan list yang
bisa di gunakan yaitu ordered list dan unordered list.
Ordered list berfungsi untuk menampilkan daftar list dalam bentuk huruf atau angka. tag
yang digunakan dalam ordered list ini yaitu <ol>.
unordered list berfungsi untuk menampilkan daftar list dalam bentuk bulatan atau kotak
di awalnya. tag yang digunakan untuk membuat unordered list yaitu <ul>
Ebook Belajar HTML & CSS Dasar 27Diki Alfarabi Hadi | www.malasngoding.com
untuk lebih mudahnya, perhatikan contoh penulisan list dalam HTML berikut ini:
<!DOCTYPE html>
<html>
<head>
<title>belajar membuat list</title>
</head>
<body>
<ul>
<li>belajar HTML</li>
<li>belajar PHP</li>
</ul>
</body>
</html>
Gambar 12 Membuat Unordered List Pada HTML (ul)
contoh di atas menggunakan <li> untuk membuat list pada HTML. dapat anda lihat
sendiri bahwa tampilan standar dari list pada HTML di awali dengan tanda titik.
Ordered List <ol>
Menampilkan daftar list dan diawali dengan huruf atau angka, berikut contoh untuk
implementasi ordered list pada HTML.
Ebook Belajar HTML & CSS Dasar 27Diki Alfarabi Hadi | www.malasngoding.com
untuk lebih mudahnya, perhatikan contoh penulisan list dalam HTML berikut ini:
<!DOCTYPE html>
<html>
<head>
<title>belajar membuat list</title>
</head>
<body>
<ul>
<li>belajar HTML</li>
<li>belajar PHP</li>
</ul>
</body>
</html>
Gambar 12 Membuat Unordered List Pada HTML (ul)
contoh di atas menggunakan <li> untuk membuat list pada HTML. dapat anda lihat
sendiri bahwa tampilan standar dari list pada HTML di awali dengan tanda titik.
Ordered List <ol>
Menampilkan daftar list dan diawali dengan huruf atau angka, berikut contoh untuk
implementasi ordered list pada HTML.
Ebook Belajar HTML & CSS Dasar 27Diki Alfarabi Hadi | www.malasngoding.com
untuk lebih mudahnya, perhatikan contoh penulisan list dalam HTML berikut ini:
<!DOCTYPE html>
<html>
<head>
<title>belajar membuat list</title>
</head>
<body>
<ul>
<li>belajar HTML</li>
<li>belajar PHP</li>
</ul>
</body>
</html>
Gambar 12 Membuat Unordered List Pada HTML (ul)
contoh di atas menggunakan <li> untuk membuat list pada HTML. dapat anda lihat
sendiri bahwa tampilan standar dari list pada HTML di awali dengan tanda titik.
Ordered List <ol>
Menampilkan daftar list dan diawali dengan huruf atau angka, berikut contoh untuk
implementasi ordered list pada HTML.
Ebook Belajar HTML & CSS Dasar 28Diki Alfarabi Hadi | www.malasngoding.com
<!DOCTYPE html>
<html>
<head>
<title>belajar membuat list</title>
</head>
<body>
<ol>
<li>belajar HTML</li>
<li>belajar PHP</li>
</ol>
</body>
</html>
Gambar 13 Ordered list HTML
Unordered list <ul>
Unordered list yaitu jenis list HTML dalam bentu titik pada awal list.
berikut contoh unordered list pada HTML :
<!DOCTYPE html>
Ebook Belajar HTML & CSS Dasar 28Diki Alfarabi Hadi | www.malasngoding.com
<!DOCTYPE html>
<html>
<head>
<title>belajar membuat list</title>
</head>
<body>
<ol>
<li>belajar HTML</li>
<li>belajar PHP</li>
</ol>
</body>
</html>
Gambar 13 Ordered list HTML
Unordered list <ul>
Unordered list yaitu jenis list HTML dalam bentu titik pada awal list.
berikut contoh unordered list pada HTML :
<!DOCTYPE html>
Ebook Belajar HTML & CSS Dasar 28Diki Alfarabi Hadi | www.malasngoding.com
<!DOCTYPE html>
<html>
<head>
<title>belajar membuat list</title>
</head>
<body>
<ol>
<li>belajar HTML</li>
<li>belajar PHP</li>
</ol>
</body>
</html>
Gambar 13 Ordered list HTML
Unordered list <ul>
Unordered list yaitu jenis list HTML dalam bentu titik pada awal list.
berikut contoh unordered list pada HTML :
<!DOCTYPE html>
Ebook Belajar HTML & CSS Dasar 29Diki Alfarabi Hadi | www.malasngoding.com
<html>
<head>
<title>belajar membuat list</title>
</head>
<body>
<ul>
<li>belajar HTML</li>
<li>belajar PHP</li>
</ul>
</body>
</html>
Gambar 14 Membuat List Pada HTML
Dari contoh di atas bisa anda lihat perbedaan masing-masing penggunaan jenis list pada
HTML. Penggunaan list pada HTML tidak hanya untuk membuat daftar saja. dengan
menggabungkan CSS, JavaScript tag list ini bisa di gunakan untuk membuat menu navigasi pada
halaman web.
Ebook Belajar HTML & CSS Dasar 29Diki Alfarabi Hadi | www.malasngoding.com
<html>
<head>
<title>belajar membuat list</title>
</head>
<body>
<ul>
<li>belajar HTML</li>
<li>belajar PHP</li>
</ul>
</body>
</html>
Gambar 14 Membuat List Pada HTML
Dari contoh di atas bisa anda lihat perbedaan masing-masing penggunaan jenis list pada
HTML. Penggunaan list pada HTML tidak hanya untuk membuat daftar saja. dengan
menggabungkan CSS, JavaScript tag list ini bisa di gunakan untuk membuat menu navigasi pada
halaman web.
Ebook Belajar HTML & CSS Dasar 29Diki Alfarabi Hadi | www.malasngoding.com
<html>
<head>
<title>belajar membuat list</title>
</head>
<body>
<ul>
<li>belajar HTML</li>
<li>belajar PHP</li>
</ul>
</body>
</html>
Gambar 14 Membuat List Pada HTML
Dari contoh di atas bisa anda lihat perbedaan masing-masing penggunaan jenis list pada
HTML. Penggunaan list pada HTML tidak hanya untuk membuat daftar saja. dengan
menggabungkan CSS, JavaScript tag list ini bisa di gunakan untuk membuat menu navigasi pada
halaman web.
Ebook Belajar HTML & CSS Dasar 30Diki Alfarabi Hadi | www.malasngoding.com
Belajar HTML Dasar : Membuat Form pada HTML
Form merupakan tempat penginputan data sebelum diproses oleh sistem. salah satunya
yaitu form login, form comment, form data user, dan lain sebagainya. untuk proses penginputan
data dari form akan kita bahas di materi PHP, MYSQL, dan JavaScript. tag yang digunakan
untuk membuat form ini yaitu tag <form> yang didalamnya bisa berupa <input>, <textarea>,
<opstion> dan <select>.
Tag <form>
Dalam tag <form> ini dibutuhkan beberapa atribut untuk memproses data yang akan
dikirim. dan biasanya nilai yang di kirim berupa alamat dari sebuah halaman untuk memproses
data inputan. dan atribut yang kedua berupa method. method ini menjelaskan bagaimana data
yang akan dikirim oleh web browser. nilai dari method ini biasanya get atau post.
Tag <input>
Tag input merupakan tag yang akan digunakan dalam form pengisian. tag input ini
memiliki banyak sekali bentuk yang bisa digunakan misalkan isian teks, password, checkbox,
radio button, sampai dengan tombol submit berada dalam tag <input>.
Berikut beberapa bentuk dalam tag <input> yang di kategorikan berdasarkan atribut :
<input type=’text’> Form ini bersifat menerima inputan text misalkan: username, nama, tempat
lahir atau berupa inputan text yang pendek.
<input type=’password’> Form ini bersifat menerima inputan password. Setiap text yang di input
akan di tampilkan sebagai tanda titik(di samarkan), textbox ini biasanya
digunakan untuk membuat inputan password.
<input type=’submit’> inputan ini berupa tombol submit untuk memproses data inputan dari form.
<input type=’checkbox’> inputan berupa checkbox yang dapat di ceklis oleh user. Inputan ini
memungkinan user untuk men-checklist banyak pilihan sekaligus.
<input type=’radio’> inputan ini berupa radio grup, dimana user dapat memilih salah satu dari
Ebook Belajar HTML & CSS Dasar 31Diki Alfarabi Hadi | www.malasngoding.com
pilihan yang disediakan dengan menggunakan form radio.contoh nya
yaitu form pemilihan jenis kelamin.
Tag <textarea>
Tag <textarea> yaitu tag yang sama fungsinya dengan inputan text, hanya saja pada
textarea ini dapat diisikan dengan lebih banyak teks didalamnya secara sekaligus. Contoh nya
untuk pengisian alamat lengkap.
berikut contoh penulisan textarea :
<textarea></textarea>
Tag <select>
Tag <select> merupakan tag yang digunakan user untuk memilih data yang sudah
disediakan. Dalam penggunakan <select> selalu diikuti oleh <option> yang digunakan untuk
membuat pilihan.
berikut contoh penulisan <select> pada HTML
<select>
<option>Semarang</option>
<option>Bandung</option>
</select>
Untuk lebih memberikan pemahaman lebih tentang cara membuat form pada HTML, silahkan
perhatikan contoh berikut ini:
<!DOCTYPE html>
<html>
<head>
<title>Belajar Membuat Form pada HTML</title>
</head>
Ebook Belajar HTML & CSS Dasar 32Diki Alfarabi Hadi | www.malasngoding.com
<body>
<form>
nama : <input type="text" name="nama"> <br/>
alamat : <input type="text" name="alamat"> </br/>
password : <input type="password" name="pass"> <br/>
Jenis Kelamin :
<input type="radio" name="jk" value="laki-laki"/> Laki - Laki
<input type="radio" name="jk" value="perempuan" /> Perempuan
<br/>
bahas pemograman yang dikuasai :
<input type="checkbox" name="web"> Web
<input type="checkbox" name="mobile"> MOBILE
<input type="checkbox" name="desk"> DESKTOP
<br/>
kota asal :
<select>
<option>Semarang</option>
<option>Bandung</option>
</select>
<br/>
pesan anda :
<textarea></textarea>
<br/>
<input type="submit" value="proses">
</form>
</body>
</html>
Dan jalankan pada browser untuk melihat hasil nya.
Ebook Belajar HTML & CSS Dasar 33Diki Alfarabi Hadi | www.malasngoding.com
Gambar 15 Membuat Form pada HTML
Dari contoh di atas, dapat di perhatikan bahwa ada beberapa jenis form yang terdapat
pada HTML.
Belajar HTML Dasar : Menampilkan Gambar Pada HTML
Menampilkan gambar pada html termasuk yang bisa di bilang terpenting dalam
membuat website atau membuat aplikasi berbasis web, bayangkan apa jadinya jika website tanpa
gambar, maka akan terasa sangat membosankan. oleh karena itu teknik menampilkan gambar
pada HTML termasuk ke dalam teknik yang perlu bahkan wajib. pada tutorial cara menampilkan
gambar pada html ini akan di jelaskan tentang cara menampilkan gambar pada halaman website
menggunakan HTML.
Ebook Belajar HTML & CSS Dasar 33Diki Alfarabi Hadi | www.malasngoding.com
Gambar 15 Membuat Form pada HTML
Dari contoh di atas, dapat di perhatikan bahwa ada beberapa jenis form yang terdapat
pada HTML.
Belajar HTML Dasar : Menampilkan Gambar Pada HTML
Menampilkan gambar pada html termasuk yang bisa di bilang terpenting dalam
membuat website atau membuat aplikasi berbasis web, bayangkan apa jadinya jika website tanpa
gambar, maka akan terasa sangat membosankan. oleh karena itu teknik menampilkan gambar
pada HTML termasuk ke dalam teknik yang perlu bahkan wajib. pada tutorial cara menampilkan
gambar pada html ini akan di jelaskan tentang cara menampilkan gambar pada halaman website
menggunakan HTML.
Ebook Belajar HTML & CSS Dasar 33Diki Alfarabi Hadi | www.malasngoding.com
Gambar 15 Membuat Form pada HTML
Dari contoh di atas, dapat di perhatikan bahwa ada beberapa jenis form yang terdapat
pada HTML.
Belajar HTML Dasar : Menampilkan Gambar Pada HTML
Menampilkan gambar pada html termasuk yang bisa di bilang terpenting dalam
membuat website atau membuat aplikasi berbasis web, bayangkan apa jadinya jika website tanpa
gambar, maka akan terasa sangat membosankan. oleh karena itu teknik menampilkan gambar
pada HTML termasuk ke dalam teknik yang perlu bahkan wajib. pada tutorial cara menampilkan
gambar pada html ini akan di jelaskan tentang cara menampilkan gambar pada halaman website
menggunakan HTML.
Ebook Belajar HTML & CSS Dasar 34Diki Alfarabi Hadi | www.malasngoding.com
HTML menyediakan sebuah tag yang khusus untuk menampilkan gambar atau image. tag
HTML yang berfungsi untuk menampilkan gambar yaitu tag ” <img> “. tag <img> di gunakan
untuk menampilkan gambar atau image dengan berbagai ekstensi, bisa itu jpg, png, gif, bmp, ico
dan lain-lain.
Cara Menampilkan Gambar Pada HTML
Untuk menampilkan gambar dengan HTML, anda bisa menggunakan tag <img>.
kemudian masukkan atribut “src=” pada tag <img>. atribut src berguna untuk menghubungkan
dengan file gambar, jadi atribut src ini di gunakan untuk pemanggilan lokasi dan nama file
gambar. jika file gambar terletak satu folder dengan file html yang bertugas untuk menampilkan
gambar ini maka kita bisa langsung memasukkan nama file gambar yang ingin di tampilkan
tersebut pada atribut src ini. tetapi jika file gambar berada pada folder yang berbeda dengan file
html yang menampilkan gambar maka anda bisa menambahkan nama folder nya seperti misalnya
“nama_folder/filegambar”. dan jika file gambar berada di luar folder file html yang
menampilkan gambar maka anda bisa menambahkan perintah “../”.
Perhatikan contoh berikut untuk cara menampilkan gambar dengan HTML. di sini saya
sudah menyediakan sebuah file gambar yang berekstensi .png
Gambar 16 menampilkan gambar pada html
Ebook Belajar HTML & CSS Dasar 34Diki Alfarabi Hadi | www.malasngoding.com
HTML menyediakan sebuah tag yang khusus untuk menampilkan gambar atau image. tag
HTML yang berfungsi untuk menampilkan gambar yaitu tag ” <img> “. tag <img> di gunakan
untuk menampilkan gambar atau image dengan berbagai ekstensi, bisa itu jpg, png, gif, bmp, ico
dan lain-lain.
Cara Menampilkan Gambar Pada HTML
Untuk menampilkan gambar dengan HTML, anda bisa menggunakan tag <img>.
kemudian masukkan atribut “src=” pada tag <img>. atribut src berguna untuk menghubungkan
dengan file gambar, jadi atribut src ini di gunakan untuk pemanggilan lokasi dan nama file
gambar. jika file gambar terletak satu folder dengan file html yang bertugas untuk menampilkan
gambar ini maka kita bisa langsung memasukkan nama file gambar yang ingin di tampilkan
tersebut pada atribut src ini. tetapi jika file gambar berada pada folder yang berbeda dengan file
html yang menampilkan gambar maka anda bisa menambahkan nama folder nya seperti misalnya
“nama_folder/filegambar”. dan jika file gambar berada di luar folder file html yang
menampilkan gambar maka anda bisa menambahkan perintah “../”.
Perhatikan contoh berikut untuk cara menampilkan gambar dengan HTML. di sini saya
sudah menyediakan sebuah file gambar yang berekstensi .png
Gambar 16 menampilkan gambar pada html
Ebook Belajar HTML & CSS Dasar 34Diki Alfarabi Hadi | www.malasngoding.com
HTML menyediakan sebuah tag yang khusus untuk menampilkan gambar atau image. tag
HTML yang berfungsi untuk menampilkan gambar yaitu tag ” <img> “. tag <img> di gunakan
untuk menampilkan gambar atau image dengan berbagai ekstensi, bisa itu jpg, png, gif, bmp, ico
dan lain-lain.
Cara Menampilkan Gambar Pada HTML
Untuk menampilkan gambar dengan HTML, anda bisa menggunakan tag <img>.
kemudian masukkan atribut “src=” pada tag <img>. atribut src berguna untuk menghubungkan
dengan file gambar, jadi atribut src ini di gunakan untuk pemanggilan lokasi dan nama file
gambar. jika file gambar terletak satu folder dengan file html yang bertugas untuk menampilkan
gambar ini maka kita bisa langsung memasukkan nama file gambar yang ingin di tampilkan
tersebut pada atribut src ini. tetapi jika file gambar berada pada folder yang berbeda dengan file
html yang menampilkan gambar maka anda bisa menambahkan nama folder nya seperti misalnya
“nama_folder/filegambar”. dan jika file gambar berada di luar folder file html yang
menampilkan gambar maka anda bisa menambahkan perintah “../”.
Perhatikan contoh berikut untuk cara menampilkan gambar dengan HTML. di sini saya
sudah menyediakan sebuah file gambar yang berekstensi .png
Gambar 16 menampilkan gambar pada html
Ebook Belajar HTML & CSS Dasar 35Diki Alfarabi Hadi | www.malasngoding.com
Perhatikan letak gambar di atas. saya memiliki file gambar dengan nama
malasngoding.png. maka berikut ini cara menampilkan gambar dengan html.
index.html
<!DOCTYPE html>
<html>
<head>
<title>Menampilkan gambar pada HTML | www.malasngoding.com</title>
</head>
<body>
<h1>Menampilkan gambar pada HTML | www.malasngoding.com</h1>
<img src="malasngoding.png">
</body>
</html>
Gambar 17 cara menampilkan gambar dengan html
Ebook Belajar HTML & CSS Dasar 35Diki Alfarabi Hadi | www.malasngoding.com
Perhatikan letak gambar di atas. saya memiliki file gambar dengan nama
malasngoding.png. maka berikut ini cara menampilkan gambar dengan html.
index.html
<!DOCTYPE html>
<html>
<head>
<title>Menampilkan gambar pada HTML | www.malasngoding.com</title>
</head>
<body>
<h1>Menampilkan gambar pada HTML | www.malasngoding.com</h1>
<img src="malasngoding.png">
</body>
</html>
Gambar 17 cara menampilkan gambar dengan html
Ebook Belajar HTML & CSS Dasar 35Diki Alfarabi Hadi | www.malasngoding.com
Perhatikan letak gambar di atas. saya memiliki file gambar dengan nama
malasngoding.png. maka berikut ini cara menampilkan gambar dengan html.
index.html
<!DOCTYPE html>
<html>
<head>
<title>Menampilkan gambar pada HTML | www.malasngoding.com</title>
</head>
<body>
<h1>Menampilkan gambar pada HTML | www.malasngoding.com</h1>
<img src="malasngoding.png">
</body>
</html>
Gambar 17 cara menampilkan gambar dengan html
Ebook Belajar HTML & CSS Dasar 36Diki Alfarabi Hadi | www.malasngoding.com
dan gambar pun berhasil tampil.
Anda bisa menentukan ukuran gambar yang tampil dengan menambahkan atribut
height=”” untuk mengatur tinggi gambar, dan menambahkan aribut width=”” untuk menentukan
lebar gambar yang tampil.
<!DOCTYPE html>
<html>
<head>
<title>Menampilkan gambar pada HTML | www.malasngoding.com</title>
</head>
<body>
<h1>Menampilkan gambar pada HTML | www.malasngoding.com</h1>
<img src="malasngoding.png" height="300px" width="500px;">
</body>
</html>
Belajar HTML Tag Iframe Pada HTML
Iframe merupakan sebuah tag html yang berfungsi untuk menampilkan halaman
website tanpa harus membuka website tersebut. jadi apabila anda ingin menampilkan website
lain dalam halaman web anda maka anda bisa menggunakan tag <iframe> untuk
menampilkannya. caranya sangat mudah, anda hanya perlu menambahkan atribut src=”” pada
tag pembuka <iframe> untuk meletakkan link url dari website yang ingin anda tampilkan. cara
penulisan tag iframe di awali dengan tag iframe pembuka “<iframe>” dan di akhiri dengan tag
iframe penutup </iframe>.
Perhatikan contoh dan penjelasan berikut ini tentang cara menggunakan tag <iframe>.
Ebook Belajar HTML & CSS Dasar 37Diki Alfarabi Hadi | www.malasngoding.com
index.html
<!DOCTYPE html>
<html>
<head>
<title>Belajar HTML Tag Iframe Pada HTML | www.malasngoding.com</title>
</head>
<body>
<h1>Belajar HTML Tag Iframe Pada HTML | www.malasngoding.com</h1>
<iframe src="http://www.malasngoding.com" height="500px" width="1000px"></iframe>
</body>
</html>
Gambar 18 belajar html tag iframe pada html
Perhatikan pada contoh di atas. untuk membuat atau menggunakan tag <iframe> untuk
menampilkan halaman website ada halaman web anda anda bisa menggunakan tag <iframe> dan
kemudian memberikan atribut src=”” untuk meletakkan url dari halaman website yang ingin
anda tampilkan. pada contoh ini kita akan menampilkan halaman website
Ebook Belajar HTML & CSS Dasar 37Diki Alfarabi Hadi | www.malasngoding.com
index.html
<!DOCTYPE html>
<html>
<head>
<title>Belajar HTML Tag Iframe Pada HTML | www.malasngoding.com</title>
</head>
<body>
<h1>Belajar HTML Tag Iframe Pada HTML | www.malasngoding.com</h1>
<iframe src="http://www.malasngoding.com" height="500px" width="1000px"></iframe>
</body>
</html>
Gambar 18 belajar html tag iframe pada html
Perhatikan pada contoh di atas. untuk membuat atau menggunakan tag <iframe> untuk
menampilkan halaman website ada halaman web anda anda bisa menggunakan tag <iframe> dan
kemudian memberikan atribut src=”” untuk meletakkan url dari halaman website yang ingin
anda tampilkan. pada contoh ini kita akan menampilkan halaman website
Ebook Belajar HTML & CSS Dasar 37Diki Alfarabi Hadi | www.malasngoding.com
index.html
<!DOCTYPE html>
<html>
<head>
<title>Belajar HTML Tag Iframe Pada HTML | www.malasngoding.com</title>
</head>
<body>
<h1>Belajar HTML Tag Iframe Pada HTML | www.malasngoding.com</h1>
<iframe src="http://www.malasngoding.com" height="500px" width="1000px"></iframe>
</body>
</html>
Gambar 18 belajar html tag iframe pada html
Perhatikan pada contoh di atas. untuk membuat atau menggunakan tag <iframe> untuk
menampilkan halaman website ada halaman web anda anda bisa menggunakan tag <iframe> dan
kemudian memberikan atribut src=”” untuk meletakkan url dari halaman website yang ingin
anda tampilkan. pada contoh ini kita akan menampilkan halaman website
Ebook Belajar HTML & CSS Dasar 38Diki Alfarabi Hadi | www.malasngoding.com
www.malasngoding.com sehingga contoh nya seperti berikut. Belajar HTML Tag Iframe Pada
HTML
<iframe src="http://www.malasngoding.com" height="500px" width="1000px"></iframe>
Atribut height dan width pada contoh di atas untuk menentukan tinggi dan lebar iframe.
tapi anda bisa menggunakan css untuk mengatur ukuran tinggi dan lebar iframe. klik di
sini untuk mambaca tutorial css.
Sekian lah tutorial belajar HTML tag iframe pada HTML. Pada tutorial selanjutnya akan
di jelaskan tentang pengertian class dan id pada html. apa kegunaan dari class dan id? serta
bagaimana cara penggunaannya ?. setelah pengenalan class dan id pada HTML kemudian akan
di jelaskan tentang cara menghubungkan HTML dan css dan bagaimana penggunaan dasar CSS
pada HTML.
Ebook Belajar HTML & CSS Dasar 39Diki Alfarabi Hadi | www.malasngoding.com
Belajar HTML Dasar : Menghubungkan HTML dengan
CSS
Tutorial Menghubungkan HTML dengan CSS ini merupakan tutorial HTML yang bisa di
bilang termasuk ke dalam salah satu tutorial HTML yang paling terpenting. karena jika kita tidak
mengetahui cara menghubungkan HTML dengan CSS secara otomatis pasti kita tidak
mengetahui bagaimana cara untuk mendesign halaman website yang kita buat karena file HTML
tidak terhubung dengan CSS. Bukan hanya HTML sebenarnya. tetapi PHP juga sama, PHP yang
akan kita gunakan untuk membuat website. Setelah anda selesai mempelajari tutoria-tutorial
HTML ini di asumsikan untuk melanjutkan ke tutorial belajar css dan tutorial belajar PHP di
www.malasngoding.com, agar materi yang di pelajari menjadi terurut dan terstruktur.
Setelah anda mempelajari tutorial belajar html menghubungkan html dengan css ini
selanjutnya akan di jelaskan lagi pada tutorial selanjutnya tentang Class dan id pada html.
Pemahaman tentang Class dan Id pada HTML merupakan dasar yang harus di pahami sebelum
anda melangkah lebih jauh mempelajari CSS. apalagi bagi anda yang ingin memfokuskan diri
pada bagian front-end developer/web designer. silahkan simak penjelasan tentang cara
menghubungkan HTML dengan CSS berikut ini. dan untuk penjelasan class dan id akan di bahas
pada tutorial selanjutnya.
Cara Menghubungkan HTML dengan CSS
Untuk Cara menghubungkan HTML dengan CSS caranya sangat mudah. gunakan tag
<link> untuk menghubungkan html dengan css. tag link di letakkan pada bagian element head
pada struktur HTML. baiklah perhatikan contoh cara menghubungkan html dengan CSS berikut
ini.
Buat sebuah file html atau php terserah anda. karena ini merupakan tutorial HTML maka
saya menggunakan file HTML untuk di hubungkan dengan CSS. di sini saya membuat file html
dengan nama index.html. kemudian buat sebuah file css lagi dengan nama terserah anda, di sini
saya membuat file css dengan nama style.css. jadi ada dua buah file yang saya buat yaitu file
index.html dan fiel style.css.
Ebook Belajar HTML & CSS Dasar 40Diki Alfarabi Hadi | www.malasngoding.com
index.html
<!DOCTYPE html>
<html>
<head>
<title>Menghubungkan HTML dengan CSS | www.malasngoding.com</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
</body>
</html>
Contoh di atas merupakan cara menghubungkan file html/php dengan CSS. pada contoh
di atas saya membuat tag link yang berfungsi untuk menghubungkan file html/php dengan file
css yang kita inginkan.
<link rel="stylesheet" type="text/css" href="style.css">
atribut rel=”stylesheet” dan type=”text/css” merupakan deklarasi untuk menjelaskan
bahwa file yang kita panggil atau hubungkan yaitu file stylesheet atau css. dan pada atribut href
digunakan untuk meletakkan lokasi dan nama file css yang ingin kita hubungkan. pada contoh ini
saya menghubungkan file html saya dengan file css yang sudah saya berinama dengan style.css.
Jika di jalankan pada browser maka tidak akan muncul apa-apa karena pada file html
masih kosong belum berisi element apapun selain struktur dasar html. untuk mencoba apakah file
css sudah berhasil terhubung dengan file html maka akan kita cek dengan cara berikut ini. kita
buat contoh sederhana dulu dengan cara membuat sebuah element heading 1, dan kemudian kita
beri warna text heading 1 tersebut dengan warna orange.
index.html
Ebook Belajar HTML & CSS Dasar 41Diki Alfarabi Hadi | www.malasngoding.com
<!DOCTYPE html>
<html>
<head>
<title>Menghubungkan HTML dengan CSS | www.malasngoding.com</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Belajar HTML menghubungkan html dengan css</h1>
</body>
</html>
style.css
h1{
color: orange;
font-family: sans-serif;
text-align: center;
}
Gambar 19 belajar html menghubungkan html dengan css
File html berhasil di hubungkan dengan css terbukti dengan berhasilnya syntax css yang
kita buat untuk mengatur element heading 1 html di atas. syntax color pada css di atas
merupakan perintah untuk menetapkan warna font/text, font-family untuk mengatur font yang di
gunakan dan text-align untuk mengatur rata text. syntax css di atas merupakan syntax css yang
Ebook Belajar HTML & CSS Dasar 41Diki Alfarabi Hadi | www.malasngoding.com
<!DOCTYPE html>
<html>
<head>
<title>Menghubungkan HTML dengan CSS | www.malasngoding.com</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Belajar HTML menghubungkan html dengan css</h1>
</body>
</html>
style.css
h1{
color: orange;
font-family: sans-serif;
text-align: center;
}
Gambar 19 belajar html menghubungkan html dengan css
File html berhasil di hubungkan dengan css terbukti dengan berhasilnya syntax css yang
kita buat untuk mengatur element heading 1 html di atas. syntax color pada css di atas
merupakan perintah untuk menetapkan warna font/text, font-family untuk mengatur font yang di
gunakan dan text-align untuk mengatur rata text. syntax css di atas merupakan syntax css yang
Ebook Belajar HTML & CSS Dasar 41Diki Alfarabi Hadi | www.malasngoding.com
<!DOCTYPE html>
<html>
<head>
<title>Menghubungkan HTML dengan CSS | www.malasngoding.com</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Belajar HTML menghubungkan html dengan css</h1>
</body>
</html>
style.css
h1{
color: orange;
font-family: sans-serif;
text-align: center;
}
Gambar 19 belajar html menghubungkan html dengan css
File html berhasil di hubungkan dengan css terbukti dengan berhasilnya syntax css yang
kita buat untuk mengatur element heading 1 html di atas. syntax color pada css di atas
merupakan perintah untuk menetapkan warna font/text, font-family untuk mengatur font yang di
gunakan dan text-align untuk mengatur rata text. syntax css di atas merupakan syntax css yang
Ebook Belajar HTML & CSS Dasar 42Diki Alfarabi Hadi | www.malasngoding.com
paling dasar yang akan kita pelajari juga pada tutorial selanjutnya tentang pengertian dan
pengenalan dasar css pada www.malasngoding.com.
Belajar HTML Dasar : Mengenal Class dan Id Pada HTML
Class dan Id, sesuai dengan yang di jelaskan pada tutorial sebelumnya yaitu cara
menghubungkan HTML dengan CSS di jelaskan bahwa class dan id sangat lah penting. oleh
sebab itu pada tutorial belajar HTML mengenal class dan id pada html ini akan di jelaskan
tentang apa sih pengertian dari class dan id pada HTML? dan apa perbedaan dari class dan id
pada HTML.
Class dan id bisa di bilang sebagai penanda pada html, maksud penanda di sini yaitu
element-element html dapat di beri tanda dengan class atau id. untuk apa di beri tanda ? agar
dapat di manipulasi menggunakan css atau javascript. bayangan sederhananya jika anda memiliki
lima buah kotak, semua kotak yang anda miliki berwarna biru, kemudian anda ingin mengubah
warna kotak yang ketiga, nah di sinilah letak kegunaan class dan id, untuk memberikan tanda
atau nama pada kotak anda agar bisa di ubah dan kotak yang lain tidak akan berubah.
Mengenal Class dan Id Pada HTML
Perbedaan dari class dan id yaitu class di panggil pada css atau javascript dengan
menggunakan tanda titik “.”, dan id di panggil pada css atau javascript dengan tanda pagar “#”,
ada kelebihan di sini untuk class, yaitu class dapat di berikan pada banyak element html dan
dapat di panggil sekaligus, sedangkan id hanya dapat bekerja pada satu penandaan saja,
maksudnya satu nama id hanya bisa di berikan pada satu element saja, perhatikan pada contoh
berikut untuk memberikan pemahaman lebih tentang class dan id pada html ini.
index.html
<!DOCTYPE html>
<html>
Ebook Belajar HTML & CSS Dasar 43Diki Alfarabi Hadi | www.malasngoding.com
<head>
<title>Mengenal Class dan Id pada HTML | www.malasngoding.com</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Mengenal Class dan Id pada HTML<br/>www.malasngoding.com</h1>
<!-- contoh penggunaan class -->
<div class="kotak">kotak 1</div>
<div class="kotak">kotak 2</div>
<div class="kotak">kotak 3</div>
<!-- contoh penggunaan id -->
<div id="kotak">Kotak 4</div>
</body>
</html>
style.css
h1{
color: orange;
font-family: sans-serif;
text-align: center;
}
.kotak{
padding: 50px;
width: 100px;
color: #fff;
margin: 10px;
background: orange;
}
#kotak{
Ebook Belajar HTML & CSS Dasar 44Diki Alfarabi Hadi | www.malasngoding.com
width: 400px;
color: #fff;
background: blue;
padding: 50px;
}
dan jika di jalankan pada browser
Gambar 20 Belajar HTML mengenal class dan id pada html
Perhatikan pada contoh di atas, kotak 1, kotak 2 dan kotak 3 kita beri tanda dengan class
yang kita beri nama “kotak”, dan kotak 4 kita beri tanda dengan id yang kita beri nama kotak
juga. maka perbedaannya di sini akan tampak, bahwa class bisa di panggil sekaligus, ini di
buktikan dengan kotak 1,2 dan 3 di beri tanda class yang sama yaitu class kotak. dan kotak 4 kita
beri tanda dengan id kotak.
Ebook Belajar HTML & CSS Dasar 44Diki Alfarabi Hadi | www.malasngoding.com
width: 400px;
color: #fff;
background: blue;
padding: 50px;
}
dan jika di jalankan pada browser
Gambar 20 Belajar HTML mengenal class dan id pada html
Perhatikan pada contoh di atas, kotak 1, kotak 2 dan kotak 3 kita beri tanda dengan class
yang kita beri nama “kotak”, dan kotak 4 kita beri tanda dengan id yang kita beri nama kotak
juga. maka perbedaannya di sini akan tampak, bahwa class bisa di panggil sekaligus, ini di
buktikan dengan kotak 1,2 dan 3 di beri tanda class yang sama yaitu class kotak. dan kotak 4 kita
beri tanda dengan id kotak.
Ebook Belajar HTML & CSS Dasar 44Diki Alfarabi Hadi | www.malasngoding.com
width: 400px;
color: #fff;
background: blue;
padding: 50px;
}
dan jika di jalankan pada browser
Gambar 20 Belajar HTML mengenal class dan id pada html
Perhatikan pada contoh di atas, kotak 1, kotak 2 dan kotak 3 kita beri tanda dengan class
yang kita beri nama “kotak”, dan kotak 4 kita beri tanda dengan id yang kita beri nama kotak
juga. maka perbedaannya di sini akan tampak, bahwa class bisa di panggil sekaligus, ini di
buktikan dengan kotak 1,2 dan 3 di beri tanda class yang sama yaitu class kotak. dan kotak 4 kita
beri tanda dengan id kotak.
Ebook Belajar HTML & CSS Dasar 45Diki Alfarabi Hadi | www.malasngoding.com
Selanjutnya pada css juga dapat anda lihat, class di panggil dengan tanda titik “.” dan id
di panggil dengan tanda pagar “#”.
Belajar HTML Dasar : Membuat Symbol pada HTML
Selain menyediakan kode warna, HTML juga menyediakan kode untuk membuat symbol.
langsung saja pada kode html yang di sediakan html untuk membuat simbol dengan html. ada
dua jenis kode simbol html yaitu number dan entity, berikut ini yaitu beberapa kode html yang
bisa di gunakan untuk membuat simbol.
Daftar beberapa kode simbol HTML
Symbol Number Entity
∀ ∀ ∀
∂ ∂ ∂
∃ ∃ ∃
∅ ∅ ∅
∇ ∇ ∇
∈ ∈ ∈
∉ ∉ ∉
∋ ∋ ∋q
Ebook Belajar HTML & CSS Dasar 46Diki Alfarabi Hadi | www.malasngoding.com
∏ ∏ ∏
∑ ∑ ∑
Α Α Α
Β Β Β
Γ Γ Γ
Δ Δ Δ
Ε Ε Ε
Ζ Ζ Ζ
© © ©
® ® ®
€ € €
™ ™ ™
← ← ←
↑ ↑ ↑
Ebook Belajar HTML & CSS Dasar 47Diki Alfarabi Hadi | www.malasngoding.com
→ → →
↓ ↓ ↓
♠ ♠ ♠
♣ ♣ ♣
♥ ♥ ♥
♦ ♦ ♦
Untuk membuat symbol html anda bisa menggunakan kode yang berbentuk number atau
entity. Perhatikan contoh membuat symbol dengan html berikut ini. Belajar HTML Membuat
symbol pada HTML
index.html
<!DOCTYPE html>
<html>
<head>
<title>Membuat symbol pada HTML | www.malasngoding.com</title>
</head>
<body>
<h1>Membuat symbol pada HTML<br/>www.malasngoding.com</h1>
<p>♠</p>
<a href="#">Simbol panah →</a><br/>
<a href="#">Simbol panah →</a><br/>
∀<br/>
∇<br/>
∏<br/>
Ebook Belajar HTML & CSS Dasar 48Diki Alfarabi Hadi | www.malasngoding.com
® <br/>
♥<br/>
→<br/>
↑<br/>
←<br/>
™<br/>
</body>
</html>
Dan jika di jalankan pada browser maka hasilnya
Ebook Belajar HTML & CSS Dasar 49Diki Alfarabi Hadi | www.malasngoding.com
Gambar 21 belajar html membuat symbol pada html
Dapat di lihat pada contoh di atas, simbol html pun terbentuk sesuai dengan kode symbol
html yang di gunakan. Belajar HTML Membuat symbol pada HTML.
Ebook Belajar HTML & CSS Dasar 49Diki Alfarabi Hadi | www.malasngoding.com
Gambar 21 belajar html membuat symbol pada html
Dapat di lihat pada contoh di atas, simbol html pun terbentuk sesuai dengan kode symbol
html yang di gunakan. Belajar HTML Membuat symbol pada HTML.
Ebook Belajar HTML & CSS Dasar 49Diki Alfarabi Hadi | www.malasngoding.com
Gambar 21 belajar html membuat symbol pada html
Dapat di lihat pada contoh di atas, simbol html pun terbentuk sesuai dengan kode symbol
html yang di gunakan. Belajar HTML Membuat symbol pada HTML.
Ebook Belajar HTML & CSS Dasar 50Diki Alfarabi Hadi | www.malasngoding.com
CSS
Belajar CSS Dasar : Pengertian dan Pengenalan CSS
CSS merupakan singkatan dari “Cascading Style Sheets“. sesuai dengan namanya CSS
memiliki sifat ”style sheet language” yang berarti bahasa pemrograman yang di gunakan untuk
web design. CSS yaitu bahasa pemrograman yang di gunakan untuk men-design sebuah
halaman website. dalam mendesign halaman website, CSS menggunakan penanda yang kita
kenal dengan id dan class. seperti yang sudah kita pelajari tentang pengenalan id dan class pada
tutorial edisi belajar HTML dasar sebelumnya di buku ini.
Seiring berkembang nya dunia pemrograman dan teknologi, CSS tidak cuma di gunakan
di HTML dan XHTML saja. tapi sudah bisa di gunakan untuk mendesign tampilan aplikasi
android. CSS di akses menggunakan id atau class. untuk contoh penulisannya perhatikan pada
contoh berikut ini.
Fungsi dan Kegunaan CSS
CSS dapat mengubah font, ukuran font, warna dan format font. mengatur ukuran layout,
lebar, tinggi dan warna element, mengubah tampilan form, membuat halaman website yang
responsive dan masih banyak lagi yang dapat di lakukan oleh CSS yang tidak akan habis saya
tuliskan semuanya di tutorial belajar CSS dasar ini.
Untuk mendesain font dapat dilakukan dengan mendefinisikan font , untuk mengatur
warna bisa menggunakan color, margins digunakan untuk mengatur jarak pada luar element
tertentu. mengatur warna atau gambar pada latar belakang bisa menggunakan “background”.
mengatur ukuran font gunakan “font size”. jenis font menggunakan “font-family” dan banyak
lagi lainnya.
Cara Penggunaan CSS
File css di simpan dengan ekstensi .css. kemudian di import atau di hubungkan kedalam
file HTML atau PHP yang ingin kita design dengan CSS menggunakan syntax berikut ini.
Ebook Belajar HTML & CSS Dasar 51Diki Alfarabi Hadi | www.malasngoding.com
<link rel="stylesheet" type="text/css" href="style.css" />
dengan tag <link> seperti di atas di gunakan untuk menghubungkan file HTML dengan
file CSS. Syntax di atas di letakkan pada file html. pada atribut rel dan type di tag link di atas di
gunakan untuk mendefinisikan bahwa yang di panggil atau yang di hubungkan yaitu file Style
sheet atau CSS. kemudian atribut href di gunakan untuk meletakkan letak file CSS. pada contoh
di atas file style.css terletak satu folder atau direktori dengan file html yang di tambahkan syntax
di atas.
jika file css terletak di luar folder maka bisa menghubungkanya dengan
href="../style.css"
jika file css terletak dalam sebuah folder. katakan saja nama foldernya yaitu ” assets “. maka
untuk menghubungkannya
href="assets/style.css"
Sekian lah tutorial dasar tentang belajar css pengertian dan pengenalan CSS. Selanjutnya
akan di jelaskan tentang cara penulisan syntax CSS.
Belajar CSS Dasar : Cara Penulisan CSS
CSS(Cascading Style Sheet) merupakan sebuah bahasa pemrograman web yang memiliki
fungsi dan tujuan untuk mengatur atau mendesign tiap-tiap komponen dari HTML seperti elemen
dan tag. dengan menggunakan CSS kita dapat mengatur ukuran, warna dan bentuk dari element
HTML. Mengganti font, mengatur margin dan mengatur padding dan banyak lagi yang dapat di
lakukan menggunakan CSS untuk mempercantik atau men-design halaman website.
CSS menggunakan selector (id dan class) untuk menentukan element yang akan di
modifikasi atau yang akan di beri sentuhan css. jika di ibaratkan HTML sebagai tiang pada
Ebook Belajar HTML & CSS Dasar 52Diki Alfarabi Hadi | www.malasngoding.com
sebuah bangunan rumah, maka CSS berfungsi sebagai cet dan dekorasi pada bangunan rumah
tersebut. Ada tiga teknik metode penulisan CSS, yaitu :
Inline CSS Style
Internal CSS Style
External CSS Style
Ketiga teknik metode cara penulisan CSS(inline, internal, external) tersebut akan kita bahas
dan pelajari pada tutorial ini.
Teknik penulisan CSS Inline Style
Teknik penulisan syntax css dengan Inline style yaitu teknik cara penulisan syntax CSS
yang tidak memerlukan selector (id dan class). Sehingga syntax CSS di letakkan atau langsung di
sisipkan pada element HTML. syntax CSS di letakkan di dalam atribut style=””.
Contoh penulisan inline CSS style :
Contoh Belajar CSS Dasar Cara Penulisan CSS. Untuk membuat contoh penulisan CSS
dengan gaya inline caranya sediakan sebuah file HTML atau PHP. di sini saya menggunakan
HTML. saya membuat sebuah file dengan nama index.html.
index.html
<!DOCTYPE html>
<html>
<head>
<title>Penulisan CSS dengan Inline Style</title>
</head>
<body>
<h1 style="color:blue">Belajar CSS Dasar Di <a href="http://www.malasngoding.com">www.malasngoding.com</a></h1>
</body>
</html>
Ebook Belajar HTML & CSS Dasar 53Diki Alfarabi Hadi | www.malasngoding.com
perhatikan pada contoh di atas. syntax css di letakkan dalam element h1 menggunakan
atribut style=””. Perintah color yaitu perintah css yang berfungsi untuk mengatur warna font.
jadi pada contoh inline css style ini kita membuat heading h1 dengan warna font yang kita atur
menjadi warna biru (Blue).
dan saat di jalankan maka hasilnya sebagai berikut:
Gambar 22 contoh penulisan css inline style
Teknik penulisan CSS Internal Style
Teknik penulisan syntax CSS dengan Internal style yaitu teknik cara penulisan syntax
css yang di letakkan satu file dengan file html atau file php. syntax CSS di letakkan di dalam tag
<style> dan di akhiri dengan tag </style>. biasa nya tag <style> .. </style> di letakkan pada
bagian tag <head> pada HTML.
Contoh penulisan internal CSS Style :
Ebook Belajar HTML & CSS Dasar 53Diki Alfarabi Hadi | www.malasngoding.com
perhatikan pada contoh di atas. syntax css di letakkan dalam element h1 menggunakan
atribut style=””. Perintah color yaitu perintah css yang berfungsi untuk mengatur warna font.
jadi pada contoh inline css style ini kita membuat heading h1 dengan warna font yang kita atur
menjadi warna biru (Blue).
dan saat di jalankan maka hasilnya sebagai berikut:
Gambar 22 contoh penulisan css inline style
Teknik penulisan CSS Internal Style
Teknik penulisan syntax CSS dengan Internal style yaitu teknik cara penulisan syntax
css yang di letakkan satu file dengan file html atau file php. syntax CSS di letakkan di dalam tag
<style> dan di akhiri dengan tag </style>. biasa nya tag <style> .. </style> di letakkan pada
bagian tag <head> pada HTML.
Contoh penulisan internal CSS Style :
Ebook Belajar HTML & CSS Dasar 53Diki Alfarabi Hadi | www.malasngoding.com
perhatikan pada contoh di atas. syntax css di letakkan dalam element h1 menggunakan
atribut style=””. Perintah color yaitu perintah css yang berfungsi untuk mengatur warna font.
jadi pada contoh inline css style ini kita membuat heading h1 dengan warna font yang kita atur
menjadi warna biru (Blue).
dan saat di jalankan maka hasilnya sebagai berikut:
Gambar 22 contoh penulisan css inline style
Teknik penulisan CSS Internal Style
Teknik penulisan syntax CSS dengan Internal style yaitu teknik cara penulisan syntax
css yang di letakkan satu file dengan file html atau file php. syntax CSS di letakkan di dalam tag
<style> dan di akhiri dengan tag </style>. biasa nya tag <style> .. </style> di letakkan pada
bagian tag <head> pada HTML.
Contoh penulisan internal CSS Style :
Ebook Belajar HTML & CSS Dasar 54Diki Alfarabi Hadi | www.malasngoding.com
<!DOCTYPE html>
<html>
<head>
<title>Penulisan CSS dengan Internal Style</title>
<style type="text/css">
#tulisan{
color: 10px;
}
.box{
background: red;
padding: 10px;
}
</style>
</head>
<body>
<div class="box">
<h1 id="tulisan">Belajar CSS Dasar Di <a
href="http://www.malasngoding.com">www.malasngoding.com</a></h1>
</div>
</body>
</html>
Perhatikan contoh penulisan internal css style di atas. syntax css di letakkan satu file
dengan file html. syntax css di letakkan di dalam tag <style>. syntax css padding berfungsi
sebagai pengatur jarak pada sisi dalam element. pada contoh ini kita memberikan jarak sebesar
10px atau 10 pixel. CSS memanggil selector class dengan tanda titik ” . ” dan memanggil
selector id dengan tanda pagar ” # “.
<style type="text/css">
#tulisan{
Ebook Belajar HTML & CSS Dasar 55Diki Alfarabi Hadi | www.malasngoding.com
color: 10px;
}
.box{
background: red;
padding: 10px;
}
</style>
hasilnya
Gambar 23 Contoh penulisan CSS internal style
Teknik penulisan CSS External Style
Teknik penulisan Syntax CSS dengan External Style yaitu teknik penulisan yang memisahkan
file css dan html. penggunaan css yang baik yaitu menggunakan teknik penulisan CSS ini
karena kode program kita tidak akan berantakan karena syntax css di simpan pada file css. file
css dan html di hubungkan menggunakan
Ebook Belajar HTML & CSS Dasar 55Diki Alfarabi Hadi | www.malasngoding.com
color: 10px;
}
.box{
background: red;
padding: 10px;
}
</style>
hasilnya
Gambar 23 Contoh penulisan CSS internal style
Teknik penulisan CSS External Style
Teknik penulisan Syntax CSS dengan External Style yaitu teknik penulisan yang memisahkan
file css dan html. penggunaan css yang baik yaitu menggunakan teknik penulisan CSS ini
karena kode program kita tidak akan berantakan karena syntax css di simpan pada file css. file
css dan html di hubungkan menggunakan
Ebook Belajar HTML & CSS Dasar 55Diki Alfarabi Hadi | www.malasngoding.com
color: 10px;
}
.box{
background: red;
padding: 10px;
}
</style>
hasilnya
Gambar 23 Contoh penulisan CSS internal style
Teknik penulisan CSS External Style
Teknik penulisan Syntax CSS dengan External Style yaitu teknik penulisan yang memisahkan
file css dan html. penggunaan css yang baik yaitu menggunakan teknik penulisan CSS ini
karena kode program kita tidak akan berantakan karena syntax css di simpan pada file css. file
css dan html di hubungkan menggunakan
Ebook Belajar HTML & CSS Dasar 56Diki Alfarabi Hadi | www.malasngoding.com
<link rel="stylesheet" type="text/css" href="file css anda">
Contoh penulisan CSS menggunakan External Style :
Untuk membuat contoh penulisan CSS dengan External style siapkan satu buah file html dan
satu buah file css. di sini saya membuat sebuah file dengan nama index.html dan style.css
Gambar 24 Belajar CSS Dasar Cara Penulisan CSS
index.html
<!DOCTYPE html>
<html>
<head>
<title>Penulisan CSS dengan External Style</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="box">
Ebook Belajar HTML & CSS Dasar 56Diki Alfarabi Hadi | www.malasngoding.com
<link rel="stylesheet" type="text/css" href="file css anda">
Contoh penulisan CSS menggunakan External Style :
Untuk membuat contoh penulisan CSS dengan External style siapkan satu buah file html dan
satu buah file css. di sini saya membuat sebuah file dengan nama index.html dan style.css
Gambar 24 Belajar CSS Dasar Cara Penulisan CSS
index.html
<!DOCTYPE html>
<html>
<head>
<title>Penulisan CSS dengan External Style</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="box">
Ebook Belajar HTML & CSS Dasar 56Diki Alfarabi Hadi | www.malasngoding.com
<link rel="stylesheet" type="text/css" href="file css anda">
Contoh penulisan CSS menggunakan External Style :
Untuk membuat contoh penulisan CSS dengan External style siapkan satu buah file html dan
satu buah file css. di sini saya membuat sebuah file dengan nama index.html dan style.css
Gambar 24 Belajar CSS Dasar Cara Penulisan CSS
index.html
<!DOCTYPE html>
<html>
<head>
<title>Penulisan CSS dengan External Style</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="box">
Ebook Belajar HTML & CSS Dasar 57Diki Alfarabi Hadi | www.malasngoding.com
<h1 id="tulisan">Belajar CSS Dasar Di <a
href="http://www.malasngoding.com">www.malasngoding.com</a></h1>
</div>
</body>
</html>
style.css
#tulisan{
color: 10px;
}
.box{
background: red;
padding: 10px;
}
dan jika di jalankan maka hasilnya
Ebook Belajar HTML & CSS Dasar 58Diki Alfarabi Hadi | www.malasngoding.com
Gambar 25 Contoh penulisan CSS external style
Penjelasan ini sangat berguna sebelum anda melanjutkan ke tutorial CSS selanjutnya pada buku
ini.
Belajar CSS Dasar : Mengubah Background Dengan CSS
Background atau latar belakang pada sebuah halaman website merupakan salah satu
bagian yang wajib di design untuk menghasilkan sebuah halaman website yang terlihat menarik
dan modern. ada beberapa cara mempercantik background atau latar belakang website. bisa
mempercantik background website dengan menggunakan gambar. jika tidak ingin menggunakan
gambar bisa juga dengan mengubah warna background dengan bantuan CSS. untuk mengubah
background dengan CSS, gunakan property background pada CSS. property background selain
di gunakan untuk mengubah background body website, bisa juga di gunakan untuk mengubah
gambar background pada sebuah elemen HTML yang di inginkan.
Cara mengubah background dengan CSS
Ebook Belajar HTML & CSS Dasar 58Diki Alfarabi Hadi | www.malasngoding.com
Gambar 25 Contoh penulisan CSS external style
Penjelasan ini sangat berguna sebelum anda melanjutkan ke tutorial CSS selanjutnya pada buku
ini.
Belajar CSS Dasar : Mengubah Background Dengan CSS
Background atau latar belakang pada sebuah halaman website merupakan salah satu
bagian yang wajib di design untuk menghasilkan sebuah halaman website yang terlihat menarik
dan modern. ada beberapa cara mempercantik background atau latar belakang website. bisa
mempercantik background website dengan menggunakan gambar. jika tidak ingin menggunakan
gambar bisa juga dengan mengubah warna background dengan bantuan CSS. untuk mengubah
background dengan CSS, gunakan property background pada CSS. property background selain
di gunakan untuk mengubah background body website, bisa juga di gunakan untuk mengubah
gambar background pada sebuah elemen HTML yang di inginkan.
Cara mengubah background dengan CSS
Ebook Belajar HTML & CSS Dasar 58Diki Alfarabi Hadi | www.malasngoding.com
Gambar 25 Contoh penulisan CSS external style
Penjelasan ini sangat berguna sebelum anda melanjutkan ke tutorial CSS selanjutnya pada buku
ini.
Belajar CSS Dasar : Mengubah Background Dengan CSS
Background atau latar belakang pada sebuah halaman website merupakan salah satu
bagian yang wajib di design untuk mengha
.jpeg&description=HTML 5){kind=link}