cara cepat kuasai html
DESCRIPTION
Ebook ini menjelaskan tata cara penulisan beserta dengan praktek langsung sehingga memudahkan kita dalam menguasai bahasa pemrograman web dasar atau htmlTRANSCRIPT
-
CARA CEPAT KUASAI
HTML
Disusun Oleh: T. GhazaliEmail: [email protected]: facebook.com/ghazali.samuderaTwitter: twitter.com/tghazalipidieLokasi: Baroh, Grong-Grong, Pidie, Aceh, Indonesia
Copyleft 2014
-
KATA PENGANTAR
Dengan hadirnya buku tutorial ini dapat berguna bagi teman-teman
saya yang ingin belajar tentang web baik dari kalangan biasa maupun
sedang menuntut ilmu teknologi informasi. Saya membuat buku tutorial
sedikit ini khusus untuk orang yang ingin belajar tetapi tidak perlu
mengeluarkan dana hanya untuk belajar dasar baik itu web atau yang
lainnya, yang terpenting adalah mau belajar siap menghadapi error dan
sakit kepala.
Masih banyak orang yang ingin belajar diluar sana namun mereka
terbatas pada buku tutorial atau kebanyakan buku yang profesional dan
mendidik dijual tetapi mereka terbatas pada dana, jadi mau tidak mau
mereka harus belajar kepada buku tutorial yang dibuat seperti artikel dan
memusingkan untuk dipraktekkan. Selain itu buku yang gratis bertebaran
di internet tetapi kita belum puas dengan buku tersebut apakah karena
isinya atau yang lain, oleh karena itulah saya menyusun tutorial yang
sedikit ini dan saya berusaha untuk memberikan yang terbaik kepada
pembaca.
Berdasarkan yang saya alami dimasa lalu karena kesulitan mencari
buku maka saya membuat buku ini untuk memudahkan anda dalam belajar
khususnya dalam menguasai sebuah bahasa pemrograman dasar dan
kerangka dari sebuah website. Jika terdapat kesalahan atau kekurangan
bisa dikritik di facebook, twitter, atau forgha.bl.ee, semoga terbantu.
-
DAFTAR ISI
Bab 1 Pengenalan HTML.........................................................................................1
Bab 2 Konten Artikel...............................................................................................3
Bab 3 List Menu Atau Navigasi...............................................................................7
Bab 4 Formulir Data.................................................................................................9
Bab 5 Tabel Data....................................................................................................12
Bab 6 Multimedia...................................................................................................15
Bab 7 Gambar........................................................................................................17
Bab 8 Controller.....................................................................................................19
Bab 9 Layout HTML5............................................................................................20
-
Copyleft 2014 by T. Ghazali
BAB 1 PENGENALAN HTML
HTML adalah singkatan dari HyperText Markup Language yang
berarti sebuah bahasa hypertext yang berjalan disisi browser dan bisa juga
digunakan untuk membangun aplikasi mobile dengan HTML5 beserta
CSS3 dan JavaScript. HTML adalah bahasa yang sangat mudah dipahami
oleh manusia maupun komputer khususnya pada browser, oleh sebab itu
semua orang pasti mengenal html karena pada saat kita browsing pasti
akan muncul beberapa website yang mempunyai ekstensi html pada
halaman website tersebut walaupun penggunaan ekstensi php, jsp atau
aspx lebih banyak namun masih ada website yang menggunakan html
sebagai ekstensinya.
Pada penulisan html sebaiknya gunakan software yang ringan
seperti notepad++ pada Windows atau gedit pada Linux khususnya yang
berdesktop Gnome, selain kedua software tersebut sebenarnya masih
banyak lagi software yang menjamur di internet seperti Adobe
Dreamweaver, Komodo Edit, dan masih banyak lagi. Untuk ekstensi dari
dokumen html adalah .html atau .htm
Pada penulisan syntax awal yang wajib ada didalam otak kita, karena
ini adalah kerangka dasar yang wajib ada dalam sebuah dokumen website.
Syntax dibawah ini adalah kerangka dari html tersebut.
Judul Halaman Website
Penjelasan: !doctype html merupakan deklarasi dokumen tersebut yang
1
-
Copyleft 2014 by T. Ghazali
membuktikan bahwa ia dokumen HTML5, head merupakan kepala
halaman dari dokumen HTML tersebut yang didalamnya terdapat tag-tag
dari link, meta, style dan script, title merupakan judul dari dokumen
HTML yang tampil pada tabbar browser, body adalah tag dimana disini
akan kita letakkan konten website kita seperti mendesain layout dan
mengisi form, tabel atau artikel.
2
-
Copyleft 2014 by T. Ghazali
BAB 2 KONTEN ARTIKEL
Konten artikel merupakan sesuatu yang wajib ada dalam sebuah
website yang dikhususkan pada pembuatan artikel sebagai kontennya,
namun selain blog atau website artikel juga digunakan untuk pembuatan
konten yang artikel komen atau pesan sedikit. Untuk pembuatan konten
artikel dibutuhkan tag h1-h6, article, section, p, div, span, b, i, u, em,
strong, small, blockquote, br, hr, ins, kbd, main, pre, code, s, a, sub,
sup, time, wbr, del, dfn, samp, var, tt, abbr, address, details, summary,
bdo, bdi, mark, cite, ruby, rt, rp, q, dan aside. Agar memudahkan anda
dalam mempraktekkan tag-tag yang ada diatas silahkan anda ikuti langkah-
langkah dibawah ini.
1. Buat dokumen baru dengan nama artikel.html
2. Isikan dokumen tersebut syntax awal dari html yang ada di bab 1
3. Diantara tag body atau hapus tag komentar dalam tag body akan
ditulis semua syntax untuk pembuatan konten artikel ini
4. Tag awal adalah main seperti dibawah ini
5. Tambah tag article untuk konten per artikel (banyak artikel)
...
6. Penulisan tag-tag definisi sebagai berikut
... ... ... ... ... ... ... ... ...
7. Penulisan tag untuk blok text sebagai berikut
...
3
-
Copyleft 2014 by T. Ghazali
... ...
8. Pembuatan judul artikel bisa memilih antara tag h1 sampai h6
... ... ... ... ... ...
9. Pembuatan isi dari artikel atau text biasa seperti dibawah ini
... ... ... ... ...
... ...
10. Setelah itu untuk pembuatan efek dalam text artikel seperti
dibawah ini
... ... ... ... ... ...
... ... ... ... ... ...
.... untuk nilai dir bisa ganti ke ltr ... ...
11. Setelah bahan bahan sudah siap, langkah selanjutnya
menggabungkan semuanya kedalam dokumen html tadi.
4
-
Copyleft 2014 by T. Ghazali
Judul konten website anda Dipublikasikan oleh T Ghazali pada waktu 03:30 Selamat datang wahai fulan dalam website ini dulunya bernama webfulan sekarang bernama fulanweb dengan menggunakan code sample dari dengan ketik div yang beralamat disini untuk tag lain silahkan anda coba sendiri dan tidak mungkin saya coba semua Kategori: saya
12. Selesai, simpan dan jalankan lewat browser langsung
Penjelasan: main digunakan untuk mengelompokkan semua tag-tag
konten artikel, h1 sampai h6 digunakan untuk judul dan heading lainnya, p
adalah tag paragraf untuk artikel, div adalah tag element atau tag
pengatur layout, span adalah tag yang hampir sama dengan div namun
digunakan untuk text dalam artikel, article adalah tag untuk
mengelompokkan tag-tag lain sehingga berbentuk sebuah artikel bukan
semua seperti tag main, section juga hampir sama dengan tag article, b
dan strong adalah tag untuk membesarkan text, i dan em adalah tag
untuk memiringkan text, small adalah tag untuk mengecilkan text, code
dan pre digunakan untuk menulis kode program komputer, s dan del
untuk menggaris tengah text, u untuk mengaris bawahi text, sup adalah
text atas text, sub adalah text dibawah text dan sup dan sub sering
digunakan untuk pembuatan rumus, blockquote adalah tag untuk
menulis kutipan atau kesimpulan, a adalah tag untuk membuat link yang
ada atributnya href, br adalah tag untuk baris baru, hr adalah garis
5
-
Copyleft 2014 by T. Ghazali
pemisah atau separator, kbd adalah tag input keyboard, time adalah tag
untuk penulisan waktu, wbr adalah tag untuk pemenggalan text yang
panjang, aside adalah cara kerjanya hampir sama dengan article atau
section, ins adalah tag penambahan dalam artikel, var adalah tag untuk
variabel, samp adalah tag untuk sampel data, cite adalah tag untuk judul
yang menonjok, abbr adalah penanda dari text tersebut atau komen text,
mark adalah tanda berwarna pada text, ruby, rt dan rp merupakan
penulisan syntax ruby, bdi dan bdo adalah penulisan align format text,
dfn adalah tag definisi, address, details dan summary adalah text pada
kaki atau untuk text kecil yang menandakan alamat atau detail riwayat, tt
adalah tag teletype, dan q adalah tag blok ringan.
6
-
Copyleft 2014 by T. Ghazali
BAB 3 LIST MENU ATAU NAVIGASI
List menu atau navigasi adalah sebuah elemen yang digunakan
untuk perpindahan halaman selain itu sangat membantu seseorang dalam
mencari informasi terkait. Letak list menu berada pada atas disebut menu
navigasi atau navbar sedangkan list menu yang ada disamping baik kiri
atau kanan maka disebut sidebar. List menu merupakan hal yang harus ada
dalam sebuah blog maupun sebuah aplikasi website.
Untuk membuat list menu ini maka diperlukan tag-tag seperti ul, ol,
li, a, menu, menuitem, nav, dl, dt, dan dd. Tag-tag ini yang akan
menciptakan sebuah menu navigasi atau list menu, untuk lebih jelas ikuti
langkah-langkah dibawah ini.
1. Buat dokumen html baru dengan nama listmenu.html atau
terserah anda dan isi dengan tag awal penulisan html
2. Penulisan tag ul seperti dibawah ini
... ...
3. Penulisan tag ol seperti dibawah ini
... ...
4. Penulisan tag nav seperti dibawah ini
... ...
5. Penulisan tag menu seperti dibawah ini
... ...
7
-
Copyleft 2014 by T. Ghazali
6. Penulisan tag dl, dt, dan dd seperti dibawah ini
...
... ...
...
7. Penggabungan semua tag-tag yang ada diatas menjadi sebuah
dokumen dalam dokumen listmenu.html
Beranda Artikel Unduh Tentang Hubungi
8. Selesai, simpan dan jalankan lewat browser
Penjelasan: ul adalah unordered list yang berbentuk bullet, ol adalah
ordered list yang berbentuk angka baik arab atau romawi, li adalah list
item yang digunakan pada ul atau ol, nav merupakan navigasi beserta
dengan a, a adalah tautan page atau alamat halaman, menu adalah tag
untuk menu icon (kebanyakan digunakan untuk menampilkan icon twitter,
facebook atau google+) beserta dengan menuitem, menuitem
merupakan menu yang digunakan untuk icon namun fungsinya sama
seperti tag menu lainnya, dl adalah description list untuk penulisan
deskripsi dan biasa digunakan untuk komentar atau pesan, dt adalah
description title merupakan judul deskripsi, dan dd adalah description
description merupakan isi dari deskripsi.
8
-
Copyleft 2014 by T. Ghazali
BAB 4 FORMULIR DATA
Formulir data adalah form yang digunakan untuk penginputan dan
pegoutputan dengan mengunakan tombol, formulir ini digunakan pada
aplikasi login sistem, aplikasi crud sistem, aplikasi register dan lain-lain.
Biasanya digunakan bersamaan dengan bahasa scripting side server
seperti PHP, JSP, ASP.NET dan Perl hanya untuk mengirim data atau
memanggil data.
Formulir data mempunyai beberapa tag, value/nilai dan atribut, tag-
tag tersebut adalah form, fieldset, legend, label, input, output,
datalist, select, option, optgroup, keygen, textarea, progress, meter
dan button sedangkan atributnya adalah action, method, for, type,
required, placeholder, maxlenght, cols, multiple, checked, value,
dan rows sedangkan value/nilai adalah text, post, get, email, url, tel,
file, number, search, date, progress, submit, button, reset, radio,
dan checkbox, untuk lebih jelas langsung ikuti langkah berikut ini.
1. Buat dokumen baru dengan nama formulir.html dan tambahkan tag
penulisan awal html kedalamnya
2. Penulisan untuk tag form adalah sebagai berikut
...
3. Penulisan untuk tag fieldset dan legend adalah sebagai berikut
... ...
4. Penulisan untuk tag Input dan keygen adalah sebagai berikut
9
-
Copyleft 2014 by T. Ghazali
5. Penulisan untuk tag datalist adalah sebagai berikut
6. Penulisan untuk tag radio dan checkbox adalah sebagai berikut
radio 1 radio 2 radio 3
cek 1 cek 2 cek 3
7. Penulisan untuk tag textarea adalah sebagai berikut
...
8. Penulisan untuk tag select adalah sebagai berikut
atau
satuduatiga
satu duadua duatiga dua
9. Penulisan untuk tag button adalah sebagai berikut
simpanatau ganti submit/button menjadi submit atau button atau reset
10. Penulisan untuk tag output adalah sebagai berikut
11. Penulisan untuk tag datalist adalah sebagai berikut
2 out of 1060%
12. Penulisan untuk tag progress adalah sebagai berikut
10
-
Copyleft 2014 by T. Ghazali
13. Selanjutnya adalah menggabungkan tag-tag yang ada diatas
menjadi seperti dibawah ini
Formulir Area Text Area
14. Selesai, simpan dan jalankan
Penjelasan: form adalah tag yang mencerminkan atau yang mendeteksi
bahwa itu form data, fieldset dan legend merupakan garis disamping
form atau disisi form beserta label dari legend, label adalah text untuk
input yang akan digunakan, input merupakan form data input untuk
memasukkan data, output adalah hasil dari input biasanya digunakan pada
aplikasi menghitung, select adalah combobox sedangkan jika memakai
atribut multiple maka select berbentuk listbox, option dan optgroup
adalah opsi atau list data untuk tag select, textarea adalah text edit yang
digunakan untuk text besar semacam artikel, progress adalah alur yang
berjalan sampai 100% dan kebiasaan untuk menuggu baik data atau lain,
datalist adalah pilihan data seperti select tetapi menggunakan input,
meter adalah tag untuk menentukan ukuran seperti progress, keygen
merupakan input security atau keamanan dan button adalah tombol klik
yang digunakan untuk mengeksekusi form data tersebut.
11
-
Copyleft 2014 by T. Ghazali
BAB 5 TABEL DATA
Tabel data merupakan tempat dimana data dikumpulkan dalam
tempat berkolom-kolom yang dipisahkan dengan garis perkolom dan baris.
Tabel data banyak digunakan pada aplikasi CRUD (Create, Read, Update,
Delete) dan aplikasi laporan baik html maupun pdf. Ada beberapa tag html
yang digunakan untuk membuat tabel data adalah table, thead, tbody,
tfoot, tr, th, caption, colgroup, dialog, col dan td. Untuk menampakkan
garis maka memerlukan syntax CSS yang akan penulis bahas pada buku css
selanjutnya. Untuk melihat atau mempraktekkan maka ikuti langkah-
langkah seperti berikut:
1. Buat dokumen html seperti biasanya
2. Buat tag-tag dasar dari penulisan html
3. Pembuatan tag table sebagai awal dari tabel data
...
atau
Penggunaan HTML 4 adalah ...
4. Pembuatan tag caption sebagai judul dari tabel data
Tabel Biodata
5. Pembuatan tag col dan tag colgroup sebagai awal dari kolom
6. Penulisan tag thead untuk kepala tabel, tag tbody untuk body
tabel dan tag tfoot untuk kaki tabel seperti dibawah ini
... ... ...
7. Penulisan tag tr untuk garis, th untuk kolom kepala, td untuk kolom
12
-
Copyleft 2014 by T. Ghazali
biasa dan tag dialog untuk open popup seperti dibawah ini
... ... ...
... ...
8. Setelah semua tag tabel data, sekarang akan digabungkan kedalam
file dokumen html tadi seperti tag-tag dibawah ini
Tabel Biodata
ID Nama Email
8765444 T. Ghazali [email protected]
87654675 Amru [email protected]
ID Nama Email
9. Selesai, simpan dan jalankan
13
-
Copyleft 2014 by T. Ghazali
Penjelasan: table adalah tag pembukaan tabel data, caption adalah judul
tabel data, thead adalah tag yang mengambarkan bahwa baris tersebut
adalah kepala tabel data, tbody merupakan tag untuk kolom body, tfoot
adalah kaki dari tabel tersebut, tr adalah baris beserta garis, th adalah
kolom kepala tabel data beserta garis, col dan colgroup merupakan
pengaturan kolom tabel data, dialog adalah cuma open popup dan td
adalah kolom body beserta garis.
14
-
Copyleft 2014 by T. Ghazali
BAB 6 MULTIMEDIA
Multimedia adalah bentuk media untuk menyampaikan dalam
bentuk digital dan bisa juga dalam bentuk analog, namun multimedia bisa
dikenal dalam handphone untuk menampilkan video, audio, gambar dan
dokumen atau biasa juga disebut video player, audio player dan gambar
viewer. Adapun tag-tag untuk membuat multimedia adalah video, audio,
source, track, object, param, embed dan iframe, untuk atribut juga
digunakan antara lain adalah width, height, controls, autoplay, src,
type, data, name, value, kind, srclang dan label, untuk format file yang
didukung adalah mp4, mp3, ogg, ogv, oga, webm, wav, vtt, swf dan
java/jar. Untuk mengetahui lebih lanjut silahkan ikuti langkah-langkah
seperti berikut ini:
1. Buat dokumen html baru seperti biasanya
2. Isikan penulisan tag awal dari html pada bab 1
3. Pembuatan video player seperti dibawah ini
4. Pembuatan audio player seperti dibawah ini
Your browser does not support the audio tag.
5. Pembuatan object player/aplikasi object seperti dibawah ini
15
-
Copyleft 2014 by T. Ghazali
6. Pembuatan player/aplikasi dengan embed atau iframe seperti
dibawah ini
7. Buka dokumen yang dibuat tadi dan tambahkan tag-tag yang ada
dibawah ini kedalam dokumen tersebut
8. Selesai, simpan dan jalankan
Penjelasan: video adalah tag untuk video player, audio adalah tag untuk
audio player, source adalah data atau file video/audio tersebut, track
adalah kumpulan video/audio yang sudah dikumpulkan, embed adalah
penanaman object, object adalah bentuk dari data atau file atau kode
program atau animasi shockwave dan iframe adalah page dalam page
atau bisa digunakan untuk menampilkan dokumen pdf atau html.
16
-
Copyleft 2014 by T. Ghazali
BAB 7 GAMBAR
Gambar adalah replika atau foto atau draw dengan komputer
merupakan sesuatu yang memang harus ada dalam sebuah website,
gambar banyak digunakan untuk background, list style dan foto profil
sekaligus pembuatan status atau artikel berfoto. Untuk tag-tag yang
digunakan untuk gambar adalah img, figure, figcaption, area, map dan
canvas. Untuk bisa mepraktekkannya bisa dilihat seperti dibawah ini:
1. Buat dokumen html baru seperti biasanya
2. Penulisan tag figure adalah sebagai berikut
...
3. Penulisan tag img dan tag figcaption adalah sebagai berikut
Gambar 1 belajar menggambar
4. Penulisan tag map dan tag area adalah sebagai berikut
5. Penulisan tag canvas adalah sebagai berikut
6. Untuk syntax parkteknya bisa dilihat seperti dibawah ini
17
-
Copyleft 2014 by T. Ghazali
Gambar 1.1 Gunung Berbatu
7. Selesai, simpan dan jalankan
Penjelasan: figure merupakan lingkaran dari yang menyatakan bahwa itu
tempatnya gambar, img merupakan tag untuk menampilkan gambar,
ficaption adalah judul dari gambar tersebut, map adalah pembuatan map
berdasarkan gambar, area adalah latitude dan longitude yang
menentukan koordinat pada gambar tersebut yang telah terkonek ke map
dan canvas merupakan tempat untuk menggambar dan harus
digabungkan dengan javascript untuk menjalankan.
18
-
Copyleft 2014 by T. Ghazali
BAB 8 CONTROLLER
Controller yang dimaksud adalah tag-tag yang ada dalam atau
antara pembuka head dan penutup head, tag-tag ini berfungsi sebagai
pengontrol dokumen html tersebut. Adapun tag-tag ini adalah meta,
title, link, style, base, noscript dan script. Untuk contoh silahkan lihat
penulisan tag dibawah ini.
Judul
atau atribut
tidak didukung browser
Penjelasan: meta adalah tag untuk mendefinisikan dokumen tersebut
dengan mempunyai name yang banyak jadi tidak saya jelaskan disini, title
merupakan judul dari dokumen html tersebut, link adalah untuk
perkoneksian dari luar ke dalam dokumen baik css maupun icon, style
adalah wadah untuk penulisan sintax css, script merupakan wadah untuk
menulis sintax javascript dan base adalah url dasar dari dokumen html
tersebut.
19
-
Copyleft 2014 by T. Ghazali
BAB 9 LAYOUT HTML5
Layout html5 disini merupakan tata cara penulisan untuk
membangun page dalam bentuk sebuah halaman html5, adapun tag-tag
yang digunakan adalah header, section, nav, main, article, aside dan
footer. Untuk script full bisa lihat dibawah ini.
... ...
... ...
... ... ...
... ...
...
Penjelasan: header adalah kepala dari halaman yang ditampilkan, nav
adalah navigasi menu atas, section adalah bagian samping yang
ditayangkan, aside merupakan menu sidebar, main adalah tempat dimana
postingan konten, article adalah artikel posting atau konten posting dan
footer adalah bagian kaki beserta summary sebagai textnya.
20
BAB 1 PENGENALAN HTMLBAB 2 Konten ArtikelBAB 3 List Menu atau NavigasiBAB 4 Formulir DataBAB 5 TABEL DATABAB 6 MultimediaBAB 7 GambarBAB 8 ControllerBAB 9 Layout HTML5