62
HTML (Hyper Text Markup Language) Siti Mukaromah, S.Kom
| Date post: | 02-Jan-2016 |
| Category: |
Documents |
| Upload: | dalton-whitehead |
| View: | 68 times |
| Download: | 2 times |
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 HTMLElemen 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 kananSintak:<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 kananAtau<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 kananContoh pemakaian:<H2 Align=right>Selamat Datang di Website Kami</H2>
8. <BR>Fungsi: memasukkan fungsi enterContoh: Jika perintah <BR> diberikan di awal atau di akhir baris, maka kalimat berikutnya akan dicetak pada baris berikutnya.
9. <!>Fungsi: membuat komentarSemua 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 fontContoh:<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 teksContoh: Kami adalah yang pertama: 1st in the world
16. <SUB>Fungsi: membuat cetak naik suatu teksContoh: teks cetak turunH2O (disebut air) dan C2127No (disebut Methadon)
17. <UL> atau Unorder ListFungsi: 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 WebsiteAnda dapat juga memasukkan gambar berakhiran *.Jpg, *.Gif, *.Bmp, dllSintak: <IMG BORDER=”5”>“5” merupakan ukuran border (bingkai), ganti angka ini sesuai keinginan Anda
20. <BGSOUND>Fungsi: memasukkan suara atau musik ke dalam WebsiteSintak: <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 tombolSintak:<Input type=”button”Value=”Nama Tombol”On Click=”parent.location=”Link Anda disini”> Contoh:Buatlah link dengan nama:About.htmlProduk_Kami.htmlCara_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 frameBentuknya:<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
