Showing posts with label html. Show all posts
Showing posts with label html. Show all posts

Monday, June 20, 2016

HTML Paragraf, Penggunaan dan Pengaturan

PARAGRAF

HTML Paragraf
Paragraf HTML

Bagaimana Membuat Paragraf Dengan HTML ??
Bagaimana Mengatur Perataan Pada Paragraf di HTML ??

HTML : Pengertian Paragraf

Paragraf (Bahasa Indonesia) didefinisikan sebagai bagian yang berasal dari suatu karangan yang terdiri dari sejumlah kalimat, yang isinya mengungkapkan satuan informasi/kalimat dengan pikiran utama sebagai pengendaliannya dan juga pikiran penjelas sebagai pendukungnya.

HTML : Penulisan Paragraf

Penulisan paragraf di dalam HTML di awali dengan Tag P pembuka dan Tag P penutup (<p></p>). Didalam satu paragraf bisa di isi dengan beberapa tag lainnya.

Contoh Syntax :

<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>

HTML : Perataan Pada Paragraf

Pada dasarnya dalam default penulisan paragraf selalu rata kiri, namun jika tidak menyukainya atau ingin menambahkan beberapa perataan seperti rata kanan, rata tengah, rata kanan-kiri kita bisa menggunakan attribut Align didalamnya.

HTML : Attribut Pada Paragraf

Attribut Align adalah sebuah attribut yang digunakan untuk membuat perataan di dalam HTML. Nilai value dari attribut Align ini berupa : left (rata kiri), right (rata kanan), center (rata tengah) dan justify (rata kanan-kiri).

Syntax :

 - Default
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>

- Rata kiri
<p align="left">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>

- Rata Kanan
<p align="right">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>

- Rata Tengah
<p align="center">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>

- Rata Kanan Kiri
<p align="justify">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>

Oke, sekian tutorial kali ini.
Terima Kasih!!!
Wassalamu'alaikum Warohmatullohi Wabarokatuh...

Menambahkan Gambar Dengan HTML Menggunakan Tag IMG

IMG HTML

Pernahkah Anda mendengar Tag IMG ??
Bagaimana Cara Menampilkan Gambar dengan HTML ??

HTML : Tag Image
HTML IMAGE TAG

Tag Image digunakan untuk menampilkan gambar kedalam halaman web, karna tag ini termasuk kedalam "single tag" maka tag ini dituliskan tanpa tag penutup. Penulisan dasar tag ini seperti berikut <img/>.

Attribut SRC

Attribut SRC adalah singkatan dari source (sumber), merupakan attribut yang berisi alamat dari gambar yang akan ditampilkan. Alamat ini bisa relatif atau absolute.

Gambar yang bisa ditampilkan oleh tag IMG dan attribut SRC ini berupa type JPEG/JPG, PNG dan GIF.

Untuk memulainya, sediakan sebuah gambar yang ingin ditampilkan dan letakkan gambar tersebut kedalam satu folder yang sama dengan file html yang akan dibuat.

Dibawah ini saya menggunakan sebuah gambar penguins.jpg yang di letakkan di dalam folder gambar dan akan di tampilkan oleh file HTML dengan nama img.html.

Syntax :

<img src="penguins.jpg"/>

Sekarang coba tampilkan pada web browser milik Anda. Jika gamar yang ditampilkan berukuran terlalu besar kita bisa menambahkan ukuran yang kita tentukan dengan attribut width dan attribut weight.

Disini saya akan memberikan ukuran untuk gambar penguins tersebut dengan ukuran lebar 200px dan tinggi 100px (pixel).

Syntax :

<img src="penguins.jpg" height="100px" width="200px"/>

Selain ketiga attribut tersebut kita bisa menambahkan attribut ALT. Attribut ALT ini adalah singkatan dari Alternative Description, dimana ALT digunakan untuk menampilkan keterangan gambar jika gambar tersebut gagal untuk ditampilkan oleh browser atas sebab gambar salah nama , salah pemanggilan lokasi ataupun jika web browser telah disetting untuk tidak menampilkan gambar.

Syntax :

<img src="penguins.jpg" height="100px" width="200px" alt="Gambar keluarga penguins"/>

Ada satu attribut lagi yang bisa Anda tambahkan kedalam tag IMG tersebut, yaitu attribut TITLE. Attribut TITLE berfungsi untuk menampilkan keterangan gambar namun disaat kursor berada diatas gambar tersebut.

Syntax :

<img src="penguins.jpg" height="100px" width="200px" alt="Gambar keluarga penguins" title="gambar penguins"/>

Hasil Akhir :
Sample Image Tag HTML
Penggunaan Tag Image

Selamat ber-Experiment !!!

Terima Kasih!!!
Wassalamu'alaikum Warohmatullohi Wabarokatuh...

Friday, June 17, 2016

Membuat Link Di HTML

LINK HTML

HTML : Link
HTML : Link
Apakah Link itu ??
Bagaimanakah Cara Membuat Link di HTML ??

HTML : Pengertian Link

Hyperlink atau biasa disebut link merupakan sebuah acuan di dalam dokumen hypertext yang mengarah ke dokumen lain sesuai dengan sumber yang sudah ditentukan.

Link bisa diartikan sebagai sebuah tautan, yaitu tulisan atau gambar yang apabila di klik akan menuju ke halaman tertentu sesuai dengan yang target atau tujuan yang telah ditentukan sebelumnya.

Struktur Penulisan Link

Penulisan link di dalam HTML di awali dan di akhiri dengan tag <a> dan </a> dengan ditambahkan sebuah attribut href="" yang nilainya berisi tautan atau alamat url yang akan di tuju.

Contoh :

<a href="http://www.fittraferdiansyah.info"></a>

Coba jalankan pada browser Anda!
Taraaaaa........ tampilannya tidak ada, terus bagaimana nih agar bisa di klik ?
Didalam apitan tag <a> dan </a> ini dapat kita isi, baik dengan text maupun sebuah gambar yang dinamakan sebagai anchor text.

Untuk mengisi dengan text gunakan kode seperti berikut ini :

<a href="http://www.fittraferdiansyah.info/">Fittra Ferdiansyah</a>

Sedangkan untuk gambar kita gunakan tag image (<img>).

Contoh :

<a href="http://www.fittraferdiansyah.info/"><img src="namagambar.jpg"/></a>

Oke, mari kita lihat hasilnya di browser masing-masing!

Hasil Akhir :
Contoh Penggunaan Link HTML
Sample Link
Terima Kasih!!!
Wassalamu'alaikum Warohmatullohi Wabarokatuh...

Wednesday, April 13, 2016

HALAMAN FORM LOGIN HTML


Pertama, buatlah file dan simpan dengan nama login.php yang isinya adalah html form loginKedua ketikkanlah script html seperti berikut ini :

<!DOCTYPE html>
<html>
<head>
<title>Halaman Masuk / Login</title>
</head>
<body>

</body>
</html>

Ketiga buatlah sebuah DIV baru dengan ID panel-login.

<div id="panel-login"></div>

Ke empat buatlah tag form di dalam apitan DIV dengan ID panel-login yang tadi.

<div id="panel-login">
<form></form>
</div>

Kemudian arahkan pemrosesan dari form tersebut ke file proses-login.php dengan  menambahkan  attribut  action="".

<form action="proses-login.php"></form>

Tambahkan lagi attribut method="" dengan value nya post agar inputan yang dikirimkan nantinya tidak di tampilkan pada addressbar browser.

<form action="proses-login.php" method="post"></form>

Buat lagi sebuah div dengan class namenya baris.

<div class="baris"></div>

Pada class baris buatlah sebuah input dengan disabled="disabled" dan value="@".

<input disabled="disabled" value="@" />

Buat lagi sebuah input dengan type email dan name nya email_user.

<input name="email_user" type="email">

Buat lagi sebuah div dengan class baris dan 2 buah input.
Disable dan yang satunya type nya password dan namenya password_user.

<div class="baris">
<input disabled="disabled" value="#">
<input name="password_user" type="password">
</div>

Buat lagi div dengan class yang sama tapi disini hanya ada satu buah input dengan type="submit" dan value=" Masuk ".

<div class="baris">
<input type="submit" value=" Masuk ">
</div>

Simpan dan Jalankan.

HASIL :

Sunday, January 31, 2016

Friday, January 8, 2016

Pengertian dan Penggunaan Table Dalam HTML

Table?
Apa itu?
Sebuah Meja?

Bukan, table bukanlah sebuah meja melainkan sebuah bagian dari bahasa pemrograman HTML yang berfungsi untuk menampilkan informasi dalam bentuk sel yang terdiri dari bari dan kolom seperti di dalam microsoft office milik microsoft corp.

Didalam table ada beberapa tag yang dapat di fungsikan seperti tag berikut ini : <table></table> ,  <caption></caption>, <tr></tr>, <th></th> , dan <td></td>. Sebenarnya ada lagi beberapa tag di dalam table yang bisa digunakan namun setelah pembaruan yang terus dilakukan oleh pihak pengembang HTML tag berikut ini tidak lagi berfungsi di dalam browser : <thead></thead> , dan <tfoot></tfoot>.


Nah, sekarang saatnya kita bahas satu-persatu mengenai tag di atas dan cara penggunaannya!
<table></table> digunakan sebagai penanda bahwa tag tersebut adalah sebuah table yang artinya akan di isi oleh beberapa baris dan kolom.

CAPTION atau <caption></caption> adalah sebuah tag yang berfungsi untuk memberikan sebuah judul dari sebuah table yang di tampilkan di sisi atas table tersebut.

<tr></tr> atau table row adalah sebuah tag yang digunakan untuk membuat sebuah baris didalam table. memisahkan baris yang satu dengan yang lainnya.

Di dalam tr ada tag yang berfungsi sebagai kolom yaitu th dan td.
Mari kita bahas lagi.

TH atau <th></th> (table heading) adalah sebuah tag yang berfungsi hampir sama dengan tag td hanya saja di dalam tag TH, kata-kata yang kita tuliskan akan ditampilkan lebih tebal dari pada tag td, dan tulisan yang berada di dalamnya akan menempati posisi di tengah-tengan kolom.

TD atau <td></td> (table data) adalah sebuah tag yang berfungsi dalam membuat sebuah kolom.

Nah sampai disini apakah Anda sudah mengerti sedikit tentang penjelasan di atas yauitu mengenai table?

Jika sudah mari kita lanjutkan lagi dengan pembahasan beberapa attribut di dalam table yang bisa Anda gunakan untuk mempercantik tampilan table Anda.

Yang pertama adalah attribut bgcolor biasa digunakan untuk memberikan warna latar belakang pada table. Jika Anda pasang pada tag TR maka akan memberi warna pada satu baris saja. Dan jika Anda memasangnya di dalam tag TD maka sudah di ketahui bahwa akan ada sebuah kolom yang berpengaruh.

Kedua, adalah width digunakan untuk memberikan nilai lebar dari sebuah table yang Anda buat.
Valuenya bisa Anda gunakan pixel atau PX ataupun juga Persentase atau %.

Yang ketiga ada CELLSPACING yaitu pemberian jarak atar sel atau kolom dan baris di dalam table.

Yang keempat adalah CELLPADDING yaitu pemberian jarak antara tulisan dengan sel yang ada.

Yang Kelima da yang dinamakan dengan ALIGN atau perataan secara horizontal.

Dan yang keenam ada VALIGN atau perataan secara vertikal.

Ketujuh ada yang namanya BORDER atau garis pinggir yang memisahkan anatar sel.

Mari kita aplikasikan kedalam bentuk utuh sebuah table data siswa berikut :

<!DOCTYPE html>
<html>
<head>
<title>Table Data Siswa</title>
</head>
<body>

<table border="1" bgcolor="lime">
<caption>Table Data Siswa</caption>
<tr>
<th>No</th>
<th>Nama Lengkap</th>
<th>Jenis Kelamin</th>
<th>T/T/L</th>
</tr>

<tr>
<td>1</td>
<td>Fittra Ferdiansyah</td>
<td>Laki-Laki</td>
<td>30/Desember/1996</td>
</tr>
</table>

</body>
</html>

Maka hasilnya akan seperti berikut ini :

html table


Terima Kasih
#ADMIN FITTRA FERDIANSYAH

Saturday, December 26, 2015

CREATE TWITTER WIDGET BLOGGER OR WEBSITE

Assalamu'alaikum Warohmatullohi Wabarokatuh.

Ya, sesuai dengan judul artikel kali ini kita akan membahas mengenai sebuah cara membuat dan memasang widget Twitter ke dalam sebuah website atau blog. Langkah pertama yang harus Anda lakukan adalah Anda sudah memiliki sebuah akun Twitter. Jika belum kami sarankan Anda untuk mendaftarkan diri terlebih dahulu.



Setelah memiliki sebuah akun, pastikan Anda telah melakukan login ke dalam system Twitter.
Atau buka di twitter.com masukan alamat email/username dan password Twitter Anda. Kemudian klik masuk/login.

Langkah selanjutnya setelah Anda sukses untuk login kedalam twitter, klik pada sebelah kanan atas di bagian foto profil Anda. Kemudian pilih pengaturan. Kemudian lihat pada bagian kiri dan scroll kebawah. Klik pada tulisan Widget. 

Pilih buat baru, jika Anda belum pernah sama sekali membuatnya.

Kemudian Anda dapat melihat beberapa pilihan widget yang bisa Anda buat beserta demo tampilannya/previewnya.

Pilihan yang bisa Anda pilih adalah :


  • Timeline Pengguna
  • Suka
  • Daftar
  • Cari
  • Koleksi


Nah, untuk mempersingkat kali ini yang akan kita bahas adalah Timeline Pengguna, Anda dapat mengatur tinggi dari widget yang akan Anda inginkan sesuai dengan keinginan Anda. untuk default dari twitter adalah 600px. Anda dapat mengubahnya menjadi 400px atau selebihnya.
Untuk tema, tersedia dua pilihan. Terang berarti background adalah putih. Untuk Gelap, background adalah hitam.

Warna tautan bisa Anda ubah dengan warna selera Anda. Jika pratinjau sudah sesuai dengan keinginan Anda, maka langkah selanjutnya adalah Anda klik pada "Buat Widget". Setelah selesai copy kode yang diberikan oleh pihak twitter pada bagian bawah pratinjau.

Jika Anda meletakkan widget tersebuat pada sebuah website, maka langkah yang Anda lalui telah selesai hanya perlu pastekan pada website Anda. Sedangkan untuk pemasangan di blogger atau wordpress. Langkah selanjutnya adalah masuk pada draff blogger --^ tata letak --^ dan tambahkan gadget --^ pilih html/javascript.

Ketikkan pada kolom judul "Follow Us On Twitter" dan pada bagian content pastekan kode yang telah Anda copy tadi dari twitter.

Thursday, December 17, 2015

PENGENALAN TAG SELECT FORM HTML

Fungsi Tag Select Dalam Pembuatan Form HTML

selection form html diskusi web sumut
image selection form HTML

Tag select di dalam HTML digunakan untuk membuat objek form yang berupa list/daftar pilihan yang dapat dipilih oleh user. Biasanya tag select digunakan untuk "memaksa" user memilih salah satu dari pilihan yang tersedia. Pilihan ini telah didefenisikan pada saat form dibuat. Pada penggunaan tag select ini, kita juga membutuhkan tag option sebagai "isi" dari tag select.




Format dasar pembuatan select dalam HTML adalah sebagai berikut :

<select>
<option>Pilihan 1</option>
<option>Pilihan 2</option>
<option>Pilihan 3</option>
</select>

Anda tidak harus menggunakan tag select di dalam Form HTML, namun bisa juga digunakan tanpa tag form. Akan tetapi jika digunakan diluar form, kita membutuhkan bantuan bahasa pemograman lain seperti javascript untuk memproses hasilnya.

Atribut name: Untuk Pemrosesan Tag Select

Atribut name untuk tag select digunakan sebagai identitas dari tag select tersebut. Identitas ini diperlukan pada saat pemrosesan di sisi server (misalnya menggunakan PHP). Atribut name inilah yang akan menjadi varibel penampung nilai yang dipilih oleh user. Atribut name diletakkan di dalam tag select, bukan di dalam tag option. Berikut contoh penulisan atribut name untuk tag select:

<select name="kategori_pilihan">
<option>Pilihan 1</option>
<option>Pilihan 2</option>
<option>Pilihan 3</option>
</select>

Atribut value: Sebagai Nilai untuk Tag Option

Atribut value digunakan di dalam tag option. Nilai dari atribut inilah yang akan dikirimkan kedalam web server, sehingga disarankan menggunakan nilai yang mencerminkan pilihan user. Nilai dari value tidak harus sama dengan apa yang dilihat user.

Berikut contoh penulisannya:

<select>
<option value="daftar1">Pilihan 1</option>
<option value="daftar2">Pilihan 2</option>
<option value="daftar3">Pilihan 3</option>
</select>

Usahakan untuk memberi nilai value berupa nilai yang singkat namun bermakna sesuai dengan pilihan yang ditampilkan.

Atribut selected: Menampilkan Nilai Default dari Tag Select

Atribut selected digunakan pada tag option. Jika sebuah tag option mememiliki atribut selected, maka pada saat form ditampilkan, pilihan tag inilah yang akan tampil sebagai nilai awal dari select (nilai default). Nilai dari atribut ini adalah dirinya sendiri, sehingga penulisannya menjadi selected="selected". Berikut contoh penulisannya:

<select>
<option>Pilihan 1</option>
<option selected="selected">Pilihan 2</option>
<option>Pilihan 3</option>
</select>

Atribut Size: Menentukan Besar tampilan Select

Atribut size digunakan untuk menentukan besar dari tampilan tag select. Jika tidak ditulis, tag select memiliki nilai default size="1", sehingga hanya 1 pilihan yang terlihat ketika user memilih pilihan yang ada.

Namun jika anda menambahkan atribut size="2", maka pada saat form ditampilkan, tag select akan ditampilkan sebanyak 2 baris, bukan 1 baris seperti biasanya.

Atribut size ini umumnya digunakan apabila tag select dirancang untuk dapat dipilih dengan beberapa pilihan sekaligus. Untuk keperluan ini, atribut size biasanya di kombinasikan dengan atribut multiple yang akan kita bahas pada postingan selanjutnya.

Berikut contoh penulisan atribut size untuk tag select:

<select size="3">
<option>Pilihan 1</option>
<option>Pilihan 2</option>
<option>Pilihan 3</option>
</select>

Info : Setiap browser menampilkan dengan perbedaan dalam tampilan daftar.


Terima Kasih
#ADMIN

Sunday, December 13, 2015

PENGENALAN HTML DASAR

HTML
Pengertian HTML

Hyper Text 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.

Sejarah HTML
pengenalan dasar html disqus sumut
Pada tahun 1980 seorang ahli fisika, Tim Berners-Lee, dan juga seorang kontraktor di CERN (Organisasi Eropa untuk Riset Nuklir) mengusulkan dan menyusun ENQUIRE, sebuah sistem untuk ilmuwan CERN dalam membagi dokumen. Sembilan tahun kemudian, Berners-Lee mengusulkan adanya sistem markah berbasis internet. Berners-Lee menspesifikasikan HTML dan menulis jaringan beserta perangkat lunaknya di akhir 1990. Di tahun yang sama, Berners-Lee dan Robert Cailliau, insinyur sistem data CERN berkolaborasi dalam sebuah permintaan untuk pendanaan, namun tidak diterima secara resmi oleh CERN. Di catatan pribadinya sejak 1990 dia mendaftar "beberapa dari banyak daerah yang menggunakan hypertext" dan pertama-tama menempatkan sebuah ensiklopedia.
Penjelasan pertama yang dibagi untuk umum dari HTML adalah sebuah dokumen yang disebut "Tanda HTML", pertama kali disebutkan di Internet oleh Tim Berners-Lee pada akhir 1991. Tanda ini menggambarkan 18 elemen awal mula, versi sederhana dari HTML. Kecuali untuk tag hyperlink, yang sangat dipengaruhi oleh SGMLguid, in-house Standard Generalized Markup Language (SGML) berbasis format dokumen di CERN. Sebelas elemen ini masih ada di HTML 4.
HTML adalah bahasa markah yang digunakan peramban untuk menafsirkan dan menulis teks, gambar dan bahan lainnya ke dalam halaman web secara visual maupun suara. Karakteristik dasar untuk setiap item dari markah HTML didefinisikan di dalam peramban, dan karakteristik ini dapat diubah atau ditingkatkan dengan menggunakan tambahan halaman web desainer CSS. Banyak elemen teks ditemukan di laporan teknis ISO pada tahun 1988 TR 9537 Teknik untuk menggunakan SGML, yang pada gilirannya meliputi fitur bahasa format teks awal seperti yang digunakan oleh komandan RUNOFF dikembangkan pada awal 1960-an untuk sistem operasi: perintah-perintah format ini berasal dari perintah yang digunakan oleh pengetik untuk memformat dokumen CTSS secara manual. Namun, konsep SGML dari markah umum didasarkan pada unsur-unsur daripada hanya efek cetak, dengan pemisahan struktur dan markah juga; HTML telah semakin bergerak ke arah ini dengan CSS.
Sejarah Versi HTML
       1.    24 November 1995
HTML 2.0 dipublikasikan sebagai IETF RFC 1866. Penambahan RFC memperbanyak kemampuan untuk:
    1. November 25, 1995: RFC 1867 (mengunggah file berdasarkan bentuk)
    2. May 1996: RFC 1942 (tabel)
    3. August 1996: RFC 1980 (peta gambar berbasis klien)
    4. January 1997: RFC 2070 (internasionalisasi)


        2.    14 Januari 1997
HTML 3.2 dipublikasikan sebagai Konsorsium World Wide Web. Versi ini merupakan versi pertama yang dikembangkan dan distandarisasi secara khusus oleh Konsorsium World Wide Web, sebagaimana IETF sudah menutup kelompok kerja HTMLnya pada 12 September, 1996.
Pada awalnya disebut "Wilbur",HTML 3.2 menghilangkan rumus matematika sama sekali yang sedang berkonsiliasi atas kasus tumpang tindih antara berbagai kepemilikan dan mengadopsi sebagian besar tanda markah visual dari Netscape. Elemen kedip dari Netscape dan elemen marquee besutan Microsoft dihilangkan karena kesepakatan bersama antara kedua perusahaan. Sebuah markup untuk rumus matematika serupa dengan yang ada dalam HTML tidak memiliki standar sampai 14 bulan kemudian di MathML.

         3.    18 December 1997

HTML 4.0 was published as a W3C Recommendation . It offers three variations:
a.     Strict, in which deprecated elements are forbidden,
b.    Transitional, in which deprecated elements are allowed,
c.     Frameset, in which mostly only frame related elements are allowed.

Initially code-named "Cougar", HTML 4.0 mengadopsi banyak tipe elemen dan atribut yang spesifik untuk peramban.HTML 4 adalah sebuah aplikasi SGML sesuai dengan ISO 8879 – SGML.

Kegunaan

Dokumen HTML mirip dengan dokumen tulisan biasa, hanya dalam dokumen ini sebuah tulisan bisa memuat instruksi yang ditandai dengan kode atau lebih dikenal dengan TAG tertentu. Sebagai contoh jika ingin membuat tulisan ditampilkan menjadi tebal seperti: TAMPIL TEBAL, maka penulisannya dilakukan dengan cara: <b> TAMPIL TEBAL</b>. Tanda <b> digunakan untuk mengaktifkan instruksi cetak tebal, diikuti oleh tulisan yang ingin ditebalkan, dan diakhiri dengan tanda </b> untuk menonaktifkan cetak tebal tersebut. HTML lebih menekankan pada penggambaran komponen-komponen struktur dan format di dalam halaman web daripada menentukan penampilannya. Sedangkan penjelajah web digunakan untuk menginterpretasikan susunan halaman ke gaya built-in penjelajah web dengan menggunakan jenis tulisan, tab, warna, garis, dan perataan text yang dikehendaki ke komputer yang menampilkan halaman web. Salah satu hal Penting tentang eksistensi HTML adalah tersedianya Lingua franca (bahasa Komunikasi) antar komputer dengan kemampuan berbeda. Pengguna Macintosh tidak dapat melihat tampilan yang sama sebagaimana tampilan yang terlihat dalam pc berbasis Windows. Pengguna Microsoft Windows pun tidak akan dapat melihat tampilan yang sama sebagaimana tampilan yang terlihat pada pengguna yang menggunakan Produk-produk Sun Microsystems. namun demikian pengguna-pengguna tersebut dapat melihat semua halaman web yang telah diformat dan berisi Grafika dan Pranala.

Kegunaan Lain

·         Mengintegerasikan gambar dengan tulisan.
·         Membuat Pranala.
·         Mengintegerasikan berkas suara dan rekaman gambar hidup.
·         Membuat form interaktif.

Menyunting Format Tulisan
HTML memungkinkan seseorang untuk menyunting tampilan atau format berkas yang akan dikirimkan melalui media daring. Beberapa hal yang dapat dilakukan dalam menentukan format berkas adalah:
·         Menampilkan suatu kelompok kata dalam beberapa ukuran yang dapat digunakan untuk judul, heading dan sebagainya.
·         Menampilkan tulisan dalam bentuk cetakan tebal
·         Menampilkan sekelompok kata dalam bentuk miring
·         Menampilkan naskah dalam bentuk huruf yang mirip dengan hasil ketikan mesin ketik
·         Mengubah-ubah ukuran tulisan untuk suatu karakter tertentu.

Markah /Tanda
Secara garis besar, terdapat 4 jenis elemen dari HTML:
· Struktural. Tanda yang menentukan level atau tingkatan dari sebuah tulisan (contoh, <h1>Golf</h1> akan memerintahkan peramban untuk menampilkan "Golf" sebagai tulisan tebal besar yang menunjukkan sebagai Heading 1.

·      Presentasional. Tanda yang menentukan tampilan dari sebuah tulisan tidak peduli dengan level dari tulisan tersebut (contoh, <b>boldface</b> akan menampilkan bold. Tanda presentasional saat ini sudah mulai digantikan oleh CSS dan tidak direkomendasikan untuk mengatur tampilan tulisan,
·     Hiperteks. Tanda yang menunjukkan pranala ke bagian dari dokumen tersebut atau pranala ke dokumen lain (contoh, <a href="http://www.sumut.xyz/"> Disqus Sumut</a> akan menampilkan Wikipedia sebagai sebuah hyperlink ke URL tertentu),

·         Elemen widget yang membuat objek-objek lain seperti tombol (<button>), daftar (<li>), dan garis horizontal (<hr>). Konsep hiperteks pada HTML memungkinkan pembuatan tautan pada suatu kelompok kata atau frasa untuk menuju ke bagian manapun dalam World Wide Web,
Ada tiga macam pranala (link) yang dapat digunakan:
·         Pranala menuju bagian lain dari page.
·         Pranala menuju page lain dalam satu web site.
·         Pranala menuju resource atau web site yang berbeda.
Selain markup presentasional, markup yang lain tidak menentukan bagaimana tampilan dari sebuah tulisan. Namun untuk saat ini, penggunaan tag HTML untuk menentukan tampilan telah dianjurkan untuk mulai ditinggalkan, dan sebagai gantinya digunakan Cascading Style Sheets.

Contoh dokumen HTML sederhana

Untuk HTML 4 Strict
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html>
        <head bgcolor=black text=white>
               <title>Selamat Datang HTML</title>
        </head>
        <body>
               <p>Halo dunia!</p>
        </body>
</html>
Untuk HTML 5 
<!DOCTYPE HTML>
<html>
        <head style="background-color: black; color: white;">
               <title>Selamat Datang HTML</title>
        </head>
        <body>
               <p>Halo dunia!</p>
        </body>
</html>
Head
Dokumen HTML diapit oleh tag <HEAD></HEAD>. Di dalam bagian ini biasanya dimuat tag TITLE yang menampilkan judul halaman pada titlenya browser. Selain itu Bookmark juga menggunakan tag TITLE untuk memberi mark suatu web site. Browser menyimpan “title” sebagai bookmark dan juga untuk keperluan pencarian (searching) biasanya title digunakan sebagai keyword. Header juga memuat tag META yang biasanya dapat digunakan untuk menentukan informasi tertentu mengenai dokumen HTML. Anda bisa menentukan author name, keywords, dan lainnya pada tag META.
Contoh:
<meta name="author" content="ubuntu-online">
Body
Bagian BODY, yang dinyatakan dengan tag <BODY>…</BODY>, merupakan tubuh atau isi dari dokumen HTML dimana anda meletakan informasi yang akan ditampilkan pada browser.


Tag
HTML tidak membedakan penggunaan huruf besar ataupun huruf kecil dari suatu elemen. Suatu elemen HTML terdiri dari tag-tag beserta teks yang ada dalam tag-tag tersebut. Tag ini dinyatakan dengan tanda lebih kecil (<) dan tanda lebih besar (>).
Tag biasanya merupakan suatu pasangan yang disebut dengan:
·         Tag awal, dinyatakan dalam bentuk <nama tag>
·         Tag akhir, dinyatakan dalam bentuk </nama tag>
Formatnya: <nama tag> teks yang ditampilkan </nama tag>.
Contoh: untuk menampilkan teks dalam format teks miring Teks ini terlihat miring di browser anda dengan perintah HTML <i>Teks ini terlihat miring di browser Anda</i>
Atribut

Tag awal bisa memiliki beberapa buah atribut yang menyatakan karakteristik dari tag tersebut. Misalnya, <P STYLE="text-align:left"> digunakan untuk membuat rata kiri suatu paragraf. Tag yang digunakan adalah <P> dan atribut yang menyertainya adalah STYLE dengan nilai "text-align:left". Nilai atribut STYLE ditulis dalam bahasa CSS.

TERIMA KASIH
#ADMIN