Pen Gen Alan HTML

Purwanto, S.
Kom [PENGENALAN INTERNET]
PENGENALAN DASAR HTML

(Hypertext Markup Language)
A. World Wide Web
Internet merupakan jaringan global yang menghubungkan suatu network dengan network
lainya di seluruh dunia, TCP/IP menjadi protocol penghubung antara
jaringan-jaringan yang beragam di seluruh dunia untuk dapat berkomunikasi.
World Wide Web (WWW) merupakan bagian dari internet yang paling cepat
berkembang dan paling populer. WWW bekerja merdasarkan pada tiga mekanisme
berikut:
 Protocol, standard aturan yang di gunakan untuk berkomunikasi pada computer

networking. Hypertext Transfer Protocol (HTTP) adalah protocol untuk WWW.
 Address WWW memiliki aturan penamaan alamat web yaitu URL (Uniform
Resource Locator) yang di gunakan sebagai standard alamat internet.
 HTML digunakan untuk membuat document yang bisa di akses melalui web.
B. HTML
Hypertext Markup Language merupakan standard bahasa yang digunakan untuk

menampilkan document web, yang bisa anda lakukan dengan HTML yaitu:
 Mengontrol tampilan dari web page dan contentnya.

 Mempublikasikan dokumen secara online sehingga bisa di akses dari seluruh.
 Membuat online form yang bisa digunakan untuk menangani pendaftaran, transaksi
secara online.
 Menambahkan object-object seperti image, audio, video dan juga java applet
dalam document HTML.
C. Browser dan Editor

 Browser
Browser merupakan software yang diinstall di mesin client yang berfungsi
untuk menterjemahkan tag-tag HTML menjadi halaman web. Browser yang sering di
gunakan biasanya Internet Explorer, Netscape Navigator dan masih banyak yang
lainya.
 Editor
Program yang digunakan untuk membuat document HTML, ada banyak HTML
editor yang bisa anda gunakan diantaranya: Ms FrontPage, Dreamweaver, Notepad.
STMIK PRANATA INDONESIA

1
Purwanto, S.Kom [PENGENALAN INTERNET]
D. BASIK HTML
 Tag- tag HTML
Command HTML biasanya disebut TAG. TAG digunakan untuk menentukan
tampilan dari document HTML. Hampir semua tag berpasangan.
<BEGIN TAG> </END TAG>
Contoh : Setiap document HTML diawali dan diakhiri dengan tag HTML.
<HTML>
...
<HTML>
Tag tidak case sensitive, jadi anda bisa gunakan <HTML> atau <html>
keduanya menghasilkan output yang sama.
Bentuk dari tag HTML sebagai berikut :
<ELEMENT ATTRIBUTE = “value”>
Element : nama tag

Attribute : atribut dari tag
Value : nilai dari atribut.
Contoh : <BODY BGCOLOR=”blue”>
BODY merupakan element, BGCOLOR merupakan atribut yang memiliki nilai blue.
 Struktur Documen HTML
 HTML
Setiap document HTML harus di awali dan di tutup dengan tag HTML
<HTML></HTML>
tag HTML memberi tahu browser bahwa didalam kedua tag tersebut
adalah document HTML.
 HEAD
Bagian header dari document HTML diapit oleh tag
<HEAD></HEAD>.
Didalam bagian ini biasanya dimuat tag TITLE yang menampilkan judul
dari halaman pada title browser.
Selain itu Bookmark juga menggunakan tag TITLE untuk memberi mark
suatu web site. Untuk keperluan pencarian (searching) biasanya title digunakan
sebagai keyword.

2
Header juga memuat tag META yang biasanya digunakan untuk

menentukan informasi tertentu mengenai document HTML, anda bisa
menentukan author name, keywords, dan lainyan pada tag META.
Contoh : Untuk membuat Author “Poer Java”
<META name=”Author” contents=”Poer Java”>
 BODY
Elemen body digunakan untuk menampilkan text, image, link, dan semua
yang akan di tampilkan pada web page.
<html>
<head>
<title>Welcome to HTML</title>
</head>
<body bgcolor="lightblue">
<p>Document HTML yang Pertama</p>
</body>
</html>
Jika file diatas diakses melalui browser maka akan muncul seperti berikut:
 BASIC HTML ELEMENT

 Block Level Element
Block level element yang sering digunakan Heading (H1 sampai H6)
Contoh:

3
<html>
<head>
<title>Heading Elements</title>
</head>
<body>
<h1>Heading Satu</h1>
<h2>Heading Dua</h2>
<h3>Heading Tiga</h3>
<h4>Heading Empat</h4>
<h5>Heading Lima</h5>
<h6>Heading Enam</h6>
</body>
</html>
 Paragraf (P)
Contoh:
<html>
<head>
<title>Formating Paragraf</title>
</head>
<body>
<h3>HTML</h3>
<p>
bahasa HTML sangat mudah dipelajari karena merupakan
bahasa bertanda sehingga hanya sedikit menuntut logika
</p>
<h2>PHP</h2>
<p>
script PHP menolong HTML ketika melakukan pengolahan
data karena HTML tidak dapat melakukannya
</p>
</body>
</html>

4
 List
List item digunakan untuk mengelompokkan data baik berurutan
(ordered list) maupun yang tidak berurutan (unordered list).
Ada tiga macam list yang bisa anda tambahkan ke document HTML:
1. Unordered List (Bullet) : Contoh :
<html>
<head>
<title>Unordered List Atau List Berurutan</title>
</head>
<body>
<P>Daftar Nama Hari</P>
<ul>
<li>Senin</li>
<li>Selasa</li>
<li>Rabu</li>
<li>Kamis</li>
<li>Jum’at</li>
<li>Sabtu</li>
<li>Minggu</li>
</ul>
</body>
</html>

5
2. Ordered List (Numbering)

Contoh :
</html>
</body>
<title>Ordered List</title>
</head>
<body>
<P>Jadwal Kegiatan</P>
<ol start="1" type="I">
<li>Senin</li>
<ol type="a">
<li>Masuk Kuliah</li>
<li>Bayar Kuliah</li>
</ol>
<li>Selasa</li>
<ol type="A">
<li>Jalan-jalan Ke PRJ</li>
<li>Beli Laptop</li>
</ol>
<li>Rabu</li>
<ol type="I">
<li>Jalan - Jalan Ke Ancol</li>
<li>Refresing</li>
</ol>
<li>Kamis</li>
</ol>
</body>
</html>

6
3. Definition List
Definition List terdiri dari tag <DL> … </DL>. Tag <DT> digunakan
untuk menentukan definition term serta tag <DD> menentukan
definition itu sendiri.
Contoh:
<html>
<head>
<title>Definition List</title>
</head>
<body>
<p><b>List of Internet Resource</b></p>
<dl>
<dt>HTML
<dd>HyperText Markup Langguage is not Language
Programming</dd>
</dt>
<dt>HTTP
<dd>HyperText Transfer Protocol is TCP/IP Protocol</dd>
</dt>
<dt>Internet
<dd>A network of network</dd>
</dt>
<dt>TCP/IP
<dd>Internet protocol</dd>
</dt>
</dl>
</body>
</html>

7
 Horizontal Rules(HR)
Horizontal Rule tag digunakan untuk menggambar garis horizontal
dalam document HTML. Atribut yang dimiliki :
Align : menetukan posisi dari HR, dengan Value : center | right |
left.
Width : untuk menentukan panjang HR default 100%
Size : untuk menentukan tebal dari HR dalam pixel
Noshade : efek bayangan.
 Inline atau Text Level Element

Inline level yang sering digunakan :
o EM, I, B dan FONT (Pemformatan font)
o A (hyperlink)
o BR (Break line)
o IMG (image)
 Pemformatan Page
Break Tag <BR> di gunakan untuk memulai baris baru pada document
HTML, tag ini fungsinya mirip dengan carriage return.
Contoh:
<html>
<head>
<title>Break Line</title>
</head>
<body>
<h3>Membuat Halaman Web</h3>
<p>
Mari kita mulai untuk membuat sebuah halaman web
untuk yang pertama kalinya. Untuk membuatnya benar-
benar sangat gampang, untuk itu kita akan menghilangkan
beberapa hal teknis yang tidak perlu diketahui pada saat
ini<br>Panduan ini akan membimbing kita untuk membuat
sebuah halaman web yang sederhana yang mengandung
tulisan/text, gambar, email, dan link ke beberapa halaman
web lain. <br>Yang kita butuhkan adalah sebuah program
text editor yang sederhana seperti NotePad, WordPad,
MicrosoftWord, WordPerfect, atau program lainnya di
dalam PC Anda untuk membuat tulisan/text.
Pertama, buka dokumen HTML Anda dengan membuat tag
seperti ini.
</p>
</body>
</html>

8
 Font
Dengan tag <FONT> anda bisa menentukan format tampilan font dalam
document HTML seperti color, size, style dan lainnya.
Contoh:
<html>
<head>
<title>Formating Font</title>
</head>
<body>
<font color="#9966FF" size="5"> PENGERTIAN
HTML
</font>
<p>
<font face="Courier New, Courier, mono">
HTML adalah bahasa pemograman web yang di
digunakan untuk membuat halaman situs,bahasa ga
terlalu sulit kok hanya degan beberapa tag da
attribut yang desertai kita dapat membuat halaman
web sederhana.
</font>
</p>
</body>
</html>

9
 Atribut font :
Color : untuk menentukan warna font, anda bisa menggunakan nama font atau
hexadecimal (#000000 - #ffffff)
Size : untuk menentukan ukuran dari font 1 - 7
Face : untuk menentukan jenis font biasanya dalam satu list ada beberapa font
dan akan dibaca mulai dari yang paling kiri.
 Penjelasan lebih lanjut tentang atribut :Color

Color merupakan attribute yang bisa anda tambahkan pada beberapa
element seperti body, font, link dan lainnya. Color dibagi dalam tiga
kategori warna primer yaitu red, green dan blue. Masing-masing color
didefinisikan dalam dua digit hexadecimal number : #RRGGBB.
Contoh hexadecimal :
#FF0000 Red
#00FF00 Green
#0000FF Blue
#000000 Black
#FFFFFF White
 Alignment
Align attribute digunakan untuk menentukan perataan object dalam
document HTML baik berupa text, object, image, paragraph, division dan
lain-lain. Nilai atribut ini :
Left : rata kiri
Right : rata kanan
Center : rata tengah
Justify : rata kanan kiri

10
 Format text
Tag-tag untuk memformat teks antara lain :
<B> ... </B> : bold text

<I> ... </I> : italic text
<U> ... </U> : underline Text
<BIG> ... </BIG> : untuk ukuran yang lebih besar dari normal
<SMALL> ... </SMALL> : Untuk ukuran yang lebih kecil dari normal
<STRIKE> ... </STRIKE> : Untuk memberi garis di tengah text
<SUP> ... </SUP> : Superscript text
<SUB> ... </SUB> : Subscript text
<CENTER> ..</CENTER> : Center document
<EM> ... </EM> : Untuk teks miring
<STRONG> ..</STRONG> : Text tebal
 Quotes / Indentasi
Untuk membuat indentasi paragraph kita bisa menggunakan
BLOCKQUOTE, untuk indentasi pendek anda bisa gunakan element Q.
Cotoh:
<html>
<head>
</head>
<body>
<font color="#9966FF" size="5"> PENGENALAN HTML
</font>
<p>
HTML adalah bahasa pemograman web yang di digunakan untuk
membuat halaman situs,bahasa ga terlalu sulit kok hanya degan beberapa
tag da attribut yang desertai kita dapat membuat halaman web
sederhana
<blockquote>
Saya akan menposting secara bertahap karna ga mungkin saya jelaskan
dalam 1 postingan ,ajip banget ga sih ?capek maksudnya....
</blockquote>
Sebelum kita membuat web sederhana dengan HTML saya akan
memberikan beberapa tag yang disertai fungsinya
</p>
</body>
</html>

11
 Preformatted text
Tag PRE di gunakan untuk menampilkan text sesuai dengan format aslinya.
Contoh :
<html>
<head>
</head>
<body>
<font color="#9966FF" size="5"> PENGENALAN
HTML
</font>
<p>
<pre>
•HTML: menandai awal dan akhir dokumen HTML
•HEAD: menandai bagian header dokumen HTML
•TITLE: memberi judul pada dokumen HTML
•BODY: menandai awal dan akhir isi dokumen (yang
ditampilkan)
</pre>
</p>
</body>
</html>

12
 Grouping element
Tag DIV dan SPAN digunakan untuk mengelompokkan element-element

HTML. Span digunakan untuk mendefinisikan inline content, sementara
div digunakan untuk block- level content.
Contoh :
<html>
<head>
<title>Div dan Span</title>
</head>
<body>
<div>
Divisi 1
<p>
Div-tag digunakan untuk mengelompokkan group element biasanya
untuk block-level element.
</p>
</div>
<div align="right"> Divisi 2
<p>
Ini didalam devisi kedua. di tulis dengan alignment kanan.
</p>
</div>
<span style="fontsize:25; color:lavender">
baris ini dalam span dengan warna lavender.
</span>
</body>
</html>

13
 Hyperlink
Ini merupakan salah satu keistimewaan yang dimiliki web. Dengan hyperlink
 Link Address
Absolute Address - merupakan full internet address (URL) yang

meliputi protocol, network location, dan path serta nama file.
Contoh :
- http ://www.yahoo.com/index.html
Relatif Address - URL yang tidak menyebutkan protocol dan network

locationnya (hanya path dan nama filenya). Contoh :
- pranataindonesia/web1/materi1.html
 Anchor
Tag Anchor <A> untuk menentukan hyperlink dalam document HTML.

Properti HREF digunakan untuk menentukan tujuan dari hyperlink tersebut.
<A HREF=”URL”> Hypertext </A>
<A HREF=”protocol://host.domain:port/path/filename”>Hyper text </A>
 Link ke Document Lain

14
Misalkan ada dua document html link1.htm dan link2.htm untuk membuat
link dari link1.htm ke link2.htm :
Link1.htm
<html>
<head>
<title>Using Link</title>
</head>
<body>
<center><font size="5" color=hotpink>Creating
Link
</font></center>
<br>
<a href="link2.htm"> Klik Disini Buat buka dokumen 2</a>
</body>
</html>
Link2.htm
<html>
<head>
<title>Document 2</title>
</head>
<center><font size="5"color=limegreen>Creating
Link
</font></center>
<br>
<a href="link1.htm"> back to document 1</a>
<body>
</body>
</html>
 Table
Tag <TABLE> digunakan untuk membuat table dalam document HTML.

Bagian pokok dari table adalah cell yang didefinisikan dengan menggunakan
tag <TD>.
<html>
<head>
<title>Using Table</title>
</head>
<body>
<table border="1">
<td>Table dengan sigle cell</td>
</table>
</body>
</html>
anda bisa menambahkan beberapa cell untuk membuat satu baris cell.

15
<html>
<head>
</head>
<body>
<table border="1">
<td>cell 1</td>
<td>cell 2</td>
<td>cell 3</td>
<td>cell 4</td>
</table>
</body>
</html>
berikutnya jika ingin membuat beberapa baris cell dalam table gunakan tag
<TR>.
<html>
<head>
</head>
<body>
<table border="1">
<tr>
<td>cell 1a</td>
<td>cell 1b</td>
<td>cell 1c</td>
</tr>
<tr>
<td>cell 2a</td>
<td>cell 2b</td>
<td>cell 2c</td>
</tr>
</table>
</body>
</html>
 Menambahkan Heading Cell

Untuk menambahkan heading pada tabel tambahkan tag berikut pada
tabel yang sudah dibuat
<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>

16
 Pemformatan tabel
Untuk memformat perataan text didalam tabel anda bisa gunakan
attribute Align dan valign (vertical Alignment )
Nilai Attribut :
Align : center|justify|left|right
Valign : Baseline|Top|Bottom|Middle
<tr align="center"
valign="baseline">
<td>cell 1a</td>
<td>cell 1b</td>
<td>cell 1c</td>
</tr>
<tr align="center"
valign="baseline">
<td>cell 2a</td>
<td>cell 2b</td>
<td>cell 2c</td>
</tr>
Anda juga bisa menambahkan attribute cellspacing untuk memberi

spasi antar sell dan cellpadding untuk spasi dan border ke text dalam
cell.
 Merge Cell
Tag <TD> memiliki attribut colspan untuk merge column dan
rowspan untuk merge baris.
Contoh:

17
<html>
<head>
</head>
<body>
<table bgcolor=”CCCCFF” width="62%" border="1"
cellpadding="0">
<tr>
<td colspan="3" align="center">Quarter 1</td>
<td colspan="3" align="center">Quarter 2</td>
</tr>
<tr align="center">
<td>Jan</td>
<td>Feb</td>
<td>Mar</td>
<td>Apr</td>
<td>May</td>
<td>Jun</td>
</tr>
<tr><td>100</td>
<td>5000</td>
<td>200</td>
<td>1500</td>
<td>2500</td>
<td>1750</td>
</tr>
<tr>
<td>290</td>
<td>5050</td>
<td>2300</td>
<td>100</td>
<td>270</td>
<td>300</td>
</tr>
</table>
</body>
</html>

18

Pen Gen Alan HTML

Diunggah oleh

Informasi Dokumen

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

Pen Gen Alan HTML

Diunggah oleh

Hak Cipta:

Format Tersedia

Purwanto, S.

Kom [PENGENALAN INTERNET]

PENGENALAN DASAR HTML

 Protocol, standard aturan yang di gunakan untuk berkomunikasi pada computer

Hypertext Markup Language merupakan standard bahasa yang digunakan untuk

 Mengontrol tampilan dari web page dan contentnya.

C. Browser dan Editor

STMIK PRANATA INDONESIA

<ELEMENT ATTRIBUTE = “value”>

Element : nama tag

 Struktur Documen HTML

STMIK PRANATA INDONESIA

Header juga memuat tag META yang biasanya digunakan untuk

<META name=”Author” contents=”Poer Java”>

 BASIC HTML ELEMENT

STMIK PRANATA INDONESIA

STMIK PRANATA INDONESIA

STMIK PRANATA INDONESIA

2. Ordered List (Numbering)

STMIK PRANATA INDONESIA

STMIK PRANATA INDONESIA

 Inline atau Text Level Element

STMIK PRANATA INDONESIA

STMIK PRANATA INDONESIA

 Penjelasan lebih lanjut tentang atribut :Color

STMIK PRANATA INDONESIA

<B> ... </B> : bold text

STMIK PRANATA INDONESIA

STMIK PRANATA INDONESIA

Tag DIV dan SPAN digunakan untuk mengelompokkan element-element

STMIK PRANATA INDONESIA

Absolute Address - merupakan full internet address (URL) yang

Relatif Address - URL yang tidak menyebutkan protocol dan network

Tag Anchor <A> untuk menentukan hyperlink dalam document HTML.

<A HREF=”URL”> Hypertext </A>

<A HREF=”protocol://host.domain:port/path/filename”>Hyper text </A>

 Link ke Document Lain

STMIK PRANATA INDONESIA

Tag <TABLE> digunakan untuk membuat table dalam document HTML.

STMIK PRANATA INDONESIA

 Menambahkan Heading Cell

STMIK PRANATA INDONESIA

Anda juga bisa menambahkan attribute cellspacing untuk memberi

STMIK PRANATA INDONESIA

STMIK PRANATA INDONESIA

Anda mungkin juga menyukai