HTML (Hypertext
Markup Language) merupakan bahasa standar web yang didefinisikan dan
dikelola penggunaannya oleh W3C (World Wide Web Consurtium). HTML dibuat
dan dikembangkan oleh Tim Berners-Lee. Selanjutnya , bahasa tersebut
dipopulerkan oleh browser Mosaic. Selama tahun 90-an telah muncul berbagai
versi HTML dengan berbagai macam fiturnya.
Pada HTML5, dalam
menuliskan tag dan atribut dengan huruf kecil tidak ada lagi. Diberi kebebasan
untuk menggunakan huruf kecil, huruf capital, atau kombinasinya. Bahkan, nilai
suatu atribut akan diberi tanda petik atau tidak sama saja. Browser tidak lagi
mempedulikan hal-hal seperti itu.
Cara
Penulisan HTML
<html>
<head>
<title>
JUDUL HTML </title>
</head>
<body> Berisi tentang dokumen yang
akan ditampilkan
</body>
</html>
Atribut
Elemen BODY
A. Background
*Akan menampilkan latar belakang /
background gambar pada website.
<body background=”filegambar.jpg
atau sumber gambar”>
CONTOH (1) :
<body
background=”tanaman.jpg>
Atau
<body
background=”http://www.gambar.com”>
B. Bgcolor
*Akan menampilkan latar belakang /
background warna.
<body bgcolor=”warna”>
CONTOH (2) :
<body
bgcolor=”yellow”>
Atau menggunakan kode warna
<body
bgcolor=”FF0000”>
C. Margin
*Mengatur jarak antar tepi
Topmargin = batas atas
Bottommargin = batas bawah
Leftmargin = batas kiri
Rightmargin = batas kanan
<body topmargin=”angka dalam
pixel(px)”>
CONTOH (3) :
<body
topmargin=200>
D. Warna Link
*Mengatur warna dari Link yang
tersedia.
Link = warna link dokumen
Vlink = warna visited link (ungu)
Alink = warna aktif link (merah)
<body link=”warna” vlink=”warna”
alink=”warna”>
CONTOH (4) :
<body
alink=”red” vlink=”blue”>
E.
Warna
Teks
*Mengatur warna text body atau Isi
website
<body text=”warna”>
CONTOH (5) :
<body
text=”blue”>
Pemformatan
Teks Dan Paragraf Web
A. Heading
*Digunakan untuk membuat judul
<Hn> .... <Hn>
n = 1 – 6
CONTOH (6) :
<H1>
JUDUL
H1 </H1>
<H2>
JUDUL
H2 </H2>
*H1 merupakan
ukuran heading paling besar
B. Format Teks dan Font
*Digunakan
untuk merubah tampilan teks
<p>...</p> Membuat
Paragraf Baru
<br>...</br> Membuat /
pindah ke baris selanjutnya
<hr>...</hr> Membuat
garis horizontal di bawah teks
<i>...</i> Italic /
tulisan miring
<b>...</b> Bold /
tulisan tebal
<u>...</u> Underline /
tulisan di garis bawahi
<marquee>...</marquee>
Membuat tulisan bergerak
CONTOH (7) :
<i> Tulisan ini menggunakan format Italic </i>
<b> Tulisan ini menggunakan format Bold
</b>
<u> Tulisan ini
menggunakan format Underline </u>
Paragraf
<p align=”Left/Right/Center/Justify>...</p>
CONTOH (8) :
<p align=”center>
Tulisan
Ini menggunakan format Rata Tengah
</p>
Font
<font face=”Jenis Huruf”
color=”Warna” Size=”ukuran”>
CONTOH (9) :
<font face=”Calibri” Color=”Red”
Size=”16>
Teks ini menggunakan
jenis font Calibri Berwarna Merah
C. Menyisipkan Gambar Pada Teks
Tag untuk insert image
<img src=”Nama Gambar.jpg”
Border=”ukuran border”>
CONTOH (10) :
<img
src=”gambar.jpg” border=2>
*Gambar harus diletakan dalam 1
folder dengan file html yang dibuat. Border merupakan garis tepi gambar
(menggunakan ukuran angka).
D. Menyisipkan Link Pada Teks
<a href=”alamat link / nama file
html.ext”> ISI TEKS </a>
CONTOH (11) :
*Tulisan Menjadi Link
<a href=”filebaru1.html”>
Buka </a>
Jika meng-Klik tulisan “Buka”, maka
kita akan ditujukan ke file bernama “filebaru1.html
*Gambar Menjadi Link
<a href=http://www.facebook.com><img
src=”gambarfacebook.jpg> </a>
Jika meng-Klik
“gambarfacebook.jpg”, maka kita akan ditujukan menuju link http://www.facebook.com
Pembuatan List
List
adalah bagian teks di dalam dokumen yang berisi daftar item dari suatu kelompok
tertentu.
Tipe
List Dalam Dokumen HTML
A. Daftar Berurutan (Ordered List)
Angka (1,2,3...)
Huruf (a,b,c...)
Angka romawi (i,ii,iii...)
Menggunakan Tag <OL> ...
</OL>
<OL Type=”A”> =
A,B,C,D,E,F.....
<OL Type=”1”> =
1,2,3,4,5,6,7,8....
CONTOH (12) :
<OL Type=”1”>
<li>
Daftar Pertama </li>
<li>
Daftar Kedua </li>
<li>
Daftar Ketiga </li>
</OL>
Akan menghasilkan : 1.
Daftar Pertama
2.
Daftar Kedua
3.
Daftar Ketiga
B. Daftar Tidak Berurutan (Unordered
List)
Disk = 
Circle
= 
Square
= 
Menggunakan Tag
<UL> ... </UL>
<UL
Type=”Disk”> =
<UL
Type=”Circle”> =
<UL
Type=”Square”> =
CONTOH
(13) :
<UL
Type=”Disk”>
<li> Daftar Pertama </li>
<li> Daftar Kedua </li>
<li> Daftar Ketiga </li>
</UL>
Akan
menghasilkan :
· Daftar
Pertama
· Daftar
Kedua
· Daftar
Ketiga
Menyisipkan
Tabel
Tag
Pada Tabel
<table>...</table> Untuk
membuat table dengan atributnya
<caption>...</caption> Untuk
membuat judul tabel
<tr>...</tr> Untuk membuat
baris tabel
<td>...</td> Untuk membuat
sel tabel
<th>...</th> Untuk membuat
judul kolom
Tabel
Propertis (Atribut Tabel)
· Border
(memberikan garis batas pada tabel)
· Cellspacing
(setting jarak dalam pixel antara batas dalam dengan batas luar)
· Cellpadding
(setting jarak dalam pixel antara batas dalam dengan teks nya)
· Align
(penjajaran rata kanan/kiri/tengah)
· Bgcolor
(efek warna pada tabel)
· Rowspan
(menggabungkan jumlah baris ke bawah)
· Colspan
(menggabungkan jumlah kolom ke kanan/kiri)
· Width
(setting batas lebar/panjang tabel)
· Height
(setting batas tinggi tabel
Penulisan
Tabel
<body>
<table>
<tr>
<td>
Kolom 1 Baris 1 </td>
<td>
Kolom 2 Baris 1 </td>
</tr>
<tr>
<td>
Kolom 1 Baris 2 </td>
<td>
Kolom 2 Baris 2 </td>
Akan
Menghasilkan :
Kolom 1 Baris
1
|
Kolom 2 Baris
1
|
Kolom 1 Baris
2
|
Kolom 2 Baris
2
|
FORM
/ FORMULIR
Form
merupakan salah satu bentuk halaman web yang untuk selanjutnya masukan tersebut
diolah bahasa pemrograman web baik secara Server Side Scripting (php) maupun
Client Side Scripting (Java Script)
Form Digunakan untuk berbagai keperluan
seperti LogIn, transaksi penjualan, mengumpulkan informasi / meminta umpan
balik dari pengguna, menawarkan barang / jasa online, dan sebagainya.
Diantara element
<form>...<form> digunakan element-element HTML <input> yang
berfungsi untuk mendefinisikan input yang akan dimasukan oleh pengguna
Anatomi Form
<form method=”get/post” action=”...”
name=”...”> ... </form>
Contoh :
<form name=”nama form”
method=”get/post” name=”nama file”>
Type Form (Input)
<input name=”nama form” size=”ukuran”
type=”type form” value=”isi”>
A. Input Text (TEXT)
<input name=”nama form” type=”TEXT”
value=”value”>
CONTOH :
Nama : <input name=”myform” type=”text” value=”Masukan Namamu
Disini!” size=30>
Akan menghasilkan :
B. Radio Button (RADIO)
<input name=”nama form”
type=”RADIO” value=”value”>
CONTOH :
HOBBY :
<input name=”myform”
type=”radio” value=”memancing”> Memancing </input>
<input name=”myform”
type=”radio” value=”membaca”> Membaca </input>
<input name=”myform”
type=”radio” value=”Bermain”> Bermain </input>
Akan menghasilkan :
C. Checkbox (CHECKBOX)
<input name=”namaform”
type=”CHECKBOX” value=”value>
CONTOH :
<input name="form"
type="checkbox" value="memancing"> Memancing
</input>
<input name="form"
type="checkbox" value="membaca"> Membaca </input>
<input name="form"
type="checkbox" value="bermain"> Bermain </input>
Akan menghasilkan :
D. Dropdown List
<select name=”namaform>
<option>
... </option>
CONTOH :
<select
name="hobby">
<option>
Memancing </option>
<option>
Membaca </option>
<option>
Bermain </option>
</select>
Akan menghasilkan :
E.
Text
Area
<textarea cols=”lebar”
rows=”tinggi”> </textarea>
CONTOH :
Komentar :
<textarea cols=30 rows=10>
</textarea>
Akan menghasilkan :
F.
Button
<input
type="submit/reset" value="value">
CONTOH :
<input type="submit"
value="Log In">
<input type="reset"
value="Batal">
Akan menghasilkan :
Hi. I’m Designer of Blog Magic. I’m CEO/Founder of ThemeXpose. I’m Creative Art Director, Web Designer, UI/UX Designer, Interaction Designer, Industrial Designer, Web Developer, Business Enthusiast, StartUp Enthusiast, Speaker, Writer and Photographer. Inspired to make things looks better.
0 komentar:
Posting Komentar