Selamat datang sobat di LepiDot.com setelah kemarin hanya membahas tentang review smartphone kali ini akan membahas lebih beda yaitu belajar tentang HTML, apa itu HTML mari kita lihat pembahasan berikut ini.
Apa Itu HTML ?
Fungsi HTML yang lebih spesifik yaitu :
- Membuat halaman web.
- Menampilkan berbagai informasi di dalam sebuah browser Internet.
- Membuat link menuju halaman web lain dengan kode tertentu (hypertext).
Perkembangan HTML
Didalam HTML telah
mengalami berbagai perkembangan dari tiap-tiap versinya. Berikut adalah
versi-versi dari perkembangan HTML tersebut:Html versi 1.0
Html versi 1.0
HTML Versi 1.0 merupakan
pionir yang di dalamnya masih terdapat banyak sekali kelemahan hingga wajar
jika tampilan yang dihasilkan sangat sederhana. Kemampuan yang dimiliki versi
1.0 ini antara lain heading, paragraf, hypertext, list, serta cetak tebal dan
miring pada teks. Versi ini juga mendukung peletakan image pada dokumennya
tanpa memperbolehkan teks di sekelilingnya (wraping).
Html versi 2.0
Pada HTML Versi ini,
penambahan kualitas HTML terletak pada kemampuannya untuk menampilkan suatu
form pada dokumen. Dengan adanya form ini, kita dapat memasukkan nama, alamat,
serta saran dan kritik. HTML versi 2.0 ini merupakan pionir dari adanya web
interaktif.
Html versi 3.0
Versi HTML 3.0 menambahkan
beberapa fasilitas baru seperti FIGURE yang merupakan perkembangan dari IMAGE
untuk meletakkan gambar dan tabel. Selain itu, HTML ini juga mendukung adanya
rumus-rumus matematika dalam dokumennya. Versi ini yang disebut HTML+- tidak
bertahan lama dan segera digantikan dengan versi 3.2.
Html versi 3.2
HTML versi ini merupakan
HTML yang sering digunakan. Di dalamnya terdapat suatu teknologi untuk
meletakkan teks di sekeliling gambar, gambar sebagai latar belakang, tabel,
frame, style sheet dan lain-lain. Selain itu pada HTML versi ini Kita bisa
menggunakan script di luar HTML untuk mendukung kinerja HTML kita tersebut,
seperti Javascript, VBScript dan lain-lain.
Html versi 4
HTML ini memuat banyak
sekali perubahan dan revisi dari pendahulunya yaitu HTML 3.2. Perubahan ini
hampir terjadi di segala perintah HTML seperti tabel, image, link, text, meta,
imagemaps, form dan lain-lain.
Html versi 4.01
HTML versi 4.01 merupakan
revisi dari HTML 4.0. Versi terbaru ini memperbaiki kesalahan-kesalahan kecil
(minor errors) pada versi terdahulunya. HTML 4.01 ini juga menjadi standarisasi
untuk elemen dan atribut dari script XHTML 1.0.
Html versi 5
Teknologi ini mulai
diluncurkan pada tahun 2009, tetapi pada tanggal 4 Maret 2010 terdapat sebuah
informasi bahwa W3C (World Wide Web Consortium) dan IETF (Internet Engineering
Task Force) yaitu sebuah organisasi yang menangani HTML sejak versi 2.0 telah mengmbangkan
versi HTML terbaru, yaitu versi 5.0.
HTML 5 adalah sebuah
prosedur pembuatan tampilan web baru yang merupakan penggabungan antara CSS,
HTML itu sendiri dengan JavaScript.
Perlu diperhatikan, HTML bukanlah sebuah bahasa pemrograman. HTML
merupakan bahasa markup yang berisi perintah-perintah dengan format tertentu
yang terstruktur untuk menampilkan tampilan tertentu.
Untuk menulis kode HTML kita bisa menggunakan software code editor
seperti Notepad, Notepad++, Sublime Text, Atom, atau yang lainnya. Dan agar
kode kita mampu dibaca oleh browser dengan baik kita harus menyimpannya dalam
format HTML yaitu .htm atau .html.
Berikut ini contoh sederhana penulisan kode HTML:
Untuk memulai menulis kode
HTML maka kita harus memulainya dengan kode <html> dan ditutup dengan
</html>. Adapun mengenai kode <!DOCTYPE HTML> itu berfungsi sebagai
pengenal HTML5.
Kode-kode yang ada di antara <head> dan </head>
berfungsi untuk memberikan informasi tambahan kepada browser, untuk contoh di
atas misalnya ada <title> yang artinya memberikan informasi ke browser
bahwa halaman web yang dibuat ini memiliki judul Selamat Datang HTML.
Apa yang ingin kita tampilkan pada browser terletak di antara kode
<body> dan </body>. Itulah inti dari kode. Disitulah
kode-kode yang akan menyusun halaman web ditulis.
ada dua hal lainnya terkait HTML yang harus dipahami untuk memulai
belajar HTML, yaitu TAG dan Atribut.
TAG ?
Tag sederhananya adalah kode-kode tertentu yang menjadi pengenal
bahwa kode tersebut adalah HTML dan bisa diterjemahkan oleh browser dengan
tampilan tertentu. Misalnya tadi, untuk membuat sebuah tulisan tebal, maka kita
bisa menggunakan TAG STRONG, atau TAG B. Untuk membuat paragraf kita bisa
menggunakan TAG P. Dan masih banyak TAG HTML lainnya, tentunya dengan fungsi
yang berbeda-beda. Tag <i>
memberikan perintah kepada browser untuk menampilkan text secara garis miring
(i, singkatan dari italic), dan tag <b> untuk menebalkan tulisan (b,
singkatan dari bold).
Pengertian Element dalam HTML
Element adalah isi dari tag yang berada diantara tag pembuka dan
tag penutup, termasuk tag itu sendiri dan atribut yang dimilikinya (jika ada).
Sebagai contoh perhatikan kode HTML berikut:
<p> Ini adalah sebuah paragraf </p>
Pada contoh diatas, “<p>Ini adalah sebuah paragraf</p>”
merupakan element p.
Element tidak hanya berisi text, namun juga bisa tag lain.
Contoh:
<p> Ini adalah sebuah <em>paragraf</em>
</p>
Dari contoh diatas,<p> Ini adalah sebuah
<em>paragraf </em> </p> merupakan elemen p. Dalam pembahasan
atau tutorial tentang HTML, tidak jarang istilah “tag” dan “element” saling
dipertukarkan.
ATRIBUT ?
Atribut adalah karakteristik tambahan pada suatu TAG. untuk membuat
paragraf kita bisa menggunakan TAG P. Secara default paragraf yang akan
ditampilkan oleh TAG P adalah rata kiri. Tapi jika kita ingin membuatnya rata
tengah, kita bisa menambahkan atribut ALIGN dengan value CENTER ke dalam TAG P tersebut.
Setiap TAG memiliki
atributnya masing-masing tergantung bagaimana sifat dari TAG tersebut.
Dan sama seperti halnya dengan TAG, kita juga bebas menggunakan
huruf kecil atau kapital dalam menuliskan atribut di dalam HTML. HTML memiliki
banyak atribut yang beberapa diantaranya hanya cocok untuk tag tertentu saja.
Sebagai contoh, atribut “href” diatas hanya digunakan untuk tag <a> saja
(dan beberapa tag lain).
Selanjutnya cara menjalankan file HTML
Untuk memudahkan dalam mengakses file, sebaiknya buat sebuah folder
“BelajarHTML” di Drive D. Folder ini akan kita jadikan tempat seluruh halaman
HTML yang akan dibuat.
Selanjutnya, buka aplikasi Notepad++ , atau aplikasi text editor
lainnya, lalu ketik text berikut ini:
Selamat Pagi Dunia, Hello World!
Save teks diatas sebagai hello.html pada folder BelajarHTML.
Setelah itu jalankan file hello.html kita dengan cara double klik file
tersebut, atau klik kanan –> Open With –> Firefox (jika anda menggunakan
web browser firefox)
Dari percobaan ini kita dapat melihat bahwa setiap halaman HTML
harus diakhiri dengan ekstensi .html. Anda mungkin juga akan menemukan beberapa
halaman juga memiliki ekstensi .htm, ekstensi ini digunakan untuk mendukung
Windows versi lama yang masih menggunakan ekstensi 3 huruf di belakang sebuah file.
Cara Membuat Struktur Dasar HTML
Setiap halaman HTML setidaknya memiliki struktur dasar yang terdiri
dari : Tag DTD atau DOCTYPE, tag html, tag
head, dan tag body. Inilah yang merupakan struktur paling dasar dari
HTML, walaupun HTML tidak hanya berisi struktur tersebut.
Pengertian DTD atau DOCTYPE
Tag paling awal dari contoh HTML diatas adalah DTD atau DOCTYPE.
DTD adalah singkatan dari Document Type Declaration. Yang berfungsi untuk
memberi tahu kepada web browser bahwa dokumen yang akan diproses adalah HTML.
Tag <html>
Setelah DTD, tag berikutnya adalah tag <html>.
Ini adalah tag pembuka dari keseluruhan halaman web. Semua kode
HTML harus berada di dalam tag ini. Tag html dimulai dengan <html> dan
diakhiri dengan </html>
Tag <head>
Elemen pada tag <head> umumnya akan berisi berbagai definisi
halaman, seperti kode CSS, JavaScript, dan kode-kode lainnya yang tidak tampil
di browser.
Tag <title> dalam contoh kita sebelumnya digunakan untuk
menampilkan title dari sebuah halaman web.
Tag <body>
Tag <body> akan berisi semua elemen yang akan tampil dalam
halaman web, seperti paragraf, tabel, link, gambar, dll. Tag body ini ditutup
dengan </body>. Sebagian besar waktu kita dalam merancang web akan
dihabiskan di dalam tag <body> ini.
Cara Membuat Paragraf di HTML (tag p)
Tag Paragraf (<p>)
HTML menyediakan tag khusus untuk membuat paragraf. Penulisannya
menggunakan huruf p, sebagai berikut : <p>. Mari kita revisi contoh kode
HTML sebelumnya, dan menambahkan tag <p>.
Tag Break (<br>)
Cara lain untuk memisahkan kedua paragraf adalah dengan menggunakan
tag <br> (br singkatan dari break).
Tag untuk penebalan dan garis miring (<em> dan
<strong>)
Tag emphasis (penekanan) terdiri dari 2 tag, <em> untuk
emphasis, dan <strong> untuk strong emphasis.
Pada umumnya web browser akan menampilkan <em> sebagai garis
miring, dan <strong> dengan penebalan huruf.
Cara Membuat Judul (heading) di HTML
HTML menyediakan tag khusus untuk membuat judul atau di dalam HTML
lebih di kenal dengan istilah: heading. Heading dirancang terpisah dari
paragraf. Tag Heading biasanya digunakan untuk judul dari paragraf, atau bagian
dari text yang merupakan judul.
Tag heading di dalam HTML terdiri dari 6 tingkatan, yaitu
<h1>, <h2>, <h3>, <h4>, <h5>, dan <h6>. Tag
heading secara default akan ditampilkan oleh web browser dengan huruf tebal
(bold). Tampilan dari tag header juga dibuat bertingkat. Tag header <h1>
memiliki ukuran huruf paling besar, sedangkan <h6> terkecil.
<!DOCTYPE html>
<html>
<head>
<title>penggunaan tag
heading</title>
</head>
<body>
<h1>ini adalah judul
dengan h1 </h1>
<h2>ini adalah judul
dengan h2 </h2>
<h3>ini adalah judul
dengan h3 </h3>
<h4>ini adalah judul
dengan h4 </h4>
<h5>ini adalah judul
dengan h5 </h5>
<h6>ini adalah judul
dengan h6 </h6>
</body>
</html>
Biasanya dalam sebuah halaman akan ada hanya 1 tag <h1>, dan
beberapa tag <h2> dan <h3> dengan beberapa tag <p>.
Cara Membuat Daftar/List di HTML (tag ol, ul dan li)
Dalam HTML, tag list terdiri dari 2 jenis, ordered list (berurutan)
dan unordered list (tidak berurutan). Ordered list akan ditampilkan dengan
angka atau huruf, sedangkan unordered list dengan bulatan atau kotak.
Ordered list menggunakan tag <ol>, dan unordered list
menggunakan tag <ul>, sedangkan untuk list sendiri menggunakan tag
<li>.
Berikut adalah contoh kode HTML untuk membuat ordered list
menggunakan tag<ol>:
<!DOCTYPE html>
<html>
<head>
<title>penggunaan tag
list </title>
</head>
<body>
<h1>daftar
belanjaan</h1>
<ol>
<li>minyak
goreng</li>
<li>sabun
mandi</li>
<li>deterjen</li>
<li>shampoo</li>
<li>obat
nyamuk</li>
</ol>
</body>
</html>
(GAMBAR HASIL)
Untuk membuat unordered list, tinggal ganti tag <ol> menjadi <ul>.
Cara Membuat link di HTML (tag a)
Tujuan kata Hypertext dari HTML adalah membuat sebuah text yang
ketika di-klik akan pindah ke halaman lainnya. HTML menggunakan tag <a>untuk keperluan ini.
Link ditulis dengan <a> yang merupakan singkatan cari anchor
(jangkar). Setiap tag <a> setidaknya memiliki sebuah atribut href. Dimana
href berisi alamat yang dituju (href adalah singkatan dari hypertext
reference).
Alamat Absolute dan Alamat Relatif
Pada contoh diatas kita menuliskan alamat link secara lengkap dengan
bagian “http://www.”. Penulisan seperti ini disebut juga dengan external link,
yang berarti kita membuat link ke alamat lain di internet, atau lebih dikenal
dengan: alamat absolut.
Alamat absolut adalah penulisan alamat file dengan menyertakan nama
website, seperti: href=”https://www.duniailkom.com/belajar_html.html”, atau
href=”http://www.wikipedia.org”.
Namun jika kita ingin membuat link di dalam situs yang sama, maka
tidak perlu menyebutkan alamat lengkap tersebut. Tetapi cukup mencantumkan alamat
file yang dituju relatif kepada file saat ini. Jenis alamat ini disebut alamat
relatif
Sebagai contoh alamat relatif, apabila kita ingin membuat link
kepada file hello.html pada folder yang sama
dengan file saat ini, maka atribut hrefnya, berisi: href=”hello.html”.
Alamat absolute ditulis dengan lengkap, seperti
https://www.duniailkom.com, atau jika kita merujuk kepada halaman tertentu
Alamat relatif maksudnya adalah relatif kepada file tempat kita
memanggil link ini. Seandainya nama file kita adalah belajar_link.html, dan
dalam folder yang sama terdapat halaman belajar_list.html, kita dapat
menggunakan href=”belajar_list.html” untuk membuat link ke halaman
belajar_list.html .
Atribut tag <a>: target
Atribut penting lainnya dari tag <a> adalah target. Atribut
ini digunakan untuk menentukan apakah link yang dituju terbuka di jendela
browser saat ini, atau terbuka di jendela baru.
Secara default, setiap link yang kita tulis akan terbuka pada
jendela yang sama (menimpa halaman web saat ini). Tetapi apabila kita ingin
halaman tersebut terbuka pada tab baru, gunakan atribut target=”_blank”.
Mungkin itu dulu pembahasan Belajar HTML untuk pemula semoga artikel ini bermanfaat. TerimaKasih.
No comments:
Post a Comment