Selamat datang di
blog saya
FORMAT
TEKS HALAM WEB
Contoh 1:
<HTML>
<HEAD>
<TITLE>X TKJ</TITLE>
<B><U><I><FONT COLOR=#OOOOFF<BODY
TEXT=#FFOOOO<BODY>SELAMAT DATANG DI X TKJ
BIODATA SAYA
NAMA :DIAN MEILIA
TTL :SENGKANG,11
MEI 2000
KELAS :X TKJ
STATUS :PELAJAR
</HEAD>
</HTML>
Hasilnya:
MENYAJIKAN PEMBUATAN LIST MINIMAL DAN
KOMBINASI
List minimal adalah bagian teks didalamnya dokumen yang
berisi daftar item dari suatu kelompok atau grup tertentu.
Ada 4 jenis list daftar:
1.ordered list<ol>
Merupakan jenis daftar berupa angka atau
sering juga disebut sebagai numbering list.dalam ordered list ini ada 2 jenis
elemen yang dibutuhkan yaitu:<ol></ol> dan <li></li>yang
merupakan singkatan dari list item
2.undered
list<ul></ul>
Meruapakan bentuk daftar berupa
poin-poin,dimna lainnya adalah bullet.dua jenis elemen yang dibutuhkan yaitu ul
dan li
3.nesting
list<nl>
Merupakan daftar yang ada dalam
daftar.dalam pengaplikansiannya nesting akan menggunakan kombinasi dari dua
jenis list yaitu bisa ordered dengan undered,ordered dengan ordered,undered daengan
undered
4.defenition
merupakan jenis daftar yang umumnya digunakan untuk mendefinisikan
sesuatu.defenition list menggunakan 3 jenis tag atau atribut diawali degan
<DL>yang merupakan singkatan dari Definition List ,<DT>yang
merupakan Definition Term,<DD>yang merupakan Definition Description yang
merupakan penjelasan dari suatu istilah dari <DT>.
TAG
1.<OL></OL>
untuk penomoran
2.<UL></UL>untuk
format bullet
3.<LI></DD>untuk
elemen list
4.<DD></DD>untuk
definition list
5.<DT></DT>untuk
definisi term
6.<marquee></marquee>untuk
membuat teks berjalan
*list
kombinasi adalah gabungan daftar berurutan dan dapat tidak berurutan yang
mencangkup antara OL dan UL
Contoh:
<html>
<head>
<body>menu
makanan
<OL>
<Li>Mie
ayam</Li>
<Li>Nasi
campur</Li>
<Li>nasi
goreng</Li>
</OL>
<body>
</head>
</html>
Hasilnya
adalah:
Contoh list
minimal dan kombinasi:
<html>
<head>
<body>
<center>MENYAJIKAN
LIST MINIMAL DAN KOMBINASI</center>
<br>
<br>
list adalah
bagian text didalam dokumen yang berisi daftar item dari suatu kelompok atau
grup tertentu.
<br>
ada 4 jenis daftar list:
<ol>
<li>
ORDERED LIST </li>
<li>
UNORDERED LIST </li>
<li>
NESTING LIST </li>
<li>
DEFINITION LIST </li>
</ol></br>
<br>
list kombinasi adalah gabungan dari daftar berurutan dan daftar tidak
berurutan,misalnya:</br>
<br>
daftar makanan
<ul>
<li>
Bakso </li>
<li>
soto </li>
</ul></body>
<body>
daftar minuman
<ol>
<li>
Jus jeruk </li>
<li> Es
teh </li>
</ol></br>
</body>
</head>
</html>
Hasilnya:
FORMAT TABEL HALAMAN WEB
Tabel merupakan cara untuk menampikan informasi dalam bentuk
sel yang terdiri atas baris dan kolom.tabel menggunakan tag
<table></table> yang elemennya berisi properti
<tr></tr> yaitu tabel round untuk menentukan baris dan properti
<td></td>tabel data untuk menampakkan data pada setiap sel tabel.
a.atribut
elemen tabel terdiri dari:
1.wide(lebar tabel)
2.hide(tinggi tabel)
3.border(tebal garis tepi)
4.cellspecing(spasi antar sel)
5cell padding(spasi didalam sel)
6.allignt(perataan tabel)
7.bgcolor(warna latar belakang tabel)
Contoh:
<html>
<head>
<body>pembuatan tabel
<table border=1>
<tr>
<td>baris 1 kolom 1</td>
<td>baris 1 kolom 2</td>
</tr>
</table>
</body>
</head>
</html>
Hasilnya adalah
LAYE UP HALAM WEB
Laye up halamen web merupakan tata
letak aelmen halaman situs web.desain laye up suatu halaman web meliputi
penyusunan:
1.pembagian tempat pada halaman
2.pengaturan jarak spasi
3.penhelompokan teks dan grafik
4.penekanan pada suatu bagian tertentu
Beberapa model laye up yang biasa
digunakan dalam mendesain suatu halaman web diantaranya adalah:
1.top indeks yaitu digunakan untuk menampilkan link yang
banyak ke situs lain,seperti search angine
2.bottom indeks biasanya digunakan apabila isi dari halaman
banyak berhubungan dengan topik tunggal
3.left indeks digunkan untuk layer dengan resolusi yang lebar
sehingga mudah dalam penyediaan navigasi tanpa menimbulkan kekacauan penyajian
pada halaman pertama
4.laye up split merupakan model yang banyak dipakai karena
berjaga keseimbahan dalam halaman web
5.alternatif indeks yaitu digunakan untuk halaman yang banyak
menampilkan grafik,foto dan produk yang disertai dengan teks berupa
keterangan,harga,jumlah dan lain-lain
Contoh:
<HTML>
<HEAD>
<TITLE>LEFT INDEKS</TITLE>
<TABLE BORDER=1 ALIGN LEFT>
<TR>
<TD BGCOLOR=RED ALIGN=CENTER>
<P>HOME
<P>PROFIL
<P>ABOUT
<P>BLOG</TD></FONT></B>
<TD ROWSPAN>
<TABLE WIDTH="600" HEIGHT="300"
BORDER=1 ALIGN=BOTTOM>
<TR>
<TD BGCOLOR=YELLOW ALIGN=CENTER>DESAIN HALAMAN
WEB</TD></FONT></B>
</TR>
</TR>
<TR>
<TD BGCOLOR=BLUE>SELAMAT DATANG DI KAMI.SEBUAH DOKUMEN
TIDAK JARANG DIGUNAKAN UNTUK MENAMPILKAN DATA KEPADA PENGGUNANYA.<P> TERDAPAT BANYAK CARA UNTUK MANAMPILKAN
DATA,MULAI MENGGUNAKAN GRAFIK,DAFTAR SAMPAI DENGAN TABEL</TD>
</TR>
<TR>
<TD BGCOLOR=GREEN ALIGN=CENTER>DIAN.COM</TD></FONT></B>
</TR>
Hasilnya
MULTIMEDIA PADA HALAMAN WEB
Apa itu mulimedia?
Mutimedia adalah
penggunaan komputer untuk menyajiakan dan menggabungkan
teks,suara,gambar,animasi aaudiodan videodengan alat bantu(tool)dan
koneksi(link)sehingga pengguna dapat melakukan navigasi,berinteraksi,berkarya,dan
berkomunikasi.
Contoh multimedia image/gambar:
<html>
<head>
<body>
<img src="B612-2015-03-20-14-05-13-1.jpg">
</body>
</head>
</html>
Hasilnya:
Contoh multimedia
audio:
<html>
<head>
<body>
<audio src="Fatin - 03 Jangan Kau Bohong.mp3"
autoplay controls> </audio>
</body>
</head>
</html>
Hasilnya:
HYPERLINK
HALAMAN WEB
Hyperlink merupakan bagian dari web
page yang menghubungkan user ke file lain,menyediakan link ke file-file pada
komputer lain.
Link merupakan suatu gambar atau teks
yang terkait dengan satu alamat tertentu.jika link di klik maka dokumen html
akan menuju ke alamat tersebut.di tandai dengan anchor(jongkar0,yaitu tag
<a>(href adalah singkatan dari hypertext reference).Tag
<a>mempunyai atribut:
1.Href berfungsi sebagai hypertext
refernce yang mempunyai nilai URL(Uniform Resorce Identifier)yang akan
menghubungkan ke eksternal halaman web.
2.Target berfungsi untuk menampilkan
halaman web pada suatu jendela frame atau jendela baru.
Contoh:<a href=//http.www.facebook.com/targer_blank>facebook</a>
Ada 3 jenis link:
-link antar halam
-link ke email
-link ke website lain
Contoh:
FORMULIR HALAAMAN WEB
Form merupakan salah satu bentuk
halaman web yang digunakan untuk menerima masukan dari pengguna,untuk
selanjutnya masukan dari pengguna tersebut diolah menjadi bahasa pemrograman
web,baik secara server side scripting(misalnya PHP,JSP)ataupun clien side scripting
Format umum penulisan dari form
adalah sebagai berikut:<form> input elemen </form>
Ada 2 atribut yang digunakan pada
elemen form yaitu:
1.method yaitu untuk pengiriman data
ke tujuan.Method terdiri dari 2 yaitu:
-qet
yaitu mengirim data ke server dengan cara meletakkan data pada bagian akhir daru URL yang dituju
-post yaitu mengirim data dengan cara
terpisah
2.action yaitu untuk menentukan
tujuan apabila sebuah tombol form dijalankan
Perbedaan jika kita mengisi atribut
method qet dan post,untuk method qet digunkan untuk quari dan untuk method post
biasanya giginakan untuk data yang lebih sensitif seperti password atau
registrasi user
Ada beberapa elemen input pada form:
1.text box<input
type=”text”>digunakan untuk memasukkan input yang berupa teks
2.password<input
type=”password”>digunakan untuk memasukkan password
3.hidden<input
text=”hidden”>digunakan untuk mengirim data ke suatu aplikasi yang tidak dilihat
oleh browser
4.check box<input type=”check
box”>digunakan untuk dapat memilih lebih dari satu pilihan
5.radio button<input
type=”radio”>digunakan untuk dapat hanya memilih salh satu pilihan
6.push button<input
type=”button”>biasanya digunakan dengan java scrip atau visual basic script
untukmenghasilkan suatu aksi
7.submit<input type”submit”>digunakan
untuk mengirimkan nama dan nilainya suau aplikasi dalaam atribut axion di dalam
elemen form
8.image submit buttoninput
type”image”src=”URL”>digunakan untuk menggantikan tombol standar submit
dengan image
9.reset,input type=”reset”.digunakan
untuk mereset semua masukan dalam form
10.text area<text
area>.....<text area>digunakan untuk memasukkan text secara leluasa
seperti notepad
11.select<select>........</select>merupakan
daftar isi dari properti select menggunakan tag<option>
Contoh checbox:
<html>
<head>
<title>belajar</title>
</head>
<form>
nama:<input
type="texs"name="nama"><br>
hobbi:<input
type="checkbox"name=" ">membaca
<input
type="checkbox"name=" ">menulis
<input
type="checkbox"name=" ">menggambar
</br>
<input
type="submit"value="input">
<input
type="submit"value="hapus">
</form>
</html>
Hasilnya
Contoh select:
<html>
<head>
<title>belajar</title>
</head>
<form>
nama:<input
type="texs"name="nama">
<br>
asal kota:
<select>
<option>jakarta
<option>makassar
<option>jayapura
</select>
</br>
<input
type="submit"value="input">
<input
type="submit"value="hapus">
</form>
</html>
Hasilnya
Contoh radio:
<html>
<head>
<title>belajar</title>
</head>
<form>
<br>
kelamin jenis
<input type="radio"name="j_kelamin"value=laki-laki">laki-laki
<input
type="radio"name="j_kelamin"value=perempuan">perempuan
</br>
</form>
</html>
Hasilnya:
kelamin jenis laki-laki perempuan
Contoh formulis dengan menggunakan
semua elemen input pada form:
<html>
<head>
<title>Belajar Membuat Form </title>
</head>
<center><U>BIODATA</U></CENTER>
<body>
<form action="
formulir.html" method="get">
Nama: <input type="text"
name="nama" value="DIAN MEILIA" />
<br />
Password: <input
type="password" nama=" nama" value="123456" />
<br />
Jenis Kelamin :
<input type="radio"
name="jenis_kelamin" value="laki-laki" checked />
Laki - Laki
<input type="radio"
name="jenis_kelamin" value="perempuan" checked />
Perempuan
<br />
Hobi: <input
type="checkbox" name="hobi_baca" /> Membaca Buku
<input type="checkbox" name="hobi_nulis" checked
/> Menulis
<br />
Asal Kota:
<select name="asal_kota" >
<option value="Kota sangatta"
selected>sangatta</option>
</select>
<br />
<input type="reset"
value="reset">
<input type="submit"
value="submit">
</form>
</body>
</html>
Hasilnya:
STYLE HALAMAN WEB
Tabel dalam website banyak digunakan untuk menyajikan
informasi yang terdiri dari baris dan kolom,agar tempat lebih rapi dan mudah
dipahami dengan css kita dapat mengatur style sebuah tabel agar tampak lebih
dan menarik tersedia beberapa proerti untuk tersedia beberapa file diantaranya
untuk mngatur border,warna baground,warna texk,margin dan panggin serta beberapa property untuk dalam mengatur
style sebuah tabel kita juga bisa mengatur style untuk bagian tabel seperti
tr,th,dan tabel.berikut ini beberapa properti dasar untuk mengatur style tabel
yaiutu;
1.boder adalah properti css yang digunakan untuk menetapkan
border sebuah table,dalam mengatur border kita menetapkan beberapa nilai
berikut;
-ketebalan garis border dengan satuan px
-style garis border misal.y solid(garis
penuh),dotted(titik-titik),atau
dashed(strib-strib0
-warna garis border
2.border collapse adalah properti css yang digunakan untuk
menetapkan sebuah border anatr sel dilebur jadi satu bolder atau dipisah
menjadi dua bolder
3.width lebar adalah properti css yang digunakan untuk
menetapkan lebar tabel atau lebar kolom pada tabel.jadi properti wid hanya
bekerja pada selector tabel dan th atau td saja.nilai wid bisa berupa teks atau
persen.
4.high adalah properti css yang digunakan untuk menetapkan
tinggi tabel atau garis pada tabel,jadi properti high hanya bekerja pada
selector tabel dan tr saja.nilai high untuk tabelbisa dinyatakan dalam px atau
persen,sedangkan nilai high untuk tr biasanya dinyatakan dalam bentuk px.
5.teks allignt adalah properti css yang digunakan untuk
mengatur alignt teks pada table.nilai properti ini bisa diset left,right,center
6.fertikal allignt adalah properti css yang dugunakan untuk
mengatur posisi vertikal alligment pada
tabel.nilai properti ini bisa disave top atau bottom.jika tidak diset
maka otomatis vertikal alligment pada posisi tengah.untuk menempatkan teks pada
posisi tertentu bisa digunakan properti padding.
7.margin adalah properti css yang digunakan untukmengatur
jarak tabel terhadap elemen lain disamping kiri,kanan atau sebelah atas atau
bawah.jadi jika diset 10px 2px 5px 3px
artinya:
-margin atas= 10 px
-margin kanan=2px
-margin bawah=5px
-margin kiri=3px
8.padding adalah properti css yang digunakan untuk mengatur
jarak antara border tabel dangan isi tabel.urutan nilai dari padding sama
dengan margin yaitu atas kanan bawah kiri.sebaiknya kita menggunakan padding
hanya pada th atau td saja
9.color adaah properti css yang digunakan untuk megatur
warna teks pada isi tabel
10.baground color adalah properti css yang digunakan untuk
mengartur warna baground sel pada tabel.
Contoh:
<html>
<head>
<style>
table { border-collapse:collapse}
table td,th {border:2px solid red}
</style>
</head>
<body>
<Table>
<tr>
<td>baris 1 kolom 1</td>
<td>baris 1 kolom 2</td>
</tr>
<tr>
<th>baris 2
kolom 1</th>
<th>baris 2 kolm 2</th>
</tr>
</table>
</body>
</html>
