cara cepat kuasai html

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


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


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


... ...

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


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


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


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


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


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


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


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


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


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


13


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


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


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


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


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


Gambar 1.1 Gunung Berbatu


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


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


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

cara cepat kuasai html

Documents