71materi Internet Dasar by M.najamudin Ridha PDF
71materi Internet Dasar by M.najamudin Ridha PDF
www.komputerkampus.com
2012/2013
Pelatihan Komputer
STMIK Indonesia Banjarmasin
yang
merupakan
suatu
metode
untuk
Pelatihan Komputer
STMIK Indonesia Banjarmasin
setelah itu save dan pilih lokasi penyimpanannya (sesuaikan saja), dan untuk nama
filenya namafile.html (selalu di akhiri .html). jika extensi file di hidden pada komputer anda,
lakukan sedikit perubahan dengan memilih save as All Files agar extensinya juga berubah.
Elemen
HTML
Elemen
HEAD
Ada brapa Elemen HTML diatas? Pada kode diatas terdapat 3 elemen HTML dasar yang
Hampir selalu digunakan, yaitu <HTML></HTML>, <HEAD></HEAD> dan <BODY>...</BODY>.
Sebuah elemen HTML selalu di mulai dengan tag pembuka dan tag penutup
(berpasangan), conten dari setiap elemen diletakkan diantaranya. Namun ada juga tag HTML
Pelatihan Komputer
STMIK Indonesia Banjarmasin
yang tidak mempunyai pasangan, maka tag penutup diletakkan di awal tagnya. Selain itu,
beberapa elemen HTML boleh tidak memiliki konten. Dan sebagian besar unsur HTML memiliki
beberapa atribut.
5. Atribut HTML
Setiap elemen HTML selalu memiliki atribut, atribut dapat memberikan informasi
tambahan tentang elemen HTML, untuk menambahkan atribut selalu ditentukan pada tag
pembuka HTML. Cara penulisan atribut adalah :
align = center
nama_atribut = value_atribut
Apabila kita menuliskan sebuah atribut, langsung ditambahkan value dari atribut tersebut. Dan
ada sebagian elemen HTML yang memiliki atribut default walau atributnya tidak ditambahkan.
Berikut contoh penambahan atribut pada elemen HTML.
<HTML>
<HEAD>
Atribut
<TITLE>BELAJAR HTML</TITLE>
</HEAD>
Elemen FONT
<BODY>
<H1>HELLO WORLD</H1>
<FONT FACE=ARIAL SIZE=30 COLOR=RED>MERAH</FONT>
</BODY>
</HTML>
Ada 3 atribut yang digunakan elemen FONT, yaitu FACE untuk menentukan jenis
tulisan yang digunakan elemen font, SIZE untuk menentukan ukuran/besar dari elemen font
dan COLOR untuk menentukan warna dari elemen font.
Setiap elemen HTML memiliki atribut yang bisa digunakan, Untuk pembahasan elemen
yang sering digunakan berikutnya akan dilengkapi dengan atribut yang bisa dan sering
digunakan. Atribut yang selalu ada dalam setiap elemen HTML adalah : class, id, style dan title.
Setelah ini akan dibahas elemen-elemen yang sering digunakan dalam HTML.
Pelatihan Komputer
STMIK Indonesia Banjarmasin
6. Heading
Elemen Heading pada HTML berguna untuk
membuat sebuah Judul dalam sebuah laman website,
gunakan elemen Heading HTML hanya untuk judul saja,
jangan gunakan untuk membuat tulisan tebal / besar,
setiap heading mempunyai level yaitu H1 .. H6. Untuk
judul utama bisa menggunakan H1, dan untuk sub judul
berikutnya bisa menggunakan H2, dan untuk sub judul
H2 bisa menggunakan H3 dan seterusnya. Cara penulisan
sebagai berikut :
<H1>Heading 1</H1> Conten dari elemen H1 akan dicetak sebagai Heading 1, dan ukuran
heading terbesar adalah heading 1, dan terkecil adalah heading 6.
Atribut elemen Heading <HN>:
Atribut
Value
Fungsi
Align
Left
center
right
justify
7. Paragraf
Elemen Paragraf pada HTML berguna untuk
membuat paragraf dari sebuah laman HTML, untuk
penggunaan paragraf bisa dengan menggunakan tag <P>,
jika ingin membuat line break <BR /> (Enter) pada satu
paragraf diperbolehkan. Dan untuk memisahkan antar
paragraf dengan garis bisa menggunakan horizontal
line<HR />. Cara penulisan untuk paragraf adalah sebagai
4
berikut :
<P>Ini sebuah paragraf</P>, conten dari elemen P akan dicetak sebagai Paragraf.
Pelatihan Komputer
STMIK Indonesia Banjarmasin
Value
Fungsi
Align
Left
center
right
justify
Value
Fungsi
Align
Noshade
Left
center
Right
noshade
Size
Pixel
Width
Pixel, %
Color
Warna
8. Format Text
Untuk memformat text, kita dapat menggunakan beberapa elemen yang fungsinya
memang untuk menformat text, berikut elemen-elemen yang bisa digunakan :
Tag
Fungsi
<b>
<i>
<u>
<big>
<em>
<small>
<strong>
<sub>
<sup>
<ins>
Pelatihan Komputer
STMIK Indonesia Banjarmasin
<del>
9. Tabel
Untuk memformat table, kita dapat menggunakan beberapa elemen yang fungsinya
memang untuk menformat tabel, berikut elemen-elemen yang bisa digunakan :
Tag
Fungsi
<table>
<tr>
<th>
Membuat tabel
Membuat tabel row
Membuat tabel header
<td>
<thead>
<tbody>
<tfoot>
<caption>
<colgroup>
<col />
Value
align
bgcolor
border
cellpadding
cellspacing
frame
rules
width
Pixel, %
Value
align
bgcolor
Value
align
bgcolor
colspan
rowspan
height
valign
width
Pelatihan Komputer
STMIK Indonesia Banjarmasin
valign
<HTML>
<HEAD>
<TITLE>BELAJAR HTML - TABLE</TITLE>
</HEAD>
<BODY>
<H2>TABEL PENGGUNA DAN OPERATING SYSTEM</H2>
<TABLE BORDER=1 RULES=ALL BGCOLOR=RED WIDTH=600>
<TR BGCOLOR=GREEN>
<TH>NO</TH>
<TH>NAMA PENGGUNA</TH>
<TH>OPERATING SYSTEM</TH>
</TR>
<TR>
<TD ALIGN=CENTER>01</TD>
<TD BGCOLOR=YELLOW>M. NAJAMUDIN RIDHA</TD>
<TD>LINUX BACKTRACK 5</TD>
</TR>
<TR>
<TD ALIGN=CENTER>02</TD>
<TD>SAMSURI</TD>
<TD>WINDOWS 7 ULTIMATE</TD>
</TR>
<TR>
<TD ALIGN=CENTER>03</TD>
<TD>HAZMI FADHILLAH</TD>
<TD>LINUX UBUNTU 10.04</TD>
</TR>
<TR>
<TD ALIGN=CENTER>04</TD>
<TD>ASRANI</TD>
<TD>WINDOWS XP ULTIMATE</TD>
</TR>
<TR>
<TD COLSPAN=3 ALIGN=CENTER BGCOLOR=YELLOW>
STMIK INDONESIA BANJARMASIN</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Pelatihan Komputer
STMIK Indonesia Banjarmasin
Berikut hasinya :
10. List
Untuk membuat sebuah list, kita dapat menggunakan beberapa elemen yang fungsinya
memang untuk menformat list, berikut elemen-elemen yang bisa digunakan :
Tag
Fungsi
<ol>
<ul>
<li>
<dl>
<dt>
<dd>
Value
Start
Type
Number
1, A, a, I, i
Value
Type
Value
value
Type
number
1, A, a, I, i, disc,
square, circle
Pelatihan Komputer
STMIK Indonesia Banjarmasin
<HTML>
<HEAD>
<TITLE>BELAJAR HTML - LIST</TITLE>
</HEAD>
<BODY>
<H2>WARUNG MAKAN BULEK</H2>
<OL TYPE=A>
<LI>MAKANAN
<UL TYPE=SQUARE>
<LI>SOTO AYAM</LI>
<LI>BAKSO MENADO</LI>
<LI>LALAPAN</LI>
</UL>
</LI>
<LI>MINUMAN
<OL TYPE=I>
<LI>ES JERUK</LI>
<LI>ES TEH</LI>
<LI>THE HANGAT</LI>
</OL>
</LI>
<LI>JUS
<OL TYPE=1>
<LI>MANGGA</LI>
<LI>SIRSAK</LI>
<LI>APEL</LI>
</OL>
</LI>
</OL>
</BODY>
</HTML>
Berikut hasilnya :
9
Pelatihan Komputer
STMIK Indonesia Banjarmasin
11. HyperLink
Sebuah hyperlink (link) adalah sebuah kata, kumpulan kata atau gambar yang dapat di
klik untuk menuju halaman baru atau bagian baru dalam sebuah dokumen. Bila anda
memindahkan kursor di atas link dalam halaman web, maka panah akan berubah menjadi
tanda tangan kecil. Link dalam html menggunakan tag <a>.
Atribut yang dapat digunakan dalam tag <a>.
Atribut
Value
Href
Target
_blank
_parent
_self
_top
12. Image
Gambar didalam HTML menggunakan tag <img />. Untuk menampilkan gambar dalam
tag <img/> harus menggunakan atribut src (singkatan source). Dan value dari atribut src adalah
URL gambar yang ingin ditampilkan.
Atribut yang bisa digunakan pada tag <img /> :
Atribut
Value
alt
src
align
border
height
Judul gambar
URL gambar
Top, bottom, middle,
left, right
pixel
pixel
width
pixel
10
Pelatihan Komputer
STMIK Indonesia Banjarmasin
13. Form
Untuk memperoleh sebuah informasi atau data dari pengguna kita bisa menggunakan
fasilitas form, seperti checkbox, radio button, tombol submit dan banyak lagi, dan untuk
dikirimkan ke laman/server tujuan. Ada banyak elemen HTML yang dapat digunakan untuk
form, berikut elemen-elemen tersebut :
Tag
Fungsi
<form>
<input />
<textarea>
<select>
<option>
<button>
Membuat Textarea
Membuat Select
Membuat Option
Membuat Tombol
Value
action
URL
method
name
POST, GET
Nama form
target
_blank
_self
_parent
_top
Value
align
checked
disabled
maxlength
readonly
size
type
Number
readonly
Number
Button, checkbox, file,
hidden, password, text,
radio, reset submit
text
text
value
name
Value
Disabled
size
Name
selected
value
Disabled
Number
Text
selected
Text
Value
cols
rows
Disabled
name
readonly
Number
Number
disabled
text
readonly
Atribut
Value
Disabled
Name
Type
Disabled
Text
Submit, reset,
button
Text
value
11
Pelatihan Komputer
STMIK Indonesia Banjarmasin
<HTML>
<HEAD>
<TITLE>BELAJAR HTML - FORM</TITLE>
</HEAD>
<BODY>
<H2>FORM REGISTRASI</H2>
<FORM ACTION=PAGE2.HTML>
<PRE>
NAMA : <INPUT TYPE=TEXT SIZE=40 MAXLENGTH=50/>
SANDI : <INPUT TYPE=PASSWORD SIZE=40/>
JKEL
: <INPUT TYPE=RADIO NAME=JKEL/>LAKI-LAKI
<INPUT TYPE=RADIO NAME=JKEL/>PEREMPUAN
HOBBY : <INPUT TYPE=CHECKBOX/>BACA BUKU
<INPUT TYPE=CHECKBOX/>ORGANISASI
<INPUT TYPE=CHECKBOX/>LAINNYA
ASAL : <SELECT>
<OPTION>SMAN</OPTION>
<OPTION>MAN</OPTION>
<OPTION>SMKN</OPTION>
</SELECT>
PESAN : <TEXTAREA COLS=40 ROWS=4></TEXTAREA>
<BUTTON TYPE=SUBMIT>KIRIM DATA</BUTTON>
<BUTTON TYPE=RESET>RESET DATA</BUTTON>
</PRE>
</FORM>
</BODY>
</HTML>
Berikut Hasilnya :
12
Pelatihan Komputer
STMIK Indonesia Banjarmasin
14. Entities
Entities / simbol yang bisa digunakan pada dokumen HTML sangat banyak, berikut
diantaranya:
15. Kesimpulan
Materi untuk HTML dasar sudah dipaparkan sebisa mungkin, dan tidak semua hal yang
ada pada HTML dibahas dalam materi ini. untuk selanjutnya anda dapat pelajari kembali di
w3schools.com atau di situs lainnya. seperti iframe, frame dan masih banyak lagi yang tidak
sempat untuk dibahas dalam materi kali ini. Semoga materi kali ini bermanfaat. Salam
TTD
13
M. Najamudin Ridha