Embed Size (px)
Citation preview
Praktikum 1
Penggunaan CSS
1. Satu dokumenCara mengganti background
<head>
<style >
body {
Background-color : grey;
}
</style>
</head>
Tag-tag dalam html
1. <P> ... </P> (Paragraph)
Untuk membuat blok paragraf.
Atribut :
Align : center|left|right|justify
<p align="center"><u>"PRAKTIKUM !"</u></p>
2. <BLOCKQUOTE> ... </BLOCKQUOTE>
Adalah salah satu elemen struktur HTML yang digunakan untk blocking statement kutipan.
Atribut :
Cite : [url sumber kutipan]
3. <H1> .... </H1> - <H6> ... </H6>
Atribut :
Align = left|right|center|justify
<blockquote>www.google.com adalah halaman web yang lengkap sebagai sumber
informasi</blockquote>
<h1 align="left">atribut</h1>
<h2 align="center">atribut</h2>
<h3 align="right">atribut</h3>
4. <DIV> ... </DIV>
Adalah sebuah elemen block yang umum di pakai. Div tag tidak memiliki fungsi spesifik seperti
block element yang lain. Flexible, anything-goes element
Atribut :
Align = left|right|center|justify
<div id="stikom_footer">
<div class="footer_rightcol">
Copyright © 2013 <a href="#"><strong>STIKOM PGRI Banyuwangi</strong></a> - Powered by <a
href="http://www.stikom.com" target="_parent"><strong>dony hidayat<strong> </a></br>
</br>
5. <HR> ... </HR>
Untuk membuat garis horizontal
Atribut :
Color = kodewarna|namawarna
Width = px|persen
Noshade = noshade
Size = bilangan
6. Text Formatting Tag
<TAG> Fungsi
<B>, <Strong> Cetak tebal
<U> Garis Bawah
<I> Cetak Miring
<Del>, <S> Strike Trough
<Big> * Memperbesar ukuran text
<Small> * Memperkecil ukuran text
<blink> Efek text kedip
<center> Center text
<comment>, <!-- … --> Memberi komentar
<dfn> Menandai ungkapan
<kbd> Identifikasi keystrokes
<q> Kutipan, non block stuktur
<span> = <div> tag
<sub> Subscript
<sup> Superscript
<hr color="red"width="3" size="5"><i><u>STIKOM PGRI BANYUWANGI</i></u></hr></br>
- > ... </A>
Berfungsi untuk menghubungkan antara satu objek dengan objek lain
Attribute :
Href
Name : digunakan untuk mengidentifikasikan tujuan link/anchor/halaman
Target : [_blank, _parent, _top]
Contoh :
Untuk hyperlink file dalam satu website
Contoh :
<a href=profil.html> Profil </a>
Untuk berhubungan dengan website lain
Contoh :
<a href=http://google.com> Google </a>
Menghubungkan antar area dalam satu halaman
Contoh :
<a href=#sejarah> Sejarah </a>
..........
<a name=sejarah> Sejarah </a>
7. <IMG />
Inline tag yang digunakan untuk menyisipkan gambar ke dalam halaman web
Attributes :
Src = [file source]
Width = [..px / %] (ukuran gambar secara horizontal )
Height = [..px / %] (ukuran gambar secara vertical)
Alt = [string] (alternative text)
Align = [middle|left|right|center]
Border = [angka]
Usemap = [#namamap] (penggunaan tag map)
Vspace / hspace = [angka] (memberi space secara horizontal / vertical)
Contoh :
<a href="Penguins.jpg"> <img src="beat.jpeg" width="300"
height="300"> </a><br>
8. <TABLE> ... </TABLE>
Attribut Tabel
Align = center|left|right (posisi tabel)
Width = ..px | ..% (ukuran tabel secara horizontal)
Height = ..px | ..% (ukuran tabel secara horizontal)
Cellpadding = ..px (jarak tepi cell dengan content)
Cellspacing = ..px (jarak cell dengan border)
Background = alamat_file
Bgcolor = kdwarna|nama warna (background warna solid)
Bordercolor = kdwarna|nama warna
Border = ..px (ketebalan garis tabel)
Komponen penyusun/pendukung table
a. <Caption >
Harus di deklarasikan di setelah deklarasi tabel
Attribute
- Align
b. <tr>
elemen untuk Baris dalam table
Attribute
- Align
- Bgcolor
c. <td>
Mendefinisikan kolom / cell
Attribut
- Bgcolor
- Align
- Colspan = merger kolom
- Rowspan = merger baris
- Valign = posisi text secara vertikal
d. <th>
e. <thead>
f. <tbody>
<TABLE BORDER=1>
<CAPTION> MERGER KOLOM </CAPTION>
<TR>
<TD COLSPAN=3> Mata Pelajaran </CAPTION>
</TR>
<TR>
<TD> Bahasa Indonesia </TD>
<TD> Bahasa Inggris </TD>
<TD> Matematika </TD>
</TR>
</TABLE>
<FORM> ... </FORM>
Attribute
a. Name
b. Target = _blank | _self | _parent
c. Method = POST | GET
d. Action = [file] (file tujuan)
CAPTION> nama mahasiawa</CAPTION><input type="text" name="firstname" id=“fn" size="20"/>
<CAPTION> password</CAPTION><input type=“password" name=“passwd" id=“pw" size="20"/>
<CAPTION> text area</CAPTION><textarea name=“description” id=“desc“ rows=“10” cols=“30”>
Menu dropdown
<CAPTION> menu dropdown</CAPTION></br>
<select name="town" id="tn">
<option value="swindon">Swindon</option>
<option value="london” selected="selected"> London </option>
<option value=“bristol">Bristol</option>
</select>
Radio Button
<input type="radio" name="age" id="u30“ checked=“checked” value="Under30" />
<label for="u30">Under 30</label>
<br />
<input type="radio" name="age" id="thirty40" value="30to40" /> <label for="30u"> 30 to 40</label>
Check box
<input type="checkbox" name="colour[]" id="r" checked="checked" value="red" />
<label for="r">Red</label>
<br />
<input type="checkbox" name="colour[]" id="b" value="blue" />
Hidden Field
<input type="hidden" name="hidden_value" value="My Hidden Value" />
Textarea (multiline input)
<textarea name=“description” id=“desc“ rows=“10”
cols=“30”>
Default text …
</textarea>
Tombol
<input type="submit" name="submit" value="Submit" />
Contoh :
<form action=proses.php name=form1 method=post>
NIM : <input type=text name=nim id=nim size=12 />
Nama : <input type=text name=nama id=nama size=50 />
Alamat :
<textarea name=alamat id=alamat rows=5 cols=7 >
Masukkan Alamat Anda
</textarea>
</form>
A. Selector – Selector dalam CSS
1. Elemen Selector
Selector yang berkerja pada elemen – elemen HTML
Contoh :
<style>
B {
Font-family : verdana;
Font-size : 14pt;
Font-weight : bold;
Color : orange;
}
</style>
Class Selector
Selector yang akan di aplikasikan pada setiap elemen dengan class yang telah di buat.
Contoh :
<style>
.tebal {
Font-family : verdana;
Font-size : 14pt;
Font-weight : bold;
Color : orange;
}
</style>
Note : style di atas baru akan berkerja jika elemen / tag HTML memiliki class ‘tebal’, <p
class=tebal> ... </p>.
1. Id Selector
Selector yang akan di aplikasikan pada elemen/tag HTML dengan id yang telah di buat
Contoh :
<style>
#satu {
Font-family : verdana;
Font-size : 14pt;
Font-weight : bold;
Color : green;
}
</style>
Note: style di atas akan di aplikasikan pada elemen / tag HTML yang memiliki id ‘satu’ <div
id=satu>... </div>
1. Inline style
Inline style hanya di aplikasikan pada satu elemen yang bersangkutan. Tidak berpengaruh untuk
elemen / tag lain
Contoh :
<table border=1>
<tr>
<td> Kolom satu </td>
<td style=”background-color : black; color:white; font-
weight:bold”> Kolom Dua </td>
<td> Kolom Tiga </td>
</tr>
</table>
Note: style di atas hanya akan berpengaruh pada kolom ke dua dalam baris tersebut.
