Newest Post

Tampilkan postingan dengan label HTML Basic. Tampilkan semua postingan
Tampilkan postingan dengan label HTML Basic. Tampilkan semua postingan

Review Tutorial HTML

|
Baca selengkapnya »
Sampai saat ini, kamu udah belajar beberapa tag HTML penting. Sebelum melanjutkan ke materi yang lain, ada baiknya kita review sedikit apa yang sudah kamu dapatkan sampai saat ini.
Tanda lebih besar dan kecil (< dan >)digunakan untuk mengawali dan mengakhiri tag HTML. Kata-kata yang ada di antara kedua tanda tersebut disebut juga elemen HTML.
Semua dokumen HTML memiliki tag-tag utama sebagai berikut:
<html>…</html> tag file HTML
<head>…</head> tag HTML informasi umum untuk header dan info lainnya
<title>…</title> tag HTML judul
<body>…</body> tag HTML body tempat content anda berada
Untuk membuat jarak di antara paragraf, gunakan tag HTML paragraf:
<p>…</p>
Untuk membuat baris baru gunakan tag HTML:

Review Tutorial HTML

Posted by : Alfa
Date :
With 0komentar
Tag :

Tutorial Program HTML - Membuat Daftar Yuk bag 3 Unordered List

|
Baca selengkapnya »
Ok. Setelah sebelumnya kamu mempelajari konsep dan jenis-jenis daftar/list dalam program HTML dan membuatdaftar bernomor (ordered list) HTML, sekarang waktunya untuk mempelajari cara membuat unordered list alias daftar tanpa nomor (cuman pakai bullet ajah). Caranya juga guamping......
Lagi-lagi kamu cuman perlu tahu 2 tag yaitu <UL> dan <LI> yang sudah kita bahas sebelumnya.
Tag <UL> adalah tanda mulainya sebuah daftar tanpa nomor, sedangkan tag <LI> adalah isi dari daftar.
Mari kita lihat contohnya.
Kode berikut ini:

Tutorial Program HTML - Membuat Daftar Bag 2

|
Baca selengkapnya »
Ok. Setelah sebelumnya kamu mempelajari konsep dan jenis-jenis daftar/list dalam program HTML, sekarang waktunya untuk mempelajari cara membuat ordered list alias daftar bernomor. Caranya guamping......

Kamu cuman perlu tahu 2 tag yaitu <OL> dan <LI>.
Tag <OL> adalah tanda mulainya sebuah daftar bernomor urut, sedangkan tag <LI> adalah isi dari daftar.
Biasa..paling gampang kalau menjelaskan pakai contoh kan?
Nah kode berikut ini:

Tutorial Program HTML - Membuat Daftar Bag 2

Posted by : Alfa
Date :
With 0komentar
Tag :

Tutorial Program HTML - Membuat Daftar Bag 1

|
Baca selengkapnya »
Dalam tutorial belajar program HTML kali ini, kita akan mencoba membuat daftar. Apa itu daftar? Gini... pada saat kamu menggunakan ms-word untuk membuat sebuah dokumen, maka kemungkinan besar kamu akan membuat sebuah daftar atau yang sering disebut juga dengan istilah list. Dalam ms-word kamu mungkin mengingatnya sebagai bulleted dan numbered list. Nah. kita juga bisa membuat list tersebut menggunakan program HTML lho. Coba yuk...
Dengan HTML, sebenarnya kita bisa membuat beberapa jenis daftar. Namun yang paling umum digunakan adalah apa yang dikenal dengan istilah ordered list dan unordered list. Seperti apa tuh? Mari kita lihat contohnya.
Ordered list adalah daftar yang berurutan, atau gampangnya daftar yang ada nomornya seperti contoh berikut ini:

Saat mempelajari program HTML, kamu harus mempelajari hal-hal berikut ini secara berurutan:

Tutorial Program HTML - Membuat Daftar Bag 1

Posted by : Alfa
Date :
With 0komentar
Tag :

Tutorial HTML - Mengubah Tampilan Teks

|
Baca selengkapnya »
Buat kamu yang baru belajar HTML, mungkin penasaran bagaimana cara mengubah huruf menjadi tebal atau membuatnya menjadi miring. Tampilan huruf seperti ini sangat penting untuk dilakukan, mislanya pada saat kita perlu memberikan penekanan pada kata-kata tertentu yang kita anggap penting, pada umumnya kita menggunakan huruf tebal, atau pada saat menggunakan istilah asing, maka kita perlu membuatnya menjadi miring (atau istilah lainnya italic). Jika iya, maka tutorial HTML kali ini pas banget buat kamu. Gampang kok untuk mengubah tampilan huruf seperti itu.
Seperti yang sudah kamu ketahui dari tutorial elemen HTML ini, kamu pastinya udah tahu kalau HTML menggunakan tag untuk semua perintah yang dilakukannya. Nah, untuk mengubah tampilan dan format teks, HTML juga menggunakan tag-tag seperti <b> (untuk menebalkan huruf) dan <i> (untuk menampilkan huruf miring) untuk menampilkan teks atau huruf sesuai dengan kebutuhan kita.
Berikut beberapa tag untuk mengubah tampilan huruf yang sering digunakan:

Tutorial HTML - Mengubah Tampilan Teks

Posted by : Alfa
Date :
With 0komentar
Tag :

Tutorial HTML - Paragraf

|
Baca selengkapnya »
Kita menggunakan tag <p> untuk membuat sebuah paragraf baru.
 Saat kita menggunakan tag ini, dia akan menambahkan sebuah baris kosong di atas dan di bawah teks paragraf yang kita tulis. Baris-baris kosong tersebut adalah baris yang menandakan sebuah paragraf dan memisahkan paragraf tersebut dari paragraf-paragraf yang lainnya.
Dan...tentu saja kita harus menutup paragraf kita dangan pasangannya yaitu tag </p>.
Contoh kode HTML:
<p>Ini adalah sebuah contoh paragraf yang panjang dan menarik, 
sehingga kalimat ini tidak ada isinya sama sekali. <p>
Kamu juga bisa melakukan proses perataan pada paragraf yang kamu bikin. Hal ini sangat mudah dilakukan, yaitu dengan menambahkan atribut HTML align.
Contoh tag di bawah ini akan membuat paragraf kamu rata kiri kanan.
<p align="justify">Ini adalah paragraf yang rata kanan dan rata kiri.</p>
Kamu bisa ganti-ganti isi atribut align tersebut dengan kata center untuk membuat paragraf menjadi di tengah, left rata kiri, dan right untuk rata kanan.

Tutorial HTML - Paragraf

Posted by : Alfa
Date :
With 0komentar
Tag :

Tutorial HTML - Link HTML

|
Baca selengkapnya »
Ndak usah pake contoh ya , kan udah banyak banget di Internet. Link ya tempat kamu main klak klik itu lah.
Hyperlinks, Anchors, dan Links
Dalam istilah web, hyperlink adalah referensi (sebuah alamat) ke sumber-sumber informasi lain di Internet.Hyperlink biasanya merujuk ke sebuah halaman HTML, sebuah gambar, file suara, movie, dll.Sedangkan anchor (bahasa Indonesianya Jangkar) adalah istilah yang digunakan untuk mendefinisikan tujuan hyperlink dalam sebuah dokumen.
Jadi gini, alamat halamannya ditunjukkan oleh hyperlink, sedangkan kalau di dalam dokumen itu ada bab 2, maka kita bisa langsung merujuk ke bab 2 tadi dengan bantuan anchor.
Untuk membuat hyperlink dan anchor kita menggunakan elemen HTML anchor <a>.
Dalam tutorial kali ini, kita akan menggunakan istilah link HTML saat elemen <a> merujuk ke sebuah halaman dan istilah anchor HTML saat element <a> tersebut merujuk ke sebuah alamat di dalam dokumen.

BIKIN LINK HTML

Sintaks Link: 

Tutorial HTML - Link HTML

Posted by : Alfa
Date :
With 0komentar
Tag :

Tutorial HTML - Entitas karakter HTML

|
Baca selengkapnya »

Entitas karakter

Beberapa karakter memiliki arti khusus dalam HTML, seperti tanda lebih kecil (<) yang mendefinisikan awal dari sebuah tag HTML. Kalau kita ingin agar browser menampilkan tanda lebih kecil itu (<), kita harus menyisipkan entitas karakter dalam kode HTML kita. 
Entitas karakter memiliki 3 komponen: sebuah tanda dan (&), nama entitas atau sebuah # yang diikuti nomor entitas dan diakhiri dengan tanda titik koma (;).
Untuk menampilkan tanda lebih kecil dalam halaman HTML kita, maka kita harus menuliskan : &lt; atau &#60;
Keuntungan menggunakan nama dibandingkan nomor adalah bahwa nama lebih mudah untuk diingat. Kekurangannya adalah bahwa tidak semua browser mendukung nama-nama entitas yang baru, namun demikian hampir semua browser mendukung nama entitas standar.
Catatan: entitas bersifat case sensitif.

Spasi berurutan

Entitas karakter yang mungkin akan paling sering kamu pakai adalah spasi.
HTML akan menghilangkan spasi dalam teks HTML kamu. Kalau kamu menuliskan 10 spasi pada kode HTML kamu, maka HTML akan menghapus 9 spasi. Nah, untuk menambahkan spasi pada dokumen HTML kamu, gunakan entitas karakter &nbsp;

Beberapa entitas karakter yang sering dipakai:


HasilPenjelasanNama EntitasNomor Entitas

Spasi&nbsp;&#160;
<Kurang dari&lt;&#60;
>Lebih dari&gt;&#62;
"Tanda kutip&quot;&#34;
'Kutip tunggal&apos; (Ndak berlaku di IE)&#39;
&Dan&amp;&#38;

Beberapa komentar yang ada meminta agar tutorial ini ditambah dengan contoh agar lebih jelas. Nah, berikut ini contoh untuk memperjelas tentang apa yang dimaksud dengan entitas karakter.
Kasusnya sangat mudah kok. Kita kan udah tahu, kalau yang namanya HTML itu menggunakan tag, iya kan? Salah satu contoh adalah tag <b> </b>untuk menebalkan huruf.
Sekarang bayangkan kalau suatu ketika kamu diminta untuk menulis tutorial tentang HTML dan kebetulan akan menulis tentang tag HTML yang berfungsi untuk menebelkan huruf. Misalnya kamu pengen baris berikut tampil di tutorial kamu (perhatikan, kamu ingin agar tag <b> dan </b> muncul dalam baris tersebut).
Untuk menebalkan huruf seperti kata tebal ini, kamu memerlukan tag <b> dan </b>
Nah, coba pikirkan, bagaimana menuliskan bari sederhana ini tanpa entitas karakter. Ndak bisa kan? Misalnya kamu menulis seperti ini:
Untuk menebalkan huruf seperti kata <b>tebal</b> ini, 
    kamu memerlukan tag <b> dan </b>
Apa yang terjadi? Browser akan menampilkan kalimat berikut:
Untuk menebalkan huruf seperti kata tebal ini, kamu memerlukan tag dan
Apa bedanya? Ya...tag <b> dan </b> tidak muncul, sebagai gantinya, kata dan akan tampil dalam huruf tebal.
Untuk membuat agar tag <b> dan </b> dapat muncul, kamu memerlukan entitas karakter, sehingga kamu harus menuliskan kode HTML menjadi seperti ini:
Untuk menebalkan huruf seperti kata <b>tebal</b> ini,
    kamu memerlukan tag &lt;b&gt; dan &lt;/b&gt;
Perhatikan, tanda < saya ganti dengan entitas karakter &lt;, sedangkan tanda > saya ganti dengan &gt;.
Lhah ... nambah lagi tuh pertanyaan di komentar. Gini pertanyaannya, terus gimana dunks cara kita menampilkan &gt; biar yang keluar bukan >.
Mudah aja, kita bisa gunakan &amp di depannya untuk meng-escape tanda & sehingga kamu bisa tulis seperti ini &amp; &gt; (tanpa spasi di antara &amp; dan &gt;. Saya terpaksa menuliskan menggunakan spasi, karena tidak mungkin saya tuliskan tanpa spasi.)
Gampang kan? Ok, mudah-mudahan contoh ini bisa meningkatkan pemahaman kamu tentang apa yang dimaksud dengan entitas karakter ini.
Nah, kamu udah belajar HTML cukup jauh saat ini. So, jangan lupa kembali lagi ke fhasixteen-tutorial.blogspot.com tempat di mana tutorial terbaik tersedia secara gratis.

Kalau udah menguasai HTML dengan cukup baik, saya sarankan kamu mulai belajar PHP, bisa yang gratis atau yang lebih canggih lengkap dengan tempat praktek online.

Tutorial HTML - Entitas karakter HTML

Posted by : Alfa
Date :
With 0komentar
Tag :

Atribut Tag HTML 2

|
Baca selengkapnya »
Tag HTML dapat memiliki atribut. Atribut memungkinkan informasi tambahan pada elemn HTML.
Atribut selalu memiliki pasangan nama/nilai seperti ini: nama=”nilai”.
Atribut selalu dicantumkan pada awal tag elemen HTML.
 tutorial HTML
Contoh Atribut 1:
<h1> mendefinisikan awal sebuah judul.
<h1 align=”center”> memiliki informasi tambahan tentang perataan baris.

Contoh Atribut 2:
<body> mendefinisikan badan/isi halaman HTML kita.
<body bgcolor=”red”> akan membuat background layar menjadi merah.

Contoh Atribut 3:
<table> mendefinisikan sebuah tabel HTML (nanti kita pelajari lebih lanjut).
<table border=”1”> memiliki tambahan informasi mengenai ketebalan garis pada tabel.

Selalu Gunakan Tanda Kutip pada Nilai Atribut
Nilai atribut seharusnya selalu diapit oleh tanda kutip. Tanda kutip ganda paling sering digunakan, tapi sebenarnya tanda kutip tunggal juga boleh ko.
Pada beberapa situasi tertantu yang sangat jarang terjadi, seperti misalnya saat nilai atribut itu sendiri berisi tanda kutip, maka kamu bisa gunakan tanda kutip tunggal.
Contohnya kayak gini:
nama=’Uzumaki “Jurus Seribu Bayangan” Naruto’
Ok.
Selamat mencoba atribut tag HTML.

Atribut Tag HTML 2

Posted by : Alfa
Date :
With 0komentar
Tag :

Pengertian Tag Span pada HTML

|
Baca selengkapnya »

Span on HTML
Apa itu tag Span? 
Penggunaan Tags <span> dalam HTML  tidak akan memberikan efek pada elemen bila dilihat dalam browser, kecuali <span> diberikan style khusus seperti  Inline CSS , ID atau CLASS selector, Contoh: (<span style =”… “>…</ span>).
Tag <span> biasanya digunakan pada  elemen-elemen yang lain di antara tag HTML.

Misalnya ada sebuah paragraf yang berbunyi seperti ini

Pengertian Tag Span pada HTML

Posted by : Alfa
Date :
With 0komentar
Tag :

Pengertian Div pada HTML

|
Baca selengkapnya »

Kalau kita perhatikan source Code sebuah website saat ini, Tag HTML yang paling banyak ditemukan adalah tagdiv. Masih Banyak orang yang belum mengetahui secara jelas tentang fungsi tag div, Saya sendiri sulit mengartikan secara jelas dalam bahasa indonesia tentang div walaupun saya paham cara membuat dan meletakan tag div tersebut. Mungkin saja setiap orang akan mempunyai pengertian yang berbeda tentang div namun saya yakin maksudnya sama.
Setelah saya Browsing di beberapa website yang berhubungan dengan div, saya dapat menyimpulkan bahwa tag div yang dimaksud adalah singkatan dariDivision yang berarti sebuah Tag HTML untuk membuat suatu seksi atau kelompok tertentu dengan tujuan mengelompokan sebuah file HTML menjadi beberapa bagian sesuai dengan tempatnya agar mempermudah para web developer memberi style pada setiap bagiannya. Misalnya, sebuah halaman Web yang terdiri dari 4 bagian: Header,Side Bar, Content dan Footer. Untuk mengelompokannya kita dapat menggunakan tag div. Contoh:

Pengertian Div pada HTML

Posted by : Alfa
Date :
With 8komentar
Tag :

Cara Membuat Link pada HTML

|
Baca selengkapnya »

Link is an HTML element is most important to create a web page.
Links are made to the document on the web with other documents. How do I create a link in HTML?
Link on the HTML tag is created with a word that  <a href=”Link address”>word that given link</a>
Here I try to create html code for the link:
First, you must determine which sentence will be given a link on your web page.
for example the word “email_mu@gmail.com” in the sentence:

Cara Membuat Link pada HTML

Posted by : Alfa
Date :
With 0komentar
Tag :

Mengatur style table HTML dengan CSS

|
Baca selengkapnya »

Secara default, Biasanya Table pada HTML akan tampak pada browser seperti contoh yang ditampilkan pada Tag untuk membuat Table. Tetapi dengan menggunakan CSS Table, kita dapat mengatur elemen elemen yang ada didalam Table seperti Teks, Gambar dan Backgroundnya. Misalnya kita ingin membuat Table seperti dibawah ini:
Daftar Siswa Kelas IIIA
NamaAlamatTgl Lahir
Fha .SJl. Timu, 16A16-1-1995
BudiantoJl. Merdeka, 23B12-2-1993
Brandy. WJl. Anyelir, 11C10-1-1992
Cyntia DewiJl. Pahlawan. 10C13-8-1993
Solusinya adalah sebagai berikut:
Pertama, kita buat kode HTML nya dengan menggunakan Class dan ID Selector, contoh:

Mengatur style table HTML dengan CSS

Posted by : Alfa
Date :
With 0komentar
Tag :

Membuat Form dengan Tag HTML

|
Baca selengkapnya »

Form adalah salah satu bagian penting dalam sebuah halaman web. Ketika kita mengisi alamat email, mengisi komentar, ataupun kita login pada halaman web, sebenarnya elemen tersebut adalah Form.
Sebelum kita ingin merancang sebuah Form, ada beberapa komponen didalam Form yang harus kita pahami cara pembuatannya menggunakan kode HTML.
Berikut adalah daftar komponent pada Form :

Membuat Form dengan Tag HTML

Posted by : Alfa
Date :
With 0komentar
Tag :

Membuat Paragraf dengan Tag HTML

|
Baca selengkapnya »
Paragraf dalam HTML dapat dibuat dengan menggunakan tag <p>…</p>.
Jadi Teks yang berada diantara tag <p> dan </p> akan membentuk sebuah Paragraf baru.
Tag <p> juga dapat diberi style sesuai keinginan anda dengan menggunakan CSS style.
Berikut adalah contoh penggunaan tag <p> :

Membuat Paragraf dengan Tag HTML

Posted by : Alfa
Date :
With 0komentar
Tag :

Membuat Heading dengan Tag HTML

|
Baca selengkapnya »
Heading dalam HTML dapat dibuat dengan menggunakan tag <h1> sampai dengan <h6>.
Secara Default ukuran font dalam heading sudah ada aturannya mulai dari yang besar <h1> sampai yang terkecil <h6>, tetapi jika ingin mengatur ukuran font sesuai selera anda juga bisa dengan menggunakan CSS Style.

Berikut contoh masing-masing ukuran font pada Heading dengan cara ketikan pada Text Editor kesukaan anda seperti ini:

Membuat Heading dengan Tag HTML

Posted by : Alfa
Date :
With 0komentar
Tag :

Membuat file HTML dengan Notepad ++

|
Baca selengkapnya »
Belajar Html


Pada kesempatan ini Saya akan menjelaskan kepada para pemula tentang cara membuat file HTML secara sederhana sebagai langkah awal cara membuat website.
Tapi sebelum Saya mulai, bagi pemula yang sungguh-sungguh ingin belajar HTML, sebaiknya anda menggunakan HTML Text Editor seperti NotePad atau NotePad ++ misalnya. Karena akan sangat membantu anda untuk lebih cepat menghafal Tag-tag HTML daripada menggunakan program aplikasi layout web yang menyediakan tombol-tombol untuk membuat kode HTML secara instan.

Berikut adalah cara membuat file HTML :

Membuat file HTML dengan Notepad ++

Posted by : Alfa
Date :
With 0komentar
Tag :

Cara Membuat HTML

|
Baca selengkapnya »
Belajar HTMLHTML adalah bahasa pemrograman yang sangat penting untuk dikuasai oleh siapapun yang menekuni dunia maya.Tutorial HTML kali ini adalah tentang bagaimana sebetulnya file HTML itu dibuat.
Dalam contoh sederhana kita melihat bahwa seluruh kode HTML berada di dalam tag <html>…</html>, dan didalamnya terdapat dua bagian yang harus di isi yaitu tag <head>…</head> dan tag <body>…</body>.

Cara Membuat HTML

Posted by : Alfa
Date :
With 0komentar
Tag :

Tutorial HTML

|
Baca selengkapnya »
Belajar HTML
Belajar HTML

Pengertian HTML

HTML ( Hypertext Markup Linguage) adalah sebuah bahasa pemrograman untuk membuat halaman web yang dapat menghubungkan dokumen satu dengan yang lainnya.
HTML dikembangkan pertama kali di CERN yaitu suatu Laboratorium Fisika Partikel yang berlokasi di Swiss.

Struktur Tag dan Atribut

HTML adalah aplikasi untuk SGML (Standard Generalized Markup Language) yang sesuai dengan Standar Internasional ISO 8879. Dalam SGML disediakan tipe elemen yang bisa kita pakai untuk representasi. Setiap elemen berisi paling banyak tiga bagian yaitu tag pembuka, isi dan tag penutup.
HTML mempunyai 3 macam tag yaitu:

Tutorial HTML

Posted by : Alfa
Date :
With 0komentar
Tag :
Prev
▲Top▲