TUTORIAL HTML

HTML Headings
HTML Paragraphs
HTML Images
HTML Links

HTML Line Breaks
HTML bold/italic
HTML Font, Color and Size
HTML Text Alignment
HTML Tables HTML Lists
HTML Forms
HTML Audio

HTML Headings

untuk membuat judul menggunakan tag < hn> judul < /hn > dengan n adalah angka untuk ketebalan tulisan. angka ini berkisar dari 1 sampai 6
contoh:

Heading menggunakan tag h1

Heading menggunakan tag h2

Heading menggunakan tag h3

Heading menggunakan tag h4

Heading menggunakan tag h5
Heading menggunakan tag h6

HTML Paragraphs

untuk membuat paragraf maka digunakan tag < p > teks < /p > (tanpa spasi)
contoh :

This is a paragraph.

This is another paragraph.

HTML Images

Untuk memasukkan gambar ke dalam dokumen HTML digunakan elemen img di ikuti dengan src (source) sebagai sumber atau lokasi dari gambar. Ketika memasukkan gambar ke dalam dokumen HTML ada tiga atribut yang sangat penting harus selalu disertakan dengan elemen img yaitu alt, width dan height.

Alt (alternate) adalah sebagai teks alternatif yang ditampilkan oleh browser ketika gambar tidak dapat ditampilkan atau ditemukan sedangkan width dan height adalah ukuran lebar dan tinggi gambar dalam satuan pixel(px).

sebagai contoh, kita aka memasukkan gambar Julia Robert dengan width dan height masing-masing 100. berikut hasilnya : Julia Robert

HTML Links

Tag HTML yang digunakan untuk membuat link adalah < a > dan < /a >. Teks apapun yang diapit atau yang berada diantara kedua tag ini akan membentuk sebuah link.

Target dari link adalah alamat url dari sebuah site yang harus ditambahkan diantara tag < a > dan < /a > dengan menggunakan href, sebagai contoh kita akan membuat teks link dengan menggunakan alamat url web ini= "http://www.makandimanakita.co.nr".
contoh: test link

Link dengan gambar
untuk membuat link dengan gambar, setelah kita menuliskan link biasa (menggunakan href) selanjutnya diikuti dengan alamat url gambar yang dimasukkan. misalkan kita ingin membuat link ke yahoo dengan gambar yahoo. berikut hasilnya

HTML Line Breaks

Gunakan tag < br > (tanpa spasi) untuk membuat baris baru tanpa membuat paragraf baru. tag ini tidak memiliki tag penutup. letakkan tag ini sebelum pindah baris. contoh:

This is
a para
graph with line breaks

HTML Bold/Italic

Untuk memberikan efek tulisan tebal menggunakan tag < b > teks < /b > (tanpa spasi). sedangkan untuk membuat tulisan dengan efek miring menggunakan tag < i > teks < /i > (tanpa spasi). contoh :
Tulisan Tebal
Tulisan Miring

HTML Font, Color and Size

untuk mengatur jenis tulisan, ukuran serta warna nya maka kita gunakan font-family, color, and font-size properties


contoh:

A heading

A paragraph.

Text Alignment

Untuk membuat posisi teks (berada di kiri, kanan, atau tengah) maka kita gunakan text-align. contoh:


Center-aligned heading

This is a paragraph.

HTML Tables

gunakan tag < table > untk membuat sebuah tabel. dalam membuat tabel terdiri dari tag baris ( < tr > ) dan tag kolom ( < td > ). contoh :

baris 1, kolom 1 baris 1, kolom 2
baris 2, kolom 1 baris 2, kolom 2

Tables dengan border

Kadang dalam membuat sebah tabel kita ingin agar border nya terlihat lebih tebal atau sama sekali tidak terlihat. caranya kita hanya memberi nilai pada atribut border. contoh dengan border nya 0 (border tidak terlihat).

baris 1, kolom 1 baris 1, kolom 2

Tables Header

Table header (judul tabel) bisa dibuat dengan menggunakan tag < th >. biasanya table header ini terletak ditengah dan tulisannya bold. contoh:

Judul 1 Judul 2
baris 1, kolom 1 baris 1, kolom 2
baris 2, kolom 1 baris 2, kolom 2

HTML Lists

Membuat list pada HTML, bisa dengan cara berurut (ordered list) dan tidak berurut (unordered list) ordered list ditandai dengan angka, sedangkan unordered list ditandai dengan bulatan kecil.


contoh ordered list :
  1. Coffee
  2. Milk
Contoh unordered list:
  • Coffee
  • Milk

HTML Forms

form digunakan untuk memasukkan data kedalam server. tag yang digunakan adalah < form > input element < /form >. untuk inputan berupa teks maka input type nya bernilai 'text'. contoh :

First name:
Last name:

HTML Audio

Pada contoh memasukkan audio ini, kita menggunakan lagu yang sumbernya dari soundcloud.com.

Taylor Swift We Are Never Ever Ever Getting Back Together.. by taylorswift69