materi internet dasar by m.najamudin ridha 2014.docx
Post on 22-Dec-2015
242 Views
Preview:
TRANSCRIPT
STMIK INDONESIA BANJARMASIN - PELATIHAN KOMPUTER
www.komputerkampus.com
3 Jam Menguasai HTMLadmin@komputerkampus.comM.Najamudin Ridha
Pelatihan KomputerSTMIK 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,
|
Elemen BODY
Elemen HEAD
Elemen HTML
Pelatihan KomputerSTMIK Indonesia Banjarmasin
maka kode HTML dapat ditulis dengan text editor biasa dan tidak terpaku pada sebuah
system operasi.
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 :
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 :
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>.
|
<HTML><HEAD>
<TITLE>BELAJAR HTML</TITLE></HEAD><BODY>
<H1>HELLO WORLD</H1></BODY>
</HTML>
<HTML><HEAD>
<TITLE>BELAJAR HTML</TITLE></HEAD><BODY>
<H1>HELLO WORLD</H1></BODY>
</HTML>
AtributElemen FONT
Pelatihan KomputerSTMIK Indonesia Banjarmasin
Sebuah elemen HTML selalu di mulai dengan tag pembuka dan tag penutup
(berpasangan), conten dari setiap elemen diletakkan diantaranya. Namun ada juga tag HTML
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.
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
|
<HTML><HEAD>
<TITLE>BELAJAR HTML</TITLE></HEAD><BODY>
<H1>HELLO WORLD</H1><FONT FACE=”ARIAL” SIZE=”30” COLOR=”RED”>MERAH</FONT>
</BODY></HTML>
Pelatihan KomputerSTMIK Indonesia Banjarmasin
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.
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 Leftcenterrightjustify
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
|
Pelatihan KomputerSTMIK Indonesia Banjarmasin
paragraf dengan garis bisa menggunakan horizontal line<HR />. Cara penulisan untuk paragraf
adalah sebagai berikut :
<P>Ini sebuah paragraf</P>, conten dari elemen P akan dicetak sebagai Paragraf.
Atribut elemen Paragraf <P> :
Atribut Value Fungsi
Align Leftcenterrightjustify
Mengatur rata horizontal dari paragraf default Left
Atribut elemen Horizontal Line <HR /> :
Atribut Value Fungsi
Align LeftcenterRight
Mengatur rata horizontal dari paragraf default Left
Noshade noshade Membuat HR menjadi warna Solid, bukan warna shade, default shade
Size Pixel Menentukan ukuran/besar garisWidth Pixel, % Menentukan lebar garisColor 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> Memformat text menjadi Bold<i> Memformat text menjadi Italic<u> Memformat text menjadi Underline<big> Memformat text menjadi Big<em> Memformat text menjadi emphasized<small> Memformat text menjadi small<strong> Memformat text menjadi strong
|
Pelatihan KomputerSTMIK Indonesia Banjarmasin
<sub> Memformat text menjadi subscripted<sup> Memformat text menjadi superscripted<ins> Memformat text menjadi inserted<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> Membuat tabel<tr> Membuat tabel row<th> Membuat tabel header <td> Membuat tabel cell<thead> Group konten header di tabel<tbody> Group konten body di tabel<tfoot> Group konten footer di tabel<caption> Membuat tabel caption<colgroup> Membuat group colum di tabel untuk di format<col /> Membuat nilai atribut untuk satu atau lebih colum
Atribut yang sering digunakan pada elemen table :
Atribut Value
align Left, center, rightbgcolor Colorborder Pixelcellpadding Pixelcellspacing Pixelframe Void, above, below, hsides, lhs,
rhs, vsides, box, borderrules None, groups, rows, cols, allwidth Pixel, %
Atribut yang sering digunakan pada elemen tr :
|
Atribut yang sering digunakan pada elemen th dan td:
Atribut Value
align Left, center, rightbgcolor Colorcolspan Numberrowspan Numberheight Pixel, %valign Top, middle, bottom,
baselinewidth Pixel, %
Pelatihan KomputerSTMIK Indonesia Banjarmasin
Atribut Value
align Left, center, rightbgcolor Colorvalign Top, middle, bottom, baseline
|
Pelatihan KomputerSTMIK Indonesia Banjarmasin
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 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 KomputerSTMIK 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> Membuat ordered list (number)<ul> Membuat unordered list (simbol)<li> Membuat list item<dl> Membuat definition list<dt> Membuat definition list item<dd> Membuat description dari definition list
Atribut yang sering digunakan ol :
Atribut Value
Start NumberType 1, A, a, I, i
Atribut yang sering digunakan ul :
Atribut Value
|
Atribut yang sering digunakan li :
Atribut Value
value numberType 1, A, a, I, i, disc,
square, circle
Pelatihan KomputerSTMIK Indonesia Banjarmasin
Type Disc, square, circleBerikut contoh kode list pada HTML :
Berikut hasilnya :
|
<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>
Pelatihan KomputerSTMIK 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 URL dokumen atau fileTarget _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 Judul gambarsrc URL gambaralign Top, bottom, middle,
left, rightborder pixelheight pixelwidth pixel
|
<a href=”filedokumen.html”>Klik disini</a>
<img src=”gambar/icon.jpg” wdth=”200px” alt=”Gambar pada HTML” />
URL : image terletak di folder gambar dan nama image adalah icon.jpg
Pelatihan KomputerSTMIK 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> Memulai Form HTML<input /> Membuat Input<textarea> Membuat Textarea<select> Membuat Select<option> Membuat Option<button> Membuat Tombol
|
Atribut untuk elemen <Form> :
Atribut Value
action URLmethod POST, GETname Nama formtarget _blank
_self_parent_topAtribut untuk elemen <input /> :
Atribut Value
align Left, center, rightchecked checkeddisabled disabledmaxlength Numberreadonly readonlysize Numbertype Button, checkbox, file,
hidden, password, text, radio, reset submit
value textname text
Atribut untuk elemen <textarea> :
Atribut Value
cols Numberrows NumberDisabled disabledname textreadonly readonly
Atribut untuk elemen <select> dan <option> :
Atribut Value
Disabled Disabledsize NumberName Textselected selectedvalue Text
Atribut untuk elemen <button> :
Atribut Value
Disabled DisabledName TextType Submit, reset,
buttonvalue Text
Pelatihan KomputerSTMIK Indonesia Banjarmasin
Berikut Contoh Kode HTML :
Berikut Hasilnya :
|
<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”/>PEREMPUANHOBBY : <INPUT TYPE=”CHECKBOX”/>BACA BUKU <INPUT TYPE=”CHECKBOX”/>ORGANISASI <INPUT TYPE=”CHECKBOX”/>LAINNYAASAL : <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>
Pelatihan KomputerSTMIK Indonesia Banjarmasin
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
M. Najamudin Ridha
|
top related