Showing posts with label HTML. Show all posts

Belajar Dasar HTML untuk Pemula (Lengkap)

HTML adalah bahasa pemrograman yang digunakan untuk membuat web. HTML sangat tepat sekali untuk mengawali anda untuk menjadi seorang progammer web.

HTML itu sendiri adalah singkatan dari Hyper Markup Text Language yang diciptakan oleh bapak Tim Berners-lee. Dan kerennya lagi seorang progammer web mendesain tampilan web hanya dengan mengetikkan baris kode bahasa pemrograman. Magic.!.

Sesuai dengan judulnya, silahkan lanjut kebawah.

Apa yang dibutuhkan.?

Kemauan untuk belajar
Sebuah program text editor untuk tempat penulisan kode (Coding).

Anda bisa menggunakan notepad yang tersedia di windows. tapi saya sarankan untuk menggunakan program yang didesain khusus untuk koding. saya biasa menggunakan Sublime Text, atau text editor lainnya.

Baca : 5 daftar text editor yang mudah digunakan

Materi:

Menyiapkan Project
Struktur Dasar HTML
Tipografi
List / Daftar
Tabel
Menyisipkan Gambar

Menyiapkan Project

Biasanya para programmer web membuat folder tersendiri untuk 1 proyek web, 1 level didalam folder tersebut dinamakan dengan root

Buat satu folder untuk project pertama anda.
Setelah membuat folder projectnya, buka menggunakan notepad atau sublime text
Buat satu file dengan nama terserah namun berekstensi .html.
contoh : index.html.

Struktur Dasar HTML

Didalam bahasa pemrograman HTML, sistem penulisan kode memakai sistem buka tutup tag.
misal, tag <html> ditutup dengan </html> , tag <head> ditutup dengan </head> dan sebagainya.

Secara umum, struktur html sederhana seperti berikut, Tuliskan Kode dibawah pada text editor anda:

<html>
<head>
isinya head
</head>
<body>
isinya body
</body>
</html>

Maka kode diatas dapat diartikan seperti gambar dibawah

Didalam tag <head>, berisi kumpulan pendukung dokumen, seperti judul tab <title>, memanggil file css <link>, dan bahkan memuat file javascript <script>.

Sementara semua yang ada didalam tag <body>, akan tampil didalam halaman. Ada banyak sekali tag yang dapat anda gunakan.

Coba ketikkan kode seperti dibawah dan jalankan di browser:

<html>
  <head>
    <title>Ini Judulnya</title>
  </head>
  <body>
    Ini yang tampil di web browser
  </body>
</html>

Penjelasan

Teks yang ada pada <body> muncul di browser,
sementara pada tag <head> tidak muncul di halaman browser.
Namun <title> tampil sebagai nama tab karena memang sudah menjadi fungsinya

Tipografi

Tipografi singkatnya adalah model penulisan. Pada HTML sendiri sudah disediakan tag yang menangani desain tipografi, seperti: Heading, Bold, Italic, Underline, dan masih banyak yang lainnya. Mari kita bahas

Heading <h1>, <h2>, .... <h6>

Heading adalah tulisan besar yang memfokuskan kalimat didalamnya. Biasa digunakan untuk nama website, judul dan lain sebagainya.

Contoh

<html>
  <head>
    <title>Belajar html</title>
  </head>
  <body>
    <h1>Ini contoh Heading 1</h1>
    <h2>Ini contoh Heading 2</h2>
    <h3>Ini contoh Heading 3</h3>
    <h4>Ini contoh Heading 4</h4>
    <h5>Ini contoh Heading 5</h5>
    <h6>Ini contoh Heading 6</h6>
  </body>
</html>

Hasil Output

Ini contoh Heading 1

Ini contoh Heading 2

Ini contoh Heading 3

Ini contoh Heading 4

Ini contoh Heading 5

Ini contoh Heading 6

Cetak huruf (tebal, miring, underline dan coretan)

Pada saat kita mengetikkan dokumen pada microsoft word (misalnya). Kita tak pernah luput dari model huruf ini. Yaitu cetak tebal, miring dan garis bawah, Sesekali menggunakan Strike / coretan.

Kita juga dapat menggunakannya pada html.

tag <b> untuk mencetak huruf tebal

tag <u> untuk mencetak huruf dengan garis bawah

tag <i> untuk mencetak huruf miring

tag <ss> untuk mencetak huruf seperti dicoret

berikut demonya

<html>
    <head>
        <title></title>
    </head>
    <body>
        <b>Ini huruf tebal</b><br>
        <u>Ini huruf bergaris bawah</u><br>
        <i>Ini huruf miring</i><br>
        <ss>Ini huruf yang dicoret</ss><br>
    </body>
</html>

Hasil Output

Ini huruf tebal
Ini huruf bergaris bawah
Ini huruf miring
Ini huruf yang dicoret

List / Daftar

Daftar item tanpa nomor <ul>

<html>
    <head>
        <title></title>
    </head>
    <body>
        <ul>
            <li>Urutan daftar 1</li>
            <li>Urutan daftar 2</li>
            <li>Urutan daftar 3</li>
            <li>Urutan daftar 4</li>
            <li>Urutan daftar 5</li>
        </ul>
    </body>
</html>

Hasil Output

Urutan daftar 1
Urutan daftar 2
Urutan daftar 3
Urutan daftar 4
Urutan daftar 5

Daftar item dengan nomor <ol>

<html>
    <head>
        <title></title>
    </head>
    <body>
        <ol>
            <li>Urutan daftar 1</li>
            <li>Urutan daftar 2</li>
            <li>Urutan daftar 3</li>
            <li>Urutan daftar 4</li>
            <li>Urutan daftar 5</li>
        </ol>
    </body>
</html>

Hasil Output

Urutan daftar 1
Urutan daftar 2
Urutan daftar 3
Urutan daftar 4
Urutan daftar 5

Deskripsi Item

<html>
    <head>
        <title></title>
    </head>
    <body>
        <dl>
            <dt>Mouse</dt>
            <dd>Inputan yang digunakan komputer sebagai penggerak kursor</dd>
        </dl>
        <dl>
            <dt>LCD</dt>
            <dd>Sejenis layar yang menggunakan air kristal dengan diterangi oleh backlight</dd>
        </dl>
        <dl>
            <dt>Android</dt>
            <dd>Sistem operasi yang dibuat oleh google dan dijalankan pada perangkat seluler</dd>
        </dl>
    </body>
</html>

Hasil Output

Mouse: Inputan yang digunakan komputer sebagai penggerak kursor

LCD: Sejenis layar yang menggunakan air kristal dengan diterangi oleh backlight

Android: Sistem operasi yang dibuat oleh google dan dijalankan pada perangkat seluler

Tabel

Tabel standar

Untuk membuat tabel pada html, kita perlu mengetahui struktur tabel yang diterapkan pada html. Tabel HTML menggunakan 3 tag utama yaitu <table>, <tr>, <td>
<table> adalah tag yang mewakili seluruh komponen tabel
<tr> adalah baris dari suatu tabel
<td> adalah cell dari suatu baris.
<th> adalah cell untuk header, perbedaannya dengan td adalah pada th tulisan lebih tebal.

pada kondisi bawaan, tabel tidak memiliki border / garis tepi. Sehingga kita harus menambahkan atribut pada tag <table> berupa border="1" (1 berarti memiliki ketebalan garis level 1)
Silahkan coba kode berikut:

<html>
    <head>
        <title></title>
    </head>
    <body>
        <table border="1">
            <tr>
                <th>No</th>
                <th>Nama</th>
                <th>Alamat</th>
            </tr>
            <tr>
                <td>1</td>
                <td>Ahmad</td>
                <td>Jl. Jakarta</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Budi</td>
                <td>Jl. Surabaya</td>
            </tr>
            <tr>
                <td>3</td>
                <td>Ahmad</td>
                <td>Jl. Semarang</td>
            </tr>
        </table>
    </body>
</html>

Hasil Output

No	Nama	Alamat
1	Ahmad	Jl. Jakarta
2	Budi	Jl. Surabaya
3	Ahmad	Jl. Semarang

Tabel Gabungan

untuk menggabung cell, anda dapat menggunakan
rowspan="jumlah_baris" : untuk menggabungkan baris
colspan="jumlah_kolom : untuk menggabungkan kolom

<html>
    <head>
        <title></title>
    </head>
    <body>
        <table border="1">
            <tr>
                <th rowspan="2">No</th>
                <th rowspan="2">Nama</th>
                <th rowspan="2">Alamat</th>
                <th colspan="2">Orang Tua</th>
            </tr>
            <tr>
                <th>Ayah</th>
                <th>Ibu</th>
            </tr>
            <tr>
                <td>1</td>
                <td>Ahmad</td>
                <td>Jl. Jakarta</td>
                <td>Adi</td>
                <td>Rani</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Budi</td>
                <td>Jl. Surabaya</td>
                <td>Saputra</td>
                <td>Dinda Ayu</td>
            </tr>
            <tr>
                <td>3</td>
                <td>Ahmad</td>
                <td>Jl. Semarang</td>
                <td>Saefudin</td>
                <td>Rohmah</td>
            </tr>
        </table>
    </body>
</html>

Hasil Output

No	Nama	Alamat	Orang Tua
No	Nama	Alamat	Ayah	Ibu
1	Ahmad	Jl. Jakarta	Adi	Rani
2	Budi	Jl. Surabaya	Saputra	Dinda Ayu
3	Ahmad	Jl. Semarang	Saefudin	Rohmah

Menyisipkan Gambar

Untuk menyisipkan gambar, tag yang digunakan adalah

<img src="alamat_gambar">

Pada alamat gambar, anda dapat memberikan alamat di internet (komputer harus terkoneksi internet) ataupun gambar lokal yang ada dalam komputer anda.

Pada gambar lokal, gambar harus satu folder dengan file html, sehingga menjadi
<img src="gambar.png">. Atau anda dapat menyimpan gambar didalam folder lebih dalam misal
<img src="images/gambar.png".
Jangan lupa untuk memberikan ekstensi file seperti png, jpeg, bmp dan lain sebagainya pada alamat

<html>
    <head>
        <title></title>
    </head>
    <body>
        <h2>Dibawah adalah gambar cover dari artikel ini</h2>
        <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAbb-qRI-5y5fzn4VLHTuur_mBBEIiZEnkv7FbFhRs32h0xEty7hVdwJk-JqFamgjTjE-Uf1c9HiD1JdEdxEib1FBNt9mQtaJgQBKJgf3P75Q4ikJMvT7TONNbavLAo1O-bjnhVcawveA/s400/Belajar.jpg">
    </body>
</html>

Hasil Output

Dibawah adalah gambar cover dari artikel ini

Tutorial membuat form validasi dengan javascript agar lebih interaktif

wandi

Validasi sangat diperlukan dalam membuat sebuah aplikasi. Di pembahasan kali ini saya membagikan validasi mengenai validasi form. Mengapa validasi diperlukan ? tentu diperlukan, misalkan kita membuat sebuah aplikasi yang didalam formnya berisi nama, umur, alamat. Terus user sengaja ngisi formnya kosong. Maka hal tersebut bisa membuat fatal tentunya.

langsung kepembahasan. pertama tama kita buat HTML seperti di bawah.

<pre>

<form novalidate pemilahan(this);"method="post">

<input type="text"placeholder="nama"/>

<input type="text"placeholder="umur"/>

<textarea placeholder="alamat"></textarea>

<input type="submit"value="submit"/>

</form>

</pre>

oke jadi ketika kita mengklik submit maka akan melakukan fungsi pemilahan(this) dan mengeper formnya . Bro kenapa pake return ? jadi return untuk mengembalikan nilai , kita akan mengembalikan jika semuanya sudah di isi maka akan return true dan jika ada yang tidak di ini maka akan mengembalikan nilai salah , jadi browsernya tidak di reload . Oke langsung aja kita buat fungsinya .

bagian javascript

function pemilahan(data){

var status=true;

var index=0;

while(index<=2){

if(data[index].value.trim().length<=0){

data[index].style.borderColor="red";

status=false;

switch(index){

case 0:

alert("nama kosong");

break;

case 1:

alert("umur kosong");

break;

case 2:

alert("alamat kosong");

break;

}

}else{

data[index].style.borderColor="";

}

index++;

}

return status;

}

nah si status itu di sisi nilai awalnya adalah true dan jika ada yang tidak di ini maka kan , jadi false , lalu jika semua sudah di pilah mengembalikan nilai status . yang jika di isi semua akan status = true jika ada yang tidak maka return false.

Apa itu Bootstrap ?

wandi 12:35 AM css HTML javascript Add Comment

wandi

Halo teman kembali kita akan membahas mengenai kokodean. kali ini saya akan membahas mengenai pengetahuan dulu mengenai coding, kali ini saya akana membahas mengenai Bootstrap . Bootstrap mungkin tidak asing di telingan yang sudah tidak asing lagi ( Sok asik lah ). Banyak sekali website website yang menggunakan bootstrap untuk bagian front-end. Apa sih bootstrap itu? baik lah langsung saya bahas.

Menurut mah wiki

BOOTSTRAP adalah Aplikasi sumber terbuka yang berupa framework atau kerangka kerja untuk membangun website dinamis dengan menggunakan bahasa script CSS. BOOTSTRAP memudahkan developer dan designer untuk membuat sebuah aplikasi web menjadi cepat dan mudah dibandingkan dengan membuatnya dari awal.

Singkatnya Bootstrap adalah merupakan framework yang bersifat open source yang digunakan untuk mendesain sebuah websiste.

Untuk mendownload Bootstrap bisa kunjungi websistenya langsung https://getbootstrap.com/ .

Keuntungan Menggunakana Bootstrap

Dengan mendesain website menggunakan bootstrap kita bisa membuat desain web menjadi lebih cepat kali kita tinggal menggunakan class classnya saja.
Dengan menggunakan bootstrap membuat website kita lebih responsive atau enak di liat di berbagai ukuran baik smartphone, maupun komputer.

Oke itulah wawasan singkat mengenai bootstrap, semoga wawasan yang singkat ini bisa membuat manfaat yang tidak singkat. Sampai jumpa.

Membuat form dengan html5

wandi 5:10 AM HTML 4 Comments

wandi

Selamat datang kawan di blog saya kali ini saya akan berbagi mengenai cara membuat form dengan html5 . Karena sekarang html sudah sampai 5 , tentu banyak sekali fitur fitur dari html5 ini . Gimana sih cara pake html5 ? cara pake html5 kita tinggal ketik di bagian atas <! DOCTYPE html> ini memberitahu ke browser bahwa dokumen ini merupakan html5 tentu kalo kita tidak menggunakan <! DOCTYPE html> maka html versi sebelumnya .

Membuat table di HTML

wandi 2:14 AM HTML Add Comment

wandi

Sekarang kali ini kita akan belajar cara membuat table di HTML . Di dalam sebuah table kita memiliki yang namanya baris dan kolom , tentu kawan kawan sudah pada mengetahuinya baris dan kolom .

Table ini berguna salah satunya kita bisa membuat template dengan menggunakan table , tetapi mungkin sekarang sudah tidak ada lagi sebuah website yang templatenya table . Jadi untuk membuat template sekarang kita gunakan css dan html . Oke kembali lagi ke table . Untuk membuat table kita gunakan tag <table> dan untuk barisnya kita gunakan tag <tr> dan untuk kolomnya kita gunakan yang namanya tag <td> atau tag <th> . Biasanya tag <th> digunakan untuk membuat judul dari setiap kolomnya .