71materi Internet Dasar by M.najamudin Ridhajajaj PDF

STMIK INDONESIA BANJARMASIN - PELATIHAN KOMPUTER
www.komputerkampus.com
DASAR DASAR HTML

1 Hari Menguasai HTML
root@backtrack
M.Najamudin Ridha
2012/2013
Pelatihan Komputer
STMIK Indonesia Banjarmasin
1. Apa itu HTML?

HTML HTML adalah singkatan dari Hyper Text Markup
Language
yang
merupakan
suatu
metode
untuk
mengimplementasikan konsep hypertext dalam suatu naskah

atau dokumen website. HTML sendiri bukan tergolong pada
suatu bahasa pemrograman karena sifatnya yang hanya
memberikan tanda (marking up) pada suatu naskah teks dan
bukan sebagai program.
Meski HTML sendiri bukan merupakan bahasa pemrograman, HTML merupakan
kumpulan dari beberapa instruksi yang dapat digunakan untuk mengubah-ubah format suatu
naskah atau dokumen yang akan ditampilkan. HTML saat ini merupakan standar Internet yang
didefinisikan dan dikendalikan penggunaannya oleh World Wide Web Consortium (W3C).
Dalam web programming ataupun web desaign, HTML merupakan dasar yang wajib
diketahui. Karena itu untuk dapat melakukan pemrograman aplikasi di atas web anda harus
terlebih dahulu menguasai HTML.
2. Alat Membuat dan Menjalankan Dokumen HTML

Sebelum melangkah ke cara pembuatan dokumen HTML, ada baiknya terlebih dahulu
kita mengenal software/tools yang diperlukan untuk membuat dan menjalankan dokumen
HTML, untuk membuat dokumen HTML ada banyak tools yang bisa kita gunakan, misal dengan
menggunakan Professional HTML Editor seperti Adobe Dreamweaver, Microsoft Expression
Web, CoffeeCup HTML Editor, atau dengan Texteditor Biasa seperti Notepad (windows), Gedit
(Linux), TextEdit (Mac). Untuk menjalankan dokumen HTML kita memerlukan sebuah browser,
misal Internet Explore, Firefox, Google Chrome, Opera, Safari, Midori dan masih banyak lagi.
Mengapa ada banyak tools yang bisa digunakan untuk membuat
dokumen HTML? karena HTML bukan merupakan bahasa
pemrograman yang memerlukan sebuah compiler khusus untuk
menerjemahkan kodenya, maka kode HTML dapat ditulis dengan
text editor biasa dan tidak terpaku pada sebuah system operasi.
Oleh : M. Najamudin Ridha | www.komputerkampus.com
Pelatihan Komputer
3. Cara Membuat Dokumen HTML

Cara membuat dokumen html cukup dengan menggunakan editor text biasa seperti yang
di jelaskan di atas. Langkah pertama buka editor text anda, dan ketikkan kode berikut ini :
<HTML>
<HEAD>
<TITLE>BELAJAR HTML</TITLE>
</HEAD>
<BODY>
<H1>HELLO WORLD</H1>
</BODY>
</HTML>
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.
4. Elemen Dasar HTML

Seperti halnya bahasa pemrograman, HTML juga memiliki Elemen Dasar yang hampir
selalu digunakan, seperti kode yang telah kita tulis sebelumnya yaitu :
<HTML>
<HEAD>
</HEAD>
<BODY>
Elemen
BODY
</BODY>
</HTML>
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
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
</HEAD>
Elemen FONT
<BODY>
<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
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
Mengatur rata horizontal dari Heading

1 sampai 6, default Left
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
Atribut elemen Paragraf <P> :

Atribut
Value
Fungsi
Align
Left
center
right
justify
Mengatur rata horizontal dari paragraf

default Left
Atribut elemen Horizontal Line <HR /> :

Atribut
Value
Fungsi
Align
Mengatur rata horizontal dari paragraf

default Left
Noshade
Left
center
Right
noshade
Size
Pixel
Membuat HR menjadi warna Solid,

bukan warna shade, default shade
Menentukan ukuran/besar garis
Width
Pixel, %
Menentukan lebar garis
Color
Warna
Menentukan warna dari garis
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>
Memformat text menjadi Bold

Memformat text menjadi Italic
Memformat text menjadi Underline
<big>
<em>
<small>
<strong>
<sub>
<sup>
<ins>
Memformat text menjadi Big

Memformat text menjadi emphasized
Memformat text menjadi small
Memformat text menjadi strong
Memformat text menjadi subscripted
Memformat text menjadi superscripted
Memformat text menjadi inserted
Pelatihan Komputer
<del>
Memformat text menjadi deleted
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 />
Membuat tabel cell

Group konten header di tabel
Group konten body di tabel
Group konten footer di tabel
Membuat tabel caption
Membuat group colum di tabel untuk di format
Membuat nilai atribut untuk satu atau lebih colum
Atribut yang sering digunakan pada elemen table :

Atribut
Value
align
bgcolor
border
cellpadding
cellspacing
frame
rules
Left, center, right

Color
Pixel
Pixel
Pixel
Void, above, below, hsides, lhs,
rhs, vsides, box, border
None, groups, rows, cols, all
width
Pixel, %
Atribut yang sering digunakan pada elemen tr :

Atribut
Value
align
bgcolor
Left, center, right

Color
Atribut yang sering digunakan pada

elemen th dan td:
Atribut
Value
align
bgcolor
colspan
rowspan
height
valign
Left, center, right

Color
Number
Number
Pixel, %
Top, middle, bottom,
baseline
Pixel, %
width
Pelatihan Komputer
valign
Top, middle, bottom, baseline
Berikut contoh kode untuk membuat tabel :
<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>SAMSURI</TD>
<TD>WINDOWS 7 ULTIMATE</TD>
</TR>
<TR>
<TD>HAZMI FADHILLAH</TD>
<TD>LINUX UBUNTU 10.04</TD>
</TR>
<TR>
<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
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>
Membuat ordered list (number)

Membuat unordered list (simbol)
Membuat list item
Membuat definition list
Membuat definition list item
Membuat description dari definition list
Atribut yang sering digunakan ol :

Atribut
Value
Start
Type
Number
1, A, a, I, i
Atribut yang sering digunakan ul :

Atribut
Value
Type
Disc, square, circle
Atribut yang sering digunakan li :

Atribut
Value
value
Type
number
1, A, a, I, i, disc,
square, circle
Pelatihan Komputer
Berikut contoh kode list pada HTML :
<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
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
URL dokumen atau file
Target
_blank
_parent
_self
_top
<a href=filedokumen.html>Klik disini</a>
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
<img src=gambar/icon.jpg wdth=200px

alt=Gambar pada HTML />
10
URL : image terletak di folder gambar dan nama

image adalah icon.jpg
Pelatihan Komputer
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 />
Memulai Form HTML

Membuat Input
<textarea>
<select>
<option>
<button>
Membuat Textarea
Membuat Select
Membuat Option
Membuat Tombol
Atribut untuk elemen <Form> :

Atribut
Value
action
URL
method
name
POST, GET
Nama form
target
_blank
_self
_parent
_top
Atribut untuk elemen <input /> :

Atribut
Value
align
checked
disabled
Left, center, right

checked
disabled
maxlength
readonly
size
type
Number
readonly
Number
Button, checkbox, file,
hidden, password, text,
radio, reset submit
text
text
value
name
Atribut untuk elemen <select> dan

<option> :
Atribut
Value
Disabled
size
Name
selected
value
Disabled
Number
Text
selected
Text
Atribut untuk elemen <button> :

Atribut untuk elemen <textarea> :
Atribut
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
Berikut Contoh Kode HTML :
<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
14. Entities
Entities / simbol yang bisa digunakan pada dokumen HTML sangat banyak, berikut
diantaranya:
Selebihnya disini : http://www.w3schools.com/tags/ref_symbols.asp
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

71materi Internet Dasar by M.najamudin Ridhajajaj PDF

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

71materi Internet Dasar by M.najamudin Ridhajajaj PDF

Diunggah oleh

Hak Cipta:

Format Tersedia

STMIK INDONESIA BANJARMASIN - PELATIHAN KOMPUTER

DASAR DASAR HTML

1. Apa itu HTML?

mengimplementasikan konsep hypertext dalam suatu naskah

2. Alat Membuat dan Menjalankan Dokumen HTML

3. Cara Membuat Dokumen HTML

4. Elemen Dasar HTML

Oleh : M. Najamudin Ridha | www.komputerkampus.com

Oleh : M. Najamudin Ridha | www.komputerkampus.com

Mengatur rata horizontal dari Heading

Oleh : M. Najamudin Ridha | www.komputerkampus.com

Atribut elemen Paragraf <P> :

Mengatur rata horizontal dari paragraf

Atribut elemen Horizontal Line <HR /> :

Mengatur rata horizontal dari paragraf

Membuat HR menjadi warna Solid,

Menentukan lebar garis

Menentukan warna dari garis

Memformat text menjadi Bold

Memformat text menjadi Big

Oleh : M. Najamudin Ridha | www.komputerkampus.com

Memformat text menjadi deleted

Membuat tabel cell

Atribut yang sering digunakan pada elemen table :

Left, center, right

Atribut yang sering digunakan pada elemen tr :

Left, center, right

Atribut yang sering digunakan pada

Left, center, right

Oleh : M. Najamudin Ridha | www.komputerkampus.com

Top, middle, bottom, baseline

Berikut contoh kode untuk membuat tabel :

Oleh : M. Najamudin Ridha | www.komputerkampus.com

Membuat ordered list (number)

Atribut yang sering digunakan ol :

Atribut yang sering digunakan ul :

Disc, square, circle

Atribut yang sering digunakan li :

Oleh : M. Najamudin Ridha | www.komputerkampus.com

Berikut contoh kode list pada HTML :

Oleh : M. Najamudin Ridha | www.komputerkampus.com

URL dokumen atau file

<a href=filedokumen.html>Klik disini</a>

<img src=gambar/icon.jpg wdth=200px

URL : image terletak di folder gambar dan nama

Memulai Form HTML

Atribut untuk elemen <Form> :

Atribut untuk elemen <input /> :

Left, center, right

Atribut untuk elemen <select> dan

Atribut untuk elemen <button> :

Oleh : M. Najamudin Ridha | www.komputerkampus.com

Berikut Contoh Kode HTML :

Oleh : M. Najamudin Ridha | www.komputerkampus.com

Selebihnya disini : http://www.w3schools.com/tags/ref_symbols.asp

Oleh : M. Najamudin Ridha | www.komputerkampus.com

Anda mungkin juga menyukai