Senin, 07 November 2016

Sejarah HTML

SEJARAH HTML
Hypertext Markup Language (HTML) adalah bahasa yang digunakan untuk menulis halaman web. HTML merupakan pengembangan dari standar pemformatan dokumen teks yaitu Standard Generalized Markup Language (SGML). HTML sebenarnya adalah dokumen ASCII atau teks biasa, yang dirancang untuk tidak tergantung pada suatu sistem operasi tertentu.
HTML dibuat oleh Tim Berners-Lee ketika masih bekerja untuk CERN dan dipopulerkan pertama kali oleh browser Mosaic. Selama awal tahun 1990 HTML mengalami perkembangan yang sangat pesat. Setiap pengembangan HTML pasti akan menambahkan kemampuan dan fasilitas yang lebih baik dari versi sebelumnya. Namun perkembangan resmi dikeluarkan pada bulan November 1995 oleh IETF (Internet Engineering Task Force).
HTML 2.0 ini merupakan penyempurnaan dari HTML+ (1993).
HTML 3.0 (1995) memberikan kemampuan lebih daripada versi sebelumnya. Sebuah usaha dari World Wide Web Consortium’s (W3C) HTML Working Group pada tahun 1996 menghasilkan HTML 3.2. HTML versi ini secara resmi diterbitkan pada bulan Januari 1997. HTML versi terbaru adalah HTML 4.01 yang dikeluarkan secara resmi oleh W3C pada tanggal 24 April 1998. HTML merupakan perbaikan dari HTML 4.0 yang lebih dulu diterbitkan. (18 Desember 1997).
DASAR HTML
Mendesain HTML berarti melakukan suatu tindakan pemrograman. Namun HTML bukanlah sebuah bahasa pemrograman. Namun HTML hanyalah berisi perintah-perintah yang telah terstruktur berupa tag-tag penyusun. Menuliskan tag-tag HTML tidaklah sebatas hanya memasukkan perintah-perintah tertentu agar HTML kita dapat di akses oleh browser. Mendesain HTML adalah adalah sebuah seni tersendiri. Homepage yang merupakan implementasi dari HTML adalah refleksi dari orang yang membuatnya. Untuk itu kita perlu mendesainnya dengan baik agar para pengunjung homepage yang kita buat merasa senang dan bermanfaat.
Mendesain HTML dapat dilakukan dengan dua cara:
1. Menggunakan HTML Editor, seperti Microsoft FrontPage, Adobe Dreamweaver, dan lain-lain. Dapatkan editor HTML lainnya disini.
2. Dengan cara menuliskan sendiri secara manual satu persatu tag-tag HTML ke dalam dokumen HTML.
PERKEMBANGAN HTML
Sebelum suatu HTML disahkan sebagai suatu dokumen HTML standar, ia harus disetujui dulu oleh W3C untuk dievaluasi secara ketat.
Setiap terjadi perkembangan suatu versi HTML, maka mau tak mau browser pun harus memperbaiki diri agar bisa mendukung kode-kode HTML yang baru tersebut. Sebab jika tidak, browser tak akan bisa menampilkan HTML tersebut.
HTML versi 1.0
Kemampuan yang dimiliki versi 1.0 ini antara lain heading, paragraph, hypertext, list, serta cetak tebal dan miring pada teks. Versi ini juga mendukung peletakan image pada dokumennya tanpa memperbolehkan meletakkan teks disekelilingnya (wrapping).
HTMl versi 2.0
Pada versi ini, penambahan kualitas HTML terletak pada kemampuannya untuk menampilkan suatu form pada dokumen. Dengan adanya form ini, maka kita dapat memasukkan nama, alamat, serta saran/kritik. HTML versi 2.0 ini merupakan pionir dari adanya homepage interaktif.
HTML versi 3.0
HTML versi 3.0 menambahkan beberapa fasilitas baru seperti table. Versi ini yang disebut juga sebagai HTML+ tidak bertahan lama dan segera digantikan HTML versi 3.2.
HTML versi 4.0
HTML versi 4 ini merupakan HTML versi terakhir pada saat sumber ini diambil. HTML ini memuat banyak sekali perubahan dan revisi dari pendahulunya. Perubahan ini terjadi di hampir segala perintah-perintah HTML seperti table, image, link, text, meta, imagemaps, form, dan lain- lain.
Kemudian lahir HTML versi 4.01 yang dikeluarkan secara resmi oleh W3C pada tanggal 24 April 1998. HTML 4.01 menjadi standart pada tahun 1999. HTML 4.01 merupakan perbaikan dari HTML versi 4.0 yang terlebih dahulu diterbitkan (18 Desember 1997). HTML versi HTML 4.01 masih standart resmi sampai sekarang ini .
HTML 5
HTML 5 merupakan perkembangan html generasi saat ini dan merupakan generasi terakhir dan mungkin akan berkembang lagi mengikuti perkembangan jamanAda

Minggu, 06 November 2016

DASAR-DASAR PEMROGRAMAN HTML

DASAR – DASAR PEMROGRAMAN HTML

DASAR – DASAR PEMROGRAMAN HTML

kali ini saya akan membahas artikel tentang Dasar – dasar  HTML artikel ini saya peruntukan bagi tingkat Pemula yang ingin menambah Wawasan atau ingin belajar tentang Code  HTML. di sini penulis akan menjelaskan bagaimana website di bangun menggunakan tag-tag HTML. namun ada banyak hal yang harus kalian pahami yaitu mengenai sintak – sintak pada penggunaan code HTML Tersebut. maka dari itu penulis ingin membagikan sedikit ilmu yang penulis ketahui tentang Sintak – sintak Tersebut. Ok kita langsung saja ke TKP heheheehe…………
Example :
<br> Hallo Word !! </ br >
nah ini adalah sedikit contoh penggunaan tag HTML . Dibawah ini adalah tag tag HTML yang Sering di pakai, konsep penggunaanya sama seperti di atas dimulai dengan <>dan akan di akhiri dengan </>
<br>……………….</br> ( buat break )
<p>………………..</p> ( buat paragraf )
<pre>………………</pre> ( buat membuat tulisan apa adanya )
<Left>……………</Left> ( Rata Kiri )
<center>……………</center> ( Rata Tengah )                                    <Right>……………</Right> ( Rata Kanan )
<HR size=x>              : Menentukan tebal garis
<HR widht=x>          : Menentukan lebar garis dalam ukuran pixel
<HR widht=x%>       : Menentukan lebar garis sebesar x% dari lebar monitor
<HR align=nilai>      : Menentukan posisi garis.Nilai align adalah                                                                         right,left,atau center
<HR noshade>           : Menghilangkan bentuk 3D dari garis.
example    : <HR size=3 align=center widht=50%>
HEADING
example    : <H1>………….</H2>
<strong>…….</strong>    : Menebalkan teks
<em>………..</em>             : Menbuat teks miring
<cite>………</cite>             : Membuat teks miring
<code>……</code>            : Membuat teks monospace
<sup>…….</sup>                : membuat tulisan lebih tinggi dari isi teks lainya
<sub>…….</sub>                : membuat tulisan lebih rendah dari isi teks lainya
FONT
Example    : <font size=x>isi teks</font>    :Memiliki aturan dari ukuran nilai 1 sampai 7.
JENIS FONT
Digunakan bila kita ingin memakai jenis font tertentu dalam tulisan di dokumen HTML.
misalnya kita ingin menggunakan font  Harlow Solid Italic.
Example    : <font Face =Harlow Solid Italic>isi teks</font>
 WARNA FONT
Example :    <Font color=”red”>Saya Itu Lucu dan Imut</font>
Warna yang bisa di gunakan    :
>  Aqua            > Navy       > dan banyak lagi.
> Black            > Olive
> Blue              > Purple
> Funchsia      > Red
> Gray            > Silver
> Green           > Teal
> Lime            > Yellow
> Maroon         > White
Penggunaan font bisa digabungkan,lihat contoh berikut :
<font color= green face=arial size=4> Isi Teks </font>
untuk baground color :
example        :  <body bgcolor=”#6600CC”>
<body background=”cabg007.jpg”> :untuk body background
MEMASUKKAN GAMBAR
format gambar yang ditampilkan adalah yang bertipe(.jpg,.jpeg),GIF(.gif),bitmap(.bmp)
cntoh:(garpu.jpeg),(garpu.jpg),(cincin.gif),(mobil.bmp)
Jadi kalau ada gambar dengan format selain di atas harus dikonversikan menjadi salah
satu tipe diatas sesuai dgan kebutuhan.
MEMASUKKAN GAMBAR PADA WEB PAGE
Untuk memasukan gambar dalam web page digunakan perintah dengan
> sintaks:<img src=”nama_file”>
> example : <img src=”cincin.jpg”>
PERINTAH LETAK TEKS TERHADAP GAMBAR 
Gambar yang disisipkan pada web page dapat di atur letaknya terhadap teks supaya
letak teks proposional trhadap gambar.
PERINTAH UNTUK MENGATUR LETAK TEKS TERHADAP GAMBAR:
<img src=”gambar.jpg”align=right|left|bottom|Top|middle|center>
> Untuk posisi lainya bisa dimasukkan nilai align=baseline|absbottom|tekstop

Tugas praktikum pemrograman HTML


BAB 2

PRATIKUM 1
<html>
<head>
<tittle>contoh</title>
</head>
<body>
SEDANG BELAJAR PEMROGRAMAN WEB
</body>
</html>


PRATIKUM 2
<html>
<head>
<title>contoh2</title>
</head>
<body bgcolor="#0000ff"text="#ff0000">
SEDANG BELAJAR PEMROGRAMAN WEB
</body>
</html>

PRATIKUM 3
<html>
<head>
<title>paragraf</title>
</head><body>
<p>selamat datang</p>
<p>di dunia HTML</P>
<P>Elemen paragraf ditandai dengan tag P dan setiap paragraf baru ditampilkan pada baris baru</p>
<p align="left">rata kiri</p>
<p align="right">rata kanan</p>
<p align="center">rata tengah</p>
<p align="justiyf">rata kiri kanan</p>
</body>
</html>

PRATIKUM 4
<html><head>
<title>paragraf</title>
</head><body>
<p>elemen paragraf<BR> ditandai dengan tag P <BR> dan setiap paragraf baru <BR> ditampilkan pada baris baru</p>
</body>
</html>

PRATIKUM 5
<html><head>
<title>heading</title>
</head><body>
<h1>heading 1</h1>
<h2>heading 2</h2>
<h3>heading 3</h3>
<h4>heading 4</h4>
<h5>heading 5</h5>
<h6>heading 6</h6>
</body>
</html>

PRATIKUM 6
<html><body color="silver">
garis lebar 80%, rata kiri<hr width="80%"align="left">
garis lebar 80%, rata kanan<hr width="80%"align="right">
garis normal rata tengah<hr align="center">
garis ukuran "10", rata tengah, lebar, "70%"<hr size="10" align="center" width="70%">
garis lebar "65%", rata kiri, ukuran "15"noshade<hr width="65%" align="left" size="15"noshade>
<p><hr>
<i>copyright &copy; nama anda</i>
</body>
</html>


BAB 3

PRATIKUM 1
format_font.html
<html>
<head>
<title>formatting font</title>
</head>
<body>
<b>bold</b>
<br>
<u>underline</u>
<br>
<i>italic</i>
<br>
<strong>strong</strong>
<br><em>emphasis</em>
<br>
<s> ini dicoret</s>
<br>
x<sup>3</sup> + 2x<sup>2</sup>-5
<br>
h<sub>2</sub>o
</body></html>

PRATIKUM 2
kharakter khusus.html
<html>
<head>
<title>karakter khusus</title>
</head>
<body>
copyright &copy; <br>
trademark &trade; <br>
registered &reg; <br>
poundsterling &pound; <br>
yen &yen; <br>
euro &euro; <br>
</body>
</html>

PRATIKUM 3
identitas.html
<html>
<head>
<title>ceritku ceritamu</title>
</head>
<body>
<dd>engkau datang membwa sejarh_
dari kota kecil menuju kota besar_
indonesia rindu pemimpin sepertimu_
semog da tempat bagimu untuk dipilih_</dd>
<BLOCKQUOTE>memimpin negri ini bukanlah surga_
menyambung warisan panasnya neraka_
tak semudah balikkan punggung tnganmu_
esti seirama beresolusi_</BLOCKQUOTE>
<DL>
<DT>kami gantung harpan kami_
dibahu pemimpin kami</DT>
</DL>
</BODY>
</HTML>


BAB 4
PRATIKUM 1a
list_ol.html
<html>
<body>
<b> SISTEM KOMPUTER</B>
<OL TYPE="I">
<B><LI>BRAIN WARE</B>
<B><LI>HARDWARE</B>
 <OL TYPE="A">
 <LI>INPUT DEVICE
 <LI>OUTPUT DEVICE
 <LI>CPU
 <LI>STORAGE DEVICE
 </OL>
<B><LI>SOFTWARE</B>
<OL TYPE="a">
<li>sistem operasi
<ol type="i">
<li>windows
<li>linux
</ol>
<li>aplikasi
<ol>
<li>MS.word
<li>coreldraw
</ol></ol></ol>
</body>
</html>

PRAKTIKUM 1b
LIST_UL.HTML
<html><body>
<B>SISTEM KOMPUTER</B>
<UL TYPE="Disc">
<b><li>HARDWARE</B>
 <ULTYPE="CIRCLE">
 <LI>INPUT DEVICE
 <LI>OUTPUT DEVICE
 <LI>CPU
 <LI>storage device
 </ul>
<b><li>SOFTWARE</b>
<ul type="square">
 <li><u>sistem operasi</u>
 <li><u>aplikasi</u>

  </ul></ul><BODY></HTML>


PRAKTIKUM 2a
LATIHAN 1.HTML
<html>
<head>
<tile>latihan1</title>
</head>
<body bgcolor="red">
<p>latihan satu</p>
<body>
</html>

LATIHAN 2.HTML
<html>
<head>
<title>latihan2</title>
</head>
<body bgcolor="blue">
<p>latihan dua</p>
<body>
</html>

LATIHAN 3.HTML
<html>
<head>
<title>latihan3</title>
</head>
<body bgcolor="yellow">
<p>latihan tiga</p>
<body>
</html>


PRAKTIKUM 2b
JENIL LINK.HTML
<html>
<head>
</head>
<body>
<A NAME="TOP">
<BR>
<H1>link secara relatif, lihat contoh dibawah ini:</h1>
<p>
<A HREF="PAGE_2.html">klik disini</A>jika mau ke halaman berikutnya
</p>
<H1>link secara absolut, lihat contoh dibawah ini:</H1>
<P>
KLIK <A HREF="http://www.facebook.com">facebook</A>menuju ke facebook
</p>
<p>
<h1>membuat window baru untuk link:</h1>
open <A HREF="http://www.mongosoft.com"TARGET="_blank">my home page</A>
with new window.
</p><h1>membuat link tanpa garis bawah:</h1><p>
<A HREF="http://www.mongosoft.com"style="text-decoration:none">klik
this link </A>,Looks it's not use underline.
</p><p>
<h1>membuat link pada suatu email:</h1>
<BR>Kirim email ke <a href="mailto:syafriadi82@gmail.com">
syafriadi@gmail.com</a>
</p>
<BR><BR><BR><BR><BR><BR><BR><BR><BR><A HREF="#TOP">
Kembali keatas</A>
</BODY>
</HTML>

IMAGE.HTML
<html>
<head>
<title>latihan link</title>
</head>
<body link="red">
selamat belajar :
<UL type="A">
<LI> <a href="latihan1.html">latihan 1</a></LI>
<LI> <a href="latihan2.html">latihan 2</a></LI>
<LI> <a href="latihan3.html">latihan 3</a></LI>
</UL>
<body>
</html>

HASIL DARI SCRIP DIATAS