PENGENALAN BOOTSTRAP
Jika anda seorang pengembang web, pastilah tidak asing dengan beberapa program aplikasi web desain seperti Dreamweaver, Flash dst. Atau bagi yang suka nye-cript…pasti hafal dengan elemen-elemen HTML, CSS bahkan Javascript atau JQuery.
Mendesain website menggunakan program aplikasi, memang terasa lebih mudah dan cepat, dibandingkan dengan cara menuliskan kode-kode (tag/elemen) HTML/CSS/Javascript yang rumit. Namun, ada beberapa fasilitas tertentu yang tidak didukung oleh beberapa program aplikasi tersebut, yang memaksa seorang web developer untuk mengetikkan kode-kode tertentu untuk mengatasinya.
Jika sudah begini, maka scripting adalah satu-satunya alternatif yang harus dilakukan :( Twitter bootstrap adalah suatu cara mendesain web atau membuat aplikasi berbasis web
dengan cara scripting yang sangat mudah dilakukan. Kenapa saya bilang mudah? Karena eh..karena anda tidak perlu menghafalkan banyak kode HTML/CSS/Javascript untuk membuat tampilannya, namun hasilnya sangat bagus dan menarik. Tak kalah dengan template2 buatan CMS terkemuka, seperti Joomla dan WordPress.
Dengan menggunakan Boostrap, kita dapat dapat membuat layout halaman website, tabel, tombol, form, navigasi, dan komponen lainnya dalam sebuah website, dengan cara yang mudah, hanya dengan memanggil fungsi CSS (class yang sudah disediakan oleh Bootstrap) dari berkas HTML yang telah didefinisikan. Bootstrap juga menyediakan komponen-komponen lain yang dibangun dengan menggunakan JavaScript.
Bootstrap ini sendiri dikembangkan oleh Mark Otto (@mdo) dan Jacob Thornton (@fat) dan didukung oleh hampir semua browser, baik Mozilla, Chrome, Safari, Opera, bahkan Internet Explorer.
Bagaimana Cara memanfaatkan Twitter Bootstrap?
Sebelum kita memulai membuat layout website menggunakan Twitter boostrap, ada b aiknya kita memahami beberapa fitur dan komponen yang terdapat pada bootstrap.
1. Source Bootstrap
Yang perlu anda lakukan untuk bisa memanfaatkan bootstrap ini adalah mendownload file-file bootstrap dari Twitter, anda dapat mendownloadnya di sini.
Jika anda sudah mendownloadnya, maka anda akan melihat sebuah file zip, bernama bootstrap.zip, yang mana jika di-extract akan menjadi sebuah folder Bootstrap, yang terdiri atas beberapa file berikut :
2. Struktur Bootstrap
Struktur bootstrap tersebut dapat digambarkan sebagai berikut :
bootstrap/
+-- css/
¦ +-- bootstrap.css
¦ +-- bootstrap.min.css
+-- js/
¦ +-- bootstrap.js
¦ +-- bootstrap.min.js
Dari struktur bootstrap di atas, maka jika kita ingin memanfaatkan Bootstrap untuk layout website kita, kita pasti faham, di mana seharusnya file kita diletakkan.
3. Docs Section
Berikut adalah beberapa fitur untuk layout website yang disediakan oleh bootstrap :
Scaffoling : Bagian yang mengatur background, link styles, grid system, dan two simple layouts
Base CSS : Bagian yang mengatur tampilan elemen HTML seperti typography, code, table, form, dan button. Termasuk Glyphicons, sebuah kumpulan ikon-ikon kecil.
Components : Bagian yang mengatur tampilan component, seperti tab, navbar, alerts, page headers, dst.
Javascript Plugins: Menyediakan beberapa component interaktif, seperti tooltips, popovers, modals, dan seterusnya.
4. Daftar Component Bootstrap
Berikut adalah Component dan Javascript plugin yang didukung oleh Bootstrap:
Button groups
Button dropdowns
Navigational tabs, pills, and lists
Navbar
Labels
Badges
Page headers and hero unit
Thumbnails
Alerts
Progress bars
Modals
Dropdowns
Tooltips
Popovers
Accordion
Carousel
Typeahead
5. Cara menggunakan Boostrap
Untuk membuat layout website menggunakan bootstrap, sama dengan ketika mendesain menggunakan HTML dan CSS biasa. Pada dokumen HTML, kita hanya perlu menambahkan pada bagian <head> </head> dan pada bagian <body> </body> beberapa elemen berikut :
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/bootstrap.min.css" type="text//css">
</head>
<body>
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Elemen-elemen diatas digunakan untuk merelasikan dokumen HTML kita dengan file bootstrap yang telah ada.
Referensi:
Modul Pemrograman Web Didy Apriansa Suryawan, S.Kom
Minggu, 01 Juni 2014
Bootstrap
LAYOUT WEB MENGGUNAKAN BOOTSTRAP Langkah-langkah pembuatannya:
Struktur folder project :
Buka editor teks web anda, misalnya sublime text.
Ketikkan script HTML dibawah ini dengan filename index.html
Ketikkan script CSS dibawah ini dengan filename style.css
Setelah selesai, buka file index.html dengan browser anda misalnya firefox, chrome dan lain-lain.
Lihat hasilnya.
Filename : index.html
HASIL AKHIR WEB
Struktur folder project :
Buka editor teks web anda, misalnya sublime text.
Ketikkan script HTML dibawah ini dengan filename index.html
Ketikkan script CSS dibawah ini dengan filename style.css
Setelah selesai, buka file index.html dengan browser anda misalnya firefox, chrome dan lain-lain.
Lihat hasilnya.
Filename : index.html
Filename : style.css
HASIL AKHIR WEB
Pengenalan CSS
CSS
CSS merupakan singkatan dari Cascading Style Sheet. Menurut wikipedia, CSS adalah aturan untuk mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam. CSS bukan merupakan bahasa pemograman. Css saat ini di kembangkan oleh World Wide Web Consortium atau yang biasa lebih dikenal dengan istilah W3C. Css bukan menggantikan kode html, tetapi hanya di fungsikan sebagai penopang atau pendukung dari file html yang berperan dalam penataan kerangka dan layout web.
1. Aturan Penulisan CSS
Prinsip dasar penggunaan CSS di dalam dokumen HTML adalah untuk menyediakan style yang digunakan untuk mengatur bagian-bagian HTML. Contoh, suatu style dapat di pakai untuk mengatur jenis, ukuran, dan bahkan warna suatu teks. Style mengandung dua bagian yaitu selektor dan deklarasi properti. Selektor untuk menyatakan bagian dalam HTML yang akan diatur melalui style. Sedangkan properti untuk menyatakan sifat dalam tag HTML yang diatur melalui style.
Sintaks penulisannya :
Selektor Mengawali deklarasi Properti
h1 {
background-color:#9933FF;
}
Nama Properti
Mengakhiri bagian Properti
Sebuah Style
Nilai untuk backround-color
2. Css Bersifat Case Sensitive
Maksud case sensitive disini membedakan huruf kapital dan huruf kecil. Hal ini penting diketahui karena kalau kita ingin menulis nama kelas atau nama ID dalam style. Contoh :
.nim {
. . .
}
Maka nim akan dibedakan dengan Nim ataupun NIM.
Untuk memberikan nama dalam CSS misalnya untuk nama kelas atau nama ID agar mudah dipahami gunakan penamaan yang mengandung makna dan mudah dipahami oleh orang.Contoh :
nama seperti warna Merah lebih baik dari pada wmr.
warnaMerah bisa juga ditulis menjadi warna-merah atau warna_merah. Tanda minus (-) ataupun garis bawah ( _ ) boleh dipakai untuk nama.
Namun yang perlu di ingat, warnaMerah, warna-merah, warna_merah adalah tiga nama yang berbeda.
Penulisan nama boleh menggunakan angka, tetapi spasi atau tanda-tanda lain tidak boleh digunakan untuk nama.
3. Komentar
Komentar adalah suatu bagian dalam kode yang diperlakukan bukan sebagai kode, melainkan berfungsi sebagai keterangan bagi pembaca kode. Pada dokumen HTML, komentar diawali dengan <!-- dan diakhiri dengan -->. Adapun pada CSS, komentar ditulis dengan awalan /* dan diakhiri */.
Sintaks Penulisannya:
/*
Isi komentar
*/
4. Cara Menggunakan CSS
Untuk menggunakan CSS, ada 3 cara yang bisa kita gunakan yaitu Embedded Style Sheet, Inline Style Sheet, dan Linked Style Sheet.
4.1 Embedded Style Sheet
Embedded Style Sheet adalah cara penulisan kode dimana penulisan CSS dilakukan pada tag HTML, yaitu pada tag <style> ... </style> dan sebelum tag <body>. Pada tag tersebut akan disisipkan kode CSS yang akan digunakan oleh tag HTML.
Sintaks penulisannya :
<style type="text/css">
<!—Atribut CSS -->
</style>
latihan1.html
<!DOCTYPE HTML>
<html>
<head>
<title>Latihan 1</title>
<style type="text/css">
/* Ini Selektor h1 di jadikan sebuah komentar h1{
background-color:purple;
}
*/
body{
background-color:blue;
color:white;
}
h1{
text-align:center;
}
p{
text-align:right; font-size:18px; font-weight:bold; color:yellow;
} hr{ color:red;
}
</style>
</head>
<body>
<h1>=|| TOKO PAKAIAN MURAH MERIAH ||=</h1>
<p>Jl.Gratis No.008, Condong Catur, Sleman<br/> Yogyakarta
</p>
<hr />
</body>
</html>
4.2 Inline Style Sheet
Inline Style Sheet adalah cara penggunaan CSS langsung pada tag HTML yang di butuhkan saja. Cari ini dilakukan umumnya dikarenakan hanya sedikit properti yang dibutuhkan.
Sintaks penulisannya :
<tag HTML style=”Properti:value/nilai”> ... </tag HTML>
latihan2.html
<!DOCTYPE HTML>
<html>
<head>
<title>Latihan 2</title>
</head>
<body>
<h1 style="background-color:red; color:white; text- align:center">Belajar Pemrograman Web CSS</h1>
<p style="border:1px solid">
CSS adalah aturan untuk mengendalikan beberapa komponen dalam
sebuah web sehingga akan lebih terstruktur dan seragam. CSS
bukan merupakan bahasa pemograman.
</p>
<p>CSS merupakan singkatan dari Cascading Style Sheet.</p>
</body>
</html>
4.3 Linked Style Sheet
Linked Style Sheet adalah cara yang dianjurkan untuk menggunakan kode css dengan HTML. Metode ini merupakan cara pengerjaan dimana antara kode css dan HTML di pisahkan. Untuk menggunakan kode css yang telah dipisahkan ini, maka dalam kode html dibuat skrip yang isinya adalah memanggil file css tersebut untuk digunakan dalam kode html. Untuk me-link/memanggil kode css di dalam kode html, bisa menggunakan kode berikut.
Sintaks penulisannya :
<link rel=”stylesheet” href=”namafile.css” type=”text/css”>
latihan3.html
<!DOCTYPE HTML>
<html>
<head>
<title>Latihan 3</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<h1>TANAMAN HIAS BUNGA</h1>
<h2>ANGGREK</h2>
<p>Suku anggrek-anggrekan atau Orchidaceae merupakan satu suku tumbuhan berbunga dengan anggota jenis terbanyak. Jenis-jenisnya tersebar luas dari daerah tropika basah hingga wilayah sirkumpolar, meskipun sebagian besar anggotanya ditemukan di daerah tropika.</p>
</body>
</html>
style.css
body{ background:url(latar.jpg); font-family:Georgia;
}
h1{
background-color:purple; text-align:center; color:white;
} h2{ color:red;
font-size:25px;
}
p{
margin-left:50px;
color: blue;
font-size:24px;
}
5. Jenis-Jenis Selektor
Selektor atau pemisah dalam CSS, dibagi menjadi beberapa bagian, antara lain:
5.1 Tag / elemen HTML
Menggunakan tag yang terdapat pada HTML. Setiap tag yang ada dalam HTML bisa dijadikan selector.
Contoh :
h1 {
color:black;
}
5.2 Kelas
Penggunaan selektor kelas akan diawali pengan tanda titik ( . ) di awal penulisannya, kemudian pada tag HTML ditambahkan class = (nama kelas).
Contoh :
.isi{
font-family:arial; font-size:30px; color:blue;
}
5.3 ID
Selektor ID digunakan untuk mendefinisikan tag secara individual atau spesifik. Penggunaan selector ID akan diawali dengan tanda pagar ( # ).
Contoh :
#atas {
background-color:red;
color:white; font-size:50px; text-align:center;
}
Style diatas akan digunakan oleh tag yang mengandung identitas khusus header, misalnya:
<div id = “atas”>
latihan4.html
<!DOCTYPE HTML>
<html>
<head>
<title>Latihan 4</title>
<link rel="stylesheet" href="gaya.css" type="text/css" />
</head>
<body>
<div id="atas"> Toko Onlineku
</div>
<h1>Deskripsi:</h1>
<div class="isi">
Toko online ini menjual barang-barang elektronik baru dan bekas dengan harga yang terjangkau.</div>
</body>
</html>
gaya.css
#atas {
background-color:red;
color:white; font-size:50px; text-align:center;
}
h1 {
color:black;
}
.isi{
font-family:arial; font-size:30px; color:blue;
}
6. Grouping Element
Tag DIV dan SPAN digunakan untuk mengelompokkan element-element HTML. Span digunakan untuk mendefinisikan inline content, sementara div digunakan untuk block level content. Perbedaan dari kedua tag tersebut adalah sebagai berikut:
Tag div akan membagi halaman web secara otomatis meskipun di dalam tag div tersebut tidak diatur format stylenya (css).
Tag span hanya akan mengatur konten/isi yang dilingkupinya tanpa membagi halaman web ke dalam bagian-bagian kecil (seperti yang dilakukan tag div).
latihan5.html
<!DOCTYPE HTML>
<html>
<head>
<title>Latihan 5</title>
<style type="text/css">
div{
font-family:verdana;
color:#0000FF;
background-color:#FFFF00;
font-size:36px; text-align:center; width:800px;
}
</style>
</head>
<body>
<div>
<p>Ini Contoh Penggunaan DIV</p>
</div>
<span style="font:Arial; color:#FF0000; font-size:24px">Ini
Contoh dalam Span dengan warna merah</span>
</body>
</html>
CSS 3
CSS 3 merupakan versi terbaru dari pengembangan css sebelumnya. Peningkatan yang paling mencolok pada versi ini yaitu peningkatan fitur yang mengarah pada efek animasi, seperti text effects, border, accordion, crop, dll. Namun yang perlu di ingat tidak semua browser mendukung Css3. Kita harus memilih browser yang sudah mendukung versi css3 seperti Mozilla Firefox 3.6, Opera, Safari 5, dan Google Chrome. Internet Explore (IE) versi 9 belum mendukung penuh Css3.
1. Border Effects
Css3 menyediakan fitur menarik dari segi border misalnya kita dapat mengganti border dengan image, menerapkan sisi gradient, dan bahkan kita bisa membuat sudut melengkung pada bagian sisinya tanpa menggunakan gambar.
latihan1.html
<!DOCTYPE html>
<head>
<title>Latihan 1</title>
<link rel="stylesheet" href="border.css" type="text/css" />
</head>
<body>
<p id="melengkung">
Kotak ini memiliki sudut round
</p>
<p id="gradien">
Kotak ini menggunakan efek gradien
</p>
<p id="bayangan">
Kotak ini memiliki sudut round dan ada bayangan(shadow)
</p>
<p id="gambar">
Kotak ini menggunakan gambar untuk bordernya.
</p>
</body>
</html>
border.css
#melengkung
{
border:2px solid red; padding:10px 40px; background:yellow; width:600px;
border-radius:30px;
}
#gradien /*tampil di firefox */
{
width:600px;
border:10px solid #000;
padding:5px 5px 5px 15px;
-moz-border-bottom-colors: #555 #666 #777 #888 #999 #aaa #bbb
#ccc;
-moz-border-top-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-left-colors: #555 #666 #777 #888 #999 #aaa #bbb
#ccc;
-moz-border-right-colors: #555 #666 #777 #888 #999 #aaa #bbb
#ccc;
}
#bayangan
{ width:600px; height:150px; background-color:pink;
box-shadow: 10px 10px 5px #888888;
padding:10px 40px;
}
#gambar /*suport di chrome */
{
width:600px;
-webkit-border-image:url(border.png) 40 40 stretch; /* Safari 5 and older */
-o-border-image:url(border.png) 40 40 stretch; /* Opera */
border-image:url(border.png) 40 40 stretch;
padding:10px 40px;
}
Output di browser :
latihan2.html
<!DOCTYPE html>
<html>
<head>
<title>Latihan 2</title>
<style type="text/css">
div
{ width:100px; height:75px;
background-color:purple; border:1px solid yellow; color:white;
}
#dua
{
transform:rotate(30deg);
-ms-transform:rotate(30deg); /* IE 9 */
-webkit-transform:rotate(30deg); /* Safari and Chrome */
}
</style>
</head>
<body>
<div>STMIK AMikom Yogyakarta</div>
<div id="dua">Unggul dalam tren IT</div>
</body>
</html>
Pemrograman Web – Strata 1 Teknik Informatika
3
Output di browser :
4
5
2. Accordion
Accordion adalah menu yang telah disusun atau dikelompokkan. Efek dari accordion ini ketika kita klick kelompok menu tersebut, akan terlihat menu lainnya dengan animasi geser. latihan3.html
<!DOCTYPE html>
<html>
<head>
<title>Latihan 3</title>
<link rel="stylesheet" href="accordion.css" type="text/css">
</head>
<body>
<dl>
<dt><a href="#Section1">STMIK AMIKOM Yogyakarta</a></dt>
<dd id="Section1">
<p>STMIK AMIKOM YOGYAKARTA adalah sebuah perguruan tinggi hasil pengembangan dari Akademi Manajemen Informatika dan Komputer "AMIKOM YOGYAKARTA".
</p>
</dd>
<dt><a href="#Section2">Visi & Misi</a></dt>
<dd id="Section2">
<p><b>Visi Perguruan Tinggi</b>:Menjadi Perguruan Tinggi Komputer Terbaik di Asia Tenggara.<br/><br/><b>Misi Perguruan Tinggi</b>:Menghasilkan lulusan yang berkualitas global, produktif, berjiwa entrepreneur, profesional</p>
</dd>
<dt><a href="#Section3">Sejarah Berdiri</a></dt>
<dd id="Section3">
<p><b>STMIK AMIKOM YOGYAKARTA</b>merupakan salah satu perguruan tinggi swasta yang berkedudukan di Provinsi DIY Kabupaten Sleman di bawah naungan Yayasan AMIKOM Yogyakarta.</p>
</dd>
<dt><a href="#Section4">Kontak</a></dt>
<dd id="Section4">
<p>Kampus Terpadu : Jl. Ring Road Utara, Condong
Catur, Sleman, Yogyakarta<br>
Telp: (0274) 884201 - 207 <br>
Fax: (0274) 884208 Kodepos: 55283<br> E-Mail: amikom@amikom.ac.id</p>
</dd>
</dl>
</body>
</html>
accordion.css
*{
font-family: Verdana, Arial, Helvetica, sans-serif;
}
body{
background-color: #380a62;
font-size: 0.75em;
}
p{
font-size: 1em; margin: 0 0 1em 0; text-align: justify;
}
dl{
padding: 10px;
min-width: 960px;
}
dl dt{
-webkit-border-radius: 5px;
-moz-border-radius: 5px; border-radius: 5px; border:1px solid #B6B4B4; margin:0;
width:400px;
}
dl dt a{ color:#ffffff; font-weight:bold;
text-decoration:none;
padding:10px;
display:block;
}
dl dd{ color:#cccccc; margin:0; width:400px; overflow:hidden;
-webkit-transition: height 1s ease;
-moz-transition: height 1s ease;
-o-transition: height 1s ease;
}
dl dd p { padding:10px; margin:0;
}
dl dd:not(:target) {
height:0;
7
}
dl dd:target {
height:9.5em;
}
dl a.ie:hover dd, dl a.ie:focus dd {
height:auto;
color:#cccccc;
}
Output di browser :
3. Text Effects latihan4.html
<!DOCTYPE html>
<html>
<head>
<title>Latihan 4</title>
<style type="text/css">
h1
{
text-shadow: 5px 5px 5px red;
color:yellow;
font-size:50px;
}
</style>
</head>
<body>
<h1>Teks ini menggunakan efek bayangan</h1>
</body>
</html>
Output di browser :
4. Sexy Image Hover latihan5.html
<!DOCTYPE HTML>
<html>
<head>
<title>Latihan 5</title>
<link rel="stylesheet" href="sexy.css" type="type/css">
</head>
<body>
<div class='img' id='img-1'>
<div class='mask'></div>
<img src='kucing1.jpg' width='200' height='150' />
</div>
<div class='img' id='img-2'>
<div class='mask'></div>
<img src='kucing2.jpg' width='200' height='150' />
</div>
<div class='img' id='img-3'>
<div class='mask'></div>
<img src='kucing3.jpg' width='200' height='150' />
</div>
<div class='img' id='img-4'>
<div class='mask'></div>
<img src='kucing4.jpg' width='200' height='150' />
</div>
<div class='img' id='img-5'>
<div class='mask'></div>
<img src='kucing5.jpg' width='200' height='150' />
</div>
<div class='img' id='img-6'>
<div class='mask'></div>
<img src='kucing6.jpg' width='200' height='150' />
</div>
</body>
</html>
sexy.css
.img{
float:left;
-webkit-transition-duration: 0.5s;
}
.img img{ padding:10px; border:1px solid #fff;
}
.img:hover{
-webkit-transform:scale(0.8);
-webkit-box-shadow:0px 0px 30px #ccc;
}
.img .mask{
width: 100%;
background-color: rgb(0, 0, 0);
position: absolute; height: 100%; opacity:0.6; cursor:pointer;
-webkit-transition-duration: 0.5s;
}
#img-1:hover .mask{
height:0%;
}
#img-2:hover .mask{
height:0%;
margin-top:130px;
}
#img-3 #mask-1 {
width:50%;
}
#img-3 #mask-2{
width:50%;
margin-left:211px;
}
#img-3:hover #mask-1{
width:0%;
}
#img-3:hover #mask-2{
margin-left:430px;
width:0%;
}
#img-4:hover .mask{ margin-left:219px; margin-top:135px; height:0%;
10
width:0%;
}
#img-5:hover .mask{ margin-left:219px; margin-top:135px; height:0%; width:0%;
-webkit-transform: rotateX(360deg);
}
#img-6:hover .mask{ margin-left:219px; margin-top:135px; height:0%; width:0%;
-webkit-transform: rotateZ(750deg);
}
Output di browser :
11
REFERENSI
Saputra, Agus. (2012). Web Trik: PHP, HTML5 dan CSS3. Jasakom. http://www.w3schools.com
Kadir, Abdul. (2011). From Zero to be a Pro: CSS Tip dan Trik untuk menyertakan
Cascading Style Sheets dalam halaman Web. Yogyakarta: Andi Offset. Saputra, Agus. (2012). Web Trik: PHP, HTML5 dan CSS3. Jasakom.
CSS merupakan singkatan dari Cascading Style Sheet. Menurut wikipedia, CSS adalah aturan untuk mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam. CSS bukan merupakan bahasa pemograman. Css saat ini di kembangkan oleh World Wide Web Consortium atau yang biasa lebih dikenal dengan istilah W3C. Css bukan menggantikan kode html, tetapi hanya di fungsikan sebagai penopang atau pendukung dari file html yang berperan dalam penataan kerangka dan layout web.
1. Aturan Penulisan CSS
Prinsip dasar penggunaan CSS di dalam dokumen HTML adalah untuk menyediakan style yang digunakan untuk mengatur bagian-bagian HTML. Contoh, suatu style dapat di pakai untuk mengatur jenis, ukuran, dan bahkan warna suatu teks. Style mengandung dua bagian yaitu selektor dan deklarasi properti. Selektor untuk menyatakan bagian dalam HTML yang akan diatur melalui style. Sedangkan properti untuk menyatakan sifat dalam tag HTML yang diatur melalui style.
Sintaks penulisannya :
Selektor Mengawali deklarasi Properti
h1 {
background-color:#9933FF;
}
Nama Properti
Mengakhiri bagian Properti
Sebuah Style
Nilai untuk backround-color
2. Css Bersifat Case Sensitive
Maksud case sensitive disini membedakan huruf kapital dan huruf kecil. Hal ini penting diketahui karena kalau kita ingin menulis nama kelas atau nama ID dalam style. Contoh :
.nim {
. . .
}
Maka nim akan dibedakan dengan Nim ataupun NIM.
Untuk memberikan nama dalam CSS misalnya untuk nama kelas atau nama ID agar mudah dipahami gunakan penamaan yang mengandung makna dan mudah dipahami oleh orang.Contoh :
nama seperti warna Merah lebih baik dari pada wmr.
warnaMerah bisa juga ditulis menjadi warna-merah atau warna_merah. Tanda minus (-) ataupun garis bawah ( _ ) boleh dipakai untuk nama.
Namun yang perlu di ingat, warnaMerah, warna-merah, warna_merah adalah tiga nama yang berbeda.
Penulisan nama boleh menggunakan angka, tetapi spasi atau tanda-tanda lain tidak boleh digunakan untuk nama.
3. Komentar
Komentar adalah suatu bagian dalam kode yang diperlakukan bukan sebagai kode, melainkan berfungsi sebagai keterangan bagi pembaca kode. Pada dokumen HTML, komentar diawali dengan <!-- dan diakhiri dengan -->. Adapun pada CSS, komentar ditulis dengan awalan /* dan diakhiri */.
Sintaks Penulisannya:
/*
Isi komentar
*/
4. Cara Menggunakan CSS
Untuk menggunakan CSS, ada 3 cara yang bisa kita gunakan yaitu Embedded Style Sheet, Inline Style Sheet, dan Linked Style Sheet.
4.1 Embedded Style Sheet
Embedded Style Sheet adalah cara penulisan kode dimana penulisan CSS dilakukan pada tag HTML, yaitu pada tag <style> ... </style> dan sebelum tag <body>. Pada tag tersebut akan disisipkan kode CSS yang akan digunakan oleh tag HTML.
Sintaks penulisannya :
<style type="text/css">
<!—Atribut CSS -->
</style>
latihan1.html
<!DOCTYPE HTML>
<html>
<head>
<title>Latihan 1</title>
<style type="text/css">
/* Ini Selektor h1 di jadikan sebuah komentar h1{
background-color:purple;
}
*/
body{
background-color:blue;
color:white;
}
h1{
text-align:center;
}
p{
text-align:right; font-size:18px; font-weight:bold; color:yellow;
} hr{ color:red;
}
</style>
</head>
<body>
<h1>=|| TOKO PAKAIAN MURAH MERIAH ||=</h1>
<p>Jl.Gratis No.008, Condong Catur, Sleman<br/> Yogyakarta
</p>
<hr />
</body>
</html>
4.2 Inline Style Sheet
Inline Style Sheet adalah cara penggunaan CSS langsung pada tag HTML yang di butuhkan saja. Cari ini dilakukan umumnya dikarenakan hanya sedikit properti yang dibutuhkan.
Sintaks penulisannya :
<tag HTML style=”Properti:value/nilai”> ... </tag HTML>
latihan2.html
<!DOCTYPE HTML>
<html>
<head>
<title>Latihan 2</title>
</head>
<body>
<h1 style="background-color:red; color:white; text- align:center">Belajar Pemrograman Web CSS</h1>
<p style="border:1px solid">
CSS adalah aturan untuk mengendalikan beberapa komponen dalam
sebuah web sehingga akan lebih terstruktur dan seragam. CSS
bukan merupakan bahasa pemograman.
</p>
<p>CSS merupakan singkatan dari Cascading Style Sheet.</p>
</body>
</html>
4.3 Linked Style Sheet
Linked Style Sheet adalah cara yang dianjurkan untuk menggunakan kode css dengan HTML. Metode ini merupakan cara pengerjaan dimana antara kode css dan HTML di pisahkan. Untuk menggunakan kode css yang telah dipisahkan ini, maka dalam kode html dibuat skrip yang isinya adalah memanggil file css tersebut untuk digunakan dalam kode html. Untuk me-link/memanggil kode css di dalam kode html, bisa menggunakan kode berikut.
Sintaks penulisannya :
<link rel=”stylesheet” href=”namafile.css” type=”text/css”>
latihan3.html
<!DOCTYPE HTML>
<html>
<head>
<title>Latihan 3</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<h1>TANAMAN HIAS BUNGA</h1>
<h2>ANGGREK</h2>
<p>Suku anggrek-anggrekan atau Orchidaceae merupakan satu suku tumbuhan berbunga dengan anggota jenis terbanyak. Jenis-jenisnya tersebar luas dari daerah tropika basah hingga wilayah sirkumpolar, meskipun sebagian besar anggotanya ditemukan di daerah tropika.</p>
</body>
</html>
style.css
body{ background:url(latar.jpg); font-family:Georgia;
}
h1{
background-color:purple; text-align:center; color:white;
} h2{ color:red;
font-size:25px;
}
p{
margin-left:50px;
color: blue;
font-size:24px;
}
5. Jenis-Jenis Selektor
Selektor atau pemisah dalam CSS, dibagi menjadi beberapa bagian, antara lain:
5.1 Tag / elemen HTML
Menggunakan tag yang terdapat pada HTML. Setiap tag yang ada dalam HTML bisa dijadikan selector.
Contoh :
h1 {
color:black;
}
5.2 Kelas
Penggunaan selektor kelas akan diawali pengan tanda titik ( . ) di awal penulisannya, kemudian pada tag HTML ditambahkan class = (nama kelas).
Contoh :
.isi{
font-family:arial; font-size:30px; color:blue;
}
5.3 ID
Selektor ID digunakan untuk mendefinisikan tag secara individual atau spesifik. Penggunaan selector ID akan diawali dengan tanda pagar ( # ).
Contoh :
#atas {
background-color:red;
color:white; font-size:50px; text-align:center;
}
Style diatas akan digunakan oleh tag yang mengandung identitas khusus header, misalnya:
<div id = “atas”>
latihan4.html
<!DOCTYPE HTML>
<html>
<head>
<title>Latihan 4</title>
<link rel="stylesheet" href="gaya.css" type="text/css" />
</head>
<body>
<div id="atas"> Toko Onlineku
</div>
<h1>Deskripsi:</h1>
<div class="isi">
Toko online ini menjual barang-barang elektronik baru dan bekas dengan harga yang terjangkau.</div>
</body>
</html>
gaya.css
#atas {
background-color:red;
color:white; font-size:50px; text-align:center;
}
h1 {
color:black;
}
.isi{
font-family:arial; font-size:30px; color:blue;
}
6. Grouping Element
Tag DIV dan SPAN digunakan untuk mengelompokkan element-element HTML. Span digunakan untuk mendefinisikan inline content, sementara div digunakan untuk block level content. Perbedaan dari kedua tag tersebut adalah sebagai berikut:
Tag div akan membagi halaman web secara otomatis meskipun di dalam tag div tersebut tidak diatur format stylenya (css).
Tag span hanya akan mengatur konten/isi yang dilingkupinya tanpa membagi halaman web ke dalam bagian-bagian kecil (seperti yang dilakukan tag div).
latihan5.html
<!DOCTYPE HTML>
<html>
<head>
<title>Latihan 5</title>
<style type="text/css">
div{
font-family:verdana;
color:#0000FF;
background-color:#FFFF00;
font-size:36px; text-align:center; width:800px;
}
</style>
</head>
<body>
<div>
<p>Ini Contoh Penggunaan DIV</p>
</div>
<span style="font:Arial; color:#FF0000; font-size:24px">Ini
Contoh dalam Span dengan warna merah</span>
</body>
</html>
CSS 3
CSS 3 merupakan versi terbaru dari pengembangan css sebelumnya. Peningkatan yang paling mencolok pada versi ini yaitu peningkatan fitur yang mengarah pada efek animasi, seperti text effects, border, accordion, crop, dll. Namun yang perlu di ingat tidak semua browser mendukung Css3. Kita harus memilih browser yang sudah mendukung versi css3 seperti Mozilla Firefox 3.6, Opera, Safari 5, dan Google Chrome. Internet Explore (IE) versi 9 belum mendukung penuh Css3.
1. Border Effects
Css3 menyediakan fitur menarik dari segi border misalnya kita dapat mengganti border dengan image, menerapkan sisi gradient, dan bahkan kita bisa membuat sudut melengkung pada bagian sisinya tanpa menggunakan gambar.
latihan1.html
<!DOCTYPE html>
<head>
<title>Latihan 1</title>
<link rel="stylesheet" href="border.css" type="text/css" />
</head>
<body>
<p id="melengkung">
Kotak ini memiliki sudut round
</p>
<p id="gradien">
Kotak ini menggunakan efek gradien
</p>
<p id="bayangan">
Kotak ini memiliki sudut round dan ada bayangan(shadow)
</p>
<p id="gambar">
Kotak ini menggunakan gambar untuk bordernya.
</p>
</body>
</html>
border.css
#melengkung
{
border:2px solid red; padding:10px 40px; background:yellow; width:600px;
border-radius:30px;
}
#gradien /*tampil di firefox */
{
width:600px;
border:10px solid #000;
padding:5px 5px 5px 15px;
-moz-border-bottom-colors: #555 #666 #777 #888 #999 #aaa #bbb
#ccc;
-moz-border-top-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-left-colors: #555 #666 #777 #888 #999 #aaa #bbb
#ccc;
-moz-border-right-colors: #555 #666 #777 #888 #999 #aaa #bbb
#ccc;
}
#bayangan
{ width:600px; height:150px; background-color:pink;
box-shadow: 10px 10px 5px #888888;
padding:10px 40px;
}
#gambar /*suport di chrome */
{
width:600px;
-webkit-border-image:url(border.png) 40 40 stretch; /* Safari 5 and older */
-o-border-image:url(border.png) 40 40 stretch; /* Opera */
border-image:url(border.png) 40 40 stretch;
padding:10px 40px;
}
Output di browser :
latihan2.html
<!DOCTYPE html>
<html>
<head>
<title>Latihan 2</title>
<style type="text/css">
div
{ width:100px; height:75px;
background-color:purple; border:1px solid yellow; color:white;
}
#dua
{
transform:rotate(30deg);
-ms-transform:rotate(30deg); /* IE 9 */
-webkit-transform:rotate(30deg); /* Safari and Chrome */
}
</style>
</head>
<body>
<div>STMIK AMikom Yogyakarta</div>
<div id="dua">Unggul dalam tren IT</div>
</body>
</html>
Pemrograman Web – Strata 1 Teknik Informatika
3
Output di browser :
4
5
2. Accordion
Accordion adalah menu yang telah disusun atau dikelompokkan. Efek dari accordion ini ketika kita klick kelompok menu tersebut, akan terlihat menu lainnya dengan animasi geser. latihan3.html
<!DOCTYPE html>
<html>
<head>
<title>Latihan 3</title>
<link rel="stylesheet" href="accordion.css" type="text/css">
</head>
<body>
<dl>
<dt><a href="#Section1">STMIK AMIKOM Yogyakarta</a></dt>
<dd id="Section1">
<p>STMIK AMIKOM YOGYAKARTA adalah sebuah perguruan tinggi hasil pengembangan dari Akademi Manajemen Informatika dan Komputer "AMIKOM YOGYAKARTA".
</p>
</dd>
<dt><a href="#Section2">Visi & Misi</a></dt>
<dd id="Section2">
<p><b>Visi Perguruan Tinggi</b>:Menjadi Perguruan Tinggi Komputer Terbaik di Asia Tenggara.<br/><br/><b>Misi Perguruan Tinggi</b>:Menghasilkan lulusan yang berkualitas global, produktif, berjiwa entrepreneur, profesional</p>
</dd>
<dt><a href="#Section3">Sejarah Berdiri</a></dt>
<dd id="Section3">
<p><b>STMIK AMIKOM YOGYAKARTA</b>merupakan salah satu perguruan tinggi swasta yang berkedudukan di Provinsi DIY Kabupaten Sleman di bawah naungan Yayasan AMIKOM Yogyakarta.</p>
</dd>
<dt><a href="#Section4">Kontak</a></dt>
<dd id="Section4">
<p>Kampus Terpadu : Jl. Ring Road Utara, Condong
Catur, Sleman, Yogyakarta<br>
Telp: (0274) 884201 - 207 <br>
Fax: (0274) 884208 Kodepos: 55283<br> E-Mail: amikom@amikom.ac.id</p>
</dd>
</dl>
</body>
</html>
accordion.css
*{
font-family: Verdana, Arial, Helvetica, sans-serif;
}
body{
background-color: #380a62;
font-size: 0.75em;
}
p{
font-size: 1em; margin: 0 0 1em 0; text-align: justify;
}
dl{
padding: 10px;
min-width: 960px;
}
dl dt{
-webkit-border-radius: 5px;
-moz-border-radius: 5px; border-radius: 5px; border:1px solid #B6B4B4; margin:0;
width:400px;
}
dl dt a{ color:#ffffff; font-weight:bold;
text-decoration:none;
padding:10px;
display:block;
}
dl dd{ color:#cccccc; margin:0; width:400px; overflow:hidden;
-webkit-transition: height 1s ease;
-moz-transition: height 1s ease;
-o-transition: height 1s ease;
}
dl dd p { padding:10px; margin:0;
}
dl dd:not(:target) {
height:0;
7
}
dl dd:target {
height:9.5em;
}
dl a.ie:hover dd, dl a.ie:focus dd {
height:auto;
color:#cccccc;
}
Output di browser :
3. Text Effects latihan4.html
<!DOCTYPE html>
<html>
<head>
<title>Latihan 4</title>
<style type="text/css">
h1
{
text-shadow: 5px 5px 5px red;
color:yellow;
font-size:50px;
}
</style>
</head>
<body>
<h1>Teks ini menggunakan efek bayangan</h1>
</body>
</html>
Output di browser :
4. Sexy Image Hover latihan5.html
<!DOCTYPE HTML>
<html>
<head>
<title>Latihan 5</title>
<link rel="stylesheet" href="sexy.css" type="type/css">
</head>
<body>
<div class='img' id='img-1'>
<div class='mask'></div>
<img src='kucing1.jpg' width='200' height='150' />
</div>
<div class='img' id='img-2'>
<div class='mask'></div>
<img src='kucing2.jpg' width='200' height='150' />
</div>
<div class='img' id='img-3'>
<div class='mask'></div>
<img src='kucing3.jpg' width='200' height='150' />
</div>
<div class='img' id='img-4'>
<div class='mask'></div>
<img src='kucing4.jpg' width='200' height='150' />
</div>
<div class='img' id='img-5'>
<div class='mask'></div>
<img src='kucing5.jpg' width='200' height='150' />
</div>
<div class='img' id='img-6'>
<div class='mask'></div>
<img src='kucing6.jpg' width='200' height='150' />
</div>
</body>
</html>
sexy.css
.img{
float:left;
-webkit-transition-duration: 0.5s;
}
.img img{ padding:10px; border:1px solid #fff;
}
.img:hover{
-webkit-transform:scale(0.8);
-webkit-box-shadow:0px 0px 30px #ccc;
}
.img .mask{
width: 100%;
background-color: rgb(0, 0, 0);
position: absolute; height: 100%; opacity:0.6; cursor:pointer;
-webkit-transition-duration: 0.5s;
}
#img-1:hover .mask{
height:0%;
}
#img-2:hover .mask{
height:0%;
margin-top:130px;
}
#img-3 #mask-1 {
width:50%;
}
#img-3 #mask-2{
width:50%;
margin-left:211px;
}
#img-3:hover #mask-1{
width:0%;
}
#img-3:hover #mask-2{
margin-left:430px;
width:0%;
}
#img-4:hover .mask{ margin-left:219px; margin-top:135px; height:0%;
10
width:0%;
}
#img-5:hover .mask{ margin-left:219px; margin-top:135px; height:0%; width:0%;
-webkit-transform: rotateX(360deg);
}
#img-6:hover .mask{ margin-left:219px; margin-top:135px; height:0%; width:0%;
-webkit-transform: rotateZ(750deg);
}
Output di browser :
11
REFERENSI
Saputra, Agus. (2012). Web Trik: PHP, HTML5 dan CSS3. Jasakom. http://www.w3schools.com
Kadir, Abdul. (2011). From Zero to be a Pro: CSS Tip dan Trik untuk menyertakan
Cascading Style Sheets dalam halaman Web. Yogyakarta: Andi Offset. Saputra, Agus. (2012). Web Trik: PHP, HTML5 dan CSS3. Jasakom.
Contoh Index dan Layout CSS
Contoh-contoh Layout
Screenshot
index.html
<link href="style.css" rel="stylesheet" type="text/css">
<div id="kotak">
<div id="header"></div>
<div id="menu">
<ul>
<li><a href="index.php">Home</a></li>
<li><a href="#">Berita</a></li>
<li><a href="guru.php">Download</a></li>
<li><a href="#">Kontak</a></li>
<li><a href="#">SiteMap</a></li>
</ul>
</div>
<div id="content">
<div id="kiri"></div>
<div id="kanan"></div>
</div>
<div id="footer">Copyright © 2012 Pengenalan Perancangan Web, All Right Reserved</div>
</div>
style.css
body {
background-color: #FFFFFF;
margin: 0px;
}
#kotak {
width: 980px;
margin-right: auto;
margin-left: auto;
}
#kotak #header {
background-image: url(header.jpg);
height: 280px;
width: 980px;
margin-right: auto;
margin-left: auto;
}
#kotak #content {
width: 960px;
min-height: 300px;
background-color: #999999;
margin-top: 10px;
margin-right: auto;
margin-left: auto;
moz-border-radius: 5px;
webkit-border-radius: 5px;
border-radius: 5px;
padding: 10px;
}
#kotak #content #kanan {
background-color: #CCCCCC;
min-height: 300px;
width: 680px;
float: left;
margin-left: 10px;
moz-border-radius: 5px;
webkit-border-radius: 5px;
border-radius: 5px;
}
#kotak #footer {
background-color: #666666;
height: 10px;
width: 980px;
margin-top: 5px;
moz-border-radius: 5px;
webkit-border-radius: 5px;
border-radius: 5px;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
color: #FFFFFF;
text-align: center;
padding-bottom: 10px;
padding-top: 10px;
}
#kotak #content #kiri {
background-color: #CCCCCC;
width: 250px;
padding-right: 10px;
padding-left: 10px;
min-height: 200px;
moz-border-radius: 5px;
webkit-border-radius: 5px;
border-radius: 5px;
float: left;
}
#kotak #menu {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
background-color: #666666;
height: 30px;
width: 980px;
}
#kotak #menu ul {
margin: 0px;
padding: 0px;
list-style-type: none;
}
#kotak #menu ul li a {
text-decoration: none;
float: left;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #FFFFFF;
display: block;
padding: 8px;
color: #FFFFFF;
}
#kotak #menu ul li a:hover {
background-color: #CCCCCC;
color: #000000;
}
Index.html
<body>
<div class="menu">Menu Top</div>
<div class="slider"></div>
<div class="container960">
<div class="produk1">Produk1</div>
<div class="produk2">Produk2</div>
<div class="produk3">Produk3</div>
<div class="introweb">Content</div>
<div class="news">Sidebar</div>
</div>
<div class="menufooter">Footer Menu</div>
<div class="footer">Footer</div>
</body>
</html>
Style.css
* {
margin: 0px;
padding: 0px;
}
.menu {
color: #FFF;
height: 70px;
width: 100%;
background-color: #306;
}
.menufooter {
clear: both;
height: 70px;
width: 100%;
background-color: #609;
}
.container960 {
background-color: #036;
width: 960px;
margin: auto;
}
.slider{
width:100%;
height:440px;
background:#9C0;
color:#fff;
}
.cont_produk {
width: 960px;
}
.produk1 {
background-color: #00F;
float: left;
height: 400px;
width: 320px;
}
.produk2 {
background-color: #06F;
float: left;
height: 400px;
width: 320px;
}
.produk3 {
background-color: #0CF;
float: left;
height: 400px;
width: 320px;
}
.introweb {
background-color: #900;
float: left;
height: 300px;
width: 640px;
margin-top: 10px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
.news {
background-color: #CC3;
float: left;
height: 300px;
width: 320px;
margin-top: 10px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
.footer {
clear: both;
height: 70px;
width: 100%;
background-color: #C60;
}
Screenshot
index.html
<link href="style.css" rel="stylesheet" type="text/css">
<div id="kotak">
<div id="header"></div>
<div id="menu">
<ul>
<li><a href="index.php">Home</a></li>
<li><a href="#">Berita</a></li>
<li><a href="guru.php">Download</a></li>
<li><a href="#">Kontak</a></li>
<li><a href="#">SiteMap</a></li>
</ul>
</div>
<div id="content">
<div id="kiri"></div>
<div id="kanan"></div>
</div>
<div id="footer">Copyright © 2012 Pengenalan Perancangan Web, All Right Reserved</div>
</div>
style.css
body {
background-color: #FFFFFF;
margin: 0px;
}
#kotak {
width: 980px;
margin-right: auto;
margin-left: auto;
}
#kotak #header {
background-image: url(header.jpg);
height: 280px;
width: 980px;
margin-right: auto;
margin-left: auto;
}
#kotak #content {
width: 960px;
min-height: 300px;
background-color: #999999;
margin-top: 10px;
margin-right: auto;
margin-left: auto;
moz-border-radius: 5px;
webkit-border-radius: 5px;
border-radius: 5px;
padding: 10px;
}
#kotak #content #kanan {
background-color: #CCCCCC;
min-height: 300px;
width: 680px;
float: left;
margin-left: 10px;
moz-border-radius: 5px;
webkit-border-radius: 5px;
border-radius: 5px;
}
#kotak #footer {
background-color: #666666;
height: 10px;
width: 980px;
margin-top: 5px;
moz-border-radius: 5px;
webkit-border-radius: 5px;
border-radius: 5px;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
color: #FFFFFF;
text-align: center;
padding-bottom: 10px;
padding-top: 10px;
}
#kotak #content #kiri {
background-color: #CCCCCC;
width: 250px;
padding-right: 10px;
padding-left: 10px;
min-height: 200px;
moz-border-radius: 5px;
webkit-border-radius: 5px;
border-radius: 5px;
float: left;
}
#kotak #menu {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
background-color: #666666;
height: 30px;
width: 980px;
}
#kotak #menu ul {
margin: 0px;
padding: 0px;
list-style-type: none;
}
#kotak #menu ul li a {
text-decoration: none;
float: left;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #FFFFFF;
display: block;
padding: 8px;
color: #FFFFFF;
}
#kotak #menu ul li a:hover {
background-color: #CCCCCC;
color: #000000;
}
Index.html
<body>
<div class="menu">Menu Top</div>
<div class="slider"></div>
<div class="container960">
<div class="produk1">Produk1</div>
<div class="produk2">Produk2</div>
<div class="produk3">Produk3</div>
<div class="introweb">Content</div>
<div class="news">Sidebar</div>
</div>
<div class="menufooter">Footer Menu</div>
<div class="footer">Footer</div>
</body>
</html>
Style.css
* {
margin: 0px;
padding: 0px;
}
.menu {
color: #FFF;
height: 70px;
width: 100%;
background-color: #306;
}
.menufooter {
clear: both;
height: 70px;
width: 100%;
background-color: #609;
}
.container960 {
background-color: #036;
width: 960px;
margin: auto;
}
.slider{
width:100%;
height:440px;
background:#9C0;
color:#fff;
}
.cont_produk {
width: 960px;
}
.produk1 {
background-color: #00F;
float: left;
height: 400px;
width: 320px;
}
.produk2 {
background-color: #06F;
float: left;
height: 400px;
width: 320px;
}
.produk3 {
background-color: #0CF;
float: left;
height: 400px;
width: 320px;
}
.introweb {
background-color: #900;
float: left;
height: 300px;
width: 640px;
margin-top: 10px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
.news {
background-color: #CC3;
float: left;
height: 300px;
width: 320px;
margin-top: 10px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
.footer {
clear: both;
height: 70px;
width: 100%;
background-color: #C60;
}
Pertemuan 4
Image HTML
Bayangkan apabila di web anda anda berisi tulisan dan tidak ada gambarnya pasti tidak menarik. Gambar di dalam suatu web page merupakan daya penarik bagi pengunjung. Adanya gambar di web anda akan memperindah tampilan. File gambar yang umum digunakan ada 3 jenis format yaitu PNG, GIF, dan JPG. Ketika anda memilih suatu gambar harus memperhatikan dari format gambar yang digunakan karena setiap gambar akan membutuhkan waktu tambahan untuk di download dan memperlambat awal penampilan suatu dokumen dalam browser. Oleh karena itu, berhati-hatilah dalam memilih gambar dan menyertakannya ke dalam suatu dokumen. Untuk menysipkan gambar pada dokumen html di sediakan secara khusus yaitu Tag <img>.
Sintaks penulisannya :
<img src=”url” />
Tag <img> mempunyai atribut di antaranya: Atribut Penjelasan
src
Url dari file image/direktori gambar
align
Letak gambar pada teks, nilai atributnya left, right, top, middle, dan bottom
width
Lebar gambar dalam satuan pixel
height
Tinggi gambar dalam satuan pixel
alt
Menampilkan teks pengganti jika gambar tidak tampil di brows
border
Memberi bingkai pada gambar
latihan1.html
<!DOCTYPE html >
<html>
<head >
<title>Contoh Posisi Img</title>
</head >
<body>
<p>
Logo Amikom
<img src="amikom.jpg" width="223" height="226" align="bottom" alt="Logo Amikom"/> menggunakan align="bottom".
</p>
</body>
</html>
Catatan:
Apabila anda ingin melihat perbedaan letak posisi gambar pada latihan1.html, silahkan ganti pada atribut align=”bottom”. Apabila anda ingin melihat fungsi atribut alt, url dari file image/direktori gambar anda salahkan.
latihan2.html
<!DOCTYPE html >
<html>
<head >
<title>Contoh Border Img</title>
</head >
<body >
<p>
Logo Amikom
<img src="amikom.jpg" width="223" height="226" align="bottom" alt="Logo Amikom" border="1" /> menggunakan border="1". </p>
</body>
</html>
Catatan:
Apabila anda ingin melihat perbedaan ketebalan border gambar pada latihan2.html, silahkan ganti pada atribut border=”1”.
Image Sebagai Link
Gambar bisa digunakan sebagai link untuk suatu dokumen.
latihan3.html
<!DOCTYPE html >
<html>
<head >
<title>Img sebagai suatu link</title>
</head >
<body >
<p>
<b>Untuk mengunjungi website amikom klik gambar di samping</b>
<a href="http://www.amikom.ac.id"><img src="amikom.jpg" width="50" height="50" align="middle" alt="Tombol" /> </a> </p>
</body>
</html>
2. Tabel HTML
Tabel dapat digunakan untuk memberikan data dalam bentuk kolom dan baris. Sebuah tabel mempunyai judul, baris untuk informasi, dan sel untuk setiap itemnya. Tabel dapat di isi dengan daftar item, paragraf, form, gambar, teks-teks preformatted, dan bahkan tabel-tabel yang lain (tabel dalam tabel). Untuk membuat tabel digunakan tag awal <table> dan tag penutup </table>. Sintaks penulisannya :
<table>
<tr>
<td>Data Tabel</td>
<tr>
</table>
Elemen-Elemen Tabel Elemen Penjelasan
<table> . . . </table>
Tag pembentuk tabel. jika border disertakan, maka tabel akan tampil disertai border. Nilai border 0 – 30.
<caption> . . . </caption>
Pembentuk judul tabel. judul dapat diberi tag apa saja.
<tr> . . . </tr>
Penjelaskan baris tabel dalam tabel. atribut yang dipakai : align(left, center dan right) atau valign(top, middle dan bottom).
<th> . . . </th>
Pembentuk sel header tabel. Secara default teks dalam sel ini di tebalkan dan di tampilkan ditengah.
<td> . . . </td>
Pembentuk sel data dalam tabel.
Catatan :
Jumlah baris tabel ditentukan dengan banyaknya <tr> . . . </tr> yang di tulisankan dalam elemen tabel, dari <table> . . . </table>.
Jumlah kolom dalam tabel ditentukan dengan banyaknya <td> . . . </td> di dalam setiap definisi baris, dari <tr> . . . </tr>.
Setiap baris dalam tabel akan mempunyai jumlah kolom yang berbeda.
Atribut Tag <table> Catatan :
Atribut yang didefinisikan dalam <th> . . . </th> atau <td> . . . </td> akan menggantikan alignment default yang didefinisikan dalam <tr> . . . </tr>
Atribut Tag <tr>
Atribut Tag <td> dan <th>
Berikut ini adalah beberapa contoh penggunaan atribut pada tag <table> dan <td>:
2.1 Atribut Width, Border, Bordercolor latihan4.html
<!DOCTYPE html >
<html>
<head >
<title>Atribut Width, Border, Bordercolor</title>
</head >
<body >
<table width="500" border="1" bordercolor="#FF0000">
<caption>Atribut Width, Border, Bordercolor</caption > <tr>
<th width="200">Baris 1 Kolom 1</th> <th width="180">Baris 1 Kolom 2</th>
</tr >
<tr>
<td>Baris 2 Kolom 1</td >
<td>Baris 2 Kolom 2</td >
</tr>
<tr>
<td>Baris 3 Kolom 1</td>
<td>Baris 3 Kolom 2</td>
</tr>
</table>
</body>
</html>
2.2 Atribut Backround, Height, Cellspacing, Cellpadding latihan5.html
<!DOCTYPE html >
<html>
<head >
<title>Atribut Backround, height, cellspacing, cellpadding</title>
</head>
<body>
<table width="1024" border="3" background="WindowsXp.jpg" height="768" cellspacing="25" cellpadding="10" align="center"> <caption>Atribut Backround, height, cellspacing, cellpadding </caption>
<tr>
<td>Baris 1 Kolom 1</td>
<td>Baris 1 Kolom 2</td >
</tr>
<tr>
<td>Baris 2 Kolom 1</td>
<td>Baris 2 Kolom 2</td>
</tr> </table>
</body>
</html>
2.3 Atribut Colspan, Rowspan, Valign latihan6.html
<!DOCTYPE html>
<html>
<head >
<title>Atribut Colspan, Rowspan, Valign </title>
</head >
<body>
<table width="500" border="1" bgcolor="#FFFF00" align="center"> <caption>Atribut Colspan, Rowspan, Valign </caption> <tr>
<td colspan="2">Kolom 1 dan Kolom 2 Di Gabung</td>
</tr >
<tr>
<td rowspan="2" valign="top">Baris 2 dan Baris 3 Di Gabung</td > <td bgcolor="#0000FF">Baris 2 Kolom 2</td>
</tr >
<tr>
<td bgcolor="red">Baris 3 Kolom 2</td >
</tr> </table>
</body>
</html>
2.4 Empty Cell
Penggunaan mnemonic “ ” untuk menangani tabel yang belum mempunyai isi. latihan7.html
<!DOCTYPE html >
<html>
<head>
<title>Empty Cell</title>
</head>
<body >
<table border="1">
<caption>Empty Cell</caption >
<tr><td>Nama</td>
<td>TTL</td ></tr>
<tr><td> </td>
<td>Newyogkarto, 23 Maret 1995</td></tr>
</table>
</body>
</html >
2.5 Tabel dalam Tabel latihan8.html
<!DOCTYPE html >
<html>
<head>
<title>Tabel dalam Tabel</title>
</head>
<body>
<table border="1">
<tr><td>Parent 1</td>
<td><table border="1">
<tr>
<td>Child 1</td>
<td><table border="1">
<tr>
<td>Grandson 1</td>
<td>Grandson 2</td>
</tr>
<tr>
<td>Grandson 3</td>
<td>Grandson 4</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>Child 2</td>
<td>Child 3</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>Parent 2</td>
<td>Parent 3</td>
</tr>
</table>
</body>
</html>
3. Form dan Input HTML
Form merupakan salah satu elemen HTML yang digunakan untuk mendapatkan masukan dari pengguna web. Pengguna web dapat memasukkan input melalui halaman-halaman HTML. Umumnya pengolahan form dilakukan pada server dengan menggunakan skrip yang bersifat server-side seperti PHP, ASP dan lain sebagainya. ). Untuk membuat form digunakan tag awal <form> dan tag penutup </form>.
Sintaks penulisannya :
<form action=”url” method=”get|post”>
</form>
3.1 Atribut Tag <form> Atribut Penjelasan
Method
Metode pengiriman data ke tujuan, yaitu:
GET : mengirimkan data pada server dengan cara meletakkan data pada bagian akhir URL
POST : mengirimkan datanya secara terpisah.
Action
Menentukan lokasi dari script yang akan memproses data dari form
3.2 Jenis Masukan dalam Form
Jenis masukan dalam satu formulir dibedakan menjadi :
Text, digunakan untuk mengisi suatu nilai dapat berupa teks atau angka.
Radio, elemen isian berupa pilihan dimana hanya satu pilihan yang dapat dilakukan.
Checkbox, elemen yang menyediakan beberapa pilihan bisa lebih dari satu.
List, elemen pilihan dalam bentuk daftar.
Button, elemen berupa tombol untuk melakukan suatu proses.
Submit, elemen tombol yang digunakan untuk memanggil url.
Reset, elemen tombol yang digunakan untuk mengembalikan kondisi awal.
Image, digunakan sebagai pengganti button, berupa gambar yang dapat melakukan proses.
Textarea, elemen yang dapat menampung kumpulan teks ketikan dari user.
File, elemen button yang dapat memanggil file atau gambar dari storage.
Password, elemen berupa teks yang khusus digunakan untuk mengisi password.
3.2.1 Tag <TEXTAREA>
Tag <TEXTAREA> digunakan untuk membuat sebuah kotak teks multi baris. Tag ini mempunyai beberapa atribut, yaitu :
3.2.2 Tag <SELECT>
Tag <SELECT> digunakan untuk membuat sebuah daftar pilihan. Tag ini memiliki beberapa atribut, yaitu :
latihan9.html
<!DOCTYPE html >
<html>
<head >
<title>Contoh Tag Textarea dan Tag Select</title> </head >
<body>
<table width="100%" >
<tr>
<td>Pilih Jenis Kendaraan </td>
<td><select name="motor">
<option value="yamaha">Yamaha</option >
<option value="honda">Honda</option >
<option value="suzuki">Suzuki</option></select></td> </tr >
<tr>
<td> Alamat </td>
<td><textarea name="alamat" cols="55" rows="5"></textarea></td> </tr >
</table >
</body>
</html >
3.2.3 Tag <INPUT>
Tag <INPUT> digunakan untuk membuat komponen-komponen yang digunakan untuk meminta informasi dari user, misalnya kotak teks, kotak pilihan, tombol dan lain-lain. Tag ini tidak memerlukan tag penutup. Tag ini mempunyai beberapa atribut, yaitu :
Tipe input yang dapat dibuat adalah :
Text, digunakan untuk membuat kotak teks
Password, digunakan untuk membuat kotak teks, tetapi semua karakter akan ditampilkan dengan tanda *.
Check Box, digunakan untuk membuat suatu daftar pilihan yang dapat dipilih lebih dari satu.
Radio, digunakan untuk membuat suatu daftar pilihan yang hanya dapat dipilih satu saja.
File, digunakan untuk memanggil file atau gambar dari storage.
Hidden, Digunkan untuk mengirim data ke suatu aplikasi yang tidak dingginkan untuk dilihat oleh browser.
Reset, digunakan untuk membuat tombol yang fungsinya untuk menghapus semua isian form yang telah diberikan.
Submit, digunakan untuk membuat tombol yang fungsinya untuk mengirimkan data form agar diolah.
latihan10.html
<!DOCTYPE html >
<html>
<head >
<title>Input Data Berita</title>
</head >
<body text="#0000FF" >
<h2>Tambah Berita</h2>
<form method="post" action="#" enctype="multipart/form -data">
<table width="100%">
<tr>
<td>Judul</td>
<td> : <input type="text" name="judul" size="60"/></td>
</tr>
<tr>
<td>Kategori</td>
<td> :<select name="kategori" >
<option value="kategori_berita" selected>- Pilih Kategori </option>
<option value="komputer">Komputer
<option value="ekonomi">Ekonomi
<option value="pendidikan">Pendidikan
</select>
</td>
</tr>
<tr>
<td>Headline</td>
<td> : <input type="radio" name="headline" value="Y" checked/>Y
<input type="radio" name="headline" value="N"/> N</td>
</tr>
<tr>
<td>Isi Berita</td>
<td> : <textarea name="isi_berita" cols="45" rows="6"></textarea>
</td>
</tr>
<tr>
<td>Gambar</td>
<td> : <input type="file" name="fupload" size="40"></td>
</tr>
<tr>
<td colspan=2>
<input type="submit" value="Simpan"/>
<input type="reset" value="Reset"/>
</td>
</tr>
</table>
</form>
</body>
</html>
4. Elemen Label, Fieldset dan Legend
Elemen label memberikan fasilitas untuk menambahkan teks pada elemen masukan form. Elemen ini diisikan dengan deskripsi dari elemen masukan yang ingin ditambahkan dan harus memiliki atribut for. Atribut for pada elemen label berisikan nilai yang sama dengan atribut id pada elemen masukan form. Pengisian nilai yang sama akan mengikatkan elemen label dengan elemen masukan sehingga pengguna dapat langsung mengisikan nilai dengan melakukan klik teks yang dihasilkan oleh elemen label. Elemen fieldset merupakan elemen yang digunakan untuk membungkus beberapa elemen masukan form, untuk menandakan bahwa elemen-elemen tersebut merupakan elemen masukan yang berada pada satu grup yang sama, atau saling berhubungan. Sedangkan Elemen legend digunakan untuk memberikan judul pada sebuah fieldset.
Sintaks penulisannya :
<fieldset>
<legend>Judul</legend>
</fieldset>
latihan11.html
<!DOCTYPE html >
<html> <head >
<title>Penggunaan Label, Fieldset dan Legend</title>
</head >
<body>
<form action="#" method="post">
<fieldset>
<legend>Form Login</legend>
<label for="username">Username</label>
<input type="text" name="username" id="username"/>
<label for="password">Password</label>
<input type="password" name="password" id="password"/>
<input type="submit" name="submit" value="Login"/>
</fieldset>
</form>
</body>
</html>
REFERENSI
Sidik, Betha dan Pohan, I. Husni. (2012). Pemrograman Web dengan HTML disertai lebih dari 200 contoh program beserta tampilan grafisnya. Bandung: Informatika.
Arief, M. R. (2011). Pemrograman Web Dinamis menggunakan PHP dan MySQL. Yogyakarta: Andi Offset.
Ahlihi Masruro, S.Kom. Modul Pemrograman Web. STMIK AMIKOM Yogyakarta
Bayangkan apabila di web anda anda berisi tulisan dan tidak ada gambarnya pasti tidak menarik. Gambar di dalam suatu web page merupakan daya penarik bagi pengunjung. Adanya gambar di web anda akan memperindah tampilan. File gambar yang umum digunakan ada 3 jenis format yaitu PNG, GIF, dan JPG. Ketika anda memilih suatu gambar harus memperhatikan dari format gambar yang digunakan karena setiap gambar akan membutuhkan waktu tambahan untuk di download dan memperlambat awal penampilan suatu dokumen dalam browser. Oleh karena itu, berhati-hatilah dalam memilih gambar dan menyertakannya ke dalam suatu dokumen. Untuk menysipkan gambar pada dokumen html di sediakan secara khusus yaitu Tag <img>.
Sintaks penulisannya :
<img src=”url” />
Tag <img> mempunyai atribut di antaranya: Atribut Penjelasan
src
Url dari file image/direktori gambar
align
Letak gambar pada teks, nilai atributnya left, right, top, middle, dan bottom
width
Lebar gambar dalam satuan pixel
height
Tinggi gambar dalam satuan pixel
alt
Menampilkan teks pengganti jika gambar tidak tampil di brows
border
Memberi bingkai pada gambar
latihan1.html
<!DOCTYPE html >
<html>
<head >
<title>Contoh Posisi Img</title>
</head >
<body>
<p>
Logo Amikom
<img src="amikom.jpg" width="223" height="226" align="bottom" alt="Logo Amikom"/> menggunakan align="bottom".
</p>
</body>
</html>
Catatan:
Apabila anda ingin melihat perbedaan letak posisi gambar pada latihan1.html, silahkan ganti pada atribut align=”bottom”. Apabila anda ingin melihat fungsi atribut alt, url dari file image/direktori gambar anda salahkan.
latihan2.html
<!DOCTYPE html >
<html>
<head >
<title>Contoh Border Img</title>
</head >
<body >
<p>
Logo Amikom
<img src="amikom.jpg" width="223" height="226" align="bottom" alt="Logo Amikom" border="1" /> menggunakan border="1". </p>
</body>
</html>
Catatan:
Apabila anda ingin melihat perbedaan ketebalan border gambar pada latihan2.html, silahkan ganti pada atribut border=”1”.
Image Sebagai Link
Gambar bisa digunakan sebagai link untuk suatu dokumen.
latihan3.html
<!DOCTYPE html >
<html>
<head >
<title>Img sebagai suatu link</title>
</head >
<body >
<p>
<b>Untuk mengunjungi website amikom klik gambar di samping</b>
<a href="http://www.amikom.ac.id"><img src="amikom.jpg" width="50" height="50" align="middle" alt="Tombol" /> </a> </p>
</body>
</html>
2. Tabel HTML
Tabel dapat digunakan untuk memberikan data dalam bentuk kolom dan baris. Sebuah tabel mempunyai judul, baris untuk informasi, dan sel untuk setiap itemnya. Tabel dapat di isi dengan daftar item, paragraf, form, gambar, teks-teks preformatted, dan bahkan tabel-tabel yang lain (tabel dalam tabel). Untuk membuat tabel digunakan tag awal <table> dan tag penutup </table>. Sintaks penulisannya :
<table>
<tr>
<td>Data Tabel</td>
<tr>
</table>
Elemen-Elemen Tabel Elemen Penjelasan
<table> . . . </table>
Tag pembentuk tabel. jika border disertakan, maka tabel akan tampil disertai border. Nilai border 0 – 30.
<caption> . . . </caption>
Pembentuk judul tabel. judul dapat diberi tag apa saja.
<tr> . . . </tr>
Penjelaskan baris tabel dalam tabel. atribut yang dipakai : align(left, center dan right) atau valign(top, middle dan bottom).
<th> . . . </th>
Pembentuk sel header tabel. Secara default teks dalam sel ini di tebalkan dan di tampilkan ditengah.
<td> . . . </td>
Pembentuk sel data dalam tabel.
Catatan :
Jumlah baris tabel ditentukan dengan banyaknya <tr> . . . </tr> yang di tulisankan dalam elemen tabel, dari <table> . . . </table>.
Jumlah kolom dalam tabel ditentukan dengan banyaknya <td> . . . </td> di dalam setiap definisi baris, dari <tr> . . . </tr>.
Setiap baris dalam tabel akan mempunyai jumlah kolom yang berbeda.
Atribut Tag <table> Catatan :
Atribut yang didefinisikan dalam <th> . . . </th> atau <td> . . . </td> akan menggantikan alignment default yang didefinisikan dalam <tr> . . . </tr>
Atribut Tag <tr>
Atribut Tag <td> dan <th>
Berikut ini adalah beberapa contoh penggunaan atribut pada tag <table> dan <td>:
2.1 Atribut Width, Border, Bordercolor latihan4.html
<!DOCTYPE html >
<html>
<head >
<title>Atribut Width, Border, Bordercolor</title>
</head >
<body >
<table width="500" border="1" bordercolor="#FF0000">
<caption>Atribut Width, Border, Bordercolor</caption > <tr>
<th width="200">Baris 1 Kolom 1</th> <th width="180">Baris 1 Kolom 2</th>
</tr >
<tr>
<td>Baris 2 Kolom 1</td >
<td>Baris 2 Kolom 2</td >
</tr>
<tr>
<td>Baris 3 Kolom 1</td>
<td>Baris 3 Kolom 2</td>
</tr>
</table>
</body>
</html>
2.2 Atribut Backround, Height, Cellspacing, Cellpadding latihan5.html
<!DOCTYPE html >
<html>
<head >
<title>Atribut Backround, height, cellspacing, cellpadding</title>
</head>
<body>
<table width="1024" border="3" background="WindowsXp.jpg" height="768" cellspacing="25" cellpadding="10" align="center"> <caption>Atribut Backround, height, cellspacing, cellpadding </caption>
<tr>
<td>Baris 1 Kolom 1</td>
<td>Baris 1 Kolom 2</td >
</tr>
<tr>
<td>Baris 2 Kolom 1</td>
<td>Baris 2 Kolom 2</td>
</tr> </table>
</body>
</html>
2.3 Atribut Colspan, Rowspan, Valign latihan6.html
<!DOCTYPE html>
<html>
<head >
<title>Atribut Colspan, Rowspan, Valign </title>
</head >
<body>
<table width="500" border="1" bgcolor="#FFFF00" align="center"> <caption>Atribut Colspan, Rowspan, Valign </caption> <tr>
<td colspan="2">Kolom 1 dan Kolom 2 Di Gabung</td>
</tr >
<tr>
<td rowspan="2" valign="top">Baris 2 dan Baris 3 Di Gabung</td > <td bgcolor="#0000FF">Baris 2 Kolom 2</td>
</tr >
<tr>
<td bgcolor="red">Baris 3 Kolom 2</td >
</tr> </table>
</body>
</html>
2.4 Empty Cell
Penggunaan mnemonic “ ” untuk menangani tabel yang belum mempunyai isi. latihan7.html
<!DOCTYPE html >
<html>
<head>
<title>Empty Cell</title>
</head>
<body >
<table border="1">
<caption>Empty Cell</caption >
<tr><td>Nama</td>
<td>TTL</td ></tr>
<tr><td> </td>
<td>Newyogkarto, 23 Maret 1995</td></tr>
</table>
</body>
</html >
2.5 Tabel dalam Tabel latihan8.html
<!DOCTYPE html >
<html>
<head>
<title>Tabel dalam Tabel</title>
</head>
<body>
<table border="1">
<tr><td>Parent 1</td>
<td><table border="1">
<tr>
<td>Child 1</td>
<td><table border="1">
<tr>
<td>Grandson 1</td>
<td>Grandson 2</td>
</tr>
<tr>
<td>Grandson 3</td>
<td>Grandson 4</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>Child 2</td>
<td>Child 3</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>Parent 2</td>
<td>Parent 3</td>
</tr>
</table>
</body>
</html>
3. Form dan Input HTML
Form merupakan salah satu elemen HTML yang digunakan untuk mendapatkan masukan dari pengguna web. Pengguna web dapat memasukkan input melalui halaman-halaman HTML. Umumnya pengolahan form dilakukan pada server dengan menggunakan skrip yang bersifat server-side seperti PHP, ASP dan lain sebagainya. ). Untuk membuat form digunakan tag awal <form> dan tag penutup </form>.
Sintaks penulisannya :
<form action=”url” method=”get|post”>
</form>
3.1 Atribut Tag <form> Atribut Penjelasan
Method
Metode pengiriman data ke tujuan, yaitu:
GET : mengirimkan data pada server dengan cara meletakkan data pada bagian akhir URL
POST : mengirimkan datanya secara terpisah.
Action
Menentukan lokasi dari script yang akan memproses data dari form
3.2 Jenis Masukan dalam Form
Jenis masukan dalam satu formulir dibedakan menjadi :
Text, digunakan untuk mengisi suatu nilai dapat berupa teks atau angka.
Radio, elemen isian berupa pilihan dimana hanya satu pilihan yang dapat dilakukan.
Checkbox, elemen yang menyediakan beberapa pilihan bisa lebih dari satu.
List, elemen pilihan dalam bentuk daftar.
Button, elemen berupa tombol untuk melakukan suatu proses.
Submit, elemen tombol yang digunakan untuk memanggil url.
Reset, elemen tombol yang digunakan untuk mengembalikan kondisi awal.
Image, digunakan sebagai pengganti button, berupa gambar yang dapat melakukan proses.
Textarea, elemen yang dapat menampung kumpulan teks ketikan dari user.
File, elemen button yang dapat memanggil file atau gambar dari storage.
Password, elemen berupa teks yang khusus digunakan untuk mengisi password.
3.2.1 Tag <TEXTAREA>
Tag <TEXTAREA> digunakan untuk membuat sebuah kotak teks multi baris. Tag ini mempunyai beberapa atribut, yaitu :
3.2.2 Tag <SELECT>
Tag <SELECT> digunakan untuk membuat sebuah daftar pilihan. Tag ini memiliki beberapa atribut, yaitu :
latihan9.html
<!DOCTYPE html >
<html>
<head >
<title>Contoh Tag Textarea dan Tag Select</title> </head >
<body>
<table width="100%" >
<tr>
<td>Pilih Jenis Kendaraan </td>
<td><select name="motor">
<option value="yamaha">Yamaha</option >
<option value="honda">Honda</option >
<option value="suzuki">Suzuki</option></select></td> </tr >
<tr>
<td> Alamat </td>
<td><textarea name="alamat" cols="55" rows="5"></textarea></td> </tr >
</table >
</body>
</html >
3.2.3 Tag <INPUT>
Tag <INPUT> digunakan untuk membuat komponen-komponen yang digunakan untuk meminta informasi dari user, misalnya kotak teks, kotak pilihan, tombol dan lain-lain. Tag ini tidak memerlukan tag penutup. Tag ini mempunyai beberapa atribut, yaitu :
Tipe input yang dapat dibuat adalah :
Text, digunakan untuk membuat kotak teks
Password, digunakan untuk membuat kotak teks, tetapi semua karakter akan ditampilkan dengan tanda *.
Check Box, digunakan untuk membuat suatu daftar pilihan yang dapat dipilih lebih dari satu.
Radio, digunakan untuk membuat suatu daftar pilihan yang hanya dapat dipilih satu saja.
File, digunakan untuk memanggil file atau gambar dari storage.
Hidden, Digunkan untuk mengirim data ke suatu aplikasi yang tidak dingginkan untuk dilihat oleh browser.
Reset, digunakan untuk membuat tombol yang fungsinya untuk menghapus semua isian form yang telah diberikan.
Submit, digunakan untuk membuat tombol yang fungsinya untuk mengirimkan data form agar diolah.
latihan10.html
<!DOCTYPE html >
<html>
<head >
<title>Input Data Berita</title>
</head >
<body text="#0000FF" >
<h2>Tambah Berita</h2>
<form method="post" action="#" enctype="multipart/form -data">
<table width="100%">
<tr>
<td>Judul</td>
<td> : <input type="text" name="judul" size="60"/></td>
</tr>
<tr>
<td>Kategori</td>
<td> :<select name="kategori" >
<option value="kategori_berita" selected>- Pilih Kategori </option>
<option value="komputer">Komputer
<option value="ekonomi">Ekonomi
<option value="pendidikan">Pendidikan
</select>
</td>
</tr>
<tr>
<td>Headline</td>
<td> : <input type="radio" name="headline" value="Y" checked/>Y
<input type="radio" name="headline" value="N"/> N</td>
</tr>
<tr>
<td>Isi Berita</td>
<td> : <textarea name="isi_berita" cols="45" rows="6"></textarea>
</td>
</tr>
<tr>
<td>Gambar</td>
<td> : <input type="file" name="fupload" size="40"></td>
</tr>
<tr>
<td colspan=2>
<input type="submit" value="Simpan"/>
<input type="reset" value="Reset"/>
</td>
</tr>
</table>
</form>
</body>
</html>
4. Elemen Label, Fieldset dan Legend
Elemen label memberikan fasilitas untuk menambahkan teks pada elemen masukan form. Elemen ini diisikan dengan deskripsi dari elemen masukan yang ingin ditambahkan dan harus memiliki atribut for. Atribut for pada elemen label berisikan nilai yang sama dengan atribut id pada elemen masukan form. Pengisian nilai yang sama akan mengikatkan elemen label dengan elemen masukan sehingga pengguna dapat langsung mengisikan nilai dengan melakukan klik teks yang dihasilkan oleh elemen label. Elemen fieldset merupakan elemen yang digunakan untuk membungkus beberapa elemen masukan form, untuk menandakan bahwa elemen-elemen tersebut merupakan elemen masukan yang berada pada satu grup yang sama, atau saling berhubungan. Sedangkan Elemen legend digunakan untuk memberikan judul pada sebuah fieldset.
Sintaks penulisannya :
<fieldset>
<legend>Judul</legend>
</fieldset>
latihan11.html
<!DOCTYPE html >
<html> <head >
<title>Penggunaan Label, Fieldset dan Legend</title>
</head >
<body>
<form action="#" method="post">
<fieldset>
<legend>Form Login</legend>
<label for="username">Username</label>
<input type="text" name="username" id="username"/>
<label for="password">Password</label>
<input type="password" name="password" id="password"/>
<input type="submit" name="submit" value="Login"/>
</fieldset>
</form>
</body>
</html>
REFERENSI
Sidik, Betha dan Pohan, I. Husni. (2012). Pemrograman Web dengan HTML disertai lebih dari 200 contoh program beserta tampilan grafisnya. Bandung: Informatika.
Arief, M. R. (2011). Pemrograman Web Dinamis menggunakan PHP dan MySQL. Yogyakarta: Andi Offset.
Ahlihi Masruro, S.Kom. Modul Pemrograman Web. STMIK AMIKOM Yogyakarta
Pertemuan 3
PERTEMUAN 3
3.1. Singkatan (Akronim)
Untuk menuliskan suatu dokumen atau beberapa istilah kita terkadang menggunakan singkatan (akronim). Untuk menuliskan singkatan, ada tag html yang di gunakan yaitu Tag <abbr> dan Tag <acronym). Tag tersebut digunakan untuk menyimpan data kepanjangan dari suatu singkatan yang ditampilkan dalam dokumen tersebut. Atribut yang digunakan yaitu title.
Sintaks penulisannya:
<abbr title=“kepanjangannya”>singkatan</abbr>
<acronym title=“kepanjangannya”>singkatan</acronym>
Ketika menggunakan tag di atas, maka pada saat mouse pointer kita berada di atas singkatan tersebut yang ditampilkan di browser web, maka kepanjangan dari singkatan tersebut akan di tampilkan mengambang di atasnya.
akronim.html
<html>
<head>
<title>Contoh Penggunaan Akronim</title>
</head>
<body>
<abbr title="World Wide Web">WWW</abbr> adalah halaman-halaman website yang dapat saling terkoneksi satu dengan lainnya (hyperlink)yang membentuk samudra belantara informasi.
<br>
<acronym title="Hyper Text Transfer Protocol">HTTP</acronym> adalah protokol yang dipergunakan untuk mentransfer dokumen dalam World Wide Web (WWW).
</body>
</html>
3.2. Address
Alamat (address) merupakan salah satu elemen yang umum di dalam suatu dokumen. Untuk membuat alamat pada dokumen html di sediakan secara khusus yaitu Tag <address>. Dengan adanya tag ini maka penulisan alamat dapat di standarkan. Secara default tag <address> akan menampilkan teks di sebalah kiri, untuk di sebelah kanan menggunakan atribut dir=”rtl”.
Sintaks penulisannya :
<address>alamat anda</address>
address.html
<html>
<head>
<title>Contoh Penggunaan Address</title>
</head>
<body>
<address>
STMIK AMIKOM Yogykarta<br />
Kampus Terpadu: Jl.Ring Road Utara<br />
Condong Catur<br />
Sleman<br />
Yogyakarta
</address>
</body>
</html>
3.3. Arah Teks
Secara lazim untuk teks kita membacanya dari kiri ke kanan (left to right – ltr). Di html ada tag yang digunakan untuk mengubah penulisan teks dari kanan ke kiri (right to left – rtl). Tag yang digunakan yaitu Tag <bdo> bidirectional override merupakan tag yang digunakan untuk mendefinisikan arah penulisan teks. Atribut yang digunakan dir.
Sintaks penulisannya :
<bdo dir="rtl">Teks yang mau di arahkan</bdo>
arah_teks.html
<html>
<head>
<title>Contoh Penggunaan BDO</title>
</head>
<body>
<bdo dir="rtl">
STMIK AMIKOM Yogykarta<br />
Jurusan :<br />
S2 Megister Teknik Informatika<br />
S1 Teknik Informatika<br />
S1 Sistem Informasi<br />
D3 Teknik Informatika<br />
D3 Manajemen Informatika
</bdo>
</body>
</html>
3.4. Teks yang Disisipkan atau Dihapus
Dalam menulis artikel web kita bisa mengkoreksi teks yang di tuliskan dengan menggunakan tag <ins> dan tag <del>. Tag tersebut kita bisa megkoreksi hasil pekerjaan dengan menyisipkan atau menghapus. Tag <ins> memberikan tanda untuk sisipan dengan membuat teks di garis bawah. Sedangkan Tag <del> bukan menghapus teks tetapi mengkoreksi pekerjaan dengan memberikan garis tengah horizontal pada teks yang dihapus.
Sintaks penulisannya :
Satu tahun adalah <del>lima belas</del> <ins>dua belas</ins> bulan
teks_sisip_hapus.html
<html>
<head>
<title>Contoh Penggunaan INS & DEL</title>
</head>
<body>
Budi membeli perlengkapan kuliah diantarnya sebagai berikut: <br>
1. Buku tulis Rp.10.000<br>
2. ballpoint pen Rp.15000<br>
3. stabilo Rp.5000 <br>
Total pembeliannya adalah <del>40.000</del> <ins>30.000</ins>
</body>
</html>
3.5. Link HTML
Dokumen HTML menggunakan hyperlink (anchor) untuk menghubungkan kepada dokumen lain. Dokumen ini bisa berupa teks dan atau gambar yang saling menghubungkan menuju ke dokumen atau bagian lain dalam suatu dokumen. Browser web akan menyorot teks atau gambar yang di
identifikasi sebagai link dengan warna atau garis bawah untuk menunjukkan bahwa itu adalah hyperteks link sering di singkat hyperlink atau link saja.
3.5.1. Tag Anchor
Tag <a> untuk membuat suatu link kepada dokumen lain dalam web. Atribut pada tag <a> diantaranya: atribut href="uri" untuk mendefinisikan lokasi link, atribut name="name" untuk mendefinisikan nama link, dan atribut target="_blank"|"_parent"|"_top"|"_self" untuk _blank akan membuka pada window baru, _parent/_top akan keluar dari frame, _self akan tetap di window browser.
Sintaks penulisannya :
<a href="http://www.amikom.ac.id" target="_blank" name="web amikom">Link web Amikom </a>
Link html terdapat 3 jenis yaitu diantaranya sebagai berikut:
3.5.1.1. Link Relatif
Dibuat apabila anda membuat suatu link pada page anda ke page lain pada komputer yang sama, tidak memerlukan menggunakan alamat internet yang lengkap. Jika kedua page pada direktori yang sama, anda dapat menuliskan nama file html sebagai berikut:
link_relatif.html
<html>
<head>
<title>Contoh Penggunaan Link Relatif</title>
</head>
<body>
Anda ingin melihat contoh penggunaan akronim, silahkan klik <a href="akronim.html">link berikut</a>.
</body>
</html>
3.5.1.2. Link Absolut
Dibuat apabila anda membuat link ke page web lain yang berada pada web site lain di internet. Dalam hal ini anda harus menuliskan alamat internet secara lengkap. Berikut adalah contohnya:
link_absolut.html
<html>
<head>
<title>Contoh Penggunaan Link Absolut</title>
</head>
<body>
Anda ingin mengunjungi situs resmi amikom. Silahkan klik <a href="http://www.amikom.ac.id">link berikut</a>.
</body>
</html>
3.5.1.3. Link ke Bagian Lain dalam Dokumen
Link jenis ini dibuat apabila untuk dokumen yang panjang sekali, sehingga apabila di tampilkan dalam browser web akan mengharuskan kita melakukan scroll layar berulang-ulang. Navigasi untuk penelusuran dokumen dapat dimudahkan dengan membuat link antarbagian, dengan menandai setiap bagian tersebut dengan memberinya nama. Sehingga pada beberapa tempat di dalam dokumen akan ada bagian yang bernama, dan dibagian lainnya dapat diletakkan link untuk menuju bagian-bagian tersebut.
Sintaks penulisannya :
<a href="#tujuan">Link asal</a>
Artikel bebas
.
.
.
<a name="tujuan">Posisi tujuan</a>
Artikel bebas
.
.
.
link_dalam_dokumen.html
<html>
<head>
<title>Contoh Penggunaan Link Dalam Dokumen</title>
</head>
<body>
<p>
<a name="top">
<a href="#Bab4">
Lihat Bab 4.
</a>
</a>
</p>
<h2>Bab 1</h2>
<p>Bab 1 adalah menjelaskan bla bla bla.</p>
<h2>Bab 2</h2>
<p>Bab 2 adalah menjelaskan bla bla bla.</p>
<h2>Bab 3</h2>
<p>Bab 3 adalah menjelaskan bla bla bla.</p>
<a name="Bab4">
<h2>Bab 4</h2>
</a>
<p>
Bab 4 ini menunjukkan tujuan dari link dalam satu halaman.</p>
<h2>Bab 5</h2>
<p>
Bab 5 adalah menjelaskan bla bla bla. </p>
<a href="#top">Kembali ke atas</a>
</body>
</html
3.5.2. Link Mailto
Mailto digunakan untuk membuat link pada suatu pesan mail (tidak akan bisa bekerja jika mail client tidak terpasang).
link_mailto.html
<html>
<head>
<title>Contoh Penggunaan Link Mailto</title>
</head>
<body>
Anda ingin mengirim tugas pemrograman web bisa melalui <a href="mailto:haryoko@amikom.ac.id">email berikut</a>.
</body>
</html>
3.6. Tag Marquee
Marquee ini bisa di buat dengan menggunakan tag <marquee>...</marquee>.
Atribut yang sering di gunakan adalah :
bgcolor="warna"
Untuk mengatur warna background text.
direction="left/right/up/down"
Mengatur arah gerakan teks. behavior="scroll/slide/alternate"
Untuk mengatur perilaku gerakan Scroll adalan suatu teks bergerak berputar. Slide adalah suatu teks bergerak sekali lalu berhenti. Alternate adalah suatu teks bergerak dari kiri kekanan lalu balik lagi.
title='pesan"
Pesan akan muncul saat mouse berada di atas teks. scrollmount="angka"
Mengatur kecepatan gerakan dalam pixel, semakin besar angka semakin cepat pula gerakan text itu.
scrolldelay="angka"
Untuk mengatur waktu tunda gerakan dalam detik. loop="angka|-1|infinite"
Untuk mengatur jumlah loop. width="lebar"
Mengatur lebar blok teks dalam pixel atau persen.
3.1. Singkatan (Akronim)
Untuk menuliskan suatu dokumen atau beberapa istilah kita terkadang menggunakan singkatan (akronim). Untuk menuliskan singkatan, ada tag html yang di gunakan yaitu Tag <abbr> dan Tag <acronym). Tag tersebut digunakan untuk menyimpan data kepanjangan dari suatu singkatan yang ditampilkan dalam dokumen tersebut. Atribut yang digunakan yaitu title.
Sintaks penulisannya:
<abbr title=“kepanjangannya”>singkatan</abbr>
<acronym title=“kepanjangannya”>singkatan</acronym>
Ketika menggunakan tag di atas, maka pada saat mouse pointer kita berada di atas singkatan tersebut yang ditampilkan di browser web, maka kepanjangan dari singkatan tersebut akan di tampilkan mengambang di atasnya.
akronim.html
<html>
<head>
<title>Contoh Penggunaan Akronim</title>
</head>
<body>
<abbr title="World Wide Web">WWW</abbr> adalah halaman-halaman website yang dapat saling terkoneksi satu dengan lainnya (hyperlink)yang membentuk samudra belantara informasi.
<br>
<acronym title="Hyper Text Transfer Protocol">HTTP</acronym> adalah protokol yang dipergunakan untuk mentransfer dokumen dalam World Wide Web (WWW).
</body>
</html>
3.2. Address
Alamat (address) merupakan salah satu elemen yang umum di dalam suatu dokumen. Untuk membuat alamat pada dokumen html di sediakan secara khusus yaitu Tag <address>. Dengan adanya tag ini maka penulisan alamat dapat di standarkan. Secara default tag <address> akan menampilkan teks di sebalah kiri, untuk di sebelah kanan menggunakan atribut dir=”rtl”.
Sintaks penulisannya :
<address>alamat anda</address>
address.html
<html>
<head>
<title>Contoh Penggunaan Address</title>
</head>
<body>
<address>
STMIK AMIKOM Yogykarta<br />
Kampus Terpadu: Jl.Ring Road Utara<br />
Condong Catur<br />
Sleman<br />
Yogyakarta
</address>
</body>
</html>
3.3. Arah Teks
Secara lazim untuk teks kita membacanya dari kiri ke kanan (left to right – ltr). Di html ada tag yang digunakan untuk mengubah penulisan teks dari kanan ke kiri (right to left – rtl). Tag yang digunakan yaitu Tag <bdo> bidirectional override merupakan tag yang digunakan untuk mendefinisikan arah penulisan teks. Atribut yang digunakan dir.
Sintaks penulisannya :
<bdo dir="rtl">Teks yang mau di arahkan</bdo>
arah_teks.html
<html>
<head>
<title>Contoh Penggunaan BDO</title>
</head>
<body>
<bdo dir="rtl">
STMIK AMIKOM Yogykarta<br />
Jurusan :<br />
S2 Megister Teknik Informatika<br />
S1 Teknik Informatika<br />
S1 Sistem Informasi<br />
D3 Teknik Informatika<br />
D3 Manajemen Informatika
</bdo>
</body>
</html>
3.4. Teks yang Disisipkan atau Dihapus
Dalam menulis artikel web kita bisa mengkoreksi teks yang di tuliskan dengan menggunakan tag <ins> dan tag <del>. Tag tersebut kita bisa megkoreksi hasil pekerjaan dengan menyisipkan atau menghapus. Tag <ins> memberikan tanda untuk sisipan dengan membuat teks di garis bawah. Sedangkan Tag <del> bukan menghapus teks tetapi mengkoreksi pekerjaan dengan memberikan garis tengah horizontal pada teks yang dihapus.
Sintaks penulisannya :
Satu tahun adalah <del>lima belas</del> <ins>dua belas</ins> bulan
teks_sisip_hapus.html
<html>
<head>
<title>Contoh Penggunaan INS & DEL</title>
</head>
<body>
Budi membeli perlengkapan kuliah diantarnya sebagai berikut: <br>
1. Buku tulis Rp.10.000<br>
2. ballpoint pen Rp.15000<br>
3. stabilo Rp.5000 <br>
Total pembeliannya adalah <del>40.000</del> <ins>30.000</ins>
</body>
</html>
3.5. Link HTML
Dokumen HTML menggunakan hyperlink (anchor) untuk menghubungkan kepada dokumen lain. Dokumen ini bisa berupa teks dan atau gambar yang saling menghubungkan menuju ke dokumen atau bagian lain dalam suatu dokumen. Browser web akan menyorot teks atau gambar yang di
identifikasi sebagai link dengan warna atau garis bawah untuk menunjukkan bahwa itu adalah hyperteks link sering di singkat hyperlink atau link saja.
3.5.1. Tag Anchor
Tag <a> untuk membuat suatu link kepada dokumen lain dalam web. Atribut pada tag <a> diantaranya: atribut href="uri" untuk mendefinisikan lokasi link, atribut name="name" untuk mendefinisikan nama link, dan atribut target="_blank"|"_parent"|"_top"|"_self" untuk _blank akan membuka pada window baru, _parent/_top akan keluar dari frame, _self akan tetap di window browser.
Sintaks penulisannya :
<a href="http://www.amikom.ac.id" target="_blank" name="web amikom">Link web Amikom </a>
Link html terdapat 3 jenis yaitu diantaranya sebagai berikut:
3.5.1.1. Link Relatif
Dibuat apabila anda membuat suatu link pada page anda ke page lain pada komputer yang sama, tidak memerlukan menggunakan alamat internet yang lengkap. Jika kedua page pada direktori yang sama, anda dapat menuliskan nama file html sebagai berikut:
link_relatif.html
<html>
<head>
<title>Contoh Penggunaan Link Relatif</title>
</head>
<body>
Anda ingin melihat contoh penggunaan akronim, silahkan klik <a href="akronim.html">link berikut</a>.
</body>
</html>
3.5.1.2. Link Absolut
Dibuat apabila anda membuat link ke page web lain yang berada pada web site lain di internet. Dalam hal ini anda harus menuliskan alamat internet secara lengkap. Berikut adalah contohnya:
link_absolut.html
<html>
<head>
<title>Contoh Penggunaan Link Absolut</title>
</head>
<body>
Anda ingin mengunjungi situs resmi amikom. Silahkan klik <a href="http://www.amikom.ac.id">link berikut</a>.
</body>
</html>
3.5.1.3. Link ke Bagian Lain dalam Dokumen
Link jenis ini dibuat apabila untuk dokumen yang panjang sekali, sehingga apabila di tampilkan dalam browser web akan mengharuskan kita melakukan scroll layar berulang-ulang. Navigasi untuk penelusuran dokumen dapat dimudahkan dengan membuat link antarbagian, dengan menandai setiap bagian tersebut dengan memberinya nama. Sehingga pada beberapa tempat di dalam dokumen akan ada bagian yang bernama, dan dibagian lainnya dapat diletakkan link untuk menuju bagian-bagian tersebut.
Sintaks penulisannya :
<a href="#tujuan">Link asal</a>
Artikel bebas
.
.
.
<a name="tujuan">Posisi tujuan</a>
Artikel bebas
.
.
.
link_dalam_dokumen.html
<html>
<head>
<title>Contoh Penggunaan Link Dalam Dokumen</title>
</head>
<body>
<p>
<a name="top">
<a href="#Bab4">
Lihat Bab 4.
</a>
</a>
</p>
<h2>Bab 1</h2>
<p>Bab 1 adalah menjelaskan bla bla bla.</p>
<h2>Bab 2</h2>
<p>Bab 2 adalah menjelaskan bla bla bla.</p>
<h2>Bab 3</h2>
<p>Bab 3 adalah menjelaskan bla bla bla.</p>
<a name="Bab4">
<h2>Bab 4</h2>
</a>
<p>
Bab 4 ini menunjukkan tujuan dari link dalam satu halaman.</p>
<h2>Bab 5</h2>
<p>
Bab 5 adalah menjelaskan bla bla bla. </p>
<a href="#top">Kembali ke atas</a>
</body>
</html
3.5.2. Link Mailto
Mailto digunakan untuk membuat link pada suatu pesan mail (tidak akan bisa bekerja jika mail client tidak terpasang).
link_mailto.html
<html>
<head>
<title>Contoh Penggunaan Link Mailto</title>
</head>
<body>
Anda ingin mengirim tugas pemrograman web bisa melalui <a href="mailto:haryoko@amikom.ac.id">email berikut</a>.
</body>
</html>
3.6. Tag Marquee
Marquee ini bisa di buat dengan menggunakan tag <marquee>...</marquee>.
Atribut yang sering di gunakan adalah :
bgcolor="warna"
Untuk mengatur warna background text.
direction="left/right/up/down"
Mengatur arah gerakan teks. behavior="scroll/slide/alternate"
Untuk mengatur perilaku gerakan Scroll adalan suatu teks bergerak berputar. Slide adalah suatu teks bergerak sekali lalu berhenti. Alternate adalah suatu teks bergerak dari kiri kekanan lalu balik lagi.
title='pesan"
Pesan akan muncul saat mouse berada di atas teks. scrollmount="angka"
Mengatur kecepatan gerakan dalam pixel, semakin besar angka semakin cepat pula gerakan text itu.
scrolldelay="angka"
Untuk mengatur waktu tunda gerakan dalam detik. loop="angka|-1|infinite"
Untuk mengatur jumlah loop. width="lebar"
Mengatur lebar blok teks dalam pixel atau persen.
Pengertian Html Basic
HTML digunakan untuk membangun suatu halaman web. Sekalipun banyak orang
menyebutnya sebagai suatu bahasa pemrograman, HTML sama sekali bukan bahasa
pemrograman, tapi merupakan bahasa markup (penandaan), terhadap sebuah dokumen
teks. Simbol markup yang digunakan oleh HTML ditandai dengan tanda lebih kecil ( < )
dan tanda lebih besar ( > ) yang biasa disebut tag.
1. Dokumen dan Penamaan HTML
Sebuah file HTML merupakan file teks biasa yang mengandung tag-tag HTML. Karena
merupakan file teks, maka HTML dapat dibuat dengan menggunakan teks editor yang
sederhana, misalnya notepad. Dapat juga menggunakan HTML editor yang bersifat
WYSIWYG ( What You See Is What You Get ), misalnya Frontpage atau Dreamwaver.
Untuk menandai bahwa sebuah file teks merupakan file HTML, maka ciri yang paling
nampak jelas adalah ekstensi filenya, yaitu .htm atau .html. Dalam pemberian nama
sebuah dokumen bersifat case sensitive sehingga dokumen dengan nama a.html akan
berbeda dengan dokumen A.html.
2. Elemen dan Tag HTML
Elemen HTML yaitu komponen penyusun terkecil dari sebuah dokumen HTML. Untuk
menandainya. Elemen dapat berupa teks murni, atau bukan teks, atau keduanya.
Untuk menandai sebuah elemen dalam suatu dokumen HTML digunakan tag. Tag HTML
terdiri dari sebuah simbol lebih kecil ( < ) dan dan lebih besar ( > ).
Nama elemen ditunjukkan oleh nama dari tagnya. Suatu elemen biasanya ditandai dengan
pasangan tag, walaupun ada beberapa nama elemen yang ditandai dengan satu tag tanpa
harus berpasangan. Diantaranya:
• Image ( <img /> )
• Ganti Baris – Break ( <br /> )
• Horizontal Rule ( <hr /> )
1
• Input Field ( <input /> )
Tag dapat mempunyai atribut. Atribut mendefinisikan sesuatu tentang tag tersebut. Atribut
digunakan untuk mengubah default pemformatan dokumen dengan tag yang
bersangkutan.
Struktur Element
<p align="center"> ..... </p>
Struktur Dasar H T ML
<html>
<head>
....informasi dokumen....
</head>
<body>
....konten yang di tampilkan
pada halaman browser.....
</body>
</html>
3. Penggunaan Tag dan Atributnya
Dalam pembuatan dokumen HTML penulisan elemen yang diawali dan diakhiri tanda tag
HTML, memiliki syarat penulisan yaitu:
• Tag HTML diapit dengan dua karakter kurung sudut ( < dan > )
• Tag HTML secara normal selalu berpasangan misal (<i>...</i>)
• Tag pertama dalam suatu pasangan adalah tag awal, dan tag yang kedua
merupakan tag akhir.
2
Name Value
Atribut
Content
Tag Pembuka Tag Penutup
Element
• Tag html tidak case sensitive. Ini artinya <b> sama dengan <B>
• Jika dalam suatu tag terdapat tag lain, maka penulisan tag akhir tidak boleh
bersilang dan harus berurutan. Misalnya <b><I>..Tebal dan Miring..</I></b>
-. Tag Dasar HTML
4.1 HTML
Merupakan tag dasar yang mendifinisikan bahwa dokumen adalah dokumen html. Tag ini
merupakan suatu keharusan bagi pemrogram web untuk menuliskannya sebagai tag
pertama dalam dokumen html. Penulisan tag seperti berikut ini :
<html> pada awal dokumen dan </html> pada akhir dokumen
4.2 Head
Bagian Head sebenarnya tidak harus ada pada dokumen HTML, tetapi pemakaian head
yang benar akan meningkatkan kegunaan suatu dokumen HTML. Isi bagian head –
kecuali judul dokumen – tidak akan terlihat oleh pembaca dokumen tersebut. Penulisan
tag seperti berikut ini :
<head> di awal setelah <html> dan </head> di akhir section head.
Elemen-elemen pada bagian head akan mengerjakan tugas-tugas sebagai berikut :
• Menyediakan judul dokumen
• Menjembatani hubungan antar dokumen
• Memberitahu browser untuk membuat form pencarian
• Menyediakan metode untuk mengirim pesan ke tipe browser
Elemen yang mungkin terdapat pada bagian head :
• Tag <title>, digunakan untuk memberi judul dokumen. Penggunaannya adalah
sebagai berikut :
<title>Judul Dokumen</title>
• Tag <base>, digunakan untuk menentukan basis URL sebuah dokumen. Contoh
penggunaannya adalah sebagai berikut berikut :
<base href="//www.alamat.com/direktori" />
3
• Tag <link>, digunakan untuk menunjukkan relasi antar dokumen HTML.
Tag ini mempunyai beberapa atribut :
Atribut Fungsi
href Menunjuk pada URL / dokumen lain
rel Mendefinisikan relasi terhadap sebuah dokumendan dokumen lain
yang berisi informasi tentang personil yang member kontribusi
terhadap dokumen tersebut
rev Mendefinisikan relasi sebuah dokumen HTML dengan dokumen lain
type Menentukan tipe dan paramenter dari relasi
Contoh penggunaannya adalah sebagai berikut:
<link rel="stylesheet" href="http://alamat.com/style.css" type="text/css" />
• Tag <meta>, digunakan untuk mendefinisikan informasi-informasi di luar HTML
Informasi meta dapat digunakan oleh browser untuk menjalankan suatu aktivitas
yang belum didukung oleh HTML.
Tag <meta> mempunyai atribut :
Atribut Fungsi
http-equiv Mendefinisikan properti dari elemen
name Menyediakan deskripsi tambahan dari elemen
url Mendefinisikan target dokumen dari sebuah properti
content Menyediakan nilai respon dari properti
Untuk lebih memperjelas penggunaan atribut tag <META> perhatikan contoh
berikut ini :
Perintah diatas akan diterjemahkan oleh browser sebagai “tunggu 60 detik,
kemudian panggil dokumen baru pada www.alamat.com". Jika atribut URL tidak
disertakan, maka halaman itu sendiri yang akan dipanggil, jadi setara dengan
mengklik tombol Refresh / Reload pada browser.
Penggunaan elemen <meta> yang paling populer adalah penggunaan properti
Keyword dan Description. Kedua properti ini sangat berguna untuk membantu kerja
search engine. Biasanya search engine akan menggunakan teks yang disebutkan
4
<meta http-equiv="refresh" content="60" url="www.alamat.com" />
pada properti Keyword untuk mengindeks dokumen dan menggunakan teks yang
terdapat pada properti Description untuk mendeskripsikan indeks tersebut.
4.3 BODY
Bagian BODY merupakan isi dari dokumen HTML. Semua informasi yang akan
ditampilkan, mulai dari teks, gambar, sound, dan lain-lain, akan ditempatkan di bagian ini.
Seperti telah disebutkan di atas, bagian BODY diawali oleh tag <body> dan ditutup
</body>.
Atributnya:
Atribut Fungsi
alink Menunjukkan warna link aktif
background Merujuk URL atau direktori dari gambar yang digunakan sebagai
latar belakang
bgcolor Menentukan warna latar belakang
bgproperties Jika nilai atribut diisi “FIXED”, maka gambar latar belakang tidak ikut
tergulung
leftmargin Batas kiri dokumen
link Menentukan warna link yang belum dikunjungi
text Menentukan warna teks
topmargin Menentukan batas atas
vlink Menentukan warna link yang telah dikunjungi
01.latihan_01.html
<html>
<head>
<title>Penggunaan BODY</title>
</head>
<body bgcolor="silver" text="blue" vlink="#ff0000" link="green">
Ini adalah contoh penggunaan body.
Dan ini adalah sebuah <a href="">link</a>.
</body>
</html>
5
Warna Nilai
Black #000000
Maroon #800000
Green #008000
Olive #808000
Navy #000080
Purple #800080
Teal #008080
Gray #808080
Silver #c0c0c0
Red #ff0000
Lime #00ff00
Yellow #ffff00
Blue #0000ff
Fuchsia #ff00ff
Aqua #00ffff
White #ffffff
Table Warna
6
Title
Body
4.4 Memberikan Komentar
Untuk mempermudah pembacaan kembali kode-kode HTML, kadang-kadang
ditambahkan komentar ke dalam sebuah dokumen. Agar komentar tidak dapat dibaca
pada browser, maka harus digunakan tanda khusus, yaitu <!-- dan diakhiri dengan tanda
-->.
01.latihan_0 2 .htm l
<html>
<head>
<title>Penggunaan Komentar</title>
</head>
<body>
<!-- ini merupakan suatu komentar -->
Selamat belajar html<br>. Semoga sukses!
</body>
</html>
4.5 Memformat Dokumen HTML
Dalam HTML terdapat beberapa tag yang dapat digunakan untuk memformat dokumen.
Tag-tag tersebut diantaranya adalah :
• Tag <h#>, membuat heading sebuah dokumen. Nilai n berkisar antara 1 hingga 6.
01.latihan_0 3 .htm l
<html>
<head>
<title>Latihan Heading</title>
</head>
<body>
<h1>Ini Heading 1</h1>
<h2>Ini Heading 2</h2>
<h3>Ini Heading 3</h3>
<h4>Ini Heading 4</h4>
<h5>Ini Heading 5</h5>
<h6>Ini Heading 6</h6>
</body>
</html>
• Tag <br />, membuat baris baru, tidak memerlukan penutup </br>
• Tag <p>, memulai paragaraf baru.
• Tag <hr />, membuat garis batas horizontal, tidak memerlukan penutup </hr>
7
01.latihan_0 4 .htm l
<html>
<head>
<title>Cerita Ramayana</title>
</head>
<body>
Cerita wayang Ramayana, di Kerajaan Alengka Diraja
<br>Rahwana membuat geger karena menculik Dewi Sinta
<p>Anoman, Si Kera Putih
ditugaskan Tukul Arwana untuk menjemput Sinta
</p>
Tukul Arwana tidak sempat menjeputnya, karena sedang
mengisi acara di stasiun TV Swasta
<hr />
Rama Tukul Arwana
<hr />
<br />
<h1>Bab I HTML</h1>
Ini adalah isi Bab I
<h2>1.1 Subbab HTML</h2>
Ini adalah isi Subbab 1.1
<h3>1.1.1 Sub-Subbab HTML</h3>
Ini adalah isi Sub Subbab 1.1.1
</body>
</html>
8
• Tag <pre>, membuat tampilan dokumen HTML pada browser sama dengan
tampilan pada teks editor. Dengan tag <pre>, maka tag <p> dan tag <br /> jadi
tidak diperlukan lagi.
01.latihan_0 5 .htm l
<html>
<head>
<title>Latihan PRE</title>
</head>
<body>
<pre>
Tampilan ini sma dengan tampilan di teks editor.
Klasemen
Team Main Menang Seri Kalah
=================================================
Team A 3 2 1 0
Team B 3 2 0 1
Team c 3 1 1 1
=================================================
Kode program :
For I = 1 to 10
For J = 1 to 5
A(I,J)=I*J
Next
Next
</pre>
</body>
</html>
9
• Tag <center>, Teks rata tengah
• Tag <ul> dan <ol>
Pemformat dokumenlain yang akan sangat banyak berguna adalah LIST (daftar).
Ada dua macam daftar, yaitu ORDERED lists (ol) dan UNORDERED lists (ul).
01.latihan_0 6 .htm l
<html>
<head>
<title>Latihan LIST</title>
</head>
<body>
<p>Keluarga Pandawa</p>
<ol>
<li>Yudhistira</li>
<li>Bima</li>
<li>Arjuna</li>
<li>Nakula</li>
<li>Sadewa</li>
</ol>
<p>Jenis Musik</p>
<ul>
<li>Campur Sari</li>
<li>Dangdut</li>
<li>Jazz</li>
<li>Pop</li>
<li>Rock</li>
</ul>
</body>
</html>
10
4.6 Memformat Karakter
Melakukan format terhadap karakter yang ditampilkan akan sangat berguna untuk
membuat sebuah dokumen menjadi menarik dan informatif.
4.6.1 Logical Format
Logical format akan menerapkan layout dokumen secara logis dan terstruktur. Semua tag
ini memerlukan tag penutup. Tag-tag yang termasuk logical format adalah sebagai
berikut :
• <cite>, digunakan untuk menandai suatu kutipan (citation).
• <code>, digunakan untuk menampilkan kode-kode pemrograman, misalnya bahasa
C.
• <em>, digunakan untuk menandai suatu teks yang ditekankan (cetak miring) oleh
penulis.
• <kbd>, digunakan untuk menandai suatu teks yang harus dimasukkan oleh user
melalui keyboard.
• <samp>, digunakan untuk menandai suatu teks yang dimaksudkan sebagai contoh.
• <strong>, digunakan untuk menandai bagian yang penting (cetak tebal) dari suatu
teks.
• <var>, digunakan untuk menampilkan nama variabel.
• <dfn>, digunakan untuk menandai sebuah subdefinisidari daftar definisi.
4.6.2 Physical Format
Physical format adalah format terhadap fisik suatu font. Semua tag ini memerlukan tag
penutup. Tag-tag yang termasuk physical format adalah sebagai berikut :
• <b>, untuk menampilkan huruf tebal.
• <i>, untuk menampilkan huruf miring.
• <u>, untuk menampilkan garis bawah pada teks. <tt>, untuk menampilkan huruf
seperti huruf mesin ketik.
• <strike>, untuk menampilkan garis horizontal pada bagian tengah huruf.
• <big>, untuk menampilkan ukuran huruf yang lebih besar.
• <small>, untuk menampilkan ukuran huruf yang lebih kecil.
• <sub>, untuk menampilkan subscript.
• <sup>, untuk menampilkan superscript.
11
01.latihan_0 7 .htm l
<html>
<head>
<title>Memformat Karakter</title>
</head>
<body>
<b>Kalimat ini akan dicetak tebal</b><br>
<i>Kalimat ini akan dicetak miring</i><br>
<u>Kalimat ini akan bergaris bawah</u><br>
<strike>Kalimat ini akan bergaris tengah</strike>
</body>
</html>
4.6.3 Tag Font
Tag font digunakan untuk mengatur jenis, ukuran dan warna font. Contoh penggunaannya:
01.latihan_0 8 .htm l
<html>
<head>
<title>Memformat FONT</title>
</head>
<body>
<font face="arial" size="3" color="#ff0000">
Jenis font ini adalah Arial, berwarna merah, ukurannya 3
</font>
<br />
<font face="times new roman" size="6" color="blue">
Jenis font ini adalah Times New Roman, berwarna biru, ukurannya 6
</font>
</body>
</html>
12
4.7 Menambahkan Gambar
Dokumen HTML akan terlihat lebih menarik apabila disisipkan gambar. Format gambar
yang dapat ditampilkan : GIF, JPEG, PCX, PNG, WMF, dll. Sedangkan format gambar
yang dikenal oleh hampir semua browser adalah GIF dan JPEG. Untuk menambah
gambar digunakan tag <img />.
Tag <img /> mempunyai atribut :
Atribut Fungsi
src Merujuk kepada URL atau direktori lokasi gambar
align Posisi text disekitar gambar, nilainya adalah top, middle, bottom,
left, right
width Lebar gambar dalam satuan pixel
height Tinggi gambar dalam satuan pixel
alt Menampilkan text pengganti jika gambar tidak tampil
01.latihan_0 9 .htm l
<html>
<head>
<title>Menambahkan Gambar</title>
</head>
<body>
<img src="bubbles.jpg" alt="gambar gelembung" align="middle" />
Gambar ini terdapat pada windows 98 secara default, anda boleh
menggantinya.
</body>
</html>
13
4.8 Menambahkan Link
Link merupakan suatu gambar atau teks yang terkait dengan suatu alamat tertentu. Jika
Link diklik maka dokumen HTML akan menuju ke alamat tersebut. Ditandai dengan
Anchor, yaitu tag <a>. Tag <a> mempunyai atribut HREF yang digunakan sebagai link
tujuan.
01.latihan_ 1 0.htm l
<html>
<head>
<title>Menggunakan Link</title>
</head>
<body>
<a href="http://www.yahoo.com">Klik disini</a> untuk menuju situs
Yahoo.com.<br />
Atau dapat juga mengklik gambar ini :
<a href="http://www.yahoo.com">
<img src="bubbles.jpg" alt="gambar gelembung" align="middle" />
</a>
</body>
</html>
4.9 Tabel
HTML menyediakan tag-tag untuk membuat sebuah tabel, yaitu:
• Tag <table> : Mendefinisikan sebuah tebel
• Tag <tr> : Mendefinisikan baris tabel
• Tag <th> : Mendefinisikan judul kolom
• Tag <td> : Mendefinisikan isi tiap kolom
01.latihan_ 1 1 .htm l
<html>
<head>
<title>HTML Tabel</title>
</head>
<body>
<table border="1">
<tr>
<th>Kolom 1</th>
<th>Kolom 2</th>
<th>Kolom 3</th>
</tr>
<tr>
<td>Baris 1 kolom 1</td>
<td>Baris 1 kolom 2</td>
<td>Baris 1 kolom 3</td>
</tr>
<tr>
14
<td>Baris 2 kolom 1</td>
<td>Baris 2 kolom 2</td>
<td>Baris 2 kolom 3</td>
</tr>
</table>
</body>
</html>
menyebutnya sebagai suatu bahasa pemrograman, HTML sama sekali bukan bahasa
pemrograman, tapi merupakan bahasa markup (penandaan), terhadap sebuah dokumen
teks. Simbol markup yang digunakan oleh HTML ditandai dengan tanda lebih kecil ( < )
dan tanda lebih besar ( > ) yang biasa disebut tag.
1. Dokumen dan Penamaan HTML
Sebuah file HTML merupakan file teks biasa yang mengandung tag-tag HTML. Karena
merupakan file teks, maka HTML dapat dibuat dengan menggunakan teks editor yang
sederhana, misalnya notepad. Dapat juga menggunakan HTML editor yang bersifat
WYSIWYG ( What You See Is What You Get ), misalnya Frontpage atau Dreamwaver.
Untuk menandai bahwa sebuah file teks merupakan file HTML, maka ciri yang paling
nampak jelas adalah ekstensi filenya, yaitu .htm atau .html. Dalam pemberian nama
sebuah dokumen bersifat case sensitive sehingga dokumen dengan nama a.html akan
berbeda dengan dokumen A.html.
2. Elemen dan Tag HTML
Elemen HTML yaitu komponen penyusun terkecil dari sebuah dokumen HTML. Untuk
menandainya. Elemen dapat berupa teks murni, atau bukan teks, atau keduanya.
Untuk menandai sebuah elemen dalam suatu dokumen HTML digunakan tag. Tag HTML
terdiri dari sebuah simbol lebih kecil ( < ) dan dan lebih besar ( > ).
Nama elemen ditunjukkan oleh nama dari tagnya. Suatu elemen biasanya ditandai dengan
pasangan tag, walaupun ada beberapa nama elemen yang ditandai dengan satu tag tanpa
harus berpasangan. Diantaranya:
• Image ( <img /> )
• Ganti Baris – Break ( <br /> )
• Horizontal Rule ( <hr /> )
1
• Input Field ( <input /> )
Tag dapat mempunyai atribut. Atribut mendefinisikan sesuatu tentang tag tersebut. Atribut
digunakan untuk mengubah default pemformatan dokumen dengan tag yang
bersangkutan.
Struktur Element
<p align="center"> ..... </p>
Struktur Dasar H T ML
<html>
<head>
....informasi dokumen....
</head>
<body>
....konten yang di tampilkan
pada halaman browser.....
</body>
</html>
3. Penggunaan Tag dan Atributnya
Dalam pembuatan dokumen HTML penulisan elemen yang diawali dan diakhiri tanda tag
HTML, memiliki syarat penulisan yaitu:
• Tag HTML diapit dengan dua karakter kurung sudut ( < dan > )
• Tag HTML secara normal selalu berpasangan misal (<i>...</i>)
• Tag pertama dalam suatu pasangan adalah tag awal, dan tag yang kedua
merupakan tag akhir.
2
Name Value
Atribut
Content
Tag Pembuka Tag Penutup
Element
• Tag html tidak case sensitive. Ini artinya <b> sama dengan <B>
• Jika dalam suatu tag terdapat tag lain, maka penulisan tag akhir tidak boleh
bersilang dan harus berurutan. Misalnya <b><I>..Tebal dan Miring..</I></b>
-. Tag Dasar HTML
4.1 HTML
Merupakan tag dasar yang mendifinisikan bahwa dokumen adalah dokumen html. Tag ini
merupakan suatu keharusan bagi pemrogram web untuk menuliskannya sebagai tag
pertama dalam dokumen html. Penulisan tag seperti berikut ini :
<html> pada awal dokumen dan </html> pada akhir dokumen
4.2 Head
Bagian Head sebenarnya tidak harus ada pada dokumen HTML, tetapi pemakaian head
yang benar akan meningkatkan kegunaan suatu dokumen HTML. Isi bagian head –
kecuali judul dokumen – tidak akan terlihat oleh pembaca dokumen tersebut. Penulisan
tag seperti berikut ini :
<head> di awal setelah <html> dan </head> di akhir section head.
Elemen-elemen pada bagian head akan mengerjakan tugas-tugas sebagai berikut :
• Menyediakan judul dokumen
• Menjembatani hubungan antar dokumen
• Memberitahu browser untuk membuat form pencarian
• Menyediakan metode untuk mengirim pesan ke tipe browser
Elemen yang mungkin terdapat pada bagian head :
• Tag <title>, digunakan untuk memberi judul dokumen. Penggunaannya adalah
sebagai berikut :
<title>Judul Dokumen</title>
• Tag <base>, digunakan untuk menentukan basis URL sebuah dokumen. Contoh
penggunaannya adalah sebagai berikut berikut :
<base href="//www.alamat.com/direktori" />
3
• Tag <link>, digunakan untuk menunjukkan relasi antar dokumen HTML.
Tag ini mempunyai beberapa atribut :
Atribut Fungsi
href Menunjuk pada URL / dokumen lain
rel Mendefinisikan relasi terhadap sebuah dokumendan dokumen lain
yang berisi informasi tentang personil yang member kontribusi
terhadap dokumen tersebut
rev Mendefinisikan relasi sebuah dokumen HTML dengan dokumen lain
type Menentukan tipe dan paramenter dari relasi
Contoh penggunaannya adalah sebagai berikut:
<link rel="stylesheet" href="http://alamat.com/style.css" type="text/css" />
• Tag <meta>, digunakan untuk mendefinisikan informasi-informasi di luar HTML
Informasi meta dapat digunakan oleh browser untuk menjalankan suatu aktivitas
yang belum didukung oleh HTML.
Tag <meta> mempunyai atribut :
Atribut Fungsi
http-equiv Mendefinisikan properti dari elemen
name Menyediakan deskripsi tambahan dari elemen
url Mendefinisikan target dokumen dari sebuah properti
content Menyediakan nilai respon dari properti
Untuk lebih memperjelas penggunaan atribut tag <META> perhatikan contoh
berikut ini :
Perintah diatas akan diterjemahkan oleh browser sebagai “tunggu 60 detik,
kemudian panggil dokumen baru pada www.alamat.com". Jika atribut URL tidak
disertakan, maka halaman itu sendiri yang akan dipanggil, jadi setara dengan
mengklik tombol Refresh / Reload pada browser.
Penggunaan elemen <meta> yang paling populer adalah penggunaan properti
Keyword dan Description. Kedua properti ini sangat berguna untuk membantu kerja
search engine. Biasanya search engine akan menggunakan teks yang disebutkan
4
<meta http-equiv="refresh" content="60" url="www.alamat.com" />
pada properti Keyword untuk mengindeks dokumen dan menggunakan teks yang
terdapat pada properti Description untuk mendeskripsikan indeks tersebut.
4.3 BODY
Bagian BODY merupakan isi dari dokumen HTML. Semua informasi yang akan
ditampilkan, mulai dari teks, gambar, sound, dan lain-lain, akan ditempatkan di bagian ini.
Seperti telah disebutkan di atas, bagian BODY diawali oleh tag <body> dan ditutup
</body>.
Atributnya:
Atribut Fungsi
alink Menunjukkan warna link aktif
background Merujuk URL atau direktori dari gambar yang digunakan sebagai
latar belakang
bgcolor Menentukan warna latar belakang
bgproperties Jika nilai atribut diisi “FIXED”, maka gambar latar belakang tidak ikut
tergulung
leftmargin Batas kiri dokumen
link Menentukan warna link yang belum dikunjungi
text Menentukan warna teks
topmargin Menentukan batas atas
vlink Menentukan warna link yang telah dikunjungi
01.latihan_01.html
<html>
<head>
<title>Penggunaan BODY</title>
</head>
<body bgcolor="silver" text="blue" vlink="#ff0000" link="green">
Ini adalah contoh penggunaan body.
Dan ini adalah sebuah <a href="">link</a>.
</body>
</html>
5
Warna Nilai
Black #000000
Maroon #800000
Green #008000
Olive #808000
Navy #000080
Purple #800080
Teal #008080
Gray #808080
Silver #c0c0c0
Red #ff0000
Lime #00ff00
Yellow #ffff00
Blue #0000ff
Fuchsia #ff00ff
Aqua #00ffff
White #ffffff
Table Warna
6
Title
Body
4.4 Memberikan Komentar
Untuk mempermudah pembacaan kembali kode-kode HTML, kadang-kadang
ditambahkan komentar ke dalam sebuah dokumen. Agar komentar tidak dapat dibaca
pada browser, maka harus digunakan tanda khusus, yaitu <!-- dan diakhiri dengan tanda
-->.
01.latihan_0 2 .htm l
<html>
<head>
<title>Penggunaan Komentar</title>
</head>
<body>
<!-- ini merupakan suatu komentar -->
Selamat belajar html<br>. Semoga sukses!
</body>
</html>
4.5 Memformat Dokumen HTML
Dalam HTML terdapat beberapa tag yang dapat digunakan untuk memformat dokumen.
Tag-tag tersebut diantaranya adalah :
• Tag <h#>, membuat heading sebuah dokumen. Nilai n berkisar antara 1 hingga 6.
01.latihan_0 3 .htm l
<html>
<head>
<title>Latihan Heading</title>
</head>
<body>
<h1>Ini Heading 1</h1>
<h2>Ini Heading 2</h2>
<h3>Ini Heading 3</h3>
<h4>Ini Heading 4</h4>
<h5>Ini Heading 5</h5>
<h6>Ini Heading 6</h6>
</body>
</html>
• Tag <br />, membuat baris baru, tidak memerlukan penutup </br>
• Tag <p>, memulai paragaraf baru.
• Tag <hr />, membuat garis batas horizontal, tidak memerlukan penutup </hr>
7
01.latihan_0 4 .htm l
<html>
<head>
<title>Cerita Ramayana</title>
</head>
<body>
Cerita wayang Ramayana, di Kerajaan Alengka Diraja
<br>Rahwana membuat geger karena menculik Dewi Sinta
<p>Anoman, Si Kera Putih
ditugaskan Tukul Arwana untuk menjemput Sinta
</p>
Tukul Arwana tidak sempat menjeputnya, karena sedang
mengisi acara di stasiun TV Swasta
<hr />
Rama Tukul Arwana
<hr />
<br />
<h1>Bab I HTML</h1>
Ini adalah isi Bab I
<h2>1.1 Subbab HTML</h2>
Ini adalah isi Subbab 1.1
<h3>1.1.1 Sub-Subbab HTML</h3>
Ini adalah isi Sub Subbab 1.1.1
</body>
</html>
8
• Tag <pre>, membuat tampilan dokumen HTML pada browser sama dengan
tampilan pada teks editor. Dengan tag <pre>, maka tag <p> dan tag <br /> jadi
tidak diperlukan lagi.
01.latihan_0 5 .htm l
<html>
<head>
<title>Latihan PRE</title>
</head>
<body>
<pre>
Tampilan ini sma dengan tampilan di teks editor.
Klasemen
Team Main Menang Seri Kalah
=================================================
Team A 3 2 1 0
Team B 3 2 0 1
Team c 3 1 1 1
=================================================
Kode program :
For I = 1 to 10
For J = 1 to 5
A(I,J)=I*J
Next
Next
</pre>
</body>
</html>
9
• Tag <center>, Teks rata tengah
• Tag <ul> dan <ol>
Pemformat dokumenlain yang akan sangat banyak berguna adalah LIST (daftar).
Ada dua macam daftar, yaitu ORDERED lists (ol) dan UNORDERED lists (ul).
01.latihan_0 6 .htm l
<html>
<head>
<title>Latihan LIST</title>
</head>
<body>
<p>Keluarga Pandawa</p>
<ol>
<li>Yudhistira</li>
<li>Bima</li>
<li>Arjuna</li>
<li>Nakula</li>
<li>Sadewa</li>
</ol>
<p>Jenis Musik</p>
<ul>
<li>Campur Sari</li>
<li>Dangdut</li>
<li>Jazz</li>
<li>Pop</li>
<li>Rock</li>
</ul>
</body>
</html>
10
4.6 Memformat Karakter
Melakukan format terhadap karakter yang ditampilkan akan sangat berguna untuk
membuat sebuah dokumen menjadi menarik dan informatif.
4.6.1 Logical Format
Logical format akan menerapkan layout dokumen secara logis dan terstruktur. Semua tag
ini memerlukan tag penutup. Tag-tag yang termasuk logical format adalah sebagai
berikut :
• <cite>, digunakan untuk menandai suatu kutipan (citation).
• <code>, digunakan untuk menampilkan kode-kode pemrograman, misalnya bahasa
C.
• <em>, digunakan untuk menandai suatu teks yang ditekankan (cetak miring) oleh
penulis.
• <kbd>, digunakan untuk menandai suatu teks yang harus dimasukkan oleh user
melalui keyboard.
• <samp>, digunakan untuk menandai suatu teks yang dimaksudkan sebagai contoh.
• <strong>, digunakan untuk menandai bagian yang penting (cetak tebal) dari suatu
teks.
• <var>, digunakan untuk menampilkan nama variabel.
• <dfn>, digunakan untuk menandai sebuah subdefinisidari daftar definisi.
4.6.2 Physical Format
Physical format adalah format terhadap fisik suatu font. Semua tag ini memerlukan tag
penutup. Tag-tag yang termasuk physical format adalah sebagai berikut :
• <b>, untuk menampilkan huruf tebal.
• <i>, untuk menampilkan huruf miring.
• <u>, untuk menampilkan garis bawah pada teks. <tt>, untuk menampilkan huruf
seperti huruf mesin ketik.
• <strike>, untuk menampilkan garis horizontal pada bagian tengah huruf.
• <big>, untuk menampilkan ukuran huruf yang lebih besar.
• <small>, untuk menampilkan ukuran huruf yang lebih kecil.
• <sub>, untuk menampilkan subscript.
• <sup>, untuk menampilkan superscript.
11
01.latihan_0 7 .htm l
<html>
<head>
<title>Memformat Karakter</title>
</head>
<body>
<b>Kalimat ini akan dicetak tebal</b><br>
<i>Kalimat ini akan dicetak miring</i><br>
<u>Kalimat ini akan bergaris bawah</u><br>
<strike>Kalimat ini akan bergaris tengah</strike>
</body>
</html>
4.6.3 Tag Font
Tag font digunakan untuk mengatur jenis, ukuran dan warna font. Contoh penggunaannya:
01.latihan_0 8 .htm l
<html>
<head>
<title>Memformat FONT</title>
</head>
<body>
<font face="arial" size="3" color="#ff0000">
Jenis font ini adalah Arial, berwarna merah, ukurannya 3
</font>
<br />
<font face="times new roman" size="6" color="blue">
Jenis font ini adalah Times New Roman, berwarna biru, ukurannya 6
</font>
</body>
</html>
12
4.7 Menambahkan Gambar
Dokumen HTML akan terlihat lebih menarik apabila disisipkan gambar. Format gambar
yang dapat ditampilkan : GIF, JPEG, PCX, PNG, WMF, dll. Sedangkan format gambar
yang dikenal oleh hampir semua browser adalah GIF dan JPEG. Untuk menambah
gambar digunakan tag <img />.
Tag <img /> mempunyai atribut :
Atribut Fungsi
src Merujuk kepada URL atau direktori lokasi gambar
align Posisi text disekitar gambar, nilainya adalah top, middle, bottom,
left, right
width Lebar gambar dalam satuan pixel
height Tinggi gambar dalam satuan pixel
alt Menampilkan text pengganti jika gambar tidak tampil
01.latihan_0 9 .htm l
<html>
<head>
<title>Menambahkan Gambar</title>
</head>
<body>
<img src="bubbles.jpg" alt="gambar gelembung" align="middle" />
Gambar ini terdapat pada windows 98 secara default, anda boleh
menggantinya.
</body>
</html>
13
4.8 Menambahkan Link
Link merupakan suatu gambar atau teks yang terkait dengan suatu alamat tertentu. Jika
Link diklik maka dokumen HTML akan menuju ke alamat tersebut. Ditandai dengan
Anchor, yaitu tag <a>. Tag <a> mempunyai atribut HREF yang digunakan sebagai link
tujuan.
01.latihan_ 1 0.htm l
<html>
<head>
<title>Menggunakan Link</title>
</head>
<body>
<a href="http://www.yahoo.com">Klik disini</a> untuk menuju situs
Yahoo.com.<br />
Atau dapat juga mengklik gambar ini :
<a href="http://www.yahoo.com">
<img src="bubbles.jpg" alt="gambar gelembung" align="middle" />
</a>
</body>
</html>
4.9 Tabel
HTML menyediakan tag-tag untuk membuat sebuah tabel, yaitu:
• Tag <table> : Mendefinisikan sebuah tebel
• Tag <tr> : Mendefinisikan baris tabel
• Tag <th> : Mendefinisikan judul kolom
• Tag <td> : Mendefinisikan isi tiap kolom
01.latihan_ 1 1 .htm l
<html>
<head>
<title>HTML Tabel</title>
</head>
<body>
<table border="1">
<tr>
<th>Kolom 1</th>
<th>Kolom 2</th>
<th>Kolom 3</th>
</tr>
<tr>
<td>Baris 1 kolom 1</td>
<td>Baris 1 kolom 2</td>
<td>Baris 1 kolom 3</td>
</tr>
<tr>
14
<td>Baris 2 kolom 1</td>
<td>Baris 2 kolom 2</td>
<td>Baris 2 kolom 3</td>
</tr>
</table>
</body>
</html>
Langganan:
Komentar (Atom)