Hai Semua semoga
dalam keadaan sehat walafiat, saya mau berbagi sedikit
tentang HTML, dimana tutorial ini agar bisa berguna untuk yang lainnya.
Google Chrome
Google
Chrome adalah web browser besutan Google yang memiliki beberapa keunggulan.
Chrome bisa dikatakan browser yang sangat ringan, cepat2 dan kaya akan
aplikasi/Add-on. Selain itu Chrome menggunakan engine3 Webkit, engine browser
yang rata-rata mendukung fitur-fitur terbaru dari teknologi HTML dan CSS. Anda
dapat mendownloadnya di http://google.com/chrome.
Notepad++
Tersedia untuk Windows, Notepad++ memiliki beragam fitur yang sangat mendukung
para programmer. Kemampuannya untuk memperkaya diri dengan pluginpun menjadi
kelebihan lainnya dengan text editor sejenisnya.
Anda
dapat mendownload Notepad++ di http://notepad-plus-plus.org
Dan
masih banyak program-program untuk anda belajar HTML, CSS dan Java Script.
Disini
saya menggunakan Notepad ++ karna lebih mudah dan ringan.
Jika
anda ingin mengecek sebuah akan kita gunakan untuk memeriksa kode HTML dari
setiap halaman web, melihat CSS yang digunakan dan untuk menguji script
javascript.
Disini
saya menggunakan Google Crome
1. APAKAH
HTML ITU?
Sedikit
pengenalan tentang HTML , mari langsung saja anda baca dan pahami baik-baik
HALAMAN
web yang sering anda buka, seperti facebook.com, twitter.com, google.com dan
lain sebagainya ditampilkan dengan menggunakan HTML. Jadi bisa dikatakan HTML
adalah bahasa dasar untuk menampilkan halaman web pada web browser.
Buka
Web browser anda lalu bukalah sebuah situs, http://www.google.com misalnya.
1.
Lalu klik kanan di sembarang area, dan pilih “Inspect element”
(menu paling akhir)
Baris
pertama pasti diawali dengan <!DOCTYPE HTML>, ini
menandakan bahwa dokumen yang sedang anda buka saat ini adalah HTML. Begitu
juga dengan baris kedua : <HTML>, kode
tersebut menandakan bahkan kode-kode yang ditulis di dalamnya adalah kode HTML.
Jika
anda ingin tahu kepanjangan HTML, HTML adalah kependekan dari Hypertext Markup
Language. Artinya
adalah bahasa markup (penanda) berbasis text atau bisa juga disebutsebagai
formatting language (bahasa untuk memformat), Jadi sudah jelas bahwa HTML bukanlah bahasa pemrograman,
melainkan bahasa markup/formatting.
Yang
sering anda temui dalam sebuah website adalah link. Link ini akan membuat
konten atau elemen HTML4 dapat di klik dan akan
mengarahkan/membawa anda ke halaman web lainnya. Biasanya suatu link
ditampilkan berwarna biru dan bergaris bawah (selama belum diberi style).
2. Membuat
Website dalam 1 Menit
Sudah
siap membuat website? Kita mulai membuat website hanya dalam 1 menit!
1.
Bukalah Notepad (All Programs > Accessories > Notepad)
2.
Ketikkan teks berikut :
Belajar Web Pertama Saya
Belajar Web Pertama Saya
3. jika
adan sudah buat kemudian anda Pilih menu File > Save As
4.
Beri nama ‚latihan1.html‛ (tanpa tanda kutip)
5.
Pada bagian Save as type, pilih All Files (*.*) Lalu klik tombol save.
6.
Sekarang klik dua kali file HTML yang telah anda buat, (atau Klik dan Drag ke
Web Browser anda, disini saya menggunakan Google Chrome)
Lihat
gambar ini
2. Pengenalan Tag HTML
Seperti
yang saya sebutkan sebelumnya, bahwa HTML adalah bahasa Markup, artinya bahasa
HTML hanya digunakan untuk me-markup suatu dokumen. Sebagai
penyederhanaan kita analogikan dengan pembuatan dokumen di Microsoft Word atau
aplikasi Word Processing lainnya.
Ketika
membuat sebuah dokumen word, biasanya kita melakukan formatting pada
teks. seperti menebalkan teks, memiringkan, memberi garis bawah, Membuat
Penjudulan (Heading), membuat list (Daftar)
dan lain sebagainya. Pada HTML, formatting ini
bisa kita sebut dengan Proses Markup dan
akan dilakukan dengan menggunakan tag HTML.
Misalnya,
untuk mem-format suatu teks menjadimiring kita tambahkan tag <em>atau
<i> . Edit file sebelumnya, menjadi seperti berikut :
Belajar
web<em>untuk<em>pertama
Dan
ketika dibuka kembali pada browser, anda dapat melihat kata pertama menjadi miring.
<em> .. </em> disebut
dengan Tag HTML, yang digunakan untuk me-markup(memformat) dokumen HTML.
Perhatikan bahwa setiap tag memiliki pasangan yakni tag penutupnya.
Artinya
hanya teks yang berada di dalam tag tersebut yang akan diberi format miring.
Tag penutup ditandai dengan penambahan tanda slash (/) sebelum nama tagnya. Berikut ini
adalah anatomi dari tag HTML :
<namatag
atribut=‚nilai Atribut‛>
Isi atau Konten
</namatag>
Setiap
tag HTML bisa menjadi “isi” dari tag HTML lainnya, untuk membuat suatu hierarki
dari dokumen HTML.
Dalam
setiap tag HTML bisa disisipkan berbagai atribut yang berfungsi untuk menampung
informasi-informasi tertentu, misalnya atribut id dan class yang berfungsi
untuk memberi nama suatu tag sebagai referensi CSS atau javascript nantinya.
Sekarang
bagaimana jika teks yang dimiringkan tersebut ingin kita tebalkan? Untuk
menebalkan teks anda dapat menggunakan tag <strong>atau<b>, menjadi seperti berikut:
Belajar web<strong><em>untuk<em></strong>pertama
3. Struktur file HTML
Suatu
dokumen HTML juga mempunyai aturan dalam penulisannya, ada beberapa tag yang
harus anda tuliskan dan sudah menjadi ketentuan. Jika kita perbaiki latihan
kita sebelumnya menjadi dokumen HTML yang benar maka kodenya menjadi seperti
berikut:
<!DOCTYPE
HTML>
<HTML>
<head>
<title>Judul
File HTML</title>
</head>
<body>
Website
<strong><em>pertama</em></strong> saya
</body>
</HTML>
Anda
simpan dengan langkah seperti diawal dan lihat perubahan garis miring yang kita
buat diatas.
Anda
Bingung? Tenang, saya jelaskan tiap baris kode tersebut.
<!DOCTYPE HTML>
Adalah
Tag awal dari setiap dokumen HTML, tag ini berfungsi untuk menginformasikan
pada browser bahwa dokumen yang sedang dibuka adalah dokumen HTML. Tag ini
perlu dicantumkan disetiap dokumen HTML yang akan anda buat.
<HTML> … </HTML>
Awal
dari isi dokumen HTML dimulai dari sini, semua kode HTML yang akan anda buat
akan ditulis di dalam tag ini, perhatikan juga bahwa setiap tag harus memiliki
tag penutup.
<head> … <head>
Tag
Head akan digunakan untuk menyimpan berbagai informasi tentang dokumen HTML,
lebih detailnya akan kita temui pada bab selanjutnya. Apa yang terdapat di
dalam tag ini, tidak akan ditampilkan secara langsung pada web browser.
<title> … </title>
Salah
satu contoh informasi yang terdapat di dalam tag Head adalah title. Title akan
menampilkan teks pada judul browser atau pada tab browser.
<body> … </body>
Nah, apa yang ingin anda tampilkan
pada browser akan ditulis di dalam tag ini, tag body merupakan tag pembuka dari
badan dokumen HTML.
Mudah
dimengerti bukan? Lalu apakah penulisan tag-tag HTML
harus seperti contoh di atas? Seperti penambahan tab/indentasi pada
setiap tag?. Sebenarnya Anda bisa saja menuliskan kode HTML seperti ini :
<!DOCTYPE HTML><HTML><head><title>Judul File
HTML</title></head><body>Belajar web <i>untuk</i>
pertama</body></HTML>
Dan
yang anda dapatkan dalam browserpun sama, namun anda akan kesulitan membaca
dokumen HTML tersebut. Kalau saja dokumen HTML yang anda buat hanya
10
baris mungkin hal ini tidak akan menjadi masalah, namun bagaimana jika 1000
baris? Nah loh?!
Untuk
itu kita menambahkan indentasi, disetiap isi (konten)dari suatu tag. Misalnya :
<head>
<title>Judul File HTML</title> </head>
Ini
menandakan bahwa tag title berada di dalam tag head. Selain itu kita juga bisa
mengontrol, apakah suatu tag sudah ditutup atau belum.
4. Memuat
Gambar
Setelah
anda mengetahui struktur dari sebuah file HTML dan
apa saja yang harus ditulis pertama kali. Selanjutnya saya akan mengajak anda
untuk mempelajari cara memuat/menampilkan sebuah gambar dan memahami apa itu
atribut HTML.
Untuk
memuat sebuah gambar pada dokumen HTML, kita akan menggunakan tag <img>. Lalu dimana kita meletakkan
gambar tersebut? Di dalam tag <img> kah?
3.1.
Mengenal Atribut HTML
Setiap
tag HTML dapat memiliki satu atau lebih atribut, atribut ini berfungsi untuk
menyimpan informasi yang berkaitan dengan tag tersebut.
Pada
tag <img>
kita akan
menggunakan atribut src untuk menyimpan lokasi gambar :
<img src>
Selanjutnya
untuk memasukkan nilai pada atribut, kita gunakan operator sama dengan (=)
diikuti dengan lokasi gambar yang diapit oleh tanda kutip.
<img src=‚gambar.jpg‛>
Tag
img termasuk ke dalam tag spesial dan tidak memiliki tag penutup (Disebut juga
sebagai Self Closed Tag), seperti tag-tag lainnya. Ini dikarenakan tag ini
tidak memiliki konten seperti :
<title>Ini adalah Konten tag title</title>
Sebagai
pengganti, kita tambahkan tanda slash (/) sebelum kurung tutup :
<img src=‚gambar.jpg‛ />
Mari Kita Praktekan
1. Buat Latihan 2.html di Nodpad++
2. Setelah anda buat kemudian anda simpan dengan buat folder baru anda
3. Cari gambar yang anda inginkan lalu anda simpan dalam satu folder
1. Buat Latihan 2.html di Nodpad++
2. Setelah anda buat kemudian anda simpan dengan buat folder baru anda
3. Cari gambar yang anda inginkan lalu anda simpan dalam satu folder
4. Lihat
gambar yang ada dalam folder
Gambar 1. Dari
file dikomputer saya
Gambar 2. Saya
ambil dari Web,
Kemudian
anda ketik html
<!Doctype HTML>
<HTML>
<head>
<title>Judul
Belajar Web Pertama Saya</Title>
</Head>
<body>
<p> <b>Ini
adalah gambar yang saya upload HTML</b> <p>
<img src="bagian
template.png" "alt=alternatif gambar" width=200 height=100 />
<img
src="images.jpg" "alt=alternatif gambar" width=200
height=100 />
<imgsrc="https://4.bp.blogspot.com/3iPpk8bmqEc/VyIAV_G_rII/AAAAAAAADEY/57nFM78TzwA7vL5vvxW6pVQOwjiXMwhiQCLcB/s72-c/20150607_112753.jpg"
alt="logo" />
</Body>
<HTML>
a. Tanda panah satu, nama file name foto
yang didalam folder
b. Tanda
panah dua , nama file juga tapi saya ambil langsung dari web
c. Tanda
Panah tiga , adalah untuk mengatur ukuran gambar
Ini gambar hasilnya
Ini gambar hasilnya
Oke sampai sini dulu ya
semoga anda mengerti dengan yang saya jelaskan. Tinggal anda mengembangkan.
Tapi ingat ini hanya sebagai langkah awal mengenal HTML, masih banyak dan
banyak lagi yang lainya.
Tunggu pelajaran selanjutnya
dari saya.
Semoga Bermanfaat
