MODUL I Dasar Dasar HTML

KEMENTERIAN PENDIDIKAN DAN KEBUDAYAAN
POLITEKNIK NEGERI MALANG

JURUSAN ADMINISTRASI NIAGA
Jl. Soekarno Hatta No. 9 Malang 65141
Telp (0341) 404424 – 404425 Fax (0341) 404420
http://www.poltek-malang.ac.id
MODUL I
DASAR – DASAR HTML
Disusun untuk memenuhi

Matakuliah PHP
Yang Dibimbing oleh Angga Achmad Cholid, S.Pd., M.Pd.

D3 ADMINISTRASI BISNIS
MARET 2018
1
2

Telp (0341) 404424 – 404425 Fax (0341) 404420
MODUL I
DASAR – DASAR HTML
A. TUJUAN
1. Memahami Struktur dasar dokumen HTML.

2. Mampu membuat dokumen HTML yang baik dan benar.
3. Mampu memanfaatkan elemen-elemen dasar untuk menampilkan
informasi.
B. DASAR TEORI
1. HTML
adalah bahasa markup yang umum digunakan. Kepopuleran HTML
disebakan karena HTML ini mudah digunakan. Pembuatan dokument
WEB dengan HTML dapat dilakukan dengan mudah dan cepat.
Dokumen WEB dapat tersaji dengan cepat ke banyak pembaca di seluruh
dunia sekaligus. HTML mudah melakukan kontrol terhadap tampilan
halaman WEB baik berupa teks, gambar, suara, animasi maupun video.
HTML merupakan singkatan dari Hypertex Markup Language.
HTML digunakan untuk membangun halaman WEB. Sekalipun banyak
orang menyebutnya sebagai bahasa pemrograman, HTML sebenarnya
sama sekali bukan bahasa pemrograman, hal ini terlihat dari namanya,
HTML adalah suatu bahasa Markup. HTML digunakan untuk melakukan
mark-up (penandaan) terhadap sebuah dokumen teks. Tanda tersebut
digunakan untuk menentukan format atau style dari teks yang ditandai.
3

Telp (0341) 404424 – 404425 Fax (0341) 404420
2. Struktur Dokumen HTML

Setiap dokumen HTML harus di awali dengan tag <html> dan di
akhiri dengan komplemennya, yakni tag </html> tag. Dokumen HTML
juga menyertakan tiga pasang tag.
a. Tag <head> dan </head>: di gunakan untuk menyatakan informasi
mengenai dokumen HTML.
b. Tag <title> dan </title>: di gunakan untuk menambahkan title di title
bar browser.
c. Tag <body> dan </body>: di gunakan untuk melingkupi semua teks
yang terdapat di halaman HTML.
C. LATIHAN
3. Membuat Dokumen HTML

Secara garis besar, struktur dokumen HTML terdiri dari dua bagian:
header dan bodi. Di mana header mendefinisikan informasi mengenai
dokumen, sedangkan bodi mendefinisikan tubuh atau isi dokumen.
a. Membuka editor teks
b. Mengetik kode-kode HTML
<!DOCTYPE html>
<html lang="en">
<head>

<title> Ini judul dokumen </title>
</head>
<body>
Ini adalah teks di body
</body>
</html>
c. Menyimpan dokumen HTML dengan nama latihan 1.1 dengan
diletakkan dilokasi direktori web.
d. Hasil pembuatan dokumen HTML.
4

Telp (0341) 404424 – 404425 Fax (0341) 404420
Gambar 1. Tampilan halaman web

4. Publikasi Halaman Web
Untuk menguji aplikasi web kita, Langkah yang diperlukan untuk
publikasi ini sangat sederhana.
a. Memanggil kembali file dokumen yang sudah diletakkan pada
direktori Web / di htdocs.
b. Memastikan web server sudah dijalankan
c. Membuka web browser kemudian mengetik alamat URL yang
merujuk ke lokasi dokumen.
d. Hasilnya
Gambar 2. Mengakses halaman web dari server local

5

Telp (0341) 404424 – 404425 Fax (0341) 404420
5. Format Teks
a. Heading
Heading merupakan salah satu elemen penting di dalam dokumen
HTML. Heading didefinisikan menggunakan tag <hn> dan
diakhiri dengan </hn>, di mana n menyatakan tipe dengan nilai
1-6.
1) Membuat dokumen HTML seperti langkah kerja membuat
dokumen HTML dengan kode HTML heading seperti dibawah
ini :
<html>
<head>
<title> Heading <title>
</head>
<body>
<h1> Heading 1 </h1>
</body>
</html>
2) Hasilnya
Gambar 3. Tampilan heading 1-6

6

Telp (0341) 404424 – 404425 Fax (0341) 404420

dokumen HTML dengan kode HTML heading dengan
menggunakan atribut align seperti dibawah ini :
<html>
<head>
<title> Aligment </title>
</head>
<body>
<h1 align="right> Heading 1 </h1>
<h2 align="left"> Heading 2 </h2>
<h3 align="center"> Heading 3 </h3>
</body>
</html>
4) Hasilnya
Gambar 4. Mengatur posisi heading

b. Paragraf
dokumen HTMLdengan kode paragraf HTML seperti dibawah
ini :
<html>
<head>
<title> Paragraf </title>
</head>
<body>

Ini Paragraf pertama

Lorem ipsum dolor sit amet, consectetur
adipisicing elit,
sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud
exercitation ullamco
laboris
nisi ut aliquip ex ea commodo consequat.
Ini paragraf ketiga

</body>
</html>
7

Telp (0341) 404424 – 404425 Fax (0341) 404420
2) Hasilnya
Gambar 5. Menggunakan paragraf
3) Sebagaimana heading, kita juga bisa mengatur posisi paragraf

dengan memanfaatkan atribut align. Sebagai contoh, dokumen
berikut akan menghasilkan paragraf rata tengah, kiri
kanan, dan kanan dengan kode paragraf HTML dengan align
seperti dibawah ini :
<html>
<head>
<title> Demo Paragraf+align </title>
</head>
<body>

Ini Paragraf Rata tengah

adipisicing elit,
et dolore magna
aliqua.

laboris

Ini paragraf rata kanan
</body>
</html>
8

Telp (0341) 404424 – 404425 Fax (0341) 404420
4) Hasilnya
Gambar 6. Mengatur posisi paragraf

dokumen HTML dengan kode paragraf HTML dengan
menambahkan paragraf baru, kita tidak harus menggunakan
paragraf. Sebagai gantinya, gunakan tag line break .
dengan seperti dibawah ini :
<html>
<head>
<title> Demo Paragraf+baris baru </title>
</head>
<body>
Membuat baris baru 
Membuat baris baru 


adipisicing elit,
 
et dolore magna
aliqua.

laboris
</body>
</html>
9

Telp (0341) 404424 – 404425 Fax (0341) 404420
6) Hasilnya
Gambar 7. Membuat baris baru
c. Fontase
Di dalam HTML terdapat sejumlah elemen yang dapat
dimanfaatkan untuk mengatur font, seperti huruf tebal, miring,
garis bawah dan sebagainya.
dokumen HTML dengan kode HTML mengenai mencetak tag.
Sebagai contoh, karakter < dinyatakan dengan nama entitas
< dan karakter > dinyatakan dengan >.
<html>
<head>
<title> Demo Fontase </title>
</head>
<body>
Menggunakan tag
... 
Menggunakan tag
...
 
Menggunakan tag
...
 
Menggunakan tag
... 
Menggunakan tag
... 
<strike>Menggunakan tag
<strike>...</strike></strike> 
</body>
</html>
10

Telp (0341) 404424 – 404425 Fax (0341) 404420
2) Hasilnya
Gambar 8. Menggunakan style font
d. Karakter Khusus
Di dalam HTML juga terdapat karakter-karakter khusus yang dapat
dimanfaatkan dengan nama entitas.
dokumen HTML dengan kode HTML menampilkan karakter
khusus : <html>
<head>
<title> Demo Karakter Khusus </title>
</head>
<body>
£ Pound 
€ Euro 
© Copyright 
® Registered 
™ Trademark 
</body>
</html>
2) Hasilnya
Gambar 9. Karakter-karakter khusus

11

Telp (0341) 404424 – 404425 Fax (0341) 404420
e. Preformatted Text
Merupakan teks yang kita tulis sesuai dengan apa yang dituliskan.
Pada kasus ini pemanfaatannya menggunakan tag <pre>, dalam
tag ini juga akan menampilkan font Courier dan tetap
mempertahankan spasi dan baris baru.
dokumen HTML dengan kode HTML Preformatted Text.
<html>
<head>
<title> Demo Preformatted Text </title>
</head>
<body>
<pre>
------------------------------------------------------------
No | Nama | Alamat
------------------------------------------------------------
1. |PT. Bintang |Jl. Terusan Surabaya
2. |PT. Sinar Jaya |Jl. Tidar
3. |PT. Mitra |Jl. Galunggung
4. |PT. Harapan |Jl. Jombang
5. |PT. Barokah |Jl. Bondowoso
------------------------------------------------------------
</pre>
</body>
</html>
2) Hasilnya
Gambar 10. Tampilan Preformatted Text

12

Telp (0341) 404424 – 404425 Fax (0341) 404420
f. Garis Horizontal
Di dalam HTML garis horizontal dipresepsikan melalui tag <hr/>.
dokumen HTML dengan kode HTML garis horizontal.
<html>
<head>
<title> Demo Garis Horizontal </title>
</head>
<body>
Membuat garis Horizontal <hr/>

adipisicing elit,
 
et dolore magna
aliqua.
 
laboris
</body>
</html>
2) Hasilnya
Gambar 11. Garis horizontal
g. Menggunakan List
HTML mendukung list dalam bentuk terurut (ordered), tak
terurut (unordered), dan definisi (definition). Untuk setiap bentuk
13

Telp (0341) 404424 – 404425 Fax (0341) 404420
list ini, terdapat list item dinyatakan melalui tag <li> berpasangan
yang mempresentasikan item-item list.
dokumen HTML dengan kode HTML list
<html>
<head>
<title> List </title>
</head>
<body>
Ordered List
<ol>
<li> Satu </li>
<li> Dua </li>
</ol>
<hr/>
Unordered List
<ul>
<li> Satu </li>
<li> Dua </li>
</ul>
Definition List
<dl>
<dt> Satu </dt>
<dd> Satu Satu </dd>
<dt> Dua </dt>
<dd> Dua Dua </dt>
</dl>
</body>
</html>
2) Hasilnya
Gambar 12. List

14

Telp (0341) 404424 – 404425 Fax (0341) 404420
h. Pewarnaan
Untuk memberikan warna background HTML menyediakan atribut
bgcolor di tag <body>. Atribut ini dapat diisi dengan warna
misalnya red atau kode heksadesimal misalnya #FFFFFF.
dokumen HTML dengan kode pewarnaan
<html>
<head>
<title> Pewarnaan </title>
</head>


<body>
<h3 align="center"> Heading 3 </h3>
 Font bewarna merah


Font bewarna merah (menngunakan nilai
heksa) 
</body>
</html>
2) Hasilnya
Gambar 13. Pewarnaan

i. Bekerja dengan Gambar
Dalam HTML juga dapat disisipkan gambar sehingga tidak hanya
teks saja yang dapat disisipkan. HTML menyediakan tag <img>
yang didukung dengan sejumlah atribut.
dokumen HTML dengan kode menyisipkan gambar
15

Telp (0341) 404424 – 404425 Fax (0341) 404420
<html>
<head>
<title> Bekerja dengan Gambar </title>
</head>
<body>


<img src="PolinemaAN.jpg" width="200"/>
adipisicing elit,
sed fo eiusmod tempor incididunt ut labore
et dolore magna
aliqua.
<hr/>


<img
src="http://localhost/Modul1/PolinemaHIMANIA.jpeg
" width="200"
align="right"/>
adipisicing elit,
sed fo eiusmod tempor incididunt ut labore
et dolore magna
aliqua.
</body>
</html>
2) Hasilnya
Gambar 14. Menyisipkan Gambar

MODUL I Dasar Dasar 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

MODUL I Dasar Dasar HTML

Diunggah oleh

Hak Cipta:

Format Tersedia

KEMENTERIAN PENDIDIKAN DAN KEBUDAYAAN

POLITEKNIK NEGERI MALANG

Disusun untuk memenuhi

POLITEKNIK NEGERI MALANG

KEMENTERIAN PENDIDIKAN DAN KEBUDAYAAN

1. Memahami Struktur dasar dokumen HTML.

KEMENTERIAN PENDIDIKAN DAN KEBUDAYAAN

2. Struktur Dokumen HTML

3. Membuat Dokumen HTML

KEMENTERIAN PENDIDIKAN DAN KEBUDAYAAN

Gambar 1. Tampilan halaman web

Gambar 2. Mengakses halaman web dari server local

KEMENTERIAN PENDIDIKAN DAN KEBUDAYAAN

Gambar 3. Tampilan heading 1-6

KEMENTERIAN PENDIDIKAN DAN KEBUDAYAAN

3) Membuat dokumen HTML seperti langkah kerja membuat

Gambar 4. Mengatur posisi heading

Ini paragraf ketiga

KEMENTERIAN PENDIDIKAN DAN KEBUDAYAAN

Gambar 5. Menggunakan paragraf

3) Sebagaimana heading, kita juga bisa mengatur posisi paragraf

Ut enim ad minim veniam, quis nostrud

KEMENTERIAN PENDIDIKAN DAN KEBUDAYAAN

Gambar 6. Mengatur posisi paragraf

5) Membuat dokumen HTML seperti langkah kerja membuat

Ut enim ad minim veniam, quis nostrud

KEMENTERIAN PENDIDIKAN DAN KEBUDAYAAN

Gambar 7. Membuat baris baru

KEMENTERIAN PENDIDIKAN DAN KEBUDAYAAN

Gambar 8. Menggunakan style font

Gambar 9. Karakter-karakter khusus

KEMENTERIAN PENDIDIKAN DAN KEBUDAYAAN

Gambar 10. Tampilan Preformatted Text

KEMENTERIAN PENDIDIKAN DAN KEBUDAYAAN

Gambar 11. Garis horizontal

KEMENTERIAN PENDIDIKAN DAN KEBUDAYAAN

Gambar 12. List

KEMENTERIAN PENDIDIKAN DAN KEBUDAYAAN

Gambar 13. Pewarnaan

KEMENTERIAN PENDIDIKAN DAN KEBUDAYAAN

Gambar 14. Menyisipkan Gambar

Anda mungkin juga menyukai