Materi 2 HTML Dasar

HTML Dasar
Materi 2
Pemrograman Web
PTI UMS
Tentang HTML
• HTML : format standar untuk membuat dokumen
web
• Spesifikasi HTML standar (HTML 5.01 )
:http://www.w3.org/TR/html5/
• 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, sehingga dapat dibuat menggunakan
editor teks biasa
Skema Dasar Dokumen HTML
<HTML>
<HEAD>
<TITLE>Judul dokumen</TITLE>
</HEAD>
<BODY>
Isi dokumen
</BODY>
</HTML>
• 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)
Struktur HTML document
• Document HTML bisa di bagi mejadi tiga bagian utama:

html, head, dan body.
<html>
<head>
</head>
<body>
</body>
</html>
Susunan HTML
<Head>
Kepala <Title>
Judul Homepage
<head> </Title>
</Head>
Homepage
<Body>
Isi…Teks
Tubuh
Isi…Tabel.
<body> Isi…Audio, Video, dll.
</Body>
<html>
• Setiap document HTML harus di awali dan
di tutup dengan tag HTML  <html> ……
</html>
• Tag <html> memberi tahu browser bahwa
yang di dalam kedua tag tersebut adalah
document HTML.
<head>
• Bagian header dari document HTML di apit oleh tag
<head></head>.
• Di dalam bagian ini biasanya dimuat tag <tittle> yang menampilkan
judul dari halaman web.
<head>
<title>Selamat Datang Kuliah Pemrograman Web</title>
</head>
<body>
• Tag <body> di gunakan untuk menampilkan text, image
link dan semua yang akan di tampilkan pada web page.
<html>
<head>
<title>Welcome to PTI-UMS</title>
</head>
<body bgcolor=“red">
Kuliah Pemrograman Web HTML Dasar
</body>
</html>
Contoh Isi Dokumen HTML
<html>
<html>
<head>
<head>
<title>Homepage
<title>Homepage saya</title>
saya</title>
</head>
</head>
<body>
<body>
<h1>Saya</h1>
<h1>Saya</h1>
<h2>Perkenalan</h2>
<h2>Perkenalan</h2>
Perkenalkan,
Perkenalkan, nama
nama saya
saya .....
..... Ini
Ini adalah
adalah homepage
homepage
pertama
pertama saya, karena saya baru belajar tentang
saya, karena saya baru belajar tentang
cara membuat homepage.
cara membuat homepage.


</body>
</body>
</html>
</html> 
-->
Daftar Tag
• <html> Dokumen
• <head> Header
• <title> Judul dokumen
• <body> Isi dokumen
• <h1>…<h6> Judul paragraf
• Paragraf
• ,,,, Atribut
• Ganti baris
• Font
• <li>,<ol>,<ul> Enumerasi
• <hr> Garis mendatar
• <img> Gambar
• <a> Link (kaitan/rujukan)
• <table> Tabel
•  Komentar
• <frame>,<frameset>,<iframe> Frame (bingkai)
• <form> Formulir isian
• <input>,<textarea>,<select> Komponen isian pada formulir
• <map> Link berdasar area pada gambar
• ,<div> Pengelompokan elemen dokumen
Tag Judul (Heading)
<hn>Judul paragraf</hn>
n = 1,2,3,4,5,6 (tingkat judul)
Untuk menuliskan judul suatu paragraf
<h1>Judul
<h1>Judul Tingkat
<h2>Judul
Tingkat 1</h1>
1</h1> Judul Tingkat 1
<h2>Judul Tingkat
Tingkat 2</h2>
2</h2>
<h3>Judul
<h3>Judul Tingkat
<h4>Judul
Tingkat 3</h3>
<h4>Judul Tingkat
Tingkat 4</h4>
4</h4>
<h5>Judul
<h5>Judul Tingkat
Tingkat 5</h5>
<h6>Judul
<h6>Judul Tingkat
Tingkat 6</h6>
6</h6>
Judul Tingkat 4
Judul Tingkat 5
Judul Tingkat 6
Tag Paragraf (Paragraph)
paragraf
Untuk menandai suatu paragraf.
Suatu paragraf akan terlihat dibatasi oleh satu baris kosong
sebelum dan sesudahnya.

 Ini adalah homepage pertama saya,
Ini
Ini adalah
adalah homepage
homepage pertama
pertama
saya, karena saya baru belajar tentang cara
saya, karena saya baru belajar
karena saya baru belajar
tentang cara membuat homepage.
tentang cara membuat homepage. membuat homepage.


Homepage Homepage ini masih dalam tahap
Homepage ini
ini masih
masih dalam
dalam tahap
tahap
pengembangan, oleh karena itu
pengembangan, oleh karena itu pengembangan, oleh karena itu
tampilannya
tampilannya masih
masih terlalu
terlalu tampilannya masih terlalu sederhana.
sederhana.Saya
sederhana.Saya akan
akan
berusaha untuk terus memperbaiki
berusaha untuk terus memperbaiki
homepage
homepage saya
saya ini,
ini, sehingga
sehingga Saya akan berusaha untuk terus
semakin
semakin lama semakin menarik
lama semakin menarik untuk
untuk memperbaiki homepage saya ini,
dilihat.
dilihat. sehingga semakin lama semakin menarik
untuk dilihat.
Tag Atribut 1 (Bold, Italic, Underline)
Kalimat yang dicetak tebal

Kalimat yang dicetak miring
Kalimat yang digarisbawahi
Untuk menandai bagian kalimat agar dicetak tebal,
miring, dan/atau digarisbawahi.
Kata
Kata dapat
dapat dicetak
dicetak tebal,
tebal, miring,
miring, garis
garis
bawah,
bawah, tebal
tebal miring,
miring, dan
dan
kombinasi
kombinasi di di tengah
tengah huruf
huruf normal
normal
Kata dapat dicetak tebal, miring, garis bawah, tebal

miring, dan kombinasi di tengah huruf normal
Tag Atribut 2 (Superscript, Subscript)
bagian yang dicetak tinggi

bagian yang dicetak rendah
Untuk menandai bagian karakter agar dicetak
tinggi atau rendah, biasanya untuk rumus
matematika atau kimia.
(x1
(x1 ++ x2)2
x2)2 ==
x12
x12 ++ x22
x22 ++
2x1x2
2x1x2
2H2
2H2 ++ O2
O2 == 22 H2O
H2O
(x1 + x2)2 = x12 + x22 + 2x1x2
2H2 + O2 = 2 H2O
Tag Ganti Baris (Break line)
 
Untuk pindah ke baris berikutnya.
Bentuk penulisan lain yang dianjurkan (XML style) :
 
Perkenalkan, Perkenalkan, /> Perkenalkan,
nama saya ..... Ini
nama saya ..... Ini nama saya ..... Ini adalah
adalah homepage
/>homepage pertama
pertama
saya, karena saya baru
/> karena saya baru
belajar tentang cara karena saya baru belajar tentang cara
belajar tentang cara 
membuat
membuat homepage.
homepage. membuat homepage.
Homepage
Homepage ini
ini masih
masih dalam
dalam Homepage ini masih dalam tahap
tahap pengembangan, oleh
tahap pengembangan, oleh
karena
pengembangan,
karena itu
itu tampilannya
tampilannya masih
masih oleh karena itu tampilannya masih terlalu
terlalu sederhana.
terlalu sederhana.
sederhana.
Tag Font (size)
Memformat suatu bagian kalimat dengan ukuran,

jenis huruf, atau warna tertentu.
Tag : font Parameter : size, face, color
 kalimat 
Ukuran kalimat 
n = 1, 2, 3, 4, 5, 6, 7 (ukuran huruf)
m = -2, -1, +0, +1, +2, +3, +4 (ukuran huruf)
Ukuran
Ukuran
satu,
size="1">satu,
dua,
dua,
tiga,
size="3">tiga,
empat,
empat,
lima,
size="5">lima,
enam,
enam,
tujuh
size="7">tujuh
Ukuran satu, dua, tiga, empat, lima, enam, tujuh

Tag Font (face)
Jenis kalimat 
huruf nama font = Times New Roman, Arial,
Courier New, Verdana, dll.
Homepage
Roman">Homepage ini
ini masih
masih dalam
dalam tahap
tahap pengembangan 
/>
Homepage ini masih dalam tahap pengembangan Homepage ini masih dalam tahap pengembangan />
Homepage
New">Homepage ini
ini masih
masih dalam
dalam tahap
tahap pengembangan 
/>
Homepage ini masih dalam tahap pengembangan
Homepage ini masih dalam tahap pengembangan
Homepage ini masih dalam tahap pengembangan

Tag Font (color)

 kalimat 
Warna RR = 00 .. FF (intensitas warna merah dalam heksadesimal)
GG = 00 .. FF (intensitas warna hijau dalam heksadesimal)
BB = 00 .. FF (intensitas warna biru dalam heksadesimal)
Red Red /> Red
Maroon Maroon /> Maroon
Lime Lime 
/>
Green 
color="#008000">Green Green
Blue 
Blue 
Navy Navy 
/> Blue
Yellow 
color="#FFFF00">Yellow Navy
Fuchsia 
color="#FF00FF">Fuchsia Yellow
Aqua
Aqua Fuschia
Aqua
Tag Enumerasi (List, Unordered List, Ordered
List)
<li>item</li>
Untuk menandai suatu item dari daftar (enumerasi), diawali
dengan simbol • (bullet)
Kelompok item harus diapit oleh tag <ul> </ul> dalam daftar bertingkat.
Untuk menomori enumerasi dengan nomor urut (1,2,3), apitlah dengan tag <ol> </ol>
Ada
Ada beberapa
beberapa sektor
sektor potensial:
potensial:
<li>Pariwisata</li>
<li>Pariwisata</li>
<li>Seni</li>
<li>Seni</li>
<li>Budaya</li> Budaya</li> />
Sektor
Sektor tersebut merupakan ...
tersebut merupakan ...
Fasilitas
Fasilitas penginapan di Indonesia:
penginapan di Indonesia:
<ol>
<ol>
<li>Losmen</li> Losmen</li> />
Losmen
Losmen merupakan
merupakan tempat
tempat
penginapan
penginapan yang berskala kecil
yang berskala kecil
<li>Hotel</li>
<li>Hotel</li>
<ul>
<ul>
<li>Hotel
<li>Hotel melati</li>
melati</li>
<li>Hotel
<li>Hotel berbintang</li>
berbintang</li>
</ul>
</ul>
</ol>
</ol>
Perkembangan
Perkembangan dalam
dalam ...
...
Tag Garis Mendatar (Horizontal Line)
<hr>
membentuk garis pemisah mendatar.
Bentuk penulisan lain yang dianjurkan (XML style) :
<hr /> Perkenalkan,
Perkenalkan, nama
nama saya
saya ...
...
Ini
Ini adalah
adalah homepage
homepage pertama
pertama
saya,
saya, karena
karena saya
saya baru
baru
belajar tentang cara
belajar tentang cara
membuat
membuat homepage.<hr
homepage.<hr />/>
Homepage ini masih dalam
Homepage ini masih dalam
tahap
tahap pengembangan,
pengembangan, oleh
oleh
karena
karena itu
itu tampilannya
tampilannya
masih
masih terlalu
terlalu sederhana.
sederhana.
Soal
• Buatlah Program html untuk menampilkan
biodata kalian beserta hoby dan motto
hidup, dengan menerapkan beberapa tag
diatas ( Judul, Paragraf, Size, Font, Color,
break line, face dan enumerasi)

Materi 2 HTML Dasar

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

Materi 2 HTML Dasar

Diunggah oleh

Hak Cipta:

Format Tersedia

HTML Dasar

• HTML: menandai awal dan akhir dokumen HTML

• Document HTML bisa di bagi mejadi tiga bagian utama:

<b>Kalimat yang dicetak tebal</b>

Kata dapat dicetak tebal, miring, garis bawah, tebal

<sup>bagian yang dicetak tinggi</sup>

(x1 + x2)2 = x12 + x22 + 2x1x2

Memformat suatu bagian kalimat dengan ukuran,

Ukuran satu, dua, tiga, empat, lima, enam, tujuh

Homepage ini masih dalam tahap pengembangan

Memformat suatu bagian kalimat dengan ukuran,

Anda mungkin juga menyukai