HTML (Hyper Text Markup Language)

Transcript HTML (Hyper Text Markup Language)

HTML
(Hyper Text Markup Language)
Siti Mukaromah, S.Kom
• Informasi di dalam www (Word Wide Web)
menggunakan format HTML.
• Didalam HTML kita mengenal Hyper Text yaitu adanya
link ke suatu dokumen, suatu alamat mesin bahkan ke
suatu gambar, suara.
• Banyak software yang digunakan untuk membuat www
dengan format HTML. Yang akan kita bahas disini
adalah yang paling dasar, yaitu menggunakan notepad,
dimana notepad-lah software yang biasanya langsung
sudah ada di komputer pada saat komputer aktif, dan
notepad biasanya terletak pada accesories.
Langkah Pertama
• Klik notepad
• Simpan file dalam suatu folder dalam format
nama_file.HTML atau nama_file.htm
• Kemudian jalankan dengan Internet Explorer
Definisi ELEMEN
• Dokumen HTML disusun oleh beberapa
elemen
• Elemen merupakan komponen-komponen
dasar pembentuk dokumen HTML
• Elemen dapat berupa teks murni, atau bukan
teks, atau keduanya
• Contoh elemen: head, body, table, paragraph,
dan list
Definisi TAG
• Untuk menandai berbagai elemen dalam
suatu dokumen HTML
• Tag HTML terdiri atas sebuah kurung sudut kiri
(<, tanda lebih kecil), sebuah nama tag, dan
sebuah kurung sudut kanan (>, tanda lebih
besar)
• Tag umumnya berpasangan (misal <H1>
dengan </H1>)
Tag-tag Dasar HTML
•
•
•
•
•
•
•
•
•
•
HTML
Head
Title
Body
Paragraph
Line Break
Heading
Mengatur Letak Heading
Garis Datar
Komentar
HTML
• Merupakan tag dasar yang mendefinisikan
bahwa dokumen ini adalah dokumen HTML.
Tag ini merupakan satu keharusan bagi
pemrograman web untuk menuliskannya
sebagai tag pertama dalam dokumen HTML.
<html> di awal dokumen dan </html> di akhir
dokumen.
head
• Merupakan tag berikutnya setelah <html>
untuk menuliskan keterangan tentang
dokumen web yang akan ditampilkan.
<head> di awal setelah <html>, dan </head>
di akhir section head.
Title
• Merupakan tag di dalam head yang harus
dituliskan untuk memberikan judul/informasi
pada caption browser web tentang topik atau
judul dari dokumen web yang ditampilkan
dalam browser.
<title> Judul dokumen </title>
Body
• Merupakan section utama dalam dokumen
web. Pada section ini semua dokumen yang
akan ditampilkan dalam browser harus
dituliskan.
<body> di awal, segera setelah tag </head>
</body> di akhir, diletakkan sebelum </html>
Paragraph
• Informasi yang disajikan dalam dokumen
harus mengikuti kaidah-kaidah dalam
penulisan. Misalnya satu pikiran utama
disimpan dalam satu paragraph.
<p> tulisan dalam paragraph </p>
Line Break
• Kita dapat memaksakan ganti baris pada
dikumen web (mirip dengan fungsi enter pada
ms office). Namun masih dalam satu
paragraph.
<p> Memotong <br> baris dalam suatu <br>
paragraph, gunakan tag br. </p>
Heading
• Heading tulisan akan ditampilkan dengan
huruf yang lebih besar atau ditebalkan.
• Ada 6 tingkat heading dalam HTML, dinomori
1 sampai 6. Nomor 1 adalah heading terbesar.
<h1> ini adalah heading 1 </h1>
Mengatur Letak Heading
• Untuk mengatur letak heading dalam baris
(alignment), bisa rata kiri, rata kanan, atau
tengah.
• <align> </align>
<h1 align=“right”> heading 1 rata kanan
</h1>
Garis Datar
• Sebuah garis dapat disisipkan dalam dokumen
web, umumnya digunakan sebagai pemisah
antar bagian atau paragraf.
<p> Ini adalah paragraf pertama </p>
<hr>
<p> Ini adalah paragraf kedua </p>
Contoh html dasar
<html>
<head>
<title> Judul Halaman</title>
</head>
<body>
Ini adalah homepage pertamaku.
<b> Ini adalah teks tebal </b>
</body>
</html>
Hasilnya
Format Teks HTML
•
•
•
•
Pemformatan Teks
Teks Preformat
Arah Teks
dll
Pemformatan Teks
Beberapa pemformatan teks:
• Huruf tebal <b> </b>
• Huruf miring <i></i>
• Superscript <sup></sup>
• Subscript <sub></sub>
Teks Preformat
• Jarak antar kata suatu teks atau kalimat dalam
dokumen web adalah satu spasi. Agar browser
web menampilkan sesuai dengan dokumen
web tersebut dalam editor teks, maka harus
diberi tag <pre></pre>
Contoh teks preformat
Hasil teks preformat
Arah Teks
• Cara penulisan teks dapat diubah dari kiri ke
kanan menjadi dari kanan ke kiri.
• Tag <bdo> - bidirectional override.
Contoh mengubah arah teks
Hasil mengubah arah teks
Link HTML – Tag Anchor
• HTML menggunakan tag <a> untuk membuat
link pada dokumen lain dalam web. Atribut
href digunakan untuk mendefinisikan lokasi
link.
<a href="http://www.google.com"> Teks ini
yang akan ditampilkan
</a>
List HTML
• Ordered List
• Unordered List
• Nested List
Ordered List
• Nomor item secara default adalah secara
ascending atau secara urut, misal 1,2,3,..., dst.
• Tag yang digunakan adalah <ol>
• Berikut adalah nilai-nilai yang dapat
digunakan untuk mengubah penomoran
dalam ordered list:
Type
arti
I
Ditampilkan dg angka Romawi huruf besar
i
Ditampilkan dg angka Romawi huruf kecil
a
Diubah dg menggunakan abjad huruf kecil
A
Diubah dg menggunakan abjad huruf besar
Contoh Ordered List
Hasil Ordered List
Unordered List
• Unordered list sering disebut sebagai bulleted
list.
• Untuk mengubah jenis bullet dapat
didefinisikan pada atribut type pada tag <ul>.
• Contoh mengubah jenis bullet menjadi kotak:
<ul type=“box”>...</ul>
Contoh Unordered List
Hasil Unordered List
Nested List
• Bullet dapat digunakan secara bersarang,
maksudnya di dalam list ada list lg.
• Contoh nested List:
Hasil Nested List
Table HTML
Elemen
Penjelasan
<table></table>
Mendefinisikan sebuah tabel dalam html. Jika atribut
border dituliskan, maka browser akan menampilkan tabel
dg border.
<tr></tr>
Menentukan jumlah baris dalam tabel.
<th></th>
Menentukan sel header tabel
<td></td>
Mendefinisikan sebuah sel data tabel.
Perintah – perintah Dasar HTML
1. <H1> sampai <H6>
<H1> </H1> font ukuran besar
<H2> </H2>
.... ....
<H6> </H6> font semakin kecil
2. <HR>
Fungsi: perintah untuk membuat garis
horisontal penuh layar.
contoh:
3. <I>
Fungsi: membuat teks miring
4. <B>
Fungsi: membuat teks tebal
5. <U>
Fungsi: membuat teks bergaris bawah
6. <CENTER>
Fungsi: membuat teks ke tengah layar
7. <ALIGN>
Fungsi: Membuat text reta kiri dan rata kanan
Sintak:
<P ALIGN=right>untuk rata kanan
<P ALIGN=left> untuk ratakiri
<P ALIGN=center> untuk rata tengah
<P ALIGN=justify> untuk rata kiri dan rata kanan
Atau
<H? ALIGN=right>untuk rata kanan
< H? ALIGN=left> untuk ratakiri
< H? ALIGN=center> untuk rata tengah
< H? ALIGN=justify> untuk rata kiri dan rata kanan
Contoh pemakaian:
<H2 Align=right>Selamat Datang di Website Kami</H2>
8. <BR>
Fungsi: memasukkan fungsi enter
Contoh: Jika perintah <BR> diberikan di awal atau
di akhir baris, maka kalimat berikutnya akan
dicetak pada baris berikutnya.
9. <!>
Fungsi: membuat komentar
Semua teks atau perintah yang diapit oleh
perintah ini tidak akan dijalankan
10. <P>
Fungsi: memisahkan paragraph yang satu dengan
paragraph yang lain
11. <DD>
Fungsi: membuat teks atau sebuah paragraph agak masuk
ke dalam
12. <BASEFONT>
Fungsi: Mengubah ukuran font
Contoh:
<BASEFONT SIZE=6>
WELCOME TO MY WEBSITE
<B> WELCOME TO MY WEBSITE DAN TEBAL</B>
13. <FONT>
Fungsi: mengubah ukuran font, tetapi angka yang
terdapat dalam size yang merupakan ukuran font
harus diberi tanda kutip
14. <FACE>
Fungsi: mengubah jenis font
15. <SUP>
Fungsi: membuat cetak naik suatu teks
Contoh:
Kami adalah yang pertama: 1st in the world
16. <SUB>
Fungsi: membuat cetak naik suatu teks
Contoh: teks cetak turun
H2O (disebut air) dan C2127No (disebut
Methadon)
17. <UL> atau Unorder List
Fungsi: membuat bullet
18. <LI>
• Fungsi: juga untuk membuat
bullet
• Catatan: perintah <LI> harus
berada dalam perintah OL, UL,
DIR, Menu
• Contoh:
• <UL>
• <LI>
• <H2> Jawa Timur </H2>
• <UL>
• <LI> Surabaya </LI>
• <LI> MALANG </LI>
• <LI> GRESIK </LI>
•
•
•
•
•
•
•
•
•
•
•
•
</UL>
</LI>
</BR>
<LI>
<H2> Jawa Barat </H2>
<UL>
<LI> Bandung </LI>
< LI> Sukabumi </LI>
<LI> Bogor </LI>
</UL>
</LI>
</UL>
19. <IMGSRC>
Fungsi: memasukkan gambar ke dalam Website
Anda dapat juga memasukkan gambar berakhiran *.Jpg,
*.Gif, *.Bmp, dll
Sintak: <IMG BORDER=”5”>
“5” merupakan ukuran border (bingkai), ganti angka ini
sesuai keinginan Anda
20. <BGSOUND>
Fungsi: memasukkan suara atau musik ke dalam Website
Sintak: <BGSOUND loop=infite Src=”d:/Selamat
datang.WAV”>
Link dengan sorot
• Berikut ini adalah contoh program bagaimana
membuat link hanya dengan sorot saja (link
tidak perlu diklik, tetapi cukup disorot dengan
mouse).
<HTML>
<HEAD>
<TITLE> </TITLE>
<META Name=”description”Content=” ”>
<META Name=”keywords”Content=” ”>
<META Name=”generator”Content=” ”>
</HEAD>
<BODY BG Color=“#FFFFFF”Text=”#000000” =”#0000FF” VLink=”#800080”>
<Center>
<A href=” ”target=main on mouse over=”Window.open(‘c:/html/keterangan.html’):”>
<Font Size=3 FACE=Arial Color=#804000> Keterangan </FONT> </e>
</CENTER>
</BODY>
</HTML>
Link dengan tombol:
Berikut adalah contoh program link dengan tombol
Sintak:
<Input type=”button”Value=”Nama Tombol”
On Click=”parent.location=”Link Anda disini”>
Contoh:
Buatlah link dengan nama:
About.html
Produk_Kami.html
Cara_Memesan.html
<HTML>
<HEAD>
<TITLE></TITLE>
<META name=”description”Content=” ”>
<META name=”keywords”Content=” ”>
<META name=”generator”Content=”Cute HTML”>
</HEAD>
<BODY BGCOLOR=”#FFFFFF”Text=”#000000”Vlink=”3800080”>
<Center>
<h1> PT.OCTA>
<Input type=”button”Value=”About”
On Click=”parent.location=”c:/website/About.html”>
<Input type=”button”Value=”Produk Kami”
On Click=”parent.location=”c:/gambar/produk_kami.html”>
<Input type=”button”Value=”Cara Memesan”
On Click=”parent.location=”c:/gambar/cara_memesan.html”>
</Center>
</Body>
</HTML>
Kolom
• <tr> adalah perintah untuk membuat kolom
pada notepad
• Berikut adalah contoh perintah cara membuat
kolom pada notepad
<html>
<head>
<title> Belajar membuat kolom </title>
</head>
<H3 Align=”Center”> DAFTAR MAHASISWA</H3>
<table border=”3” border color=”red”>
<tr>
<td> No
<td> Nama
<td> Alamat
<td> Telp
<td> Poto
</tr>
<tr>
<td> 1
<td> Adi
<td> Sby
<td> 081234
<td> <Img scr=”C:\Documents and Settings\XP\My Documents\My Webs\abi_pict1.JPG”></tr>
</html>
Membuat Frame:
• Framecols: membagi layar dalam bentuk kolom
• FrameRows: membagi layar dengan bentuk baris
• Frame Src: menampilkan file dalam frame
Bentuknya:
<Frame cols=”30%,*”>
<Frame Src=”Nama.file” Name=”Teks”>
<Frame cols=”40%,*”>
<Frame Src=”Gambar File” Name=”Teks”>
<Frame Src=”Nama.file” Name=”Teks”>
</Frameset>
Contoh Program Frame:
<Html>
<Head>
<Title> Me-link dengan sorot </Title>
</Head>
<Frame cols=”30%,*”>
<Frame Src=”Nama file” Name=”Teks”>
<Frame Rows=”40%,*”>
<Frame Src=”Gambar file” Name=”Gambar”>
<Frame Src=”Nama file” Name=”Teks”>
</Frameset>
</Html>
Cara mengatur kode warna HTML
• Pengaturan warna dalam dokumen html menggunakan
kode warna RGB. Ada kode warna RGB ada CMYK
(untuk membuktikan silakan buka potoshop). Dan
didalam dokumen html digunakan kode kombinasi
warna RGB (Red, Green, Blue). Setiap warna yang
ditampilkan dalam 2 digit nilai kode heksadesimal yang
menunjukkan banyaknya intensitas dari kombinasi
warna merah, hijau, dan biru. Misalnya untuk warna
cyan, dibuat pencampuran warna sebagai berikut:
Contoh kombinasi warna lanjut
• Berarti untuk warna cyan dapat dibuat dengan
menuliskan dengan kode #00ffff. (Didalam
html jika ingin memasukkan kode heksa
tambahkan tanda “#” di awalnya sebagai
syarat)
• Disamping itu pembuatan warna dapat dibuat
langsung dengan menggunakan nama warna
dalam bahasa inggris, misalkan
kuning=’yellow’
• Kode warna didalam HTML dapat dimasukkan
dengan tag <body bgcolor=’#00ffff’>
• Berikut ini beberapa contoh warna-warna yang dapat
digunakan dalam html:
• Anda juga dapat membuat campuran sendiri warna-warna
berdasarkan imajinasi anda, yang penting anda mengikuti
aturan di atas.
HEX HTML color codes
DECIMAL HTML color codes

HTML (Hyper Text Markup Language)

Transcript HTML (Hyper Text Markup Language)

Directory