DASAR-DASAR PADA HTML
HTML (Hyper Text Marque Languange)
merupakan bahasa program atau script yang digunakan untuk menyusun
dokummen-dokumen html dalammembuat sebuah web.
Berikut script atau sintak yang digunakan besrta fungsinya.
Berikut script atau sintak yang digunakan besrta fungsinya.
·
<html> :
Untuk memulai sebuah HTML
·
<title> : Untuk
memberi judul pada yang nantinya akan muncul di Tab Browser
·
<head> :
Untuk Bagian Header atau Atas
·
</head> : Untuk
Penutup Header dan diawali dengan GARIS MIRING "/"
·
<body> :
Untuk Bagian Body atau Isi dalam HTML
·
</body> : Untuk
Penutup/menutup Body dan diawali dengan GARIS MIRING "/"
·
</html> : Untuk
Menutup Sebuah HTML dan diawali juga dengan GARIS MIRINg "/"
Nah
Itu kode-kode Dasar untuk membuat sebuah HTML
Dalam HTML dan masi banyak lagi.. brikut ini ada beberapa Tag yang saya ketahui dalam HTML.
Dalam HTML dan masi banyak lagi.. brikut ini ada beberapa Tag yang saya ketahui dalam HTML.
·
<h1> : ini
adalah Tag Heading, yang berlevel 1, selain <h1> ada juga <h2>,
<h3>, <h4>, <h5>, <h6>
·
<b> : (Bold)
Fungsinya untuk membuat Huruf menjadi Tebal
·
<i> :
(Italic) Fungsinya untuk membuat Huruf menjadi Miring
·
<u> :
(Underline) Fungsinya untuk membuat huruf ber garis bawah
·
<p> : Untuk
membuat sebuah Paragraf
·
<br> : untuk
Membuat sebuah baris baru atau enter
·
<hr> : untuk
membuat sebuah garis Horizontal
·
<center> : untuk
membuat tulisan atau gambar berada di tengah-tengah
·
<img
src="gambar-anda.jpg atau Url gambar anda"> : fungsinya untuk
memasukan sebuah gambar
·
<body
bgcolor="black"> : Fungsinya untuk memberi warna untuk background
atau latar belakang dan "black" bisa diganti sesuai keinginan anda,
misalnya "red", "yellow"
·
<font
color="red"> : Untuk mengatur warna Text dan ditutup dengan
</font>
·
<font
size="12"> : untuk mengatur Ukuran Sebuah Text dan ditutup dengan
</font>
·
<font
face="arial"> : Untuk mengatur jenis Font atau Text yang akan
digunakan
·
<marquee> : untuk
membuat sebuah text ataupun gambar bergerak
Contoh :
Scrip :
untuk menyimpan terserah anda tapi jangan lupa pakai .html
Hasil running-nya seperti ini :
Scrip :
Hasil running-nya seperti ini :
REVIEW HTML 5 PART 2 ( FORM + TABLE)
HTML Form digunakan
untuk memberikan data kesebuah server. Sebuah HTML Form dapat memiliki input –
input element antara lain text field, checkbox, radio-button, submit button dan
lain-lain. Sebuah form juga dapat mengandung select lists, textarea, fieldset,
legend, dan element label
Tag yang digunakan untuk
membuat HTML Form adalah<form>
Contoh:
·
password Field
·
Radio Button
·
Drop Down list/combo box
- Check box
- Submit Button
- Text Area
- Html Tables
MODUL III
MEMBUAT HEADING, BREAK
DAN PARAGRAF, STYLE
DOKUMEN
- Heading
Heading
sangatdiperlukandalamsuatudokumen. Karena heading disinimerupakan format
tertentudalamsuatuparagrafdanbisa juga dikatakansebagaijuduldarisuatuparagraf.
Komponen
Heading dalam HTML dimulaidengan<H1>, <H2>, <H3>, <H4>,
<H5>dan<H6>. Jadiukurandari heading
dapatdiaturdenganmenuliskansalahsatudarikomponentersebut. Janganlupasupaya
heading tidakmerambahkedokumenlainnyadiperlukan TAG penutup.
Misal<H1>JUDUL</H1>
Contoh
:
<html>
<head>
<title> LATIHAN
MODUL 3</title>
</head>
<body>
<h1>Company
Profile</h1>
<h2>Video
Sothing </h2>
<h3>Fhoto
Digital </h3>
<h4>Percetakan
</h4>
<h5>Rias
Pengantin </h5>
<h6>Transfer
DVD/VCD</h6>
</body>
</html>
Hasil
:
- Break
Jikamenulisdokumen yang
panjangtentudiperlukanpemenggalankalimatuntukmengefisiensikannya. Dalamdokumen
HTML pun berlakusama. Dalam program HTML komponenatau TAG yang
diperlukanuntukmemengalataumemotongkalimat yang panjangadalah break
ditulisdengan<Br>
Contoh
:
<html>
<title>
LATIHAN MODUL
3
</title>
</head>
<body>
<h2>Persyaratan
untuk menguasai ASP atau ASP.net</h2>
untuk mempelajari ASP
atau ASP.net diperlukan latar belakan atau <br>
penguasaan HTML. karena
tanpa menguasai HTML mustahil<br>
anda kakan mampu
menguasai ASP dengan baik dan benar. karena ASP <br>
juga dibundel dalam HTML
</body>
</html>
- Paragraf
<html>
<title>
LATIHAN MODUL
3
</title>
</head>
<body>
<h2>Persyaratan
untuk menguasai ASP atau ASP.net</h2>
untuk mempelajari ASP
atau ASP.net diperlukan latar belakan atau <br>
penguasaan HTML. karena
tanpa menguasai HTML mustahil<br>
anda kakan mampu
menguasai ASP dengan baik dan benar. karena ASP <br>
juga dibundel dalam HTML
<P>
Setelah anda menguasai
HTML anda juga dituntut mengerti IIS
<br>
(inernet information
service). IIS ini umumnya di bundel dalam <br>windows 2000. tetapi jika
anda menngunakan windows 95 atau <br>windows 98 di perlukan komponen PWS
(personal web server)
</P>
</body>
</html>
- Jenis Font
<html>
<title>
LATIHAN MODUL
3
</title>
</head>
<body>
<B>
Ini Menggunakan Huruf
TEbal</B>
<p>
<i>
Ini menggunakan Huruf
miring </i>
<p>
<u>
ini menggunakan Huruf
bergaris bawahi </u>
<p>
<strong>ini
seperti huruf tebal</strong>
<p>
<COde>ini
menyerupai huruf courier</Code>
<p>
<EM>ini menyerupai
huruf italic</EM>
<p>
<TT>ini adalah
Teletype write</TT>
<p>
<SAMP>ini
menyerupai kode </SAMP>
</body>
</html>
- Element Font
<html>
<Title>LATIHAN
MODUL 3</title>
<body>
<Head><font
color="green"><font size=+5>GLOBAL
WARMING</font></font></head><P>
<font
size=+3><font
color="red"><P>Surabaya</font></p></font><p>Perubahan
iklim berpengaruh pada pemanasan secara global. Dan ini tentunya<br>
akan membuat kehidupan
manusia akan menjadi sangat terancam. Bukan hanya<br>
kita saja yang turut
merasakan pengaruh buruknya tapi anak cucu kita pun akan<br>
mengalami hal yang sama
dengan kita. maka dari itulah dituntut kesadaran semua pihak dalam hal ini.
</P>
</body>
</html>
- Mengenal Bullet
<html>
<head>
<title>Datakom
Lintas Buana</title>
</head>
<body>
<h3>Datakom
Lintas Buana</h3>
<b>
Seri
Operasi System
</b>
<ul>
<li>
MIcrosoft Windows 2000 Profesional
<li>
Microsoft WIndows 2000 Server
<li>
instalasi dan KOnfigurasi Windows 2000
<li>
Melangkah dengan windows Me
<li>Satu
hari bersama windows XP
</ul>
</p>
<b>
seri microsoft office
</b>
<ol>
<li>microsoft
word 2003
<li>microsoft
excel 2003
<li>microsoft
power point 2003
<li>microsoft
Accesss 2003
</ol>
</body>
</html>
MODUL
IV
MEMBUAT
TABEL
- Tabel
Border
Border
adalah yang akanmengelilingi data dalamtabel.
Denganmenggunakanperintah<Table Border>. Tabel border
bisadiaturketebalannya :
·
Border 0
:digunakanapabilatidakmenggunakan border
·
Border 1
:digunakanbilamenggunakannilai border standar
·
Border 2
:digunakanbilaukuran border tebal.
<html>
<head>
<title>Sonic
Production</title>
</head>
<body>
<table>
<table
border>
<tr>
<td>kolom pertama
<td>kolom kedua
<td>kolom ketiga
</tr>
<tr>
<td> SATU
<td> DUA
<td> TIGA
</tr>
</table border>
<tabel>
</body>
</html>
- Mengatur Tabel
<html>
<head>
<title>Datacom
Lintas bUana</title>
</head>
<body>
<caption><div
align = center><b>DAFTAR MAHASISWA UMBO
</caption></b></div>
<table>
<Table Border=1
width=75% Align=center>
<tr>
<th>NO
<th>NAMA
<th>FAKULTAS
<th><div
align=right>JURUSAN</div>
<th>ALAMAT
</tr>
<tr>
<td>1.
<td>Pandu Setia
nugraha
<td>MiPA
<td>Ilmu KOmputer
<td>KOmplek LIPI
Cibinong
</tr>
<tr>
<td>2.
<td>Terra Surya
KIP
<td>FKIP
<td>Biologi
<td>Sukabumi,Jampangkulon
</tr>
</table>
</body>
</html>
- Warna
<Html>
<table
BGcolor=yellow>
<tr
bgcolor=yellow>
<td>No
<td>Nama
<td>TempatLahir
<td>TanggalLahir
<td>Alamat
</tr>
<tr
bgcolor=greey>
<td>1
<td>Tuntang
<td>Sukabumi
<td>6-6-1962
<td>Cibinong
</tr>
<tr
bgcolor=red>
<td>2
<td>Ganjar
PJ
<td>Jampangkulon
<td>1-1-1976
<td>Cibinong
</tr>
<tr Bgcolor=cyan>
<td>3
<td>Luly
<td>Cibadak
<td>1-10-1978
<td>CibadakSukabumi
</tr>
<tr
bgcolor=Magenta>
<td>4
<td>Dwicahyono
<td>Cibaduyut
<td>9-9-1989
<td>Jakarta
Selatan
</tr>
</Table>
</html>
MODUL
V
Gambar
Dan Animasi
- Membuat Gambar Didalam Tabel
<Html>
<Table
Border=1>
<TR>
<TD>NO
<TD>NAMA
<TD>ALAMAT
<TD>GAMBAR
</TR>
<TR>
<TD
Valign=TOP>01
<TD
VALIGN=TOP>NANA
<TD
VALIGN=TOP>MAGELANG
<TD
VALIGN=TOP>
<Img
src="jingg.jpg" height="100" weidth="100">
</TR>
<TR>
<TD
Valign=Top>02
<TD
Valign=Top>bumbum
<td
Valign=Top>Sanden, Magelang
<td
valign=top>
<Img
src="Wood.jpg" height="100" weidth="100">
</tr>
</table>
</Html>
- Menggunakan Teks Dan Gambar
<html>
<Table Border=2>
<H2><Font
size=+3>Menggunakan Teks dan Gambar<BR> </H2>
<image
src="jingg.jpg" height="100" weidth="100">
<Align=Left Vspace=10><hspace=10><Font size=-1>
Dalam waktu dekat buku
Microsoft Office Xpakan terbit. Di
samping itu juga akan
terbit buku Share Point Team Service yang
sayat ulis.
Dalam waktu dekat buku
Microsoft Office Xpakan terbit. Di
samping itu juga akan
terbit buku Share Point Team Service yang
saya tulis.Dalam waktu
dekat buku Microsoft Office Xpakan terbit. Di
samping itu juga akan
terbit buku Share Point Team Service yang saya tulis.Dalamwaktudekatbuku
Microsoft Office Xpakanterbit. Di
samping itu juga akan
terbit buku Share Point Team Service yang
saya tulis.Dalam waktu
dekat buku Microsoft Office Xpakan terbit.
</html>
MODUL
VI
Hypel
Link Atau Tautan
- Button
<html>
<h3>Menggunakan
Tombol Submid dan Reset</h3>
<form method=post
action="tampil.asp">
NAMA
<input
type=text Name=Nama1 size=30>
<br>
ALAMAT
<input
type=text Name=Nama2 size=40>
<br>
KOTA
<input
type=text Name=Nama3 size=40>
<p>
<input
type=submit name=Button1 value="kirim">
<input
type=reset name=button2 value="hapus">
</form>
</html>
- Checked
<html>
<h3>Menggunakan
CheckedBox</h3>
<p>
<form method=Post
action="Noactionyet"> Apaka kalian sudah LULUS SMP .. ???
<br>
<input
type="radio" name="Jawaban" Value="Y">Ya
<br>
<input
type="radio" name="Jawaban" Value="T">Tidak
<br>
</form>
</html>
- CheckedBox
<html>
<h3>Menggunakan
CheckedBox</h3>
<p>
<form method=Post
action="Noactionyet"> Microsoft Certified System Engineer adalah
.. ???
<br>
<input type=checkbox
name=Jawab1 Value="MCSE">MCSE <br>
<input type=checkbox
name=Jawab2 Value="MCP">MCP <br>
<input type=checkbox
name=Jawab3 Value="MCDBA">MCDBA <br>
<input type=checkbox
name=Jawab4 Value="MMOUS">MMOUS <br>
<input type=checkbox
name=Jawab5 Value="MOUS">MOUS <br>
</form>
</html>
- Membuat Password
<html>
<h3>Ketikkan
Password</h3>
<form method=post
action="http://localhost/E:/SMAN3/WEB/tampil.ASP">
User Name
<input
type=text name=Nama1 Size=30> <br>
Password
<input
type=Password name=Nama2 Size=8><p>
<input type=submit
name=Button Value="Login">
</form>
</html>
- Mengenal Komponen Form
<htlml>
<from>
<tr>
<h3>MENGENAL
KOMPONEN FORM </h3>
<br>
</tr>
<tr>
<td>NAMA
<input
type="text"name="Nama"size="20">
</tr>
<tr>
<br>
<td>ALAMAT
<input
type="text"name="Nama"size="30">
</tr>
<tr>
<br>
<td>KETERANGAN
<input
type="text"name="Nama"size="40">
</tr>
<tr>
<br>
</form>
</html>
- Menggunakan Button
<html>
<h3>Menggunakan
Type= BUtton</h3>
<form method=post
action="http://localhost/E:/SMAN3/WEB/tampil.ASP">
NAMA
<input
type=text Name=Nama1 size=30><br>
ALAMAT
<input
type=text Name=Nama2 size=40><br>
KOTA
<input
type=text Name=Nama3 size=40><p>
<input type=submit
name=Button1 Value="Kirim">
<input type=reset
name=button2 value="hapus">
<input type=Button
name=button3 value="Cari">
</form>
</html>
- Radio Button
<html>
<h3>RADIO
BUTTON</h3>
<p> Agama atau
kepercayaan terhadap Tuhan Yang Maha Esa :<br>
<input
type="radio"name="Agama"
Value="I">Islam<br>
<input
type="radio"name="Agama"
Value="K">Kristen<br>
<input
type="radio"name="Agama"
Value="H">Hindu<br>
<input
type="radio"name="Agama"
Value="B">Budha<br>
<input
type="radio"name="Agama"
Value="P">Protestan<br>
</html>
- Scroll Up dan Down
<html>
<h3>Menggunakan
Select dan Option</h3>
Buku ini diterbitkan
oleh
<p>
<select
name="PENERBIT">
<option>Fajar
Corporation Jakarta
<option>Hayat
Raharja
<option>Luly
lala
<option>Mahardika
<option>Salam
Kangen
<Option
Selected>Datakom Lintas Buana Jakarta
<Option>Kucar
Kacir Bogor
<Option>Angin
Ribut Sukabumi
<Option>Maju
Mundur Cianjur
<Option>Maju
Trus Bandung
<Option>Mundur
Bae Cianjur
</select>
</html>
- Select dan Option
<html>
<h3>Menggunakan
Select and option</h3>
<h4>Buku ini
diterbitkan oleh </h4>
<br>
<select
name="PENERBIT">
<Option>Fajar
Corporation Jakarta
<Option
Selected>Datakom Lintas Buana Jakarta
<Option>Kucar
Kacir Bogor
<Option>Angin
Ribut Sukabumi
<Option>Maju
Mundur Cianjur
<Option>Maju
Trus Bandung
<Option>Mundur
Bae Cianjur
</select>
</html>
- Teks Area
<html>
<h3>Menggunakan
Text area atau Memo</h3>
<form method=post
action=noactionyet>
<textarea name=Memo
Rows=10 Cols=50> Ketikkan Data Anda dikolom ini!!
</textarea>
</html>
MODUL
VII
Background
Dan Marquee
- Backround dengan image
<html>
<body
background="ku.jpg">
</html>
- Background Color
<html>
<body
text="blue"bgcolor="green"><H1>SELAMAT
DATANG</h1>
</html>
- Dengan Pixel
Marquee
width="150">Teks bergerak selebar 150px</Marquee>
- Dengan Prosentase
<Marquee
direction="up" height="75"><p>blog
a</p><br><p>blog b</p><br><p>blog
c</p></Marquee>
- Jeda Antara setiap gerakan
<Marquee
scrolldelay="40">scrolldelay="40", diabaikan dan
didefinisikan dengan nilai 60</Marquee><Marquee scrolldelay="40"
truespeed="true">scrolldelay="40", dengan
truespeed="true"</Marquee>
- Kecepatan Gerakan
Kode Marquee untuk angka
2 (scrollamout="2") adalah:
<Marquee
scrollamount="2">Keceptan gerak teks dengan
scrollamout="2"</Marquee> Kode Marquee untuk angka 6
(scrollamout="6") adalah:
<Marquee
scrollamount="6">Kecepatan gerak teks dengan
scrollamout="6"</Marquee>
- Marquee
<Marquee
direction="left">Teks bergerak dari kiri ke kanan</Marquee>
- Perilaku Gerakan
<Marquee
behavior="scroll">Teks bergerak dari kanan ke kiri</Marquee>
- Warna Latar Belakang
<Marquee
bgcolor="#ff0000">Latar belakang teks menggunakan nomor
hexadecimal untuk red</Marquee>
MODUL
VIII
MEMBUAT
MENU
- Last Verse
<html>
<body
text="Blue" bgcolor="yellow"> <H3>
<div Align=center>
DATAKOM LINTAS
BUANA</H3> <font color="black">
<p>
<a href=menu1.html
target=F2>Buku Baru<br></a>
<a href=menu2.html
target=F2>Akan Terbit<br></a>
<a href=menu3.html
target=F2>Sudah Beredar<br></a>
<a href=menu4.html
target=F2>Distributor<br></a>
<a href=menu5.html
target=F2>Buku Terlaris<br></a>
<a href=menu6.html
target=F2>KOmputer Untuk Anak<br></a>
</html>
- Verse 1 lintas buana
<html>
<H3>
<div Align=center>
<font
color="red">DATAKOM LINTAS BUANA
</H3>
<font
color="black">
<p>
<a
href=pilih1.html>Tentang Datakom<br></a>
<a
href=pilih2.html>Redaksi Datakom<br></a>
<a
href=pilih3.html>Buku Terbaru<br></a>
<a
href=pilih4.html>Sudah Terbit<br></a>
<a
href=pilih5.html>Divisi Marketing<br></a>
<a
href=pilih6.html>Divisi Keuangan<br></a>
</html>
- Verse 2 data lintas buana yellow background
<html>
<body
text="Blue" bgcolor="yellow">
<H3>
<div Align=center>
DATAKOM LINTAS
BUANA</H3>
<font
color="black">
<p>
<HR>
<p>
<a
href=menu1.html>Tentang Datakom<br></a>
<a
href=menu2.html>Redaksi Datakom<br></a>
<a
href=menu3.html>Buku Terbaru<br></a>
<a
href=menu4.html>Sudah Terbit<br></a>
<a
href=menu5.html>Divisi Marketing<br></a>
<a
href=menu6.html>Divisi Keuangan<br></a>
</html>
- Verse 3
<html>
<body
text="black" bgcolor="yellow">
<H1>
<marquee>SELAMAT
DATANG </marquee></h1>
<center>
<HR>
<h1>
DATAKOM LINTAS
JAKARTA</h1>
<hr>
Datakom LIntas Buana
adalah Penerbit buku Komputer Bermutu.
<br>
Buku yang diterbitkan
oleh Datakom LIntas Buana sebagian besar adalag best seller
</html>
- Verse 4
<html>
<body
text="Blue" bgcolor="yellow">
<H3>
<div Align=center>
DATAKOM LINTAS
BUANA</H3>
<font
color="black">
<p>
<HR>
<p>
<a
href=menu1.html>Tentang Datakom<br></a>
<a
href=menu2.html>Redaksi Datakom<br></a>
<a
href=menu3.html>Buku Terbaru<br></a>
<a
href=menu4.html>Sudah Terbit<br></a>
<a
href=menu5.html>Divisi Marketing<br></a>
<a
href=menu6.html>Divisi Keuangan<br></a>
</html>
Comments
Post a Comment