Materi Internet Dasar By M.Najamudin Ridha 2014.docx

STMIK INDONESIA BANJARMASIN - PELATIHAN KOMPUTER

www.komputerkampus.com

3 Jam Menguasai [email protected] 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


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>


<H1>HELLO WORLD</H1></BODY>

</HTML>

AtributElemen FONT


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>


<H1>HELLO WORLD</H1><FONT FACE=”ARIAL” SIZE=”30” COLOR=”RED”>MERAH</FONT>

</BODY></HTML>


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

|


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> :


Align Leftcenterrightjustify

Mengatur rata horizontal dari paragraf default Left

Atribut elemen Horizontal Line <HR /> :


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

|


<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, %


Atribut Value

align Left, center, rightbgcolor Colorvalign 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 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>


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


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>


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


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


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>


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

|

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

Materi Internet Dasar By M.Najamudin Ridha 2014.docx

Documents

Transcript of Materi Internet Dasar By M.Najamudin Ridha 2014.docx