Selasa, 31 Maret 2015

Hyperlink (Pindah Halaman)

Hyperlink biasa digunakan untuk berpidah dari satu halaman ke halaman lain. Yap pada HTMLpun fungsinya seperti itu. Tag yang digunakan seperti berikut:

<a href="halamantujuan">link ke tujuan</a>

Hyperlink atau bisa juga disebut dengan navigasi merupakan sebuah komponen web yang sangat membantu user agar mudah dalam mengakses halaman website yang kita buat. berikut contoh kodenya.

<html>

<head>

<title>Heading<title>

</head>

<body>

<a href="http://www.facebook.com">Facebook</a>
<a href="http://www.twitter.com">Twitter</a>

<a href="http://www.google.com">Google</a>

</body>

</html>

dari kode diatas, menghasilkan tampilan seperti berikut

Facebook Twitter Google

jika di klik link facebook dengan otomatis akan pindah ke halaman facebook. Jika kita ingin membuat link ke file html yang dibuat sendiri, rubah saja link tujuannya menjadi nama file html yang telah dibuat, dan pastikan 2 file tersebut berada dalam satu folder.

contoh : <a href="filesaya.html">File</a>

Memasukan Gambar, Audio & Video

Gambar , Audio dan Video adalah objek yang sulit terpisahkan dari website. Tiga komponen tersebut sangat berpengaruh dalam kepadatan konten dan akan membuat website terlihat lebih menarik serta informasi yang diberikan pun akan mudah disampaikan dengan 3 objek tersebut.

Berikut tag untuk memesukan gambar

<img src="namafilegambar" width="" height=""/>

untuk mengatur lebar dan tingginya silahkan masukan di nilai pada atribut width dan height.

untuk memasukan audio dengan menggunakan tag berikut

<audio controls>
<source src="namafile.ogg" type="audio/ogg">
<source src="namafile.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

Tag ini support tipe audio MP3, Ogg, dan Wav. (http://www.w3schools.com/html/html5_audio.asp)

Untuk memasukan video kita bisa mengembed dari youtube, situs lain atau dengan mengambil dari file kita sendiri. berikut tagnya

<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

Tag ini support tipe video MP4, Ogg, dan WebM. (http://www.w3schools.com/html/html5_video.asp)

Sedangkan jika kita mengambil video lain (embed) bisa dengan menggunakan tag berikut

<iframe width="854" height="510" src="https://www.youtube.com/embed/bWPMSSsVdPk" frameborder="0" allowfullscreen></iframe>

contoh kode HTMLnya sebagai berikut

<html>

<head>

<title>Heading<title>

</head>

<body>

<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/2000px-HTML5_logo_and_wordmark.svg.png" width="200" height="200"/>

<iframe width="854" height="510" src="https://www.youtube.com/embed/bWPMSSsVdPk" frameborder="0" allowfullscreen></iframe>

</body>

</html>

Catatan : pastikan file gambar, suara dan dalam satu folder untuk memudahkan meload objeknya.

berikut hasil dari kode diatas

Form

Form merupakan komponen HTML yang berfungsi sebagai media dalam proses input data. Form sering ditemukan pada website yang menyediakan proses daftar atau login. Isian pada proses daftar itu merupakan contoh form. Berikut tag untuk membuat form.

<input type="text"/> untuk membuat Textbox

<input type="password"/> untuk membuat password box

<input type="radio"/> untuk membuat radio button

<input type="checkbox"/> untuk membuat checkbox

<input type="submit"/> untuk membuat tomboy submit

<textarea></textarea> untuk membuat textarea

<select>

<option>Laki-laki</option>
<option>Perempuan</option>

</select>

untuk membuat listbox / combobox

sekarang HTML5 menyediakan beberapa form yang lebih interaktif, seperti

<input type="email"/>

<input type="date"/>

dan masih banyak lagi , referensi nya bisa dilihat dihalaman berikut http://www.w3schools.com/html/html_forms.asp

untuk contoh pembuatan form di HTML, berikut kodenya

<html>

<head>

<title>Heading<title>

</head>

<body>

<input type="text"/> untuk membuat Textbox

<br/>

<input type="password"/> untuk membuat password box

<br/>

<input type="radio"/> untuk membuat radio button

<br/>

<input type="checkbox"/> untuk membuat checkbox

<br/>

<input type="submit"/> untuk membuat tomboy submit

<br/>

<textarea></textarea> untuk membuat textarea

<br/>

<select>

<option>Laki-laki</option>
<option>Perempuan</option>

</select>

</body>

</html>

Dari kode diatas menghasilkan tampilan seperti berikut

untuk membuat Textbox
untuk membuat password box
untuk membuat radio button
untuk membuat checkbox
untuk membuat tomboy submit
untuk membuat textarea

Senin, 30 Maret 2015

Mengatur Tipe, Warna & Ukuran Font

Mengelola font adalah salah satu hal penting dalam membuat website. Karena itulah kita harus dengan baik dan bijak dalam mengatur dari sisi jenis, ukuran dan warna font yang digunakan. Pastilah beda ukuran yang digunakan untuk membuat judul dan isi konten. Tag untuk font

<font size="" face="" color=""></font>

atribut size until mengatur ukuran font

face merupakan jenis font yang akan digunakan

color merupakan warna yang akan kita tampilkan pada halaman website

untuk warna kita bisa memasukan heksadesimal untuk kode warnanya, atau cukuo dengan menyebut nama warna dalam bahasa inggris (red,black etc)

contoh kodenya

<html>

<head>

<title>Membuat Font<title>

</head>

<body>

<font color="red" size="20px">Contoh 1</font>
<br/>
<font color="yellow" size="12px">Contoh 2</font>

</body>

</html>

hasil dari kode diatas seperti berikut

Contoh 1
Contoh 2

Text Editor

Text Editor merupakan tempat dimana code ditulis, ada beberapa Text Editor ynag banyak digunakan. dan Text Editor pun memiliki tingkat kenyamanan bagi prograamer untuk menulis code tersebut. Mungkin bagi yang belum berkecimpung di dunia IT biasa menggunakan Notepad (Bawaan Windows), sah-sah saja, hanya saja ada beberapa Text Editor yang lebih mantap untuk digunakan, sebagai berikut :

1. NotePad++ bisa anda unduh di http://notepad-plus-plus.org/
2. Subliime Text http://www.sublimetext.com/
3. Adobe Dreamweaver http://filehippo.com/download_dreamweaver
4. phpDesigner http://www.mpsoftware.dk/phpdesigner.php
5. Netbeans https://netbeans.org/downloads/

masih banyak sebetulnya, silahkan anda bisa mencoba dan memilih Text Editor manakah yang membantu anda dan membuat nyaman menggunakannya

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Membuat Garis Horizontal

Untuk membuat garis horizontal dapat menggunakan tag <hr/>. Tag ini untuk membuat garis yang dapat digunakan untuk pembatas antara konten yang akan ditampilkan pada halaman website. contoh penggunaan tag <hr/>

<html>

<head>

<title>Judul yang akan ditampilan pada status bar browser<title>

</head>

<body>
Konten
<hr/>
Konten
</body>

</html>

tampilan browser akan seperti berikut

konten

konten

selamat mencoba :)

Membuat Paragraf

Paragraf digunakan untuk menata text yang akan ditampilkan pada halaman website. Ada 4 type paragraf yang disediakan oleh HTML, rata kiri, rata tengah, rata kanan dan justify. format tag yang bisa digunakan untuk mengatur paragraf seperti berikut.

<p></p> secara default tag tersebut membuat rata kiri text. jika ingin merubah posisi text bisa dengan menambahkan atribut align di dalam tag <p></p>, seperti berikut

<p align="center"></p> until rata tengah.

untuk rata kanan dan justify bisa mengubah isian atribut dengan right & justify.

contoh kode

<html>

<head>

<title>Membuat Baris Baru<title>

</head>

<body>
   <p>
Rata Kiri Rata Kiri Rata Kiri Rata Kiri Rata Kiri Rata Kiri
  Rata Kiri Rata KiriRata Kiri Rata KiriRata Kiri Rata KiriRata Kiri Rata KiriRata Kiri Rata Kiri
Rata KiriRata Kiri Rata KiriRata Kiri Rata KiriRata Kiri Rata Kiri
Rata Kiri Rata KiriRata Kiri Rata KiriRata Kiri Rata Kiri
</p>

<p align="center">
Rata Tengah Rata Tengah Rata Tengah Rata Tengah Rata Tengah Rata Teenage
  Rata Tengah Rata Tengah Rata Tengah Rata Tengah Rata Tengah Rata Tengah Rata Tengah
Rata Tengah Rata Tengah Rata Tengah Rata Tengah Rata Tengah Rata Tengah Rata Tengah
</p>

<p align="right">
Rata Kanan Rata Kanan Rata Kanan Rata Kanan Rata Kanan Rata Kanan Rata Kanan
Rata Kanan Rata Kanan Rata Kanan Rata Kanan Rata Kanan Rata Kanan Rata Kanan
  Rata Kanan Rata Kanan Rata Kanan Rata Kanan Rata Kanan Rata Kanan Rata Kanan
Rata Kanan Rata Kanan Rata Kanan Rata Kanan Rata Kanan Rata Kanan Rata Kanan
</p>

<p align="justify">
Justify Justify Justify Justify Justify Justify Justify Justify Justify
JustifyJustifyJustifyJustifyJustifyJustifyJustifyJustifyJustify
JustifyJustifyJustifyJustifyJustifyJustifyJustifyJustifyJustifyJustifyJustify
JustifyJustifyJustifyJustifyJustifyJustifyJustifyJustifyJustifyJustifyJustify
</p>
</body>

</html>

Membuat Baris Baru

Pada dasarnya jika ingin membuat baris baru dengan cara menekan tombol ENTER. HTML telah menyediakan tag untuk menangani pembuatan baris baru pada halaman website.

<br/> merupakan tag yang dapat digunakan untuk membuat baris baru. Berikut contoh kode HTMLnya:

<html>

<head>

<title>Membuat Baris Baru<title>

</head>

<body>
baris pertama
<br/>
baris kedua baris kedua
<br/>
baris ketiga</body>

</html>

pada halaman browser akan tampil text seperti berikut

baris pertama
baris kedua baris kedua
baris ketiga

Membuat Text Bold, Italic dan Underline

Pada artikel ini akan dibahas bagaimana cara membuat text menjadi tebal, miring dn bergaris bawah. HTML telah menyediakan tag untuk menangani ketiga hal tersebut, berikut tag dan fungsinya

<b>text</b> untuk membuat tebal
<i>text</i> untuk membuat text miring
<u>text</u> untuk membuat text bergaris bawah

implementasi dengan tag dasar HTML nya seperti berikut.

<html>

<head>

<title>Judul yang akan ditampilan pada status bar browser<title>

</head>

<body>
<b>text</b>
<i>text</i>
<u>text</u>
</body>

</html>

agar memperjelas dan mudah dipahami, apapun yang ingin kita tampilkan dihalaman browser simpan tag di antara tag <body> dan </body>.

dari kode diatas akan tampil pada halaman browser anda

texttexttext

Tag Dasar HTML

Tag Dasar HTML merupakan sebuah kode yang pertama kita gunakan untuk membangun sebuah website. Dimana tag ini harus ada untuk menjelaskan bahwa file yang anda akan buat merupakan file HTML.

Pada artikel sebelumnya, saya telah memberi satu contoh pembuatan file html. Berikut penjelesan lengkap dari tag dasar HTML.

Elemen <html></html> berfungsi untuk mengawali dan mengakhiri syntax html
Elemen <head></head> berfungsi untuk memberikan informasi atau mendeklarasikan dokumen tersebut.
Elemen <title></title> berfungsi untuk memberikan judul pada sebuah halaman website yang akan di buat .
Elemen <body></body> berfungsi untuk menentukan bagaimana isi suatu dokumen ditampilkan pada browser.

Penulisan tag tersebut seperti berikut.

<html>

<head>

<title></title>

</head>

<body></body>

</html>

keempat tag diatas merupakan tag dasar yang wajib anda ketahui dan anda gunakan dalam membangun sebuah halaman website.

Hypertext Markup Language

HTML (Hypertext Markup Language) merupakan kode bahasa yang digunakan untuk membangun sebuah halaman website.

berikut contoh kode HTML:

HTML selalu diawali dengan tanda < untuk membuat sebuah tag. contoh untuk memulai pembuatan halaman HTML akan dimulai dengan tag <html>, dan kebanyakan tag HTML selalu di akhiri dengan tanda </namatag>, berikut contohnya :

<html> pembuka
</html> penutup

<head> pembuka
</head> penutup

dan seterusnya, tapi ada beberapa yang diakhiri tanpa </namatag>.

<br/> kode tersebut tidak memiliki pembuka seperti tag lainnya.

full code pembuatan sebuah halaman HTML untuk menampilkan HELLO HTML

<html>

<head>

<title>Judul yang akan ditampilan pada status bar browser<title>

</head>

<body>HELLO HTML</body>

</html>

untuk penulisan kodenya bisa menggunakan aplikasi notepad, dan format filenya namafile.html. Untuk menjalankan filenya anda tinggal klik saja file tersebut, secara otomatis browser akan menjalankan file tersebut.

sampai bertemu di artikel selanjutnya

IT CODE TUTORIAL

Download