1. Pengertian HTML
HTML yang sering sisebut juga Hypertext markup language merupakan salah satu format atau kode yang digunakan untuk pembuatan aplikasi atau document yang berada di halaman web. Sebelum membelajari HTML anda harus mengetahui basic HTML ,yang terdiri dari:
HTML yang sering sisebut juga Hypertext markup language merupakan salah satu format atau kode yang digunakan untuk pembuatan aplikasi atau document yang berada di halaman web. Sebelum membelajari HTML anda harus mengetahui basic HTML ,yang terdiri dari:
- Hypertext
- Tags dan elements
- Text formatting
- Lists, hyperlinks, images
- Table, frames
- Cascanding style sheets
2. Dasar-Dasar HTML
HTTP (hypertext transfer protocol) merupakan protokol yang digunakan untuk mentransfer data antara web server ke web browser. Protokol ini mentransfer data-data web yang ditulis atau berformat HTML.
Dikatakan markup language karena HTML berfungsi untuk memformat file dokumen teks biasa untuk bisa ditampilkan pada web browser sesuai keinginan. Hal tersebut dapat dilakukan dengan menambah elemen atau sering disebut sebagai tagtag.
Elemen HTML biasanya berupa tag-tag
yang berpasangan dan setiap tag ditandai dengan simbol ` <` dan
` >` tanpa tanda kutip . Pasangan dari sebuah tag ditandai
dengan tanda `/ ` dan ini menunjukan penutupan suatu tag .
Misalnya pasangan dari tag < contoh > adalah </ contoh > . Dalam hal ini < contoh >disebut sebagai elemen dan biasanya dalam suatu elemen terdapat atribut-atribut untuk mengatur elemen itu. Jadi misalnya elemen < contoh > bila ditulis dengan
Atributnya adalah sebagai berikut : < contoh atribut1=”nilai_atribut1”atribut2=”nilai_atribut2” …> . Dalam penulisan tag HTML tidaklah case sensitive artinya penggunaan huruf kecil ataupun kapital tidaklah menjadi masalah.
Misalnya pasangan dari tag < contoh > adalah </ contoh > . Dalam hal ini < contoh >disebut sebagai elemen dan biasanya dalam suatu elemen terdapat atribut-atribut untuk mengatur elemen itu. Jadi misalnya elemen < contoh > bila ditulis dengan
Atributnya adalah sebagai berikut : < contoh atribut1=”nilai_atribut1”atribut2=”nilai_atribut2” …> . Dalam penulisan tag HTML tidaklah case sensitive artinya penggunaan huruf kecil ataupun kapital tidaklah menjadi masalah.
Atau
PENGERTIAN HTML:merupakan suatu metoda untuk
mengimplementasikan konsep hypertext dalam suatu naskah atau dokumen. HTML
sendiri bukan tergolong pada suatu bahasa pemrograman karena sifatnya yang
hanya memberikan tanda (marking up) pada suatu naskah teks dan bukan sebagai
program.
perintah perintah dasar dari HTML adalah sebagai berikut:
- <H1>
sampai <H6>
<H1> </H1>font ukuran besar
<H2> </H2>
…. ….
<H6> </H6>font semakin kecil - <HR>
Fungsi : perintah untuk membuat garis horizontal penuh layar
cth :
- <I>
Fungsi : membuat teks miring - <B>
Fungsi : membuat teks tebal - <U>
Fungsi : membuat teks bergaris bawah - <CENTER>
Fungsi : membuat text ke tengah layar - <ALIGN>
Fungsi : Membuat teks rata kiri dan rata kanan
Sintak
<P ALIGN=right>untuk rata kanan
<P ALIGN=left>untuk rata kiri
<P ALIGN=center>untuk rata tengah
<P ALIGN=justify>untuk rata kiri dan rata kananatau<H?ALIGN=right>
<H?ALIGN=left>
<H?ALIGN=center>
<H?ALIGN=justify> Contoh pemakaian:
<H2 Align=right>Selamat Datang Ke Website Kami <H2> - <BR>
Fungsi : memasukkan fungsi enter
Cth : Jika perintah <BR> diberikan di awal atau diakhir baris, maka kalimat berikutnya akan dicetak pada baris berikutnya - <!->
Fungsi : membuat komentar
Semua teks atau perintah yang diapit oleh perintah ini tidak akan dijalankan - <P>
Fungsi : memisahkan paragraph yang satu dengan paragraph yang lain - <DD>
Fungsi : membuat teks atau sebuah paragraph agak masuk ke dalam - <BASEFONT>
Fungsi : Mengubah ukuran font
Contoh :
<BASEFONT SIZE=6>
WELCOME TO MY WEBSITE
<B>WELCOME TO MY WEBSITE DAN TEBAL</B> - <FONT>
Fungsi : mengubah ukuran font, tetapi angka yang terdapat dalam size yang merupakan ukuran font harus diberi tanda kutib - <FACE>
Fungsi : mengubah jenis font - <SUP>
Fungsi : membuat cetak naik suatu teks
Contoh :
Kami adalah yang pertama:1stin the world - <SUB>
Fungsi : membuat suatu teks cetak turun
Contoh :
contoh-contoh teks cetak turun :
H2O (Disebut Air) dan
C2127No (Disebut Methadon) - <UL>
atau Unorder List
Fungsi : membuat bullet - <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> - <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 - <BGSOUND>
Fungsi : memasukkan suara atau musik ke dalam Website
Sintak : <BGSOUND loop=infite src=”d:/Selamat datang.WAV”>
Isi HTML :
<html>
<head> <title> isi dengan tema anda </title> </head> <body>isi dengan sesuka hatimu boleh gambar, vidio, foto dan script2 </body> </html> |
Tutorial lain
DASAR -DASAR PENULISAN KODE HTML
Bagi anda yang pengin belajar tentang penulisan kode HTML berikut adalah sedikit mengenai dasar - dasar cara penulisannya. Tulisan ini hanya memuat perintah kode HTML yang sangat sederhana. Tulisan ini mkungkin sangat cocok bagi mereka yang baru mengenal HTML.
Bagi anda yang pengin belajar tentang penulisan kode HTML berikut adalah sedikit mengenai dasar - dasar cara penulisannya. Tulisan ini hanya memuat perintah kode HTML yang sangat sederhana. Tulisan ini mkungkin sangat cocok bagi mereka yang baru mengenal HTML.
Html singkatan dari hypertext markup language, merupakan program
penulisan informasi sebuah homepage. Dalam Tulisan ini akan coba saya
perkenalkan dasar – dasar penulisan Kode HTML. Sebagai latihan Anda bisa menulis
kode – kode HTML berikut ke Microsoft frontpage, atau program lainnya untuk
mengetahui hasil setiap perintah kode HTML. (Untuk FrontPage setelah anda
membuka halaman kosong sebagai latihan tulis kode HTML di Bagian menu “HTML”
kemudian untuk melihat hasilnya silahkan tekan tombol “Preview” atau “Normal”
yang ada disebelahnya. Saya menyarankan pakai FrontPage karena kebanyakan
program tersebut sudah terinstal di komputer.
Sebelumnya ada
saran dikit: cara yang baik dengan mempelajari bagaimana orang lain
telah menuliskan kode-kode nya pada setiap halaman html adalah lakukan : klik
menu "View" dan klik "Source". Cobalah lakukan langkah ini
pada saat anda sedang membuka halaman html dokumen orang lain yang anda buka,
download atau copy dari internet. Dengan langkah ini maka anda akan melihat
sendiri di layar monitor komputer anda berbagai kode yang dituliskan pada
halaman html tersebut.
1. Menulis judul pada halaman homepage
Setiap dokumen HTML
sebuah homepage perlu diberi judul. Berikut adalah tampilan pada saat anda
melakukan perintah penulisan judul atau title :
<title>Sinungku
document</title>
Ubahlah teks
"Sinungku document" dengan judul artikel anda. Penulisan judul
biasanya dimulai dengan tanda tag <title> dan diakhiri
dengan tanda tag </title>. Judul tulisan sebaiknya dituliskan
pada awal dokumen anda.
2. Menambahkan sub-sub judul dan paragraphnya
Apabila anda telah
biasa mempergunakan Microsoft Word, anda sudah biasa pula dengan model-model
kodifikasi sub judul (heading) dengan tingkatan kepentingannya. Dalam bahasa
HTML ada enam tingkat sub judul (heading). H1 adalah sub judul yang
paling penting, H2 adalah sub judul yang agak kurang penting, begitu seterusnya
sampai H6, yang paling sedikit kepentingannya..
Berikut adalah
bagaimana caranya menambahkan sub judul (heading) :
<h1>Judul Penting</h1>
dan berikut adalah
penulisan sub judul selanjutnya :
<h2>Judul Kurang Penting</h2>
Setiap paragraph yang
anda tulis sebaiknya dimulai dengan sebuah kode tag <p>. Kode
tag </p> hanya dipergunakan bila perlu. Kecuali pada
penulisan sub judul biasanya diakhiri dengan kode tag </p>. Contoh :
<p>Paragraph Pertama.</p>
<p>Paragraph kedua.</p>
Untuk membuat lay-out tulisan kode yang dipakai :
<p align=”justify”>Teks anda</p> : Rata kiri kanan
<p align=”right”>Teks anda</p> : Rata Kanan
<p align=”center”>Teks anda</p> : Rata Tengah
<p align=”left”>Teks anda</p> : Rata Kiri
3. Menambahkan emphasis / Huruf Miring
Anda dapat menambahkan
emphasis yang terdiri dari sebuah kata atau beberapa kata dengan menuliskan
kode tag <em> pada awal emphasisnya dan diakhiri dengan
kode tag </em>. Atau kode : <i> dan diakhiri </i>
Contoh
Sinung putriku <em>pertama</em> yang cantik. Atau :
Sinung putri <i>pertama</i> dari Wahyo.
4. Membuat Huruf Tebal / Bold
Contoh : Sinung putri
<b>pertama</b> dari Wahyo.
5. Membuat Huruf Bergaris bawah
Contoh : Sinung putri
<u>pertama</u> dari Wahyo.
6. Membuat Warna Huruf
Contoh : Sinung putriku <font
color=”#0000ff”>pertama</font>yang cantik.
0000ff adalah kode warna huruf, anda bisa menggantinya dengan kode yang
lain.
7. Membuat Warna Background Huruf
Contoh : Sinung putriku <span
style=”#0000ff”>pertama</span>yang cantik.
8. Membuat ukuran / size Huruf
Contoh : Sinung putriku <font
size=”3”>pertama</font>yang cantik.
9. Mengubah Jenis Huruf
Contoh : Sinung putriku <font
face=”Times New Roman”>pertama</font>yang cantik.
10. Menambahkan gambar (images)
Gambar (atau images)
dapat ditambahkan kedalam halaman Web anda agar semakin informatif dan menolong
penyampaian pesan anda. Cara sederhana untuk menambahkan sebuah gambar adalah
dengan menggunakan kode tag <img>. Misalkan anda hendak
menambahkan sebuah file gambar "sinungku.jpeg" dalam folder atau
direktori yang sama dimana file dokumen HTML anda simpan. Gambar ini memiliki
lebar 200 pixel dan tingginya 150 pixel.Maka menulisnya sebagai berikut :
<img src="sinungku.jpeg" width="200"
height="150">
Lebar dan tinggi
tidaklah terlalu penting akan tetapi ukuran gambar yang kecil akan menolong
cepatnya tampilan halaman web anda diakses oleh orang lain di internet. Namun masih ada kekurangannya ! Orang lain yang tidak dapat
melihat gambar anda, akan memerlukan deskripsi gambarnya. Anda dapat
menambahkandeskripsinya dengan cara sebagai berikut :
<img src="sinungku.jpeg" width="200"
height="150"
alt="Putriku yang Pertama">
Atribut alt dipergunakan
untuk menuliskan perintah deskripsi singkat yaitu " Putriku yang Pertama
". Untuk gambar-gambar yang kompleks, anda akan membutuhkan deskripsi yang
lebih banyak. Misalkan perintah ini akan dituliskan dalam file
"sinungku.html", anda dapat menambahkan atribut deskripsi yang
panjang seperti dalam contoh berikut :
<img src="sinungku.jpeg" width="200"
height="150"
alt="Putriku yang Pertama "
longdesc="sinungku.html">
Anda dapat membuat
gambar dengan beberapa cara, dapat dengan mempergunakan kamera digital,
scanner, atau membuat gambar dengan program pembuatan gambar seperti Photoshop,
Corel, Microsoft Photoeditor, LViewpro dll.Kebanyakan
program browser dapat membaca format gambar GIF dan JPEG, program
browser yang terbaru juga dapat membaca format PNG. Untuk mencegah
lambatnya gambar anda diakses di internet sebaiknya anda menerapkan ukuran file
gambar yang tidak terlalu besar.
Secara umum, format JPEG
adalah format terbaik untuk fotografi dan memperhalus berbagai jenis gambar, sedangkan
format GIF dan PNG baik untuk grafis seperti bidang datar
berwarna, garis dan teks. Ketiga bentuk format itu memiliki kemampuan
"progressive rendering" yaitu kemampuan mengirimkan gambar kasarnya
terlebih dahulu dan kemudian dilanjutkan dengan menambahkan detailnya sampai
gambar tersebut tampil seluruhnya dengan baik.
11. Menambahkan link (tanda berhubungan) dengan halaman lain
Yang membuat Web demikian
efektif adalah adanya kemampuan untuk membuat hubungan (link) dari satu halaman
dengan halaman lainnya dan halaman lain yang berhubungan ini dapat dikerjakan
cukup dengan satu kali klik saja.
Hubungan atau Link
biasa ditulis dengan kode tag <a>. Misalkan sebuah hubungan
atau link hendak dibuat pada file "sinungku.html":
This a link to <a
href="Sinungku.html">Sinung's page</a>.
Teks antara kode tag
<a> dengan kode tag </a> adalah keterangan tentang hubungan atau
link yang akan dibuat. Umumnya keterangan ini diberi garis bawah. Warna
teks dan garis bawah dibuat berwarna biru.
Untuk membuat link ke
tempat Web yang lain anda perlu menambahkan alamat internet Web selengkapnya
(biasanya disebu URL), contoh untuk link ke w3c anda perlu menuliskan :
This is a link to <a
href="http://www.w3c.org/">W3C</a>.
Anda dapat juga
membuat gambar logo memiliki link ke halaman lain. Contoh penulisan berikut
memungkinkan gambar logo anda dapat berhubungan dengan home page.
<a href="/"><img src="logo.gif"
alt="home page"></a>
12. Tiga macam daftar
Bahasa HTML memiliki
kemampuan membuat tiga jenis daftar (list). Pertama daftar dengan kode bulat
(bulleted list), biasa disebut unordered list. Penulisannya
mempergunakan kode tag <ul> dan kode tag <li>,
contoh :
<ul>
<li>Sinung putriku pertama</li>
<li>Wahyo adalah ayahnya</li>
<li>Dyah adalah ibunya</li>
</ul>
Perhatian, anda selalu harus menuliskan kode tag </ul> pada bagian
akhir daftar anda, tetapi kode tag </li> bersifat tambahan atau bisa juga
tidak dipergunakan. Jenis daftar kedua disebut daftar bernomor atau disebut
juga ordered list. Ini dituliskan dengan kode tag <ol> dan
kode tag <li>. Contoh :
<ol>
<li>Sinung putriku pertama</li>
<li>Lahir tanggal 18 Agustus</li>
<li>Hari lahir Jum`at jam 20.05 WIB</li>
</ol>
Seperti daftar
pertama, anda selalu perlu mengakhiri daftar dengan kode tag </ol> ,
tetapi kode tag </li> pada bagian akhir adalah tambahan dan dapat
dihilangkan.
Daftar ke tiga dan
terakhir adalah daftar berdefinisi (definition list). Dengan daftar ini
memungkinkan anda membuat daftar terminologi dan definisinya. Daftar ini
ditulis dengan kode tag <dl> pada awal tulisan dan diakhiri dengan kode
tag </dl>. Masing-masing terminologi dimulai dengan kode tag <dt>
dan setiap definisi dimulai dengan kode tag <dd>. Contoh :
<dl>
<dt>the first term</dt>
<dd>its definition</dd>
<dt>the second term</dt>
<dd>its definition</dd>
<dt>the third term</dt>
<dd>its definition</dd>
</dl>
Kode tag </dt>
dan </dd> adalah tambahan dan bisa tidak dipergunakan. Catatan, tiap
daftar dapat disubkan antara satu daftar dengan daftar lainnya.Contoh :
<ol>
<li>the first list item</li>
<li>
the second list item
<ul>
<li>first nested item</li>
<li>second nested item</li>
</ul>
</li>
<li>the third list item</li>
</ol>
Anda bahkan dapat
membuat paragraph dan headingnya dan lain-lainl.pada daftar yang lebih panjang.
Tutorial lain
|
KODE
|
FUNGSI
|
|
TEKS TEBAL
|
<b>teks
kamu</b>
|
|
TEKS BESAR
|
<big>teks
kamu</big>
|
|
TEKS GARIS BAWAH
|
<u>teks
kamu</u>
|
|
TEKS GARIS TENGAH
|
<s>teks
kamu</s>
|
|
TEKS MIRING
|
<i>teks
kamu</i>
|
|
TEKS KEDIP
|
<blink>teks
kamu</blink>
|
|
TEKS KETENGAH
|
<p
align=center>teks kamu</p>
|
|
TEKS KEKIRI
|
<p
align="left">teks kamu</p>
|
|
TEKS KEKANAN
|
<p
align="right">teks kamu</p>
|
|
TEKS COLOR
|
<font
color="blue">teks kamu</font>
|
|
FONT YANG AKAN
DIGUNAKAN
|
<font
face="Georgia">teks kamu</font>
|
|
MEMBUAT GARIS
|
<hr>teks kamu
|
|
MEMBUAT GARIS WARNA
|
<hr color=red>
|
|
MEMBUAT SPASI
|
<br>
|
|
MEMBERI LINK KE
ALAMAT URL
|
<a
href="http://URL">nama</a>
|
|
MEMASANG
IMAGE/GAMBAR
|
<img
src="http://cahya.mw.lt/anim/mobil.gif">
|
|
TEKS JALAN DARI
KANAN KE KIRI
|
<marquee>teks
kamu</marquee>
|
|
TEKS JALAN
BOLAK-BALIK KIRI
|
<marquee
behavior="alternate">teks kamu</marquee>
|
|
MEMBERI BACKGROUND
WARNA PADA TEKS YANG BERJALAN
|
<marquee
bgcolor="blue">teks kamu</marquee>
|
|
TEKS BERJALAN DARI
KIRI KE KANAN
|
<marquee
direction="right">teks kamu</marquee>
|
|
TINGGI BAGIAN TEMPAT
TEKS BERJALAN
|
<marquee
height="20px">teks kamu</marquee>
|
|
LEBAR BAGIAN DARI
KEMUNCULAN TEKS BERJALANNYA
|
<marquee
width="100px">teks kamu</marquee>
|
|
MENAMPILKAN
KECEPATAN DARI TEKS BERJALAN
|
<marquee
scrollamount="10">teks kamu</marquee>
|
|
MENAMPILKAN
KECEPATAN DARI TEKS BERJALAN JUGA
|
<marquee
scrolldelay="5">teks kamut</marquee>
|
Tidak ada komentar:
Posting Komentar