Tutorial dasar belajar HTML
Belajar dasar-dasar HTML - Sebelum belajar lebih jauh tentang HTML, akan lebih baik jika kita mengetahui definisi dari HTML terlebih dahulu, yang perlu di garis bawahi disini adalah, bahwa HTML(Hyper Text Markup Language) bukanlah sebuah bahasa pemrograman,
akan tetapi HTML adalah bahasa pengkodeaan untuk menghasilkan dokumen-dokumen hypertext untuk digunakan di World Wide Web yang berisi sekumpulan simbol-simbol atau tag-tag yang dituliskan dalam sebuah file yang dimaksudkan untuk menampilkan halaman pada web browser, Tag-tag tadi memberitahu browser bagaimana menampilkan halaman web dengan lengkap kepada pengguna. Tag-tag HTML pada umumnya selalu diawali dengan <tag> dan diakhiri dengan </tag> yang dimaksud tag HTML adalah seperti b, i, u dan lain sebagainya.
akan tetapi HTML adalah bahasa pengkodeaan untuk menghasilkan dokumen-dokumen hypertext untuk digunakan di World Wide Web yang berisi sekumpulan simbol-simbol atau tag-tag yang dituliskan dalam sebuah file yang dimaksudkan untuk menampilkan halaman pada web browser, Tag-tag tadi memberitahu browser bagaimana menampilkan halaman web dengan lengkap kepada pengguna. Tag-tag HTML pada umumnya selalu diawali dengan <tag> dan diakhiri dengan </tag> yang dimaksud tag HTML adalah seperti b, i, u dan lain sebagainya.
Belajar dasar-dasar dari HTML merupakan proses pertama yang umumnya dilakukan oleh para web programer. Nah setelah selesai dengan belajar HTML, maka kalian akan memiliki kemampuan untuk membuat halaman web statis. Berikutnya kalian pasti pengen bisa membuat halaman web yang memiliki kemampuan untuk berinteraksi dengan para pengunjung secara lebih intensif. Waktu itulah kalian perlu mulai belajar PHP. Setelah belajar PHP maka kalian bisa melanjutkan dengan belajar MySQL untuk menambah kemampuan PHP kalian.
pada dasarnya HTML diperlukan terutama untuk membuat tampilan web, PHP untuk menambah kemampuan interaksi dengan pengunjung, lalu kemampuan menyimpan data akan disupport oleh MySQL. Lengkap sudah semuanya. Namun tentu saja web programming tidak hanya sebatas itu. Selain belajar HTML, PHP dan MySQL, tentu saja kalian dapat mempelajari juga bahasa script lain yang akan lebih memperindah tampilan web kalian dan mempermudah proses desain web kalian seperti CSS dan Javascript. Kalian mungkin juga harus menambah ketrampilan dalam membuat desain web dengan berbagai aplikasi pembuat web seperti Adobe Dreamweaver dan FrontPage serta belajar aplikasi pengolah gambar seperti Adobe Photoshop, Illustrator dan lain sebagainya.
tapi pada kesempatan kali ini, saya tidak akan membahas tentang apa itu PHP, MySQL, CSS maupun JavaScript. saya akan membahas tentang dasar-dasar HTML terlebih dahulu, jika kita telah menguasai HTML maka kita bisa mulai mempelajari PHP dan MySQL serta CSS dan JavaScript seiring dengan berjalannya waktu.
2. <head> <title>Judul Dokumen web</title> </head>
3. <body>
4. isi dokumen web
5. </body>
6. </html>
pada dasarnya HTML diperlukan terutama untuk membuat tampilan web, PHP untuk menambah kemampuan interaksi dengan pengunjung, lalu kemampuan menyimpan data akan disupport oleh MySQL. Lengkap sudah semuanya. Namun tentu saja web programming tidak hanya sebatas itu. Selain belajar HTML, PHP dan MySQL, tentu saja kalian dapat mempelajari juga bahasa script lain yang akan lebih memperindah tampilan web kalian dan mempermudah proses desain web kalian seperti CSS dan Javascript. Kalian mungkin juga harus menambah ketrampilan dalam membuat desain web dengan berbagai aplikasi pembuat web seperti Adobe Dreamweaver dan FrontPage serta belajar aplikasi pengolah gambar seperti Adobe Photoshop, Illustrator dan lain sebagainya.
tapi pada kesempatan kali ini, saya tidak akan membahas tentang apa itu PHP, MySQL, CSS maupun JavaScript. saya akan membahas tentang dasar-dasar HTML terlebih dahulu, jika kita telah menguasai HTML maka kita bisa mulai mempelajari PHP dan MySQL serta CSS dan JavaScript seiring dengan berjalannya waktu.
Struktur Dasar HTML
1. <html>2. <head> <title>Judul Dokumen web</title> </head>
3. <body>
4. isi dokumen web
5. </body>
6. </html>
Menggunakan Tag Pada HTML
Contoh Tag pada HTML
Contoh | Hasil |
<b>Ini tulisan tebal</b> | Ini tulisan tebal |
<i>Ini tulisan miring</i> | Ini tulisan miring |
<u>Ini tulisan bergaris bawah</u> | Ini tulisan bergaris bawah |
Ini baris 1<br>Ini baris 2 | Ini baris 1 Ini baris 2 |
Ini garis horizontal <hr> | Ini garis horizontal |
Ada beberapa tag yang memilki atribut didalamnya, seperti tag <font>, <table>, <input> dan
sebagainya. Pada tag font ia memiliki beberapa atribut diantaranya atribut: color, size, face.
Untuk lebih memahami atribut lihatlah contoh berikut ini.
<font color=”red” face=”Arial” size=”12”>Ini Font Arial berwarna merah dan berukuran 12 pt</font>
1. Atribut color digunakan untuk menentukan warna tulisan.
2. Atribut face digunakan untuk menentukan jenis huruf.
sebagainya. Pada tag font ia memiliki beberapa atribut diantaranya atribut: color, size, face.
Untuk lebih memahami atribut lihatlah contoh berikut ini.
1. Atribut color digunakan untuk menentukan warna tulisan.
2. Atribut face digunakan untuk menentukan jenis huruf.
Contoh Tag pada HTML
Tag Utama
Tag | Atribut | Deskripsi |
<html> </html> | Baris paling atas dari setiap file HTML | |
<head> </head> | Informasi Umum dari sebuah halaman Web | |
<body> </body> | § Background § Bgcolor § Bgsound § Font § Link § Alink § Vlink § Topmargin § Leftmargin § Marginheight § marginwidth | Setingan atribut untuk seluruh dokumen |
Modifikasi Teks
Tag | Deskripsi | Contoh |
<b> </b> | Teks tebal | Teks tebal |
<i> </i> | Teks Miring | Teks Miring |
<u> </u> | Teks Bergaris Bawah | Teks Bergaris Bawah |
<h1> </h1> | Header 1 | Header 1 |
<h2> </h2> | Header 2 | Header 2 |
<h3> </h3> | Header 3 | Header 3 |
<h4> </h4> | Header 4 | Header 4 |
<h5> </h5> | Header 5 | Header 5 |
<h6> </h6> | Header 6 | Header 6 |
<h7> </h7> | Menjadi teks standard, karena maksimal sampai H6 saja | |
<sub> </sub> | Subscript | Subscript |
<sup> </sup> | Superscript | Superscript |
Font
Tag | Atribut | Deskripsi |
<font> </font> | § color § size § name | Mengubah gaya suatu huruf |
Link
Tag | Atribut | Deskripsi |
<a> </a> | § href § target § style § class § name § id | Membuat link kes dokumen atau situs lain |
Gambar
Tag | Atribut | Deskripsi |
<img> </img> | § src § alt § name § border § height § width | Menampilakan gambar |
Formatting
Tag | Contoh | Deskripsi |
<blockquote> </ blockquote > | Digunakan untuk mengatur teks dan gambar dalam suatu tag | |
<ol> </ol> | 1. item 1 | Orderer List (digunakan dengan <li>) |
<ul> </ul> | • item 1 | Unorderer List (digunakan dengan <li>) |
<li> </li> | Element list | |
<dl> </dl> | Definition list(digunakan bersama <dd> dan <dt>) | |
<dd> </dd> | Definition description | |
<dt> </dt> | Definition term | |
<p> </p> | Paragraph | |
<br> | Ganti baris | |
<hr> | Garis horizontal | |
<center> </center> | Menengahkan elemen |
Table
Tag | Atribut | Deskripsi |
<table> </table> | § border § cellpadding § cellspacing § width § height § name § id § title § bgcolor § background § alingn § valign | Mengatur semua element table |
<tr> </tr> | § height § bgcolor § background § align § valign § title | Membuat baris baru |
<td> </td> | § height § width § bgcolor § background § align § valign § title § colspan § rowspan | Membuat kolom |
<th> </th> | § height § width § bgcolor § background § align § valign § title § colspan § rowspan | Header table, otomatis rata tengah dan tebal |
<tbody> </tbody> | § height § width § align § valign § bgcolor § background § | Format yang berlaku bagi cell yang diapit tag |
<colgroup> </colgroup> | § height § width § align § valign § bgcolor § background § colspan | Format yang berlaku bagi kolom |
Silahkan digunakan Sebaik-baik nya, silahkan copas artikel di blog ini, tapi harus mencantumkan live link sumber dari http://verdiandzilqurnaini.blogspot.com
gunakan kode
<a href="http://verdiandzilqurnaini.blogspot.com">http://verdiandzilqurnaini.blogspot.com</a>
Cukup Sekian sedikit Tips tentang dasar-dasar HTML yang bisa saya berikan, jika ada kesalahan admin mohon maaf yang sebesar besarnya, TERIMA KASIH.
![Chronus Home & Lock Widget v5.12 BETA 5 [Pro]](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBhtnDWYOBBGEedeaaFR6ahVJe2GrTCnKkS_ZHM4jXaW1o2tZQVgVq4ZGwjZe9kLKZPvR1W40PuZ1ZaGJFS7_bsw0Orlc4fjFmsU3evKgdyZPOcQGLhMs7DqAtvrMLrwvH5kdjAnISRwxa/s72-c/ch.jpg "Chronus Home & Lock Widget v5.12 BETA 5 [Pro]")
