Sebelum kita belajar buat TABEL dan FORM INPUTAN dari HTML, ada baik ny kita mengetahui apa itu HTML serta penulisan tag pada HTML.
Pengertian HTML
HTML adalah singkatan dari Hypertext Markup Language. Disebut hypertext karena di dalam HTML sebuah text biasa dapat berfungsi lain, kita dapat membuatnya menjadi link yang dapat berpindah dari satu halaman ke halaman lainnya hanya dengan meng-klik text tersebut. Kemampuan text inilah yang dinamakan hypertext, walaupun pada implementasinya nanti tidak hanya text yang dapat dijadikan link.
Disebut Markup Language karena bahasa HTML menggunakan tanda (mark), untuk menandai bagian-bagian dari text. Misalnya, text yang berada di antara tanda tertentu akan menjadi tebal, dan jika berada di antara tanda lainnya akan tampak besar. Tanda ini di kenal sebagai HTML tag.
Jika anda ingin melihat bagaimana sebenarnya HTML, silahkan klik kanan halaman ini, lalu pilih View Page Source (di Browser Mozilla Firefox atau Google Chrome). Akan tampil sebuah halaman baru yang merupakan kode HTML dari halaman ini.
HTML merupakan bahasa dasar pembuatan web. Disebut dasar karena dalam membuat web, jika hanya menggunakan HTML tampilan web terasa hambar. Terdapat banyak bahasa pemrograman web yang ditujukan untuk memanipulasi kode HTML, seperti JavaScript dan PHP. Akan tetapi sebelum anda belajar JavaScript maupun PHP, memahami HTML merupakan hal yang paling awal.
HTML bukanlah bahasa pemrograman (programming language), tetapi bahasa markup (markup language), hal ini terdengar sedikit aneh, tapi jika anda telah mengenal bahasa pemrograman lain, dalam HTML tidak akan ditemukan struktur yang biasa di temukan dalam bahasa pemrograman seperti IF, LOOP, maupun variabel. HTML hanya sebuah bahasa struktur yang fungsinya untuk menandai bagian-bagian dari sebuah halaman.
Selain HTML, dikenal juga xHTML yang merupakan singkatan dari eXtensible Hypertext Markup Language. xHTML merupakan versi lama dari HTML (sebelum era HTML5 seperti saat ini). xHTML menggunakan aturan penulisan yang lebih ketat. Jika anda menemukan artikel yang membahas xHTML, bisa disamakan dengan HTML, karena perbedaannya tidak terlalu banyak.
Versi terbaru HTML: HTML5
Saat ini versi terbaru dari HTML adalah HTML5. HTML5 berisi beberapa fitur baru, tapi tetap membawa mayoritas fitur dari versi HTML sebelumnya, yakni HTML 4 dan xHTML.
File HTML harus dijalankan dari aplikasi web browser.
Pengertian Web Browser
Web Browser (atau biasa disebut browser) adalah sebuah software aplikasi untuk menerima, menampilkan, dan menerjemahkan informasi dari world wide web (wikipedia). Dan salah satu informasi itu dibuat dalam format HTML.
Kode HTML yang kita buat akan diterjemahkan oleh web browser agar tampil seperti yang dirancang. Pada dasarnya seluruh web browser dapat menampilkan kode HTML sama baiknya, namun jika sudah berbicara mengenai desain halaman, tiap-tiap browser memiliki beberapa perbedaan.
HTML dirancang dan diatur oleh sebuah badan standarisasi dunia yang khusus menangani web, yaitu W3C (World Wide Web Consortium). Hal ini dikarenakan tiap-tiap program web browser menerjemahkan kode-kode HTML secara berbeda-beda, sehingga di perlukan sebuah standar yang sama untuk seluruh browser.
Namun pada penerapannya, standar ini hanya merupakan rekomendasi. Beberapa web browser membuat aturannya sendiri.
Salah satu yang terkenal adalah Internet Explorer pada sekitar tahun 2000-an. Hampir 90% web browser yang digunakan saat itu adalah Internet Explorer, dan IE tidak sepenuhnya mengikuti rekomendasi W3C. Sedangkan web browser Opera yang mencoba menerapkan standar W3Ctidak terlalu populer. Perbedaan aturan penerjemahan HTML di antara web browser inilah yang terus menjadi tantangan bagi programmer web.
Sekarang Internet Explorer tidak lagi sekuat dulu. Web Browser Mozilla Firefox dan Google Chrome telah menguasai lebih dari 50%, dan IE juga telah berusaha menerapkan standar W3C, termasuk web browser terbaru mereka: Microsoft Edge.
Fungsi Web Browser
Untuk mempelajari HTML, web browser adalah perangkat utama yang kita butuhkan. Ibarat bahasa pemrograman lainnya, Web Browser adalah compiler dan intrepreter HTML. Anda bebas menggunakan web browser yang disukai, namun dalam tutorial Belajar HTML ini saya akan menggunakan chrome.
contoh penulisan sintaks
contoh penulisan sintaks
Stuktur Dasar Pada HTML
<
span
style
=
"font-size: small;"
><
html
>
<
head
>
<!-ini adalah bagian header-->
<
title
>judul web</
title
>
</
head
>
<
body
>
<!-tempat menuliskan kode-->
</
body
>
</
html
>
</
span
>
<a>
Mendefinisikan tag anchor. Digunakan untuk membuat link ke dokumen lain menggunakan atribut herf dan juga untuk membuat bookmark dokumen mengunakan atribut name.
Contoh
<
body
>
<
a
href
=
http
://www.google.com”>kunjungi website google</
a
>
</
body
>
<b>
Digunakan untuk mencetak tebal suatu teks.
Contoh:
<
b
>teks tercetak tebal (bold)</
b
>
<body>
Digunakan untuk mendefinisikan badan html, yang didalamnya merupakan tempat untuk meletakan elemen-elemen html lainnya, seperti gambar, teks, table, form, dll
Contoh:
<
html
>
<
head
>
<
title
>judul web</
title
>
</
head
>
<
body
>
<!-ini adalah bagian badan tempat anda menuliskan kode-->
</
body
>
</
html
>
<br>
Digunakan untuk menyisipkan sebuah baris(ganti baris)
Contoh:
<
body
>
Salah satu aplikasi internet adalah web
Html adalah kode dasar untuk membuat web
</
body
>
<center>
Digunakan untuk menampilkan teks ditengah halaman
Contoh:
<
center
> teks ini akan tampil ditengah halaman</
center
>
<div>
Digunakan untuk mendifinisikan bagian dari sebuah halaman web. Seringkali digunakan untuk mengelompokan elemen-elemen HTML dengan format style tertentu.
Contoh:
<
div
style=’color:#ff0000”>
<
h3
>ini merupakan judul</
h3
>
<
p
>ini merupakan paragraph</
p
>
</
div
>
<form>
Digunakan untuk mendifinisikan sebuah form masukan dari pengguna
Contoh:
<
form
action=”action.php” method=”get”>
Nama: <
input
type=”text” name=”f_nama”/>
email: <
input
type=”text” name=”f_email”/>
<
input
type=”submite” value=’simpan”/>
</
form
>
<h1> sampai dengan <h6>
Digunakan untuk mendinisikan bagian atas (heading) teks. Dimulai dari ukuran besar<h1> hingga ukuran kecil<h6>
Contoh:
<
h1
> HTML adalah kode dasar membuat web</
h1
>
<
h2
> HTML adalah kode dasar membuat web</
h2
>
<
h3
> HTML adalah kode dasar membuat web</
h3
>
<
h4
> HTML adalah kode dasar membuat web</
h4
>
<
h5
> HTML adalah kode dasar membuat web</
h5
>
<
h6
> HTML adalah kode dasar membuat web</
h6
>
<head>
Digunakan untuk mendifinisikan bagian atas(head) sebuah dokumen html. Bagian ini biasanya digunakan untuk mendifinisikan tag <base>, <link>, <meta>, <script>, <style>, dan <title>.
Contoh:
<
head
>
<
title
>judul web</
title
>
</
head
>
<hr>
Digunakan untuk mendifinisikan sebuah garis horizontal dalam halaman html
Contoh:
Salah satu aplikasi internet adalah web<
hr
>
Html adalah kode dasar untuk membuat web
<i>
Digunakan untuk mencetak miring suatu teks.
Contoh:
<
i
>teks tercetak miring(italic)</
i
>
<p>
Digunakan untuk membuat paragraph baru.
<select>
Digunakan untuk mendinisikan daftar pilihan
Contoh:
<
select
>
<
option
value=”detik”>detik</
option
>
<
option
value=”viva”>vivanews</
option
>
<
option
value=”glodokshop”>glodok shop</
option
>
<
option
value=”bhineka”>Bhineka</
option
>
</
select
>
<Strong>
Digunakan untuk mempertegas tampilan suatu teks.
Contoh:
Kode dasar untuk membuat web adalah <
strong
>HTML</
strong
>
<Style>
Digunakan untuk mendifinisikan informasi style pada dokumen html
Contoh:
<
head
>
<
style
type=”text/css”>
Span.blue {color:lightskyblue;
Font-weight:bold}
</
style
>
</
head
>
<
body
>
Kode dasr untuk membuat web adalah <
span
class=”blue”>HTML</
span
>
</
body
>
<table>
Digunakan untuk membuat table dalam halaman web.
Contoh:
<
table
border=”1”>
<
caption
>daftar situs</
caption
><
tr
>
<
th
>berita</
th
>
<title>
Digunakan untuk mendifinisikan judul pada dokumen html.
Contoh:
<
head
>
<
title
>judul web</
title
>
</
head
>
<u>
Digunakan untuk menambahkan garis bawah suatu teks
Contoh:
<
u
>teks bergaris bawah(bold)</
u
>
<ul>
Digunakan untuk membuat daftar yang tak berurut(unordered list) menggunakan symbol bullets.
Contoh:
<
ul
>
<
li
>webpribadi</
li
>
<
li
>blog</
li
>
<
li
>facebook</
li
>
</
ul
>
Sekian dulu dari tutorial ini, selanjutnya kita akan membahas cara mebuat tabel
0 komentar:
Posting Komentar