Tutorial HTML Lengkap Bahasa Indonesia
Pengenalan
Selamat datang di Tutorial HTML Lengkap Bahasa Indonesia Part 1. Untuk pertama kali kita harus mengenal dasar dasarnya dulu.HTML dibuat untuk mendesain web dan lain sebagainya tapi ingat itu bukan bahasa pemrograman seperti PHP
Mohon dibaca dulu sambil tenangkan badan , fokus dan bersantai.
HTML singkatan dari HyperText Markup Language berfungsi sebagai tampilan website yang sederhana
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 terintegeras (http://id.wikipedia.org/wiki/HTML)
2. Kata Penting
Melalui tutorial ini harus ada beberapa kata yang harus diketahui yaitu :
- Tag – Ini adalah sebuah kata yang diawali tanda < dan diakhiri >ini untuk menyatakan suatu element HTML
Contoh: <Tag>
- Element (Element) – Element adalah isi dari kutipan Tag
Contoh : <Tag> Ini adalah element </Tag>
- Attribute (Atribut) – Digunakan untuk memodifikasi tag element
Contoh : <Tag tambahan=”50%”> sebelah kiri adalah atribut </tag>
3. HTML
Saat kita melihat website orang (jika kita ingin mengetahui tentang HTML seseorang klik Kanan -> View Page Source)tentu terlihat barisan HTML rapi. itu diawali dengan tag <HTML> dan pada akhir baris ditandai dengan </HTML>.Misal kita membuat paragraf dengan kode HTML dengan tag <p>
<p> Awalan pembukaan tag
Ini adalah tampilan awal paragraf dan ini adalah bagian element
</p> Ini penutup tag
Ditulis : <p> ini adalah tampilan awal paragraf </p>
nah sekarang kita sudah belajar tentang dasar HTML dari website yang mungkin anda mau melihatnya. Website tersebut hanya berisi tag element tag element tag element hingga akhir dari HTML yang ditandai tag </HTML>
Mudah bukan?
1. Membuat HTML
Agar kita bisa mengotak – atik HTML dengan melihat bagaimana hasil dari kode tersebut lakukan
My Document -> Buat Folder baru bernama Test -> Klik Kanan -> New-> Text Document -> Rename new text document.txt menjadi index.html -> Isi index.html dengan editor notepad (disarankan Notepad++)
<HTML><p> Hai </p></HTML>
2.Title
Title adalah judul website yang tampil pada toolbar browser atau tab browser. untuk menampilkan pada browser lakukan cara tadi
Buka index.html dan isi seperti ini
<html>
<title>Hallo HTML</title>
</html>
Simpan file dan buka index.html pada browser (bisa Firefox atau Google Chrome)
3.Header
Header sesuai dengan namanya Head (kepala) berarti kepala website biasanya diawali judul website yang besar dan bukan tampil di toolbar browser tetapi di kepala website
<html> <head> <title>Website Ku</title> </head> </html>
4.Body
disini element body adalah tempat untuk menaruh semua hal yang tampak (visual) seperti gambar, table dan lain lain. Kita akan membuat elemen body dengan cara seperti diatas
<html>
<head>
<title>Hallo Dunia</title>
</head>
<body>
<p>Ini adalah paragraf pertama saya</p>
</body>
</html>
Kurang dengan Tag itu itu saja bukan?
nih Tutorial HTML berikutnya
1. HTML – Heading
HTML heading adalah element untuk menambah font size text (Memperbesar huruf)
a. HTML Heading Element:
<body> <h1>Heading</h1> <h2>Ini</h2> <h3>Akan</h3> <h4>Berambah</h4> <h5>Kecil</h5> <h6>Urutannya</h6> </body>
2. HTML – Formatting
Dalam HTML kita juga bisa membuat efek text seperti Bold, Underline danItalic.
<h2>Heading Tag</h2> <b>Bold Tag</b> <i>Italic Tag</i>
Bagaimana dengan baris enter tanpa menggunakan tag <p> gunakan tag <br/
<h2>Heading Tag</h2></br><b>Bold Tag</b></br><i>Italic Tag</i>
Ada lagi yang perlu dicoba selain hal diatas diantaranya tag :
<strong> <em> <sup> <sub> <code> <del>
3. HTML – Preformatting
dalam preformatting kita tidak perlu susah mengetik <br/> dan sebagainya didalam tag preformating, tag tersebut langsung mencetak sesuai apa yang ditulis contohnya :
<pre> Preformatting Ini barisan agak kedepan Ini ditulis tanpa tag <br/> </pre>
1. HTML – Attribut
Halaman website dengan opsi banyak dimuai dengan Atribut. Atribut seperti tambahan untuk memperbagus website dan tentu saja tanpa atribut website akan berantakan dan sangat membosankan.Disini akan dibahas bagaimana cara penggunaan HTML – Atribut
a. HTML – Title Attribut
Seperti yang kita ketahui di artikel sebelumnya apa itu atribut. bagi yang belum tahu silahkan cek di bagian postingan sebelumnya
Contoh :
<h2 title="Atribut Title">Title Heading Tag</h2>
b. HTML – Align Attribute
Jika kita ingin merubah posisi rata text kita maka yang perlu kita lakukan adalah menggunakan atribut align. Atribut bisa diatur posisinya mulai dari kiri , tengah, dan kanan
<h2 align="center">Heading Tengah</h2>
Hasil :
Heading Tengah
Ini contoh alig <h2 align="left">Text Rata Kiri</h2> <h2 align="center">Text Rata Tengah</h2> <h2 align="right">Text Rata Kanan</h2>
2. HTML – Font
Sebuah tag <font> sebenarnya tidak berfungsi secara langsung tapi sesuai pembahasan, kita membutuhkan beberapa attribut agar font dapat terproses dan merubah jenis , warna, besar dan style Font, Atribut bisa digunakan berkali kali dalam satu tag
a. HTML – Font Size
Pasang besar kecil font dengan atribut size, nilai yang bisa dipakai Atribut Size adalah antara 1 – 7 (dari kecil hingga besar) ukuran biasa font adalah 3
<p>
<font size="5">Ini adalah font ukuran 5</font>
</p>
b. HTML – Font Color
Pasang font kita dengan warna warna (bisa dengan kode hex dan kata)
<font color="#990000">Ini text menggunakan kode hex warna #990000</font>
<br />
<font color="red">Ini warna merah</font>
c. HTML – Font Face
Font face juga bisa disebut jenis font. Contoh jenis font adalah : Arial, Times New Roman, dll settingan default dari font face / jenis adalah Times New Roman
<p> <font face="Georgia, Arial, Garamond">Tulisan dengan jenis text.</font> </p>
1. HTML – Text Link (Anchor)
Sangat penting sekali kita menggunakan Link untuk menghubungkan antara satu sama lain. Untuk memberi Link kita menggunakan tag <a>
<a> ini adalah Link </a>
a. HTML – Hypertext Reference (href)
HTML href digunakan untuk merujuk ke situs , HTML Href ini merupakan atribut jadi dipasang didalam tag <a> lain maupun lokal dengan mencantumkan situs website atau directory website kita
contoh :
<a href="http://fortazt.com/" target="_blank">The Real Fortazt</a>
Hmm. disitu tercantum atribut target=”_blank” apa itu???
kita bahas satu persatu
Link Target :
| _blank | Membuka halaman baru di tab baru |
| _self | Membuka halaman baru di halaman saat ini |
| _parent | Membuka halaman baru dengan sekotak frame |
| _top | embuka halaman baru di halaman saat ini dan membatalkan semua frame |
HTML Text Link Href Code:
Global - href="http://fortazt.com/" Link yang merujuk ke situs lain Lokal - href="../malang/" Link yang merujuk ke directory kita sendiri Internal - href="#link" Link untuk penandaan di website kita sendiri
2. HTML – Email Links
untuk membuka aplikasi email dengan mengeklik link HTML
<a href="mailto:admin@fortazt.com>admin@fortazt.com</a>
3. HTML – Download Links
penempatan file juga perlu diperhatikan dalam Download Link dan juga jika ingin menggunakan ini tentu saja format yang kita pasang harus merujuk ke file dan bukan akhiran .html maupun .php dan .cgi
<a href="http://fortazt.com/malang/download.zip">download an</a>
1. HTML – Komentar
Komentar mungkin sangat membantu bagi web developer karena kode HTML – Komentar tidak di proses ke dalam browser melainkan hanya untuk catatan kecil bagi penulis. Komentar berfungsi sebagai penanda contohnya pada saat HTML kita error ditengah tengah kode yang panjang munkin komentar ini sangat membantu.
Tag Komentar :
<!– Pembukaan Tag Komentar
— > Penutupan Tag Komentar
— > Penutupan Tag Komentar
<!-- Kode dibawah ini untuk mengeluarkan gambar -->
<img src="http://fortazt.com/malang/madu.jpg" height="100" width="400" />
kode diatas tidak menampakkan error karena tulisan yg ditandahi tag komentar tidak di proses
1. HTML – List
HTML list merupakan bundaran kecil yang biasa dikenal di bullet. Untuk Bullet menggunakan tag <ul> dan jika Numbering menggunakan tag<ol>
Contoh HTML List Bullet :
<ul> <li>Pisang</li> <li>Apel</li> <li>Semangka</li> <li>Nangka</li> </ul>
Contoh HTML List Numbering (Angka):
<ol> <li>Find a Job</li> <li>Get Money</li> <li>Move Out</li> </ol>
2. HTML – Image (Gambar)
digunakan untuk menampilkan gambar
HTML Image:
<img src="http://www.fortazt.com/malang/dodol.gif" />
HTML – Image Height dan Width Atribut
<img src="sunset.gif" height="50" width="100" /> bisa juga mengugnakan %<img src="sunset.gif" height="50%" width="100%" />
3. HTML – Image Link
Jika kita ingin gambar kita diarahkan ke website lain bisa menggunakan cara ini.
<a href="http://www.google.com" target="_blank" border="0"> <img src="inidifortazt.gif" /> </a>
Nah dari kode tersebut jika gambar diklik dengan akan membuka google.com di tab baru tapi sumber gambar dari fortazt disitu juga terdapat atribut border (untuk mengotak i gambar) bisa juga ditambah dengan atribut align
Sekian….
Tutorial HTML Lengkap Bahasa Indonesia
Tidak ada komentar:
Posting Komentar