Belajar dasar-dasar HTML

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.

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.

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.
3. Atribut size digunakan untuk menentukan ukuran 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
Header 7
<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.
Previous
Next Post »

2 komentar

Write komentar
Mikel De
AUTHOR
23 March 2015 at 08:28 delete

kayaknya susah nih.. codenya bikin mata sakit.. hehe.. tapi kalau udah mahir ya.. seperti membalikan tangan.. ijin belajar gan.. sama izin share.. tenang link aktif pasti itu..

Reply
avatar
23 March 2015 at 18:50 delete

Haha, siap gan, lanjutkan :D

Reply
avatar

PERHATIAN

1. dilarang berkomentar spam
2. dilarang menyebar luaskan artikel di blog ini tanpa menyertakan link aktif
3. jangan asal copas, blog ini dilindungi DMCA protection
4. link aktif tidak akan berfungsi
5. gunakan etika blogger dalam berkomentar
6. gunakan bahasa yang baik
7. komentar yang tidak relevan dianggap spam



EmoticonEmoticon