e-bookilearning.me/wp-content/uploads/2014/01/first-e-book.pdf · format ascii normal sehingga...
TRANSCRIPT
e-book ini di buat sebagai bahan penunjang pembelajaran di Perguruan Tinggi Raharja
Pengantar
erkembangan dunia Teknologi internet saat ini berkembang begitu pesat. Seiring dengan perkembangan tersebut maka webside di jadikan sarana dalam pengolah informasi di dunia maya( internet). Untuk membangun sebuah webside bukanlah hal yang mudah, e-book ini akan memberikan inforrmasi dasar mengenai CSS dan
HTML. Dan sebagai referensi pembelajaran http://idu.raharja.info/ di Perguruan Tinggi Raharja
Daftar Isi
Bab 1 : Menaiki anak tangga pertama, Sejarah singkat HTML
Bab 2 : Mendekati,mengerti dan memahami HTML
Bab 3 : Pertengahan anak tangga, Lebih dalam memahami HTML
Bab 4 : anak tangga terakhir, mempercantik tampilan dengan CSS
Bab 1 :
Menaiki anak tangga pertama,
Sejarah Singkat HTML
HTML adalah, (HyperText Markup Language) sebuah bahasa standar yang digunakan
oleh browser Internet untuk membuat halaman dan dokumen pada sebuah Web . HTMLjuga
dapat digunakan sebagai link link antara file-file dalam situs atau dalam komputer dengan
menggunakan localhost, atau link yang menghubungkan antar situs dalam dunia
internet. HyperText Markup Language (HTML) adalah sebuah bahasa markup yang digunakan
untuk membuat sebuah halaman web, menampilkan berbagai informasi di dalam
sebuah Penjelajah web Internet dan formating hypertext sederhana yang ditulis kedalam
berkas format ASCII agar dapat menghasilkan tampilan wujud yang terintegerasi. Dengan kata
lain, berkas yang dibuat dalam perangkat lunak pengolah kata dan disimpan kedalam
format ASCII normal sehingga menjadi home page dengan perintah-perintah HTML. Bermula
dari sebuah bahasa yang sebelumnya banyak digunakan di dunia penerbitan dan percetakan
yang disebut dengan SGML(Standard Generalized Markup Language), HTML adalah sebuah
standar yang digunakan secara luas untuk menampilkan halaman web. HTML saat ini
merupakan standar Internet yang didefinisikan dan dikendalikan penggunaannya oleh World
Wide Web . HTML dibuat oleh kolaborasi Caillau TIM dengan Berners-lee robert ketika mereka
bekerja di CERN pada tahun 1989 (CERN adalah lembaga penelitian fisika energi tinggi di
Jenewa).
1. Tahun 1980, IBM memikirkan pembuatan suatu dokumen yang akan mengenali
setiap elemen dari dokumen dengan suatu tanda tertentu. IBM kemudian
mengembangkan suatu jenis bahasa yang menggabungkan teks dengan perintah-
perintah pemformatan dokumen. Bahasa ini dinamakan Markup Langiage, sebuah
bahasa yang menggunakan tanda-tanda sebagai basisnya. IBM menamakan sistemnya
ini sebagai Generalized Markup Language atau GML.
2. Tahun 1986, ISO menyatakan bahwa IBM memiliki suatu konsep tentang
dokumen yang sangat baik, dan kemudian mengeluarkan suatu publikasi ( ISO 8879 )
yang menyatakan markup language sebagai standar untuk pembuatan dokumen-
dokumen. ISO membuat bahasa ini dari GML milik IBM, tetapi memberinya nama lain,
yaitu SGML ( Standard Generalized Markup Language ).
HTML versi 1.0
Kemampuan yang dimiliki versi 1.0 ini antara lain heading, paragraph, hypertext, list, serta
cetak tebal dan miring pada teks. Versi ini juga mendukung peletakan image pada dokumennya
tanpa memperbolehkan meletakkan teks
disekelilingnya (wrapping).
HTML versi 2.0
Pada versi ini, penambahan kualitas HTML terletak pada kemampuannya untuk menampilkan
suatu form pada dokumen. Dengan adanya form ini, maka kita dapat memasukkan nama,
alamat, serta saran/kritik. HTML versi 2.0 ini merupakan pionir dari adanya homepage
interaktif.
HTML versi 3.0
HTML versi 3.0 menambahkan beberapa fasilitas baru seperti table. Versi ini yang disebut juga
sebagai HTML+ tidak bertahan lama dan segera digantikan HTML versi 3.2.
HTML versi 4.0
HTML versi 4.0, seperti yang kita kenal HTML pada saat ini penambahan link, meta, imagemaps
, image dan lain lain sebagai penyempurnaan versi 3.2diambil.
HTML versi 5.0
Pada tanggal 4 Maret 2010, terdapat sebuah informasi bahwasanya HTML versi 5.0 masih
dikembangkan oleh W3C (World Wide Web Consortium) dan IETF (Internet Engineering Task
Force) yaitu sebuah organisasi yang menangani HTML sejak versi 2.0
Bab 2 :
Mendekati, Mengerti
dan Memahami HTML
STRUKTUR DOKUMEN HTML
a. Tag
Tag adalah khusus (markup) berupa karakter “<”dan “>”, sebagai contoh <title>
adalah tag dengan nama title. Secara umum tag di tulis secara berpasangan terdiri atas
tag pembuka dan tag penutup (di tambah karakter”/” setelah karakter “<” ). Sebagai
contoh <title> ini adalah tag pembuka judul dokumen html dan </title> adalah tag
penutup judul html
b. Elemen
Elemen terdiri dari tiga bagian yaitu tag pembuka,tag isi dan tag penutup.
Sebagai contoh untuk memberikan isi atau tampilan apa saja yang ada dalam dokumen
html kita menggunakan tag body.
<body> sebagai tag pembuka dan </body> sebagai tag penutup.
<html>
<head>
<title> ini adalah HTML </title>
</head>
<body>
Hallo Pribadi Raharja!
</body>
</html>
Elemen HTML
Untuk menyatakan pada web browser bahwa dokumen web yang digunakan adalah HTML
<html>
………
</html>
Elemen Head
Merupakan kepala dari dokumen HTML, tag <head> dan tag </head> terletak diantara tag
<html> dan tag </html
<head>
……….
</head>
Elemen Title
Merupakan judul dari dokumen HTML yang di tampilkan pada judul jendela browser. Tag <title>
dan tag </title> terletak diantara tag <head> dan tag </head>.
<title>
<html> ... </html> : merupakan tag pembuka sebuah dokumen html.<head> ... </head> : bagian kepala html<title> ... </title> : merupakan tag untuk memberikan judul pada dokumen html.<body> ... </body> : bagian isi atau segala sesuatu yang akan di tampilkan padaa sebuah dokumen html
……….
</title>
Elemen Body
Elemen ini di gunakan untuk menampilkan isi dokumen HTML. Tag <body> dan tag </body>
terletak di bawah tag <head> daan tag </head>.
<body text=”a” bgcolor=”a” background=”url” link=”x” alink=”y” vlink=”z”>
…………
</body>
Attribute text memberikan warna pada teks, bgcolor memberikan warna pada latar belakang
dokumen, background memberikan latar belakang dokumen html dalam bentuk gambar, link
memberikan nilai warna untuk link, alink memberikan warna untuk link yang sedang aktiv, vlink
untuk memberikan warna untuk link yang telah dikunjungi.
Elemen BR(Line Break)
Elemen br berfungsi untuk ganti baris dan tidak mempunyai tag penutup.
<br>
Elemen P (Paragraph)
Elemen P berfungsi untuk ganti paragraph yang di ikuti dengan baris kosong di awal dan akhir
paragraph
<p>
…
</p>
Elemen P mempunyai attribute yaitu align yang bernilai “left”, “center”,”right” yang
menspesifikasikan posisi tepi horizontal dari paragraph
<p align=”left”|”center”|”right”|>
………………………..
</p>
Bab 3 :
Pertengahan anak tangga,
Lebih dalam memahami HTML
Untuk membuat teks format judul bisa menggunakan tag heading. Tag heading
terdiri dari beberapa level, untuk lebih jelasnya lihat contoh di bawah ini:
<html>
<head>
<title>Title</title>
</head>
<body>
<h1>Heading Level 1</h1>
<h2>Heading Level 2</h2>
<h3>Heading Level 3</h3>
<h4>Heading Level 4</h4>
<h5>Heading Level 5</h5>
<h6>Heading Level 6</h6>
</body>
</html>
Didalam dokumen html kita bisa mengatur format font seperti mengatur jenis huruf,
warna huruf, size/ukuran huruf dll. Untuk mengatur format font dalam dokumen
html caranya dengan menggunakan tag <font>...</font>.
<html>
<head>
<title> mengatur font </title>
</head>
<body >
<font size="4pt" face="comic" color="green">
Bentuk Text comic berwarna hijau
</font>
</body>
</html>
Dari code diatas terdapat tag <font size="4pt" face="comic" color="green">
itu artinya kita mengatur font pada dokumen html dengan ukuran 4 pt, dengan jenis font comic
berwarna hijau
.
MENAMPILKAN GAMBAR PADA DOKUMEN HTML
Berikut adalah contoh
penggunaan tag <img>.
Membuat Text Bold, Italic, Underline, Striketrue, Supersript dan Subscript
<html>
<head>
<title></title>
</head>
<body >
<b>Ini Text Bold</b><br>
<i>Ini Text Italic</i><br>
<u>Ini Text Underline</u><br>
<s>Ini Text Striketrue</s></br>
Text Superscript: X<sup>2</sup><br>
Text Subscript: H<sub>2</sub>O
<html>
<head>
<title>upload image</title>
</head>
<body>
<img src="devii.jpg" height="80%" width="20%" alt="sebuah gambar">
</body>
</html>
</body>
</html>
Membuat Garis Dalam Dokumen HTML
Tag hr digunakan untuk membuat garis pada dokumen html. Contoh:
<html>
<head>
<title>Membuat Garis</title>
</head>
<body>
<h1 align="right">Ini adalah garis</h1>
<hr align="right" width="60%" color="#FF0000"
size="3">
</body>
</html>
Membuat Link
Ada 4 jenis pembuatan link dalam html:
Link untuk menghubungkan antar halaman
Link untuk menghubungkan ke bagian halaman lain
ink untuk menghubungkan ke halaman website lain
Link untuk menghubungkan ke alamat email
<html>
<head>
<title>use link</title>
</head>
<body>
<a href="http://idu.raharja.info">Menuju idu class
Membuat List
Ada 3 jenis list dalam dokumen html yaitu:
1. Ordered List “<ol>”
Tag <ol> adalah kependekan dari Ordered List, secara berurutan. list yang ditampilkan nanti
oleh tag ini adalah nomor
Pada Ordered List “<ol>”
Jika anda ingin mengurutkan dengan huruf/romawi maka anda tinggal menambahkan atribut
type pada tag <ol> contoh:
<html><head><title> web baru </title></head><body>Barang belanjaan hari ini :<ol><li>telur</li><li>buah</li><li>sayur</li><li>beras</li><li>obat</li><li>sabun</li></ol></body></html>
<html><head><title>contoh ol</title></head><body>Produk saya:<ol type="A"><li>sepatu</li><li>tas</li><li>baju</li>
2. Unordered List <ul>
Unordered List merupakan pengurutan list dengan menggunakan
symbol/bullet.
<html><head><title>contoh ol</title></head><body>Produk saya:<ol type="A"><li>sepatu</li><li>tas</li><li>baju</li><li>celana</li><li>jam tangan</li></ol></body></html>
3. List tanpa bullet <dl>
Untuk membuat list tanpa mengunakan bullet/symbol caranya sama persis
dengan pembuatan list dengan tag ol/ul, hanya saja tag <ul> diganti dengan
<dl> lalu tag <li> diganti dengan <dd> contoh:
<html><head><title>list tanpa symol</title></head><body>Daftar perabot rumah tangga :<dl type=><dd>kipas angin</dd><dd>mesin cuci</dd><dd>kulkas</dd><dd>kompor</dd><dd>lemari</dd><dd>televisi</dd></dl></body></html>
Membuat Tabel Pada Dokumen HTML
Untuk membuat tabel pada html menggunakan tag <table> dan di akhiri dengan tag
</table>
lalu di dalam sebuah tag <table> dan tag </table> dimasukan tag <tr> dan </tr>
yang bekerja sebagai baris pada tabel lalu di dalam sebuah <tr> dan </tr> terdapat
tag <td> dan </td> yang bekerja memberikan sebuah kolom pada tabel. Untuk
mengetahui garis tabel tersebut, kita menggunakan atribut 'border' pada tag table.
<html><head><title>table</title></head>
<body>Daftar mahasisw<table border="1"><tr><td>Nim</td><td>Nama</td><td>jurusan</td></tr><tr><td>11166677</td><td>Andi</td><td>SI</td></tr><tr><td>1355799</td><td>Dina</td><td>SE</td></tr>
Menggabungkan Kolom dan Baris Pada Tabel
Untuk menggabungkan kolom dalam halaman html yaitu dengan menggunakan
colspan.
Contoh:
<html>
<head>
<title>Belajar menggabungkan kolom</title>
</head>
<body>
<table border="1">
<tr>
<td colspan="2">Colom yang di gabungkan</td>
</tr>
<tr>
<td>Colom 1, Baris 2</td>
<td>Colom 2, Baris 2</td>
</tr>
</table>
</body>
</html>
Sedangkan untuk menggabungan baris pada html yaitu dengan menggunakan
rowspan. Contoh:
<html>
<head>
<title>Belajar Tabel</title>
</head>
<body>
<table border="1">
<tr>
<td rowspan="2">Baris yang di gabungkan</td>
<td>Colom 2 , Baris 1</td>
</tr>
<tr>
<td >Colom 2, Baris 2</td>
</tr>
</table>
</body>
</html>
Input type
Maka hasilnya akan terlihat seperti gambar di bawah ini
<input type="text" size="20" name="nama"id="nama"/><br/><label for="alamat">Alamat:</label><input type="text" size="40" name="alamat"id="alamat"/></form>
Text area
Untuk membuat text area anda cukup menambahkan tag <textarea> diantara tag
form.
adalah tampilan dari control text area
Control List Box
Untuk membuat list box anda dapat menggungakan tag <select> untuk lebih
jelasnya lihatlah kode di bawah ini
<form><label for="msg">Message</label><br/><textarea name="msg" cols="20" rows="4"></textarea></form>
<form><label for="program">Program :</label><select name="program" id="program"><option value="">Pilih Program</option><option value="Web Arsitektur">WebArsitektur</option><option value="Mastering CMS">MasteringCMS</option><option value="Print Design">PrintDesign</option><option value="Multimedia dan Animasi">MultimediaAnimasi</option></select></form>
Berikut adalah bentuk dari control list box...
Jika kita tambahkan atribut size pada tag <select> maka bentuk list box akan
berubah seperti gambar berikut ini:
Control Radio Button
Anda dapat menggunakan tag <input> untuk membuat radio button, dengan type
=”radio”. Contoh:
Berikut adalah bentuk dari radio button.
<form>Jenis Kelamin:<input type="radio" name="jkl" id="pria"value="Pria"/><label for="pria">Pria</label><input type="radio" name="jkl" id="wanita"value="Wanita"/><label for="wanita">Wanita</label></form>
Control Check Box
Untuk membuat check box sama seperti membuat radio button, hanya atribut type
pada tag input diganti menjadi checkbox, untuk lebih jelasnya lihat kode di bawah
ini.
Jika di jalankan di browser akan tampil seperti gambar di bawah ini:
Control Password Box, Submit dan Reset Button
<form>Hoby :<input type="checkbox" name="hoby[]" id="bacabuku"value="Baca Buku"/><label for="bacabuku">Baca Buku</label><input type="checkbox" name="hoby[]" id="olahraga"value="Olah Raga"/><label for="olahraga">Olah Raga</label><input type="checkbox" name="hoby[]" id="maingame"value="Main Game"/><label for="maingame">Main Game</label><input type="checkbox" name="hoby[]" id="hiking"value="hiking"/><label for="hiking">Hiking</label></form>
<form><label for="password">Password</label><input type="password" name="password"id="password"/><br/><br/><input type="submit" name="submit" value="Submit"/><input type="reset" name="reset" value="Reset"/></form>
Bab 4 :
anak tangga terakhir, mempercantik tampilan dengan CSS
Tentang CSS
CSS (Cascading Style Sheet)
adalah standard pembuatan dan pemakaian style untuk dokumen terstruktur , CSS digunakan
untuk
mempersingkat penulisan tag HTML seperti font,color,text, dan table menjadi lebih ringkas
sehingga tidak
terjadi pengulangan tulisan.
Keuntungan menggunakan CSS
• Memisahkan presentastion sebuah dokumen dari content document itu sendiri.
• Mempermudah dan Mempersingkat pembuatan dan pemeliharaan dokumen web
• Mempercepat proses rendering/pembacaan HTML.
Manfaat dari CSS:
Kode HTML menjadi lebih sederhana dan lebih mudah diatur,
Ukuran file menjadi lebih kecil, sehingga load file lebih cepat,
Mudah untuk merubah tampilan, hanya dengan merubah file CSS saja,
Dapat berkolaborasi dengan JavaScript.
Digunakan dalam hampir semua web browser.
Pada umunya ada empat bagian yang sering ada dalam layout sebuah web yaitu:
Header –> berisi tema web/ judul
Menu –> menu link web
Content –> isi dari web
Footer –> identitas/ copyright
Atribut ID
Ada dua cara penempatan elemen dalam web dengan CSS yaitu:
1. Position (Posisi)
Mengunakan properti position terdapat 4 cara:
Static –> posisi normal (default).
Relative –> posisi elemen tergantung dari elemen yang lain.
Absolute –> posisi elemen berpatokan pada jendela browser.
Fixed –> posisi elemen tetap walaupun digeser.
2. Float (Nempel)
Menggunakan properti float atau clear:
Float:left –> elemen akan menempel pada sebelah kiri elemen induk.
Float:right –> elemen akan menempel pada sebelah kanan elemen induk.
Clear:left –> elemen akan menempel pada sebelah kiri dan berada di bawah.
Clear:right –> elemen akan menempel pada sebelah kanan dan berada dibawah
Clear:both –> elemen akan berada pada posisi bawah elemen diatasnya.
Gambar dibawah ini adalah dasar-dasar dari pengaturan / format posisi dengan css:
Margin –> jarak/batas elemen dengan elemen lain
Border –> border/gari tepi elemen
Padding–> jarak elemen dengan isi elemen (elemen anak)
Berikut gambar dibawah adalah format standar untuk membuat tampilan dengan CSS:
contoh penulisan css :
<html>
<head>
<style type = "text/css">
#header {
width:900px;
height:50px;
border: 1px solid #640404;
}
#headerLeft {
width:400px;
background-color:#CCCCCC;
height:50px;
float:left;
text-align:center;
}
#headerRight {
width:450px;
background-color:#999999;
height:50px;
float:right;
text-align:center;
}
</style>
</head>
<body>
<h1>Sample</h1>
<div id = "header">
<div id="headerLeft">Header Left</div>
<div id="headerRight">Header Right</div>
</div>
</body>
</html>
Ada 3 cara untuk memasang CSS pada dokumen HTML yaitu:
External Style Sheet (file CSS berbeda dari file HTML),
Internal Style Sheet (Kode CSS dipasang di dalam tag head HTML)
Inline Style Sheet (Kode CSS langsung dipasang di tag HTML, tidak direkomendasikan).
Penempatan CSS dalam HTML
Internal CSS
Metode penulisan kode CSS langsung dalam file HTML. contoh:
<html>
<head>
<style type = "text/css">
.header {
width:900px;
height:50px;
border: 1px solid #640404;
}
.headerLeft {
width:400px;
background-color:#CCCCCC;
height:50px;
float:left;
text-align:center;
}
.headerRight {
width:450px;
background-color:#999999;
height:50px;
float:right;
text-align:center;
}
</style>
</head>
<body>
Eksternal CSS
file CSS terpisah dengan HTML. Buat file dengan ekstention .css. contoh:
<html>
<head>
<link rel=”stylesheet” type=”text/css” href=”public.css”/>
</head>
<body>
</body>
</html>
Inline CSS
Penulisan kode CSS dalam tag HTML. contoh:
<html>
<head>
</head>
<div style="background-color:#999999; text-align:center;">Inline CSS</div>
</body>
</html>
Jika menggunakan teknik external CSS, maka kita perlu membuat file css, misal buat file dan
simpan dengan nama style.css
Didalam HTML kita perlu memanggil file CSS dengan menggunakan tag <link> yang diletakkan
diantara tag<head>. Pada contoh CSS selanjutnya kita menggunakan teknik external CSS, jadi
gunakan saja file style.css dan coba. Untuk file HTML anda gunakan coba.html dan ubah isinya
pada bagian<body> saja bagian yang didalam <head> tidak usah diapa-apakan.
Untuk memanggil CSS dalam tag HTML perlu menggunakan atribut class untuk memanggil CSS
selector (dalam contoh diatas selectornya title dan thank). Dengan demikian apabila semua
halaman anda memanggil class title, dan jika anda ingin mengganti font untuk semua halaman
anda cukup mengubah selector CSSnya saja. CSS memiliki ratusan properties dan values, tentu
Tidak semua browser dapat menampilkan jenis huruf yang di spesifikasikan didalam CSS. Untuk
itu perlu mendeklarasikan lebih dari satu jenis huruf agar browser mengenal jenis huruf yang
digunakan. dapat menggunakan property font-family, yang mirip dengan tag <font>.
Sebagai contoh anda ingin menampilkan dari keluarga huruf Serif dan hurufnya Times yaitu
Times New Roman. dapat menuliskannya dari yang paling spesifik sampai yang umum, sehingga
jika browser tidak mengenal fontnya, maka browser akan otomatis melihat font yang umum.
Untuk lebih jelasnya lihat bkode berikut:
<h1 style="font-family: 'Times New Roman', Times, serif">Serif font</h1>
Link
Salah satu hal yang menarik dalam CSS anda dapat mengubah warna pada setiap link,
menghilangkan garis bawah pada link sehingga jika anda bosan dengan link yang berwarna biru
tua terang dengan garis bawah anda dapat mengubahnya.
Coba kode CSS berikut:
a.link1:link {
font-weight: bold;
font-size: 12px;
color: #C87C28;
font-family: Times New Roman;
text-decoration: none;
}
a.link1:visited {
font-weight: bold;
font-size: 12px;
color: #CC6600;
font-family: Times New Roman;
text-decoration: none;
}
a.link1:hover {
font-weight: bold;
font-size: 12px;
color: #C87C28;
font-family: Times New Roman;
text-decoration: underline
}
a.link1:active {
font-weight: bold;
font-size: 12px;
color: #C87C28;
font-family: Times New Roman;
text-decoration: none;
}
a.link2:link {
font-weight: bold;
font-size: 12px;
color: #663300;
font-family: Arial, Helvetica, sans-serif;
text-decoration: underline;
}
a.link2:visited {
font-weight: bold;
font-size: 12px;
color: #800000;
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
}
a.link2:hover {
font-weight: bold;
font-size: 12px;
color: #ff6600;
font-family: Arial, Helvetica, sans-serif;
text-decoration: underline overline;
}
a.link2:active {
font-weight: bold;
font-size: 12px;
color: #ff6600;
font-family: Arial, Helvetica, sans-serif;
text-decoration: underline;
}
Daftar pustaka
www.google.com
www.ilmuwebside.com
www.ilmuhamster.blogspot.com
materi perkuliahan