Dengan menggunakan perintah-perintah HTML memungkinkan user untuk melakukan fungsi-fungsi berikut ini:
- Menentukan ukuran dan alur teks
- Mengintegrasikan gambar dengan teks (in-line)
- Membuat links
- Mengintegrasikan file audio dan video
- Membua form Interaktif
HTML lebih menekankan pada penggambaran komponen-komponen struktur dan formatting dl dalam halaman web daripaada menentukan penampilannya. Sedangkan web browser digunakan untuk mengiterpretasikan perintah-perintah HTML. Salah satu hal penting tentang eksistensi HTML adalah tersedianya lingua franca (bahasa komunikasi). HTML tidak didesain untuk dekstop publishing, tetapi didesain sebagai bahasa pengkodean untuk World Wide Web. HTML menawarkan beberapa kemampuan untuk menampilakn dokumen memalui berbagai macam sistem komputer.
Penentuan tampilan halaman web tergantung pada web browser yang digunakan. Penentuan kondisi oleh HTML yang akan digunakan. Penentuan kondisi oleh HTML menggambarkan keterbatasan kemampuan komputer yang berbeda, baik dari segi grafikal sampai teks.
- Tag-Tag Dasar HTML
Pengenalan Singkat Tentang Tag Dasar:
Tag dasar bisa berarti elemen dasar. Tag dasar merupakan pondasi dalam pembuatan web berbasis HTML.
Tag yang paling dasar dalam penyusunan web adalah <html>, <head>, <body> berikut pasangannya.
Tag dasar bisa berarti elemen dasar. Tag dasar merupakan pondasi dalam pembuatan web berbasis HTML.
Tag yang paling dasar dalam penyusunan web adalah <html>, <head>, <body> berikut pasangannya.
Judul atau topik utama dokumen disimpan dalam elemen head, disimpan dalam elemen title dengan tag <title>....</title>. Title ini akan ditampilkan pada caption Windows Web Browser. Hanya elemen title saja yang ditampilkan dari elemen head yang ditampilkan di browser, elemen lain dari head tidak ditampilkan sebagai elemen yang menjelaskan tentang dokumen HTML yang bersangkutan.
Teks informasi disimpan pada element body didalam tag <body>...</body>. Teks disusun dalam paragraf-paragraf dengan tag <p>. Teks juga memiliki judul-judul yang menunjukkan topik-topik atau bagian-bagian dalam dokumen yang disebut heading. Heading dokumen HTML memiliki 6 level yang dinyatakan dengan tak <h1>, <h2>, <h3>, <h4>, <h5> dan <h6> dengan tag penutup </h1>, </h2>, </h3>, </h4>, </h5> dan </h6>.
Penjelasan singkat fungsi Tag-Tag Dasar:
Penjelasan singkat fungsi Tag-Tag Dasar:
HTML : merupakan tag dasar yang menunjukkan bahwa dokumen ini adalah dokumen HTML. Tag ini merupakan keharusan bagi pemrogram web untuk menuliskannya sebagai tag pertama dalam dokumen HTML.
<html>
..............................
</html>
HEAD : merupakan tag berikutnya setelah <html> untuk menuliskan keterangan tentang dokumen web yang akan ditampilkan.
<head>
..............................
</head>
TITLE : merupakan tag di dalam head yang harus dituliskan untuk memberikan judul/informasi pada caption web browser tentang topik atau judul dari dokumen HTML yang ditampilkan dalam browser.
<title>
tuliskan judul dokumen disini!</title>
BODY : merupakan elemen utama dalam dokumen web. Pada elemen ini semua isi dokumen yang akan ditampilkan pada browser harus dituliskan.
<body>
tuliskan semua informasi yang akan ditampilkan disini! bisa teks, tabel, frame, form, gambar, video, suara dll.</body>
PARAGRAF : informasi yang akan disajikan dalam dokumen harus mengikuti kaidah dalam penulisan. Misalnya, satu pikiran utama disimpan dalam satu paragraf. Setiap paragraf diawali dengan tag <p> dan diakhiri dengan tag </p>.
<body>
<p>tuliskan paragraf dari dokumen anda disini</p></body>
LINE BREAK : line break / tag <br> digunakan untuk memaksa teks berganti baris, tetapi masih dalam paragraf yang sama.
HEADING : heading pada suatu dokumen digunakan untuk menunjukkan tingkat keberartian dari teks yang ditampilkan. Pada heading teks akan ditampilkan dalam bentuk teks yang lebih besar dan ditebalkan. Heading didefinisikan dalam tag <h1> sampai dengan <h6>.
HORIZONTAL RULE : umumnya digunakan untuk memisahkan paragraf atau antar bagian. Horizontal rule didefinisikan dengan menggunakan tag <hr>.
KOMENTAR : untuk mendefinisikan komentar pada dokumen HTML, teks yang akan dijadikan komentar harus dituliskan di dalam tag pembuka <! dan tag penutup ->.
<!- tuliskan komentar anda disini->
RINGKASAN
| Tag | Kegunaan |
| <html> | Menyatakan Bahwa Dokumen HTML |
| <body> | Mendefinisikan body dokumen |
| <h1>..<h6> | Mendefinisikan heading 1, 2, 3, 4, 5, 6 |
| <p> | Menyatakan bahwa sebuah paragraf |
| <br> | Menyisipkan line break (enter) |
| <hr> | Mendefinisikan sebuah garis horizontal/horizontal rule |
| <!-> | Untuk membuat komentar |
Berikut adalah daftar dari tag-tag HTML.
| Tag | Description | DTD |
|---|---|---|
| <!--...--> | Mendefinisikan komentar HTML | STF |
| <!DOCTYPE> | Mendefinisikan tipe dokumen | STF |
| <a> | Mendefinisikan anchor link | STF |
| <abbr> | Mendefinisikan sebuah singkatan | STF |
| <acronym> | Mendefinisikan akronim | STF |
| <address> | Mendefiniskan informasi kontak untuk pemiliki / penulis dokumen | STF |
| <applet> | Ditinggalkan. Medefinisikan applet | TF |
| <area /> | Mendefinisikan arae di dalam image-map | STF |
| <b> | Mendefinisikan tulisan tebal | STF |
| <base /> | Mendefinisikan URL utama/target untuk semua URL alternatif di dalam dokumen | STF |
| <basefont /> | Ditinggalkan. Merincikan dari warna, ukuran dan font default dari semua tulisan yang ada di dalam dokumen. | TF |
| <bdo> | Menggantikan arah tulisan | STF |
| <big> | Mendefinisikan tulisan besar | STF |
| <blockquote> | Mendefinisikan kutipan yang panjang | STF |
| <body> | Mendefinisikan badan dokumen | STF |
| <br /> | Mendefinisikan satu baris baru | STF |
| <button> | Mendefinisikan tombol yang bisa di-klik | STF |
| <caption> | Mendefinisikan judul dari tabel | STF |
| <center> | Ditinggalkan. Mendefinisikan tulisan agar ditengah | TF |
| <cite> | Mendefinisikan kutipan | STF |
| <code> | Mendefinisikan kode komputer | STF |
| <col /> | Mendefinisikan nilai atribut dari satu atau lebih kolom pada tabel | STF |
| <colgroup> | Merincikan sebuah grup atau lebih dari kolom-kolom dalam tabel untuk di format | STF |
| <dd> | Mendefinisikan deskripsi dari sebuah item di daftar definisi | STF |
| <del> | Defines text that has been deleted from a document | STF |
| <dfn> | Mendefinisikan ketentuan definisi | STF |
| <dir> | Ditinggalkan. Mendefinisikan daftar direktori | TF |
| <div> | Mendefinisikan sebuah bagian di dalam sebuah dokumen | STF |
| <dl> | Mendefinisikan daftar definisi | STF |
| <dt> | Mendefinisikan ketentuan (dari sebuah item) di dalam daftar definisi | STF |
| <em> | Mendefinisikan tulisan emphasized | STF |
| <fieldset> | Menggabungkan elemen-elemen yang saling berhubungan di dalam form | STF |
| <font> | Ditinggalkan, mendefinisikan font, warna, dan ukuran dari tulisan | TF |
| <form> | Defines an HTML form for user input | STF |
| <frame /> | Defines a window (a frame) in a frameset | F |
| <frameset> | Defines a set of frames | F |
| <h1> to <h6> | Defines HTML headings | STF |
| <head> | Mendefinisikan informasi mengenai sebuah dokumen | STF |
| <hr /> | Mendefinisikan garis horisontal | STF |
| <html> | Mendefinisikan inti dari dokumen HTML | STF |
| <i> | Mendefinisikan tulisan italic | STF |
| <iframe> | Mendefinisikan inline frame | TF |
| <img /> | Mendefinisikan gambar | STF |
| <input /> | Mendefinisikan kontrol input | STF |
| <ins> | Mendefinisikan tulisan yang telah dimasukkan ke dalam dokumen | STF |
| <kbd> | Mendefinisikan input keyboard | STF |
| <label> | Mendefinisikan label dari elemen <input> | STF |
| <legend> | Mendefinisikan Judul dari sebuah elemen <fieldset> | STF |
| <li> | Mendefinisikan daftar item | STF |
| <link /> | Mendefinisikan hubungan antara dokumen dari sumber diluar dokumen | STF |
| <map> | Defines a client-side image-map | STF |
| <menu> | Ditinggalkan. Mendifinisikan daftar menu | TF |
| <meta /> | Mendefinisikan metada mengenai sebuah dokumen HTML | STF |
| <noframes> | Defines an alternate content for users that do not support frames | TF |
| <noscript> | Defines an alternate content for users that do not support client-side scripts | STF |
| <object> | Mendefinisikan obyek yang tertanam / embedded | STF |
| <ol> | Mendefinisikan urutan teratur | STF |
| <optgroup> | Mendefinisikan grup dari pilihan/option dalam drop-down list yang saling berhubungan | STF |
| <option> | Mendefinisikan pilihan dalam a drop-down list | STF |
| <p> | Mendefinisikan paragraf | STF |
| <param /> | Mendefinisikan parameter dari sebuah obyek | STF |
| <pre> | Mendefinisikan tulisan yang belum di format | STF |
| <q> | Mendefinisikan kutipan pendek | STF |
| <s> | Mendefinisikan tulisan strikethrough | TF |
| <samp> | Mendefinisikan contoh dari output program komputer | STF |
| <script> | Mendefinisikan client-side script | STF |
| <select> | Mendefinisikan drop-down list | STF |
| <small> | Mendefinisikan tulisan yang lebih kecil | STF |
| <span> | Mendefinisikan sebuah bagian dari dokumen | STF |
| <strike> | Ditinggalkan. Mendefinisikan tulisan strikethrough | TF |
| <strong> | Mendefinisikan tulisan strong | STF |
| <style> | Mendefinisikan informasi style dari dokumen | STF |
| <sub> | Mendefinisikan tulisan subscripted | STF |
| <sup> | Mendefinisikan tulisan superscripted | STF |
| <table> | Mendefinisikan tabel | STF |
| <tbody> | Menggabungkan isi dari badan tabel | STF |
| <td> | Mendefinisikan kolom dari tabel | STF |
| <textarea> | Mendefinisikan kontrol dari banyak baris input (text area) | STF |
| <tfoot> | Menggabungkan footer menjadi satu grup pada tabel | STF |
| <th> | Mendefinisikan header dari tabel | STF |
| <thead> | Mendefinisikan Grup header dari tabel | STF |
| <title> | Mendefinisikan Judul dari sebuah dokumen | STF |
| <tr> | Mendefinisikan baris dari tabel | STF |
| <tt> | Mendefinisikan tulisan teletype | STF |
| <u> | Ditinggalkan. Mendefinisikan tulisan garis bawah / underline | TF |
| <ul> | Mendefinisikan urutan acak | STF |
| <var> | Mendefinisikan variabel | STF |
| <xmp> | Dintinggalkan. Mendefinisikan tulisan yang belum diformat |
- CARA MENGGUNAKAN HTML
LANGKAH 1
* MEMBUKA NOTEPAD.
LANGKAH 2
* MENGETIKKAN SINTAK/SYNTAX.
Berikut ini adalah syntax dasar yang membentuk suatu HTML.
pertama, ketikkan
<html>
tekan enter, kemudian ketik
<head>
Dalam container head, kita bisa mengetikan beberapa sintak, tapi yang paling penting jangan lupa mengetikan sintak <title> judul halaman web </title>. Untuk sintak lain nanti saja.
Sekarang ketikkan sintak title tadi, jadi seperti ini:
<head> <title> judul halaman web </title> </head>
Kemudian ketikkan <body>. Tag body merupakan badan/tubuh/inti dari halaman web, tampilan web yang kita lihat itu berasal dari <body>.
Body tuh tag container, jadi mesti ditutup. Hasil sampai sekarang:
<html>
<head>
<title> Judul Halaman Web </title>
</head>
<body>
</body>
?
Selanjutnya bagaimana cara menampilkan tulisan ke dalam HTML??? Ketikan sembarang text ke dalam tag body, contohnya seperti ini :
<body>
Contoh text yang ditampilin di halaman web, By: C.H.I.P. Sensei
</body>
terus, jika sudah, ketikkan </html>, script lengkapnya seperti ini :
<html>
<head>
<title> Judul Halaman Web </title>
</head>
<body>
Contoh text yang ditampilkan di halaman web, By: C.H.I.P. Sensei
</body>
</html>
kalo udah, sekarang save dengan nama dasarHTML.
kalo udah disave, buka data yang tadi di save.
<hr>
<marquee direction="up" behaviour="scroll"> what's up...?</marquee>
* MEMBUKA NOTEPAD.
LANGKAH 2
* MENGETIKKAN SINTAK/SYNTAX.
Berikut ini adalah syntax dasar yang membentuk suatu HTML.
pertama, ketikkan
<html>
tekan enter, kemudian ketik
<head>
Dalam container head, kita bisa mengetikan beberapa sintak, tapi yang paling penting jangan lupa mengetikan sintak <title> judul halaman web </title>. Untuk sintak lain nanti saja.
Sekarang ketikkan sintak title tadi, jadi seperti ini:
<head> <title> judul halaman web </title> </head>
Kemudian ketikkan <body>. Tag body merupakan badan/tubuh/inti dari halaman web, tampilan web yang kita lihat itu berasal dari <body>.
Body tuh tag container, jadi mesti ditutup. Hasil sampai sekarang:
<html>
<head>
<title> Judul Halaman Web </title>
</head>
<body>
</body>
?
Selanjutnya bagaimana cara menampilkan tulisan ke dalam HTML??? Ketikan sembarang text ke dalam tag body, contohnya seperti ini :
<body>
Contoh text yang ditampilin di halaman web, By: C.H.I.P. Sensei
</body>
terus, jika sudah, ketikkan </html>, script lengkapnya seperti ini :
<html>
<head>
<title> Judul Halaman Web </title>
</head>
<body>
Contoh text yang ditampilkan di halaman web, By: C.H.I.P. Sensei
</body>
</html>
kalo udah, sekarang save dengan nama dasarHTML.
kalo udah disave, buka data yang tadi di save.
<hr>
<marquee direction="up" behaviour="scroll"> what's up...?</marquee>
Struktur kode HTML yang harus selalu ada di setiap halaman situs adalah:
<html>
<head>
<title>Tulis Judul Anda di Sini</title>
<meta name="description" content="tulis deskripsi/penjelasan singkat situs anda di sini">
<meta name="keyword" content="tulis kata kunci halaman anda di sini">
</head>
<body>
Di sini adalah konten / isi halaman anda
</body>
</html>
1. HTML Gambar
HTML Image
- Tag <img> digunakan untuk menampilkan gambar pada dokumen HTML.
- Tag <img> termasuk salah satu dari empty element, maksudnya memiliki attribut tetapi tidak memiliki tag penutup.
- Browser menampilkan gambar anda berdasarkan letak tag <img> di dokumen HTML anda.
Syntax dari HTML image
<img src='url'/>Penjelasan :
- <img> adalah tag pembuka.
- src adalah attribut yang digunakan sebagai informasi darimana url letak gambar yang akan ditampilkan tersimpan.
Codingku HTML Editori
<!DOCTYPE html>
<html>
<body>
<img src="http://codingku.com/html/sample/street-fighter-4.jpg" />
</body>
</html>
Attribut alt pada HTML image
Attribut alt digunakan untuk menggantikan gambar dengan pesan teks bila gambar tidak bisa ditampilkan.
<img src="http://codingku.com/html/sample/street-fighter.jpg" alt="Gambar Ryu" />Menentukan tinggi dan panjang gambar
Untuk menentukan lebar dan panjang sebuah gambar maka perlu ditambahkan attribut width dan height pada tag img
<img src="http://codingku.com/html/sample/street-fighter.jpg" width="400" height="300" />
2. HTML Background
HTML Background dibagi menjadi dua :
- HTML Background dengan color/warna.
- HTML Background dengan image/gambar.
HTML Background dengan warna
Misalkan kita memiliki kita ingin memberikan background warna pada elemen tabel :
<table>
<tr>
<td width="100" height="100">
</td>
</tr>
</table>
Maka kita tambahkan attribut bgcolor="red" pada tag seperti berikut :
<table bgcolor="red">
<tr>
<td width="100" height="100">
</td>
</tr>
</table>
Buktikan sendiri :
Codingku HTML Editori
<table bgcolor="red">
<tr>
<td width="100" height="100">
</td>
</tr>
</table>Dengan CSS :
Kita tambahkan style="background-color:red" pada tag pembuka table.
<table style="background-color:red">
<tr>
<td width="100" height="100">
</td>
</tr>
</table>
<tr>
<td width="100" height="100">
</td>
</tr>
</table>
Buktikan sendiri :
Codingku HTML Editori
<table style="background-color:red">
<tr>
<td width="100" height="100">
</td>
</tr>
</table>HTML Background Image
Kita tetap akan menggunakan kode seperti di atas.
Tanpa CSS
Kita tambahkah dalam tag <table> denganbackground:"http://codingku.com/html/img/pattern.gif"
<table background="http://codingku.com/html/img/pattern.gif">
<tr>
<td width="100" height="100">
</td>
</tr>
</table>
Codingku HTML Editori
<table background="http://codingku.com/html/img/pattern.gif">
<tr>
<td width="100" height="100">
</td>
</tr>
</table>Dengan CSS
<table style="background-image:url('http://codingku.com/html/img/pattern.gif')">
<tr>
<td width="100" height="100">
</td>
</tr>
</table>Buktikah :
Codingku HTML Editori
<table
style="background-image:url('http://codingku.com/html/img/pattern.gif')">
<tr>
<td width="100" height="100">
</td>
</tr>
</table>
0 comments:
Post a Comment