Modul Desain Web

engertian HTML, Fungsi HTML serta Sejarah HTML. Apa itu HTML ? HTML adalah kepanjangan atau singkatan dari Hyper Text Markup Language. Setiap kita menjelajah di internet, membuka website apapun, kita pasti akan bertemu dengan HTML. Hal ini dikarenakan semua website yang ada diinternet, dibuat dengan menggunakan bahasa markup HTML. Di Artikel kali ini kita akan mengetahui tentang apa yang dimaksud html, fungsi html, sejarah html, cara membuatnya serta mengenal bahasa HTML terbaru yaitu HTML5. Akan saya mulai dengan pengertian html terlebih dahulu. Pengertian HTML pengertian html fungsi html sejarah html HTML adalah bahasa markup internet (web) berupa kode dan simbol yang dimasukkan kedalam sebuah file yang ditujukan untuk ditampilkan didalam sebuah website. Singkatnya, HTML adalah bahasa markup yang digunakan untuk membuat website. Website yang dibuat dengan HTML ini, dapat dilihat oleh semua orang yang terkoneksi dengan internet. Tentunya dengan menggunakan aplikasi penjelajah internet (browser) seperti Internet Explorer, Mozilla Firefox dan Google Chrome. Seperti yang sudah saya jelaskan sebelumnya, HTML adalah singkatan dari Hyper Text Markup Language. Tapi mengetahui singkatannya saja tidak akan cukup. Karena itu saya akan menyajikan arti dari kata kata tersebut. HyperText adalah metode dimana kita "berpindah" disekeliling web, dengan mengeklik sebuah teks yang bernama hyperlink. Hyperlink adalah sebuah teks khusus di internet, dimana saat teks tersebut diklik, akan membawa kita ke halaman web selanjutnya/halaman web lain yang telah ditentukan. Markup adalah hal yang dilakukan oleh tag HTML kepada teks yang ada didalamnya. HTML menandai teks yang berada didalamnya sebagai tipe teks tertentu. Misalnya saja jika kita menandai sebuah teks dengan tag html , maka teks tersebut akan berubah menjadi italic (huruf yang miring). Sedangkan jika kita menandainya dengan , maka teks tersebut akan berubah menajadi bold (huruf tebal). Language yang berarti bahasa. HTML adalah sebuah bahasa, yang memiliki kata kata berupa kode dan syntax seperti bahasa yang lain. Saat ini bahasa HTML masih terus dikembangkan Hal ini dikarenakan pengguna internet semakin hari semakin berkembang pesat. Oleh karena itu bahasa HTML harus ditingkatkan lagi agar bisa menciptakan halaman web yang lebih berkualitas. Untuk itulah dibentuk sebuah organisasi yang bertanggungjawab mengembangkan bahasa HTML. Organisasi ini bernama W3C. Fungsi dan Kegunaan HTML Sebagai bahasa markup internet, HTML memiliki banyak fungsi dan kegunaan. Beberapa manfaat dari HTML diantaranya Untuk Membuat Halaman Web. Bahasa HTML digunakan untuk membuat halaman web. Semua halaman web pasti dibuat dengan menggunakan HTML. Sebagai Pondasi Bagi Sebuah Website. Sebuah rumah jika tidak memiliki pondasi maka akan cepat roboh. Begitu juga dengan website. Jika tidak memiliki HTML sebagai pondasi, kita tidak dapat mengimplementasikan bahasa lainnya seperti CSS (bahasa untuk mendesain website), Javascript (bahasa untuk menambah prilaku website), dan PHP (bahasa pemrograman server website). Untuk menandai teks pada halaman web. Misalnya, kita dapat menandai sebuah teks menjadi bergaris bawah dengan menggunakan tag html Untuk menandai elemen/bagian pada halaman web. Sebuah website memiliki beberapa bagian seperti header, navigasi, main dan footer. Kita dapat menandai setiap bagiannya dengan HTML. Untuk menampilkan informasi dalam bentuk tabel Untuk menambahkan objek seperti audio, video, gambar, dll dalam halaman web Untuk membuat online form Struktur Dasar HTML #1 Element Element terdiri dari 3 bagian, yaitu tag pembuka, isi dan penutup. Contohnya untuk menampilkan judul dari sebuah halaman, kita membuat kode html seperti ini Yang berwarna biru, itu adalah pembuka. Yang warna hijau adalah isi. Sedangkan yang warna merah adalah penutup. Isi adalah optional, dalam artian tidak masalah jika kita tidak memberikan isi. Beda dengan pembuka dan penutup, keduanya harus ada dalam sebuah kode html. Jika tidak maka akan terjadi error, dan kode tidak akan berfungsi. Ada juga pembuka dan penutup yang berbeda dengan contoh diatas. Contohnya seperi ini Pada tag input kita tidak perlu menutupnya dengan ,cukup dengan /> . Bahkan dengan menuliskan > saja juga bisa. #2 Tag Tag adalah teks khusus berupa dua karakter < dan >. Contohnya tag dengan nama head, dengan nama body, dan sebagainya. Tag ini sudah diatur dari sananya, jadi kita tidak boleh membuatnya sendiri. Misal jika kita menulis , jelas tidak akan berfungsi. Untuk lebih memperjelas, berikut ini struktur dasar kode html Hai teman teman, ini website pribadi saya lho.. Penjelasan untuk menandai awal dan akhir dari file HTML berisikan keterangan informasi seperti title dan jenis dokumen sebagai judul halaman web bagian ini adalah konten utama web seperti header, navigasi, artikel , sidebar dan footer Anda dapat menuliskan kode html di aplikasi bawaan Windows, Notepad. Bisa juga mendownload aplikasi khusu untuk menulis kode yaitu Notepad++. #3 Atribut Atribut terdapat didalam script sebuah elemen, fungsinya untuk memberi informasi tambahan tentang elemen. Nilai dari atribut harus ditutup dengan tanda kutip. Kode diatas akan membuat sebuah kotak isian yang dikhususkan untuk menulis password. Dalam artian, jika kita menulis di isian tersebut, tulisan kita akan berubah menjadi bintang bintang seperi ini ******. Sejarah HTML HTML pertama kali diciptakan oleh IBM pada tahun 1980. Saat itu tercetus ide untuk menempatkan elemen elemen yang berguna untuk menandai bagian suatu dokumen seperti judul, alamat dan isi dokumen. Pada akhirnya elemen element tersebut dibentuk menjadi suatu program untuk melakukan pemformatan dokumen secara otomatis. Bahasa pemrograman untuk melakukan tugas ini disebut sebagai bahasa markup. IBM menamai program ini sebagai Generalized Markup Language. Pada tahun 1986, konsep ini disetujui oleh ISO (International Standard Organization) sebagai standar untuk pembuatan dokumen. Bahasa ini dinamai oleh ISO sebagai Standard Generalized Markup Language (SGML) HTML sendiri, adalah bagian dari SGML. Tim Berners-Lee dari CERN mengemukakan sebuah ide tentang pembuatan skrip bahasa pemrograman dan dokumen yang dapat diakes oleh semua komputer tanpa melihat jenis platformnya. Sejak saat itu HTML menjadi lebih populer dibandingkan SGML. Perkembangan HTML Sejak dirilis, bahasa HTML terus mengalami perkembangan HTML 1.0 HTML 1.0 adalah versi pertama dari HTML. Pada saat ini tidak banyak orang yang ikut berpartisipasi dalam pembuatannya. Fitur dari versi ini pun masih terbatas. Antar lain heading, paragraf, hypertext, list, efek tebal dan miring pada teks. Versi 1.0 juga mendukung peletakan gambar, namun tidak mendukung adanya teks disekeliling gambar. HTML 2.0 HTML 2.0 masih membawa fitur sebelumnya dari versi 1.0, dengan tambahan beberapa vitur baru. Fitur tersebut adalah form. Dengan form, kita dapat memasukkan data data seperti nama, alamat, serta komentar. Hadirnya fitur form ini menjadi awal terbentuknya website yang interaktif. HTML 3.0 Pada versi ini, mulai banyak orang yang ikut memberikan kontribusi pada HTML. Fitur baru yang hadir di versi ini salah satunya adalah tabel. Versi HTML ini tidak bertahan lama dikarenakan banyak permasalahan seperti perang antar browser. Karena itu, HTML ini segera diganti lagi menjadi versi 3.2 HTML 3.2 Perang antar browser terus berlanjut dikarenakan mereka membuat tag HTML mereka sendiri. Untuk menghentikan hal ini, dibentuklah sebuah organisasi yang menangani standard dari HTML. Organisasi ini bernama World Wide Web Consortium (W3C). HTML 4.0 Dengan hadirnya W3C sebagai standarisasi HTML, perang browser terhenti. HTML lalu berkembang menjadi HTML 4.0. Versi ini memuat banyak sekali revisi dan perubahan dari versi sebelumnya. Perubahan ini terjadi di hampir seluruh perintah HTML seperti text, link, image, imagemaps, table, form, meta, dan lain lain. HTML 4.01 Versi ini hadir untuk memperbaiki beberapa kesalahan di versi sebelumnya XHTML 1.0 XHTML adalah gabungan dari HTML dan XML. Karena XHTML tidak se-fleksibel HTML, tidak banyak orang yang menyukai versi ini. HTML 5 HTML 5 adalah versi terakhir dari HTML saat artikel ini ditulis. HTML 5 membawa banyak sekali perubahan terhadap versi sebelumnya. Banyak tag baru yang diperkenalkan, seperti









,
Pengertian HTML, Fungsi HTML serta Sejarah HTML Pengertian HTML, Fungsi HTML serta Sejarah HTML. Apa itu HTML ? HTML adalah kepanjangan atau singkatan dari Hyper Text Markup Language. Setiap kita menjelajah di internet, membuka website apapun, kita pasti akan bertemu dengan HTML. Hal ini dikarenakan semua website yang ada diinternet, dibuat dengan menggunakan bahasa markup HTML. Di Artikel kali ini kita akan mengetahui tentang apa yang dimaksud html, fungsi html, sejarah html, cara membuatnya serta mengenal bahasa HTML terbaru yaitu HTML5. Akan saya mulai dengan pengertian html terlebih dahulu. Pengertian HTML pengertian html fungsi html sejarah html HTML adalah bahasa markup internet (web) berupa kode dan simbol yang dimasukkan kedalam sebuah file yang ditujukan untuk ditampilkan didalam sebuah website. Singkatnya, HTML adalah bahasa markup yang digunakan untuk membuat website. Website yang dibuat dengan HTML ini, dapat dilihat oleh semua orang yang terkoneksi dengan internet. Tentunya dengan menggunakan aplikasi penjelajah internet (browser) seperti Internet Explorer, Mozilla Firefox dan Google Chrome. Seperti yang sudah saya jelaskan sebelumnya, HTML adalah singkatan dari Hyper Text Markup Language. Tapi mengetahui singkatannya saja tidak akan cukup. Karena itu saya akan menyajikan arti dari kata kata tersebut. HyperText adalah metode dimana kita "berpindah" disekeliling web, dengan mengeklik sebuah teks yang bernama hyperlink. Hyperlink adalah sebuah teks khusus di internet, dimana saat teks tersebut diklik, akan membawa kita ke halaman web selanjutnya/halaman web lain yang telah ditentukan. Markup adalah hal yang dilakukan oleh tag HTML kepada teks yang ada didalamnya. HTML menandai teks yang berada didalamnya sebagai tipe teks tertentu. Misalnya saja jika kita menandai sebuah teks dengan tag html , maka teks tersebut akan berubah menjadi italic (huruf yang miring). Sedangkan jika kita menandainya dengan , maka teks tersebut akan berubah menajadi bold (huruf tebal). Language yang berarti bahasa. HTML adalah sebuah bahasa, yang memiliki kata kata berupa kode dan syntax seperti bahasa yang lain. Saat ini bahasa HTML masih terus dikembangkan Hal ini dikarenakan pengguna internet semakin hari semakin berkembang pesat. Oleh karena itu bahasa HTML harus ditingkatkan lagi agar bisa menciptakan halaman web yang lebih berkualitas. Untuk itulah dibentuk sebuah organisasi yang bertanggungjawab mengembangkan bahasa HTML. Organisasi ini bernama W3C. Fungsi dan Kegunaan HTML Sebagai bahasa markup internet, HTML memiliki banyak fungsi dan kegunaan. Beberapa manfaat dari HTML diantaranya Untuk Membuat Halaman Web. Bahasa HTML digunakan untuk membuat halaman web. Semua halaman web pasti dibuat dengan menggunakan HTML. Sebagai Pondasi Bagi Sebuah Website. Sebuah rumah jika tidak memiliki pondasi maka akan cepat roboh. Begitu juga dengan website. Jika tidak memiliki HTML sebagai pondasi, kita tidak dapat mengimplementasikan bahasa lainnya seperti CSS (bahasa untuk mendesain website), Javascript (bahasa untuk menambah prilaku website), dan PHP (bahasa pemrograman server website). Untuk menandai teks pada halaman web. Misalnya, kita dapat menandai sebuah teks menjadi bergaris bawah dengan menggunakan tag html Untuk menandai elemen/bagian pada halaman web. Sebuah website memiliki beberapa bagian seperti header, navigasi, main dan footer. Kita dapat menandai setiap bagiannya dengan HTML. Untuk menampilkan informasi dalam bentuk tabel Untuk menambahkan objek seperti audio, video, gambar, dll dalam halaman web Untuk membuat online form Struktur Dasar HTML #1 Element Element terdiri dari 3 bagian, yaitu tag pembuka, isi dan penutup. Contohnya untuk menampilkan judul dari sebuah halaman, kita membuat kode html seperti ini Yang berwarna biru, itu adalah pembuka. Yang warna hijau adalah isi. Sedangkan yang warna merah adalah penutup. Isi adalah optional, dalam artian tidak masalah jika kita tidak memberikan isi. Beda dengan pembuka dan penutup, keduanya harus ada dalam sebuah kode html. Jika tidak maka akan terjadi error, dan kode tidak akan berfungsi. Ada juga pembuka dan penutup yang berbeda dengan contoh diatas. Contohnya seperi ini Pada tag input kita tidak perlu menutupnya dengan ,cukup dengan /> . Bahkan dengan menuliskan > saja juga bisa. #2 Tag Tag adalah teks khusus berupa dua karakter < dan >. Contohnya tag dengan nama head, dengan nama body, dan sebagainya. Tag ini sudah diatur dari sananya, jadi kita tidak boleh membuatnya sendiri. Misal jika kita menulis , jelas tidak akan berfungsi. Untuk lebih memperjelas, berikut ini struktur dasar kode html Hai teman teman, ini website pribadi saya lho.. Penjelasan untuk menandai awal dan akhir dari file HTML berisikan keterangan informasi seperti title dan jenis dokumen sebagai judul halaman web bagian ini adalah konten utama web seperti header, navigasi, artikel , sidebar dan footer Anda dapat menuliskan kode html di aplikasi bawaan Windows, Notepad. Bisa juga mendownload aplikasi khusu untuk menulis kode yaitu Notepad++. #3 Atribut Atribut terdapat didalam script sebuah elemen, fungsinya untuk memberi informasi tambahan tentang elemen. Nilai dari atribut harus ditutup dengan tanda kutip. Kode diatas akan membuat sebuah kotak isian yang dikhususkan untuk menulis password. Dalam artian, jika kita menulis di isian tersebut, tulisan kita akan berubah menjadi bintang bintang seperi ini ******. Sejarah HTML HTML pertama kali diciptakan oleh IBM pada tahun 1980. Saat itu tercetus ide untuk menempatkan elemen elemen yang berguna untuk menandai bagian suatu dokumen seperti judul, alamat dan isi dokumen. Pada akhirnya elemen element tersebut dibentuk menjadi suatu program untuk melakukan pemformatan dokumen secara otomatis. Bahasa pemrograman untuk melakukan tugas ini disebut sebagai bahasa markup. IBM menamai program ini sebagai Generalized Markup Language. Pada tahun 1986, konsep ini disetujui oleh ISO (International Standard Organization) sebagai standar untuk pembuatan dokumen. Bahasa ini dinamai oleh ISO sebagai Standard Generalized Markup Language (SGML) HTML sendiri, adalah bagian dari SGML. Tim Berners-Lee dari CERN mengemukakan sebuah ide tentang pembuatan skrip bahasa pemrograman dan dokumen yang dapat diakes oleh semua komputer tanpa melihat jenis platformnya. Sejak saat itu HTML menjadi lebih populer dibandingkan SGML. Perkembangan HTML Sejak dirilis, bahasa HTML terus mengalami perkembangan HTML 1.0 HTML 1.0 adalah versi pertama dari HTML. Pada saat ini tidak banyak orang yang ikut berpartisipasi dalam pembuatannya. Fitur dari versi ini pun masih terbatas. Antar lain heading, paragraf, hypertext, list, efek tebal dan miring pada teks. Versi 1.0 juga mendukung peletakan gambar, namun tidak mendukung adanya teks disekeliling gambar. HTML 2.0 HTML 2.0 masih membawa fitur sebelumnya dari versi 1.0, dengan tambahan beberapa vitur baru. Fitur tersebut adalah form. Dengan form, kita dapat memasukkan data data seperti nama, alamat, serta komentar. Hadirnya fitur form ini menjadi awal terbentuknya website yang interaktif. HTML 3.0 Pada versi ini, mulai banyak orang yang ikut memberikan kontribusi pada HTML. Fitur baru yang hadir di versi ini salah satunya adalah tabel. Versi HTML ini tidak bertahan lama dikarenakan banyak permasalahan seperti perang antar browser. Karena itu, HTML ini segera diganti lagi menjadi versi 3.2 HTML 3.2 Perang antar browser terus berlanjut dikarenakan mereka membuat tag HTML mereka sendiri. Untuk menghentikan hal ini, dibentuklah sebuah organisasi yang menangani standard dari HTML. Organisasi ini bernama World Wide Web Consortium (W3C). HTML 4.0 Dengan hadirnya W3C sebagai standarisasi HTML, perang browser terhenti. HTML lalu berkembang menjadi HTML 4.0. Versi ini memuat banyak sekali revisi dan perubahan dari versi sebelumnya. Perubahan ini terjadi di hampir seluruh perintah HTML seperti text, link, image, imagemaps, table, form, meta, dan lain lain. HTML 4.01 Versi ini hadir untuk memperbaiki beberapa kesalahan di versi sebelumnya XHTML 1.0 XHTML adalah gabungan dari HTML dan XML. Karena XHTML tidak se-fleksibel HTML, tidak banyak orang yang menyukai versi ini. HTML 5 HTML 5 adalah versi terakhir dari HTML saat artikel ini ditulis. HTML 5 membawa banyak sekali perubahan terhadap versi sebelumnya. Banyak tag baru yang diperkenalkan, seperti









,

  Pengertian HTML

Menurut Wikipedia HyperText Markup Language (HTML) adalah sebuah bahasa markah yang digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi di dalam sebuah penjelajah web Internet dan pemformatan hiperteks sederhana yang ditulis dalam berkas format ASCII agar dapat menghasilkan tampilan wujud yang terintegerasi. Dengan kata lain, berkas yang dibuat dalam perangkat lunak pengolah kata dan disimpan dalam format ASCII normal sehingga menjadi halaman web dengan perintah-perintah HTML.
HTML atau kepedekan dari “Hypertext Markup Language” merupakan bahasa pemrograman dasar yang digunakan ketika akan membuat halaman web, baik web yang statis maupun web yang dinamis. HTML merupakan bahasa markup (markup language). Pada HTML terdapat berbagai tag atau elemen yang dapat digunakan untuk memformat sebuah dokumen dalam web.
Jadi, HTML yaitu bahasa pemrograman dasar untuk membuat sebuah web, yang bertujuan untuk menampilakan sebuah informasi guna menghasilkan tampilan yang terintegerasi.
B.       Fungsi HTML
Berdasarkan pengertian dari HTML, banyak hal dan fungsi yang dapat dilakukan antara lain :
·       Mengontrol tampilan dari halaman web dan isinya.
·      Mempublikasikan dokumen secara online sehingga bisa di akses dari seluruh dunia.
·      Membuat list atau penomoran dari sekumpulan hal.
·      Menampilkan informasi dalam bentuk tabel.
·      Membuat Sebuah link yang digunakan untuk menuju dokument lain.
·    Membuat online form yang bisa di gunakan untuk menangani pendaftaran, transaksi secara online.
·    Menambahkan object-object seperti image, audio, video dan juga java applet dalam document HTML.    
C.      Struktur HTML
a.     Elemen
Elemen terdiri atas tiga bagian, yaitu tag pembuka, isi, dan tag penutup.Contonya untuk menampilkan judul dokumen HTML pada web browser digunakan element title, dimana: <title> ini adalah tag pembuka judul dokumen HTML.
b.    Tag
Tag merupakan teks khusus (markup) berupa dua karakter "<" dan ">", sebagai contoh <body> adalah tag dengan nama body. Tag ditulis secara berpasangan, yang terdiri atas tag pembuka dan tag penutup (ditambahkan karakter "/" setelah karakter "<"), sebagai contoh <body> ini adalah tag pembuka isi dokumen HTML, dan </body> ini adalah tag penutup isi dokumen HTML. Yang merupakan tag-tag dasar dalam HTML adalah:
Ø <html> </html>
Tag <html> dan </html> digunakan untuk menandai awal dan akhir dari suatu file HTML.
Ø <title> </title>
Tulisan yang berada diantara tag <title> dan </title> akan ditampilkan oleh browser pada bagian title dan merupakan title dari jendela browser.
Ø <head> </head>
Berisi keterangan informasi, seperti title dan jenis dokumen, ditulis diantara <head> </head>.
Ø <body> </body>
Bagian tag <body> </body> menandai awal dan akhir dari badan dokumen HTML. Tag ini memiliki sejumlah attribut yang dapat ditentukan.
Contoh :
<html>
<head>
<title>Contoh Document HTML</title>
</head>
<body>
Hallo Pembaca Makalah Pemrograman Dasar WEBsite dengan HTML.
</body>
</html>

c.     Atribut
Atribut terdapat di dalam script sebuah elemen dan memberikan informasi tambahan tentang elemen. Atribut selalu ditentukan dalam tag awal Atribut ditulis dalam pasangan nama / nilai.
Nilai dari atribut harus selalu tertutup dalam tanda kutip. Tanda kutip ganda adalah yang paling umum, tapi gaya tanda kutip tunggal juga diperbolehkan. Dalam beberapa situasi, ketika nilai atribut itu sendiri berisi tanda kutip, maka perlu menggunakan tanda kutip tunggal Misalnya: name = 'John "shotgun" Nelson'.
Di bawah ini adalah daftar dari beberapa atribut yang dapat digunakan pada setiap elemen HTML :
Atribut
Deskripsi
Class
Menentukan satu atau lebih classnames untuk sebuah elemen (mengacu pada kelas dalam style sheet).
Id
Menentukan id unik untuk sebuah elemen.
Style
Menentukan inline CSS style untuk elemen.
Title
Menentukan informasi tambahan mengenai elemen (ditampilkan sebagai tool tip).
D.      Pengaturan Halaman HTML  
1.    Mengatur Tulisan pada Halaman HTML.
Agar tulisan pada halaman sebuah web terlihat rapi, maka perlu pemformatan dalam tulisan tersebut. Baik tata cara pencetakannya maupun pengaturan tulisan yang lain. Adapun pengaturan format tersebut antara lain :
a.    Heading
Heading adalah hal yang penting dalam sebuah Document HTML. Heading didefinisikan dengan tag <h1> sampai dengan <h6>. Semakin besar angka dalam penulisan tag Heading semakin kecil ukuran yang tercetak dalam Browser.
Contoh :
<html>
<body>
<h1>Penulisan heading 1</h1>
<h2>Penulisan heading 2</h2>
<h3>Penulisan heading 3</h3>
<h4>Penulisan heading 4</h4>
<h5>Penulisan heading 5</h5>
<h6>Penulisan heading 6</h6>
</body>
</html>
b.   Paragraf
Membuat paragraf dalam HTML dapat menggunakannya dengan tag <p>. Pada browser, secara otomatis penulisan paragraf akan  menambahkan baris kosong sebelum dan sesudah paragraf.
Sebagian besar browser akan membenarkan penulisan HTML Paragraf, bahkan jika kita melupkan tag tersebut. Tetapi, tidak menuliskan tag dalam penulisan paragraf membuat hasil tulisan yang tercetak pada HTML tidak tertulis rapi.
Dalam penulisan paragraf, untuk mengganti baris dalam paragraf tersebut dapat kita gunakan tag break, dapat di tulis <br> atau <br \>.
Contoh :
<html>
<body>
<p>Penulisan Paragraf 1. </p>
<p>Penulisan Paragraf 2. </p>
<p>Penulisan <br \> Paragraf 3. </p>
</body>
</html>
c.    Format Teks
Banyak sekali tag yang digunakan untuk menformat sebuah tulisan dalam HTML. Menformat paragraf yang di maksudkan adalah membuat text bercetak tebal, bercetak miring, subscript text, superscript text dan masih banyak format yang lainnya. Untuk lebih jelasnya lihat tabel.
HTML tags Formating Text
Tags
Description
<b>
Mendefinisikan Teks bercetak tebal
<i>
Mendefinisikan Teks bercetak miring
<small>
Mendefinisikan Teks kecil
<strong>
Mendefinisikan Teks penting
<sub>
Mendefinisikan Teks Subscript
<sup>
Mendefinisikan Teks Superscript
<ins>
Mendefinisikan Teks yang dimasukan
<del>
Mendefinisikan Teks yang dihapus
HTML Computer Output Tags
Tags
Descriptions
<code>
Mendefinisikan Kode Komputer
<kbd>
Mendefinisikan tekx Keyboard
<samp>
Mendefinisikan Sampel kode komputer
<var>
Mendefinisikan Variabel
<pre>
Mendefinisikan teks terformat
 HTML Citations, Quotations, dan Definition Tags
Tags
Descriptions
<abbr>
Mendefinisikan sebuah singakatan atau akronim
<address>
Mendefinisikan informasi kontak untuk penulis / pemilik document
<bdo>
Mendefinisikan arah teks
<blockquote>
Mendefinisikan bagian yang dikutip dari sumber lain
<q>
Mendefinisikan sebuah inline (pendek) kutipan
<cite>
Mendefinisikan Judul karya
<dfn>
Mendefinisikan sebuah istilah definisi
d.   Mengatur Pemerataan Paragraf
Pemerataan tulisan sangat mempengaruhi tampilan dari halaman web anda, ada kalanya tulisan tertentu perlu ditampilkan pada tengah halaman, atau pun justified. Tag-tag HTML yang mengatur pemerataan tulisan pada satu halaman:
·           <CENTER> </CENTER>
Tag ini akan menampilkan tulisan/gambar ditengah baris.
·           <P ALIGN=LEFT|CENTER|RIGHT> </P>
Tag paragraf digunakan untuk memulai suatu paragraf baru disertai dengan pemerataan teks ke kiri, tengah, atau kanan dari tampilan browser untuk paragraf bersangkutan. Suatu paragraf dapat terdiri dari teks, gambar, hyperlink, dan element HTML lainnya.
·           <H# ALIGN=LEFT|CENTER|RIGHT> </H#>
Ini akan merapikan tulisan ke kiri, tengah atau kanan dari tulisan yang diberi tingkat heading.
e.    Menyisipkan Gambar
<html>
<body>
<img src="../images.jpg">
</body>
</html>
Dalam HTML, gambar didefinisikan dengan tag <img>. Tag <img> kosong, yang berarti mengandung atribut saja, dan tidak memiliki tag penutup. Untuk menampilkan gambar pada halaman, Anda perlu menggunakan atribut src. Src singkatan dari "sumber". Nilai dari atribut src adalah URL gambar yang ingin ditampilkan.
Sintaks untuk mendefinisikan gambar:
<img src="url" alt="some_text">
URL menunjuk ke lokasi di mana gambar disimpan. Sebuah gambar bernama "image.jpg", yang terletak luar direktori dari file “image.html”.
Browser menampilkan gambar di mana tag <img> terjadi dalam dokumen. Jika Anda menempatkan tag gambar antara dua paragraf, browser menunjukkan paragraf pertama, maka gambar, dan kemudian paragraf kedua.
f.     Link ke Dokumen atau Situs yang Lain
HTML tag <a> mendefinisikan hyperlink. Sebuah hyperlink (atau link) adalah kata, kelompok kata, atau gambar yang dapat Anda klik untuk melompat ke dokumen lain.
Bila Anda memindahkan kursor di atas link dalam sebuah halaman Web, panah akan berubah menjadi sedikit tangan. Atribut yang paling penting dari elemen <a> adalah atribut href, yang menunjukkan tujuan link.
Secara default, link akan muncul sebagai berikut di semua browser:
·      Link belum dikunjungi digarisbawahi dan biru
·      Sebuah link dikunjungi digarisbawahi dan ungu
·      Link aktif digarisbawahi dan merah
Contoh Penulisan tags Link :
<a href=”http://www.example.com/”>Klik Link</a>
g.    Penulisan Komentar dalam HTML
Komentar dalam penulisan HTML hanyal untuk menandai sebuah tags agar kita dapat lebih memahami maksud dari tujuan dari tags yang kita buat. Penulisan Komentar tidak dapat di tampilkan dalam sebuah Browser. Tags dari komentar adalah <!---->
Contoh :
<!-- Tulis Komentar disini -->
2.    Membuat List
Agar dokumen kita mudah dibaca dan jelas, ada bagian tertentu yang perlu ditampilkan dalam list. List yang paling umum di Gunakan adalah Unordered List dan Ordered List :
a.    Unordered List
Unordered list ditandai dengan tag <ul> dan setiap daftar item ditandai dengan <li>. Hasil dari Unordered List adalah lingkarang bulat kecil.
Contoh :
<html>
<body>
<ul>
        <li>Unordered List 1</li>
        <li>Unordered List 2</li>
        <li>Unordered List 3</li>
</ul>
</body>
</html>
b.    Ordered List
Ordered list dimulai dengan tag <ol> dan setiap item daftar dimulai dengan tag <li>. Daftar item ditandai dengan angka.
Contoh :
<html>
<body>
<ol>
        <li>Ordered List 1</li>
        <li>Ordered List 2</li>
        <li>Ordered List 3</li>
</ol>
</body>
</html>
 
3.    Membuat Tabel dan Pengaturannya
Tabel didefinisikan dengan tag <table>. Sebuah tabel dibagi menjadi baris (dengan tag <tr>), dan setiap baris dibagi menjadi beberaapa kolom (dengan tag <td>).
Di dalam tag <tabel> harus terdapat attribut “border” dan tebal dari border tersebut. Jika Anda tidak menentukan atribut border, tabel akan ditampilkan tanpa batas atau garis.
Contoh :
<table border="1">
            <tr>
            <td>Baris 1, Kolom 1</td>
        <td>Baris 1, Kolom 2</td>
            </tr>
    <tr>
            <td>Baris 2, Kolom 1</td>
        <td>Baris 2, Kolom 2</td>
    </tr>
</table>
Tags
Descriptions
<table>
Mendefinisikan Tabel
<th>
Mendefinisikan sel header Tabel
<tr>
Mendefinisikan Tabel baris
<td>
Mendefinisikan Tabel Kolom
<caption>
Mendefinisikan Judul Tabel
<colgroup>
Menentukan sekelompok dari satu atau lebih kolom dalam sebuah tabel untuk memformat
<col>
Menentukan sifat kolom untuk setiap kolom dalam elemen <colgroup>
<thead>
Grup isi header dalam sebuah tabel
<tbody>
isi tubuh dalam sebuah tabel
<tfoot>
isi footer dalam sebuah tabel
4.    Membuat Form dan Pengaturannya
From digunakan untuk membuat sebuah inputan untuk pengguna yang nantinya akan dikirim ke server. Bentuk form terdiri dari beberapa elemen diantaranya teks, checkbox, radio button, tombol submit dan banyak lagi. Form juga dapat berisi daftar pilih, textarea, fieldset, legenda, dan elemen label. Untuk lebih jelasnya lihat Tabel :
Element pada Form
Element
Descriptions
text
Mendefinisikan satu baris field input yang pengguna dapat memasukkan teks
password
Mendefinisikan satu baris field input yang pengguna dapat memasukkan teks yang dirahasiakan
radio
mendefinisikan satu baris field input yang pengguna dapat memilih hanya satu saja
checkbox
mendefinisikan satu baris field input yang pengguna dapat tidak memilih atau pilih semua.
button / submit / reset
Mendefinisikan bentuk tombol untuk mengirim semua form
file
mendefinisikan satu baris field input yang pengguna dapat upload file
hidden
mendefinisikan satu baris field input yang pengguna dapat menyembunyikan form
Tags Pada Form
Tags
Descriptions
<form>
Mendefinisikan sebuah form HTML untuk input pengguna
<input>
Mendefinisikan sebuah kontrol input
<textarea>
Mendefinisikan sebuah kontrol input multiline (text area)
<label>
Mendefinisikan sebuah label untuk sebuah elemen
<fieldset>
terkait unsur-unsur dalam bentuk
<legend>
Mendefinisikan sebuah caption untuk elemen <fieldset>
<select>
Mendefinisikan sebuah daftar drop-down
<optgroup>
Mendefinisikan sebuah kelompok pilihan yang terkait dalam daftar drop-down
<option>
Mendefinisikan pilihan dalam daftar drop-down
<button>
Mendefinisikan sebuah tombol diklik
<datalist>
Baru Menentukan daftar pilihan yang telah ditetapkan untuk kontrol input
<keygen>
Baru Mendefinisikan kunci-pair bidang pembangkit (untuk formulir)
<output>
Baru Mendefinisikan hasil penghitungan
5.    Menggunakan Karakter Khusus
Berikut ini tata cara pengetikkan untuk menampilkan karakter khusus pada halaman html :
Symbol
Description
Caracter
&copy;
Copyright symbol
©
&reg;
registered trademark symbol
®
&#153;
trademark symbol
&nbsp;
nonbreaking space
&lt;
less-than symbol
&gt;
greater-than symbol
&amp;
Ampersand
&
&quot;
quotation mark
Pada tabel di atas hanyalah sebagian dari banyak karakter yang ada dalam HTML. kita hanya mengetikan “&” dan pilih karakter yang akan anda gunakan.




Form Pendaftaran Dengan HTML


Contoh Form Pendaftaran
 Membuat form pendaftaraan yang memiliki design yang hampir sama dengan milik FB tetapi dengan versi HTML kita memasukan script dibawah ini :


<html>

<head><title>Form Pendaftaran</title></head>

<body>

<table border="4" bgcolor="A9C5EB" align="center" height="500" width="400" cellpadding="20">

<tr>

<td>

<b><font color="black" size="10"> Mendaftar </font></b>

<p> Gratis, untuk pelajar </p>

<input type="text" Name="nama" size="20" placeholder="Nama Depan">

<input type="text" Name="nama" size="20" placeholder="Nama Belakang"><br><br>

<input type="text" Name="email" size="46" placeholder="Email Anda"><br><br>

<input type="text" Name="remail" size="46" placeholder="Masukan Ulang Email"><br><br>

<input type="password" Name="sandi" size="46" placeholder="Kata Sandi Baru"><br>

<p><b> Tanggal Lahir </b></p>

<select name="Tanggal">

<option>-Tanggal-</option>

<option value="1">1</option>

<option value="2">2</option>

<option value="3">3</option>

<option value="4">4</option>

<option value="5">5</option>

<option value="6">6</option>

<option value="7">7</option>

<option value="8">8</option>

<option value="9">9</option>

<option value="10">10</option>

<option value="11">11</option>

<option value="12">12</option>

<option value="13">13</option>

<option value="14">14</option>

<option value="15">15</option>

<option value="16">16</option>

<option value="17">17</option>

<option value="18">18</option>

<option value="19">19</option>

<option value="20">20</option>

<option value="21">21</option>

<option value="22">22</option>

<option value="23">23</option>

<option value="24">24</option>

<option value="25">25</option>

<option value="26">26</option>

<option value="27">27</option>

<option value="28">28</option>

<option value="29">29</option>

<option value="30">30</option>

<option value="31">31</option>

<option value="32">32</option>



</select>

<select name="Bulan">

<option>-Bulan-</option>

<option value="1">Januari</option>

<option value="2">Februari</option>

<option value="3">Maret</option>

<option value="4">April</option>

<option value="5">Mei</option>

<option value="6">Juni</option>

<option value="7">Juli</option>

<option value="8">Agustus</option>

<option value="9">September</option>

<option value="10">Oktober</option>

<option value="11">November</option>

<option value="12">Desember</option>

</select>

<select name="Tahun">

<option>-Tahun-</option>

<option value="1980">1980</option>

<option value="1981">1981</option>

<option value="1982">1982</option>

<option value="1983">1983</option>

<option value="1984">1984</option>

<option value="1985">1985</option>

<option value="1986">1986</option>

<option value="1987">1987</option>

<option value="1988">1988</option>

<option value="1989">1989</option>

<option value="1990">1990</option>

<option value="1991">1991</option>

<option value="1992">1992</option>

<option value="1993">1993</option>

<option value="1994">1994</option>

<option value="1995">1995</option>

<option value="1996">1996</option>

<option value="1997">1997</option>

<option value="1998">1998</option>

<option value="1999">1999</option>

<option value="2000">2000</option>

<option value="2001">2001</option>

<option value="2002">2002</option>

<option value="2003">2003</option>

<option value="2004">2004</option>

<option value="2005">2005</option>

<option value="2006">2006</option>

<option value="2007">2007</option>

<option value="2008">2008</option>

<option value="2009">2009</option>

<option value="2010">2010</option>

<option value="2011">2011</option>

<option value="2012">2012</option>

<option value="2013">2013</option>

<option value="2014">2014</option>

<option value="2015">2015</option>

</select><br><br>

<input type="radio" name="Kelamin" value="L">Laki Laki

<input type="radio" name="Kelamin" value="P">Perempuan

<br><br>

<input value="Kirim" style="background-color: 4985D0; height: 50; width: 150;"type="submit">

</td>

</tr>


</body>

</html>











Cara Penggunaan Tag Textarea dalam form HTML




<html>
 <head>
   <title>Belajar Tag Textarea HTML</title>
</head>

<body>
   <form action="proses.php" method="get">

   <h4>Tag textarea dengan atribut: name</h4>
   <textarea name="komentar1">
     Silahkan isi komentar anda
   </textarea>
   <br />

   <h4>Tag textarea dengan atribut: name + cols="40"</h4>
   <textarea name="komentar2" cols="40">
     Silahkan isi komentar anda
   </textarea>
   <br />

   <h4>Tag textarea dengan atribut: name + cols="40" + rows="5"</h4>
   <textarea name="komentar3" cols="40" rows="5">
     Silahkan isi komentar anda
   </textarea>
   <br />

   <h4>Tag textarea dengan atribut: name + readonly</h4>
   <textarea name="komentar4" readonly="readonly">
     Silahkan isi komentar anda
   </textarea>
   <br />

   <h4>Tag textarea dengan atribut: name + disabled</h4>
   <textarea name="komentar5" disabled="disabled">
     Silahkan isi komentar anda
   </textarea>

   </form>

</body>
</html>

Pengertian HTML, Fungsi HTML serta Sejarah HTML Pengertian HTML, Fungsi HTML serta Sejarah HTML. Apa itu HTML ? HTML adalah kepanjangan atau singkatan dari Hyper Text Markup Language. Setiap kita menjelajah di internet, membuka website apapun, kita pasti akan bertemu dengan HTML. Hal ini dikarenakan semua website yang ada diinternet, dibuat dengan menggunakan bahasa markup HTML. Di Artikel kali ini kita akan mengetahui tentang apa yang dimaksud html, fungsi html, sejarah html, cara membuatnya serta mengenal bahasa HTML terbaru yaitu HTML5. Akan saya mulai dengan pengertian html terlebih dahulu. Pengertian HTML pengertian html fungsi html sejarah html HTML adalah bahasa markup internet (web) berupa kode dan simbol yang dimasukkan kedalam sebuah file yang ditujukan untuk ditampilkan didalam sebuah website. Singkatnya, HTML adalah bahasa markup yang digunakan untuk membuat website. Website yang dibuat dengan HTML ini, dapat dilihat oleh semua orang yang terkoneksi dengan internet. Tentunya dengan menggunakan aplikasi penjelajah internet (browser) seperti Internet Explorer, Mozilla Firefox dan Google Chrome. Seperti yang sudah saya jelaskan sebelumnya, HTML adalah singkatan dari Hyper Text Markup Language. Tapi mengetahui singkatannya saja tidak akan cukup. Karena itu saya akan menyajikan arti dari kata kata tersebut. HyperText adalah metode dimana kita "berpindah" disekeliling web, dengan mengeklik sebuah teks yang bernama hyperlink. Hyperlink adalah sebuah teks khusus di internet, dimana saat teks tersebut diklik, akan membawa kita ke halaman web selanjutnya/halaman web lain yang telah ditentukan. Markup adalah hal yang dilakukan oleh tag HTML kepada teks yang ada didalamnya. HTML menandai teks yang berada didalamnya sebagai tipe teks tertentu. Misalnya saja jika kita menandai sebuah teks dengan tag html , maka teks tersebut akan berubah menjadi italic (huruf yang miring). Sedangkan jika kita menandainya dengan , maka teks tersebut akan berubah menajadi bold (huruf tebal). Language yang berarti bahasa. HTML adalah sebuah bahasa, yang memiliki kata kata berupa kode dan syntax seperti bahasa yang lain. Saat ini bahasa HTML masih terus dikembangkan Hal ini dikarenakan pengguna internet semakin hari semakin berkembang pesat. Oleh karena itu bahasa HTML harus ditingkatkan lagi agar bisa menciptakan halaman web yang lebih berkualitas. Untuk itulah dibentuk sebuah organisasi yang bertanggungjawab mengembangkan bahasa HTML. Organisasi ini bernama W3C. Fungsi dan Kegunaan HTML Sebagai bahasa markup internet, HTML memiliki banyak fungsi dan kegunaan. Beberapa manfaat dari HTML diantaranya Untuk Membuat Halaman Web. Bahasa HTML digunakan untuk membuat halaman web. Semua halaman web pasti dibuat dengan menggunakan HTML. Sebagai Pondasi Bagi Sebuah Website. Sebuah rumah jika tidak memiliki pondasi maka akan cepat roboh. Begitu juga dengan website. Jika tidak memiliki HTML sebagai pondasi, kita tidak dapat mengimplementasikan bahasa lainnya seperti CSS (bahasa untuk mendesain website), Javascript (bahasa untuk menambah prilaku website), dan PHP (bahasa pemrograman server website). Untuk menandai teks pada halaman web. Misalnya, kita dapat menandai sebuah teks menjadi bergaris bawah dengan menggunakan tag html Untuk menandai elemen/bagian pada halaman web. Sebuah website memiliki beberapa bagian seperti header, navigasi, main dan footer. Kita dapat menandai setiap bagiannya dengan HTML. Untuk menampilkan informasi dalam bentuk tabel Untuk menambahkan objek seperti audio, video, gambar, dll dalam halaman web Untuk membuat online form Struktur Dasar HTML #1 Element Element terdiri dari 3 bagian, yaitu tag pembuka, isi dan penutup. Contohnya untuk menampilkan judul dari sebuah halaman, kita membuat kode html seperti ini Yang berwarna biru, itu adalah pembuka. Yang warna hijau adalah isi. Sedangkan yang warna merah adalah penutup. Isi adalah optional, dalam artian tidak masalah jika kita tidak memberikan isi. Beda dengan pembuka dan penutup, keduanya harus ada dalam sebuah kode html. Jika tidak maka akan terjadi error, dan kode tidak akan berfungsi. Ada juga pembuka dan penutup yang berbeda dengan contoh diatas. Contohnya seperi ini Pada tag input kita tidak perlu menutupnya dengan ,cukup dengan /> . Bahkan dengan menuliskan > saja juga bisa. #2 Tag Tag adalah teks khusus berupa dua karakter < dan >. Contohnya tag dengan nama head, dengan nama body, dan sebagainya. Tag ini sudah diatur dari sananya, jadi kita tidak boleh membuatnya sendiri. Misal jika kita menulis , jelas tidak akan berfungsi. Untuk lebih memperjelas, berikut ini struktur dasar kode html Hai teman teman, ini website pribadi saya lho.. Penjelasan untuk menandai awal dan akhir dari file HTML berisikan keterangan informasi seperti title dan jenis dokumen sebagai judul halaman web bagian ini adalah konten utama web seperti header, navigasi, artikel , sidebar dan footer Anda dapat menuliskan kode html di aplikasi bawaan Windows, Notepad. Bisa juga mendownload aplikasi khusu untuk menulis kode yaitu Notepad++. #3 Atribut Atribut terdapat didalam script sebuah elemen, fungsinya untuk memberi informasi tambahan tentang elemen. Nilai dari atribut harus ditutup dengan tanda kutip. Kode diatas akan membuat sebuah kotak isian yang dikhususkan untuk menulis password. Dalam artian, jika kita menulis di isian tersebut, tulisan kita akan berubah menjadi bintang bintang seperi ini ******. Sejarah HTML HTML pertama kali diciptakan oleh IBM pada tahun 1980. Saat itu tercetus ide untuk menempatkan elemen elemen yang berguna untuk menandai bagian suatu dokumen seperti judul, alamat dan isi dokumen. Pada akhirnya elemen element tersebut dibentuk menjadi suatu program untuk melakukan pemformatan dokumen secara otomatis. Bahasa pemrograman untuk melakukan tugas ini disebut sebagai bahasa markup. IBM menamai program ini sebagai Generalized Markup Language. Pada tahun 1986, konsep ini disetujui oleh ISO (International Standard Organization) sebagai standar untuk pembuatan dokumen. Bahasa ini dinamai oleh ISO sebagai Standard Generalized Markup Language (SGML) HTML sendiri, adalah bagian dari SGML. Tim Berners-Lee dari CERN mengemukakan sebuah ide tentang pembuatan skrip bahasa pemrograman dan dokumen yang dapat diakes oleh semua komputer tanpa melihat jenis platformnya. Sejak saat itu HTML menjadi lebih populer dibandingkan SGML. Perkembangan HTML Sejak dirilis, bahasa HTML terus mengalami perkembangan HTML 1.0 HTML 1.0 adalah versi pertama dari HTML. Pada saat ini tidak banyak orang yang ikut berpartisipasi dalam pembuatannya. Fitur dari versi ini pun masih terbatas. Antar lain heading, paragraf, hypertext, list, efek tebal dan miring pada teks. Versi 1.0 juga mendukung peletakan gambar, namun tidak mendukung adanya teks disekeliling gambar. HTML 2.0 HTML 2.0 masih membawa fitur sebelumnya dari versi 1.0, dengan tambahan beberapa vitur baru. Fitur tersebut adalah form. Dengan form, kita dapat memasukkan data data seperti nama, alamat, serta komentar. Hadirnya fitur form ini menjadi awal terbentuknya website yang interaktif. HTML 3.0 Pada versi ini, mulai banyak orang yang ikut memberikan kontribusi pada HTML. Fitur baru yang hadir di versi ini salah satunya adalah tabel. Versi HTML ini tidak bertahan lama dikarenakan banyak permasalahan seperti perang antar browser. Karena itu, HTML ini segera diganti lagi menjadi versi 3.2 HTML 3.2 Perang antar browser terus berlanjut dikarenakan mereka membuat tag HTML mereka sendiri. Untuk menghentikan hal ini, dibentuklah sebuah organisasi yang menangani standard dari HTML. Organisasi ini bernama World Wide Web Consortium (W3C). HTML 4.0 Dengan hadirnya W3C sebagai standarisasi HTML, perang browser terhenti. HTML lalu berkembang menjadi HTML 4.0. Versi ini memuat banyak sekali revisi dan perubahan dari versi sebelumnya. Perubahan ini terjadi di hampir seluruh perintah HTML seperti text, link, image, imagemaps, table, form, meta, dan lain lain. HTML 4.01 Versi ini hadir untuk memperbaiki beberapa kesalahan di versi sebelumnya XHTML 1.0 XHTML adalah gabungan dari HTML dan XML. Karena XHTML tidak se-fleksibel HTML, tidak banyak orang yang menyukai versi ini. HTML 5 HTML 5 adalah versi terakhir dari HTML saat artikel ini ditulis. HTML 5 membawa banyak sekali perubahan terhadap versi sebelumnya. Banyak tag baru yang diperkenalkan, seperti









,

Komentar

Postingan populer dari blog ini

PONDOK PESANTREN MIFTAHUL FALAH AL-HASANI SELOTAMBAK KRATON PASURUAN

FOTO SANTRI