Scribd
Unggah
129 tayangan10 halaman

Modul 2 HTML Dasar

Dokumen tersebut memberikan penjelasan tentang dasar-dasar HTML (Hypertext Markup Language) mulai dari pengertian, cara membuat dokumen HTML, tag dasar HTML, format teks dasar, penggunaan gambar, tautan/link, dan membuat daftar urutan."

Diunggah oleh

widi utomo
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai DOCX, PDF, TXT atau baca online di Scribd
129 tayangan10 halaman

Modul 2 HTML Dasar

Dokumen tersebut memberikan penjelasan tentang dasar-dasar HTML (Hypertext Markup Language) mulai dari pengertian, cara membuat dokumen HTML, tag dasar HTML, format teks dasar, penggunaan gambar, tautan/link, dan membuat daftar urutan."

Diunggah oleh

widi utomo
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai DOCX, PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 10

Modul HTML

SMP Regina Pacis


Surakarta
Tutorial HTML
HTML adalah bahasa pemrograman dasar yang digunakan untuk
membangun sebuah situs. HTML merupakan singkatan dari Hypertext Markup
Language yang merupakan bahasa paling standard yang digunakan untuk
membuat suatu website. HTML bukanlah merupakan suatu bahasa pemrograman,
karena bahasa ini hanya berguna untuk mengontrol tampilan dari suatu halaman
(web page) beserta isinya.
Untuk membuat suatu dokumen HTML, hal-hal yang kamu perlukan
hanyalah sebuah text editor biasa seperti : Notepad atau Wordpad (program
standar bawaan dari windows) lalu mengetikkan kode HTML didalamnya
kemudian di save (simpan) dengan akhiran (ekstensi) .htm atau .html. File yang
telah disimpan kemudian dibuka dengan browser seperti mozilla, opera ataupun
internet explorer.
Kode yang dimulai dengan tanda "<" dan diakhiri dengan tanda ">" (tanpa
tanda kutip) merupakan tag-tag HTML. Tag-tag ini menandai bagian-bagian pada
halaman situs agar ditampilkan sesuai dengan standar tampilannya. Tag HTML
dasar dapat dilihat seperti dibawah ini, yaitu html, head, dan body.

<html>
<head>
<title>Belajar HTML</title>
</head>
<body>

aku belajar html nih ..

</body>
</html>

Tag Dasar dalam HTML

No Tag Deskripsi / Kegunaan


1 <html> Mendefinisikan halaman hmtl
2 <title> Mendifinisikan judul halaman html
3 <body> Mendefinisikan isi dari halaman html. Isi bisa
berupa teks, gambar, table, dll
4 <h1>..<h6> Mendefiniskan heading 1..6
5 <p> Mendefinisikan suatu paragraf
6 <br> Mendefinisikan ke baris baru (line break)
7 <!-->

 Membuat Paragraf dan Judul HTML

Untuk membuat suatu paragraf dalam html, tag yang dibutuhkan yaitu <p>
dan heading, <h1>…<h6>.

Hari Sabtu lalu aku dan sekeluarga pergi ke Pantai Anyer. Kami pergi
kesana karena diajak oleh Ayah untuk melepas penat. Kami berangkat dari
rumah pukul 6 pagi menggunakan mobil dan sampai disana pukul 11
siang.
Ini Ceritaku apa ceritamu
Untuk membuat paragraf maka kita tulis struktur html dasar yaitu
<html>, <head>, dan <body> lalu kita masukkan bahan untuk membuat
paragraf yaitu <p> lalu masukkan isinya, seperti berikut .
Kode HTML

<html>
<body>

<h1>heading 1</h1>
<h2>heading 2</h2>
<h3>heading 3</h3>
<h4>heading 4</h4>
<h5>heading 5</h5>
<h6>heading 6</h6>

<p>
Hari Sabtu lalu aku dan sekeluarga pergi ke Pantai Anyer.
Kami pergi kesana karena diajak oleh Ayah untuk melepas
penat.
Kami berangkat dari rumah pukul 6 pagi menggunakan mobil
dan sampai
disana pukul 11 siang.<br/>
ini ceritaku apa ceritamu
</p>

</body>
</html>

Tampilan html

heading 1
heading 2
heading 3

heading 4
heading 5

heading 6

Hari Sabtu lalu aku dan sekeluarga pergi ke Pantai Anyer. Kami pergi kesana
karena diajak oleh Ayah untuk melepas penat. Kami berangkat dari rumah pukul 6
pagi menggunakan mobil dan sampai disana pukul 11 siang. ini ceritaku apa
ceritamu

Untuk menata perataan paragraph digunakan atribut align, untuk rata kanan
isi atribut align dengan “right”, kiri dengan “left”, tengah dengan “center”
dan rata kiri kanan diisi dengan “justify”. Contoh penggunaanya :
Kode HTML

<p align=”right”> Ini adalah paragraph dengan kanan


tulisan
</p>rata

<p align=”left”> Ini adalah paragraph dengan tulisan rata


kiri </p>

<p align=”center”> Ini adalah paragraph dengan tulisan rata


tengah </p>

<p align=”justify”> Ini adalah paragraph dengan tulisan rata


kanan kiri </p>

Tampilan HTML

Ini adalah paragraph dengan tulisan rata kanan

Ini adalah paragraph dengan tulisan rata kiri

Ini adalah paragraph dengan tulisan rata tengah

Ini adalah paragraph dengan tulisan rata kanan kiri

Tag lain yang digunakan untuk mengatur paragraph pada html yaitu <pre>,
untuk mendefinisikan preformatted teks. Teks yang diapit tag <pre> akan
ditampilkan dengan jenis huruf, spasi dan susunan yang sudah fix. Tag
<pre> ini cocok digunakan untuk format teks yang tidak biasa atau khusus.

Kode HTML : Tampilan :


<html>
<body> Contoh tampilan dengan pre :
Paragraf ini
Contoh tampilan dengan pre :
<pre> menggunakan tag pre
Paragraf ini untuk formattingnya
menggunakan tag pre
untuk formattingnya Tampilan tanpa pre :
</pre>

Tampilan tanpa pre : Paragraf ini Menggunakan tag pre


<p> untuk formattingnya
Paragraf ini
Menggunakan tag pre
untuk formattingnya </p>

</body>
</html>
Tag Untuk Format Teks Dasar

No Tag Deskripsi / Kegunaan


1 <b>, <strong> Mendefinisikan teks tebal
2 <i> , <em> Mendifinisikan teks miring
3 <u> Mendefiniskan teks digaris bawah
4 <s> Mendefiniskan teks bergaris (strikethrough)
5 <small> Mendefinisikan teks dengan ukuran lebih kecil
6 <big> Mendefinisikan teks dengan ukuran lebih besar
7 <sub> Mendefinisikan teks subscripted
8 <sup> Mendefinisikan teks superscripted

Kode HTML :

<p><b>This text is bold</b></p>


<p><strong>This text is strong</strong></p>
<p><big>This text is big</big></p>
<p><em>This text is emphasized</em></p>
<p><i>This text is italic</i></p>
<p><small>This text is small</small></p>
<p>This is<sub> subscript</sub> and
<sup>superscript</sup></p>

Tampilan HTML :

This text is bold

This text is strong

This text is big

This text is emphasized

This text is italic

This text is small

This is subscript and superscript

 Menampilkan Gambar Pada Halaman HTML

Penggunaan gambar pada halaman situs dapat berupa ilustrasi dari suatu
tulisan, foto, elemen halaman, dan iklan. Cara yang termudah untuk
meletakkan gambar ke suatu halaman html adalah dengan menaruh
gambar yang bersangkutan ke dalam folder satu file dengan file htmlnya
kemudian dipanggil melalui tag <img>. Yap, tag ini adalah bahan dasar
yang diperlukan untuk meletakkan gambar pada halaman html.

<img src="gambar_mobil.jpg" alt="gambar mobil" />


Atribut src adalah atribut yang berisi info dimana lokasi gambar itu
berada. Sedangkan atribut alt berguna untuk menampilkan tulisan yang
keluar apabila browser yang digunakan tidak memperbolehkan tampilnya
gambar. Src adalah kependekan dari Source (sumber) dan Alt adalah
kependekan dari Alternative (alternatif teks).

Untuk mengeset ukuran panjang dan lebarnya, bisa menggunakan kode


seperti :

<img src="pulpit.jpg" alt="Pulpit rock" width="304"


height="228" />

 Membuat Tautan / Link Pada HTML

Hyperlink (link) adalah kata, kumpulan kata, gambar yang bisa dklik untuk
bisa menuju ke dokumen baru, halaman baru, bagian dalam dokumen. Ketika
kursor di arahkan diatas link akan berubah menjadi icon tangan.

Untuk membuat link, menggunakan tag <a> dimana untuk membuat link
untuk suatu dokumen diikuti dengan atribut href.

Kode html : <a href="url">Link text</a>, untuk contoh penggunaanya


<a href="http://www.w3schools.com/">Visit W3Schools</a>

Hyperlink tidak harus berupa kata namun bisa juga dalam gambar. Caranya sama
persis seperti menaruh hyperlink pada tulisan hanya saja tag <a> dan </a> menjepit
tag gambar <img>. Sekarang perhatikan kode di bawah ini.

<a href="coba2.html"><img src="gambarkodok.jpg" /></a>

Kode diatas adalah contoh hyperlink dimana ketika gambar kodok di klik
maka halaman coba2.html akan terbuka. Karena gambar "gambarkodok.jpg"
ditulis dalam bentuk relatif maka gambar kodok tersebut diletakkan dalam
satu folder yang sama. Jika tidak maka gambar kodok tersebut tidak akan
muncul.

Dalam membuat hyperlink juga ada pilihan untuk jendela pembukanya,


apakah di halaman yang sama atau di halaman baru sehingga halaman
sebelumnya tidak tertutup. Untuk membuat pilihan seperti ini tambahkan
atribut target pada tag <a>. Lihat kode dibawah ini.

 Membuat link yang membuka di halaman baru :


<a href="http://www.w3schools.com/" target="_blank">Visit
W3Schools!</a>
 Membuka di halaman yang sama
<a href="http://www.w3schools.com/" >Visit W3Schools!</a>

 Membuat List / Daftar Urutan pada HTML

Seperti halnya format bullet and numbering pada MS. Word, untuk membuat
list/ daftar urutan pada html menggunakan tag untuk list yaitu <ul>, <ol>,
dan <li>.

a. Membuat daftar berurutan


Untuk membuat daftar berurutan, tag yang digunakan yaitu tag <ol>
kependekan dari Ordered List, yang artinya list secara berurutan. List yang
ditampilkan nanti oleh tag ini akan menampilkan nomor disebelah kiri dari
detail.
Contoh membuat list seperti berikut :

Daftar Minuman : Daftar Minuman <br/>


Kopi <ol>
Teh <li>Kopi</li>
Susu <li>Teh</li>
Jus Buah <li>Susu</li>
<li>Jus Buah</li>
</ol>

Terlihat disini penggunaan <ol> dan <li> , dimana <ol> digunakan untuk
memberi petunjuk kepada browser bahwa list yang ditampilkan harus
menggunakan nomor urut, dan <li> digunakan untuk membuat detail dari
list.
Untuk membuat daftar urutan dengan urutan abjad, pada tag <ol> diberi
tambahan type yaitu huruf, <ol type “a”>. Urutan list akan berupa abjad
a,b,c,d.

b. Membuat daftar tidak berurutan


Untuk membuat daftar berurutan, tag yang digunakan yaitu tag <ul>
kependekan dari Unordered List, yang artinya list secara berurutan. List
yang ditampilkan nanti oleh tag ini akan menampilkan seperti bulatan atau
kotak (symbol) bukan berupa angka.

Daftar Minuman : Daftar Minuman <br/>


Kopi <ul>
Teh <li>Kopi</li>
Susu <li>Teh</li>
Jus buah <li>Susu</li>
<li>Jus Buah</li>
</ul>

c. Membuat Daftar Urutan Bertingkat


Urutan bertingkat, yaitu dalam suatu urutan terdapat sub urutan dari list yang
ada, seperti :

<h4>Daftar Minuman</h4>
<ol type ="a">
<li>Kopi
Daftar Minuman : <ul>
Kopi <li>Kopi Ekspresso</li>
Kopi Ekspresso <li>Kopi Susu</li>
Kopi Susu <li>Kopi Karamel</li></ul>
Kopi Karamel </li>
Teh <li>Teh
Teh Hitam <ul>
Teh Hijau <li>Teh Hitam</li>
<li>Teh Hijau</li>
Teh Rosella
<li>Teh Rosella</li></ul>
</li>
</ul>
 Membuat Tabel dalam HTML

Untuk mendefiniskan tabel dalam html digunakan tag <table>..</table>.


Tabel terdiri dari baris didefinisikan dengan tag <tr> dan setiap baris terdiri
dari cell yang didefinisikan dengan tag <td>. Tag <tr> digunakan untuk
membuat suatu baris baru. Sedangkan <td> digunakan untuk membuat
kolom/data.

<table border =”1”> Tampilan HTML :


<tr>
<td>baris 1, kolom 1</td> Baris 1, Kolom 1 Baris 1, Kolom2
<td>baris 1, kolom 2</td>
</tr>
<tr> Baris 2 kolom 1 Baris 2, kolom2
Menggabung
<td>baris 2, kolomBaris atau Kolom pada Suatu Tabel
1</td>
<td>baris 2, kolom 2</td>
</tr> a. Menggabungkan Baris
</table>
Untuk menggabungkan kolom digunakan intah colspan . Berikut Cara penggunaanya

Menggabungkan Kolom dan Baris dalam Tabel :

a. Menggabungkan Baris
Untuk menggabungkan kolom digunakan perintah colspan . Berikut Cara
penggunaanya :

<table border ="1"> Tampilan HTML :


<tr>
<td colspan="2">Gabungan Kolom</td> Gabungan Kolom
</tr>
<tr>
<td>1</td> 1 2
<td>2</td>
</tr>
<tr> 3 4
<td>3</td>
<td>4</td>
</tr>
</table>

b. Menggabungkan Kolom
Untuk menggabungkan baris perintah yang digunakan yaitu rowspan.
Berikut cara penggunaanya

<table border ="1"> Tampilan HTML :


<tr>
<td colspan="2">Gabungan Kolom</td> Gabungan Kolom
</tr>
<tr>
<td rowspan="2">Gabungan Baris</td> Gabungan 2
<td>baris 2, kolom 2</td> Baris
</tr>
<tr> 4
<td>baris 3, kolom 2</td>
</tr>
</table>
Contoh Gabungan yang lain :
Contoh Penggabungan Lainnya :

Kode HTML :

<table border ="1">


<tr>
<th rowspan="2">No</th>
<th rowspan="2">Nama</th>
<th colspan="2">Kontak</th>
<th rowspan="2">Ket</th>
</tr>
<tr>
<td>Telp</td>
<td>E-Mail</td>
</tr>
<tr>
<td>1</td>
<td>Anonim</td>
<td>454545</td>
<td>[email protected]</td>
<td>00</td>
</tr>
</table>

Tampilan Tabel :

No Nama Kontak Ket


Telp E-Mail
1 Anonim 454545 [email protected] 00
m

Anda mungkin juga menyukai