HTML
Sebelum kita melangkah lebih jauh ada baiknya anda tahu apa itu HTML. HTML atau Hypertext Markup Language merupakan protokol yang digunakan untuk mentransfer data atau document dari web server ke browser yang memungkinkan anda menjelajah internet dan melihat halaman web yang menarik
sekarang ini di pasaran terdapat banyak sekali HTML authoring (software yang digunakan untuk membuat atau mendesain halaman web). Macromedia Dreamweaver , Adobe GoLive , MS FrontPage sekedar contohnya . tetapi tanpa mengetahui dasar-dasarnya anda tidak akan memperoleh hasil yang maksimal . mengapa ? karena walaupun software-software tersebut semakin menawarkan kemudahan dalam membuat halaman web , tetapi biasanya seseorang masih perlu untuk mengedit halaman web tersebut secara manual. terutama untuk halaman web yang sangat komplek
dalam tutorial ini anda akan kami ajak untuk mengetahui dasar-dasar dari desain web yang dibutuhkan hanya sebuah processor. Anda bisa menggunakan notepad ,wordpad, MS Word atau yang lainnya. tapi yang paling mudah adalah menggunakan Notepad.
HTML ( hyper text markup language merupakan bahasa standar untuk membuat suatu dokument HTML (halaman web) yang terdiri dari kode-kode singkat tertentu , dimana dengan kode-kode tersebut akan memerintahkan web browser bagaimana untuk menampilkan halaman web yang terdiri dari berbagai macam format file seperti texs , grafik , animasi link maupun audio-video
sedangkan web browser adalah sebuah program yang dapat menterjemahkan kode perintah dari dokumen HTML tersebut sehingga dapat kita lihat , baca dan dengar. contoh dari web browser adalah internet explorer , netscape navigator , mozilla firefox , opera , safari dll
HTML mempunyai file perluasan (extention) htm atau html . dimana kedua perluasan tersebut adalah sama , jadi anda boleh menyimpan file dokumen HTML dengan extention htm atau html
Struktur dasar HTML
HTML merupakan bahasa pemrograman yang digunakan dalam pembuatan halaman web . dalam penggunaaannya sebagian besar kode HTML tersebut harus terletak diantara tag kontainer . yaitu diawali dengan <namatag> dan diakhiri dengan </namatag>(terdapat tanda "/").
sebuah halaman web minimal mempunyai empat buah tag , yaitu :
<HTML>
sebagai tanda awal dokumen HTML
<HEAD>
sebagai informasi page header
di dalam tag ini kita bisa meletakkan tag-tag TITTLE
</TITLE>
sebagai title atau judul halaman . kalimat yang terletak didalam tag ini akan muncul pada bagian paling atas browser anda (pada title bar)
Tag <TITLE> digunakan untuk memberi judul dokumen HTML . judul ini dapat anda lihat pada pojok kiri atas browser . ketika orang akan membookmark web anda maka judul inilah yang akan disimpan
untuk melihat hasilnya silahkan jalankan broser favorit anda seperti contoh dibawah ini digunakan Microsoft Internet Explorer
contoh <TITLE>TIPS HTML</TITLE>
<BODY>
Didalam tag ini bisa diletakkan berbagai page attribute seperti macam format file berupa ttext , grafik , link , animasii maupun audio-video(multimedia). warna latar belakang , warna teks , warna link , warna visited link , warna activee link dan lain-lain
dengan kata lain Tag <body> </body> merupakan isi dari suatu dokumen HTML yang akan ditampilkan di web browser yang terdiri dari berbagai kebutuhan
contoh penggunaan sederhana
sebelum melakukan pengetikan
1. aktifkan wampserver
2. aktifkan notpad
3. lalu ketik sintak sintak di bawah ini
kemudian simpan dengan nama coba1.html
langkahnya menyimpan
1. klik file
2. klik save
3. klik c:
4. klik folder wamp
5.klik folder
6. ubah save as type menjadi all files
7. buat nama file coba1.html
8. klik save
untuk mengeksekusi lakukan langkah sebagai berikut
1. aktifkan web browser
2. ketikkan http://localhost/coba1.html
Referensi Tag HTML
1. Heading
Heading adalah sekumpulan kata yang menjaadi judul atau subjudul dalam suatu dokumen HTML . Heading berbeda dengan tag <TITE> yang tidak bisa muncul dalam halaman web. HTML menyediakan enam tingkatan heading. heading level 1 biasanya untuk judul utama
contoh :
<HTML>
<HEAD>
<TITLE>>Headings</TITLE>
</HEAD>
<BODY>
<H1></H1>
<H2></H2>
<H3></H3>
<H4></H4>
<H5></H5>
<H6></H6>
</BODY>
</HTML>
2. PARAGRAF
untuk membuat paragraf digunakan tag <P> setelah tag <P> anda bisa menulis isi paragraf dan paragraf tersebut harus diakhiri dengan penutup </P> . anda bisa mengatur posisi paragraf dengan atribut ALIGN . Atribut ALIGN diikuti dengan posisi yang diinginkan. lEFT untuk rata kiri , CENTER untuk rata tengah dan RIGHT untuk rata kanan
contoh:
<HTML>
<HEAD>
<TITLE>Paragraf</TITLE>
</HEAD>
<BODY>
<P Align="right">
beberapa tahun yang lalu seorang hartawan meninggal dunia sedangkan ia tidak memiliki ahli waris . kepada pengacaranya , ia meninggalkan dua buah surat yang disegel . yang sebuah berisi permintaan agar jenazahnya dikuburkan pada jam empat dini hari . surat yang kedua belum diketahui isinya karena disampulnya tertulis pesan agar dibuka susai pemakaman jenazah
<P ALIGN="center">
sesuai dengan wasiat , jenazah itu dikebumikan pada pukul empat dini hari . karena ti
dak lazimnya waktu pemakaman pada jam tersebut , yang ikut mengantar jenazahnya hanya empat orang kawannya yang paling setia
<P ALIGN="left">
Sesuai pemakaman , surat wasiat yang kedua dibuka. betapa terkejutnya pengacara ketika membaca isinya . ialah wasiat bahwa seluruh harta warisan (yang bernilai lebih dari 800.000 pound) dibagi rata kepada orang-orang yang mengantarnya jenazahnya ke pemakaman. dengan demikian , yang berhak memperoleh harta yang banyak itu hanya empat orang , sebagai imbalan bagi kesetiaan mereka . sumber humor kisah dan pepatah
</P>
</BODY>
</HTML>
3. Blockquote
Perintahh tag <BLOCKQUOTE> digunakan untuk menulis kutipan teks . dengan perintah ini browser akan menampilkan teks menjorok ke dalam atau meenampilkan teks dalam bentuk huruf miring
Contoh :
<HTML>
<HEAD>
<TITLE>BLOCKQUOTE</TITLE>
</HEAD>
<BODY>
<H3> Sesuatu yang tidak perlu dicoba</H3>
<BLOCKQUOTE>
sesuatu yang kelihatannya mengasyikkan tapi sebenarnya lebih banyak menambah masalah pada remaja adalah narkoba , seks, alkohol dan merokok. jangan sekali-kali mencoba jika tidak ingin membuat masalah baru
</BLOCKQUOTE>
</BODY>
</HTML>
4.Preformatted Text
Preformatted Text (PRE) digunakan untuk menampilkan teks sama seperti yang anda ketikkan dalam dokumen HTML. Browser akan menampilkan teks tersebut dalam font monospaced, yaitu seperti terlihat dalam teks yang tampilkan oleh apikasi berbasis teks (misalnya telnet)
contoh :
<HTML>
<HEAD>
<TITLE>Preformatted Text</TITLE>
</HEAD>
<BODY>
<PRE>
Edisi yang lalu dibahas tentang membuat biling system untuk warnet yang dapat langsung mencetak tagihan. kali ini diulas bagaimana menyimpan setiap transaksi dalam database agar bisa diperoleh beberapa laporan secara periodik
</PRE>
</BODY>
</HTML>
5. Begin Row (BR)
Tag ini digunakan untuk menulis teks pada baris berikutnya . Tag <BR> membuat baris baru tanpa memberi baris kosong dibawahnya
contoh :
<HTML>
<HEAD>
<TITLE>Begin Row</TITLE>
</HEAD>
<BODY>
<P> Banyak cara yang dapat digunakan untuk melakukan instalasi FreeBSD. namun ada tiga cara yang paling sering dilakukaan , yaitu :
<BR>Instalasi melalui FTP
<BR>Instalasi melalui CDROM
<BR>Instaasi melalui partisi DOS
</body>
</HTML>
6. Ukuran Font
untuk mengatur huruf dokument HTML digunakan tag <FONT SIZE>. Tag <FONT SIZE> memiliki beberapa atribut untuk mengatur ukuran huruf yang akan digunakan.
contoh :
<HTML>
<HEAD>
<TITLE>ukuran font</TITLE>
</HEAD>
<BODY>
<FONT SIZE=1>Ukuran font 1</FONT>
<FONT SIZE=2>Ukuran font 2</FONT>
<FONT SIZE=3>Ukuran font 3</FONT>
<FONT SIZE=4>Ukuran font 4</FONT>
<FONT SIZE=5>Ukuran font 5</FONT>
<FONT SIZE=6>Ukuran font 6</FONT>
<FONT SIZE=7>Ukuran font 7</FONT>
</BODY>
</HTML>
7. Jenis Font
Atribut FACE digunakan untuk mengatur jenis huruf yang diinginkan . Attribut FACE harus diisi dengan string jenis font seperti Arial , Times New Roman, Verdana , dan sebagainya.
contoh :
<HTML>
<HEAD>
<TITLE>ukuran font</TITLE>
</HEAD>
<BODY>
<FONT SIZE=5>
<FONT FACE="arial">Arial, contoh AC Milan<P>
<FONT FACE="verdana">verdana, contoh Persebaya<P>
<FONT FACE="Times New Roman">Times New Roman , contoh Indonesia<P>
</BODY>
</HTML>
8. Warna Font
Atribut COLOR digunakan untuk mengatur warna font yang akan digunakan. untuk memberi nilai pada atribut color , ada dua cara. cara pertama dengan menuliskan nama warna seperti Red, Blue , Yellow, White, dll. sedangkan cara kedua adalah dengan menggunakan nilai RGB(Red Green Blue) dari suatu warna misalnya FF0000 untuk Red, 00FF00 untuk green dan 0000FF untuk Blue
contoh
<HTML>
<HEAD>
<TITLE>ukuran font</TITLE>
</HEAD>
<BODY>
<FONT SIZE=5>
<FONT COLOR="red">PSM Makasar<P>
<FONT COLOR="#FF0000">tetap PSM Makasar kan ?<P>
<FONT COLOR="#00FF00">Ini baru Persebaya<P>
</BODY>
<HTML>
LIST HTML
List merupakan bentuk yang umum yang biasa kita gunakan untuk menguraikan daftar sesuatu , jenis-jenis
list dalam HTML adalah :
_list tanpa nomor
_list dengan nomor
_list defenisi
Unordered List (List tanpa nomor) untuk membuat list tanpa nomor (bulleted list):
-mulai dengan tag pembuka list <UL>
-masukkan setiap item list dengan menggunakan tag <LI> kemudian tuliskan itemnnya (satu saja), tag penutup item </LI>
-Ulangi lagi langkah kedua untuk menuliskan item list berikutnya
-akhiri seluruh list dengan sebuah tag penutup </UL>
Unordered list disebut juga sebagai bulleted list , mempunyai bullet default berupa noktah. jenis bullet bisa diubah contohnya dengan mengisi atribut "type" dengan disk atau box
ordered list ( list dengan nomor)
untuk list dengan nomor, disebut juga ordered list , tag <UL> diubah dengan <OL>.
demikian juga
</UL>diganti dengan </OL>
nomor item secara default adalah menggunakan angka 1,2,3, dst sampai dengan sejumlah item dalam list tersebut. untuk keperluan penyajian tertentu kita dapat mengubah nomor dalam ordered list dengan model angka yang lain, dengan mengisi atribut "type" pada tag <ol>
selain atribut type , ada juga atribut start digunakan untuk mendefinisikan nomor awal yang akan digunakan pada ordered list
jika kita ingin list dimulai dari nomor 8 , maka penulisannya <OL START=8>...</OL>
Contoh Unordered list
<HTML>
<HEAD>
<TITLE>ukuran font</TITLE>
</HEAD>
<BODY>
<H4>Default Bullets List:</H4>
<UL>
<LI>MEDAN</LI>
<LI>JAKARTA</LI>
<LI>DANAU TOBA</LI>
</UL>
<H4> DISC bullets List:</H4>
<ol start=5>
<LI>HARDWARE</LI>
<LI>SOFTWARE</LI>
<LI>HARDWARE</LI>
</OL>
<H4>Circle Bullets List:</H4>
<UL TYPE="circle">
<LI>1 tkj</LI>
<LI>2 tkj</LI>
<LI>3 tkj</LI>
</UL>
<H4>Nested List:</H4>
<UL TYPE="circle">
<LI>1 TS</LI>
<LI>2 TS</LI>
<LI>3 TS</LI>
<ul type="square">
<LI>2TS</LI>
<LI>2 TKJ</LI>
<LI>2 TS dan 2 TKJ</LI>
</UL>
</BODY>
</HTML>
Unknown
Thursday, December 1, 2016
Related Posts