Belajar HTML Dasar

HTML

Singkatan dari HyperText Markup Language yaitu bahasa pemrograman standar yang digunakan untuk membuat suatu halaman web yang kemudian dapat diakses untuk menampilkan berbagai konten yang dimuat halaman web tersebut. HTML juga dapat digunakan sebagai link atar situs ataupun file yang dapat dihubungkan langsung ke jaringan internet maupun jaringan localhost.

HTML menggunakan kode-kode tertentu (tag) untuk menyatakan konten yang akan diterjemahkan oleh browser agar halaman yang diakses menampilkan konten yang sesuai dengan tag yang telah dibuat, contohnya jenis, ukuran dan warna huruf.

jadi, fungsi utama HTML adalah :

1. Membuat halaman web

2. Menampilkan berbagai konten dalam sebuah browser

3. Membuat Link menuju halaman web atau file lain menggunakan kode tertentu

Struktur Penulisan HTML

Tidak case sensitive, artinya penulisan huruf besar ataupun kecil dalam script HTML sama saja dan tidak menjadi masalah.
Penulisan dibatasi oleh tag (penanda) yang diberi lambang <…> dan diakhiri atau ditutup dengan lambing </…> isi titik-titik adalah tag yang dikenal dalam HTML, namun terdapat pula tag yang tidak perlu ditutup dengan </…>.

Contoh dari struktur penulisan HTML adalah sebagai berikut :

jika di tampikan dalam browser, maka HTML di atas akan terlihat seperti ini :

Dari contoh struktur penulisan HTML diatas, terdapat tag-tag HTML diantarany

<html>

Setiap dokumen html biasanya diawali dan diakhiri dengan tag HTML, yang berfungsi untuk memberi tahu browser bahwa didalam tag tersebut terdapat dokumen HTML.

<head>

Merupakan tempat disimpannya bagian header dari suatu website, header juga memuat tag meta yang biasa digunakan untuk menemukan informasi tertentu mengenai dokumen HTML.

<title>

Digunakan untuk menyimpan judul dari halaman suatu website yang nantinya akan ditampilkan pada titlebar browser, perhatikan titlebar pada contoh gambar.

<body>

Seperti namanya, tagini merupakan tubuh dari suatu halaman web. Digunakan untuk meletakan content (text, gambar, link) dan semua yang hendak ditampilkan pada webpage atau halaman suatu website.

Setiap tag biasanya merupakan suatu pasangan yang disebut dengan :

tag awal, dinyatakan dengan bentuk <namaTag>

tag akhir , dinyatakan dengan bentuk </namaTag> (terdapat tanda slash)

formatnya : <namaTag>konten yang akan ditampilkan</namaTag>, seperti contoh yang telah kita lihat di atas

<title>Mari Belajar Pemrograman Web</title>

Gampang kan, nah.. selain itu, setiap tag juga memiliki atribut.

Atribut

Apa itu atribut ? mari ubah skrip latih1 menjadi seperti berikut.

Setelah skrip disimpan dan di panggil melalui browser maka akan terlihat seperti ini

Ada perbedaan dengan skrip sebelumnya kan.? Yup.. warna teksnya berubah dari hitam menjadi biru, itu karena kita menambahkan atribut pada tag <body>, adapun aturan penulisan atribut adalah :

Mengatur Latar Belakang Website

Selain merubah warna teks, kita juga bisa merubah warna latar belakang dengan menggunakan atribur pada tag <body> seperti ini

Dan hasilnya jadi seperti berikut :

Tentunya nilai atribut bisa disesuaikan dengan keinginan kita, untuk warna contohnya, kita bisa menuliskannya langsung dengan teks (dalam bahasa inggris) atau bisa juga denga menuliskan kode warna yang di tulis dengan format heksa #000000, untuk contoh di atas kita bisa mengganti nilai atribut dengan #0000FF untuk warna biru, jadi kodenya seperti ini

Berikut ini 16 warna dalam bentuk kode dengan format heksa :

Black	#000000	White	#FFFFFF	Red	#FF0000
Blue	#0000FF	Yellow	#FFFF00	Gray	#808080
Green	#008000	Lime	#00FF00	Navy	#000080
Aqua	#00FFFF	Fuchsia	#FF00FF	Maroon	#800000
Orange	#FFA500	Olive	#808000	Purple	#800080
Teal	#008080	Silver	#C0C0C0

Mengubah Latar Belakang Website Dengan Gambar

Naah.. pada contoh di atas latar belakang web kan pake warna, terus kalo mau pake gambar bisa gak ya.? Bisa banget tentunya. Kita tinggal ubah lagi atribut tag <body> nya menjadi :

Dengan catatan gambar (dalam contoh ini corefight.jpg) bedara satu folder dengan file html yang menggunakan gambar tersebut sebagai background nya, kita bisa salin manual gambar yang ingin di pakai kedalam folder yang berisi file html yang akan mengunakan gambar tersebut, mmmhhh.. agak ribet ya.. tapi kalau kita menggunakan editor sekelas Adobe Dreamweaver tentu tidak perlu repot-repot seperti itu, karena saat kita menuliskan atribut pada tag, kita langsung disuguhkan menu browse, seperti berikut

Dengan menekan enter atau mengklik menu Browse, kita tinggal memilih gambar yang akan di pakai dan jika gambar yang kita pilih berada pada folder yang berbeda dengan file html yang kita buat maka akan muncul pesan seperti ini :

dengan meng-klik "Yes" maka gambar yang kita pilih akan otomatis tersalin ke folder tempat disimpannya file html yang kita buat. Gak peke repot kaan.. dan hasilnya pun akan jadi seperti :

Sepertinya sekian dulu perkenalan kita mengenai HTML serta tag tag yang dapat kita gunakan didalamnya. Semoga bermanfaat.

Sabtu, 25 Maret 2017