Scribd
Unggah
14 tayangan7 halaman

Modul 1

Dokumen ini membahas pengertian HTML dan tag-tag dasar yang digunakan dalam membuat halaman web seperti paragraf, font, manipulasi teks, list, hyperlink dan tabel.

Diunggah oleh

rival gea
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 PDF, TXT atau baca online di Scribd
14 tayangan7 halaman

Modul 1

Dokumen ini membahas pengertian HTML dan tag-tag dasar yang digunakan dalam membuat halaman web seperti paragraf, font, manipulasi teks, list, hyperlink dan tabel.

Diunggah oleh

rival gea
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 PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 7

Pemrograman Web/UKRIM/2018

HTML (Hypertext Markup Language)

Tujuan praktikum:
1. Mahasiswa mengetahui daftar tag HTML
2. Mahasiswa mampu menggunakan tag HTML

Materi:
Pengertian HTML
HTML (Hypertext Markup Language) bahasa markup untuk membuat sebuah halaman web
dan menampilkan berbagai informasi di dalam sebuah browser Internet. HTML berupa kode-
kode tag yang menginstruksikan browser untuk menghasilkan tampilan sesuai dengan yang
diinginkan. HTML merupakan bahasa bertanda, menggunakan rangkaian teks tertentu (tag)
untuk menandai teks yang mempunyai interpretasi khusus. File HTML berupa file teks (plain
text file), bukan binary file. File HTML dapat dibuka dengan menggunakan browser web.
Struktur Dasar HTML
1. Tag dibentuk oleh suatu kata (keyword) yang diapit oleh tanda kurung lancip (<tag>)
2. Tag boleh ditulis dalam huruf kecil maupun Kapital
3. Tag harus berpasangan, yaitu tag awal di ikuti tag akhir, kecuali tag tunggal
<p> teks</p> <br> <hr />
4. Di antara tag awal dan tag akhir bisa terdapat tag lain
5. Penulisan tag tidak boleh tumpang tindih

ATTRIBUTE
Attribute mendefinisikan property dari suatu element html, yang terdiri atas nama dan
nilai. Secara umum nilai attribute harus berada dalam tanda petik satu atau dua. Sebagai
contoh, untuk membuat warna teks menjadi kuning dan latarbelakang

Dian Prajarini, S.T., M.Eng.


Pemrograman Web/UKRIM/2018

halaman web menjadi hitam, penulisannya adalah


<body bgcolor="black" text="yellow">

TAG HTML DI DALAM <body> .... </body>


a. Heading
Heading adalah sekumpulan kata yang menjadi judul atau subjudul dalam suatu dokumen
html. Html menyediakan enam tingkatan heading. Heading level 1 biasanya untuk judul
utama.

b. Paragraf
Untuk membuat paragraf digunakan tag <p>. Setelah tag <p> Anda bisa menulis isi
paragraf dan paragraf tersebut harus diakhiri dengan penutup </p>. Anda bisa
mengatur posisi paragraf dengan attribut align. Atribut align diikuti dengan posisi yang
diinginkan. left untuk rata kiri, center untuk rata tengah dan right untuk rata kanan.
Contoh: <p align=”right”>
Tulisan ini menggunakan pengaturan rata kanan
</p>

c. Font
1) Font Size
Untuk mengatur huruf dokumen html digunakan tag <font size>. Tag <font
size> memiliki beberapa atribut untuk mengatur ukuran huruf yang akan
digunakan.
Contoh: <font size=1>
Tulisan ini ukuran hurufnya satu
</font>

2) Jenis Font
Atribut face digunakan untuk mengatur jenis huruf yang diinginkan. Atribut face
harus diisi dengan string jenis font seperti Arial, Times New Roman,Verdana, dan
sebagainya.

Dian Prajarini, S.T., M.Eng.


Pemrograman Web/UKRIM/2018

Contoh: <font face=”Symbol”>


Tulisan ini menggunakan jenis huruf Symbol
</font>
3) Warna Font
Atribut color digunakan untuk mengatur warna font yang akan digunakan. Untuk
memberi nilai pada atribut color, ada dua cara. Cara pertama dengan menuliskan
nama warna seperti Red, Blue, Yellow, White, dll. Sedangkan cara kedua adalah
dengan menggunakan nilai RGB (Red Green Blue) dari suatu warna, misalnya FF0000
untuk Red, 00FF00 untuk green, dan 0000FF untuk Blue.
Contoh: <font color=”red”>
Tulisan ini berwarna merah
</font>

d. Manipulasi Teks
Tag awal Kegunaan
<b> Mendefinisikan teks yang ditebalkan.
<big> Mendefinisikan teks yang besar ukurannya.
<em> Mendefinisikan teks yang ditekankan
<i> Mendefinisikan teks yang dimiringkan – Italic
<small> Mendefinisikan teks yang kecil ukurannya
<strong> Mendefinisikan teks yang ditebalkan.
<sub> Mendefinisikan teks yang dijadikan subscript.
<sup> Mendefinisikan teks yang dijadikan superscript.
<u> Mendefinisikan teks yang digaris bawahi – Underline
<s> Mendefinisikan teks yang di coret – strikethrough

e. Karakter Khusus

Entitas Keterangan
&copy; Copyright
&reg; Registered
&#153; Trade mark
&nbsp; Non breaking space
&amp; Ampersand
&laquo; Anggle quotation mark (left)
&raquo; Anggle quotation mark (right)
&pound; Poundsterling

Dian Prajarini, S.T., M.Eng.


Pemrograman Web/UKRIM/2018

&euro; Euro
&yen; Yen

f. Menyisipkan Gambar
Untuk menyisipkan gambar gunakan tag <img>. Pada tag ini tidak ada penutup tag.
Tag <img> memiliki beberapa atribut antara lain:
 src  sumber file gambar
 alt  text alternatif jika gambar tidak muncul
 name  nama gambar
 border  bingkai gambar
 height  tinggi gambar
 width  lebar gambar
g. List
1) Ordered List
Digunakan untuk memberi penomoran pada sebuah list. Tag yang digunakan
adalah
<ol>
<li> teks1 </li>
<li> teks2 </li>
</ol>
2) Unordered List
Digunakan untuk mendefinisikan bullet pada sebuah list. Tag yang digunakan
adalah
<ul>
<li> teks1 </li>
<li> teks2 </li>
</ul>

h. Hyperlink
Tag anchor <a href= “nama_dokumen”> ... </a> digunakan untuk membuat link ke
halaman html lain.
Bisa juga membuat link dalam sebuah dokumen html. Untuk itu perlu dipersiapkan
nama anchor lokasi tujuan dari link tersebut. Nama anchor dibuat dengan
menambahkan atribut name pada tag <a>. Misalnya <a name = “Bugs”</a>. Cara
melakukan link ke bagian tersebut adalah <a href = “#nama_anchor”>teks pada
browser</a>.
Atribut tag <a> yang sering digunakan antara lain:
 href  alamat link halaman tujuan
 target  spesifikasi dimana mau membuka halaman link (_blank, _parent,
_self, _top, framename)

Dian Prajarini, S.T., M.Eng.


Pemrograman Web/UKRIM/2018

i. Tabel
Untuk membuat sebuah tabel, dibutuhkan tag-tag sebagai berikut

Elemen Keterangan
<table>...</table> Mendefinisikan sebuah tebel dalam HTML. Jika atribut border
dituliskan, maka browser akan menampilkan tabel dengan border.
<th>…</th> Mendefinisikan sel header tabel, secara default teks dalam sel ini
ditebalkan dan rata tengah.
<tr>…</tr> Mendefinisikan sebuah baris tabel dalam tabel. Anda dapat
mendefinisikan atribut untuk seluruh baris : align(left,center,right)
dan/atau valign (top,middle,bottom)
<td>…</td> Mendefinisikan sebuah sel data tabel, secara default teks dalam sel
ini akan ditampilkan rata kiri dan ditengah secara vertikal. Sel data
tabel dapat berisi atribut untuk mendefinisikan karakteristik dari sel
dan isinya.

Dian Prajarini, S.T., M.Eng.


Pemrograman Web/UKRIM/2018

Latihan1.html

Bagaimana agar muncul tampilan seperti gambar di bawah?

Latihan2.html

Dian Prajarini, S.T., M.Eng.


Pemrograman Web/UKRIM/2018

Latihan3.html

Latihan4.html

Dian Prajarini, S.T., M.Eng.

Anda mungkin juga menyukai