HTML adalah ( Hypertext markup language ) Pengertian dan Fungsi HTML
2/09/2020
HTML berupa kode-kode tag yang menginstruksikan browser untuk menghasilkan tampilan sesuai dengan yang diinginkan. Sebuah file yang merupakan file HTML dapat dibuka dengan menggunakan browser web seperti Mozilla Firefox, Microsoft Internet Explorer, Google chrome dan beberapa browser lain. HTML juga dapat dikenali oleh aplikasi pembuka email ataupun dari PDA dan program lain yang memiliki kemampuan browser.
HTML adalah (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
Berikut adalah contoh perintah dasar HTML:
<H1> sampai <H6>
<H1> </H1>font ukuran besar
<H2> </H2>
<H6> </H6>font semakin kecil
HTML adalah (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
Berikut adalah contoh perintah dasar HTML:
<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, <OL> atau Ordered 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”>
Indenting Text
Tag <BLOCKQUOTE> yaitu teks yang menjorok lebih kedalam dari garis tepi secara otomatis dari kiri ke kanan.
Cobalah contoh berikut :
<BLOCKQUOTE>
You can use Sound Recorder to record, play, and edit sound files.
To use Sound Recorder, you must have a sound card and speakers
installed on your computer. If you want to record live sound,
you also need a microphone.
</BLOCKQUOTE>
Penerapan Definisi ListDefinisi List adalah serupa dengan daftar kata. Diterapkan menggunakan tag <DL> dan <DT> seperti ditunjukkan listing dibawah ini :
<DL>
<DT>Java
<DD>Developed by Sun Microsystems Inc
<DT>Yang kedua
<DD>Developed by saya sendiri
</DL>
Aturan dan cara penulisan HTML
berikut karakter yang digunakan dalam html
<
"
=
/
>
yah, hanya 5 karakter, jika suatu saat menemukan karakter seperti :, ; (, ), ‘, itu bukan html tapi dhtml atau htmldom
contoh;
<p style="color:blue; font-size:17px;"> ini adalah gabungan css dan html </a>
<a href="javascript:void(0)" onclick="window.open('http://indaam.com/','popupwindow', 'scrollbars=yes,width=500,height=520');return
true">ini adalah link contoh html, javascript event</a>
struktur penulisan html
contoh penulisan html seperti ini
<html>
<head>
<!-- di sini penulisan tag head -->
</head>
<body>
<!-- di sini penulisan tag body -->
</body>
</html>
contoh diatas adalah penulisan html, berikut keterangannya
diawali dengan tag <html> dan diakhiri </html>
setiap penulisan tag, harus di tutup dengan tag yang sama di mana tag penutup di tambahkan /(slash atau garis miring ), contoh </html>, </head>, </body>. ada garis miringnya kan!
penulisan tag diantara<head> dan </head>, tidak akan ditampilkan di layar, fungsi tag <head> ini hanya menjelaskan kepada browser tentang isi document html serta menghubungkan dengan link/style eksternal
penulisan tag diantara<body> dan </body>, seluruhhnya akan di tampilkan di layar(browser)
komentar html
untuk memudahkan penulisan html, kita bisa menambahkan komentar. dimana komentar html ini tidak akan ditampilkan di browser, contoh
<p>ini adalah paragraf</p>
<!--tag p di atas adalah paragraf -->
keterangan
dari contoh diatas, browser hanya akan menampilkan paragraf yang bertuliskan ini adalah paragraf, sedangkan
<!-tag p di atas adalah paragraf->
tidak akan di tampilkan
penulisan komentar seperti ini
diawali dengan <!-- diakhiri dengan –>
contoh penulisannya seperti ini
<!-- tulis komentar anda disini -->
ekstensi html
ektensi html adalah [dot]html dan [dot]htm! terserah mau pilih mana!
ok mari kita ke
menjalankan dan menulis html
buka program notepad, atau notepad++(jika ada)
copy code markup dibawah
<html>
<head>
<title>belajar html itu madah ya</title>
<!--tag title adalah judul unntuk browser -->
</head>
<body>
<p>ya html itu memang mudah</P>
<!--tag p adalah paragraf -->
</body>
</html>
kemudian paste dan save as dengan nama yang inginkan
dasardasar.htm(pilih all tipes)
pastikan ekstensi filenya adalah [dot]html dan bukan bukan [dot]txt
simpan di lokal disk D kemudian buka kembali untuk mengetahui hasilya
jalankan file(double klick) atau open with
setelah dilihat, edit lagi html yang di simpan tersebut
kemudian tambahkan markup diatas tag </body>
<b>ini text tebal</b>
<!--tag b adalah text tebal -->
<i>ini text miring</i>
<!--tag i adalah miring -->
trus save atau simpan, sakarang buka lagi browser, kemudian refresh/ reload tekan f5, lihat hasilnya
bersambung. . .
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, <OL> atau Ordered 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”>
Indenting Text
Tag <BLOCKQUOTE> yaitu teks yang menjorok lebih kedalam dari garis tepi secara otomatis dari kiri ke kanan.
Cobalah contoh berikut :
<BLOCKQUOTE>
You can use Sound Recorder to record, play, and edit sound files.
To use Sound Recorder, you must have a sound card and speakers
installed on your computer. If you want to record live sound,
you also need a microphone.
</BLOCKQUOTE>
Penerapan Definisi ListDefinisi List adalah serupa dengan daftar kata. Diterapkan menggunakan tag <DL> dan <DT> seperti ditunjukkan listing dibawah ini :
<DL>
<DT>Java
<DD>Developed by Sun Microsystems Inc
<DT>Yang kedua
<DD>Developed by saya sendiri
</DL>
Aturan dan cara penulisan HTML
berikut karakter yang digunakan dalam html
<
"
=
/
>
yah, hanya 5 karakter, jika suatu saat menemukan karakter seperti :, ; (, ), ‘, itu bukan html tapi dhtml atau htmldom
contoh;
<p style="color:blue; font-size:17px;"> ini adalah gabungan css dan html </a>
<a href="javascript:void(0)" onclick="window.open('http://indaam.com/','popupwindow', 'scrollbars=yes,width=500,height=520');return
true">ini adalah link contoh html, javascript event</a>
struktur penulisan html
contoh penulisan html seperti ini
<html>
<head>
<!-- di sini penulisan tag head -->
</head>
<body>
<!-- di sini penulisan tag body -->
</body>
</html>
contoh diatas adalah penulisan html, berikut keterangannya
diawali dengan tag <html> dan diakhiri </html>
setiap penulisan tag, harus di tutup dengan tag yang sama di mana tag penutup di tambahkan /(slash atau garis miring ), contoh </html>, </head>, </body>. ada garis miringnya kan!
penulisan tag diantara<head> dan </head>, tidak akan ditampilkan di layar, fungsi tag <head> ini hanya menjelaskan kepada browser tentang isi document html serta menghubungkan dengan link/style eksternal
penulisan tag diantara<body> dan </body>, seluruhhnya akan di tampilkan di layar(browser)
komentar html
untuk memudahkan penulisan html, kita bisa menambahkan komentar. dimana komentar html ini tidak akan ditampilkan di browser, contoh
<p>ini adalah paragraf</p>
<!--tag p di atas adalah paragraf -->
keterangan
dari contoh diatas, browser hanya akan menampilkan paragraf yang bertuliskan ini adalah paragraf, sedangkan
<!-tag p di atas adalah paragraf->
tidak akan di tampilkan
penulisan komentar seperti ini
diawali dengan <!-- diakhiri dengan –>
contoh penulisannya seperti ini
<!-- tulis komentar anda disini -->
ekstensi html
ektensi html adalah [dot]html dan [dot]htm! terserah mau pilih mana!
ok mari kita ke
menjalankan dan menulis html
buka program notepad, atau notepad++(jika ada)
copy code markup dibawah
<html>
<head>
<title>belajar html itu madah ya</title>
<!--tag title adalah judul unntuk browser -->
</head>
<body>
<p>ya html itu memang mudah</P>
<!--tag p adalah paragraf -->
</body>
</html>
kemudian paste dan save as dengan nama yang inginkan
dasardasar.htm(pilih all tipes)
pastikan ekstensi filenya adalah [dot]html dan bukan bukan [dot]txt
simpan di lokal disk D kemudian buka kembali untuk mengetahui hasilya
jalankan file(double klick) atau open with
setelah dilihat, edit lagi html yang di simpan tersebut
kemudian tambahkan markup diatas tag </body>
<b>ini text tebal</b>
<!--tag b adalah text tebal -->
<i>ini text miring</i>
<!--tag i adalah miring -->
trus save atau simpan, sakarang buka lagi browser, kemudian refresh/ reload tekan f5, lihat hasilnya
bersambung. . .