Belajar HTML Pemula 2

Hallo guys setelah kemaren kita belajar tag html pemula sesi satu dan sekarang kita belajr di tag html yang sesi 2 kita akan belajar membuat text yang mengandung url atau text aktiv dan lainya pokoknya tag yang kitapelajari hari ini juga penting buat website.

Perintah	Fungsi
"<a href='#'>.....</a> "	Untuk membuat text yang mengandung URL
"<li>.....</li>"	Untuk Membuat sebuah list / daftar
"<i> ........ </i> "	Untuk Menampilkan text italic
" <ul> ...........</ul>"	Untuk Menampilkan list berupa bullet
"<ol> ....</ol> "	Untuk Menampilkan list berupa numerik
"<img src='#'> "	Untuk Menampilkan sebuah gambar dimana # adalah alamat/nama gambar tersebut
" <body bgcolor='#'>"	Untuk Membuat Background berupa gambar dimana # adalah warna seperti 'red' atau hexacolor seperti '#e20d2a' untuk merah
" <button> .........</button>"	Untuk membuat tombol dan ... di isi nama tombol tersebut
"<input type='text'>#</input> "	Untuk Menampilkan From input
"<textarea>#</textarea>> "	Untuk Menampilkan sebuah gambar dimana # adalah alamat/nama gambar tersebut

Praktek
1. List
membuat sebuah list atau daftar dengan perintah li
Pada Notepad ketikan perintah berikut :

<li>Daftar 1</li>
<li>Daftar 2</li>
<li>daftar 3</li>

Maka akan menghasilkan seperti dibawah ini :

Daftar 1

Daftar 2

Daftar 3

Note: tampilan list secara kasar seperti diatas tapi itu bisa diatur dengan menggunakan CSS agar bisa tampil bagus seperti di website-website yang seringkita jumpai.

2. Variasi list UL dan OL
A. UL
Pada Notepad ketikan perintah berikut

<ul>
<li>Daftar 1</li>
<li>Daftar 2</li>
<li>daftar 3</li>
</ul>

Maka akan tampil seperti berikut :

Daftar 1
Daftar 2
Daftar 3

Note: perbedaan dari list biasa adalah pada titik di kanan list yang berupa bullet.

B. OL
Pada Notepad ketikan perintah berikut

<ol>
<li>Daftar 1</li>
<li>Daftar 2</li>
<li>daftar 3</li>
</ol>

Maka akan tampil seperti berikut :

Daftar 1
Daftar 2
Daftar 3

Note: perbedaan dari list biasa adalah pada titik di kanan list yang berupa numerik/nomor.

3. IMAGE
Setelah tadi mempelajari tentang list dan sekarang kita pelajari tentang menampilkan gambar.
tapi sebelum itu silahkan siapkan gambar di folder yang sama dengan file html anda.

Note : didalam folder yang sama sayameletakan file belajar.html dengan file image(jpg) dengan nama dark.jpg pada Notepad ketikan perintah berikut :

Note : ukuran gambar bisa diatur denganmenggunakan CSS.

4.Background
Dalam sesi ini kita akan belajar membuat background yang bisa memiliki warna.
Ketikan perintah berikut pada notepad :

Maka akan tampil seperti perikut :

background berganti menjadi hijau selain menggunakan warna dalam bahasa inggris bisa juga menggunakan hexa color seperti #e20d2a untuk merah dan sejenisnya dan penulisan tag ini harus dibawah tag <body> jangan dibawah tag <head>.

5. Perlengkapan From input

Untuk membuat from inputan seperti dalam memasuki facebook atau ketika sedang searching di Google kita sering menemukan sebuah from untuk mengetikan USername atau text yang akan kita kirimkan. dan semacam itulah yang akan kita buat.

Ketikan perintah berikut di Notepad :

<input type='text'></input><br /><br />
<textarea></textarea><br /><br />
<button>Submit</button>

Maka akan menghasilkan seperti berikut :

Note: Perbedaan input text dengan textarea adalah kapasitas huruf yang dapat ditampung contoh bila menggunakan from username maka gunakanlah input text saja karena hanya membutuhkan sedikit text tetapi kalau kita membuat cerita singkat / kesan pesan maka gunakanlah textarea dan tampilah bisa diperindah dengan menggunakan CSS.

Bonus file html dari modul di atas :
Berkas + gambar : Mediafire
Berkas Html : Mediafire

Sekian perjumpaan kita kali ini dan selamat mencoba.

HtmlChronos

Belajar HTML Pemula 2

Belajar HTML Pemula 2