Pertemuan Ke 2 HTML

Pertemuan 2
1
 Bahasa yang digunakan untuk menampilkan informasi pd halaman
web.
 bahasa ini menggunakan tanda (markup) untuk menandai perintah-
perintahnya
 menentukan tampilan suatu teks dan tingkat kepentingan dari teks
tersebut dalam suatu dokumen.
Software yang diperlukan:
 Text editor sederhana.
Contoh:
Windows: Notepad
Linux: gEdit, mcedit
 Web browser untuk menampilkan dokumen web yang dibuat.
Contoh:
Windows: Internet Explorer, dan Firefox
Linux: Firefox dan Conqueror.
2
 Tag - Digunakan untuk menentukan tingkah laku web browser.
Dinyatakan dengan tanda lebih kecil “<“ (tag awal) dan tanda
lebih besar “>” (tag akhir).
<namatag> ..... </namatag>
 Element – Jenis-jenis dari tag. Element terdiri atas tiga bagian,
yaitu tag pembuka, isi, dan tag penutup.
Contoh :
<title> ini adalah tag pembuka judul dokumen HTML
Disini Judul Dokumen HTML ini adalah isi judul dokumen HTML
</title> ini adalah tag penutup judul dokumen HTML
 Attribute - Digunakan untuk memodifikasi nilai dari elemen
HTML. Suatu elemen biasanya akan mempunyai banyak atribut.
3
<html>
<!– untuk menyatakan suatu dokumen HTML -->
<head>
<!-- memberikan informasi mengenai dokumen HTML >
</head>
<body>
<!-- menyimpan informasi atau data yang akan ditampilkan dalam
dokumen HTML >
</body>
</html>
4
<html>
<head>
<title> Belajar HTML </title>
</head>
<body>
Kami sedang mulai belajar HTML
</body>
</html>
5
Format:
<! -- >
Fungsi:
 Memberi nama aplikasi
 Mendeskripsikan tujuan pengkodean tertentu di dalam file
 Memberi nama pengarang
 Memberi tanggal pembuatan
 Memberi nomer versi
 Memberi informasi hak cipta
6
 Untuk warna latar belakang
 Untuk heading
 Untuk paragraf
 Untuk preformatted text
 Untuk blockquote
 Untuk break
 Untuk font
 Untuk format dokumen
 Untuk garis pemisah horisontal
 Untuk list/daftar
 Untuk memuat gambar
 Untuk hypertext link
 Dan lain-lain
7
<body text="v" bgcolor="w" background="uri" link="x" alink="y"
vlink="z">
..............
</body>
- Attribute text memberikan warna pada teks,
- bgcolor memberikan warna pada latarbelakang dokumen HTML, -
background memberikan latarbelakang dokumen HTML dalam
bentuk gambar
- link memberikan nilai warna untuk link,
- alink memberikan warna untuk link yang sedang aktif,
- vlink memberikan warna untuk link yang telah dikunjungi.
Jika attribute bgcolor dan background keduanya dispesifikasikan
maka attribute background yang akan digunakan, akan tetapi jika nilai
attribute background (gambar) tidak ditemukan pada dokumen HTML
maka attribute bgcolor yang akan digunakan.
8
 Menggunakan warna
<body text = #nnnnnn bgcolor=#nnnnnn> . . . </body>
Tampilan:
Script:
<html>
<head>
<title> Penggunaan Latar Belakang
Warna </title>
</head>
<body text="red" bgcolor="cyan">
Kami sedang mulai belajar
Pemrograman Web
</body>
</html>
9
 Menggunakan gambar
<body background=“nama_file_gambar”> . . . </body>
Tampilan:
Script:
<html>
<head>
<title> Penggunaan Latar Belakang
Gambar </title>
</head>
<body background="./gambar/picture01.jpg">
Kami sedang mulai belajar
Pemrograman Basis Data Berbasis Web
</body>
</html>
10
 Untuk judul atau sub judul dalam dokumen HTML
<h1 [align=”left”|”center”|”right”]> . . . </h1>
<h2 [align=”left”|”center”|”right”]> . . . </h2>
.
.
<h6 [align=”left”|”center”|”right”]> . . . </h6> Tampilan:

Script:
<html>
<head>
<title> Heading </title>
</head>
<body>
<h1 align="center"> Heading 1: Materi HTML </h1>
</body>
</html>
11
 Paragraf yang bisa diatur perataannya (kiri, tengah, kanan):
<p [align=”left”|”center”|”right”]> . . . </p>
Script: Tampilan:
<html>
<head>
<title> Paragraf </title>
</head>
<body>
<h2 align="center"> Materi HTML </h2>
<p align="right">Kami sedang mulai
belajar Pemrograman Basis Data Berbasis
Web. Pada awal materi kami diperkenalkan
pada konsep dasar Web </p>
<p align="left">Saat ini masuk ke
materi Dasar-dasar HTML </p>
</body>
</html>
12
 Untuk menampilkan teks sama seperti yang
diketikkan dalam dokumen HTML:
<pre> . . . </pre>
13
 Untuk menulis kutipan teks:
<blockquote> . . . </ blockquote >
<HTML><BODY>
Ini adalah paragraf normal
<BLOCKQUOTE>
<P>Ini paragraf yang agak masuk ke dalam.
<P align="justify">Ini juga contoh paragraf yang agak masuk ke dalam. Dengan kalimat yang agak
panjang, kita lihat bahwa <b>semua baris</b> dalam paragraf ini letaknya agak masuk ke
dalam. <i>Sama rata sama jauhnya</i>.
</BLOCKQUOTE>
<P>Nah, paragraf ini kembali normal, karena tag <i>blockquote</i> sudah berlalu alias sudah
ditutup di atas. Ngerti, kan?
</HTML></BODY>
14
15
 Untuk menulis teks pada baris berikutnya:
<br>
16
 Ukuran font
<font size=“n”> . . . </font>
 Jenis font
<font size=“n” face=“jenis_font”> . . . </font>
 Warna font
<font size=“n” face=“jenis_font” color=“warna”> . . . </font>
17
 Bold:
<b> . . .</b>
 Italic:
<i> . . . </i>
 Superscript:
<sup> . . .</sup>
 Subscripted:
<sub> . . . </sub>
 Struck trough:
<del> . . . </del>
18
 Garis horisontal untuk memisahkan teks
dengan teks lain.
<hr [align=“left”|”center”|”right”] [size=“n”] [width=“nnn”] [noshade]> </hr>
19
 Unordered lists <UL>: daftar item dengan tanda bullet.
<ul [type=“disc”|”square”|”circle”] > . . . </ul>
 Ordered Lists <OL>: untuk membuat daftar item yang terurut.
<ol [type=“1”|”a”|”A”|”I”|”i"] [start=“n”] > . . . </ol>
 Definition Lists <DL>: untuk menjelaskan istilah-istilah.
<dl> . . . </dl>
<dt> . . . </dt>
<dd> . . . [</dd>]
 Menu List: menampilkan item-item yang mempunyai link ke page lain.
<menu> . . . </menu>
 Directory List (DIR): untuk daftar item yang pendek atau kurang dari 20
karakter.
<dir> . . . </dir>
20
 Memuat gambar ke dalam halaman Web
<img src=”URL”|”name” height=”n” width=”n” align=”top”|”center”|”bottom”] />
Tampilan:
Script:
<html>
<head>
<title> Insert Gambar </title>
</head>
<body>
<b> Aloooo ... </b>
<img src="./TFR2A.gif" >
</body>
</html>
21
Format:
<a href=”address” > . . . </a>
 Link ke dokumen lain
<a href=”nama_dokumen” > . . . </a>
 Link ke bagian tertentu dalam dokumen yang sama
<a href=”#target” > . . . </a>
<a href=”target” > . . . </a>
 Link ke alamat URL atau WebSite
<a href=”alamat_URL” > . . . </a>
 Link ke alamat Email
<a href=”mailto:alamat_email” > . . . </a>
 Link File yang akan didownload
<a href=”nama_file” > . . . </a>
22
Tabel penting peranannya dalam halaman Web, selain untuk
menampilkan teks atau gambar dalam format lajur dan kolom
bias juga menggunakan tabel untuk membantu me-layout
tampilan halaman.
Tabel merupakan sebuah kotak yang terdiri atas baris/row dan

kolom.column. Untuk membuat tabel, anda menggunakan tag
<table> dan menutupnya dengan tag </table>. Anda bisa juga
menambahkan atribut lain di tag <table> pembuka. Misalnya
menentukan warna, border, dan sebagainya.
23
Di dalam tag <table> ada beberapa tag lain yang perlu
dipahami,yaitu :
1.Tag <tr> artinya tag untuk menuliskan baris biasa di tabel.
TR singkatan dari Table Row.
2.Tag <td> artinya tag untuk menuliskan kotak di dalam baris,
makanya tag <td> ada di dalam tag <tr>. TD singkatan dari
Table Data.
3.Tag <th> artinya tag untuk menuliskan kotak biasa seperti
<td>, namun untuk header tabel. TH singkatan dari Table
Header.
24
Sel-sel tabel secara normal memiliki lebar dan tinggi yang sama. Jika kita
ingin membuat sebuah sel memiliki lebar atau tinggi yang berbeda dari sel-
sel lainnya, maka satu-satunya cara yang bisa kita lakukan adalah dengan
menggabungkan beberapa sel menjadi satu. Cara ini disebut merge atau
penggabungan sel.
Untuk menggabungkan sel-sel tabel ini diperlukan atribut rowspan atau

colspan. Atribut rowspan digunakan untuk menggabungkan sel-sel tabel
pada kolom yang sama. Atribut colspan untuk menggabungkan sel-sel tabel
pada baris yang sama.
25
1. Secara Vertikal (Rowspan) Tabel sebelum digabung kolom
Tabel dengan kode HTML dibawah ini
sel-sel kolom pertama akan digabung:
26
Setelah digabung maka kondisi kode
HTML menjadi seperti berikut: Tabel setelah di gabung kolom
27
2. Secara Horisontal (Colspan)
Tabel sebelum di gabung baris
Tabel dengan kode HTML dibawah ini
sel-sel baris pertama akan digabung:
28
Setelah digabung maka kondisi kode Tabel setelah digabung baris
HTML menjadi seperti berikut:
29
Contoh script pembuatan tabel
Buat lembar baru pada Notepad, kemudian ketikkan perintah di bawah ini. Simpan
dengan nama Contoh03.html
30
Jika dilihat di browser, maka terlihat sebagai berikut :
31

Pertemuan Ke 2 HTML

Diunggah oleh

Informasi Dokumen

Judul Asli

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

Pertemuan Ke 2 HTML

Diunggah oleh

Hak Cipta:

Format Tersedia

Pertemuan 2

<h6 [align=”left”|”center”|”right”]> . . . </h6> Tampilan:

Ini adalah paragraf normal

<P>Ini paragraf yang agak masuk ke dalam.

Tabel merupakan sebuah kotak yang terdiri atas baris/row dan

Untuk menggabungkan sel-sel tabel ini diperlukan atribut rowspan atau

Anda mungkin juga menyukai