Apa sih HTML itu?
HTML (Hypertext Markup Language) merupakan bahasa mark up yang di gunakan untuk membuat halaman web dan menampilkan berbagai informasi di dalam sebuah browser.
Tag HTML biasanya berupa tag-tag yang berpasangan dengan simbol (< >) pasangan dari sebuah tag di tandai dengan simbol (/).
Elemen dasar:
1.Jenis dokumen <html> </html> berada di awal dan di akhir file dokumen.
2.Judul <title> </title> selalu berada pada mukadima.
3.Header <head> </head> header/umum.
4.Batang tubuh <body> </body> isi dari halaman HTML.
Format tampilan:
1.Huruf tebal <b> </b> bold.
2.Miring <i> </i> italic.
3.Garis bawah <u> </u> underline.
4.Rata tengah <center> </center> berlaku untuk teks maupun gambar.
5.Ukuran huruf <font size=?> </font> dapat di isi dari 1 sampai 7.
6.Warna huruf <font color=?> </font>.
7.Jenis huruf <font face=?> </font>.
Pemisah:
1.Paragraf <p> </p>.
2.Alignt text <palignt=left/center/right> </p>.
3.Pindah baris <br>.
4.Garis datar <hr> horinzontal rule.
5.Penataan letak garis <hr alignt=left/center/right>.
6.Tebal garis <hr size=?> dalam satuan pixel.
7.Lebar garis <hr width=?> dalam satuan pixel.
Latar belakang dan warna:
1.Latar belakang gambar <body background="url">.
2.Latar belakang warna <body bgcolor=?>.
3.Warna huruf teks <body text=?>.
Tabel:
1.Rancangan tabel <table> </table>.
2.Garis batas tabel <table border=?> </table>.
3.Lebar tabel <table width=?> dalam satuan pixel.
4.Baris dalam tabel <tr> </tr>.
5.Penataan letak garis <tr align=left/center/right/middle/bottom/valign=top/middle/bottom>.
7.Sel dalam tabel <td> </td> harus ada dalam setiap baris tabel.
8.Penataan letak sel <td align=left/center/right/middle/bottom/valign=top/middle/bottom>.
9.Kepala tabel <th> </th>
10.Penataan letak kepala tabel <th align=left/center/right/middle/bottom/valign=top/middle/bottom>.
Berikut contoh sederhana membuat HTML pada notepad.
Contoh membuat biodata sederhana:
<html>
<head>
<title>Ezra</title>
<body><center><b>Biodata</b></center></body>
<table>
<tr>
<td>Nama</td><td>:</td><td>Ezra</td>
</tr>
<td>Jenis Kelamin</td><td>:</td><td>Perempuan</td>
</tr>
</table>
</head>
</html>
| Nama | : | Ezra | Jenis Kelamin | : | Perempuan |
Untuk menyajikan pembuatan list minimal
List Minimal adalah bagian teks di dalam dokumen yang berisi daftar item dari suatu kelompok atau grup tertentu.
Ada 4 list minimal:
1.Ordered List (OL)
Merupakan jenis daftar berupa angka atau sering disebut juga sebagai numbering list. Dalam ordered list ini ada 2 jenis elemen yang di butuhkan yaitu:
<ol></ol> dan <li></li> yang merupakan singkatan dari list item.
2.Unordered List (UL)
Merupakan bentuk daftar berupa poin-poin,nama lainnya adalah bullet. 2 jenis elemen yang di butuhkan yaitu:
<ul></ul> dan <li></li>
3.Nesting List (NL)
Merupakan daftar yang ada dalam daftar. Dalam mengaplikasikannya nesting list menggnakan kombinasi dari dua jenis list yaitu :
<ol> dan <ul>,<ol> dan <ol>,<ul> dan <ul>
4.Definition List (DL)
Merupakan jenis daftar yang umumnya digunakan untuk mendefinisikan sesuatu. Definition list menggunakan 3 tag yaitu <dl>,<dt> definition term,<dd> definition description yang merupakan penjelasan dari suatu istilah dari dt.
List Kombinasi adalah gabungan daftar berurutan dan daftar tidak berurutan yang mencakup antara OL dan UL.
Contoh sederhananya:
<html>
<head>
<body>Daftar Nama Siswa-Siswi Yang Tidak Hadir</body>
<table>
<tr>
<td>
<li>Chyntia</li>
</tr>
<td>
<li>Bob</li>
</tr>
</table>
</head>
</html>
Daftar Nama Siswa-Siswi Yang Tidak Hadir
|
|
|
Format Tabel Halaman WEB
Tabel merupakan cara untuk menampilkan informasi dalam bentuk sel yang terdiri atas baris dan kolom.
Atribut elemen tabel
width : lebar tabel
high : tinggi tabel
border : tebal garis tepi
cellspecing : spasi antar sel
cellpadding : spasi di dalam sel
align : perataan tabel
bgcolor : warna latar belakang tabel
rowspan : penggabungan baris
colspan : penggabungan kolom
Contoh sederhanya:
<html>
<head>
<body>Contoh Pembuatan Tabel</body>
<table border=1>
<tr>
<td>Baris 1 kolom 1</td>
<td>Baris 1 kolom 2</td>
</tr>
<td>
<td>Baris 2 kolom 2</td>
</tr>
<td>
<td>Baris 3 kolom 2</td>
</table>
</head>
</html>
Contoh Pembuatan Tabel
| Baris 1 kolom 1 | Baris 1 kolom 2 | Baris 2 kolom 2 |
Layout Halaman WEB
Layout merupakan tata letak elemen halaman situs web. Desain layout suatu halaman web meliputi penyusunan.
Pertama : pembagian tempat pada halaman
Kedua : pengaturan jarak spasi
Ketiga : Pengelompokkan teks dan grafik
Keempat : penekanan pada suatu bagian tertentu
Contoh sederhananya:
<html>
<head>
<title>left index</title>
<td rowspan=3>
<table rowspan=3 width="30" height="275" border=1 align=left>
<tr>
<td bgcolor=blue align=left><font size=6>Home<p><align=left>Profil<p><align=left>About<p><align=left>Blog</font><br></p>
<tr>
<table rowspan=3 width="500" height="70" border=1 alignt=left>
<tr>
<td bgcolor=red align=center><font size=9><b>Desain Halaman Web</td></font></b>
</tr>
<tr>
<td height="5" bgcolor=yellow align=center border=1>
<font color=blue align=center>Selamat datang diweb kami.<p><align=center>Sebuah dokumen tidak jarang digunakan<p><align=center>untuk menampilkan data kepada penggunanya.<p><align=center>Terdapat banyak cara untuk menampilkan data,<p><align=center>mulai menggunakan grafik,daftar sampai dengan tabel.</font><br></p>
<table width=500 height=12 border=1 align=left>
<tr>
<td bgcolor=violet align=center>EMOYS.Com</td>
</tr>
</table>
</head>
</html>
Multimedia
Pada Halaman
Contoh sederhananya:
Tampilan Gambar
Tampilan Gambar
<html>
<head>
<body>Tampilan
Gambar</body>
<p><img
src="345.jpeg"></p>
</head>
</html>
Hyperlink
Pada Halaman WEB
Link adalah suatu gambar atau teks yang
terkait dengan satu alamat tertentu. Ditandai dengan anchor (janngkar),yaitu
tag <a> (href atau disingkat dari Hypertext Reference). Digunakan untuk
memudahkan user menelusuri isi atau informasi yang tersimpan dalam website yang
bersangkutan. Tag <a> mempunyai atribut :
1.
Href
Bagian dari web page yang
menghubungkan user ke file lain,menyediakan link (hubungan) ke file-file pada
komputer lain.
2.
Target
Untuk menampilkan halaman
web pada suatu jendela frame atau jendela baru.
3.
URL
(Uniform Resource Lacator)
adalah rangkaian karakter menurut suatu format standar tertentu yang digunakan
untuk menunjukkan suatu sumber seperti dokumen dan gambar diinternet.
Ada 3 jenis link:
-Link antar halaman
-Link ke E-mail
-Link ke website
Contoh sederhananya:
<html>
<head>
<body>
<h1>Selamat
Datang</h1>
Buka
Halaman Email saya
<a
href="https://mail.google.com/mail/#inbox?compose=new">klik
disini</a>
<br>atau
Email saya <a
href="mailto:ezra.moys@gmail.com">disini</a>
<br>Koleksi
video saya di <a href="tugas multimedia 1.htm"
target="_parent">sini</a>
</body>
</head>
</html>
Formulir Pada Halaman WEB
Form
Merupakan salah satu
bentuk halaman web yang digunakan untuk menerima masukan dari
pengguna,selanjutnya diolah menggunakan bahasa pemrograman web baik secara
server side scripting maupun client side scripting. Format umumnya adalah
<form> </form>.
Ada 2 atribut yang
digunakan yaitu:
1.
Method : untuk pengiriman
ketujuan.
Method terdiri dari :
-Get : mengirim data ke server dengan cara meletakkan
data pada bagian akhir dari URL yang dituju.
-Post : datanya dikirim terpisah.
2.
Action : untuk menentukan
tujuan apabila sebuah tombol form dijalankan.
Perbedaan atribut method get dan post:
Get : untuk query pencarian
Post : untuk data seperti password atau
register user.
Beberapa elemen input pada form:
a.
Text box <input type
:”text”>
b.
Password <input type
:”password”>
c.
Hidden <input type
:”hidden”> untuk mengirim data kesuatu aplikasi yang tidak diinginkan untuk
dilihat oleh browser.
d.
Checkbox <input type
:”checkbox”> dapat memilih lebih dari 1 pilihan
e.
Radio button <input type
:”button”> hanya dapat memilih salah satu pilihan.
f.
Push button <input type
:”button”> digunakan dengan Java scrip atau visual basic scrip untuk
menghasilkan suatu aksi.
g.
Submit <input type
:”submit”> untuk mengirimkan nama dan nilainya kesuatu aplikasi dalam
atribut action didalam element form.
h.
Image submit bottom <input
type :”image” SRC:”URL”> untuk menggantikan tombol standar submit dengan
image.
i.
Reset <input type
:”reset”> untuk mereset semua masukan dalam form.
j.
Text area
<textarea></textarea>
k.
Select
<select></select> merupakan daftar isi property select menggunakan
tag option.
Contoh sederhananya:
<html>
<head>
<title> tugas kelompok </title>
<h1> BELAJAR FORM MENGGUNAKAN ENTRI KESELURUHAN </h1>
<table>
<tr>
<td>Teks</td> <td>:</td> <td><input type="text" name="nama"></td>
</tr>
<tr>
<td>Password</td> <td>:</td> <td><input type="password"></td>
</tr>
<tr>
<td>Hidden</td> <td>:</td> <td><input type="hidden"></td>
</tr>
<tr>
<td>bullet</td> <td>:</td> <td><input type="radio" name="j.kelamin"> laki-laki</td>
<td><input type="radio" name="j.kelamin"> perempuan</td>
</tr>
<tr>
<td>kotak</td> <td>:</td> <td><input type="checkbox"> 1
<input type="checkbox"> 2
<input type="checkbox"> 3
<input type="checkbox"> 4 </td>
</tr>
<tr>
<td>daftar list</td> <td>:</td> <td><select>
<option> 1
<option> 2
<option> 3
<option> 4
</select></td>
</tr>
<tr>
<td><input type="submit" value="submit">
<input type="reset" value="reset"></td>
</tr>
</table>
</form>
</head>
</html>
Style Halaman WEB
Style pada table
Tabel digunakan untuk
menampilkan informasi yang terdiri dari baris dan kolom agar tempat lebih rapi
dan mudah dipahami.
Berikut ini beberapa
property dasar untuk mengatur style pada table.
1.
Border, terdapat beberapa nilai
dalam border yaitu :
a.
Ketebalan garis border dengan
satuan px.
b.
Style garis : solid (garis
penuh),dotted (titik-titik),dashed (strip-strip).
c.
Warna garis border.
2.
Border collapse, digunakan
untuk menetapkan sebuah border antar sel dilebur menjadi 1 border atau dipisah
menjadi 2 border.
3.
Lebar, untuk menetapkan lebar
table / kolom. Width bekerja pada selector table dan th / td. Nilai width
berupa px atau %.
4.
Heigh, untuk menetapkan tinggi
table / baris pada kolom. Heigh bekerja pada selector table dan tr. Nilai heigh
untuk table dinyatakan dalam px atau % sedangkan heigh untuk tr dinyatakan
dalam px.
5.
Teks align, untuk mengatur
align text pada table. Bisa di setting left, right, dan center.
6.
Vertical align, untuk mengatur
posisi vertical align text pada table. Bisa di setting top / bottom.
7.
Margin, untuk mengatur jarak
antar elemen lain di samping kiri, kanan, atau sebelah atas atau bawah. Jika di
setting 15px, 5px, 10px, 3px.
Artinya:
a.
Atas : 15 px c. Bawah : 10 px
b.
Kanan : 5 px d. Kiri : 3 px
8.
Padding, untuk mengatur jarak
antar border table dengan isi table. Untuk pengaturannya sama dengan margin.
9.
Color, untuk mengatur warna
pada teks, pada isi table.
10.
Background-color, untuk
mengatur warna background pada table.
Contoh sederhananya:
<html>
<head>
<style>
table,tr,td
{border:2px solid green}
table,th
{border:1px solid red}
table
border,tr,td,th {width:300;height:200}
table,th
{vertical-align:bottom}
table,tr,th
{margin:20px 1px 10px 20px}
table,tr,td
{padding:15px 1px 5px 10px}
p1
{color:blue}
</style>
</head>
<body>
<p1>Contoh
Sederhana</p>
<table>
<tr>
<td>baris
1 kolom 1 </td>
<td>baris
1 kolom 2 </td>
</tr>
<tr>
<th>baris
2 kolom 1 </th>
<th>baris
2 kolom 2 </th>
</tr>
</table>
</body>
</html>
Contoh
style pada form:
<html>
<style>
Form
{border:2px solid black; Width:400 Height:300;Margin-left:0;Margin-Right:900;}
td
{vertical-align:top}
body
{text-align:center}
form
{Margin-Left:450; Margin-Right:450}
input
{border-top:0px solid;
Border-right:0px
solid;
Border-left:0px
solid;
Border-bottom:2px;
border-style:dotted}
</style>
<form
name="Form1">
<body>
<h2> FORMULIR PENDAFTARAN </h2> <table>
<tr>
<td>
Nama </td>
<td>
: </td>
<td>
<input type=text> </td>
</tr>
<tr>
<td>
Pesan </td>
<td>
: </td>
<td>
<input type=text> </td>
</tr>
<tr>
<td>
Agama </td>
<td>
: </td>
<td>
<input type=text> </td>
</tr>
<tr>
<td>
Jenis Kelamin </td>
<td>
: </td>
<td>
<input type="radio"> Laki-laki
<input
type="radio"> Perempuan
</td>
</tr>
<tr>
<td>
Alasan Daftar </td>
<td>
: </td>
<td>
<textarea> cols=40 rows=12 </textarea> </td>
</tr>
</body>
</table>
</form>
</html>
Contoh style Multimedia dan kolom:
<html><head>
<title>Percobaan Sederhana</title>
<style>
body {background:greenyellow}
Img {margin-top :10px;
float:left;
clear:both;
width:300px;
height:500px}
Table,th,td
{border:1px solid black; float:center}
</style>
<body><font face="old english text mt" size="6"><center>Cosplay Seo Yuzuki</center></font>
<img src="d14c638559d75eab79a2f800a323c706.jpg">
<table>
<tr>
<td><center><b><font face="jokerman" size="6">Yuzuki Seo</font></b></center></td>
</tr>
<tr>
<td><center><i><b><font face="chiller" size="6">"Lorelei from Vocal Group Club"</font></b></i></center></td>
</tr>
<tr>
<td><center><font face="comic sans ms" size="5"><u>Latar Belakang</u></font></td>
</tr>
<tr>
<td><font face="comic sans ms" size="4">Merupakan gadis tomboy yang mengikuti Ekskul Basket dan Paduan Suara.Dia dijuluki sebagai <i><b>"Gadis bermuka tebal"</b></i> Karena tidak dapat membaca situasi dan kondisi di sekitarnya. Dia memiliki suara emas sehingga dijuluki Lorelei dari Klub Paduan Suara</font></td>
</tr>
</body>
</head>
</html>
SEKIAN
DARI PEMBUATAN BLOG INI, KURANG DAN LEBIHNYA SAYA MOHON MAAF.
SEKIAN
DAN TERIMA KASIH